:root{--ink:#0c0b0b;--smoke:#242020;--bone:#ecebe7;--ghost:#a5a39e;--oxblood:#5c0c11;--signal:#c8262d;--f:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{background:var(--ink);color:var(--bone);font:15px/1.4 var(--f);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;padding-top:env(safe-area-inset-top,0px)}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.band{padding:clamp(40px,7vw,96px) clamp(20px,4vw,56px)}
.dark{--fg:var(--bone);--mut:var(--ghost);--line:rgba(255,255,255,.16);background:var(--ink);color:var(--bone)}
.light{--fg:var(--ink);--mut:#6d6b66;--line:rgba(12,11,11,.18);color:var(--ink);background:var(--bone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E")}
.red{--fg:var(--bone);--mut:#c9a9a9;--line:rgba(255,255,255,.2);background:linear-gradient(#5c0c11,#260306);color:var(--bone)}
.wrap{max-width:1200px;margin:0 auto}
.cap{font-size:10px;letter-spacing:.05em;text-transform:uppercase;line-height:1.3}
.tag{font-size:12px;color:var(--mut,var(--ghost))}
.display{font-weight:700;letter-spacing:-.055em;line-height:.8;font-size:clamp(64px,19vw,260px);text-shadow:0 .08em .1em rgba(255,255,255,.4);margin-left:-.04em}
h2{font-weight:700;letter-spacing:-.05em;line-height:.9;font-size:clamp(44px,8vw,110px);margin-bottom:.45em}
h2 .g{color:rgba(200,38,45,.5)}.light h2 .g{color:rgba(200,38,45,.55)}
p{max-width:54ch}
.lead{font-size:clamp(20px,2.6vw,32px);letter-spacing:-.03em;line-height:1.05;max-width:26ch}
.spread{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
/* controls */
.pill{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border-radius:99px;padding:5px 5px 5px 16px;font:500 10px var(--f);text-transform:uppercase;letter-spacing:.04em;width:max-content;transition:background .2s}
.pill i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-style:normal;font-size:13px}
.pill:hover{background:var(--signal);color:#fff}
.pill.q{background:rgba(255,255,255,.14);color:var(--bone);padding:9px 16px}
.pill.q:hover{background:rgba(255,255,255,.26)}
.light .pill.q{background:rgba(12,11,11,.1);color:var(--ink)}.light .pill.q:hover{background:rgba(12,11,11,.2)}
.light .pill:not(.q){background:var(--ink);color:#fff}.light .pill:not(.q) i{background:#fff;color:var(--ink)}
.block{display:block;width:100%;background:#fff;color:var(--ink);padding:16px;font:500 11px var(--f);text-transform:uppercase;letter-spacing:.05em;border-radius:2px}
.block:hover{background:var(--signal);color:#fff}
.field{display:block;width:100%;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.3);padding:12px 0;font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-radius:0}
.light .field{border-color:rgba(12,11,11,.35)}
.field::placeholder{color:var(--ghost)}.field:focus{outline:0;border-color:var(--signal)}
select.field option{color:#000;text-transform:none}
.file{display:inline-flex;cursor:pointer}.file input{position:absolute;opacity:0;width:1px;height:1px}
.file:focus-within{outline:2px solid var(--signal);outline-offset:3px;border-radius:99px}
.err{color:#ff8a8f;font-size:12px;min-height:1.4em}
/* auth */
#auth form{display:grid;gap:6px;max-width:380px;margin-top:40px}
#auth .top{margin-bottom:clamp(40px,9vw,120px)}
#auth .acts{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
/* app */
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px clamp(20px,4vw,56px);background:rgba(12,11,11,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.12)}
header.nav nav{display:flex;gap:6px;flex-wrap:wrap}
.tab{padding:8px 14px;border-radius:99px;color:var(--ghost);font:500 10px var(--f);text-transform:uppercase;letter-spacing:.05em}
.tab[aria-current=true]{background:#fff;color:var(--ink)}.tab:hover{color:#fff}.tab[aria-current=true]:hover{color:var(--ink)}
main{min-height:80vh;padding-bottom:170px}
.tools{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:28px}
.tools .field{max-width:320px}
.rows{border-top:2px solid currentColor}
.row{display:grid;grid-template-columns:56px 1.4fr 1fr 56px auto;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);transition:color .25s}
.rows:hover .row{color:var(--mut)}.rows .row:hover,.rows .row.on{color:var(--fg)}
.row.on .nm{color:var(--signal)}
.row .nm{display:block;font-size:clamp(18px,2.2vw,28px);font-weight:500;letter-spacing:-.04em;line-height:1.05}
.row .tag{display:block;margin-top:3px;color:inherit;opacity:.8}
.row .acts{display:flex;gap:6px;justify-content:flex-end}
.cv{display:grid;place-items:center;width:56px;height:56px;border-radius:4px;background:linear-gradient(135deg,#8a1218,#1a0507) center/cover;color:rgba(255,255,255,.7);font-weight:700;font-size:22px;letter-spacing:-.05em;font-style:normal;overflow:hidden}
button.cvb{padding:0;border-radius:4px}
.mini{padding:7px 12px;border-radius:99px;background:rgba(127,127,127,.18);font:500 10px var(--f);text-transform:uppercase;letter-spacing:.04em;color:inherit}
.mini:hover{background:var(--signal);color:#fff}
.empty{padding:40px 0;max-width:40ch;color:var(--mut)}
.panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:48px}
.panel form{display:grid;gap:6px;align-content:start}
.panel h3{font-size:22px;font-weight:500;letter-spacing:-.035em;margin-bottom:8px}
.fl{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0 6px}
/* sidebar + settings */
.shell{display:grid;grid-template-columns:250px minmax(0,1fr)}
#side{position:sticky;top:calc(57px + env(safe-area-inset-top,0px));align-self:start;height:calc(100vh - 57px - 96px - env(safe-area-inset-top,0px));overflow:auto;padding:24px 20px;border-right:1px solid rgba(255,255,255,.12);background:var(--ink)}
#side h4{font:500 10px var(--f);letter-spacing:.05em;text-transform:uppercase;color:var(--ghost);margin:24px 0 8px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;align-items:center}
#side h4:first-child{margin-top:0}
.si{display:flex;justify-content:space-between;gap:8px;width:100%;text-align:left;padding:6px 0;color:var(--ghost);font-size:13px}
.si span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.si:hover,.si.on{color:var(--bone)}
.si.on span:first-child::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--signal);margin-right:8px}
.si .c{font-size:10px;opacity:.7}
#menu{display:none}
.srow{display:grid;grid-template-columns:140px 1fr 56px;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.srow .field{padding:6px 0}.srow .mini{justify-self:start}
.sg .tag{margin-top:14px}
/* player */
#bar{position:fixed;left:0;right:0;bottom:0;z-index:6;padding:12px clamp(14px,3vw,40px) calc(12px + env(safe-area-inset-bottom,0px));background:rgba(20,17,17,.7);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid rgba(255,255,255,.18);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) 120px;gap:20px;align-items:center;color:var(--bone)}
#bar .now{display:flex;gap:12px;align-items:center;min-width:0}
#bar .now .cv{width:48px;height:48px;flex:none;font-size:18px}
#bar .now b{display:block;font-weight:500;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bar .ctl{display:flex;flex-direction:column;gap:8px;align-items:center}
#bar .btns{display:flex;gap:8px;align-items:center}
#bar .seek{display:flex;gap:10px;align-items:center;width:100%}
#bar .seek span{width:34px;text-align:center;color:var(--ghost)}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:2px;background:rgba(255,255,255,.3);border-radius:2px;min-width:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}
.mini.on{background:var(--signal);color:#fff}
dialog{margin:auto;border:1px solid rgba(255,255,255,.18);background:#1a1515;color:var(--bone);padding:28px;border-radius:10px;width:min(92vw,380px)}
dialog::backdrop{background:rgba(0,0,0,.65);backdrop-filter:blur(4px)}
dialog h3{font-size:22px;font-weight:500;letter-spacing:-.035em;margin-bottom:14px}
dialog .opts{display:grid;gap:8px;margin:14px 0}
dialog .opts .pill{width:100%;justify-content:space-between}
#msg{position:fixed;top:calc(64px + env(safe-area-inset-top,0px));right:clamp(14px,3vw,40px);z-index:9;background:#fff;color:var(--ink);padding:10px 16px;border-radius:99px;font:500 10px var(--f);text-transform:uppercase;letter-spacing:.04em;opacity:0;transform:translateY(-6px);transition:.25s;pointer-events:none}
#msg.show{opacity:1;transform:none}
@media(max-width:760px){
 .shell{grid-template-columns:1fr}#side{position:fixed;z-index:7;top:0;left:0;bottom:0;width:min(82vw,300px);height:auto;padding-top:calc(24px + env(safe-area-inset-top,0px));transform:translateX(-102%);transition:transform .25s}#side.open{transform:none}#menu{display:inline-flex}
 .srow{grid-template-columns:100px 1fr 48px}
 .row{grid-template-columns:48px 1fr auto;gap:12px}.row .al,.row .du{display:none}.cv{width:48px;height:48px}
 #bar{grid-template-columns:1fr;gap:10px}#bar .vol{display:none}#bar .now .cv{display:none}
 #bar .ctl{flex-direction:row;flex-wrap:wrap;justify-content:space-between}#bar .seek{order:3}
 main{padding-bottom:210px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}