:root{
  --bg:#06060a;--s1:#0e0e16;--s2:#161624;--s3:#1e1e30;
  --bd:#222234;--bd2:#2e2e48;
  --gr:#00ff88;--gr2:rgba(0,255,136,.16);
  --or:#ff6a00;--or2:rgba(255,106,0,.16);
  --re:#ff1f44;--bl:#00aaff;--ye:#ffdd00;--pu:#bb44ff;
  --tx:#ccd0e4;--mu:#44445e;--mu2:#8888aa;
  --inset-top:env(safe-area-inset-top,0px);
  --inset-bot:env(safe-area-inset-bottom,0px);
  --fd:'Orbitron',monospace;
  --fm:'Share Tech Mono',monospace;
}
html,body{width:100%;height:100dvh;overflow:hidden;background:var(--bg);color:var(--tx);font-family:var(--fm);overscroll-behavior:none;}

/* ── TOPBAR ── */
#top{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:var(--inset-top);background:var(--s1);border-bottom:1px solid var(--bd2);display:flex;align-items:center;justify-content:space-between;padding-left:14px;padding-right:10px;height:calc(50px + var(--inset-top));}
.logo{font-family:var(--fd);font-size:1rem;font-weight:900;letter-spacing:6px;color:var(--gr);text-shadow:0 0 18px rgba(0,255,136,.45);}
.logo b{color:var(--or);}
#top-right{display:flex;gap:6px;align-items:center;}
#bo{padding:7px 12px;border-radius:9px;border:1.5px solid var(--re);color:var(--re);background:transparent;font-family:var(--fd);font-size:.5rem;font-weight:700;letter-spacing:2px;cursor:pointer;min-height:38px;transition:all .1s;}
#bo.on{background:var(--re);color:#fff;box-shadow:0 0 18px rgba(255,31,68,.55);}
#cn{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--bd2);background:var(--s2);font-family:var(--fm);font-size:.6rem;color:var(--mu2);cursor:pointer;min-height:38px;}
#cn.on{border-color:var(--gr);color:var(--gr);}
.dot{width:6px;height:6px;border-radius:50%;background:var(--mu);flex-shrink:0;}
#cn.on .dot{background:var(--gr);animation:bk 1.4s infinite;}
@keyframes bk{0%,100%{opacity:1}50%{opacity:.2}}
#logout-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--bd2);background:var(--s2);color:var(--mu2);cursor:pointer;flex-shrink:0;transition:all .12s;}
#logout-btn:active{border-color:var(--re);color:var(--re);background:rgba(255,31,68,.1);}

/* ── MODE TABS ── */
#mode-bar{position:fixed;left:0;right:0;top:calc(50px + var(--inset-top));z-index:45;background:var(--s1);border-bottom:1px solid var(--bd);display:flex;padding:0;height:36px;}
.mode-tab{flex:1;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:.45rem;letter-spacing:2px;color:var(--mu2);cursor:pointer;transition:all .1s;border-bottom:2px solid transparent;}
.mode-tab.on{color:var(--gr);border-bottom-color:var(--gr);background:var(--gr2);}
.mode-tab:active{background:rgba(255,255,255,.04);}

