/* ============================================================================
   Kalnavi — Enterprise AI Platform · design system
   Subject: premium edible bird's nest (sarang walet), newly-public protein co.
   Direction: a calm "control-room" console — deep teal canvas (echoes a corporate
   deck), ivory nest-coloured panels, gold for premium signals, jade for AI.
   Display face Fraunces (heritage/premium), Inter for UI, mono for the data
   layer. Signature: the live router trace under every assistant reply.
============================================================================ */

:root {
  --bg:          #0a0f1f;
  --bg-grad:     radial-gradient(1200px 700px at 78% -8%, #1a2550 0%, #0a0f1f 55%, #070b17 100%);
  --panel:       #111a33;
  --panel-2:     #151f3d;
  --line:        #26315a;
  --line-soft:   #1d2748;
  --ink:         #eef2ff;
  --ink-dim:     #a5b0d6;
  --ink-faint:   #6f7aa3;
  --gold:        #8b7bff;
  --gold-soft:   #b3a8ff;
  --jade:        #22d3ee;
  --jade-soft:   #67e8f9;

  --grade-a:     #34d399;
  --grade-b:     #f5b84a;
  --grade-c:     #d9794f;
  --ok:          #34d399;
  --warning:     #f5b84a;
  --critical:    #d9594f;
  --expired:     #b0473f;

  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius:      16px;
  --radius-sm:   9px;
  --shadow:      0 18px 50px -24px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* attribute must win over flex/grid display rules */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- layout shell ------------------------------------------------------- */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }

.rail {
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #0b1128, #0a0f1f);
  padding: 26px 18px;
  display: flex; flex-direction: column; gap: 28px;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;            /* allow the nav to scroll when it exceeds viewport */
  scrollbar-width: thin;
}
.rail::-webkit-scrollbar { width: 7px; }
.rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  background: linear-gradient(135deg, var(--gold) 0%, #5b6cff 55%, var(--jade) 100%);
  display: grid; place-items: center; color: #ffffff;
  font-family: var(--font-display); font-weight: 600; font-size: 20px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 6px 18px -8px rgba(139,123,255,.7);
}
.brand .name { font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -.2px; line-height: 1; }
.brand .mark svg { width: 26px; height: 26px; }
.brand .sub  { font-size: 10.5px; color: var(--ink-faint); letter-spacing: 1.4px; text-transform: uppercase; margin-top: 4px; }

.nav { display: flex; flex-direction: column; gap: 3px; }
.nav button {
  appearance: none; border: 0; background: transparent; color: var(--ink-dim);
  font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: 11px; transition: background .15s, color .15s;
}
.nav button .ico { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav button:hover { background: var(--line-soft); color: var(--ink); }
.nav button.active { background: var(--panel-2); color: var(--ink); box-shadow: inset 2px 0 0 var(--gold); }
.nav button:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }

.rail .foot { margin-top: auto; font-size: 11px; color: var(--ink-faint); }
.disclaimer { margin-top: 12px; padding: 9px 11px; border: 1px dashed var(--line);
  border-radius: var(--radius-sm); font-size: 10px; line-height: 1.5; color: var(--ink-faint);
  background: rgba(139,123,255,.05); }
.provider-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 11px;
  color: var(--ink-dim); font-family: var(--font-mono);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
.dot.live { background: var(--jade); box-shadow: 0 0 0 3px rgba(34,211,238,.18); }

/* ---- main --------------------------------------------------------------- */
.main { padding: 34px 48px 64px; max-width: none; width: 100%; min-width: 0; }
.view { display: none; animation: rise .35s ease both; }
.view.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold); margin: 0 0 10px;
}
h1.title { font-family: var(--font-display); font-weight: 550; font-size: 33px; line-height: 1.1; margin: 0 0 8px; letter-spacing: .2px; }
.lede { color: var(--ink-dim); font-size: 15px; max-width: 62ch; margin: 0 0 26px; }

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
}
.panel + .panel { margin-top: 18px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-head h2 { font-family: var(--font-display); font-weight: 550; font-size: 18px; margin: 0; }
.panel-head .hint { font-size: 12px; color: var(--ink-faint); }

/* ---- KPI grid ----------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 16px 14px; position: relative; overflow: hidden;
}
.kpi::after { content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background: linear-gradient(90deg, var(--gold), transparent 70%); opacity:.7; }
.kpi .label { font-size: 11.5px; color: var(--ink-dim); letter-spacing: .3px; }
.kpi .value { font-family: var(--font-display); font-size: 30px; line-height: 1.05; margin: 8px 0 2px; }
.kpi .value.jade { color: var(--jade-soft); }
.kpi .value.gold { color: var(--gold-soft); }
.kpi .note { font-size: 11px; color: var(--ink-faint); font-family: var(--font-mono); }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 920px){ .cols { grid-template-columns: 1fr; } }

/* ---- provider usage bars ------------------------------------------------ */
.bars { display: flex; flex-direction: column; gap: 11px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 42px; align-items: center; gap: 12px; font-size: 13px; }
.bar-row .pname { color: var(--ink-dim); font-family: var(--font-mono); font-size: 12px; }
.bar-track { height: 9px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--jade), var(--jade-soft)); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.bar-row .pcount { text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--ink); }

/* ---- certificate watch -------------------------------------------------- */
.cert { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.cert:last-child { border-bottom: 0; }
.cert .cname { font-size: 14px; }
.cert .cmeta { font-size: 11.5px; color: var(--ink-faint); font-family: var(--font-mono); margin-top: 2px; }
.chip { font-family: var(--font-mono); font-size: 11.5px; padding: 4px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.chip.ok       { color: var(--ok);       background: rgba(34,211,238,.10);  border-color: rgba(34,211,238,.30); }
.chip.warning  { color: var(--warning);  background: rgba(139,123,255,.10);  border-color: rgba(139,123,255,.34); }
.chip.critical { color: var(--critical); background: rgba(217,89,79,.12);   border-color: rgba(217,89,79,.36); }
.chip.expired  { color: #f0a59d;         background: rgba(176,71,63,.18);   border-color: rgba(176,71,63,.45); }

/* ---- buttons ------------------------------------------------------------ */
.btn {
  appearance: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 500;
  border-radius: var(--radius-sm); padding: 10px 16px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink); transition: transform .12s, background .15s, border-color .15s;
}
.btn:hover { background: var(--line-soft); border-color: var(--jade); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
.btn.primary { background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: #ffffff; border-color: #6d5ff0; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.05); }
.btn.ghost { background: transparent; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---- grading ------------------------------------------------------------ */
.grade-layout { display: grid; grid-template-columns: 320px 1fr; gap: 18px; }
@media (max-width: 860px){ .grade-layout { grid-template-columns: 1fr; } }
.drop {
  border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 18px;
  text-align: center; background: var(--panel); transition: border-color .15s, background .15s;
}
.drop.drag { border-color: var(--gold); background: var(--panel-2); }
.preview { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm);
  background: var(--line-soft); border: 1px solid var(--line); }
.samples { display: flex; gap: 8px; margin-top: 12px; }
.samples img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; cursor: pointer;
  border: 1px solid var(--line); transition: border-color .15s, transform .12s; }
.samples img:hover { border-color: var(--gold); transform: translateY(-2px); }

.grade-badge { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.grade-letter { width: 74px; height: 74px; border-radius: 16px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 42px; font-weight: 600; color: #0a0f1f; flex: none; }
.grade-A { background: linear-gradient(160deg, var(--jade-soft), var(--grade-a)); }
.grade-B { background: linear-gradient(160deg, var(--gold-soft), var(--grade-b)); }
.grade-C { background: linear-gradient(160deg, #e8a07f, var(--grade-c)); }
.metrics { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 8px; }
.metric { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 11px 13px; }
.metric .mlabel { font-size: 11px; color: var(--ink-dim); }
.metric .mval { font-family: var(--font-mono); font-size: 17px; margin-top: 3px; }
.meter { height: 6px; background: var(--line-soft); border-radius: 999px; margin-top: 8px; overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--jade); border-radius: 999px; }
.defect-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tag { font-family: var(--font-mono); font-size: 11.5px; padding: 5px 10px; border-radius: 7px;
  background: rgba(217,121,79,.12); color: #eaa888; border: 1px solid rgba(217,121,79,.3); }
.tag.clean { background: rgba(34,211,238,.1); color: var(--jade-soft); border-color: rgba(34,211,238,.3); }

/* ---- forecast ----------------------------------------------------------- */
.sku-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sku-tab { font-family: var(--font-mono); font-size: 12px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-dim); cursor: pointer; }
.sku-tab.active { color: var(--ink); border-color: var(--gold); background: var(--panel-2); }
.chart-wrap { width: 100%; overflow-x: auto; }
svg.chart { width: 100%; height: 260px; display: block; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--ink-dim); margin-top: 10px; }
.legend i { display: inline-block; width: 22px; height: 0; vertical-align: middle; margin-right: 7px; border-top-width: 2px; border-top-style: solid; }
.fc-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.fc-tools { display: flex; align-items: center; gap: 8px; }
.fc-hlabel { font-size: 10px; letter-spacing: 1px; color: var(--ink-faint); }
.fc-horizon { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.fc-horizon button { appearance: none; border: 0; background: var(--panel); color: var(--ink-dim); font: inherit;
  font-family: var(--font-mono); font-size: 12px; padding: 6px 11px; cursor: pointer; border-right: 1px solid var(--line); }
.fc-horizon button:last-child { border-right: 0; }
.fc-horizon button.active { background: var(--panel-2); color: var(--gold-soft); }
.fc-tip { position: absolute; transform: translate(-50%, -130%); background: rgba(6,9,26,.92); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 9px; font-size: 11px; color: var(--ink); pointer-events: none; white-space: nowrap; z-index: 4; }
.fc-tip b { color: var(--jade-soft); } .fc-tip span { color: var(--ink-faint); font-size: 10px; }
.fc-scenario { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--line-soft); }
.fc-scn-left { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 240px; }
.fc-scn-left label { font-size: 11px; color: var(--ink-dim); white-space: nowrap; }
.fc-scn-left label b { color: var(--jade-soft); }
.fc-scn-left input[type=range] { flex: 1; accent-color: var(--jade); }
.fc-scenario .btn { font-size: 12px; padding: 7px 12px; }
.wape-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 16px; }
.wape { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 13px; text-align: center; }
.wape .w { font-family: var(--font-display); font-size: 24px; }
.wape .l { font-size: 11px; color: var(--ink-dim); margin-top: 2px; }

/* ---- assistant / chat --------------------------------------------------- */
.chat-shell { display: grid; grid-template-rows: 1fr auto; height: calc(100vh - 230px); min-height: 420px; }
.chat-log { overflow-y: auto; padding: 6px 4px 16px; display: flex; flex-direction: column; gap: 16px; }
.msg { max-width: 78%; }
.msg.user { align-self: flex-end; }
.msg .bubble { padding: 12px 15px; border-radius: 14px; font-size: 14.5px; white-space: pre-wrap; }
.msg.user .bubble { background: linear-gradient(180deg,#151d41,#111836); border: 1px solid var(--line); border-bottom-right-radius: 5px; }
.msg.bot .bubble { background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.msg .sources { margin-top: 8px; font-size: 11.5px; color: var(--ink-faint); font-family: var(--font-mono); }
/* signature: router trace */
.trace { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-family: var(--font-mono); font-size: 11px; }
.trace .seg { padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink-dim); }
.trace .seg b { color: var(--ink); font-weight: 600; }
.trace .seg.model { border-color: rgba(34,211,238,.4); color: var(--jade-soft); }
.trace .seg.saved { border-color: rgba(139,123,255,.4); color: var(--gold-soft); }
.trace .seg.live { border-color: rgba(34,211,238,.45); color: var(--jade-soft); }
.trace .arrow { color: var(--ink-faint); }
.chat-input { display: flex; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.chat-input input { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink); font: inherit; font-size: 14px; padding: 12px 14px; }
.chat-input input:focus { outline: none; border-color: var(--jade); }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.suggest button { font-size: 12px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink-dim); cursor: pointer; }
.suggest button:hover { border-color: var(--gold); color: var(--ink); }
.typing { display: inline-flex; gap: 4px; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); animation: blink 1.2s infinite; }
.typing span:nth-child(2){ animation-delay: .2s; } .typing span:nth-child(3){ animation-delay: .4s; }
@keyframes blink { 0%,60%,100%{opacity:.25} 30%{opacity:1} }

.spinner { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--gold); border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

.muted { color: var(--ink-faint); font-size: 12.5px; }
.mono { font-family: var(--font-mono); }
.callout { font-size: 12.5px; color: var(--ink-dim); border-left: 2px solid var(--gold); padding: 2px 0 2px 12px; margin-top: 14px; }

/* ============================================================================
   ENTERPRISE UPGRADE v2 — glassmorphism, topbar, data tables, indices, toasts
============================================================================ */

/* ---- nav groups + badge ------------------------------------------------- */
.nav-group { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ink-faint); margin: 14px 12px 5px; }
.nav-group:first-child { margin-top: 0; }
.nav button { position: relative; }
.nav-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--critical); color: #fff; font-size: 10.5px; font-family: var(--font-mono);
  display: inline-grid; place-items: center; box-shadow: 0 0 0 3px rgba(217,89,79,.18);
  animation: pulse-badge 2s ease-in-out infinite; }
.nav-badge[hidden], .bell-badge[hidden] { display: none; }
@keyframes pulse-badge { 0%,100%{ box-shadow: 0 0 0 3px rgba(217,89,79,.16);} 50%{ box-shadow:0 0 0 5px rgba(217,89,79,.05);} }

/* ---- glassmorphism panels ----------------------------------------------- */
.panel.glass {
  background: linear-gradient(155deg, rgba(19,26,53,.72), rgba(16,24,52,.55));
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(112,202,176,.14);
  position: relative; overflow: hidden;
}
.panel.glass::before { content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background: linear-gradient(120deg, rgba(255,255,255,.05), transparent 35%); }

/* ---- topbar ------------------------------------------------------------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: -6px 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.crumb { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; color: var(--ink-faint);
  text-transform: uppercase; margin-right: auto; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.clock { text-align: right; line-height: 1.2; }
.clock #clock-time { font-size: 15px; color: var(--ink); }
.clock .clock-date { display: block; font-size: 10.5px; color: var(--ink-faint); font-family: var(--font-mono); }
.bell { position: relative; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink-dim); cursor: pointer; display: grid; place-items: center;
  transition: border-color .15s, color .15s, transform .12s; }
.bell svg { width: 19px; height: 19px; }
.bell:hover { border-color: var(--gold); color: var(--ink); }
.bell:active { transform: translateY(1px); }
.bell-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--critical); color: #fff; font-size: 10px; font-family: var(--font-mono);
  display: grid; place-items: center; border: 2px solid var(--bg); }
.avatar { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; color: #0a0f1f;
  background: radial-gradient(circle at 32% 28%, var(--jade-soft), var(--jade) 70%); }
.avatar:not(.signed-in) { background: radial-gradient(circle at 32% 28%, #393f57, #232944 70%); color: var(--ink-dim); }

/* ---- explainable grading: confidence, contributions, heatmap, review ---- */
.conf-chip { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; vertical-align: middle;
  font-family: var(--font-mono); border: 1px solid var(--line); margin-left: 6px; }
.conf-chip.ok { color: var(--jade-soft); border-color: var(--jade); }
.conf-chip.warn { color: var(--gold-soft); border-color: var(--gold); }
.conf-chip.crit { color: #f0a8a0; border-color: #b9544a; }
.review-banner { margin: 12px 0; padding: 10px 13px; border-radius: 10px; font-size: 12.5px;
  background: rgba(216,138,90,.12); border: 1px solid #b9744a; color: var(--gold-soft); }
.grade-explain { display: grid; grid-template-columns: 1.3fr .9fr; gap: 20px; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--line-soft); }
.ge-title { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--gold);
  margin: 0 0 12px; }
.contrib { margin-bottom: 11px; }
.contrib-head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; }
.contrib-detail { font-size: 11px; color: var(--ink-faint); margin-top: 3px; }
.heatgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; width: 160px;
  aspect-ratio: 1; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; padding: 3px; }
.heat-cell { border-radius: 3px; display: block; }
.review-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.review-actions .rv-btn { padding: 6px 12px; font-size: 12.5px; }
@media (max-width: 720px) { .grade-explain { grid-template-columns: 1fr; } }

/* ---- agentic assistant -------------------------------------------------- */
.agentic-toggle { border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-dim);
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.agentic-toggle:hover { border-color: var(--jade); color: var(--ink); }
.agentic-toggle.on { background: linear-gradient(180deg, var(--jade-soft), var(--jade)); color: #0a0f1f;
  border-color: var(--jade); font-weight: 600; }
