/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!../../node_modules/.pnpm/next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/globals.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

html,
body {
  background: var(--bg);
  min-height: 100vh;
  /* Off-canvas drawers (.sheet / .cop / .scrim) sit at translateX(100%), i.e.
     ~500px beyond the right edge. Without this guard they add phantom
     horizontal-scroll space (the empty band on the right) and make wide rows
     look clipped. Fixed drawers are viewport-anchored, so hiding x-overflow
     here does NOT prevent them sliding in. */
  overflow-x: hidden;
  max-width: 100%;
}

/* ── Motion & polish (customer dashboard) ──────────────────────────────── */
@keyframes vor-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes vor-shimmer {
  0% { background-position: -480px 0; }
  100% { background-position: 480px 0; }
}
@keyframes vor-pop {
  0% { opacity: 0; transform: translate(-50%, 14px) scale(0.96); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes vor-pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(143, 230, 224, 0.5); }
  50% { opacity: 0.7; box-shadow: 0 0 0 5px rgba(143, 230, 224, 0); }
}

.fade-up { animation: vor-fade-up 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.fade-up-1 { animation-delay: 0.04s; }
.fade-up-2 { animation-delay: 0.10s; }
.fade-up-3 { animation-delay: 0.16s; }

.kpi .val { transition: color 0.3s; }
.kpi { transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; }
.kpi:hover { transform: translateY(-2px); border-color: var(--frost-dim); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }

.prow { transition: background 0.16s, transform 0.16s; }
.prow:hover { transform: translateX(2px); }

.skel {
  background: linear-gradient(90deg, var(--panel-2) 0%, rgba(143, 230, 224, 0.07) 40%, var(--panel-2) 80%);
  background-size: 480px 100%;
  border-radius: 6px;
  animation: vor-shimmer 1.2s linear infinite;
}

/* Scan panel */
.scan-card {
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.scan-card.scanning {
  border-color: var(--frost-dim);
  box-shadow: 0 0 0 1px rgba(143, 230, 224, 0.18), 0 18px 50px rgba(0, 0, 0, 0.35);
}
.radar-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 4px 8px 0; }
.radar-legend .lg { display: inline-flex; align-items: center; gap: 7px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--mist); }
.radar-legend .lg .d { width: 8px; height: 8px; border-radius: 50%; }
.radar-legend .lg .d.frost { background: var(--frost); box-shadow: 0 0 8px var(--frost); }
.radar-legend .lg .d.ember { background: var(--ember); box-shadow: 0 0 8px var(--ember); }
.radar-legend .lg .d.crit { background: var(--crit); box-shadow: 0 0 8px var(--crit); }

.scan-status {
  display: flex; align-items: center; gap: 10px;
  font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--frost);
  min-height: 18px;
}
.scan-status .live { width: 7px; height: 7px; border-radius: 50%; background: var(--frost); animation: vor-pulse-dot 1.1s ease-in-out infinite; }
.scan-bar { height: 3px; border-radius: 3px; background: var(--line-2); overflow: hidden; margin-top: 10px; }
.scan-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--frost-dim), var(--frost)); border-radius: 3px; transition: width 0.2s linear; box-shadow: 0 0 10px var(--frost); }

.toast-pop {
  position: fixed; bottom: 22px; left: 50%; z-index: 400;
  background: var(--panel-2); border: 1px solid var(--frost-dim); color: var(--bone);
  font-size: 13px; padding: 11px 18px; border-radius: 10px;
  animation: vor-pop 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; gap: 10px;
}

.btn-vor { position: relative; }
.btn-vor:disabled { opacity: 0.7; cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .fade-up, .skel, .toast-pop, .scan-status .live { animation: none !important; }
}

