/* ============================================================
   NetPhish Command Center — Design System
   Monochrome (black & white) with light + dark themes.
   Self-hosted, no CDNs. Theme via :root[data-theme="light|dark"].
   ============================================================ */

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root {
  /* Structural tokens (theme-agnostic) */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo,
               Consolas, "Liberation Mono", monospace;

  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-pill: 9999px;

  --t-fast:   110ms cubic-bezier(0.16,1,0.3,1);
  --t-normal: 200ms cubic-bezier(0.16,1,0.3,1);

  --sidebar-w:  236px;
  --sidebar-rail-w: 60px;
  --topbar-h:   56px;
  --content-max: 1280px;

  /* Spacing scale (4pt base) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px; /* steps are 4px up to --space-4, then 8px (24/32/48) */

  /* Type scale */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14px;   /* panel body density */
  --fs-md:   16px;   /* inputs / mobile (avoids iOS auto-zoom) */
  --fs-lg:   18px;
  --fs-xl:   24px;
  --fs-2xl:  32px;

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
}

/* ── Dark theme (default) ──────────────────────────────────── */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-root:       #0a0a0a;
  --bg-surface:    #111111;
  --bg-elevated:   #1a1a1a;
  --bg-hover:      #232323;
  --bg-border:     #2a2a2a;
  --bg-border-hi:  #3d3d3d;
  --bg-card-alt:   #161616;

  --text-primary:   #fafafa;
  --text-secondary: #a8a8a8;
  --text-muted:     #8f8f8f;
  --text-disabled:  #555555;
  --text-inverse:   #0a0a0a;

  /* Monochrome interactive accent = foreground */
  --accent:      #fafafa;        /* solid fill (primary btn, markers) */
  --on-accent:   #0a0a0a;        /* text on a solid accent fill */
  --accent-hi:   #ffffff;
  --accent-lo:   #d4d4d4;
  --accent-text: #fafafa;        /* links / inline accent text */
  --accent-dim:  rgba(255,255,255,0.08);
  --accent-ring: rgba(250,250,250,0.45);

  /* Semantic — text variants tuned for dark backgrounds */
  --success: #22c55e; --success-dim: rgba(34,197,94,0.14);  --success-border: rgba(34,197,94,0.34);  --success-text: #5ee08a;
  --warning: #f59e0b; --warning-dim: rgba(245,158,11,0.14); --warning-border: rgba(245,158,11,0.38); --warning-text: #f1c155;
  --danger:  #ef4444; --danger-dim:  rgba(239,68,68,0.14);  --danger-border:  rgba(239,68,68,0.40);  --danger-text:  #f08585;

  /* Neutral chip (replaces former blue "info/completed/sent/tag") */
  --neutral-dim:    rgba(255,255,255,0.07);
  --neutral-border: rgba(255,255,255,0.16);
  --neutral-text:   #cfcfcf;

  --info-dim:    rgba(255,255,255,0.07);
  --info-border: rgba(255,255,255,0.16);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 28px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4);

  --overlay:    rgba(0,0,0,0.62);
  --topbar-bg:  rgba(17,17,17,0.78);
  --selection:  rgba(255,255,255,0.22);
}

/* ── Light theme ───────────────────────────────────────────── */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-root:       #ffffff;
  --bg-surface:    #ffffff;
  --bg-elevated:   #f5f5f5;
  --bg-hover:      #ededed;
  --bg-border:     #e4e4e4;
  --bg-border-hi:  #cfcfcf;
  --bg-card-alt:   #fafafa;

  --text-primary:   #111111;
  --text-secondary: #525252;
  --text-muted:     #5f5f5f;
  --text-disabled:  #a8a8a8;
  --text-inverse:   #ffffff;

  /* Monochrome interactive accent = near-black */
  --accent:      #111111;
  --on-accent:   #ffffff;
  --accent-hi:   #000000;
  --accent-lo:   #333333;
  --accent-text: #111111;
  --accent-dim:  rgba(0,0,0,0.06);
  --accent-ring: rgba(0,0,0,0.5);

  /* Semantic — darker text for contrast on light backgrounds */
  --success: #16a34a; --success-dim: rgba(22,163,74,0.10);  --success-border: rgba(22,163,74,0.32);  --success-text: #15803d;
  --warning: #d97706; --warning-dim: rgba(217,119,6,0.10);  --warning-border: rgba(217,119,6,0.34);  --warning-text: #b45309;
  --danger:  #dc2626; --danger-dim:  rgba(220,38,38,0.08);  --danger-border:  rgba(220,38,38,0.30);  --danger-text:  #b91c1c;

  --neutral-dim:    rgba(0,0,0,0.05);
  --neutral-border: rgba(0,0,0,0.14);
  --neutral-text:   #404040;

  --info-dim:    rgba(0,0,0,0.05);
  --info-border: rgba(0,0,0,0.14);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 28px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);

  --overlay:    rgba(0,0,0,0.40);
  --topbar-bg:  rgba(255,255,255,0.80);
  --selection:  rgba(0,0,0,0.13);
}

/* ── 2. Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* Pointer cursor on clickable non-link elements */
button:not(:disabled), [role="button"], summary, label[for], .sidebar-toggle { cursor: pointer; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--leading-normal);
  background: var(--bg-root);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--t-normal), color var(--t-normal);
}

h1 { font-size: var(--fs-xl);  line-height: var(--leading-tight); }
h2 { font-size: var(--fs-lg);  line-height: var(--leading-tight); }
h3 { font-size: var(--fs-md);  line-height: var(--leading-tight); }

img, svg { vertical-align: middle; }

/* Guarantee the HTML [hidden] attribute hides any element, incl. inline SVG
   (UA [hidden]{display:none} is unreliable on SVG-in-HTML across browsers). */
[hidden] { display: none !important; }

::selection { background: var(--selection); }

/* Numeric data reads cleaner with tabular figures */
.stat-card__value, .targets-stat__value, .table td, .settings-status-card strong,
code, kbd, .credential, .preflight-check__name {
  font-variant-numeric: tabular-nums;
}

/* Thin neutral scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--bg-border-hi) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-border-hi); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: padding-box; }

/* Skip navigation — accessibility */
.skip-link {
  position: absolute;
  top: -100%;
  left: 12px;
  z-index: 9999;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 12px; }

/* ── 3. Focus ───────────────────────────────────────────────── */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ── 4. Layout ──────────────────────────────────────────────── */
.app {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── 5. Sidebar ─────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  z-index: 100;
  background: var(--bg-surface);
  border-right: 1px solid var(--bg-border);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 0 16px;
}

@media (prefers-reduced-motion: no-preference) {
  .sidebar { transition: width var(--t-normal); }
  .main { transition: margin-left var(--t-normal); }
  .sidebar__label { transition: opacity var(--t-fast); }
}

/* collapsed: narrow icon rail (toggle-driven; no hover/peek). Default is expanded. */
body.is-sidebar-collapsed .sidebar { width: var(--sidebar-rail-w); }
body.is-sidebar-collapsed .main { margin-left: var(--sidebar-rail-w); }

.sidebar__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 6px 16px;
  border-bottom: 1px solid var(--bg-border);
  margin-bottom: 16px;
}

.sidebar__logo {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--on-accent);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  letter-spacing: -0.5px;
}

.sidebar__brand { min-width: 0; }

.sidebar__brand-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.2px;
}

.sidebar__brand-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
  margin-top: 1px;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sidebar__nav-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 18px;
}

.sidebar__nav-group:last-child { margin-bottom: 0; }

.sidebar__nav-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 10px 6px;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 11px;
  margin: 0 8px;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 450;
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
}

.sidebar__link .icon { flex-shrink: 0; }

.sidebar__link:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sidebar__link--active {
  background: var(--accent-dim);
  color: var(--text-primary);
  font-weight: 600;
}

.sidebar__link--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.sidebar__link--active:hover {
  background: var(--accent-dim);
  color: var(--text-primary);
}

/* labels/headings show by default (expanded); collapsed clips them (kept in DOM for SR) */
.sidebar__label { white-space: nowrap; overflow: hidden; }
body.is-sidebar-collapsed .sidebar__label { opacity: 0; }

body.is-sidebar-collapsed .sidebar__nav-heading { height: 0; padding: 0; opacity: 0; overflow: hidden; }

/* divider between groups only when collapsed (in lieu of the hidden headings) */
body.is-sidebar-collapsed .sidebar__nav-group + .sidebar__nav-group { border-top: 1px solid var(--bg-border); padding-top: 8px; }

/* collapse/expand toggle — always visible (the only control in the collapsed rail) */
.sidebar__pin {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--r-sm);
}
.sidebar__pin:hover { background: var(--bg-hover); color: var(--text-primary); }
/* expanded shows the back-chevron (collapse); collapsed flips it to point right (expand) */
body.is-sidebar-collapsed .sidebar__pin { margin-left: 0; }
body.is-sidebar-collapsed .sidebar__pin .icon { transform: rotate(180deg); }
/* collapsed: stack the header so the logo + toggle both fit the 60px rail
   (drop the decorative brand text from layout so it doesn't leave a gap) */
body.is-sidebar-collapsed .sidebar__header { flex-direction: column; gap: 8px; }
body.is-sidebar-collapsed .sidebar__brand { display: none; }

/* footer: full lang select by default (expanded); collapsed shows a compact globe */
.sidebar__footer {
  margin-top: auto;
  padding: 10px 8px 0;
  border-top: 1px solid var(--bg-border);
  display: flex;
  align-items: center;
  justify-content: stretch;
}
.sidebar__footer-icon { color: var(--text-muted); display: none; }
.sidebar__footer-full { display: block; width: 100%; }
body.is-sidebar-collapsed .sidebar__footer { justify-content: center; }
body.is-sidebar-collapsed .sidebar__footer-icon { display: flex; }
body.is-sidebar-collapsed .sidebar__footer-full { display: none; }

/* account actions slot — filled only on mobile by app.js; hidden on desktop */
.sidebar__account { display: none; }

/* Platform (admin) variant — amber differentiation, theme-safe */
.sidebar--platform {
  border-right-color: var(--warning-border);
}

