:root{
    --bg:#0d1014; --panel:#161b22; --panel2:#1d242e; --panel3:#222b36; --line:#2b333f;
    --text:#e6edf3; --muted:#8a96a6; --accent:#4fc3f7; --accent2:#ffb74d;
    --good:#66bb6a; --warn:#ffca28; --bad:#ef5350; --purple:#b388ff;
  }
  *{box-sizing:border-box}
  body{margin:0; background:var(--bg); color:var(--text);
    font:13.5px/1.45 system-ui,Segoe UI,Roboto,Arial,sans-serif}
  header{padding:14px 20px; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
  h1{margin:0; font-size:17px; font-weight:650}
  header .tag{color:var(--muted); font-size:12px}
  .wrap{max-width:1180px; margin:0 auto; padding:18px}
  .panel{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:16px}
  .row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
  .between{justify-content:space-between}
  .drop{border:1.5px dashed var(--line); border-radius:10px; padding:16px 20px; text-align:center;
    color:var(--muted); cursor:pointer; background:var(--panel2); transition:.15s; flex:1; min-width:240px}
  .drop.hot{border-color:var(--accent); color:var(--text); background:#1b2530}
  .drop b{color:var(--text)}
  button{background:var(--panel2); color:var(--text); border:1px solid var(--line);
    padding:8px 14px; border-radius:8px; font-size:13.5px; cursor:pointer; transition:.12s}
  button:hover:not(:disabled){border-color:var(--accent); color:#fff}
  button:disabled{opacity:.4; cursor:not-allowed}
  button.primary{background:var(--accent); color:#06222e; border-color:var(--accent); font-weight:650}
  button.icon{padding:6px 9px; font-size:13px; line-height:1}
  /* inline SVG glyphs (power / play / pause) — monochrome & consistent on every platform */
  .i{width:1em; height:1em; display:inline-block; vertical-align:-0.13em; flex:none}
  .i.pw{width:1.15em; height:1.15em; vertical-align:-0.18em}
  .seek{display:flex; align-items:center; gap:12px; margin-top:14px}
  .seek input{flex:1; accent-color:var(--accent)}
  .time{color:var(--muted); font-variant-numeric:tabular-nums; font-size:12.5px; min-width:96px; text-align:right}
  .small{color:var(--muted); font-size:12px}
  .filename{color:var(--accent); font-weight:600}

  .palette{display:flex; gap:8px; flex-wrap:wrap}
  .palette button{background:var(--panel3)}
  .palette button b{color:var(--accent); font-weight:700; margin-right:5px}

  /* effect cards */
  #chain{display:flex; flex-direction:column; gap:0}
  .arrow{align-self:center; color:var(--line); font-size:18px; line-height:1; margin:-2px 0}
  .card{background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden}
  .card.bypassed{opacity:.55}
  .card.bypassed .body{filter:grayscale(.6)}
  .chead{display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--panel2); border-bottom:1px solid var(--line)}
  .chead .num{color:var(--muted); font-variant-numeric:tabular-nums; font-size:12px; min-width:18px}
  .chead .title{font-weight:650}
  .chead .title b{color:var(--accent2)}
  .chead .sp{flex:1}
  .byp{font-size:12px}
  .byp.on{background:var(--accent2); color:#3a2400; border-color:var(--accent2); font-weight:650}
  .body{padding:14px}
  .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px 18px}
  label.ctrl{display:block; margin:0}
  .ctrl .top{display:flex; justify-content:space-between; margin-bottom:5px; font-size:12.5px}
  .ctrl .name{color:var(--text)}
  .ctrl .val{color:var(--accent); font-variant-numeric:tabular-nums}
  .ctrl input[type=range]{width:100%; accent-color:var(--accent)}
  canvas{display:block; width:100%; background:#0a0d12; border:1px solid var(--line); border-radius:8px}

  .meterbar{height:9px; background:#0a0d12; border:1px solid var(--line); border-radius:6px; overflow:hidden}
  .meterbar > div{height:100%; width:0%; transition:width .04s}
  .gr > div{background:var(--warn); margin-left:auto}     /* gain reduction grows from right */
  .lvl > div{background:linear-gradient(90deg,var(--good) 60%,var(--warn) 82%,var(--bad))}
  .metrow{display:flex; align-items:center; gap:8px; margin-top:6px}
  .metrow span{font-size:11px; color:var(--muted); width:14px}
  .metrow .db{width:54px; text-align:right; font-variant-numeric:tabular-nums}

  .cols{display:grid; grid-template-columns:1fr 320px; gap:16px}
  @media(max-width:860px){.cols{grid-template-columns:1fr}}
  .sub{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.09em; margin:0 0 10px}
  kbd{background:var(--panel2); border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:1px 6px; font-size:11.5px}
  .empty{color:var(--muted); text-align:center; padding:26px; border:1.5px dashed var(--line); border-radius:12px}

  /* EQ band columns + analyzer toolbar */
  .eqbar{display:flex; gap:8px; align-items:center; margin-bottom:6px}
  .eqbar .lbl{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em}
  .eqbar button.on{background:var(--accent); color:#06222e; border-color:var(--accent); font-weight:650}
  .eqcols{display:grid; grid-template-columns:repeat(5,1fr); gap:12px 14px; margin-top:14px}
  @media(max-width:780px){.eqcols{grid-template-columns:repeat(2,1fr)}}
  .eqcol{display:flex; flex-direction:column; gap:11px}
  .eqcol.off{opacity:.5}
  .eqcolh{display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--line); padding-bottom:6px}
  .eqcolh .bn{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em}
  .bandbtn{padding:1px 6px; font-size:10px; line-height:1.5; border-radius:5px}
  .bandbtn.on{background:var(--accent); color:#06222e; border-color:var(--accent); font-weight:700}

  /* graph-left / controls-right layout */
  .fxrow{display:flex; gap:18px; flex-wrap:wrap}
  .fxrow .left{flex:0 0 auto}
  .fxrow .right{flex:1; min-width:200px}
  .unitbtn{padding:0 6px; font-size:10px; border-radius:5px}

  /* graphic EQ vertical faders */
  .geqrow{display:flex; gap:4px; justify-content:space-between; margin-top:14px}
  .geqband{display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; min-width:0}
  .geqval{font-size:10px; color:var(--accent); font-variant-numeric:tabular-nums; height:12px}
  .geqlab{font-size:10px; color:var(--muted)}
  input[type=range].vert{ writing-mode:vertical-lr; direction:rtl; -webkit-appearance:slider-vertical; width:22px; height:110px; accent-color:var(--accent); cursor:ns-resize}
  .geqrow.compact{gap:2px}
  .geqrow.compact .geqlab{font-size:8px}
  input[type=range].vert.c{ width:12px; height:96px }