*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f0f1a;--bg-secondary:#1a1a2e;--bg-tertiary:#2a2a3e;--text:#f0e6d3;--text-secondary:#a89b8c;--accent:#c9a87c;--accent-hover:#dfc49e;--destructive:#e07a5f;--select-blue:#0a84ff;--divider:#c9a87c1a;--font-display:"Playfair Display", Georgia, serif;--font:"Inter", -apple-system, sans-serif;--radius:12px;--transition:.25s ease;--safe-bottom:env(safe-area-inset-bottom,0px)}html{height:100%;font-size:16px;overflow:hidden}html::-webkit-scrollbar{display:none}body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior:none;height:100%;padding-top:env(safe-area-inset-top,0px);overflow:hidden}.app{flex-direction:column;height:100%;display:flex;overflow:hidden}.app-main{-webkit-overflow-scrolling:touch;padding-bottom:calc(72px + var(--safe-bottom));flex:1;overflow:hidden auto}.app-main::-webkit-scrollbar{display:none}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--text-secondary);border-radius:2px}.login-page{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;padding:2rem;animation:.8s fadeIn;display:flex}.login-page h1{font-family:var(--font-display);color:var(--accent);letter-spacing:.02em;margin-bottom:.25rem;font-size:clamp(2.5rem,6vw,4rem);font-weight:400}.login-page .subtitle{font-family:var(--font-display);color:var(--text-secondary);margin-bottom:3rem;font-size:1.1rem;font-style:italic;font-weight:400}.login-form{flex-direction:column;gap:.75rem;width:100%;max-width:320px;display:flex}.login-form input{background:var(--bg-secondary);color:var(--text);font-size:1rem;font-family:var(--font);transition:background var(--transition);border:none;border-radius:10px;outline:none;padding:.85rem 1rem}.login-form input:focus{background:var(--bg-tertiary)}.login-form input::placeholder{color:var(--text-secondary)}.login-form button{background:var(--accent);color:var(--bg);cursor:pointer;transition:all var(--transition);border:none;border-radius:10px;margin-top:.25rem;padding:.85rem;font-size:1rem;font-weight:500}.login-form button:hover{background:var(--accent-hover);transform:translateY(-1px)}.login-error{color:var(--destructive);min-height:1.2em;font-size:.85rem}.app-header{z-index:100;-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--divider);background:#0f0f1ad9;justify-content:center;align-items:center;padding:12px 16px;display:flex;position:sticky;top:0}.app-header h1{font-family:var(--font-display);color:var(--accent);font-size:1.3rem;font-weight:400}.btn-text{color:var(--accent);cursor:pointer;font-size:.95rem;font-weight:400;font-family:var(--font);white-space:nowrap;background:0 0;border:none;align-items:center;gap:2px;padding:4px 0;display:flex}.btn-text:hover{opacity:.7}.btn-text.light{color:#ffffffe6}.btn-icon-round{color:var(--accent);cursor:pointer;transition:all var(--transition);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:4px;display:flex}.btn-icon-round:hover{opacity:.7}.btn-icon-round:disabled{opacity:.3;cursor:default}.page-top-bar{justify-content:space-between;align-items:center;gap:8px;padding:8px 16px 12px;display:flex}.page-top-actions{align-items:center;gap:12px;display:flex}.page-title{font-family:var(--font-display);letter-spacing:.01em;flex:1;min-width:0;font-size:1.8rem;font-weight:400}.tab-bar{padding:8px 0 calc(8px + var(--safe-bottom));-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--divider);z-index:100;background:#0f0f1ae6;justify-content:center;gap:3rem;display:flex;position:fixed;bottom:0;left:0;right:0}.tab-btn{color:var(--text-secondary);cursor:pointer;font-size:.65rem;font-family:var(--font);transition:color var(--transition);background:0 0;border:none;flex-direction:column;align-items:center;gap:2px;padding:4px 12px;display:flex}.tab-btn svg{transition:color var(--transition)}.tab-btn.active,.tab-btn.active svg{color:var(--accent)}.photo-grid{grid-template-columns:repeat(3,1fr);gap:2px;padding:0 2px;display:grid}.grid-photo{aspect-ratio:1;cursor:pointer;background:var(--bg-secondary);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;will-change:transform;position:relative;overflow:hidden}.grid-photo img,.grid-photo video{object-fit:cover;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;transition:transform .2s,opacity .15s}.grid-photo:active img,.grid-photo:active video{opacity:.7}.pending-photo{position:relative}.pending-photo.uploading img,.pending-photo.uploading .video-poster-pending{filter:grayscale()brightness(.5);transition:filter .5s}.pending-photo.done img{filter:none;transition:filter .5s}.pending-photo.error img,.pending-photo.error .video-poster-pending{filter:grayscale()brightness(.3)}.video-poster-pending{background:var(--bg-tertiary);width:100%;height:100%}.pending-overlay{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.pending-overlay.error{pointer-events:auto;cursor:pointer;color:var(--destructive);background:#0000004d}.pending-spinner{border:2.5px solid #fff3;border-top-color:#fffc;border-radius:50%;width:24px;height:24px;animation:.8s linear infinite spin}.video-overlay{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.video-overlay svg{filter:drop-shadow(0 2px 6px #0009);opacity:.85}.grid-photo.select-mode{cursor:pointer}.grid-photo.selected img,.grid-photo.selected video{border-radius:4px;transform:scale(.88)}.select-check{z-index:2;background:#0000004d;border:2px solid #ffffffb3;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;transition:all .2s;display:flex;position:absolute;bottom:4px;right:4px}.select-check.checked{background:0 0;border-color:#0000}.select-count{color:var(--text);white-space:nowrap;font-size:.9rem;font-weight:500}.video-badge{color:#fff;pointer-events:none;background:#0009;border-radius:4px;padding:2px 6px;font-size:.65rem;font-weight:600;position:absolute;bottom:6px;left:6px}.photo-section{margin-bottom:0}.section-header{align-items:baseline;gap:8px;padding:16px 16px 6px;display:flex}.section-header h3{font-family:var(--font);color:var(--text);text-transform:none;font-size:.85rem;font-weight:600}.albums-page,.all-photos-page,.album-detail-page{animation:.4s fadeIn}.albums-grid{grid-template-columns:repeat(2,1fr);gap:16px;padding:0 16px;display:grid}.album-tile{cursor:pointer;position:relative}.album-tile-cover{aspect-ratio:1;border-radius:var(--radius);background:var(--bg-secondary);overflow:hidden}.album-tile-cover img{object-fit:cover;width:100%;height:100%;transition:transform .3s}.album-tile:active .album-tile-cover img{transform:scale(.97)}.album-tile-empty{width:100%;height:100%;color:var(--text-secondary);justify-content:center;align-items:center;display:flex}.album-tile-info{padding:8px 2px 0}.album-tile-title{font-size:.9rem;font-weight:500;display:block}.album-tile-count{color:var(--text-secondary);font-size:.8rem;display:block}.album-tile-delete{color:#fff;cursor:pointer;opacity:0;width:26px;height:26px;transition:opacity var(--transition);background:#00000080;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:6px;right:6px}.album-tile:hover .album-tile-delete{opacity:1}.album-tile-delete:hover{background:var(--destructive)}.create-form{background:var(--bg-secondary);border-radius:var(--radius);flex-direction:column;gap:10px;margin:0 16px 20px;padding:16px;display:flex}.create-form input{background:var(--bg-tertiary);color:var(--text);font-size:.95rem;font-family:var(--font);border:none;border-radius:8px;outline:none;padding:10px 12px}.create-form-actions{justify-content:flex-end;gap:8px;display:flex}.btn-cancel{background:var(--bg-tertiary);color:var(--text);cursor:pointer;font-size:.9rem;font-family:var(--font);border:none;border-radius:8px;padding:8px 16px}.btn-confirm{background:var(--accent);color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;font-family:var(--font);border:none;border-radius:8px;padding:8px 16px}.empty-state{text-align:center;color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;padding:4rem 2rem;display:flex}.empty-icon{margin-bottom:1rem}.empty-hint{opacity:.6;margin-top:.25rem;font-size:.85rem}.loading-state{justify-content:center;align-items:center;padding:4rem;display:flex}.spinner{border:2px solid var(--divider);border-top-color:var(--text-secondary);border-radius:50%;width:24px;height:24px;animation:.8s linear infinite spin}.select-actions{padding:12px 16px calc(12px + var(--safe-bottom));-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--divider);z-index:200;background:#0f0f1af2;justify-content:center;gap:2rem;transition:transform .2s;display:flex;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%)}.select-actions.show{transform:translateY(0)}.action-btn{color:var(--text);font-size:.7rem;font-family:var(--font);cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:3px;padding:4px 16px;display:flex}.action-btn.destructive{color:var(--destructive)}.action-btn:disabled{opacity:.4}.upload-indicator{margin-bottom:8px;padding:0 16px}.upload-bar{background:var(--accent);border-radius:1px;height:2px;animation:1.5s infinite uploadPulse}.lightbox-apple{z-index:1000;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;opacity:0;background:#000;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:fixed;inset:0}.lightbox-apple.open{opacity:1}.lb-hero{object-fit:contain;will-change:transform;opacity:0;z-index:1001;width:100vw;height:100vh;position:fixed;top:0;left:0}.lb-topbar{padding:12px 16px;padding-top:max(12px, env(safe-area-inset-top));z-index:1010;opacity:0;pointer-events:none;background:linear-gradient(#00000080 0%,#0000 100%);justify-content:space-between;align-items:center;transition:opacity .25s,transform .25s;display:flex;position:absolute;top:0;left:0;right:0;transform:translateY(-8px)}.lb-topbar.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.lb-topbar button{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;transition:background .2s;display:flex}.lb-topbar button:hover{background:#fff3}.lb-delete-btn{color:var(--destructive)!important}.lb-counter{color:#ffffffb3;font-size:.9rem;font-weight:500}.lb-arrow{color:#fff;cursor:pointer;z-index:1010;opacity:0;pointer-events:none;background:#ffffff14;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:opacity .25s,background .2s;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.lb-arrow.visible{opacity:1;pointer-events:auto}.lb-arrow:hover{background:#ffffff2e}.lb-arrow-left{left:16px}.lb-arrow-right{right:16px}@media (width<=768px){.lb-arrow{display:none}}.lb-scroll{will-change:transform;width:100%;height:100%;position:relative;overflow:visible}.lb-media{will-change:transform, opacity;justify-content:center;align-items:center;width:100%;min-height:100dvh;display:flex;overflow:hidden}.lb-media.from-left{opacity:0;transform:translate(-40px)}.lb-media.from-right{opacity:0;transform:translate(40px)}.lb-media.settle{opacity:1;transition:opacity .28s,transform .28s;transform:translate(0,0)}.lb-next-img{z-index:999;opacity:0;will-change:transform, opacity;pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.lb-next-img img{object-fit:contain;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;max-width:100%;max-height:100%}.lb-media img{object-fit:contain;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;will-change:transform;transform-origin:50%;max-width:100%;max-height:100%}.lb-media video{object-fit:contain;max-width:100%;max-height:100%}.lb-caption{text-align:center;color:#ffffffd9;opacity:0;pointer-events:none;padding:0 24px;font-size:.9rem;transition:opacity .25s,transform .25s;position:absolute;bottom:80px;left:0;right:0;transform:translateY(4px)}.lb-caption.visible{opacity:1;transform:translateY(0)}.lb-thumb-strip{padding:8px 0 calc(12px + var(--safe-bottom));opacity:0;pointer-events:none;z-index:1010;background:linear-gradient(#0000 0%,#0009 100%);transition:opacity .25s,transform .25s;position:absolute;bottom:0;left:0;right:0;transform:translateY(8px)}.lb-thumb-strip.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.lb-thumb-track{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:3px;padding:0 16px;display:flex;overflow-x:auto}.lb-thumb-track::-webkit-scrollbar{display:none}.lb-thumb{background:var(--bg-secondary);cursor:pointer;opacity:.5;border:2px solid #0000;border-radius:4px;flex-shrink:0;width:48px;height:48px;padding:0;transition:border-color .2s,opacity .2s;overflow:hidden}.lb-thumb.active{opacity:1;border-color:#fff}.lb-thumb img{object-fit:cover;width:100%;height:100%}.lb-thumb-video{background:var(--bg-tertiary);justify-content:center;align-items:center;width:100%;height:100%;display:flex}.info-panel-backdrop{z-index:2000;background:0 0;justify-content:center;align-items:flex-end;transition:background .25s;display:flex;position:fixed;inset:0}.info-panel-backdrop.open{background:#0006}.info-panel{background:var(--bg-secondary);width:100%;max-width:500px;max-height:80vh;padding-bottom:calc(16px + var(--safe-bottom));will-change:transform;border-radius:16px 16px 0 0;transition:transform .3s cubic-bezier(.32,.72,0,1);overflow-y:auto;transform:translateY(100%)}.info-panel.open{transform:translateY(0)}.info-panel-header{justify-content:center;align-items:center;padding:0 16px 8px;display:flex}.info-panel-title{font-family:var(--font-display);color:var(--text);font-size:1.1rem}.info-panel-drag-area{cursor:grab;padding:12px 0 8px}.info-panel-handle{background:var(--text-secondary);opacity:.4;border-radius:3px;width:36px;height:5px;margin:0 auto}.lb-fav-btn.active{animation:.3s favPop}@keyframes favPop{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.info-panel-content{padding:0 16px}.info-panel-loading{justify-content:center;align-items:center;padding:3rem;display:flex}.info-map{border-radius:12px;width:100%;height:180px;margin-bottom:16px;position:relative;overflow:hidden}.info-map .leaflet-container{background:var(--bg-tertiary)}.info-map-label{color:#fff;z-index:1000;pointer-events:none;background:linear-gradient(#0000,#000000b3);padding:8px 12px;font-size:.85rem;font-weight:500;position:absolute;bottom:0;left:0;right:0}.info-section{border-bottom:1px solid var(--divider);gap:12px;padding:12px 0;display:flex}.info-section:last-child{border-bottom:none}.info-icon{color:var(--accent);flex-shrink:0;padding-top:2px}.info-label{color:var(--text-secondary);margin-bottom:2px;font-size:.85rem}.info-value{color:var(--text);margin-bottom:2px;font-size:.95rem}.info-detail{color:var(--text-secondary);margin-bottom:1px;font-size:.8rem}.info-exif-row{flex-wrap:wrap;gap:8px;display:flex}.info-exif-row span{white-space:nowrap}.info-map-link{color:var(--accent);margin-top:4px;font-size:.8rem;text-decoration:none;display:inline-block}.info-map-link:hover{text-decoration:underline}.lb-topbar-actions{align-items:center;gap:8px;display:flex}.lb-info{background:var(--bg);padding:24px 20px 100px;position:absolute;top:100%;left:0;right:0}.lb-info-loading{background:var(--bg);justify-content:center;align-items:center;padding:3rem;display:flex}.trash-link{color:var(--text-secondary);cursor:pointer;border-top:1px solid var(--divider);align-items:center;gap:10px;margin:24px 16px 0;padding:16px;display:flex}.trash-link:hover,.trash-link:active{color:var(--destructive)}.trash-page{animation:.3s fadeIn}.trash-photo{position:relative}.trash-overlay{opacity:0;background:linear-gradient(#0000 50%,#0009 100%);flex-direction:column;justify-content:flex-end;padding:6px;transition:opacity .2s;display:flex;position:absolute;inset:0}.trash-photo:hover .trash-overlay,.trash-photo:active .trash-overlay{opacity:1}@media (width<=768px){.trash-overlay{opacity:1;background:linear-gradient(#0000 60%,#00000080 100%)}}.trash-days{color:#ffffffb3;text-align:center;margin-bottom:4px;font-size:.65rem}.trash-actions{justify-content:center;gap:12px;display:flex}.trash-actions button{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.trash-actions button.destructive,.btn-text.destructive{color:var(--destructive)}.search-page{padding:0 16px}.search-bar{margin-bottom:16px;position:relative}.search-bar .search-icon{color:var(--text-secondary);pointer-events:none;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.search-bar input{background:var(--bg-secondary);width:100%;color:var(--text);font-size:1rem;font-family:var(--font);border:none;border-radius:10px;outline:none;padding:10px 12px 10px 40px}.search-bar input::placeholder{color:var(--text-secondary)}.search-bar input:focus{background:var(--bg-tertiary)}.search-suggestions{text-align:center;padding:3rem 1rem}.search-hint{color:var(--text-secondary);font-size:.9rem}.search-result-count{color:var(--text-secondary);padding:0 4px 8px;font-size:.85rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes uploadPulse{0%,to{opacity:.4;width:30%;margin-left:0}50%{opacity:1;width:70%;margin-left:15%}}@media (width>=768px){.photo-grid{grid-template-columns:repeat(5,1fr)}.albums-grid{grid-template-columns:repeat(3,1fr);max-width:900px}}@media (width>=1200px){.photo-grid{grid-template-columns:repeat(7,1fr)}.albums-grid{grid-template-columns:repeat(4,1fr);max-width:1100px;margin:0 auto}}