.sidebar__logo--platform {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 2px 10px rgba(245,158,11,0.35);
  color: #1a1206;
}

.app--platform {
  box-shadow: inset 0 2px 0 rgba(245,158,11,0.5);
}

/* ── 6. Main content area ───────────────────────────────────── */
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-left: var(--sidebar-w);
}

.topbar {
  min-height: var(--topbar-h);
  padding: 0 22px;
  border-bottom: 1px solid var(--bg-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--topbar-bg);
  backdrop-filter: saturate(140%) blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.topbar__actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

/* Topbar action buttons match the 32px topbar chrome (theme toggle) so the bar
   reads as one consistent row instead of 40px buttons towering over the toggle/
   badge. The ≤768px override further down makes them icon-compact on mobile. */
.topbar__actions .btn {
  min-height: 32px;
  padding: 6px 12px;
}

.topbar__role {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border-hi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Theme toggle button (injected by app.js into the topbar) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border-hi);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--bg-border-hi); }
.theme-toggle svg { width: 16px; height: 16px; }
/* Show the icon matching the action: dark theme shows "sun" (switch to light) */
.theme-toggle .theme-toggle__moon { display: none; }
.theme-toggle .theme-toggle__sun  { display: block; }
:root[data-theme="light"] .theme-toggle .theme-toggle__moon { display: block; }
:root[data-theme="light"] .theme-toggle .theme-toggle__sun  { display: none; }

/* In-page tabs (hub member pages) */
.page-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--bg-border); margin: 0 0 var(--space-4); }
.page-tab { padding: 8px 14px; color: var(--text-muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: var(--r-sm) var(--r-sm) 0 0; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.page-tab:hover { color: var(--text-primary); background: var(--bg-hover); }
.page-tab--active { color: var(--text-primary); border-bottom-color: var(--accent); font-weight: 600; }
.page-tab:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
/* in-flight feedback during a tab swap */
@media (prefers-reduced-motion: no-preference) { #page-content.is-tab-loading { opacity: 0.6; transition: opacity var(--t-fast); } }

.content {
  padding: 22px;
  max-width: var(--content-max);
  width: 100%;
  margin-inline: auto;   /* center within .main so collapsing the rail doesn't dump empty space on the right */
}

.content a:not(.btn):not(.tag-badge) {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--bg-border-hi);
}
.content a:not(.btn):not(.tag-badge):hover {
  text-decoration-color: currentColor;
}

/* ── 7. Card ────────────────────────────────────────────────── */
.card {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--bg-border);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}

.card:last-child { margin-bottom: 0; }

/* Workflow / onboarding cards */
.card--workflow {
  border-left: 3px solid var(--accent);
}

.card--onboarding {
  background: var(--info-dim);
  border-color: var(--info-border);
  border-left: 3px solid var(--accent);
  margin-bottom: 12px;
}

.card--onboarding h2 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--text-primary);
}

.card--onboarding p,
.card--onboarding ol {
  color: var(--text-secondary);
}

.card--onboarding p {
  margin: 0 0 10px;
}

.card--onboarding ol {
  margin: 0 0 12px 22px;
  padding: 0;
}

.card--onboarding strong {
  color: var(--text-primary);
}

/* ── 8. Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), opacity var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
  line-height: 1;
  user-select: none;
  min-height: 40px;
  touch-action: manipulation;
}

.btn:active { transform: translateY(1px); }

.btn:disabled,
.btn[disabled],
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--accent-hi);
  border-color: var(--accent-hi);
  color: var(--on-accent);
}

.btn--secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--bg-border-hi);
}

.btn--secondary:hover {
  background: var(--bg-hover);
  border-color: var(--bg-border-hi);
  color: var(--text-primary);
}

.btn--danger {
  background: var(--danger-dim);
  color: var(--danger-text);
  border-color: var(--danger-border);
}

.btn--danger:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
}

.content a.btn,
.content a.btn:hover,
.content a.btn:focus {
  text-decoration: none;
}

.content a.btn--primary,
.content a.btn--primary:hover,
.content a.btn--primary:focus {
  color: var(--on-accent);
}

.content a.btn--secondary,
.content a.btn--secondary:hover,
.content a.btn--secondary:focus {
  color: var(--text-primary);
}

.content a.btn--danger,
.content a.btn--danger:hover,
.content a.btn--danger:focus {
  color: var(--danger-text);
}
.content a.btn--danger:hover { color: #ffffff; }

.btn--sm {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: var(--r-xs);
  min-height: 28px;
}

.btn--lg {
  padding: 10px 20px;
  font-size: 15px;
  border-radius: var(--r-md);
  min-height: 42px;
}

.btn:disabled,
.btn[aria-busy="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn[aria-busy="true"]::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── 8a. Icons ──────────────────────────────────────────────── */
/* Inline SVG icons sized to the current font-size.
   Uses currentColor — do NOT set fill/stroke colour here.
   The .icon selector (0,1,0) beats the global `svg` rule (0,0,1),
   so vertical-align here overrides the `img, svg` base reset. */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex: none;
}
.icon--sm {
  width: 0.875em;
  height: 0.875em;
}
/* .btn already uses gap: var(--space-2) via inline-flex,
   so icons inside buttons are spaced automatically.
   No extra margin rule needed unless the icon is standalone. */

/* ── 9. Forms ───────────────────────────────────────────────── */
.form {
  max-width: 480px;
  margin-top: 10px;
}

/* Wide forms (email compose, campaign new) */
.form--test-email-wide,
.form--wide {
  max-width: min(960px, 100%);
}

/* Inline form: controls flow in a wrapping row with a consistent gap, so the
   submit button sits BESIDE the field (and stays spaced when it wraps below)
   instead of flush against it. Overrides the vertical .form base. Used by the
   category/tag create + rename rows and table-cell action forms. */
.form--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  max-width: none;
  margin-top: 0;
}

/* Compact field for inline rows — sized to sit next to a .btn--sm without
   stretching to full width. Compound selector so it wins over the base
   .form__input (width:100%/min-height:40px) regardless of source order. */
.form__input.form__input--sm {
  width: auto;
  min-width: 200px;
  min-height: 32px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--fs-sm);
}

.form__group { margin-bottom: var(--space-4); }

/* Both raw label and .form__label */
.form__group label,
.form__label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.form__input {
  width: 100%;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--bg-border-hi);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-family: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  appearance: none;
}

.form__input::placeholder { color: var(--text-disabled); }
.form__input:hover { border-color: var(--text-muted); }
.form__input:focus-visible,
.form__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.form__input[readonly],
.form__input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

textarea.form__input {
  resize: vertical;
  min-height: 70px;
  line-height: 1.55;
}

select.form__input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23808080' d='M4.7 6.3l3.3 3.3 3.3-3.3.9 1L8 11.6 3.8 7.3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 32px;
}

.form__actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.form__hint { margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--text-muted); }
.form__label .req,
.form__label--required::after { content: " *"; color: var(--danger-text); }
.form__group--error .form__input { border-color: var(--danger-border); }
.form__error { margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--danger-text); }

/* Input with inline button (password toggle etc.) */
.input-group {
  position: relative;
}

.input-group .form__input {
  padding-right: 42px;
}

.input-group__btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  border-radius: var(--r-xs);
  transition: color var(--t-fast);
  display: flex;
  align-items: center;
}

.input-group__btn:hover { color: var(--text-primary); }

/* ── 10. Tables ─────────────────────────────────────────────── */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

/* Header sticks to the top of its scroll container. .card sets overflow-x:auto
   (so overflow-y computes to auto), making the card the sticky containing block;
   top:0 keeps the header at its natural position (no offset = no overlap with the
   first row) while it tracks columns during horizontal scroll. Opaque bg matches the card. */
.table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--bg-border);
}

.table td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--bg-border);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:nth-child(even) td { background: var(--bg-card-alt); }
.table tbody tr:hover td { background: var(--bg-hover); }

/* Canonical row-action cell (the Phishlets-page variant): right-aligned, no wrap,
   small consistent gap between the .btn--sm action buttons/forms it holds. */
.table__actions { white-space: nowrap; text-align: right; }
.table__actions .btn { vertical-align: middle; }
.table__actions > .btn + .btn,
.table__actions > form,
.table__actions > .btn + form { margin-left: 6px; }
.table__actions > form { display: inline; }

/* Pin the row-action column to the right edge of the horizontally-scrolling card
   so its buttons are never clipped on very wide tables (e.g. Targets, with 9 data
   columns). Backgrounds mirror the row state (default / zebra / hover) so the rest
   of the row scrolls cleanly underneath. Scoped to .table__actions cells only, so
   data-last tables are unaffected. Reset to static in the mobile stacked layout. */
.table td.table__actions {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--bg-surface);
}
.table tbody tr:nth-child(even) td.table__actions { background: var(--bg-card-alt); }
.table tbody tr:hover td.table__actions { background: var(--bg-hover); }

.table-wrap { width: 100%; overflow-x: auto; }

.table tbody tr:last-child td {
  border-bottom: none;
}

.table__empty {
  text-align: center;
  color: var(--text-muted);
  padding: 32px 0;
  font-style: italic;
}

.table-scroll {
  max-height: min(70vh, 560px);
  overflow: auto;
  border: 1px solid var(--bg-border);
  border-radius: var(--r-md);
}

.table-scroll thead th {
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  z-index: 1;
  box-shadow: 0 1px 0 var(--bg-border);
}

.table-scroll .table { margin: 0; }

