/* ============================================================================
   DEFENDER Design System
   Enterprise trust with an operator edge.
   Deep slate canvas · one brand gold accent · refined type · calm spacing.
   Dark theme is primary; light theme is held to the same standard.
   Tokens live on :root[data-theme="dark"] and are redefined for light.
   ========================================================================== */

/* ----------------------------------------------------------------- TOKENS */
/* OSSUS is the single, always-on design language. Every COLOUR / surface /
   shadow token is defined by the OSSUS theme (static/ossus/ossus-tokens.css +
   ossus-theme.css), which ships a light palette on :root and a dark palette on
   html[data-theme="dark"]. This file owns only the theme-INDEPENDENT
   primitives below (radius, spacing, type scale, layout widths) plus every
   component style; those read the OSSUS colour tokens via var(). */
:root {
  /* Radius */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Spacing scale (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 48px; --sp-10: 64px;

  /* Type (OSSUS theme overrides --font-sans + --fs-base to IBM Plex) */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-xs: 11px; --fs-sm: 12.5px; --fs-base: 14px; --fs-md: 15px;
  --fs-lg: 17px; --fs-xl: 21px; --fs-2xl: 27px; --fs-3xl: 34px; --fs-4xl: 46px;

  /* Layout widths (two-section nav: module rail + sub-sidebar). The OSSUS
     theme supplies the rail/subnav colour tokens; these widths are fixed. */
  --nav-w: 264px;
  --topbar-h: 68px;
  --maxw: 1360px;
  --rail-w: 92px;
  --subnav-w: 234px;
}

/* ----------------------------------------------------------------- RESET */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; color: var(--text); }
p { margin: 0; }
a { color: var(--accent-hover); text-decoration: none; }
a:hover { color: var(--accent-hover); }
::selection { background: var(--accent-soft); color: var(--text); }
code, .mono { font-family: var(--font-mono); font-variant-ligatures: none; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ------------------------------------------------------------- APP SHELL */
.shell { display: flex; min-height: 100vh; }

/* ===== Two-section nav: dark module rail + sub-sidebar ==================== */
/* Colours come from --rail-* / --subnav-* tokens so both themes share this
   structure; OSSUS redefines the tokens in ossus-theme.css. */
.module-rail {
  width: var(--rail-w); min-width: var(--rail-w);
  background: var(--rail-bg);
  display: flex; flex-direction: column; align-items: center;
  padding: var(--sp-3) 0;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto; overflow-x: hidden;
  border-right: 1px solid var(--border);
}
.rail-logo { display: flex; align-items: center; justify-content: center; padding: 6px 4px var(--sp-3); width: 100%; }
.rail-logo img { max-width: 60px; height: auto; display: block; }
.rail-logo .brand-mark { width: 40px; height: 40px; border-radius: 10px; }
.rail-logo .brand-mark svg { width: 21px; height: 21px; }
.rail-modules { display: flex; flex-direction: column; gap: 6px; width: 100%; align-items: center; padding-top: var(--sp-2); }
.rail-sep { width: 60px; display: flex; align-items: center; gap: 6px; margin: var(--sp-2) 0; }
.rail-sep .ln { flex: 1; height: 1px; background: var(--border); opacity: .5; }
.rail-sep span { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--rail-fg); opacity: .55; }
.rail-mod {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 78px; min-height: 60px; padding: 8px 4px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--rail-fg); text-decoration: none;
  border-radius: 8px; transition: color .13s, background .13s;
}
.rail-mod svg { width: 22px; height: 22px; }
.rail-mod span { font-size: 10px; font-weight: 600; text-align: center; line-height: 1.15; }
.rail-mod:hover { color: var(--rail-fg-active); }
.rail-mod.active { color: var(--rail-fg-active); }
.rail-mod.active:not(.rail-foot-link) { background: var(--rail-active-bg); }
.rail-foot { margin-top: auto; width: 100%; display: flex; flex-direction: column; gap: 6px; align-items: center; padding-top: var(--sp-2); }

