:root{--ink:#0f1422;--panel:#1a2236;--panel2:#232d47;--text:#eef0f6;--muted:#929bb3;--focus:#fff}
*{box-sizing:border-box;margin:0}
html{font-size:clamp(16px,1.05vw,26px)}
body{background:var(--ink);color:var(--text);font-family:Barlow,system-ui,sans-serif;min-height:100vh;overflow-x:hidden}
body.playing{overflow:hidden}
.bars{height:6px;background:linear-gradient(90deg,#c8c8c8 0 14.28%,#c8c800 0 28.56%,#00c8c8 0 42.84%,#00c800 0 57.12%,#c800c8 0 71.4%,#c80000 0 85.68%,#0000c8 0)}
.top{display:flex;align-items:center;gap:2rem;padding:1.4rem 3vw 1rem}
h1{font:700 2.2rem/1 'Barlow Condensed',sans-serif;letter-spacing:.02em;white-space:nowrap}
.langs{display:flex;gap:.6rem;flex-wrap:wrap;flex:1}
.chip{font:600 1.05rem 'Barlow Condensed',sans-serif;letter-spacing:.03em;padding:.5rem 1.1rem;border-radius:99px;border:2px solid var(--panel2);background:transparent;color:var(--muted);cursor:pointer}
.chip.on{background:var(--panel2);color:var(--text)}
.chip:focus{outline:0;border-color:var(--focus);color:var(--text);box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.clock{font:600 1.6rem 'Barlow Condensed',sans-serif;color:var(--muted)}
main{padding:1rem 3vw 4rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.6rem}
.card{position:relative;text-align:left;background:var(--panel);border:0;border-radius:14px;padding:0 0 1rem;color:var(--text);cursor:pointer;display:flex;flex-direction:column;gap:.15rem;transition:transform .15s,box-shadow .15s}
.card:focus,.card:hover{outline:0;transform:scale(1.06);box-shadow:0 0 0 4px var(--focus),0 22px 50px rgba(0,0,0,.55);z-index:2}
.art{aspect-ratio:16/10;background:linear-gradient(135deg,#2a3556,#1c2540);border-radius:14px 14px 0 0;display:grid;place-items:center;margin-bottom:.7rem;overflow:hidden}
.art img{max-width:62%;max-height:62%;object-fit:contain}
.art .ini{font:700 3rem 'Barlow Condensed',sans-serif;color:#8fa0d4}
.no{position:absolute;top:.6rem;left:.6rem;background:rgba(15,20,34,.85);padding:.1rem .55rem;border-radius:6px;font:700 1.05rem 'Barlow Condensed',sans-serif}
.card strong{font:700 1.45rem/1.1 'Barlow Condensed',sans-serif;padding:0 1rem}
.card small{color:var(--muted);font-size:.95rem;padding:0 1rem}
.empty{color:var(--muted);font-size:1.3rem;padding:3rem 0}
.hint{position:fixed;bottom:0;left:0;right:0;padding:.6rem 3vw;font-size:.9rem;color:var(--muted);background:linear-gradient(transparent,var(--ink) 60%);pointer-events:none}
body.playing .hint{display:none}

.player{position:fixed;inset:0;background:#000;z-index:10;cursor:none}
.player.osd-on{cursor:default}
.player[hidden]{display:none}
video{width:100%;height:100%;object-fit:contain;background:#000}
.osd{position:absolute;left:0;right:0;display:flex;align-items:center;gap:1.2rem;padding:1.6rem 3vw;opacity:0;transition:opacity .25s;pointer-events:none}
.osd.top{top:0;background:linear-gradient(rgba(0,0,0,.8),transparent)}
.osd.bottom{bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.8));justify-content:center}
.player.osd-on .osd{opacity:1}
.player.osd-on .osd button{pointer-events:auto}
.num{font:700 2.4rem 'Barlow Condensed',sans-serif;background:#fff;color:#000;padding:0 .7rem;border-radius:8px}
.osd strong{display:block;font:700 2rem 'Barlow Condensed',sans-serif}
.osd small{color:#c5cbe0;font-size:1rem}
.osd button{font:600 1.1rem 'Barlow Condensed',sans-serif;background:rgba(255,255,255,.14);color:#fff;border:2px solid transparent;border-radius:10px;padding:.6rem 1.3rem;cursor:pointer}
.osd button:focus,.osd button:hover{outline:0;border-color:#fff;background:rgba(255,255,255,.28)}
.status{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;text-align:center;padding:2rem;font:600 1.6rem 'Barlow Condensed',sans-serif;pointer-events:none}
.status:empty{display:none}
.status p{font:400 1.05rem Barlow,sans-serif;color:#c5cbe0;max-width:34rem}
.status button{pointer-events:auto;font:600 1.2rem 'Barlow Condensed',sans-serif;padding:.7rem 1.6rem;border-radius:10px;border:2px solid #fff;background:#fff;color:#000;cursor:pointer}
.tune{width:12rem;height:.6rem;border-radius:4px;background:linear-gradient(90deg,#c8c8c8 0 14.28%,#c8c800 0 28.56%,#00c8c8 0 42.84%,#00c800 0 57.12%,#c800c8 0 71.4%,#c80000 0 85.68%,#0000c8 0);background-size:200% 100%;animation:slide 1.2s linear infinite}
@keyframes slide{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.tune{animation:none}.card{transition:none}}
@media (max-width:700px){.top{flex-wrap:wrap;gap:.8rem}.clock{display:none}.grid{grid-template-columns:repeat(2,1fr);gap:1rem}.hint{display:none}}

/* ---- search, volume, equalizer ---- */
.search{background:var(--panel);border:2px solid var(--panel2);color:var(--text);font:500 1.05rem Barlow,sans-serif;padding:.5rem 1rem;border-radius:99px;width:14rem}
.search::placeholder{color:var(--muted)}
.search:focus{outline:0;border-color:var(--focus);box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.osd.bottom{flex-wrap:wrap}
.player.osd-on .osd button,.player.osd-on .osd input{pointer-events:auto}
.volbox{display:flex;align-items:center;gap:.5rem}
.volbox input{width:9rem;accent-color:#fff}
.toast{position:absolute;top:50%;right:4vw;transform:translateY(-50%);min-width:11rem;background:rgba(0,0,0,.78);padding:1rem 1.4rem;border-radius:14px;font:700 1.6rem 'Barlow Condensed',sans-serif;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}
.toast i{display:block;height:.5rem;border-radius:4px;background:rgba(255,255,255,.2);margin-top:.5rem;overflow:hidden}
.toast b{display:block;height:100%;background:#fff;width:0}
.eqp{position:absolute;right:3vw;bottom:7rem;width:min(30rem,92vw);background:rgba(15,20,34,.95);border-radius:16px;padding:1.2rem 1.4rem;cursor:default;z-index:3}
.eqp[hidden]{display:none}
.eqh{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}
.eqh strong{font:700 1.5rem 'Barlow Condensed',sans-serif}
.presets{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.eqp button{font:600 1.05rem 'Barlow Condensed',sans-serif;background:rgba(255,255,255,.14);color:#fff;border:2px solid transparent;border-radius:10px;padding:.45rem 1rem;cursor:pointer}
.eqp button:focus,.eqp button:hover{outline:0;border-color:#fff}
.eqp button.on{background:#fff;color:#000}
.bands{display:flex;justify-content:space-between;gap:.6rem}
.band{display:flex;flex-direction:column;align-items:center;gap:.4rem;font-size:.85rem;color:#c5cbe0}
.band output{font-weight:600;color:#fff;font-size:1rem}
.band input{writing-mode:vertical-lr;direction:rtl;height:9rem;width:2rem;accent-color:#fff}
.band input:focus{outline:2px solid #fff;outline-offset:4px;border-radius:6px}
.eqnote{color:#f0c36b;font-size:.9rem;margin-top:.8rem}
.eqnote:empty{display:none}
.eqtip{color:#929bb3;font-size:.8rem;margin-top:.7rem}
@media (max-width:700px){.search{width:100%}.eqp{bottom:9rem}}