/* ── 11. Alerts ─────────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  margin-bottom: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  border: 1px solid transparent;
}

.alert::before {
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}

.alert--error {
  background: var(--danger-dim);
  border-color: var(--danger-border);
  color: var(--danger-text);
}
.alert--error::before { content: "✕"; color: var(--danger); }

.alert--success {
  background: var(--success-dim);
  border-color: var(--success-border);
  color: var(--success-text);
}
.alert--success::before { content: "✓"; color: var(--success); }

.alert--warning {
  background: var(--warning-dim);
  border-color: var(--warning-border);
  color: var(--warning-text);
}
.alert--warning::before { content: "!"; font-weight: 900; color: var(--warning); }

.alert--info {
  background: var(--neutral-dim);
  border-color: var(--neutral-border);
  color: var(--text-secondary);
}
.alert--info::before { content: "ℹ"; color: var(--text-primary); }

.alert--sensitive {
  background: var(--warning-dim);
  border-color: var(--warning-border);
  color: var(--warning-text);
}
.alert--sensitive::before { content: "⚠"; color: var(--warning); }

/* ── 12. Badges & Status ────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  vertical-align: middle;
}

.badge--system {
  background: var(--neutral-dim);
  color: var(--neutral-text);
  border: 1px solid var(--neutral-border);
}
.badge--draft     { background: var(--neutral-dim);  color: var(--text-muted); }
.badge--running   { background: var(--success-dim);  color: var(--success-text); }
.badge--paused    { background: var(--warning-dim);  color: var(--warning-text); }
.badge--completed { background: var(--neutral-dim);  color: var(--neutral-text); border: 1px solid var(--neutral-border); }
.badge--scheduled { background: var(--neutral-dim);  color: var(--text-secondary); border: 1px solid var(--neutral-border); }
.badge--queued    { background: var(--neutral-dim);  color: var(--text-secondary); border: 1px solid var(--neutral-border); }
.badge--failed    { background: var(--danger-dim);   color: var(--danger-text); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status--online  { background: var(--success-dim); color: var(--success-text); }
.status--online::before { background: var(--success); box-shadow: 0 0 6px var(--success); }

.status--offline { background: var(--neutral-dim); color: var(--text-muted); }
.status--offline::before { background: var(--text-muted); }

.status--suspended { background: var(--danger-dim); color: var(--danger-text); }
.status--suspended::before { background: var(--danger); }

.status--queued  { background: var(--neutral-dim); color: var(--text-muted); }
.status--queued::before { background: var(--text-muted); }

.status--sent    { background: var(--success-dim); color: var(--success-text); }
.status--sent::before { background: var(--success); }

.status--delivered { background: var(--success-dim); color: var(--success-text); }
.status--delivered::before { background: var(--success); }

.status--failed  { background: var(--danger-dim); color: var(--danger-text); }
.status--failed::before { background: var(--danger); }

/* ── 13. Stage & Tag badges (targets) ──────────────────────── */
.stage-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--r-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.stage-badge--none     { background: var(--neutral-dim); color: var(--text-muted); }
.stage-badge--sent     { background: var(--neutral-dim); color: var(--neutral-text); }
.stage-badge--opened   { background: var(--warning-dim); color: var(--warning-text); }
.stage-badge--clicked  { background: var(--warning-dim); color: var(--warning-text); border: 1px solid var(--warning-border); }
.stage-badge--captured { background: var(--danger-dim);  color: var(--danger-text); }

.tag-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--neutral-dim);
  color: var(--neutral-text);
  border: 1px solid var(--neutral-border);
  margin: 1px 2px;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--t-fast);
}
a.tag-badge:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Optional colored dot shown before a tag/group badge label. */
.tag-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle; flex:0 0 auto; }
.color-swatches { display:flex; gap:6px; flex-wrap:wrap; }
.color-swatch { cursor:pointer; }
.color-swatch input { position:absolute; opacity:0; }
.color-swatch span { display:inline-block; width:22px; height:22px; border-radius:50%; border:2px solid var(--bg-border); box-sizing:border-box; }
.color-swatch--none span { background: repeating-linear-gradient(45deg, var(--bg-elevated), var(--bg-elevated) 4px, var(--bg-border) 4px, var(--bg-border) 6px); }
.color-swatch input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }

/* ── 14. Typography helpers ─────────────────────────────────── */
.text-muted {
  color: var(--text-muted);
  font-size: 13px;
}

.text-error  { color: var(--danger-text); font-size: 12px; }
.text-warn   { color: var(--warning-text); }
.text-sm     { font-size: 12px; }
.text-xs     { font-size: 11px; }
.text-strong { font-weight: 600; }

/* ── 15. Dashboard ──────────────────────────────────────────── */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.stat-card {
  display: block;
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--bg-border);
  padding: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-normal), background var(--t-normal),
              box-shadow var(--t-normal), transform var(--t-normal);
  box-shadow: var(--shadow-sm);
}

.stat-card:hover {
  border-color: var(--bg-border-hi);
  background: var(--bg-elevated);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.stat-card--static { cursor: default; }
.stat-card--static:hover {
  border-color: var(--bg-border);
  background: var(--bg-surface);
  transform: none;
  box-shadow: var(--shadow-sm);
}

.stat-card__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.stat-card__value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.5px;
  /* Bottom-align values within a common height so a short value (e.g. the
     "Redis OK" job-queue card, .stat-card__value--sm) shares the same baseline
     as the big numbers instead of floating higher. */
  display: flex;
  align-items: flex-end;
  min-height: 2rem;
}

.stat-card__value--sm {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* Dashboard event chart */
.dashboard-chart-card h2 { margin-bottom: 4px; font-size: 15px; }
.dashboard-chart__subtitle { margin: 0 0 14px; }

.dashboard-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  min-height: 132px;
  padding-top: 4px;
  overflow-x: auto;
}

.dashboard-chart__col {
  flex: 1 0 22px;
  min-width: 22px;
  max-width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.dashboard-chart__bar-wrap {
  width: 100%;
  height: 96px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: var(--r-xs);
  background: var(--neutral-dim);
}

.dashboard-chart__bar {
  width: 72%;
  min-height: 2px;
  max-height: 100%;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-lo) 100%);
  border-radius: 3px 3px 0 0;
  transition: height var(--t-normal);
}

.dashboard-chart__label {
  font-size: 9.5px;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}

/* On narrow screens the columns shrink below the date-label width, so adjacent
   labels overprint into an unreadable smear. Tighten the bars to fit the whole
   14-day trend without horizontal scroll, and thin the x-axis to ~every other
   label (always keeping the most recent day) so they no longer collide. */
@media (max-width: 600px) {
  .dashboard-chart { gap: 4px; }
  .dashboard-chart__col { min-width: 18px; flex-basis: 18px; }
  .dashboard-chart__col:nth-last-child(even) .dashboard-chart__label { display: none; }
  /* keep the right-most date label off the card edge */
  .dashboard-chart__col:last-child .dashboard-chart__label { transform: translateX(-30%); }
}

/* ── 16. Detail list (single definition) ───────────────────── */
.detail-list {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 16px;
  margin: 0;
  font-size: 13.5px;
}

.detail-list dt {
  color: var(--text-muted);
  font-weight: 500;
  padding-top: 1px;
}

.detail-list dd {
  margin: 0;
  color: var(--text-primary);
  word-break: break-word;
}

/* ── 17. Credential / code blocks ──────────────────────────── */
.credential {
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  margin: 0 0 12px;
}

.credential code { word-break: break-all; font-family: inherit; }

/* Inline code */
code, kbd {
  font-family: var(--font-mono);
}

/* ── 18. Tenant switch ──────────────────────────────────────── */
.tenant-switch {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-right: 4px;
}

.tenant-switch__label {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  font-weight: 500;
}

.tenant-switch__select {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--bg-border-hi);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  font-size: 13px;
  max-width: 200px;
  cursor: pointer;
  transition: border-color var(--t-fast);
}

.tenant-switch__select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ── 19. Callout ────────────────────────────────────────────── */
.callout {
  padding: 12px 16px;
  border-radius: var(--r-md);
  margin-bottom: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  background: var(--neutral-dim);
  border: 1px solid var(--neutral-border);
  color: var(--text-secondary);
}

.callout strong { color: var(--text-primary); }

/* ── 20. Agent-specific components ─────────────────────────── */
.agent-liveness { margin-bottom: 16px; }

.agent-liveness__strip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--bg-border-hi);
  background: var(--bg-elevated);
}

.agent-liveness__strip--ok {
  border-color: var(--success-border);
  background: var(--success-dim);
}

.agent-liveness__strip--wait {
  border-color: var(--warning-border);
  background: var(--warning-dim);
}

.agent-liveness__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
  background: var(--text-muted);
}

.agent-liveness__strip--ok .agent-liveness__dot {
  background: var(--success);
  box-shadow: 0 0 8px rgba(34,197,94,0.55);
}

.agent-liveness__strip--wait .agent-liveness__dot {
  background: var(--warning);
}

.agent-liveness__dot--pulse {
  animation: agent-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes agent-dot-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.agent-liveness__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  line-height: 1.4;
}

.agent-liveness__meta {
  font-size: 12px;
  color: var(--text-secondary);
}

.agent-dns-card {
  border: 1px solid var(--bg-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 16px;
}

.agent-dns-card--ready {
  border-color: var(--success-border);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.1);
}

.agent-dns-card__head { padding: 4px 0 12px; }

.agent-dns-card__title { margin: 0 0 6px; font-size: 17px; }

.agent-dns-card__lede { margin: 0; font-size: 13px; line-height: 1.45; }

.agent-dns-card__detected-ip {
  margin: 10px 0 0;
  font-size: 13px;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  background: var(--neutral-dim);
  border: 1px solid var(--neutral-border);
}

.agent-dns-card__banner { margin-bottom: 12px; }

.agent-dns-card__mailfqdn { font-size: 13px; margin: 0 0 12px; }

.dns-table-wrap {
  overflow-x: auto;
  margin-bottom: 12px;
  border: 1px solid var(--bg-border);
  border-radius: var(--r-md);
}

.dns-records-table { margin: 0; min-width: 640px; }
.dns-records-table__code { font-size: 12px; word-break: break-all; white-space: pre-wrap; font-family: var(--font-mono); }
.dns-records-table__valuecell { max-width: 280px; }
.dns-records-table__notecell { font-size: 12px; max-width: 220px; }
.dns-records-table__actions { white-space: nowrap; vertical-align: top; }

.agent-dns-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.agent-dns-card__api-hint { font-size: 12px; flex: 1 1 220px; }
.agent-dns-card__hint a { color: var(--accent-text); }