.sub-sidebar {
  width: var(--subnav-w); min-width: var(--subnav-w);
  background: var(--subnav-bg);
  border-right: 1px solid var(--subnav-border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: var(--sp-4) 0 var(--sp-3);
}
.sub-brand { padding: 0 var(--sp-4) var(--sp-3); display: flex; align-items: center; gap: 10px; }
.sub-brand .brand-mark { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; }
.sub-brand .brand-mark svg { width: 18px; height: 18px; }
.sub-brand img.ossus-lockup { height: 30px; width: auto; display: block; }
.sub-brand-text { min-width: 0; line-height: 1.15; }
.sub-brand-name { font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.sub-brand-sub { font-size: var(--fs-xs); color: var(--subnav-label); margin-top: 1px; }
/* OSSUS is the only design language; the OSSUS theme forces these, but default
   them here too so the lockup is correct before ossus-theme.css loads. */
.brand-legacy { display: none; align-items: center; gap: 10px; }
.brand-ossus { display: flex; align-items: center; gap: 10px; }

.sub-identity { padding: 0 var(--sp-4) var(--sp-2); }
.sub-identity .ident-chip, .sub-identity .org-chip { margin: 0 0 var(--sp-2); }

.sub-scroll { flex: 1 1 auto; padding: 0 var(--sp-3); }
.sub-panel { display: none; }
.sub-panel.active { display: block; }
.sub-title { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em; color: var(--subnav-title);
  padding: var(--sp-2) var(--sp-2) var(--sp-3); }
.sub-section { display: flex; align-items: center; gap: 8px; margin: var(--sp-3) var(--sp-2) var(--sp-2); }
.sub-section .ln { flex: 1; height: 1px; background: var(--subnav-border); }
.sub-section span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--subnav-label); }
.sub-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; margin-bottom: 2px; border-radius: 7px;
  color: var(--subnav-fg); font-size: var(--fs-sm); font-weight: 500; text-decoration: none;
  transition: background .12s, color .12s;
}
.sub-nav a svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--subnav-icon); opacity: .9; }
.sub-nav a:hover { background: var(--subnav-hover-bg); color: var(--subnav-active-fg); }
.sub-nav a.active { background: var(--subnav-active-bg); color: var(--subnav-active-fg); font-weight: 650; }
.sub-nav a.active svg { color: var(--subnav-active-fg); opacity: 1; }

/* Reversibly disabled ("Coming soon") nav items: visibly grayed, non-clickable,
   and tagged so they read as an intentional roadmap item rather than breakage. */
.sub-nav a.nav-soon {
  opacity: .48; cursor: default; pointer-events: none; font-weight: 500;
}
.sub-nav a.nav-soon:hover { background: transparent; color: var(--subnav-fg); }
.soon-badge {
  margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 999px;
  background: var(--subnav-border); color: var(--subnav-label);
  border: 1px solid var(--subnav-border); white-space: nowrap;
}
.card.soon-card { opacity: .55; }

.sub-foot { padding: var(--sp-3) var(--sp-4) 0; margin-top: auto; border-top: 1px solid var(--subnav-border); }
.sub-foot .card { padding: var(--sp-3); margin-bottom: var(--sp-3); }

/* Theme toggle (Light <-> Dark) at the bottom of the sub-sidebar. */
.theme-toggle { display: flex; align-items: center; gap: var(--sp-2); justify-content: space-between;
  padding: var(--sp-2) 0 var(--sp-3); }
.theme-toggle .tt-label { font-size: var(--fs-xs); color: var(--subnav-label); font-weight: 600; }
.theme-seg { display: inline-flex; background: var(--subnav-hover-bg); border: 1px solid var(--subnav-border);
  border-radius: var(--r-pill); padding: 2px; gap: 2px; }
.theme-seg button { background: transparent; border: 0; cursor: pointer; font-family: inherit;
  font-size: var(--fs-xs); font-weight: 650; color: var(--subnav-fg); padding: 4px 11px; border-radius: var(--r-pill);
  transition: background .13s, color .13s; }
.theme-seg button.active { background: var(--accent); color: var(--on-accent); }
.sub-foot .signout {
  display: flex; align-items: center; gap: 9px; margin-top: var(--sp-2);
  padding: 9px 10px; border-radius: 7px; color: var(--subnav-fg); font-size: var(--fs-sm);
  font-weight: 550; text-decoration: none;
}
.sub-foot .signout svg { width: 16px; height: 16px; }
.sub-foot .signout:hover { background: var(--subnav-hover-bg); color: var(--subnav-active-fg); }
.sub-foot .lic-strip { display: flex; }