/* ── FIXTURE/GROUP BAR ── */
#fixture-bar{position:fixed;left:0;right:0;top:calc(50px + var(--inset-top) + 36px);z-index:40;background:var(--s1);border-bottom:1px solid var(--bd);display:flex;gap:6px;align-items:center;overflow-x:auto;padding:8px 10px;min-height:48px;-webkit-overflow-scrolling:touch;box-shadow:0 4px 12px rgba(0,0,0,.3);}
#fixture-bar::-webkit-scrollbar{display:none;}
.fx-btn{flex-shrink:0;min-height:40px;padding:0 12px;border-radius:999px;border:2px solid var(--bd);background:var(--s2);font-family:var(--fm);font-size:.65rem;color:var(--mu2);cursor:pointer;transition:all .12s;white-space:nowrap;display:flex;align-items:center;gap:5px;}
.fx-btn:active{transform:scale(0.97);}
.fx-btn.on{border-color:var(--gr);color:var(--gr);background:var(--gr2);}
.fx-btn .fx-addr{font-size:.5rem;color:var(--mu);margin-left:2px;}
.fx-btn.on .fx-addr{color:rgba(0,255,136,.6);}
#fx-all-btn{border-color:var(--or);color:var(--or);min-height:40px;padding:0 14px;}
#fx-all-btn.on{background:var(--or2);}
#fx-manage-btn{flex-shrink:0;min-height:40px;min-width:40px;border-radius:999px;border:2px solid var(--bd);background:var(--s2);color:var(--mu2);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;}
#fx-count{flex-shrink:0;font-size:.55rem;color:var(--mu);margin-left:2px;}
#fx-count b{color:var(--gr);}
.grp-btn{flex-shrink:0;min-height:40px;padding:0 12px;border-radius:999px;border:2px solid var(--pu);background:rgba(187,68,255,.08);font-family:var(--fm);font-size:.6rem;color:var(--pu);cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:4px;}
.grp-btn:active{background:rgba(187,68,255,.2);transform:scale(.97);}

/* ── SCREEN AREA ── */
#screen{position:fixed;top:calc(50px + var(--inset-top) + 36px + 48px);bottom:var(--inset-bot);left:0;right:0;overflow:hidden;}
.page{display:none;flex-direction:column;width:100%;height:100%;padding:8px;gap:6px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(8px + var(--inset-bot));}
.page.active{display:flex;}

