/* ══════════════════════════════════════════════════════════
   KHABARINO // NEWS OPS — tactical HUD theme
   فونت: Rubik (embedded, arabic + latin)
   ══════════════════════════════════════════════════════════ */
:root{
  --bg:#04080b;
  --bg-2:#061218;
  --panel:#07161d;
  --panel-2:#0a1f28;
  --line:#12414f;
  --line-2:#1b5f73;
  --cyan:#35e0ff;
  --cyan-dim:#1b9fbb;
  --cyan-dark:#0d5c71;
  --amber:#ffb020;
  --red:#ff4356;
  --green:#38ff9c;
  --txt:#c9eef7;
  --txt-dim:#6f9db0;
  --txt-mute:#40697b;
  --mono:"Rubik",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0;min-height:100%}
body{
  background:
    radial-gradient(1200px 700px at 50% -10%, #0a2b36 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 100%, #07222b 0%, transparent 55%),
    var(--bg);
  color:var(--txt);
  font-family:"Rubik",system-ui,sans-serif;
  font-size:14px;
  overflow-x:hidden;
}

/* ── overlays ── */
.scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:90;
  background:repeating-linear-gradient(180deg, rgba(53,224,255,.045) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen;opacity:.55;
}
.vignette{
  position:fixed;inset:0;pointer-events:none;z-index:89;
  background:radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.75) 100%);
}