.sidebar {
  width: var(--nav-w); min-width: var(--nav-w);
  background: linear-gradient(180deg, var(--surface) 0%, var(--canvas) 100%);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  position: sticky; top: 0; height: 100vh;
  /* The whole sidebar scrolls as one unit so the full nav is always reachable;
     the primary nav is never squeezed below the scheduler/footer widgets. */
  overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-2) var(--sp-2); }
.brand-mark {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #E0BE6A, #A8842F);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14) inset, 0 8px 22px var(--accent-glow);
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-text { min-width: 0; line-height: 1.1; }
.brand-name { font-size: var(--fs-lg); font-weight: 750; letter-spacing: -0.02em; }
.brand-vendor { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: 0.02em; margin-top: 2px; }

.ident-chip {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-2) var(--sp-1) var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.ident-avatar {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700;
  background: var(--accent-soft); color: var(--accent-hover);
}
.ident-meta { min-width: 0; line-height: 1.25; }
.ident-name { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ident-role { font-size: var(--fs-xs); color: var(--text-muted); }
.ident-role b { color: var(--accent-hover); font-weight: 600; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.nav-section { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint); padding: var(--sp-4) var(--sp-3) var(--sp-2); }
.nav-section:first-child { padding-top: 0; }
.nav a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px var(--sp-3); border-radius: var(--r-sm);
  color: var(--text-2); font-size: var(--fs-base); font-weight: 500;
  border: 1px solid transparent; position: relative;
  transition: background .13s, color .13s;
}
.nav a svg { width: 17px; height: 17px; opacity: .78; flex-shrink: 0; }
.nav a:hover { background: var(--surface-hover); color: var(--text); }
.nav a.active { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.nav a.active svg { opacity: 1; color: var(--accent-hover); }
.nav a.active::before {
  content: ""; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.nav-badge { margin-left: auto; font-size: 10px; font-weight: 700; padding: 1px 7px;
  border-radius: var(--r-pill); background: var(--sev-critical-bg); color: var(--sev-critical); }

.sidebar-foot { margin-top: auto; padding-top: var(--sp-4); }
.signout { display: flex; align-items: center; gap: var(--sp-3); margin-top: 4px;
  padding: 9px var(--sp-3); border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-base); font-weight: 500; }
.signout:hover { background: var(--surface-hover); color: var(--text); }
.signout svg { width: 17px; height: 17px; opacity: .78; flex-shrink: 0; }
.theme-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); }
.seg {
  display: inline-flex; background: var(--surface-sunken);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px; gap: 2px;
}
.seg button {
  background: transparent; border: 0; color: var(--text-muted);
  font-family: inherit; font-size: var(--fs-xs); font-weight: 600;
  padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: all .13s;
}
.seg button.active { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }

/* ---------------------------------------------------------------- MAIN */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar-h); flex-shrink: 0;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-7);
  border-bottom: 1px solid var(--border);
  background: var(--canvas);
  position: sticky; top: 0; z-index: 40;
}
.topbar-titles { min-width: 0; }
.topbar h1 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.topbar .sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 1px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }
.content { flex: 1; padding: var(--sp-7); max-width: var(--maxw); width: 100%; }
.content.wide { max-width: none; }

/* ------------------------------------------------------------- BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 8px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--surface-raised);
  color: var(--text); font-family: inherit; font-size: var(--fs-base); font-weight: 550;
  cursor: pointer; transition: all .13s; white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; }
.btn:hover { background: var(--surface-hover); border-color: var(--text-faint); }
.btn-primary {
  background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: 650;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 18px var(--accent-glow);
}
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--text); }
.btn-danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); background: transparent; }
.btn-danger:hover { background: var(--sev-critical-bg); }
.btn-sm { padding: 5px 10px; font-size: var(--fs-sm); }
.btn-icon { padding: 8px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------- CARDS */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.card-raised { background: var(--surface-raised); box-shadow: var(--shadow-md); }
.card-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.card-head h2, .card-head h3 { font-size: var(--fs-md); font-weight: 650; }
.card-head .spacer { flex: 1; }
.card-title { font-size: var(--fs-md); font-weight: 650; }
.card-sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }

