/* iQs Range — Enterprise Cyber Digital Twin · CISO-first design system.
   Fortune-100: charcoal/navy base, off-white type, restrained blue/cyan; green=proven,
   amber=uncertain, red=verified danger, purple=inferred. Big CISO typography, fewer boxes,
   whitespace + zones over cards, professional SVG iconography (no text glyphs). */
:root {
  --bg: #0A0E17;
  --bg-2: #0C111C;
  --zone: #0F1522;
  --panel: #121926;
  --elev: #18212F;
  --line: rgba(120, 140, 185, 0.14);
  --line-2: rgba(120, 140, 185, 0.22);
  --ink: #EEF2FA;
  --ink-2: #AFB9CC;
  --ink-3: #78839A;
  --ink-4: #525C70;
  --brand: #3E6BFF;
  --brand-2: #6E93FF;
  --cyan: #2DC5E6;
  --proven: #35D29A;   /* green  — proven/verified */
  --uncertain: #F2A93B;/* amber  — uncertain/stale */
  --danger: #FF5C6C;   /* red    — verified danger/failure */
  --infer: #B47CFF;    /* purple — AI inference */
  --sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
button, input, select { font-family: inherit; }
.icon { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 15px; height: 15px; }

/* ---------- app frame: rail / (header + body) ---------- */
.rr { display: grid; grid-template-columns: var(--rail, 240px) 1fr; height: 100vh; width: 100vw; overflow: hidden; }
.rail { background: linear-gradient(180deg, #0C1120, var(--bg)); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.rail .brand { display: flex; align-items: center; gap: 11px; padding: 18px 18px 16px; }
.rail .brand .mk { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: #08101f; font-weight: 800; background: linear-gradient(135deg, var(--brand-2), #2447C7); }
.rail .brand .nm { font-weight: 700; font-size: 15px; line-height: 1.15; letter-spacing: .2px; }
.rail .brand .nm small { display: block; font-weight: 500; font-size: 10.5px; color: var(--ink-3); letter-spacing: .3px; }
.rail .grp { font-size: 10px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--ink-4); padding: 16px 18px 7px; }
.rail nav { flex: 1; overflow-y: auto; padding: 0 10px; }
.rail a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; color: var(--ink-2); text-decoration: none; font-size: 14px; margin-bottom: 2px; cursor: pointer; }
.rail a:hover { background: var(--elev); color: var(--ink); }
.rail a.active { background: rgba(62, 107, 255, 0.15); color: #fff; }
.rail a.active .icon { color: var(--brand-2); }
.rail .persona { border-top: 1px solid var(--line); padding: 12px; }
.rail .persona label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-4); display: block; margin-bottom: 6px; }
.rail .persona select { width: 100%; background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; font-size: 13px; }

.main { display: grid; grid-template-rows: 58px 1fr; overflow: hidden; }
.hdr { display: flex; align-items: center; gap: 16px; padding: 0 24px; border-bottom: 1px solid var(--line); background: rgba(10,14,23,.85); backdrop-filter: blur(10px); }
.hdr .ctx { display: flex; flex-direction: column; }
.hdr .ctx .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--ink-4); }
.hdr .ctx select { background: transparent; color: var(--ink); border: none; font-size: 14px; font-weight: 600; padding: 0; cursor: pointer; }
.hdr .sp { flex: 1; }
.hdr .live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3); font-family: var(--mono); }
.hdr .live .d { width: 8px; height: 8px; border-radius: 50%; background: var(--proven); box-shadow: 0 0 8px var(--proven); }
.hdr .live .d.load { background: var(--uncertain); box-shadow: 0 0 8px var(--uncertain); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .4; } }
.act { background: var(--brand); color: #fff; border: none; border-radius: 9px; padding: 9px 15px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.act:hover { background: var(--brand-2); }
.act.ghost { background: var(--elev); color: var(--ink); border: 1px solid var(--line-2); }
.act:disabled { opacity: .5; cursor: not-allowed; }

.view { overflow-y: auto; padding: 24px 28px 48px; }
.view::-webkit-scrollbar { width: 10px; } .view::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; }
.vtitle { font-size: 30px; font-weight: 800; letter-spacing: -0.4px; margin: 0 0 2px; }
.vsub { color: var(--ink-3); font-size: 14px; margin: 0 0 22px; }