/* DMARC policy row: keep the label, policy <select> and Save button on one
   wrapping line so the button isn't flush beneath a full-width select. */
.agent-dns-card__dmarc-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.agent-dns-card__dmarc-form label { margin: 0; }
.agent-dns-card__dmarc-form .form__input { width: auto; min-width: 220px; min-height: 32px; }

/* ── 21. Status message helpers ─────────────────────────────── */
.status-msg          { font-size: 13px; font-weight: 500; }
.status-msg--ok      { color: var(--success-text); }
.status-msg--err     { color: var(--danger-text); }

/* ── 22. Actions layout helpers ─────────────────────────────── */
.actions-cell    { display: flex; flex-direction: column; gap: 6px; }
.actions-buttons { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── 23. Email preview ──────────────────────────────────────── */
.email-preview {
  border: 1px solid var(--bg-border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-elevated);
}

.email-preview__chrome {
  padding: 10px 14px;
  background: var(--bg-card-alt);
  border-bottom: 1px solid var(--bg-border);
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.email-preview__chrome-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
}

.email-preview__chrome-row strong {
  flex: 0 0 52px;
  color: var(--text-muted);
  font-weight: 600;
}

.email-preview__chrome-row span {
  color: var(--text-primary);
  word-break: break-word;
  min-width: 0;
}

/* Email bodies render their own (usually light) HTML — keep a light surface */
.email-preview__body {
  position: relative;
  min-height: 240px;
  max-height: min(70vh, 560px);
  background: #f1f5f9;
}

.email-preview__frame {
  display: block;
  width: 100%;
  height: min(70vh, 560px);
  min-height: 240px;
  border: 0;
  background: #fff;
}

.email-preview__frame[hidden] { display: none !important; }

.email-preview__plain {
  margin: 0;
  padding: 16px;
  min-height: 240px;
  max-height: min(70vh, 560px);
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
  color: #0f172a;
  background: #fff;
  white-space: pre-wrap;
  word-break: break-word;
}

.email-preview__hint {
  padding: 7px 14px;
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--bg-card-alt);
  border-top: 1px solid var(--bg-border);
}

/* ── 24. Panel secret credential ────────────────────────────── */
.panel-secret-block  { margin-bottom: 14px; }

.panel-secret-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.panel-secret-dots {
  letter-spacing: 0.12em;
  user-select: none;
  color: var(--text-secondary);
}

.panel-secret-code[hidden] + .panel-secret-dots { display: inline; }
.panel-secret-code:not([hidden]) + .panel-secret-dots { display: none !important; }

/* ── 25. Filter bar ─────────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

.filter-bar__input {
  max-width: 260px;
  padding: 7px 11px;
  font-size: 13px;
}

.filter-bar__select {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--bg-border-hi);
  border-radius: var(--r-sm);
  padding: 7px 32px 7px 11px;
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23808080' d='M4.7 6.3l3.3 3.3 3.3-3.3.9 1L8 11.6 3.8 7.3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 16px;
  transition: border-color var(--t-fast);
}

.filter-bar__select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ── 26. Targets feature ────────────────────────────────────── */
.targets-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.targets-stat { display: flex; align-items: baseline; gap: 7px; }

.targets-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.targets-stat__label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.targets-pagination {
  display: flex;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--bg-border);
  margin-top: 4px;
  gap: 12px;
}

/* ── 27. Phishlets ──────────────────────────────────────────── */
.phishlet-guide {
  margin-bottom: 16px;
  border-left: 3px solid var(--accent);
}

.phishlet-guide__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.phishlet-guide__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}

.phishlet-guide__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.phishlet-guide__steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

.phishlet-guide__step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.phishlet-guide__action-link {
  margin-left: 6px;
  color: var(--accent-text);
  font-weight: 600;
  white-space: nowrap;
}

.phishlet-meta__grid {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px 16px;
  font-size: 13.5px;
}

.phishlet-meta__grid dt { color: var(--text-muted); font-weight: 500; padding-top: 1px; }
.phishlet-meta__grid dd { margin: 0; color: var(--text-primary); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

.phishlet-action-card__title { font-size: 14px; font-weight: 600; margin: 0 0 18px; color: var(--text-primary); }

/* Status strip: name + readiness badge + horizontal step tracker */
.phishlet-step-strip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.phishlet-step-strip__name { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); }
.phishlet-step-strip__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.phishlet-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 64px;
  position: relative;
}
/* connector line between steps */
.phishlet-step::after {
  content: "";
  position: absolute;
  top: 13px;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
  height: 1px;
  background: var(--bg-border);
}
.phishlet-step:last-child::after { display: none; }
.phishlet-step__dot {
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--bg-border-hi);
  background: var(--bg-elevated);
  color: var(--text-muted);
  position: relative;
  z-index: 1;
}
.phishlet-step--done .phishlet-step__dot {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.phishlet-step--done::after { background: var(--bg-border-hi); }
.phishlet-step__label { font-size: var(--fs-xs); color: var(--text-secondary); text-align: center; }
.phishlet-step--done .phishlet-step__label { color: var(--text-primary); }

/* Test card phase sub-headings */
.phishlet-phase {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: var(--space-5) 0 var(--space-2);
}
.phishlet-phase:first-of-type { margin-top: var(--space-2); }
.phishlet-phase__hint { margin: 0 0 var(--space-3); font-size: var(--fs-sm); }

.phishlet-action-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--bg-border);
}

.phishlet-action-step:first-of-type { border-top: none; padding-top: 0; }

.phishlet-action-step__num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border-hi);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.phishlet-action-step__body { flex: 1; }

.phishlet-action-step__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.phishlet-action-step__select { max-width: 360px; }

.phishlet-action-choices { display: flex; flex-direction: column; gap: 7px; }

.phishlet-action-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid var(--bg-border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
  max-width: 640px;
}

.phishlet-action-choice:hover { border-color: var(--bg-border-hi); background: var(--bg-hover); }

.phishlet-action-choice--selected {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.phishlet-action-choice input[type=radio] {
  margin-top: 3px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.phishlet-action-choice__pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--r-xs);
  background: var(--neutral-dim);
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.phishlet-action-choice__pill--primary { background: var(--neutral-dim); color: var(--text-primary); border: 1px solid var(--neutral-border); }
.phishlet-action-choice__pill--danger  { background: var(--danger-dim); color: var(--danger-text); }

.phishlet-action-choice--selected .phishlet-action-choice__pill { background: var(--accent-dim); color: var(--text-primary); }

.phishlet-action-choice__desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.phishlet-action-choice--selected .phishlet-action-choice__desc { color: var(--text-secondary); }

.phishlet-action-submit {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--bg-border);
  flex-wrap: wrap;
}

.phishlet-yaml-preview {
  background: var(--bg-card-alt);
  border: 1px solid var(--bg-border);
  border-radius: var(--r-md);
  padding: 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
  max-height: 420px;
  white-space: pre;
}

.phishlet-yaml-preview code { background: none; color: inherit; font-family: inherit; font-size: inherit; }

.phishlet-yaml-editor {
  font-family: var(--font-mono) !important;
  font-size: 12.5px !important;
  line-height: 1.65 !important;
  resize: vertical;
}

.phishlet-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

/* ── 28. Campaign creation ──────────────────────────────────── */
.campaign-section {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.campaign-section__label {
  flex-shrink: 0;
  width: 110px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 18px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  white-space: nowrap;
}

.campaign-section__num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border-hi);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.campaign-section__body { flex: 1; min-width: 0; margin-bottom: 0; }

.campaign-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

.campaign-body-editor { min-height: 220px; resize: vertical; }

.lure-builder { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lure-builder__sub   { flex: 0 0 130px; min-width: 100px; }
.lure-builder__sep   { font-size: 13px; color: var(--text-muted); }
.lure-builder__domain { flex: 1; min-width: 160px; max-width: 260px; }

.campaign-template-picker {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bg-border);
  margin-bottom: 16px;
}

.campaign-form-submit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0 8px;
  flex-wrap: wrap;
}

/* ── 29. Accessibility utilities ────────────────────────────── */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── 30. Campaign detail — readiness & preflight ───────────── */
.checklist-card {
  margin-bottom: 12px;
}

.checklist-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.checklist-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
/* Some checklist titles also carry .card__title, whose margin-bottom (defined
   later in the sheet) wins on source order and pushes the title text up off the
   centre line of this align-items:center header — visibly misaligning it from
   the status pill. Re-zero it within the header (higher specificity). */
.checklist-card__header .card__title { margin: 0; }

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.status-pill--ready    { background: var(--neutral-dim); color: var(--text-primary); border: 1px solid var(--neutral-border); }
.status-pill--warn     { background: var(--warning-dim); color: var(--warning-text); border: 1px solid var(--warning-border); }
.status-pill--ok       { background: var(--success-dim); color: var(--success-text); border: 1px solid var(--success-border); }
.status-pill--fail     { background: var(--danger-dim);  color: var(--danger-text);  border: 1px solid var(--danger-border); }
.status-pill--pass     { background: var(--success-dim); color: var(--success-text); border: 1px solid var(--success-border); }

/* Inline spinner for the deploying pill (replaces the emoji glyph) */
.status-pill__spinner {
  display: inline-block;
  width: 11px; height: 11px;
  margin-right: 5px;
  vertical-align: -1px;
  border: 2px solid var(--warning-border);
  border-top-color: var(--warning);
  border-radius: var(--r-pill);
  animation: np-spin 0.7s linear infinite;
}
@keyframes np-spin { to { transform: rotate(360deg); } }

.checklist-item {
  padding: 6px 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-bottom: 1px solid var(--bg-border);
}

.checklist-item:last-child { border-bottom: none; }

.checklist-item__icon {
  flex: 0 0 20px;
  font-weight: 700;
  font-size: 13px;
  padding-top: 1px;
}

.checklist-item__icon--ok   { color: var(--success); }
.checklist-item__icon--warn { color: var(--warning); }
.checklist-item__icon--fail { color: var(--danger); }

