/* ============================================================
   PARSHA — Premium Control Room Design System
   A broadcast-grade dark UI. Tactile, dense, restrained.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root{
  /* ---- Surfaces (deep graphite, faint cool tint) ---- */
  --bg-0:#06080c;          /* app void */
  --bg-1:#0a0d13;          /* base panel */
  --bg-2:#0f131b;          /* raised panel */
  --bg-3:#141925;          /* control well */
  --bg-4:#1b2230;          /* hover / active surface */
  --bg-5:#222b3b;          /* pressed / selected */

  --line:#222a37;          /* hairline */
  --line-2:#2c3543;        /* stronger divider */
  --line-3:#3a4555;        /* control edge */

  /* ---- Ink ---- */
  --ink-0:#f3f6fa;
  --ink-1:#aab4c2;
  --ink-2:#6e7889;
  --ink-3:#49525f;

  /* ---- Signal colors ---- */
  --green:#2ee6a0;         /* brand / preview / ready */
  --green-2:#19c98a;
  --green-deep:#0d7d57;
  --green-glow:rgba(46,230,160,.35);

  --red:#ff4d4d;           /* on-air / record / program */
  --red-2:#e23b3b;
  --red-deep:#7e1d1d;
  --red-glow:rgba(255,77,77,.4);

  --amber:#ffb02e;         /* active selection (broadcast) */
  --amber-2:#f59e0b;
  --amber-glow:rgba(255,176,46,.35);

  --blue:#3d8bff;          /* info / deck A */
  --blue-2:#2f6fe0;
  --blue-glow:rgba(61,139,255,.35);

  /* hot-cue palette (DJ) */
  --cue-red:#ff5364;
  --cue-orange:#ff8f3f;
  --cue-yellow:#ffcc3f;
  --cue-green:#46d98a;
  --cue-cyan:#3fd6e0;
  --cue-blue:#4d8dff;
  --cue-violet:#9b6bff;
  --cue-magenta:#ff5fbf;

  --font-ui:'Archivo',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --r-sm:4px; --r-md:7px; --r-lg:11px; --r-xl:16px;

  --shadow-panel:0 18px 40px -22px rgba(0,0,0,.85);
  --hl-top:inset 0 1px 0 rgba(255,255,255,.045);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg-0);
  color:var(--ink-0);
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--green-glow)}

/* faint engineered grid backdrop for app void */
.app-void{
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(61,139,255,.06), transparent 60%),
    radial-gradient(1000px 600px at 0% 110%, rgba(46,230,160,.05), transparent 55%),
    var(--bg-0);
}

/* ---------------- Scrollbars ---------------- */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--bg-4);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--bg-5)}
*::-webkit-scrollbar-track{background:transparent}