/* ── COMMON ── */
.row{display:flex;gap:6px;flex-shrink:0;}
.panel-hidden{display:none !important;}
.panel-partial{opacity:.6;}
input[type=range]{-webkit-appearance:none;width:100%;height:10px;border-radius:5px;cursor:pointer;outline:none;}
input[type=range].rd{background:linear-gradient(90deg,var(--s3),var(--ye));}
input[type=range].rs{background:linear-gradient(90deg,var(--s3),#fff);}
input[type=range].rsp{background:linear-gradient(90deg,var(--gr),var(--or));}
input[type=range].rm{background:linear-gradient(90deg,var(--s3),var(--bl));}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:4px solid var(--bg);box-shadow:0 0 0 2px var(--bd2);}
.sl-card{flex:1;border-radius:14px;border:1px solid var(--bd);background:var(--s1);padding:10px 12px;display:flex;flex-direction:column;justify-content:space-around;gap:6px;}
.sl-item{display:flex;flex-direction:column;gap:4px;}
.sl-top{display:flex;justify-content:space-between;font-size:.55rem;}
.sl-l{color:var(--mu2);letter-spacing:2px;}
.sl-v{color:var(--gr);font-weight:bold;}
.ctrl-section{flex-shrink:0;border-radius:10px;border:1px solid var(--bd);background:var(--s1);padding:6px 8px;}
.ctrl-section-lbl{font-family:var(--fd);font-size:.4rem;letter-spacing:2px;font-weight:700;margin-bottom:5px;display:flex;align-items:center;gap:6px;}
.ctrl-section-lbl .dot-ind{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.color-row{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;flex-shrink:0;}
.color-row-sm{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.color-row-sm .cb{aspect-ratio:auto;min-height:38px;}
.cb{aspect-ratio:1;border-radius:10px;border:2px solid transparent;cursor:pointer;position:relative;transition:all .1s;overflow:hidden;}
.cb:active{transform:scale(.88);}
.cb.on{border-color:#fff;box-shadow:0 0 12px rgba(255,255,255,.4);}
.cb-l{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-size:7px;color:rgba(255,255,255,.8);text-shadow:0 1px 4px rgba(0,0,0,.9);font-family:var(--fm);pointer-events:none;line-height:1;}
.btn-grid{display:grid;gap:5px;flex:1;}
.g2{grid-template-columns:1fr 1fr;}
.g3{grid-template-columns:1fr 1fr 1fr;}
.g4{grid-template-columns:repeat(4,1fr);}
.bb{border-radius:12px;border:1.5px solid var(--bd);background:var(--s2);cursor:pointer;font-family:var(--fm);color:var(--mu2);display:flex;align-items:center;justify-content:center;text-align:center;font-size:.6rem;letter-spacing:1px;transition:all .1s;line-height:1.3;padding:4px;user-select:none;min-height:40px;}
.bb:active{transform:scale(.92);filter:brightness(1.25);}
.bb.og{border-color:var(--gr);background:var(--gr2);color:var(--gr);}
.bb.ob{border-color:var(--bl);background:rgba(0,170,255,.12);color:var(--bl);}
.bb.oy{border-color:var(--ye);background:rgba(255,221,0,.1);color:var(--ye);}
.bb.oo{border-color:var(--or);background:var(--or2);color:var(--or);}
.bb.op{border-color:var(--pu);background:rgba(187,68,255,.1);color:var(--pu);}

/* ── MOVE BUTTON ── */
#move-btn{flex:1;border-radius:14px;border:1.5px solid var(--bd2);background:var(--s2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:all .12s;position:relative;overflow:hidden;min-height:90px;}
#move-btn::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,255,136,.06) 0%,transparent 70%);pointer-events:none;}
#move-btn.active{border-color:var(--gr);background:rgba(0,255,136,.06);}
.move-icon{width:30px;height:30px;stroke:var(--mu2);stroke-width:1.5;fill:none;transition:stroke .12s;}
#move-btn.active .move-icon{stroke:var(--gr);}
.move-lbl{font-family:var(--fd);font-size:.45rem;letter-spacing:3px;color:var(--mu2);transition:color .12s;}
#move-btn.active .move-lbl{color:var(--gr);}
.move-vals{display:flex;gap:8px;font-size:.55rem;}
.mv{color:var(--mu2);}.mv b{color:var(--gr);font-style:normal;}

/* BPM */
.bpm-card{flex:1;border-radius:14px;border:1px solid var(--bd);background:var(--s1);padding:8px 10px;display:flex;flex-direction:column;justify-content:space-between;gap:4px;}
.bpm-n{font-family:var(--fd);font-size:2rem;font-weight:900;color:var(--or);text-align:center;line-height:1;text-shadow:0 0 28px var(--or);letter-spacing:4px;}
.bpm-sub{font-size:.42rem;color:var(--mu);letter-spacing:3px;text-align:center;}
#tap{width:100%;border-radius:10px;border:2px solid var(--or);color:var(--or);background:transparent;font-family:var(--fd);font-size:.6rem;font-weight:700;letter-spacing:3px;cursor:pointer;transition:all .08s;min-height:42px;display:flex;align-items:center;justify-content:center;}
#tap:active,#tap.fl{background:var(--or);color:#000;}
.bpm-adj{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.ba{height:34px;border-radius:8px;border:1px solid var(--bd);background:var(--s2);cursor:pointer;font-family:var(--fd);font-size:.7rem;color:var(--mu2);display:flex;align-items:center;justify-content:center;transition:all .1s;}
.ba:active{border-color:var(--or);color:var(--or);background:var(--or2);}
.bpm-sync{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;}
.bs{height:32px;border-radius:8px;border:1px solid var(--bd);background:var(--s2);cursor:pointer;font-size:.5rem;color:var(--mu2);font-family:var(--fm);text-align:center;transition:all .1s;display:flex;align-items:center;justify-content:center;letter-spacing:1px;}
.bs.oo{border-color:var(--or);color:var(--or);background:var(--or2);}

/* ── JOYSTICK OVERLAY ── */
#joy-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(6,6,10,.96);flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:calc(var(--inset-top) + 60px) 16px calc(var(--inset-bot) + 20px);}
#joy-overlay.show{display:flex;}
#joy-close{position:absolute;top:calc(var(--inset-top) + 8px);right:14px;padding:8px 16px;border-radius:10px;border:1.5px solid var(--re);color:var(--re);background:transparent;font-family:var(--fd);font-size:.55rem;letter-spacing:2px;cursor:pointer;}
#joycanvas{touch-action:none;border-radius:18px;border:1px solid var(--bd2);display:block;flex:1;width:100%;max-height:50vh;}
.joy-row{display:flex;gap:10px;width:100%;}
.jv{flex:1;background:var(--s2);border:1px solid var(--bd);border-radius:12px;padding:10px;display:flex;justify-content:space-between;align-items:center;}
.jv-l{color:var(--mu2);font-size:.55rem;letter-spacing:2px;}
.jv-n{color:var(--gr);font-size:.85rem;font-weight:bold;font-family:var(--fd);}
.spd-wrap{width:100%;display:flex;flex-direction:column;gap:4px;}
#mob-move-patterns{display:flex;gap:6px;width:100%;justify-content:center;flex-wrap:wrap;}
.mob-move-btn{flex:1;min-width:70px;padding:10px 6px;border-radius:10px;border:1.5px solid var(--bd);background:var(--s2);color:var(--tx);font-family:var(--fm);font-size:.6rem;font-weight:600;cursor:pointer;transition:all .12s;text-align:center;min-height:42px;display:flex;align-items:center;justify-content:center;}
.mob-move-btn:active{transform:scale(.96);}
.mob-move-stop{flex:1 1 100%;min-width:100%;padding:10px 8px;border-radius:10px;border:1.5px solid var(--red);background:rgba(255,34,68,.12);color:var(--red);font-family:var(--fd);font-size:.6rem;font-weight:700;letter-spacing:2px;cursor:pointer;transition:all .12s;}
.mob-move-stop:active{transform:scale(.98);}
.mob-move-btn.active{background:var(--gr);color:var(--bg);border-color:var(--gr);font-weight:700;}
#mob-move-speed-wrap{display:flex;align-items:center;gap:8px;width:100%;}
.mob-move-lbl{font-size:.45rem;color:var(--mu);letter-spacing:2px;white-space:nowrap;}
#mob-move-speed{flex:1;}
.mob-move-val{font-size:.55rem;color:var(--gr);font-family:var(--fd);min-width:24px;text-align:right;}
.spd-top{display:flex;justify-content:space-between;font-size:.55rem;}
.spd-l{color:var(--mu2);letter-spacing:2px;}
.spd-v{color:var(--gr);font-weight:bold;}

/* ── LIVE PANEL ── */
.live-scene-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.scene-btn{min-height:52px;border-radius:14px;border:2px solid var(--bd);background:var(--s2);cursor:pointer;font-family:var(--fd);font-size:.5rem;font-weight:700;color:var(--mu2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;letter-spacing:1px;transition:all .1s;}
.scene-btn:active{transform:scale(.94);}
.scene-btn.on{border-color:var(--gr);background:var(--gr2);color:var(--gr);box-shadow:0 0 14px rgba(0,255,136,.3);}
.scene-btn .sn{font-size:.55rem;color:var(--mu);font-family:var(--fm);}
.flash-btn{min-height:50px;border-radius:12px;border:2px solid var(--ye);background:rgba(255,221,0,.06);cursor:pointer;font-family:var(--fd);font-size:.5rem;font-weight:700;letter-spacing:2px;color:var(--ye);display:flex;align-items:center;justify-content:center;user-select:none;transition:all .06s;}
.flash-btn:active,.flash-btn.on{background:var(--ye);color:#000;box-shadow:0 0 18px rgba(255,221,0,.5);}
.flash-btn.strobe-f{border-color:#fff;color:#fff;background:rgba(255,255,255,.06);}
.flash-btn.strobe-f:active,.flash-btn.strobe-f.on{background:#fff;color:#000;}
.master-sl{flex:1;display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:12px;border:1px solid var(--bd);background:var(--s1);}
.master-lbl{font-size:.5rem;letter-spacing:2px;color:var(--mu2);text-align:center;}
.master-val{font-size:.7rem;color:var(--bl);text-align:center;font-weight:bold;}

/* ── CUE STACK ── */
.cue-item{display:flex;align-items:center;gap:8px;padding:10px;border-radius:10px;border:1px solid var(--bd);background:var(--s2);margin-bottom:4px;transition:all .1s;}
.cue-item.active{border-color:var(--gr);background:var(--gr2);}
.cue-num{width:28px;text-align:center;font-family:var(--fd);font-size:.7rem;color:var(--mu);font-weight:700;}
.cue-item.active .cue-num{color:var(--gr);}
.cue-name{flex:1;font-size:.7rem;color:var(--tx);}
.cue-item.active .cue-name{color:var(--gr);}
.cue-go-bar{display:flex;gap:6px;margin-bottom:8px;}
.cue-go-btn{flex:1;min-height:50px;border-radius:12px;border:2px solid var(--gr);background:var(--gr2);cursor:pointer;font-family:var(--fd);font-size:.65rem;font-weight:700;letter-spacing:3px;color:var(--gr);display:flex;align-items:center;justify-content:center;transition:all .08s;}
.cue-go-btn:active{background:var(--gr);color:#000;box-shadow:0 0 20px rgba(0,255,136,.5);}
.cue-go-btn.back{border-color:var(--mu2);background:transparent;color:var(--mu2);}
.cue-go-btn.back:active{border-color:var(--or);color:var(--or);}

/* ── CHASE ITEMS ── */
.chase-item{display:flex;align-items:center;gap:8px;padding:10px;border-radius:10px;border:1px solid var(--bd);background:var(--s2);margin-bottom:4px;}
.chase-item.running{border-color:var(--or);background:var(--or2);}
.chase-name{flex:1;font-size:.7rem;color:var(--tx);}
.chase-play{padding:8px 14px;border-radius:8px;border:1.5px solid var(--gr);background:var(--gr2);color:var(--gr);font-size:.6rem;cursor:pointer;}
.chase-play:active{background:var(--gr);color:#000;}
.chase-stop{padding:8px 14px;border-radius:8px;border:1.5px solid var(--re);background:rgba(255,31,68,.1);color:var(--re);font-size:.6rem;cursor:pointer;}

/* ── MODALS ── */
#modal,#fx-modal{display:none;position:fixed;inset:0;z-index:300;align-items:flex-end;}
#modal.show,#fx-modal.show{display:flex;}
#fx-modal{background:rgba(0,0,0,.9);z-index:400;}
#modal{background:rgba(0,0,0,.88);}
.mbox,.fx-mbox{background:var(--s1);border:1px solid var(--bd2);border-radius:20px 20px 0 0;padding:20px 16px calc(16px + var(--inset-bot));width:100%;}
.mbox h2,.fx-mbox h2{font-family:var(--fd);letter-spacing:4px;font-size:.8rem;color:var(--gr);margin-bottom:12px;}
.fx-mbox{max-height:80vh;display:flex;flex-direction:column;gap:10px;}
.fx-list{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:6px;}
.fx-item{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;border:1px solid var(--bd);background:var(--s2);}
.fx-item-name{flex:1;font-size:.7rem;color:var(--tx);background:var(--s3);border:1px solid var(--bd);border-radius:7px;padding:5px 8px;outline:none;}
.fx-item-addr{width:55px;background:var(--s3);border:1px solid var(--bd);border-radius:7px;color:var(--gr);font-family:var(--fm);font-size:.65rem;padding:4px 6px;text-align:center;outline:none;}
.fx-item-type{width:80px;min-width:80px;background:var(--s3);border:1px solid var(--bd);border-radius:7px;color:var(--tx);font-size:.55rem;font-family:var(--fm);padding:3px 4px;}
.fx-item-on{min-width:46px;height:30px;border-radius:999px;border:2px solid var(--bd);background:var(--s3);color:var(--mu2);cursor:pointer;font-size:.55rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--fm);}
.fx-item-on.on{background:var(--gr2);border-color:var(--gr);color:var(--gr);}
.fx-item-del{width:32px;height:32px;border-radius:8px;border:1px solid var(--bd);background:transparent;color:var(--mu2);cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.fx-add-row{display:flex;gap:6px;}
.fx-add-name{flex:1;height:42px;background:var(--s2);border:1px solid var(--bd);border-radius:10px;color:var(--tx);font-family:var(--fm);font-size:.65rem;padding:0 10px;outline:none;}
.fx-add-addr{width:60px;height:42px;background:var(--s2);border:1px solid var(--bd);border-radius:10px;color:var(--gr);font-family:var(--fm);font-size:.65rem;padding:0 8px;outline:none;text-align:center;}
.fx-add-type{width:90px;height:42px;background:var(--s2);border:1px solid var(--bd);border-radius:10px;color:var(--tx);font-size:.6rem;font-family:var(--fm);padding:0 4px;}
.fx-add-btn{height:42px;padding:0 12px;border-radius:10px;border:1.5px solid var(--gr);background:var(--gr2);color:var(--gr);font-family:var(--fm);font-size:.6rem;cursor:pointer;white-space:nowrap;}
.fx-quick-row{display:flex;gap:6px;flex-shrink:0;}
.fx-quick{flex:1;height:38px;border-radius:10px;border:1.5px solid var(--bd);background:var(--s2);color:var(--mu2);font-family:var(--fm);font-size:.6rem;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.fx-quick.or{border-color:var(--or);color:var(--or);}
.mbtns{display:flex;gap:8px;margin-top:8px;}
.mb{flex:1;height:46px;border-radius:12px;font-family:var(--fm);font-size:.65rem;cursor:pointer;border:1px solid var(--bd);background:var(--s2);color:var(--mu2);letter-spacing:1px;display:flex;align-items:center;justify-content:center;}
.mb.g{border-color:var(--gr);color:var(--gr);background:var(--gr2);}
.pi{display:flex;align-items:center;justify-content:space-between;padding:14px;border-radius:12px;border:1px solid var(--bd);background:var(--s2);margin-bottom:6px;min-height:50px;cursor:pointer;}
.pi:active{border-color:var(--gr);}
.pi-d{font-size:.75rem;color:var(--tx);}
.pi-s{font-size:.55rem;color:var(--mu2);}
.section-title{font-family:var(--fd);font-size:.5rem;letter-spacing:3px;color:var(--mu);margin:8px 0 4px;font-weight:700;}

/* ── COLLAPSIBLE SECTIONS ── */
.cs-toggle { cursor: pointer; user-select: none; justify-content: space-between; }
.sec-caret { font-size: .55rem; color: var(--mu); margin-left: auto; transition: transform .15s; flex-shrink: 0; }
.ctrl-section.collapsed .sec-caret { transform: rotate(-90deg); }
.ctrl-section.collapsed .ctrl-section-body { display: none; }
.ctrl-section-body { display: block; }
.cs-sub-lbl { font-size: .38rem; letter-spacing: 2px; color: var(--mu2); font-family: var(--fd); font-weight: 700; }

/* ── MUSIC PAGE ── */
.mm-status-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--s1); border: 1px solid var(--bd); border-radius: 14px; flex-shrink: 0; }
.mm-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--mu); flex-shrink: 0; transition: background .2s; }
.mm-dot.active { background: var(--re); animation: bk .8s ease-in-out infinite; }
#mm-status { flex: 1; font-size: .6rem; color: var(--mu2); letter-spacing: 2px; }
.mm-btn { padding: 9px 14px; border-radius: 10px; border: 1.5px solid var(--gr); background: var(--gr2); color: var(--gr); font-family: var(--fd); font-size: .45rem; letter-spacing: 1px; cursor: pointer; white-space: nowrap; transition: all .1s; }
.mm-btn.on { background: var(--re); border-color: var(--re); color: #fff; }
.mm-level-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mm-level-track { flex: 1; height: 16px; background: var(--s2); border-radius: 8px; border: 1px solid var(--bd); overflow: hidden; }
.mm-level-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gr) 0%, var(--or) 60%, var(--re) 100%); border-radius: 8px; transition: width .04s linear; }
.mm-bpm-badge { display: flex; flex-direction: column; align-items: center; min-width: 60px; background: var(--s1); border: 1px solid var(--bd); border-radius: 12px; padding: 6px 10px; flex-shrink: 0; }
.mm-bpm-badge span:first-child { font-family: var(--fd); font-size: 1.3rem; font-weight: 900; color: var(--or); line-height: 1; }
.mm-bpm-lbl { font-size: .38rem; color: var(--mu); letter-spacing: 2px; margin-top: 2px; }
.mm-sync-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex-shrink: 0; }
.mm-sync-btn { min-height: 46px; border-radius: 12px; border: 1.5px solid var(--bd); background: var(--s2); color: var(--mu2); font-family: var(--fd); font-size: .45rem; letter-spacing: 1px; cursor: pointer; transition: all .1s; }
.mm-sync-btn.on { border-color: var(--gr); background: var(--gr2); color: var(--gr); }
.mm-sync-btn:active { transform: scale(.95); }
.mm-mode-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; flex-shrink: 0; }
.mm-mode-btn { min-height: 56px; border-radius: 14px; border: 1.5px solid var(--bd); background: var(--s2); color: var(--mu2); font-family: var(--fd); font-size: .5rem; font-weight: 700; letter-spacing: 2px; cursor: pointer; transition: all .12s; }
.mm-mode-btn.on { border-color: var(--or); background: var(--or2); color: var(--or); box-shadow: 0 0 14px rgba(255,106,0,.3); }
.mm-mode-btn:active { transform: scale(.95); }

/* ── PRIORITY STAR ── */
.fx-item-pin { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--bd); background: transparent; color: var(--mu); cursor: pointer; font-size: .9rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .1s; }
.fx-item-pin.pinned { color: var(--or); border-color: var(--or); background: var(--or2); }

/* ── RECONNECTING BANNER ── */
#reconnect-banner{
  position:fixed;top:calc(50px + var(--inset-top) + 36px + 48px);left:0;right:0;z-index:500;
  background:rgba(255,106,0,.92);color:#000;font-family:var(--fd);font-size:.5rem;
  font-weight:700;letter-spacing:3px;text-align:center;padding:7px;
  animation:reconnect-pulse 1.2s ease-in-out infinite;
}
@keyframes reconnect-pulse{0%,100%{opacity:1}50%{opacity:.6}}
#cn.flash-ok{border-color:var(--gr);color:var(--gr);background:var(--gr2);transition:all .2s;}

/* beat flash */
#bf{position:fixed;inset:0;pointer-events:none;z-index:999;background:rgba(255,106,0,0);transition:background .05s;}
#bf.fl{background:rgba(255,106,0,.07);}

/* ── LOGIN ── */
#login-overlay{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:16px;padding-top:calc(var(--inset-top) + 20px);}
#login-overlay.hidden{display:none;}
.login-box{background:var(--s1);border:1px solid var(--bd2);border-radius:18px;padding:24px;width:100%;max-width:320px;}
.login-box h2{font-family:var(--fd);letter-spacing:4px;font-size:.95rem;color:var(--gr);margin-bottom:16px;text-align:center;}
.login-box input{width:100%;height:48px;margin-bottom:10px;padding:0 14px;background:var(--s2);border:1px solid var(--bd);border-radius:12px;color:var(--tx);font-family:var(--fm);font-size:16px;box-sizing:border-box;}
.login-box input:focus{border-color:var(--gr);outline:none;}
.login-box button{width:100%;height:48px;margin-top:10px;background:var(--gr2);border:1.5px solid var(--gr);border-radius:12px;color:var(--gr);font-family:var(--fm);font-size:.8rem;letter-spacing:2px;cursor:pointer;}
.login-err{color:var(--re);font-size:.65rem;margin-top:8px;text-align:center;}