.checklist-item__body { flex: 1; }
.checklist-item__action { flex: 0 0 auto; }

.preflight-check {
  padding: 4px 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.preflight-check__name {
  flex: 0 0 52px;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 11px;
}

.preflight-check__name--ok   { color: var(--success); }
.preflight-check__name--fail { color: var(--danger); }

.preflight-check__icon { flex: 0 0 18px; font-size: 13px; }
.preflight-check__detail { flex: 1; color: var(--text-secondary); font-size: 12.5px; }

/* ── 31. Misc layout utilities ──────────────────────────────── */
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.gap-6       { gap: 6px; }
.gap-8       { gap: 8px; }
.gap-12      { gap: 12px; }
.gap-16      { gap: 16px; }
.flex-wrap   { flex-wrap: wrap; }
.mt-0        { margin-top: 0; }
.mb-0        { margin-bottom: 0; }
.mb-8        { margin-bottom: 8px; }
.mb-12       { margin-bottom: 12px; }
.mb-16       { margin-bottom: 16px; }
.mt-6        { margin-top: 6px; }
.mt-8        { margin-top: 8px; }
.mt-10       { margin-top: 10px; }
.mt-12       { margin-top: 12px; }
.w-full      { width: 100%; }
.min-w-0     { min-width: 0; }

.card--preflight-ok   { border-color: var(--success-border); }
.card--preflight-fail { border-color: var(--danger-border); }

/* ── 32. Platform settings ─────────────────────────────────── */
.settings-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.settings-intro h2,
.settings-section h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}

.settings-intro p,
.settings-section p {
  margin-bottom: 0;
}

.settings-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.settings-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.settings-category-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--bg-border);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  padding: 14px;
  min-height: 236px;
}

.settings-category-card--ok { border-color: var(--success-border); }
.settings-category-card--warning { border-color: var(--warning-border); }

.settings-category-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.settings-category-card h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
}

.settings-category-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.settings-category-card ul {
  margin: 0 0 0 18px;
  padding: 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.55;
  flex: 1;
}

.settings-category-card__status {
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  padding: 2px 8px;
  background: var(--neutral-dim);
  border: 1px solid var(--neutral-border);
  color: var(--neutral-text);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.settings-category-card--ok .settings-category-card__status {
  color: var(--success-text);
  background: var(--success-dim);
  border-color: var(--success-border);
}

.settings-category-card--warning .settings-category-card__status {
  color: var(--warning-text);
  background: var(--warning-dim);
  border-color: var(--warning-border);
}

.settings-category-card__disabled {
  opacity: 0.65;
  pointer-events: none;
}

.settings-agent-summary {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: start;
  scroll-margin-top: 80px;
}

.settings-agent-summary h2 {
  margin: 0;
  font-size: 18px;
}

.settings-agent-summary p {
  margin-bottom: 0;
}

.settings-status-card {
  border: 1px solid var(--bg-border);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  padding: 12px 14px;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.settings-status-card span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.settings-status-card strong {
  color: var(--text-primary);
  font-size: 16px;
}

.settings-status-card--ok { border-color: var(--success-border); background: var(--success-dim); }
.settings-status-card--warning { border-color: var(--warning-border); background: var(--warning-dim); }

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bg-border);
}

.settings-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.settings-field {
  min-width: 0;
}

.settings-field__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.settings-field__label-row label {
  margin: 0;
}

.settings-source {
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.settings-source--database { color: var(--success-text); background: var(--success-dim); border: 1px solid var(--success-border); }
.settings-source--environment { color: var(--neutral-text); background: var(--neutral-dim); border: 1px solid var(--neutral-border); }
.settings-source--unset { color: var(--text-muted); background: var(--neutral-dim); border: 1px solid var(--neutral-border); }

.settings-field__description {
  margin: 0 0 8px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.settings-field__control {
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.settings-secret-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--bg-border);
  border-radius: var(--r-sm);
  background: var(--bg-card-alt);
  padding: 8px 10px;
  margin-bottom: 8px;
}

.settings-secret-summary__label {
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.settings-secret-summary code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
}

.settings-clear-override {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
}

.settings-clear-override input {
  margin-top: 2px;
}

.settings-field__guide {
  margin-top: 8px;
  border: 1px solid var(--bg-border);
  border-radius: var(--r-sm);
  background: var(--bg-card-alt);
  padding: 8px 10px;
}

.settings-field__guide summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 700;
}

.settings-field__guide ol {
  margin: 8px 0 0 18px;
  padding: 0;
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.55;
}

.settings-field__advanced {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 12px;
}

.settings-field__advanced summary {
  cursor: pointer;
  width: max-content;
}

.settings-field__advanced code {
  display: inline-block;
  margin-top: 4px;
  color: var(--text-secondary);
}

.settings-savebar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0 4px;
  background: linear-gradient(180deg, transparent, var(--bg-root) 35%);
}

/* ── 33. Mobile sidebar drawer + toggle ─────────────────────── */
.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--text-primary);
  margin-right: 4px;
  border-radius: var(--r-sm);
}
.sidebar-toggle:hover { background: var(--bg-hover); }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(2px);
  z-index: 150;
}
.sidebar-backdrop.is-visible { display: block; }

/* ── Home: setup checklist / attention ─────────────────────── */
.setup-checklist__title { margin: 0 0 4px; font-size: 16px; }
.setup-checklist__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.setup-checklist__item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--bg-border); }
.setup-checklist__item:last-child { border-bottom: none; }
.setup-checklist__item--optional { color: var(--text-muted); }
/* Checklist status markers (replace emoji glyphs) */
.setup-checklist__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--bg-border-hi);
  color: var(--text-muted);
}
.setup-checklist__item.is-done .setup-checklist__icon {
  border-color: var(--success-border);
  color: var(--success-text);
}
.setup-checklist__item.is-done .setup-checklist__icon::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--success-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.setup-checklist__item--optional .setup-checklist__icon::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: var(--r-pill);
  background: var(--text-muted);
}
.setup-checklist__label { flex: 1; min-width: 0; }
.setup-checklist__item.is-done .setup-checklist__label { color: var(--text-secondary); }
.setup-checklist__fix { flex: 0 0 auto; font-weight: 600; }
.setup-checklist__fix::after {
  content: "";
  display: inline-block;
  width: 12px; height: 12px;
  margin-left: 2px;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Dashboard quick-links (replaces prose-with-links) */
.quicklinks { display: flex; flex-direction: column; gap: var(--space-4); }
.quicklinks__group-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: var(--space-2); }
.quicklinks__list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.quicklinks__link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--bg-border); border-radius: var(--r-md);
  background: var(--bg-elevated); color: var(--text-primary);
  font-size: var(--fs-sm); text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.quicklinks__link:hover { background: var(--bg-hover); border-color: var(--bg-border-hi); }

.setup-ready-strip { display: flex; align-items: center; gap: 10px; }
.setup-ready-strip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px var(--success); flex-shrink: 0; }

.attention-card h2 { margin: 0 0 10px; font-size: 15px; }
.attention-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.attention-list__item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bg-border); }
.attention-list__item:last-child { border-bottom: none; }

/* ── Launch readiness strip ────────────────────────────────── */
.readiness-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 14px; margin-bottom: 14px; border: 1px solid var(--warning-border); background: var(--warning-dim); border-radius: var(--r-md); font-size: 13px; }
.readiness-strip__title { font-weight: 600; color: var(--text-primary); }
.readiness-strip__item { color: var(--danger-text); font-weight: 600; }
.readiness-strip__item.is-ok { color: var(--success-text); }
.readiness-strip__fix { margin-left: auto; font-weight: 600; }

/* ── Campaign create: steps + advanced ─────────────────────── */
.campaign-steps { list-style: none; counter-reset: step; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 18px; padding: 10px 0; border-bottom: 1px solid var(--bg-border); position: sticky; top: var(--topbar-h); background: var(--bg-root); z-index: 4; }
.campaign-steps li { counter-increment: step; color: var(--text-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.campaign-steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--bg-border-hi); color: var(--text-secondary); font-size: 10px; }
.campaign-advanced { margin: 16px 0; border: 1px solid var(--bg-border); border-radius: var(--r-md); padding: 10px 14px; }
.campaign-advanced summary { cursor: pointer; font-weight: 600; color: var(--text-secondary); }
.campaign-advanced[open] summary { margin-bottom: 10px; }

/* ── New shared components ───────────────────────────────── */

