:root{--bg:#0b0b0f;--panel:#111118;--ink:#f5f5f7;--muted:#9aa3af;--gold:#e6c579;--line:rgba(255,255,255,.08);--warn:#b91c1c}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#0b0b0f;color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.wrap{max-width:1100px;margin:0 auto;padding:12px}
.banner{background:#7f1d1d;color:#fff;padding:8px 12px;border-bottom:1px solid #ef4444;display:none}
.head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{width:40px;height:40px}
.title{margin:0;font-size:clamp(18px,5vw,28px);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{margin:0;color:var(--muted);font-size:.9rem}
.topbar{margin-left:auto;display:flex;gap:8px;align-items:center}
.btn{background:#121624;border:1px solid var(--line);color:var(--ink);padding:12px 14px;border-radius:12px;cursor:pointer;min-height:44px}
.btn.ghost{background:transparent}
.btn.wide{width:100%}
.btn:hover{border-color:#ffd7003a}
.install{background:linear-gradient(0deg, rgba(230,197,121,.15), rgba(230,197,121,.1)); border-color:#e6c57954}
.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:900px){.grid{grid-template-columns:1.5fr .9fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,215,0,.12),0 0 25px rgba(255,215,0,.05) inset}
.hud{display:flex;gap:8px;padding:10px;border-bottom:1px solid var(--line);align-items:center;flex-wrap:wrap}
.tag{font-size:.9rem;padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);user-select:none}
.player{position:relative;aspect-ratio:16/9;background:#06060a;display:grid;place-items:center}
#viz{width:100%;height:220px;display:block}
@media (min-width:480px){#viz{height:240px}}
.meta{position:absolute;left:0;right:0;bottom:8px;text-align:center;color:var(--gold);font-weight:600;letter-spacing:.06em;padding:0 8px}
.controls{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px}
@media (min-width:520px){.controls{grid-template-columns:repeat(4,1fr)}}
.note{margin:6px 12px 12px;color:var(--muted)}

/* Playlist via <details> */
details.playlist summary{list-style:none}
details.playlist{border-top:1px solid var(--line)}
details.playlist[open] summary .chev{transform:rotate(90deg)}
summary{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}
summary .chev{transition:transform .2s ease}
.plist{list-style:none;margin:0;padding:6px}
.plist li{display:flex;justify-content:space-between;gap:8px;padding:12px;border-bottom:1px solid var(--line);cursor:pointer}
.plist li .price{color:var(--gold);font-weight:600}
.plist li.active{background:rgba(230,197,121,.10);color:var(--gold);font-weight:600}
.user{color:var(--muted);font-size:.9rem;max-width:35vw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}

/* Modals */
.modal{position:fixed;inset:0;display:none;z-index:9999}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.modal-in{position:relative;z-index:1;max-width:520px;margin:8vh auto;background:#0f1422;border:1px solid var(--line);border-radius:16px;padding:16px}
.form{display:grid;gap:8px;margin-top:8px}
.input{background:#0d1220;border:1px solid var(--line);border-radius:12px;padding:12px;color:var(--ink);min-height:44px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#0f1422;color:var(--ink);padding:10px 14px;border:1px solid var(--line);border-radius:12px;display:none;z-index:10000}
.toast.show{display:block}
.sticky-install{position:sticky;top:0;z-index:3;padding-bottom:8px}
.help li{margin-bottom:6px}