:root{--bg: #0f172a;--panel: #1e293b;--panel-2: #334155;--text: #e2e8f0;--muted: #94a3b8;--accent: #38bdf8;--danger: #f87171;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent}.muted{color:var(--muted)}.small{font-size:.85rem}button{font:inherit;border:none;border-radius:10px;padding:.6rem 1rem;cursor:pointer;background:var(--panel-2);color:var(--text)}button.primary{background:var(--accent);color:#06283d;font-weight:600}button.ghost{background:transparent;border:1px solid var(--panel-2)}button.danger{background:var(--danger);color:#3b0a0a;font-weight:600}button:disabled{opacity:.6}.center{min-height:100%;display:grid;place-items:center;padding:1.5rem}.card{background:var(--panel);border-radius:16px;padding:1.75rem;width:100%;max-width:360px;box-shadow:0 10px 40px #0006}.login{display:flex;flex-direction:column;gap:.9rem}.brand{text-align:center;margin-bottom:.5rem}.brand h1{margin:.5rem 0 .2rem;font-size:1.4rem}.brand p{margin:0}label{display:flex;flex-direction:column;gap:.35rem;font-size:.9rem;color:var(--muted)}input{font:inherit;padding:.6rem .7rem;border-radius:10px;border:1px solid var(--panel-2);background:#0b1220;color:var(--text)}input:focus{outline:2px solid var(--accent);border-color:transparent}.error{color:var(--danger);margin:0;font-size:.9rem}.app{display:flex;flex-direction:column;min-height:100%}.topbar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem 1rem;padding-top:max(.75rem,env(safe-area-inset-top));background:#0f172ad9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--panel);z-index:10}.brand-row{display:flex;align-items:center;gap:.5rem}.topbar-actions{display:flex;gap:.5rem}.banner{margin:0;padding:.6rem 1rem;background:var(--panel);font-size:.9rem}.banner.error{background:#3b1414}.content{flex:1;padding:.5rem}.empty{display:grid;place-items:center;gap:1rem;padding:3rem 1rem;text-align:center}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:4px}.tile{position:relative;padding:0;border-radius:6px;overflow:hidden;aspect-ratio:1 / 1;background:var(--panel);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}.tile img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;pointer-events:none}.play-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#0000008c;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.9rem;padding-left:3px;pointer-events:none}.tile img{width:100%;height:100%;object-fit:cover;display:block}.usage{display:flex;align-items:center;gap:.6rem;padding:.5rem 1rem;background:var(--panel)}.bar{flex:1;height:8px;border-radius:999px;background:#0b1220;overflow:hidden}.bar-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .3s}.admin{max-width:520px;max-height:85vh;overflow-y:auto;text-align:left}.admin-head{display:flex;align-items:center;justify-content:space-between}.admin-head h2{margin:0}.admin h3{margin:1.2rem 0 .6rem;font-size:1rem}.admin-create{display:flex;flex-direction:column;gap:.6rem;background:#0b1220;padding:.9rem;border-radius:12px}.quota-input{flex-direction:row;align-items:center;gap:.5rem}.quota-input input{width:90px}.admin-list{display:flex;flex-direction:column;gap:.6rem}.admin-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:#0b1220;padding:.7rem;border-radius:10px}.admin-row-info{flex:1;min-width:0}.admin-row-info strong{word-break:break-all}.admin-row-actions{display:flex;flex-direction:column;gap:.4rem}.admin-row-actions button{padding:.4rem .7rem;font-size:.85rem}.badge{margin-left:.4rem;font-size:.7rem;background:var(--accent);color:#06283d;padding:.1rem .4rem;border-radius:6px;vertical-align:middle}.hamburger{background:transparent;font-size:1.4rem;line-height:1;padding:.3rem .6rem}.topbar-add{font-size:1.5rem;line-height:1;padding:.2rem .9rem}.drawer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;z-index:60;animation:fadeIn .2s ease}.drawer{position:fixed;top:0;left:0;bottom:0;width:78%;max-width:300px;background:var(--panel);padding:1rem;padding-top:max(1rem,env(safe-area-inset-top));display:flex;flex-direction:column;gap:.25rem;box-shadow:6px 0 30px #00000080;animation:slideInLeft .22s ease}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.drawer-head{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}.drawer button{text-align:left;background:transparent;border-radius:10px;padding:.85rem .7rem;font-size:1rem}.drawer button:active{background:var(--panel-2)}.drawer-spacer{flex:1}.switch-row{flex-direction:row;align-items:center;gap:.6rem;color:var(--text)}.switch-row input{width:20px;height:20px}.radio-group{display:flex;flex-direction:column;gap:.5rem;margin:.6rem 0 1rem}.radio-group label{flex-direction:row;align-items:center;gap:.5rem;color:var(--text)}.backup-log{margin-top:1rem;background:#0b1220;border-radius:10px;padding:.7rem;font-size:.8rem;white-space:pre-wrap;word-break:break-word;max-height:200px;overflow-y:auto;color:var(--muted)}.spinner{position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border:3px solid rgba(255,255,255,.25);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.spinner.big{width:48px;height:48px;margin:-24px 0 0 -24px;border-width:4px}@keyframes spin{to{transform:rotate(360deg)}}.upload-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:grid;place-items:center;z-index:70}.upload-box{background:var(--panel);border-radius:16px;padding:1.8rem 1.5rem 1.4rem;width:80%;max-width:300px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.6rem}.upload-box .spinner{position:static;margin:0 0 .4rem}.upload-box .bar{width:100%}.tile.uploading{display:grid;place-items:center}.thumb-img{opacity:0;transition:opacity .35s ease}.thumb-img.loaded{opacity:1}.viewer{position:relative;display:inline-block;line-height:0}.viewer-sizer{display:block;max-width:100%;max-height:80vh;object-fit:contain;filter:blur(14px);border-radius:8px}.viewer-media{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;border-radius:8px;background:#000;opacity:0;transition:opacity .4s ease}.viewer-media.loaded{opacity:1}.viewer-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;z-index:50;display:flex;flex-direction:column}.viewer-stage{flex:1;min-height:0;display:grid;place-items:center;overflow:hidden}.viewer-bar{position:absolute;left:0;right:0;display:flex;align-items:center;padding:.5rem .6rem;z-index:2}.viewer-top{top:0;padding-top:max(.6rem,env(safe-area-inset-top));justify-content:space-between;background:linear-gradient(to bottom,#0009,#0000)}.viewer-bottom{bottom:0;padding-bottom:max(.8rem,env(safe-area-inset-bottom));justify-content:space-around;background:linear-gradient(to top,#000000b3,#0000)}.vbtn{background:transparent;color:#fff;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.45rem .7rem;font-size:.68rem;border-radius:10px}.vbtn:active{background:#ffffff1f}.vbtn.active{color:#fbbf24}.vbtn.danger{color:#fca5a5}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000eb;display:grid;place-items:center;gap:1rem;padding:1rem;z-index:50}.lightbox img,.lightbox video{max-width:100%;max-height:80vh;object-fit:contain;border-radius:8px}.lightbox-actions{display:flex;gap:.75rem}.bottomnav{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--panel);border-top:1px solid #0b1220;padding-bottom:env(safe-area-inset-bottom);z-index:20}.bottomnav button{flex:1;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.5rem 0;font-size:.7rem;border-radius:0}.bottomnav button.active{color:var(--accent)}.bottomnav svg{width:22px;height:22px}.content{padding-bottom:calc(66px + env(safe-area-inset-bottom))}.albums-actions{display:flex;justify-content:space-between;padding:.3rem .3rem .9rem}.link{background:transparent;color:var(--accent);padding:.3rem;font-weight:600}.albums-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.album-card{background:transparent;padding:0;text-align:left;display:flex;flex-direction:column;gap:.3rem}.album-cover{aspect-ratio:1 / 1;border-radius:16px;overflow:hidden;background:var(--panel)}.album-cover img{width:100%;height:100%;object-fit:cover;display:block}.album-empty{width:100%;height:100%;display:grid;place-items:center;font-size:2rem;color:var(--muted)}.album-name{font-weight:600;padding-left:.2rem}.album-header{display:flex;align-items:center;gap:.5rem;padding:.2rem .2rem .8rem}.album-header strong{flex:1;font-size:1.1rem}.iconbtn{background:transparent;color:var(--text);padding:.3rem;display:inline-flex}.selbar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:.8rem;padding:.6rem .8rem;padding-top:max(.6rem,env(safe-area-inset-top));background:var(--panel-2);z-index:30}.selbar strong{font-size:1.1rem}.selbar .link{flex-shrink:0;padding:.3rem .4rem}.selbar-actions{display:flex;gap:.1rem;flex:1;justify-content:flex-end;overflow-x:auto;min-width:0}.selbar .iconbtn{color:var(--text);padding:.4rem;flex-shrink:0}.selbar .iconbtn.danger{color:var(--danger)}.tile.selected{outline:3px solid var(--accent);outline-offset:-3px}.tile.selected img{transform:scale(.86);transition:transform .12s}.check{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:#00000059;pointer-events:none}.check.on{background:var(--accent);border-color:var(--accent)}.check.on:after{content:"✓";color:#06283d;font-size:14px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-52%)}