/* ── Shortcode / merge-token reference (click a token to copy) ── */
.shortcodes {
  display: grid;
  grid-template-columns: max-content 1fr;  /* token column + description column */
  align-items: center;
  gap: 6px 16px;
  margin: 8px 0 0;
  padding: 0;
}
.shortcode {                 /* the clickable token pill (grid col 1) */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  padding: 4px 9px;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  font: inherit;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.shortcode:hover { background: var(--bg-hover); border-color: var(--accent-ring); }
.shortcode:active { transform: translateY(1px); }
.shortcode:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.shortcode__token { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.shortcode__copy { display: inline-flex; color: var(--text-muted); opacity: .5; transition: opacity var(--t-fast); }
.shortcode__copy svg, .shortcode__copy .icon { width: 13px; height: 13px; }
.shortcode:hover .shortcode__copy { opacity: 1; }
.shortcode.is-copied { border-color: var(--accent); }
.shortcode.is-copied .shortcode__copy { opacity: 1; color: var(--accent); }
.shortcode-desc { font-size: 12.5px; color: var(--text-muted); }  /* description column */

/* Narrow screens: stack token above its description */
@media (max-width: 560px) {
  .shortcodes { grid-template-columns: 1fr; gap: 2px 0; }
  .shortcode { justify-self: start; margin-top: 8px; }
  .shortcode-desc { margin-bottom: 2px; }
}

/* ── Email-template editor: form + sticky token side panel ── */
.tpl-editor { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; }
.tpl-editor__side { position: sticky; top: calc(var(--topbar-h) + 16px); }
.token-list { display: flex; flex-direction: column; gap: 6px; }
.token-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%;
  padding: 7px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border);
  border-radius: var(--r-sm);
  cursor: pointer; font: inherit; text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.token-btn:hover { background: var(--bg-hover); border-color: var(--accent-ring); }
.token-btn:active { transform: translateY(1px); }
.token-btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.token-btn__token { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.token-btn__desc { font-size: 11.5px; color: var(--text-muted); }
.token-btn.is-inserted { border-color: var(--accent); background: var(--bg-hover); }

/* Mobile: side panel drops below the form; tokens become a compact wrap (desc hidden to save space) */
@media (max-width: 900px) {
  .tpl-editor { grid-template-columns: 1fr; }
  .tpl-editor__side { position: static; }
  .token-list { flex-direction: row; flex-wrap: wrap; }
  .token-btn { width: auto; flex-direction: row; align-items: center; gap: 6px; }
  .token-btn__desc { display: none; }
}

/* Equal-width token grid (campaign editor — full-width form, horizontal layout) */
.token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; margin: 0; }
@media (max-width: 560px) { .token-grid { grid-template-columns: 1fr 1fr; } }

/* transient copy toast */
.copy-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px);
  background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--bg-border-hi); border-radius: var(--r-pill);
  padding: 8px 16px; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-md); z-index: 1000; pointer-events: none;
  opacity: 0; transition: opacity var(--t-fast), transform var(--t-fast);
}
.copy-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Language switcher */
.lang-switch { display: flex; align-items: center; gap: var(--space-2); }
.lang-switch__label { font-size: var(--fs-xs); color: var(--text-muted); }
.lang-switch__select {
  font-size: var(--fs-sm);
  padding: var(--space-1) var(--space-2);
  min-height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--bg-border-hi);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
}
.lang-switch__select:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  color: var(--text-secondary);
}
.empty-state__icon { width: 40px; height: 40px; color: var(--text-muted); }
.empty-state__title { font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); }
.empty-state__body { font-size: var(--fs-base); max-width: 42ch; line-height: var(--leading-normal); }

/* Skeleton (loading placeholder) */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-elevated);
  border-radius: var(--r-sm);
  min-height: 1em;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--bg-hover), transparent);
  animation: skeleton-shimmer 1.3s infinite;
}
@keyframes skeleton-shimmer { to { transform: translateX(100%); } }

/* Toasts */
.toast-region {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(360px, 92vw);
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border-hi);
  border-left: 3px solid var(--text-muted);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  animation: toast-in var(--t-normal);
}
.toast--success { border-left-color: var(--success); }
.toast--warning { border-left-color: var(--warning); }
.toast--danger  { border-left-color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── 34. Login layout (shared by login + bootstrap_password) ── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, var(--accent-dim) 0%, transparent 70%),
    var(--bg-root);
}

.login-card {
  width: 100%;
  max-width: 380px;
}

.login-brand {
  text-align: center;
  margin-bottom: 28px;
}

.login-brand__logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-lo) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 18px;
  color: var(--on-accent);
  margin-bottom: 14px;
  box-shadow: var(--shadow-md);
  letter-spacing: -1px;
}

.login-brand__name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.4px;
  line-height: 1.2;
}

.login-brand__sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
}

.login-form-card {
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--r-lg);
  padding: 28px 28px 24px;
  box-shadow: var(--shadow-md);
}

.login-form-card .form__group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.login-form-card .form__input {
  /* longhand: leave padding-right to the cascade so .input-group reserves room for the toggle */
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 12px;
  font-size: 14px;
}

.login-btn {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 4px;
  border-radius: var(--r-md);
  justify-content: center;
}

.login-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-muted);
}

.login-lang-switch {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

/* sensitive-unlock inline form */
.unlock-form {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
}

.unlock-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ── 35. Responsive ─────────────────────────────────────────── */
@media (min-width: 1600px) {
  .content { padding: 28px 32px; }
}

@media (max-width: 1024px) {
  .settings-status-grid,
  .settings-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }

  .main { margin-left: 0; }

  .sidebar {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: min(280px, 84vw);
    height: 100vh;
    height: 100dvh;
    z-index: 200;
    box-shadow: var(--shadow-md);
    animation: sidebar-in var(--t-normal);
  }

  .sidebar.is-open { display: flex; }

  /* a collapse set on desktop persists in the cookie across viewports; on mobile the
     server still emits is-sidebar-collapsed, which would shrink the drawer to the
     60px rail. Re-assert the full drawer width + no content margin. */
  body.is-sidebar-collapsed .sidebar { width: min(280px, 84vw); }
  body.is-sidebar-collapsed .main { margin-left: 0; }

  /* force expanded look inside the open drawer (rail clipping must not apply) */
  .sidebar .sidebar__label { opacity: 1 !important; }
  .sidebar .sidebar__nav-heading { height: auto !important; padding: 4px 11px 6px !important; opacity: 1 !important; }
  .sidebar__footer-icon { display: none !important; }
  .sidebar__footer-full { display: block !important; }
  .sidebar__pin { display: none; }   /* no pin on mobile; the drawer is full-width */

  @keyframes sidebar-in {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
  }

  .sidebar-toggle { display: inline-flex; align-items: center; }

  .btn { min-height: 44px; }
  .form__input { min-height: 44px; }
  .topbar { padding: 0 14px; min-height: 52px; }
  .topbar__title { font-size: 15px; }
  .content { padding: 16px 14px; overflow-x: hidden; }

  .phishlet-form-row,
  .campaign-form-row,
  .settings-fields,
  .settings-status-grid,
  .settings-category-grid,
  .settings-agent-summary { grid-template-columns: 1fr; }

  .settings-intro,
  .settings-section__header { flex-direction: column; }

  .campaign-section { flex-direction: column; gap: 8px; }
  .campaign-section__label { width: auto; padding-top: 0; }

  .detail-list,
  .phishlet-meta__grid { grid-template-columns: 1fr; gap: 2px 0; }
  .detail-list dt,
  .phishlet-meta__grid dt { padding-top: 8px; }
  .detail-list dt:first-child,
  .phishlet-meta__grid dt:first-child { padding-top: 0; }

  .filter-bar__input,
  .filter-bar__select { max-width: 100%; flex: 1 1 100%; }

  /* ── Slimmed topbar on mobile: title truncates; page action buttons wrap (and
     grow to fill) instead of overflowing horizontally. Global chrome (tenant/
     admin/role/sign-out) is relocated to the drawer by app.js. ── */
  .topbar__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar__actions { flex-wrap: wrap; gap: 6px; }
  /* Compact page-action buttons on mobile. */
  .topbar__actions .btn { padding: 6px 9px; font-size: 12px; min-height: 34px; gap: 4px; }
  /* Buttons that have an icon collapse to icon-only squares on mobile (most compact).
     The label stays in the DOM/accessibility tree (font-size:0 is visual only), so
     screen readers still announce it; desktop keeps the full label. */
  .topbar__actions .btn:has(svg),
  .topbar__actions .btn:has(.icon) { font-size: 0; padding: 8px; gap: 0; min-width: 34px; justify-content: center; }
  .topbar__actions .btn svg,
  .topbar__actions .btn .icon { width: 17px; height: 17px; }

  /* ── Sidebar account-actions slot (filled by app.js on mobile) ── */
  .sidebar__account {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--bg-border);
    margin-top: auto;
  }
  .sidebar__account .tenant-switch { display: flex; flex-direction: column; gap: 4px; width: 100%; }
  .sidebar__account .tenant-switch__label { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .sidebar__account .tenant-switch__select { width: 100%; min-height: 44px; }
  .sidebar__account .topbar__admin { width: 100%; justify-content: center; }
  .sidebar__account a[href="/logout"] { width: 100%; justify-content: center; text-align: center; }
  .sidebar__account .topbar__role { align-self: flex-start; }

  /* ── Responsive tables → stacked cards (no horizontal scroll) ──
     Label-above-value, left-aligned: robust for long values (e.g. subject
     preview) and short ones alike. !important overrides desktop INLINE cell
     styles (e.g. style="max-width:240px;overflow:hidden;text-overflow:ellipsis")
     so values wrap fully inside the card instead of being clamped/ellipsized. */
  .table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* visually hidden, kept for a11y */
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { border: 1px solid var(--bg-border); border-radius: var(--r-md); background: var(--bg-card); padding: 6px 14px; margin-bottom: 10px; }
  .table tbody tr:nth-child(even) td { background: transparent; } /* remove desktop zebra inside the card */
  .table td.table__actions { position: static; background: transparent; } /* undo desktop sticky-right pin in stacked layout */
  .table td {
    border: none;
    border-bottom: 1px solid var(--bg-border);
    padding: 9px 0;
    text-align: left;
    max-width: none !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    word-break: break-word;
  }
  .table tr td:last-child { border-bottom: none; }
  .table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
  }
  /* empty-state / spanning rows: full-width centered message, no label */
  .table td[colspan] { text-align: center; }
  .table td[colspan]::before { content: none; }
}

@media (max-width: 480px) {
  .content { padding: 14px 12px; }
  .card { padding: 14px 14px; border-radius: var(--r-md); }
  .stat-card__value { font-size: 1.5rem; }
  .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .targets-stats { gap: 14px; }

  .form__actions .btn,
  .campaign-form-submit .btn,
  .phishlet-action-submit .btn { flex: 1 1 auto; }
}

/* ── 36. Report / print output ──────────────────────────────── */

/* .kicker — small all-caps label used by report partials (does not
   exist elsewhere in this file, so we define it here).             */
.kicker {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

/* Outer wrapper — full-width, uses page background */
.report {
  width: 100%;
  max-width: var(--content-max);
  padding: 0 0 40px;
  color: var(--text-primary);
  font-family: var(--font-sans);
}

/* Cover page — centred title block with generated date + scope */
.report-cover {
  text-align: center;
  padding: 56px 24px 48px;
  border-bottom: 1px solid var(--bg-border);
  margin-bottom: 40px;
}

.report-cover h1 {
  margin: 0 0 12px;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}

.report-cover .report-cover__meta {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Section — h2 heading + spacing; break-inside handled in @media print */
.report-section {
  margin-bottom: 40px;
}

.report-section > h2 {
  margin: 0 0 18px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bg-border);
}

/* KPI grid — responsive, reuses surface tokens */
.report-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

/* KPI card — label span + value strong */
.report-kpi {
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-sm);
}

