/* ============================================================================
   VOCAL-ENHANCER.CSS  —  AVH Studios real-time Vocal Enhancer
   ----------------------------------------------------------------------------
   Redesign v2 (Xvox-Pro-matched): preset-driven, 4 color-coded modules in a
   row, each with a live/reactive hero visualization + a preset selector + a
   handful of controls (vertical sliders + illuminated dials). Dark top half,
   modular-gray lower half, dot I/O meters along the bottom.
   ============================================================================ */

.ve-root{
  --bg:#050607; --panel:#0a0c0f; --panel-2:#101317; --inset:#070809;
  --line:#1d222b; --line-2:#262d38; --text:#eef2f8; --muted:#8b95a7; --muted-2:#5a6472;
  --gray-1:#272b32; --gray-2:#1d2027; --gray-line:#33383f;
  --dyn:#ff2e7e; --tone:#22d3ff; --space:#a56bff; --sfx:#ff9a2e;
  --accent:var(--tone);
  position:relative;width:100%;max-width:1360px;margin:0 auto;
  background:linear-gradient(180deg,#0c0e12,#070809);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  color:var(--text);
  font-family:"Inter","Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.ve-root *{box-sizing:border-box}

/* ------------------------------- TOP BAR --------------------------------- */
.ve-top{
  display:flex;align-items:center;gap:14px;padding:11px 14px;flex-wrap:wrap;
  background:linear-gradient(180deg,#12151a,#0c0e12);
  border-bottom:1px solid var(--line);position:relative;z-index:3;
}
.ve-brand{display:flex;align-items:center;gap:9px;min-width:210px}
.ve-brand-mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(145deg,#18202b,#0a0d11);border:1px solid #26303c;
  box-shadow:0 0 18px rgba(34,211,255,.2), inset 0 1px 0 rgba(255,255,255,.08)}
.ve-brand-mark svg{width:17px;height:17px}
.ve-brand-name{font-weight:800;letter-spacing:.6px;font-size:13.5px}
.ve-brand-name b{color:var(--tone)}
.ve-brand-pro{font-size:8.5px;font-weight:800;letter-spacing:1.4px;color:#04121a;
  background:linear-gradient(180deg,#5fe9ff,#22d3ff);padding:3px 6px;border-radius:5px;
  box-shadow:0 0 16px rgba(34,211,255,.6)}
.ve-preset-wrap{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-width:280px}
.ve-nav{width:27px;height:27px;border-radius:7px;border:1px solid var(--line);background:#0a0d11;
  color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.15s;padding:0}
.ve-nav:hover{color:#fff;border-color:#33405a}
.ve-nav svg{width:13px;height:13px}
.ve-preset{min-width:220px;height:31px;border-radius:8px;border:1px solid var(--line);
  background:linear-gradient(180deg,#0c0f13,#080a0d);color:#dbe4f2;font-size:12.5px;font-weight:600;
  letter-spacing:.4px;text-align:center;text-align-last:center;cursor:pointer;padding:0 8px;outline:none;
  appearance:none;-webkit-appearance:none;background-image:none}
.ve-preset:hover{border-color:#33405a}
.ve-preset option{background:#0c0f13;color:#dbe4f2}
.ve-add{width:27px;height:27px;border-radius:7px;border:1px dashed var(--line-2);background:transparent;
  color:var(--muted);display:grid;place-items:center;cursor:pointer;font-size:15px;line-height:1;padding:0}
.ve-top-right{display:flex;align-items:center;gap:7px;min-width:210px;justify-content:flex-end}
.ve-chip{height:29px;padding:0 11px;border-radius:8px;border:1px solid var(--line);background:#0a0d11;
  color:#c4cddc;font-size:10.5px;font-weight:700;letter-spacing:.7px;display:inline-flex;align-items:center;gap:6px;
  cursor:pointer;transition:.15s}
.ve-chip:hover{border-color:#33405a;color:#fff}
.ve-chip svg{width:13px;height:13px}
.ve-bypass{background:linear-gradient(180deg,#1d0e14,#140a0f);border-color:#4d1f2e;color:#ff8fb0}
.ve-bypass:hover{border-color:#ff2e7e;color:#fff;box-shadow:0 0 16px rgba(255,46,126,.4)}
.ve-bypass.on{background:linear-gradient(180deg,#ff2e7e,#c9145a);border-color:#ff2e7e;color:#fff;
  box-shadow:0 0 18px rgba(255,46,126,.6)}
.ve-led{width:7px;height:7px;border-radius:50%;background:#22d3ff;box-shadow:0 0 9px #22d3ff}
.ve-bypass.on .ve-led{background:#fff;box-shadow:0 0 9px #fff}

/* ------------------------------- BODY ------------------------------------ */
.ve-body{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);position:relative;z-index:1}

/* ------------------------------ MODULE ----------------------------------- */
.ve-mod{background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 5%, #0a0c0f) 0%, #08090c 30%);
  display:flex;flex-direction:column;position:relative;min-width:0}
.ve-mod::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.8;z-index:2}
.ve-mod.off{opacity:.5}
.ve-mod.off::before{opacity:.2}

.ve-mod-head{display:flex;align-items:center;gap:8px;padding:10px 12px 7px}
.ve-mod-power{width:13px;height:13px;border-radius:50%;flex:none;cursor:pointer;border:none;padding:0;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb,var(--accent) 90%,#fff), var(--accent));
  box-shadow:0 0 12px var(--accent), 0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent)}
.ve-mod-power.off{background:#2a2f38;box-shadow:none}
.ve-mod-name{font-size:12px;font-weight:800;letter-spacing:1.6px;color:var(--accent);
  text-shadow:0 0 16px color-mix(in srgb,var(--accent) 55%,transparent)}
.ve-mod-gear{margin-left:auto;color:var(--muted-2);cursor:pointer;display:grid;place-items:center;background:none;border:none;padding:0}
.ve-mod-gear svg{width:14px;height:14px}
.ve-mod-time{position:absolute;top:11px;right:34px;font-size:9px;color:var(--muted-2);font-variant-numeric:tabular-nums;pointer-events:none}

/* hero visualization */
.ve-mod-hero{position:relative;display:flex;align-items:center;justify-content:center;padding:2px 26px;height:112px}
.ve-viz{width:100%;height:100%;display:block}
.ve-hero-nav{position:absolute;top:50%;transform:translateY(-50%);width:20px;height:20px;border:none;background:transparent;
  color:var(--muted-2);cursor:pointer;display:grid;place-items:center;padding:0}
.ve-hero-nav.l{left:4px}.ve-hero-nav.r{right:4px}
.ve-hero-nav:hover{color:#fff}
.ve-hero-nav svg{width:13px;height:13px}

.ve-mod-preset{display:flex;flex-direction:column;align-items:center;gap:6px;padding:2px 8px 10px}
.ve-pname{font-size:11.5px;font-weight:800;letter-spacing:1.6px;color:#dfe6f1;text-align:center}
.ve-dots{display:flex;gap:5px}
.ve-dots i{width:5px;height:5px;border-radius:50%;background:#2a313c}
.ve-dots i.on{background:var(--accent);box-shadow:0 0 8px var(--accent)}

/* controls area — modular gray plate */
.ve-panel{flex:1;margin:0 8px 8px;border:1px solid var(--gray-line);border-radius:11px;padding:12px;
  display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(180deg,var(--gray-1),var(--gray-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.45)}
.ve-block{display:flex;flex-direction:column;gap:8px}
.ve-block-cap{font-size:8px;letter-spacing:1.5px;color:var(--muted-2);font-weight:800;display:flex;align-items:center;gap:6px}
.ve-block-cap::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.12),transparent)}
.ve-row{display:flex;align-items:flex-end;justify-content:space-around;gap:8px;flex-wrap:wrap}
.ve-row.two{justify-content:center;gap:22px}

/* ------------------------------- DIAL ------------------------------------ */
.ve-knob{width:66px;display:flex;flex-direction:column;align-items:center;gap:5px;user-select:none;outline:none;cursor:grab}
.ve-knob.dragging{cursor:grabbing}
.ve-knob svg{display:block}
.ve-knob-track{stroke:#2a2f38}
.ve-knob-val{stroke:var(--accent);filter:drop-shadow(0 0 4px var(--accent))}
.ve-knob-body{fill:url(#ve-knob-body-g);stroke:rgba(0,0,0,.5);stroke-width:1}
.ve-knob-ptr{stroke:#fff;filter:drop-shadow(0 0 5px rgba(255,255,255,.9))}
.ve-knob-readout{font-size:11.5px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.ve-knob-label{font-size:8px;letter-spacing:1.2px;color:var(--muted-2);font-weight:800;text-transform:uppercase}
.ve-knob-big{width:96px}
.ve-knob-big .ve-knob-readout{font-size:14px}
.ve-knob:focus-visible{filter:drop-shadow(0 0 6px var(--accent))}

/* ------------------------------- SLIDER ---------------------------------- */
.ve-slider{width:42px;display:flex;flex-direction:column;align-items:center;gap:6px;user-select:none;outline:none;cursor:ns-resize}
.ve-slider-track{position:relative;width:9px;height:96px;border-radius:6px;
  background:linear-gradient(180deg,#040507,#0b0d11);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), inset 0 3px 8px rgba(0,0,0,.85)}
.ve-slider-fill{position:absolute;left:0;right:0;bottom:0;height:calc(var(--val,0) * 100%);border-radius:6px;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 40%,#0b0d11));
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent)}
.ve-slider-cap{position:absolute;left:50%;bottom:calc(var(--val,0) * 100%);transform:translate(-50%,50%);
  width:23px;height:12px;border-radius:4px;background:linear-gradient(180deg,#454c57,#1c2129 55%,#111418);
  box-shadow:0 3px 6px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px rgba(0,0,0,.6)}
.ve-slider-cap::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;transform:translateY(-50%);
  border-radius:2px;background:var(--accent);box-shadow:0 0 7px var(--accent)}
.ve-slider-readout{font-size:10px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.ve-slider-label{font-size:8px;letter-spacing:1.1px;color:var(--muted-2);font-weight:800;text-transform:uppercase}
.ve-slider:focus-visible .ve-slider-track{box-shadow:0 0 0 2px var(--accent)}

/* ------------------------------ ANALYZER --------------------------------- */
.ve-analyzer{position:relative;height:64px;border-radius:8px;background:linear-gradient(180deg,#060709,#0a0c10);
  border:1px solid var(--line);overflow:hidden}
.ve-analyzer canvas{position:absolute;inset:0;width:100%;height:100%}

/* ------------------------------ READOUTS --------------------------------- */
.ve-stat{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--inset);border:1px solid var(--line);border-radius:7px;padding:5px 9px}
.ve-stat .k{font-size:8px;letter-spacing:1px;color:var(--muted-2);font-weight:800}
.ve-stat .v{font-size:11px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.ve-stat .v em{color:var(--accent);font-style:normal}
.ve-mini-meter{height:6px;border-radius:4px;background:#040507;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.ve-mini-meter i{display:block;height:100%;width:var(--lvl,0%);background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 40%,#fff));
  box-shadow:0 0 8px var(--accent);transition:width .06s linear}

/* ------------------------------ MODE SELECT ------------------------------ */
.ve-mode{width:100%;height:28px;border-radius:7px;border:1px solid var(--line);
  background:linear-gradient(180deg,#0c0f13,#080a0d);color:#dbe4f2;font-size:11px;font-weight:700;
  letter-spacing:.5px;text-align:center;text-align-last:center;cursor:pointer;padding:0 6px;outline:none;
  appearance:none;-webkit-appearance:none}
.ve-mode:hover{border-color:#33405a}
.ve-mode option{background:#0c0f13;color:#dbe4f2}

/* ------------------------------ FOOTER ----------------------------------- */
.ve-foot{display:flex;align-items:center;gap:14px;padding:10px 14px;flex-wrap:wrap;
  background:linear-gradient(180deg,#0c0e12,#08090c);border-top:1px solid var(--line);position:relative;z-index:3}
.ve-io{display:flex;align-items:center;gap:10px;flex:1;min-width:220px}
.ve-io.right{justify-content:flex-end}
.ve-io-label{font-size:9px;letter-spacing:1.6px;color:var(--muted-2);font-weight:800}
.ve-io-db{font-size:10.5px;font-weight:700;color:#cfd8e6;font-variant-numeric:tabular-nums;min-width:52px}
.ve-io.right .ve-io-db{text-align:right}
.ve-dotmeter{display:flex;gap:3px;flex:1;max-width:300px}
.ve-dotmeter i{flex:1;height:10px;border-radius:2px;background:#12161c;transition:background .05s linear}
.ve-dotmeter i.on{background:#22d3ff;box-shadow:0 0 7px rgba(34,211,255,.7)}
.ve-dotmeter i.on.w{background:#e8e14a;box-shadow:0 0 7px rgba(232,225,74,.7)}
.ve-dotmeter i.on.h{background:#ff4d4d;box-shadow:0 0 7px rgba(255,77,77,.7)}
.ve-center{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:140px}
.ve-center .nm{font-size:10.5px;font-weight:800;letter-spacing:3px;color:#aab4c6}
.ve-center .sub{font-size:7.5px;letter-spacing:2px;color:var(--muted-2)}

/* ------------------------------ STATES ----------------------------------- */
.ve-root.ve-bypassed .ve-body{opacity:.45;filter:grayscale(.35)}
.ve-root.ve-bypassed .ve-mod::before{opacity:.15}

/* ------------------------------ RESPONSIVE ------------------------------- */
@media (max-width:1100px){
  .ve-body{grid-template-columns:repeat(2,1fr)}
  .ve-brand,.ve-top-right{min-width:0}
}
@media (max-width:640px){
  .ve-body{grid-template-columns:1fr}
  .ve-top{gap:8px}
  .ve-preset-wrap{order:3;flex-basis:100%;justify-content:space-between}
  .ve-preset{flex:1;min-width:0}
}