.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .grid-4 { grid-template-columns: repeat(2,1fr); } .grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- STAT TILES */
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
  position: relative; overflow: hidden;
}
.stat .stat-label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 550; display: flex; align-items: center; gap: var(--sp-2); }
.stat .stat-value { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.03em; margin-top: var(--sp-2); line-height: 1; font-variant-numeric: tabular-nums; }
.stat .stat-value .unit { font-size: var(--fs-lg); color: var(--text-muted); font-weight: 600; }
.stat .stat-foot { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-2); display: flex; align-items: center; gap: var(--sp-1); }
.stat .stat-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.trend-up { color: var(--sev-critical); }
.trend-down { color: var(--verified); }
.trend-flat { color: var(--text-muted); }

/* --------------------------------------------------------------- BADGES */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; line-height: 1.4; white-space: nowrap;
}
.sev { border: 1px solid transparent; }
.sev-critical { background: var(--sev-critical-bg); color: var(--sev-critical); border-color: color-mix(in srgb, var(--sev-critical) 30%, transparent); }
.sev-high     { background: var(--sev-high-bg);     color: var(--sev-high);     border-color: color-mix(in srgb, var(--sev-high) 30%, transparent); }
.sev-medium   { background: var(--sev-medium-bg);   color: var(--sev-medium);   border-color: color-mix(in srgb, var(--sev-medium) 30%, transparent); }
.sev-low      { background: var(--sev-low-bg);      color: var(--sev-low);      border-color: color-mix(in srgb, var(--sev-low) 30%, transparent); }
.sev-info     { background: var(--sev-info-bg);     color: var(--sev-info);     border-color: color-mix(in srgb, var(--sev-info) 30%, transparent); }

.sev-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dot-critical { background: var(--sev-critical); box-shadow: 0 0 0 3px var(--sev-critical-bg); }
.dot-high { background: var(--sev-high); box-shadow: 0 0 0 3px var(--sev-high-bg); }
.dot-medium { background: var(--sev-medium); box-shadow: 0 0 0 3px var(--sev-medium-bg); }
.dot-low { background: var(--sev-low); box-shadow: 0 0 0 3px var(--sev-low-bg); }
.dot-info { background: var(--sev-info); box-shadow: 0 0 0 3px var(--sev-info-bg); }

/* The signature VERIFIED chip */
.chip-verified {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px; border-radius: var(--r-pill);
  background: var(--verified-bg); color: var(--verified);
  border: 1px solid color-mix(in srgb, var(--verified) 32%, transparent);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.chip-verified svg { width: 13px; height: 13px; }
.chip-fp {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--fp-bg); color: var(--fp);
  border: 1px solid color-mix(in srgb, var(--fp) 28%, transparent);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600;
  background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text-2); }
/* A finding retested and confirmed fixed — Open -> Closed lifecycle. */
.pill-fixed { background: var(--verified-bg); color: var(--verified);
  border-color: color-mix(in srgb, var(--verified) 35%, transparent); }
.chip-closed {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px; border-radius: var(--r-pill);
  background: var(--verified-bg); color: var(--verified);
  border: 1px solid color-mix(in srgb, var(--verified) 32%, transparent);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.chip-closed svg { width: 13px; height: 13px; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: var(--r-xs); font-size: var(--fs-xs); font-weight: 600;
  background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text-2); }