.report-kpi span {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.report-kpi strong {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Grade badge — A–F, colour-coded via modifier classes.
   Uses border + text colouring so the badge is legible in both themes.
   The semantic *-text tokens are already tuned per theme.              */
.report-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  font-size: 1.75rem;
  font-weight: 800;
  border: 2px solid var(--bg-border-hi);
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

/* Grade "N/A" intentionally has no modifier; it falls through to the base .report-grade (neutral) styling. */
.report-grade--a {
  color: var(--success-text);
  border-color: var(--success-border);
  background: var(--success-dim);
}

.report-grade--b {
  color: var(--success-text);
  border-color: var(--success-border);
  background: var(--success-dim);
}

.report-grade--c {
  color: var(--warning-text);
  border-color: var(--warning-border);
  background: var(--warning-dim);
}

.report-grade--d {
  color: var(--danger-text);
  border-color: var(--danger-border);
  background: var(--danger-dim);
}

.report-grade--f {
  color: var(--danger-text);
  border-color: var(--danger-border);
  background: var(--danger-dim);
  font-style: italic;
}

/* Funnel bars — CSS-only horizontal bars.
   Convention: <div class="report-funnel-bar"><span style="width:42%"></span></div>
   The inner <span> carries the percentage width (set via inline style).            */
.report-funnel-bar {
  height: 10px;
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin: 4px 0;
}

.report-funnel-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-pill);
  min-width: 2px;
}

/* Report table — layers width + print tweaks on top of .table */
.report-table {
  width: 100%;
  border-top: 1px solid var(--bg-border);
}

/* Evidence block — monospace, signals redacted content */
.report-evidence {
  background: var(--bg-card-alt);
  border: 1px solid var(--bg-border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.report-evidence::before {
  content: "Evidence";
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Metric definitions list — <dl> whose children are <div>s each
   containing a <dt> + <dd>.                                      */
.report-def {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  font-size: 13.5px;
}

.report-def > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 6px 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bg-border);
  align-items: baseline;
}

.report-def > div:last-child {
  border-bottom: none;
}

.report-def dt {
  font-weight: 600;
  color: var(--text-secondary);
}

.report-def dd {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Sign-off / attestation block */
.report-attest {
  margin-top: 32px;
  padding: 20px 22px;
  border: 1px solid var(--bg-border-hi);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.report-attest strong {
  display: block;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 6px;
}

/* Data-integrity warning banner */
.report-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.5;
  background: var(--warning-dim);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
}

.report-warning::before {
  content: "⚠";
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--warning);
}

/* @media print — remap tokens to light palette, hide chrome, control pagination */
@media print {
  /* Remap the full semantic token set to light-theme values so that
     the default dark theme (and explicit light theme) both print with
     the legible light palette — no per-element colour overrides needed. */
  :root {
    --bg-root:       #ffffff;
    --bg-surface:    #ffffff;
    --bg-elevated:   #f5f5f5;
    --bg-hover:      #ededed;
    --bg-border:     #e4e4e4;
    --bg-border-hi:  #cfcfcf;
    --bg-card-alt:   #fafafa;

    --text-primary:   #111111;
    --text-secondary: #525252;
    --text-muted:     #5f5f5f;
    --text-disabled:  #a8a8a8;
    --text-inverse:   #ffffff;

    --accent:      #111111;
    --on-accent:   #ffffff;
    --accent-text: #111111;
    --accent-dim:  rgba(0,0,0,0.06);

    --success: #16a34a; --success-dim: rgba(22,163,74,0.10);  --success-border: rgba(22,163,74,0.32);  --success-text: #15803d;
    --warning: #d97706; --warning-dim: rgba(217,119,6,0.10);  --warning-border: rgba(217,119,6,0.34);  --warning-text: #b45309;
    --danger:  #dc2626; --danger-dim:  rgba(220,38,38,0.08);  --danger-border:  rgba(220,38,38,0.30);  --danger-text:  #b91c1c;

    --shadow-sm: none;
    --shadow-md: none;
  }

  .sidebar,
  .topbar,
  .no-print {
    display: none !important;
  }

  @page {
    margin: 20mm 18mm;
    size: A4 portrait;
  }

  body {
    background: #ffffff;
    font-size: 11pt;
  }

  .app {
    display: block;
  }

  .main {
    display: block;
    width: 100%;
    margin-left: 0;
  }

  .content {
    padding: 0;
    max-width: 100%;
  }

  .report {
    max-width: 100%;
    padding: 0;
  }

  .report-cover {
    break-after: page;
  }

  .report-section {
    break-inside: avoid;
  }

  /* preserve coloured fills for grade badges, funnel fill, warning banner */
  .report-grade {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .report-funnel-bar > span {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .report-warning {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  a { text-decoration: none; color: inherit; }
}

/* ── 35. Report template switcher toolbar ───────────────────── */
.report-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bg-border);
}
.report-toolbar a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-sm);
}
.report-toolbar a:hover { color: var(--text-primary); background: var(--bg-hover); }
.report-toolbar a.active { color: var(--text-primary); background: var(--bg-elevated); font-weight: 600; }
.report-toolbar a.btn { margin-left: auto; } /* push the print button to the right */

/* ── 36. Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .skeleton::after { animation: none; }
  .toast { animation: none; }
  .status-pill__spinner { animation: none; }
}

/* ── Tag picker (target form) ── */
.tag-picker { display: flex; flex-direction: column; gap: 8px; }
.tag-picker__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  font: inherit; font-size: 12.5px;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border);
  border-radius: var(--r-pill);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.tag-chip:hover { border-color: var(--accent-ring); color: var(--text-primary); }
.tag-chip.is-selected { background: var(--accent); border-color: var(--accent); color: var(--bg-root); font-weight: 600; }
.tag-chip.is-selected::before { content: "\2713"; font-size: 11px; }
.tag-picker__new { display: flex; gap: 8px; align-items: center; }
.tag-picker__new-input { max-width: 240px; }
@media (max-width: 560px) { .tag-picker__new-input { max-width: 100%; flex: 1; } }

/* ── Bulk target actions bar ── */
.bulk-bar {
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border);
  border-radius: var(--r-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
  flex-direction: column;
  gap: var(--space-3);
}
.bulk-bar:not([hidden]) { display: flex; }
.bulk-bar__status { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.bulk-bar__controls { display: flex; align-items: flex-start; gap: var(--space-5); flex-wrap: wrap; }
.bulk-bar__group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.bulk-bar__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-left: auto; }
.bulk-bar__count { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bulk-bar__label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.bulk-bar__picker.tag-picker { max-width: 320px; }
.bulk-bar__picker .tag-picker__chips { flex-wrap: wrap; }

/* ── Bulk selection checkbox column ── */
.table__check { width: 36px; text-align: center; }
.table__check input[type="checkbox"] { vertical-align: middle; cursor: pointer; }

@media (max-width: 768px) {
  .bulk-bar__actions { margin-left: 0; }
  td.table__check { border-bottom: none; padding: 0 0 6px; }
  td.table__check::before { content: none; }
}

/* ============================================================
   Evilginx remote console (full-screen terminal page)
   ============================================================ */
body.console-page {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-root);
  overflow: hidden;
}
/* Always-visible "recorded" banner. Amber bar so the operator never loses sight
   that the session is recorded. */
.console-banner {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #1a1300;
  background: #d9a200;
  border-bottom: 1px solid rgba(0,0,0,0.25);
}
.console-banner__dot { color: var(--danger); font-size: 14px; line-height: 1; }
.console-banner__agent { margin-left: auto; font-weight: 500; opacity: 0.85; }
.console-main {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px;
  background: #0b0d12;
}
.console-terminal { width: 100%; height: 100%; }
/* Step-up modal overlay. */
.console-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.72);
  padding: var(--space-4);
}
.console-modal[hidden], .console-modal--hidden { display: none; }
.console-modal__card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: 10px;
  padding: var(--space-5);
}
.console-reconnect {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1000;
}

/* ============================================================
   Campaign create wizard
   Stepped, gated create flow. Rail + panel on desktop; compact
   top stepper + sticky bottom nav on mobile. Monochrome tokens
   only — no new palette. Progressive enhancement: under .no-js
   every step is visible and the plain submit row shows; .js
   (added by the controller) reveals one step + the sticky nav.
   ============================================================ */

.wizard {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 1024px) {
  .wizard {
    grid-template-columns: 248px minmax(0, 1fr);
    gap: var(--space-6);
  }
}

/* --- progress rail --- */
.wizard__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: calc(var(--topbar-h) + var(--space-4));
}
.wizard__rail-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-4) 0;
  color: var(--text-muted);
}
/* connector line between numbered markers */
.wizard__rail-step::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 34px;
  bottom: -6px;
  width: 2px;
  background: var(--bg-border);
}
.wizard__rail-step:last-child::before { display: none; }
.wizard__rail-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  background: var(--bg-elevated);
  border: 1.5px solid var(--bg-border-hi);
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.wizard__rail-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-top: 3px; }
.wizard__rail-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: inherit;
}
.wizard__rail-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.35;
}

/* state: done — accent marker with a check glyph; clickable to jump back */
.wizard__rail-step.is-done { color: var(--text-secondary); cursor: pointer; }
.wizard__rail-step.is-done .wizard__rail-num {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
  font-size: 0;
}
.wizard__rail-step.is-done .wizard__rail-num::after {
  content: "\2713"; /* check */
  font-size: var(--fs-base);
  line-height: 1;
}
.wizard__rail-step.is-done::before { background: var(--accent); }
.wizard__rail-step.is-done:hover .wizard__rail-title { color: var(--text-primary); }

