:root{
    --bg: #07090f;
    --bg-2:#0d111b;
    --panel: rgba(18, 23, 35, 0.82);
    --panel-2: rgba(29, 36, 52, 0.86);
    --panel-3: rgba(12, 15, 24, 0.92);
    --glass: rgba(255,255,255,0.055);
    --hairline: rgba(255,255,255,0.12);
    --hairline-strong: rgba(255,255,255,0.20);
    --text: #f8f3e8;
    --muted: rgba(148, 163, 184, 0.18);
    --muted-text: #a9b3c7;
    --amber: #d4af37;
    --amber-dim: #805b24;
    --red: #ff4b4b;
    --green: #00c26e;
    --blue:#2f80ed;
    --purple:#9b7cff;
    --led-off: rgba(255,255,255,0.11);
    --shadow: 0 28px 80px rgba(0,0,0,.48);
    --font-display: 'Oswald', 'Arial Narrow', sans-serif;
    --font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; min-height:100%; color:var(--text); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
  body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    background:
      radial-gradient(circle at 20% 0%, rgba(255,181,71,.22), transparent 30%),
      radial-gradient(circle at 92% 10%, rgba(98,213,255,.18), transparent 26%),
      radial-gradient(circle at 50% 100%, rgba(155,124,255,.14), transparent 36%),
      linear-gradient(135deg, #06080d 0%, #0d111c 52%, #08090d 100%);
    overflow-x:hidden;
  }
  body:before{
    content:''; position:fixed; inset:0; pointer-events:none; opacity:.25;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at center, black, transparent 75%);
  }
  @font-face{ font-family:'Oswald'; src:local('Oswald'); }
  button,input,select,textarea{ font:inherit; }

  .rack{ width:100%; max-width:1240px; margin:0 auto; padding:18px 14px 34px; position:relative; z-index:1; }
  @media (min-width:760px){ .rack{ padding:30px 24px 44px; } }

  .nameplate{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:18px 20px; margin-bottom:0;
    border:1px solid var(--hairline); border-radius:24px;
    background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
    box-shadow: var(--shadow); backdrop-filter: blur(18px);
    position:relative; overflow:hidden;
  }
  .nameplate:before{ content:''; position:absolute; inset:auto -20% -65% -20%; height:120%; background:radial-gradient(circle, rgba(255,181,71,.20), transparent 58%); pointer-events:none; }
  .nameplate h1{ position:relative; margin:0; font-family:var(--font-display); font-weight:800; font-size:clamp(24px,3.4vw,42px); letter-spacing:1.8px; text-transform:uppercase; line-height:1; }
  .nameplate h1 span{ background:linear-gradient(90deg,var(--amber),#fff0ba); -webkit-background-clip:text; color:transparent; }
  .nameplate .tagline{ position:relative; margin-top:8px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.5px; color:var(--muted-text); text-transform:uppercase; }

  .dropzone{
    display:block; margin-bottom:0; padding:24px 20px; cursor:pointer; text-align:center;
    border:1px dashed rgba(255,181,71,.45); border-radius:22px;
    background: linear-gradient(135deg, rgba(255,181,71,.12), rgba(98,213,255,.04));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    transition:.18s ease; backdrop-filter:blur(16px);
  }
  .dropzone:hover,.dropzone.drag{ transform:translateY(-1px); border-color:var(--amber); background:linear-gradient(135deg, rgba(255,181,71,.18), rgba(98,213,255,.08)); }
  .dropzone p{ margin:0; font-family:var(--font-mono); font-size:12px; color:var(--muted-text); line-height:1.55; }
  .dropzone strong{ color:var(--text); }
  .dropzone input{ display:none; }

  .pro-panel,.library,.deck,.footnote{
    border:1px solid var(--hairline); border-radius:24px;
    background: linear-gradient(180deg, rgba(18,23,35,.86), rgba(10,13,21,.86));
    box-shadow: 0 16px 50px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.055);
    backdrop-filter: blur(18px);
  }
  .pro-panel{ padding:14px; margin-bottom:16px; }
  .pro-row{ display:flex; gap:10px; align-items:center; margin-bottom:10px; }
  .pro-row:last-child{ margin-bottom:0; }
  .pro-input,.pro-select,textarea{
    width:100%; min-height:46px; border:1px solid var(--hairline); border-radius:16px;
    background: rgba(6,9,15,.68); color:var(--text); padding:0 14px; outline:none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  textarea{ min-height:90px; padding:14px; resize:vertical; }
  .pro-input:focus,.pro-select:focus,textarea:focus{ border-color:rgba(255,181,71,.75); box-shadow:0 0 0 4px rgba(255,181,71,.10); }
  .pro-btn,.bpm-btn,.stage-action{
    min-height:46px; border:1px solid var(--hairline); border-radius:16px; color:var(--text);
    background: linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
    padding:0 15px; cursor:pointer; white-space:nowrap; transition:.14s ease; font-weight:750;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  }
  .pro-btn:hover,.bpm-btn:hover,.stage-action:hover{ transform:translateY(-1px); border-color:rgba(255,181,71,.65); color:#ffe0a4; }
  .pro-btn.on,.bank-btn.on,#stageBtn.on,#lockBtn.on,#metronomeBtn.on,#favFilterBtn.on{
    background:linear-gradient(135deg,var(--amber),#ffd680); color:#19110a; border-color:transparent;
    box-shadow:0 0 22px rgba(255,181,71,.24);
  }
  .pro-btn.danger,#panicBtn{ color:#ffd1d3; border-color:rgba(255,92,103,.34); }
  .pro-btn.danger:hover,#panicBtn:hover{ background:rgba(255,92,103,.13); color:#fff; }
  .pro-subtitle{ margin:2px 0 8px; color:var(--muted-text); font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; }
  .bank-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:10px; }

  .library{ overflow:hidden; margin-bottom:16px; max-height:min(52vh, 560px); display:flex; flex-direction:column; }

  /* Header + dropzone + loop library connected stack */
  .nameplate{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
  .nameplate + .dropzone{ margin-top:-1px; border-top-left-radius:0; border-top-right-radius:0; }

  /* Dropzone + loop library connected stack */
  .dropzone{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
  .dropzone + .library{ margin-top:0; border-top-left-radius:0; border-top-right-radius:0; border-top:0; }

  #libraryBody{ overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; min-height:120px; }
  #libraryBody::-webkit-scrollbar{ width:10px; }
  #libraryBody::-webkit-scrollbar-track{ background:rgba(255,255,255,.035); border-radius:999px; }
  #libraryBody::-webkit-scrollbar-thumb{ background:rgba(212,175,55,.42); border-radius:999px; border:2px solid rgba(0,0,0,.18); }
  .library-head,.row{ display:grid; grid-template-columns:36px minmax(0,1fr) 76px 72px; gap:10px; align-items:center; }
  .library-head{ flex:0 0 auto; padding:12px 14px; font-family:var(--font-mono); font-size:9px; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted-text); background:rgba(255,255,255,.035); border-bottom:1px solid var(--hairline); }
  .row{ min-height:66px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); cursor:pointer; transition:.12s ease; }
  .row:last-child{ border-bottom:0; }
  .row:hover{ background:rgba(255,255,255,.045); }
  .row.active{ background:linear-gradient(90deg, rgba(255,181,71,.18), rgba(255,181,71,.035)); box-shadow: inset 4px 0 0 var(--amber); }
  .row.queued{ background:linear-gradient(90deg, rgba(98,213,255,.15), rgba(98,213,255,.035)); box-shadow: inset 0 0 0 1px rgba(98,213,255,.45); }
  .row.processing{ opacity:.8; cursor:default; }
  .row .idx{ font-family:var(--font-mono); color:var(--muted-text); font-size:12px; }
  .row.active .idx,.row.active .name{ color:var(--amber); }
  .row .name{ min-width:0; display:flex; align-items:center; gap:9px; font-weight:750; }
  .row .name>span:last-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
  .meta-line{ display:block; margin-top:5px; font-family:var(--font-mono); font-size:10px; font-weight:500; color:var(--muted-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .row select{ width:100%; min-height:42px; border:1px solid var(--hairline); border-radius:14px; background:rgba(6,9,15,.68); color:var(--text); padding:0 8px; font-family:var(--font-mono); font-size:12px; }
  .row .remove,.row .fav{ min-width:32px; height:38px; border:0; background:transparent; color:var(--muted-text); cursor:pointer; font-size:22px; vertical-align:middle; }
  .row .remove:hover{ color:var(--red); }
  .row .fav{ font-size:17px; }
  .row .fav.on{ color:var(--amber); text-shadow:0 0 12px rgba(255,181,71,.55); }
  .empty-msg{ padding:34px 18px; text-align:center; font-family:var(--font-mono); font-size:12px; color:var(--muted-text); }
  .detecting-label{ grid-column:span 2; font-family:var(--font-mono); font-size:11px; color:var(--amber); }
  .spinner{ display:inline-block; width:12px; height:12px; border-radius:50%; border:2px solid var(--hairline); border-top-color:var(--amber); animation:spin .7s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  @keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.25} }
  .playing-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); flex:0 0 auto; animation:blink .7s infinite; }

  .deck{ padding:18px; display:flex; flex-direction:column; gap:16px; position:relative; overflow:hidden; }
  .deck:before{ content:''; position:absolute; inset:-1px; pointer-events:none; background:radial-gradient(circle at 50% -10%, rgba(255,181,71,.12), transparent 36%); }
  .deck>*{ position:relative; z-index:1; }
  .np-label,.bpm-label,.volume-label,.notes-title{ font-family:var(--font-mono); font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted-text); }
  .np-title{ margin-top:6px; font-family:var(--font-display); font-size:clamp(22px,4vw,36px); font-weight:800; letter-spacing:.8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .waveform-wrap{ background:rgba(0,0,0,.34); border:1px solid var(--hairline); border-radius:20px; padding:12px; box-shadow:inset 0 1px 12px rgba(0,0,0,.4); }
  #waveformCanvas{ display:block; width:100%; height:92px; cursor:grab; touch-action:none; }
  #waveformCanvas:active{ cursor:grabbing; }
  .wave-edit-panel{ margin-top:10px; padding:12px; border:1px solid var(--hairline); border-radius:16px; background:rgba(255,255,255,.035); }
  .wave-edit-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
  .wave-edit-title{ font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px; color:var(--muted-text); text-transform:uppercase; }
  .wave-edit-value{ font-family:var(--font-mono); font-size:12px; color:var(--amber); white-space:nowrap; }
  .wave-nudge-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-top:10px; }
  .wave-nudge-row .bpm-btn{ min-width:0; min-height:40px; padding:0 6px; font-size:12px; }
  .beat-grid{ display:flex; justify-content:center; gap:12px; min-height:26px; }
  .beat-dot{ width:22px; height:22px; border-radius:50%; background:var(--led-off); border:1px solid var(--hairline); transition:.05s ease; }
  .beat-dot.lit{ background:var(--amber); box-shadow:0 0 18px rgba(255,181,71,.78), inset 0 0 7px rgba(255,255,255,.35); }
  .beat-dot.lit.downbeat{ background:var(--red); box-shadow:0 0 22px rgba(255,92,103,.85), inset 0 0 7px rgba(255,255,255,.3); }

  .transport-buttons{ display:flex; align-items:center; justify-content:center; gap:16px; }
  .tbtn,.vol-btn{ border:1px solid var(--hairline); color:var(--text); cursor:pointer; border-radius:50%; background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)); transition:.12s ease; box-shadow:0 12px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06); -webkit-tap-highlight-color:transparent; touch-action:manipulation; display:flex; align-items:center; justify-content:center; }
  .tbtn{ width:64px; height:64px; font-size:22px; }
  .tbtn:hover,.vol-btn:hover{ transform:translateY(-1px); border-color:rgba(255,181,71,.7); color:#ffe0a4; }
  .tbtn:active,.vol-btn:active{ transform:scale(.96); }
  .tbtn.play{ width:92px; height:92px; font-size:32px; background:linear-gradient(135deg,var(--amber),#ffe08a); color:#17100a; border-color:transparent; box-shadow:0 0 42px rgba(255,181,71,.28); }
  .tbtn.stop{ color:var(--red); }
  .tbtn:disabled{ opacity:.35; cursor:not-allowed; }

  .volume-panel,.bpm-panel,.pitch-panel,.notes-panel{ background:rgba(0,0,0,.22); border:1px solid var(--hairline); border-radius:22px; padding:15px; }
  .volume-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
  .volume-value,.bpm-readout,.pitch-readout{ color:var(--amber); font-family:var(--font-mono); text-shadow:0 0 18px rgba(255,181,71,.28); }
  .volume-value{ font-size:13px; }
  .volume-row{ display:flex; align-items:center; gap:12px; }
  .vol-btn{ width:44px; height:44px; flex:0 0 auto; font-size:20px; }
  input[type='range'].vol-slider{ -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px; background:linear-gradient(90deg,var(--amber),rgba(255,255,255,.12)); outline:0; }
  input[type='range'].vol-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:#fff2c9; border:3px solid var(--amber); cursor:pointer; box-shadow:0 0 16px rgba(255,181,71,.5); }
  input[type='range'].vol-slider::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:#fff2c9; border:3px solid var(--amber); cursor:pointer; }
  .volume-hint{ margin-top:10px; text-align:center; font-family:var(--font-mono); font-size:9.5px; color:var(--muted-text); line-height:1.5; }
  kbd{ background:rgba(255,255,255,.08); border:1px solid var(--hairline); border-radius:6px; padding:2px 6px; font-family:var(--font-mono); color:#fff; }
  .bpm-panel,.pitch-panel{ text-align:center; }
  .bpm-readout{ font-size:clamp(52px,10vw,92px); font-weight:900; line-height:1; letter-spacing:-2px; margin:8px 0 3px; }
  .pitch-readout{ font-size:42px; font-weight:900; margin:8px 0 2px; }
  .bpm-sub{ font-family:var(--font-mono); font-size:11px; color:var(--muted-text); margin-bottom:13px; }
  .bpm-controls,.pitch-row{ display:flex; justify-content:center; gap:8px; }
  .bpm-btn{ min-width:66px; padding:0 12px; }
  .bpm-reset{ margin-top:10px; background:transparent; border:0; color:var(--muted-text); text-decoration:underline; cursor:pointer; font-family:var(--font-mono); font-size:10.5px; }
  .bpm-reset:hover{ color:var(--amber); }
  .mini-status{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
  .status-pill{ border:1px solid var(--hairline); border-radius:999px; padding:8px 12px; font-family:var(--font-mono); font-size:10px; color:var(--muted-text); background:rgba(255,255,255,.045); }
  .status-pill.on{ color:#09140d; border-color:transparent; background:linear-gradient(135deg,var(--green),#baf7cc); }
  .notes-title{ margin-bottom:10px; }
  .footnote{ margin-top:16px; padding:16px 18px; font-family:var(--font-mono); font-size:10.5px; color:var(--muted-text); line-height:1.7; }

  .countdown-overlay{ position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.62); backdrop-filter:blur(10px); }
  .countdown-overlay.show{ display:flex; }
  .countdown-card{ width:min(420px,86vw); border:1px solid rgba(255,181,71,.35); border-radius:28px; padding:30px; text-align:center; background:linear-gradient(180deg, rgba(18,23,35,.94), rgba(8,10,16,.96)); box-shadow:0 35px 100px rgba(0,0,0,.56); }
  .countdown-label{ font-family:var(--font-mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--muted-text); }
  .countdown-number{ font-family:var(--font-mono); font-size:112px; font-weight:900; color:var(--amber); line-height:1; text-shadow:0 0 36px rgba(255,181,71,.5); }

  .stage-toolbar{ position:fixed; top:14px; left:14px; right:14px; z-index:40; display:none; justify-content:space-between; align-items:center; gap:10px; pointer-events:none; transition:.18s ease; }
  .stage-mode .stage-toolbar{ display:flex; }
  .stage-toolbar.hidden{ opacity:.08; transform:translateY(-8px); }
  .stage-toolbar:hover,.stage-toolbar:focus-within{ opacity:1; transform:none; }
  .stage-left,.stage-right{ display:flex; align-items:center; gap:8px; pointer-events:auto; }
  .stage-action{ min-width:52px; background:rgba(11,14,22,.78); backdrop-filter:blur(16px); }
  .stage-action.back{ background:linear-gradient(135deg,var(--amber),#ffe08a); color:#17100a; border-color:transparent; }
  .stage-action.round{ width:54px; padding:0; border-radius:50%; font-size:18px; }
  .stage-status{ border:1px solid rgba(87,224,138,.35); border-radius:999px; padding:12px 14px; font-family:var(--font-mono); font-size:10px; color:#bdf8cf; background:rgba(87,224,138,.08); backdrop-filter:blur(16px); }
  .stage-mode{ align-items:center; }
  .stage-mode .dropzone,.stage-mode .pro-panel,.stage-mode .volume-panel,.stage-mode .bpm-controls,.stage-mode .bpm-reset,.stage-mode .footnote,.stage-mode .notes-panel,.stage-mode .pitch-panel,.stage-mode .mini-status,.stage-mode .wave-edit-panel,.stage-mode .loop-mixer-panel,.stage-mode .fx-panel{ display:none; }
  .stage-mode .nameplate{ display:none; }
  .stage-mode .rack{ max-width:1280px; display:grid; grid-template-columns:minmax(280px,360px) minmax(0,1fr); gap:18px; align-items:stretch; padding-top:74px; }
  .stage-mode .library{ display:block; grid-column:1; margin:0; max-height:calc(100vh - 98px); overflow:auto; position:sticky; top:76px; align-self:start; border-color:rgba(255,181,71,.28); }
  .stage-mode .library-head{ position:sticky; top:0; z-index:2; backdrop-filter:blur(12px); }
  .stage-mode .row{ min-height:72px; }
  .stage-mode .row .meta-line{ font-size:10px; }
  .stage-mode .deck{ grid-column:2; }
  .stage-mode .deck{ min-height:calc(100vh - 36px); justify-content:center; padding-top:92px; }
  .stage-mode .np-title{ font-size:clamp(42px,8vw,92px); white-space:normal; }
  .stage-mode .bpm-readout{ font-size:clamp(94px,16vw,170px); }
  .stage-mode .beat-dot{ width:38px; height:38px; }
  .stage-mode .tbtn{ width:92px; height:92px; font-size:32px; }
  .stage-mode .tbtn.play{ width:126px; height:126px; font-size:44px; }
  .stage-mode #waveformCanvas{ height:130px; }

  @media (min-width:900px){
    .rack{ display:grid; grid-template-columns:minmax(370px, .9fr) minmax(480px,1.2fr); gap:18px; align-items:start; }
    .nameplate,.dropzone,.pro-panel,.library,.footnote{ grid-column:1; }
    .deck{ grid-column:2; grid-row:1 / span 5; position:sticky; top:24px; }
    .nameplate{ margin-bottom:0; }
    .nameplate + .dropzone{ margin-top:-18px; }
    .dropzone,.pro-panel,.library,.footnote{ margin-bottom:0; }
    .stage-mode .rack{ display:grid; grid-template-columns:minmax(300px,380px) minmax(0,1fr); }
    .stage-mode .deck{ position:relative; top:auto; }
  }
  @media (max-width:620px){
    .rack{ padding:12px 10px 28px; }
    .nameplate{ border-radius:20px; padding:16px; }
    .nameplate .tagline{ font-size:9px; }
    .pro-row{ flex-wrap:wrap; }
    .pro-row .pro-input,.pro-row .pro-select{ min-width:150px; flex:1 1 150px; }
    .pro-btn{ flex:1 1 auto; }
    .bank-row{ grid-template-columns:repeat(5,1fr); gap:6px; }
    .library-head,.row{ grid-template-columns:28px minmax(0,1fr) 62px 58px; gap:6px; padding-left:10px; padding-right:10px; }
    .library-head{ font-size:8px; }
    .row{ min-height:62px; }
    .row select{ font-size:10px; min-height:38px; padding:0 3px; }
    .meta-line{ max-width:180px; }
    .deck{ border-radius:22px; padding:14px; }
    .transport-buttons{ gap:9px; }
    .tbtn{ width:56px; height:56px; }
    .tbtn.play{ width:82px; height:82px; }
    .bpm-btn{ min-width:auto; flex:1; }
    .stage-toolbar{ gap:6px; left:8px; right:8px; top:max(8px, env(safe-area-inset-top)); }
    .stage-left,.stage-right{ gap:6px; }
    .stage-action{ min-height:44px; min-width:48px; padding:0 11px; font-size:10px; }
    .stage-action.round{ min-width:44px; width:44px; font-size:16px; }
    #stageResetBpmBtn{ min-width:74px; padding:0 8px; font-size:9px; }
    .stage-status{ display:none; }
    .stage-mode .rack{ display:block; padding-top:66px; }
    .stage-mode .library{ max-height:34vh; position:relative; top:auto; margin-bottom:12px; }
    .library{ max-height:42vh; }
    .stage-mode .deck{ padding-top:24px; min-height:auto; }
  }




  /* ---- SPON STAGE PRO: Mixer + FX Rack ---- */
  .brand-mark{ width:58px; height:58px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:28px; font-weight:900; color:#17100a; background:linear-gradient(135deg,var(--amber),#fff0a8); box-shadow:0 0 34px rgba(212,175,55,.25), inset 0 1px 0 rgba(255,255,255,.45); }
  .fx-panel,.loop-mixer-panel{ background:rgba(0,0,0,.22); border:1px solid var(--hairline); border-radius:22px; padding:15px; }
  .fx-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
  .fx-title{ font-family:var(--font-mono); font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted-text); }
  .fx-badge{ font-family:var(--font-mono); font-size:10px; color:#17100a; background:linear-gradient(135deg,var(--amber),#ffe08a); border-radius:999px; padding:6px 10px; font-weight:900; }
  .fx-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .fx-control{ border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:10px; background:rgba(255,255,255,.035); }
  .fx-control label{ display:flex; justify-content:space-between; gap:8px; margin-bottom:8px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:1px; color:var(--muted-text); text-transform:uppercase; }
  .fx-control output{ color:var(--amber); font-weight:800; }
  .fx-control input[type='range']{ width:100%; }
  .fx-wide{ grid-column:1 / -1; }
  .meter-wrap{ display:flex; align-items:end; gap:8px; height:58px; padding:10px; border:1px solid var(--hairline); border-radius:16px; background:rgba(0,0,0,.28); }
  .meter{ flex:1; height:100%; border-radius:999px; background:linear-gradient(0deg, var(--green), var(--amber), var(--red)); transform-origin:bottom; transform:scaleY(.04); box-shadow:0 0 14px rgba(0,194,110,.15); transition:transform .06s linear; }
  .clip-light{ width:14px; height:14px; border-radius:50%; background:var(--led-off); border:1px solid var(--hairline); }
  .clip-light.on{ background:var(--red); box-shadow:0 0 18px rgba(255,75,75,.8); }
  @media (max-width:620px){ .fx-grid{ grid-template-columns:1fr; } .brand-mark{ width:48px; height:48px; } }



  /* ---- Stage Mode Notes / Reference ---- */
  .stage-notes-panel{ display:none; }
  .stage-mode .stage-notes-panel{
    display:block;
    grid-column:1;
    margin-top:12px;
    border:1px solid rgba(212,175,55,.28);
    border-radius:22px;
    background:linear-gradient(180deg, rgba(18,23,35,.9), rgba(8,10,16,.94));
    box-shadow:0 16px 50px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.055);
    backdrop-filter:blur(18px);
    overflow:hidden;
  }
  .stage-notes-head{
    padding:12px 14px;
    border-bottom:1px solid var(--hairline);
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--amber);
    background:rgba(255,255,255,.035);
  }
  .stage-notes-body{
    padding:14px;
    max-height:28vh;
    overflow:auto;
    font-family:var(--font-mono);
    font-size:12px;
    line-height:1.65;
    color:var(--text);
    white-space:pre-wrap;
  }
  .stage-notes-empty{ color:var(--muted-text); }
  .stage-mode .library{ max-height:calc(58vh - 74px); }
  @media (max-width:620px){
    .stage-mode .stage-notes-panel{ margin-bottom:12px; }
    .stage-notes-body{ max-height:22vh; }
  }

  /* ---- Login screen (login.php) ---- */
  .login-screen{
    width:min(440px, 92vw); margin:auto; padding:28px;
    border:1px solid var(--hairline); border-radius:28px;
    background:linear-gradient(180deg, rgba(18,23,35,.94), rgba(8,10,16,.96));
    box-shadow:var(--shadow); backdrop-filter:blur(18px); position:relative; z-index:5;
  }
  .login-title{ margin:0 0 8px; font-family:var(--font-display); font-size:34px; text-transform:uppercase; letter-spacing:1.5px; }
  .login-title span{ color:var(--amber); }
  .login-sub{ margin:0 0 20px; color:var(--muted-text); font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:1.2px; line-height:1.5; }
  .login-field{ display:block; margin-bottom:12px; }
  .login-field label{ display:block; margin:0 0 7px; color:var(--muted-text); font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:1.2px; }
  .login-field input{ width:100%; min-height:50px; border:1px solid var(--hairline); border-radius:16px; background:rgba(6,9,15,.78); color:var(--text); padding:0 15px; outline:none; }
  .login-field input:focus{ border-color:rgba(255,181,71,.75); box-shadow:0 0 0 4px rgba(255,181,71,.10); }
  .login-btn{ width:100%; min-height:52px; border:0; border-radius:17px; background:linear-gradient(135deg,var(--amber),#ffe08a); color:#17100a; font-weight:900; cursor:pointer; margin-top:6px; }
  .login-error{ min-height:18px; margin-top:12px; color:var(--red); font-family:var(--font-mono); font-size:11px; text-align:center; }
  .login-alt-link{ margin:14px 0 0; text-align:center; font-family:var(--font-mono); font-size:11px; }
  .login-alt-link a{ color:var(--amber); text-decoration:none; }
  .login-alt-link a:hover{ text-decoration:underline; }
  .logout-btn{ position:absolute; right:20px; top:20px; min-height:40px; border:1px solid var(--hairline); border-radius:999px; background:rgba(255,255,255,.055); color:var(--muted-text); padding:0 14px; cursor:pointer; font-family:var(--font-mono); font-size:10px; z-index:3; }
  .logout-btn:hover{ color:var(--text); border-color:rgba(255,181,71,.65); }

  .wave-zoom-row{ display:flex; align-items:center; gap:10px; margin-top:12px; }
  .wave-zoom-row .wave-edit-title{ margin:0; flex:0 0 auto; }
  .wave-zoom-value{ color:var(--amber); font-family:var(--font-mono); font-size:11px; min-width:42px; text-align:right; }

  /* Cleaner Stage setlist: show only loop numbers/names, no signature/bars columns */
  .stage-mode .library-head{ grid-template-columns:36px minmax(0,1fr) !important; }
  .stage-mode .library-head span:nth-child(3),
  .stage-mode .library-head span:nth-child(4),
  .stage-mode .library-head span:nth-child(5){ display:none !important; }
  .stage-mode .row{ grid-template-columns:36px minmax(0,1fr) !important; }
  .stage-mode .row select,
  .stage-mode .row > span:last-child{ display:none !important; }
  .stage-mode .row .meta-line{ display:none !important; }




  /* Stage Mode tempo reset sits beside the BPM display */
  #stageResetBpmBtn{ display:none; margin:10px auto 0; min-height:40px; }
  .stage-mode #stageResetBpmBtn{ display:inline-flex; align-items:center; justify-content:center; }

  /* ---- Stage Mode Fixed Fullscreen Layout ---- */
  body.stage-mode{
    height:100vh;
    overflow:hidden;
  }
  body.stage-mode:before{ position:fixed; }
  .stage-mode .rack{
    height:100vh;
    max-width:1280px;
    padding:74px 14px 14px;
    display:grid;
    grid-template-columns:minmax(280px,360px) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    gap:18px;
    overflow:hidden;
  }
  .stage-mode .library{
    grid-column:1;
    position:relative;
    top:auto;
    align-self:start;
    margin:0;
    max-height:58vh;
    min-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .stage-mode #libraryBody{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .stage-mode .stage-notes-panel{
    grid-column:1;
    align-self:end;
    margin-top:12px;
    max-height:calc(42vh - 104px);
    min-height:150px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .stage-mode .stage-notes-head{
    flex:0 0 auto;
  }
  .stage-mode .stage-notes-body{
    flex:1 1 auto;
    min-height:0;
    max-height:none;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .stage-mode .deck{
    grid-column:2;
    grid-row:1;
    position:relative;
    top:auto;
    height:calc(100vh - 88px);
    min-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .stage-mode .now-playing,
  .stage-mode .waveform-wrap,
  .stage-mode .beat-grid,
  .stage-mode .transport-buttons,
  .stage-mode .bpm-panel{
    flex:0 0 auto;
  }
  .stage-mode .now-playing{
    position:relative;
    z-index:3;
  }
  .stage-mode .np-title{
    max-width:100%;
  }
  @media (max-width:620px){
    body.stage-mode{ overflow:hidden; }
    .stage-mode .rack{
      display:grid;
      grid-template-columns:1fr;
      grid-template-rows:minmax(230px,34vh) minmax(140px,22vh) minmax(0,1fr);
      gap:10px;
      padding:66px 10px 10px;
      height:100vh;
      overflow:hidden;
    }
    .stage-mode .deck{
      grid-column:1;
      grid-row:1;
      height:100%;
      min-height:0;
      padding:14px;
      overflow:hidden;
      justify-content:center;
    }
    .stage-mode .stage-notes-panel{
      grid-column:1;
      grid-row:2;
      max-height:none;
      min-height:0;
      height:100%;
      margin:0;
    }
    .stage-mode .library{
      grid-column:1;
      grid-row:3;
      max-height:none;
      height:100%;
      margin:0;
      overflow:hidden;
    }
  }



  /* ---- Mobile Stage Mode Order Override: Now Loaded → Stage Notes → Setlist ---- */
  @media (max-width:620px){
    .stage-mode .rack{
      display:flex !important;
      flex-direction:column !important;
      gap:10px;
      padding:66px 10px 10px;
      height:100vh;
      overflow:hidden;
    }
    .stage-mode .deck{
      order:1;
      width:100%;
      height:34vh;
      min-height:0;
      flex:0 0 34vh;
      padding:14px;
      overflow:hidden;
      justify-content:center;
    }
    .stage-mode .stage-notes-panel{
      order:2;
      width:100%;
      height:22vh;
      flex:0 0 22vh;
      min-height:0;
      margin:0;
      max-height:none;
    }
    .stage-mode .library{
      order:3;
      width:100%;
      height:auto;
      flex:1 1 auto;
      min-height:0;
      max-height:none;
      margin:0;
      overflow:hidden;
    }
  }


  /* ---- Fast Cache Mode Status ---- */
  .autoload-status{
    padding:10px 14px;
    font-family:var(--font-mono);
    font-size:10px;
    color:var(--muted-text);
    background:rgba(255,255,255,.035);
    border-top:1px solid var(--hairline);
  }
  .autoload-status strong{ color:var(--amber); }


  /* ---- Now Loaded Always First Layout ---- */
  @media (min-width:900px){
    body:not(.stage-mode) .rack{
      grid-template-columns:minmax(480px,1.2fr) minmax(370px,.9fr);
    }
    body:not(.stage-mode) .deck{
      grid-column:1;
      grid-row:1 / span 5;
    }
    body:not(.stage-mode) .nameplate,
    body:not(.stage-mode) .dropzone,
    body:not(.stage-mode) .pro-panel,
    body:not(.stage-mode) .library,
    body:not(.stage-mode) .footnote{
      grid-column:2;
    }
  }

  @media (max-width:899px){
    body:not(.stage-mode) .rack{
      display:flex;
      flex-direction:column;
    }
    body:not(.stage-mode) .deck{ order:1; }
    body:not(.stage-mode) .nameplate{ order:2; }
    body:not(.stage-mode) .dropzone{ order:3; }
    body:not(.stage-mode) .library{ order:4; }
    body:not(.stage-mode) .pro-panel{ order:5; }
    body:not(.stage-mode) .footnote{ order:6; }
  }

  /* Stage Mode: Now Loaded area first, then notes, then setlist on mobile */
  @media (max-width:620px){
    .stage-mode .deck{
      order:1 !important;
    }
    .stage-mode .stage-notes-panel{
      order:2 !important;
    }
    .stage-mode .library{
      order:3 !important;
    }
  }


  /* ---- SPON Remote Room / Connection Status ---- */
  .remote-status-panel{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 14px;
    border-top:1px solid var(--hairline);
    background:rgba(0,0,0,.18);
    font-family:var(--font-mono);
    font-size:10px;
    color:var(--muted-text);
  }
  .remote-status-panel strong{ color:var(--amber); }
  .remote-status-pill{
    border:1px solid var(--hairline);
    border-radius:999px;
    padding:6px 10px;
    background:rgba(255,255,255,.04);
    color:var(--muted-text);
    white-space:nowrap;
  }
  .remote-status-pill.ready{
    color:#07150d;
    background:linear-gradient(135deg,var(--green),#baf7cc);
    border-color:transparent;
  }
  .remote-status-pill.error{
    color:#fff;
    background:rgba(255,75,75,.18);
    border-color:rgba(255,75,75,.45);
  }


  /* ---- Genre Filter Tabs ---- */
  .genre-tabs{
    display:flex;
    gap:7px;
    overflow-x:auto;
    padding:10px 10px;
    border-bottom:1px solid var(--hairline);
    background:rgba(255,255,255,.025);
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .genre-tabs::-webkit-scrollbar{ height:6px; }
  .genre-tabs::-webkit-scrollbar-track{ background:rgba(255,255,255,.025); }
  .genre-tabs::-webkit-scrollbar-thumb{ background:rgba(212,175,55,.38); border-radius:999px; }
  .genre-tab{
    flex:0 0 auto;
    min-height:34px;
    border:1px solid var(--hairline);
    border-radius:999px;
    background:rgba(255,255,255,.045);
    color:var(--muted-text);
    padding:0 11px;
    cursor:pointer;
    font-family:var(--font-mono);
    font-size:9.5px;
    font-weight:800;
    white-space:nowrap;
  }
  .genre-tab:hover{ border-color:rgba(255,181,71,.65); color:#ffe0a4; }
  .genre-tab.on{
    color:#17100a;
    background:linear-gradient(135deg,var(--amber),#ffe08a);
    border-color:transparent;
  }


  /* ---- Connected Logo + Dropzone ---- */
  .nameplate + .dropzone{
    margin-top:-1px !important;
  }
  @media (min-width:900px){
    body:not(.stage-mode) .nameplate + .dropzone{
      margin-top:-19px !important;
    }
  }

  /* ---- Setlist-only Rename ---- */
  .setlist-rename-btn{
    flex:0 0 auto;
    width:28px;
    height:28px;
    min-height:28px;
    padding:0;
    border:1px solid var(--hairline);
    border-radius:9px;
    background:rgba(255,255,255,.055);
    color:var(--amber);
    cursor:pointer;
    font-size:13px;
    line-height:1;
  }
  .setlist-rename-btn:hover{
    border-color:rgba(255,181,71,.7);
    background:rgba(255,181,71,.12);
  }
  .setlist-original-name{
    display:block;
    margin-top:4px;
    color:var(--muted-text);
    font-family:var(--font-mono);
    font-size:9px;
    font-weight:500;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }


  /* ---- Sticky Working Genre Tabs ---- */
  .library{
    position:relative;
    min-height:0;
  }
  .genre-tabs{
    position:sticky;
    top:0;
    z-index:12;
    flex:0 0 auto;
    background:rgba(12,15,24,.98);
    backdrop-filter:blur(16px);
  }
  .library-head{
    position:sticky;
    top:55px;
    z-index:11;
    flex:0 0 auto;
    background:rgba(18,23,35,.98);
    backdrop-filter:blur(16px);
  }
  #libraryBody{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
  }
  .stage-mode .genre-tabs{
    top:0;
  }
  .stage-mode .library-head{
    top:55px;
  }


  /* ---- Stage Setlist Rename + Saved BPM ---- */
  .stage-setlist-tools{
    display:none; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 12px; border-bottom:1px solid var(--hairline);
    background:rgba(0,0,0,.18);
  }
  .stage-mode .stage-setlist-tools{ display:flex; }
  .stage-setlist-name{
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-family:var(--font-mono); font-size:10px; color:var(--amber);
    text-transform:uppercase; letter-spacing:1px;
  }
  .stage-setlist-rename-btn{
    flex:0 0 auto; min-height:34px; padding:0 10px;
    border:1px solid var(--hairline); border-radius:11px;
    background:rgba(255,255,255,.055); color:var(--text);
    cursor:pointer; font-family:var(--font-mono); font-size:9.5px; font-weight:800;
  }


  /* Rename controls visibility fix */
  .stage-mode .setlist-rename-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
  }
  #stageRenameSetlistBtn{
    pointer-events:auto !important;
    position:relative;
    z-index:30;
  }


  /* ---- Stage Setlist Editor Modal ---- */
  .setlist-editor-overlay{
    position:fixed;
    inset:0;
    z-index:120;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(0,0,0,.76);
    backdrop-filter:blur(12px);
  }
  .setlist-editor-overlay.show{ display:flex; }
  .setlist-editor-card{
    width:min(760px,96vw);
    max-height:90vh;
    display:flex;
    flex-direction:column;
    border:1px solid rgba(212,175,55,.36);
    border-radius:26px;
    overflow:hidden;
    background:linear-gradient(180deg,rgba(18,23,35,.98),rgba(8,10,16,.99));
    box-shadow:0 35px 110px rgba(0,0,0,.65);
  }
  .setlist-editor-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px;
    border-bottom:1px solid var(--hairline);
  }
  .setlist-editor-title{
    font-family:var(--font-display);
    font-size:24px;
    font-weight:800;
    color:var(--amber);
  }
  .setlist-editor-close{
    width:42px;
    height:42px;
    border:1px solid var(--hairline);
    border-radius:50%;
    background:rgba(255,255,255,.055);
    color:var(--text);
    cursor:pointer;
    font-size:22px;
  }
  .setlist-editor-body{
    padding:14px;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .setlist-editor-name{
    width:100%;
    min-height:50px;
    margin-bottom:12px;
    border:1px solid var(--hairline);
    border-radius:15px;
    background:rgba(0,0,0,.28);
    color:var(--text);
    padding:0 14px;
    font-weight:800;
  }
  .setlist-editor-list{
    display:flex;
    flex-direction:column;
    gap:9px;
  }
  .setlist-editor-row{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 92px auto;
    gap:8px;
    align-items:center;
    padding:10px;
    border:1px solid var(--hairline);
    border-radius:16px;
    background:rgba(255,255,255,.035);
  }
  .setlist-editor-index{
    color:var(--amber);
    font-family:var(--font-mono);
    font-size:11px;
  }
  .setlist-editor-alias,
  .setlist-editor-bpm{
    width:100%;
    min-height:42px;
    border:1px solid var(--hairline);
    border-radius:12px;
    background:rgba(0,0,0,.25);
    color:var(--text);
    padding:0 10px;
  }
  .setlist-editor-original{
    display:block;
    margin-top:5px;
    color:var(--muted-text);
    font-family:var(--font-mono);
    font-size:9px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .setlist-editor-actions{
    display:flex;
    gap:5px;
  }
  .setlist-editor-actions button{
    width:34px;
    height:34px;
    min-height:34px;
    padding:0;
    border:1px solid var(--hairline);
    border-radius:10px;
    background:rgba(255,255,255,.055);
    color:var(--text);
    cursor:pointer;
  }
  .setlist-editor-actions .remove-entry{ color:#ffd1d3; }
  .setlist-editor-foot{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding:14px 16px;
    border-top:1px solid var(--hairline);
  }
  .setlist-editor-foot button{
    min-height:44px;
    border:1px solid var(--hairline);
    border-radius:14px;
    padding:0 16px;
    background:rgba(255,255,255,.055);
    color:var(--text);
    cursor:pointer;
    font-weight:800;
  }
  .setlist-editor-foot .save{
    border:0;
    color:#17100a;
    background:linear-gradient(135deg,var(--amber),#ffe08a);
  }

  /* Keep pencil visible on every Stage Mode setlist row */
  .stage-mode .row .setlist-rename-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    flex:0 0 30px;
  }
  .stage-mode .row .name{
    overflow:visible;
  }

  @media(max-width:620px){
    .setlist-editor-row{
      grid-template-columns:28px minmax(0,1fr) 76px;
    }
    .setlist-editor-actions{
      grid-column:2 / -1;
      justify-content:flex-end;
    }
  }


  .stage-mode .row{
    grid-template-columns:36px minmax(0,1fr) !important;
  }
  .stage-mode .row .name{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
  }


  /* ---- Android WebView Responsive Polish ---- */
  @supports (padding: max(0px)){
    body:not(.stage-mode) .rack{
      padding-left:max(10px, env(safe-area-inset-left));
      padding-right:max(10px, env(safe-area-inset-right));
      padding-bottom:max(28px, env(safe-area-inset-bottom));
    }
  }
  @media (max-width:699px){
    body:not(.stage-mode) .rack{
      display:flex !important;
      flex-direction:column !important;
      gap:0 !important;
      max-width:100% !important;
    }
    body:not(.stage-mode) .nameplate{ order:1 !important; }
    body:not(.stage-mode) .dropzone{ order:2 !important; margin-top:-1px !important; }
    body:not(.stage-mode) .deck{
      order:3 !important;
      position:relative !important;
      top:auto !important;
      width:100% !important;
      margin:12px 0 !important;
    }
    body:not(.stage-mode) .library{
      order:4 !important;
      width:100% !important;
      max-height:48vh !important;
      margin:0 0 12px !important;
    }
    body:not(.stage-mode) .pro-panel{ order:5 !important; }
    body:not(.stage-mode) .stage-notes-panel{ order:6 !important; }
    body:not(.stage-mode) .footnote{ order:7 !important; }
    .transport-buttons{ flex-wrap:nowrap; }
    .genre-tabs{ scrollbar-width:none; }
    .genre-tabs::-webkit-scrollbar{ display:none; }
  }
  @media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
    body:not(.stage-mode) .rack{
      display:flex !important;
      flex-direction:column !important;
      max-width:820px !important;
    }
    body:not(.stage-mode) .nameplate{ order:1 !important; }
    body:not(.stage-mode) .dropzone{ order:2 !important; }
    body:not(.stage-mode) .deck{
      order:3 !important;
      position:relative !important;
      top:auto !important;
      margin:14px 0 !important;
    }
    body:not(.stage-mode) .library{ order:4 !important; max-height:52vh !important; }
    body:not(.stage-mode) .pro-panel{ order:5 !important; }
    body:not(.stage-mode) .footnote{ order:6 !important; }
  }


  /* ---- MOBILE COMPACT MODE ---- */
  .mobile-compact-area{ display:none; }
  .mobile-quick-panel{
    display:none;
    border:1px solid var(--hairline);
    border-radius:20px;
    background:linear-gradient(180deg,rgba(18,23,35,.9),rgba(8,10,16,.94));
    padding:12px;
    margin:0 0 12px;
    box-shadow:0 12px 36px rgba(0,0,0,.28);
  }
  .mobile-quick-title,
  .mobile-compact-title{
    margin:0 0 9px;
    color:var(--amber);
    font-family:var(--font-mono);
    font-size:9px;
    letter-spacing:1.4px;
    text-transform:uppercase;
  }
  .mobile-quick-host .pro-row{
    margin:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .mobile-quick-host .pro-select{
    grid-column:1 / -1;
  }

  .mobile-accordion{
    border:1px solid var(--hairline);
    border-radius:18px;
    overflow:hidden;
    margin-bottom:9px;
    background:linear-gradient(180deg,rgba(18,23,35,.9),rgba(8,10,16,.94));
    box-shadow:0 10px 30px rgba(0,0,0,.24);
  }
  .mobile-accordion-toggle{
    width:100%;
    min-height:50px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 14px;
    border:0;
    border-radius:0;
    background:rgba(255,255,255,.035);
    color:var(--text);
    cursor:pointer;
    font-weight:850;
    text-align:left;
  }
  .mobile-accordion-toggle .arrow{
    color:var(--amber);
    font-size:16px;
    transition:transform .16s ease;
  }
  .mobile-accordion.open .mobile-accordion-toggle .arrow{
    transform:rotate(180deg);
  }
  .mobile-accordion-content{
    display:none;
    padding:12px;
    border-top:1px solid var(--hairline);
  }
  .mobile-accordion.open .mobile-accordion-content{ display:block; }
  .mobile-accordion-content > *{
    margin-bottom:10px;
  }
  .mobile-accordion-content > *:last-child{
    margin-bottom:0;
  }

  @media (max-width:699px){
    body:not(.stage-mode) .mobile-quick-panel,
    body:not(.stage-mode) .mobile-compact-area{
      display:block;
    }

    body:not(.stage-mode) .mobile-quick-panel{ order:4 !important; }
    body:not(.stage-mode) .library{ order:5 !important; }
    body:not(.stage-mode) .mobile-compact-area{ order:6 !important; }
    body:not(.stage-mode) .pro-panel{ order:7 !important; }
    body:not(.stage-mode) .footnote{ display:none !important; }

    /* Keep the main performance view short. */
    body:not(.stage-mode) .deck{
      gap:11px !important;
      padding:12px !important;
    }
    body:not(.stage-mode) .deck .volume-panel,
    body:not(.stage-mode) .deck .pitch-panel,
    body:not(.stage-mode) .deck .loop-mixer-panel,
    body:not(.stage-mode) .deck .fx-panel,
    body:not(.stage-mode) .deck .mini-status{
      display:none !important;
    }
    body:not(.stage-mode) .wave-edit-panel,
    body:not(.stage-mode) .wave-zoom-row{
      display:none !important;
    }
    body:not(.stage-mode) #waveformCanvas{ height:72px; }
    body:not(.stage-mode) .bpm-panel{
      padding:11px;
      border-radius:17px;
    }
    body:not(.stage-mode) .bpm-readout{
      font-size:48px;
      margin:4px 0 2px;
    }
    body:not(.stage-mode) .bpm-sub{ margin-bottom:8px; }
    body:not(.stage-mode) .bpm-controls .bpm-btn{
      min-height:40px;
      padding:0 7px;
    }
    body:not(.stage-mode) .nameplate{
      min-height:72px;
      padding:12px 14px;
    }
    body:not(.stage-mode) .brand-mark{
      width:44px;
      height:44px;
      font-size:22px;
      border-radius:14px;
    }
    body:not(.stage-mode) .nameplate h1{ font-size:23px; }
    body:not(.stage-mode) .nameplate .tagline{ display:none; }
    body:not(.stage-mode) .dropzone{
      padding:13px 12px;
    }
    body:not(.stage-mode) .dropzone p{
      font-size:10px;
      line-height:1.35;
    }
    body:not(.stage-mode) .library{
      max-height:42vh !important;
    }
    body:not(.stage-mode) .remote-status-panel{
      display:none !important;
    }
    body:not(.stage-mode) .pro-panel.mobile-emptied{
      display:none !important;
    }

    .mobile-accordion-content .pro-row{
      display:grid;
      grid-template-columns:1fr;
      gap:8px;
    }
    .mobile-accordion-content .pro-btn,
    .mobile-accordion-content .pro-input,
    .mobile-accordion-content .pro-select{
      width:100%;
    }
    .mobile-accordion-content .bank-row{
      grid-template-columns:repeat(5,1fr);
    }
    .mobile-accordion-content .fx-grid{
      grid-template-columns:1fr;
    }
  }


  /* ---- FINAL MOBILE PERFORMANCE LAYOUT ---- */
  .mobile-performance-tools{ display:none; }

  @media (max-width:699px){
    body:not(.stage-mode) .rack{
      display:flex !important;
      flex-direction:column !important;
      gap:0 !important;
      width:100% !important;
      max-width:100% !important;
      padding:8px 8px 24px !important;
    }

    body:not(.stage-mode) .nameplate{
      order:1 !important;
      min-height:64px !important;
      padding:10px 12px !important;
      border-radius:18px 18px 0 0 !important;
    }
    body:not(.stage-mode) .brand-mark{
      width:40px !important;
      height:40px !important;
      border-radius:12px !important;
      font-size:20px !important;
    }
    body:not(.stage-mode) .nameplate h1{
      font-size:21px !important;
      line-height:1 !important;
    }
    body:not(.stage-mode) .nameplate .tagline{ display:none !important; }
    body:not(.stage-mode) .logout-btn{
      top:12px !important;
      right:12px !important;
      min-height:34px !important;
      padding:0 10px !important;
      font-size:9px !important;
    }

    body:not(.stage-mode) .dropzone{
      order:2 !important;
      margin:-1px 0 8px !important;
      padding:11px 10px !important;
      border-radius:0 0 18px 18px !important;
    }
    body:not(.stage-mode) .dropzone p{
      font-size:9.5px !important;
      line-height:1.35 !important;
    }

    body:not(.stage-mode) .deck{
      order:3 !important;
      position:relative !important;
      top:auto !important;
      width:100% !important;
      margin:0 0 8px !important;
      padding:11px !important;
      gap:9px !important;
      border-radius:18px !important;
      overflow:visible !important;
    }

    body:not(.stage-mode) .np-title{
      font-size:24px !important;
      line-height:1.1 !important;
      white-space:nowrap !important;
    }

    body:not(.stage-mode) .waveform-wrap{
      padding:8px !important;
      border-radius:15px !important;
    }
    body:not(.stage-mode) #waveformCanvas{
      height:62px !important;
    }

    body:not(.stage-mode) .wave-zoom-row,
    body:not(.stage-mode) .wave-edit-panel,
    body:not(.stage-mode) .volume-panel,
    body:not(.stage-mode) .pitch-panel,
    body:not(.stage-mode) .loop-mixer-panel,
    body:not(.stage-mode) .fx-panel,
    body:not(.stage-mode) .mini-status{
      display:none !important;
    }

    body:not(.stage-mode) .beat-grid{
      min-height:18px !important;
      gap:8px !important;
    }
    body:not(.stage-mode) .beat-dot{
      width:16px !important;
      height:16px !important;
    }

    body:not(.stage-mode) .transport-buttons{
      gap:8px !important;
      flex-wrap:nowrap !important;
    }
    body:not(.stage-mode) .tbtn{
      width:48px !important;
      height:48px !important;
      font-size:18px !important;
    }
    body:not(.stage-mode) .tbtn.play{
      width:68px !important;
      height:68px !important;
      font-size:26px !important;
    }

    body:not(.stage-mode) .bpm-panel{
      padding:9px !important;
      border-radius:15px !important;
    }
    body:not(.stage-mode) .bpm-readout{
      font-size:42px !important;
      margin:3px 0 0 !important;
    }
    body:not(.stage-mode) .bpm-sub{
      font-size:9px !important;
      margin-bottom:7px !important;
    }
    body:not(.stage-mode) .bpm-controls{
      gap:5px !important;
    }
    body:not(.stage-mode) .bpm-controls .bpm-btn{
      min-height:36px !important;
      min-width:0 !important;
      padding:0 5px !important;
      font-size:12px !important;
    }
    body:not(.stage-mode) .bpm-reset{
      margin-top:6px !important;
      font-size:9px !important;
    }

    .mobile-performance-tools{
      display:block !important;
      order:4 !important;
      margin:0 0 8px !important;
    }
    .mobile-performance-card{
      border:1px solid var(--hairline);
      border-radius:18px;
      padding:10px;
      background:linear-gradient(180deg,rgba(18,23,35,.92),rgba(8,10,16,.96));
      box-shadow:0 10px 30px rgba(0,0,0,.24);
    }
    .mobile-performance-title{
      margin:0 0 8px;
      color:var(--amber);
      font-family:var(--font-mono);
      font-size:9px;
      letter-spacing:1.4px;
      text-transform:uppercase;
    }
    .mobile-live-row{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:7px;
    }
    .mobile-live-row .pro-btn,
    .mobile-live-row .pro-select{
      width:100% !important;
      min-height:42px !important;
      margin:0 !important;
    }
    .mobile-live-row .pro-select{
      grid-column:1 / -1;
    }

    body:not(.stage-mode) .library{
      order:5 !important;
      width:100% !important;
      height:40vh !important;
      max-height:40vh !important;
      margin:0 0 8px !important;
      border-radius:18px !important;
      overflow:hidden !important;
    }
    body:not(.stage-mode) .genre-tabs{
      position:sticky !important;
      top:0 !important;
      z-index:20 !important;
      padding:7px !important;
      gap:5px !important;
      scrollbar-width:none;
    }
    body:not(.stage-mode) .genre-tabs::-webkit-scrollbar{ display:none; }
    body:not(.stage-mode) .genre-tab{
      min-height:30px !important;
      padding:0 9px !important;
      font-size:8.5px !important;
    }
    body:not(.stage-mode) .library-head{
      top:45px !important;
      padding:8px 9px !important;
    }
    body:not(.stage-mode) #libraryBody{
      overflow-y:auto !important;
      min-height:0 !important;
      flex:1 1 auto !important;
    }
    body:not(.stage-mode) .row{
      min-height:54px !important;
      padding:8px 9px !important;
    }
    body:not(.stage-mode) .meta-line{
      font-size:8.5px !important;
      margin-top:3px !important;
    }
    body:not(.stage-mode) .autoload-status{
      padding:7px 9px !important;
      font-size:8.5px !important;
    }
    body:not(.stage-mode) .remote-status-panel{
      display:none !important;
    }

    .mobile-compact-area{
      display:block !important;
      order:6 !important;
      margin:0 !important;
    }
    .mobile-compact-title{
      margin:4px 0 8px !important;
    }
    .mobile-accordion{
      margin-bottom:7px !important;
      border-radius:15px !important;
    }
    .mobile-accordion-toggle{
      min-height:45px !important;
      padding:0 12px !important;
      font-size:13px !important;
    }
    .mobile-accordion-content{
      padding:10px !important;
    }

    body:not(.stage-mode) .pro-panel{
      display:none !important;
    }
    body:not(.stage-mode) .footnote{
      display:none !important;
    }
  }


  /* =========================================================
     SPON STAGE PRO — NEW GOLD MOBILE APP UI
     Applies only to phone widths. Desktop/tablet/stage stay intact.
     ========================================================= */
  .spon-mobile-app{ display:none; }

  @media (max-width:699px){
    html,body{
      width:100%;
      max-width:100%;
      overflow-x:hidden;
      background:#030407 !important;
    }

    body:not(.stage-mode) .rack{
      display:block !important;
      width:100% !important;
      max-width:100% !important;
      padding:0 0 92px !important;
    }

    body:not(.stage-mode) .rack > .nameplate,
    body:not(.stage-mode) .rack > .dropzone,
    body:not(.stage-mode) .rack > .library,
    body:not(.stage-mode) .rack > .pro-panel,
    body:not(.stage-mode) .rack > .deck,
    body:not(.stage-mode) .rack > .mobile-quick-panel,
    body:not(.stage-mode) .rack > .mobile-performance-tools,
    body:not(.stage-mode) .rack > .mobile-compact-area,
    body:not(.stage-mode) .rack > .footnote{
      display:none !important;
    }

    body:not(.stage-mode) .logout-btn{ display:none !important; }

    .spon-mobile-app{
      display:block;
      width:100%;
      min-height:100vh;
      color:var(--text);
      background:
        radial-gradient(circle at 20% 0%, rgba(212,175,55,.12), transparent 28%),
        linear-gradient(180deg,#030407,#080a10 52%,#030407);
    }

    .spon-mobile-topbar{
      position:sticky;
      top:0;
      z-index:80;
      display:grid;
      grid-template-columns:auto minmax(0,1fr) auto auto;
      align-items:center;
      gap:8px;
      min-height:70px;
      padding:max(10px,env(safe-area-inset-top)) 12px 10px;
      background:rgba(3,4,7,.94);
      border-bottom:1px solid rgba(212,175,55,.15);
      backdrop-filter:blur(18px);
    }

    .spon-mobile-logo{
      min-width:78px;
      font-family:var(--font-display);
      font-weight:900;
      font-style:italic;
      line-height:.88;
      letter-spacing:.6px;
      color:#fff;
      font-size:23px;
    }
    .spon-mobile-logo span{
      display:block;
      margin-top:5px;
      color:var(--amber);
      font-size:15px;
      letter-spacing:1px;
    }

    .spon-mobile-setlist-slot,
    .spon-mobile-stage-slot{
      min-width:0;
    }
    .spon-mobile-setlist-slot select,
    .spon-mobile-stage-slot button{
      width:100% !important;
      min-height:42px !important;
      border-radius:13px !important;
      padding:0 10px !important;
      background:#0d1017 !important;
      border:1px solid rgba(255,255,255,.13) !important;
      color:var(--text) !important;
      font-size:12px !important;
    }
    .spon-mobile-stage-slot button{
      border-color:rgba(212,175,55,.75) !important;
      color:var(--amber) !important;
      font-weight:900 !important;
    }
    .spon-mobile-gear{
      width:42px;
      height:42px;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.13);
      background:#0d1017;
      color:var(--text);
      font-size:20px;
    }

    .spon-mobile-view{
      display:none;
      padding:12px;
    }
    .spon-mobile-view.active{ display:block; }

    .spon-card{
      border:1px solid rgba(255,255,255,.12);
      border-radius:22px;
      background:linear-gradient(180deg,rgba(17,20,28,.97),rgba(7,9,14,.98));
      box-shadow:0 20px 50px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.035);
      overflow:hidden;
    }

    .spon-play-card{ padding:16px; }
    .spon-play-card .deck{
      display:flex !important;
      position:relative !important;
      top:auto !important;
      width:100% !important;
      margin:0 !important;
      padding:0 !important;
      gap:12px !important;
      border:0 !important;
      border-radius:0 !important;
      background:transparent !important;
      box-shadow:none !important;
      overflow:visible !important;
    }
    .spon-play-card .deck:before{ display:none !important; }

    .spon-play-card .now-playing{
      text-align:left !important;
      padding-right:50px;
    }
    .spon-play-card .np-label{
      color:var(--amber) !important;
      font-size:10px !important;
      letter-spacing:1.2px !important;
    }
    .spon-play-card .np-title{
      margin-top:8px !important;
      font-size:clamp(28px,8vw,38px) !important;
      line-height:1.06 !important;
      white-space:normal !important;
      color:#fff !important;
    }

    .spon-play-card .waveform-wrap{
      padding:8px !important;
      border-radius:17px !important;
      background:#05070b !important;
      border-color:rgba(255,255,255,.12) !important;
    }
    .spon-play-card #waveformCanvas{
      height:92px !important;
    }
    .spon-play-card .wave-zoom-row,
    .spon-play-card .wave-edit-panel{
      display:none !important;
    }

    .spon-play-card .beat-grid{
      min-height:18px !important;
      gap:8px !important;
    }
    .spon-play-card .beat-dot{
      width:15px !important;
      height:15px !important;
    }

    .spon-play-card .transport-buttons{
      display:grid !important;
      grid-template-columns:1fr 1.22fr 1fr 1fr;
      gap:9px !important;
      width:100%;
    }
    .spon-play-card .tbtn{
      width:100% !important;
      height:62px !important;
      border-radius:18px !important;
      font-size:22px !important;
      background:linear-gradient(180deg,#151923,#0a0d13) !important;
    }
    .spon-play-card .tbtn.play{
      height:72px !important;
      border-radius:50% !important;
      max-width:72px !important;
      justify-self:center;
      background:linear-gradient(145deg,#f4ce4c,#c89b20) !important;
      color:#111 !important;
      box-shadow:0 0 28px rgba(212,175,55,.34) !important;
    }
    .spon-play-card .tbtn.stop{
      color:#ff5757 !important;
    }

    .spon-play-card .bpm-panel{
      display:grid !important;
      grid-template-columns:88px 1fr;
      grid-template-areas:
        "read controls"
        "sub controls"
        "reset reset";
      align-items:center;
      gap:4px 10px;
      padding:10px !important;
      border-radius:17px !important;
      background:#080b11 !important;
      border-color:rgba(255,255,255,.1) !important;
    }
    .spon-play-card .bpm-label{ display:none !important; }
    .spon-play-card .bpm-readout{
      grid-area:read;
      font-size:43px !important;
      text-align:center;
      margin:0 !important;
    }
    .spon-play-card .bpm-sub{
      grid-area:sub;
      margin:0 !important;
      text-align:center;
      font-size:8px !important;
    }
    .spon-play-card .bpm-controls{
      grid-area:controls;
      display:grid !important;
      grid-template-columns:repeat(4,1fr);
      gap:5px !important;
    }
    .spon-play-card .bpm-btn{
      min-width:0 !important;
      min-height:42px !important;
      border-radius:12px !important;
      padding:0 4px !important;
      font-size:12px !important;
    }
    .spon-play-card .bpm-reset{
      grid-area:reset;
      margin-top:4px !important;
    }
    .spon-play-card #stageResetBpmBtn{ display:none !important; }

    .spon-play-card .volume-panel,
    .spon-play-card .pitch-panel,
    .spon-play-card .loop-mixer-panel,
    .spon-play-card .fx-panel,
    .spon-play-card .mini-status{
      display:none !important;
    }

    .spon-quick-controls{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:8px;
      margin-top:10px;
    }
    .spon-quick-controls .pro-row{
      display:contents !important;
    }
    .spon-quick-controls .pro-btn,
    .spon-quick-controls .pro-select{
      width:100% !important;
      min-height:46px !important;
      margin:0 !important;
      border-radius:14px !important;
      text-align:center !important;
    }
    .spon-quick-controls .pro-select{
      grid-column:1 / -1;
    }
    .spon-quick-controls #clearLibraryBtn{ display:none !important; }

    .spon-browser{
      margin-top:12px;
      padding:12px;
    }
    .spon-browser-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .spon-browser-title{
      color:#fff;
      font-family:var(--font-display);
      font-size:20px;
      font-weight:800;
      letter-spacing:.4px;
    }
    .spon-browser-title span{ color:var(--amber); }

    .spon-browser-search{
      margin-bottom:9px;
    }
    .spon-browser-search .pro-row{
      display:grid !important;
      grid-template-columns:minmax(0,1fr) 54px !important;
      gap:7px !important;
      margin:0 !important;
    }
    .spon-browser-search #stageBtn,
    .spon-browser-search #lockBtn{
      display:none !important;
    }
    .spon-browser-search .pro-input,
    .spon-browser-search .pro-btn{
      min-height:44px !important;
      border-radius:14px !important;
    }

    .spon-browser .library{
      display:flex !important;
      width:100% !important;
      height:42vh !important;
      max-height:42vh !important;
      margin:0 !important;
      border:0 !important;
      border-radius:16px !important;
      box-shadow:none !important;
      background:#07090e !important;
    }
    .spon-browser .stage-setlist-tools,
    .spon-browser .remote-status-panel{
      display:none !important;
    }
    .spon-browser .genre-tabs{
      position:sticky !important;
      top:0 !important;
      padding:8px 7px !important;
      gap:6px !important;
      background:#090c12 !important;
      scrollbar-width:none;
    }
    .spon-browser .genre-tabs::-webkit-scrollbar{ display:none; }
    .spon-browser .genre-tab{
      min-height:32px !important;
      padding:0 10px !important;
      font-size:8.5px !important;
    }
    .spon-browser .library-head{
      top:48px !important;
      padding:8px 9px !important;
      grid-template-columns:26px minmax(0,1fr) 60px 52px !important;
    }
    .spon-browser #libraryBody{
      overflow-y:auto !important;
      flex:1 1 auto !important;
    }
    .spon-browser .row{
      min-height:64px !important;
      padding:9px !important;
      grid-template-columns:26px minmax(0,1fr) 58px 50px !important;
      background:#0b0e15;
      margin:0 0 6px;
      border:1px solid transparent !important;
      border-radius:14px;
    }
    .spon-browser .row.active{
      border-color:rgba(212,175,55,.55) !important;
      background:linear-gradient(90deg,rgba(212,175,55,.12),#0b0e15) !important;
    }
    .spon-browser .row .name{
      font-size:14px !important;
    }
    .spon-browser .meta-line{
      font-size:8px !important;
      margin-top:3px !important;
    }
    .spon-browser .autoload-status{
      padding:7px 9px !important;
      font-size:8px !important;
    }

    .spon-mobile-page-card{
      padding:12px;
    }
    .spon-page-title{
      margin:2px 0 12px;
      color:var(--amber);
      font-family:var(--font-display);
      font-size:24px;
      font-weight:800;
    }

    .spon-mobile-page-card .pro-row{
      display:grid !important;
      grid-template-columns:1fr !important;
      gap:8px !important;
    }
    .spon-mobile-page-card .pro-input,
    .spon-mobile-page-card .pro-select,
    .spon-mobile-page-card .pro-btn,
    .spon-mobile-page-card textarea{
      width:100% !important;
      max-width:100% !important;
    }
    .spon-mobile-page-card .notes-panel,
    .spon-mobile-page-card .volume-panel,
    .spon-mobile-page-card .pitch-panel,
    .spon-mobile-page-card .loop-mixer-panel,
    .spon-mobile-page-card .fx-panel,
    .spon-mobile-page-card .mini-status,
    .spon-mobile-page-card .wave-edit-panel,
    .spon-mobile-page-card .wave-zoom-row,
    .spon-mobile-page-card .remote-status-panel,
    .spon-mobile-page-card .bank-row,
    .spon-mobile-page-card .pro-subtitle{
      display:block !important;
      width:100% !important;
      margin-bottom:10px !important;
    }
    .spon-mobile-page-card .mini-status{
      display:flex !important;
    }
    .spon-mobile-page-card .wave-zoom-row{
      display:flex !important;
    }
    .spon-mobile-page-card .remote-status-panel{
      display:flex !important;
      border:1px solid var(--hairline);
      border-radius:14px;
    }
    .spon-mobile-page-card .fx-grid{
      grid-template-columns:1fr !important;
    }

    .spon-bottom-nav{
      position:fixed;
      left:8px;
      right:8px;
      bottom:max(8px,env(safe-area-inset-bottom));
      z-index:100;
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:4px;
      min-height:70px;
      padding:6px;
      border:1px solid rgba(255,255,255,.12);
      border-radius:20px;
      background:rgba(7,9,14,.96);
      backdrop-filter:blur(20px);
      box-shadow:0 18px 50px rgba(0,0,0,.55);
    }
    .spon-nav-btn{
      border:0;
      border-radius:14px;
      background:transparent;
      color:#a9b3c7;
      padding:7px 2px;
      font-size:9px;
      font-weight:800;
      letter-spacing:.4px;
    }
    .spon-nav-btn .icon{
      display:block;
      margin-bottom:4px;
      font-size:21px;
      line-height:1;
    }
    .spon-nav-btn.active{
      color:var(--amber);
      background:linear-gradient(180deg,rgba(212,175,55,.14),rgba(212,175,55,.04));
      box-shadow:inset 0 -3px 0 var(--amber);
    }

    @media (max-width:380px){
      .spon-mobile-topbar{
        grid-template-columns:70px minmax(0,1fr) auto;
      }
      .spon-mobile-stage-slot{ display:none; }
      .spon-mobile-logo{ font-size:20px; min-width:65px; }
      .spon-play-card{ padding:12px; }
      .spon-play-card .np-title{ font-size:26px !important; }
      .spon-browser .library{ height:40vh !important; max-height:40vh !important; }
      .spon-nav-btn{ font-size:8px; }
    }
  }


  /* ---- NEW MOBILE MIXER FADER VISIBILITY FIX ---- */
  @media (max-width:699px){
    body:not(.stage-mode) .spon-mobile-page-card .volume-panel,
    body:not(.stage-mode) .spon-mobile-page-card .loop-mixer-panel,
    body:not(.stage-mode) .spon-mobile-page-card .fx-panel,
    body:not(.stage-mode) .spon-mobile-page-card .mini-status{
      display:block !important;
      visibility:visible !important;
      opacity:1 !important;
      position:relative !important;
      width:100% !important;
      max-width:100% !important;
      height:auto !important;
      overflow:visible !important;
    }

    body:not(.stage-mode) .spon-mobile-page-card .mini-status{
      display:flex !important;
      flex-wrap:wrap !important;
      justify-content:center !important;
      gap:7px !important;
    }

    #mobileMixerPageHost{
      display:flex !important;
      flex-direction:column !important;
      gap:12px !important;
      width:100% !important;
      min-width:0 !important;
    }

    #mobileMixerPageHost .volume-panel,
    #mobileMixerPageHost .loop-mixer-panel,
    #mobileMixerPageHost .fx-panel{
      margin:0 !important;
      padding:12px !important;
      border-radius:18px !important;
      background:linear-gradient(180deg,#0d1017,#07090e) !important;
      border:1px solid rgba(255,255,255,.12) !important;
      box-shadow:none !important;
    }

    #mobileMixerPageHost .fx-grid{
      display:grid !important;
      grid-template-columns:1fr !important;
      gap:9px !important;
      width:100% !important;
    }

    #mobileMixerPageHost .fx-control{
      display:block !important;
      width:100% !important;
      min-width:0 !important;
      padding:11px !important;
      border-radius:14px !important;
      background:#090c12 !important;
      border:1px solid rgba(255,255,255,.09) !important;
    }

    #mobileMixerPageHost .fx-control label{
      display:flex !important;
      justify-content:space-between !important;
      align-items:center !important;
      gap:8px !important;
      width:100% !important;
      margin-bottom:10px !important;
    }

    #mobileMixerPageHost input[type="range"]{
      display:block !important;
      -webkit-appearance:none !important;
      appearance:none !important;
      width:100% !important;
      max-width:100% !important;
      min-width:0 !important;
      height:8px !important;
      margin:4px 0 !important;
      padding:0 !important;
      border:0 !important;
      border-radius:999px !important;
      background:linear-gradient(90deg,var(--amber),rgba(255,255,255,.18)) !important;
      outline:none !important;
      opacity:1 !important;
      visibility:visible !important;
      touch-action:pan-x !important;
    }

    #mobileMixerPageHost input[type="range"]::-webkit-slider-thumb{
      -webkit-appearance:none !important;
      appearance:none !important;
      width:25px !important;
      height:25px !important;
      border-radius:50% !important;
      background:#fff2bd !important;
      border:3px solid var(--amber) !important;
      box-shadow:0 0 14px rgba(212,175,55,.45) !important;
    }

    #mobileMixerPageHost input[type="range"]::-moz-range-thumb{
      width:25px !important;
      height:25px !important;
      border-radius:50% !important;
      background:#fff2bd !important;
      border:3px solid var(--amber) !important;
      box-shadow:0 0 14px rgba(212,175,55,.45) !important;
    }

    #mobileMixerPageHost .volume-row{
      display:flex !important;
      align-items:center !important;
      gap:9px !important;
      width:100% !important;
    }

    #mobileMixerPageHost .volume-row .vol-slider{
      flex:1 1 auto !important;
      width:auto !important;
    }

    #mobileMixerPageHost .meter-wrap{
      display:flex !important;
      width:100% !important;
      min-height:62px !important;
    }

    #mobileMixerPageHost .fx-wide{
      grid-column:1 !important;
    }
  }