/* ── header ── */
.hud-head{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:12px 20px 10px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(6,22,29,.96), rgba(4,12,16,.85));
  position:sticky;top:0;z-index:60;backdrop-filter:blur(6px);
}
.head-left{display:flex;align-items:center;gap:14px}
.sigil{width:44px;height:44px;flex:0 0 auto;filter:drop-shadow(0 0 8px rgba(53,224,255,.55))}
.sigil svg{width:100%;height:100%;animation:sigil-spin 24s linear infinite}
@keyframes sigil-spin{to{transform:rotate(360deg)}}
.sys{font-size:15px;font-weight:800;letter-spacing:.14em;color:#dff8ff;text-shadow:0 0 12px rgba(53,224,255,.4)}
.sys .dim{color:var(--cyan-dark)}
.sub{font-size:11.5px;color:var(--txt-dim);margin-top:4px;letter-spacing:.04em}
.blink{color:var(--green);animation:blink 1.6s steps(2,end) infinite}
@keyframes blink{50%{opacity:.25}}
.head-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.clockbox{text-align:center;min-width:96px}
.clock{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:.12em;color:var(--cyan);
  text-shadow:0 0 14px rgba(53,224,255,.5);font-variant-numeric:tabular-nums}
.clock.dim2{color:var(--cyan-dim);font-size:16px;text-shadow:none}
.clocksub{font-size:9.5px;letter-spacing:.22em;color:var(--txt-mute);margin-top:2px}
.statlights{display:flex;align-items:center;gap:8px;padding-inline-start:14px;border-inline-start:1px solid var(--line)}
.lamp{width:9px;height:9px;border-radius:50%;display:inline-block}
.lamp.ok{background:var(--green);box-shadow:0 0 10px var(--green);animation:blink 2.4s infinite}
.lamp.warn{background:var(--amber);box-shadow:0 0 10px var(--amber);animation:blink 3.2s infinite}
.btn-mini{
  background:linear-gradient(180deg,#0d2f3b,#08202a);border:1px solid var(--line-2);color:var(--cyan);
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;padding:6px 11px;
  border-radius:3px;cursor:pointer;transition:.15s;
}
.btn-mini:hover{background:#0f3d4c;box-shadow:0 0 14px rgba(53,224,255,.35)}
.btn-mini:active{transform:translateY(1px)}

/* ── rulers ── */
.ruler{height:16px;position:relative;overflow:hidden;background:#04121a;border-block:1px solid #0d2f3b}
.ruler:after{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(90deg, var(--cyan-dim) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, var(--cyan) 0 1.5px, transparent 1.5px 40px);
  background-size:auto 6px, auto 12px;
  background-position:bottom left, bottom left;
  background-repeat:repeat-x;
  opacity:.5;
}

/* ── grid ── */
.hud-grid{
  display:grid;gap:12px;padding:14px 16px 8px;
  grid-template-columns:repeat(12,1fr);
  max-width:1680px;margin:0 auto;
}
.panel{
  position:relative;background:
    linear-gradient(180deg, rgba(9,32,40,.92), rgba(5,17,22,.94));
  border:1px solid var(--line);border-radius:4px;padding:11px 13px 13px;
  box-shadow:inset 0 0 40px rgba(9,60,75,.25);
}
.panel:before,.panel:after{
  content:"";position:absolute;width:12px;height:12px;border:1px solid var(--cyan);opacity:.55;
}
.panel:before{top:-1px;inset-inline-start:-1px;border-inline-end:0;border-bottom:0}
.panel:after{bottom:-1px;inset-inline-end:-1px;border-inline-start:0;border-top:0}

.panel-head{display:flex;align-items:center;gap:9px;margin-bottom:11px;padding-bottom:7px;
  border-bottom:1px dashed #12414f}
.panel-head.wrap{flex-wrap:wrap}
.panel-head h2{margin:0;font-size:12px;font-weight:700;letter-spacing:.05em;color:#b7e8f5;display:flex;gap:7px;align-items:baseline}
.panel-head h2 .en{font-size:9.5px;letter-spacing:.18em;color:var(--txt-mute);font-weight:600}
.tag{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;color:#04141a;
  background:var(--cyan);padding:2px 5px;border-radius:2px;opacity:.85}
.hint{margin-inline-start:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--txt-mute)}

/* ── radar ── */
.radar-panel{grid-column:span 3}
.radar-wrap{display:flex;gap:12px;align-items:flex-start}
.radar{position:relative;width:100%;max-width:340px;aspect-ratio:1;flex:1 1 auto}
.radar-svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 10px rgba(53,224,255,.22))}
.r-ring{fill:none;stroke:#16596d;stroke-width:1}
.r-ring.dim{stroke:#0f4455;stroke-dasharray:2 5}
.r-cross{stroke:#0f4455;stroke-width:1;stroke-dasharray:3 6}
.r-core{fill:var(--cyan);filter:drop-shadow(0 0 6px var(--cyan))}
.r-core-ring{fill:none;stroke:var(--cyan);stroke-width:1;opacity:.6}
.radar-svg .tick{stroke:#1b7d94;stroke-width:1}
.radar-svg .tick.major{stroke:var(--cyan-dim);stroke-width:1.6}
.radar-svg .deg{fill:#3d7f93;font-size:7px;font-family:var(--mono)}
.sweep{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg, rgba(53,224,255,.42) 0deg, rgba(53,224,255,.10) 32deg, transparent 62deg, transparent 360deg);
  -webkit-mask:radial-gradient(circle, #000 99%, transparent 100%);
  mask:radial-gradient(circle, #000 99%, transparent 100%);
  animation:sweep 4.2s linear infinite;
}
@keyframes sweep{to{transform:rotate(360deg)}}
.blip{fill:var(--cyan);filter:drop-shadow(0 0 5px var(--cyan))}
.blip.hot{fill:var(--amber);filter:drop-shadow(0 0 6px var(--amber))}
.blip-ring{fill:none;stroke:var(--cyan);stroke-width:1;opacity:.35}
.blip-txt{fill:#9fe4f5;font-size:7.5px;font-family:var(--mono);letter-spacing:.06em}
.radar-label{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--mono);
  font-size:8.5px;letter-spacing:.1em;color:#7fd4e8}
.radar-label.center{bottom:9%}
.radar-side{flex:0 0 116px;display:flex;flex-direction:column;gap:6px}
.side-line{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;color:var(--txt-mute);
  border-bottom:1px dotted #12414f;padding-bottom:3px}
.side-line b{color:var(--cyan)}
.contacts{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.contact{display:flex;align-items:center;gap:6px;font-size:10px;color:#a9d9e7}
.contact .dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green);flex:0 0 auto}
.contact span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr}

/* ── strength ── */
.strength-panel{grid-column:span 5}
.strength-main{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.big-num{display:flex;flex-direction:column}
.big-num .val{
  font-family:var(--mono);font-size:56px;font-weight:800;line-height:1;letter-spacing:-.02em;
  color:#eafcff;text-shadow:0 0 26px rgba(53,224,255,.55),0 0 60px rgba(53,224,255,.2);
  font-variant-numeric:tabular-nums;
}
.big-num .cap{font-size:9.5px;letter-spacing:.16em;color:var(--txt-mute);margin-top:7px}
.trend-block{text-align:left;min-width:190px}
.trend-status{font-size:12.5px;font-weight:700;letter-spacing:.03em;padding:4px 9px;border-radius:3px;
  display:inline-block;border:1px solid var(--line-2);color:var(--cyan)}
.trend-status.up{color:var(--green);border-color:#1c6b4a;background:rgba(56,255,156,.07);text-shadow:0 0 12px rgba(56,255,156,.55)}
.trend-status.down{color:var(--red);border-color:#6b1c28;background:rgba(255,67,86,.08);text-shadow:0 0 12px rgba(255,67,86,.55)}
.trend-status.flat{color:var(--amber);border-color:#6b501c;background:rgba(255,176,32,.07)}
.trend-delta{display:flex;gap:12px;font-size:10.5px;color:var(--txt-dim);margin-top:9px;font-family:var(--mono)}
.trend-delta b{color:var(--txt)}
.gauge{margin-top:10px}
.gauge-track{height:6px;background:#08222b;border:1px solid #12414f;border-radius:2px;overflow:hidden}
.gauge-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--cyan-dim),var(--cyan));
  box-shadow:0 0 12px rgba(53,224,255,.7);transition:width .8s ease}
.gauge-ticks{display:flex;justify-content:space-between;margin-top:3px;font-family:var(--mono);font-size:7.5px;color:#2f5f70}

.spark-wrap{position:relative;height:132px;margin:12px 0 6px}
#spark{width:100%;height:100%;display:block}
.spark-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--txt-mute);text-align:center;padding:0 30px}
.tip{position:absolute;pointer-events:none;background:#04141a;border:1px solid var(--line-2);
  padding:5px 8px;font-family:var(--mono);font-size:10px;color:var(--cyan);white-space:nowrap;
  transform:translate(-50%,-130%);z-index:5;box-shadow:0 0 16px rgba(0,0,0,.7)}

.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.mini{background:#061a22;border:1px solid #0f3641;border-radius:3px;padding:7px 9px;position:relative;overflow:hidden}
.mini:before{content:"";position:absolute;top:0;inset-inline-start:0;width:2px;height:100%;background:var(--cyan-dim);opacity:.5}
.mini .k{display:block;font-size:8.5px;letter-spacing:.1em;color:var(--txt-mute);font-family:var(--mono)}
.mini .v{display:block;font-family:var(--mono);font-size:19px;font-weight:700;margin-top:4px;color:#dff8ff;
  font-variant-numeric:tabular-nums}
.mini .v.up{color:var(--green)} .mini .v.down{color:var(--red)} .mini .v.small{font-size:12.5px;color:var(--cyan)}

/* ── telemetry ── */
.telemetry-panel{grid-column:span 4}
.tel-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;border-bottom:1px dotted #12414f}
.tel-row .k{font-size:9.5px;letter-spacing:.1em;color:var(--txt-mute)}
.tel-row .v{font-family:var(--mono);font-size:13px;color:#dff8ff}
.tel-row .v.clocky{font-size:16px;color:var(--cyan);text-shadow:0 0 12px rgba(53,224,255,.45)}
.tel-row .v.small{font-size:11px;color:var(--txt-dim)}
.tel-quote{margin:9px 0 4px;padding:8px 10px;border-inline-start:2px solid var(--cyan-dark);
  background:#05161d;font-size:11.5px;line-height:1.85;color:#9ecfdd;max-height:74px;overflow:hidden}
.tel-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:9px 0}
.bars{display:flex;align-items:flex-end;gap:3px;height:52px;padding-top:6px;border-top:1px dashed #12414f}
.bars .b{flex:1;background:linear-gradient(180deg,var(--cyan),var(--cyan-dark));min-height:2px;border-radius:1px;
  box-shadow:0 0 8px rgba(53,224,255,.45)}

/* ── pipeline ── */
.pipeline-panel{grid-column:span 5}
.pipe-flow{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}
.pipe-stage{flex:1 1 0;min-width:104px;background:#061a22;border:1px solid #12414f;border-radius:3px;
  padding:9px 10px;position:relative}
.pipe-stage .n{position:absolute;top:4px;inset-inline-end:6px;font-family:var(--mono);font-size:8px;color:#2f5f70}
.pipe-stage .t{font-size:11px;font-weight:700;color:#cbeeff}
.pipe-stage .d{font-size:9px;color:var(--txt-mute);margin-top:4px;line-height:1.7;letter-spacing:.02em}
.pipe-stage .led{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);
  display:inline-block;margin-inline-end:5px;animation:blink 2.6s infinite}
.pipe-arrow{display:flex;align-items:center;color:var(--cyan-dark);font-size:14px;padding:0 1px}
.pipe-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-top:10px}
.pipe-meta .pm{background:#05161d;border:1px solid #0f3641;border-radius:3px;padding:6px 9px}
.pipe-meta .pm .k{display:block;font-size:8.5px;letter-spacing:.1em;color:var(--txt-mute);font-family:var(--mono)}
.pipe-meta .pm .v{display:block;font-family:var(--mono);font-size:12px;color:var(--cyan);margin-top:3px;direction:ltr;text-align:right}

/* ── models ── */
.model-panel{grid-column:span 3}
.model-card{background:#061a22;border:1px solid #12414f;border-radius:3px;padding:9px 10px;margin-bottom:8px;position:relative}
.model-card.primary{border-color:#1d6b7f;box-shadow:inset 0 0 22px rgba(53,224,255,.08)}
.model-card .rank{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;color:var(--cyan);margin-bottom:4px}
.model-card .mname{font-family:var(--mono);font-size:11.5px;color:#dff8ff;direction:ltr;text-align:right;word-break:break-all}
.model-card .mprov{font-size:9.5px;color:var(--txt-mute);margin-top:4px}
.model-card .mstate{position:absolute;top:8px;inset-inline-start:9px;font-family:var(--mono);font-size:8.5px;
  color:var(--green);letter-spacing:.1em}
.model-card.fb .rank{color:var(--amber)}
.model-card.fb{border-color:#4a3a12;box-shadow:inset 0 0 22px rgba(255,176,32,.06)}

/* ── sources ── */
.channels-panel{grid-column:span 4}
.src-list{display:flex;flex-direction:column;gap:8px}
.src{display:flex;align-items:center;gap:9px;background:#061a22;border:1px solid #12414f;border-radius:3px;padding:8px 10px}
.src .idx{font-family:var(--mono);font-size:9px;color:#2f5f70}
.src .body{flex:1;min-width:0}
.src .nm{font-size:11.5px;font-weight:700;color:#cbeeff}
.src .un{font-family:var(--mono);font-size:10px;color:var(--cyan-dim);direction:ltr;text-align:right}
.src .st{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--green);
  border:1px solid #1c6b4a;background:rgba(56,255,156,.06);padding:2px 6px;border-radius:2px}
.src a{color:inherit;text-decoration:none}

/* ── prompt ── */
.prompt-panel{grid-column:span 4}
.terminal{
  margin:0;background:#031017;border:1px solid #0f3641;border-radius:3px;padding:10px 12px;
  font-family:"Rubik",var(--mono);font-size:10.5px;line-height:1.95;color:#8fd6e8;
  max-height:230px;overflow:auto;white-space:pre-wrap;direction:rtl;
  box-shadow:inset 0 0 30px rgba(53,224,255,.05);
}
.terminal::-webkit-scrollbar{width:7px}
.terminal::-webkit-scrollbar-thumb{background:#12414f;border-radius:4px}
.terminal::-webkit-scrollbar-track{background:#04141a}

/* ── personnel ── */
.personnel-panel{grid-column:span 8}
.log-panel{grid-column:span 12}
.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-inline-start:auto}
.filters input,.filters select{
  background:#04141a;border:1px solid var(--line);color:var(--txt);border-radius:3px;
  padding:6px 9px;font-family:var(--mono);font-size:10.5px;outline:none;height:30px;
}
.filters input{flex:1 1 180px;min-width:150px}
.filters input:focus,.filters select:focus{border-color:var(--cyan-dim);box-shadow:0 0 0 2px rgba(53,224,255,.12)}
.table-wrap{max-height:420px;overflow:auto;border:1px solid #0f3641;border-radius:3px}
.data-table{width:100%;border-collapse:collapse;font-size:11.5px;min-width:640px}
.data-table thead th{
  position:sticky;top:0;z-index:2;background:#08202a;color:#6f9db0;font-family:var(--mono);
  font-size:9px;letter-spacing:.12em;text-align:right;padding:8px 10px;border-bottom:1px solid var(--line);
  font-weight:700;
}
.data-table td{padding:7px 10px;border-bottom:1px solid #0c2c36;vertical-align:middle}
.data-table tbody tr:nth-child(odd){background:rgba(11,38,47,.35)}
.data-table tbody tr:hover{background:rgba(53,224,255,.07)}
.ident{display:flex;align-items:center;gap:8px}
.ident .av{width:24px;height:24px;border-radius:2px;display:grid;place-items:center;font-size:10.5px;font-weight:700;
  color:#04141a;background:linear-gradient(135deg,var(--cyan),#1ba7c4);flex:0 0 auto}
.ident .nm{color:#d7f2fa;font-weight:600}
.ident .badge{font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:var(--amber);
  border:1px solid #5a4514;background:rgba(255,176,32,.08);padding:1px 4px;border-radius:2px;margin-inline-start:5px}
.mono{font-family:var(--mono);font-size:10.5px;color:#7fb3c4;direction:ltr;text-align:right}
.pill{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;padding:2px 6px;border-radius:2px;display:inline-block}
.pill.act{color:var(--green);border:1px solid #1c6b4a;background:rgba(56,255,156,.07)}
.pill.left{color:var(--red);border:1px solid #6b1c28;background:rgba(255,67,86,.07)}
.table-empty{padding:22px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--txt-mute)}
.pager{display:flex;align-items:center;justify-content:center;gap:12px;padding-top:9px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--txt-mute)}

/* ── op log ── */
.log{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:5px;
  max-height:170px;overflow:auto;font-family:var(--mono);font-size:10.5px}
.log::-webkit-scrollbar{width:6px}
.log::-webkit-scrollbar-thumb{background:#12414f}
.log-row{display:flex;justify-content:space-between;align-items:center;gap:6px;
  border-inline-start:2px solid var(--cyan-dark);background:#05161d;padding:5px 8px;color:#8fc9da}
.log-row .t{color:#5d93a6}
.log-row .ok{color:var(--green)}
.log-row .zero{color:var(--amber)}
.log-empty{color:var(--txt-mute);font-size:10px;letter-spacing:.1em;padding:14px 0;text-align:center}

/* ── footer ── */
.hud-foot{border-top:1px solid var(--line);margin-top:6px;background:#04121a}
.ticker{overflow:hidden;white-space:nowrap;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  color:var(--cyan-dim);padding:5px 0;border-bottom:1px dashed #0f3641}
.ticker span{display:inline-block;padding-inline-end:40px;animation:tick 46s linear infinite}
@keyframes tick{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.foot-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:#2f5f70;padding:6px 16px}

/* ── responsive ── */
@media (max-width:1400px){
  .radar-panel{grid-column:span 4}
  .strength-panel{grid-column:span 8}
  .prompt-panel{grid-column:span 12}
  .telemetry-panel{grid-column:span 5}
  .pipeline-panel{grid-column:span 7}
  .model-panel{grid-column:span 5}
  .channels-panel{grid-column:span 7}
  .prompt-panel{grid-column:span 12}
  .personnel-panel{grid-column:span 12}
  .log-panel{grid-column:span 12}
}
@media (max-width:900px){
  .hud-grid > .panel{grid-column:span 12 !important}
  .big-num .val{font-size:42px}
  .mini-grid{grid-template-columns:1fr 1fr}
  .clock{font-size:16px}
  .head-right{gap:10px}
  .radar-wrap{flex-direction:column;align-items:center}
  .radar-side{width:100%;flex:1 1 auto}
}