:root {
  --bg: #0a0e14;
  --panel: #111720;
  --panel-2: #151d28;
  --border: rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.16);
  --text: #eef2f7;
  --muted: #8d98a9;
  --dim: #5d6878;
  --amber: #f59e0b;
  --amber-soft: rgba(245,158,11,.12);
  --red: #ef4444;
  --blue: #38bdf8;
  --green: #34d399;
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 15% -10%, rgba(245,158,11,.09), transparent 30%),
    var(--bg);
  color: var(--text);
  font-family: Tajawal, system-ui, sans-serif;
}
button, select { font: inherit; }
button { cursor: pointer; }

.rc-wrap { width: min(1540px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 52px; }
.rc-header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:22px; }
.rc-kicker { font: 700 12px/1 JetBrains Mono, monospace; letter-spacing:.16em; color:var(--amber); margin-bottom:10px; }
.rc-header h1 { margin:0; font-size:clamp(28px,3vw,42px); line-height:1.1; font-weight:900; }
.rc-header p { margin:10px 0 0; color:var(--muted); font-size:17px; }
.rc-ver { font:700 12px JetBrains Mono, monospace; color:var(--amber); vertical-align:middle; }
.rc-back { color:var(--muted); text-decoration:none; border:1px solid var(--border); border-radius:10px; padding:10px 14px; white-space:nowrap; }
.rc-back:hover { color:var(--text); border-color:var(--border-strong); }