/* state: current — strong ring + weight */
.wizard__rail-step.is-current { color: var(--text-primary); }
.wizard__rail-step.is-current .wizard__rail-num {
  background: var(--bg-surface);
  border-color: var(--accent);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.wizard__rail-step.is-current .wizard__rail-title { color: var(--text-primary); font-weight: 700; }
.wizard__rail-step.is-current .wizard__rail-desc { color: var(--text-secondary); }

/* state: locked — muted, inert */
.wizard__rail-step.is-locked { color: var(--text-disabled); cursor: default; }
.wizard__rail-step.is-locked .wizard__rail-num { color: var(--text-disabled); border-color: var(--bg-border); }
.wizard__rail-step.is-locked .wizard__rail-desc { color: var(--text-disabled); }

/* --- panel + steps --- */
.wizard__panel { min-width: 0; }
.wizard__step { margin-bottom: var(--space-5); }
.wizard__step-head { margin-bottom: var(--space-4); }
.wizard__step-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-1);
  color: var(--text-primary);
}
.wizard__step-title:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 4px; border-radius: 4px; }
.wizard__step-desc { margin: 0; color: var(--text-secondary); font-size: var(--fs-md); }
.wizard__step-errors { margin: 0 0 var(--space-4); }
.wizard__step-body { margin-bottom: 0; }

/* Under .js the wizard shows only the active step; .no-js shows them all. */
.wizard.js .wizard__step { display: none; }
.wizard.js .wizard__step.is-active { display: block; }
.wizard.no-js .wizard__step { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .wizard.js .wizard__step.is-active {
    animation: wizardStepIn 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  @keyframes wizardStepIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* The plain submit row is for the no-JS path only; hide it once JS owns nav. */
.wizard.js .wizard__nojs-submit { display: none; }

/* --- sticky step nav (JS) --- */
.wizard__nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-3) 0;
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--bg-root) 70%, transparent);
  z-index: 5;
}
.wizard__nav-progress {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.wizard__nav .btn--primary[disabled],
.wizard__nav .btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- inline field validation --- */
.field--invalid .form__input,
.form__input.field--invalid {
  border-color: var(--danger-border);
  box-shadow: 0 0 0 2px var(--danger-dim);
}
.field__error {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-sm);
  color: var(--danger-text);
}
/* subtle valid tick on completed required fields */
.field--valid {
  position: relative;
}
.field--valid::after {
  content: "\2713";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--success-text);
  font-size: var(--fs-base);
  font-weight: 700;
  pointer-events: none;
}

/* --- contextual tips --- */
.tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--bg-border-hi);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tip-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--accent); }
.tip-btn[aria-expanded="true"] {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
}
.tip {
  margin: var(--space-2) 0 0;
  max-width: 460px;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border-hi);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}

/* --- review summary --- */
.wizard__summary { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.wizard__summary-group {
  border: 1px solid var(--bg-border);
  border-radius: 8px;
  background: var(--bg-card-alt);
  padding: var(--space-3) var(--space-4);
}
.wizard__summary-group h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.wizard__summary-edit {
  background: none;
  border: none;
  color: var(--accent-text);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  padding: 0;
}
.wizard__summary-edit:hover { text-decoration: underline; }
.wizard__summary-row {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  font-size: var(--fs-base);
}
.wizard__summary-row dt { flex: 0 0 132px; color: var(--text-muted); }
.wizard__summary-row dd { margin: 0; color: var(--text-primary); min-width: 0; word-break: break-word; }
.wizard__summary-row dd.is-empty { color: var(--text-disabled); }

.wizard__content-check {
  border: 1px solid var(--bg-border);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}
.wizard__content-check-title {
  display: block;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-1);
  color: var(--text-primary);
}
.wizard__content-check.is-low    { border-color: var(--success-border); }
.wizard__content-check.is-medium { border-color: var(--warning-border); }
.wizard__content-check.is-high   { border-color: var(--danger-border); }
.wizard__content-check-findings { margin: var(--space-2) 0 0; padding-left: var(--space-5); font-size: var(--fs-sm); color: var(--text-secondary); }
.wizard__content-check-findings li { margin: 2px 0; }
.wizard__content-check-findings .is-warn { color: var(--warning-text); }
.wizard__content-check-findings .is-error { color: var(--danger-text); }

/* --- resume prompt --- */
.wizard__resume {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  border: 1px solid var(--bg-border-hi);
  border-radius: 10px;
  background: var(--bg-elevated);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-sm);
}
.wizard__resume-text strong { display: block; font-size: var(--fs-md); color: var(--text-primary); }
.wizard__resume-text p { margin: 2px 0 0; font-size: var(--fs-sm); }
.wizard__resume-actions { display: flex; gap: var(--space-2); }

/* --- responsive: rail → top stepper, sticky bottom nav --- */
@media (max-width: 768px) {
  .wizard__rail {
    flex-direction: row;
    overflow-x: auto;
    gap: var(--space-2);
    position: static;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--bg-border);
    margin-bottom: var(--space-4);
    -webkit-overflow-scrolling: touch;
  }
  .wizard__rail-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-2) 0;
    min-width: 60px;
    flex: 0 0 auto;
  }
  .wizard__rail-step::before {
    left: auto;
    right: -50%;
    top: 14px;
    bottom: auto;
    width: 100%;
    height: 2px;
  }
  .wizard__rail-desc { display: none; }
  .wizard__rail-title { font-size: var(--fs-xs); }
  .wizard__nav {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) calc(-1 * var(--space-4)) 0;
    border-top: 1px solid var(--bg-border);
    background: var(--bg-surface);
  }
  .wizard__nav .btn { flex: 1 1 auto; }
  .wizard__nav-progress { flex: 0 0 100%; order: -1; text-align: center; margin: 0 0 var(--space-2); }
  .wizard__summary-row { flex-direction: column; gap: 2px; }
  .wizard__summary-row dt { flex-basis: auto; }
}

/* Campaign detail — in-page tabs (reuses .page-tabs/.page-tab; button-based tablist) */
.campaign-tabs .page-tab { background: none; border-top: none; border-left: none; border-right: none; cursor: pointer; font-family: inherit; line-height: 1.4; }
.tab-panel { display: none; }
.campaign-tabs.js .tab-panel.is-active { display: block; }
.campaign-tabs.no-js .tab-panel { display: block; }
.campaign-tabs.no-js .page-tabs { display: none; }
.campaign-tabs:not(.js) .page-tabs { display: none; }
@media (max-width: 768px) {
  .campaign-tabs .page-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .campaign-tabs .page-tab { white-space: nowrap; }
}

/* Campaign detail — visual de-bulk (status header, stat strip, compact cards, disclosure) */
.campaign-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "main links" "meta links";
  align-items: start;
  gap: 4px var(--space-4);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--bg-border);
}
.campaign-header__main { grid-area: main; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.campaign-header__name { margin: 0; font-size: var(--fs-xl); font-weight: 650; color: var(--text-primary); line-height: 1.2; word-break: break-word; }
.campaign-header__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 4px var(--space-4); margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.campaign-header__meta-label { color: var(--text-muted); font-weight: 600; }
.campaign-header__links { grid-area: links; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; justify-content: flex-end; font-size: var(--fs-xs); }
.campaign-header__cta { margin-right: 4px; }

.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.stat-strip .stat {
  flex: 1 1 0;
  min-width: 88px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px var(--space-3);
  border: 1px solid var(--bg-border);
  border-radius: var(--r-md);
  background: var(--bg-card-alt);
}
.stat__num { font-size: var(--fs-lg); font-weight: 650; color: var(--text-primary); line-height: 1.1; }
.stat__label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* Denser card variant + compact title scale (does not touch global .card) */
.card--compact { padding: var(--space-4); }
.card__title { margin: 0 0 var(--space-3); font-size: var(--fs-base); font-weight: 650; color: var(--text-primary); line-height: 1.3; }
.card__title--sub { font-size: var(--fs-sm); margin-bottom: var(--space-2); }

/* Definition-list meta grid (label / value pairs) */
.meta-grid {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px var(--space-4);
  font-size: var(--fs-sm);
}
.meta-grid dt { font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.meta-grid dd { margin: 0; color: var(--text-secondary); min-width: 0; word-break: break-word; }

/* Consolidated readiness block header (relocated checklist) */
.readiness-consolidated { margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--bg-border); }
.readiness-consolidated__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-2); }

/* Native progressive disclosure */
.disclose { margin: var(--space-2) 0 0; }
.disclose > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  padding: 2px 0;
}
.disclose > summary:hover { color: var(--text-primary); }
.disclose > summary:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: var(--r-xs); }
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary::before {
  content: "";
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--t-fast);
  flex: 0 0 auto;
}
.disclose[open] > summary::before { transform: rotate(45deg); }
.disclose--inline { display: inline-block; margin: 0 0 0 4px; vertical-align: baseline; }
.disclose--inline > summary { font-weight: 400; font-size: var(--fs-xs); }
.disclose--fields { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--bg-border); }

@media (max-width: 768px) {
  .campaign-header { grid-template-columns: 1fr; grid-template-areas: "main" "meta" "links"; }
  .campaign-header__links { justify-content: flex-start; }
  .campaign-header__cta { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .stat-strip .stat { flex: 1 1 calc(50% - var(--space-2)); min-width: 0; }
}

/* ── Inline DNS health dots (agent email-DNS table) ─────────────── */
.dns-records-table__status { width: 1.5rem; text-align: center; }
.dns-records-table__statuscell { text-align: center; vertical-align: middle; }
.dns-status-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  box-shadow: 0 0 0 3px transparent;
  vertical-align: middle;
  cursor: help;
}
.dns-status-dot--ok       { background: var(--success); }
.dns-status-dot--mismatch { background: var(--warning); }
.dns-status-dot--missing  { background: var(--danger); }
.dns-status-dot--error    { background: var(--danger); opacity: 0.65; }
.dns-status-dot--skip     { background: var(--text-muted); opacity: 0.4; }
.dns-status-dot--unchecked{ background: var(--text-muted); opacity: 0.4; }
.dns-status-dot--checking {
  background: var(--accent);
  animation: dns-dot-pulse 1s ease-in-out infinite;
}
@keyframes dns-dot-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.1); }
}