/* ---------------- Panels ---------------- */
.panel{
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--hl-top),var(--shadow-panel);
}
.panel-flat{
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.well{
  background:linear-gradient(180deg,#080b10,#0c1017);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.55);
}
.hr{height:1px;background:var(--line);border:0;margin:0}

/* ---------------- Labels / type ---------------- */
.seclabel{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);
}
.kicker{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.tc{font-family:var(--font-mono);font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* ---------------- Buttons ---------------- */
.btn{
  font-family:var(--font-ui);font-size:13px;font-weight:600;letter-spacing:.01em;
  color:var(--ink-0);
  background:linear-gradient(180deg,#1a2230,#11161f);
  border:1px solid var(--line-3);
  border-radius:var(--r-sm);
  padding:8px 14px;cursor:pointer;
  box-shadow:var(--hl-top),0 1px 2px rgba(0,0,0,.4);
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  transition:.12s ease;white-space:nowrap;
}
.btn:hover{background:linear-gradient(180deg,#212b3b,#161d28);border-color:var(--line-3)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-xs{padding:3px 8px;font-size:11px;border-radius:3px}

.btn-primary{
  background:linear-gradient(180deg,#36f0ad,#13b985);
  border-color:#0fae7b;color:#04140e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 14px -4px var(--green-glow);
}
.btn-primary:hover{background:linear-gradient(180deg,#48f5b8,#16c690)}

.btn-danger{
  background:linear-gradient(180deg,#ff5c5c,#dc3535);
  border-color:#c52d2d;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 14px -4px var(--red-glow);
}
.btn-danger:hover{background:linear-gradient(180deg,#ff6f6f,#e64040)}

.btn-amber{
  background:linear-gradient(180deg,#ffc05a,#f3990d);
  border-color:#d9870a;color:#241500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 14px -4px var(--amber-glow);
}
.btn-blue{
  background:linear-gradient(180deg,#4d97ff,#2f6fe0);
  border-color:#2a63cc;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 14px -4px var(--blue-glow);
}
.btn-ghost{background:transparent;border-color:var(--line-2);box-shadow:none;color:var(--ink-1)}
.btn-ghost:hover{background:var(--bg-3);color:var(--ink-0)}
.btn.is-active{
  background:linear-gradient(180deg,#2b3344,#1a2230);
  border-color:var(--amber);color:var(--amber);
  box-shadow:inset 0 0 0 1px rgba(255,176,46,.3),0 0 14px -4px var(--amber-glow);
}

/* ---------------- Badges / chips ---------------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:3px 9px;border-radius:999px;border:1px solid var(--line-2);
  color:var(--ink-1);background:var(--bg-3);text-transform:uppercase;
}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-2)}
.badge-live{color:#fff;background:linear-gradient(180deg,#ff5c5c,#d63a3a);border-color:#c52d2d;box-shadow:0 0 12px -2px var(--red-glow)}
.badge-live .dot{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25);animation:pulse 1.4s infinite}
.badge-on{color:#06140e;background:linear-gradient(180deg,#34eea7,#15c389);border-color:#10a874}
.badge-on .dot{background:#04140e}
.badge-amber{color:#241500;background:linear-gradient(180deg,#ffc15c,#f0980b);border-color:#d9870a}
.badge-idle{color:var(--ink-2)}
.badge-idle .dot{background:var(--ink-3)}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* status dot */
.s-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.s-on{background:var(--green);box-shadow:0 0 9px 1px var(--green-glow)}
.s-rec{background:var(--red);box-shadow:0 0 9px 1px var(--red-glow);animation:pulse 1.3s infinite}
.s-off{background:var(--ink-3)}

/* ---------------- VU meter ---------------- */
.vu{display:flex;flex-direction:column;gap:2px;width:9px}
.vu .seg{height:5px;border-radius:1px;background:#1a2230;opacity:.5}
.vu .seg.on{opacity:1}
.vu .g{background:linear-gradient(180deg,#37e59a,#1fae74)}
.vu .y{background:linear-gradient(180deg,#ffd23f,#f0a90b)}
.vu .r{background:linear-gradient(180deg,#ff6a5a,#e23b3b)}

/* ---------------- Knob ---------------- */
.knob{
  width:46px;height:46px;border-radius:50%;position:relative;
  background:
    radial-gradient(circle at 50% 38%,#2a3343,#11161f 70%),
    conic-gradient(from 220deg,#0c1017,#1b2230 50%,#0c1017);
  border:1px solid var(--line-3);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6),var(--hl-top),0 3px 8px -3px rgba(0,0,0,.7);
}
.knob::after{ /* indicator */
  content:"";position:absolute;left:50%;top:6px;width:2px;height:13px;border-radius:2px;
  background:var(--green);transform:translateX(-50%);box-shadow:0 0 7px var(--green-glow);
}
.knob.blue::after{background:var(--blue);box-shadow:0 0 7px var(--blue-glow)}
.knob.amber::after{background:var(--amber);box-shadow:0 0 7px var(--amber-glow)}

/* ---------------- Faders ---------------- */
.fader{position:relative;width:34px;height:130px;display:flex;justify-content:center}
.fader .track{width:6px;height:100%;border-radius:6px;background:linear-gradient(180deg,#06090d,#10141c);box-shadow:inset 0 0 0 1px var(--line),inset 0 2px 6px rgba(0,0,0,.6)}
.fader .cap{position:absolute;left:50%;transform:translateX(-50%);width:26px;height:15px;border-radius:3px;
  background:linear-gradient(180deg,#e9eef5,#aab4c2);border:1px solid #8b95a4;
  box-shadow:0 2px 5px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.8);}
.fader .cap::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:2px;background:#5b6675;transform:translateY(-50%)}

/* horizontal slider (EQ) */
.slider{position:relative;height:18px;display:flex;align-items:center}
.slider .rail{height:4px;width:100%;border-radius:4px;background:#10141c;box-shadow:inset 0 0 0 1px var(--line)}
.slider .fill{position:absolute;left:0;top:50%;transform:translateY(-50%);height:4px;border-radius:4px;background:var(--green)}
.slider .grip{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff,#c3ccd8);border:1px solid #95a0ae;box-shadow:0 2px 4px rgba(0,0,0,.6)}

/* ---------------- Monitor frame ---------------- */
.monitor{position:relative;border-radius:var(--r-md);overflow:hidden;background:#000;border:1px solid var(--line-2)}
.monitor.preview{box-shadow:inset 0 0 0 2px rgba(46,230,160,.55),0 0 0 1px rgba(46,230,160,.18),0 18px 40px -20px #000}
.monitor.program{box-shadow:inset 0 0 0 2px rgba(255,77,77,.6),0 0 0 1px rgba(255,77,77,.2),0 18px 40px -20px #000}
.mon-tag{position:absolute;top:9px;left:10px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 8px;border-radius:4px;background:rgba(0,0,0,.5);backdrop-filter:blur(4px)}
.mon-tag.preview{color:var(--green)}
.mon-tag.program{color:#fff;background:linear-gradient(180deg,#ff5c5c,#d63a3a)}
.mon-corner{position:absolute;top:9px;right:10px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-1)}

/* ---------------- “Video content” backdrops (CSS, no photos) ---------------- */
.feed{position:absolute;inset:0}
.feed-bars{background:linear-gradient(90deg,#c9c9c9 0 14.28%,#cfcf3a 0 28.56%,#3acfcf 0 42.84%,#3acf4a 0 57.12%,#cf3acf 0 71.4%,#cf3a3a 0 85.68%,#3a4acf 0 100%);opacity:.92}
.feed-bars::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(90deg,#0b1f4a 0 60%,#111 0 75%,#c9c9c9 0 100%)}
.feed-stage{background:
  radial-gradient(60% 80% at 50% 8%,rgba(61,139,255,.55),transparent 60%),
  radial-gradient(45% 70% at 22% 12%,rgba(46,230,160,.4),transparent 55%),
  radial-gradient(45% 70% at 78% 12%,rgba(255,95,191,.4),transparent 55%),
  linear-gradient(180deg,#0a1430,#05070e 70%);}
.feed-stage::after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(100deg,transparent 0 38px,rgba(255,255,255,.025) 38px 40px);}
.feed-grid{background:
  linear-gradient(180deg,#0b1020,#070a12),
  repeating-linear-gradient(90deg,rgba(61,139,255,.08) 0 1px,transparent 1px 44px),
  repeating-linear-gradient(0deg,rgba(61,139,255,.08) 0 1px,transparent 1px 44px);}
.feed-vj{background:
  radial-gradient(40% 60% at 30% 40%,rgba(155,107,255,.85),transparent 60%),
  radial-gradient(45% 65% at 72% 60%,rgba(63,214,224,.8),transparent 60%),
  radial-gradient(50% 70% at 55% 25%,rgba(255,95,191,.6),transparent 60%),
  #05060c;filter:saturate(1.1)}
.feed-signage{background:linear-gradient(135deg,#0d7d57,#0a3d6e)}

/* lower-third */
.lower3{position:absolute;left:14px;bottom:14px;right:auto;display:flex;align-items:stretch;border-radius:5px;overflow:hidden;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.7)}
.lower3 .bar{width:5px;background:var(--green)}
.lower3 .body{background:linear-gradient(180deg,rgba(8,12,20,.92),rgba(8,12,20,.82));backdrop-filter:blur(6px);padding:7px 14px 8px}
.lower3 .t{font-weight:700;font-size:15px;letter-spacing:.01em}
.lower3 .s{font-size:11px;color:var(--ink-1);letter-spacing:.03em}

/* sidebar */
.nav-item{
  display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:var(--r-md);
  color:var(--ink-1);font-weight:500;font-size:14.5px;cursor:pointer;border:1px solid transparent;
  transition:.12s;position:relative;
}
.nav-item:hover{background:var(--bg-3);color:var(--ink-0)}
.nav-item.active{background:linear-gradient(180deg,var(--bg-4),var(--bg-3));color:#fff;border-color:var(--line-2);box-shadow:var(--hl-top)}
.nav-item.active::before{content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--green);box-shadow:0 0 10px var(--green-glow)}
.nav-ico{width:18px;height:18px;flex:0 0 18px;color:currentColor;opacity:.85}

/* inputs */
.field{
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--ink-0);font-family:var(--font-ui);font-size:13px;padding:9px 12px;width:100%;
}
.field::placeholder{color:var(--ink-3)}
.field:focus{outline:none;border-color:var(--green-2);box-shadow:0 0 0 3px var(--green-glow)}
.select{appearance:none;background-image:linear-gradient(180deg,var(--bg-3),var(--bg-2))}

/* utility */
.row{display:flex;align-items:center}
.col{display:flex;flex-direction:column}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}
.grow{flex:1}.mauto{margin-left:auto}
.muted{color:var(--ink-2)}.faint{color:var(--ink-3)}.sec{color:var(--ink-1)}
.center{display:flex;align-items:center;justify-content:center}