.search-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:500;background:#000000b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;justify-content:center;padding-top:10vh;animation:lightboxFadeIn .15s ease}.search-panel{width:100%;max-width:600px;max-height:70vh;background:var(--bg-surface);border-radius:var(--radius);border:1px solid var(--border);box-shadow:0 20px 60px #0009;overflow:hidden;display:flex;flex-direction:column;animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.search-input-row{display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--border)}.search-icon{color:var(--text-dim);flex-shrink:0}.search-input{flex:1;padding:16px 12px;background:none;border:none;color:var(--text);font-size:1rem;outline:none}.search-input::placeholder{color:var(--text-dim)}.search-close-btn{font-size:.75rem;padding:4px 8px;color:var(--text-dim);background:var(--bg-elevated);border-radius:4px;border:1px solid var(--border)}.search-results{overflow-y:auto;flex:1;padding:8px}.search-status{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px;color:var(--text-secondary);font-size:.875rem}.search-group{padding:8px;border-radius:var(--radius-sm);transition:background var(--transition)}.search-group:hover{background:var(--bg-surface-hover)}.search-group-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:4px 0;text-align:left}.search-group-name{font-size:.9rem;font-weight:600;text-transform:capitalize;color:var(--text)}.search-group-count{font-size:.75rem;color:var(--text-dim)}.search-group-thumbs{display:flex;gap:4px;margin-top:8px;overflow:hidden}.search-thumb{width:48px;height:48px;border-radius:4px;object-fit:cover}.search-thumb-more{width:48px;height:48px;border-radius:4px;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--text-dim)}@media(max-width:640px){.search-panel{max-width:100%;max-height:100vh;border-radius:0;margin:0}.search-overlay{padding-top:0}}.header{position:sticky;top:0;z-index:100;background:#0d0d0dd9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}.header-inner{max-width:var(--max-width);margin:0 auto;padding:0 20px;height:60px;display:flex;align-items:center;justify-content:space-between}.header-logo{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:700;font-size:1.125rem;text-decoration:none}.header-logo:hover{color:var(--text)}.header-logo-icon{font-size:1.5rem}.header-actions{display:flex;align-items:center;gap:8px}.header-btn{display:flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:var(--radius-sm);color:var(--text-secondary);transition:all var(--transition)}.header-btn:hover{background:var(--bg-surface);color:var(--text)}.search-btn{padding:8px}.header-user{display:flex;align-items:center;gap:12px;margin-left:8px}.header-user-name{font-size:.85rem;color:var(--text-secondary)}.logout-btn{font-size:.8rem;color:var(--text-dim);text-decoration:none}@media(max-width:640px){.header-user-name{display:none}.header-logo-text{font-size:1rem}}.album-card{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--bg-surface);transition:transform var(--transition),box-shadow var(--transition);text-decoration:none;color:var(--text);display:block}.album-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px #00000080}.album-card-image{position:relative;aspect-ratio:4 / 3;overflow:hidden}.album-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.album-card:hover .album-card-image img{transform:scale(1.05)}.album-card-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.6) 100%)}.album-card-info{position:absolute;bottom:0;left:0;right:0;padding:16px}.album-card-title{font-size:1rem;font-weight:600;text-transform:capitalize;margin-bottom:2px;text-shadow:0 1px 4px rgba(0,0,0,.5)}.album-card-count{font-size:.8rem;color:#ffffffb3;text-shadow:0 1px 4px rgba(0,0,0,.5)}.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}@media(max-width:640px){.album-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}}.photo-card{position:relative;aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-surface);cursor:pointer;border:none;padding:0;transition:transform var(--transition)}.photo-card:hover{transform:scale(1.02)}.photo-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.photo-card-shimmer{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(110deg,var(--bg-surface) 30%,var(--bg-surface-hover) 50%,var(--bg-surface) 70%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite}.photo-card.loaded .photo-card-shimmer{display:none}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.photo-card img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease}.photo-card.loaded img{opacity:1}.photo-card-error{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--text-secondary);font-size:.7rem;text-align:center;padding:8px;overflow:hidden}.photo-card-error span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.photo-card.errored .photo-card-shimmer{animation:none;background:var(--surface-hover)}.photo-card-hover{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,transparent 60%,rgba(0,0,0,.7) 100%);opacity:0;transition:opacity var(--transition);display:flex;align-items:flex-end;padding:10px}.photo-card:hover .photo-card-hover{opacity:1}.photo-card-name{font-size:.75rem;color:#ffffffe6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-shadow:0 1px 2px rgba(0,0,0,.5)}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:#000000f2;display:flex;align-items:center;justify-content:center;animation:lightboxFadeIn .2s ease}@keyframes lightboxFadeIn{0%{opacity:0}to{opacity:1}}.lightbox-close{position:absolute;top:16px;right:16px;z-index:1010;padding:8px;color:#ffffffb3;border-radius:var(--radius-sm);transition:all var(--transition)}.lightbox-close:hover{color:#fff;background:#ffffff1a}.lightbox-counter{position:absolute;top:20px;left:50%;transform:translate(-50%);z-index:1010;font-size:.85rem;color:#fff9;font-variant-numeric:tabular-nums}.lightbox-info-btn{position:absolute;top:16px;right:56px;z-index:1010;padding:8px;color:#ffffffb3;border-radius:var(--radius-sm);transition:all var(--transition)}.lightbox-info-btn:hover{color:#fff;background:#ffffff1a}.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:1010;padding:16px 8px;color:#ffffff80;transition:all var(--transition);border-radius:var(--radius-sm)}.lightbox-nav:hover{color:#fff;background:#ffffff1a}.lightbox-prev{left:12px}.lightbox-next{right:12px}.lightbox-image-container{display:flex;align-items:center;justify-content:center;width:calc(100vw - 120px);height:calc(100vh - 40px)}.lightbox-spinner{position:absolute;border-top-color:#fff9}.lightbox-error{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-secondary)}.lightbox-error p{font-size:1rem;margin:0}.lightbox-error-name{font-size:.85rem;opacity:.6}.lightbox-image{max-width:100%;max-height:100%;object-fit:contain;opacity:0;transition:opacity .3s ease;-webkit-user-select:none;user-select:none}.lightbox-image.loaded{opacity:1}.lightbox-info{position:absolute;bottom:0;left:0;right:0;padding:20px 24px;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);animation:slideUp .2s ease}.lightbox-info h3{font-size:1rem;font-weight:600;margin-bottom:6px;color:#ffffffe6}.lightbox-info p{font-size:.8rem;color:#fff9;margin-bottom:2px;text-transform:capitalize}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:640px){.lightbox-image-container{width:100vw;height:calc(100vh - 40px)}.lightbox-image{max-height:100%}.lightbox-nav{padding:24px 4px}.lightbox-prev{left:4px}.lightbox-next{right:4px}}.lightbox-delete-btn{position:absolute;top:16px;right:96px;z-index:1010;padding:8px;color:#ffffffb3;border-radius:var(--radius-sm);transition:all var(--transition)}.lightbox-delete-btn:hover{color:#ff6b6b;background:#ff6b6b26}.lightbox-confirm{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1020;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;text-align:center;min-width:280px;animation:lightboxFadeIn .15s ease}.lightbox-confirm p{font-size:1rem;font-weight:600;color:var(--text);margin:0 0 4px}.lightbox-confirm-name{font-size:.85rem;color:var(--text-secondary);display:block;margin-bottom:20px}.lightbox-confirm-actions{display:flex;gap:10px;justify-content:center}.lightbox-confirm-cancel,.lightbox-confirm-delete{padding:8px 20px;border-radius:var(--radius-sm);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition)}.lightbox-confirm-cancel{background:var(--surface-hover);color:var(--text);border:1px solid var(--border)}.lightbox-confirm-cancel:hover{background:var(--border)}.lightbox-confirm-delete{background:#dc3545;color:#fff;border:1px solid #dc3545}.lightbox-confirm-delete:hover{background:#c82333}.lightbox-confirm-delete:disabled{opacity:.6;cursor:not-allowed}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}@media(min-width:640px){.photo-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}}@media(min-width:1024px){.photo-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}}.load-more{display:flex;justify-content:center;padding:32px 0}.load-more-btn{padding:12px 32px;background:var(--bg-surface);color:var(--text-secondary);border-radius:var(--radius);font-size:.9rem;border:1px solid var(--border);transition:all var(--transition)}.load-more-btn:hover{background:var(--bg-surface-hover);color:var(--text);border-color:var(--text-dim)}.login-page{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 140px);padding:40px 20px}.login-card{text-align:center;max-width:400px;width:100%}.login-icon{font-size:4rem;margin-bottom:16px}.login-title{font-size:2rem;font-weight:700;margin-bottom:8px;letter-spacing:-.02em}.login-subtitle{color:var(--text-secondary);margin-bottom:32px;font-size:1rem}.login-buttons{display:flex;flex-direction:column;gap:12px}.login-btn{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 24px;border-radius:var(--radius-sm);font-size:.95rem;font-weight:500;text-decoration:none;transition:all var(--transition)}.login-btn-microsoft{background:#fff;color:#333}.login-btn-microsoft:hover{background:#f0f0f0;color:#333}.login-btn-github{background:#24292e;color:#fff}.login-btn-github:hover{background:#2f363d;color:#fff}.app{min-height:100vh;display:flex;flex-direction:column}.main{flex:1;width:100%;max-width:var(--max-width);margin:0 auto;padding:24px 20px 60px}.loading{display:flex;align-items:center;justify-content:center;padding:80px 20px;color:var(--text-secondary);font-size:1rem}.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin-right:12px}@keyframes spin{to{transform:rotate(360deg)}}.error{text-align:center;padding:60px 20px;color:var(--text-secondary)}.error h2{font-size:1.25rem;margin-bottom:8px;color:var(--text)}.error button{margin-top:16px;padding:10px 24px;background:var(--accent);color:#000;border-radius:var(--radius-sm);font-weight:600;transition:background var(--transition)}.error button:hover{background:var(--accent-hover)}.empty{text-align:center;padding:80px 20px;color:var(--text-secondary)}.empty-icon{font-size:3rem;margin-bottom:16px}.page-title{font-size:1.75rem;font-weight:700;margin-bottom:24px;letter-spacing:-.02em}.page-subtitle{font-size:.9rem;color:var(--text-secondary);font-weight:400;margin-left:8px}.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--text-secondary);font-size:.9rem;padding:8px 14px;margin-bottom:20px;border-radius:8px;background:var(--surface);border:1px solid var(--border);transition:all var(--transition)}.back-link:hover{color:var(--text);background:var(--surface-hover);border-color:var(--accent)}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease forwards}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0d0d0d;--bg-surface: #1a1a1a;--bg-surface-hover: #242424;--bg-elevated: #2a2a2a;--text: #ebebeb;--text-secondary: #999;--text-dim: #666;--accent: #6c9cff;--accent-hover: #8bb2ff;--border: #2a2a2a;--radius: 12px;--radius-sm: 8px;--shadow: 0 2px 12px rgba(0, 0, 0, .4);--transition: .2s ease;--max-width: 1400px}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover)}button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}img{display:block;max-width:100%}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}
