:root{--primary: #2563eb;--primary-hover: #1d4ed8;--text: #1f2937;--text-secondary: #6b7280;--border: #e5e7eb;--bg: #f9fafb;--white: #ffffff;--error: #dc2626;--success: #16a34a;--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:inherit;cursor:pointer}.app{max-width:1400px;margin:0 auto;padding:var(--spacing-sm)}.app-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) 0;margin-bottom:var(--spacing-lg);border-bottom:1px solid var(--border)}.app-header h1{font-size:1.875rem;font-weight:700;color:var(--text)}.logout-button{padding:var(--spacing-xs) var(--spacing-md);background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);font-size:.875rem;transition:all .2s}.logout-button:hover{background:var(--bg)}.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--spacing-md)}.login-form{width:100%;max-width:400px;padding:var(--spacing-xl);background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.login-form h2{font-size:1.5rem;margin-bottom:var(--spacing-xs);text-align:center}.login-subtitle{color:var(--text-secondary);text-align:center;margin-bottom:var(--spacing-lg);font-size:.875rem}.login-input{width:100%;padding:var(--spacing-sm);border:1px solid var(--border);border-radius:var(--radius-md);font-size:1rem;margin-bottom:var(--spacing-sm);transition:border-color .2s}.login-input:focus{outline:none;border-color:var(--primary)}.login-button{width:100%;padding:var(--spacing-sm);background:var(--primary);color:var(--white);border:none;border-radius:var(--radius-md);font-size:1rem;font-weight:600;transition:background .2s}.login-button:hover{background:var(--primary-hover)}.error-message{color:var(--error);font-size:.875rem;margin-bottom:var(--spacing-sm)}.date-filter{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);align-items:center;padding:var(--spacing-md);background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:var(--spacing-lg)}.date-filter-inputs{display:flex;align-items:center;gap:var(--spacing-sm);flex:1}.date-input{padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.875rem}.date-separator{color:var(--text-secondary);font-size:.875rem}.date-filter-actions{display:flex;gap:var(--spacing-xs)}.filter-button{padding:var(--spacing-xs) var(--spacing-md);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.875rem;transition:all .2s}.filter-apply{background:var(--primary);color:var(--white);border-color:var(--primary)}.filter-apply:hover{background:var(--primary-hover)}.filter-reset{background:var(--white);color:var(--text)}.filter-reset:hover{background:var(--bg)}.image-grid-container{margin-bottom:var(--spacing-xl)}.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}@media(max-width:640px){.image-grid{grid-template-columns:1fr}}.image-card{background:var(--white);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;cursor:pointer}.image-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}.image-card-thumbnail{width:100%;aspect-ratio:1;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden}.image-card-thumbnail img{width:100%;height:100%;object-fit:cover}.image-loading,.image-error{color:var(--text-secondary);font-size:.875rem}.image-card-info{padding:var(--spacing-sm)}.image-date{font-size:.875rem;color:var(--text-secondary);margin-bottom:.25rem}.image-member{font-weight:600;margin-bottom:.25rem}.image-notes{font-size:.875rem;color:var(--text-secondary);line-height:1.4}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-md)}.modal-content{background:var(--white);border-radius:var(--radius-lg);max-width:90vw;max-height:90vh;overflow:auto;position:relative;display:flex;flex-direction:column}.modal-close{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);width:32px;height:32px;background:var(--white);border:none;border-radius:50%;font-size:1.5rem;line-height:1;box-shadow:var(--shadow-md);z-index:1;transition:background .2s}.modal-close:hover{background:var(--bg)}.modal-image-container{display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg);min-height:300px}.modal-image{max-width:100%;max-height:70vh;object-fit:contain;border-radius:var(--radius-md)}.modal-loading,.modal-error{color:var(--text-secondary)}.modal-info{padding:var(--spacing-md) var(--spacing-lg) var(--spacing-lg);border-top:1px solid var(--border)}.modal-info h3{font-size:1.25rem;margin-bottom:.5rem}.modal-date{color:var(--text-secondary);font-size:.875rem;margin-bottom:var(--spacing-sm)}.modal-notes{color:var(--text);line-height:1.6}.load-more-container{display:flex;justify-content:center;margin:var(--spacing-lg) 0}.load-more-button{padding:var(--spacing-sm) var(--spacing-xl);background:var(--primary);color:var(--white);border:none;border-radius:var(--radius-md);font-size:1rem;font-weight:600;transition:background .2s}.load-more-button:hover{background:var(--primary-hover)}.loading-container,.loading-more,.empty-container,.error-container{text-align:center;padding:var(--spacing-xl);color:var(--text-secondary)}.empty-hint,.error-hint{font-size:.875rem;margin-top:.5rem}.error-container{background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.error-container .error-message{color:var(--error);font-size:1rem;margin-bottom:.5rem}