:root{
  --bg:#090914; --s1:#11112a; --s2:#181838; --s3:#222252; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.18);
  --text:#f3f3ff; --mute:#a2a4cf; --violet:#7a5cff; --pink:#ff4fa3; --amber:#ffb347; --cyan:#3ee0ff; --ok:#6af2b8;
  --grad:linear-gradient(120deg,#7a5cff 0%,#ff4fa3 60%,#ffa14d 100%);
  --font:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Unbounded","Figtree",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--font);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto 0;height:70vh;pointer-events:none;z-index:0;
  background:radial-gradient(60% 70% at 25% 0%,rgba(122,92,255,.30),transparent 70%),radial-gradient(50% 60% at 90% 0%,rgba(255,79,163,.20),transparent 70%)}
.app{position:relative;z-index:1;max-width:1040px;margin:0 auto;padding:0 16px calc(96px + env(safe-area-inset-bottom))}
.bar{display:flex;align-items:center;gap:12px;padding:16px 0 12px}
.brand{display:flex;align-items:center;gap:10px;font:700 19px/1 var(--display);letter-spacing:-.01em}
.mark{width:34px;height:34px;border-radius:11px;background:var(--grad);display:grid;place-items:center;box-shadow:0 6px 20px rgba(255,79,163,.35)}
.mark svg{width:20px;height:20px;fill:#fff}
.bar .sub{color:var(--mute);font-size:13px;display:none}
@media(min-width:700px){.bar .sub{display:block}}

.btn{min-height:44px;min-width:44px;appearance:none;border:1px solid var(--line2);background:var(--s2);color:var(--text);font:600 14px/1 var(--font);padding:12px 18px;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{border-color:var(--mute)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 8px 26px rgba(255,79,163,.30)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.big{padding:16px 24px;font-size:16px}
.btn.small{padding:10px 14px;font-size:13px;min-height:44px}
.btn.rec{border-color:var(--pink);color:var(--pink)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none;transform:none}
.btn svg{width:18px;height:18px;fill:currentColor}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* hero */
.hero{border:1px solid transparent;border-radius:24px;padding:22px;background:linear-gradient(var(--s1),var(--s1)) padding-box,var(--grad) border-box;transition:border-color .2s,background .2s}
.hero.over{background:linear-gradient(#1a1a40,#1a1a40) padding-box,var(--grad) border-box}
.hero h1{margin:0 0 8px;font:700 clamp(23px,5.5vw,36px)/1.12 var(--display);letter-spacing:-.02em;max-width:18ch}
.hero p{margin:0 0 18px;color:var(--mute);max-width:52ch}
.hero .compact{display:none}
.hero.loaded .full{display:none}
.hero.loaded{padding:14px 16px;border-radius:18px}
.hero.loaded .compact{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.compact b{display:block;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
.compact span{color:var(--mute);font-size:13px}

/* player */
.player{position:sticky;top:0;z-index:30;margin:12px -16px 0;padding:10px 16px 12px;background:rgba(9,9,20,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.p-head{display:flex;justify-content:space-between;gap:12px;font-size:14px;margin-bottom:6px}
#pTitle{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.time{color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
#wave{display:block;width:100%;height:84px;border-radius:14px;background:var(--s1);cursor:pointer;touch-action:none}
#mini{display:block;width:100%;height:26px;margin-top:6px}
.transport{display:flex;align-items:center;gap:8px;margin-top:8px}
.icon{width:44px;height:44px;border-radius:50%;padding:0}
.icon svg{width:20px;height:20px}
.icon.play{width:56px;height:56px}
.icon.play svg{width:27px;height:27px}
.icon[aria-pressed=true]{border-color:var(--cyan);color:var(--cyan)}
.grow{flex:1}
.hintkey{color:var(--mute);font-size:12.5px;display:none}
@media(min-width:700px){.hintkey{display:block}#wave{height:96px}}

/* nav: bottom bar on phones, pill row on desktop */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:2px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:rgba(14,14,34,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.navbtn{flex:1;background:none;border:0;color:var(--mute);font:600 11.5px var(--font);padding:8px 4px;border-radius:14px;display:grid;justify-items:center;gap:3px;cursor:pointer}
.navbtn svg{width:23px;height:23px;fill:currentColor}
.navbtn[aria-selected=true]{color:#fff;background:var(--s3)}
.navbtn[aria-selected=true] svg{fill:url(#gradFill);filter:drop-shadow(0 0 8px rgba(255,79,163,.5))}
@media(min-width:900px){
  .nav{position:static;margin:16px auto 0;max-width:560px;border:1px solid var(--line);border-radius:20px;padding:6px;background:var(--s1)}
  .navbtn{grid-auto-flow:column;justify-content:center;font-size:14px;gap:8px;padding:11px 8px}
  .navbtn svg{width:20px;height:20px}
  .app{padding-bottom:60px}
}

/* panels */
.panel{padding:18px 0}
.panel[hidden]{display:none}
h2{font:700 15px/1.3 var(--display);margin:0 0 12px;letter-spacing:-.01em}
.lead{color:var(--mute);margin:-4px 0 14px;font-size:14.5px;max-width:64ch}
.hint{color:var(--mute);font-size:13.5px;margin:0;max-width:70ch}
.card{background:var(--s1);border:1px solid var(--line);border-radius:20px;padding:16px;margin-bottom:14px}
.card>h2{margin-bottom:14px}
.stack{display:grid;gap:14px}

.acc{background:var(--s1);border:1px solid var(--line);border-radius:18px;margin:0 0 12px;overflow:hidden}
.acc>summary{list-style:none;padding:16px;font:700 14.5px var(--display);cursor:pointer;display:flex;align-items:center;gap:12px;user-select:none}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.acc[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.acc .ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--s3);font-size:17px;flex:none}
.accbody{padding:2px 16px 18px;display:grid;gap:16px}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:620px){.tiles{grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}}
.tile{display:flex;gap:10px;align-items:center;text-align:left;background:var(--s2);border:1px solid var(--line);border-radius:16px;padding:10px;color:var(--text);cursor:pointer;font:inherit;transition:border-color .15s,background .15s,transform .1s;min-height:64px}
.tile:active{transform:scale(.98)}
.tile .em{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:21px;flex:none}
.tile b{display:block;font-size:14.5px;line-height:1.2}
.tile small{display:block;color:var(--mute);font-size:12px;line-height:1.25;margin-top:2px}
.tile:hover{border-color:var(--line2)}
.tile[aria-pressed=true]{border-color:var(--pink);background:linear-gradient(120deg,rgba(122,92,255,.22),rgba(255,79,163,.18))}

/* controls */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:16px 28px}
.ctl{display:block}
.ctl-top{display:flex;justify-content:space-between;font-size:14px;margin-bottom:2px}
.ctl output{color:var(--cyan);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;height:44px;background:transparent;-webkit-appearance:none;appearance:none;margin:0;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:rgba(255,255,255,.14)}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.14)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:44px;margin-top:-19px;border-radius:50%;border:0;background:radial-gradient(circle,#fff 0 9px,rgba(255,79,163,.55) 10px 14px,transparent 15px)}
input[type=range]::-moz-range-thumb{width:44px;height:44px;border-radius:50%;border:0;background:radial-gradient(circle,#fff 0 9px,rgba(255,79,163,.55) 10px 14px,transparent 15px)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;cursor:pointer}
.check{min-height:44px;align-items:center}
.check input{width:24px;height:24px;accent-color:var(--pink);margin:1px 0 0;flex:none}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px 20px}
.field{display:block;font-size:14px}
.field textarea{display:block;width:100%;margin-top:6px;background:var(--s2);color:var(--text);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;font:inherit;font-size:16px;min-height:120px;resize:vertical}
.field select,.field input[type=text],.field input[type=number]{display:block;width:100%;margin-top:6px;background:var(--s2);color:var(--text);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;font:inherit;font-size:16px;min-height:46px}
.filerow{display:flex;align-items:center;gap:12px;margin-top:6px}
.fname{color:var(--mute);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{min-height:44px;background:var(--s2);border:1px solid var(--line2);color:var(--text);border-radius:999px;padding:8px 14px;font:600 13px var(--font);cursor:pointer}
.chip:hover{border-color:var(--mute)}
.chip[aria-pressed=true]{background:var(--s3);border-color:var(--pink);color:#fff}
button,.tile,.chip,.navbtn,summary,.sw{touch-action:manipulation}
.cats{display:flex;gap:8px;flex-wrap:wrap}
.next{width:100%;margin-top:20px}
.acc{scroll-margin-top:calc(var(--ph,120px) + 76px)}
.ab{font-weight:700;font-size:12px;letter-spacing:.02em}
.ab:active,.ab[aria-pressed=true]{border-color:var(--amber);color:var(--amber)}
.seg{display:flex;flex-wrap:wrap;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:4px}
.seg button{flex:1 1 auto;min-width:0;min-height:44px;border:0;background:transparent;color:var(--mute);font:600 14px var(--font);padding:11px 12px;border-radius:10px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--s3);color:#fff;box-shadow:inset 0 0 0 1px var(--line2)}
.lbl{font-size:14px;margin:0 0 6px;display:block}
.colors{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.colorf{display:grid;gap:6px;justify-items:center;font-size:12px;color:var(--mute)}
.colorf input{width:100%;height:46px;border:1px solid var(--line2);border-radius:12px;background:none;padding:3px;cursor:pointer}
.palette{display:flex;flex-wrap:wrap;gap:10px;padding:4px 2px}
.sw{width:46px;height:46px;border-radius:50%;border:2px solid var(--line2);flex:none;cursor:pointer;padding:0}
.sw:hover{border-color:#fff}

/* stage */
.stagecard{background:#04040c;border:1px solid var(--line);border-radius:22px;padding:12px;display:grid;gap:12px;justify-items:center;margin-bottom:14px}
#stage{max-width:100%;max-height:27vh;width:auto;height:auto;border-radius:12px;display:block;background:#000}
.stagecard{position:sticky;top:var(--ph,120px);z-index:25;padding:8px;gap:8px}
.stagecard.unpinned{position:relative;top:auto}
.pin{position:absolute;right:12px;top:12px;z-index:2;background:rgba(9,9,20,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:7px 12px;font-size:12px}
body.tab-video #mini,body.tab-video .hintkey{display:none}
body.tab-video #wave{height:46px}
body.tab-video .player{padding-bottom:8px}
@media(min-width:900px){#stage{max-height:40vh}}
/* short screens: nothing stays pinned so the controls remain reachable */
@media(max-height:720px){.stagecard{position:relative;top:auto}.pin{display:none}}
@media(max-height:520px) and (orientation:landscape){.player{position:static}#wave{height:44px}}
.navbtn{min-height:48px}
.nav{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
.navbtn{font-size:10.5px}
@media(min-width:900px){.navbtn{font-size:14px}}
#pBpm{color:var(--cyan);font-weight:700;margin-left:10px;font-variant-numeric:tabular-nums}
/* Auto tab */
.dna{display:grid;gap:14px}
.gauge{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.ring{--v:0;width:112px;height:112px;border-radius:50%;background:conic-gradient(var(--pink) calc(var(--v)*1%),rgba(255,255,255,.1) 0);display:grid;place-items:center;flex:none}
.ring b{width:88px;height:88px;border-radius:50%;background:var(--s1);display:grid;place-items:center;font:700 28px var(--display)}
.ring b small{display:block;font:500 11px var(--font);color:var(--mute);margin-top:-14px}
.bars{display:grid;gap:7px;flex:1;min-width:200px}
.bar2{display:grid;grid-template-columns:96px 1fr 44px;align-items:center;gap:8px;font-size:12.5px;color:var(--mute)}
.bar2 i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.bar2 i s{display:block;height:100%;background:var(--grad);border-radius:4px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.fact{background:var(--s2);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.fact small{display:block;color:var(--mute);font-size:11.5px}
.fact b{font-size:16px}
.flags{display:grid;gap:8px}
.flag{display:flex;gap:10px;align-items:flex-start;background:var(--s2);border-radius:12px;padding:10px 12px;font-size:14px}
.flag.warn{border-left:3px solid var(--amber)}.flag.good{border-left:3px solid var(--ok)}.flag.bad{border-left:3px solid var(--pink)}
.rec{background:var(--s2);border:1px solid var(--line);border-radius:16px;padding:12px;display:grid;gap:8px}
.rec h3{margin:0;font:700 15px var(--font);display:flex;gap:8px;align-items:center;justify-content:space-between}
.rec .pct{color:var(--ok);font-variant-numeric:tabular-nums}
.rec p{margin:0;color:var(--mute);font-size:13.5px}
.rec .row{gap:8px}
.progress-steps{display:grid;gap:6px;font-size:13.5px;color:var(--mute)}
.progress-steps div.done{color:var(--ok)}
.deck{background:var(--s1);border:1px solid var(--line);border-radius:18px;padding:12px;margin-bottom:12px;display:grid;gap:10px}
.deck canvas{width:100%;height:56px;border-radius:10px;background:var(--s2);display:block}
.deck-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.deck-head b{flex:1;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deck select{min-height:44px;background:var(--s2);color:var(--text);border:1px solid var(--line2);border-radius:12px;padding:0 10px;font:inherit;font-size:14px}
.arr{overflow-x:auto;padding-bottom:6px}
.arr table{border-collapse:separate;border-spacing:4px;min-width:100%}
.arr th{font-size:11.5px;color:var(--mute);font-weight:600;text-align:center;white-space:nowrap}
.arr td.rl{font-size:12px;color:var(--mute);white-space:nowrap;padding-right:6px}
.arr button{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--s2);color:var(--mute);cursor:pointer}
.arr button[aria-pressed=true]{background:var(--grad);border-color:transparent;color:#fff}
.lyr{display:grid;gap:6px;max-height:50vh;overflow:auto;padding-right:2px}
.lyl{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;background:var(--s2);border:1px solid var(--line);border-radius:12px;padding:6px 8px;min-height:48px}
.lyl[aria-current=true]{border-color:var(--pink);background:#ff4fa31a}
.lyl .ts{font:600 13px var(--font);color:var(--cyan);min-width:74px;text-align:left;background:none;border:0;cursor:pointer;min-height:44px}
.lyl input{width:100%;background:transparent;border:0;color:var(--text);font:inherit;font-size:16px;min-height:44px}
.lyl small{grid-column:2;color:var(--mute);font-size:11px;margin-top:-6px}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--s3);font-size:11.5px;color:var(--mute)}
@media(max-width:699px){
  .player{padding:8px 12px 10px;margin:6px -16px 0}
  #mini{display:none}
  #wave{height:56px}
  .p-head{font-size:13px;margin-bottom:4px}
  .transport{margin-top:6px;gap:6px}
  .icon{width:38px;height:38px}.icon.play{width:48px;height:48px}.icon.play svg{width:23px;height:23px}
  body.tab-video .icon:not(.play):not(.ab){display:none}
  body.tab-video #wave{height:34px}
  .hero.loaded .compact b{max-width:48vw}
  .panel{padding-top:14px}
}
.stagecard .seg{width:100%}
.prog{width:100%;height:10px;accent-color:var(--pink);margin-top:4px}
.prog[hidden]{display:none}
#expPrev{max-width:100%;max-height:34vh;width:auto;height:auto;border-radius:10px;display:block;margin:0 auto;background:#000}
.result{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--s2);display:grid;gap:12px}
.result audio,.result video{width:100%;max-height:52vh;border-radius:10px;background:#000}
.result .btn{text-align:center}
.info{font-size:13.5px;color:var(--mute);background:var(--s2);border-radius:12px;padding:10px 12px}
.info b{color:var(--text)}

#busy,#toast{position:fixed;left:50%;transform:translateX(-50%);padding:11px 18px;border-radius:999px;font-size:14px;max-width:92vw;z-index:60;display:none;align-items:center;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
#busy{bottom:calc(92px + env(safe-area-inset-bottom));background:var(--s3);border:1px solid var(--line2)}
#toast{bottom:calc(144px + env(safe-area-inset-bottom));background:var(--s3);border:1px solid var(--pink)}
@media(min-width:900px){#busy{bottom:24px}#toast{bottom:76px}}
#busy.on,#toast.on{display:flex}
.spin{width:14px;height:14px;border:2px solid var(--line2);border-top-color:var(--cyan);border-radius:50%;animation:sp .8s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}*{scroll-behavior:auto!important}}

/* ===== v4 polish: mobile-first fit, no horizontal leaks, cleaner rhythm ===== */
html,body{max-width:100%;overflow-x:hidden}
img,video,canvas,svg{max-width:100%}
.app{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.player{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}
.card,.acc,.deck,.result,.rec,.flag,.info,.stagecard{max-width:100%;min-width:0}
.card{padding:14px;border-radius:18px}
.acc{border-radius:18px}
.acc>summary{min-height:56px;padding:14px 16px}
.btn{white-space:normal;text-align:center;line-height:1.2}
.btn.big{padding:15px 20px}
.row{min-width:0}
.row>.btn{flex:0 1 auto}
.grid2{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.field input,.field select,.field textarea,.field input[type=text],.field input[type=number]{min-height:48px;font-size:16px;max-width:100%}
.field textarea{min-height:110px}
.tabs,.seg{max-width:100%}
.tile{min-height:72px}
.tiles{gap:12px}
.lyl{grid-template-columns:auto minmax(0,1fr)}
.lyl input{min-width:0}
.bar2{grid-template-columns:minmax(0,86px) minmax(0,1fr) 44px}
.facts{grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr))}
.gauge .ring{margin:0 auto}
.ring{width:104px;height:104px}
#wave{max-width:100%}
.hero{padding:18px}
.hero h1{max-width:20ch}
.nav{padding-bottom:max(8px,env(safe-area-inset-bottom))}
.navbtn span{white-space:nowrap}
@media(max-width:420px){
  .navbtn{font-size:10px;padding:8px 2px}
  .navbtn svg{width:22px;height:22px}
  .bar .brand{font-size:17px}
  .p-head{font-size:13px}
  .transport{gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .transport::-webkit-scrollbar{display:none}
  .icon{width:42px;height:42px;min-width:42px}
  .icon.play{width:52px;height:52px;min-width:52px}
  .hintkey{display:none!important}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile{padding:10px;gap:8px}
  .tile .em{width:38px;height:38px;font-size:19px}
  .tile b{font-size:13.5px}
  .tile small{font-size:11.5px}
  .deck-head{gap:6px}
  .deck-head .btn.small{padding:8px 10px}
  .chips{gap:6px}
  .chip{padding:9px 12px;font-size:12.5px}
  .stagecard{padding:8px}
  .check{font-size:14px}
  .mini,.hint{font-size:13px}
}
@media(max-width:360px){
  .tiles{grid-template-columns:1fr}
  .navbtn span{font-size:9.5px}
  .btn{padding:11px 14px;font-size:13.5px}
}
/* sliders: bigger finger targets, clear value readout */
.ctl{padding:4px 0}
.ctl-top{font-size:14px;align-items:center}
.ctl output{font-weight:600;font-size:13.5px;background:rgba(62,224,255,.1);padding:2px 9px;border-radius:999px;white-space:nowrap}
input[type=range]{touch-action:pan-x}
/* nicer surfaces */
.card,.acc,.deck{box-shadow:0 10px 30px rgba(0,0,0,.22)}
.acc[open]>summary{border-bottom:1px solid var(--line)}
.panel>h2{margin-top:6px}
.lead{font-size:14px}
h2{letter-spacing:0}
.tag{font-size:12px;padding:4px 10px}
.info{border:1px solid var(--line)}
.flag{border:1px solid var(--line)}
.btn:not(.primary){background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)),var(--s2)}
.btn.primary{background:var(--grad)}
.mark{width:36px;height:36px}
.bar{padding:14px 0 10px}
.player{box-shadow:0 8px 24px rgba(0,0,0,.35)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* toasts: smaller, higher above the nav bar, never covering the controls for long */
#toast{bottom:calc(132px + env(safe-area-inset-bottom));max-width:min(88vw,360px);font-size:13px;padding:9px 14px;line-height:1.35;text-align:left;border-radius:14px}
@media(min-width:900px){#toast{bottom:84px}}
#busy{bottom:calc(132px + env(safe-area-inset-bottom));font-size:13px}
.stagebar{justify-content:center;margin:-4px 0 14px}
.stagebar .btn{min-height:44px;padding:10px 16px}
.stagebar .btn[aria-pressed=false]{opacity:.55}

/* ===== v5: Studio and Lyrics fit phones: no overflow, clean wrapping ===== */
#p-studio .flag{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;max-width:100%;overflow:hidden}
#p-studio .flag>span:first-child{flex:1 1 140px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#p-studio .xact{flex:0 0 auto;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:100%}
#p-studio textarea,#p-lyrics textarea{width:100%;max-width:100%;box-sizing:border-box;font-family:"Space Mono",ui-monospace,monospace;font-size:13px;overflow-x:auto}
#p-studio input[type=text],#p-lyrics input[type=text]{min-width:0;max-width:100%;box-sizing:border-box}
#p-studio .card,#p-lyrics .card{min-width:0;max-width:100%}
@media(max-width:480px){
  #p-studio .xact .btn.small{padding:8px 10px;font-size:12px;min-height:36px}
  #p-studio .btn,#p-lyrics .btn{max-width:100%;white-space:normal}
  .lyl{grid-template-columns:auto minmax(0,1fr) auto;gap:6px;padding:6px}
  .lyl input{min-width:0}
  .lyl small{grid-column:2}
}
.stickybar{position:sticky;top:0;z-index:5;background:var(--bg);padding:8px 0}
.stickybar input{width:100%;min-height:44px;background:var(--s2);color:var(--text);border:1px solid var(--line2);border-radius:14px;padding:0 14px;font-size:16px;box-sizing:border-box}

/* v6 final: bare dropdowns in Studio and AI get proper tap size */
#p-studio select,#p-ai select{min-height:44px;font-size:16px;background:var(--s2);color:var(--text);border:1px solid var(--line2);border-radius:12px;padding:0 10px;max-width:100%;box-sizing:border-box}