@import url('fonts.css');

/* =========================================================================
   OPERATOR CONTROL PANEL
   Dark, dense, keyboard-first. Meant to sit on a second monitor during a
   live show, so nothing here is subtle: what is on air is always obvious.
   ========================================================================= */

:root{
  --bg:#0b0d0c; --panel:#141716; --panel-2:#1b201e; --line:#2a312e;
  --ink:#e8ece9; --muted:#8b9691;
  --green:#00744D; --green-lt:#12a06f;
  --yellow:#F5C400; --red:#ff3b3b; --crimson:#B3261E;
}

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Poppins',system-ui,sans-serif; font-size:14px;
}
h1,h2,h3{ margin:0; font-weight:700; }

/* ---- Token gate ---- */
.gate{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,8,7,.97);
}
.gate.hide{ display:none; }
.gate form{
  width:340px;padding:28px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line);
}
.gate h2{ font-size:1rem;letter-spacing:2px;color:var(--yellow);margin-bottom:6px; }
.gate p{ color:var(--muted);font-size:.78rem;margin:0 0 16px; }
.gate .err{ color:var(--red);font-size:.75rem;min-height:16px;margin-top:8px; }

/* ---- Chrome ---- */
header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:16px;
  padding:12px 20px;
  background:linear-gradient(180deg,#111413,#0d100f);
  border-bottom:1px solid var(--line);
}
header h1{ font-size:.92rem;letter-spacing:3px;color:var(--yellow); }
header .sub{ color:var(--muted);font-size:.72rem;letter-spacing:1px; }
.spacer{ flex:1; }

.conn{
  display:flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:999px;
  background:#0f1211;border:1px solid var(--line);
  font-size:.7rem;font-weight:700;letter-spacing:1.5px;
}
.conn i{ width:9px;height:9px;border-radius:50%;background:#666; }
.conn.live i{ background:#3fd6a0; }
.conn.dead i{ background:var(--red); }

.onair{
  padding:5px 14px;border-radius:999px;
  font-size:.7rem;font-weight:800;letter-spacing:2px;
  background:#1a1210;border:1px solid var(--line);color:var(--muted);
}
.onair.hot{ background:rgba(179,38,30,.25);border-color:var(--red);color:#ff9a93; }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:16px;padding:16px 20px 60px;
  max-width:1600px;
}

.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px 16px 18px;
}
.panel.wide{ grid-column:1 / -1; }
.panel h3{
  font-size:.74rem;letter-spacing:2.4px;color:var(--yellow);
  margin-bottom:12px;display:flex;align-items:center;gap:10px;
}
.panel h3 .hot{
  padding:2px 8px;border-radius:999px;
  background:rgba(179,38,30,.3);border:1px solid var(--red);
  color:#ff9a93;font-size:.6rem;letter-spacing:1.5px;
}
.panel h3 .hot.off{ display:none; }
.panel h3 .key{
  margin-left:auto;color:var(--muted);font-size:.6rem;letter-spacing:1px;font-weight:600;
}

label{ display:block;color:var(--muted);font-size:.68rem;letter-spacing:1.4px;margin:10px 0 5px;font-weight:600; }
label:first-of-type{ margin-top:0; }

input[type=text], textarea{
  width:100%;padding:9px 11px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);font-family:inherit;font-size:.86rem;
  resize:vertical;
}
input[type=text]:focus, textarea:focus{ outline:none;border-color:var(--green-lt); }
textarea{ min-height:96px;line-height:1.5; }

/* Urdu fields render in the real broadcast face so the operator sees
   roughly what will go to air. */
.ur-field{
  direction:rtl;
  font-family:'Noto Nastaliq Urdu',serif;
  line-height:2.1;font-size:.95rem;
}

.row{ display:flex;gap:8px;align-items:center;flex-wrap:wrap; }
.row.tight{ gap:6px; }

button{
  padding:9px 15px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--ink);
  font-family:inherit;font-size:.76rem;font-weight:700;letter-spacing:1.1px;
  cursor:pointer;transition:filter .15s ease,border-color .15s ease;
}
button:hover{ filter:brightness(1.35); }
button.primary{ background:var(--green);border-color:#0a9668;color:#fff; }
button.danger{  background:var(--crimson);border-color:#d8382e;color:#fff; }
button.ghost{   background:transparent;color:var(--muted); }
button.sm{ padding:6px 10px;font-size:.68rem; }
button.on{ background:var(--yellow);border-color:var(--yellow);color:#141414; }

.sliderrow{ display:flex;align-items:center;gap:10px;margin-top:8px; }
.sliderrow span:first-child{ width:62px;color:var(--muted);font-size:.7rem;font-weight:600; }
.sliderrow input[type=range]{ flex:1;accent-color:var(--yellow); }
.sliderrow .val{ width:34px;text-align:right;color:var(--yellow);font-weight:700;font-size:.74rem; }

.presets{ display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px; }

/* ---- Q&A queue ---- */
.queue{ margin-top:12px;display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto; }
.qitem{
  padding:10px 12px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--line);
}
.qitem.airing{ border-color:var(--yellow);background:rgba(245,196,0,.08); }
.qitem .who{ color:var(--yellow);font-weight:700;font-size:.78rem;margin-bottom:3px; }
.qitem .txt{ color:var(--ink);font-size:.8rem;line-height:1.45;margin-bottom:8px;word-break:break-word; }
.qitem .txt.ur{ direction:rtl;font-family:'Noto Nastaliq Urdu',serif;line-height:2; }
.qempty{ color:var(--muted);font-size:.76rem;padding:14px 0;text-align:center; }

.hint{ color:var(--muted);font-size:.66rem;line-height:1.6;margin-top:10px; }
.hint code{
  background:var(--panel-2);border:1px solid var(--line);
  padding:1px 5px;border-radius:4px;color:var(--ink);font-size:.64rem;
}

.urlbox{
  display:flex;gap:8px;align-items:center;margin-top:8px;
}
.urlbox input{ font-size:.72rem;font-family:ui-monospace,monospace; }