.tag.mono { font-family: var(--font-mono); font-size: var(--fs-xs); }
.tag.tag-owasp { background: color-mix(in srgb, var(--verified, #2E86AB) 14%, transparent);
  border-color: color-mix(in srgb, var(--verified, #2E86AB) 40%, transparent);
  color: var(--verified, #2E86AB); font-weight: 700; letter-spacing: .01em; }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 650;
  padding: 3px 10px; border-radius: var(--r-pill); }
.status .pulse { width: 7px; height: 7px; border-radius: 50%; }
.status-running { background: var(--accent-soft); color: var(--accent-hover); }
.status-running .pulse { background: var(--accent-hover); animation: pulse 1.4s ease-in-out infinite; }
.status-done { background: var(--verified-bg); color: var(--verified); }
.status-done .pulse { background: var(--verified); }
.status-queued { background: var(--sev-info-bg); color: var(--sev-info); }
.status-queued .pulse { background: var(--sev-info); }
.status-failed { background: var(--sev-critical-bg); color: var(--sev-critical); }
.status-failed .pulse { background: var(--sev-critical); }
/* Cancelled is an operator DECISION, not a failure — neutral, never red. */
.status.status-cancelled { background: var(--fp-bg); color: var(--fp); }
.status.status-cancelled .pulse { background: var(--fp); }
@keyframes pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; } 50% { opacity: .55; } }

/* --------------------------------------------------------------- TABLES */
.table-wrap { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.table-scroll { overflow-x: auto; }
table.vt { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
table.vt thead th {
  text-align: left; padding: 11px var(--sp-4);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); background: var(--surface-sunken);
  border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0;
}
table.vt tbody td { padding: 12px var(--sp-4); border-bottom: 1px solid var(--border-faint); vertical-align: middle; }
table.vt tbody tr:last-child td { border-bottom: 0; }
table.vt tbody tr { transition: background .1s; cursor: default; }
table.vt tbody tr:hover td { background: var(--surface-hover); }
table.vt tbody tr.row-link { cursor: pointer; }
table.vt tbody tr.is-fp { opacity: .5; }
table.vt .mono { font-size: var(--fs-sm); color: var(--text-2); }
.cell-primary { font-weight: 600; color: var(--text); }
.cell-sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }

/* --------------------------------------------------------------- INPUTS */
label.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); }
.field-label .req { color: var(--sev-critical); }
.hint { font-size: var(--fs-sm); color: var(--text-muted); }
input[type=text], input[type=url], input[type=email], input[type=password],
input[type=number], select, textarea, .input {
  width: 100%; font-family: inherit; font-size: var(--fs-base); color: var(--text);
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 9px 11px; transition: border-color .13s, box-shadow .13s;
}
textarea { font-family: var(--font-mono); font-size: var(--fs-sm); min-height: 74px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a869e' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; cursor: pointer; }

/* radio/checkbox cards */
.choice-grid { display: grid; gap: var(--sp-3); }
.choice {
  position: relative; border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); cursor: pointer; background: var(--surface-sunken); transition: all .13s;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-title { font-weight: 600; font-size: var(--fs-base); }
.choice-desc { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 3px; }
.choice:hover { border-color: var(--border-strong); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-softer); box-shadow: 0 0 0 3px var(--accent-ring); }

/* --------------------------------------------------------------- MISC */
.divider { height: 1px; background: var(--border); border: 0; margin: var(--sp-5) 0; }
.muted { color: var(--text-muted); }
.mb0 { margin-bottom: 0; } .mt0 { margin-top: 0; }
.flex { display: flex; align-items: center; gap: var(--sp-3); }
.flex-col { display: flex; flex-direction: column; }
.spacer { flex: 1; }
.wrap { flex-wrap: wrap; }
.sp-y > * + * { margin-top: var(--sp-4); }
.section-label { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-4); }
.section-label h2 { font-size: var(--fs-lg); font-weight: 650; }
.section-label .line { flex: 1; height: 1px; background: var(--border); }

.callout { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  display: flex; gap: var(--sp-3); font-size: var(--fs-base); background: var(--surface-sunken); }
.callout.warn { border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); background: var(--sev-medium-bg); }
.callout.info { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: var(--accent-softer); }
.callout.ok { border-color: color-mix(in srgb, var(--verified) 38%, var(--border)); background: var(--verified-bg); }
.callout svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

/* Code / payload panels */
.codepanel { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.codepanel-head { display: flex; align-items: center; gap: var(--sp-2); padding: 8px var(--sp-4);
  border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--canvas) 50%, var(--surface-sunken)); font-size: var(--fs-sm); }
.codepanel-head .dot-row { display: flex; gap: 5px; }
.codepanel-head .wdot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.codepanel pre { margin: 0; padding: var(--sp-4); overflow-x: auto; font-family: var(--font-mono);
  font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
.codepanel pre .k { color: var(--accent-2); } /* header key */
.codepanel pre .hl { background: var(--sev-critical-bg); color: var(--sev-critical); padding: 0 2px; border-radius: 3px; font-weight: 600; }
.codepanel pre .ok { background: var(--verified-bg); color: var(--verified); padding: 0 2px; border-radius: 3px; font-weight: 600; }

/* tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--sp-4); }
.tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--text-muted); font-family: inherit; font-size: var(--fs-base); font-weight: 550;
  padding: 10px var(--sp-4); cursor: pointer; margin-bottom: -1px; transition: color .13s; }
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--text); border-bottom-color: var(--accent); }

/* progress */
.bar { height: 7px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); transition: width .5s ease; }

/* chart host */
.chart { width: 100%; }