.trace .seg.tool { background: rgba(34,211,238,.14); border-color: var(--jade); color: var(--jade-soft); }
.trace .seg.ok { color: var(--jade-soft); border-color: var(--jade); }
.trace .seg.danger { background: rgba(185,84,74,.16); border-color: #b9544a; color: #f0a8a0; }
.atrace { margin-top: 8px; font-size: 12px; }
.atrace summary { cursor: pointer; color: var(--ink-dim); }
.atrace-item { padding: 6px 0; border-top: 1px solid var(--line-soft); color: var(--ink-dim); }

/* ---- AI governance / LLMOps -------------------------------------------- */
.sev-tag { font-size: 10px; padding: 1px 7px; border-radius: 999px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px; }
.sev-critical { background: rgba(185,84,74,.2); color: #f0a8a0; }
.sev-warning { background: rgba(139,123,255,.2); color: var(--gold-soft); }
.sev-info { background: rgba(34,211,238,.16); color: var(--jade-soft); }
.cos-headline { font-size: 14px; font-weight: 600; padding: 10px 12px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--line); margin-bottom: 10px; }
.cos-headline.health-kritis { border-color: #b9544a; }
.cos-headline.health-perlu { border-color: var(--gold); }
.cos-narrative { white-space: pre-wrap; font-family: var(--font-body); font-size: 13px;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: 8px; padding: 11px;
  color: var(--ink-dim); margin: 0 0 10px; }
.cos-list { list-style: none; padding: 0; margin: 0; }
.cos-list li { padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.mini-kpis { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12.5px; color: var(--ink-dim); }
.gtable { width: 100%; border-collapse: collapse; font-size: 12px; }
.gtable th { text-align: left; color: var(--ink-faint); font-weight: 500; padding: 6px 8px;
  border-bottom: 1px solid var(--line); text-transform: uppercase; font-size: 10.5px; }
.gtable td { padding: 7px 8px; border-bottom: 1px solid var(--line-soft); color: var(--ink-dim); vertical-align: top; }
.kv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.score-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.score-val { font-family: var(--font-display); font-size: 30px; line-height: 1; }
.score-name { font-size: 12px; color: var(--ink-dim); margin: 6px 0 8px; }
.score-good, .score-a { color: var(--jade-soft); } .score-mid, .score-b { color: var(--gold-soft); }
.score-low, .score-c { color: #f0a8a0; }
.trust-grade, .grade-band-good, .grade-band-mid, .grade-band-low { font-family: var(--font-display);
  font-size: 15px; padding: 1px 10px; border-radius: 8px; margin-left: 8px; }
.grade-band-good { background: rgba(34,211,238,.18); color: var(--jade-soft); }
.grade-band-mid { background: rgba(139,123,255,.18); color: var(--gold-soft); }
.grade-band-low { background: rgba(185,84,74,.18); color: #f0a8a0; }
.scorecard-panel { margin-bottom: 16px; }
.release-panel { margin-bottom: 16px; }
#govern-shipment-panel { margin-bottom: 16px; }
.shipment-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.shipment-form label { display: flex; flex-direction: column; font-size: 11px; color: var(--ink-faint); gap: 4px; }
.shipment-form select, .shipment-form input { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); min-width: 120px; }
.ship-decision { font-family: var(--font-display); font-size: 20px; padding: 8px 14px; border-radius: 10px;
  display: inline-block; margin-bottom: 12px; }
.ship-decision.go { background: rgba(34,211,238,.18); color: var(--jade-soft); }
.ship-decision.nogo { background: rgba(185,84,74,.2); color: #f0a8a0; }
.lnk { color: var(--jade-soft); text-decoration: none; } .lnk:hover { text-decoration: underline; }
#govern-passport-panel, #govern-security-panel { margin-bottom: 16px; }
.pp-head { margin-bottom: 12px; }
.pp-grid { display: grid; grid-template-columns: 1fr 180px; gap: 18px; align-items: start; }
.pp-link { background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; }
.pp-stage { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--gold); }
.pp-data { font-size: 12.5px; color: var(--ink-dim); margin: 3px 0; }
.pp-hash { font-size: 10.5px; color: var(--ink-faint); }
.pp-arrow { text-align: center; color: var(--ink-faint); font-size: 12px; margin: 2px 0; }
.pp-qr { text-align: center; } .pp-qr img { width: 160px; height: 160px; background: #fff; border-radius: 8px; padding: 6px; }
@media (max-width: 720px) { .pp-grid { grid-template-columns: 1fr; } }
.sec-form { display: flex; gap: 10px; margin-bottom: 10px; }
.sec-form input { flex: 1; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font-size: 13px; }
.sec-samples { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.sec-chip { font-size: 11px; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink-dim); cursor: pointer; }
.sec-chip:hover { border-color: var(--critical); color: var(--ink); }
.sec-result { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); }
.sec-result.blocked { background: rgba(185,84,74,.12); border-color: #b9544a; }
.sec-result.pass { background: rgba(34,211,238,.1); border-color: var(--jade); }
.sec-verdict { font-family: var(--font-display); font-size: 15px; }
.sec-verdict.blocked { color: #f0a8a0; } .sec-verdict.pass { color: var(--jade-soft); }
.lvl { font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.lvl-L1 { background: rgba(155,179,169,.16); color: var(--ink-dim); }
.lvl-L2 { background: rgba(139,123,255,.18); color: var(--gold-soft); }
.release-badge { font-family: var(--font-display); font-size: 16px; padding: 3px 14px; border-radius: 9px; }
.release-badge.go { background: rgba(34,211,238,.2); color: var(--jade-soft); }
.release-badge.nogo { background: rgba(185,84,74,.2); color: #f0a8a0; }
.chk-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chk { font-size: 11.5px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line); }
.chk.ok { color: var(--jade-soft); border-color: var(--jade); }
.chk.bad { color: #f0a8a0; border-color: #b9544a; }
.whatif-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.whatif-form label { display: flex; flex-direction: column; font-size: 11px; color: var(--ink-faint); gap: 4px; }
.whatif-form input { width: 90px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); }
.wi-flags { list-style: none; padding: 0; margin: 10px 0 0; font-size: 12.5px; color: var(--gold-soft); }
.wi-flags li { padding: 4px 0; }
.flag-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.flag-row > div:first-child { flex: 1; }
.flag-switch { position: relative; width: 38px; height: 21px; flex: none; }
.flag-switch input { opacity: 0; width: 0; height: 0; }
.flag-track { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: .2s; cursor: pointer; }
.flag-track::before { content: ""; position: absolute; width: 15px; height: 15px; left: 3px; top: 3px;
  background: var(--ink-dim); border-radius: 50%; transition: .2s; }
.flag-switch input:checked + .flag-track { background: var(--jade); }
.flag-switch input:checked + .flag-track::before { transform: translateX(17px); background: #0a0f1f; }
.flag-pct { font-size: 11px; color: var(--ink-faint); width: 34px; text-align: right; }
.inc-status { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: 11.5px; }
/* i18n language toggle */
.lang-toggle { display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.lang-toggle button { background: transparent; border: 0; color: var(--ink-dim); padding: 5px 9px; font-size: 11.5px; cursor: pointer; }
.lang-toggle button.on { background: var(--panel-2); color: var(--ink); font-weight: 600; }

/* ---- provenance (P2.3) -------------------------------------------------- */
.kpi-prov { cursor: pointer; transition: border-color .15s, transform .12s; }
.kpi-prov:hover { border-color: var(--jade); transform: translateY(-2px); }
.prov-dot { font-size: 11px; color: var(--ink-faint); cursor: help; }
.prov-modal { max-width: 520px; }
.prov-row { margin: 12px 0; font-size: 13px; }
.prov-row b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--gold); margin-bottom: 3px; }
.prov-row ul { margin: 4px 0; padding-left: 18px; color: var(--ink-dim); }

/* ---- role-based view ribbon (P3) --------------------------------------- */
.role-ribbon { font-size: 12.5px; padding: 9px 16px; border-radius: 10px; margin-bottom: 18px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-dim); }
.role-ribbon b { color: var(--ink); }
.role-ribbon.role-auditor { border-color: var(--gold); background: rgba(139,123,255,.08); color: var(--gold-soft); }
.role-ribbon.role-executive { border-color: var(--jade); background: rgba(34,211,238,.07); }
/* auditor: visually de-emphasise primary write CTAs (server still enforces RBAC) */
body[data-role="auditor"] .btn.primary { filter: grayscale(.4) opacity(.75); }

/* ---- L2 Autonomous Execution ------------------------------------------- */
/* L1/L2 level toggle inside the Division Agents page */
.lvl-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.lvl-switch button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-dim); cursor: pointer;
  padding: 14px 16px; border-radius: 14px; text-align: left; transition: border-color .15s, background .15s; }
.lvl-switch button b { font-family: var(--font-display); font-size: 17px; color: var(--ink); }
.lvl-switch button span { font-size: 11.5px; color: var(--ink-faint); }
.lvl-switch button:hover { border-color: var(--jade); }
.lvl-switch button.on { box-shadow: inset 0 0 0 1px var(--jade); border-color: var(--jade); background: var(--panel-2); }
.lvl-switch button[data-lvl="l2"].on { box-shadow: inset 0 0 0 1px var(--gold); border-color: var(--gold);
  background: linear-gradient(180deg, rgba(139,123,255,.12), transparent); }
.lvl-switch button[data-lvl="l2"].on b { color: var(--gold-soft); }
#l1-advisory-panel { margin-bottom: 18px; }
.seg-input { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 10px; }
.seg-input button { border: 0; background: transparent; color: var(--ink-dim); padding: 6px 14px; border-radius: 8px;
  cursor: pointer; font-size: 12.5px; }
.seg-input button.on { background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.seg-extra { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.seg-extra input[type="text"] { flex: 1; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); }
.seg-extra select, #adv-division select { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; }
/* agent squad gallery */
#squad-panel { margin-bottom: 18px; }
.squad-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.squad-card { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 13px;
  border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; transition: border-color .12s, transform .12s; }
.squad-card:hover { transform: translateY(-2px); border-color: var(--ac, var(--jade)); }
.squad-card.sel { border-color: var(--ac, var(--gold)); box-shadow: inset 0 0 0 1px var(--ac, var(--gold)); }
.squad-card.auto { background: linear-gradient(180deg, rgba(139,123,255,.12), transparent); border-color: var(--gold); }
.squad-card.auto .squad-av { font-size: 26px; display: grid; place-items: center; }
.squad-av { width: 46px; height: 46px; flex: none; }
.squad-av svg { width: 46px; height: 46px; display: block; }
.sc-tag { font-size: 10.5px; color: var(--ink-faint); margin-top: 2px; }
.sq-result { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.sq-rh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.sq-badge { font-size: 10.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-dim); }
.sq-badge.ok { color: var(--jade-soft); border-color: var(--jade); }
.sq-badge.warn { color: var(--gold-soft); border-color: var(--gold); }
.sq-find { display: flex; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.sq-find:last-child { border-bottom: 0; }
.seg-preview { background: rgba(5,8,20,.5); border: 1px solid var(--line-soft); border-radius: 9px;
  padding: 10px 12px; margin-bottom: 10px; }
.seg-prev-h { font-size: 11px; color: var(--jade-soft); margin-bottom: 5px; font-family: var(--font-mono); }
.seg-prev-body { font-size: 12px; color: var(--ink-dim); white-space: pre-wrap; max-height: 180px; overflow: auto; }
.cmd-label { display: block; font-size: 12px; color: var(--gold-soft); margin: 6px 0 4px; }
.cmd-label textarea { margin-top: 5px; border-color: var(--gold); }
.adv-head { font-family: var(--font-display); font-size: 15px; margin: 14px 0 8px; }
.back-l1 { width: 100%; text-align: left; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--ink-dim); border-radius: 9px; padding: 8px 11px; font-size: 12.5px; cursor: pointer; margin-bottom: 6px; }
.back-l1:hover { border-color: var(--jade); color: var(--ink); }
.nav-lvl { margin-left: auto; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 5px;
  background: var(--line-soft); color: var(--ink-faint); letter-spacing: .5px; }
.nav-lvl.hot { background: rgba(139,123,255,.2); color: var(--gold-soft); }
.nav button.active .nav-lvl.hot { background: var(--gold); color: #ffffff; }
.l2-input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font-size: 14px; resize: vertical; margin-bottom: 12px; font-family: var(--font-body); }
.l2-form { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.l2-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--ink-faint); }
.l2-form select, .l2-form input { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); min-width: 130px; }
.l2-div { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.l2-div:last-child { border-bottom: 0; }
.l2-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.l2-metric { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.l2-metric .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-faint); }
.l2-metric .v { font-family: var(--font-display); font-size: 18px; margin-top: 3px; }
.ot-on_track { color: var(--jade-soft); } .ot-at_risk { color: var(--gold-soft); } .ot-breached { color: #f0a8a0; }
.l2-badge { font-size: 10.5px; padding: 2px 9px; border-radius: 999px; font-weight: 600; vertical-align: middle;
  background: var(--line-soft); color: var(--ink-dim); }
.l2-badge.st-running, .l2-badge.st-verifying { background: rgba(34,211,238,.18); color: var(--jade-soft); }
.l2-badge.st-completed { background: rgba(34,211,238,.2); color: var(--jade-soft); }
.l2-badge.st-awaiting_approval { background: rgba(139,123,255,.2); color: var(--gold-soft); }
.l2-badge.st-failed, .l2-badge.st-killed { background: rgba(185,84,74,.2); color: #f0a8a0; }
.l2-badge.st-escalated { background: rgba(216,138,90,.2); color: var(--gold-soft); }
.l2-actions { display: flex; align-items: center; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
.l2-levers { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.l2-timeline { margin-top: 8px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.l2-step { display: flex; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.l2-step:last-child { border-bottom: 0; }
.l2-step-ic { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); font-size: 12px; color: var(--ink-faint); }
.l2-step.st-done .l2-step-ic { border-color: var(--jade); color: var(--jade-soft); }
.l2-step.st-running .l2-step-ic { border-color: var(--gold); color: var(--gold-soft); animation: kg-pulse 1.4s ease-in-out infinite; }
.l2-step.st-failed .l2-step-ic { border-color: #b9544a; color: #f0a8a0; }
.l2-step-body { flex: 1; font-size: 13px; }
.l2-runrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.l2-runrow:hover { color: var(--ink); }
.l2-runrow:last-child { border-bottom: 0; }
/* Agent Map (multi-agent topology) */
.amap { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.amap-layer { display: flex; flex-direction: column; gap: 8px; min-width: 180px; }
.amap-layer.workers { flex: 1; min-width: 260px; }
.amap-ltitle { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-faint); margin-bottom: 2px; }
.amap-node { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel-2); }
.amap-node.human { border-color: var(--jade); }
.amap-node.orch { border-color: var(--gold); background: linear-gradient(180deg, rgba(139,123,255,.1), transparent); }
.amap-node.worker { cursor: pointer; transition: border-color .12s, transform .12s; }
.amap-node.worker:hover { border-color: var(--jade); transform: translateX(2px); }
.amap-node.worker.sel { border-color: var(--jade); box-shadow: inset 0 0 0 1px var(--jade); background: var(--panel); }
.amap-ic { font-size: 20px; flex: none; }
.amap-flow { display: flex; align-items: center; color: var(--ink-faint); font-size: 18px; padding: 0 2px; }
.amap-note { font-size: 9.5px; color: var(--ink-faint); font-family: var(--font-mono); text-align: center; }
.amap-pipe { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.amap-stage { flex: 1; min-width: 150px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; }
.amap-stage.gate { border-color: var(--gold); }
.amap-stage b { display: block; font-size: 12.5px; margin-bottom: 5px; }
.amap-stage span { font-size: 11px; color: var(--ink-faint); }
.amap-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.amap-chip { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-dim); }
.amap-chip.tool { border-color: var(--jade); color: var(--jade-soft); }
.amap-chip.skill { border-color: rgba(34,211,238,.5); color: var(--jade-soft); background: rgba(34,211,238,.08); }
.amap-chip.gate { border-color: var(--gold); color: var(--gold-soft); }
@media (max-width: 860px) { .amap, .amap-pipe { flex-direction: column; } .amap-flow { transform: rotate(90deg); } }

/* ---- Live Agent Operations Map (Theme B) ---- */
.ops-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0 18px; }
.ops-flow { text-align: center; color: var(--ink-faint); font-size: 12px; letter-spacing: .3px; margin: 12px 0; }
.ops-orch { display: flex; justify-content: center; }
.ops-orch .ops-card { max-width: 440px; width: 100%; }
.ops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ops-card { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; }
.ops-card[data-run] { cursor: pointer; transition: border-color .12s, transform .12s; }
.ops-card[data-run]:hover { border-color: var(--ac); transform: translateY(-2px); }
.ops-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ac); opacity: .55; }
.ops-card.idle { opacity: .72; }
.ops-card.live { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac) 45%, transparent), 0 8px 26px -16px var(--ac); }
.ops-card.block { border-color: var(--gold); }
.ops-card.block::before { background: var(--gold); opacity: 1; animation: opspulse 1.4s ease-in-out infinite; }
.ops-card.busy::before { animation: opspulse 1.8s ease-in-out infinite; opacity: 1; }
@keyframes opspulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.ops-head { display: flex; align-items: center; gap: 10px; }
.ops-av { width: 42px; height: 42px; flex: none; }
.ops-av svg { width: 42px; height: 42px; display: block; }
.ops-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ops-id b { font-size: 13.5px; }
.ops-id .muted { font-size: 10.5px; }
.ops-badge { margin-left: auto; font-size: 10px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-dim); white-space: nowrap; }
.ops-badge.busy { border-color: var(--jade); color: var(--jade-soft); background: rgba(34,211,238,.1); }
.ops-badge.block { border-color: var(--gold); color: var(--gold-soft); background: rgba(139,123,255,.12); }
.ops-badge.paused { border-color: var(--ink-faint); color: var(--ink-dim); }
.ops-run { font-size: 12px; }
.ops-run b { font-weight: 600; }
.ops-stats { display: flex; flex-wrap: wrap; gap: 5px 10px; font-size: 10.5px; color: var(--ink-faint); }
.ops-stats .mono { font-family: var(--font-mono); color: var(--jade-soft); }
.ops-ctrl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ops-btn { font-size: 10.5px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink-dim); cursor: pointer; transition: border-color .12s, color .12s; }
.ops-btn:hover { border-color: var(--jade); color: var(--ink); }
.ops-btn.warn:hover { border-color: var(--gold); color: var(--gold-soft); }
.ops-btn.danger:hover { border-color: #b9544a; color: #f0a8a0; }
@media (max-width: 720px) { .ops-bar { grid-template-columns: repeat(2, 1fr); } }

/* ---- Control Plane (Theme H) ---- */
.cp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 16px; }
.cp-grid > .panel:last-child { grid-column: 1 / -1; }
.cp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 4px 0 8px; }
.cp-pipe { margin: 6px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.cp-pipe li b { font-size: 12.5px; }
.cp-pipe li span { display: block; font-size: 11px; color: var(--ink-faint); }
.cp-dims { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.cp-dim { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: 8px; font-size: 11.5px; }
.cp-dim span { color: var(--ink-dim); }
.cp-dim b { text-align: right; font-family: var(--font-mono); }
.cp-bar { height: 7px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.cp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--jade), var(--jade-soft)); }
.cp-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.cp-tool { font-size: 10.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-dim); font-family: var(--font-mono); }
.cp-tool.se-write_real { border-color: #b9544a; color: #f0a8a0; }
.cp-tool.se-write_staged { border-color: var(--gold); color: var(--gold-soft); }
@media (max-width: 860px) { .cp-grid { grid-template-columns: 1fr; } }
.l2-upload { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.l2-inject { padding: 8px 12px; border-radius: 8px; font-size: 12.5px; margin-bottom: 10px; }
.l2-inject.ok { background: rgba(34,211,238,.1); border: 1px solid var(--jade); color: var(--jade-soft); }
.l2-inject.bad { background: rgba(185,84,74,.12); border: 1px solid #b9544a; color: #f0a8a0; }
.l2-check { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 12.5px; cursor: pointer; }
.l2-check input { margin-top: 3px; }
.l2-check.gate span { color: var(--gold-soft); }
.l2-check.skill b { color: var(--jade-soft); }
.l2-checks-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-faint); margin: 12px 0 4px; }
.l2-art { margin-top: 6px; font-size: 11.5px; }
.l2-art summary { cursor: pointer; color: var(--jade-soft); }
.l2-art pre { white-space: pre-wrap; background: rgba(5,8,20,.5); border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px; font-size: 11.5px; color: var(--ink-dim); margin: 6px 0; max-height: 320px; overflow: auto; }
.l2-inline-appr { background: rgba(139,123,255,.08); border: 1px solid var(--gold); border-radius: 12px; padding: 14px; margin: 12px 0; }
.risk-badge { font-size: 10.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); margin-left: 6px; white-space: nowrap; }
.risk-badge.low { border-color: var(--jade); color: var(--jade-soft); background: rgba(34,211,238,.1); }
.risk-badge.medium { border-color: var(--gold); color: var(--gold-soft); background: rgba(139,123,255,.1); }
.risk-badge.high { border-color: #d08a2e; color: #f0c07a; background: rgba(208,138,46,.14); }
.risk-badge.critical { border-color: #b9544a; color: #f0a8a0; background: rgba(185,84,74,.16); }
.l2-valid { margin: 6px 0; font-size: 11.5px; }
.l2-valid summary { cursor: pointer; color: var(--jade-soft); }
.l2-valid .vc { padding: 3px 0 3px 4px; color: var(--ink-dim); }
.l2-valid .vc b { color: var(--ink); font-weight: 600; font-family: var(--font-mono); font-size: 11px; }
.l2-valid .vc-fail { color: #f0a8a0; }
.l2-valid .vc-warn { color: var(--gold-soft); }
.l2-appr { border-bottom: 1px solid var(--line-soft); padding: 12px 0; }
.l2-appr:last-child { border-bottom: 0; }
.l2-appr-prev { white-space: pre-wrap; background: rgba(5,8,20,.5); border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px; font-size: 11.5px; color: var(--ink-dim); max-height: 260px; overflow: auto; margin: 6px 0; }
.l2-appr-act { display: flex; gap: 8px; margin-top: 8px; }
.rw-form { background: rgba(139,123,255,.07); border: 1px solid var(--gold); border-radius: 9px; padding: 10px 12px; margin: 8px 0; }
.rw-note { font-size: 11.5px; color: var(--gold-soft); margin-bottom: 8px; }
.rw-f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ink-faint); margin-bottom: 7px; }
.rw-f input { padding: 7px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }

/* ---- Data Lab + Forte --------------------------------------------------- */
.lab-status { padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink-dim); font-size: 13px; margin-bottom: 14px; }
.lab-status.ready { border-color: var(--jade); color: var(--jade-soft); }
.lab-ask { display: flex; gap: 10px; margin-bottom: 12px; }
.lab-ask input { flex: 1; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font-size: 14px; }
.lab-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.lab-frames { font-size: 11px; color: var(--ink-faint); margin-left: auto; }
.lab-cell { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; overflow: hidden;
  background: var(--panel); }
.lab-cell.lab-code { border-left: 3px solid var(--jade); }
.lab-cell.lab-markdown { border-left: 3px solid var(--gold); }
.lab-src { width: 100%; border: 0; background: #06181500; color: var(--ink); padding: 12px 14px;
  font-size: 13px; line-height: 1.5; resize: vertical; outline: none; display: block;
  background: rgba(5,8,20,.4); }
.lab-md { padding: 12px 16px; cursor: text; color: var(--ink-dim); font-size: 14px; }
.lab-md h2 { font-family: var(--font-display); font-size: 20px; margin: 4px 0 8px; color: var(--ink); }
.lab-md h3 { font-size: 16px; margin: 6px 0; color: var(--ink); }
.lab-md code { background: var(--line-soft); padding: 1px 5px; border-radius: 4px; font-family: var(--font-mono); }
.lab-cell-bar { display: flex; gap: 6px; padding: 7px 12px; background: var(--panel-2); border-top: 1px solid var(--line-soft); }
.lab-mini { font-size: 11.5px; padding: 4px 10px; border-radius: 7px; border: 1px solid var(--line);
  background: transparent; color: var(--ink-dim); cursor: pointer; }