.rc-banner { margin-bottom:16px; padding:12px 14px; border:1px solid rgba(239,68,68,.35); background:rgba(239,68,68,.08); color:#fecaca; border-radius:10px; }
.rc-banner.success { border-color:rgba(52,211,153,.35); background:rgba(52,211,153,.08); color:#bbf7d0; }

.rc-workspace { display:grid; grid-template-columns:300px minmax(0,1fr); gap:18px; align-items:start; }
.rc-sidebar, .rc-main { border:1px solid var(--border); background:rgba(17,23,32,.92); border-radius:16px; box-shadow:0 18px 60px rgba(0,0,0,.22); }
.rc-sidebar { padding:18px; position:sticky; top:16px; }
.rc-main { min-width:0; padding:20px; }
.rc-block { padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--border); }
.rc-block:last-of-type { border-bottom:0; }
.rc-label { display:block; font-weight:700; font-size:14px; color:#cbd5e1; margin-bottom:8px; }
.rc-select {
  width:100%; min-height:42px; border:1px solid var(--border-strong); border-radius:10px;
  background:#0d131b; color:var(--text); padding:8px 10px; outline:none;
}
.rc-select:focus { border-color:rgba(245,158,11,.65); box-shadow:0 0 0 3px rgba(245,158,11,.08); }
.rc-comparisons { display:grid; gap:8px; margin-top:8px; }
.rc-comparison-row { display:grid; grid-template-columns:minmax(0,1fr) 36px; gap:7px; }
.rc-remove { border:1px solid var(--border); background:#0d131b; color:var(--muted); border-radius:9px; }
.rc-remove:hover { color:#fecaca; border-color:rgba(239,68,68,.35); }
.rc-help { color:var(--dim); font-size:12px; margin-top:7px; }

.rc-secondary, .rc-primary { width:100%; border-radius:10px; min-height:42px; font-weight:700; }
.rc-secondary { margin-top:9px; border:1px dashed var(--border-strong); background:transparent; color:#cbd5e1; }
.rc-secondary:hover { border-color:rgba(245,158,11,.55); color:var(--amber); }
.rc-primary { border:1px solid rgba(245,158,11,.55); background:var(--amber); color:#15100a; padding:10px 12px; }
.rc-primary:hover { filter:brightness(1.06); }
.rc-primary[hidden] { display:none!important; }

.rc-seg { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
#rc-scales { grid-template-columns:repeat(2,1fr); }
.rc-seg button { border:1px solid var(--border); background:#0d131b; color:var(--muted); border-radius:9px; min-height:38px; padding:6px; }
.rc-seg button:hover:not(:disabled) { color:var(--text); border-color:var(--border-strong); }
.rc-seg button.is-active { color:#17100a; background:var(--amber); border-color:var(--amber); font-weight:800; }
.rc-seg button:disabled { opacity:.35; cursor:not-allowed; }

.rc-chart-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:14px; }
.rc-chart-head h2 { margin:7px 0 3px; font-size:clamp(22px,2.6vw,34px); line-height:1.2; }
.rc-chart-head p { margin:0; color:var(--muted); }
.rc-series-tags { display:flex; flex-wrap:wrap; gap:7px; min-height:24px; }
.rc-series-tag { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background:#0d131b; border-radius:999px; padding:4px 9px; color:#cbd5e1; font-size:12px; }
.rc-series-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.rc-status { font:600 12px JetBrains Mono, monospace; color:var(--muted); direction:ltr; text-align:left; white-space:nowrap; }

.rc-canvas-wrap { position:relative; height:clamp(390px,57vh,680px); min-height:390px; border:1px solid var(--border); background:#0a0f16; border-radius:13px; padding:10px; overflow:hidden; }
.rc-canvas-wrap canvas { direction:ltr; }
.rc-loading { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); background:rgba(10,15,22,.72); z-index:2; }
.rc-loading[hidden] { display:none; }

.rc-meta-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:14px; }
.rc-meta-grid > div { background:#0d131b; border:1px solid var(--border); border-radius:10px; padding:10px 12px; min-width:0; }
.rc-meta-grid span { display:block; color:var(--dim); font-size:12px; margin-bottom:4px; }
.rc-meta-grid strong { display:block; color:#dbe4ef; font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
.rc-note { margin-top:10px; border:1px solid var(--border); background:#0d131b; border-radius:10px; padding:11px 13px; color:#aab5c4; line-height:1.65; font-size:13px; }
.rc-note strong { color:#dbe4ef; margin-inline-end:7px; }
.rc-note.warning { border-color:rgba(245,158,11,.3); background:rgba(245,158,11,.06); color:#fde68a; }
.rc-note.info { border-color:rgba(56,189,248,.25); background:rgba(56,189,248,.05); color:#bae6fd; }
.rc-note[hidden] { display:none; }

@media (max-width: 980px) {
  .rc-workspace { grid-template-columns:1fr; }
  .rc-sidebar { position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .rc-block { margin:0; padding:0 0 14px; }
  .rc-primary { align-self:end; }
}

@media (max-width: 680px) {
  .rc-wrap { width:min(100% - 18px,1540px); padding-top:16px; }
  .rc-header { display:block; }
  .rc-back { display:inline-block; margin-top:14px; }
  .rc-sidebar { display:block; }
  .rc-block { margin-bottom:16px; }
  .rc-main { padding:12px; }
  .rc-chart-head { display:block; }
  .rc-status { margin-top:8px; }
  .rc-canvas-wrap { height:420px; min-height:420px; padding:5px; }
  .rc-meta-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* QP-DATA-FRESHNESS-001 */
.rc-freshness-strip {
  margin-top:10px;
  border:1px solid var(--border);
  background:#0d131b;
  border-radius:11px;
  padding:12px 13px;
  color:#cbd5e1;
}
.rc-freshness-strip[hidden] { display:none; }
.rc-freshness-strip.status-live,
.rc-freshness-strip.status-fresh { border-color:rgba(52,211,153,.28); background:rgba(52,211,153,.045); }
.rc-freshness-strip.status-cache,
.rc-freshness-strip.status-delayed { border-color:rgba(245,158,11,.32); background:rgba(245,158,11,.055); }
.rc-freshness-strip.status-stale,
.rc-freshness-strip.status-unavailable { border-color:rgba(239,68,68,.32); background:rgba(239,68,68,.055); }
.rc-freshness-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 12px; }
.rc-freshness-head strong { color:#eef2f7; }
.rc-freshness-head > span { font-weight:800; }
.rc-freshness-head small { color:var(--dim); font-size:11px; margin-inline-start:auto; }
.rc-freshness-items { display:grid; gap:7px; margin-top:10px; }
.rc-freshness-item {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px 10px;
  border-top:1px solid var(--border);
  padding-top:7px;
  color:#aab5c4;
  font-size:12px;
}
.rc-freshness-item strong { color:#dbe4ef; }
.rc-freshness-dot { width:8px; height:8px; border-radius:50%; background:var(--dim); flex:0 0 auto; }
.rc-freshness-dot.status-live,
.rc-freshness-dot.status-fresh { background:var(--green); box-shadow:0 0 0 3px rgba(52,211,153,.08); }
.rc-freshness-dot.status-cache,
.rc-freshness-dot.status-delayed { background:var(--amber); box-shadow:0 0 0 3px rgba(245,158,11,.08); }
.rc-freshness-dot.status-stale,
.rc-freshness-dot.status-unavailable { background:var(--red); box-shadow:0 0 0 3px rgba(239,68,68,.08); }
.rc-freshness-flag,
.rc-cross-check { border:1px solid var(--border); border-radius:999px; padding:2px 7px; font:600 10px JetBrains Mono,monospace; }
.rc-freshness-flag { color:#fde68a; border-color:rgba(245,158,11,.28); }
.rc-cross-check.pass { color:#bbf7d0; border-color:rgba(52,211,153,.28); }
.rc-cross-check.warn { color:#fecaca; border-color:rgba(239,68,68,.28); }

@media (max-width: 680px) {
  .rc-freshness-head small { width:100%; margin:0; }
  .rc-freshness-item { align-items:flex-start; }
}