#app{min-height:var(--vh)}.center-note{min-height:var(--vh);display:grid;align-content:center;justify-items:center;padding:calc(2rem + env(safe-area-inset-top,0px)) 2rem 2rem;text-align:center;color:var(--text-dim);line-height:1.7}.center-note h1{color:var(--text);font-size:1.3rem;margin:0 0 .6rem}.center-note .note-icon{color:var(--text-faint);margin-bottom:.9rem}.button-link{display:inline-block;background:var(--accent);color:var(--on-accent);font-weight:700;text-decoration:none;border-radius:var(--radius);padding:.7em 1.3em;margin-top:.5rem}.button-link:hover{background:var(--accent-press);text-decoration:none}.spinner{display:inline-block;width:1.1em;height:1.1em;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;-webkit-animation:spin .7s linear infinite;animation:spin .7s linear infinite;vertical-align:-.2em;margin-right:.55em}@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg)}}@keyframes spin{to{transform:rotate(360deg)}}.grid-page{max-width:72rem;margin:0 auto;padding:calc(1.25rem + env(safe-area-inset-top,0px)) 1.15rem 4rem}.grid-head{display:grid;grid-template-columns:1fr auto;grid-gap:.75rem;align-items:center;margin-bottom:1.5rem}.grid-head h1{font-size:1.5rem;margin:0}.head-actions{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-gap:.5rem;align-items:center;justify-content:end}@media(max-width:32rem){.grid-head{grid-template-columns:1fr;grid-gap:.85rem}.head-actions{justify-content:start}}.user-chip{display:inline-grid;grid-auto-flow:column;grid-gap:.45rem;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.32rem .85rem .32rem .36rem;font-size:.85rem;font-weight:600;color:var(--text);cursor:default}.user-chip .avatar{display:grid;align-content:center;justify-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--accent);color:var(--on-accent)}.nav-btn{display:inline-grid;grid-auto-flow:column;grid-gap:.4rem;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.42rem .95rem;font-size:.85rem;font-weight:700;color:var(--text);text-decoration:none;white-space:nowrap}.nav-btn:hover{background:var(--surface-2);border-color:var(--accent-2);color:var(--accent-2);text-decoration:none}.banner{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent-2);border-radius:var(--radius);padding:1rem 1.1rem;margin-bottom:1.5rem;font-size:.9rem;line-height:1.7;box-shadow:var(--shadow-card)}.banner h2{font-size:1rem;margin:0 0 .5rem;display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-gap:.45rem;align-items:center;justify-content:start;color:var(--accent-2)}.banner ol{margin:.6rem 0 .9rem;padding-left:1.35rem}.banner li{margin-bottom:.3rem}.albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));grid-gap:1.15rem}.album-card-wrap{border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow-card)}.album-card{display:block;width:100%;padding:0;border:none;border-radius:0;background:transparent;text-align:left;cursor:pointer}.album-card:hover,.album-card:active{background:transparent;-webkit-transform:none;transform:none}.album-card .cover{display:block;width:100%;height:10rem;background:var(--surface-2);object-fit:cover}.album-card .cover.is-empty{display:grid;align-content:center;justify-items:center;color:var(--text-faint)}.album-card .meta{display:block;padding:.8rem .95rem .9rem}.album-card .title{display:block;font-weight:700;font-size:1rem;margin-bottom:.25rem;word-break:break-word}.album-card .sub{display:block;color:var(--text-dim);font-size:.82rem;font-variant-numeric:tabular-nums}.album-list-link{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-gap:.4rem;align-items:center;justify-content:center;text-decoration:none;color:var(--text-dim);font-size:.82rem;font-weight:600;padding:.65em;border-top:1px solid var(--border)}.album-list-link:hover{color:var(--accent-2);background:var(--surface-2);text-decoration:none}.stage-page{position:fixed;top:0;left:0;right:0;bottom:0;background:#000;overflow:hidden}.stage{position:absolute;top:0;left:0;width:100%;height:100%}.slide-layer{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;opacity:0;-webkit-transition:opacity .7s ease-in-out;transition:opacity .7s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden}.slide-layer.is-visible{opacity:1;pointer-events:auto}.topbar{position:absolute;left:0;right:0;top:0;padding:calc(.8rem + env(safe-area-inset-top,0px)) 1rem 1.4rem;background:-webkit-linear-gradient(top,rgba(0,0,0,.72),rgba(0,0,0,0));background:linear-gradient(to bottom,#000000b8,#0000);display:grid;grid-template-columns:auto 1fr auto auto;grid-gap:.6rem;align-items:center;-webkit-transition:opacity .25s ease;transition:opacity .25s ease}.controls{position:absolute;left:0;right:0;bottom:0;padding:2rem 1rem calc(1.1rem + env(safe-area-inset-bottom,0px));background:-webkit-linear-gradient(bottom,rgba(0,0,0,.78),rgba(0,0,0,0));background:linear-gradient(to top,#000000c7,#0000);-webkit-transition:opacity .25s ease;transition:opacity .25s ease}.chrome-hidden{opacity:0;pointer-events:none}.topbar .album-name{font-size:.98rem;font-weight:700;color:#fff;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.6)}.topbar .position{font-size:.85rem;font-weight:700;color:#ffffffbf;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.6)}.control-row{display:grid;grid-auto-flow:column;grid-template-columns:auto auto auto 1fr;grid-auto-columns:max-content;grid-gap:.55rem;align-items:center;max-width:46rem;margin:0 auto}.controls button,.topbar button{display:grid;align-content:center;justify-items:center;width:2.9rem;height:2.9rem;padding:0;border-radius:50%;background:#ffffff29;border:none;color:#fff;text-decoration:none;-webkit-transition:background-color .12s ease,-webkit-transform .08s ease;transition:background-color .12s ease,transform .08s ease}.controls button:hover:not(:disabled),.topbar button:hover:not(:disabled){background:#ffffff47}.controls button:active:not(:disabled),.topbar button:active:not(:disabled){background:#ffffff61;-webkit-transform:scale(.94);transform:scale(.94)}.controls button.play-toggle{width:3.5rem;height:3.5rem;background:var(--accent)}.controls button.play-toggle:hover:not(:disabled),.controls button.play-toggle:active:not(:disabled){background:var(--accent-press)}.topbar button.with-label{width:auto;border-radius:999px;padding:0 .95rem 0 .7rem;font-size:.86rem;font-weight:700;grid-auto-flow:column;grid-gap:.2rem;justify-items:initial;align-items:center}.controls select{background:#ffffff29;border:none;color:#fff;border-radius:999px;padding:0 .9rem;height:2.9rem;font-size:.86rem;font-weight:700;font-family:inherit;-webkit-appearance:none;appearance:none;text-align:center}.controls select option{color:#000;background:#fff}.cache-pill{position:absolute;right:1rem;bottom:calc(5.6rem + env(safe-area-inset-bottom,0px));display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-gap:.4rem;align-items:center;padding:.42em .9em;border-radius:999px;font-size:.8rem;font-weight:700;background:#0000009e;color:#fff;-webkit-transition:opacity .25s ease;transition:opacity .25s ease}.cache-pill.ok{color:#6ee87a}.cache-pill.warn{color:#ffc94d}.stage-message{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center;color:#fff;font-size:.95rem;line-height:1.65;padding:1rem 1.3rem;background:#000000b8;border-radius:var(--radius);max-width:80%}.cache-footer{margin:2.5rem 0 0;padding:.95rem 1.1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-dim);font-size:.83rem;line-height:1.7}.cache-footer.warn{border-left:4px solid var(--warn);color:var(--text)}.cache-footer button{font-size:.8rem;padding:.4em .85em}.cache-bar{height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin:.55rem 0 .7rem}.cache-bar>span{display:block;height:100%;background:var(--accent-2);-webkit-transition:width .3s ease;transition:width .3s ease}.list-page{max-width:48rem;margin:0 auto;padding:calc(1.15rem + env(safe-area-inset-top,0px)) 1.15rem 4rem}.list-head{display:grid;grid-template-columns:auto 1fr auto;grid-gap:.7rem;align-items:center;margin-bottom:1.1rem}.list-title{font-weight:700;font-size:1.15rem;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-page .hint{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.85rem 1rem;color:var(--text-dim);font-size:.83rem;line-height:1.75;margin:0 0 1rem}.list-page .hint strong{color:var(--text)}.list-hint{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent-2);border-radius:var(--radius);padding:.8rem 1rem;font-size:.86rem;line-height:1.65;margin-bottom:1rem;box-shadow:var(--shadow-card)}.file-rows{display:grid;grid-gap:.7rem}.file-row{display:grid;grid-template-columns:auto 1fr;grid-gap:.85rem;align-items:center;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:.7rem;box-shadow:var(--shadow-card)}.file-thumb{position:relative;width:4.6rem;height:4.6rem;padding:0;border:none;border-radius:var(--radius);overflow:hidden;background:var(--surface-2);min-width:0;min-height:0;cursor:pointer}.file-thumb:hover,.file-thumb:active{background:var(--surface-2);-webkit-transform:none;transform:none}.file-thumb img{display:block;width:100%;height:100%;object-fit:cover}.file-badge{position:absolute;left:4px;bottom:4px;display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-gap:.2rem;align-items:center;background:#000000bd;border-radius:var(--radius-sm);font-size:.66rem;font-weight:700;padding:2px 5px;color:#fff}.file-meta{min-width:0}.file-name{font-size:.93rem;font-weight:700;word-break:break-all}.file-sub{color:var(--text-dim);font-size:.78rem;margin-top:.2rem;font-variant-numeric:tabular-nums}.file-actions{grid-column:1 / -1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;grid-gap:.5rem;margin-top:.25rem}.file-btn{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-gap:.4rem;align-items:center;justify-content:center;text-decoration:none;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:.65em .5em;font-size:.86rem;font-weight:600}.file-btn:hover{background:var(--surface-3);border-color:var(--border-strong);color:var(--text);text-decoration:none}.file-btn.blue{color:var(--accent-2)}