/* empty */
.empty { text-align: center; padding: var(--sp-9) var(--sp-6); color: var(--text-muted);
  border: 1px dashed var(--border-strong); border-radius: var(--r-lg); }

/* legend */
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); font-size: var(--fs-sm); color: var(--text-2); }
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.legend-swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }

/* kbd / small meta */
.meta-row { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }
.meta-row b { color: var(--text-2); font-weight: 600; }

/* responsive shell */
@media (max-width: 920px) {
  .sidebar, .module-rail, .sub-sidebar { display: none; }
  .content { padding: var(--sp-5) var(--sp-4); }
  .topbar { padding: 0 var(--sp-4); }
}

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

/* ==========================================================================
   LIVE-APP BRIDGE — maps the legacy class names and CSS variables the existing
   Jinja templates depend on onto the Defender design-system tokens above, so the
   full intake forms (new target, target, context, api docs) keep working and
   look native. New/ported views use the component classes above directly.
   ========================================================================== */

/* ---- legacy variable aliases (resolve per-theme via the real tokens) ---- */
:root {
  --muted: var(--text-muted);
  --surface2: var(--surface-sunken);
  --green: var(--verified);
  --red: var(--danger);
  --accent2: var(--accent-2);
}

/* ---- layout helpers used throughout the legacy markup ---- */
.row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.meta { font-size: var(--fs-sm); color: var(--text-muted); }
.crumbs { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-3); }
.crumb { display: inline-flex; align-items: center; }
.crumb + .crumb::before { content: "/"; margin: 0 var(--sp-2); color: var(--text-faint); }
.crumb a { color: var(--text-2); }
.crumb a:hover { color: var(--accent-hover); }

/* ---- panels + bare tables inside content ---- */
.panel { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-4); }
.panel h2 { font-size: var(--fs-md); font-weight: 650; margin-bottom: var(--sp-3); }
.content h2 { font-size: var(--fs-lg); font-weight: 650; margin: var(--sp-6) 0 var(--sp-3); }
.content h3 { font-size: var(--fs-md); font-weight: 650; margin: var(--sp-5) 0 var(--sp-2); }
.content table:not(.vt) {
  width: 100%; border-collapse: collapse; font-size: var(--fs-base);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-4);
}
.content table:not(.vt) thead th {
  text-align: left; padding: 10px var(--sp-4); font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  background: var(--surface-sunken); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.content table:not(.vt) tbody td { padding: 11px var(--sp-4); border-bottom: 1px solid var(--border-faint); vertical-align: top; }
.content table:not(.vt) tbody tr:last-child td { border-bottom: 0; }
.content table:not(.vt) tbody tr:hover td { background: var(--surface-hover); }
.content code { font-family: var(--font-mono); font-size: .92em; color: var(--text-2);
  background: var(--surface-sunken); padding: 1px 5px; border-radius: 5px; border: 1px solid var(--border-faint); }
.content pre code { background: none; border: 0; padding: 0; }

/* ---- status + role badges ---- */
.status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs);
  font-weight: 650; padding: 3px 10px; border-radius: var(--r-pill); text-transform: capitalize; }
.status-running { background: var(--accent-soft); color: var(--accent-hover); }
.status-queued  { background: var(--sev-info-bg); color: var(--sev-info); }
.status-done    { background: var(--verified-bg); color: var(--verified); }
.status-failed  { background: var(--sev-critical-bg); color: var(--sev-critical); }
.status-cancelled { background: var(--fp-bg); color: var(--fp); }
.role-badge { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: var(--r-xs);
  border: 1px solid var(--border); color: var(--text-2); }
