/* TCE Music Event Player - giao diện hiện đại, 2 chế độ sáng / tối */
:root{
  --font:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,"SF Pro Text",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
  --ac:#f7941d; --ac2:#ffb04d; --ac-soft:rgba(247,148,29,.14); --ac-ink:#2a1700;
  --red:#ef4444; --grn:#22c55e; --blue:#38bdf8;
  --r:14px; --r-sm:9px;
}
:root[data-theme="dark"]{
  --bg:#0e1014; --bar:#14171d; --sf:#181b22; --sf2:#20242d; --sf3:#2a2f3a; --bd:#272c37; --bd2:#363c4a;
  --tx:#e9ebf1; --mu:#8c95a8; --track:#303644; --shadow:0 6px 18px rgba(0,0,0,.35);
  --stopc:#ff7b7b;--playing:rgba(247,148,29,.10); --paused:rgba(250,204,21,.07); --field:#11141a;
}
:root[data-theme="light"]{
  --bg:#eef0f4; --bar:#ffffff; --sf:#ffffff; --sf2:#f4f5f8; --sf3:#e6e9ef; --bd:#e1e4eb; --bd2:#cfd4de;
  --tx:#1b1f29; --mu:#677086; --track:#d5d9e2; --shadow:0 4px 14px rgba(20,30,60,.08);
  --stopc:#c62828;--playing:rgba(247,148,29,.12); --paused:rgba(234,179,8,.10); --field:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);font:13px/1.35 var(--font);overflow:hidden;user-select:none;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
i[data-ic]{display:inline-flex;width:18px;height:18px;flex:none}
i[data-ic] svg{width:100%;height:100%}
#app{display:flex;flex-direction:column;height:100vh}
.grow{flex:1}

/* ===== thanh trên ===== */
#topbar{display:flex;align-items:center;gap:14px;height:62px;padding:0 14px;background:var(--bar);border-bottom:1px solid var(--bd);flex:none}
.brand{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:4px 8px 4px 2px;border-radius:12px;text-align:left}
.brand:hover{background:var(--sf2)}
.brand img{width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--ac-soft)}
.brand b{display:block;font-size:14px;letter-spacing:-.01em}.brand small{display:block;color:var(--mu);font-size:11px;margin-top:1px}
.seg{display:flex;gap:3px;padding:3px;background:var(--sf2);border:1px solid var(--bd);border-radius:12px}
.tab{white-space:nowrap;display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--mu);font-weight:600}
.tab:hover{color:var(--tx)}
.tab.active{background:var(--sf);color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.25),inset 0 0 0 1px var(--bd2)}
.tab.active i{color:var(--ac)}
#tools,#rtools{display:flex;align-items:center;gap:2px}
.tb{white-space:nowrap;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:54px;height:46px;padding:0 8px;border:0;border-radius:10px;background:transparent;color:var(--mu);font-size:10.5px;font-weight:500}
.tb:hover{background:var(--sf2);color:var(--tx)}
.tb.on{background:var(--ac-soft);color:var(--ac2)}
.sep{width:1px;height:26px;background:var(--bd);margin:0 6px}
.pill{white-space:nowrap;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;border-radius:999px;font-weight:700;font-size:12px;letter-spacing:.03em;border:1px solid var(--bd2);background:var(--sf2);color:var(--mu)}
.pill.stopall{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.4);color:var(--stopc);margin-right:8px}
.pill.stopall:hover{background:var(--red);color:#fff;border-color:var(--red)}
.pill .led{width:9px;height:9px;border-radius:50%;background:#4b5263}
.onair.live{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 0 0 4px rgba(239,68,68,.2)}
.onair.live .led{background:#fff;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.25}}

/* ===== trang kênh ===== */
#stage{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}
#main{flex:1 0 auto;min-height:600px;position:relative}
.page{display:none;position:absolute;inset:0;padding:12px}
.page.active{display:grid}
.page.mix{grid-template-columns:repeat(8,minmax(128px,1fr)) 150px;grid-template-rows:minmax(290px,1fr) minmax(290px,1fr);gap:10px;overflow-x:auto}
.chwrap{min-width:0;min-height:0;display:flex}
.card{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:6px;padding:9px 9px 8px;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);position:relative;box-shadow:var(--shadow);transition:border-color .15s,background .15s,box-shadow .15s;overflow:hidden}
.card:hover{border-color:var(--bd2)}
.card.selected{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),var(--shadow)}
.card.playing{background:linear-gradient(180deg,var(--playing),transparent 55%),var(--sf);border-color:var(--ac)}
.card.playing.selected{border-color:var(--blue)}
.card.paused{background:linear-gradient(180deg,var(--paused),transparent 55%),var(--sf)}
.card.dragover{outline:2px dashed var(--ac);outline-offset:-5px}
.c-head{display:flex;align-items:center;gap:6px;height:22px;flex:none}
.num{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:7px;background:var(--sf3);font:700 11px var(--mono);color:var(--mu)}
.card.playing .num{background:var(--ac);color:var(--ac-ink)}
.ch-title{flex:1;min-width:0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.key{min-width:20px;height:20px;padding:0 4px;display:grid;place-items:center;border:1px solid var(--bd2);border-radius:6px;font:600 10px var(--mono);color:var(--mu);text-transform:uppercase;background:var(--sf2)}
.more{width:24px;height:22px;border:0;border-radius:7px;background:transparent;color:var(--mu);display:grid;place-items:center;padding:0}
.more:hover{background:var(--sf3);color:var(--tx)}.more svg{width:16px;height:16px}

.big{flex:none;min-height:50px;border:1px dashed var(--bd2);background:var(--sf2);border-radius:var(--r-sm);padding:6px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center;min-width:0;overflow:hidden}
.big:hover{border-color:var(--ac);background:var(--ac-soft)}
.big .nm{font-size:12.5px;font-weight:600;line-height:1.2;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.big .st{font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--mu)}
.big.empty .st{font-weight:500;letter-spacing:0;font-size:10.5px}
.big.empty .nm{color:var(--mu);font-weight:500;display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.big.empty .nm svg{width:15px;height:15px}
.big:not(.empty){border-style:solid;background:var(--sf2)}
.card.playing .big{border-color:var(--ac);background:var(--ac)}
.card.playing .big .nm{color:var(--ac-ink)}.card.playing .big .st{color:rgba(42,23,0,.7)}
.card.missing .big{border-color:var(--red)}.card.missing .big .st{color:var(--red)}

.c-mid{flex:1;min-height:56px;display:flex;justify-content:center;gap:7px;padding:2px 0}
.fader-wrap{width:30px;display:flex;justify-content:center;position:relative}
.fader{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:30px;height:100%;background:transparent;margin:0;cursor:pointer;outline:0}
.fader::-webkit-slider-runnable-track{width:6px;border-radius:3px;background:linear-gradient(to top,var(--ac) var(--v,100%),var(--track) var(--v,100%))}
.fader::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:13px;margin-left:-11px;border-radius:5px;background:linear-gradient(#fbfbfd,#dfe2e9);border:1px solid #9aa1b1;box-shadow:0 2px 5px rgba(0,0,0,.35)}
.fader:hover::-webkit-slider-thumb,.fader:focus-visible::-webkit-slider-thumb{border-color:var(--ac)}
.vu{width:7px;border-radius:4px;background:linear-gradient(to top,#22c55e 0,#22c55e 62%,#f5b50b 82%,#ef4444 100%);position:relative;overflow:hidden;opacity:.95}
.vu i{position:absolute;left:0;right:0;top:0;height:100%;background:var(--track)}
.scale{display:flex;flex-direction:column;justify-content:space-between;font:9px var(--mono);color:var(--mu);padding:3px 0}
.vol{text-align:center;font:600 11px var(--mono);color:var(--mu)}
.c-time{display:flex;align-items:baseline;justify-content:space-between;padding:0 3px;font-variant-numeric:tabular-nums}
.t1{font:700 15px var(--mono);letter-spacing:-.02em}
.card.playing .t1{color:var(--ac2)}
.t2{font:11px var(--mono);color:var(--mu)}
.seek{-webkit-appearance:none;appearance:none;width:100%;height:12px;margin:0;background:transparent;cursor:pointer;flex:none}
.seek::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--ac) var(--p,0%),var(--track) var(--p,0%))}
.seek::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border-radius:50%;background:#fff;border:2px solid var(--ac);opacity:0;transition:opacity .12s}
.card:hover .seek::-webkit-slider-thumb,.seek:active::-webkit-slider-thumb{opacity:1}
.c-tr{display:flex;gap:6px;flex:none}
.c-tr button{height:34px;border-radius:10px;border:1px solid var(--bd2);background:var(--sf2);display:grid;place-items:center;padding:0}
.c-tr button:hover{background:var(--sf3)}
.c-tr svg{width:17px;height:17px}
.c-tr .play{flex:1;background:var(--ac);border-color:var(--ac);color:var(--ac-ink)}
.c-tr .play:hover{background:var(--ac2)}
.c-tr .stp{width:40px}
.chips{display:flex;gap:4px;flex:none}
.chips button{flex:1;height:24px;border:1px solid var(--bd);border-radius:8px;background:transparent;color:var(--mu);display:grid;place-items:center;padding:0}
.chips button svg{width:15px;height:15px}
.chips button:hover{color:var(--tx);background:var(--sf2)}
.chips button.on{background:var(--ac-soft);border-color:var(--ac);color:var(--ac2)}

/* cột phải: GO + Master */
.gowrap{grid-column:9;grid-row:2;display:flex;flex-direction:column;gap:8px;min-height:0}.go{flex:1;min-height:0;border:0;border-radius:var(--r);background:linear-gradient(180deg,#ffd24d,#fbbf24);color:#3a2a00;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 8px 24px rgba(251,191,36,.25);font-weight:800}
.go b{font-size:40px;letter-spacing:.04em;line-height:1}.go small{font-size:11px;font-weight:600;opacity:.75}
.go:hover{filter:brightness(1.06)}.go:active{transform:translateY(1px);filter:brightness(.96)}
.go-next{font-size:11px;margin-top:2px;max-width:130px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;opacity:.8}
.masterwrap{grid-column:9;grid-row:1;display:flex;min-height:0}
.masterwrap .card{align-items:stretch}
.masterwrap .c-mid{justify-content:center}

/* ===== playlist ===== */
#page2{grid-template-rows:auto 1fr auto;gap:10px}
.plbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r)}
.btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:1px solid var(--bd2);background:var(--sf2);border-radius:10px;font-weight:500}
.btn:hover{background:var(--sf3)}
.btn.primary{background:var(--ac);border-color:var(--ac);color:var(--ac-ink);font-weight:700}.btn.primary:hover{background:var(--ac2)}
.pllist{overflow:auto;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r)}
.plrow{display:grid;grid-template-columns:52px 1fr 96px 44px;align-items:center;height:42px;padding:0 16px;border-bottom:1px solid var(--bd);cursor:default}
.plrow:hover{background:var(--sf2)}
.plrow.sel{background:rgba(56,189,248,.1)}
.plrow.cur{background:var(--ac-soft);font-weight:600}
.plrow .n{color:var(--mu);font:12px var(--mono)}.plrow .d{text-align:right;color:var(--mu);font:12px var(--mono)}
.plempty{padding:70px 20px;text-align:center;color:var(--mu);font-size:14px}
.plfoot{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r)}
.plnow{min-width:240px;max-width:380px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plfoot span{font:12px var(--mono);color:var(--mu)}
.plseek{flex:1;-webkit-appearance:none;appearance:none;height:14px;background:transparent;margin:0}
.plseek::-webkit-slider-runnable-track{height:4px;background:var(--track);border-radius:2px}
.plseek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;margin-top:-5px;background:var(--ac);border:0}
.plvol{flex:none;width:110px}
label.chk{display:inline-flex;align-items:center;gap:6px;color:var(--mu)}
input[type=checkbox]{accent-color:var(--ac);width:15px;height:15px}