.lab-mini:hover { border-color: var(--jade); color: var(--ink); }
.lab-mini.run { color: var(--jade-soft); border-color: var(--jade); }
.lab-mini.forte { color: var(--gold-soft); border-color: var(--gold); }
.lab-out { margin: 0; padding: 11px 14px; background: rgba(5,8,20,.55); border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); white-space: pre-wrap; overflow-x: auto; }
.lab-out.err { color: #f0a8a0; }
.lab-table { overflow-x: auto; max-height: 420px; overflow-y: auto; }
.lab-running { color: var(--jade-soft); display: flex; align-items: center; gap: 8px; }
.lab-shape { font-size: 10.5px; color: var(--ink-faint); font-family: var(--font-mono); margin-bottom: 4px; }
.lab-more { font-size: 10.5px; color: var(--ink-faint); margin-top: 4px; }
.lab-meta { font-size: 10px; color: var(--ink-faint); padding: 2px 14px 6px; }

/* Operasi Agen */
.ao-banner { margin: 12px 0 6px; font-size: 12px; color: var(--ink-dim); background: rgba(16,24,52,.5); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.ao-rt { color: var(--jade-soft); font-weight: 600; }
.ao-grid { display: grid; grid-template-columns: 300px 1fr 320px; gap: 14px; margin-top: 12px; align-items: start; }
.ao-col { padding: 14px; }
.ao-div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-left: 3px solid var(--ac); background: var(--panel-2); border-radius: 8px; margin-bottom: 6px; }
.ao-div-meta { font-size: 10.5px; color: var(--ink-faint); font-family: var(--font-mono); }
.ao-divclick { cursor: pointer; transition: border-color .12s, transform .1s; }
.ao-divclick:hover { transform: translateX(2px); box-shadow: -3px 0 0 var(--ac); }
.ao-db-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.ao-db-h { font-family: var(--font-display); font-weight: 550; font-size: 13px; margin: 12px 0 6px; }
.ao-db-job { font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.ao-db-rec { padding: 6px 0; border-left: 2px solid var(--gold); padding-left: 8px; margin-bottom: 5px; }
.ao-db-out { font-size: 11.5px; color: var(--ink-dim); padding: 3px 0; }
.ao-db-msg { font-size: 11.5px; padding: 4px 8px; border-radius: 8px; margin-bottom: 4px; background: var(--panel-2); }
.ao-db-msg b { color: var(--gold-soft); font-size: 10px; display: block; }
.ao-db-scroll { max-height: 160px; overflow-y: auto; }
.ao-badge { font-size: 9.5px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--line); }
.ao-assign { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.ao-assign h3 { font-size: 13px; font-family: var(--font-display); margin-bottom: 8px; }
.ao-assign textarea { min-height: 64px; margin: 8px 0; width: 100%; }
.ao-assign-row { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.ao-assign-row .search { flex: 1; min-width: 0; }
.ao-assign-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; }
.ao-assign-2col .search { width: 100%; min-width: 0; }
.ao-assign-btn { width: 100%; margin-top: 8px; }
.ao-up { display: block; font-size: 12px; padding: 7px 10px; margin: 4px 0; border: 1px dashed var(--border, #cbd5e1); border-radius: 8px; cursor: pointer; color: var(--muted, #64748b); text-align: center; }
.ao-up:hover { border-color: var(--accent, #2563eb); color: var(--ink, #0f172a); }
.ao-assign-row { display: flex; gap: 6px; margin-top: 6px; }
.ao-deliver { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border, #cbd5e1); border-left: 3px solid var(--accent, #2563eb); border-radius: 8px; background: rgba(37, 99, 235, 0.05); font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; }
.ao-deliver-h { font-weight: 600; margin-bottom: 4px; }
.ao-sprint { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin: 0 0 8px; border: 1px solid var(--border, #cbd5e1); border-radius: 9px; background: rgba(37, 99, 235, 0.04); font-size: 12.5px; }
.ao-sprint-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ao-sprint-cnt { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(37, 99, 235, 0.12); }
.ao-sprint-act { display: flex; gap: 6px; }
.ao-sprint-act .btn { padding: 4px 10px; font-size: 12px; }
.ao-db-doc { padding: 8px 10px; margin: 6px 0; border: 1px solid var(--border, #cbd5e1); border-left: 3px solid #16a34a; border-radius: 8px; }
.ao-db-doc-h { font-size: 12.5px; margin-bottom: 3px; }
.ao-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0; }
.ao-stat { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border: 1px solid var(--border, #cbd5e1); border-radius: 9px; background: rgba(127, 127, 127, 0.04); }
.ao-stat-n { font-size: 18px; font-weight: 650; font-family: var(--font-display, inherit); }
.ao-stat-l { font-size: 10.5px; color: var(--muted, #64748b); margin-top: 2px; text-align: center; }
.ao-spec { font-size: 12.5px; line-height: 1.6; padding: 8px 10px; border: 1px solid var(--border, #cbd5e1); border-radius: 9px; }
.ao-chip { display: inline-block; font-size: 11px; padding: 2px 8px; margin: 2px 2px 0 0; border-radius: 999px; background: rgba(37, 99, 235, 0.1); }
.ao-chip.expert { background: rgba(12,42,167, 0.12); }
/* --- Leaflet donut markers (#1) --- */
.lf-donut-wrap { background: none; border: none; }
.lf-donut { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.4); position: relative; }
.lf-donut::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: #0d1426; }
.lf-glyph-wrap { background: none; border: none; }
.lf-glyph { transform: rotate(45deg); border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.lf-regbub-lbl { background: none; border: none; text-align: center; }
.lf-regbub-lbl span { font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
/* --- Expansion detailed street map (Leaflet) --- */
#exp-leaflet { width: 100%; height: 62vh; min-height: 420px; border-radius: 12px; z-index: 1; background: #0d1426; }
.ins.clickable { cursor: pointer; transition: background .15s, transform .1s; }
.ins.clickable:hover { background: rgba(233, 185, 73, 0.08); transform: translateX(2px); }
.clus-cta { margin-top: 4px; font-size: 11px; color: var(--gold-soft, #e9b949); opacity: 0; transition: opacity .15s; }
.ins.clickable:hover .clus-cta { opacity: 1; }
#exp-leaflet .leaflet-tile { filter: saturate(0.85) brightness(0.92); }
.leaflet-container { font: inherit; background: #0d1426; }
/* --- Expansion street-map legend + scan --- */
.exp-street-legend { position: absolute; left: 12px; top: 12px; z-index: 500; background: rgba(13,20,38, 0.9); border: 1px solid var(--border, #2b3660); border-radius: 10px; padding: 9px 11px; font-size: 11.5px; max-width: 230px; max-height: calc(100% - 24px); overflow-y: auto; overscroll-behavior: contain; backdrop-filter: blur(4px); }
.exp-street-legend .sl-scan { width: 100%; margin-bottom: 7px; font-size: 12px; }
.exp-street-legend .sl-ctrl { display: flex; gap: 3px; margin: -9px -11px 7px; padding: 9px 11px 6px; flex-wrap: wrap; position: sticky; top: -9px; background: rgba(13,20,38, 0.97); z-index: 3; border-radius: 10px 10px 0 0; }
.exp-street-legend .sl-ctrl button { width: 28px; height: 28px; font-size: 13px; border: 1px solid var(--border, #2b3660); border-radius: 7px; background: rgba(255,255,255,0.04); color: #d6defa; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.exp-street-legend .sl-ctrl button:hover { border-color: var(--accent, #2563eb); }
.exp-street-legend .sl-ctrl button.on { background: rgba(37, 99, 235, 0.3); border-color: var(--accent, #2563eb); }
.exp-street-legend .sl-ctrl #exp-sl-close { margin-left: auto; color: #fca5a5; border-color: #7f1d1d; }
.exp-street-legend .sl-row { display: flex; align-items: center; gap: 7px; padding: 1px 0; color: #d6defa; }
.exp-street-legend .sl-row i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid #fff6; }
.exp-street-legend .sl-note { margin-top: 5px; font-size: 10px; color: #8f9ac2; line-height: 1.4; }
.exp-street-legend .sl-live { margin-top: 6px; border-top: 1px solid #ffffff14; padding-top: 5px; }
.exp-street-legend .sl-sub { margin: 5px 0 2px; font-size: 10px; font-weight: 600; color: #9fd9c9; letter-spacing: .02em; }
.exp-street-legend .sl-heat { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 9.5px; color: #8f9ac2; }
.exp-street-legend .sl-heatbar { flex: 1; height: 7px; border-radius: 4px; background: linear-gradient(90deg, #3b82f6, #22c55e, #f59e0b, #ef4444, #dc2626); }
.exp-street-legend .sl-layers { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.exp-street-legend .sl-lyr { font-size: 10.5px; padding: 3px 7px; border: 1px solid var(--border, #2b3660); border-radius: 7px; background: transparent; color: #d6defa; cursor: pointer; }
.exp-street-legend .sl-lyr:hover { border-color: var(--accent, #2563eb); }
.exp-street-legend .sl-lyr.on { background: rgba(37, 99, 235, 0.25); border-color: var(--accent, #2563eb); }
.radar-wrap { display: flex; justify-content: center; margin: 8px 0; }
.radar-svg { width: 180px; height: 176px; }
.lane-anim { stroke-dasharray: 8 8; animation: laneflow 1.1s linear infinite; }
@keyframes laneflow { to { stroke-dashoffset: -16; } }
.scan-list { margin-top: 10px; max-height: 56vh; overflow: auto; display: flex; flex-direction: column; gap: 5px; }
.scan-row { display: flex; align-items: flex-start; gap: 9px; padding: 7px 9px; border: 1px solid var(--border, #cbd5e1); border-radius: 9px; cursor: pointer; }
.scan-row:hover { border-color: var(--accent, #2563eb); background: rgba(37, 99, 235, 0.05); }
.scan-rank { font-weight: 700; font-family: var(--font-display, inherit); min-width: 18px; color: var(--muted, #64748b); }
.scan-dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 3px; flex: none; }
.scan-body { flex: 1; min-width: 0; }
.road-phase { padding: 8px 11px; margin: 6px 0; border: 1px solid var(--border, #cbd5e1); border-left: 3px solid #6366f1; border-radius: 9px; }
.road-hz { font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.road-mkts { display: flex; flex-wrap: wrap; gap: 3px; }
.cmp-opts { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 34vh; overflow: auto; }
.cmp-opt { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 5px 8px; border: 1px solid var(--border, #cbd5e1); border-radius: 8px; cursor: pointer; }
.cmp-opt input { accent-color: var(--accent, #2563eb); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.cmp-table th, .cmp-table td { border: 1px solid var(--border, #cbd5e1); padding: 6px 8px; text-align: left; vertical-align: top; }
.cmp-table thead th { background: rgba(127, 127, 127, 0.08); font-family: var(--font-display, inherit); }
.guide-table td { font-size: 11.5px; }
.guide-table .guide-grp td { background: rgba(45, 212, 191, 0.1); color: #9fd9c9; font-weight: 700; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; }
.guide-table tbody tr:hover td { background: rgba(127, 127, 127, 0.06); }
.src-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border: 1px solid; border-radius: 999px; white-space: nowrap; }
/* per-agent knowledge map (graph) */
.ag-kg-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.ag-kg-lg { font-size: 10.5px; color: #d6defa; display: inline-flex; align-items: center; gap: 4px; }
.ag-kg-lg i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ag-kg-wrap { position: relative; border: 1px solid var(--border, #2b3660); border-radius: 10px; background: radial-gradient(circle at 50% 45%, rgba(45,212,191,.06), transparent 70%), #0d1426; overflow: hidden; }
.ag-kg-svg { width: 100%; height: 460px; display: block; }
.ag-kg-wrap.full { position: fixed; inset: 16px; z-index: 9000; box-shadow: 0 20px 80px rgba(0,0,0,.6); }
.ag-kg-wrap.full .ag-kg-svg { height: 100%; }
.ag-kg-full { position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border, #2b3660); background: rgba(13,20,38,.85); color: #d6defa; cursor: pointer; font-size: 14px; line-height: 1; }
.ag-kg-full:hover { background: #151b34; color: #fff; }
.ag-kg-node { cursor: pointer; }
.ag-kg-node .ag-kg-lbl { opacity: 0; transition: opacity .12s; pointer-events: none; }
.ag-kg-node:hover .ag-kg-lbl { opacity: 1; }
.ag-kg-node:hover circle { stroke: #fff; }
.ag-kg-detail { margin-top: 8px; font-size: 12px; border: 1px solid var(--border, #2b3660); border-radius: 8px; padding: 8px 10px; background: rgba(127,127,127,.04); min-height: 38px; }
.ak-cluster { margin-bottom: 10px; border: 1px solid var(--border, #2b3660); border-radius: 8px; overflow: hidden; }
.ak-cluster-h { font-size: 12px; font-weight: 600; padding: 6px 10px; background: rgba(45,212,191,.08); border-bottom: 1px solid var(--border, #2b3660); }
.ak-row { display: grid; grid-template-columns: 78px 1fr auto; gap: 6px 10px; align-items: baseline; padding: 6px 10px; border-bottom: 1px solid rgba(127,127,127,.08); }
.ak-row:last-child { border-bottom: 0; }
.ak-chip { font-size: 10px; text-align: center; border-radius: 6px; padding: 1px 4px; align-self: center; white-space: nowrap; }
.ak-title { font-size: 12.5px; font-weight: 600; }
.ak-src { font-size: 10px; text-align: right; white-space: nowrap; }
.ak-snip { grid-column: 2 / 4; font-size: 11px; line-height: 1.35; }
/* ===== Kantor Agen (live office) ===== */
.office-stage { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; padding: 18px;
  background: linear-gradient(180deg, #131624 0%, #0e101c 70%, #0c1222 100%); border-radius: 12px;
  background-image: linear-gradient(180deg, rgba(45,212,191,.05), transparent 40%), repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.015) 38px 39px); }
.desk { position: relative; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; cursor: pointer; border-radius: 10px; padding-bottom: 8px; transition: transform .15s; }
.desk:hover { transform: translateY(-3px); background: rgba(255,255,255,.03); }
.agent-fig { position: relative; width: 46px; height: 60px; margin-bottom: -6px; z-index: 2; }
.a-face { position: absolute; left: 8px; top: -2px; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--c) 22%, #0c1222); box-shadow: 0 0 0 2px var(--c); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.a-torso { position: absolute; left: 8px; top: 24px; width: 30px; height: 28px; border-radius: 12px 12px 6px 6px; background: color-mix(in srgb, var(--c) 65%, #0c1222); }
.a-arm { position: absolute; top: 30px; width: 7px; height: 18px; border-radius: 6px; background: color-mix(in srgb, var(--c) 50%, #0c1222); transform-origin: top center; }
.a-arm.la { left: 4px; } .a-arm.ra { right: 4px; }
.a-prop { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 14px; }
.desk-top { width: 96px; height: 16px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #2b3660, #1b1e2c); box-shadow: 0 4px 0 #141620, 0 6px 10px rgba(0,0,0,.4); position: relative; z-index: 1; }
.desk-screen { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); width: 30px; height: 12px; border-radius: 2px; background: #0d1426; border: 1.5px solid #2b3660; }
.desk-label { margin-top: 10px; text-align: center; font-size: 11px; line-height: 1.35; }
.desk-label b { color: #e8f3ee; } .desk-label span { display: block; color: #8f9ac2; font-size: 10px; }
/* working: typing arms + screen glow + slight bob */
.desk.busy .desk-screen { background: var(--c); box-shadow: 0 0 8px var(--c); animation: scr 1.1s steps(2) infinite; }
.desk.busy .a-arm.la { animation: type 0.5s ease-in-out infinite alternate; }
.desk.busy .a-arm.ra { animation: type 0.5s ease-in-out -0.25s infinite alternate; }
.desk.busy .agent-fig { animation: bob 2.2s ease-in-out infinite; }
.desk.busy .desk-label span { color: var(--c); }
/* idle activities (time-aware) */
.desk.idle .agent-fig { animation: sway 4.5s ease-in-out infinite; }
.desk.act-coffee .a-prop, .desk.act-water .a-prop { animation: sip 3s ease-in-out infinite; }
.desk.act-coffee .a-arm.ra, .desk.act-water .a-arm.ra { animation: lift 3s ease-in-out infinite; }
.desk.act-read .agent-fig { animation: read 3.5s ease-in-out infinite; }
.desk.act-read .a-prop { animation: pageturn 1.8s steps(2) infinite; }
.desk.act-think .a-prop { animation: zzz 3s ease-in-out infinite; }
.desk.act-eat .a-arm.ra { animation: lift 1.4s ease-in-out infinite; }
.desk.act-sleep .agent-fig { animation: slump 5s ease-in-out infinite; opacity: .85; }
.desk.act-sleep .a-prop { animation: zzz 2.6s ease-in-out infinite; }
@keyframes type { from { transform: rotate(-8deg); } to { transform: rotate(14deg); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes scr { 0%,100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes sway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes slump { 0%,100% { transform: rotate(-3deg) translateY(2px); } 50% { transform: rotate(3deg) translateY(4px); } }
@keyframes sip { 0%,70%,100% { transform: translateX(-50%) translateY(0); } 35% { transform: translateX(-50%) translateY(8px); } }
@keyframes lift { 0%,70%,100% { transform: rotate(0deg); } 35% { transform: rotate(-55deg); } }
@keyframes read { 0%,100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes pageturn { 0%,100% { opacity: .8; } 50% { opacity: 1; transform: translateX(-50%) scale(1.1); } }
@keyframes zzz { 0% { opacity: .3; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(-50%, -4px); } 100% { opacity: .3; transform: translate(-50%, -8px); } }
/* time-of-day ambience */
.office-stage.tod-pagi { background: linear-gradient(180deg, #151b31 0%, #0f1325 70%); }
.office-stage.tod-siang { background: linear-gradient(180deg, #141a34 0%, #0f1222 70%); }
.office-stage.tod-sore { background: linear-gradient(180deg, #2a2a1e 0%, #141620 70%); }
.office-stage.tod-malam { background: linear-gradient(180deg, #0c1a26 0%, #0a0c18 70%); }
.office-history { padding: 10px 14px; max-height: 320px; overflow: auto; }
.office-3d { position: relative; width: 100%; height: 460px; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 50% 30%, #151b34, #0c1222); border: 1px solid var(--border, #2b3660); }
.office-3d canvas { display: block; cursor: grab; }
.o3d-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: #a5b0d6; font-size: 13px; }
.o3d-bubble { position: absolute; transform: translate(-50%, -100%); background: #0d1426; border: 1px solid var(--border, #2b3660); color: #f2f5ff; font-size: 11px; padding: 4px 8px; border-radius: 9px; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 16px rgba(0,0,0,.45); transition: opacity .2s; z-index: 3; }
.n-time { font-size: 10px; color: var(--ink-dim); white-space: nowrap; margin-right: 8px; align-self: center; }
/* Studio Kode (agent IDE) */
.cs-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 8px; }
.cs-bar .inp { padding: 7px 10px; } .cs-bar select.inp { max-width: 150px; }
.cs-out { font-size: 12.5px; line-height: 1.5; min-height: 18px; margin-bottom: 8px; }
.cs-out:empty { display: none; }
.cs-grid { display: grid; grid-template-columns: 230px 1fr; gap: 12px; height: 60vh; min-height: 380px; }
.cs-files { overflow: auto; padding: 0; } .cs-files .panel-head { padding: 8px 12px; }
.cs-tree, #cs-tree { padding: 4px; }
.cs-fitem { display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 7px; cursor: pointer; font-size: 12px; }
.cs-fitem:hover { background: rgba(45,212,191,.08); } .cs-fitem.on { background: rgba(45,212,191,.16); }
.cs-fn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono, monospace); }
.cs-fdel { background: none; border: 0; color: #a5b0d6; cursor: pointer; font-size: 11px; opacity: .5; }
.cs-fitem:hover .cs-fdel { opacity: 1; }
.cs-fdir { font-size: 12px; padding: 5px 8px; border-radius: 7px; cursor: pointer; color: #c7d2fe; font-weight: 600; user-select: none; }
.cs-fdir:hover { background: rgba(45,212,191,.06); }
.modal-ov { position: fixed; inset: 0; background: rgba(4,5,10,.66); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 120; padding: 20px; }
.modal-card { background: #0c0e1a; border: 1px solid rgba(45,212,191,.3); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.6); padding: 16px 18px; width: 100%; max-height: 86vh; overflow: auto; }
.cs-extrow { display: flex; gap: 10px; align-items: flex-start; padding: 9px 8px; border-radius: 10px; cursor: pointer; }
.cs-extrow:hover { background: rgba(45,212,191,.06); }
.cs-extrow input { margin-top: 3px; } .cs-exti { font-size: 17px; }
.cs-oplist { max-height: 38vh; overflow: auto; border: 1px solid rgba(45,212,191,.15); border-radius: 10px; padding: 4px; }
.cs-oprow { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; }
.cs-oprow:hover { background: rgba(45,212,191,.05); }
.cs-opk { font-size: 11px; min-width: 78px; }
/* Dashboard Realtime */
.dash-live { font-size: 12px; color: #2dd4bf; vertical-align: middle; animation: dashpulse 1.8s ease-in-out infinite; }
@keyframes dashpulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.dash-bar { display: flex; align-items: center; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.dash-auto { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #c7d2fe; }
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.rt-kpi { background: rgba(12,14,26,.7); border: 1px solid rgba(45,212,191,.16); border-radius: 12px; padding: 11px 13px; }
.rt-kpi.warn { border-color: rgba(233,185,73,.4); } .rt-kpi.ok { border-color: rgba(45,212,191,.4); }
.rt-kl { font-size: 11px; color: #a5b0d6; margin-bottom: 5px; }
.rt-kv { font-size: 20px; font-weight: 700; color: #f2f5ff; }
.rt-delta { font-size: 11px; font-weight: 600; margin-left: 4px; }
.rt-delta.up { color: #34d399; } .rt-delta.down { color: #fb7185; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rt-card { background: rgba(10,12,23,.7); border: 1px solid rgba(45,212,191,.16); border-radius: 14px; padding: 14px; }
.rt-span2 { grid-column: span 2; }
.rt-h { font-size: 12.5px; font-weight: 600; color: #c7d2fe; margin-bottom: 10px; }
.rt-gauge svg, .rt-donut svg { width: 130px; height: 130px; display: block; margin: 0 auto; }
.rt-donut { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rt-legs { display: flex; flex-direction: column; gap: 5px; }
.rt-leg { font-size: 11.5px; color: #d6defa; display: flex; align-items: center; gap: 6px; }
.rt-leg span { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.rt-bar { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 11.5px; }
.rt-bl { width: 92px; color: #d6defa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-bt { flex: 1; height: 9px; background: #151b31; border-radius: 6px; overflow: hidden; }
.rt-bf { display: block; height: 100%; border-radius: 6px; transition: width .6s ease; }
.rt-bv { width: 56px; text-align: right; color: #f2f5ff; font-weight: 600; }
.rt-feed { display: flex; flex-direction: column; gap: 4px; }
.rt-feeditem { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid rgba(45,212,191,.06); font-size: 12px; }
.rt-dot { width: 8px; height: 8px; border-radius: 50%; background: #2dd4bf; flex-shrink: 0; }
.rt-dot.critical, .rt-dot.high { background: #fb7185; } .rt-dot.warning, .rt-dot.medium { background: #e9b949; }
.rt-ft { flex: 1; color: #d7ece5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-fm { font-size: 10px; color: #7d958d; flex-shrink: 0; }
@media (max-width: 640px) { .rt-span2 { grid-column: span 1; } }
/* Menu Kustom */
#nav-cm { display: flex; flex-direction: column; }
.cm-navbtn { display: flex; align-items: center; gap: 8px; }
.cm-ico { width: 18px; text-align: center; }
.cm-actions { display: flex; gap: 8px; align-items: center; margin: 10px 0 14px; flex-wrap: wrap; }
.cm-tile { cursor: pointer; text-align: center; transition: transform .15s, border-color .15s; }
.cm-tile:hover { transform: translateY(-2px); border-color: rgba(45,212,191,.5); }
.cm-span { grid-column: 1 / -1; }
.cm-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cm-table th, .cm-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid rgba(45,212,191,.1); }
.cm-table th { color: #c7d2fe; }
.db-launch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 16px; padding: 10px 12px; background: rgba(12,14,26,.5); border: 1px solid rgba(45,212,191,.16); border-radius: 12px; }
.preview-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 180px; color: #6f8b83; border: 1.5px dashed rgba(45,212,191,.25); border-radius: 12px; padding: 18px; text-align: center; font-size: 13px; }
.ac-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 12px; }
.ac-out { min-height: 20px; }
.ac-out .dash-grid { margin-top: 4px; }
/* Key pool (governance) */
#govern-keys { padding-bottom: 14px; }
.kp-sub { font-size: 12px; padding: 0 14px 10px; }
.kp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 14px; }
@media (max-width: 720px) { .kp-grid { grid-template-columns: 1fr; } }
.kp-key { background: rgba(12,14,26,.6); border: 1px solid rgba(45,212,191,.18); border-radius: 12px; padding: 11px 13px; }
.kp-key.off { border-style: dashed; opacity: .7; }
.kp-slot { font-size: 10.5px; letter-spacing: .08em; color: #7d958d; }
.kp-mid { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 13px; color: #f2f5ff; }
.kp-meta { font-size: 11px; }
.kp-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.kp-dot.ok { background: #34d399; box-shadow: 0 0 6px #34d39988; }
.kp-dot.bad { background: #fb7185; } .kp-dot.idle { background: #6b8079; }
.kp-row { padding: 10px 14px 0; font-size: 12px; color: #a5b0d6; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kp-pool { background: rgba(45,212,191,.08); border-radius: 8px; padding: 3px 9px; }
.kp-pool b { color: #f2f5ff; }
.kp-prov { padding: 2px 8px; border-radius: 8px; font-size: 11.5px; }
.kp-prov.on { background: rgba(52,211,153,.16); color: #34d399; } .kp-prov.off { background: rgba(125,149,141,.14); color: #8f9ac2; }
.kp-actions { padding: 12px 14px 0; display: flex; align-items: center; gap: 10px; }
/* Database Agen — clean section headers + autonomous feed */
.db-sec { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 10px; padding-bottom: 7px; border-bottom: 1px solid rgba(45,212,191,.14); }
.db-sec h4 { margin: 0; font-size: 15px; color: #f2f5ff; font-weight: 600; }
.db-sec .muted { font-size: 11.5px; }
.ao-db-live { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #9fd6c6; margin-top: 4px; }
.db-autofeed { display: flex; flex-direction: column; gap: 2px; }
.db-auto-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; }
.db-auto-row:nth-child(odd) { background: rgba(45,212,191,.04); }
.db-auto-row b { color: #f2f5ff; }
.db-auto-t { margin-left: auto; font-size: 10.5px; color: #7d958d; white-space: nowrap; }
/* Database Agen — knowledge tools */
.db-kbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.db-kres-h { font-size: 11.5px; margin: 4px 0 6px; }
.db-kres { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 9px; cursor: pointer; border: 1px solid rgba(45,212,191,.1); margin-bottom: 6px; }
.db-kres:hover { background: rgba(45,212,191,.05); border-color: rgba(45,212,191,.3); }
.db-kbadge { font-size: 10.5px; padding: 3px 8px; border-radius: 7px; white-space: nowrap; flex-shrink: 0; font-weight: 600; }
.db-kres-t { flex: 1; }
.db-cov-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 6px 0 8px; }
.db-cov { font-size: 11px; padding: 3px 9px; border-radius: 8px; border: 1px solid; background: rgba(255,255,255,.02); }
.db-ktotal { font-size: 11.5px; margin-bottom: 10px; }
.db-krow { display: grid; grid-template-columns: 150px 1fr 36px auto; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid rgba(45,212,191,.06); }
.db-kname { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-kgbar { display: block; height: 8px; background: #151b31; border-radius: 5px; overflow: hidden; margin: 0; }
.db-kgbar-f { display: block; height: 100%; background: #2dd4bf; border-radius: 5px; }
.db-kn { text-align: right; font-weight: 700; color: #f2f5ff; font-size: 13px; }
.db-kchips { display: flex; flex-wrap: wrap; gap: 4px; }
.db-kchip { font-size: 10px; padding: 2px 7px; border-radius: 6px; }
@media (max-width: 720px) { .db-krow { grid-template-columns: 1fr auto; } .db-krow .db-kgbar, .db-krow .db-kchips { grid-column: 1 / -1; } }
/* Loop Agentik */
.al-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; padding: 8px 14px 12px; }
@media (max-width: 720px) { .al-checks { grid-template-columns: 1fr; } }
.al-chk { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: #d6defa; }
.al-tick { color: #34d399; font-weight: 700; }
.al-stage { margin: 10px 0; padding: 10px 12px; background: rgba(12,14,26,.5); border-left: 3px solid #2dd4bf; border-radius: 8px; }
.al-stage h4 { margin: 0 0 6px; font-size: 12.5px; color: #c7d2fe; }
.al-plan { margin: 0; padding-left: 20px; font-size: 12.5px; }
.al-plan li { margin: 3px 0; }
.al-exec { display: flex; gap: 8px; align-items: baseline; padding: 5px 0; font-size: 12.5px; border-bottom: 1px solid rgba(45,212,191,.06); }
.al-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.al-dot.ok { background: #34d399; } .al-dot.bad { background: #fb7185; } .al-dot.idle { background: #6b8079; }
.al-estep { font-weight: 600; color: #f2f5ff; }
.al-esum { font-size: 11.5px; }
/* Studio Kode — agent console / bash terminal */
.cs-console { margin-top: 12px; padding: 0; overflow: hidden; }
.cs-con-head { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: #0a0c15; border-bottom: 1px solid rgba(45,212,191,.12); }
.cs-con-dots { display: flex; gap: 5px; }
.cs-con-dots i { width: 10px; height: 10px; border-radius: 50%; background: #2b3660; }
.cs-con-dots i:nth-child(1) { background: #fb7185; } .cs-con-dots i:nth-child(2) { background: #e9b949; } .cs-con-dots i:nth-child(3) { background: #34d399; }
.cs-con-title { font-size: 12px; color: #a5b0d6; font-family: var(--mono, monospace); flex: 1; }
.cs-con-body { max-height: 300px; overflow: auto; padding: 10px 14px; background: #060810; font-family: var(--mono, monospace); font-size: 12.5px; line-height: 1.55; }
.cs-con-idle { font-size: 12px; }
.cs-con-line { white-space: pre-wrap; word-break: break-word; animation: csconin .18s ease; }
@keyframes csconin { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.cs-con-meta { color: #5f7a72; font-size: 11px; margin-top: 6px; }
.cs-con-think { color: #a78bfa; }
.cs-con-dollar { color: #34d399; font-weight: 700; }
.cs-con-cmd { color: #d7ece5; }
.cs-con-note { color: #7d9a90; }
.cs-con-ok { color: #34d399; font-weight: 600; }
.cs-con-done { margin-top: 4px; color: #d6defa; }
.cs-editor { display: flex; flex-direction: column; padding: 0; } .cs-editor .panel-head { padding: 7px 12px; }
#cs-code { flex: 1; width: 100%; resize: none; border: 0; background: #0a0c17; color: #d7ece5; font-family: var(--mono, monospace); font-size: 12.5px; line-height: 1.5; padding: 12px; border-radius: 0 0 12px 12px; outline: none; tab-size: 2; }
.o3d-status { position: absolute; transform: translate(-50%, -50%); font-size: 9.5px; color: #d6defa; background: rgba(8,11,24,.7); border: 1px solid rgba(45,212,191,.25); padding: 1px 6px; border-radius: 7px; white-space: nowrap; pointer-events: none; z-index: 2; transition: opacity .2s; }
.office-3d:fullscreen, .office-3d:-webkit-full-screen { width: 100vw; height: 100vh; border-radius: 0; }
#office-follow-btn.on, #office-drag-btn.on { background: var(--jade); color: #0b1430; }
.o3d-chat { position: absolute; left: 12px; top: 12px; width: 300px; max-height: 70%; display: flex; flex-direction: column; background: rgba(8,11,24,.95); border: 1px solid var(--jade); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.55); z-index: 25; overflow: hidden; }
.o3d-chat-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--border, #2b3660); font-size: 13px; color: var(--jade); }
.o3d-chat-h button { background: none; border: 0; color: #a5b0d6; cursor: pointer; font-size: 13px; }
.o3d-chat-log { flex: 1; overflow: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.o3d-msg { font-size: 12px; line-height: 1.45; }
.o3d-msg.me { color: #d6defa; } .o3d-msg.ag { color: #f2f5ff; }
.o3d-chat-bar { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border, #2b3660); }
.o3d-chat-bar input { flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; font-size: 12px; padding: 6px 8px; }
.o3d-chat-bar button { background: var(--panel-2); border: 1px solid var(--line); color: #d6defa; border-radius: 8px; cursor: pointer; padding: 6px 10px; font-size: 12px; }
.o3d-chat-bar button.primary { background: var(--jade); color: #0b1430; border-color: var(--jade); }
.o3d-chat-bar button.rec { background: #fb7185; color: #fff; }
.o3d-menu { position: absolute; z-index: 20; min-width: 168px; background: rgba(8,11,24,.96); border: 1px solid var(--jade); border-radius: 10px; padding: 6px; box-shadow: 0 12px 34px rgba(0,0,0,.55); }
.o3d-menu-h { font-size: 12px; font-weight: 700; color: var(--jade); padding: 3px 8px 6px; border-bottom: 1px solid var(--border, #2b3660); margin-bottom: 4px; }
.o3d-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; color: #d6defa; font-size: 12px; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.o3d-menu button:hover { background: rgba(45,212,191,.14); color: #fff; }
.o3d-mini { position: absolute; top: 10px; right: 10px; z-index: 6; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.o3d-mini canvas { border-radius: 9px; border: 1px solid rgba(45,212,191,.4); box-shadow: 0 8px 22px rgba(0,0,0,.5); cursor: pointer; }
.o3d-mini-all { background: rgba(8,11,24,.92); border: 1px solid var(--jade); color: var(--jade); font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 8px; cursor: pointer; }
.o3d-mini-all:hover { background: rgba(45,212,191,.16); color: #fff; }
.o3d-build-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.o3d-build-body select, .o3d-build-body textarea { width: 100%; background: rgba(6,8,20,.7); border: 1px solid var(--border, #2b3660); color: #f2f5ff; border-radius: 8px; padding: 8px; font: inherit; font-size: 12.5px; }
.o3d-build-tg { font-size: 12px; display: flex; gap: 6px; align-items: center; color: #d6defa; }
#o3d-build-out { font-size: 12px; }
.o3d-director { width: min(420px, 92vw); }
.o3d-dir-body { padding: 10px; display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; }
.o3d-dir-sec > b { display: block; font-size: 12px; color: var(--jade); margin-bottom: 6px; }
.o3d-dir-sec textarea { width: 100%; background: rgba(6,8,20,.7); border: 1px solid var(--border, #2b3660); color: #f2f5ff; border-radius: 8px; padding: 8px; font: inherit; font-size: 12.5px; margin-bottom: 6px; }
.o3d-dir-list { display: flex; flex-direction: column; gap: 6px; }
.o3d-dir-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: rgba(17,24,52,.5); border: 1px solid var(--border, #2b3660); border-radius: 9px; padding: 7px 9px; }
.o3d-dir-info { min-width: 0; font-size: 12.5px; }
.o3d-dir-work { font-size: 10.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.o3d-dir-acts { display: flex; gap: 4px; align-items: center; flex: none; }
.o3d-dir-acts button { background: rgba(45,212,191,.12); border: 1px solid var(--border, #2b3660); color: #d6defa; border-radius: 7px; padding: 3px 7px; cursor: pointer; font-size: 12px; }
.o3d-dir-acts button:hover { background: rgba(45,212,191,.25); color: #fff; }
.o3d-dir-acts select { background: rgba(6,8,20,.7); border: 1px solid var(--border, #2b3660); color: #d6defa; border-radius: 7px; font-size: 11px; padding: 2px; }
.office-voice { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 4px; }
.office-voice .inp { min-width: 180px; }
.office-tts-tog { font-size: 11px; color: #a5b0d6; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
#office-mic.listening { animation: micpulse 1s infinite; }
@keyframes micpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(251,113,133,.5); } 50% { box-shadow: 0 0 0 7px rgba(251,113,133,0); } }
.office-voice-log { font-size: 12px; min-height: 18px; padding: 2px 2px 6px; line-height: 1.4; }
.desk-voice { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--border, #2b3660); background: rgba(13,20,38,.7); color: #d6defa; cursor: pointer; font-size: 12px; line-height: 1; opacity: 0; transition: opacity .12s; }
.desk:hover .desk-voice { opacity: 1; }
.desk-voice:hover { background: #151b34; color: #fff; }
.office-openlink { display: inline-block; background: var(--jade); color: #0b1430; font-weight: 600; padding: 2px 10px; border-radius: 7px; text-decoration: none; margin: 2px 0; }
.office-openlink:hover { filter: brightness(1.08); }
.desk { position: relative; }
.office-bubble { position: absolute; left: 50%; transform: translateX(-50%); bottom: 100%; margin-bottom: 6px;
  background: #0d1426; border: 1px solid var(--border, #2b3660); color: #e6f2ee; font-size: 10.5px; line-height: 1.3;
  padding: 6px 9px; border-radius: 10px; width: max-content; max-width: 180px; z-index: 5; box-shadow: 0 6px 18px rgba(0,0,0,.4);
  animation: bubblein .2s ease; }
.office-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #0d1426; }
@keyframes bubblein { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.desk.office-waking { animation: wakeup .5s ease; }
@keyframes wakeup { 0% { transform: scale(1); } 30% { transform: scale(1.08) rotate(-2deg); } 60% { transform: scale(1.04) rotate(2deg); } 100% { transform: scale(1); } }
/* #2 livelier office: ambient pantry, inter-agent chatter, leaning & wandering */
.office-ambient { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; justify-content: center;
  font-size: 16px; padding: 6px 10px; margin-bottom: 4px; border-radius: 9px; opacity: .85;
  background: linear-gradient(180deg, rgba(45,212,191,.06), transparent); border: 1px dashed var(--border, #2b3660); }
.office-ambient .muted { font-size: 10.5px; letter-spacing: .04em; }
.desk.chatting { z-index: 6; }
.desk.chatting .agent-fig { animation: chatnod 1s ease-in-out infinite; }
@keyframes chatnod { 0%,100% { transform: rotate(0); } 50% { transform: rotate(3deg) translateY(-1px); } }
.desk.lean-r .agent-fig { transform: translateX(10px) rotate(7deg); transition: transform .4s ease; }
.desk.lean-l .agent-fig { transform: translateX(-10px) rotate(-7deg); transition: transform .4s ease; }
.desk.walking .agent-fig { animation: wander 4.6s ease-in-out; z-index: 7; }
@keyframes wander {
  0% { transform: translateX(0) scale(1); }
  18% { transform: translateX(-46px) scale(.96); }
  22% { transform: translateX(-46px) scaleX(-1) scale(.96); }
  50% { transform: translateX(46px) scaleX(-1) scale(.94); }
  55% { transform: translateX(46px) scaleX(1) scale(.94); }
  82% { transform: translateX(-10px) scale(.97); }
  100% { transform: translateX(0) scale(1); }
}
.office-hrow { font-size: 12px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.oh-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .desk * { animation: none !important; } }
/* --- Expansion visual deck (Chart.js) --- */
.intel-card.dk { max-height: 72vh; overflow: auto; }
.dk-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border, #2b3660); padding-bottom: 6px; margin-bottom: 8px; position: sticky; top: 0; background: var(--panel, #111a33); z-index: 2; }
.dk-tab { font-size: 11.5px; padding: 4px 10px; border-radius: 7px; border: 1px solid transparent; background: rgba(127,127,127,.08); color: #a5b0d6; cursor: pointer; }
.dk-tab:hover { color: #d6defa; }
.dk-tab.on { background: rgba(45,212,191,.16); border-color: rgba(45,212,191,.4); color: #d7fff4; font-weight: 600; }
.dk-panel { display: none; }
.dk-panel.on { display: block; }
.dk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.dk-chart-box { border: 1px solid var(--border, #2b3660); border-radius: 10px; padding: 8px 10px 6px; background: rgba(127, 127, 127, 0.04); }
.dk-cb-h { font-size: 11.5px; font-weight: 600; color: var(--muted, #a5b0d6); margin-bottom: 4px; }
.dk-cv { position: relative; height: 150px; }
@media (max-width: 560px) { .dk-grid { grid-template-columns: 1fr; } }
/* --- Expansion visual deck (legacy SVG fallback) --- */
.dk-cells { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-around; margin: 8px 0; }
.dk-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--gold-soft, #e9b949); }
.dk-gauge { width: 84px; height: 84px; }
.dk-lbl { font-size: 10.5px; color: var(--muted, #64748b); text-align: center; }
.dk-sec { margin-top: 10px; }
.dk-sec-h { font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.dk-bars { display: flex; flex-direction: column; gap: 5px; }
.dk-bar { display: flex; align-items: center; gap: 7px; font-size: 11.5px; }
.dk-bl { width: 110px; flex: none; color: var(--muted, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-bt { flex: 1; height: 9px; border-radius: 5px; background: rgba(127, 127, 127, 0.14); overflow: hidden; }
.dk-bt i { display: block; height: 100%; border-radius: 5px; }
.dk-bv { width: 38px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.dk-donut-wrap { display: flex; align-items: center; gap: 12px; }
.dk-donut { width: 86px; height: 86px; border-radius: 50%; flex: none; position: relative; }
.dk-donut::after { content: ""; position: absolute; inset: 24px; border-radius: 50%; background: var(--panel, #111a33); }
.dk-legend { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; }
.dk-leg { display: flex; align-items: center; gap: 5px; }
.dk-leg i { width: 10px; height: 10px; border-radius: 3px; }
.dk-swot { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dk-swot-q { border: 1px solid; border-radius: 8px; padding: 6px 8px; font-size: 11px; line-height: 1.5; }
.dk-swot-h { font-weight: 600; margin-bottom: 2px; }
.dk-ref { padding: 6px 9px; margin: 4px 0; border: 1px solid var(--border, #cbd5e1); border-left: 3px solid #0ea5e9; border-radius: 8px; font-size: 12px; }
/* --- Expansion market intelligence dossier --- */
.intel-lang { display: flex; justify-content: flex-end; align-items: center; gap: 5px; font-size: 12px; margin-top: 6px; }
.intel-lang select { padding: 3px 8px; border-radius: 7px; border: 1px solid var(--border, #cbd5e1); background: transparent; color: inherit; font: inherit; }
.intel-card { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border, #cbd5e1); border-radius: 11px; background: rgba(127, 127, 127, 0.04); }
.intel-summary { font-size: 13px; line-height: 1.5; margin: 0 0 8px; }
.intel-sec { margin-top: 10px; }
.intel-h { font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.intel-comp, .intel-risk, .intel-cluster { padding: 6px 9px; margin: 4px 0; border: 1px solid var(--border, #cbd5e1); border-radius: 8px; font-size: 12.5px; }
.intel-comp { border-left: 3px solid #6366f1; }
.intel-cluster { border-left: 3px solid #16a34a; }
.intel-risk { display: flex; flex-direction: column; }
.intel-risk .sev-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.intel-list { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; }
.intel-reco { margin-top: 10px; padding: 8px 11px; border-radius: 9px; background: rgba(22, 163, 74, 0.1); font-size: 12.5px; }
.intel-viz { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.iv-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 48px; }
.iv-n { font-size: 16px; font-weight: 650; font-family: var(--font-display, inherit); }
.iv-l { font-size: 10px; color: var(--muted, #64748b); text-align: center; }
.iv-ring { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--jade, #34d399) calc(var(--p) * 1%), rgba(127,127,127,0.18) 0); }
.iv-ring span { width: 32px; height: 32px; border-radius: 50%; background: var(--panel, #111a33); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.iv-riskbar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; margin-bottom: 8px; background: rgba(127,127,127,0.12); }
.iv-riskbar i { display: block; }
.swot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.swot-col { padding: 7px 9px; border: 1px solid var(--border, #cbd5e1); border-radius: 8px; font-size: 11.5px; line-height: 1.5; }
.swot-h { font-weight: 600; margin-bottom: 3px; }
/* --- Agent Studio: avatar picker + skill --- */
.ava-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.ava-opt { width: 36px; height: 36px; font-size: 18px; border: 1px solid var(--border, #cbd5e1); border-radius: 9px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ava-opt:hover { background: rgba(127, 127, 127, 0.08); }
.ava-opt.on { border-color: var(--accent, #2563eb); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25); }
.col-opt { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.col-opt.on { border-color: var(--ink, #0f172a); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15); }
.sc-ava { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 21px; flex: none; margin-right: 10px; }
.sc-pers { font-size: 11.5px; margin: 4px 0; font-style: italic; }
.ao-db-sprint { padding: 8px 10px; margin: 6px 0; border: 1px solid var(--border, #cbd5e1); border-left: 3px solid #6366f1; border-radius: 8px; }
.ao-db-sprint-h { font-size: 12.5px; margin-bottom: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ao-db-sprint-j { font-size: 11.5px; padding: 1px 0; }
.ao-db-know { padding: 6px 9px; margin: 5px 0; border: 1px solid var(--border, #cbd5e1); border-left: 3px solid #0ea5e9; border-radius: 8px; font-size: 12px; }
@media (max-width: 560px) { .ao-stats { grid-template-columns: repeat(2, 1fr); } }
/* --- Database Agen landing (sidebar view) --- */
.db-kpis { grid-template-columns: repeat(6, 1fr); margin-bottom: 14px; }
.db-sprints { display: flex; flex-direction: column; gap: 5px; }
.db-sprint-row { font-size: 12.5px; padding: 7px 10px; border: 1px solid var(--border, #cbd5e1); border-radius: 8px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.db-recent { display: flex; flex-direction: column; gap: 6px; }
.db-recent .ao-db-doc { cursor: pointer; }
.db-recent .ao-db-doc:hover { border-color: var(--accent, #2563eb); }
@media (max-width: 720px) { .db-kpis { grid-template-columns: repeat(3, 1fr); } }
/* --- Database Agen menu (sidebar view) --- */
.ao-db-menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ao-db-card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border: 1px solid var(--border, #cbd5e1); border-radius: 12px; background: transparent; cursor: pointer; transition: border-color .15s, transform .1s; }
.ao-db-card:hover { border-color: var(--accent, #2563eb); transform: translateY(-1px); }
.ao-db-card-ava { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex: none; }
.ao-db-card-body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.ao-db-card-body b { font-size: 14px; }
.ao-db-card-body .muted { font-size: 12px; }
.ao-db-card-meta { font-size: 11px !important; }
.ao-db-card-go { font-size: 18px; color: var(--muted, #64748b); flex: none; }
@media (max-width: 720px) { .ao-db-menu { grid-template-columns: 1fr; } }
.ao-doc-grp { margin-bottom: 12px; }
.ao-doc-grp-h { font-size: 12px; font-weight: 600; padding: 5px 9px; margin-bottom: 6px; border-radius: 7px; background: rgba(22, 163, 74, 0.1); }
/* --- Database Agen dashboard --- */
.ao-db-mono { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.ao-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin: 10px 0; }
.ao-kpi { display: flex; flex-direction: column; align-items: center; padding: 7px 3px; border: 1px solid var(--border, #cbd5e1); border-radius: 9px; background: rgba(127, 127, 127, 0.04); }
.ao-kpi-n { font-size: 17px; font-weight: 650; font-family: var(--font-display, inherit); }
.ao-kpi-l { font-size: 9.5px; color: var(--muted, #64748b); margin-top: 1px; text-align: center; }
.ao-kpi-h { font-size: 9px; color: #16a34a; }
.ao-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0; border-bottom: 1px solid var(--border, #cbd5e1); padding-bottom: 6px; }
.ao-tab-btn { font-size: 12px; padding: 5px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; color: var(--muted, #64748b); }
.ao-tab-btn:hover { background: rgba(127, 127, 127, 0.08); }
.ao-tab-btn.on { background: rgba(37, 99, 235, 0.12); color: var(--ink, #0f172a); font-weight: 600; }
.ao-tab-pane { display: none; }
.ao-tab-pane.on { display: block; }
.ao-tab-grid { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.ao-db-scroll.tall { max-height: 46vh; }
.ao-donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ao-donut { width: 118px; height: 118px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; }
.ao-donut::after { content: ""; position: absolute; width: 68px; height: 68px; border-radius: 50%; background: var(--panel, #fff); }
.ao-donut span { position: relative; z-index: 1; font-size: 22px; font-weight: 700; font-family: var(--font-display, inherit); }
.ao-legend { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; }
.ao-leg { display: flex; align-items: center; gap: 5px; }
.ao-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ao-velo { display: flex; gap: 8px; align-items: flex-end; height: 90px; padding: 4px 0; }
.ao-velo-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.ao-velo-bar { position: relative; width: 100%; max-width: 34px; height: 70px; display: flex; align-items: flex-end; justify-content: center; }
.ao-velo-bar i { position: absolute; bottom: 0; width: 100%; border-radius: 4px 4px 0 0; background: #94a3b8; }
.ao-velo-bar i.done { background: #16a34a; }
.ao-velo-col span { font-size: 10px; color: var(--muted, #64748b); }
.ao-act { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid rgba(127, 127, 127, 0.12); font-size: 12px; }
.ao-act-i { flex: none; }
.ao-act-v { font-size: 11px; }
.ao-act-t { flex: none; font-size: 10.5px; white-space: nowrap; }
.ao-pend { padding: 8px 10px; margin-bottom: 8px; border: 1px dashed #16a34a; border-radius: 8px; background: rgba(22, 163, 74, 0.05); font-size: 12px; }
.ao-db-job[data-dbjob], .ao-db-sprint-j[data-dbjob] { cursor: pointer; }
.ao-db-job[data-dbjob]:hover { background: rgba(37, 99, 235, 0.06); }
@media (max-width: 560px) { .ao-kpis { grid-template-columns: repeat(3, 1fr); } .ao-tab-grid { grid-template-columns: 1fr; } }
.ao-tgbar { display: flex; gap: 8px; align-items: center; margin: 6px 0 0; flex-wrap: wrap; }
.ao-tgbar .btn { font-size: 11.5px; padding: 5px 10px; }
#ao-tg-status { font-size: 11.5px; font-family: var(--font-mono); }
.ao-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ao-bcol-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-faint); margin-bottom: 6px; }
.ao-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px; margin-bottom: 7px; cursor: pointer; transition: border-color .12s; }
.ao-card:hover { border-color: var(--jade); }
.ao-card.run { border-color: var(--jade); box-shadow: 0 0 0 1px rgba(34,211,238,.3); }
.ao-card.run .ao-bar i { background-size: 200% 100%; animation: aoflow 1.2s linear infinite; }
@keyframes aoflow { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.ao-spin { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border: 1.5px solid var(--jade); border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }
.ao-card-h { font-size: 11.5px; }
.ao-card-m { font-size: 10px; color: var(--ink-faint); font-family: var(--font-mono); margin: 3px 0; }
.ao-card-p { font-size: 10.5px; color: var(--jade-soft); margin-top: 3px; }
.ao-bar { height: 5px; border-radius: 999px; background: rgba(5,8,20,.5); overflow: hidden; margin-top: 4px; }
.ao-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--jade), var(--gold)); }
.ao-chat { height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; padding: 4px; }
.ao-msg { font-size: 12px; padding: 6px 9px; border-radius: 9px; max-width: 92%; }
.ao-msg.user { align-self: flex-end; background: rgba(34,211,238,.14); }
.ao-msg.agent { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line); }
.ao-msg b { color: var(--gold-soft); font-size: 10.5px; display: block; }
.ao-ph { display: flex; gap: 8px; padding: 5px 0; font-size: 12.5px; align-items: flex-start; }
.ao-next { font-size: 11px; color: var(--jade-soft); margin-top: 2px; }
@media (max-width: 1100px) { .ao-grid { grid-template-columns: 1fr; } .ao-board { grid-template-columns: repeat(2, 1fr); } }
/* Forte agentic trace */
.ft-box { margin: 8px 14px 12px; border: 1px solid var(--gold); border-radius: 12px; padding: 12px; background: rgba(139,123,255,.06); }
.ft-title { font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.ft-status { font-size: 12px; color: var(--ink-dim); margin: 4px 0 8px; display: flex; align-items: center; gap: 6px; }
.ft-iter { border-left: 2px solid var(--line); padding: 6px 0 6px 10px; margin: 6px 0; }
.ft-iter.ok { border-left-color: var(--jade); }
.ft-iter.err { border-left-color: #b9544a; }
.ft-h { font-size: 12px; display: flex; gap: 8px; align-items: center; }
.ft-ok { color: var(--jade-soft); font-size: 11px; }
.ft-bad { color: #f0a8a0; font-size: 11px; }
.ft-err { font-size: 10.5px; color: #f0a8a0; background: rgba(5,8,20,.5); padding: 6px 8px; border-radius: 6px; white-space: pre-wrap; margin: 4px 0; }
.ft-diag { font-size: 12px; margin: 4px 0; }
.ft-exp { font-size: 11.5px; color: var(--ink-dim); margin: 2px 0; }
.ft-fix summary { cursor: pointer; color: var(--gold-soft); font-size: 11.5px; }
.ft-fix pre { font-size: 11px; background: rgba(5,8,20,.5); padding: 8px; border-radius: 6px; overflow-x: auto; margin: 4px 0; }
.lab-df { border-collapse: collapse; font-size: 11.5px; font-family: var(--font-mono); width: 100%; }
.lab-df th, .lab-df td { border: 1px solid var(--line-soft); padding: 4px 8px; text-align: right; }
.lab-df th { background: var(--panel-2); color: var(--ink-faint); }
.lab-fig { max-width: 100%; display: block; padding: 10px 14px; background: #0f1628; }
.lab-plotbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 14px; font-size: 11.5px; color: #a5b0d6; }
.lab-plotbar select { background: var(--panel-2, #141724); color: #d6defa; border: 1px solid var(--border, #2b3660); border-radius: 6px; padding: 2px 6px; font-size: 11.5px; }
.lab-plotbar .btn { padding: 2px 10px; }
.forte-box { border-top: 1px solid var(--line-soft); padding: 12px 14px; background: rgba(139,123,255,.05); }
.forte-box.err { color: #f0a8a0; }
.forte-h { font-family: var(--font-display); font-size: 15px; margin-bottom: 8px; }
.forte-sec { margin: 8px 0; font-size: 12.5px; }
.forte-sec b { color: var(--gold-soft); }
.forte-sec ul { margin: 4px 0; padding-left: 18px; color: var(--ink-dim); }
.forte-sec pre { font-size: 11.5px; }
.forte-test-res { margin-left: 8px; font-size: 12px; }

/* ---- real-time live dot ------------------------------------------------- */
.rt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jade); flex: none;
  box-shadow: 0 0 0 0 rgba(34,211,238,.5); }
.rt-dot.pulsing { animation: rtpulse 1.1s ease-out; }
@keyframes rtpulse {
  0% { box-shadow: 0 0 0 0 rgba(34,211,238,.55); transform: scale(1); }
  60% { box-shadow: 0 0 0 8px rgba(34,211,238,0); transform: scale(1.5); }
  100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); transform: scale(1); }
}

/* ---- auth chip + login overlay ----------------------------------------- */
.auth-chip { display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 4px;
  background: transparent; border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  color: var(--ink); transition: border-color .15s, background .15s; }
.auth-chip:hover { border-color: var(--jade); background: var(--line-soft); }
.auth-meta { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.auth-name { font-size: 13px; font-weight: 600; }
.auth-role { font-size: 10.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .6px; }

/* ---- login · "control-room vault" -------------------------------------- */
.login-root { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 0%, rgba(8,13,33,.72) 0%, rgba(4,6,14,.9) 70%);
  backdrop-filter: blur(9px) saturate(115%); padding: 24px; overflow: hidden; }
.login-root[hidden] { display: none; }

/* ambient glow pooled behind the card */
.login-aura { position: absolute; width: 560px; height: 560px; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(139,123,255,.26), transparent 70%) left 30% top 22% / 62% 62% no-repeat,
    radial-gradient(closest-side, rgba(34,211,238,.20), transparent 72%) right 26% bottom 20% / 60% 60% no-repeat;
  filter: blur(14px); opacity: .9; animation: loginAura 11s ease-in-out infinite alternate; }
@keyframes loginAura { from { transform: translate(-14px,-8px) scale(1); } to { transform: translate(14px,10px) scale(1.06); } }

.login-card { position: relative; width: min(432px, 100%); padding: 30px 30px 22px;
  border-radius: 22px; color: var(--ink);
  /* gradient hairline border via double background */
  background:
    linear-gradient(180deg, #101838 0%, #0d132b 58%, #0c1228 100%) padding-box,
    linear-gradient(150deg, rgba(179,168,255,.55), rgba(28,36,71,.4) 42%, rgba(103,232,249,.42)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.75), 0 2px 0 rgba(255,255,255,.03) inset, 0 -1px 0 rgba(0,0,0,.35) inset;
  animation: loginRise .5s cubic-bezier(.16,.84,.34,1) both; }
@keyframes loginRise { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
/* fine gold hairline across the top edge */
.login-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, transparent, rgba(179,168,255,.85), transparent); }

/* the seal — echoes the rail brand mark, reads like a wax seal / vault key */
.login-seal { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin: 2px 0 20px;
  background: radial-gradient(circle at 32% 26%, var(--gold-soft), #5b6cff 58%, var(--jade));
  color: #ffffff; font-family: var(--font-display); font-weight: 600; font-size: 27px; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 10px 26px -8px rgba(139,123,255,.6);
  animation: loginSeal .55s cubic-bezier(.16,.84,.34,1) .06s both; }
.login-seal span { transform: translateY(-1px); }
@keyframes loginSeal { from { opacity: 0; transform: scale(.72) rotate(-8deg); } to { opacity: 1; transform: none; } }

.login-head { margin-bottom: 22px; }
.login-title { font-family: var(--font-display); font-weight: 550; font-size: 26px; letter-spacing: .2px; margin: 2px 0 8px; }
.login-lede { font-size: 12.5px; color: var(--ink-dim); margin: 0; line-height: 1.55; max-width: 34ch; }

.login-field { display: block; margin-bottom: 14px; }
.login-field span { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 1.3px; margin-bottom: 7px; }
.login-field input { width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(6,8,20,.7); color: var(--ink); font-size: 14.5px; font-family: var(--font-body);
  transition: border-color .16s, box-shadow .16s, background .16s; }
.login-field input::placeholder { color: var(--ink-faint); }
.login-field input:hover { border-color: #262f56; }
.login-field input:focus { outline: none; border-color: var(--jade);
  background: rgba(8,11,26,.9); box-shadow: 0 0 0 3px rgba(34,211,238,.2); }
.login-error { color: #f0a8a0; font-size: 12.5px; margin: 0 0 12px; }

#login-submit { position: relative; width: 100%; justify-content: center; margin-top: 6px;
  padding: 13px; border-radius: 12px; font-weight: 600; letter-spacing: .2px; overflow: hidden;
  transition: transform .16s ease, box-shadow .2s ease; }
#login-submit > span { position: relative; z-index: 1; }
/* sheen sweep on hover */
#login-submit::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); }
#login-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(139,123,255,.7); }
#login-submit:hover::after { transition: transform .7s ease; transform: translateX(120%); }
#login-submit:active { transform: translateY(0); }
#login-submit:disabled { opacity: .65; transform: none; }

.login-demo { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.login-demo .hint { font-size: 12px; color: var(--ink-dim); }
.login-demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 11px; }
.login-demo-chip { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 11px; background: rgba(17,24,52,.6); color: var(--ink); text-align: left;
  overflow: hidden; transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.login-demo-chip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--gold); transform: scaleY(0); transform-origin: bottom; transition: transform .18s ease; }
.login-demo-chip:hover { transform: translateY(-2px); border-color: rgba(179,168,255,.5);
  background: rgba(20,27,59,.85); box-shadow: 0 12px 24px -14px rgba(0,0,0,.7); }
.login-demo-chip:hover::before { transform: scaleY(1); }
.login-demo-chip:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
.login-demo-chip strong { font-size: 13.5px; font-family: var(--font-mono); letter-spacing: .3px; }
.login-demo-chip span { font-size: 10.5px; color: var(--ink-faint); }

.login-skip { display: block; width: 100%; margin-top: 16px; background: transparent; border: 0;
  color: var(--ink-faint); font-size: 12px; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; transition: color .15s; }
.login-skip:hover { color: var(--ink-dim); }
.login-trust { margin: 14px 0 0; text-align: center; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-faint); }

/* ---- 3-column index cards ----------------------------------------------- */
.cols-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 920px){ .cols-3 { grid-template-columns: 1fr; } }
.index-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; position: relative; overflow: hidden; }
.index-card .ic-label { font-size: 12px; color: var(--ink-dim); }
.index-card .ic-big { font-family: var(--font-display); font-size: 38px; line-height: 1; margin: 10px 0 4px; }
.index-card .ic-note { font-size: 11.5px; color: var(--ink-faint); font-family: var(--font-mono); }
.index-card .ring { position: absolute; right: 16px; top: 16px; }
.lvl-low { color: var(--jade-soft); } .lvl-medium { color: var(--gold-soft); } .lvl-high { color: #f0a59d; }

/* progress meter (gauge bars) */
.gauge { margin: 6px 0 14px; }
.gauge .g-head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; color: var(--ink-dim); }
.gauge .g-head b { color: var(--ink); font-family: var(--font-mono); }
.gauge .g-track { height: 10px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.gauge .g-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--jade), var(--jade-soft));
  width: 0; transition: width 1s cubic-bezier(.2,.7,.2,1); }
.gauge.warn .g-fill { background: linear-gradient(90deg, var(--gold), var(--gold-soft)); }
.gauge.crit .g-fill { background: linear-gradient(90deg, var(--critical), #f0a59d); }

.readiness-score { text-align: center; margin-bottom: 8px; }
.readiness-score .rs-num { font-family: var(--font-display); font-size: 56px; line-height: 1; }
.readiness-score .rs-verdict { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); margin-top: 4px; }

/* risk drivers */
.driver { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0;
  border-bottom: 1px solid var(--line-soft); }
.driver:last-child { border-bottom: 0; }
.driver .d-area { font-size: 13.5px; }
.driver .d-detail { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.driver .d-pts { font-family: var(--font-mono); font-size: 14px; color: var(--gold-soft); flex: none; }

/* ---- data tables -------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .6px;
  text-transform: uppercase; color: var(--ink-faint); padding: 9px 12px; border-bottom: 1px solid var(--line);
  cursor: pointer; white-space: nowrap; user-select: none; }
.data-table th:hover { color: var(--ink-dim); }
.data-table th.sorted::after { content: " ▾"; color: var(--gold); }
.data-table th.sorted.asc::after { content: " ▴"; }
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.data-table tbody tr { transition: background .12s; cursor: pointer; }
.data-table tbody tr:hover { background: rgba(112,202,176,.06); }
.data-table .num { font-family: var(--font-mono); text-align: right; }
.pill { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; padding: 3px 9px;
  border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.pill.low, .pill.ok, .pill.shipped, .pill.active { color: var(--ok); background: rgba(34,211,238,.1); border-color: rgba(34,211,238,.3); }
.pill.medium, .pill.warning, .pill.in_production, .pill.renewal_pending, .pill.expiring { color: var(--warning); background: rgba(139,123,255,.1); border-color: rgba(139,123,255,.34); }
.pill.high, .pill.critical, .pill.rejected, .pill.receiving { color: var(--critical); background: rgba(217,89,79,.12); border-color: rgba(217,89,79,.36); }
.pill.qc_passed { color: var(--jade-soft); background: rgba(34,211,238,.1); border-color: rgba(34,211,238,.3); }

.search { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink); font: inherit; font-size: 12.5px; padding: 7px 12px; min-width: 180px; }
.search:focus { outline: none; border-color: var(--jade); }
/* #4 gesture control overlay on the knowledge map */
.kg-stage { position: relative; }
#kg-gesture-btn.on { background: var(--jade); color: #0b1430; }
.kg-gesture-ui { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.kg-gcursor { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 2px solid var(--jade); background: rgba(45,212,191,.22); box-shadow: 0 0 14px var(--jade); transition: opacity .15s, transform .1s; }
.kg-gcursor.click { transform: scale(.55); background: var(--jade); }
.kg-gcursor.gaze { width: 30px; height: 30px; margin: -15px 0 0 -15px; border-color: #e9b949; background: rgba(233,185,73,.18); box-shadow: 0 0 16px #e9b949; }
.kg-gcursor.gaze::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #e9b949; }
#kg-gaze-btn.on { background: #e9b949; color: #2a1e00; }
.kg-gzrecenter { pointer-events: auto; font-size: 11px; }
/* unified hands-free camera-data panel */
.kg-vzcam { position: absolute; right: 12px; bottom: 12px; width: 300px; border-radius: 12px; overflow: hidden; border: 1px solid var(--jade); background: #060811; box-shadow: 0 8px 28px rgba(0,0,0,.5); pointer-events: auto; }
.kg-vzcam canvas { display: block; width: 300px; height: 226px; }
.kg-vzcam .kg-gzrecenter { position: absolute; right: 6px; bottom: 6px; padding: 2px 8px; }
.kg-gcam { position: absolute; right: 12px; bottom: 12px; width: 160px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border, #2b3660); background: #000; }
.kg-gcam video { width: 160px; height: 120px; object-fit: cover; transform: scaleX(-1); display: block; }
.kg-gcam span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; padding: 2px 6px; background: rgba(10,12,22,.82); color: #f2f5ff; }
.kg-glegend { position: absolute; left: 12px; bottom: 12px; font-size: 10.5px; color: #d6defa; background: rgba(10,12,22,.8); border: 1px solid var(--border, #2b3660); border-radius: 8px; padding: 5px 9px; max-width: 360px; line-height: 1.4; }
/* shared dark input style (was unstyled → rendered white) */
.inp { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink); font: inherit; font-size: 12.5px; padding: 7px 12px; }
.inp::placeholder { color: var(--ink-dim); opacity: .8; }
.inp:focus { outline: none; border-color: var(--jade); }

/* ---- warehouse cards ---------------------------------------------------- */
.wh-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 920px){ .wh-cards { grid-template-columns: 1fr; } }
.wh-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
  cursor: pointer; transition: border-color .15s, transform .12s; }
.wh-card:hover { border-color: var(--jade); transform: translateY(-2px); }
.wh-card.active { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(139,123,255,.4); }
.wh-card .wh-name { font-size: 14.5px; font-weight: 600; }
.wh-card .wh-loc { font-size: 11px; color: var(--ink-faint); font-family: var(--font-mono); margin: 3px 0 12px; }
.wh-card .wh-stat { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; color: var(--ink-dim); }
.wh-card .wh-stat b { color: var(--ink); font-family: var(--font-mono); }
.wh-type { display: inline-block; font-size: 9.5px; font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: .8px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-faint); }

/* movements list */
.mv { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 9px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.mv:last-child { border-bottom: 0; }
.mv .mv-dir { font-family: var(--font-mono); font-size: 10.5px; padding: 3px 7px; border-radius: 6px; text-align: center; }
.mv .mv-dir.in { color: var(--ok); background: rgba(34,211,238,.1); }
.mv .mv-dir.out { color: var(--critical); background: rgba(217,89,79,.1); }
.mv .mv-note { color: var(--ink-dim); } .mv .mv-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.mv .mv-qty { font-family: var(--font-mono); }

/* funnel / status bars (production) */
.funnel-row { display: grid; grid-template-columns: 120px 1fr 34px; align-items: center; gap: 12px; margin: 9px 0; font-size: 13px; }
.funnel-row .f-label { color: var(--ink-dim); font-size: 12.5px; }
.funnel-row .f-track { height: 22px; border-radius: 6px; background: var(--line-soft); overflow: hidden; }
.funnel-row .f-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--jade), var(--jade-soft)); width: 0; transition: width .8s cubic-bezier(.2,.7,.2,1); }
.funnel-row .f-count { font-family: var(--font-mono); text-align: right; }

/* ---- donut chart -------------------------------------------------------- */
svg.donut { width: 200px; height: 200px; margin: 0 auto; display: block; }
.donut-legend { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.donut-legend .dl { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.donut-legend .dl i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.donut-legend .dl .dl-val { margin-left: auto; font-family: var(--font-mono); color: var(--ink-dim); }

/* ---- notifications ------------------------------------------------------ */
.notif-filter { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.notif-filter button { font-family: var(--font-mono); font-size: 12px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-dim); cursor: pointer; }
.notif-filter button.active { color: var(--ink); border-color: var(--gold); background: var(--panel-2); }
.notif { display: grid; grid-template-columns: 4px 1fr auto; gap: 14px; align-items: center; padding: 13px 0;
  border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background .12s; }
.notif:hover { background: rgba(112,202,176,.05); }
.notif:last-child { border-bottom: 0; }
.notif .n-bar { width: 4px; height: 100%; min-height: 34px; border-radius: 4px; align-self: stretch; }
.notif.critical .n-bar { background: var(--critical); }
.notif.warning .n-bar { background: var(--warning); }
.notif.info .n-bar { background: var(--jade); }
.notif .n-title { font-size: 14px; }
.notif .n-detail { font-size: 11.5px; color: var(--ink-faint); font-family: var(--font-mono); margin-top: 3px; }
.notif .n-module { font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .8px;
  color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }

/* ---- audit -------------------------------------------------------------- */
.audit-filters { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; }
.audit-filters select { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink); font: inherit; font-size: 12.5px; padding: 7px 10px; }
.audit-row { display: grid; grid-template-columns: 150px 130px 1fr; gap: 14px; padding: 11px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.audit-row:last-child { border-bottom: 0; }
.audit-row .a-ts { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.audit-row .a-user { font-size: 12.5px; color: var(--ink-dim); }
.audit-row .a-action { font-family: var(--font-mono); font-size: 10.5px; color: var(--gold-soft); }
.audit-row .a-detail { font-size: 13px; }
@media (max-width: 720px){ .audit-row { grid-template-columns: 1fr; gap: 3px; } }

/* ---- toasts ------------------------------------------------------------- */
.toasts { position: fixed; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 60; }
.toast { min-width: 240px; max-width: 340px; padding: 12px 15px; border-radius: var(--radius-sm);
  background: linear-gradient(155deg, rgba(19,26,53,.94), rgba(16,24,52,.92)); backdrop-filter: blur(10px);
  border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 13px;
  animation: toast-in .35s cubic-bezier(.2,.9,.3,1.2) both; border-left: 3px solid var(--jade); }
.toast.warning { border-left-color: var(--warning); } .toast.critical { border-left-color: var(--critical); }
.toast .t-title { font-weight: 600; margin-bottom: 2px; } .toast .t-detail { color: var(--ink-dim); font-size: 11.5px; }
.toast.leaving { animation: toast-out .3s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(30px); } }

/* ---- modal -------------------------------------------------------------- */
.modal-root { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; }
.modal-root[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(5,8,20,.6); backdrop-filter: blur(3px);
  animation: fade .2s ease both; }
.modal { position: relative; width: min(560px, calc(100vw - 40px)); max-height: 84vh; overflow-y: auto;
  background: linear-gradient(155deg, rgba(21,28,55,.96), rgba(12,18,41,.96)); backdrop-filter: blur(16px);
  border: 1px solid rgba(112,202,176,.2); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow);
  animation: modal-in .3s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes fade { from { opacity: 0; } } @keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.modal-close { position: absolute; top: 14px; right: 16px; background: transparent; border: 0; color: var(--ink-dim);
  font-size: 26px; line-height: 1; cursor: pointer; } .modal-close:hover { color: var(--ink); }
.modal h3 { font-family: var(--font-display); font-weight: 550; font-size: 22px; margin: 0 0 4px; }
.modal .m-sub { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); margin-bottom: 16px; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kv .kv-item { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 10px 12px; }
.kv .kv-item .k { font-size: 10.5px; color: var(--ink-faint); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .5px; }
.kv .kv-item .v { font-size: 14px; margin-top: 3px; }
.timeline { margin-top: 18px; } .tl-step { display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.tl-step .tl-dot { width: 12px; height: 12px; border-radius: 50%; margin: 4px auto 0; border: 2px solid var(--line); background: var(--panel); }
.tl-step.done .tl-dot { background: var(--jade); border-color: var(--jade); }
.tl-step .tl-line { width: 2px; flex: 1; background: var(--line-soft); margin: 2px auto; min-height: 14px; }
.tl-step:last-child .tl-line { display: none; }
.tl-step .tl-stage { font-size: 13.5px; } .tl-step .tl-date { font-size: 11px; color: var(--ink-faint); font-family: var(--font-mono); }

/* ---- animated count-up -------------------------------------------------- */
.kpi .value[data-count] { font-variant-numeric: tabular-nums; }

/* ---- assistant version controls (mode + persona) ----------------------- */
.assistant-controls { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.ac-group { display: flex; align-items: center; gap: 9px; }
.ac-group.ac-grow { flex: 1; min-width: 260px; }
.ac-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-faint); }
.assistant-controls select { min-width: 190px; }
.persona-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.persona-chips button { font-family: var(--font-mono); font-size: 11.5px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-dim); cursor: pointer; transition: border-color .15s, color .15s; }
.persona-chips button:hover { border-color: var(--jade); color: var(--ink); }
.persona-chips button.active { color: #0a0f1f; border-color: transparent; background: linear-gradient(180deg, var(--jade-soft), var(--jade)); font-weight: 500; }
.ac-hint { font-size: 11.5px; color: var(--ink-faint); font-family: var(--font-mono); margin: 0 0 14px; min-height: 14px; }
.trace .seg.mode { border-color: rgba(139,123,255,.4); color: var(--gold-soft); }

/* ---- fullscreen maps ---------------------------------------------------- */
.fs-exit { display: none; }

/* native Fullscreen API (preferred — immune to ancestor containing blocks) */
.kg-stage:fullscreen, .exp-mappanel:fullscreen {
  width: 100%; height: 100%; margin: 0; max-width: none;
  background: var(--bg-grad); display: flex; flex-direction: column; padding: 16px 18px; overflow: hidden;
}
.kg-stage:-webkit-full-screen, .exp-mappanel:-webkit-full-screen {
  width: 100%; height: 100%; margin: 0; max-width: none;
  background: var(--bg-grad); display: flex; flex-direction: column; padding: 16px 18px; overflow: hidden;
}
/* CSS-class fallback for browsers without the Fullscreen API */
.kg-stage.fullscreen, .exp-mappanel.fullscreen {
  position: fixed; inset: 0; z-index: 200; margin: 0; max-width: none;
  background: var(--bg-grad); display: flex; flex-direction: column; padding: 16px 18px; overflow: hidden;
}
.kg-stage:fullscreen .kg-panel, .kg-stage.fullscreen .kg-panel { flex: 1 1 auto; min-height: 0; margin: 0; }
.kg-stage:fullscreen .kg-canvas-wrap, .kg-stage.fullscreen .kg-canvas-wrap { height: 100% !important; min-height: 0; }
.exp-mappanel:fullscreen .exp-map-wrap, .exp-mappanel.fullscreen .exp-map-wrap {
  flex: 1 1 auto; min-height: 0; height: auto !important; }
.kg-stage:fullscreen .fs-exit, .kg-stage.fullscreen .fs-exit,
.exp-mappanel:fullscreen .fs-exit, .exp-mappanel.fullscreen .fs-exit {
  display: inline-flex; align-items: center; position: absolute; top: 18px; right: 20px; z-index: 5;
  background: rgba(9,14,35,.9); border: 1px solid var(--critical); color: #f0a59d;
  border-radius: 999px; padding: 7px 13px; font-size: 12px; cursor: pointer; font-family: var(--font-body);
}
.kg-stage:fullscreen .fs-exit:hover, .kg-stage.fullscreen .fs-exit:hover,
.exp-mappanel:fullscreen .fs-exit:hover, .exp-mappanel.fullscreen .fs-exit:hover { background: rgba(217,89,79,.2); }
body.has-fullscreen { overflow: hidden; }
.btn.on { background: linear-gradient(180deg, var(--jade-soft), var(--jade)); color: #0a0f1f; border-color: var(--jade); }

/* sidebar open/close toggle */
.rail-toggle { appearance: none; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-dim);
  width: 34px; height: 34px; border-radius: var(--radius-sm); cursor: pointer; display: grid; place-items: center; flex: none; }
.rail-toggle:hover { border-color: var(--jade); color: var(--ink); }
.rail-toggle svg { width: 18px; height: 18px; }
/* collapse the rail to 0 width WITHOUT display:none (which would mis-place main
   into the 0px first column) — keep it in the grid, just clip it. */
.app.rail-collapsed { grid-template-columns: 0 1fr; }
.app.rail-collapsed .rail { overflow: hidden; min-width: 0; opacity: 0; pointer-events: none; border: 0; }

/* link mode + manual edges */
#kg-svg.linking { cursor: crosshair; }
#kg-svg .kg-edge.manual { stroke: var(--gold); stroke-opacity: .9; stroke-dasharray: 5 4; }
#kg-svg.linking .kg-edge.manual { cursor: pointer; }
#kg-svg .kg-node.link-first circle { stroke: var(--gold); stroke-width: 3; }
.kg-syn { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-dim); cursor: pointer; }
.kg-syn input { width: 15px; height: 15px; accent-color: var(--jade); }

/* target clusters reuse insight styling */
.exp-clusters { padding: 11px 0 4px; border-bottom: 1px solid var(--line-soft); margin-bottom: 8px; }
.exp-clusters .ins-title { font-size: 10px; letter-spacing: 1.2px; color: var(--ink-faint); margin-bottom: 8px; }
.exp-clusters .ins { padding: 7px 0 7px 11px; border-left: 2px solid var(--line); margin-bottom: 7px; }
.exp-clusters .ins b { font-size: 11.5px; display: block; }
.exp-clusters .ins div { font-size: 11px; color: var(--ink-dim); margin-top: 2px; }

/* ---- expansion map ------------------------------------------------------ */
.exp-layout { display: grid; grid-template-columns: 1fr 320px; gap: 18px; }
@media (max-width: 980px){ .exp-layout { grid-template-columns: 1fr; } }
.exp-mappanel { padding: 0; overflow: hidden; }
.exp-map-wrap { position: relative; width: 100%; height: min(60vh, 560px); }
#exp-svg { width: 100%; height: 100%; display: block;
  background: radial-gradient(700px 400px at 30% 20%, rgba(34,211,238,.06), transparent 60%), #070b17; }
#exp-svg .grat { stroke: var(--line-soft); stroke-width: .6; stroke-opacity: .5; }
#exp-svg .landmass { fill: #0d132b; stroke: #26315a; stroke-width: .5; stroke-linejoin: round; }
#exp-svg .country { stroke: #090f26; stroke-width: .5; stroke-linejoin: round; cursor: pointer; transition: filter .12s; }
#exp-svg .country.has-market { stroke: var(--jade); stroke-width: .9; }
#exp-svg .country:hover { filter: brightness(1.35); stroke: var(--ink); stroke-width: 1; }
#exp-svg .country-label { font-family: var(--font-body); font-size: 8.5px; fill: var(--ink-dim); pointer-events: none;
  paint-order: stroke; stroke: #070b17; stroke-width: 2.4px; }
#exp-svg .province { fill: #0f1631; stroke: #29325b; stroke-width: .5; stroke-linejoin: round; cursor: pointer; transition: fill .12s; }
#exp-svg .province:hover { fill: #172045; stroke: var(--jade); }
#exp-svg .prov-label { font-family: var(--font-body); font-size: 8px; fill: var(--ink-dim); pointer-events: none;
  paint-order: stroke; stroke: #070b17; stroke-width: 2.2px; }
.exp-country-bar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px;
  background: rgba(6,9,26,.82); backdrop-filter: blur(8px); border: 1px solid var(--gold); border-radius: 999px; padding: 6px 10px; }
.exp-country-bar .cb-name { font-family: var(--font-display); font-size: 14px; color: var(--gold-soft); }
.exp-country-bar .btn { font-size: 11.5px; padding: 6px 11px; }
.exp-heat-legend { position: absolute; bottom: 12px; left: 12px; display: flex; align-items: center; gap: 8px;
  background: rgba(6,9,26,.7); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 11px; font-size: 10px; color: var(--ink-dim); }
.exp-heat-legend .hbar { width: 90px; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, hsl(135,58%,32%), hsl(60,58%,34%), hsl(0,58%,30%)); }
.exp-insights { padding: 11px 0 4px; border-bottom: 1px solid var(--line-soft); margin-bottom: 8px; }
.exp-insights .ins-title { font-size: 10px; letter-spacing: 1.2px; color: var(--ink-faint); margin-bottom: 8px; }
.exp-insights .ins { padding: 7px 0 7px 11px; border-left: 2px solid var(--line); margin-bottom: 7px; }
.exp-insights .ins b { font-size: 11.5px; display: block; }
.exp-insights .ins div { font-size: 11.5px; color: var(--ink-dim); margin-top: 2px; }
.exp-insights .ins.opportunity { border-left-color: var(--jade); }
.exp-insights .ins.risk { border-left-color: var(--critical); }
.exp-insights .ins.ready { border-left-color: var(--gold); }
#exp-svg .route { fill: none; stroke-linecap: round; }
#exp-svg .route.active { stroke: rgba(103,232,249,.55); }
#exp-svg .route.candidate { stroke: rgba(139,123,255,.4); stroke-dasharray: 4 4; }
#exp-svg .route.watch { stroke: rgba(155,179,169,.25); stroke-dasharray: 2 5; }
#exp-svg .mkt { cursor: pointer; }
#exp-svg .mkt .glow { opacity: .5; }
#exp-svg .mkt:hover .ring { stroke-opacity: 1; }
#exp-svg .mkt text { font-family: var(--font-body); font-size: 9.5px; fill: var(--ink-dim);
  paint-order: stroke; stroke: #070b17; stroke-width: 2.6px; pointer-events: none; }
#exp-svg .mkt.origin text { fill: var(--gold-soft); font-size: 11px; }
.mkt-pulse { animation: mktpulse 2.4s ease-out infinite; transform-origin: center; }
@keyframes mktpulse { 0% { r: 5; opacity: .55; } 70%,100% { r: 16; opacity: 0; } }
.exp-legend { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 5px;
  background: rgba(6,9,26,.7); backdrop-filter: blur(6px); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 9px 11px; font-size: 10.5px; color: var(--ink-dim); }
.exp-legend .lg { display: flex; align-items: center; gap: 7px; }
.exp-legend .lg i { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 6px currentColor; }
.exp-toolbar { position: absolute; right: 12px; bottom: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.exp-toolbar .btn { white-space: nowrap; font-size: 12px; padding: 6px 11px; }
.exp-tools-dropdown { position: relative; display: inline-block; }
.exp-tools-menu { position: absolute; bottom: calc(100% + 5px); right: 0; z-index: 600; min-width: 170px; display: flex; flex-direction: column; gap: 2px; padding: 5px; border: 1px solid var(--border, #2b3660); border-radius: 10px; background: var(--panel, #111a33); box-shadow: 0 -8px 24px rgba(0,0,0,0.4); }
.exp-tools-menu[hidden] { display: none; }
.exp-tools-menu button { text-align: left; padding: 7px 11px; font-size: 12.5px; border: none; border-radius: 7px; background: transparent; color: inherit; cursor: pointer; white-space: nowrap; }
.exp-tools-menu button:hover { background: rgba(127, 127, 127, 0.12); }
.exp-askbar { position: absolute; left: 12px; top: 54px; right: 12px; display: flex; gap: 6px; z-index: 500; background: rgba(13,20,38, 0.92); border: 1px solid var(--border, #2b3660); border-radius: 10px; padding: 7px; backdrop-filter: blur(4px); }
.exp-askbar input { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border, #2b3660); background: transparent; color: inherit; font: inherit; font-size: 13px; }
.exp-askbar .btn { white-space: nowrap; }
.exp-svg .mkt, #exp-svg .mkt, #exp-svg .mkt-label { transition: opacity .25s; }
.exp-toggles { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; }
.exp-toggles .btn { font-size: 11.5px; padding: 7px 11px; }
.exp-toggles .btn.on { background: linear-gradient(180deg, var(--jade-soft), var(--jade)); color: #0a0f1f; border-color: var(--jade); }
#exp-svg .exp-path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 7 6;
  stroke-opacity: .85; stroke-linecap: round; stroke-linejoin: round; animation: dash 22s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -260; } }
#exp-svg .mkt .target-ring { fill: none; stroke: var(--gold-soft); stroke-width: 1.6; stroke-dasharray: 3 3;
  animation: spin 9s linear infinite; transform-origin: center; }
#exp-svg .mkt .flag { font-size: 12px; }
#exp-svg .team-dot circle { fill: #5b9bd5; stroke: #070b17; stroke-width: 1; }
#exp-svg .team-dot text { font-size: 8px; fill: #9bc0e0; paint-order: stroke; stroke: #070b17; stroke-width: 2px; }
.panel.glass.exp-side { max-height: min(72vh, 640px); overflow-y: auto; overscroll-behavior: contain; }
.reco-item { padding: 11px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.reco-item:last-child { border-bottom: 0; }
.reco-item:hover .rm-name { color: var(--gold-soft); }
.reco-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.reco-head .rm-name { font-size: 13.5px; }
.reco-head .rm-score { font-family: var(--font-display); font-size: 19px; color: var(--gold-soft); }
.reco-item .rm-tier { font-size: 10.5px; font-family: var(--font-mono); color: var(--ink-faint); }
.reco-bars { display: flex; gap: 5px; margin-top: 7px; }
.reco-bars .rb { flex: 1; height: 4px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.reco-bars .rb span { display: block; height: 100%; border-radius: 999px; }
.reco-item .rb-grav { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin: 5px 0 4px; }
.reco-item .rb-grav span { display: block; height: 100%; border-radius: 999px; }
/* --- decision-grade recommendation cards --- */
.rec-summary { display: flex; gap: 6px; margin: 6px 0 8px; }
.rec-vc { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent); }
.rec-card { border: 1px solid var(--border, #2b3660); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: rgba(127,127,127,0.03); }
.rec-top { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.rec-top:hover .rec-name { color: var(--gold-soft, #e9b949); }
.rec-verdict { font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; border: 1px solid; letter-spacing: .03em; }
.rec-name { flex: 1; font-size: 13px; }
.rec-tier { font-size: 10px; color: #a5b0d6; text-transform: uppercase; letter-spacing: .04em; }
.rec-score { font-family: var(--font-display, inherit); font-size: 15px; color: var(--gold-soft, #e9b949); }
.rec-grav, .rb-grav { height: 6px; border-radius: 999px; background: var(--line-soft, rgba(127,127,127,.18)); overflow: hidden; }
.rec-why { font-size: 11.5px; line-height: 1.45; }
.rec-toggle { margin-top: 6px; font-size: 11px; background: none; border: none; color: #7fcab0; cursor: pointer; padding: 2px 0; }
.rec-toggle:hover { color: #b6f0dd; }
.rec-detail { margin-top: 6px; border-top: 1px solid #ffffff14; padding-top: 6px; }
.rec-sec-h { font-size: 11px; font-weight: 700; color: #9fd9c9; margin: 8px 0 3px; }
.rec-fb { display: flex; align-items: center; gap: 6px; margin: 2px 0; font-size: 11px; }
.rec-fl { width: 96px; color: #d6defa; }
.rec-bt { flex: 1; height: 6px; border-radius: 999px; background: var(--line-soft, rgba(127,127,127,.18)); overflow: hidden; }
.rec-bt i { display: block; height: 100%; background: #38bdf8; border-radius: 999px; }
.rec-fv { width: 22px; text-align: right; color: #a5b0d6; }
.rec-econ { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 3px; }
.rec-es { border: 1px solid var(--border, #2b3660); border-radius: 8px; padding: 5px 7px; background: rgba(127,127,127,0.04); }
.rec-el { font-size: 10px; color: #8f9ac2; text-transform: uppercase; letter-spacing: .03em; }
.rec-ev { font-size: 11.5px; color: #e8f3ee; margin-top: 1px; }
.rec-steps { margin: 3px 0 0 16px; padding: 0; font-size: 11.5px; line-height: 1.5; }
.rec-detail .sev-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.rec-kv { font-size: 11.5px; line-height: 1.45; margin: 3px 0; }
.rec-kv b { color: #b6e3d5; }
.rec-tabs { gap: 3px; padding-bottom: 5px; margin-bottom: 6px; }
.rec-tabs .dk-tab { font-size: 10.5px; padding: 3px 7px; }
.rec-detail > .dk-panel { display: none; }
.rec-detail > .dk-panel.on { display: block; }
/* markets × metrics heatmap */
.rec-heatmap { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; }
.rhm-row { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2px; align-items: stretch; }
.rhm-head .rhm-c { background: none; color: #8f9ac2; font-size: 9.5px; text-transform: uppercase; letter-spacing: .03em; }
.rhm-name { font-size: 11px; color: #d6defa; padding: 3px 4px; display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.rec-heatmap .rhm-row:not(.rhm-head):hover .rhm-name { color: var(--gold-soft, #e9b949); }
.rhm-c { font-size: 10.5px; color: #080a11; font-weight: 700; text-align: center; padding: 3px 0; border-radius: 4px; }
.rhm-head .rhm-c { color: #8f9ac2; font-weight: 600; padding: 1px 0; }
/* citation chips + reference collection */
.rec-cites { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rec-cite { font-size: 10px; font-weight: 700; color: #7fcab0; background: rgba(45,212,191,.12); border: 1px solid rgba(45,212,191,.3); border-radius: 5px; padding: 0 5px; }
.rec-refs { display: flex; flex-direction: column; gap: 6px; margin-top: 3px; }
.rec-ref { display: flex; gap: 7px; }
.rec-refn { color: #7fcab0; font-weight: 700; font-size: 11px; flex-shrink: 0; }
.rec-reft { font-size: 11.5px; line-height: 1.35; }
.rec-reft a { color: #b6f0dd; text-decoration: none; }
.rec-reft a:hover { text-decoration: underline; }
.exp-ai { background: var(--panel-2); border: 1px solid rgba(139,123,255,.3); border-radius: var(--radius-sm);
  padding: 12px 13px; margin-bottom: 14px; font-size: 12.5px; color: var(--ink); white-space: pre-wrap; line-height: 1.55; }
.exp-ai .by { display: block; margin-top: 7px; font-size: 10px; color: var(--ink-faint); font-family: var(--font-mono); }
.reco-item .rm-why { font-size: 9.5px; font-family: var(--font-mono); color: var(--ink-faint); margin-top: 5px; }
/* MMIR recommendation panel */
.mmir-headline { font-size: 13px; font-weight: 600; color: var(--gold-soft); margin-bottom: 8px; white-space: normal; }
.mmir-flag { font-size: 11px; color: #f0a8a0; border: 1px solid #b9544a; border-radius: 8px; padding: 5px 9px; margin-bottom: 9px; }
.mmir-row { padding: 8px 0; border-top: 1px solid var(--line-soft); cursor: pointer; white-space: normal; }
.mmir-row:hover b { color: var(--gold-soft); }
.mmir-h { display: flex; justify-content: space-between; align-items: baseline; }
.mmir-h .mmir-score { font-family: var(--font-display); font-size: 16px; color: var(--gold-soft); }
.mmir-why { font-size: 11.5px; color: var(--ink-dim); margin: 3px 0; line-height: 1.45; }
.mmir-meta { font-size: 9.5px; color: var(--ink-faint); }
.mmir-report { margin-top: 9px; }
.mmir-report summary { cursor: pointer; font-size: 11px; color: var(--jade-soft); }
.mmir-report pre { white-space: pre-wrap; font-size: 11px; color: var(--ink-dim); background: rgba(5,8,20,.5); border: 1px solid var(--line-soft); border-radius: 8px; padding: 9px; margin-top: 6px; max-height: 240px; overflow: auto; }

/* ---- knowledge map ------------------------------------------------------ */
.kg-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.kg-toolbar .search { flex: 1; min-width: 200px; }
.kg-dropdown { position: relative; display: inline-block; }
.kg-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 600; min-width: 180px; display: flex; flex-direction: column; gap: 2px; padding: 5px; border: 1px solid var(--border, #2b3660); border-radius: 10px; background: var(--panel, #111a33); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
.kg-menu[hidden] { display: none; }
.kg-menu button { text-align: left; padding: 7px 11px; font-size: 13px; border: none; border-radius: 7px; background: transparent; color: inherit; cursor: pointer; }
.kg-menu button:hover { background: rgba(127, 127, 127, 0.12); }
.kg-stats { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.kg-panel { padding: 0; overflow: hidden; }
.kg-canvas-wrap { position: relative; width: 100%; height: min(64vh, 620px); }
#kg-svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none;
  background: radial-gradient(900px 500px at 50% 0%, rgba(34,211,238,.05), transparent 70%); }
#kg-svg.grabbing { cursor: grabbing; }
#kg-svg .kg-edge { stroke: var(--line); stroke-opacity: .5; transition: stroke-opacity .15s, stroke .15s; }
#kg-svg .kg-edge.hot { stroke: var(--jade); stroke-opacity: .9; }
#kg-svg .kg-node { cursor: pointer; transition: opacity .15s; }
#kg-svg .kg-node circle { stroke: rgba(10,15,31,.85); stroke-width: 1.5; transition: r .15s; }
#kg-svg .kg-node:hover circle, #kg-svg .kg-node.hot circle { stroke: var(--ink); stroke-width: 2; }
#kg-svg .kg-node text { font-family: var(--font-body); font-size: 9px; fill: var(--ink-dim);
  pointer-events: none; paint-order: stroke; stroke: rgba(10,15,31,.85); stroke-width: 2.4px; }
#kg-svg .kg-node.dim { opacity: .16; }
#kg-svg .kg-edge.dim { stroke-opacity: .07; }
#kg-svg.linking .kg-edge { cursor: pointer; }
#kg-svg.linking .kg-edge:hover { stroke: var(--critical); stroke-opacity: 1; stroke-width: 3; }
#kg-svg .kg-edge.severed { stroke: var(--critical); stroke-opacity: .42; stroke-width: 1.6;
  stroke-dasharray: 2 6; stroke-linecap: round; pointer-events: stroke; }
#kg-svg.linking .kg-edge.severed:hover { stroke: var(--jade); stroke-opacity: 1; }
#kg-svg .kg-edge.gap { stroke: var(--gold); stroke-opacity: .6; stroke-width: 1.6; stroke-dasharray: 6 4; cursor: pointer; }
#kg-svg .kg-edge.gap:hover { stroke-opacity: 1; stroke-width: 2.6; }
#kg-svg .kg-node.bridge .kg-bridge-ring { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 3 3; opacity: .9; }

/* Q&A over the map */
.kg-ask { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; }
.kg-ask .search { flex: 1; }
.kg-deep { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
.kg-ask-out { margin: 10px 0 0; background: rgba(16,24,52,.55); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; }
.kg-ans { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.kg-cites { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kg-cite { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--jade); color: var(--jade-soft); background: rgba(34,211,238,.08); cursor: pointer; }
.kg-cite:hover { background: rgba(34,211,238,.18); }
.kg-ask-out .by { margin-top: 8px; font-size: 10.5px; color: var(--ink-faint); font-family: var(--font-mono); }

/* related-knowledge rail + provenance */
.kg-rail { display: flex; flex-direction: column; gap: 6px; }
.kg-rel { text-align: left; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: border-color .12s; }
.kg-rel:hover { border-color: var(--jade); }
.kg-rel b { font-size: 12.5px; font-weight: 600; }
.kg-rel-why { font-size: 10.5px; color: var(--ink-faint); font-family: var(--font-mono); }
.prov-badge { font-size: 10px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); margin-left: 4px; }
.prov-badge.curated { border-color: var(--jade); color: var(--jade-soft); }
.prov-badge.manual { border-color: var(--gold); color: var(--gold-soft); }
.prov-badge.ai-inferred { border-color: #b98bd9; color: #d4b6ec; }
.lg-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-faint); margin-bottom: 4px; }

/* geospatial engine — task toggle + score decomposition */
.geo-tasks { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.geo-task { font-size: 11px; padding: 4px 10px; }
.geo-task.on { border-color: var(--gold); color: var(--gold-soft); background: rgba(139,123,255,.12); }
.geo-score-head { display: flex; align-items: center; justify-content: space-between; }
.geo-score-head .mmir-score { font-size: 20px; color: var(--gold-soft); font-family: var(--font-mono); }
#mkt-geo-out { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(16,24,52,.5); }
.kg-legend { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 4px;
  max-height: 70%; overflow: auto; background: rgba(16,24,52,.6); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 11px; }
.kg-legend .lg { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--ink-dim); cursor: pointer; }
.kg-legend .lg:hover { color: var(--ink); }
.kg-legend .lg i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.kg-legend .lg.off { opacity: .35; }
.kg-hint { position: absolute; bottom: 10px; right: 14px; font-size: 10px; color: var(--ink-faint);
  background: rgba(16,24,52,.55); padding: 4px 9px; border-radius: 6px; }
.btn.bind-on { background: linear-gradient(180deg, var(--jade-soft), var(--jade)); color: #0a0f1f; border-color: var(--jade); }
#kg-svg.binding { cursor: crosshair; }
#kg-svg .kg-node.sel circle { stroke: var(--gold); stroke-width: 3; }
#kg-svg .kg-node.sel { animation: kg-pulse 1.6s ease-in-out infinite; }
@keyframes kg-pulse { 0%,100% { opacity: 1; } 50% { opacity: .65; } }
#kg-svg .kg-hull { fill: rgba(139,123,255,.10); stroke: var(--gold); stroke-width: 1.6;
  stroke-dasharray: 6 5; stroke-linejoin: round; }
#kg-svg .kg-bind-line { stroke: var(--gold); stroke-width: 1.4; stroke-opacity: .55; }
#kg-marquee { fill: rgba(34,211,238,.10); stroke: var(--jade); stroke-width: 1; stroke-dasharray: 4 3; }

/* cartographer workbench */
.kg-workbench { position: absolute; left: 14px; bottom: 14px; width: min(380px, calc(100% - 28px));
  background: rgba(9,14,35,.92); backdrop-filter: blur(12px); border: 1px solid var(--gold);
  border-radius: var(--radius); padding: 14px 15px; box-shadow: var(--shadow); }
.kg-workbench .wb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kg-workbench .wb-head b { font-family: var(--font-display); font-size: 15px; }
.kg-workbench .wb-x { cursor: pointer; color: var(--ink-faint); background: none; border: 0; font-size: 16px; }
.kg-workbench .wb-chips { display: flex; flex-wrap: wrap; gap: 5px; max-height: 70px; overflow: auto; margin-bottom: 10px; }
.kg-workbench .wb-chip { font-size: 10.5px; font-family: var(--font-mono); padding: 3px 8px; border-radius: 999px;
  background: rgba(139,123,255,.12); color: var(--gold-soft); border: 1px solid rgba(139,123,255,.34); }
.kg-workbench .wb-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.kg-workbench .wb-actions .btn { font-size: 12px; padding: 8px 12px; }
.kg-result { margin-top: 11px; background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 11px 13px; font-size: 12.5px; color: var(--ink); white-space: pre-wrap;
  max-height: 200px; overflow: auto; line-height: 1.55; }
.kg-result .by { display: block; margin-top: 8px; font-size: 10px; color: var(--ink-faint); font-family: var(--font-mono); }

/* knowledge add/upload modal */
.kg-form { display: flex; flex-direction: column; gap: 12px; }
.kg-tabs { display: flex; gap: 6px; margin-bottom: 4px; }
.kg-tabs button { flex: 1; font-size: 12.5px; padding: 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-dim); cursor: pointer; }
.kg-tabs button.active { color: var(--ink); border-color: var(--jade); background: var(--panel-2); }
.kg-field { display: flex; flex-direction: column; gap: 5px; }
.kg-field label { font-size: 11px; color: var(--ink-dim); font-family: var(--font-mono); }
.kg-field input, .kg-field textarea, .kg-field select {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink); font: inherit; font-size: 13.5px; padding: 9px 11px; }
.kg-field textarea { min-height: 120px; resize: vertical; }
.kg-field input:focus, .kg-field textarea:focus, .kg-field select:focus { outline: none; border-color: var(--jade); }
.kg-drop { border: 1.5px dashed var(--line); border-radius: var(--radius-sm); padding: 22px; text-align: center;
  background: var(--panel); color: var(--ink-dim); font-size: 13px; cursor: pointer; transition: border-color .15s; }
.kg-drop:hover { border-color: var(--jade); }
.kg-extracted { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 11px 13px; font-size: 12.5px; color: var(--ink-dim); white-space: pre-wrap; max-height: 160px; overflow: auto; }

/* ---- agent studio ------------------------------------------------------- */
.anatomy { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 880px){ .anatomy { grid-template-columns: repeat(2, 1fr); } }
.anat { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 13px; }
.anat .an-step { font-family: var(--font-mono); font-size: 10px; color: var(--gold); letter-spacing: 1px; }
.anat .an-title { font-family: var(--font-display); font-size: 15px; margin: 5px 0 4px; }
.anat .an-desc { font-size: 11.5px; color: var(--ink-dim); line-height: 1.5; }
.studio-card .sc-tools { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }
.tool-pill { font-family: var(--font-mono); font-size: 10.5px; padding: 4px 9px; border-radius: 999px;
  background: rgba(34,211,238,.1); color: var(--jade-soft); border: 1px solid rgba(34,211,238,.28); }
.tool-pill.excel { background: rgba(46,160,67,.14); color: #7fd99a; border-color: rgba(46,160,67,.4); }
.sc-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); margin-bottom: 8px; }
.sc-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.sc-actions .btn { font-size: 12px; padding: 7px 12px; }
.sc-out { margin-top: 12px; }
.tool-trace { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.tt-item { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 9px 11px; }
.tt-item .tt-head { display: flex; justify-content: space-between; font-size: 11.5px; }
.tt-item .tt-head b { color: var(--jade-soft); font-family: var(--font-mono); }
.tt-item .tt-sum { font-size: 11.5px; color: var(--ink-dim); margin-top: 3px; }

/* tool multi-select in the builder */
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 620px){ .tool-grid { grid-template-columns: 1fr; } }
.tool-opt { display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--panel); cursor: pointer; transition: border-color .15s; }
.tool-opt:hover { border-color: var(--jade); }
.tool-opt.on { border-color: var(--jade); background: var(--panel-2); }
.tool-opt .to-check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line); flex: none; margin-top: 1px; display: grid; place-items: center; font-size: 11px; color: #0a0f1f; }
.tool-opt.on .to-check { background: var(--jade); border-color: var(--jade); }
.tool-opt .to-label { font-size: 12.5px; } .tool-opt .to-desc { font-size: 10.5px; color: var(--ink-faint); margin-top: 1px; }

/* ---- knowledge map: division spaces ------------------------------------- */
.kg-divisions { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.kg-divisions button { font-family: var(--font-mono); font-size: 11.5px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-dim); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.kg-divisions button:hover { border-color: var(--jade); color: var(--ink); }
.kg-divisions button.active { color: #0a0f1f; border-color: transparent; font-weight: 600; }
.kg-divisions button i { width: 8px; height: 8px; border-radius: 50%; }
#kg-div-note { min-height: 12px; }
.kg-divisions .kg-newspace { border-style: dashed; color: var(--ink-faint); }
.kg-divisions .kg-newspace:hover { border-color: var(--gold); color: var(--gold-soft); }
.ns-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.ns-swatches button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.ns-swatches button.active { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(238,242,255,.25); }
/* agent ask box */
.agent-ask { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.agent-ask .aa-row { display: flex; gap: 8px; }
.agent-ask input { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink); font: inherit; font-size: 13.5px; padding: 9px 12px; }
.agent-ask input:focus { outline: none; border-color: var(--jade); }
.agent-ask .aa-out { margin-top: 11px; }

/* ---- agents AI briefing -------------------------------------------------- */
.briefing-text { font-size: 13.5px; color: var(--ink); white-space: pre-wrap; line-height: 1.6; }
.briefing-by { font-size: 10.5px; color: var(--ink-faint); margin-top: 12px; }

/* ---- division agents ---------------------------------------------------- */
.agent-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; }
@media (max-width: 920px){ .agent-grid { grid-template-columns: 1fr; } }
.agent-card { background: linear-gradient(155deg, rgba(19,26,53,.72), rgba(16,24,52,.55));
  backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(112,202,176,.14); border-radius: var(--radius); padding: 18px; cursor: pointer;
  position: relative; overflow: hidden; transition: border-color .15s, transform .12s; }
.agent-card:hover { border-color: var(--jade); transform: translateY(-2px); }
.agent-card::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; }
.agent-card.ok::after { background: var(--ok); }
.agent-card.attention::after { background: var(--warning); }
.agent-card.critical::after { background: var(--critical); }
.agent-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.agent-head .a-name { font-family: var(--font-display); font-size: 18px; }
.agent-head .a-div { font-size: 10.5px; font-family: var(--font-mono); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .8px; margin-top: 2px; }
.agent-status { font-family: var(--font-mono); font-size: 10.5px; padding: 4px 10px; border-radius: 999px; white-space: nowrap; flex: none; }
.agent-status.ok { color: var(--ok); background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.3); }
.agent-status.attention { color: var(--warning); background: rgba(139,123,255,.1); border: 1px solid rgba(139,123,255,.34); }
.agent-status.critical { color: var(--critical); background: rgba(217,89,79,.12); border: 1px solid rgba(217,89,79,.36); }
.agent-summary { font-size: 12.5px; color: var(--ink-dim); margin: 10px 0 12px; }
.agent-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.agent-ask { display: flex; gap: 6px; margin: 0 0 8px; }
.agent-ask .aa-q { flex: 1; min-width: 0; font-size: 12px; padding: 5px 8px; }
.agent-ask .seg { cursor: pointer; white-space: nowrap; }
.aa-out { font-size: 11.5px; line-height: 1.4; margin-bottom: 8px; }
.aa-out:empty { display: none; }
.live-dot { font-size: 11px; color: #34d399; margin-left: 6px; }
.live-dot::before { content: "● "; animation: livepulse 2s infinite; }
@keyframes livepulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.an-agent-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.an-agent-row { display: flex; gap: 6px; }
.reports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 4px; }
.report-card { border: 1px solid var(--border, #2b3660); border-radius: 10px; padding: 12px; background: rgba(127,127,127,.03); }
.rc-head { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.rc-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.reports-preview { font-size: 12.5px; line-height: 1.5; padding: 10px 4px; max-height: 460px; overflow: auto; }
.reports-preview h2 { font-size: 16px; margin: 10px 0 6px; } .reports-preview h3 { font-size: 13.5px; margin: 8px 0 4px; }
.ws-owner { padding: 14px; }
.ws-owner-head { display: flex; align-items: center; gap: 12px; }
.ws-face { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 26px; background: rgba(45,212,191,.1); border: 1px solid var(--border, #2b3660); }
.ws-badge { font-size: 10.5px; background: rgba(233,185,73,.16); color: #e9b949; border-radius: 6px; padding: 1px 7px; margin-left: 6px; }
.ws-ctx { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 12px; }
.ws-stat { border: 1px solid var(--border, #2b3660); border-radius: 9px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.ws-stat b { font-size: 17px; }
.crew-out { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.crew-msg { border: 1px solid var(--border, #2b3660); border-radius: 10px; padding: 8px 11px; background: rgba(127,127,127,.03); border-left: 3px solid var(--border, #2b3660); }
.crew-msg.crew-plan { border-left-color: #e9b949; } .crew-msg.crew-work { border-left-color: #2dd4bf; }
.crew-msg.crew-review { border-left-color: #a78bfa; } .crew-msg.crew-revise { border-left-color: #fb7185; }
.crew-msg.crew-final { border-left-color: #34d399; background: rgba(52,211,153,.05); }
.crew-who { font-size: 12px; margin-bottom: 4px; }
.crew-text { font-size: 12.5px; line-height: 1.5; }
.crew-history { margin-top: 6px; max-height: 220px; overflow: auto; }
.crew-hrow { font-size: 12px; padding: 5px 6px; border-bottom: 1px solid rgba(127,127,127,.08); cursor: pointer; }
.crew-hrow:hover { background: rgba(45,212,191,.06); }
.ws-canvas { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.ws-block { border: 1px solid var(--border, #2b3660); border-radius: 10px; padding: 10px 12px; background: rgba(127,127,127,.03); }
.ws-block-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.ws-block-head .seg { cursor: pointer; }
.ws-block-text { font-size: 12.5px; line-height: 1.55; }
.ws-chart { width: 100%; height: auto; display: block; }
.ws-var { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ws-var-name { font-family: var(--mono, monospace); font-size: 13px; color: #d6defa; }
.ws-var-eq { color: var(--ink-dim); }
.ws-var-val { font-size: 18px; font-weight: 700; color: var(--jade); }
.exec-only { display: none; }
body[data-role="executive"] .exec-only { display: flex; }
.eyes-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 4px; border-bottom: 1px solid rgba(127,127,127,.08); font-size: 12.5px; }
.eyes-row:last-child { border-bottom: 0; }
.eyes-row .seg { cursor: pointer; white-space: nowrap; }
.eyes-news { padding: 5px 2px; border-bottom: 1px solid rgba(127,127,127,.07); font-size: 12.5px; }
.eyes-news a { color: var(--ink); text-decoration: none; }
.eyes-news a:hover { text-decoration: underline; }
.agent-meta .seg { font-family: var(--font-mono); font-size: 10.5px; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink-dim); }
.agent-rec { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.agent-rec .rp { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; padding: 3px 7px; border-radius: 5px; height: fit-content; }
.agent-rec .rp.high { color: var(--critical); background: rgba(217,89,79,.12); }
.agent-rec .rp.medium { color: var(--warning); background: rgba(139,123,255,.1); }
.agent-rec .rp.low { color: var(--ink-dim); background: var(--line-soft); }
.agent-rec .r-action { color: var(--ink); }
.agent-rec .r-why { color: var(--ink-faint); font-size: 11px; margin-top: 2px; }
.agent-more { font-family: var(--font-mono); font-size: 11px; color: var(--jade-soft); margin-top: 10px; }
.agent-card.disabled { opacity: .5; filter: grayscale(.5); }
.agent-card.disabled::after { background: var(--ink-faint) !important; }
.agent-switch { flex: none; width: 38px; height: 21px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--line-soft); cursor: pointer; padding: 0; position: relative; transition: background .15s; }
.agent-switch span { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--ink-faint); transition: transform .18s, background .15s; }
.agent-switch.on { background: linear-gradient(180deg, var(--jade-soft), var(--jade)); border-color: var(--jade); }
.agent-switch.on span { transform: translateX(17px); background: #0a0f1f; }
.agent-meta .kg-link { cursor: pointer; border-color: rgba(34,211,238,.4); color: var(--jade-soft); background: transparent; font-family: var(--font-mono); font-size: 10.5px; }
.agent-meta .kg-link:hover { background: var(--line-soft); }
.priority-action { display: grid; grid-template-columns: auto auto 1fr; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.priority-action:last-child { border-bottom: 0; }
.priority-action .pa-div { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .6px; white-space: nowrap; }
.finding { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.finding:last-child { border-bottom: 0; }
.finding .f-sev { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; padding: 3px 0; }
.finding .f-sev.critical { color: var(--critical); } .finding .f-sev.warning { color: var(--warning); } .finding .f-sev.info { color: var(--jade-soft); }

/* responsive rail -> top */
@media (max-width: 720px){
  .app { grid-template-columns: 1fr; }
  .agent-grid { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav-group { width: 100%; margin: 6px 0 0; }
  .rail .foot { display: none; }
  .main { padding: 22px 18px 48px; }
  .kpis { grid-template-columns: repeat(2,1fr); }
  .topbar .clock { display: none; }
}

/* ============================================================ Kalnavi · role & org panel */
.kg-role-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; margin-right: 10px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(139,123,255,.10); color: var(--ink); font: 600 12.5px var(--font-body); cursor: pointer; }
.kg-role-chip:hover { border-color: var(--gold); background: rgba(139,123,255,.18); }
.kg-modal { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px;
  background: rgba(5,8,20,.72); backdrop-filter: blur(6px); animation: kgFade .18s ease-out; }
@keyframes kgFade { from { opacity: 0; } to { opacity: 1; } }
.kg-modal-card { position: relative; width: min(760px, 100%); max-height: 92vh; overflow: auto; padding: 28px;
  border-radius: 22px; background: linear-gradient(180deg, #141d3b, #0e1530); border: 1px solid var(--line);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(139,123,255,.12) inset; }
.kg-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line);
  background: transparent; color: var(--ink-dim); cursor: pointer; }
.kg-eyebrow { margin: 0 0 6px; font: 600 11px var(--font-mono); letter-spacing: 2px; color: var(--gold-soft); }
.kg-modal-card h2 { margin: 0 0 6px; font: 800 26px var(--font-display); letter-spacing: -.3px; }
.kg-lede { margin: 0 0 18px; color: var(--ink-dim); }
.kg-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.kg-role { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,.02); color: var(--ink); transition: transform .12s, border-color .12s; }
.kg-role:hover { transform: translateY(-2px); border-color: rgba(139,123,255,.6); }
.kg-role.on { border-color: var(--gold); background: linear-gradient(160deg, rgba(139,123,255,.22), rgba(34,211,238,.08)); }
.kg-role-ic { font-size: 24px; } .kg-role b { font-size: 14px; } .kg-role small { color: var(--ink-dim); font-size: 12px; line-height: 1.35; }
.kg-org { margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px; }
.kg-org summary { cursor: pointer; padding: 10px 0; font-weight: 700; }
.kg-org-body { display: grid; gap: 10px; padding-bottom: 12px; }
.kg-org-body label { display: grid; gap: 5px; font-size: 12px; color: var(--ink-dim); }
.kg-org-body input, .kg-org-body select, .kg-org-body textarea { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: #0a1022; color: var(--ink); font: 14px var(--font-body); }
.kg-demo { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(245,184,74,.10); border: 1px solid rgba(245,184,74,.35); font-size: 13px; }
.kg-org-act, .kg-actions { display: flex; gap: 8px; justify-content: flex-end; }
.kg-actions { margin-top: 18px; }
@media (max-width: 560px) { .kg-modal-card { padding: 20px; } .kg-modal-card h2 { font-size: 21px; } .kg-role-chip { margin-right: 6px; } }
.kg-file-link { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0; padding: 6px 12px; border-radius: 10px;
  background: linear-gradient(135deg, var(--gold), #5b6cff); color: #fff !important; font-weight: 700; font-size: 12.5px;
  text-decoration: none; box-shadow: 0 6px 16px -8px rgba(109,95,240,.8); }
.kg-file-link:hover { filter: brightness(1.08); }

/* ============================================================ Kalnavi · voice */
.kg-mic { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; margin-left: 6px;
  border-radius: 12px; border: 1px solid var(--line); background: rgba(139,123,255,.12); color: var(--ink); cursor: pointer; }
.kg-mic:hover { border-color: var(--gold); }
.kg-mic .kg-wave { display: none; position: absolute; inset: auto 6px 5px; height: 8px; gap: 2px; align-items: end; justify-content: center; }
.kg-mic .kg-wave i { width: 3px; border-radius: 2px; background: var(--jade); animation: kgWave .9s ease-in-out infinite; }
.kg-mic .kg-wave i:nth-child(2) { animation-delay: .15s; } .kg-mic .kg-wave i:nth-child(3) { animation-delay: .3s; } .kg-mic .kg-wave i:nth-child(4) { animation-delay: .45s; }
.kg-mic.on { background: linear-gradient(135deg, #ef4444, #f472b6); color: #fff; border-color: transparent; box-shadow: 0 0 0 6px rgba(244,114,182,.18); animation: kgPulse 1.4s ease-out infinite; }
.kg-mic.on svg { transform: translateY(-3px); } .kg-mic.on .kg-wave { display: flex; }
.kg-mic.on .kg-wave i { background: #fff; }
@keyframes kgWave { 0%,100% { height: 2px; } 50% { height: 8px; } }
@keyframes kgPulse { 0% { box-shadow: 0 0 0 0 rgba(244,114,182,.45); } 100% { box-shadow: 0 0 0 14px rgba(244,114,182,0); } }
@media (prefers-reduced-motion: reduce) { .kg-mic.on, .kg-mic .kg-wave i, .kg-orb { animation: none !important; } }

.kg-nav-group { color: var(--gold-soft) !important; }
.kg-ask { display: grid; grid-template-columns: 280px 1fr; gap: 16px; margin-top: 18px; min-height: 560px; }
.kg-ask-agents { display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow: auto; padding-right: 4px; }
.kg-ag { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid transparent;
  background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.kg-ag:hover { background: rgba(255,255,255,.03); border-color: var(--line); }
.kg-ag.on { border-color: var(--ag); background: color-mix(in srgb, var(--ag) 14%, transparent); }
.kg-ag b { display: block; font-size: 13px; } .kg-ag small { display: block; font-size: 11.5px; color: var(--ink-dim); }
.kg-ag-av { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; overflow: hidden; }
.kg-ag-av svg { width: 100%; height: 100%; } .kg-ag-av.big { width: 46px; height: 46px; border-radius: 14px; }
.kg-ask-chat { display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.kg-ask-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ag) 16%, transparent), transparent); }
.kg-ask-head > div { flex: 1; } .kg-ask-head b { display: block; font-size: 16px; } .kg-ask-head small { color: var(--ink-dim); }
.kg-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-dim); cursor: pointer; }
.kg-ask-log { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; max-height: 52vh; }
.kg-empty { margin: auto; color: var(--ink-faint); }
.kg-msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; line-height: 1.5; position: relative; white-space: pre-wrap; }
.kg-msg.me { align-self: flex-end; background: linear-gradient(135deg, #5b6cff, var(--gold)); color: #fff; border-bottom-right-radius: 6px; }
.kg-msg.ag { align-self: flex-start; background: #0f1730; border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.kg-msg.ag b { display: block; font-size: 11px; letter-spacing: 1px; color: var(--ag); margin-bottom: 3px; }
.kg-say { display: inline-grid; place-items: center; margin-top: 6px; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.kg-ask-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.kg-chip { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-dim); font-size: 12px; cursor: pointer; }
.kg-chip:hover { color: var(--ink); border-color: var(--gold); }
.kg-ask-bar { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); align-items: center; }
.kg-ask-bar input { flex: 1; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: #0a1022; color: var(--ink); font: 14px var(--font-body); }
.kg-ask-bar .kg-mic { order: -1; margin: 0; }
.kg-call .kg-call-card { width: min(420px, 100%); padding: 32px 26px; border-radius: 28px; text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--ag) 30%, #0e1530), #0b1022); border: 1px solid var(--line); }
.kg-orb { width: 150px; height: 150px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, color-mix(in srgb, var(--ag) 55%, transparent), transparent 70%); }
.kg-orb .kg-ag-av.big { width: 84px; height: 84px; border-radius: 26px; }
.kg-call[data-state="listen"] .kg-orb { animation: kgPulse 1.4s ease-out infinite; }
.kg-call[data-state="speak"] .kg-orb { animation: kgSpeak .5s ease-in-out infinite alternate; }
.kg-call[data-state="think"] .kg-orb { animation: kgThink 1.2s linear infinite; }
@keyframes kgSpeak { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes kgThink { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
.kg-call h2 { margin: 4px 0; font: 800 24px var(--font-display); }
.kg-call-state { margin: 0; color: var(--jade-soft); font: 600 12px var(--font-mono); letter-spacing: 2px; text-transform: uppercase; }
.kg-call-said { min-height: 3.2em; margin: 14px 0; color: var(--ink); line-height: 1.5; }
.kg-call-act { display: flex; gap: 10px; justify-content: center; }
.kg-hang { background: linear-gradient(135deg, #ef4444, #dc2626) !important; color: #fff !important; border-color: transparent !important; }
.kg-call-hint { font-size: 12px; margin-top: 14px; }
@media (max-width: 860px) {
  .kg-ask { grid-template-columns: 1fr; }
  .kg-ask-agents { flex-direction: row; overflow-x: auto; max-height: none; padding-bottom: 6px; }
  .kg-ag { flex: none; } .kg-ag small { display: none; }
  .kg-ask-head { flex-wrap: wrap; }
}

/* ============================================================ Kalnavi · Akademi AI */
.ac-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 18px; }
.ac-levels { display: inline-flex; padding: 4px; border-radius: 12px; border: 1px solid var(--line); background: #0a1022; }
.ac-levels button { padding: 7px 14px; border-radius: 9px; border: 0; background: transparent; color: var(--ink-dim); font: 600 13px var(--font-body); cursor: pointer; }
.ac-levels button.on { background: linear-gradient(135deg, var(--gold), #5b6cff); color: #fff; }
.ac-progress { flex: 1; min-width: 120px; max-width: 280px; height: 8px; border-radius: 99px; background: #0a1022; border: 1px solid var(--line); overflow: hidden; }
.ac-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--jade)); }
.ac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.ac-card { position: relative; display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 20px; min-height: 180px; border-radius: 18px; cursor: pointer;
  border: 1px solid var(--line); color: var(--ink); background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c) 26%, transparent), transparent 60%), var(--panel);
  transition: transform .15s, border-color .15s, box-shadow .15s; }
.ac-card:hover { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 18px 40px -22px var(--c); }
.ac-num { position: absolute; top: 14px; right: 16px; font: 600 12px var(--font-mono); color: var(--ink-faint); }
.ac-ic { font-size: 30px; }
.ac-card b { font-size: 17px; }
.ac-card small { color: var(--ink-dim); line-height: 1.4; }
.ac-go, .ac-done { margin-top: auto; font: 700 12.5px var(--font-body); color: var(--c); }
.ac-done { color: #34d399; }
.ac-back { margin-bottom: 10px; }
.ac-layout { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 16px; align-items: start; }
.ac-theory, .ac-lab, .ac-quiz { border-radius: 18px; border: 1px solid var(--line); background: var(--panel); padding: 18px; }
.ac-theory { border-top: 3px solid var(--c); position: sticky; top: 12px; }
.ac-theory p { line-height: 1.65; margin: 0 0 12px; }
.ac-lab { min-width: 0; }
.ac-quiz { margin-top: 16px; }
.ac-lab-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.ac-lab h4 { margin: 18px 0 8px; font-size: 13px; color: var(--jade-soft); letter-spacing: .3px; }
.ac-canvas { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--line); cursor: crosshair; }
.ac-mini { margin-top: 8px; }
.ac-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; font-size: 13px; color: var(--ink-dim); }
.ac-controls.ac-col { flex-direction: column; align-items: stretch; }
.ac-controls select, .ac-controls input[type=range] { accent-color: var(--gold); }
.ac-controls select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: #0a1022; color: var(--ink); }
.ac-controls output { font: 600 12px var(--font-mono); color: var(--ink); margin-left: 6px; }
.ac-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; padding: 10px 12px; border-radius: 12px; background: #0a1022; border: 1px solid var(--line); }
.ac-stats .bad { color: #fb7185; }
.ac-stats .good { color: #34d399; }
.ac-input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #0a1022; color: var(--ink); font: 15px var(--font-body); }
.ac-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-tokens span { padding: 5px 9px; border-radius: 8px; font: 13px var(--font-mono); background: hsl(var(--h) 70% 60% / .18); border: 1px solid hsl(var(--h) 70% 60% / .5); }
.ac-ids { font-size: 12px; color: var(--ink-dim); word-break: break-all; padding: 10px; border-radius: 10px; background: #0a1022; }
.ac-sent { line-height: 2; }
.ac-sent .pos { background: rgba(52,211,153,.22); border-radius: 6px; padding: 2px 4px; }
.ac-sent .neg { background: rgba(251,113,133,.24); border-radius: 6px; padding: 2px 4px; }
.ac-cv { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: center; }
.ac-cv figure { margin: 0; text-align: center; }
.ac-cv canvas { width: 220px; height: 220px; border-radius: 12px; border: 1px solid var(--line); }
.ac-cv figcaption { font-size: 12px; color: var(--ink-dim); margin-top: 6px; }
.ac-kernel { display: grid; gap: 6px; text-align: center; font-size: 11px; color: var(--ink-dim); }
.ac-kernel div { display: grid; grid-template-columns: repeat(3, 36px); gap: 3px; }
.ac-kernel span { height: 36px; display: grid; place-items: center; border-radius: 7px; background: #0a1022; border: 1px solid var(--line); color: var(--ink); font: 600 13px var(--font-mono); }
.ac-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 12px 0; }
.ac-step { padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(139,123,255,.12), transparent); animation: acIn .5s calc(var(--i) * 90ms) both; }
.ac-step b { display: block; font-size: 12.5px; }
.ac-step small { color: var(--ink-dim); font-size: 11.5px; }
@keyframes acIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ac-tf { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.ac-tf-words { display: flex; flex-wrap: wrap; gap: 6px; max-width: 240px; }
.ac-tf-words button { padding: 7px 11px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink); cursor: pointer; font: 600 13px var(--font-body);
  background: color-mix(in srgb, #22d3ee calc(var(--a) * 100%), #0a1022); }
.ac-tf-words button.on { outline: 2px solid #facc15; }
.ac-note { margin-top: 8px; }
.ac-bars div { display: grid; grid-template-columns: 110px 1fr 56px; align-items: center; gap: 8px; margin: 5px 0; font-size: 13px; }
.ac-bars i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--gold), var(--jade)); transition: width .25s; }
.ac-bars b { font: 600 12px var(--font-mono); text-align: right; }
.ac-eth-row { display: grid; grid-template-columns: 100px 1fr 130px; align-items: center; gap: 10px; margin: 8px 0; font-size: 13px; }
.ac-bar { height: 16px; border-radius: 8px; background: #0a1022; border: 1px solid var(--line); overflow: hidden; }
.ac-bar i { display: block; height: 100%; transition: width .25s; }
.ac-cases { display: grid; gap: 8px; }
.ac-case { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: #0a1022; }
.ac-case summary { cursor: pointer; font-weight: 600; }
.ac-case p { color: var(--ink-dim); line-height: 1.55; }
.ac-quiz h3 { margin: 0 0 10px; }
.ac-q { margin-bottom: 14px; }
.ac-q p { margin: 0 0 8px; }
.ac-q div { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-q button { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: #0a1022; color: var(--ink); cursor: pointer; font: 13px var(--font-body); }
.ac-q button:hover { border-color: var(--gold); }
.ac-q button.right { border-color: #34d399; background: rgba(52,211,153,.18); }
.ac-q button.wrong { border-color: #fb7185; background: rgba(251,113,133,.18); }
.ac-q button.dim { opacity: .45; }
.ac-score { font-weight: 700; color: var(--jade-soft); }
@media (max-width: 900px) {
  .ac-layout { grid-template-columns: 1fr; }
  .ac-theory { position: static; }
  .ac-eth-row { grid-template-columns: 80px 1fr; }
  .ac-eth-row span { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .ac-step { animation: none; } .ac-card { transition: none; } }

/* ============================================================================
   comfort pass: readable sizes, sentence-case labels instead of tiny tracked-out mono caps, calmer panels
============================================================================ */
body { text-rendering: optimizeLegibility; font-kerning: normal; line-height: 1.6; }
h1.title { font-weight: 750; font-size: clamp(26px, 2.6vw, 32px); letter-spacing: -.015em; line-height: 1.15; text-wrap: balance; }
.lede { font-size: 15.5px; line-height: 1.65; color: #aab4d8; }
.eyebrow { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--gold-soft); }
.nav-group { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #7f8ab3; margin: 16px 12px 6px; }
.crumb { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #8f9ac2; }
.brand .sub { font-size: 12px; letter-spacing: 0; text-transform: none; }
.nav button { font-size: 14.5px; padding: 10px 12px; }
.nav button.active { background: #1a2350; box-shadow: inset 3px 0 0 var(--gold); }
.panel { padding: 24px; border-color: #222c52; box-shadow: 0 12px 40px -28px rgba(0, 0, 0, .8); }
.panel-head h2 { font-weight: 700; font-size: 18px; letter-spacing: -.005em; }
.panel-head .hint, .muted { font-size: 13px; color: #8a95bd; }
.kpi .label { font-size: 13px; letter-spacing: 0; }
.kpi .note { font-family: var(--font-body); font-size: 12px; }
.disclaimer { font-size: 11.5px; }
.callout { font-size: 13.5px; line-height: 1.6; }
.panel.glass { border-color: #222c52; }
.panel.glass::before { display: none; }
.view { animation-duration: .25s; }
.rail .foot { font-size: 12px; }
table { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .main { padding: 18px 16px 48px; }
  .panel { padding: 18px; border-radius: 14px; }
  h1.title { font-size: 25px; }
  .lede { font-size: 15px; margin-bottom: 20px; }
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}