.role-badge.admin { color: var(--accent-hover); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.role-badge.pentester { color: var(--sev-low); background: var(--sev-low-bg); border-color: color-mix(in srgb, var(--sev-low) 28%, transparent); }

/* ---- standalone severity chips (legacy <span class="sev sev-high">) ---- */
.sev { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; line-height: 1.4; white-space: nowrap; }

/* ---- count pills (scan severity row) ---- */
.counts { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.count-pill { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 650;
  padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface-sunken);
  border: 1px solid var(--border); color: var(--text-muted); }
.count-pill.has { color: var(--on-accent); border-color: transparent; }

/* ---- new-target / run-scan form chrome ---- */
.defender-form .form-section, .form-section { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-4); box-shadow: var(--shadow-sm); }
.form-section > h3 { margin: 0 0 4px; font-size: var(--fs-md); font-weight: 650; }
.section-help { color: var(--text-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-4); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-grid .span2 { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
.vfield { display: flex; flex-direction: column; gap: 6px; }
.vfield > label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.vfield .req { color: var(--sev-critical); }

.auth-choices, .profile-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); }
.auth-choice, .profile-card { position: relative; border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); cursor: pointer; background: var(--surface-sunken); transition: all .13s; display: block; }
.auth-choice input, .profile-card input { position: absolute; opacity: 0; pointer-events: none; }
.auth-choice:hover, .profile-card:hover { border-color: var(--border-strong); }
.auth-choice:has(input:checked), .profile-card:has(input:checked) { border-color: var(--accent); background: var(--accent-softer); box-shadow: 0 0 0 3px var(--accent-ring); }
.ac-title, .pc-name { font-weight: 600; font-size: var(--fs-base); }
.ac-desc, .pc-desc { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 3px; }
.pc-time { font-size: var(--fs-xs); color: var(--accent-hover); font-weight: 650; margin-top: 2px; }
.auth-panel { border-top: 1px dashed var(--border); padding-top: var(--sp-4); }

.excl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); }
.excl-item { display: flex; gap: var(--sp-2); align-items: flex-start; border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-3); background: var(--surface-sunken); cursor: pointer; }
.excl-item:has(input:checked) { border-color: var(--accent); background: var(--accent-softer); }
.ei-title { display: block; font-weight: 600; font-size: var(--fs-sm); }
.ei-desc { display: block; color: var(--text-muted); font-size: var(--fs-xs); margin-top: 2px; }

.ident-wrap { margin-bottom: var(--sp-3); }
.ident-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: var(--sp-2); align-items: center; }
@media (max-width: 720px) { .ident-row { grid-template-columns: 1fr 1fr; } }
.ident-rm { background: var(--surface-raised); border: 1px solid var(--border-strong); color: var(--text-2);
  border-radius: var(--r-sm); cursor: pointer; padding: 8px 12px; font-size: var(--fs-md); line-height: 1; }
.ident-adv { display: none; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-2);
  padding: var(--sp-3); border: 1px dashed var(--border); border-radius: var(--r-md); background: var(--surface-sunken); }
.ident-adv.open { display: grid; }

/* ---- module chips (coverage) ---- */
.mod-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; border: 1px solid var(--border); background: var(--surface-sunken);
  color: var(--text-2); margin: 0 4px 6px 0; }
.mod-chip.on { color: var(--verified); border-color: color-mix(in srgb, var(--verified) 30%, transparent); }
.mod-chip.off { color: var(--text-muted); text-decoration: line-through; opacity: .7; }

/* ---- triage badges + inline form ---- */
.triage-badge { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: var(--r-xs); }
.triage-open { background: var(--surface-sunken); color: var(--text-2); border: 1px solid var(--border); }
.triage-accepted { background: var(--sev-medium-bg); color: var(--sev-medium); }
.triage-false_positive { background: var(--fp-bg); color: var(--fp); }
.triage-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.triage-form select, .triage-form input { padding: 5px 8px; font-size: var(--fs-sm); }
.audit-trail { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

/* ---- coverage stat strip ---- */
.cov-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
@media (max-width: 900px) { .cov-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .cov-stats { grid-template-columns: repeat(2, 1fr); } }
.cov-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); text-align: center; }
.cov-stat .n { font-size: var(--fs-2xl); font-weight: 750; }
.cov-stat .l { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 3px; }

/* ---- findings filter + table cell helpers ---- */
.findings-filter { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.findings-filter select, .findings-filter input { width: auto; min-width: 160px; }
.content td .title, .cell-title { font-weight: 600; color: var(--text); }
.content td .desc, .desc { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 3px; }

/* ---- banners ---- */
.error-banner, .partial-banner { border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4); font-size: var(--fs-base); border: 1px solid; }
.error-banner { background: var(--sev-critical-bg); border-color: color-mix(in srgb, var(--sev-critical) 40%, var(--border)); color: var(--text); }
.partial-banner { background: var(--sev-medium-bg); border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); color: var(--text); }

/* ---- live audit log stream ---- */
.live-log { background: var(--canvas-2); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-4); font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--text-2);
  height: 360px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; margin-bottom: var(--sp-4); }