/* ===== thanh trạng thái ===== */
#status{display:flex;align-items:center;gap:16px;height:26px;padding:0 14px;font-size:11.5px;color:var(--mu);border-top:1px solid var(--bd);background:var(--bar);flex:none}
#stClock{font:600 12px var(--mono);color:var(--tx)}

/* ===== popup / modal / toast ===== */
.popup{position:fixed;z-index:50;min-width:210px;background:var(--sf);border:1px solid var(--bd2);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.45);padding:5px}
.popup button{display:flex;align-items:center;width:100%;text-align:left;border:0;background:transparent;padding:8px 10px;gap:8px;border-radius:8px}
.popup button:hover{background:var(--sf3)}
.popup .ck{width:14px;color:var(--ac);font-weight:800}
.popup hr{border:0;border-top:1px solid var(--bd);margin:5px 2px}
.modal-bg{position:fixed;inset:0;z-index:60;background:rgba(5,7,10,.6);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center}
.modal{background:var(--sf);color:var(--tx);border:1px solid var(--bd2);border-radius:18px;min-width:440px;max-width:780px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.55);user-select:text}
.modal h3{margin:0;padding:18px 22px;font-size:16px;border-bottom:1px solid var(--bd)}
.modal .body{padding:18px 22px;overflow:auto;line-height:1.55}
.modal .foot{padding:14px 22px;border-top:1px solid var(--bd);display:flex;justify-content:flex-end;gap:8px}
.form{display:grid;grid-template-columns:auto 1fr;gap:12px 16px;align-items:center}
.form input[type=text],.form input[type=number],.form select,.grid4 input{height:36px;border:1px solid var(--bd2);background:var(--field);color:var(--tx);border-radius:9px;padding:0 10px;font:inherit;min-width:0;width:100%;outline:0}
.form input:focus,.form select:focus,.grid4 input:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-soft)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.grid4 label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--mu);font-weight:600}
.keyin{text-transform:uppercase;text-align:center;font-family:var(--mono)}
.about{text-align:center}.about img{width:110px;height:110px;border-radius:50%;background:#fff}
.help dt{font-weight:700;margin-top:10px;color:var(--ac2)}.help dd{margin:2px 0 0 0;color:var(--mu)}
.kv{display:grid;grid-template-columns:120px 1fr;gap:8px 12px;align-items:center}.kv b{color:var(--mu);font-weight:600}.kv code{font:600 15px var(--mono);color:var(--ac2);user-select:all}
.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:700;background:rgba(34,197,94,.15);color:#4ade80}
kbd{background:var(--sf3);border:1px solid var(--bd2);border-bottom-width:2px;border-radius:5px;padding:0 6px;font:11px var(--mono);color:var(--tx)}
#toast{position:fixed;left:50%;bottom:44px;transform:translateX(-50%);background:var(--sf3);color:var(--tx);border:1px solid var(--bd2);padding:10px 18px;border-radius:999px;z-index:80;font-size:12.5px;box-shadow:0 10px 30px rgba(0,0,0,.4)}

/* ===== long view ===== */
#longview{position:fixed;inset:0;z-index:70;background:radial-gradient(1200px 600px at 20% -10%,#1a2030 0,transparent 60%),radial-gradient(900px 500px at 100% 110%,#2a1a08 0,transparent 55%),#07090d;color:#f2f4f8;user-select:none;overflow:hidden}
.lvA{display:flex;flex-direction:column;height:100%}
.lv-top{height:clamp(60px,9vh,84px);display:flex;align-items:center;gap:18px;padding:0 clamp(18px,2.5vw,36px);border-bottom:1px solid #252b37;background:rgba(10,12,17,.6);flex:none}
.lv-top img{width:48px;height:48px;border-radius:50%;background:#fff;object-fit:cover}.lv-ttl b{display:block;font-size:19px}.lv-ttl small{color:#8b94a7}
.lv-onair{margin-left:24px;display:flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid #2a3243;background:#151a23;color:#6b7487;border-radius:999px;font-weight:700;letter-spacing:.14em;font-size:12px}.lv-onair i{width:9px;height:9px;border-radius:50%;background:#3a4457}
.lv-onair.on{border-color:#7f1d1d;background:rgba(239,68,68,.12);color:#fca5a5}.lv-onair.on i{background:#ef4444;box-shadow:0 0 12px #ef4444}
.lv-clock{margin-left:auto;text-align:right}.lv-clock b{font:600 clamp(24px,3vw,34px) var(--mono)}.lv-clock small{display:block;color:#8b94a7;margin-top:-2px}
.lv-body{flex:1;min-height:0;display:grid;grid-template-columns:1fr clamp(320px,28vw,440px);gap:22px;padding:clamp(14px,2.5vh,24px) clamp(18px,2.5vw,36px)}
.lv-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:0;padding:clamp(20px,3vh,34px) clamp(22px,2.6vw,40px);border-radius:26px;background:linear-gradient(160deg,#171d29,#10141b);border:1px solid #252b37}
.lv-hero:before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:linear-gradient(var(--ac),#ff6a00)}.lv-hero.pause:before{background:#6b7280}.lv-hero.idle:before{background:#3a4457}
.lv-lab{display:flex;align-items:center;gap:10px;color:var(--ac2);font-weight:700;letter-spacing:.2em;font-size:12px}.lv-lab .chip{background:var(--ac);color:#2a1700;padding:4px 10px;border-radius:7px;letter-spacing:.06em}.lv-hero.pause .lv-lab,.lv-hero.idle .lv-lab{color:#94a3b8}.lv-hero.pause .chip,.lv-hero.idle .chip{background:#475569;color:#e2e8f0}
.lv-song{font-size:clamp(30px,4.2vw,58px);font-weight:700;line-height:1.1;margin:14px 0 6px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lv-sub{color:#8b94a7;font-size:16px}
.lv-wave{width:100%;height:clamp(50px,10vh,90px);margin:18px 0 8px;flex:none}.lv-prog{height:8px;border-radius:4px;background:#222a37;overflow:hidden;flex:none}.lv-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ac),var(--ac2))}
.lv-count{margin-top:auto;display:flex;align-items:flex-end;gap:36px}.lv-count .lv-big{font:700 clamp(90px,17vw,200px)/.9 var(--mono);letter-spacing:-.04em;color:#fff}.lv-count .lv-big.warn{color:#fbbf24}.lv-hero.idle .lv-big{color:#3a4457}
.lv-count .meta{padding-bottom:14px;color:#8b94a7;font-size:15px;line-height:1.9}.lv-count .meta b{color:#f2f4f8;font-family:var(--mono);font-weight:600}
.lv-side{display:flex;flex-direction:column;gap:14px;min-height:0;overflow:hidden}
.lv-card{background:#11151c;border:1px solid #252b37;border-radius:20px;padding:16px 20px}.lv-card.nx{border-style:dashed;border-color:#3a4457;background:rgba(56,189,248,.05)}
.lv-card h4{margin:0 0 8px;font-size:11px;letter-spacing:.2em;color:#8b94a7;font-weight:700;display:flex;justify-content:space-between}
.lv-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid #1d2330}.lv-row:first-child{border-top:0}
.lv-row .n{flex:none;min-width:34px;height:34px;padding:0 4px;border-radius:10px;background:#232a38;display:grid;place-items:center;font:700 13px var(--mono);color:#c7cedb}
.lv-row .t{flex:1;min-width:0}.lv-row .t b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lv-row .t small{color:#8b94a7}.lv-row .d{font:600 18px var(--mono);color:var(--ac2)}
.lv-row.play .n{background:var(--ac);color:#2a1700}.lv-row.pause .d{color:#94a3b8}.lv-card.nx .lv-row .n{background:rgba(56,189,248,.18);color:#38bdf8}
.lv-none{color:#6b7487;padding:8px 0}.lv-fx{display:flex;flex-wrap:wrap;gap:8px}.lv-fx span{padding:7px 12px;border-radius:9px;background:#1d2330;border:1px solid #2a3243;font-size:13px}.lv-fx span.on{background:rgba(247,148,29,.18);border-color:var(--ac);color:var(--ac2)}.lv-fx .none{color:#6b7487;background:transparent;border-style:dashed}
.lv-foot{flex:none;height:52px;display:flex;align-items:center;gap:26px;padding:0 clamp(18px,2.5vw,36px);border-top:1px solid #252b37;color:#8b94a7;font-size:13px}.lv-foot b{color:#f2f4f8}.lv-foot .r{margin-left:auto}
.lv-mt{display:flex;gap:2px;align-items:flex-end;height:22px}.lv-mt i{width:6px;height:5px;border-radius:2px;background:#222a37}.lv-mt i.g{background:#22c55e;height:11px}.lv-mt i.y{background:#eab308;height:16px}.lv-mt i.r{background:#ef4444;height:22px}

/* thanh cuộn */
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--sf3);border-radius:6px;border:2px solid transparent;background-clip:content-box}
:root[data-platform="darwin"] .tab,:root[data-platform="darwin"] .tb{font-weight:500}
@media (max-width:1620px){.tb span{display:none}.tb{min-width:40px;height:40px}#topbar{gap:10px}}
@media (max-width:1500px){.brand span{display:none}.tab{padding:0 10px}}

/* ===== v1.2: thanh chuyển bài ===== */
#subbar{display:flex;align-items:center;gap:14px;height:46px;padding:0 14px;background:var(--bar);border-bottom:1px solid var(--bd);flex:none}
.sb-grp{display:flex;align-items:center;gap:8px}.sb-l{color:var(--mu);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.seg.sm{padding:2px;border-radius:10px}.seg.sm button{height:28px;padding:0 13px;border:0;border-radius:8px;background:transparent;color:var(--mu);font-weight:600;font-size:12px}
.seg.sm button:hover{color:var(--tx)}.seg.sm button.on{background:var(--ac);color:var(--ac-ink)}
.sb-num{display:inline-flex;align-items:center;gap:5px;color:var(--mu);font-size:11px}
.sb-num input{width:54px;height:28px;border:1px solid var(--bd2);background:var(--field);color:var(--tx);border-radius:8px;padding:0 6px;font:600 12px var(--mono);text-align:center;outline:0}
.sb-toggle{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:1px solid var(--bd2);background:var(--sf2);border-radius:10px;color:var(--mu);font-weight:700;font-size:12px;letter-spacing:.03em}
.sb-toggle i{width:16px;height:16px}.sb-toggle b{font-size:10px;padding:1px 7px;border-radius:99px;background:var(--sf3);color:var(--mu)}
.sb-toggle:hover{color:var(--tx)}.sb-toggle.on{border-color:var(--ac);background:var(--ac-soft);color:var(--ac2)}.sb-toggle.on b{background:var(--ac);color:var(--ac-ink)}
.pfl-mini{padding:0 12px;height:32px;border:1px solid var(--bd);border-radius:10px;color:var(--mu);font-size:12px;max-width:460px}
.pfl-mini span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pfl-mini i{width:16px;height:16px;flex:none}
.pfl-mini.on{border-color:var(--blue);color:var(--blue);background:rgba(56,189,248,.08)}
.pill.rec{background:var(--sf2)}.pill.rec i{width:12px;height:12px;color:var(--red)}
.pill.rec.live{background:var(--red);border-color:var(--red);color:#fff;animation:pulse2 1.4s infinite}.pill.rec.live i{color:#fff}
@keyframes pulse2{50%{box-shadow:0 0 0 5px rgba(239,68,68,.25)}}
.chips button.on{background:var(--ac-soft)}
.plmode-l{color:var(--mu);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.plhint{color:var(--mu);font-size:11.5px}
.plrow .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:10px}
.plrow .pfl{width:30px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--mu);display:grid;place-items:center;padding:0;justify-self:end}
.plrow .pfl:hover{background:var(--sf3);color:var(--blue)}.plrow .pfl svg{width:16px;height:16px}
.btn.pri{background:var(--ac);border-color:var(--ac);color:var(--ac-ink);font-weight:700}
.btn.small{height:28px;padding:0 10px;font-size:12px}
.btn svg{width:15px;height:15px}

/* ===== hàng hiệu ứng ===== */
#sfxrow{flex:none;margin:10px 12px 0;padding:8px 10px 10px;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r)}
.sfx-head{display:flex;align-items:center;gap:12px;height:30px;font-size:12px}.sfx-head b{letter-spacing:.08em;font-size:11px}
.sfx-ic{display:inline-flex;width:16px;height:16px;color:var(--ac)}.sfx-ic svg{width:100%;height:100%}
.sfx-hint{color:var(--mu);font-size:11px}
.rng{display:inline-flex;align-items:center;gap:7px;color:var(--mu)}.rng span{display:inline-flex;width:15px;height:15px}.rng span svg{width:100%;height:100%}
.rng input[type=range]{width:110px;accent-color:var(--ac);height:14px}.rng b{font:600 11px var(--mono);min-width:34px;color:var(--mu)}
.wb{display:inline-flex;align-items:center;gap:5px;height:30px;min-width:30px;padding:0 9px;justify-content:center;border:1px solid var(--bd2);background:var(--sf2);border-radius:8px;color:var(--tx);font-size:12px;font-weight:600}
.wb:hover{background:var(--sf3)}.wb svg{width:15px;height:15px}.wb.on{background:var(--ac-soft);border-color:var(--ac);color:var(--ac2)}
.wb.pri{background:var(--ac);border-color:var(--ac);color:var(--ac-ink)}.wb.sm{padding:0 7px;min-width:26px;height:26px}
.wv-toggle{width:26px;height:26px;border:0;background:transparent;color:var(--mu);border-radius:7px;display:grid;place-items:center;padding:0}.wv-toggle:hover{background:var(--sf3)}.wv-toggle svg{width:16px;height:16px;transition:transform .15s}
.collapsed .wv-toggle svg{transform:rotate(-90deg)}
.sfx-pads{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;margin-top:6px}
#sfxrow.collapsed .sfx-pads{display:none}
.pad{position:relative;height:62px;border:1px solid var(--bd2);border-top:3px solid var(--pc,var(--ac));border-radius:10px;background:var(--sf2);padding:6px 8px 8px;text-align:left;display:flex;flex-direction:column;gap:2px;overflow:hidden;min-width:0}
.pad:hover{background:var(--sf3)}.pad.dragover{outline:2px dashed var(--ac);outline-offset:-4px}
.pad .pk{font:700 10px var(--mono);color:var(--mu);text-transform:uppercase;position:absolute;left:8px;top:5px;border:1px solid var(--bd2);border-radius:5px;padding:0 4px;background:var(--sf)}
.pad .pm{position:absolute;right:4px;top:3px;width:20px;height:16px;color:var(--mu);display:grid;place-items:center}.pad .pm svg{width:14px;height:14px}
.pad .pn{margin-top:14px;font-size:11.5px;font-weight:600;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.pad .ps{font-size:8.5px;font-weight:700;letter-spacing:.06em;color:var(--mu)}
.pad.empty .pn{display:flex;align-items:center;gap:4px;color:var(--mu);font-weight:500;font-size:10.5px}.pad.empty .pn svg{width:13px;height:13px;flex:none}
.pad .pb{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}.pad .pb i{display:block;height:100%;width:0;background:var(--pc)}
.pad.playing{background:color-mix(in srgb,var(--pc) 28%,var(--sf2));border-color:var(--pc)}
.swatches{display:flex;gap:7px}.sw{width:26px;height:26px;border-radius:50%;border:2px solid transparent;padding:0}.sw.on{border-color:var(--tx)}

/* ===== bảng sóng nhạc ===== */
#wavepanel{flex:none;margin:10px 12px 0;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:8px 12px 10px}
.wv-head{display:flex;align-items:center;gap:10px}
.wv-title{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1}.wv-title b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wv-title small{color:var(--mu);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wv-ic{display:inline-flex;width:16px;height:16px;color:var(--ac);align-self:center}.wv-ic svg{width:100%;height:100%}
.wv-times{display:flex;gap:22px}.wv-times div{display:flex;flex-direction:column;align-items:flex-end}.wv-times small{font-size:9px;letter-spacing:.1em;color:var(--mu);font-weight:700}
.wv-times b{font:700 20px var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums}.wv-times div:nth-child(2) b{color:var(--ac2)}
.wv-canvas{position:relative;height:104px;margin-top:6px;border-radius:10px;overflow:hidden;background:var(--sf2);border:1px solid var(--bd)}
.wv-canvas canvas{width:100%;height:100%;display:block;cursor:crosshair}
.wv-tip{position:absolute;top:4px;padding:2px 7px;border-radius:6px;background:var(--sf3);font:11px var(--mono);pointer-events:none;transform:translateX(-50%)}
.wv-ctrl{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;align-items:center}
.wv-grp{display:flex;align-items:center;gap:5px}.wv-lbl{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--mu);margin-right:2px}
.wv-cues{display:flex;gap:4px;flex-wrap:wrap}
.cue{height:26px;padding:0 8px;border:1px solid var(--bd2);border-radius:7px;background:var(--sf2);font:11px var(--mono);color:var(--tx);display:inline-flex;align-items:center;gap:5px}
.cue b{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#22c55e;color:#04210f;font-size:10px}.cue:hover{background:var(--sf3)}
.wv-hint{margin-top:5px;font-size:10.5px;color:var(--mu)}
#wavepanel.collapsed .wv-body{display:none}

/* ===== cửa sổ cài đặt ===== */
.modal.settings-modal{width:min(1000px,94vw);max-width:none;height:min(720px,90vh);border-radius:16px;overflow:hidden}
.settings-modal h3{display:none}.settings-modal .body{padding:0;flex:1;min-height:0;display:flex;overflow:hidden}
.settings{display:flex;flex:1;min-width:0}
.snav{width:150px;flex:none;background:var(--bar);border-right:1px solid var(--bd);display:flex;flex-direction:column;padding:10px 8px;gap:3px}
.sn{display:flex;align-items:center;gap:9px;height:40px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--mu);font-weight:600;text-align:left}
.sn:hover{background:var(--sf2);color:var(--tx)}.sn.on{background:var(--ac-soft);color:var(--ac2)}
.sn-ver{margin-top:auto;font-size:10.5px;color:var(--mu);padding:8px;line-height:1.4}
.spane{flex:1;min-width:0;display:flex;flex-direction:column}
.spane-head{display:flex;align-items:center;height:44px;padding:0 16px;border-bottom:1px solid var(--bd);font-weight:800;letter-spacing:.06em;font-size:12px}.spane-head .ttl{flex:1}
.spane-head .x{width:30px;height:30px;border:0;background:transparent;border-radius:8px;color:var(--mu);display:grid;place-items:center;padding:0}.spane-head .x:hover{background:var(--sf3)}.spane-head .x svg{width:16px;height:16px}
.spane-body{flex:1;overflow:auto;padding:16px 18px}
.aud-top{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:12px}
.aud-grp h4{margin:0 0 6px;font-size:10.5px;letter-spacing:.1em;color:var(--mu)}
.aud-btns{display:flex;gap:6px}
.ab{flex:1;min-height:64px;border:1px solid var(--bd2);background:var(--sf2);border-radius:10px;color:var(--mu);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:6px;text-align:center;line-height:1.2}
.ab i{width:22px;height:22px}.ab small{font-weight:500;letter-spacing:0;font-size:9.5px}
.ab:hover:not(:disabled){background:var(--sf3);color:var(--tx)}.ab.on{border-color:var(--ac);background:var(--ac-soft);color:var(--ac2)}.ab:disabled{opacity:.4;cursor:not-allowed}
.aud-sec{margin:18px 0 6px;font-size:11px;letter-spacing:.08em;font-weight:700;color:var(--mu);text-transform:uppercase}
.aud-table{border:1px solid var(--bd);border-radius:10px;background:var(--field);padding:6px;display:flex;flex-direction:column;gap:6px;min-height:50px}
.arow{display:grid;grid-template-columns:96px 1fr 130px 130px 30px;gap:8px;align-items:center}
.arow.in{grid-template-columns:96px 1fr 130px 220px 30px}
.arow .role{font-weight:700;color:var(--ac2);padding-left:6px}.arow .stat{font:11px var(--mono);color:var(--mu)}
.arow select{height:32px;border:1px solid var(--bd2);background:var(--sf2);color:var(--tx);border-radius:8px;padding:0 8px;min-width:0;width:100%;font:inherit;font-size:12px}
.arow .rm{border:0;background:transparent;color:var(--mu);width:28px;height:28px;border-radius:7px;padding:0;display:grid;place-items:center}.arow .rm:hover{background:var(--sf3);color:var(--red)}.arow .rm svg{width:14px;height:14px}
.inctl{display:flex;align-items:center;gap:8px}.inctl input{flex:1;accent-color:var(--ac)}
.meter{width:70px;height:8px;background:var(--track);border-radius:4px;overflow:hidden}.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22c55e,#f5b50b,#ef4444)}
.addrow{height:34px;border:1px dashed var(--bd2);background:transparent;color:var(--mu);border-radius:8px}.addrow:hover{border-color:var(--ac);color:var(--ac2)}
.empty-row{padding:12px;color:var(--mu);font-size:12px}
.aud-msg{margin-top:12px;min-height:20px;color:var(--mu);font-size:12px}.aud-msg.err{color:var(--stopc)}
.aud-foot{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}.aud-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.aud-apply{margin-left:auto;display:flex;align-items:center;gap:6px}.aud-apply select{height:34px;border:1px solid var(--bd2);background:var(--sf2);color:var(--tx);border-radius:8px;padding:0 8px}
.btn.apply{background:var(--ac);color:var(--ac-ink);border-color:var(--ac);font-weight:800;letter-spacing:.04em;height:36px}.btn.apply:disabled{opacity:.6}
.rec-box h4{margin:0 0 8px;font-size:10.5px;letter-spacing:.1em;color:var(--mu)}
.rec-form{grid-template-columns:110px 1fr}.rec-form select{height:36px;border:1px solid var(--bd2);background:var(--field);color:var(--tx);border-radius:9px;padding:0 10px}
.fn{display:flex;gap:6px}.fn input{flex:1}
.rec-go{display:flex;align-items:center;gap:18px;margin-top:22px}
.recbtn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 28px;border:0;border-radius:12px;background:var(--red);color:#fff;font-weight:800;letter-spacing:.06em;font-size:14px}.recbtn i{width:18px;height:18px}
.recbtn.on{background:var(--sf3);color:var(--tx);box-shadow:inset 0 0 0 2px var(--red)}
.rec-info{font:700 14px var(--mono);color:var(--red)}.rec-note{margin-top:20px;color:var(--mu);font-size:12px}.rec-last{margin-top:10px;font-size:12px;color:var(--mu)}.rec-last code{color:var(--ac2);user-select:all}
.opt-form{grid-template-columns:1fr 230px}.opt-note{color:var(--mu);font-size:12px;margin-top:16px}
.opt-form select{height:36px;border:1px solid var(--bd2);background:var(--field);color:var(--tx);border-radius:9px;padding:0 10px}
@media (max-width:1500px){.sb-l{display:none}.pfl-mini{max-width:300px}}

.upd-box{margin-top:26px;padding-top:14px;border-top:1px solid var(--bd)}.upd-box h4{margin:0 0 10px;font-size:10.5px;letter-spacing:.1em;color:var(--mu)}
.upd-box .form{grid-template-columns:1fr 330px}.upd-act{display:flex;align-items:center;gap:14px;margin-top:12px}.upd-act .opt-note{margin:0}
.upd-notes{margin:8px 0;padding:10px 12px;background:var(--field);border:1px solid var(--bd);border-radius:10px;max-height:180px;overflow:auto;font-size:12.5px;color:var(--mu)}
.upd-prog{margin-top:12px;display:flex;flex-direction:column;gap:6px}.upd-prog .bar{height:8px;background:var(--track);border-radius:4px;overflow:hidden}.upd-prog .bar i{display:block;height:100%;width:0;background:var(--ac);transition:width .2s}.upd-prog span{font:12px var(--mono);color:var(--mu)}
.upd-prog[hidden]{display:none}

.sb-toggle kbd{font:700 10px var(--mono);padding:0 5px;border-radius:5px;text-transform:uppercase}
.sb-toggle.talk.on{border-color:var(--red);background:rgba(239,68,68,.14);color:#ff8f8f}.sb-toggle.talk.on b{background:var(--red);color:#fff}
.sb-toggle.talk.on i{animation:pulse 1s infinite}
.grid4 .talkkey{grid-column:span 2}.grid4 .talkkey b{color:var(--ac2)}

/* ===== v1.4 ===== */
.wv-lanes{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.wv-lane{position:relative;border-radius:10px;overflow:hidden;background:var(--sf2);border:1px solid var(--bd)}
.wv-lane.sel{border-color:var(--ac)}
.wv-lane canvas{width:100%;height:100%;display:block;cursor:crosshair}
.wv-lanes.n1 .wv-lane{height:104px}.wv-lanes.n2 .wv-lane{height:84px}.wv-lanes.n3 .wv-lane{height:68px}.wv-lanes.n4 .wv-lane{height:58px}
.wv-lab{position:absolute;left:8px;top:3px;font:600 10.5px var(--mono);color:var(--mu);pointer-events:none;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px var(--sf2)}
.wv-lane.sel .wv-lab{color:var(--ac2)}
.wv-lane .wv-tip{top:auto;bottom:16px}
.wv-zoom{font:700 12px var(--mono);min-width:34px;text-align:center;color:var(--ac2)}
.wv-hint kbd{font-size:10px}
.sb-more{width:26px;height:32px;border:1px solid var(--bd2);background:var(--sf2);color:var(--mu);border-radius:10px;display:grid;place-items:center;padding:0}
.sb-more:hover,.sb-more.on{color:var(--ac2);border-color:var(--ac)}.sb-more svg{width:16px;height:16px;transform:rotate(90deg)}
.mc-pop{position:fixed;z-index:60;width:300px;background:var(--sf);border:1px solid var(--bd2);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.5);padding:14px 16px}
.mc-pop h4{margin:0 0 8px;font-size:12px;letter-spacing:.06em;color:var(--mu)}
.mc-pop .r{display:grid;grid-template-columns:1fr 64px;gap:8px;align-items:center;margin-top:10px;font-size:12.5px}
.mc-pop .big{display:flex;align-items:center;gap:10px;margin-top:4px;border:0;background:transparent;padding:0;min-height:0}
.mc-pop input[type=range]{flex:1}.mc-pop .big b{min-width:44px;text-align:right;font:700 16px var(--mono);color:var(--ac2)}
.mc-pop input[type=number]{height:30px;border:1px solid var(--bd2);background:var(--field);color:var(--tx);border-radius:8px;padding:0 6px;font:600 12px var(--mono);text-align:center;width:100%}
.mc-pop small{display:block;margin-top:10px;color:var(--mu);font-size:11px;line-height:1.4}
/* mega menu hiệu ứng */
.tb.sfxbtn{color:var(--ac2)}
#megasfx{position:fixed;z-index:70;left:12px;top:58px;width:min(980px,calc(100vw - 24px));height:min(560px,calc(100vh - 80px));background:var(--sf);border:1px solid var(--bd2);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.6);display:flex;overflow:hidden}
#megasfx[hidden]{display:none}
.mg-cats{width:220px;flex:none;background:var(--bar);border-right:1px solid var(--bd);padding:10px 8px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.mg-cat{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:transparent;color:var(--tx);padding:9px 10px;border-radius:9px;font-weight:600;font-size:13px}
.mg-cat:hover{background:var(--sf2)}.mg-cat.on{background:var(--ac-soft);color:var(--ac2)}.mg-cat .e{font-size:16px;width:22px;text-align:center}.mg-cat small{margin-left:auto;color:var(--mu);font-weight:500}
.mg-main{flex:1;min-width:0;display:flex;flex-direction:column}
.mg-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--bd)}
.mg-top input[type=text]{flex:1;height:34px;border:1px solid var(--bd2);background:var(--field);color:var(--tx);border-radius:9px;padding:0 12px;outline:0;font:inherit}
.mg-grid{flex:1;overflow:auto;padding:12px 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;align-content:start}
.mg-it{display:flex;align-items:center;gap:6px;border:1px solid var(--bd2);background:var(--sf2);border-radius:10px;padding:6px 6px 6px 10px;min-width:0}
.mg-it.playing{border-color:var(--ac);background:var(--ac-soft)}
.mg-it .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;border:0;background:transparent;color:var(--tx);font-weight:600;font-size:12.5px;padding:6px 0}
.mg-it .d{color:var(--mu);font:10.5px var(--mono)}
.mg-it .pin,.mg-it .rm{width:28px;height:28px;border:1px solid var(--bd2);background:var(--sf3);border-radius:8px;color:var(--mu);padding:0;display:grid;place-items:center;font-size:13px}
.mg-it .pin:hover{color:var(--ac2);border-color:var(--ac)}.mg-it .rm:hover{color:var(--red)}
.mg-foot{padding:9px 14px;border-top:1px solid var(--bd);display:flex;align-items:center;gap:10px;color:var(--mu);font-size:11.5px}
.mg-empty{grid-column:1/-1;color:var(--mu);padding:30px;text-align:center;line-height:1.6}
/* thương hiệu */
.brand img,.lg-av{object-fit:cover}
#stAvatar{width:18px;height:18px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:6px;background:#fff}
.brd-prev{display:flex;gap:16px;align-items:center;margin-bottom:12px}
.brd-prev .av{width:84px;height:84px;border-radius:50%;object-fit:cover;background:#fff;border:2px solid var(--bd2)}
.brd-row{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.pre-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto;margin-top:10px}
.pre-it{display:flex;align-items:center;gap:8px;border:1px solid var(--bd2);background:var(--sf2);border-radius:10px;padding:8px 10px}
.pre-it b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pre-it small{color:var(--mu)}
.hkgrid{display:grid;grid-template-columns:1fr 130px;gap:8px 12px;align-items:center;margin-bottom:14px}
.hkgrid .keycap{height:34px;border:1px solid var(--bd2);background:var(--field);color:var(--tx);border-radius:9px;text-align:center;font:700 12px var(--mono);outline:0;cursor:pointer}
.hkgrid .keycap:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-soft)}
.cheat{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 26px;font-size:12.5px}.cheat div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--bd);padding:4px 0}
.cheat h5{grid-column:1/-1;margin:12px 0 2px;color:var(--ac2);letter-spacing:.06em;font-size:11px}
.wv-lab{background:rgba(0,0,0,.42);padding:1px 7px;border-radius:6px;color:#e9ecf3}
.mc-pop .rng.big{display:flex;align-items:center;gap:12px}.mc-pop .rng.big input{width:100%;min-width:0;flex:1}

.key{cursor:pointer}.key.listen{border-color:var(--ac,#f7931e);color:#f7931e;animation:keyblink .8s infinite}.key.clash{border-color:#ef4444;color:#ef4444}@keyframes keyblink{50%{opacity:.45}}

/* v1.4.3 kho hiệu ứng */
.mg-left{width:230px;flex:none;display:flex;flex-direction:column;background:var(--bar);border-right:1px solid var(--bd)}
.mg-left .mg-cats{width:auto;border-right:0;flex:1}
.mg-cat .fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-cat.dragover{outline:2px dashed var(--ac);background:var(--ac-soft)}
.mg-addf{margin:8px;padding:9px;border:1px dashed var(--bd2);background:transparent;color:var(--ac2);border-radius:9px;font-weight:700}
.mg-addf:hover{background:var(--ac-soft)}
.mg-grid.dragover{outline:2px dashed var(--ac);outline-offset:-6px}
.mg-it .vol{height:28px;border:1px solid var(--bd2);background:var(--sf3);border-radius:8px;color:var(--mu);padding:0 7px;font:600 10.5px var(--mono);white-space:nowrap}
.mg-it .vol:hover{color:var(--ac2);border-color:var(--ac)}
.mg-vol{position:fixed;z-index:9999;display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--sf);border:1px solid var(--bd2);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.mg-vol input{width:150px}.mg-vol b{font:600 12px var(--mono);min-width:42px;color:var(--ac2)}

/* khóa màn hình */
.lockscr{position:fixed;inset:0;z-index:100000;background:rgba(4,6,10,.66);backdrop-filter:blur(18px);display:grid;place-items:center}
.lk-box{width:380px;max-width:92vw;text-align:center;padding:34px 32px 24px;background:linear-gradient(180deg,rgba(28,34,46,.97),rgba(17,21,29,.97));border:1px solid #2c3446;border-radius:28px;box-shadow:0 40px 100px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06)}
.lk-ic{width:72px;height:72px;border-radius:22px;margin:0 auto 14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(247,148,29,.25),rgba(247,148,29,.06));border:1px solid rgba(247,148,29,.4);font-size:32px}
.lk-box h2{margin:0;font-size:22px}.lk-box p{margin:6px 0 18px;color:var(--mu);font-size:13px}
.lk-np{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);color:#86efac;font-size:12.5px;margin-bottom:20px;text-align:left}.lk-np i{flex:none;width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e}.lk-np span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-dots{display:flex;gap:16px;justify-content:center;margin-bottom:22px}.lk-dots i{width:16px;height:16px;border-radius:50%;border:2px solid #3a4457;transition:.12s}.lk-dots i.on{background:var(--ac);border-color:var(--ac);box-shadow:0 0 14px rgba(247,148,29,.6)}
.lk-in{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.lk-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.lk-pad button{height:58px;border-radius:16px;border:1px solid #2a3243;background:#1b2130;color:var(--tx);font:600 22px var(--font);position:relative;cursor:pointer}.lk-pad button small{position:absolute;left:0;right:0;bottom:6px;font:600 8px var(--mono);color:#6b7487;letter-spacing:.18em}.lk-pad button:hover{background:#232b3d}.lk-pad button:active{background:var(--ac-soft);border-color:var(--ac)}.lk-pad button.ghost{background:transparent;border-color:transparent;color:var(--mu);font-size:15px}
.lk-msg{min-height:18px;margin-top:12px;color:#f87171;font-size:12.5px}.lk-ft{margin-top:4px;color:#6b7487;font-size:12px}
.lockscr.bad .lk-box{animation:lkshake .4s}@keyframes lkshake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
#lockBtn.on{color:var(--ac2)}

/* màu kênh / hộp màu */
.card.colored{border-top:3px solid var(--cc);background:linear-gradient(180deg,color-mix(in srgb,var(--cc) 14%,transparent),transparent 45%),var(--sf)}
.card.colored .ch-title{color:var(--cc)}
.card.colored .big:not(.empty){border-color:color-mix(in srgb,var(--cc) 55%,var(--bd2))}
.cdrow{margin-bottom:12px}.cdl{font-weight:600;margin-bottom:6px}
.cdrow .swatches{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cdrow .sw{width:26px;height:26px;border-radius:8px;border:2px solid transparent;cursor:pointer;padding:0}
.cdrow .sw.on{border-color:#fff;box-shadow:0 0 0 2px var(--ac)}
.cdrow .sw.custom{display:grid;place-items:center;background:var(--sf3);color:var(--tx);font-weight:700;position:relative;overflow:hidden}
.cdrow .sw.custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

.marquee{position:fixed;z-index:9000;border:1px solid var(--blue);background:rgba(59,130,246,.16);pointer-events:none;border-radius:4px}
.card.msel{outline:2px solid var(--blue);outline-offset:-1px;box-shadow:0 0 0 3px rgba(59,130,246,.3)}

/* bàn phím gán phím */
.kbpick .kb-info{min-height:54px;margin-bottom:8px;line-height:1.5}.kb-warn{color:#ffb04d;margin-bottom:6px}.kb-act{display:flex;gap:8px;flex-wrap:wrap}
.kb{display:flex;flex-direction:column;gap:6px;overflow:auto;padding:4px 0}.kb-row{display:flex;gap:6px}
.kb-k{width:50px;height:50px;border-radius:9px;border:1px solid var(--bd2);background:var(--sf2);color:var(--tx);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;font-size:14px}
.kb-k small{font:600 8.5px var(--mono);color:var(--mu);min-height:10px}
.kb-k.free:hover{border-color:var(--ac);background:var(--ac-soft)}
.kb-k.used.ch{background:rgba(59,130,246,.16);border-color:rgba(59,130,246,.5)}.kb-k.used.pad{background:rgba(247,148,29,.16);border-color:rgba(247,148,29,.5)}.kb-k.used.talk,.kb-k.used.hk{background:rgba(168,85,247,.16);border-color:rgba(168,85,247,.5)}
.kb-k.cur{background:var(--ac);color:var(--ac-ink);border-color:var(--ac)}.kb-k.cur small{color:var(--ac-ink)}
.kb-k.pend{outline:2px solid #ef4444}.kb-k.space{width:330px;margin:0 0 0 70px}
.kb-sug{margin-top:10px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--mu);font-size:12px}.kb-chip{min-width:32px;height:28px;border-radius:8px;border:1px solid var(--ac);background:var(--ac-soft);color:var(--ac2);font-weight:700}

/* ô tìm bài */
.sbq{position:relative;flex:1;max-width:520px;min-width:220px;margin:0 12px}
.sbq .in{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;background:var(--sf2);border:1px solid var(--bd2);border-radius:10px}
.sbq .in:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px rgba(247,147,30,.18)}
.sbq input{flex:1;background:none;border:0;outline:0;color:var(--tx);font:13px var(--font)}
.sbq .cnt{font:600 10.5px var(--mono);color:var(--mu);white-space:nowrap}
.sbq .ico{opacity:.7}
.sbq .mini{height:24px;padding:0 8px;border-radius:7px;border:1px solid var(--bd2);background:var(--sf3);color:var(--tx);font:600 11px var(--font);cursor:pointer}
.sug{position:absolute;top:40px;left:0;right:0;z-index:50;background:var(--sf);border:1px solid var(--bd2);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.55);overflow:hidden}
.sug .hd{display:flex;justify-content:space-between;padding:7px 12px;font-size:11px;color:var(--mu);border-bottom:1px solid var(--bd)}
.sug .it{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--bd)}
.sug .it:last-of-type{border-bottom:0}
.sug .it.sel,.sug .it:hover{background:var(--sf2)}
.sug .nm{font-weight:600}.sug .nm mark{background:rgba(247,147,30,.3);color:#ffb85c;border-radius:3px;padding:0 1px}
.sug .pa{font-size:11px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left}
.sug .du{margin-left:auto;font:11px var(--mono);color:var(--mu)}
.sug .col{flex:1;min-width:0}
.sug .ac{display:flex;gap:6px}
.sug .ft{display:flex;gap:14px;padding:7px 12px;font-size:11px;color:var(--mu);background:var(--sf2)}
.sug kbd{font:600 10px var(--mono);border:1px solid var(--bd2);border-radius:5px;padding:1px 5px;background:var(--sf3)}

.sug .it{position:relative}#subbar{position:relative}

/* hẹn giờ + hàng chờ */
.go-tools{display:flex;flex-direction:column;gap:6px}
.go-tools button{height:32px;border-radius:10px;border:1px solid var(--bd2);background:var(--sf2);color:var(--tx);font:600 12px var(--font)}
.go-tools button:hover{border-color:var(--ac)}.go-tools button.on{background:var(--ac-soft);border-color:var(--ac);color:var(--ac2)}
.card[data-q]::after{content:"Q" attr(data-q);position:absolute;top:-6px;right:-6px;z-index:5;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#fbbf24;color:#3a2a00;font:800 11px var(--mono);display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.qpanel{position:fixed;z-index:80;width:330px;background:var(--sf);border:1px solid var(--bd2);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.55);padding:10px;display:flex;flex-direction:column;gap:8px}
.qh{display:flex;justify-content:space-between;align-items:center}.qb{max-height:280px;overflow:auto;display:flex;flex-direction:column;gap:4px}
.qi{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--bd2);border-radius:9px;background:var(--sf2);cursor:grab}
.qi.over{border-color:var(--ac);background:var(--ac-soft)}.qi.drag{opacity:.4}.qg{color:var(--mu)}.qno{font:700 11px var(--mono);color:#3a2a00;background:#fbbf24;border-radius:6px;padding:1px 6px}
.qt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qe{color:var(--mu);padding:14px;text-align:center;line-height:1.5}
.qf{display:flex;gap:6px;flex-wrap:wrap}.qn{color:var(--mu);font-size:11px}
.sbq .mini{white-space:nowrap}.sug{min-width:620px;max-width:calc(100vw - 16px);max-height:calc(100vh - 150px);overflow-x:hidden;overflow-y:auto}
.go-tools{flex-direction:row}.go-tools button{flex:1;padding:0 4px;font-size:11px;white-space:nowrap}

/* Master Pro */
.masterwrap{grid-column:9;grid-row:1}
.mpro{padding:8px 8px 8px;gap:5px}
.mpro .c-head{display:flex;align-items:center;justify-content:space-between}
.m-lock{border:0;background:transparent;font-size:13px;padding:0 2px;cursor:pointer;opacity:.75}.m-lock.on{opacity:1}
.m-badges{display:flex;gap:4px}.m-badges span{flex:1;text-align:center;padding:2px 0;border-radius:6px;font:700 8.5px var(--mono);background:var(--sf2);color:var(--mu);border:1px solid var(--bd2)}
.m-badges .on{background:rgba(34,197,94,.15);color:#4ade80;border-color:#166534}.m-badges .on.red{background:rgba(239,68,68,.18);color:#fca5a5;border-color:#7f1d1d}
.m-badges .lim{background:rgba(247,148,29,.15);color:var(--ac2);border-color:#92400e}.m-badges .lim.off{background:var(--sf2);color:var(--mu);border-color:var(--bd2)}
.m-badges .dm.on{background:rgba(168,85,247,.2);color:#d8b4fe;border-color:#6b21a8}
.mstage{display:flex;gap:4px;justify-content:center;align-items:stretch;min-height:0}
.m-scale{position:relative;font:8.5px var(--mono);color:var(--mu);text-align:right;width:20px}.m-scale span{position:absolute;right:0;transform:translateY(-50%)}.m-scale span:first-child{transform:none}.m-scale span:last-child{transform:translateY(-100%)}
.mvu{width:11px;border-radius:4px;background:#0b0e13;border:1px solid var(--bd);position:relative;overflow:hidden}
.mvu .f{position:absolute;inset:0;background:linear-gradient(0deg,#16a34a 0,#22c55e 62%,#eab308 82%,#ef4444 100%);clip-path:inset(100% 0 0 0)}
.mvu .pk{position:absolute;left:0;right:0;height:2px;background:#fff;bottom:0}
.mvu i{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(0,0,0,.5) 4px 5px)}
.mvu.hot{box-shadow:0 0 0 1px #ef4444,0 0 10px rgba(239,68,68,.7)}
.mdb{text-align:center;font:700 13px var(--mono);margin-top:2px}
.m-btns{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.m-b{height:22px;border-radius:7px;border:1px solid var(--bd2);background:var(--sf2);color:var(--tx);font:700 9.5px var(--font);cursor:pointer;padding:0}
.m-b.mute.on{background:rgba(239,68,68,.25);color:#fca5a5;border-color:#7f1d1d}.m-b.lim.on{background:var(--ac);color:#2a1700;border-color:var(--ac)}.m-b.fade.on{background:rgba(239,68,68,.2);color:#fca5a5;border-color:#7f1d1d}.m-b.dim.on{background:rgba(168,85,247,.3);color:#e9d5ff;border-color:#6b21a8}

.pflvol{position:fixed;z-index:9999;width:308px;padding:14px 16px;background:var(--sf);border:1px solid var(--bd2);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.55)}
.pflvol h5{margin:0 0 10px;font-size:11px;letter-spacing:.14em;color:var(--mu)}.pflvol .r{display:flex;align-items:center;gap:10px}.pflvol input{flex:1;accent-color:var(--ac)}.pflvol b{min-width:42px;text-align:right;color:var(--ac2)}.pflvol small{display:block;margin-top:8px;color:var(--mu);font-size:11px}

.mpro{overflow:hidden}.mpro .mstage{flex:1 1 0;min-height:50px}.mpro .fader-wrap{height:100%;min-height:0}.mpro .fader{height:100%}
.mpro .mdb{font-size:12px;line-height:1.1}.mpro .vol{line-height:1.1}
.brand b{white-space:nowrap;font-size:13px}.brand small{white-space:nowrap}.brand{flex:none}

/* ===== v1.5: trình duyệt thư mục (nút 📁 Thư mục) ===== */
.sbq .mini.on{border-color:var(--ac);color:var(--ac2);background:var(--ac-soft)}
.fbp{position:fixed;z-index:48;display:flex;flex-direction:column;min-width:560px;min-height:340px;max-width:calc(100vw - 8px);max-height:calc(100vh - 8px);resize:both;overflow:hidden;background:var(--sf);border:1px solid var(--bd2);border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.6);color:var(--tx);font:13px var(--font)}
.fbp.ghost{opacity:.14;pointer-events:none;transition:opacity .12s}
.fb-h{display:flex;align-items:center;gap:12px;height:40px;padding:0 10px 0 14px;background:var(--sf2);border-bottom:1px solid var(--bd);cursor:move;user-select:none;flex:none}
.fb-h b{font-size:13.5px;white-space:nowrap}.fb-sub{color:var(--mu);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.fb-h .grow{flex:1}
.fb-x{width:28px;height:28px;border-radius:8px;border:0;background:transparent;color:var(--mu);font-size:14px;cursor:pointer;flex:none}.fb-x:hover{background:var(--sf3);color:var(--tx)}
.fb-body{display:flex;flex:1;min-height:0}
.fb-side{width:212px;flex:none;overflow:auto;padding:6px;border-right:1px solid var(--bd);background:var(--sf2)}
.fs-sec{display:flex;align-items:center;justify-content:space-between;margin:10px 6px 4px;color:var(--mu);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.fs-rs{border:0;background:transparent;color:var(--ac2);font:600 10.5px var(--font);cursor:pointer;text-transform:none;letter-spacing:0}.fs-rs:hover{text-decoration:underline}
.fs-it{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer}
.fs-it:hover{background:var(--sf3)}.fs-it.on{background:var(--ac-soft);box-shadow:inset 0 0 0 1px var(--ac)}
.fs-it .ic{width:20px;text-align:center;flex:none}.fs-it .tx{display:flex;flex-direction:column;min-width:0;flex:1}
.fs-it b{font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fs-it small{color:var(--mu);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-it.lib .ic{color:#34d399;font-weight:800}
.fs-x{width:20px;height:20px;border-radius:6px;border:0;background:transparent;color:var(--mu);cursor:pointer;flex:none;visibility:hidden}.fs-it:hover .fs-x{visibility:visible}.fs-x:hover{background:var(--sf);color:#f87171}
.fs-none{padding:6px 8px;color:var(--mu);font-size:11.5px;line-height:1.5}.fs-sum{margin:8px 8px 2px;color:var(--mu);font-size:11px}
.fb-main{flex:1;min-width:0;display:flex;flex-direction:column}
.fb-bar{display:flex;align-items:center;gap:6px;padding:8px 10px 4px}
.fb-ib{width:30px;height:30px;border-radius:8px;border:1px solid var(--bd2);background:var(--sf2);color:var(--tx);cursor:pointer;flex:none}.fb-ib:hover:not(:disabled){border-color:var(--ac)}.fb-ib:disabled{opacity:.35;cursor:default}
.fb-path{flex:1;min-width:0;display:flex;align-items:center;gap:2px;height:30px;padding:0 6px;border:1px solid var(--bd2);border-radius:8px;background:var(--field);overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.fb-path::-webkit-scrollbar{display:none}.fb-path i{color:var(--mu);font-style:normal}
.fb-cr{border:0;background:transparent;color:var(--tx);font:600 12px var(--font);padding:2px 6px;border-radius:6px;cursor:pointer;flex:none}.fb-cr:hover{background:var(--sf3)}.fb-cr.last{color:var(--ac2)}
.fb-bar2{display:flex;align-items:center;gap:10px;padding:2px 10px 6px}
.fb-bar2 input{flex:1;height:30px;border:1px solid var(--bd2);border-radius:8px;background:var(--field);color:var(--tx);padding:0 10px;font:12.5px var(--font);outline:0}.fb-bar2 input:focus{border-color:var(--ac)}
.fb-stat{color:var(--mu);font-size:11.5px;white-space:nowrap}
.fb-list{flex:1;min-height:0;overflow:auto;outline:0;border-top:1px solid var(--bd)}
.fr{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-bottom:1px solid var(--bd);user-select:none}
.fr:hover{background:var(--sf2)}.fr.sel{background:var(--ac-soft);box-shadow:inset 3px 0 0 var(--ac)}
.fr .ic{width:20px;text-align:center;flex:none}.fr .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.fr.dir .nm{font-weight:700}.fr mark{background:rgba(247,147,30,.3);color:#ffb85c;border-radius:3px;padding:0 1px}
.fr .sz{color:var(--mu);font:11px var(--mono);white-space:nowrap;flex:none}
.fr .ac{display:none;gap:6px;flex:none}.fr:hover .ac,.fr.sel .ac{display:flex}.fr:hover .sz,.fr.sel .sz{display:none}
.fbp .mini{height:24px;padding:0 8px;border-radius:7px;border:1px solid var(--bd2);background:var(--sf3);color:var(--tx);font:600 11px var(--font);cursor:pointer;white-space:nowrap}.fbp .mini:hover{border-color:var(--ac)}
.fb-empty{padding:34px 18px;text-align:center;color:var(--mu);line-height:1.6}
.fb-err{padding:30px 22px;text-align:center;color:#fca5a5;line-height:1.7}.fb-err .mini{margin:8px 4px 0}
.fb-h3{margin:14px 14px 8px;color:var(--mu);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.fb-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;padding:0 14px 6px}
.fb-tile{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--bd2);border-radius:12px;background:var(--sf2);cursor:pointer}.fb-tile:hover{border-color:var(--ac);background:var(--sf3)}
.fb-tile .ic{font-size:26px;flex:none}.fb-tile .tx{display:flex;flex-direction:column;min-width:0;flex:1}.fb-tile b{font-size:13px}.fb-tile small{color:var(--mu);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-tile .bar{display:block;height:6px;border-radius:3px;background:var(--sf3);margin-top:6px;overflow:hidden}.fb-tile .bar i{display:block;height:100%;background:var(--ac)}
.fb-tip{margin:12px 14px;padding:10px 12px;border:1px dashed var(--bd2);border-radius:10px;color:var(--mu);font-size:12px;line-height:1.6}.fb-tip b{color:var(--tx)}
.fb-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid var(--bd);background:var(--sf2);flex:none}
.fb-btn{height:30px;padding:0 12px;border-radius:9px;border:1px solid var(--bd2);background:var(--sf3);color:var(--tx);font:600 12px var(--font);cursor:pointer}.fb-btn:hover:not(:disabled){border-color:var(--ac)}
.fb-btn.pri{background:var(--ac);border-color:var(--ac);color:var(--ac-ink)}.fb-btn.ghost{background:transparent}.fb-btn:disabled{opacity:.55;cursor:default}
.fb-busy{color:var(--ac2);font-size:11.5px}
@media (max-width:1100px){.fb-sub{display:none}.fbp{min-width:480px}.fb-side{width:170px}}
.sug .it.fz .nm::after{content:"gần giống";margin-left:8px;padding:1px 6px;border-radius:6px;background:var(--sf3);color:var(--mu);font:600 10px var(--font)}
.sug.ghost{opacity:.16;pointer-events:none}

/* ===== v1.5: thanh phụ co giãn theo cỡ cửa sổ (1100 → 1920 px): ô Tìm bài giữ đủ rộng, nút MC NÓI / MIC luôn nằm trong màn hình, không đè lên nhau ===== */
#subbar{gap:10px}
.sb-grp,.sb-toggle{flex-shrink:0;white-space:nowrap}
.sbq{flex:1 1 380px;min-width:240px;max-width:520px;margin:0 6px}
.sbq .in{min-width:0}.sbq input{min-width:0;width:100%}.sbq .cnt{flex:none}
.pfl-mini{flex:0 4 260px;min-width:44px;overflow:hidden}
@media (max-width:1399px){.pfl-mini span{display:none}.pfl-mini{flex:0 0 44px;padding:0;justify-content:center}}
@media (max-width:1250px){.sbq .cnt{display:none}.sbq #sbDir{font-size:0;padding:0 8px}.sbq #sbDir::before{content:"📁";font-size:14px}}
/* v1.5: thanh trên co gọn khi cửa sổ nhỏ (1100 → 1360 px) để "Dừng hết" / ON AIR không bị cắt mất ở mép phải */
@media (max-width:1360px){.pill.stopall,.pill.onair{font-size:0;gap:0;padding:0 12px}.pill.stopall{margin-right:2px}#topbar{gap:8px}}
@media (max-width:1240px){.tab{padding:0 8px;gap:0}.tab i{display:none}.tb{min-width:34px}.sep{margin:0 3px}}

/* ===== v1.6: GAIN + EQ (núm xoay trong từng kênh) ===== */
.c-knobs{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:5px;flex:none;min-width:0}
.knob-wrap{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0}
.knob{width:22px;height:22px;border-radius:50%;border:1px solid var(--bd2);background:radial-gradient(circle at 35% 30%,var(--sf3),var(--sf) 72%);position:relative;padding:0;flex:none;cursor:pointer}
.knob i{position:absolute;left:50%;top:50%;width:2px;height:9px;background:var(--ac2);border-radius:1px;transform-origin:50% 0%;transform:translate(-50%,-1px) rotate(0deg)}
.knob:hover{border-color:var(--ac)}
.knob.on{border-color:var(--ac);background:radial-gradient(circle at 35% 30%,var(--ac-soft),var(--sf) 72%)}
.knob-lab{font-size:7.5px;letter-spacing:.06em;font-weight:700;color:var(--mu)}
.knob-val{display:block;border:0;background:none;padding:0;margin:0;font:600 8px var(--mono);color:var(--ac2);max-width:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}
button.knob-val.exp{cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
button.knob-val.exp:hover{color:var(--tx)}
.mpro .c-knobs{display:none}

/* ===== v1.6: cửa sổ EQ 7 dải ===== */
.eqwin{display:flex;flex-direction:column;gap:12px;width:640px;max-width:100%}
.eqw-labs{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:0 4px}
.eqw-labs span{text-align:center;font-size:9px;letter-spacing:.05em;font-weight:700;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eqw-graph{position:relative;height:220px;background:var(--field);border:1px solid var(--bd);border-radius:12px;overflow:hidden}
.eqw-graph canvas{position:absolute;inset:0;width:100%;height:100%}
.eqw-nodes{position:absolute;inset:0}
.eqw-n{position:absolute;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;border:1.5px solid var(--bd2);background:var(--sf3);color:var(--tx);font:700 10px var(--mono);padding:0;cursor:pointer}
.eqw-n.on{border-color:var(--ac);background:var(--ac);color:var(--ac-ink);box-shadow:0 0 0 4px var(--ac-soft)}
.eqw-sel{display:flex;align-items:center;gap:10px;font:600 12.5px var(--mono);flex-wrap:wrap}
.eqw-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--bd)}
.eqw-preset{display:flex;align-items:center;gap:8px;color:var(--mu);font-size:12px}
.eqw-preset select{height:32px;border:1px solid var(--bd2);background:var(--field);color:var(--tx);border-radius:9px;padding:0 10px}
.eqw-foot button.on{background:var(--ac-soft);border-color:var(--ac);color:var(--ac2)}
.eqw-note{margin:0;font-size:11.5px;color:var(--mu);line-height:1.6}

/* ===== v1.6: BPM (bảng sóng nhạc) ===== */
.wv-bpm{display:flex;flex-direction:column;gap:3px;padding:0 4px;flex:none}
.wv-bpm .bl{display:flex;align-items:baseline;gap:6px}
.wv-bpm .bl span{font-size:9px;letter-spacing:.1em;color:var(--mu);font-weight:700}
.wv-bpm .bl b{font:700 17px var(--mono);color:var(--ac2);letter-spacing:-.02em;min-width:50px}
.wv-bpm input[type=range]{width:120px;height:14px;accent-color:var(--ac);margin:0;display:block}
.wv-bpm .reset{border:0;background:transparent;color:var(--mu);font-size:10px;text-decoration:underline;padding:0;cursor:pointer}
.wv-bpm .reset[hidden]{display:none}

/* ===== v1.6: dùng thử / bản quyền trên topbar ===== */
.pill.lic{cursor:pointer}
.pill.lic.trial{border-color:var(--ac);color:var(--ac2);background:var(--ac-soft)}
.pill.lic.expired{border-color:var(--red);color:var(--stopc);background:rgba(239,68,68,.12)}
.pill.lic.full{border-color:#166534;color:#4ade80;background:rgba(34,197,94,.1)}
.tierlist{display:flex;flex-direction:column;gap:8px}
.tier-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--bd2);border-radius:10px;background:var(--sf2)}
.tier-row b{min-width:150px}
.tier-row .mu{color:var(--mu);font-size:12px;flex:1}
.tier-row.cur{border-color:var(--ac);background:var(--ac-soft)}
.tier-contact{margin-top:6px;padding:14px 16px;border-radius:12px;background:var(--ac-soft);border:1px solid rgba(247,148,29,.3);text-align:center}
.tier-contact b{font-size:16px;color:var(--ac2)}

/* ===== v1.6: nút mở EQ trên thẻ kênh (rõ ràng, có viền cam) ===== */
.eq-open{display:inline-flex;align-items:center;justify-content:center;gap:2px;height:15px;min-width:32px;padding:0 4px;margin:1px 0 0;border:1.5px solid var(--ac);border-radius:5px;background:var(--ac-soft);color:var(--ac2);font:800 9px/1 var(--font);letter-spacing:.03em;cursor:pointer}
.eq-open svg{width:9px;height:9px;flex:none}
.eq-open:hover{background:var(--ac);color:var(--ac-ink)}
.eq-open.live{background:var(--ac);color:var(--ac-ink);box-shadow:0 0 0 2px rgba(247,148,29,.35)}

/* ===== v1.6: cửa sổ công cụ độc lập (EQ, Nâng chất lượng nhạc) ===== */
body.toolwin{overflow:hidden;user-select:none}
body.toolwin #root{height:100vh}
.eqx{display:flex;flex-direction:column;height:100vh;background:var(--bg);color:var(--tx)}
.eqx-top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bar);border-bottom:1px solid var(--bd);flex-wrap:wrap}
.eqx-tt{display:flex;flex-direction:column;min-width:170px;max-width:340px}
.eqx-tt b{font-size:15px}.eqx-tt span{color:var(--mu);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eqx-tg,.eqx-btn{height:32px;padding:0 13px;border-radius:9px;border:1px solid var(--bd2);background:var(--sf2);font-weight:700;font-size:12px;letter-spacing:.02em}
.eqx-tg:hover,.eqx-btn:hover{background:var(--sf3)}
.eqx-tg.on{background:var(--ac);border-color:var(--ac);color:var(--ac-ink)}
.eqx-pre{display:flex;align-items:center;gap:7px;color:var(--mu);font-size:12px}
.eqx-pre select{height:32px;min-width:280px;border-radius:9px;border:1px solid var(--ac);background:var(--field);color:var(--tx);padding:0 8px;font:inherit;font-size:12.5px}
.eqx-chk{display:flex;align-items:center;gap:6px;color:var(--mu);font-size:12px}
.eqx-graph{position:relative;flex:1;min-height:240px;margin:10px 12px 0;border-radius:12px;background:#0b0c11;border:1px solid var(--bd);overflow:hidden}
.eqx-graph canvas{position:absolute;inset:0;display:block;touch-action:none}
.eqx-tip{position:absolute;display:none;pointer-events:none;padding:4px 8px;border-radius:6px;background:rgba(15,17,23,.92);border:1px solid #3a4150;color:#f1f5f9;font:600 11.5px var(--mono);white-space:nowrap;z-index:3}
.eqx-menu{position:absolute;z-index:5;min-width:190px;padding:6px;border-radius:10px;background:var(--sf);border:1px solid var(--bd2);box-shadow:var(--shadow)}
.eqx-menu h5{margin:2px 6px 6px;font-size:11px;color:var(--mu);letter-spacing:.04em}
.eqx-menu button{display:block;width:100%;text-align:left;padding:6px 9px;border:0;border-radius:7px;background:transparent;font-size:12.5px}
.eqx-menu button:hover{background:var(--sf3)}.eqx-menu button.on{color:var(--ac2);font-weight:700}
.eqx-menu hr{border:0;border-top:1px solid var(--bd);margin:5px 2px}
.eqx-bands{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:10px 12px}
.eqx-band{display:flex;flex-direction:column;gap:5px;padding:8px;border-radius:10px;background:var(--sf);border:1px solid var(--bd);border-top:3px solid var(--bc)}
.eqx-band.sel{background:var(--sf2);box-shadow:0 0 0 1px var(--bc)}
.eqx-band.off{opacity:.55}
.eqx-band .bh{display:flex;align-items:center;gap:6px}
.eqx-band .bh b{font-size:11px;letter-spacing:.05em;color:var(--bc)}
.eqx-band .bn{width:22px;height:22px;border-radius:50%;border:2px solid var(--bc);background:transparent;font-weight:800;font-size:11px;padding:0}
.eqx-band.off .bn{border-style:dashed;color:var(--mu)}
.eqx-band select,.eqx-band input{width:100%;min-width:0;height:26px;border-radius:7px;border:1px solid var(--bd2);background:var(--field);color:var(--tx);font:12px var(--font);padding:0 6px}
.eqx-band input{font-family:var(--mono)}
.eqx-band input:disabled{opacity:.4}
.eqx-band label{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:4px;font-size:10.5px;color:var(--mu)}
.eqx-band label span{grid-column:1 / 3}
.eqx-band label i{font-style:normal;font-size:10px;color:var(--mu);min-width:14px}
.eqx-help{padding:2px 14px 10px;color:var(--mu);font-size:11.5px;line-height:1.5}
.eqx-help b{color:var(--tx)}
.eqx-help kbd{font:600 10.5px var(--mono);padding:1px 5px;border:1px solid var(--bd2);border-radius:4px}
@media (max-width:980px){.eqx-bands{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ===== v1.6: thanh trên tự thu gọn theo bậc (JS T.fitTopbar thêm tb-c1..c5 cho tới khi vừa) ===== */
#topbar{overflow:hidden;min-width:0}
#topbar > *{flex-shrink:0}
.tb.enhbtn{color:var(--ac2)}
.tb.enhbtn:hover{background:var(--ac-soft)}
.tb-c1 .brand span{display:none}
.tb-c1 #topbar{gap:8px}
.tb-c2 #licTxt{display:none}
.tb-c2 #licPill::after{content:attr(data-short)}
.tb-c2 .pill{padding:0 11px}
.tb-c3 .tab{padding:0 9px;gap:0}.tb-c3 .tab i{display:none}
.tb-c3 .tb{min-width:34px;padding:0 6px}.tb-c3 .sep{margin:0 2px}
.tb-c3 .pill.stopall,.tb-c3 .pill.onair,.tb-c3 .pill.rec{font-size:0;gap:0;padding:0 11px}.tb-c3 .pill.rec #recTxt{display:none}
.tb-c4 #topbar{gap:4px;padding:0 8px}.tb-c4 .tb{min-width:30px;padding:0 4px}.tb-c4 .tab{padding:0 7px;font-size:12px}
.tb-c4 .brand img{width:32px;height:32px}
.tb-c5 #onair{display:none}.tb-c5 #topbar .sep{display:none}.tb-c5 .tb i[data-ic]{width:16px;height:16px}

/* ===== v1.6: mốc âm lượng cạnh cần Master ===== */
.m-marks{position:relative;width:34px;flex:none;align-self:stretch}
.m-marks button{position:absolute;left:0;right:0;top:calc(6.5px + (100 - var(--p)) * (100% - 13px) / 100);transform:translateY(-50%);height:17px;padding:0;border:1px solid var(--bd2);border-radius:5px;background:var(--sf2);color:var(--mu);font:700 9px/1 var(--mono)}
.m-marks button:hover{border-color:var(--ac);color:var(--ac2)}
.m-marks button.at{border-color:var(--ac);color:var(--ac2);background:var(--ac-soft)}
.m-marks button.ramp{background:var(--ac);border-color:var(--ac);color:var(--ac-ink);animation:pulse2 1s infinite}
.m-marks::before{content:"";position:absolute;left:-3px;top:6px;bottom:6px;border-left:1px dashed var(--bd2)}

/* ===== v1.6: cửa sổ cài đặt rộng hơn + trang Hướng dẫn trong Tùy chỉnh ===== */
.modal.settings-modal{width:min(1180px,95vw);height:min(820px,92vh)}
.spane-body.gd-body{padding:0;overflow:hidden;display:flex}
.gd{display:flex;flex:1;min-height:0}
.gd-toc{width:228px;flex:none;border-right:1px solid var(--bd);display:flex;flex-direction:column;padding:12px 10px;gap:8px;background:var(--sf)}
.gd-q{height:32px;border-radius:9px;border:1px solid var(--bd2);background:var(--field);color:var(--tx);padding:0 10px;font:inherit;user-select:text}
.gd-n{font-size:11px;color:var(--ac2);min-height:0}
.gd-list{flex:1;overflow:auto;display:flex;flex-direction:column;gap:1px}
.gd-it{display:flex;gap:8px;align-items:baseline;text-align:left;padding:6px 8px;border:0;border-radius:8px;background:transparent;color:var(--mu);font-size:12.3px;line-height:1.3}
.gd-it b{font:800 10.5px var(--mono);color:var(--ac2);flex:none;width:18px}
.gd-it:hover{background:var(--sf3);color:var(--tx)}
.gd-it.on{background:var(--ac-soft);color:var(--tx)}
.guide{flex:1;overflow:auto;padding:22px 30px 60px;font-size:13.5px;line-height:1.62;user-select:text;scroll-behavior:smooth}
.gd-load{color:var(--mu)}
.guide h2,.guide h3,.guide h4{margin:0}
.guide p{margin:0 0 9px}
.guide ul,.guide ol{margin:0 0 10px;padding-left:20px}.guide li{margin:0 0 5px}.guide li::marker{color:var(--ac);font-weight:700}
.guide b,.guide strong{font-weight:700;color:var(--tx)}
.guide code,.guide kbd{font-family:var(--mono)}
.guide code{padding:1px 5px;border-radius:5px;background:var(--sf3);font-size:12px}
.guide kbd{display:inline-block;background:var(--sf2);border:1px solid var(--bd2);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-size:11.5px;font-weight:700}
.guide .chapter + .chapter{margin-top:30px;padding-top:24px;border-top:1px solid var(--bd)}
.guide .ch-head{display:flex;align-items:center;gap:13px;margin-bottom:14px;padding-bottom:11px;border-bottom:2px solid var(--bd2)}
.guide .ch-head .num{flex:none;width:42px;height:42px;border-radius:11px;background:var(--ac);color:var(--ac-ink);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800}
.guide .ch-head h2{font-size:21px;letter-spacing:-.01em}
.guide h3{font-size:15px;color:var(--ac2);margin:18px 0 8px}
.guide h4{font-size:13.5px;margin:12px 0 5px}
.guide .lead,.guide .small{color:var(--mu)}.guide .small{font-size:12px}
.guide .box{border-radius:10px;padding:10px 14px;margin:10px 0 14px;font-size:13px}
.guide .note{background:var(--ac-soft);border:1px solid rgba(247,148,29,.35);border-left:4px solid var(--ac)}
.guide .warn{background:rgba(239,68,68,.09);border:1px solid rgba(239,68,68,.3);border-left:4px solid var(--red)}
.guide .ok{background:rgba(34,197,94,.09);border:1px solid rgba(34,197,94,.3);border-left:4px solid var(--grn)}
.guide .box .lbl{display:block;font-weight:800;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;margin-bottom:3px}
.guide .note .lbl{color:var(--ac2)}.guide .warn .lbl{color:var(--stopc)}.guide .ok .lbl{color:var(--grn)}
.guide .box p:last-child{margin-bottom:0}
.guide .steps{counter-reset:stp;margin:10px 0 16px}
.guide .step{position:relative;padding:1px 0 2px 36px;margin-bottom:11px}
.guide .step::before{counter-increment:stp;content:counter(stp);position:absolute;left:0;top:0;width:25px;height:25px;border-radius:50%;background:var(--sf3);border:1px solid var(--ac);color:var(--ac2);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.guide .step > b:first-child{display:block;margin-bottom:2px}
.guide table{width:100%;border-collapse:collapse;margin:8px 0 16px;font-size:12.8px}
.guide table.kv th,.guide table.kv td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--bd);vertical-align:top}
.guide table.kv th{background:var(--sf3);font-weight:700;font-size:12px}
.guide table.kv tr:nth-child(even) td{background:var(--sf)}
.guide td.kbdcell{white-space:nowrap}
.guide .cols2{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.guide .feat{margin:0 0 10px}.guide .feat b{display:block}.guide .feat span{color:var(--mu);font-size:12.6px}
.guide .chip{display:inline-block;background:var(--sf3);border:1px solid var(--bd2);border-radius:6px;padding:0 7px;font-size:11.5px;font-weight:700}
.guide hr.sep{border:none;border-top:1px solid var(--bd);margin:16px 0}
.guide figure{margin:12px 0 16px}
.guide figure img{display:block;max-width:100%;border-radius:10px;border:1px solid var(--bd2);box-shadow:var(--shadow)}
.guide figcaption{font-size:11.8px;color:var(--mu);margin-top:6px;text-align:center}
.guide .contact{display:flex;gap:16px;align-items:center;background:var(--sf3);border-radius:14px;padding:18px 22px;margin-top:14px}
.guide .contact img{width:60px;height:60px;border-radius:50%;background:#fff;padding:5px;flex:none}
.guide .contact h3{margin:0 0 4px}.guide .contact p{margin:0;color:var(--mu)}

/* ===== v1.6: cửa sổ Nâng chất lượng nhạc ===== */
.enx{display:flex;flex-direction:column;height:100vh;background:var(--bg);color:var(--tx)}
.enx-top{display:flex;gap:12px;align-items:center;padding:12px 16px;background:var(--bar);border-bottom:1px solid var(--bd)}
.enx-top b{display:block;font-size:16px}.enx-top span{color:var(--mu);font-size:12px}
.enx-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--ac);color:var(--ac-ink);font-size:20px;font-weight:800;flex:none}
.enx-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:12px 16px 4px}
.enx-l{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--mu);margin-bottom:5px;text-transform:uppercase}
.enx-seg{display:flex;flex-direction:column;gap:4px}
.enx-seg button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;padding:6px 10px;border-radius:9px;border:1px solid var(--bd2);background:var(--sf)}
.enx-seg button b{font-size:12.5px}.enx-seg button small{font-size:10.5px;color:var(--mu)}
.enx-seg button:hover{background:var(--sf2)}
.enx-seg button.on{border-color:var(--ac);background:var(--ac-soft)}.enx-seg button.on b{color:var(--ac2)}
.enx-drop{padding:10px 16px}
.enx-dz{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px;border:2px dashed var(--bd2);border-radius:14px;background:var(--sf);text-align:center}
.enx-dz b{font-size:15px}.enx-dz span{color:var(--mu);font-size:12px}
.enx-drop.over .enx-dz{border-color:var(--ac);background:var(--ac-soft)}
.enx-list{flex:1;overflow:auto;padding:2px 16px 8px;display:flex;flex-direction:column;gap:6px}
.enx-empty{color:var(--mu);text-align:center;padding:20px;font-size:12.5px}
.enx-row{display:grid;grid-template-columns:minmax(0,1.6fr) 170px minmax(0,1.1fr) auto;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--sf);border:1px solid var(--bd)}
.enx-row.done{border-color:rgba(34,197,94,.45);cursor:grab}
.enx-row .nm{min-width:0}.enx-row .nm b,.enx-row .nm small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enx-row .nm small{color:var(--grn);font-size:11px}
.enx-row .lu{font:600 11.5px var(--mono);color:var(--mu)}.enx-row .lu b{color:var(--grn)}.enx-row .lu em{font-style:normal;color:var(--ac2)}
.enx-row .stt i{font-style:normal;font-size:12px}.enx-row .stt .w{color:var(--mu)}.enx-row .stt .r{color:var(--ac2)}.enx-row .stt .d{color:var(--grn);font-weight:700}.enx-row .stt .e{color:var(--stopc)}
.enx-row .bar{height:5px;border-radius:3px;background:var(--track);margin-top:4px;overflow:hidden}.enx-row .bar u{display:block;height:100%;background:var(--ac);transition:width .2s}
.enx-row .ac{display:flex;gap:5px}
.enx-row .ac button{height:28px;padding:0 9px;border-radius:8px;border:1px solid var(--bd2);background:var(--sf2);font-size:11.5px;font-weight:600;white-space:nowrap}
.enx-row .ac button:hover{border-color:var(--ac);color:var(--ac2)}
.enx-foot{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--bd);background:var(--bar);font-size:12px;color:var(--mu)}
.enx-foot button:disabled{opacity:.45}
.tb-c6 .tab{padding:0 5px;font-size:11px}.tb-c6 .tb{min-width:26px;padding:0 3px}.tb-c6 .brand{padding:2px}.tb-c6 #topbar{gap:2px}
.guide table.kv{display:table;grid-template-columns:none}.guide table.kv b{color:var(--tx);font-weight:700}
.guide{position:relative}

/* ===== v1.6.2: nút MC/Giọng hát trên topbar ===== */
.tb.voicebtn{color:#c4b5fd}
.tb.voicebtn:hover{background:rgba(167,139,250,.14)}

/* ===== v1.6.2: cửa sổ Voice Studio ===== */
.vst{display:flex;flex-direction:column;height:100vh;background:var(--bg);color:var(--tx)}
.vst-top{display:flex;align-items:center;gap:12px;padding:11px 16px;background:var(--bar);border-bottom:1px solid var(--bd)}
.vst-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#a78bfa,#6366f1);font-size:19px;flex:none}
.vst-tt b{display:block;font-size:15px}.vst-tt span{color:var(--mu);font-size:11.5px}
.vst-tabs{display:flex;gap:4px;background:var(--sf2);padding:4px;border-radius:11px}
.vst-tabs button{height:32px;padding:0 16px;border:0;border-radius:8px;background:transparent;color:var(--mu);font-weight:700;font-size:12.5px}
.vst-tabs button.on{background:var(--ac);color:var(--ac-ink)}
.vst-body{flex:1;display:flex;min-height:0}
.vst-presets{width:210px;flex:none;border-right:1px solid var(--bd);background:var(--sf);overflow:auto;padding:10px 8px}
.vst-presets h4{margin:2px 6px 8px;font-size:11px;letter-spacing:.06em;color:var(--mu)}
.vst-g{margin:10px 6px 4px;font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--ac2);text-transform:uppercase}
.vst-pre{display:block;width:100%;text-align:left;padding:7px 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--tx);font-size:12.5px;margin-bottom:2px}
.vst-pre:hover{background:var(--sf3)}
.vst-pre.on{background:var(--ac-soft);border-color:var(--ac);color:var(--ac2);font-weight:700}
.vst-main{flex:1;min-width:0;overflow:auto;padding:16px}
.vst-live-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.vst-mic{height:40px;padding:0 20px;border-radius:10px;border:0;background:var(--grn);color:#042008;font-weight:800;font-size:13px}
.vst-mic.on{background:var(--red);color:#fff;animation:pulse2 1.4s infinite}
.vst-dev{font-size:12px;color:var(--mu);display:flex;align-items:center;gap:6px}
.vst-dev select{height:32px;border-radius:8px;border:1px solid var(--bd2);background:var(--field);color:var(--tx);padding:0 8px;max-width:240px}
.vst-lv{flex:1;min-width:120px;height:12px;border-radius:6px;background:var(--track);overflow:hidden}
.vst-lv u{display:block;height:100%;width:0;background:linear-gradient(90deg,#22c55e,#eab308 75%,#ef4444);transition:width .05s}
.vst-byp{height:32px;padding:0 14px;border-radius:8px;border:1px solid var(--bd2);background:var(--sf2);font-weight:700;font-size:12px}
.vst-byp.on{background:var(--ac);border-color:var(--ac);color:var(--ac-ink)}
.vst-warn{font-size:11.5px;color:var(--mu);background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);border-left:3px solid var(--red);border-radius:8px;padding:8px 12px;margin-bottom:14px;line-height:1.5}
.vst-surface{background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:16px}
.vst-knobs{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.vst-knob{display:flex;flex-direction:column;align-items:center;gap:3px;width:92px;cursor:ns-resize;user-select:none}
.vst-knob .kk{width:62px;height:62px;border-radius:50%;border:2px solid var(--bd2);background:radial-gradient(circle at 36% 30%,var(--sf3),var(--sf) 72%);position:relative}
.vst-knob.drag .kk,.vst-knob:hover .kk{border-color:var(--ac)}
.vst-knob .kk i{position:absolute;left:50%;top:8px;width:3px;height:22px;margin-left:-1.5px;background:var(--ac);border-radius:2px;transform-origin:50% 23px}
.vst-knob b{font-size:11.5px}.vst-knob .kv{font:700 15px var(--mono);color:var(--ac2)}.vst-knob small{font-size:10px;color:var(--mu)}
.vst-toggles{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.vst-tg{height:34px;padding:0 15px;border-radius:9px;border:1px solid var(--bd2);background:var(--sf2);font-weight:700;font-size:12.5px}
.vst-tg.on{background:var(--ac);border-color:var(--ac);color:var(--ac-ink)}
.vst-sel{font-size:12px;color:var(--mu);display:flex;align-items:center;gap:6px}
.vst-sel select,.vst-sel input{height:32px;border-radius:8px;border:1px solid var(--bd2);background:var(--field);color:var(--tx);padding:0 6px}
.vst-drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px;border:2px dashed var(--bd2);border-radius:14px;background:var(--sf);text-align:center;margin-bottom:14px}
.vst-drop.over{border-color:var(--ac);background:var(--ac-soft)}
.vst-drop b{font-size:14px}.vst-drop span{color:var(--mu);font-size:12px}
.vst-drop select{height:28px;border-radius:7px;border:1px solid var(--bd2);background:var(--field);color:var(--tx)}
.vst-jobs{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.vst-foot{padding:8px 16px;border-top:1px solid var(--bd);background:var(--bar);display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--mu)}
.vst-foot kbd{font:700 10.5px var(--mono);padding:1px 6px;border:1px solid var(--bd2);border-radius:4px;margin-right:3px}
.guide mark.gd-hl{background:var(--ac);color:var(--ac-ink);border-radius:3px;padding:0 1px}