/* ---------- CISO truth strip (BIG values, fewer boxes) ---------- */
.truthstrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--zone); margin-bottom: 26px; }
.tsig { padding: 18px 20px; border-right: 1px solid var(--line); cursor: pointer; position: relative; }
.tsig:last-child { border-right: none; }
.tsig:hover { background: var(--panel); }
.tsig .k { font-size: 11.5px; color: var(--ink-3); margin-bottom: 10px; min-height: 30px; }
.tsig .v { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.tsig .v small { font-size: 22px; font-weight: 700; }
.tsig .d { font-size: 11px; color: var(--ink-4); margin-top: 8px; }
.tsig .why { position: absolute; top: 16px; right: 16px; color: var(--ink-4); font-size: 11px; display: inline-flex; align-items: center; gap: 3px; }
.v.proven { color: var(--proven); } .v.harmful { color: var(--danger); } .v.stale { color: var(--uncertain); } .v.infer { color: var(--infer); } .v.muted { color: var(--ink); }

/* ---------- zone layout (two-column: content + rail) ---------- */
.cols { display: grid; grid-template-columns: 1fr 380px; gap: 26px; align-items: start; }
@media (max-width: 1500px) { .rr { --rail: 216px; } .cols { grid-template-columns: 1fr 340px; } }
.zoneh { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; }
.zoneh h2 { font-size: 19px; font-weight: 700; margin: 0; }
.zoneh .sub { font-size: 12.5px; color: var(--ink-3); }
.zoneh .more { margin-left: auto; font-size: 12.5px; color: var(--brand-2); cursor: pointer; }

/* ---------- business service cards (restrained) ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.svc { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; cursor: pointer; }
.svc:hover { border-color: var(--line-2); }
.svc .top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.svc .top .nm { font-size: 16px; font-weight: 700; }
.svc .top .crit { font-size: 10px; font-weight: 700; color: var(--danger); border: 1px solid var(--danger); border-radius: 5px; padding: 1px 6px; text-transform: uppercase; letter-spacing: .5px; }
.svc .expo { margin-left: auto; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
.svc .expo.HIGH { color: var(--danger); background: rgba(255,92,108,.12); } .svc .expo.MEDIUM { color: var(--uncertain); background: rgba(242,169,59,.12); } .svc .expo.LOW { color: var(--proven); background: rgba(53,210,154,.12); }
.svc .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.svc .fact .n { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.svc .fact .l { font-size: 10.5px; color: var(--ink-4); }

/* ---------- decision rail ---------- */
.decs { display: flex; flex-direction: column; gap: 12px; }
.dc { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--danger); border-radius: 11px; padding: 14px 16px; cursor: pointer; }
.dc.med { border-left-color: var(--uncertain); }
.dc:hover { background: var(--elev); }
.dc .r { display: flex; gap: 9px; align-items: baseline; }
.dc .r .n { color: var(--ink-4); font-family: var(--mono); font-size: 13px; }
.dc .r .t { font-size: 14.5px; font-weight: 700; }
.dc .svc2 { font-size: 12px; color: var(--ink-3); margin: 3px 0 10px; }
.dc .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; font-size: 12px; }
.dc .grid .l { color: var(--ink-4); } .dc .grid .v { font-weight: 600; }
.dc .val { margin-top: 9px; font-size: 11px; color: var(--proven); display: inline-flex; gap: 5px; align-items: center; }

/* ---------- what changed ---------- */
.changes { display: flex; flex-direction: column; gap: 0; }
.chg { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.chg:last-child { border-bottom: none; }
.chg .ic { color: var(--uncertain); margin-top: 1px; } .chg .tx { font-size: 13.5px; } .chg .im { margin-left: auto; font-size: 11px; color: var(--ink-4); }

/* ---------- reachability mini ---------- */
.reach-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.reach-row:last-child { border-bottom: none; }
.st { font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 5px; }
.st.CONNECTED { color: var(--danger); background: rgba(255,92,108,.12); }
.st.POLICY_BLOCKED, .st.NO_ROUTE { color: var(--proven); background: rgba(53,210,154,.12); }
.st.PORT_CLOSED, .st.TARGET_UNAVAILABLE { color: var(--uncertain); background: rgba(242,169,59,.12); }
.mono { font-family: var(--mono); }

/* ---------- data states ---------- */
.loader { position: fixed; inset: 0; background: var(--bg); display: grid; place-items: center; z-index: 100; text-align: center; transition: opacity .35s; }
.loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.loader .ring { width: 48px; height: 48px; border: 3px solid var(--line-2); border-top-color: var(--brand-2); border-radius: 50%; animation: sp .8s linear infinite; margin: 0 auto 18px; }
@keyframes sp { to { transform: rotate(360deg); } }
.loader h2 { font-size: 17px; font-weight: 600; margin: 0 0 6px; } .loader p { color: var(--ink-3); font-size: 13px; font-family: var(--mono); margin: 2px 0; }
.state-box { border: 1px dashed var(--line-2); border-radius: 12px; padding: 30px; text-align: center; color: var(--ink-3); font-size: 13px; }
.state-box .src { font-family: var(--mono); font-size: 11px; color: var(--ink-4); margin-top: 8px; }

/* ---------- drawer (inspector / simulation) ---------- */
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 460px; background: var(--bg-2); border-left: 1px solid var(--line-2); box-shadow: -20px 0 50px rgba(0,0,0,.5); transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); z-index: 60; display: flex; flex-direction: column; }
.drawer.open { transform: none; }
.drawer .dh { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer .dh h3 { margin: 0; font-size: 16px; font-weight: 700; flex: 1; }
.drawer .dh button { background: var(--elev); border: 1px solid var(--line-2); color: var(--ink-2); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; }
.drawer .db { flex: 1; overflow-y: auto; padding: 18px 20px; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 5px 12px; font-size: 13px; margin-bottom: 14px; }
.kv .k { color: var(--ink-3); } .kv .v { color: var(--ink); }
.sec { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--ink-4); margin: 16px 0 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.iso-warn { background: rgba(242,169,59,.1); border: 1px solid rgba(242,169,59,.35); color: var(--uncertain); border-radius: 9px; padding: 10px 13px; font-size: 12.5px; margin-bottom: 14px; display: flex; gap: 9px; align-items: center; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.pad { padding: 18px; }