/* ---- sidebar scheduler form + arsenal strip ---- */
.sched-form label { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin: var(--sp-2) 0 2px; }
.sched-form input[type=text], .sched-form input[type=number], .sched-form select { padding: 6px 8px; font-size: var(--fs-sm); }
.sched-status { font-size: var(--fs-xs); color: var(--verified); margin-top: var(--sp-2); }
.skills-strip { font-size: 10px; color: var(--text-faint); line-height: 1.6; padding: var(--sp-3) var(--sp-2); }
.skills-strip span { color: var(--text-muted); }

/* ---- cards grid (index fallback) + misc ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
.card-meta { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 4px; }
details > summary { color: var(--accent-hover); }

/* ---- Responsive hardening ----
   Grid/flex items default to min-width:auto (their min-content width), so a
   non-shrinking child — a nowrap title or a wide data table — can stretch the
   track past the viewport and force horizontal page scroll. Allow those items
   to shrink, and make tables scroll inside their own box on small screens
   instead of widening the page. (QA: fixes mobile overflow on the executive,
   target and coverage views.) */
.grid > *, .exec-top > *, .gauge-card > *, .posture > *, .cards > * { min-width: 0; }
.card { min-width: 0; }
@media (max-width: 760px) {
  .content table:not(.vt) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap { overflow-x: auto; }
  .top-find .cell-primary { max-width: 100% !important; }
  /* The topbar is a fixed-height no-wrap row; on phones the verbose session
     pill ("signed in as X from <ip>") plus the export buttons overflow the
     viewport. Drop the informational pill (identity stays on the sign-out link)
     and let the bar grow/wrap to a second line so the page never scrolls
     horizontally. */
  .topbar-actions .pill { display: none; }
  .topbar { height: auto; min-height: var(--topbar-h); flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .topbar-actions { min-width: 0; flex-wrap: wrap; row-gap: 6px; }
}

/* ---- Scan job progress bar (live scan queue) ------------------------------
   The percentage is computed by the engine (orchestrator progress ticks) and
   carried on the job, so the bar reflects real module completion rather than a
   fake animation. */
.jp { display: flex; align-items: center; gap: 8px; }
.jp-bar {
  flex: 1 1 auto; min-width: 90px; height: 6px; border-radius: 999px;
  background: var(--surface-sunken); border: 1px solid var(--border-faint);
  overflow: hidden;
}
.jp-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-active), var(--accent-hover));
  transition: width .5s ease;
}
.jp-bar.jp-done > span { background: var(--success); }
.jp-bar.jp-stopped > span { background: var(--danger); opacity: .65; }
.jp-pct { font-size: var(--fs-sm); color: var(--text-muted); min-width: 34px; text-align: right; }
.jp-label {
  font-size: var(--fs-xs); margin-top: 3px;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Scan launch overlay --------------------------------------------------
   Shown while the server runs the pre-flight (authorization, licence scope,
   target login) so the button never looks dead. It is covering a real wait,
   not a decorative delay: the page navigates the moment the server answers. */
.launch-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--canvas) 78%, transparent);
  backdrop-filter: blur(6px);
  animation: lo-in .18s ease;
}
.launch-overlay[hidden] { display: none; }
@keyframes lo-in { from { opacity: 0 } to { opacity: 1 } }
.launch-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: var(--sp-6) var(--sp-7);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--shadow-md);
  min-width: 280px;
}
.launch-orb { position: relative; width: 58px; height: 58px; }
.launch-orb span {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--accent);
  animation: lo-spin 1.15s linear infinite;
}
.launch-orb span:nth-child(2) {
  inset: 8px; border-top-color: var(--accent-hover);
  animation-duration: 1.6s; animation-direction: reverse;
}
.launch-orb span:nth-child(3) {
  inset: 16px; border-top-color: var(--verified, var(--success));
  animation-duration: 2.1s;
}
@keyframes lo-spin { to { transform: rotate(360deg) } }
.launch-title { font-weight: 650; font-size: var(--fs-md); }
.launch-step { font-size: var(--fs-sm); color: var(--text-muted); min-height: 1.2em; }
/* Respect users who ask for reduced motion — keep the overlay, drop the spin. */
@media (prefers-reduced-motion: reduce) {
  .launch-overlay { animation: none; }
  .launch-orb span { animation: none; border-top-color: var(--accent); }
}