/* Landing responsive: collapse multi-col sections on smaller screens */
@media (max-width: 920px) {
  .lp-3 { grid-template-columns: 1fr 1fr !important; }
  .lp-2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 620px) {
  .lp-3 { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   ALTROS THEME SKIN — align the customer app with the Altros Console
   (light · navy + orange · Inter). Redefines the Vör dark tokens so the
   existing components adopt the Altros corporate look with no structural
   changes. Mirrors packages/ui/styles/altros.css.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* surfaces (light) — !important so they win over @vor/ui dark tokens
     regardless of Next dev CSS load order */
  --void: #ffffff !important;
  --bg: #f5f7fa !important;
  --panel: #ffffff !important;
  --panel-2: #f4f6fa !important;
  /* text */
  --bone: #0f2747 !important;       /* primary text = navy */
  --mist: #5b6b85 !important;       /* muted */
  --mist-dim: #94a3b8 !important;
  --steel: #1a3a66 !important;
  --steel-soft: #dbeafe !important;
  /* primary accent = Altros orange */
  --frost: #ff6b2c !important;
  --frost-dim: #e55a1f !important;
  --frost-soft: rgba(255, 107, 44, 0.12) !important;
  /* secondary = amber */
  --ember: #d97706 !important;
  --ember-dim: #b45309 !important;
  --ember-soft: #ffedd5 !important;
  --crit: #dc2626 !important;
  --crit-soft: #fee2e2 !important;
  /* borders (light) */
  --line: #e1e5eb !important;
  --line-2: #eef1f6 !important;
  /* Altros navy scale */
  --navy: #0f2747 !important;
  --navy-2: #1a3a66 !important;
  --navy-3: #6b82a8 !important;
  --navy-sb-text: #c8d3e6 !important;
}

body { font-family: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; color: var(--bone); }
.brand, .kpi .val, .top h1, .card-h h3, .login-box .brand, h1, h2, h3 {
  font-family: "Inter", system-ui, sans-serif;
}

/* Navy sidebar like the console */
.side { background: var(--navy); border-right: 1px solid var(--navy-2); }
.side .brand .b1 { color: var(--navy-3); }
.side .brand .b2 { color: #fff; }
.side .brand .dot { background: var(--frost); }
.side .ptag, .side .ptag.altros { color: var(--navy-3); }
.altros-logo { height: 26px; width: auto; display: block; }
/* The Altros mark is dark-on-light; on the navy sidebar sit it on a clean
   white rounded badge so it renders crisp + on-brand. */
.side .altros-logo {
  height: auto;
  width: 160px;
  max-width: calc(100% - 8px);
  padding: 9px 13px;
  margin: 2px 4px 10px;
  background: #ffffff;
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}
.nav-i { color: var(--navy-sb-text); }
.nav-i:hover { background: var(--navy-2); color: #fff; }
.nav-i.on { background: var(--navy-2); color: #fff; }
.side-foot { border-top-color: var(--navy-2); }
.who:hover { background: var(--navy-2); }
.who .nm { color: #fff; }
.who .pl { color: var(--navy-3); }
.who .av { background: var(--frost); color: #fff; }

/* Topbar + headings */
.top { background: #fff; border-bottom: 1px solid var(--line); }
.top h1 { color: var(--navy); }
.top .sub { color: var(--mist); }
.chip { color: var(--mist); border-color: var(--line); }
.chip .live { background: var(--frost); box-shadow: 0 0 8px var(--frost); }

/* Buttons — Altros orange CTA, white text */
.btn-solid, .btn-vor { background: var(--frost); color: #fff; }
.btn-solid:hover, .btn-vor:hover { background: var(--frost-dim); box-shadow: 0 4px 14px rgba(255, 107, 44, 0.25); transform: none; }
.btn-ghost { border-color: var(--line); color: var(--navy); }
.btn-ghost:hover { border-color: var(--frost); color: var(--frost); }
.btn-amber { background: var(--ember); color: #fff; }

/* Cards / panels / tables on light */
.card, .kpi, .panel { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow, 0 2px 8px rgba(15, 39, 71, 0.06)); }
.card-h { border-bottom-color: var(--line-2); }
thead th { color: var(--mist); border-bottom-color: var(--line); }
tbody td { border-bottom-color: var(--line-2); }
tbody tr.click:hover { background: #fafbfc; }

/* Login on light */
.login-wrap { background: var(--bg); }
.login-box { background: #fff; border-color: var(--line); box-shadow: 0 8px 28px rgba(15, 39, 71, 0.12); }
.login-box .altros-logo { height: 32px; margin: 0 auto 14px; }
.field input { background: #fff; border-color: var(--line); color: var(--navy); }
.field input:focus { border-color: var(--frost); outline: 2px solid var(--frost-soft); }

/* Copilot drawer surfaces */
.cop, .modal-c, .sheet { background: var(--panel); }
.bubble { color: var(--navy); }

/* ══════════════════════════════════════════════════════════════════════
   UI/UX POLISH & MOTION — Altros light theme
   Tasteful micro-interactions + entrance animation for an enterprise feel.
   CSS-only; no component logic changes.
   ══════════════════════════════════════════════════════════════════════ */
@keyframes vor-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes vor-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vor-sheen { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }

/* Smooth transitions across interactive surfaces */
.nav-i, .btn, .card, .kpi, .panel, .chip, .fchip, .schip, .who,
tbody tr, .field input, .prow, .altros-logo {
  transition: background .16s ease, color .16s ease, border-color .18s ease,
              box-shadow .22s ease, transform .16s cubic-bezier(.2, .7, .3, 1);
}

/* Sidebar nav — slide + animated active accent bar */
.nav-i { position: relative; }
.nav-i:hover { transform: translateX(2px); }
.nav-i.on::before {
  content: ""; position: absolute; left: -14px; top: 7px; bottom: 7px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--frost);
  animation: vor-fade .3s ease both;
}
.side:hover .altros-logo { transform: scale(1.04); }

/* Buttons — lift + soft glow; press feedback */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.99); }
.btn-solid, .btn-vor { box-shadow: 0 2px 10px rgba(255, 107, 44, .22); }
.btn-solid:hover, .btn-vor:hover { box-shadow: 0 8px 20px rgba(255, 107, 44, .34); }

/* Cards / KPIs — hover lift + depth */
.kpi:hover, .card:hover, .panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(15, 39, 71, .10);
  border-color: #d5deea;
}
.kpi .val { transition: color .3s ease; }

/* Table rows + priority rows */
tbody tr.click:hover { background: #f5f9ff; }
.prow:hover { transform: translateX(3px); background: #f5f9ff; }

/* Inputs — focus ring in Altros orange */
.field input:focus, .mfield input:focus { box-shadow: 0 0 0 3px var(--frost-soft); }

/* Entrance: staggered rise for main content + KPIs */
.view > * { animation: vor-rise .5s cubic-bezier(.2, .7, .3, 1) both; }
.view > *:nth-child(1) { animation-delay: .02s; }
.view > *:nth-child(2) { animation-delay: .08s; }
.view > *:nth-child(3) { animation-delay: .14s; }
.view > *:nth-child(4) { animation-delay: .20s; }
.view > *:nth-child(5) { animation-delay: .26s; }
.kpis .kpi { animation: vor-rise .5s cubic-bezier(.2, .7, .3, 1) both; }
.kpis .kpi:nth-child(2) { animation-delay: .06s; }
.kpis .kpi:nth-child(3) { animation-delay: .12s; }
.kpis .kpi:nth-child(4) { animation-delay: .18s; }
.login-box { animation: vor-rise .55s cubic-bezier(.2, .7, .3, 1) both; }

/* Chip live-dot pulse */
.chip .live { animation: vor-pulse-dot 1.5s ease-in-out infinite; }

/* Skeleton shimmer tuned for light surfaces */
.skel {
  background: linear-gradient(90deg, #eef1f6 0%, #f7f9fc 40%, #eef1f6 80%);
  background-size: 420px 100%;
  animation: vor-sheen 1.15s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, .view > * { animation: none !important; transition: none !important; }
  .nav-i:hover, .prow:hover, .kpi:hover, .card:hover, .panel:hover, .btn:hover { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   FINDINGS PAGE — richer, animated layout (Altros light theme)
   ══════════════════════════════════════════════════════════════════════ */
@keyframes fnd-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fnd-ring { 0% { transform: scale(.9); opacity: .55; } 70% { transform: scale(1.35); opacity: 0; } 100% { opacity: 0; } }
@keyframes fnd-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Severity summary strip */
.sev-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 12px; gap: 12px; margin-bottom: 18px; }
@media (max-width: 720px) { .sev-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sev-card { min-width: 0; }
/* Belt-and-braces: never let the scroll region bleed horizontally. */
.scroller { overflow-x: hidden; }
.finding-row .ti { overflow-wrap: anywhere; }
.sev-card {
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 15px 18px;
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .18s ease;
  animation: fnd-in .5s cubic-bezier(.2,.7,.3,1) both;
}
.sev-card:nth-child(2){animation-delay:.06s}.sev-card:nth-child(3){animation-delay:.12s}.sev-card:nth-child(4){animation-delay:.18s}
.sev-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.sev-card.crit::before { background: var(--crit); } .sev-card.high::before { background: var(--ember); }
.sev-card.med::before { background: #eab308; } .sev-card.low::before { background: var(--navy-3); }
.sev-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(15,39,71,.10); border-color: #d5deea; }
.sev-card.on { border-color: var(--frost); box-shadow: 0 0 0 2px var(--frost-soft); }
.sev-card .n { font-family: "Inter", sans-serif; font-weight: 700; font-size: 30px; color: var(--navy); line-height: 1; }
.sev-card.crit .n { color: var(--crit); } .sev-card.high .n { color: #c2620f; }
.sev-card .l { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--mist); margin-top: 7px; font-weight: 600; }

/* Filter chips with counts */
.filters .fchip { display: inline-flex; align-items: center; gap: 7px; transition: all .16s ease; }
.filters .fchip .cnt { font-family: "JetBrains Mono", monospace; font-size: 10.5px; background: var(--panel-2); color: var(--mist); border-radius: 10px; padding: 1px 7px; }
.filters .fchip.on { background: var(--frost); border-color: var(--frost); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,107,44,.28); }
.filters .fchip.on .cnt { background: rgba(255,255,255,.25); color: #fff; }
.filters .fchip:hover:not(.on) { border-color: var(--frost); color: var(--frost); }

/* Finding rows (card list) */
.finding-list { display: flex; flex-direction: column; gap: 10px; }
.finding-row {
  display: grid; grid-template-columns: 4px 1fr auto; grid-gap: 16px; gap: 16px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 15px 18px; cursor: pointer;
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .18s ease;
  animation: fnd-in .45s cubic-bezier(.2,.7,.3,1) both;
}
.finding-row:nth-child(2){animation-delay:.04s}.finding-row:nth-child(3){animation-delay:.08s}.finding-row:nth-child(4){animation-delay:.12s}
.finding-row:nth-child(5){animation-delay:.16s}.finding-row:nth-child(n+6){animation-delay:.2s}
.finding-row:hover { transform: translateY(-2px) translateX(2px); box-shadow: 0 12px 30px rgba(15,39,71,.10); border-color: #d5deea; }
.finding-row .accent { width: 4px; height: 46px; border-radius: 4px; }
.finding-row.crit .accent { background: var(--crit); } .finding-row.high .accent { background: var(--ember); }
.finding-row.med .accent { background: #eab308; } .finding-row.low .accent { background: var(--navy-3); }
.finding-row .ti { font-weight: 600; font-size: 14.5px; color: var(--navy); margin-bottom: 5px; line-height: 1.25; }
.finding-row .meta { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--mist); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.finding-row .right { display: flex; align-items: center; gap: 14px; }
.finding-row .chev { color: var(--mist-dim); font-size: 22px; line-height: 1; transition: transform .22s cubic-bezier(.2,.7,.3,1), color .2s; display: inline-block; }

/* Accordion — inline expandable finding detail */
.finding-acc { display: flex; flex-direction: column; }
.finding-acc:nth-child(2) .finding-row { animation-delay: .04s; }
.finding-acc:nth-child(3) .finding-row { animation-delay: .08s; }
.finding-acc:nth-child(4) .finding-row { animation-delay: .12s; }
.finding-acc:nth-child(5) .finding-row { animation-delay: .16s; }
.finding-acc:nth-child(n+6) .finding-row { animation-delay: .2s; }
.finding-acc.open .finding-row {
  border-color: var(--frost); box-shadow: 0 8px 22px rgba(255,107,44,.14);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.finding-acc.open .finding-row:hover { transform: none; }
.finding-acc.open .chev { transform: rotate(90deg); color: var(--frost); }

.finding-detail {
  border: 1px solid var(--frost); border-top: none; border-radius: 0 0 12px 12px;
  background: var(--panel); padding: 2px 18px 18px; margin-top: -1px;
  animation: fd-open .28s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes fd-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.fd-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-gap: 10px; gap: 10px; margin: 16px 0 4px; }
@media (max-width: 620px) { .fd-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.fd-axis { background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; }
.fd-axis .k { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--mist); margin-bottom: 5px; font-weight: 600; }
.fd-axis .v { font-size: 15px; font-weight: 700; color: var(--navy); }
.fd-block { margin-top: 14px; }
.fd-lb { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--mist); font-weight: 600; margin-bottom: 7px; }
.fd-remediation { background: var(--panel-2); border: 1px solid var(--line-2); border-left: 3px solid var(--frost); border-radius: 8px; padding: 11px 13px; font-size: 13px; line-height: 1.55; color: var(--bone); }
.fd-note { background: var(--steel-soft); border-radius: 8px; padding: 10px 13px; font-size: 12.5px; color: var(--navy-2); }
.fd-verdict { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px; padding: 10px 13px; font-size: 12.5px; color: #065f46; }
.fd-reg { display: flex; flex-wrap: wrap; gap: 8px; }
.fd-reg span { font-family: "JetBrains Mono", monospace; font-size: 11px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 9px; color: var(--mist); }

/* Empty state */
.empty-state { text-align: center; padding: 64px 20px; animation: fnd-in .5s ease both; }
.empty-state .ico { width: 72px; height: 72px; margin: 0 auto 20px; position: relative; display: flex; align-items: center; justify-content: center; animation: fnd-float 3.4s ease-in-out infinite; }
.empty-state .ico svg { width: 44px; height: 44px; color: var(--frost); position: relative; z-index: 1; }
.empty-state .ico::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--frost-soft); animation: fnd-ring 2.6s ease-out infinite; }
.empty-state h3 { font-family: "Inter", sans-serif; font-size: 18px; color: var(--navy); margin-bottom: 8px; font-weight: 700; }
.empty-state p { color: var(--mist); font-size: 13.5px; max-width: 440px; margin: 0 auto; line-height: 1.6; }

/* Skeleton row */
.fnd-skel { height: 78px; border-radius: 12px; margin-bottom: 10px; }

/* ══════════════════════════════════════════════════════════════════════
   THREAT INTELLIGENCE feed (dashboard) — AI-curated cards
   ══════════════════════════════════════════════════════════════════════ */
.ti-live { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--frost); margin-left: 9px; display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.ti-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--frost); box-shadow: 0 0 8px var(--frost); animation: vor-pulse-dot 1.5s ease-in-out infinite; }
.ti-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-gap: 12px; gap: 12px; padding: 16px 18px; }
.ti-empty { padding: 26px; color: var(--mist); font-size: 13px; grid-column: 1 / -1; text-align: center; }
.ti-card {
  display: block; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--navy-3);
  border-radius: 11px; padding: 14px 15px; color: inherit; text-decoration: none;
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .18s ease;
  animation: fnd-in .45s cubic-bezier(.2,.7,.3,1) both;
}
.ti-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(15,39,71,.10); }
.ti-card.zero_day { border-left-color: var(--crit); } .ti-card.kev { border-left-color: var(--ember); }
.ti-card.apt { border-left-color: #7c3aed; } .ti-card.ransomware { border-left-color: var(--crit); }
.ti-card.advisory { border-left-color: var(--navy-3); }
.ti-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.ti-cat { font-family: "JetBrains Mono", monospace; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.ti-cat.zero_day { background: var(--crit-soft); color: var(--crit); } .ti-cat.kev { background: var(--ember-soft); color: #b45309; }
.ti-cat.apt { background: #ede9fe; color: #6d28d9; } .ti-cat.ransomware { background: var(--crit-soft); color: var(--crit); }
.ti-cat.advisory { background: var(--panel-2); color: var(--mist); }
.ti-time { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--mist); }
.ti-title { font-weight: 600; font-size: 13.5px; color: var(--navy); line-height: 1.3; margin-bottom: 6px; }
.ti-sum { font-size: 12px; color: var(--mist); line-height: 1.5; margin-bottom: 10px; }
.ti-foot { display: flex; align-items: center; gap: 8px; }
.ti-cve { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--frost); background: var(--frost-soft); padding: 2px 7px; border-radius: 5px; }
.ti-src { margin-left: auto; font-size: 10.5px; color: var(--mist-dim); }

/* ══════════════════════════════════════════════════════════════════════
   DARK "scrying" radar card — the teal radar animation is drawn for a dark
   backdrop, so this one card goes dark so the sweep/blips/glow pop.
   ══════════════════════════════════════════════════════════════════════ */
.scan-card {
  background: linear-gradient(180deg, #0c1426 0%, #0a1120 100%);
  border-color: #1c2a45;
  box-shadow: 0 14px 40px rgba(8, 14, 30, 0.25);
}
.scan-card:hover { border-color: #26375a; box-shadow: 0 18px 48px rgba(8, 14, 30, 0.32); transform: none; }
.scan-card .card-h { border-bottom-color: #1a2946; }
.scan-card .card-h h3, .scan-card .card-h h3 * { color: #eaf1fb; }
.scan-card .card-h .meta { color: #7f95b8; }
.scan-card.scanning { border-color: var(--frost); box-shadow: 0 0 0 1px rgba(255, 107, 44, 0.25), 0 18px 50px rgba(8, 14, 30, 0.5); }
.scan-card .radar-legend .lg { color: #93a6c4; }
.scan-card .scan-status span { color: #b9c8e0; }
.scan-card .scan-status .live { background: var(--frost); box-shadow: 0 0 8px var(--frost); }
.scan-card .scan-bar { background: #1a2946; }
.scan-card .feed .fitem .tx { color: #cdd8ea; }
.scan-card .feed .fitem .tx .mono { color: #eaf1fb; }
.scan-card .feed .fitem .tm { color: #7f95b8; }
/* keep the orange "Scan now" CTA crisp on the dark card */
.scan-card .btn-vor { background: var(--frost); color: #fff; box-shadow: 0 4px 16px rgba(255, 107, 44, 0.4); }
.scan-card .btn-vor:hover { background: var(--frost-dim); }

/* ============================================================
   Security Posture — enterprise scorecard widget
   ============================================================ */
.posture-card { margin-bottom: 16px; }
.posture-body {
  display: grid; grid-template-columns: 240px 1fr; grid-gap: 24px; gap: 24px;
  padding: 20px 20px 22px; align-items: start;
}
@media (max-width: 860px) { .posture-body { grid-template-columns: 1fr; } }
.posture-empty { padding: 26px 22px; color: var(--mist); line-height: 1.55; }
.posture-empty b { color: var(--frost); }

/* grade → color (shared by gauge, factor grades/bars) */
[data-grade="A"] { --gc: #16a34a; }
[data-grade="B"] { --gc: #4d9c1e; }
[data-grade="C"] { --gc: #ca8a04; }
[data-grade="D"] { --gc: #ea580c; }
[data-grade="F"] { --gc: #dc2626; }

.pg-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pg-gauge { width: 210px; height: auto; display: block; }
.pg-track { stroke: var(--line-2); stroke-width: 15; stroke-linecap: round; }
.pg-arc { stroke: var(--gc, var(--frost)); stroke-width: 15; stroke-linecap: round;
  transition: stroke-dasharray 1s cubic-bezier(.2,.8,.2,1); }
.pg-grade { text-anchor: middle; font-size: 46px; font-weight: 800; fill: var(--gc, var(--bone));
  font-family: var(--font-inter, Inter, system-ui, sans-serif); }
.pg-score { text-anchor: middle; font-size: 14px; font-weight: 700; fill: var(--mist); }
.pg-of { fill: var(--mist-dim); font-weight: 600; }
.pg-hero-meta { text-align: center; width: 100%; }
.pg-hero-grade { font-size: 15px; font-weight: 800; letter-spacing: .01em; color: var(--gc, var(--bone)); }
.pg-hero-sub { font-size: 12px; color: var(--mist); margin: 2px 0 8px; }

.pg-factors { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 16px 24px; gap: 16px 24px; }
@media (max-width: 560px) { .pg-factors { grid-template-columns: 1fr; } }
.pg-factor-top { display: flex; justify-content: space-between; align-items: center; }
.pg-factor-label { font-weight: 700; font-size: 13px; color: var(--bone); }
.pg-factor-grade { font-weight: 800; font-size: 12px; color: #fff; background: var(--gc, #64748b);
  padding: 1px 9px; border-radius: 6px; }
.pg-bar { height: 8px; border-radius: 6px; background: var(--line-2); overflow: hidden; margin: 8px 0 6px; }
.pg-bar > span { display: block; height: 100%; border-radius: 6px; background: var(--gc, var(--frost));
  transition: width 1s cubic-bezier(.2,.8,.2,1); }
.pg-factor-sub { font-size: 11px; color: var(--mist); line-height: 1.4; }

.pg-risk { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--line-2); padding-top: 16px; margin-top: 4px; }
.pg-risk-pill { display: flex; flex-direction: column; align-items: center; min-width: 66px;
  padding: 9px 14px; border-radius: 11px; background: var(--panel-2); border: 1px solid var(--line-2); }
.pg-risk-n { font-size: 21px; font-weight: 800; line-height: 1; color: var(--bone); }
.pg-risk-k { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--mist); margin-top: 4px; }
.pg-risk-pill.critical .pg-risk-n { color: #dc2626; }
.pg-risk-pill.high .pg-risk-n { color: #ea580c; }
.pg-risk-pill.medium .pg-risk-n { color: #ca8a04; }
.pg-risk-pill.low .pg-risk-n { color: #2563eb; }
.pg-risk-pill.info .pg-risk-n { color: #64748b; }

/* trend sparkline */
.pg-spark { width: 100%; height: 46px; display: block; }
.pg-spark-line { fill: none; stroke: var(--frost); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; }
.pg-spark-area { fill: var(--frost-soft); stroke: none; }
.pg-spark-dot { fill: var(--frost); }
.pg-spark-empty { font-size: 11px; color: var(--mist-dim); padding: 8px 0 2px; }

/* ============================================================
   Exposure Intel (OSINT)
   ============================================================ */
.exp-run { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 22px; }
.exp-run h3 { font-family: "Inter", sans-serif; font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 5px; }
.exp-run p { font-size: 12.5px; color: var(--mist); line-height: 1.5; max-width: 640px; }
.exp-run-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; white-space: nowrap; }
@media (max-width: 760px) { .exp-run { flex-direction: column; align-items: flex-start; } .exp-run-cta { align-items: flex-start; } }
.exp-cat { font-family: "JetBrains Mono", monospace; font-size: 10.5px; background: var(--frost-soft); color: var(--frost-dim); border-radius: 6px; padding: 2px 8px; }
.exp-link { font-size: 12.5px; color: var(--frost); font-weight: 600; text-decoration: none; }
.exp-link:hover { text-decoration: underline; }

/* Overview widget */
.expw { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); grid-gap: 10px; gap: 10px; padding: 14px 18px 18px; }
@media (max-width: 620px) { .expw { grid-template-columns: 1fr; } }
.expw-cell { background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 11px; padding: 12px 14px; display: block; text-decoration: none; transition: transform .16s, border-color .16s; }
.expw-cell:hover { transform: translateY(-2px); border-color: #d5deea; }
.expw-n { font-size: 22px; font-weight: 800; color: var(--navy); line-height: 1; }
.expw-n.warn { color: var(--ember); } .expw-n.crit { color: var(--crit); }
.expw-l { font-size: 11px; color: var(--mist); margin-top: 5px; }

/* ════════════════════════════════════════════════════════════════════════
   DELIGHT PASS — tokens v2 · hero posture · unified severity · motion
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* soft, navy-tinted elevation scale */
  --elev-1: 0 1px 2px rgba(15,39,71,.05), 0 1px 3px rgba(15,39,71,.05) !important;
  --elev-2: 0 6px 18px rgba(15,39,71,.08), 0 2px 5px rgba(15,39,71,.05) !important;
  --elev-3: 0 18px 48px rgba(15,39,71,.13), 0 5px 14px rgba(15,39,71,.07) !important;
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-out: cubic-bezier(.2,.7,.3,1);
  /* unified severity — a STATUS palette; every color always paired with a text label.
     text uses the darker -ink shade for AA contrast on the tinted -bg. */
  --sev-crit:#dc2626 !important; --sev-crit-bg:#fef2f2 !important; --sev-crit-ink:#b91c1c !important; --sev-crit-line:#fecaca !important;
  --sev-high:#ea580c !important; --sev-high-bg:#fff7ed !important; --sev-high-ink:#c2410c !important; --sev-high-line:#fed7aa !important;
  --sev-med:#d97706  !important; --sev-med-bg:#fffbeb  !important; --sev-med-ink:#a16207  !important; --sev-med-line:#fde68a !important;
  --sev-low:#2563eb  !important; --sev-low-bg:#eff6ff  !important; --sev-low-ink:#1d4ed8  !important; --sev-low-line:#bfdbfe !important;
  --sev-info:#64748b !important; --sev-info-bg:#f1f5f9 !important; --sev-info-ink:#475569 !important; --sev-info-line:#e2e8f0 !important;
}
/* lighter gradient pole per grade (for the gauge stroke) */
[data-grade="A"]{ --gc2:#4ade80; } [data-grade="B"]{ --gc2:#a3e635; }
[data-grade="C"]{ --gc2:#fbbf24; } [data-grade="D"]{ --gc2:#fb923c; } [data-grade="F"]{ --gc2:#f87171; }

/* Cards: consistent resting elevation + smooth hover lift */
.card { box-shadow: var(--elev-1); transition: transform .2s var(--ease-out), box-shadow .24s var(--ease-out), border-color .2s; }
.card:hover { box-shadow: var(--elev-2); }

/* Posture HERO — grade-tinted glow, bigger animated gauge */
.posture-card { position: relative; overflow: hidden; box-shadow: var(--elev-2); }
.posture-card::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(120% 92% at 16% -8%, var(--gc, var(--frost)) 0%, transparent 46%);
  opacity:.07;
}
.posture-card > * { position: relative; z-index: 1; }
.pg-gauge { width: 234px; }
.pg-grade { font-size: 50px; font-weight: 800; letter-spacing:-.015em; }
.pg-arc { transition: stroke-dasharray 1.15s var(--ease-out); }
.pg-hero-grade { font-size: 16px; }

/* Primary CTA — subtle gradient + glow for depth */
.btn-vor { background: linear-gradient(180deg, #ff7d45, var(--frost)) !important; box-shadow: 0 4px 14px rgba(255,107,44,.30); border: none; }
.btn-vor:hover:not(:disabled) { background: linear-gradient(180deg, var(--frost), var(--frost-dim)) !important; box-shadow: 0 6px 20px rgba(255,107,44,.40); transform: translateY(-1px); }

/* Unified soft severity badges (dark ink on light tint — accessible) */
.badge { font-weight:600; font-size:11px; border-radius:7px; padding:2px 9px; border:1px solid transparent; letter-spacing:.01em; }
.badge.b-crit{ background:var(--sev-crit-bg); color:var(--sev-crit-ink); border-color:var(--sev-crit-line); }
.badge.b-high{ background:var(--sev-high-bg); color:var(--sev-high-ink); border-color:var(--sev-high-line); }
.badge.b-med { background:var(--sev-med-bg);  color:var(--sev-med-ink);  border-color:var(--sev-med-line); }
.badge.b-low { background:var(--sev-low-bg);  color:var(--sev-low-ink);  border-color:var(--sev-low-line); }
.badge.b-wait{ background:var(--panel-2); color:var(--mist); border-color:var(--line-2); }

/* Unify all severity accents (bars/dots/numbers) to the same tokens */
.finding-row.crit .accent, .sev.crit { background: var(--sev-crit) !important; }
.finding-row.high .accent, .sev.high { background: var(--sev-high) !important; }
.finding-row.med .accent,  .sev.med  { background: var(--sev-med) !important; }
.finding-row.low .accent,  .sev.low  { background: var(--sev-low) !important; }
.sev-card.crit::before{ background:var(--sev-crit) !important; } .sev-card.high::before{ background:var(--sev-high) !important; }
.sev-card.med::before{ background:var(--sev-med) !important; }  .sev-card.low::before{ background:var(--sev-low) !important; }
.sev-card.crit .n{ color:var(--sev-crit) !important; } .sev-card.high .n{ color:var(--sev-high) !important; }
.pg-risk-pill.critical .pg-risk-n{ color:var(--sev-crit) !important; } .pg-risk-pill.high .pg-risk-n{ color:var(--sev-high) !important; }
.pg-risk-pill.medium .pg-risk-n{ color:var(--sev-med) !important; } .pg-risk-pill.low .pg-risk-n{ color:var(--sev-low) !important; }

/* Choreographed page reveal — longer, springier stagger */
.view > *:nth-child(1){animation-delay:.02s} .view > *:nth-child(2){animation-delay:.09s}
.view > *:nth-child(3){animation-delay:.16s} .view > *:nth-child(4){animation-delay:.23s}
.view > *:nth-child(5){animation-delay:.30s} .view > *:nth-child(6){animation-delay:.37s}
.view > *:nth-child(n+7){animation-delay:.42s}

@media (prefers-reduced-motion: reduce) {
  .pg-arc { transition: none !important; }
  .btn-vor:hover:not(:disabled) { transform: none; }
}

/* Gauge gradient/glow driven by the grade vars via CSS (var() can't live in an SVG
   presentation attribute — it must come through CSS). */
.pg-gauge .pg-stop1 { stop-color: var(--gc, var(--frost)); }
.pg-gauge .pg-stop2 { stop-color: var(--gc2, var(--frost)); }
.pg-gauge .pg-flood { flood-color: var(--gc, var(--frost)); }

/* ── This week's diff — clean list (was a runaway feed inside the radar card) ── */
.diff-list { padding: 6px 18px 16px; }
.diffrow { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.diffrow:last-child { border-bottom: none; }
.diffrow .dtk { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex: none; box-shadow: 0 0 0 3px var(--panel); }
.diffrow .dtk.new { background: #16a34a; }
.diffrow .dtk.changed { background: var(--sev-med); }
.diffrow .dtk.resolved { background: var(--mist-dim); }
.diffrow .dtx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.diffrow .dtx .mono { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diffrow .dtm { font-size: 11px; color: var(--mist); }
.diff-more { font-size: 11px; color: var(--mist-dim); padding: 10px 0 2px 18px; }

/* ── Posture hero: give the gauge real presence ── */
.posture-body { grid-template-columns: 288px 1fr; }
@media (max-width: 860px) { .posture-body { grid-template-columns: 1fr; } }
.pg-hero { justify-content: center; padding: 6px 0 2px; }
.pg-gauge { width: 250px; }
.pg-grade { font-size: 56px; }
.pg-track { stroke-width: 16; }
.pg-arc { stroke-width: 16; }

/* ════════════════════════════════════════════════════════════════════════
   VIBRANT PASS — color + motion (make it lively, not boring)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Colorful KPI tiles: accent bar, corner glow, colored number, icon ── */
.kpi { position: relative; overflow: hidden; border-radius: 14px; padding: 16px 18px 15px; box-shadow: var(--elev-1);
  transition: transform .2s var(--ease-spring), box-shadow .24s var(--ease-out), border-color .2s; }
.kpi:hover { transform: translateY(-4px); box-shadow: var(--elev-2); border-color: color-mix(in srgb, var(--k) 45%, var(--line)); }
.kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--k); }
.kpi::after { content:""; position:absolute; right:-26px; top:-26px; width:104px; height:104px; border-radius:50%; background: var(--k); opacity:.08; transition: transform .3s var(--ease-out); }
.kpi:hover::after { transform: scale(1.25); }
.kpi .val { color: var(--k) !important; font-weight: 800; letter-spacing: -.02em; }
.kpi .lab { color: var(--mist); }
.kpi-ico { position: absolute; top: 13px; right: 15px; font-size: 17px; opacity: .92; filter: drop-shadow(0 2px 4px rgba(15,39,71,.14)); }
.k-blue{ --k:#2563eb } .k-green{ --k:#16a34a } .k-amber{ --k:#ea580c } .k-violet{ --k:#7c3aed }
.k-orange{ --k:var(--frost) } .k-navy{ --k:var(--navy) }

/* ── Attack-surface map → dark glowing console panel (radar was built for dark) ── */
.scan-card { background: linear-gradient(158deg, #0e1c36 0%, #0a1120 100%) !important;
  border: 1px solid #1d3860 !important; box-shadow: var(--elev-2), inset 0 1px 0 rgba(255,255,255,.05) !important; }
.scan-card .card-h { border-bottom-color: rgba(255,255,255,.08) !important; }
.scan-card .card-h h3, .scan-card .card-h h3 * { color: #eaf1fb !important; }
.scan-card .meta { color: #6f86ab !important; }
.scan-card .radar-legend .lg { color: #97a9c8 !important; }
.scan-card .scan-status span { color: #8fd3ff !important; }
.scan-card .scan-bar { background: rgba(255,255,255,.10) !important; }

/* ── Posture gauge: bolder + grade-tinted glow disc behind ── */
.pg-hero { position: relative; }
.pg-hero::before { content:""; position:absolute; top:2px; left:50%; transform:translateX(-50%); width:220px; height:124px;
  border-radius:124px 124px 8px 8px; z-index:0; pointer-events:none;
  background: radial-gradient(78% 120% at 50% 100%, var(--gc, var(--frost)) 0%, transparent 62%); opacity:.12; }
.pg-hero > * { position: relative; z-index: 1; }
.pg-track { stroke-width: 18; }
.pg-arc { stroke-width: 18; }
.pg-grade { font-size: 58px; }

/* ── Severity risk pills → colorful tinted chips ── */
.pg-risk-pill { border-radius: 12px; transition: transform .16s var(--ease-spring), box-shadow .18s; }
.pg-risk-pill:hover { transform: translateY(-3px); box-shadow: var(--elev-1); }
.pg-risk-pill.critical { background: var(--sev-crit-bg); border-color: var(--sev-crit-line); }
.pg-risk-pill.high     { background: var(--sev-high-bg); border-color: var(--sev-high-line); }
.pg-risk-pill.medium   { background: var(--sev-med-bg);  border-color: var(--sev-med-line); }
.pg-risk-pill.low      { background: var(--sev-low-bg);  border-color: var(--sev-low-line); }
.pg-risk-pill.info     { background: var(--sev-info-bg); border-color: var(--sev-info-line); }

/* ── Threat-intel + exposure cards: hover lift ── */
.ti-card, .expw-cell { transition: transform .18s var(--ease-spring), box-shadow .22s var(--ease-out), border-color .18s; }
.ti-card:hover { transform: translateY(-4px); box-shadow: var(--elev-2); }

/* ── Priorities row: colored severity tick + hover slide ── */
.prow, .finding-row { transition: transform .16s var(--ease-out), box-shadow .2s, border-color .18s; }

/* ── Live indicators pulse (energy without noise) ── */
.chip .live, .scan-status .live { box-shadow: 0 0 0 0 rgba(255,107,44,.5); animation: vor-pulse-dot 1.4s ease-in-out infinite; }

/* ── Factor bars: subtle sheen so they read as "filled energy" ── */
.pg-bar > span { background-image: linear-gradient(90deg, color-mix(in srgb, var(--gc) 78%, #fff), var(--gc)); position: relative; overflow: hidden; }
.pg-bar > span::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-100%); animation: bar-sheen 2.8s ease-in-out infinite; }
@keyframes bar-sheen { 0%,60%{ transform: translateX(-100%) } 100%{ transform: translateX(220%) } }

@media (prefers-reduced-motion: reduce) {
  .pg-bar > span::after, .chip .live, .scan-status .live { animation: none !important; }
  .kpi:hover, .pg-risk-pill:hover, .ti-card:hover { transform: none; }
}

/* EPSS exploit-probability badge (violet — distinct from severity status colors) */
.badge.b-epss { background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe; }

/* ════════════════════════════════════════════════════════════════════════
   NAV + HEADER POLISH — iconified sidebar, active glow, refined header
   ════════════════════════════════════════════════════════════════════════ */
.side { background: linear-gradient(185deg, #163a6b 0%, var(--navy) 42%, #0a1b33 100%) !important; }
.side nav { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.nav-i { display: flex !important; align-items: center; gap: 11px; position: relative; border-radius: 10px; padding: 9px 12px; font-weight: 500;
  transition: background .16s, color .16s, transform .16s var(--ease-out); }
.nav-ico { width: 18px; height: 18px; flex: none; display: inline-flex; opacity: .72; transition: opacity .16s, color .16s, transform .2s var(--ease-spring); }
.nav-ico svg { width: 18px; height: 18px; }
.nav-i:hover { transform: translateX(2px); }
.nav-i:hover .nav-ico { opacity: 1; }
.nav-i.on { background: linear-gradient(90deg, rgba(255,107,44,.20), rgba(255,107,44,.03)) !important; color: #fff !important; }
.nav-i.on::before { content: ""; position: absolute; left: -2px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--frost); box-shadow: 0 0 12px var(--frost); }
.nav-i.on .nav-ico { opacity: 1; color: var(--frost); transform: scale(1.08); }
.nav-copilot { margin-top: 8px; color: #ffd9c4 !important; }
.nav-copilot .nav-ico { color: var(--frost); opacity: .95; }
.nav-copilot:hover { background: rgba(255,107,44,.12) !important; }

.top { background: linear-gradient(180deg, #ffffff, #fbfcfe) !important; }
.top h1 { font-size: 23px; font-weight: 800; letter-spacing: -.02em; }
.top .sub { font-size: 12.5px; }

/* ════════════════════════════════════════════════════════════════════════
   DARK MODE  (opt-in via <html data-theme="dark">) — the base @vor/ui was dark;
   here we override the Altros light tokens back to a premium dark set. --navy
   doubles as text in many components, so in dark it becomes LIGHT and the
   navy structural surfaces (sidebar/header) are re-set with fixed hex.
   ════════════════════════════════════════════════════════════════════════ */
.theme-toggle { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); color: var(--mist);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .16s, border-color .16s, transform .16s; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle:hover { color: var(--frost); border-color: var(--frost); transform: translateY(-1px); }

:root[data-theme="dark"] {
  --void: #0b1220 !important; --bg: #070d18 !important; --panel: #101c33 !important; --panel-2: #16273f !important;
  --bone: #e7edf8 !important; --mist: #9fb0cc !important; --mist-dim: #6b7f9e !important;
  --steel: #1e3a63 !important; --steel-soft: #17324f !important;
  --frost: #ff7d45 !important; --frost-dim: #ff6b2c !important; --frost-soft: rgba(255,125,69,.16) !important;
  --ember: #f59e0b !important; --ember-soft: rgba(245,158,11,.16) !important;
  --crit: #f87171 !important; --crit-soft: rgba(248,113,113,.16) !important;
  --line: #223451 !important; --line-2: #1a2942 !important;
  /* --navy is used as TEXT across components → make it light in dark */
  --navy: #e7edf8 !important; --navy-2: #24426e !important; --navy-3: #8aa0c4 !important; --navy-sb-text: #c8d3e6 !important;
  /* severity badges: dark-tint + light ink */
  --sev-crit-bg: rgba(248,113,113,.15) !important; --sev-crit-ink: #fca5a5 !important; --sev-crit-line: rgba(248,113,113,.32) !important;
  --sev-high-bg: rgba(251,146,60,.15) !important;  --sev-high-ink: #fdba74 !important; --sev-high-line: rgba(251,146,60,.32) !important;
  --sev-med-bg: rgba(251,191,36,.15) !important;   --sev-med-ink: #fcd34d !important;  --sev-med-line: rgba(251,191,36,.30) !important;
  --sev-low-bg: rgba(96,165,250,.15) !important;   --sev-low-ink: #93c5fd !important;  --sev-low-line: rgba(96,165,250,.32) !important;
  --sev-info-bg: rgba(148,163,184,.15) !important; --sev-info-ink: #cbd5e1 !important; --sev-info-line: rgba(148,163,184,.30) !important;
}

/* structural navy surfaces re-set with fixed hex (since --navy is now light) */
:root[data-theme="dark"] .side { background: linear-gradient(185deg, #12305a 0%, #0d2545 42%, #081428 100%) !important; border-right-color: #16294a !important; }
:root[data-theme="dark"] .top { background: linear-gradient(180deg, #0e1a30, #0a1426) !important; border-bottom-color: var(--line) !important; }
:root[data-theme="dark"] body { background: var(--bg); }

/* known light hardcodes → dark variants */
:root[data-theme="dark"] .badge.b-epss { background: rgba(124,58,237,.20); color: #c4b5fd; border-color: rgba(124,58,237,.38); }
:root[data-theme="dark"] .badge.b-kev  { background: rgba(220,38,38,.20); color: #fca5a5; border-color: rgba(220,38,38,.4); }
:root[data-theme="dark"] .badge.b-verif { background: rgba(16,185,129,.18); color: #6ee7b7; border-color: rgba(16,185,129,.35); }
:root[data-theme="dark"] .fd-verdict { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.3); color: #6ee7b7; }
:root[data-theme="dark"] .fd-note { background: var(--steel-soft); color: var(--mist); }
:root[data-theme="dark"] .kpi::after { opacity: .16; }
:root[data-theme="dark"] .ti-card, :root[data-theme="dark"] .ti-feed .ti-card { background: var(--panel-2); }
:root[data-theme="dark"] .diffrow .dtk { box-shadow: 0 0 0 3px var(--panel); }
:root[data-theme="dark"] .empty-state p, :root[data-theme="dark"] .empty-state h3 { color: var(--bone); }
/* posture risk pills already use --sev-*-bg tokens → auto-dark. Cards use --panel → auto-dark. */
:root[data-theme="dark"] .pg-risk-n, :root[data-theme="dark"] .expw-n, :root[data-theme="dark"] .fd-axis .v { color: var(--bone); }
:root[data-theme="dark"] .scan-card { box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 18px 48px rgba(0,0,0,.5) !important; }

/* dark: neutralize remaining light hovers / skeleton so nothing flashes light */
:root[data-theme="dark"] tbody tr.click:hover,
:root[data-theme="dark"] .prow:hover { background: rgba(255,255,255,.04) !important; }
:root[data-theme="dark"] .finding-row:hover { background: var(--panel-2); }
:root[data-theme="dark"] .skel { background: linear-gradient(90deg, var(--panel-2) 0%, rgba(255,255,255,.06) 40%, var(--panel-2) 80%) !important; background-size: 480px 100% !important; }
:root[data-theme="dark"] tbody td { border-bottom-color: var(--line) !important; }
:root[data-theme="dark"] .card-h { border-bottom-color: var(--line) !important; }
/* premium dark touch: soft ambient glow on hero cards */
:root[data-theme="dark"] .posture-card { box-shadow: 0 0 0 1px rgba(255,125,69,.06), 0 18px 50px rgba(0,0,0,.55) !important; }
:root[data-theme="dark"] .card { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); }

/* Discovery — confirm/dismiss candidate buttons */
.rd-btn { font-size: 11.5px; font-weight: 600; border-radius: 7px; padding: 4px 11px; border: 1px solid; cursor: pointer; background: transparent; transition: background .15s, color .15s, border-color .15s; }
.rd-btn.ok { color: #16a34a; border-color: rgba(22,163,74,.42); }
.rd-btn.ok:hover { background: rgba(22,163,74,.12); }
.rd-btn.no { color: var(--mist); border-color: var(--line); }
.rd-btn.no:hover { background: var(--panel-2); color: var(--bone); }

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!../../node_modules/.pnpm/next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!../../packages/ui/styles/tokens.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Babayaga Vör design tokens (BUILD_SPEC §13) — single source of truth. */
:root{
  --void:#080B14;--bg:#0B0F1B;--panel:#101728;--panel-2:#162038;
  --frost:#8FE6E0;--frost-dim:#3E7E80;--frost-soft:rgba(143,230,224,.12);
  --ember:#E89A4C;--ember-dim:#7A5630;--ember-soft:rgba(232,154,76,.12);
  --crit:#E5635E;--crit-soft:rgba(229,99,94,.13);
  --steel:#9FB3C8;--steel-soft:rgba(159,179,200,.12);
  --bone:#E8E4D8;--mist:#7E879E;--mist-dim:#525B70;
  --line:rgba(143,230,224,.13);--line-2:rgba(232,228,216,.07);
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!../../node_modules/.pnpm/next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!../../packages/ui/styles/vor.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Babayaga Vör — shared UI stylesheet, ported verbatim from the design mockups
   (design-reference/babayaga_vor_demo.html + _copilot.html). DECISION: the
   mockups are hand-authored CSS; porting that CSS directly (rather than
   re-deriving via Tailwind) is the most faithful port per spec §19. */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--bone);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.mono{font-family:"JetBrains Mono",monospace}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(20px);z-index:400;background:var(--panel-2);border:1px solid var(--frost-dim);color:var(--bone);font-size:13px;padding:11px 18px;border-radius:9px;opacity:0;transition:.25s;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

.brand{display:flex;align-items:baseline;gap:9px;font-family:"Syne",sans-serif;font-weight:800}
.brand .b1{font-size:12px;color:var(--mist);letter-spacing:.26em;text-transform:uppercase;font-weight:700}
.brand .dot{width:5px;height:5px;border-radius:50%;background:var(--ember);align-self:center}
.brand .b2{font-size:20px}
.btn{font-family:"Hanken Grotesk";font-size:14px;font-weight:600;padding:10px 18px;border-radius:7px;cursor:pointer;border:1px solid transparent;transition:.16s;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.btn-solid{background:var(--frost);color:#06231F}.btn-solid:hover{box-shadow:0 0 22px rgba(143,230,224,.32);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);color:var(--bone);background:transparent}.btn-ghost:hover{border-color:var(--frost);color:var(--frost)}
.btn-amber{background:var(--ember);color:#231405}.btn-amber:hover{box-shadow:0 0 20px rgba(232,154,76,.3)}
.btn-vor{background:linear-gradient(135deg,var(--frost),var(--frost-dim));color:#06231F;font-weight:600}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.eyebrow{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--frost)}

.badge{font-family:"JetBrains Mono",monospace;font-size:10px;padding:2px 8px;border-radius:5px;font-weight:500;white-space:nowrap;display:inline-block}
.b-crit{background:var(--crit-soft);color:var(--crit)}.b-high{background:var(--ember-soft);color:var(--ember)}
.b-med{background:rgba(143,230,224,.1);color:var(--frost)}.b-low{background:rgba(126,135,158,.14);color:var(--mist)}
.b-kev{background:var(--crit-soft);color:var(--crit);border:1px solid rgba(229,99,94,.3)}
.b-owned{background:var(--frost-soft);color:var(--frost)}.b-3p{background:var(--ember-soft);color:var(--ember)}
.b-verif{background:var(--frost-soft);color:var(--frost)}.b-pend{background:var(--ember-soft);color:var(--ember)}
.b-ok{background:var(--frost-soft);color:var(--frost)}.b-wait{background:var(--ember-soft);color:var(--ember)}

table{width:100%;border-collapse:collapse}
thead th{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);text-align:left;padding:12px 18px;border-bottom:1px solid var(--line-2);font-weight:500}
tbody td{padding:13px 18px;border-bottom:1px solid var(--line-2);font-size:13px}
tbody tr.click{cursor:pointer}tbody tr.click:hover{background:var(--panel-2)}
td .mono{font-size:12.5px;color:var(--bone)}td .sub{font-size:11px;color:var(--mist)}
.card{background:var(--panel);border:1px solid var(--line-2);border-radius:12px;overflow:hidden}
.card-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line-2)}
.card-h h3{font-size:14.5px;font-weight:700}.card-h .meta{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mist)}

.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:120;padding:20px}.modal.on{display:flex}
.modal-c{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:480px;max-width:100%;padding:26px}
.modal-c h2{font-family:"Syne",sans-serif;font-weight:700;font-size:19px;margin-bottom:6px}
.modal-c .d{font-size:13px;color:var(--mist);margin-bottom:20px}
.mfield{margin-bottom:16px}.mfield label{font-size:12px;color:var(--mist);display:block;margin-bottom:6px}
.mfield input,.mfield textarea,.mfield select{width:100%;background:var(--void);border:1px solid var(--line-2);border-radius:8px;padding:11px 13px;color:var(--bone);font-size:14px;font-family:inherit}
.mfield input:focus,.mfield textarea:focus{outline:none;border-color:var(--frost)}
.upload{background:var(--void);border:1px dashed var(--frost-dim);border-radius:8px;padding:14px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mist)}
.upload .file{color:var(--frost);font-family:"JetBrains Mono",monospace;font-size:12px}
.mhint{font-size:12px;color:var(--mist);line-height:1.5;margin:6px 0 18px}
.modal-foot{display:flex;gap:10px;justify-content:flex-end}
.scrim{position:fixed;inset:0;background:rgba(4,6,12,.6);opacity:0;pointer-events:none;transition:.2s;z-index:80}.scrim.on{opacity:1;pointer-events:auto}

/* ===== SHELL (customer & console) ===== */
.shell{display:grid;grid-template-columns:240px 1fr;height:100vh}
.side{background:var(--void);border-right:1px solid var(--line-2);display:flex;flex-direction:column;padding:20px 14px}
.side .brand{padding:6px 8px 6px}
.side .ptag{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.16em;color:var(--mist-dim);padding:4px 8px 18px}
.side .ptag.altros{color:var(--steel)}
.nav-i{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;color:var(--mist);font-size:13.5px;font-weight:500;cursor:pointer;margin-bottom:2px}
.nav-i:hover{background:var(--panel);color:var(--bone)}
.nav-i.on{background:var(--frost-soft);color:var(--frost)}
.altros .nav-i.on{background:var(--steel-soft);color:var(--steel)}
.nav-i .ic{width:15px;height:15px}
.side-foot{margin-top:auto;border-top:1px solid var(--line-2);padding-top:14px}
.who{display:flex;align-items:center;gap:10px;padding:6px 8px;cursor:pointer;border-radius:8px}.who:hover{background:var(--panel)}
.who .av{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:"Syne",sans-serif;font-weight:700;font-size:12px;background:linear-gradient(135deg,var(--frost-dim),var(--ember-dim))}
.who.altros .av{background:linear-gradient(135deg,var(--steel),var(--mist-dim))}
.who .nm{font-size:12.5px;font-weight:600}.who .pl{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--mist)}
.main{display:flex;flex-direction:column;min-width:0}
.top{display:flex;align-items:center;gap:18px;padding:18px 30px;border-bottom:1px solid var(--line-2)}
.top h1{font-family:"Syne",sans-serif;font-weight:700;font-size:21px}.top .sub{font-size:12.5px;color:var(--mist);margin-top:2px}
.top .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.chip{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mist);border:1px solid var(--line-2);padding:6px 11px;border-radius:20px;display:flex;align-items:center;gap:7px}
.chip.cp{color:var(--steel);border-color:var(--steel-soft)}
.chip .live{width:6px;height:6px;border-radius:50%;background:var(--frost);box-shadow:0 0 8px var(--frost)}
.scroller{overflow-y:auto}
.view{padding:26px 30px 60px}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:14px;gap:14px;margin-bottom:22px}
.kpi{background:var(--panel);border:1px solid var(--line-2);border-radius:12px;padding:18px}
.kpi .lab{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);margin-bottom:12px}
.kpi .val{font-family:"Syne",sans-serif;font-weight:700;font-size:32px;line-height:1}
.kpi .delta{font-size:12px;margin-top:8px;color:var(--mist)}.kpi .delta b.up{color:var(--ember)}
.kpi.exposed{border-color:var(--ember-dim);background:linear-gradient(165deg,var(--ember-soft),var(--panel))}.kpi.exposed .val{color:var(--ember)}
@media(max-width:1000px){.kpis{grid-template-columns:repeat(2,1fr)}}
.two{display:grid;grid-template-columns:1.4fr 1fr;grid-gap:16px;gap:16px}@media(max-width:1000px){.two{grid-template-columns:1fr}}
.prow{display:grid;grid-template-columns:auto 1fr auto;grid-gap:14px;gap:14px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line-2);cursor:pointer}
.prow:last-child{border-bottom:none}.prow:hover{background:var(--panel-2)}
.prow .sev{width:3px;height:34px;border-radius:3px}.prow .sev.crit{background:var(--crit)}.prow .sev.high{background:var(--ember)}.prow .sev.med{background:var(--frost)}.prow .sev.low{background:var(--mist)}
.prow .ti{font-size:13.5px;font-weight:600;margin-bottom:3px}.prow .mt{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mist)}
.prow .badges{display:flex;gap:6px}
.feed{padding:6px 0}.fitem{display:grid;grid-template-columns:auto 1fr;grid-gap:12px;gap:12px;padding:11px 18px;align-items:start}
.fitem .tk{width:7px;height:7px;border-radius:50%;margin-top:5px}.fitem .tk.add{background:var(--ember)}.fitem .tk.chg{background:var(--frost)}.fitem .tk.res{background:var(--mist-dim)}
.fitem .tx{font-size:12.5px;line-height:1.4}.fitem .tx .mono{color:var(--bone)}.fitem .tm{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--mist);margin-top:2px}
.scorebar{display:inline-flex;gap:3px}.scorebar .seg{width:18px;height:5px;border-radius:2px;background:var(--line-2)}
.scorebar .seg.f{background:var(--frost)}.scorebar .seg.e{background:var(--ember)}.scorebar .seg.c{background:var(--crit)}
.filters{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.fchip{font-size:12.5px;color:var(--mist);border:1px solid var(--line-2);padding:7px 13px;border-radius:7px;cursor:pointer}.fchip.on{border-color:var(--frost);color:var(--frost);background:var(--frost-soft)}
.readonly-note{font-size:12px;color:var(--mist);background:var(--steel-soft);border:1px solid rgba(159,179,200,.25);border-radius:8px;padding:9px 13px;margin-bottom:14px;display:inline-flex;align-items:center;gap:8px}

/* slide-over (findings) */
.sheet{position:fixed;top:0;right:0;height:100vh;width:520px;max-width:92vw;background:var(--panel);border-left:1px solid var(--line);transform:translateX(100%);transition:.26s cubic-bezier(.4,0,.2,1);z-index:90;overflow-y:auto}.sheet.on{transform:translateX(0)}
.sheet-h{padding:22px 24px;border-bottom:1px solid var(--line-2);position:-webkit-sticky;position:sticky;top:0;background:var(--panel)}
.sheet-h .x{position:absolute;top:20px;right:22px;cursor:pointer;color:var(--mist);font-size:20px}
.sheet-h h2{font-size:18px;font-weight:700;margin:8px 0 6px;padding-right:30px}.sheet-h .loc{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--frost)}
.sheet-b{padding:22px 24px}.sblock{margin-bottom:24px}
.sblock .lb{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);margin-bottom:10px}
.score-grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:10px;gap:10px}.score-cell{background:var(--panel-2);border-radius:8px;padding:12px}
.score-cell .k{font-size:11px;color:var(--mist);margin-bottom:6px}.score-cell .v{font-family:"Syne",sans-serif;font-weight:700;font-size:17px}
.ai-note{background:var(--frost-soft);border:1px solid var(--frost-dim);border-radius:9px;padding:14px;font-size:13px;line-height:1.6}
.ai-note .tag{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;color:var(--frost);display:block;margin-bottom:7px}
.altros-verdict{background:var(--frost-soft);border:1px solid var(--frost-dim);border-radius:9px;padding:13px;font-size:13px;line-height:1.55;margin-bottom:12px}
.altros-verdict .vt{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;color:var(--frost);display:block;margin-bottom:6px}
.remediation{background:var(--panel-2);border:1px solid var(--line-2);border-radius:9px;padding:13px;font-size:13px;line-height:1.55}
.reg{display:flex;gap:7px;flex-wrap:wrap}.reg span{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mist);border:1px solid var(--line-2);padding:4px 9px;border-radius:6px}

/* copilot drawer */
.cop{position:fixed;top:0;right:0;height:100vh;width:440px;max-width:94vw;background:var(--panel);border-left:1px solid var(--line);z-index:95;display:flex;flex-direction:column;transform:translateX(100%);transition:.26s cubic-bezier(.4,0,.2,1)}.cop.on{transform:translateX(0)}
.cop-h{padding:16px 18px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:12px}
.cop-mark{width:34px;height:34px;border-radius:9px;background:radial-gradient(circle at 35% 30%,var(--frost),var(--frost-dim));display:flex;align-items:center;justify-content:center;position:relative}.cop-mark::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--void)}
.cop-h .nm{font-family:"Syne",sans-serif;font-weight:700;font-size:15px}.cop-h .st{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--mist);display:flex;align-items:center;gap:6px;margin-top:1px}.cop-h .st .dot{width:5px;height:5px;border-radius:50%;background:var(--frost);box-shadow:0 0 7px var(--frost)}
.cop-h .x{margin-left:auto;color:var(--mist);font-size:18px;cursor:pointer}
.cop-body{flex:1 1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:18px}
.msg{display:flex;flex-direction:column;gap:8px}.msg.user{align-items:flex-end}
.bubble{padding:11px 14px;border-radius:13px;font-size:13.5px;line-height:1.55;max-width:88%;white-space:pre-wrap}
.msg.user .bubble{background:var(--frost-soft);border:1px solid var(--frost-dim);border-bottom-right-radius:4px}.msg.vor .bubble{background:var(--panel-2);border:1px solid var(--line-2);border-bottom-left-radius:4px}
.tools{display:flex;flex-direction:column;gap:5px}.tool{display:inline-flex;align-items:center;gap:8px;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mist);background:var(--void);border:1px solid var(--line-2);border-radius:7px;padding:5px 10px;align-self:flex-start}
.tool .ok{color:var(--frost)}.tool .spin{width:9px;height:9px;border:1.5px solid var(--frost-dim);border-top-color:var(--frost);border-radius:50%;animation:sp .7s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.grounded{display:inline-flex;gap:6px;font-family:"JetBrains Mono",monospace;font-size:9.5px;color:var(--frost);margin-top:9px}.grounded::before{content:"▲"}
.confirm{background:var(--ember-soft);border:1px solid var(--ember-dim);border-radius:11px;padding:14px;margin-top:8px}
.confirm .ch{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ember);margin-bottom:8px}
.confirm .cb{font-size:13px;line-height:1.5;margin-bottom:6px}.confirm .cb b{color:var(--bone)}.confirm .cmeta{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mist);margin-bottom:12px}
.confirm .acts{display:flex;gap:9px}.cbtn{font-size:13px;font-weight:600;padding:8px 16px;border-radius:7px;cursor:pointer;border:1px solid transparent}.cbtn.yes{background:var(--ember);color:#231405}.cbtn.no{background:transparent;border-color:var(--line-2);color:var(--mist)}
.cop-foot{border-top:1px solid var(--line-2);padding:14px 16px}
.sugg{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}.schip{font-size:12px;color:var(--mist);border:1px solid var(--line-2);border-radius:18px;padding:6px 12px;cursor:pointer}.schip:hover{border-color:var(--frost);color:var(--frost)}
.composer{display:flex;align-items:center;gap:9px;background:var(--void);border:1px solid var(--line-2);border-radius:11px;padding:6px 6px 6px 14px}.composer input{flex:1 1;background:transparent;border:none;color:var(--bone);font-size:13.5px;font-family:inherit}.composer input:focus{outline:none}
.send{width:34px;height:34px;border-radius:8px;background:var(--frost);color:#06231F;border:none;cursor:pointer}
.foot-note{font-family:"JetBrains Mono",monospace;font-size:9.5px;color:var(--mist-dim);text-align:center;margin-top:9px}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-box{width:420px;max-width:100%;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:32px}
.login-box .brand{justify-content:center;margin-bottom:18px}
.field{margin-bottom:14px}.field label{font-size:12px;color:var(--mist);display:block;margin-bottom:6px}
.field input{width:100%;background:var(--void);border:1px solid var(--line-2);border-radius:9px;padding:12px 13px;color:var(--bone);font-size:14px;font-family:inherit}
.field input:focus{outline:none;border-color:var(--frost)}
.login-box .submit{width:100%;justify-content:center;margin-top:6px;padding:13px}
.login-box .hint{text-align:center;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mist-dim);margin-top:16px}
.err{color:var(--crit);font-size:12.5px;margin-top:10px;text-align:center;min-height:16px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}