/* ═══════════════════════════════════════════════════════════════════════
   CyberSeeds — Cybersecurity Assessment Platform Styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ────────────────────────────────────────────────────── */
:root {
  /* Brand — indigo system */
  --brand:        #4f46e5;   /* indigo-600  — primary actions, active states */
  --brand-hover:  #4338ca;   /* indigo-700  — hover */
  --brand-active: #3730a3;   /* indigo-800  — pressed / deep accent */
  --brand-mid:    #6366f1;   /* indigo-500  — secondary accents, eyebrows */
  --brand-pale:   #a5b4fc;   /* indigo-300  — focus rings, arrows */
  --brand-light:  #eef2ff;   /* indigo-50   — selected bg, light fills */
  --brand-tint:   #e0e7ff;   /* indigo-100  — progress track, bar bg */
  --brand-muted:  #c7d2fe;   /* indigo-200  — borders, chips */
  --brand-border: #ddd6fe;   /* violet-200  — card/header borders */
  --brand-soft:   #ede9fe;   /* violet-100  — gradient end, softest fill */

  /* Neutrals */
  --n-900: #0f172a;
  --n-800: #1e293b;
  --n-700: #334155;
  --n-600: #475569;
  --n-500: #64748b;
  --n-400: #94a3b8;
  --n-300: #cbd5e1;
  --n-200: #e2e8f0;
  --n-100: #f1f5f9;
  --n-50:  #f8fafc;
  --n-0:   #ffffff;

  /* Semantic */
  --success:        #16a34a;
  --success-light:  #dcfce7;
  --success-border: #bbf7d0;
  --warning:        #d97706;
  --warning-dark:   #92400e;
  --warning-light:  #fef3c7;
  --warning-border: #fde68a;
  --danger:         #ef4444;
  --danger-light:   #fef2f2;
  --danger-border:  #fecaca;
  --info:           #4f46e5;
  --info-light:     #eef2ff;
  --info-border:    #c7d2fe;

  /* Typography scale */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base:14px;
  --text-md:  15px;
  --text-lg:  17px;
  --text-xl:  19px;
  --text-2xl: 23px;
  --text-3xl: 29px;

  /* Border-radius */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 3px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.14);
  --shadow-brand-sm: 0 2px 8px rgba(99,102,241,.18);
  --shadow-brand-md: 0 4px 16px rgba(99,102,241,.28);

  /* Extended semantic palette — charts, status maps, avatars */
  --purple:        #8b5cf6;
  --purple-light:  #f3e8ff;
  --purple-border: #ddd6fe;
  --orange:        #f97316;
  --orange-light:  #fff7ed;
  --orange-border: #fed7aa;
  --rose:          #f43f5e;
  --rose-light:    #fff1f2;
  --rose-border:   #fecdd3;
  --amber:         #f59e0b;
  --amber-light:   #fffbeb;
  --amber-border:  #fde68a;
  --teal:          #0d9488;
  --teal-light:    #f0fdfa;
  --teal-border:   #99f6e4;

  /* Transitions */
  --t-fast: .12s ease;
  --t-base: .2s cubic-bezier(.4,0,.2,1);

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;

  /* Brand accent — indigo-400, used in landing/label accents */
  --brand-400: #818cf8;

  /* Dark hero surface — used in page headers, modal headers, dark cards */
  --hero-bg:     linear-gradient(135deg, #0d1117 0%, #131a22 60%, #16213e 100%);
  --hero-text:   #e8ecf0;
  --hero-strong: #f2f3f3;
  --hero-muted:  #8d99a6;
  --hero-border: rgba(255,255,255,.08);

  /* Monospace font stack */
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Typography — 10px below the existing 11px --text-2xs */
  --text-3xs: 10px;

  /* Radius — 10px fills the gap between --r-md (8) and --r-lg (12) */
  --r-10: 10px;
  /* Extended semantic — danger/success dark shades */
  --danger-dark:   #991b1b;   /* red-800  — dark text on danger badges */
  --success-dark:  #166534;   /* green-800 — dark text on success badges */
  --brand-depth:   #1e1b4b;   /* indigo-950 — deepest brand bg */

  /* Dark surface individual stops — for single-colour uses */
  --hero-bg-start: #0d1117;   /* gradient start / sidebar bg */
  --hero-bg-mid:   #131a22;   /* gradient mid / secondary sidebar bg */
  --hero-bg-end:   #16213e;   /* gradient end / deep blue */

  /* Neutrals not yet in token map */
  --n-750: #374151;   /* gray-700 — body text in light contexts */
  --n-150: #e8edf2;   /* between n-100 and n-200 — subtle borders */
  --n-25:  #fafafa;   /* near-white bg */

  /* AWS / cloud brand */
  --aws-orange: #0073bb;   /* AWS blue (used in cloud section) */

}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--n-800); background: var(--n-50); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }

/* ─── Shared app buttons & elements (dashboard) ──────────────────────── */
/* ─── Core button system ──────────────────────────────────────────────── */
/* All buttons share: font-family, cursor, white-space, transition base   */
.btn-primary, .btn-outline, .btn-secondary, .btn-sm, .btn-danger, .btn-danger-sm {
  font-family: inherit; cursor: pointer; white-space: nowrap; display: inline-flex;
  align-items: center; gap: 6px; border-radius: var(--r-md);
  transition: background var(--t-base), border-color var(--t-base),
              color var(--t-base), box-shadow var(--t-base), opacity var(--t-base);
  text-decoration: none;
}

/* Primary — indigo filled */
.btn-primary {
  background: var(--brand); color: var(--n-0); border: none;
  padding: 9px 20px;
  font-size: var(--text-md); font-weight: 600;
  box-shadow: 0 1px 2px rgba(79,70,229,.15);
}
.btn-primary:hover { background: var(--brand-hover); box-shadow: var(--shadow-brand-sm); }
.btn-primary:active { background: var(--brand-active); }
.btn-primary:disabled, .btn-primary[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* Outline — ghost with border, indigo on hover */
.btn-outline {
  background: var(--n-0); color: var(--n-700);
  border: 1.5px solid var(--n-200);
  padding: 8px 18px;
  font-size: var(--text-md); font-weight: 500;
}
.btn-outline:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.btn-outline:disabled, .btn-outline[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-outline--brand   { color: var(--brand);   border-color: var(--brand-muted); }
.btn-outline--brand:hover   { border-color: var(--brand);   background: var(--brand-light);  color: var(--brand); }
.btn-outline--warning { color: var(--warning); border-color: var(--warning-border); }
.btn-outline--warning:hover { border-color: var(--warning); background: var(--warning-light); color: var(--warning); }
.btn-outline--danger  { color: var(--danger);  border-color: var(--danger-border); }
.btn-outline--danger:hover  { border-color: var(--danger);  background: var(--danger-light);  color: var(--danger); }

/* Secondary — same as outline, alias for Cancel/Back actions */
.btn-secondary {
  background: var(--n-0); color: var(--n-600);
  border: 1.5px solid var(--n-200);
  padding: 8px 18px;
  font-size: var(--text-md); font-weight: 500;
}
.btn-secondary:hover { border-color: var(--n-400); color: var(--n-800); background: var(--n-50); }
.btn-secondary:disabled, .btn-secondary[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Size modifiers */
.btn-lg { padding: 12px 28px; font-size: var(--text-lg); }
.btn-sm {
  padding: 5px 12px; font-size: var(--text-sm); font-weight: 500;
  border-radius: var(--r-sm); border: 1.5px solid var(--n-200);
  background: var(--n-0); color: var(--n-600);
}
.btn-sm:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.btn-sm:disabled, .btn-sm[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn-sm-pad { padding: 6px 14px; font-size: var(--text-sm); }

/* Primary-sm — small indigo filled (for inline contexts) */
.btn-primary-sm {
  background: var(--brand); color: var(--n-0); border: none; font-weight: 600;
}
.btn-primary-sm:hover { background: var(--brand-hover); }

/* Danger — destructive actions */
.btn-danger {
  background: var(--n-0); color: var(--danger);
  border: 1.5px solid var(--danger-border);
  padding: 8px 18px; font-size: var(--text-md); font-weight: 500;
}
.btn-danger:hover { background: var(--danger-light); border-color: var(--danger); }
.btn-danger-sm {
  background: var(--danger-light); color: var(--danger);
  border: 1px solid var(--danger-border);
  padding: 5px 12px; font-size: var(--text-sm); font-weight: 500;
  border-radius: var(--r-sm);
}
.btn-danger-sm:hover { background: var(--danger-light); border-color: var(--danger); }

/* Icon-only close */
.btn-close {
  background: none; border: none; font-size: 22px; cursor: pointer;
  color: var(--n-400); line-height: 1; padding: 4px; border-radius: var(--r-xs);
  transition: color var(--t-fast), background var(--t-fast);
}
.btn-close:hover { color: var(--n-800); background: var(--n-100); }

/* Split button — primary action + dropdown arrow */
.btn-split-group { position: relative; display: inline-flex; }
.btn-split-group .btn-primary { border-radius: var(--r-md) 0 0 var(--r-md); padding-right: 16px; }
.btn-split-arrow { border-radius: 0 var(--r-md) var(--r-md) 0 !important; padding: 0 10px !important; border-left: 1px solid rgba(255,255,255,.25) !important; font-size: var(--text-2xs) !important; }
.btn-split-menu { display: none; position: absolute; top: calc(100% + 4px); right: 0; background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-md); box-shadow: var(--shadow-md); min-width: 180px; z-index: 500; overflow: hidden; }
.btn-split-menu.open { display: block; }
.btn-split-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 16px; font-size: var(--text-md); font-weight: 500; color: var(--n-700); background: none; border: none; cursor: pointer; text-align: left; transition: background var(--t-fast); white-space: nowrap; }
.btn-split-menu button:hover { background: var(--brand-light); color: var(--brand); }

/* Neutral small (tab-like toggles) */
.btn-sm-neutral { background: var(--n-50); border-color: var(--n-300); color: var(--n-700); }
.btn-sm-neutral:hover { background: var(--n-100); border-color: var(--n-400); }

.badge {
  display: inline-block; padding: 3px 10px;
  border: 1.5px solid var(--n-200); border-radius: var(--r-pill);
  font-size: var(--text-sm); font-weight: 600; letter-spacing: .6px; color: var(--n-500);
}
.logo-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--brand), var(--brand-hover));
  border-radius: var(--r-md); display: flex; align-items: center;
  justify-content: center; color: var(--n-0); font-weight: 700; font-size: var(--text-lg); flex-shrink: 0;
}
.logo-icon.small { width: 30px; height: 30px; font-size: var(--text-sm); border-radius: var(--r-sm); }
.green-text { color: var(--success); }
.orange-text { color: var(--warning); }
.blue-text { color: var(--info); }
.purple-text { color: var(--purple); }

/* ═══════════════════════════════════════════════════════════════════════
   LANDING PAGE
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── LP Nav ──────────────────────────────────────────────────────────── */
.lp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: rgba(255,255,255,0.95); backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid var(--n-200); box-shadow: 0 1px 12px rgba(0,0,0,.06); }
.lp-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; height: 64px; display: flex; align-items: center; gap: 40px; }
.lp-logo { display: flex; align-items: center; gap: 10px; }
.lp-logo-icon { width: 34px; height: 34px; background: linear-gradient(135deg, var(--brand-mid), var(--purple)); border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(99,102,241,.3); }
.lp-logo-text { font-weight: 800; font-size: var(--text-base); letter-spacing: 2.5px; color: var(--n-900); }
.lp-nav-links { display: flex; gap: 4px; margin-left: 20px; flex: 1; }
.lp-nav-links a { font-size: var(--text-sm); font-weight: 500; color: var(--n-600); transition: color .2s, background .2s; padding: 6px 12px; border-radius: 7px; }
.lp-nav-links a:hover { color: var(--n-800); background: var(--n-100); }
.lp-btn-cta { background: linear-gradient(135deg, var(--brand-mid), var(--purple)); color: var(--n-0); border: none; padding: 8px 20px; border-radius: 8px; font-size: var(--text-sm); font-weight: 700; cursor: pointer; transition: opacity .2s, transform .15s; white-space: nowrap; box-shadow: 0 2px 12px rgba(99,102,241,.35); }
.lp-btn-cta:hover { opacity: .9; transform: translateY(-1px); }

/* ─── LP Hero ─────────────────────────────────────────────────────────── */
#landing-page { background: var(--n-0); color: var(--n-800); }
.lp-hero-wrap { background: var(--n-50); border-bottom: 1px solid var(--n-200); }
.lp-hero { display: flex; align-items: center; justify-content: center; gap: 40px; padding: 100px 32px 64px; max-width: 1200px; margin: 0 auto; position: relative; }
.lp-hero-glow { display: none; }
.lp-hero-inner { flex: 1; min-width: 0; max-width: 560px; }
.lp-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-2xs); font-weight: 700; letter-spacing: 1.5px; color: var(--brand-mid); margin-bottom: 16px; text-transform: uppercase; background: var(--brand-light); border: 1px solid var(--brand-muted); border-radius: 20px; padding: 5px 14px; }
.lp-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-mid); flex-shrink: 0; animation: lp-pulse 2s infinite; }
@keyframes lp-pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }
.lp-hero-h1 { font-size: 44px; line-height: 1.08; font-weight: 800; color: var(--n-900); margin-bottom: 18px; letter-spacing: -.02em; }
.lp-gradient-text { background: linear-gradient(135deg, var(--brand-mid), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lp-hero-sub { font-size: 16px; color: var(--n-600); line-height: 1.65; margin-bottom: 28px; }
.lp-hero-actions { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.lp-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--brand-mid), var(--purple)); color: var(--n-0); border: none; padding: 13px 26px; border-radius: 10px; font-size: var(--text-md); font-weight: 600; cursor: pointer; transition: opacity .2s, transform .15s, box-shadow .2s; box-shadow: 0 4px 20px rgba(99,102,241,.3); }
.lp-btn-primary:hover { opacity: .92; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(99,102,241,.4); }
.lp-btn-lg { padding: 15px 30px; font-size: 16px; }
.lp-btn-ghost { font-size: var(--text-base); font-weight: 500; color: var(--n-600); border: 1px solid var(--n-300); padding: 12px 20px; border-radius: 10px; transition: color .2s, border-color .2s, background .2s; background: var(--n-0); }
.lp-btn-ghost:hover { color: var(--n-800); border-color: var(--n-400); background: var(--n-100); }
.lp-hero-trust { font-size: var(--text-xs); color: var(--n-400); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lp-trust-sep { color: var(--n-300); }

/* ─── App Mockup ──────────────────────────────────────────────────────── */
.lp-hero-mockup { flex: 1; min-width: 0; max-width: 560px; }
.lp-mockup-chrome { background: var(--n-800); border-radius: 12px 12px 0 0; padding: 10px 16px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.08); border-bottom: none; }
.lp-chrome-dots { display: flex; gap: 6px; }
.lp-dot { width: 10px; height: 10px; border-radius: 50%; }
.lp-dot-red { background: var(--danger); } .lp-dot-amber { background: var(--amber); } .lp-dot-green { background: #22c55e; }
.lp-chrome-url { font-size: var(--text-2xs); color: var(--n-600); background: var(--n-900); padding: 3px 12px; border-radius: 4px; flex: 1; }
.lp-mockup-body { background: var(--n-0); border-radius: 0 0 12px 12px; overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.08); display: flex; }
/* ─── Mockup sidebar ──────────────────────────────────────────────────── */
.lp-mock-sidebar { width: 44px; background: var(--n-900); padding: 10px 6px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.lp-mock-slogo { width: 28px; height: 28px; border-radius: 8px; background: var(--brand-mid); margin-bottom: 4px; }
.lp-mock-sicon { width: 28px; height: 28px; border-radius: 8px; background: var(--n-800); }
.lp-mock-active { background: var(--brand-mid) !important; }

/* ─── Mockup main ─────────────────────────────────────────────────────── */
.lp-mock-main { flex: 1; min-width: 0; background: var(--n-100); display: flex; flex-direction: column; gap: 0; overflow: hidden; }

/* ─── Dark hero band ──────────────────────────────────────────────────── */
.lp-mock-hero-band { background: linear-gradient(135deg, var(--n-900) 0%, var(--n-800) 60%, var(--brand-depth) 100%); padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; }
.lp-mock-hero-left { display: flex; flex-direction: column; gap: 4px; }
.lp-mock-hero-eyebrow { height: 7px; width: 70px; background: var(--brand-mid); opacity: .6; border-radius: 3px; }
.lp-mock-hero-title { height: 13px; width: 140px; background: var(--n-50); border-radius: 3px; }
.lp-mock-hero-sub { height: 8px; width: 100px; background: var(--n-700); border-radius: 3px; }
.lp-mock-hero-right { }
.lp-mock-rag { display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px; }
.lp-mock-rag-amber { background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.3); }
.lp-mock-rag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.lp-mock-rag-lbl { font-size: 9px; font-weight: 700; color: var(--amber); letter-spacing: .8px; }

/* ─── Metric tiles ────────────────────────────────────────────────────── */
.lp-mock-metrics { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; padding: 8px 10px 6px; }
.lp-mock-tile { background: var(--n-0); border-radius: 8px; padding: 8px 8px 6px; border: 1px solid var(--n-200); text-align: center; border-top: 3px solid transparent; }
.lp-mock-tile-val { font-size: 16px; font-weight: 800; line-height: 1; margin-bottom: 3px; }
.lp-mock-tile-lbl { font-size: 8px; color: var(--n-500); }
.lp-mock-tile-brand { border-top-color: var(--brand-mid); } .lp-mock-tile-brand .lp-mock-tile-val { color: var(--brand-mid); }
.lp-mock-tile-green { border-top-color: #22c55e; } .lp-mock-tile-green .lp-mock-tile-val { color: var(--success); }
.lp-mock-tile-blue { border-top-color: #60a5fa; } .lp-mock-tile-blue .lp-mock-tile-val { color: #2563eb; }
.lp-mock-tile-slate { border-top-color: var(--n-400); } .lp-mock-tile-slate .lp-mock-tile-val { color: var(--n-600); }
.lp-mock-tile-amber { border-top-color: var(--amber); } .lp-mock-tile-amber .lp-mock-tile-val { color: var(--warning); }

/* ─── Chart row ───────────────────────────────────────────────────────── */
.lp-mock-chart-row { display: flex; gap: 6px; padding: 0 10px 6px; }
.lp-mock-chart-card { background: var(--n-0); border-radius: 8px; border: 1px solid var(--n-200); padding: 8px 10px; }
.lp-mock-chart-card-grow { flex: 1; }
.lp-mock-chart-hdr { margin-bottom: 8px; }
.lp-mock-chart-title { height: 9px; width: 80px; background: var(--n-200); border-radius: 3px; }
.lp-mock-donut-wrap { display: flex; align-items: center; gap: 10px; }
.lp-mock-legend { display: flex; flex-direction: column; gap: 4px; }
.lp-mock-leg-item { display: flex; align-items: center; gap: 4px; font-size: 8px; color: var(--n-500); }
.lp-mock-leg-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.lp-mock-leg-brand { background: var(--brand-mid); }
.lp-mock-leg-blue { background: #60a5fa; }
.lp-mock-leg-slate { background: var(--n-300); }
.lp-mock-hbars { display: flex; flex-direction: column; gap: 6px; }
.lp-mock-hbar-row { display: flex; align-items: center; gap: 6px; }
.lp-mock-hbar-lbl { font-size: 8px; color: var(--n-600); width: 64px; flex-shrink: 0; }
.lp-mock-hbar-track { flex: 1; height: 5px; background: var(--n-200); border-radius: 3px; overflow: hidden; }
.lp-mock-hbar-fill { height: 100%; background: linear-gradient(90deg, var(--brand-mid), var(--purple)); border-radius: 3px; }
.lp-mock-hbar-pct { font-size: 8px; font-weight: 600; color: var(--brand-mid); width: 22px; text-align: right; }

/* ─── Controls table ──────────────────────────────────────────────────── */
.lp-mock-table { background: var(--n-0); border-radius: 8px; border: 1px solid var(--n-200); overflow: hidden; margin: 0 10px 10px; }
.lp-mock-th-row { display: grid; grid-template-columns: 72px 1fr 80px 28px; background: var(--hero-bg); border-bottom: 1px solid rgba(255,255,255,.08); padding: 5px 10px; gap: 8px; }
.lp-mock-th { height: 8px; background: var(--n-200); border-radius: 2px; }
.lp-mock-tr { display: grid; grid-template-columns: 72px 1fr 80px 28px; padding: 7px 10px; gap: 8px; align-items: center; border-bottom: 1px solid var(--n-100); font-size: var(--text-2xs); }
.lp-mock-tr:last-child { border-bottom: none; }
.lp-mock-tr-complete { background: var(--brand-light); }
.lp-mock-tr-flagged { background: var(--amber-light); }
.lp-mock-td-id { font-size: 10px; font-weight: 600; color: var(--brand-mid); }
.lp-mock-td-name { height: 8px; background: var(--n-200); border-radius: 3px; align-self: center; }
.lp-mock-status { font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 4px; text-align: center; white-space: nowrap; }
.lp-status-complete { background: var(--brand-tint); color: var(--brand-hover); }
.lp-status-inc { background: var(--brand-light); color: var(--brand-active); }
.lp-status-nc { background: var(--n-100); color: var(--n-500); }
.lp-mock-td-ev { font-size: var(--text-xs); text-align: center; color: var(--n-400); }
.lp-col-indigo { background: var(--brand-tint); } .lp-col-green { background: var(--brand-soft); } .lp-col-amber { background: var(--warning-light); } .lp-col-blue { background: var(--brand-light); }
.lp-mock-badge { height: 20px; width: 56px; border-radius: 10px; }
.lp-mock-badge-green { background: var(--brand-tint); }

/* ─── Stats strip ─────────────────────────────────────────────────────── */
.lp-stats-strip { background: var(--n-100); border-top: 1px solid var(--n-200); border-bottom: 1px solid var(--n-200); }
.lp-stats-inner { max-width: 1200px; margin: 0 auto; padding: 32px; display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; }
.lp-stat-item { display: flex; flex-direction: column; align-items: center; padding: 0 48px; }
.lp-stat-num { font-size: 36px; font-weight: 800; color: var(--n-900); line-height: 1; }
.lp-stat-label { font-size: var(--text-sm); color: var(--n-500); margin-top: 4px; text-align: center; }
.lp-stat-div { width: 1px; height: 48px; background: rgba(255,255,255,.08); }

/* ─── Section shared ──────────────────────────────────────────────────── */
.lp-section-inner { max-width: 1200px; margin: 0 auto; padding: 36px 32px; }
.lp-features, .lp-frameworks, .lp-workflow, .lp-customers, .lp-deployment,
.lp-pain, .lp-tabs-section, .lp-testimonials, .lp-demo-cta,
.lp-how { scroll-margin-top: 64px; }
.lp-section-label { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; color: var(--brand-mid); margin-bottom: 8px; }
.lp-section-h2 { font-size: 30px; font-weight: 800; line-height: 1.15; margin-bottom: 12px; }
.lp-section-sub { font-size: var(--text-base); color: var(--n-500); max-width: 600px; margin-bottom: 24px; line-height: 1.6; }

/* ─── Features ────────────────────────────────────────────────────────── */
.lp-features { background: var(--n-0); }
.lp-features .lp-section-h2 { color: var(--n-800); }
.lp-features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.lp-feat-card { background: var(--n-50); border: 1px solid var(--n-200); border-radius: 12px; padding: 18px; transition: box-shadow .2s, border-color .2s, transform .2s; }
.lp-feat-card:hover { border-color: var(--brand-muted); box-shadow: 0 8px 32px rgba(99,102,241,.08); transform: translateY(-2px); }
.lp-feat-wide { grid-column: span 2; }
.lp-feat-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.lp-feat-icon-indigo { background: var(--brand-tint); color: var(--brand); }
.lp-feat-icon-green  { background: var(--brand-light); color: var(--brand); }
.lp-feat-icon-blue   { background: var(--brand-light); color: var(--brand-hover); }
.lp-feat-icon-amber  { background: var(--warning-light); color: #a16207; }
.lp-feat-icon-purple { background: var(--brand-soft); color: var(--purple); }
.lp-feat-icon-rose   { background: #ffe4e6; color: #be123c; }
.lp-feat-icon-cyan   { background: #cffafe; color: #0e7490; }
.lp-feat-icon-slate  { background: var(--n-100); color: var(--n-600); }
.lp-feat-card h3 { font-size: var(--text-base); font-weight: 700; color: var(--n-800); margin-bottom: 6px; }
.lp-feat-card p { font-size: var(--text-sm); color: var(--n-500); line-height: 1.55; }
.lp-feat-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.lp-feat-badges span { font-size: var(--text-2xs); font-weight: 600; background: var(--brand-tint); color: var(--brand-hover); padding: 3px 9px; border-radius: 6px; }

/* ─── Frameworks ──────────────────────────────────────────────────────── */
.lp-frameworks { background: var(--n-900); }
.lp-frameworks .lp-section-h2 { color: var(--n-50); }
.lp-frameworks .lp-section-label { color: var(--brand-400); }
.lp-frameworks .lp-section-sub { color: var(--n-600); }
.lp-fw-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-fw-pill { font-size: var(--text-sm); font-weight: 600; padding: 8px 16px; border-radius: 30px; border: 1px solid; }
.lp-fw-au     { background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.3); color: var(--brand-pale); }
.lp-fw-iso    { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.25); color: var(--success-border); }
.lp-fw-nist   { background: rgba(99,102,241,.08); border-color: rgba(99,102,241,.25); color: var(--brand-muted); }
.lp-fw-us     { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.25); color: var(--amber-border); }
.lp-fw-uk     { background: rgba(139,92,246,.08); border-color: rgba(139,92,246,.25); color: #c4b5fd; }
.lp-fw-custom { background: rgba(100,116,139,.1); border-color: rgba(100,116,139,.3); color: var(--n-400); font-style: italic; }

/* ─── Workflow ────────────────────────────────────────────────────────── */
.lp-workflow { background: var(--n-0); }
.lp-workflow .lp-section-h2 { color: var(--n-800); }
.lp-steps { display: flex; align-items: flex-start; gap: 0; }
.lp-step { flex: 1; background: var(--n-50); border: 1px solid var(--n-200); border-radius: 16px; padding: 28px; transition: border-color .2s, box-shadow .2s; }
.lp-step:hover { border-color: var(--brand-mid); box-shadow: 0 4px 20px rgba(99,102,241,.1); }
.lp-step-num { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--brand-mid), var(--purple)); color: var(--n-0); font-weight: 700; font-size: var(--text-md); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.lp-step-body h4 { font-size: var(--text-md); font-weight: 700; color: var(--n-800); margin-bottom: 8px; }
.lp-step-body p { font-size: var(--text-sm); color: var(--n-500); line-height: 1.55; }
.lp-step-arrow { font-size: 20px; color: var(--n-300); padding: 0 12px; margin-top: 40px; flex-shrink: 0; }

/* ─── CTA ─────────────────────────────────────────────────────────────── */
.lp-cta { background: linear-gradient(135deg, var(--brand-depth) 0%, var(--n-800) 50%, var(--n-900) 100%); border-top: 1px solid rgba(255,255,255,.06); }
.lp-cta-inner { max-width: 680px; margin: 0 auto; padding: 36px 32px; text-align: center; }
.lp-cta h2 { font-size: 28px; font-weight: 800; color: var(--n-50); margin-bottom: 12px; }
.lp-cta p { font-size: 16px; color: var(--n-500); margin-bottom: 32px; line-height: 1.6; }

/* ─── Customer Segments ───────────────────────────────────────────────── */
.lp-customers {
  background: linear-gradient(160deg, var(--n-900) 0%, var(--brand-depth) 50%, var(--n-900) 100%);
}
.lp-customers .lp-section-h2 { color: var(--n-50); }
.lp-customers .lp-section-label { color: var(--brand-400); }
.lp-customers .lp-section-sub { color: var(--n-400); max-width: 680px; }
.lp-customers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.lp-cust-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 26px 24px 22px;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 0;
}
.lp-cust-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 16px 16px 0 0;
}
.lp-cust-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.15);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,.3);
}

/* Accent top bar per segment */
.lp-cust-natsec::before  { background: linear-gradient(90deg, var(--purple), var(--purple-light)); }
.lp-cust-federal::before { background: linear-gradient(90deg, var(--brand-mid), var(--brand-400)); }
.lp-cust-defence::before { background: linear-gradient(90deg, var(--danger), var(--danger)); }
.lp-cust-private::before { background: linear-gradient(90deg, var(--brand), var(--brand-400)); }
.lp-cust-mssp::before    { background: linear-gradient(90deg, var(--warning), var(--amber-border)); }
.lp-cust-cloud::before   { background: linear-gradient(90deg, #0284c7, #38bdf8); }

.lp-cust-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; flex-shrink: 0;
}
.lp-cust-natsec  .lp-cust-icon { background: rgba(124,58,237,.15); color: var(--purple-light); }
.lp-cust-federal .lp-cust-icon { background: rgba(99,102,241,.15); color: var(--brand-400); }
.lp-cust-defence .lp-cust-icon { background: rgba(220,38,38,.15); color: var(--danger-border); }
.lp-cust-private .lp-cust-icon { background: rgba(79,70,229,.15); color: var(--brand-400); }
.lp-cust-mssp    .lp-cust-icon { background: rgba(217,119,6,.15); color: var(--amber-border); }
.lp-cust-cloud   .lp-cust-icon { background: rgba(2,132,199,.15); color: #38bdf8; }

.lp-cust-flag { position: absolute; top: 20px; right: 20px; font-size: 22px; opacity: .25; }
.lp-cust-card h3 { font-size: var(--text-md); font-weight: 700; color: var(--n-100); margin-bottom: 8px; line-height: 1.3; }
.lp-cust-card p { font-size: 12.5px; color: var(--n-400); line-height: 1.6; margin-bottom: 16px; flex: 1; }
.lp-cust-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.lp-cust-tags span {
  font-size: 9px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: var(--n-400); letter-spacing: .5px; text-transform: uppercase;
}

/* ─── Framework Groups ────────────────────────────────────────────────── */
.lp-fw-groups { display: flex; flex-direction: column; gap: 14px; }
.lp-fw-group { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; overflow: hidden; }
.lp-fw-group-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; font-size: var(--text-xs); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.lp-fw-group-flag { font-size: 18px; }
.lp-fw-group-au   { background: rgba(99,102,241,.12); color: var(--brand-pale); }
.lp-fw-group-intl { background: rgba(34,197,94,.08); color: var(--success-border); }
.lp-fw-group-us   { background: rgba(245,158,11,.08); color: var(--amber-border); }
.lp-fw-group-uk   { background: rgba(139,92,246,.08); color: #c4b5fd; }
.lp-fw-group-cards { display: flex; flex-wrap: wrap; gap: 0; }
.lp-fw-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; flex: 1 1 200px; min-width: 180px;
  border-right: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .15s;
}
.lp-fw-card:hover { background: rgba(255,255,255,.04); }
.lp-fw-card:last-child { border-right: none; }
.lp-fw-card-logo {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-2xs); font-weight: 800; letter-spacing: .5px;
}
.lp-fw-card-body { display: flex; flex-direction: column; gap: 3px; }
.lp-fw-card-body strong { font-size: var(--text-sm); font-weight: 700; color: var(--n-200); }
.lp-fw-card-body span { font-size: var(--text-2xs); color: var(--n-500); }
.lp-fw-logo-asd    { background: rgba(99,102,241,.2); color: var(--brand-pale); }
.lp-fw-logo-e8     { background: rgba(99,102,241,.15); color: var(--brand-400); }
.lp-fw-logo-disp   { background: rgba(139,92,246,.15); color: #c4b5fd; }
.lp-fw-logo-iso    { background: rgba(34,197,94,.12); color: var(--success-border); }
.lp-fw-logo-nist   { background: rgba(99,102,241,.12); color: var(--brand-muted); }
.lp-fw-logo-800    { background: rgba(99,102,241,.08); color: var(--brand-pale); }
.lp-fw-logo-fedramp { background: rgba(245,158,11,.12); color: var(--amber-border); }
.lp-fw-logo-cmmc   { background: rgba(245,158,11,.08); color: var(--amber-border); }
.lp-fw-logo-soc2   { background: rgba(245,158,11,.06); color: var(--amber); }
.lp-fw-logo-pci    { background: rgba(239,68,68,.1); color: var(--danger-border); }
.lp-fw-logo-ce     { background: rgba(139,92,246,.12); color: #c4b5fd; }
.lp-fw-logo-caf    { background: rgba(139,92,246,.08); color: var(--purple-light); }
.lp-fw-logo-custom { background: rgba(100,116,139,.12); color: var(--n-400); font-size: 18px; font-weight: 400; }
.lp-fw-card-custom .lp-fw-card-body strong { font-style: italic; color: var(--n-400); }

/* ─── Problem + Impact section ───────────────────────────────────────── */
.lp-pain { background: var(--brand-light); }
.lp-pain .lp-section-h2 { color: var(--n-900); }
.lp-pain .lp-section-label { color: var(--brand-mid); }
.lp-pain .lp-section-sub { color: var(--n-600); }

.lp-pain-header { text-align: center; margin-bottom: 28px; }
.lp-pain-header .lp-section-sub { margin: 0 auto 0; }

/* Three uniform cards */
.lp-pain-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px;
}
.lp-pain-card {
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: 14px;
  display: flex; flex-direction: column; overflow: hidden;
}
.lp-pain-card-problem {
  padding: 22px 20px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.lp-pain-card-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--danger-light); color: var(--danger);
}
.lp-pain-card-title { font-size: var(--text-md); font-weight: 700; color: var(--n-900); line-height: 1.3; }
.lp-pain-card-desc { font-size: var(--text-sm); color: var(--n-600); line-height: 1.6; margin: 0; }
.lp-pain-card-fix {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 20px; border-top: 1px solid var(--n-200);
  font-size: var(--text-xs); font-weight: 600; color: var(--brand-hover);
  background: rgba(99,102,241,.04);
}
.lp-pain-card-fix svg { color: var(--brand-mid); flex-shrink: 0; }

/* Impact strip */
.lp-pain-impact {
  background: linear-gradient(100deg, var(--brand-depth) 0%, var(--n-800) 60%, var(--n-900) 100%);
  border-radius: 16px; padding: 28px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.lp-pain-impact-label {
  font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--brand-400);
}
.lp-pain-impact-stats {
  display: flex; align-items: center; gap: 0; width: 100%;
  justify-content: center;
}
.lp-pistat {
  flex: 1; text-align: center; padding: 8px 16px;
}
.lp-pistat-divider {
  width: 1px; height: 48px; background: rgba(255,255,255,.1); flex-shrink: 0;
}
.lp-pistat-num {
  font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--brand-400), var(--purple-light));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.lp-pistat-featured .lp-pistat-num {
  background: linear-gradient(135deg, #34d399, #60a5fa);
  -webkit-background-clip: text; background-clip: text;
}
.lp-pistat-label { font-size: var(--text-sm); color: var(--n-400); margin-top: 4px; }
.lp-pain-impact-sub { font-size: var(--text-xs); color: var(--n-600); margin: 0; }

/* ─── Deployment Models ───────────────────────────────────────────────── */
.lp-deployment { background: var(--n-0); }

/* Dark hero band */
.lp-deploy-hero {
  background: linear-gradient(135deg, var(--n-900) 0%, var(--brand-depth) 45%, var(--n-800) 100%);
  padding: 56px 32px 52px;
}
.lp-deploy-hero-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.lp-deploy-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: var(--brand-400); margin-bottom: 16px;
}
.lp-deploy-h2 {
  font-size: 38px; font-weight: 900; line-height: 1.1; letter-spacing: -.03em;
  color: var(--n-50); margin: 0 0 16px;
}
.lp-deploy-sub {
  font-size: 16px; color: var(--n-400); line-height: 1.65; margin: 0 0 28px; max-width: 640px; margin-left: auto; margin-right: auto;
}
.lp-deploy-trust {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.lp-deploy-trust-item {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: 600; color: var(--brand-pale);
}
.lp-deploy-trust-item svg { color: #34d399; flex-shrink: 0; }
.lp-deploy-trust-sep {
  width: 1px; height: 14px; background: rgba(255,255,255,.15); flex-shrink: 0;
}

/* Cards row */
.lp-deploy-cards-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; transform: translateY(-28px); }
.lp-deploy-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.lp-dcard {
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: 16px;
  padding: 22px 20px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.lp-dcard:hover {
  box-shadow: 0 8px 28px rgba(99,102,241,.12);
  border-color: var(--brand-muted); transform: translateY(-3px);
}
.lp-dcard-featured {
  background: linear-gradient(160deg, var(--brand-depth) 0%, var(--n-800) 100%);
  border-color: rgba(99,102,241,.4);
  box-shadow: 0 8px 32px rgba(99,102,241,.22);
}
.lp-dcard-featured:hover { transform: translateY(-4px); box-shadow: 0 14px 42px rgba(99,102,241,.28); }

.lp-dcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lp-dcard-icon {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-light); color: var(--brand-mid);
}
.lp-dcard-featured .lp-dcard-icon {
  background: rgba(99,102,241,.2); color: var(--brand-pale);
}
.lp-dcard-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 20px;
  background: linear-gradient(135deg, var(--brand-mid), var(--purple));
  color: var(--n-0); white-space: nowrap;
}

.lp-dcard-title {
  font-size: var(--text-md); font-weight: 800; color: var(--n-900); line-height: 1.25;
}
.lp-dcard-featured .lp-dcard-title { color: var(--n-100); }

.lp-dcard-desc {
  font-size: 12.5px; color: var(--n-600); line-height: 1.65; margin: 0; flex: 1;
}
.lp-dcard-featured .lp-dcard-desc { color: var(--n-400); }

.lp-dcard-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.lp-dcard-list li {
  font-size: var(--text-xs); color: var(--n-500); display: flex; align-items: center; gap: 8px; line-height: 1.3;
}
.lp-dcard-list li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-mid); flex-shrink: 0;
}
.lp-dcard-featured .lp-dcard-list li { color: var(--n-400); }
.lp-dcard-featured .lp-dcard-list li::before { background: var(--brand-400); }

.lp-dcard-env {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 4px;
  border-top: 1px solid var(--n-100);
}
.lp-dcard-featured .lp-dcard-env { border-top-color: rgba(255,255,255,.07); }
.lp-dcard-env span {
  font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px;
  background: var(--brand-light); color: var(--brand-hover);
  border: 1px solid var(--brand-muted);
}
.lp-dcard-featured .lp-dcard-env span {
  background: rgba(99,102,241,.12); color: var(--brand-pale); border-color: rgba(99,102,241,.25);
}

/* Proof bar */
.lp-deploy-proof {
  background: var(--n-50); border-top: 1px solid var(--n-200);
  padding: 0;
}
.lp-deploy-proof-inner {
  max-width: 1200px; margin: 0 auto; padding: 20px 32px;
  display: flex; align-items: center; gap: 0;
}
.lp-deploy-proof-item {
  flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 20px;
}
.lp-deploy-proof-item:first-child { padding-left: 0; }
.lp-deploy-proof-item:last-child { padding-right: 0; }
.lp-deploy-proof-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-light); color: var(--brand-mid);
}
.lp-deploy-proof-label { font-size: var(--text-xs); font-weight: 700; color: var(--n-900); line-height: 1.2; }
.lp-deploy-proof-val { font-size: var(--text-2xs); color: var(--n-500); margin-top: 2px; }
.lp-deploy-proof-div {
  width: 1px; height: 40px; background: var(--n-200); flex-shrink: 0;
}

/* ─── LP Footer ───────────────────────────────────────────────────────── */
.lp-footer { background: var(--n-900); border-top: 1px solid rgba(255,255,255,.06); }
.lp-footer-inner { max-width: 1200px; margin: 0 auto; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; }
.lp-footer p { font-size: var(--text-sm); color: var(--n-700); }
.lp-footer-left { display: flex; flex-direction: column; gap: 6px; }
.lp-footer-left p { font-size: var(--text-sm); color: var(--n-700); margin: 0; }
.lp-footer-right { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lp-footer-badge {
  font-size: var(--text-2xs); font-weight: 600; padding: 4px 10px; border-radius: 6px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: var(--n-500);
}

/* ─── Nav actions ─────────────────────────────────────────────────────── */
.lp-nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lp-btn-sm { font-size: var(--text-sm); font-weight: 500; color: var(--n-600); border: 1px solid var(--n-300); padding: 7px 16px; border-radius: 8px; transition: color .2s, border-color .2s, background .2s; white-space: nowrap; background: transparent; }
.lp-btn-sm:hover { color: var(--n-800); border-color: var(--n-400); background: var(--n-100); }
.lp-btn-signin { font-size: var(--text-sm); font-weight: 600; color: var(--brand-mid); background: var(--brand-light); border: 1px solid var(--brand-muted); padding: 7px 18px; border-radius: 8px; cursor: pointer; transition: background .2s, border-color .2s; white-space: nowrap; }
.lp-btn-signin:hover { background: var(--brand-tint); border-color: var(--brand-pale); }

/* ─── Hero chips ──────────────────────────────────────────────────────── */
.lp-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; }
.lp-hero-chip { font-size: var(--text-xs); font-weight: 700; padding: 6px 14px; border-radius: 20px; border: 1px solid; letter-spacing: .3px; }
.lp-chip-green  { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.lp-chip-indigo { background: var(--brand-light); border-color: var(--brand-muted); color: var(--brand-mid); }
.lp-chip-amber  { background: var(--amber-light); border-color: var(--warning-border); color: #a16207; }

/* ─── Social proof bar ────────────────────────────────────────────────── */
.lp-social-bar { background: var(--n-50); border-top: 1px solid var(--n-200); border-bottom: 1px solid var(--n-200); }
.lp-social-inner { max-width: 1200px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.lp-social-label { font-size: var(--text-xs); font-weight: 600; color: var(--n-400); letter-spacing: .5px; white-space: nowrap; text-transform: uppercase; }
.lp-social-logos { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-social-badge { font-size: var(--text-xs); font-weight: 500; padding: 5px 12px; border-radius: 20px; background: var(--n-0); border: 1px solid var(--n-200); color: var(--n-600); }


/* ─── Metrics strip ───────────────────────────────────────────────────── */
.lp-metrics { background: var(--n-900); }
.lp-metrics .lp-section-label { color: var(--brand-400); }
.lp-metrics-h2 { color: var(--n-50); font-size: 28px; font-weight: 800; line-height: 1.15; margin-bottom: 20px; }
.lp-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-metric-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 18px 20px; transition: border-color .2s; }
.lp-metric-card:hover { border-color: rgba(99,102,241,.4); }
.lp-metric-featured { background: rgba(99,102,241,.08); border-color: rgba(99,102,241,.3); box-shadow: 0 0 0 1px rgba(99,102,241,.2); }
.lp-metric-num { font-size: 38px; font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--brand-400), var(--purple-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; }
.lp-metric-featured .lp-metric-num { background: linear-gradient(135deg, #34d399, #60a5fa); -webkit-background-clip: text; background-clip: text; }
.lp-metric-label { font-size: var(--text-md); font-weight: 600; color: var(--n-200); margin-bottom: 10px; line-height: 1.35; }
.lp-metric-desc { font-size: var(--text-sm); color: var(--n-500); line-height: 1.6; }

/* ─── How it works ────────────────────────────────────────────────────── */
.lp-how { background: #f8faff; }
.lp-how .lp-section-h2 { color: var(--n-900); }
.lp-how .lp-section-label { color: var(--brand-mid); }
.lp-how .lp-section-sub { color: var(--n-600); }
.lp-how-step-label { font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--brand-muted); margin-bottom: 10px; }
.lp-how-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--brand-light); color: var(--brand-mid); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; flex-shrink: 0; }

/* ─── Platform feature tabs ───────────────────────────────────────────── */
.lp-tabs-section { background: var(--brand-light); }
.lp-tabs-section .lp-section-h2 { color: var(--n-800); }
.lp-tabs-nav { display: flex; gap: 4px; background: rgba(99,102,241,.08); border: 1px solid var(--brand-muted); border-radius: 12px; padding: 4px; margin-bottom: 28px; width: fit-content; flex-wrap: wrap; }
.lp-tab-btn { padding: 9px 22px; border-radius: 9px; font-size: var(--text-sm); font-weight: 600; color: var(--n-500); background: transparent; border: none; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap; }
.lp-tab-btn:hover { color: var(--brand-hover); background: rgba(255,255,255,.6); }
.lp-tab-btn.active { background: var(--brand-mid); color: var(--n-0); box-shadow: 0 2px 10px rgba(99,102,241,.35); }
.lp-tabs-content { }
.lp-tab-pane { display: none; align-items: center; gap: 40px; }
.lp-tab-pane.active { display: flex; }
.lp-tab-text { flex: 1; min-width: 0; }
.lp-tab-text h3 { font-size: 20px; font-weight: 800; color: var(--n-900); margin-bottom: 12px; }
.lp-tab-text p { font-size: var(--text-base); color: var(--n-600); line-height: 1.65; margin-bottom: 22px; }
.lp-tab-points { display: flex; flex-direction: column; gap: 10px; }
.lp-tab-point { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-base); color: var(--n-800); }
.lp-tab-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-light); color: var(--brand-mid); font-size: var(--text-2xs); font-weight: 900; flex-shrink: 0; }
.lp-tab-visual { flex: 1.2; min-width: 0; }
.lp-tab-mock { background: var(--n-0); border: 1px solid var(--n-200); border-radius: 14px; box-shadow: 0 8px 40px rgba(0,0,0,.1); overflow: hidden; font-size: var(--text-xs); }

/* Controls tab mock */
.lp-tm-header { padding: 12px 16px; background: var(--hero-bg); border-bottom: 1px solid rgba(255,255,255,.08); }
.lp-tm-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.lp-tm-label { font-size: var(--text-xs); font-weight: 700; color: var(--hero-text); }
.lp-tm-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.lp-tm-badge-blue { background: var(--brand-light); color: var(--brand-hover); }
.lp-tm-badge-red  { background: var(--danger-light); color: var(--danger-dark); }
.lp-tm-filter-row { display: flex; gap: 6px; }
.lp-tm-filter { font-size: var(--text-2xs); padding: 3px 8px; background: var(--n-0); border: 1px solid var(--n-200); border-radius: 5px; color: var(--n-500); }
.lp-tm-search { flex: 1; height: 22px; background: var(--n-0); border: 1px solid var(--n-200); border-radius: 5px; }
.lp-tm-table { }
.lp-tm-tr { display: grid; grid-template-columns: 80px 1fr 90px 90px; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--n-100); align-items: center; }
.lp-tm-tr-h { background: var(--n-50); }
.lp-tm-tr-h .lp-tm-td { font-size: 10px; font-weight: 700; color: var(--n-400); text-transform: uppercase; letter-spacing: .5px; }
.lp-tm-complete { background: var(--brand-light); }
.lp-tm-expanded { background: var(--brand-light); }
.lp-tm-id-txt { font-size: var(--text-2xs); font-weight: 600; color: var(--brand-mid); font-family: monospace; }
.lp-active-id { color: var(--brand-hover); }
.lp-tm-name-bar { height: 8px; background: var(--n-200); border-radius: 3px; }
.lp-tm-chip { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.lp-tm-chip-green  { background: var(--brand-tint); color: var(--brand-hover); }
.lp-tm-chip-amber  { background: var(--warning-light); color: var(--warning-dark); }
.lp-tm-chip-red    { background: var(--danger-light); color: var(--danger-dark); }
.lp-tm-chip-blue   { background: var(--brand-light); color: var(--brand-hover); }
.lp-tm-chip-grey   { background: var(--n-100); color: var(--n-500); }
.lp-tm-inline-panel { background: var(--purple-light); border-bottom: 1px solid var(--n-200); padding: 10px 16px; }
.lp-tm-il-tabs { display: flex; gap: 0; margin-bottom: 10px; }
.lp-tm-il-tab { font-size: var(--text-2xs); font-weight: 600; padding: 4px 12px; border-bottom: 2px solid transparent; color: var(--n-400); cursor: pointer; }
.lp-tm-il-active { color: var(--brand-mid); border-bottom-color: var(--brand-mid); }
.lp-tm-il-body { display: flex; flex-direction: column; gap: 6px; }
.lp-tm-il-row { display: flex; align-items: center; gap: 10px; }
.lp-tm-il-label { font-size: 10px; font-weight: 600; color: var(--n-500); width: 72px; flex-shrink: 0; }
.lp-tm-il-sel { font-size: var(--text-2xs); padding: 3px 8px; background: var(--n-0); border: 1px solid var(--brand-muted); border-radius: 4px; color: var(--brand-hover); }
.lp-tm-il-input { flex: 1; height: 22px; background: var(--n-0); border: 1px solid var(--n-200); border-radius: 4px; }

/* Risk tab mock */
.lp-risk-heatmap { padding: 12px 16px; }
.lp-rhm-label-y { font-size: 10px; color: var(--n-400); margin-bottom: 6px; }
.lp-rhm-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.lp-rhm-cell { height: 28px; border-radius: 4px; position: relative; }
.lp-rhm-low  { background: var(--success-light); }
.lp-rhm-med  { background: var(--warning-light); }
.lp-rhm-high { background: var(--orange-border); }
.lp-rhm-crit { background: var(--danger-border); }
.lp-rhm-dot::after, .lp-rhm-dot2::after, .lp-rhm-dot3::after { content: '●'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 10px; }
.lp-rhm-dot::after  { color: var(--danger-dark); }
.lp-rhm-dot2::after { color: #ea580c; }
.lp-rhm-dot3::after { color: var(--purple); }
.lp-risk-list { padding: 8px 16px 12px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--n-100); }
.lp-rl-row { display: flex; align-items: center; gap: 8px; }
.lp-rl-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; width: 56px; text-align: center; flex-shrink: 0; }
.lp-rl-crit { background: var(--danger-border); color: var(--danger-dark); }
.lp-rl-high { background: var(--orange-border); color: #c2410c; }
.lp-rl-med  { background: var(--warning-light); color: #a16207; }
.lp-rl-bar  { flex: 1; height: 6px; background: var(--n-200); border-radius: 3px; overflow: hidden; }
.lp-rl-bar::after { content: ''; display: block; height: 100%; width: 80%; background: linear-gradient(90deg, var(--danger), var(--orange)); border-radius: 3px; }
.lp-rl-bar-long::after { width: 90%; }
.lp-rl-bar-med::after  { width: 40%; background: linear-gradient(90deg, var(--amber), var(--amber-border)); }
.lp-rl-stat { font-size: 10px; color: var(--n-500); width: 48px; text-align: right; flex-shrink: 0; }

/* Report tab mock */
.lp-doc-cover { padding: 16px; background: var(--n-800); color: var(--n-0); }
.lp-doc-brand { font-size: var(--text-2xs); font-weight: 800; letter-spacing: 2px; color: var(--brand-pale); margin-bottom: 2px; }
.lp-doc-class { font-size: 9px; color: var(--n-500); letter-spacing: 1px; margin-bottom: 12px; }
.lp-doc-type { font-size: 10px; color: var(--n-400); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.lp-doc-title-bar { height: 12px; background: var(--n-700); border-radius: 3px; margin-bottom: 10px; }
.lp-doc-meta-grid { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.lp-doc-meta-row { display: flex; gap: 8px; align-items: center; }
.lp-doc-meta-l { height: 7px; width: 70px; background: var(--n-700); border-radius: 2px; flex-shrink: 0; }
.lp-doc-meta-v { height: 7px; flex: 1; background: var(--n-600); border-radius: 2px; }
.lp-doc-meta-v-short { flex: 0 0 80px; }
.lp-doc-score { background: rgba(99,102,241,.2); border: 1px solid rgba(99,102,241,.3); border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 12px; }
.lp-doc-score-num { font-size: 24px; font-weight: 800; color: var(--brand-pale); }
.lp-doc-score-lbl { font-size: 10px; color: var(--n-400); line-height: 1.5; }
.lp-doc-btns { display: flex; gap: 0; border-top: 1px solid var(--n-200); }
.lp-doc-btn { flex: 1; text-align: center; padding: 8px; font-size: var(--text-xs); font-weight: 600; color: var(--n-500); cursor: pointer; border-right: 1px solid var(--n-200); }
.lp-doc-btn:last-child { border-right: none; }
.lp-doc-btn-active { color: var(--brand-mid); background: var(--brand-light); }

/* Roles tab mock */
.lp-il-tabs-mock { display: flex; gap: 0; border-bottom: 1px solid var(--n-200); padding: 0 16px; }
.lp-il-tab-m { font-size: var(--text-2xs); font-weight: 600; padding: 8px 12px; border-bottom: 2px solid transparent; color: var(--n-400); cursor: pointer; }
.lp-il-active { border-bottom-color: var(--brand-mid); color: var(--brand-mid); }
.lp-il-tab-assessor { }
.lp-il-pane-mock { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.lp-il-field-row { display: flex; align-items: center; gap: 10px; }
.lp-il-field-label { font-size: 10px; font-weight: 600; color: var(--n-500); width: 100px; flex-shrink: 0; }
.lp-il-field-val { font-size: var(--text-2xs); padding: 4px 10px; background: var(--n-50); border: 1px solid var(--n-200); border-radius: 5px; color: var(--n-750); }
.lp-il-val-amber { border-color: var(--warning-border); color: var(--warning-dark); background: #fefce8; }
.lp-il-field-input { flex: 1; height: 24px; background: var(--n-50); border: 1px solid var(--n-200); border-radius: 5px; }
.lp-il-ctx-block { background: var(--brand-light); border: 1px solid var(--brand-muted); border-radius: 8px; padding: 8px 12px; }
.lp-il-ctx-label { font-size: 10px; font-weight: 700; color: var(--brand); margin-bottom: 6px; }
.lp-il-ctx-row { display: flex; align-items: center; gap: 8px; }
.lp-il-ctx-k { font-size: 10px; color: var(--n-500); width: 110px; flex-shrink: 0; }
.lp-il-ctx-v { font-size: 10px; font-weight: 700; }
.lp-il-ctx-green { color: var(--brand); }
.lp-il-ctx-val-bar { flex: 1; height: 7px; background: var(--brand-tint); border-radius: 3px; }
.lp-il-role-badge { font-size: 10px; color: var(--brand-mid); background: var(--brand-light); border: 1px solid var(--brand-muted); border-radius: 5px; padding: 3px 8px; text-align: center; }

/* ─── Testimonials ────────────────────────────────────────────────────── */
.lp-testimonials { background: var(--n-0); }
.lp-testimonials .lp-section-h2 { color: var(--n-900); }
.lp-testi-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  margin-bottom: 48px; flex-wrap: wrap;
}
.lp-testi-rating-block { text-align: right; flex-shrink: 0; }
.lp-testi-big-stars { font-size: 22px; color: var(--amber); letter-spacing: 3px; line-height: 1; margin-bottom: 6px; }
.lp-testi-rating-text { font-size: var(--text-sm); color: var(--n-500); line-height: 1.5; }
.lp-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }

/* Borderless editorial — no card fill, vertical dividers only */
.lp-testi-card {
  background: transparent; border: none;
  border-right: 1px solid var(--n-200);
  padding: 8px 36px 8px 0;
  display: flex; flex-direction: column; gap: 16px;
}
.lp-testi-card:last-child { border-right: none; padding-right: 0; }
.lp-testi-card:not(:first-child) { padding-left: 36px; }

/* Featured: subtle brand accent top line, no fill */
.lp-testi-featured {
  border-top: 3px solid var(--brand-mid);
  padding-top: 24px;
  background: transparent;
  border-right: 1px solid var(--n-200);
}

.lp-testi-quote-mark {
  font-size: 56px; line-height: .75; font-family: Georgia, serif;
  color: var(--brand-muted); display: block; margin-bottom: -4px;
}
.lp-testi-featured .lp-testi-quote-mark { color: var(--brand-mid); }

.lp-testi-stars { color: var(--amber); font-size: var(--text-2xs); letter-spacing: 3px; }

.lp-testi-quote {
  font-size: var(--text-base); color: var(--n-800); line-height: 1.75; flex: 1;
  font-style: italic;
}
.lp-testi-featured .lp-testi-quote { color: var(--n-900); font-weight: 500; }

.lp-testi-footer {
  display: flex; align-items: center; gap: 12px; padding-top: 16px;
  border-top: 1px solid var(--n-100); margin-top: auto;
}
.lp-testi-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 700; color: var(--n-0);
}
.lp-testi-av-indigo { background: linear-gradient(135deg, var(--brand-mid), var(--purple)); }
.lp-testi-av-green  { background: linear-gradient(135deg, #10b981, #059669); }
.lp-testi-av-purple { background: linear-gradient(135deg, var(--purple), #ec4899); }
.lp-testi-name { font-size: var(--text-sm); font-weight: 700; color: var(--n-900); }
.lp-testi-featured .lp-testi-name { color: var(--n-900); }
.lp-testi-role { font-size: var(--text-xs); color: var(--n-500); margin-top: 1px; }
.lp-testi-featured .lp-testi-role { color: var(--brand-mid); }

/* ─── Promise strip ───────────────────────────────────────────────────── */
.lp-promise-strip {
  background: linear-gradient(90deg, var(--n-900) 0%, var(--brand-depth) 50%, var(--n-900) 100%);
  border-top: 1px solid rgba(99,102,241,.2);
  border-bottom: 1px solid rgba(99,102,241,.2);
}
.lp-promise-inner {
  max-width: 1200px; margin: 0 auto; padding: 22px 32px;
  display: flex; align-items: center; gap: 0; flex-wrap: wrap;
}
.lp-promise-item {
  flex: 1; display: flex; align-items: center; gap: 10px;
  font-size: var(--text-sm); font-weight: 600; color: var(--n-300);
  padding: 6px 20px; white-space: nowrap;
}
.lp-promise-item svg { color: var(--brand-400); flex-shrink: 0; }
.lp-promise-sep { width: 1px; height: 28px; background: rgba(99,102,241,.25); flex-shrink: 0; }

/* ─── Demo CTA section ────────────────────────────────────────────────── */
.lp-demo-cta { background: linear-gradient(135deg, var(--brand-depth) 0%, var(--n-800) 60%, var(--n-900) 100%); }
.lp-demo-cta .lp-section-label { color: var(--brand-400); }
.lp-demo-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.lp-demo-left h2 { font-size: 38px; font-weight: 900; color: var(--n-50); line-height: 1.2; margin-bottom: 16px; letter-spacing: -.02em; }
.lp-demo-left p { font-size: var(--text-md); color: var(--n-400); line-height: 1.65; margin-bottom: 24px; }
.lp-demo-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.lp-demo-list li { font-size: var(--text-base); color: var(--n-300); display: flex; align-items: center; gap: 10px; }
.lp-demo-list li::before { content: '✓'; color: var(--brand-mid); font-weight: 700; flex-shrink: 0; }
.lp-demo-form-card { background: var(--n-0); border-radius: 20px; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.lp-demo-form-card h3 { font-size: 20px; font-weight: 700; color: var(--n-800); margin-bottom: 4px; }
.lp-demo-form-sub { font-size: var(--text-sm); color: var(--n-500); margin-bottom: 24px; }
.lp-demo-field { margin-bottom: 14px; }
.lp-demo-field label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--n-750); margin-bottom: 5px; }
.lp-demo-input, .lp-demo-select { width: 100%; padding: 9px 12px; border: 1px solid var(--n-200); border-radius: 8px; font-size: var(--text-sm); color: var(--n-800); background: var(--n-50); box-sizing: border-box; transition: border-color .2s; outline: none; }
.lp-demo-input:focus, .lp-demo-select:focus { border-color: var(--brand-mid); background: var(--n-0); }
.lp-demo-btn { width: 100%; padding: 13px; background: linear-gradient(135deg, var(--brand-mid), var(--purple)); color: var(--n-0); border: none; border-radius: 12px; font-size: var(--text-md); font-weight: 700; cursor: pointer; margin-top: 8px; letter-spacing: .01em; transition: opacity .2s, transform .15s; }
.lp-demo-btn:hover { opacity: .92; transform: translateY(-1px); }
.lp-demo-btn:disabled { cursor: default; transform: none; }

/* ─── Footer (multi-column) ───────────────────────────────────────────── */
.lp-footer-top { flex-direction: row; align-items: flex-start; gap: 48px; padding-top: 36px; padding-bottom: 28px; }
.lp-footer-brand { flex-shrink: 0; max-width: 240px; }
.lp-footer-tagline { font-size: var(--text-sm); color: var(--n-600); margin: 6px 0 4px; }
.lp-footer-made { font-size: var(--text-xs); color: var(--n-700); margin-bottom: 14px; }
.lp-footer-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-footer-cols { display: flex; gap: 48px; flex: 1; flex-wrap: wrap; }
.lp-footer-col { display: flex; flex-direction: column; gap: 8px; min-width: 130px; }
.lp-footer-col h4 { font-size: var(--text-2xs); font-weight: 700; color: var(--n-200); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.lp-footer-col a { font-size: var(--text-sm); color: var(--n-600); transition: color .15s; }
.lp-footer-col a:hover { color: var(--n-400); }
.lp-footer-bottom-bar { max-width: 1200px; margin: 0 auto; padding: 20px 32px; border-top: 1px solid rgba(255,255,255,.06); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.lp-footer-bottom-bar span { font-size: var(--text-xs); color: var(--n-700); }
.lp-footer-legal { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--n-700); }
.lp-footer-legal a { color: var(--n-600); transition: color .15s; }
.lp-footer-legal a:hover { color: var(--n-400); }

/* ─── LP Responsive ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lp-hero { flex-direction: column; padding-top: 80px; }
  .lp-hero-inner, .lp-hero-mockup { max-width: 100%; width: 100%; }
  .lp-hero-h1 { font-size: 32px; }
  .lp-pain-cards { grid-template-columns: 1fr; }
  .lp-features-grid { grid-template-columns: 1fr; }
  .lp-feat-wide { grid-column: span 1; }
  .lp-steps { flex-direction: column; gap: 12px; }
  .lp-step-arrow { transform: rotate(90deg); margin: 0 auto; padding: 4px 0; }
  .lp-stat-item { padding: 16px 24px; }
  .lp-nav-links { display: none; }
  .lp-section-h2 { font-size: 24px; }
  .lp-customers-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-pain-grid { grid-template-columns: repeat(3, 1fr); }
  .lp-metrics-grid { grid-template-columns: repeat(3, 1fr); }
  .lp-testi-grid { grid-template-columns: repeat(3, 1fr); }
  .lp-deploy-cards { grid-template-columns: repeat(2, 1fr); }
  .lp-deploy-proof-inner { flex-wrap: wrap; gap: 16px; }
  .lp-deploy-proof-item { flex: 1 1 40%; }
  .lp-deploy-proof-div { display: none; }
  .lp-fw-group-cards { flex-direction: column; }
  .lp-fw-card { border-right: none; }
  .lp-pain-grid { grid-template-columns: 1fr; }
  .lp-metrics-grid { grid-template-columns: 1fr; }
  .lp-testi-grid { grid-template-columns: 1fr; }
  .lp-testi-card,
  .lp-testi-card:not(:first-child) { padding: 0 0 28px; border-right: none; border-bottom: 1px solid var(--n-200); }
  .lp-testi-card:last-child { border-bottom: none; padding-bottom: 0; }
  .lp-testi-featured { border-right: none; padding-top: 28px; }
  .lp-tab-pane.active { flex-direction: column; }
  .lp-demo-split { grid-template-columns: 1fr; gap: 40px; }
  .lp-footer-top { flex-direction: column; }
  .lp-footer-cols { gap: 32px; }
  .lp-tabs-nav { width: 100%; }
}
@media (max-width: 600px) {
  .lp-features-grid { grid-template-columns: 1fr; }
  .lp-feat-wide { grid-column: span 1; }
  .lp-hero-h1 { font-size: 26px; }
  .lp-stats-inner { flex-direction: column; gap: 24px; }
  .lp-stat-div { display: none; }
  .lp-footer-inner { flex-direction: column; gap: 12px; text-align: center; }
  .lp-customers-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-pain-grid { grid-template-columns: repeat(3, 1fr); }
  .lp-metrics-grid { grid-template-columns: repeat(3, 1fr); }
  .lp-testi-grid { grid-template-columns: repeat(3, 1fr); }
  .lp-footer-right { justify-content: center; }
  .lp-deploy-cards { grid-template-columns: 1fr; }
  .lp-deploy-h2 { font-size: 28px; }
  .lp-deploy-cards-wrap { transform: translateY(-16px); }
  .lp-metrics-h2 { font-size: 28px; }
  .lp-footer-bottom-bar { flex-direction: column; text-align: center; }
  .lp-footer-cols { flex-direction: column; }
}

/* ─── Legend / Guidelines shared ─────────────────────────────────────── */
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; font-size: var(--text-xs); color: var(--n-500); }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.guideline-bar { flex: 1; height: 10px; display: flex; border-radius: 6px; overflow: hidden; }
.guideline-bar > div { height: 100%; }

/* ─── Dashboard Layout ────────────────────────────────────────────────── */
.dashboard-layout { display: flex; height: 100vh; overflow: hidden; }
.right-panel { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.right-panel-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.right-panel-row  { display: flex; flex: 1; min-height: 0; overflow: hidden; }

/* ─── Primary Sidebar (220px, icon + label) ───────────────────────────── */
.sidebar {
  width: 220px;
  background: var(--hero-bg-start);
  display: flex; flex-direction: column;
  padding: 0; flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,.07);
}
.sidebar-logo {
  display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
}
.sidebar-logo .logo-icon { flex-shrink: 0; }
.sidebar-logo-text { font-size: var(--text-sm); font-weight: 700; letter-spacing: 1.5px; color: var(--n-150); }
.sidebar-nav {
  display: flex; flex-direction: column; gap: 1px; flex: 1;
  padding: 10px 8px; overflow-y: auto;
}
.sidebar-group-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: var(--n-600);
  text-transform: uppercase; padding: 10px 10px 3px; flex-shrink: 0;
}
.sidebar-link {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 6px; color: var(--hero-muted);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: background .12s, color .12s; position: relative;
  cursor: pointer; border: 1px solid transparent;
}
.sidebar-link svg { flex-shrink: 0; }
.sidebar-link-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidebar-link:hover { background: rgba(255,255,255,.05); color: var(--n-150); border-color: rgba(255,255,255,.04); }
.sidebar-link.active {
  background: rgba(var(--brand-rgb, 99,102,241), .15);
  color: var(--n-0);
  border-color: rgba(var(--brand-rgb, 99,102,241), .25);
  font-weight: 600;
}
.sidebar-link.active svg { color: var(--brand-tint, var(--brand-muted)); }
.sidebar-link-child { padding-left: 26px; font-size: 12px; opacity: .85; }
.sidebar-link-child svg { width: 13px; height: 13px; }
.adm-child-link { padding-left: 24px !important; }
.adm-child-icon { font-size: var(--text-sm); flex-shrink: 0; width: 18px; text-align: center; }
.update-dot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; background: #ec7211; border-radius: 50%; border: 1.5px solid var(--hero-bg-start); pointer-events: none; }
.sidebar-sep { width: 100%; height: 1px; background: rgba(255,255,255,.06); margin: 5px 0; }

/* ─── Sidebar search trigger ──────────────────────────────────────────── */
.sb-search-trigger {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 8px 4px;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--hero-muted); font-size: 13px; font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.sb-search-trigger:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: var(--n-150);
}
.sb-search-trigger svg { flex-shrink: 0; color: var(--n-600); }
.sb-search-trigger-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-search-kbd {
  flex-shrink: 0;
  font-size: 10px; font-weight: 700; font-family: inherit;
  background: rgba(255,255,255,.08); color: var(--n-600);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px; padding: 1px 6px; letter-spacing: .02em;
}
.sidebar-bottom {
  margin-top: auto; padding: 10px 8px 14px;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column; gap: 2px;
}
.sidebar-user { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--brand); color: var(--n-0); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 700; cursor: pointer; transition: background var(--t-fast); }
.sidebar-user:hover { background: var(--brand-hover); }

/* ─── Theme Picker ────────────────────────────────────────────────────── */
.theme-swatch {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sw); border: 2px solid transparent;
  cursor: pointer; padding: 0; transition: transform .12s, border-color .12s, box-shadow .12s;
  outline: none;
}
.theme-swatch:hover { transform: scale(1.2); }
.theme-swatch--active {
  border-color: var(--n-700); transform: scale(1.15);
  box-shadow: 0 0 0 2px var(--n-0), 0 0 0 4px var(--sw);
}

/* ─── Active Assessment Bar ───────────────────────────────────────────── */
/* .active-assess-bar replaced by .scope-bar */

/* ─── Secondary Sidebar ───────────────────────────────────────────────── */
.secondary-sidebar {
  width: 220px; flex-shrink: 0;
  background: var(--hero-bg-mid);
  border-right: 1px solid rgba(255,255,255,.07);
  overflow-y: auto; padding: 14px 0;
}
.secondary-sidebar h3 {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: #3d4f5c;
  padding: 0 14px 8px; margin: 0;
}
.sec-link {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 12px; text-decoration: none;
  color: var(--hero-muted); border-radius: 0;
  transition: background .12s, color .12s;
  border-left: 3px solid transparent;
}
.sec-link:hover { background: rgba(255,255,255,.04); color: var(--n-150); }
.sec-link.active {
  background: rgba(var(--brand-rgb, 99,102,241), .12);
  color: var(--hero-strong);
  border-left-color: var(--brand, var(--brand-mid));
}
.sec-link-icon { font-size: var(--text-base); flex-shrink: 0; margin-top: 1px; width: 18px; text-align: center; }
.sec-link-body strong { display: block; font-size: var(--text-xs); font-weight: 600; line-height: 1.3; color: inherit; }
.sec-link-body small  { display: block; font-size: var(--text-2xs); color: var(--n-600); margin-top: 1px; line-height: 1.3; }
.sec-link.active .sec-link-body small { color: var(--hero-muted); }

/* ─── Admin grouped nav (.adm-nav-*) ──────────────────────────────────── */
.adm-nav-group { border-bottom: 1px solid rgba(255,255,255,.04); }
.adm-nav-primary {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 10px 14px; border: none; background: none; cursor: pointer;
  color: var(--hero-muted); font-size: var(--text-xs); font-weight: 600;
  text-align: left; letter-spacing: .01em;
  transition: background var(--t-fast), color var(--t-fast);
}
.adm-nav-primary:hover { background: rgba(255,255,255,.04); color: var(--n-150); }
.adm-nav-group--open > .adm-nav-primary {
  color: var(--hero-text); background: rgba(255,255,255,.06);
}
.adm-nav-primary-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
.adm-nav-primary-label { flex: 1; }
.adm-nav-chev {
  width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.5; fill: none;
  flex-shrink: 0; transition: transform var(--t-fast); opacity: .5;
}
.adm-nav-group--open > .adm-nav-primary .adm-nav-chev { transform: rotate(90deg); opacity: 1; }

/* Sub-links — hidden unless group is open */
.adm-nav-children { display: none; }
.adm-nav-group--open > .adm-nav-children {
  display: flex; flex-direction: column;
  background: rgba(0,0,0,.15);
  border-top: 1px solid rgba(255,255,255,.04);
  padding: 4px 0;
}
.adm-nav-sub {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 12px 8px 20px; text-decoration: none;
  color: var(--hero-muted); font-size: var(--text-xs);
  border-left: 2px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.adm-nav-sub:hover { background: rgba(255,255,255,.04); color: var(--n-150); }
.adm-nav-sub.active {
  color: var(--hero-strong); border-left-color: var(--brand, var(--brand-mid));
  background: rgba(var(--brand-rgb, 99,102,241), .1);
}
.adm-nav-sub-icon { font-size: 12px; width: 16px; text-align: center; flex-shrink: 0; margin-top: 1px; }
.adm-nav-sub-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.adm-nav-sub-label { font-weight: 600; line-height: 1.3; color: inherit; }
.adm-nav-sub-sub { font-size: var(--text-2xs); color: #3d4f5c; line-height: 1.3; }
.adm-nav-sub.active .adm-nav-sub-sub { color: #6b7fa8; }

/* ─── Section Anchor Tab Bar (replaces secondary sidebar inline) ──────── */
/* ═══════════════════════════════════════════════════════════════════════
   TABS — unified system
   Three tab patterns, each for its context:
   1. section-tab  — underline tabs for top-level page nav
   2. cs-tab       — segmented pill tabs for in-card switching (canonical)
   3. adm-tab      — ghost tabs on dark card headers (defined near admin CSS)
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Underline tabs — top-level section nav bar */
.section-tabs {
  display: flex; gap: 0; border-bottom: 2px solid rgba(255,255,255,.08);
  background: var(--hero-bg-start); flex-shrink: 0; overflow-x: auto;
  padding: 0 24px; scrollbar-width: none;
}
.section-tabs::-webkit-scrollbar { display: none; }
.section-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 18px; font-size: var(--text-sm); font-weight: 500; color: var(--hero-muted);
  border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer;
  white-space: nowrap; transition: color var(--t-base), border-color var(--t-base);
  background: none; border-left: none; border-right: none; border-top: none;
}
.section-tab:hover { color: var(--n-150); }
.section-tab.active { color: var(--hero-text); border-bottom-color: var(--brand); font-weight: 700; }
.section-tab-badge {
  font-size: 10px; font-weight: 700; background: rgba(255,255,255,.12); color: var(--n-150);
  border-radius: var(--r-pill); padding: 1px 6px; min-width: 18px; text-align: center;
}

/* 2. Segmented pill tabs — cs-tab (canonical in-card tabs) */
.cs-tab-bar {
  display: inline-flex; background: var(--n-100);
  border-radius: var(--r-md); padding: 3px; gap: 2px; flex-shrink: 0;
}
.cs-tab {
  padding: 5px 14px; font-size: var(--text-sm); font-weight: 500;
  border: none; background: transparent; color: var(--n-500);
  border-radius: var(--r-sm); cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.cs-tab:hover { color: var(--n-700); background: rgba(255,255,255,.5); }
.cs-tab.active, .cs-tab.cs-tab--active {
  background: var(--n-0); color: var(--brand); font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
}

/* ─── Main Content ────────────────────────────────────────────────────── */
.main-content { flex: 1; overflow-y: auto; padding: 0; background: var(--n-50); }
.main-content-inner { padding: 24px 28px; }
.main-content-inner-full { padding: 0; }
.main-header {
  display: flex; flex-direction: column;
  background: var(--hero-bg);
  border-radius: 10px;
  padding: 22px 28px 20px; margin: 0 0 20px;
  position: relative; overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.16), 0 0 0 1px rgba(255,255,255,.06);
}
.main-header::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-mid, var(--brand-mid)));
}
.main-header-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; gap: 16px; }
.main-header h2 { font-size: 20px; font-weight: 800; color: var(--hero-strong); line-height: 1.2; }
.main-header-sub { font-size: 13px; color: var(--hero-muted); margin-top: 4px; line-height: 1.4; }
.main-header .tr-stat-strip { flex-wrap: wrap; gap: 10px; margin-bottom: 0; margin-top: 14px; }
.main-header .tr-stat { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); min-width: 100px; flex: 1; }
.main-header .tr-stat-label { color: var(--hero-muted); }
.main-header .tr-stat-value { color: var(--hero-strong); }
.assessment-meta { display: flex; gap: var(--sp-5); margin-top: 8px; font-size: var(--text-sm); color: var(--hero-muted); flex-wrap: wrap; }
.assessment-meta strong, .assessment-meta b { color: var(--n-150); }
.header-actions { display: flex; gap: var(--sp-2); align-items: center; flex-shrink: 0; }

/* ─── Status Badge ────────────────────────────────────────────────────── */
.status-badge { padding: 2px 10px; border-radius: var(--r-pill); font-size: var(--text-xs); font-weight: 600; text-transform: capitalize; display: inline-block; }
.status-active    { background: var(--success-light); color: var(--success); }
.status-in_progress { background: var(--warning-light); color: var(--warning); }
.status-completed { background: var(--info-light); color: var(--info); }

/* ─── Progress ────────────────────────────────────────────────────────── */
.progress-section { margin-bottom: var(--sp-6); }
.progress-label { display: flex; justify-content: space-between; margin-bottom: var(--sp-2); font-size: var(--text-md); font-weight: 600; color: var(--n-700); }
.progress-bar-lg { height: 10px; background: var(--n-200); border-radius: var(--r-pill); overflow: hidden; }
.progress-fill-lg { height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-hover)); border-radius: var(--r-pill); transition: width 1s ease; }

/* ─── Cards ───────────────────────────────────────────────────────────── */
.card {
  background: var(--n-0); border: 1px solid var(--n-200);
  border-radius: var(--r-lg); padding: var(--sp-6);
  margin-bottom: var(--sp-5); box-shadow: var(--shadow-xs);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 10px 10px 0 0;
  padding: 14px 20px; margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-5);
  position: relative; overflow: hidden;
}
.card-header::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-mid, var(--brand-mid)));
}
.card-header h2, .card-header h3 { font-size: var(--text-md); font-weight: 800; color: var(--hero-text); margin: 0; }
.card h3 { font-size: var(--text-lg); font-weight: 700; color: var(--n-800); margin-bottom: 4px; }
.card h4 { font-size: var(--text-md); font-weight: 600; color: var(--n-700); margin-bottom: 4px; }
.card p { font-size: var(--text-base); color: var(--n-500); margin-bottom: var(--sp-4); line-height: 1.6; }
.card-sub { font-size: var(--text-base); color: var(--n-400); margin-bottom: var(--sp-4); }

/* Controls filter card — toolbar-style */
#controls-filter.card { padding: var(--sp-4) var(--sp-5); background: var(--n-50); }
#controls-filter.card h3 { font-size: var(--text-xs); font-weight: 700; color: var(--n-400); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sp-3); }

/* ─── Phase Steps ─────────────────────────────────────────────────────── */
.phase-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.phase-step { padding: var(--sp-3) var(--sp-3); background: var(--n-50); border: 1.5px solid var(--n-200); border-radius: var(--r-md); font-size: var(--text-base); transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); }
.phase-step.clickable { cursor: pointer; }
.phase-step.clickable:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-brand-sm); }
.phase-step span { display: block; font-weight: 600; margin-bottom: 3px; color: var(--n-700); }
.phase-step small { color: var(--n-400); font-size: var(--text-xs); }
.phase-step.completed { background: var(--success-light); border-color: var(--success-border); }
.phase-step.completed span { color: var(--success); }
.phase-step.completed small { color: var(--brand); }
.phase-step.current { background: var(--brand-light); border-color: var(--brand-muted); }
.phase-step.current span { color: var(--brand); }
.phase-step.current small { color: var(--brand-hover); }

/* ─── ptl — Phases Timeline Card ─────────────────────────────────────── */
.ptl-card { padding: var(--sp-5); }
.ptl-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); gap: var(--sp-3); flex-wrap: wrap; }
.ptl-title { margin: 0; font-size: var(--text-lg); font-weight: 700; color: var(--n-800); }
.ptl-summary { display: flex; align-items: center; gap: var(--sp-3); }
.ptl-badge { font-size: var(--text-sm); font-weight: 700; border: 1.5px solid; border-radius: 20px; padding: 2px 10px; }
.ptl-badge-sub { font-size: var(--text-sm); color: var(--n-400); }
.ptl-track { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding-bottom: var(--sp-1); }
.ptl-step { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 90px; flex: 1; }
.ptl-connector { flex: 0 0 32px; height: 3px; background: var(--n-200); margin-top: 17px; border-radius: 2px; align-self: flex-start; }
.ptl-connector--done { background: var(--success); }
.ptl-node { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--n-200); background: var(--surface); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); flex-shrink: 0; }
.ptl-node:hover { border-color: var(--brand); transform: scale(1.12); box-shadow: var(--shadow-brand-sm); }
.ptl-node-icon { font-size: var(--text-sm); font-weight: 700; color: var(--n-400); line-height: 1; }
.ptl-step--done .ptl-node { border-color: var(--success); background: var(--success-light); }
.ptl-step--done .ptl-node-icon { color: var(--success); }
.ptl-step--current .ptl-node { border-color: var(--brand); background: var(--brand-light); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.ptl-step--current .ptl-node-icon { color: var(--brand); }
.ptl-bar-wrap { width: 80%; height: 5px; background: var(--n-100); border-radius: 3px; overflow: hidden; }
.ptl-bar { height: 100%; border-radius: 3px; transition: width 0.6s ease; min-width: 0; }
.ptl-label { font-size: var(--text-xs); font-weight: 600; color: var(--n-500); text-align: center; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptl-pct { font-size: var(--text-xs); color: var(--n-400); font-weight: 500; }

/* ─── cc — Continuous Compliance Score ───────────────────────────────── */
.cc-tile { position: relative; user-select: none; }
.cc-tile:hover { background: var(--n-50); }
.cc-spark { display: block; flex-shrink: 0; }
.cc-drift { font-size: var(--text-sm); font-weight: 700; }
.cc-drift-banner { display: flex; align-items: center; gap: 10px; background: var(--rose-light, #fff1f2); border: 1.5px solid var(--rose); border-radius: var(--r-md); padding: 10px 14px; font-size: var(--text-sm); color: var(--n-700); margin-bottom: 12px; }
.cc-drift-icon { font-size: 1rem; flex-shrink: 0; }
.cc-drift-close { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--n-400); font-size: var(--text-lg); line-height: 1; padding: 0 2px; }
.cc-drift-close:hover { color: var(--danger); }
.cc-breakdown { position: absolute; top: calc(100% + 6px); right: 0; z-index: 120; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 14px 16px; min-width: 300px; }
.cc-bd-rows { display: flex; flex-direction: column; gap: 10px; }
.cc-bd-row { display: grid; grid-template-columns: 100px 1fr 50px; align-items: center; gap: 8px; font-size: var(--text-xs); }
.cc-bd-label { font-weight: 600; color: var(--n-700); white-space: nowrap; }
.cc-bd-bar-wrap { height: 7px; background: var(--n-100); border-radius: 4px; overflow: hidden; }
.cc-bd-bar { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.cc-bd-score { font-weight: 700; color: var(--n-600); text-align: right; }
.cc-bd-flags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.cc-flag { font-size: var(--text-2xs); background: var(--n-100); border-radius: 3px; padding: 1px 5px; color: var(--n-600); }

/* ─── Activities ──────────────────────────────────────────────────────── */
.activities-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.activity-item { display: flex; align-items: center; gap: var(--sp-3); padding: 11px var(--sp-3); background: var(--n-50); border: 1px solid var(--n-100); border-radius: var(--r-md); font-size: var(--text-base); transition: background var(--t-fast); }
.activity-item:hover { background: var(--n-100); }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }
.activity-tag { margin-left: auto; padding: 2px 10px; border-radius: var(--r-pill); font-size: var(--text-xs); font-weight: 600; background: var(--danger-light); color: var(--danger); white-space: nowrap; }
.priority-high   { background: var(--danger-light);  color: var(--danger); }
.priority-medium { background: var(--warning-light); color: var(--warning); }
.priority-low    { background: var(--success-light); color: var(--success); }

/* ─── Metrics Grid ────────────────────────────────────────────────────── */
.metrics-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 16px 20px; }
.metric-card {
  padding: var(--sp-5); background: var(--n-0);
  border-radius: var(--r-lg); border: 1px solid var(--n-200);
  box-shadow: var(--shadow-xs); transition: box-shadow var(--t-base);
}
.metric-card:hover { box-shadow: var(--shadow-sm); }
.metric-header { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-base); color: var(--n-500); margin-bottom: var(--sp-2); font-weight: 500; }
.metric-icon { width: 30px; height: 30px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); }
.green-bg  { background: var(--success-light); }
.orange-bg { background: var(--warning-light); }
.blue-bg   { background: var(--info-light); }
.purple-bg { background: var(--brand-light); }
.metric-value { font-size: var(--text-3xl); font-weight: 800; color: var(--n-800); line-height: 1; }
.metric-sub { font-size: var(--text-sm); color: var(--n-400); margin-top: 5px; }

/* ─── Analysis ────────────────────────────────────────────────────────── */
.analysis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.analysis-panel { padding: 20px; background: var(--n-50); border-radius: 10px; border: 1px solid var(--n-200); }
.analysis-panel h4 { font-size: var(--text-base); margin-bottom: 16px; }
.status-label { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--n-400); margin-bottom: 8px; }
.stacked-bar { display: flex; height: 28px; border-radius: 6px; overflow: hidden; margin-bottom: 12px; }
.stacked-segment { height: 100%; transition: width .5s; }
.stacked-legend { display: flex; gap: 16px; font-size: var(--text-xs); color: var(--n-500); margin-bottom: 16px; flex-wrap: wrap; }
.completion-row { display: flex; align-items: center; gap: 12px; font-size: var(--text-sm); }
.mini-bar { flex: 1; height: 6px; background: var(--n-200); border-radius: 3px; overflow: hidden; }
.mini-fill { height: 100%; background: var(--brand); border-radius: 3px; }
.impl-chart { display: flex; align-items: flex-end; justify-content: space-around; height: 180px; padding-top: 20px; }
.impl-bar-group { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.impl-bar { width: 36px; border-radius: 6px 6px 0 0; transition: height .5s; min-height: 2px; }
.impl-bar-group span { font-size: 10px; color: var(--n-500); text-align: center; }
.impl-bar-group small { font-size: 10px; color: var(--n-400); font-weight: 600; }

/* ─── Modal ───────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: var(--sp-4); backdrop-filter: blur(3px);
}
.modal, .modal-box {
  background: var(--n-0); border-radius: var(--r-xl);
  padding: var(--sp-6); width: 100%; max-width: 480px;
  max-height: 92vh; overflow-y: auto;
  box-shadow: var(--shadow-lg); animation: modal-in .18s ease;
}
.modal-lg { max-width: 800px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 10px 10px 0 0;
  padding: 14px 20px; margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-5);
  position: relative; overflow: hidden;
}
.modal-header::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-mid, var(--brand-mid)));
}
.modal-header h3 { font-size: var(--text-md); font-weight: 800; color: var(--hero-text); margin: 0; }
.modal-subtitle { margin: 3px 0 0; font-size: var(--text-xs); color: var(--hero-muted); line-height: 1.5; }
.modal-hint { font-size: var(--text-sm); color: var(--n-400); margin-top: var(--sp-4); text-align: center; }
.modal-body { max-height: 68vh; overflow-y: auto; }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--n-100); }
.modal-close { background: none; border: none; font-size: 18px; color: var(--hero-muted); cursor: pointer; padding: 4px 8px; border-radius: var(--r-sm); line-height: 1; transition: background var(--t-fast), color var(--t-fast); }
.modal-close:hover { background: rgba(255,255,255,.1); color: var(--hero-text); }

/* ─── Tooltips (.tip-wrap / .tip-icon / #_global-tip-bubble) ──────────── */
.tip-wrap { display: inline-flex; align-items: center; vertical-align: middle; cursor: default; position: relative; margin-left: 4px; }
.tip-icon { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--n-200); color: var(--n-600); font-size: 10px; font-weight: 700; line-height: 1; flex-shrink: 0; transition: background var(--t-fast), color var(--t-fast); }
.tip-wrap:hover .tip-icon, .tip-wrap:focus .tip-icon { background: var(--brand-muted); color: var(--brand); }
.tip-bubble { display: none; } /* hidden — content read by JS into _global-tip-bubble */
.lbl-optional { font-size: var(--text-2xs); color: var(--n-400); font-weight: 400; }
#_global-tip-bubble {
  position: fixed; z-index: 9999; max-width: 280px;
  background: var(--n-900); color: var(--n-0);
  font-size: var(--text-xs); font-weight: 400; line-height: 1.5;
  padding: 7px 11px; border-radius: var(--r-sm);
  box-shadow: var(--shadow-md); pointer-events: none;
  white-space: normal; word-break: break-word; display: none;
}

/* ─── Forms ───────────────────────────────────────────────────────────── */
label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--n-600); margin-bottom: 4px; margin-top: var(--sp-3); }
input[type="text"], input[type="password"], input[type="date"], input[type="email"],
textarea, select {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--n-200); border-radius: var(--r-md);
  font-size: var(--text-md); font-family: inherit;
  transition: border-color var(--t-base), box-shadow var(--t-base);
  background: var(--n-0); color: var(--n-800);
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.form-error {
  color: var(--danger); font-size: var(--text-base);
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  background: var(--danger-light); border-radius: var(--r-sm);
  border: 1px solid var(--danger-border);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.form-section { margin-top: var(--sp-4); padding: var(--sp-4); background: var(--n-50); border-radius: var(--r-md); border: 1px solid var(--n-200); }
.form-section h4 { font-size: var(--text-base); font-weight: 700; color: var(--brand); margin-bottom: var(--sp-2); }
.checkbox-label { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; margin-top: var(--sp-2); font-size: var(--text-base); color: var(--n-700); }
.checkbox-label input { width: auto; accent-color: var(--brand); }
.form-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--n-600); margin-bottom: 3px; }
.form-input {
  width: 100%; padding: 8px 10px;
  border: 1.5px solid var(--n-200); border-radius: var(--r-md);
  font-size: var(--text-base); font-family: inherit;
  background: var(--n-0); color: var(--n-800);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
.form-input.input-error { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(248,113,113,.15); }
.form-input.input-error:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(248,113,113,.2); }
.ctrl-id-hint { font-size: var(--text-xs); color: var(--brand); margin-top: 3px; min-height: 14px; font-style: italic; }
.form-input--readonly { background: var(--n-50); color: var(--n-400); cursor: default; }
.form-error { color: var(--danger); font-size: var(--text-sm); display: none; }

/* ─── Controls Table ──────────────────────────────────────────────────── */
.controls-table-wrap { overflow-x: auto; max-height: 70vh; overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }
.controls-table { width: 100%; min-width: 100%; border-collapse: collapse; font-size: var(--text-sm); table-layout: fixed; }
.controls-table th {
  position: sticky; top: 0; z-index: 2;
  text-align: left; padding: 10px 14px;
  background: var(--n-50); border-bottom: 2px solid var(--n-200);
  font-weight: 700; color: var(--n-600);
  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.6px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  position: sticky; top: 0;
  /* allow browser resize handle — actual drag handled by JS */
}
.controls-table td { padding: 7px 14px; border-bottom: 1px solid var(--n-100); vertical-align: middle; color: var(--n-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; }
.controls-table td:last-child { overflow: visible; padding: 4px 6px; }
.controls-table td.ctrl-name-cell { white-space: nowrap; }
.controls-table td.ctrl-empty { color: var(--n-300); }
.controls-table tbody tr:hover { background: var(--brand-light); }
.controls-table select { padding: 4px 8px; font-size: var(--text-xs); }
.flagged-row { background: var(--amber-light); }

/* ─── Column resize handle ─────────────────────────────────────────────── */
.ctrl-th-inner { display: flex; align-items: center; gap: 4px; overflow: hidden; }
.ctrl-th-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ctrl-col-resizer {
  position: absolute; right: 0; top: 0; bottom: 0; width: 5px;
  cursor: col-resize; z-index: 3; user-select: none;
}
.ctrl-col-resizer:hover, .ctrl-col-resizer--active { background: var(--brand); opacity: .5; border-radius: 2px; }
.controls-table th { position: sticky; top: 0; z-index: 2; overflow: visible; }
.controls-table th > .ctrl-th-inner { position: relative; }

/* ─── Section Header (Tasks/RFIs/Risk — replaces tabs) ────────────────── */
.tr-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.08);
  background: var(--hero-bg);
  gap: 12px;
}
.tr-section-title {
  font-size: var(--text-base); font-weight: 700; color: var(--hero-text);
  display: flex; align-items: center; gap: var(--sp-2);
}
.tr-section-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand);
  font-size: var(--text-xs); font-weight: 700; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: var(--r-pill); margin-left: 6px;
}
.rm-empty-state {
  padding: 40px; text-align: center; color: var(--n-400);
  font-size: 32px; line-height: 1;
}
.rm-empty-state p { font-size: var(--text-md); margin-top: var(--sp-2); line-height: 1.5; }

/* ─── Inline Control Pill Switcher (definition lives in Inline Row Editing block below) ── */

/* ─── Tasks & RFIs / Risk Mgmt Stat Strip ────────────────────────────── */
.tr-stat-strip { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }

/* ── Group switcher rail ───────────────────────────────────────────── */
.grp-rail { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 0 4px; margin-bottom: 4px; }
.grp-rail--dropdown { gap: 10px; }
.grp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; border: 1px solid var(--n-200); background: var(--n-0); font-size: var(--text-sm); color: var(--n-600); cursor: pointer; transition: background .1s, border-color .1s, color .1s; white-space: nowrap; }
.grp-pill:hover { background: var(--n-100); border-color: var(--n-300); }
.grp-pill--active { background: var(--brand, var(--brand-mid)); border-color: var(--brand, var(--brand-mid)); color: var(--n-0); }
.grp-pill--active .grp-pill-stat { color: rgba(255,255,255,.85) !important; }
.grp-pill-name { font-weight: 500; }
.grp-pill-stat { font-size: var(--text-xs); font-weight: 600; }
.grp-dropdown-label { font-size: var(--text-sm); font-weight: 600; color: var(--n-600); }
.grp-dropdown { font-size: var(--text-sm); padding: 5px 10px; border: 1px solid var(--n-200); border-radius: 6px; background: var(--n-0); color: var(--n-800); cursor: pointer; }
.grp-dropdown-stat { font-size: var(--text-sm); color: var(--n-500); }

/* ── Cross-group summary + heatmap ────────────────────────────────── */
.grp-summary-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.grp-summary-wrap--3 { grid-template-columns: 1fr 1fr auto; }
@media (max-width: 1100px) { .grp-summary-wrap--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .grp-summary-wrap, .grp-summary-wrap--3 { grid-template-columns: 1fr; } }
.grp-summary-card { background: var(--n-0); border: 1px solid var(--n-200); border-radius: 8px; padding: 14px 16px; }
.grp-summary-title { font-size: var(--text-sm); font-weight: 700; color: var(--n-800); margin-bottom: 10px; }
.grp-bar-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.grp-legend-item { display: flex; align-items: center; gap: 4px; font-size: var(--text-2xs); color: var(--n-500); }
.grp-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.grp-bar-col-hdr { display: grid; grid-template-columns: 130px 1fr 48px 52px; gap: 8px; font-size: var(--text-2xs); font-weight: 600; color: var(--n-400); text-transform: uppercase; letter-spacing: .04em; padding: 0 0 4px; border-bottom: 1px solid var(--n-100); margin-bottom: 4px; }
.grp-bar-row { display: grid; grid-template-columns: 130px 1fr 48px 52px; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--n-50); cursor: pointer; border-radius: 4px; transition: background .1s; }
.grp-bar-row:hover { background: var(--n-50); }
.grp-bar-label { font-size: var(--text-xs); color: var(--n-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grp-bar-track { height: 12px; background: var(--n-100); border-radius: 6px; overflow: hidden; display: flex; }
.grp-bar-seg { height: 100%; transition: width .3s; }
.grp-bar-total { font-size: var(--text-xs); color: var(--n-500); text-align: right; }
.grp-bar-pct { font-size: var(--text-xs); font-weight: 700; text-align: right; }
/* Heatmap */
.grp-heat-table {
  width: 100%; border-collapse: collapse; font-size: var(--text-xs); table-layout: auto;
}
.grp-heat-th {
  font-weight: 600; color: var(--n-400); font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; padding: 5px 10px; text-align: center;
  border-bottom: 2px solid var(--n-100);
}
.grp-heat-th:first-child { text-align: left; min-width: 160px; padding-left: 0; }
.grp-heat-row-label {
  font-size: var(--text-xs); font-weight: 500; color: var(--n-700);
  padding: 5px 16px 5px 0; min-width: 160px; max-width: 220px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid var(--n-100);
}
.grp-heat-cell {
  text-align: center; font-size: var(--text-xs); font-weight: 600; color: var(--n-800);
  transition: filter .12s; cursor: default; min-width: 72px;
  padding: 5px 4px; border-bottom: 1px solid var(--n-100);
}
.grp-heat-cell:hover { filter: brightness(.9); }
.grp-heat-cell-inner {
  display: inline-block; padding: 3px 8px; border-radius: 5px; min-width: 52px;
}
.gi-heat-pct { font-size: 10px; color: inherit; opacity: .65; margin-left: 2px; font-weight: 400; }

/* ─── Group Insights (gi-*) ──────────────────────────────────────────── */
.gi-layout { display: grid; grid-template-columns: 1fr 300px; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .gi-layout { grid-template-columns: 1fr; } }

.gi-main { display: flex; flex-direction: column; gap: 14px; }
.gi-side { display: flex; flex-direction: column; gap: 14px; }

.gi-card {
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: 10px;
  overflow: hidden; box-shadow: var(--shadow-xs);
}
.gi-card-header {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px 10px; border-bottom: 1px solid rgba(255,255,255,.08);
  background: var(--hero-bg);
  position: relative; overflow: hidden;
}
.gi-card-title { font-size: var(--text-sm); font-weight: 700; color: var(--hero-text); }
.gi-card-sub   { font-size: var(--text-2xs); color: var(--hero-muted); }

/* KPI strip */
.gi-kpi-strip  { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.gi-kpi {
  flex: 1; min-width: 90px; background: var(--n-0);
  border: 1px solid var(--n-200); border-radius: 8px;
  padding: 10px 14px; display: flex; flex-direction: column; gap: 3px;
  box-shadow: var(--shadow-xs);
}
.gi-kpi-num { font-size: 22px; font-weight: 800; color: var(--n-800); line-height: 1; }
.gi-kpi-lbl { font-size: 10px; font-weight: 600; color: var(--n-400); text-transform: uppercase; letter-spacing: .05em; }

/* Sort select */
.gi-sort-select {
  font-size: var(--text-xs); padding: 5px 10px; border: 1.5px solid var(--n-200);
  border-radius: 7px; background: var(--n-0); color: var(--n-800); cursor: pointer;
}

/* Legend */
.gi-legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px 6px; }

/* Bar list */
.gi-bar-list { padding: 0 0 4px; }
.gi-bar-row {
  display: grid; grid-template-columns: minmax(160px,28%) 1fr auto;
  align-items: center; gap: 10px; padding: 7px 16px;
  cursor: pointer; border-bottom: 1px solid var(--n-50);
  transition: background .08s;
}
.gi-bar-row:hover, .gi-bar-row--open { background: #faf9ff; }
.gi-bar-label-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gi-bar-label { font-size: var(--text-xs); font-weight: 500; color: var(--n-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gi-bar-meta  { font-size: 10px; color: var(--n-400); }
.gi-bar-track-cell { min-width: 0; }
.gi-bar-track { height: 14px; background: var(--n-100); border-radius: 7px; overflow: hidden; display: flex; }
.gi-bar-seg   { height: 100%; }
.gi-bar-stats-cell { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.gi-bar-pct   { font-size: var(--text-xs); font-weight: 700; min-width: 36px; text-align: right; }
.gi-gap-badge { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px; background: var(--danger-light); color: #f43f5e; border: 1px solid var(--danger-border); white-space: nowrap; }
.gi-flag-badge { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px; background: var(--amber-light); color: var(--warning-dark); border: 1px solid var(--warning-border); white-space: nowrap; }
.gi-row-chevron { flex-shrink: 0; opacity: .5; }

/* Expanded detail row */
.gi-row-detail {
  padding: 10px 16px 12px 16px;
  background: #faf9ff; border-bottom: 1px solid var(--n-100);
  border-top: 1px solid var(--n-100);
}
.gi-detail-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 10px; }
@media (max-width: 800px) { .gi-detail-grid { grid-template-columns: repeat(3, 1fr); } }
.gi-detail-stat { display: flex; flex-direction: column; gap: 2px; background: var(--n-0); border: 1px solid var(--n-100); border-radius: 7px; padding: 7px 10px; }
.gi-detail-num  { font-size: 18px; font-weight: 800; line-height: 1; }
.gi-detail-lbl  { font-size: 10px; color: var(--n-400); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.gi-detail-actions { display: flex; gap: 8px; }

/* Attention card */
.gi-att-list { padding: 4px 0; }
.gi-att-row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 8px; padding: 8px 16px;
  border-bottom: 1px solid var(--n-50);
}
.gi-att-row:last-child { border-bottom: none; }
.gi-att-label { font-size: var(--text-xs); font-weight: 500; color: var(--n-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gi-att-bars  { display: flex; flex-wrap: wrap; gap: 4px; }
.gi-att-chip           { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 10px; border: 1px solid; white-space: nowrap; }
.gi-att-chip--danger   { background: var(--danger-light);  color: var(--danger);  border-color: var(--danger-border); }
.gi-att-chip--muted    { background: var(--n-50);          color: var(--n-500);   border-color: var(--n-200); }
.gi-att-chip--warning  { background: var(--warning-light); color: var(--warning-dark);        border-color: var(--warning-border); }
.gi-att-pct   { font-size: var(--text-2xs); font-weight: 700; white-space: nowrap; }

.gi-heatmap-card { overflow-x: auto; }
.gi-heatmap-card .grp-heat-row-label { max-width: 220px; }
.tr-stat {
  flex: 1; min-width: 100px; background: var(--n-0);
  border: 1px solid var(--n-200); border-radius: var(--r-lg);
  padding: var(--sp-4); box-shadow: var(--shadow-xs);
}
.tr-stat-num { font-size: var(--text-3xl); font-weight: 800; color: var(--n-800); line-height: 1; }
.tr-stat-num--brand   { color: var(--brand); }
.tr-stat-num--success { color: var(--success); }
.tr-stat-num--warning { color: var(--warning); }
.tr-stat-num--danger  { color: var(--danger); }
.tr-stat-num--muted   { color: var(--n-400); }
.tr-stat-num--purple  { color: var(--purple); }
.tr-stat-num--violet  { color: var(--purple-light); }
.tr-stat-num--orange  { color: var(--orange); }
/* Accent border variants — applied on .tr-stat */
.tr-stat--brand   { border-left: 3px solid var(--brand); }
.tr-stat--success { border-left: 3px solid var(--success); }
.tr-stat--warning { border-left: 3px solid var(--warning); }
.tr-stat--danger  { border-left: 3px solid var(--danger); }
.tr-stat--muted   { border-left: 3px solid var(--n-300); }
.tr-stat--purple  { border-left: 3px solid var(--purple); }
.tr-stat--violet  { border-left: 3px solid var(--purple-light); }
.tr-stat--orange  { border-left: 3px solid var(--orange); }
.tr-stat-lbl { font-size: var(--text-xs); color: var(--n-400); margin-top: 5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
/* ─── Assessment Cards ────────────────────────────────────────────────── */
.assess-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); }

.assess-card {
  background: var(--n-0); border: 1.5px solid var(--n-200); border-radius: var(--r-xl);
  display: flex; flex-direction: column; overflow: hidden;
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
  cursor: pointer;
}
.assess-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--n-300); }
.assess-card-active { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
.assess-card-active:hover { box-shadow: var(--shadow-brand-md), 0 0 0 3px rgba(99,102,241,.18); }

.assess-card-top { padding: 20px 20px 12px; }
.assess-card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.assess-card-title { font-size: 16px; font-weight: 700; color: var(--n-800); line-height: 1.3; margin: 0; }
.assess-card-badges { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; align-items: center; }
.assess-class-badge { padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: .4px; }
.assess-status-badge { padding: 2px 8px; border-radius: 6px; font-size: var(--text-2xs); font-weight: 600; border: 1px solid; }
.assess-active-chip { padding: 2px 8px; border-radius: 6px; font-size: var(--text-2xs); font-weight: 600; background: var(--brand-light); color: var(--brand); }

.assess-card-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--text-xs); color: var(--n-500); }

.assess-card-body { padding: 12px 20px 14px; border-top: 1px solid var(--n-100); flex: 1; }
.assess-progress-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.assess-progress-label { font-size: var(--text-xs); color: var(--n-400); white-space: nowrap; }
.assess-progress-track { flex: 1; height: 8px; background: var(--n-100); border-radius: 4px; overflow: hidden; }
.assess-progress-fill { height: 100%; border-radius: 4px; transition: width .5s ease; }
.assess-progress-pct { font-size: var(--text-sm); font-weight: 700; min-width: 38px; text-align: right; }

.assess-card-phase { display: flex; gap: 6px; font-size: var(--text-xs); }
.assess-phase-label { color: var(--n-400); }
.assess-phase-value { color: var(--n-800); font-weight: 500; }

.assess-card-footer { padding: 12px 20px; border-top: 1px solid var(--n-100); display: flex; justify-content: flex-end; }
/* New assessment placeholder card */
.assess-card-new { align-items: center; justify-content: center; border: 2px dashed var(--n-200); background: #fafbfc; min-height: 160px; gap: 8px; }
.assess-card-new:hover { border-color: var(--brand); background: var(--brand-light); }
.assess-new-icon { font-size: 32px; color: var(--brand); line-height: 1; }
.assess-new-label { font-size: var(--text-md); font-weight: 600; color: var(--brand); }
.assess-new-sub { font-size: var(--text-xs); color: var(--n-400); }

.active-row { background: var(--brand-soft); }
.active-row:hover { background: var(--brand-border) !important; }
.fw-ctrl-id { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11.5px; color: var(--brand); font-weight: 700; background: var(--brand-light); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }

/* Controls list card — no extra padding, let table breathe edge-to-edge */
#controls-list.card { padding: 0; overflow: hidden; }
#controls-list.card .controls-table-wrap { border-radius: 12px; }
#controls-list.card .pagination { padding: 14px 20px; border-top: 1px solid var(--n-100); margin-top: 0; }
.chip { display: inline-block; padding: 2px 8px; background: var(--n-100); border-radius: 4px; font-size: var(--text-2xs); color: var(--n-500); white-space: nowrap; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.impl-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: var(--text-2xs); font-weight: 500; white-space: nowrap; }

/* ─── Filter Row ──────────────────────────────────────────────────────── */
.filter-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.filter-row select {
  width: auto; min-width: 148px; padding: 7px 10px;
  font-size: var(--text-base); border: 1.5px solid var(--n-200);
  border-radius: var(--r-md); background: var(--n-50); color: var(--n-700);
  transition: border-color var(--t-fast), background var(--t-fast);
  font-family: inherit;
}
.filter-row select:focus { outline: none; border-color: var(--brand); background: var(--n-0); box-shadow: 0 0 0 3px rgba(99,102,241,.09); }
.filter-row input[type="text"] {
  width: auto; min-width: 200px; flex: 1; padding: 7px 10px;
  font-size: var(--text-base); border: 1.5px solid var(--n-200);
  border-radius: var(--r-md); background: var(--n-50);
  transition: border-color var(--t-fast), background var(--t-fast);
  font-family: inherit; color: var(--n-800);
}
.filter-row input[type="text"]:focus { outline: none; border-color: var(--brand); background: var(--n-0); box-shadow: 0 0 0 3px rgba(99,102,241,.09); }

/* ─── Multi-select checkbox pill filters ─────────────────────────────── */
.cfl-pill-row { align-items: center; }
.cfl-wrap { position: relative; display: inline-flex; }
.cfl-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; font-size: var(--text-base); font-family: inherit;
  border: 1.5px solid var(--n-200); border-radius: var(--r-md);
  background: var(--n-50); color: var(--n-700); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
  white-space: nowrap; user-select: none;
}
.cfl-pill:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.cfl-pill.cfl-active {
  border-color: var(--brand); background: var(--brand-light);
  color: var(--brand); font-weight: 600;
}
.cfl-arrow { display:inline-block; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:.6; vertical-align:middle; flex-shrink:0; transition:transform .15s; margin-left:3px; }
.cfl-open .cfl-arrow { transform: rotate(180deg); }
.cfl-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 9998;
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); min-width: 180px; max-width: 280px;
  animation: fadeInDown .12s ease;
}
.cfl-items {
  display: flex; flex-direction: column; max-height: 260px; overflow-y: auto;
  padding: 6px 0;
  overscroll-behavior: contain;
}
.cfl-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; font-size: var(--text-base); color: var(--n-700);
  cursor: pointer; transition: background var(--t-fast);
}
.cfl-opt:hover { background: var(--n-50); }
.cfl-opt input[type="checkbox"] { margin: 0; accent-color: var(--brand); width: 14px; height: 14px; flex-shrink: 0; }

/* ─── Column toggle popover ───────────────────────────────────────────── */
.col-toggle-wrap { position: relative; }
.col-toggle-menu {
  position: fixed; z-index: 9999;
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); min-width: 200px;
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
.col-toggle-menu .col-toggle-header { flex-shrink: 0; }
.col-toggle-menu .col-toggle-footer { flex-shrink: 0; }
.col-toggle-menu .col-toggle-scroll-body { overflow-y: auto; flex: 1; padding: 4px 0; }
.col-toggle-header { padding: 8px 14px; font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-400); border-bottom: 1px solid rgba(255,255,255,.08); background: var(--hero-bg); }
.col-toggle-item { display: flex; align-items: center; gap: var(--sp-2); padding: 7px 14px; font-size: var(--text-base); cursor: pointer; transition: background var(--t-fast); color: var(--n-700); }
.col-toggle-item:hover { background: var(--n-50); }
.col-toggle-item input[type="checkbox"] { margin: 0; accent-color: var(--brand); width: 14px; height: 14px; cursor: pointer; }
.col-toggle-footer { border-top: 1px solid var(--n-100); padding: 8px 14px 4px; }
.col-toggle-group-label { padding: 6px 14px 2px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--n-400); }
.ctrl-export-panel { padding: 4px 0; }
.ctrl-export-item { display: block; width: 100%; background: none; border: none; padding: 7px 14px; font-size: var(--text-sm); text-align: left; cursor: pointer; color: var(--n-800); border-radius: 0; }
.ctrl-export-item:hover { background: var(--n-50); }

/* ─── Filter default buttons ──────────────────────────────────────────── */
.btn-filter-default { background: var(--brand-light); color: var(--brand); border-color: var(--brand-muted); }
.btn-filter-default:hover { background: var(--brand-tint); border-color: var(--brand); }
.btn-filter-default-reset { background: var(--orange-light); color: #c2410c; border-color: var(--orange-border); }
.btn-filter-default-reset:hover { background: #ffedd5; border-color: var(--orange); }

/* ─── Pagination ──────────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-4); font-size: var(--text-base); color: var(--n-500); flex-wrap: wrap; }

/* ─── Bulk Action Bar ─────────────────────────────────────────────────── */
.bulk-action-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-2); background: var(--brand-active); color: var(--n-0);
  border-radius: var(--r-lg); padding: 10px var(--sp-4);
  margin-bottom: var(--sp-2); position: sticky; top: 8px; z-index: 100;
  box-shadow: 0 4px 16px rgba(30,64,175,.28);
}
.bulk-info { display: flex; align-items: center; gap: 10px; font-size: var(--text-base); font-weight: 600; }
.bulk-info input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--n-0); cursor: pointer; }
.bulk-select-all-btn { background: rgba(255,255,255,.15); color: var(--n-0); border: 1px solid rgba(255,255,255,.3); }
.bulk-select-all-btn:hover { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.5); }
.bulk-clear-btn { background: transparent; color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.3); }
.bulk-clear-btn:hover { color: var(--n-0); border-color: rgba(255,255,255,.6); }
.bulk-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.bulk-actions select { font-size: var(--text-sm); padding: 5px 8px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: var(--n-0); font-family: inherit; }
.bulk-actions select option { background: var(--brand-active); }
.bulk-actions .btn-primary { background: var(--n-0); color: var(--brand-active); font-weight: 700; border: none; }
.bulk-actions .btn-primary:hover { background: var(--info-light); }
.col-check { width: 36px; text-align: center; }
.row-selected { background: var(--info-light) !important; }
.row-selected td { border-color: var(--info-border) !important; }

/* ─── Toast ───────────────────────────────────────────────────────────── */
.app-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(16px);
  background: var(--n-800); color: var(--n-50);
  padding: 10px 22px; border-radius: var(--r-pill);
  font-size: var(--text-base); font-weight: 500;
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
  pointer-events: none; z-index: 9999; white-space: normal; max-width: 480px; text-align: center;
  box-shadow: var(--shadow-md); letter-spacing: .01em;
}
.app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.app-toast--error { background: var(--danger); }
.app-toast--warning { background: #b45309; }

/* Undo toast */
.app-toast-undo {
  position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%) translateY(16px);
  background: var(--n-800); color: var(--n-100);
  padding: 10px 16px 10px 20px; border-radius: 10px;
  font-size: var(--text-sm); font-weight: 500; display: flex; align-items: center; gap: 12px;
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
  pointer-events: none; z-index: 9998; box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.app-toast-undo.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.app-toast-undo button {
  background: var(--brand); color: var(--n-0); border: none; border-radius: 6px;
  padding: 4px 12px; font-size: var(--text-xs); font-weight: 700; cursor: pointer; white-space: nowrap;
}
.app-toast-undo button:hover { background: var(--brand-hover); }

/* ─── RFI Status ──────────────────────────────────────────────────────── */
.rfi-status { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); font-size: var(--text-xs); font-weight: 600; }
.rfi-open     { background: var(--danger-light);  color: var(--danger); }
.rfi-responded{ background: var(--warning-light); color: var(--warning); }
.rfi-closed   { background: var(--success-light); color: var(--success); }

/* RFI panel inside control modal */
.ctrl-rfi-section { border-top: 1px solid var(--n-200); padding: 16px 0 8px; }
.ctrl-rfi-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ctrl-rfi-header h4 { margin: 0; font-size: var(--text-base); font-weight: 600; }
.btn-rfi { background: var(--brand-light); color: var(--brand); border: 1px solid var(--brand-muted); }
.btn-rfi:hover { background: var(--brand-tint); border-color: var(--brand); }
.btn-export { background: var(--brand-light); color: var(--brand); border: 1px solid var(--brand-muted); }
.btn-export:hover { background: var(--brand-tint); border-color: var(--brand); }
.rfi-inline-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.rfi-inline-table th { background: var(--n-50); padding: 6px 10px; text-align: left; font-weight: 700; color: var(--n-600); border-bottom: 1px solid var(--n-200); }
.rfi-inline-table td { padding: 7px 10px; border-bottom: 1px solid var(--n-100); }
.rfi-inline-table tr:last-child td { border-bottom: none; }

/* RFI badge in controls table */
.ctrl-rfi-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--brand-light); color: var(--brand); border: 1px solid var(--brand-muted); border-radius: 12px; padding: 2px 8px; font-size: var(--text-2xs); font-weight: 600; cursor: pointer; }
.ctrl-rfi-badge:hover { background: var(--brand-light); }

/* RFI modal control reference banner */
.rfi-control-ref { background: var(--brand-light); border: 1px solid var(--brand-muted); border-radius: 8px; padding: 8px 12px; font-size: var(--text-xs); color: var(--brand-hover); margin-bottom: 12px; }

/* ─── Control Detail ──────────────────────────────────────────────────── */
.control-detail-grid { display: flex; flex-direction: column; gap: 16px; }
.control-info { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; background: var(--n-50); border-radius: 8px; }
.info-row { display: flex; gap: 8px; font-size: var(--text-sm); }
.info-row span:first-child { color: var(--n-500); font-weight: 500; }
.info-row.flagged { color: var(--amber); font-weight: 600; }
.readonly-fields { padding: 16px; background: var(--n-50); border-radius: 8px; }
.readonly-fields .info-row { margin-bottom: 8px; }
.audit-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); margin-top: 8px; }
.audit-table th { text-align: left; padding: 6px 8px; background: var(--n-50); border-bottom: 1px solid var(--n-200); font-weight: 700; color: var(--n-600); }
.audit-table td { padding: 6px 8px; border-bottom: 1px solid var(--n-100); }
.attachments-section, .audit-section { margin-top: 8px; }
.label-badge { font-size: var(--text-2xs); font-weight: 600; color: var(--brand); background: var(--brand-light); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.appl-badge { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; margin-right: 2px; white-space: nowrap; }
.appl-NC { background: var(--n-100); color: var(--n-600); }
.appl-OS { background: var(--brand-light); color: var(--brand); }
.appl-P  { background: var(--warning-light); color: var(--warning-dark); }
.appl-S  { background: #fff1f2; color: #be123c; }
.appl-TS { background: #fdf4ff; color: #7e22ce; }
.e8-badge { font-size: 10px; font-weight: 700; background: var(--brand-light); color: var(--brand); border: 1px solid var(--brand-muted); padding: 1px 5px; border-radius: 3px; margin-right: 2px; }
.subsection-cell { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evidence-cell { text-align: center; color: var(--brand); }
.ctrl-description-block { border: 1px solid var(--brand-muted); border-radius: 8px; background: var(--brand-light); padding: 10px 14px; }
.ctrl-description-block summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; color: var(--brand); user-select: none; }
.ctrl-description-block p { margin: 10px 0 2px; font-size: var(--text-sm); color: var(--n-700); line-height: 1.6; white-space: pre-wrap; }
.ctrl-section-block { border-radius: 8px; padding: 12px 14px; margin-bottom: 4px; }
.ctrl-section-block summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; user-select: none; display: flex; align-items: center; gap: 8px; }
.ctrl-section-block[open] summary { margin-bottom: 12px; }
.ctrl-section-ism { border: 1px solid var(--n-200); background: var(--n-50); }
.ctrl-section-ism summary { color: var(--n-600); }
.ctrl-section-assessor { border: 1px solid var(--brand-muted); background: var(--brand-light); }
.ctrl-section-assessor summary { color: var(--brand-hover); }
.ctrl-section-sysowner { border: 1px solid var(--success-border); background: var(--success-light); }
.ctrl-section-sysowner summary { color: var(--brand); }
.section-badge { font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 10px; background: var(--n-200); color: var(--n-500); margin-left: auto; }
.static-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.static-grid > div span { font-size: var(--text-2xs); font-weight: 600; color: var(--n-500); text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: 2px; }
.static-grid > div p { font-size: var(--text-xs); color: var(--n-700); margin: 0; line-height: 1.5; }
.static-wide { grid-column: 1 / -1; }
.attachments-section h4, .audit-section h4 { font-size: var(--text-base); margin-bottom: 8px; }
.attachment-item { padding: 8px; background: var(--n-50); border-radius: 6px; font-size: var(--text-sm); margin-bottom: 4px; }

/* ─── Attachment Upload ────────────────────────────────────────────────── */
.attach-header { display: flex; align-items: center; margin-bottom: 8px; }
.attach-header h4 { margin: 0; font-size: var(--text-base); font-weight: 600; }
.attach-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--n-50); border: 1px solid var(--n-200); border-radius: 8px; margin-bottom: 6px; }
.attach-icon { font-size: 20px; flex-shrink: 0; }
.attach-info { flex: 1; min-width: 0; }
.attach-name { display: block; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-meta { font-size: var(--text-2xs); color: var(--n-400); }
.attach-actions { display: flex; gap: 6px; flex-shrink: 0; }
.attach-actions a.btn-sm { text-decoration: none; }
.attach-upload-zone { border: 2px dashed var(--n-300); border-radius: 10px; margin-top: 10px; transition: border-color 0.2s, background 0.2s; }
.attach-upload-zone:hover { border-color: var(--brand); background: var(--brand-light); }
.attach-file-input { display: none; }
.attach-upload-label { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; cursor: pointer; font-size: var(--text-sm); color: var(--n-500); text-align: center; }
.attach-upload-icon { font-size: 24px; }
.attach-upload-hint { font-size: var(--text-2xs); color: var(--n-400); }
.attach-upload-zone.drag-over { border-color: var(--brand); background: var(--brand-light); }
.text-error { color: var(--danger); font-size: var(--text-xs); margin: 4px 0; }

/* ─── Document Generation (Reports page) ──────────────────────────────── */

/* Featured full-report card */
.rpt-featured {
  background: linear-gradient(135deg, #f8f7ff 0%, var(--brand-light) 60%, var(--brand-soft) 100%) !important;
  border-color: var(--brand-muted) !important;
}
.rpt-featured-body {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 22px 24px;
}
.rpt-featured-left { flex: 1; min-width: 0; }
.rpt-featured-right { flex-shrink: 0; }
.rpt-featured-eyebrow {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--purple); background: var(--brand-soft); border: 1px solid var(--brand-border);
  padding: 2px 10px; border-radius: 20px; display: inline-block; margin-bottom: 8px;
}
.rpt-featured-title { font-size: 18px; font-weight: 800; color: var(--n-900); margin-bottom: 6px; }
.rpt-featured-desc  { font-size: var(--text-sm); color: var(--n-600); line-height: 1.5; }
@media (max-width: 680px) { .rpt-featured-body { flex-direction: column; align-items: flex-start; } }

/* Document type cards grid */
.rpt-doc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
.rpt-doc-card {
  border: 1.5px solid var(--n-150); border-radius: 12px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
  border-top: 3px solid var(--rdt-accent, var(--brand));
  transition: box-shadow .15s, transform .15s;
}
.rpt-doc-card:hover { box-shadow: 0 4px 16px rgba(79,70,229,.10); transform: translateY(-1px); }
.rpt-doc-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rpt-doc-label {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rdt-accent, var(--brand));
  background: color-mix(in srgb, var(--rdt-accent, var(--brand)) 10%, transparent);
  padding: 2px 8px; border-radius: 6px;
}
.rpt-doc-badge {
  font-size: 10px; font-weight: 600; padding: 1px 8px; border-radius: 20px; border: 1px solid;
}
.rpt-doc-title { font-size: var(--text-sm); font-weight: 700; color: var(--n-900); line-height: 1.3; }
.rpt-doc-desc  { font-size: var(--text-xs); color: var(--n-500); line-height: 1.5; flex: 1; }
.rpt-doc-last  { font-size: var(--text-2xs); color: var(--n-400); }
.rpt-doc-actions { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--n-100); margin-top: auto; }

.clickable-row { cursor: pointer; transition: background .2s; }
.clickable-row:hover { background: var(--n-100) !important; }

/* Template editor sections */
.template-sections-list { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.template-section { padding: 16px; background: var(--n-50); border: 1px solid var(--n-200); border-radius: 10px; }
.template-subsection { padding: 12px; background: var(--n-0); border: 1px solid var(--n-200); border-radius: 8px; margin-top: 8px; }
.template-section-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; margin-bottom: 0;
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 8px 8px 0 0;
  font-weight: 700; color: var(--hero-text); font-size: var(--text-sm);
}
.template-section-actions { display: flex; gap: 4px; }
.subsection-list { margin-top: 12px; padding-left: 16px; border-left: 2px solid var(--n-200); }
.doc-preview-body { padding: 24px; font-size: var(--text-base); line-height: 1.6; }
.doc-preview-body h2 { font-size: 20px; margin-bottom: 12px; }
.doc-preview-body h3 { font-size: 16px; margin: 20px 0 8px; color: var(--n-800); border-bottom: 1px solid var(--n-100); padding-bottom: 4px; }
.doc-preview-body h4 { font-size: var(--text-base); margin: 12px 0 4px; color: var(--n-600); }
.doc-preview-body p { margin-bottom: 8px; }
.doc-preview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }

/* ─── Document Cover Page ─────────────────────────────────────────────── */
.doc-cover {
  background: var(--n-50);
  border: 2px solid var(--n-100);
  border-radius: 12px;
  margin-bottom: 24px;
  overflow: hidden;
}
.doc-cover-top {
  background: var(--brand);
  padding: 24px 28px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.doc-cover-logo {
  height: 40px;
  max-width: 180px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.doc-cover-logo-text {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--n-0);
  letter-spacing: -0.02em;
}
.doc-cover-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.doc-cover-class {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(255,255,255,0.2);
  color: var(--n-0);
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.35);
}
.doc-cover-fw-badge {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(255,255,255,0.15);
  color: var(--n-0);
  font-weight: 600;
  font-size: var(--text-2xs);
  letter-spacing: .05em;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.25);
}
.doc-cover-body {
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--n-100);
}
.doc-cover-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--n-900);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.doc-cover-client {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--brand);
}
.doc-cover-branch {
  font-size: var(--text-sm);
  color: var(--n-500);
  margin-top: 2px;
}
.doc-cover-meta {
  padding: 16px 28px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
}
.doc-cover-meta-row {
  display: flex;
  gap: 8px;
  font-size: var(--text-sm);
}
.doc-cover-meta-label {
  color: var(--n-400);
  min-width: 74px;
  flex-shrink: 0;
}
.doc-cover-meta-val {
  color: var(--n-700);
  font-weight: 500;
}

.doc-subsection { padding-left: 20px; font-size: var(--text-sm); }
.doc-gap { padding: 8px 12px; background: var(--amber-light,var(--amber-light)); border-radius: 6px; border-left: 3px solid var(--amber); margin-bottom: 4px; font-size: var(--text-sm); }
.doc-group-section { margin-bottom: 8px; }
.doc-group-stats-table { border-collapse: collapse; font-size: var(--text-sm); min-width: 220px; }
.doc-group-stats-table td { padding: 4px 12px 4px 0; color: var(--n-600); }
.doc-group-stats-table td:first-child { width: 140px; }

/* ─── Guidelines Overview Card (on Overview page) ────────────────────── */
.guideline-row {
  display: grid;
  grid-template-columns: 200px 1fr 40px 50px 32px;
  align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px; margin-bottom: 4px;
  cursor: pointer; transition: background .15s;
  border: 1px solid transparent;
}
.guideline-row:hover { background: var(--purple-light); border-color: var(--brand-tint); }
.guideline-row-label {
  font-size: var(--text-sm); font-weight: 500;
  color: var(--n-750); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.guideline-row-count {
  font-size: var(--text-2xs); color: var(--n-400); white-space: nowrap; min-width: 36px; text-align: right;
}
.guideline-row-pct {
  font-size: var(--text-xs); font-weight: 700; min-width: 36px; text-align: right; white-space: nowrap;
}

/* ─── Guidelines Section (full page) ─────────────────────────────────── */
.gl-stat-strip { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.gl-stat { background: var(--n-0); border: 1px solid var(--n-200); border-radius: 10px; padding: 14px 20px; flex: 1; min-width: 100px; }
.gl-stat-val { font-size: 26px; font-weight: 700; line-height: 1; }
.gl-stat-lbl { font-size: var(--text-2xs); color: var(--n-400); margin-top: 4px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }

.gl-legend-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; font-size: var(--text-xs); color: var(--n-500); }
.gl-legend-item { display: flex; align-items: center; gap: 6px; }

.gl-chapters { display: flex; flex-direction: column; gap: 8px; }

.gl-chapter-card { background: var(--n-0); border: 1px solid var(--n-200); border-radius: 12px; overflow: hidden; transition: border-color .15s; }
.gl-chapter-card:hover { border-color: var(--brand-muted); }
.gl-chapter-card.gl-chapter-open { border-color: var(--brand); }

.gl-chapter-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; cursor: pointer; gap: 12px;
  transition: background .15s;
}
.gl-chapter-header:hover { background: var(--n-50); }
.gl-chapter-open .gl-chapter-header { background: var(--purple-light); }

.gl-chapter-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.gl-arrow { font-size: 10px; color: var(--n-400); flex-shrink: 0; transition: transform .2s; }
.gl-chapter-name { font-size: var(--text-base); font-weight: 600; color: var(--n-800); }
.gl-chapter-meta { font-size: var(--text-xs); color: var(--n-400); margin-top: 1px; }

.gl-chapter-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.gl-pct-badge { font-size: var(--text-base); font-weight: 700; min-width: 40px; text-align: right; }
.gl-bar-wrap { width: 180px; }
.gl-filter-btn { font-size: var(--text-2xs); white-space: nowrap; }

/* Subsections */
.subsections-container { border-top: 1px solid var(--n-100); }
.gl-loading { padding: 16px 20px; font-size: var(--text-sm); color: var(--n-400); }
.gl-loading-topic { padding: 10px 20px; }

.gl-sub-card { border-bottom: 1px solid var(--n-100); }
.gl-sub-card:last-child { border-bottom: none; }

.gl-subsection-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 36px; cursor: pointer; transition: background .15s;
}
.gl-subsection-row:hover { background: var(--n-50); }
.gl-sub-no-expand { cursor: default; }
.gl-sub-no-expand:hover { background: transparent; }
.gl-sub-arrow { font-size: 9px; }
.gl-sub-name { flex: 1; font-size: var(--text-sm); color: var(--n-750); min-width: 0; }
.gl-sub-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.gl-sub-count { font-size: var(--text-2xs); color: var(--n-400); min-width: 24px; text-align: right; }
.gl-bar-wrap-sm { width: 120px; }
.gl-sub-pct { font-size: var(--text-xs); font-weight: 700; min-width: 34px; text-align: right; }

/* Topics */
.gl-topics-container { border-top: 1px solid var(--n-100); background: var(--n-25); }
.gl-topic-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 52px; cursor: pointer; transition: background .15s;
  border-bottom: 1px solid var(--n-100);
}
.gl-topic-row:last-child { border-bottom: none; }
.gl-topic-row:hover { background: var(--brand-light); }
.gl-topic-name { flex: 1; font-size: var(--text-xs); color: var(--n-600); min-width: 0; }

/* ─── Loading ─────────────────────────────────────────────────────────── */
.loading { text-align: center; padding: 60px var(--sp-4); color: var(--n-400); font-size: var(--text-md); }
.text-muted    { color: var(--n-400); font-size: var(--text-sm); }
.text-danger   { color: var(--danger); }
.text-warning  { color: var(--warning); }
.text-success  { color: var(--success); }
.text-brand    { color: var(--brand); }
.text-subdued  { color: var(--n-500); }
/* Tag pills for inline status text */
.tag-overdue   { color: var(--danger); font-weight: 600; }
.tag-due-soon  { color: var(--warning); font-weight: 600; }
.tag-on-track  { color: var(--n-500); }
.tag-pending   { color: var(--n-400); }

/* ─── Responsive ──────────────────────────────────────────────────────── */

/* Tablet landscape → smaller desktop (1024px) */
@media (max-width: 1024px) {
  .main-content { padding: var(--sp-5) var(--sp-5); }
  .metrics-grid { grid-template-columns: repeat(3, 1fr); }
  .phase-steps { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet portrait (768px) */
@media (max-width: 768px) {
  .hero { grid-template-columns: 1fr; padding: 40px var(--sp-5); }
  .workflow-steps { grid-template-columns: 1fr 1fr; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .analysis-grid { grid-template-columns: 1fr; }
  .phase-steps { grid-template-columns: 1fr 1fr; }
  /* secondary-sidebar is now a slide-in drawer on mobile — see .mob-sb-* rules */
  .main-content { padding: var(--sp-4) var(--sp-4); }
  .scope-bar { padding: 0 12px; }
  .home-assess-grid { grid-template-columns: 1fr; }
  .home-stat-strip { grid-template-columns: repeat(2, 1fr); }
  .gl-chapter-header { flex-wrap: wrap; }
  .gl-chapter-right { width: 100%; }
  .gl-bar-wrap { width: 100%; }
  .gl-stat-strip { flex-wrap: wrap; }
  .gl-stat { min-width: 120px; }
  .form-grid { grid-template-columns: 1fr; }
  .doc-gen-grid { grid-template-columns: 1fr; }
  .filter-row { flex-direction: column; align-items: stretch; }
  .filter-row select,
  .filter-row input[type="text"] { width: 100%; min-width: auto; }
  .assess-grid { grid-template-columns: 1fr; }
  .modal { padding: var(--sp-5); border-radius: var(--r-lg); }
  .card { padding: var(--sp-4); }
  .main-header h2 { font-size: var(--text-xl); }
  .tr-stat-strip { grid-template-columns: repeat(2, 1fr); display: grid; }
  .dom-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet: collapse sidebar to icons only */
@media (max-width: 768px) {
  .sidebar { width: 60px; }
  .sidebar-logo-text, .sidebar-link-label, .sidebar-group-label, .sidebar-zone-label, .sidebar-zone-divider, .sb-assess-chip-text, .sb-assess-chip-swap { display: none; }
  .sidebar-logo { padding: 14px; justify-content: center; }
  .sidebar-nav { padding: 10px 6px; }
  .sidebar-link { padding: 9px; justify-content: center; }
  .sidebar-bottom { padding: 8px 6px 10px; align-items: center; }
  /* Collapsed search trigger — icon only */
  .sb-search-trigger { margin: 6px 4px 2px; padding: 9px; justify-content: center; }
  .sb-search-trigger-text, .sb-search-kbd { display: none; }
}

/* Mobile (480px) */
@media (max-width: 480px) {
  .dashboard-layout { flex-direction: column; }
  .sidebar { width: 100%; height: 52px; flex-direction: row; padding: 0 var(--sp-3); border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); }
  .sidebar-logo { padding: 0; margin-right: 8px; border: none; }
  .sidebar-logo-text { display: none; }
  .sidebar-nav { flex-direction: row; flex: 1; justify-content: center; gap: 2px; padding: 0; overflow-x: auto; scrollbar-width: none; }
  .sidebar-sep { display: none; }
  .sidebar-zone-label, .sidebar-group-label { display: none; }
  .sidebar-link-label { display: none; }
  .sidebar-link { padding: 7px 8px; justify-content: center; }
  .sb-search-trigger { display: none; }
  .sidebar-bottom { flex-direction: row; padding: 0; border: none; margin-top: 0; margin-left: 8px; }
  .right-panel-body { flex-direction: column; }
  .card { padding: var(--sp-3); border-radius: var(--r-md); }
  .metrics-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .home-stat-strip { grid-template-columns: 1fr 1fr; }
  .tr-stat-strip { grid-template-columns: 1fr 1fr; display: grid; }
  .dom-cards { grid-template-columns: 1fr; }
  .filter-row .btn-sm { width: 100%; justify-content: center; }
  .bulk-action-bar { flex-direction: column; align-items: flex-start; }
  .modal-overlay { padding: var(--sp-3); align-items: flex-end; }
  .modal { border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 88vh; }
  .main-header { flex-direction: column; gap: var(--sp-2); }
  .header-actions { flex-wrap: wrap; }
  .ws-kpi-strip { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
  .ws-quick-actions { flex-wrap: wrap; }
}


/* ─── Maturity Trend Chart ──────────────────────────────────────────────── */
.trend-chart-wrap {
  padding: 12px 20px 8px;
  overflow-x: auto;
}
.trend-chart-wrap svg text { font-family: -apple-system, 'Segoe UI', Arial, sans-serif; }

/* ─── Activity Feed ─────────────────────────────────────────────────────── */

.af-loading {
  text-align: center;
  padding: 40px;
  color: var(--n-400);
  font-size: var(--text-sm);
}

.af-date-group { border-bottom: 1px solid var(--n-100); }
.af-date-group:last-child { border-bottom: none; }

.af-date-label {
  padding: 8px 20px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--n-500);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--n-50);
  border-bottom: 1px solid var(--n-100);
  position: sticky;
  top: 0;
  z-index: 1;
}

.af-entries { display: flex; flex-direction: column; }

.af-entry {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: 12px 20px;
  border-bottom: 1px solid var(--n-100);
  cursor: pointer;
  transition: background var(--t-fast);
}
.af-entry:last-child { border-bottom: none; }
.af-entry:hover { background: var(--brand-light); }

.af-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--n-0);
  flex-shrink: 0;
  margin-top: 2px;
}

.af-entry-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.af-entry-top {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--n-600);
}
.af-entry-user { font-weight: 700; color: var(--n-800); }
.af-entry-action { color: var(--n-500); }
.af-entry-control {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.af-entry-control:hover { text-decoration: underline; }

.af-entry-change {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.af-val {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  border: 1px solid transparent;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.af-val-old { background: var(--n-100); }
.af-arrow { color: var(--n-400); font-size: var(--text-xs); flex-shrink: 0; }
.af-reason {
  font-size: var(--text-xs);
  color: var(--n-500);
  font-style: italic;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.af-entry-meta { display: flex; gap: 6px; align-items: center; }

.af-entry-time {
  font-size: var(--text-xs);
  color: var(--n-400);
  white-space: nowrap;
  padding-top: 4px;
  flex-shrink: 0;
}

/* Pager */
.af-pager {
  display: flex;
  align-items: center;
  gap: 8px;
}
.af-pager-btn {
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  border: 1.5px solid var(--n-200);
  border-radius: var(--r-sm);
  background: var(--n-0);
  color: var(--n-600);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.af-pager-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.af-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.af-pager-info { font-size: var(--text-xs); color: var(--n-500); }

@media (max-width: 768px) {
  .af-entry { grid-template-columns: 32px 1fr; }
  .af-entry-time { display: none; }
  .af-entry-top { font-size: var(--text-xs); }
}

/* ─── Gap Analysis ──────────────────────────────────────────────────────── */

/* Entry button in Controls header */
.gap-entry-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--danger-light);
  border: 1.5px solid var(--danger-border);
  border-radius: var(--r-md);
  padding: 8px 16px;
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.gap-entry-btn:hover { background: var(--danger-border); box-shadow: var(--shadow-xs); }
.gap-entry-count {
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1;
}
.gap-entry-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--danger);
  white-space: nowrap;
}

/* Overview card */
.gap-ov-body {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}
.gap-ov-stats {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  flex: 1;
  flex-wrap: wrap;
  border-right: 1px solid var(--n-200);
}
.gap-ov-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 70px;
}
.gap-ov-stat-val {
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1;
}
.gap-ov-stat-lbl {
  font-size: var(--text-xs);
  color: var(--n-500);
  font-weight: 500;
}
.gap-ov-progress-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 160px;
}
.gap-ov-progress-bar {
  display: flex;
  height: 8px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--n-100);
}
.gap-ov-progress-cov { height: 100%; background: var(--success); }
.gap-ov-progress-gap { height: 100%; background: var(--danger); }
.gap-ov-rag-label { font-size: var(--text-xs); font-weight: 600; }

.gap-ov-domains {
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 220px;
  flex: 0 0 280px;
}
.gap-ov-domains-title {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--n-500);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.gap-ov-domain-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
}
.gap-ov-domain-name {
  font-size: var(--text-xs);
  color: var(--n-700);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gap-ov-domain-bar-wrap {
  width: 80px;
  height: 5px;
  background: var(--n-100);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.gap-ov-domain-bar {
  height: 100%;
  border-radius: var(--r-pill);
  transition: width var(--t-base);
}
.gap-ov-domain-val {
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .gap-ov-stats { border-right: none; border-bottom: 1px solid var(--n-200); }
  .gap-ov-domains { flex: 1 1 100%; border-top: 1px solid var(--n-200); }
  .gap-entry-btn { padding: 6px 10px; }
}

.gap-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.gap-stat {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-xs);
}
.gap-stat-val {
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1;
  color: var(--n-800);
}
.gap-stat-lbl {
  font-size: var(--text-xs);
  color: var(--n-500);
  font-weight: 500;
}
.gap-stat-red   .gap-stat-val { color: var(--danger); }
.gap-stat-orange .gap-stat-val { color: var(--warning); }
.gap-stat-amber .gap-stat-val { color: var(--warning); }
.gap-stat-green .gap-stat-val { color: var(--success); }

.gap-progress-wrap { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.gap-progress-bar  { display: flex; height: 8px; border-radius: var(--r-pill); overflow: hidden; background: var(--n-100); }
.gap-progress-fill { height: 100%; transition: width var(--t-base); }
.gap-progress-covered { background: var(--success); }
.gap-progress-gap     { background: var(--danger); }
.gap-progress-legend  { display: flex; gap: 10px; align-items: center; font-size: var(--text-xs); color: var(--n-500); flex-wrap: wrap; }
.gap-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.gap-legend-covered { background: var(--success); }
.gap-legend-gap     { background: var(--danger); }

/* Domain horizontal bar chart */
.gap-hbar-chart {
  padding: 12px 20px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.gap-hbar-row {
  display: grid; grid-template-columns: 180px 1fr 64px;
  align-items: center; gap: 12px;
  cursor: pointer; border-radius: 8px;
  padding: 6px 4px; transition: background .12s;
}
.gap-hbar-row:hover { background: var(--n-50); }
.gap-hbar-label {
  font-size: var(--text-xs); font-weight: 600; color: var(--n-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gap-hbar-track {
  height: 16px; border-radius: 8px; overflow: hidden;
  background: var(--n-100); display: flex;
}
.gap-hbar-seg {
  height: 100%; transition: width .3s ease; min-width: 0;
}
.gap-hbar-nc  { background: var(--rose); }
.gap-hbar-ni  { background: var(--amber); }
.gap-hbar-ok  { background: var(--brand-pale); }
.gap-hbar-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
}
.gap-hbar-count { font-size: var(--text-base); font-weight: 800; line-height: 1; }
.gap-hbar-pct   { font-size: 10px; color: var(--n-400); }
.gap-hbar-legend {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--text-2xs); color: var(--n-500);
}
.gap-hbar-leg-dot {
  width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0;
}
@media (max-width: 700px) {
  .gap-hbar-row { grid-template-columns: 120px 1fr 48px; }
}
.gap-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-pill);
}
.gap-tag-nc { background: var(--rose-light); color: var(--danger); }
.gap-tag-ni { background: var(--amber-light); color: var(--warning); }

/* Gap controls table */
.gap-ctrl-row { cursor: pointer; }
.gap-ctrl-row:hover td { background: var(--brand-light); }
.gap-ctrl-name { max-width: 360px; font-size: var(--text-sm); }

.gap-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.gap-badge-nc { background: var(--danger-light);  color: var(--danger);  border: 1px solid var(--danger-border); }
.gap-badge-ni { background: var(--warning-light); color: var(--warning); border: 1px solid var(--warning-border); }

.gap-missing-evidence {
  font-size: var(--text-xs);
  color: var(--warning);
  font-weight: 600;
}

.gap-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--n-100);
  background: var(--n-50);
}
.gap-pag-info {
  font-size: var(--text-xs);
  color: var(--n-500);
}
.gap-pag-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}
.gap-pag-pages {
  display: flex;
  gap: 2px;
}
.gap-pag-btn {
  padding: 4px 10px;
  font-size: var(--text-xs);
  border: 1.5px solid var(--n-200);
  border-radius: var(--r-sm);
  background: var(--n-0);
  color: var(--n-600);
  cursor: pointer;
  transition: background 0.15s;
}
.gap-pag-btn:hover:not(:disabled) { background: var(--brand-pale); border-color: var(--brand); color: var(--brand); }
.gap-pag-btn:disabled { opacity: 0.4; cursor: default; }
.gap-pag-btn--active { background: var(--brand); border-color: var(--brand); color: var(--n-0); font-weight: 600; }
.pag-info { font-size: var(--text-xs); color: var(--n-500); white-space: nowrap; }
.pag-btns { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.pag-ellipsis { padding: 0 4px; font-size: var(--text-xs); color: var(--n-400); line-height: 1; }
.cmap-pag { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-top: 1px solid var(--n-200); flex-wrap: wrap; }

.filter-select-sm {
  padding: 5px 10px;
  font-size: var(--text-sm);
  border: 1.5px solid var(--n-200);
  border-radius: var(--r-sm);
  background: var(--n-0);
  color: var(--n-700);
  cursor: pointer;
}
.filter-select-sm:focus { border-color: var(--brand); outline: none; }

/* ─── Essential Eight ──────────────────────────────────────────────────── */

/* Overall card */
.e8-overall-card { background: var(--n-0); border: 1px solid var(--brand-border); border-radius: 14px; overflow: hidden; padding: 0; margin-bottom: 16px; }
.e8-overall-hdr {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08); padding: 16px 20px;
}
.e8-overall-hdr-left { display: flex; flex-direction: column; gap: 3px; }
.e8-ml-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 22px;
  background: color-mix(in srgb, var(--mlc, var(--brand-mid)) 12%, var(--n-0));
  color: var(--mlc, var(--brand-mid));
  border: 1.5px solid color-mix(in srgb, var(--mlc, var(--brand-mid)) 30%, transparent);
  font-size: var(--text-md); font-weight: 800; white-space: nowrap; letter-spacing: .01em;
}
.e8-ml-chip-label { font-size: var(--text-2xs); font-weight: 600; opacity: .8; }
.e8-overall-body { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; padding: 24px; background: #fafbff; }
.e8-overall-left { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 220px; padding: 20px 24px; border: 3px solid; border-radius: 14px; flex-shrink: 0; }
.e8-radar-wrap { margin-top: 16px; display: flex; align-items: center; justify-content: center; }
.e8-overall-num { font-size: 42px; font-weight: 800; line-height: 1; }
.e8-overall-text { font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; margin-top: 4px; text-align: center; }
.e8-overall-right { flex: 1; min-width: 240px; }
.e8-overall-hint { font-size: var(--text-sm); color: var(--n-500); margin: 8px 0 16px; }

/* Ladder */
.e8-ladder { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; }
.e8-ladder-step { padding: 6px 14px; border-radius: 8px; font-size: var(--text-sm); font-weight: 600; border: 2px solid var(--brand-border); color: var(--brand-mid); background: var(--brand-light); }
.e8-ladder-active { color: var(--n-0) !important; background: var(--brand) !important; border-color: var(--brand) !important; }
.e8-ladder-arrow { color: var(--brand-pale); font-size: var(--text-base); }

/* Strategy tile strip */
.e8-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.e8-tile { background: var(--n-50); border: 1px solid var(--n-200); border-radius: 10px; padding: 12px; cursor: pointer; transition: box-shadow .15s, background .15s, border-color .15s; text-align: center; }
.e8-tile:hover { filter: brightness(.97); box-shadow: 0 2px 8px rgba(0,0,0,.10); }
.e8-tile-icon { font-size: 22px; margin-bottom: 4px; }
.e8-tile-name { font-size: var(--text-2xs); font-weight: 600; color: var(--n-800); margin-bottom: 6px; line-height: 1.3; }
.e8-tile-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: var(--text-xs); font-weight: 700; margin-bottom: 4px; }
.e8-tile-count { font-size: var(--text-2xs); color: var(--n-400); }

/* Strategy detail cards */
.e8-strategies-grid { display: flex; flex-direction: column; gap: 12px; }
.e8-strategy-card { background: var(--n-0); border: 1px solid var(--brand-muted); border-radius: 14px; overflow: hidden; padding: 0; }
.e8-strat-top {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08); padding: 14px 18px;
}
.e8-strat-body { padding: 16px 18px; background: #fafbff; }
.e8-strat-title { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0; }
.e8-strat-icon { font-size: 22px; flex-shrink: 0; }
.e8-strat-title h4 { font-size: var(--text-base); font-weight: 800; color: var(--hero-text); margin-bottom: 2px; }
.e8-strat-title p { margin: 0; }
.e8-maturity-badge { padding: 10px 16px; border-radius: 10px; font-weight: 700; font-size: var(--text-md); text-align: center; white-space: nowrap; flex-shrink: 0; line-height: 1.4; }
.e8-rationale { font-size: var(--text-sm); color: var(--n-600); margin: 8px 0 12px; }

/* Per-level progress rows */
.e8-levels { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.e8-level-row { display: flex; align-items: center; gap: 10px; }
.e8-level-label { font-size: var(--text-xs); font-weight: 700; min-width: 32px; }
.e8-level-bar-wrap { flex: 1; height: 8px; background: var(--brand-tint); border-radius: 4px; overflow: hidden; }
.e8-level-bar { height: 100%; border-radius: 4px; transition: width .4s ease; }
.e8-level-stat { font-size: var(--text-xs); color: var(--n-500); min-width: 100px; text-align: right; }

/* Controls collapsible */
.e8-ctrl-details { margin-top: 4px; }
.e8-ctrl-details summary { cursor: pointer; font-size: var(--text-sm); color: var(--brand); font-weight: 500; padding: 6px 0; }
.e8-ctrl-table { margin-top: 8px; font-size: var(--text-xs); }


/* ─── ISM Import Modal ──────────────────────────────────────────────────── */
.import-option { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 2px solid var(--n-200); border-radius: 10px; cursor: pointer; margin-bottom: 12px; transition: border-color 0.15s, background 0.15s; }
.import-option:hover { border-color: var(--brand-muted); background: var(--brand-light); }
.import-option-selected { border-color: var(--brand) !important; background: var(--brand-light) !important; }
.import-option-icon { font-size: 22px; line-height: 1; padding-top: 2px; min-width: 28px; text-align: center; }
.import-option strong { font-size: var(--text-base); color: var(--n-800); display: block; margin-bottom: 4px; }
.import-option p { font-size: var(--text-sm); color: var(--n-600); margin: 0 0 4px; }
.import-option-safe { color: var(--brand) !important; font-weight: 500; }
.import-option-danger { color: var(--warning) !important; font-weight: 500; }

/* ─── ISM Versions ─────────────────────────────────────────────────────── */
.ism-compare-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.ism-compare-summary > div { padding: 16px; background: var(--n-50); border: 1px solid var(--n-200); border-radius: 10px; text-align: center; }
.ism-compare-summary strong { display: block; font-size: 28px; font-weight: 700; color: var(--n-800); }
.ism-compare-summary span { font-size: var(--text-xs); color: var(--n-500); margin-top: 4px; display: block; }
.ism-compare-summary .positive { background: var(--success-light); border-color: var(--success-border); }
.ism-compare-summary .positive strong { color: var(--brand); }
.ism-compare-summary .warn { background: var(--amber-light); border-color: var(--warning-border); }
.ism-compare-summary .warn strong { color: var(--warning); }
.ism-compare-summary .danger { background: var(--danger-light); border-color: var(--danger-border); }
.ism-compare-summary .danger strong { color: var(--danger); }

/* ─── Risk Register ─────────────────────────────────────────────────────── */

/* Risk badge (inline rating pill) */
.risk-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 12px; font-size: var(--text-2xs); font-weight: 700; white-space: nowrap; }
.risk-very_low  { background: var(--success-light); color: var(--success-dark); }
.risk-low       { background: var(--success-border); color: var(--success-dark); }
.risk-medium    { background: var(--warning-light); color: var(--warning-dark); }
.risk-high      { background: var(--orange-border); color: #c2410c; }
.risk-critical  { background: var(--danger-border); color: var(--danger-dark); }

/* "Raise Risk" button — amber tint to signal attention without danger */
.btn-risk { background: var(--amber-light); color: #b45309; border: 1px solid var(--warning-border); }
.btn-risk:hover { background: var(--warning-light); border-color: var(--amber); }

/* Risk modal — range slider layout */
.risk-matrix-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end; margin: 12px 0; }
.range-labels { display: flex; justify-content: space-between; font-size: var(--text-2xs); color: var(--n-400); margin-top: 2px; }
.risk-rating-display { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 4px; }
.risk-rating-label { font-size: var(--text-2xs); color: var(--n-500); font-weight: 600; }
input[type="range"] { width: 100%; accent-color: var(--brand); }

/* Summary layout */
.risk-summary-grid { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; }
.risk-heatmap-wrap { display: flex; gap: 6px; align-items: flex-start; }
.risk-heatmap-labels-y { display: flex; flex-direction: column; justify-content: space-around; height: 175px; font-size: var(--text-2xs); color: var(--n-400); font-weight: 600; padding-bottom: 4px; }
.risk-heatmap { display: grid; grid-template-columns: repeat(5, 34px); grid-template-rows: repeat(5, 34px); gap: 3px; }
.risk-matrix-cell { display: flex; align-items: center; justify-content: center; border-radius: 5px; font-size: var(--text-2xs); }
.risk-cell-very_low  { background: var(--success-light); }
.risk-cell-low       { background: var(--success-border); }
.risk-cell-medium    { background: var(--warning-light); }
.risk-cell-high      { background: var(--orange-border); }
.risk-cell-critical  { background: var(--danger-border); }
.risk-cell-dot { background: var(--n-800); color: var(--n-0); border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.risk-heatmap-labels-x { display: flex; justify-content: space-around; margin-top: 4px; font-size: var(--text-2xs); color: var(--n-400); font-weight: 600; width: 175px; }
.risk-heatmap-axis { font-size: 10px; color: var(--n-400); text-align: center; margin-top: 2px; }

/* Risk matrix editor */
.rm-grid { border-collapse: collapse; }
.rm-grid th, .rm-grid td { padding: 3px; text-align: center; vertical-align: middle; }
.rm-axis-label { font-size: var(--text-2xs); color: var(--n-500); text-align: right; padding-right: 6px; max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-cell-sel { width: 84px; padding: 3px 4px; font-size: var(--text-2xs); border-radius: 5px; border: 1px solid var(--n-700); cursor: pointer; font-weight: 600; }
.rm-sel-very_low  { background: var(--success-light); color: var(--success-dark); border-color: var(--success-border); }
.rm-sel-low       { background: var(--success-border); color: var(--success-dark); border-color: var(--success-border); }
.rm-sel-medium    { background: var(--warning-light); color: var(--warning-dark); border-color: var(--warning-border); }
.rm-sel-high      { background: var(--orange-border); color: #9a3412; border-color: #fdba74; }
.rm-sel-critical  { background: var(--danger-border); color: var(--danger-dark); border-color: var(--danger-border); }
.rm-lbl-input { font-size: var(--text-xs) !important; }

/* Stat bar column */
.risk-stat-col { display: flex; flex-direction: column; gap: 10px; }
.risk-stat-row { display: flex; align-items: center; gap: 10px; }
.risk-stat-bar-wrap { flex: 1; height: 8px; background: var(--n-100); border-radius: 4px; overflow: hidden; }
.risk-stat-bar { height: 100%; border-radius: 4px; transition: width .4s ease; min-width: 3px; }
.risk-stat-count { font-size: var(--text-sm); font-weight: 700; color: var(--n-800); min-width: 24px; text-align: right; }

/* Risk cards */
.risk-filter-row { display: flex; gap: 10px; margin-bottom: 14px; }
.risk-card { border: 1px solid var(--n-200); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; border-left-width: 4px; }
.risk-card-critical { border-left-color: var(--danger); }
.risk-card-high     { border-left-color: var(--orange); }
.risk-card-medium   { border-left-color: var(--amber-border); }
.risk-card-low      { border-left-color: var(--success-border); }
.risk-card-very_low { border-left-color: #22c55e; }
.risk-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; padding: 12px 14px; background: var(--hero-bg); border-bottom: 1px solid rgba(255,255,255,.08); margin: -14px -16px 10px; }
.risk-card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
.risk-card-title strong { font-size: var(--text-base); color: var(--hero-text); }
.risk-card-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.risk-card-desc { font-size: var(--text-sm); color: var(--n-600); margin-bottom: 8px; line-height: 1.5; }
.risk-card-metrics { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.risk-metric { font-size: var(--text-xs); color: var(--n-500); display: flex; gap: 6px; }
.risk-metric span:first-child { font-weight: 600; color: var(--n-700); }
.risk-treatment-block { margin-top: 10px; font-size: var(--text-sm); }
.risk-treatment-block summary { cursor: pointer; color: var(--brand); font-weight: 500; padding: 4px 0; }
.risk-treatment-block p { margin-top: 6px; color: var(--n-600); line-height: 1.5; white-space: pre-wrap; }

/* ─── Sign-off Panel ────────────────────────────────────────────────────── */
.signoff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 16px; }
.so-section-title { font-size: var(--text-sm); font-weight: 700; color: var(--n-600); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }

/* Readiness checks */
.so-checks { display: flex; flex-direction: column; gap: 8px; }
.so-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: var(--text-sm); }
.so-check > span { font-size: 16px; font-weight: 700; flex-shrink: 0; width: 20px; text-align: center; }
.so-check div { display: flex; flex-direction: column; gap: 2px; }
.so-check strong { font-size: var(--text-sm); }
.so-check small  { font-size: var(--text-2xs); color: var(--n-500); }
.so-check-ok   { background: var(--success-light); border: 1px solid var(--success-border); }
.so-check-ok > span { color: var(--brand); }
.so-check-fail { background: var(--danger-light); border: 1px solid var(--danger-border); }
.so-check-fail > span { color: var(--danger); }
.so-check-info { background: var(--n-50); border: 1px solid var(--n-200); }
.so-check-info > span { color: var(--brand); }

/* Sign-off steps */
.signoff-steps { display: flex; flex-direction: column; gap: 0; }
.signoff-step { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--n-100); position: relative; }
.signoff-step:last-child { border-bottom: none; }
.so-step-icon { font-size: 20px; width: 32px; text-align: center; flex-shrink: 0; opacity: 0.4; }
.so-done .so-step-icon { opacity: 1; }
.so-next .so-step-icon { opacity: 0.7; }
.so-step-body { flex: 1; }
.so-step-body strong { font-size: var(--text-sm); display: block; color: var(--n-400); }
.so-done .so-step-body strong { color: var(--n-800); }
.so-next .so-step-body strong { color: var(--n-600); }
.so-meta    { font-size: var(--text-2xs); color: var(--n-400); display: block; margin-top: 2px; }
.so-comment { font-size: var(--text-xs); color: var(--n-500); font-style: italic; display: block; margin-top: 2px; }
.so-tick { color: var(--brand); font-size: 16px; font-weight: 700; align-self: center; }

/* Action block */
.signoff-action-block { background: var(--n-50); border: 1px solid var(--n-200); border-radius: 10px; padding: 16px; margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.signoff-action-block label { font-size: var(--text-xs); font-weight: 600; color: var(--n-600); margin-bottom: -4px; }
.so-warning { background: var(--amber-light); border: 1px solid var(--warning-border); border-radius: 6px; padding: 8px 12px; font-size: var(--text-xs); color: var(--warning-dark); }

/* Timeline */
.so-timeline { display: flex; flex-direction: column; gap: 0; }
.so-timeline-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--n-100); }
.so-timeline-row:last-child { border-bottom: none; }
.so-timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); flex-shrink: 0; margin-top: 5px; }
.so-timeline-row > div { display: flex; flex-direction: column; gap: 3px; }
.so-timeline-row strong { font-size: var(--text-sm); }

/* ─── Closure Cluster (.clo-* / .closure-grid / .snap-*) ───────────────── */

/* 2×2 wrapper */
.closure-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin-bottom: var(--sp-5); align-items: start;
}
@media (max-width: 1100px) { .closure-grid { grid-template-columns: 1fr; } }

/* Shared card shell */
.clo-card {
  background: var(--n-0); border: 1px solid var(--n-200);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
  overflow: hidden; display: flex; flex-direction: column;
}

/* Card header — dark band matching SPD hero */
/* ── POAM Gantt ─────────────────────────────────────────────────────────── */
.gtt-wrap { user-select: none; }
.gtt-label { cursor: default; }
.gtt-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: var(--text-xs); color: var(--n-500); }
.gtt-legend-item { display: flex; align-items: center; gap: 5px; }
.gtt-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }

.clo-card-header {
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-shrink: 0; position: relative; overflow: hidden;
}
.clo-card-header::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-mid, var(--brand-mid)));
}
.clo-card-header-left { display: flex; flex-direction: column; gap: 2px; }
.clo-card-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand-400);
}
.clo-card-title { font-size: var(--text-md); font-weight: 800; color: var(--hero-text); }

/* Status chips */
.clo-status-chip {
  font-size: var(--text-2xs); font-weight: 700; padding: 4px 11px;
  border-radius: 20px; white-space: nowrap; flex-shrink: 0;
}
.clo-chip-closed   { background: var(--success-light); color: #065f46; }
.clo-chip-accepted { background: var(--brand-light); color: var(--brand-active); }
.clo-chip-signed   { background: var(--warning-light); color: var(--warning-dark); }
.clo-chip-pending  { background: var(--n-100); color: var(--n-600); }

/* Card body */
.clo-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  flex: 1;
}
.clo-col {
  padding: 18px 20px;
}
.clo-col:first-child { border-right: 1px solid var(--n-100); }

.clo-section-label {
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--n-400); margin-bottom: 12px;
}

/* Readiness checks */
.clo-checks { display: flex; flex-direction: column; gap: 7px; }
.clo-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 12px; border-radius: 8px; font-size: var(--text-xs);
}
.clo-check-icon { font-size: var(--text-base); font-weight: 700; flex-shrink: 0; width: 18px; text-align: center; line-height: 1.6; }
.clo-check-body { display: flex; flex-direction: column; gap: 1px; }
.clo-check-body strong { font-size: var(--text-xs); font-weight: 700; }
.clo-check-body small  { font-size: var(--text-2xs); color: var(--n-500); }
.clo-check--ok   { background: var(--success-light); border: 1px solid var(--success-border); }
.clo-check--ok .clo-check-icon { color: var(--brand); }
.clo-check--fail { background: var(--danger-light); border: 1px solid var(--danger-border); }
.clo-check--fail .clo-check-icon { color: var(--danger); }
.clo-check--info { background: var(--n-50); border: 1px solid var(--n-200); }
.clo-check--info .clo-check-icon { color: var(--brand); }

/* Workflow steps — vertical connector style */
.clo-steps { display: flex; flex-direction: column; }
.clo-step  { display: flex; gap: 12px; }
.clo-step-track { display: flex; flex-direction: column; align-items: center; width: 24px; flex-shrink: 0; }
.clo-step-dot {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--n-200); border: 2px solid var(--n-200);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-2xs); font-weight: 800; color: var(--n-400);
  flex-shrink: 0;
}
.clo-step--done  .clo-step-dot { background: var(--brand); border-color: var(--brand); color: var(--n-0); }
.clo-step--next  .clo-step-dot { background: var(--n-0); border-color: var(--brand); color: var(--brand); }
.clo-step-line { width: 2px; flex: 1; min-height: 12px; background: var(--n-200); margin: 3px 0; }
.clo-step--done + .clo-step .clo-step-line { background: var(--brand); }
.clo-step-body { padding: 3px 0 14px; }
.clo-step-label { display: block; font-size: var(--text-xs); font-weight: 700; color: var(--n-400); }
.clo-step--done .clo-step-label { color: var(--n-800); }
.clo-step--next .clo-step-label { color: var(--brand); }
.clo-step-meta    { display: block; font-size: var(--text-2xs); color: var(--n-400); margin-top: 2px; }
.clo-step-comment { display: block; font-size: var(--text-2xs); color: var(--n-500); font-style: italic; margin-top: 2px; }

/* Action block */
.clo-action-block {
  background: var(--n-50); border: 1px solid var(--n-200);
  border-radius: 10px; padding: 14px 16px; margin-top: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.clo-action-warn {
  background: var(--amber-light); border: 1px solid var(--warning-border);
  border-radius: 6px; padding: 8px 10px; font-size: var(--text-2xs); color: var(--warning-dark);
}
.clo-field-label { font-size: var(--text-2xs); font-weight: 600; color: var(--n-600); margin-bottom: -4px; }
.clo-field-input {
  width: 100%; padding: 7px 10px; font-size: var(--text-sm);
  border: 1px solid var(--n-200); border-radius: 6px;
  background: var(--n-0); box-sizing: border-box;
}
.clo-field-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
.clo-role-notice { font-size: var(--text-xs); color: var(--n-400); padding: 10px 0; }

/* Timeline */
.clo-timeline { display: flex; flex-direction: column; }
.clo-tl-count { font-size: var(--text-2xs); color: var(--n-400); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 8px; border-bottom: 1px solid var(--n-100); margin-bottom: 4px; }
.clo-tl-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--n-50); }
.clo-tl-row:last-child { border-bottom: none; }
.clo-tl-dot {
  width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--brand);
  background: var(--brand); flex-shrink: 0; margin-top: 5px;
}
.clo-tl-body { display: flex; flex-direction: column; gap: 2px; }
.clo-tl-event   { font-size: var(--text-xs); font-weight: 700; color: var(--n-800); }
.clo-tl-meta    { font-size: var(--text-2xs); color: var(--n-400); }
.clo-tl-comment { font-size: var(--text-2xs); color: var(--n-500); font-style: italic; }
.clo-empty { font-size: var(--text-xs); color: var(--n-400); padding: 8px 0; margin: 0; }

/* ── Snapshot card body */
.clo-snap-body { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 16px; }
.snap-list { display: flex; flex-direction: column; gap: 8px; }
.snap-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: var(--n-50);
  border: 1px solid var(--n-100); border-radius: 8px;
}
.snap-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.snap-label { font-size: var(--text-sm); font-weight: 700; color: var(--n-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snap-meta  { font-size: var(--text-2xs); color: var(--n-400); }
.snap-row-stats { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.snap-pct-bar { width: 80px; height: 6px; background: var(--n-200); border-radius: 3px; overflow: hidden; }
.snap-pct-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.snap-pct-val  { font-size: var(--text-xs); font-weight: 800; min-width: 34px; text-align: right; }
.snap-ctrl-count { font-size: var(--text-2xs); color: var(--n-400); min-width: 40px; text-align: right; }
.clo-delete-btn {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--n-200); background: var(--n-0);
  font-size: var(--text-2xs); color: var(--n-400); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.clo-delete-btn:hover { background: var(--danger-light); border-color: var(--danger-border); color: var(--danger); }

/* Snapshot trend chart */
.snap-trend-wrap { display: flex; flex-direction: column; gap: 8px; }
.snap-trend-chart {
  background: var(--n-50); border: 1px solid var(--n-200);
  border-radius: 8px; padding: 10px 12px 24px; position: relative;
}
.snap-chart-labels { position: relative; height: 14px; margin-top: 4px; }
.snap-chart-lbl {
  position: absolute; transform: translateX(-50%);
  font-size: 10px; color: var(--n-400); white-space: nowrap;
}

/* Empty state */
.clo-empty-state {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 8px; padding: 28px 16px; color: var(--n-500);
}
.clo-empty-icon { font-size: 36px; }
.clo-empty-state p  { margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--n-600); }
.clo-empty-state small { font-size: var(--text-xs); color: var(--n-400); max-width: 280px; line-height: 1.5; }

/* ── Shared header button (light ghost, sits on dark header) ── */
.clo-header-btn {
  padding: 5px 12px; font-size: var(--text-2xs); font-weight: 700;
  border: 1px solid var(--brand-muted); border-radius: 6px;
  background: var(--n-0); color: var(--brand);
  cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.clo-header-btn:hover { background: var(--brand-light); border-color: var(--brand-pale); }

/* ── Framework Context card ── */
.fw-ctx-card { margin-bottom: 0; }
.fw-ctx-body { display: flex; flex-direction: column; gap: 10px; }
.fw-ctx-name { font-size: 18px; font-weight: 800; color: var(--n-800); }
.fw-ctx-desc  { font-size: var(--text-xs); color: var(--n-500); line-height: 1.5; }
.fw-ctx-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }

/* ── Gap Analysis card ── */
.gap-ov-card { margin-bottom: 16px; }

/* ── Guidelines Overview card body ── */
.guidelines-ov-body { padding: 14px 18px 18px; }
.guidelines-ov-legend { margin-bottom: 12px; }
.guidelines-ov-col-hdr {
  display: grid; grid-template-columns: 200px 1fr 40px 50px 32px;
  align-items: center; gap: 10px;
  padding: 0 12px; margin-bottom: 6px;
  font-size: var(--text-2xs); font-weight: 600; color: var(--n-400);
  text-transform: uppercase; letter-spacing: .04em;
}
.guidelines-ov-col-hdr span:nth-child(3),
.guidelines-ov-col-hdr span:nth-child(4) { text-align: right; }

/* ─── System Owner View ─────────────────────────────────────────────────── */

/* Stats row */
.so-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.so-stat-card { background: var(--n-50); border: 1px solid var(--n-200); border-radius: 10px; padding: 16px; text-align: center; }
.so-stat-card.so-stat-warn    { background: var(--amber-light); border-color: var(--warning-border); }
.so-stat-card.so-stat-partial { background: var(--brand-light); border-color: var(--brand-muted); }
.so-stat-card.so-stat-ok      { background: var(--success-light); border-color: var(--success-border); }
.so-stat-num   { display: block; font-size: 32px; font-weight: 700; color: var(--n-800); }
.so-stat-label { font-size: var(--text-xs); color: var(--n-500); margin-top: 4px; display: block; }
.so-stat-warn .so-stat-num    { color: var(--warning); }
.so-stat-partial .so-stat-num { color: var(--brand); }
.so-stat-ok .so-stat-num      { color: var(--brand); }
.so-progress-row { display: flex; align-items: center; gap: 12px; font-size: var(--text-sm); color: var(--n-500); }

/* Badge count in card headings */
.so-badge-count { display: inline-flex; align-items: center; justify-content: center; background: var(--n-200); color: var(--n-600); border-radius: 12px; font-size: var(--text-2xs); font-weight: 700; padding: 1px 8px; margin-left: 6px; }

/* Chapter collapsible groups */
.so-chapter-group { border: 1px solid var(--n-200); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.so-chapter-group > summary { cursor: pointer; padding: 10px 14px; font-size: var(--text-sm); font-weight: 600; background: var(--n-50); list-style: none; display: flex; align-items: center; gap: 8px; user-select: none; }
.so-chapter-group > summary::-webkit-details-marker { display: none; }
.so-chapter-group[open] > summary { border-bottom: 1px solid var(--n-200); }
.so-chapter-count { background: var(--n-200); color: var(--n-600); border-radius: 10px; padding: 1px 7px; font-size: var(--text-2xs); font-weight: 700; margin-left: auto; }

/* Individual control card */
.so-ctrl-card { border-bottom: 1px solid var(--n-100); background: var(--surface); }
.so-ctrl-card:last-child { border-bottom: none; }
.so-ctrl-card.so-ctrl-saved .so-ctrl-header { background: var(--success-light); }
.so-ctrl-header {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; flex-wrap: wrap;
  background: var(--surface);
  border-bottom: 1px solid var(--n-100);
}
.so-ctrl-name { font-size: var(--text-sm); font-weight: 500; flex: 1; min-width: 0; color: var(--n-800, #1e293b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-ctrl-sub  { font-size: var(--text-2xs); color: var(--n-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.btn-so-expand { margin-left: auto; flex-shrink: 0; background: var(--brand-light); color: var(--brand); border: 1px solid var(--brand-muted); }
.btn-so-expand:hover { background: var(--brand-tint); border-color: var(--brand); }

/* Inline edit form */
.so-ctrl-form { padding: 14px 16px; background: var(--n-25); border-top: 1px solid var(--n-100); }
.so-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.so-form-full { grid-column: 1 / -1; }
.so-form-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ─── SSP-Annex (System Security Plan — Annex) ───────────────────────── */


/* Summary strip */
.soa-summary-strip { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.soa-stat { background: var(--n-50); border: 1px solid var(--n-200); border-radius: 8px; padding: 12px 20px; text-align: center; min-width: 90px; }
.soa-stat span { display: block; font-size: 26px; font-weight: 700; color: var(--n-800); }
.soa-stat small { font-size: var(--text-2xs); color: var(--n-500); }
.soa-stat-in  { background: var(--brand-light); border-color: var(--brand-muted); }
.soa-stat-in span  { color: var(--brand-hover); }
.soa-stat-na  { background: var(--n-100); border-color: var(--n-300); }
.soa-stat-eff { background: var(--success-light); border-color: var(--success-border); }
.soa-stat-eff span { color: var(--brand); }

/* Sign-off strip */
.soa-signoff-strip { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.soa-signoff-cell { flex: 1; min-width: 200px; padding: 10px 14px; border-radius: 8px; font-size: var(--text-sm); font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.soa-signoff-cell small { font-size: var(--text-2xs); font-weight: 400; color: var(--n-500); }

/* Chapter count */
.soa-ch-count { font-size: var(--text-xs); color: var(--n-400); font-weight: 400; }

/* SoA table */
.soa-table { width: 100%; border-collapse: collapse; font-size: var(--text-2xs); margin-bottom: 20px; }
.soa-table th { background: var(--n-800); color: var(--n-50); padding: 7px 10px; text-align: left; font-weight: 600; white-space: nowrap; position: sticky; top: 0; }
.soa-table td { padding: 6px 10px; border-bottom: 1px solid var(--n-100); vertical-align: top; }
.soa-table tr:hover td { background: var(--n-50); }
.soa-row-na td { opacity: 0.55; background: var(--n-50); }
.soa-sub { max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--n-500); }
.soa-evidence { text-align: center; color: var(--brand); }
.soa-yes { color: var(--success); font-weight: 600; }
.soa-no  { color: var(--n-400); }
.soa-status { font-size: 10px; }
.soa-impl-eff  { color: var(--success); font-weight: 600; font-size: 10px; }
.soa-impl-na   { color: var(--n-400); font-size: 10px; }
.soa-impl-bad  { color: var(--danger); font-weight: 600; font-size: 10px; }
.soa-impl-mid  { color: var(--warning); font-size: 10px; }

/* ─── Control Inheritance ──────────────────────────────────────────────── */
.ctrl-section-inherit summary { color: #0f766e; }
.inherit-active { background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.inherit-active-msg { font-size: var(--text-sm); color: #0f766e; margin-bottom: 4px; }
.inherit-active-fields { font-size: var(--text-xs); color: var(--n-500); margin-bottom: 8px; }
.inherit-active-fields code { background: var(--n-200); padding: 1px 5px; border-radius: 4px; }
.inherit-table td, .inherit-table th { white-space: nowrap; }
.inherit-picker { padding: 4px 0; }
.inherit-picker-title { font-size: var(--text-sm); color: var(--n-700); margin-bottom: 8px; }

/* ─── Organisation-Specific Controls ─────────────────────────────────── */
.oc-id-badge { background: var(--brand-soft); color: var(--purple); font-size: var(--text-2xs); font-weight: 700; padding: 2px 7px; border-radius: 4px; font-family: monospace; white-space: nowrap; }
.badge-count { background: var(--n-200); color: var(--n-600); font-size: var(--text-xs); font-weight: 600; padding: 1px 8px; border-radius: 10px; margin-left: 8px; }

/* ─── Framework Registry ──────────────────────────────────────────────── */
.fw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 8px; }

/* ── Framework zones (Platform / Your Frameworks) ────────────────────── */
.fw-zone { margin-bottom: 36px; }
.fw-zone-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; margin-bottom: 16px;
  border-bottom: 2px solid var(--n-200);
}
.fw-zone-header-left { display: flex; flex-direction: column; gap: 2px; }
.fw-zone-label {
  font-size: var(--text-sm); font-weight: 700; color: var(--n-900); letter-spacing: .01em;
}
.fw-zone-sublabel { font-size: var(--text-2xs); color: var(--n-500); }
.fw-zone-count {
  font-size: var(--text-xs); font-weight: 700; padding: 2px 10px; border-radius: 10px;
  background: var(--n-100); color: var(--n-600); flex-shrink: 0;
}

/* Category groups within a zone */
.fw-category-group { margin-bottom: 24px; }
.fw-category-group-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px; padding-bottom: 5px;
  border-bottom: 1px solid var(--n-200);
}
.fw-category-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--n-500);
}
.fw-category-group-count {
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px;
  background: var(--n-100); color: var(--n-600);
}

/* Card variants — light theme baseline */
.fw-card--builtin { border: 1.5px solid var(--n-200); background: var(--n-0); }
.fw-card--builtin:hover { border-color: var(--brand); background: var(--brand-light); box-shadow: 0 0 0 3px rgba(99,102,241,.10); }
.fw-card--builtin .fw-card-name { color: var(--n-900); }
.fw-card--builtin .fw-card-desc { color: var(--n-500); }
.fw-card--builtin .fw-card-version { color: var(--brand); }
.fw-card--builtin .fw-card-select-hint { color: var(--n-400); }
.fw-card--builtin:hover .fw-card-select-hint,
.fw-card--builtin.fw-card-active .fw-card-select-hint { color: var(--brand); }
.fw-card--builtin.fw-card-active { border-color: var(--brand); background: var(--brand-light); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }

.fw-card--custom { border: 1.5px dashed var(--n-300); background: var(--n-0); }
.fw-card--custom:hover { border-style: solid; border-color: var(--brand-mid); background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(99,102,241,.08); }
.fw-card--custom .fw-card-name { color: var(--n-900); }
.fw-card--custom .fw-card-desc { color: var(--n-500); }
.fw-card--custom .fw-card-version { color: var(--purple); }
.fw-card--custom .fw-card-select-hint { color: var(--n-400); }
.fw-card--custom:hover .fw-card-select-hint,
.fw-card--custom.fw-card-active .fw-card-select-hint { color: var(--brand); }
.fw-card--custom.fw-card-active { border-style: solid; border-color: var(--brand-mid); background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }

/* Empty state for "Your Frameworks" zone */
.fw-imported-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 24px; text-align: center;
  border: 1px dashed var(--n-300); border-radius: 12px;
  background: var(--n-50);
}
.fw-imported-empty-icon { font-size: 28px; opacity: .5; margin-bottom: 10px; }
.fw-imported-empty-title { font-size: var(--text-base); font-weight: 600; color: var(--n-700); margin-bottom: 4px; }
.fw-imported-empty-sub { font-size: var(--text-xs); color: var(--n-500); line-height: 1.5; max-width: 360px; }
.fw-card { border-radius: 12px; padding: 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s, border-style .1s; position: relative; }
.fw-card-name { font-weight: 700; font-size: var(--text-base); margin-bottom: 2px; }
.fw-card-version { font-size: var(--text-2xs); font-weight: 600; margin-bottom: 6px; }
.fw-card-desc { font-size: var(--text-xs); line-height: 1.5; }
.fw-card-select-hint {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--n-400); margin-bottom: 6px; transition: color .15s;
}
.fw-card:hover .fw-card-select-hint { color: var(--brand); }
.fw-card-active .fw-card-select-hint { color: var(--brand); }
.fw-badge { background: var(--brand-light); color: var(--brand-active); font-size: var(--text-2xs); font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.fw-group-block { border: 1px solid var(--n-200); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.fw-group-block > summary { padding: 10px 14px; font-weight: 600; font-size: var(--text-sm); color: var(--n-700); cursor: pointer; background: var(--n-50); }
.fw-group-block > summary:hover { background: var(--n-100); }
.fw-ctrl-table { width: 100%; border-collapse: collapse; }
.fw-ctrl-table td { padding: 7px 14px; border-top: 1px solid var(--n-100); font-size: var(--text-sm); }
.fw-ctrl-table td:first-child { width: 120px; white-space: nowrap; }
.fw-subsection-row td { background: var(--n-50); color: var(--n-600); font-size: var(--text-xs); padding: 5px 14px; }

/* ─── OSCAL source badges ─────────────────────────────────────────────── */
.oscal-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.oscal-official  { background: var(--success-light); color: var(--success-dark); }
.oscal-community { background: var(--warning-light); color: var(--warning-dark); }
.oscal-builtin   { background: var(--n-200); color: var(--n-600); }
.oscal-custom    { background: var(--brand-soft); color: var(--purple); }
.oscal-scf       { background: var(--brand-soft); color: #4c1d95; }

/* ─── Generic data table (browse, diff, compare results) ─────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table th { padding: 8px 12px; background: var(--n-50); border-bottom: 2px solid var(--n-200); font-weight: 700; font-size: var(--text-xs); color: var(--n-600); text-align: left; white-space: nowrap; }
.data-table td { padding: 7px 12px; border-bottom: 1px solid var(--n-100); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--n-50); }
.data-table td:first-child { white-space: nowrap; }

/* ─── Sticky-header scrollable table ─────────────────────────────────── */
.fw-table-wrap {
  overflow-x: auto; overflow-y: auto; max-height: 70vh;
  border: 1px solid var(--n-200); border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.fw-sticky-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--text-sm); color: var(--n-800); }
.fw-sticky-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--n-100); border-bottom: 2px solid var(--n-200);
  padding: 10px 14px; font-weight: 700; font-size: var(--text-xs); color: var(--n-600);
  text-align: left; white-space: nowrap; letter-spacing: .02em;
}
.fw-sticky-table td { padding: 10px 14px; border-bottom: 1px solid var(--n-100); vertical-align: top; font-size: var(--text-sm); color: var(--n-800); }
.fw-sticky-table tbody tr:last-child td { border-bottom: none; }
.fw-sticky-table tbody tr { transition: background .08s; }
.fw-sticky-table tbody tr:hover td { background: var(--purple-light); }
.fw-sticky-table td:first-child { white-space: nowrap; }

/* Boolean pill badges */
.fw-badge { display: inline-block; font-size: var(--text-2xs); font-weight: 700; padding: 2px 8px; border-radius: 10px; line-height: 1.5; white-space: nowrap; }
.fw-badge-yes { background: var(--brand-light); color: var(--brand-hover); border: 1px solid var(--brand-muted); }
.fw-badge-no  { background: var(--n-100); color: var(--n-400); border: 1px solid var(--n-200); }
.fw-bool-cell { text-align: center; white-space: nowrap; }

/* Cell content helpers */
.fw-ctrl-name { font-weight: 600; min-width: 160px; color: var(--n-900); }
.fw-ctrl-desc { max-width: 400px; white-space: normal; line-height: 1.6; color: var(--n-600); }
.fw-ctrl-meta { color: var(--n-600); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Browse toolbar ─────────────────────────────────────────────────── */
.fw-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 12px 0; border-bottom: 1px solid var(--n-200); margin-bottom: 12px;
}
.fw-toolbar-left  { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; flex-wrap: wrap; }
.fw-toolbar-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }

.fw-filter-search {
  height: 34px; padding: 0 12px 0 34px; border: 1px solid var(--n-200); border-radius: 8px;
  font-size: var(--text-sm); width: 220px; outline: none; background: var(--n-0); font-family: inherit;
  transition: border-color .15s, box-shadow .15s, width .2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 11px center;
}
.fw-filter-search:focus { border-color: var(--brand-pale); box-shadow: 0 0 0 3px rgba(99,102,241,.12); width: 280px; }

/* filter-input — generic search input used across filter bars */
.filter-input {
  height: 34px; padding: 0 12px 0 32px; border: 1px solid var(--n-200); border-radius: 8px;
  font-size: var(--text-sm); outline: none; background: var(--n-0); font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 10px center;
}
.filter-input:focus { border-color: var(--brand-pale); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }

/* Dropdown trigger button */
.fw-dropdown-wrap { position: relative; }
.fw-dropdown-btn {
  height: 32px; padding: 0 11px; border: 1.5px solid var(--n-200); border-radius: var(--r-md);
  background: var(--n-0); font-size: var(--text-base); color: var(--n-700); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-family: inherit; font-weight: 500;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.fw-dropdown-btn:hover          { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.fw-dropdown-btn.active         { border-color: var(--brand); background: var(--brand-light); color: var(--brand); font-weight: 600; box-shadow: 0 0 0 3px rgba(99,102,241,.09); }
.fw-dropdown-caret              { display:inline-block; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:.55; margin-left:4px; vertical-align:middle; flex-shrink:0; }
.tri-right                      { display:inline-block; width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:5px solid currentColor; opacity:.6; vertical-align:middle; flex-shrink:0; transition:transform .15s; }
.tri-down                       { display:inline-block; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:.6; vertical-align:middle; flex-shrink:0; transition:transform .15s; }
.fw-filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--brand); color: var(--n-0); font-size: 10px; font-weight: 800; line-height: 1;
}

/* Dropdown panel — position/top/left/z-index set by _fwToggleDropdown() at runtime */
.fw-dropdown-panel {
  position: fixed; z-index: 9990;
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.16); min-width: 240px;
}
.fw-dropdown-scroll { max-height: 300px; overflow-y: auto; padding: 2px 0; }
.fw-dropdown-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 10px; border-top: 1px solid var(--n-100); gap: 8px;
}
.fw-dropdown-hint { font-size: var(--text-2xs); color: var(--n-400); }

/* Column picker / guideline dropdown items */
.cpd-search-wrap { padding: 5px 8px 4px; border-bottom: 1px solid var(--n-100); background: var(--n-50); border-radius: 10px 10px 0 0; }
.cpd-search {
  width: 100%; height: 28px; padding: 0 8px 0 28px; border: 1px solid var(--brand-border);
  border-radius: 6px; font-size: var(--text-xs); outline: none; box-sizing: border-box;
  background: var(--n-0); font-family: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 8px center;
  transition: border-color .15s, box-shadow .15s;
}
.cpd-search:focus { border-color: var(--brand-pale); box-shadow: 0 0 0 2px rgba(99,102,241,.12); }
.cpd-group       { padding: 0; }
.cpd-group-label {
  padding: 5px 12px 2px; font-size: 10px; font-weight: 800; color: var(--n-400);
  text-transform: uppercase; letter-spacing: .07em;
}
.cpd-item {
  display: flex; align-items: center; gap: 6px; padding: 2px 12px;
  font-size: var(--text-xs); color: var(--n-700); cursor: pointer; border-radius: 0;
  transition: background .08s;
}
.cpd-item:hover       { background: var(--n-50); }
.cpd-item.checked     { color: var(--brand-hover); background: #faf5ff; }
.cpd-item.sparse      { opacity: .6; }
.cpd-item input[type=checkbox] { accent-color: var(--brand); flex-shrink: 0; }
.cpd-item input[type=radio]    { accent-color: var(--brand); flex-shrink: 0; }
.cpd-label            { flex: 1; }
.cpd-count            { font-size: var(--text-2xs); font-weight: 700; color: var(--n-300); min-width: 26px; text-align: right; flex-shrink: 0; background: var(--n-100); border-radius: 4px; padding: 0 5px; }
.cpd-item.checked .cpd-count  { background: var(--brand-light); color: var(--brand-mid); }
.cpd-fill             { font-size: 10px; font-weight: 700; background: var(--warning-light); color: var(--warning-dark); border-radius: 4px; padding: 1px 5px; }
.cpd-fill.cpd-fill-sparse { background: var(--danger-light); color: var(--danger-dark); }
.cpd-empty            { padding: 16px; text-align: center; color: var(--n-400); font-size: var(--text-sm); }
.cpd-item-wrap        { display: contents; }
.fw-group-rename-input {
  width: 100%; border: 1px solid var(--brand-pale); border-radius: 5px; padding: 2px 6px;
  font-size: var(--text-sm); outline: none; background: var(--n-0); font-family: inherit;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

.fw-filter-pagesize { font-size: var(--text-sm); color: var(--n-500); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.fw-filter-pagesize select {
  height: 32px; padding: 0 8px; border: 1px solid var(--n-200); border-radius: 7px;
  font-size: var(--text-sm); font-family: inherit; background: var(--n-0); outline: none; cursor: pointer;
}
.fw-filter-clear {
  height: 32px; padding: 0 12px; font-size: var(--text-base); font-weight: 500; font-family: inherit;
  border: 1.5px solid var(--n-200); border-radius: var(--r-md); background: var(--n-0); color: var(--n-700);
  cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
  display: inline-flex; align-items: center;
}
.fw-filter-clear:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }

/* ─── Draggable column headers ────────────────────────────────────────── */
.fw-th-drag           { cursor: pointer; user-select: none; white-space: nowrap; transition: background .1s, color .1s; }
.fw-th-drag:hover     { background: var(--n-200) !important; color: var(--brand-hover); }
.fw-th-drag:active    { cursor: grabbing; }
.fw-th-dragging       { opacity: .35; }
.fw-th-drag-handle    { font-size: 10px; color: var(--n-300); margin-left: 4px; pointer-events: none; }
.fw-th-sorted         { color: var(--brand-hover) !important; background: var(--brand-light) !important; }
.fw-th-sort-icon      { font-size: 9px; margin-left: 4px; opacity: .8; }
.fw-empty-cell        { text-align: center; color: var(--n-400); padding: 32px 24px !important; font-size: var(--text-sm); }

/* ─── Drag-to-reorder rows ───────────────────────────────────────────── */
.drag-handle            { cursor: grab; color: var(--n-300); font-size: var(--text-base); padding: 0 6px; line-height: 1; user-select: none; }
.drag-handle:active     { cursor: grabbing; }
.drag-row-dragging      { opacity: .35; }
.drag-row-over          { outline: 2px dashed var(--brand); outline-offset: -1px; }

/* ─── Pagination ─────────────────────────────────────────────────────── */
.fw-pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 2px 4px; flex-wrap: wrap; gap: 8px;
}
.fw-page-info { font-size: var(--text-xs); color: var(--n-500); font-weight: 500; }
.fw-page-btns { display: flex; gap: 3px; flex-wrap: wrap; }
.fw-page-btn {
  min-width: 32px; height: 30px; padding: 0 8px; border: 1px solid var(--n-200);
  border-radius: 6px; background: var(--n-0); font-size: var(--text-sm); color: var(--n-600);
  cursor: pointer; transition: all .1s; font-family: inherit;
}
.fw-page-btn:hover:not(:disabled) { background: var(--n-100); border-color: var(--n-300); color: var(--n-800); }
.fw-page-btn.active { background: var(--brand); border-color: var(--brand); color: var(--n-0); font-weight: 700; }
.fw-page-btn:disabled { opacity: .3; cursor: default; }
.fw-page-ellipsis { font-size: var(--text-sm); color: var(--n-300); padding: 0 3px; line-height: 30px; }

/* ─── Framework Version Panel ─────────────────────────────────────────── */
.fw-version-table td { padding: 8px 12px; vertical-align: middle; }
.fw-version-table th { padding: 8px 12px; background: var(--n-50); border-bottom: 2px solid var(--n-200); font-weight: 700; font-size: var(--text-2xs); color: var(--n-500); text-transform: uppercase; letter-spacing: .06em; text-align: left; }
.fw-version-active { font-weight: 600; color: var(--brand); }

/* Diff result summary bar */
.fw-diff-summary { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.fw-diff-summary > div { background: var(--n-50); border: 1px solid var(--n-200); border-radius: 8px; padding: 10px 18px; text-align: center; min-width: 90px; }
.fw-diff-summary > div strong { display: block; font-size: 22px; font-weight: 700; color: var(--n-800); }
.fw-diff-summary > div span { font-size: var(--text-2xs); color: var(--n-500); }
.fw-diff-summary .diff-added   { border-color: var(--success-border); background: var(--success-light); }
.fw-diff-summary .diff-added strong { color: var(--success-dark); }
.fw-diff-summary .diff-removed { border-color: var(--danger-border); background: var(--danger-light); }
.fw-diff-summary .diff-removed strong { color: var(--danger-dark); }
.fw-diff-summary .diff-modified { border-color: var(--warning-border); background: var(--amber-light); }
.fw-diff-summary .diff-modified strong { color: var(--warning-dark); }

/* Diff section labels */
.fw-diff-section { font-size: var(--text-xs); font-weight: 700; padding: 6px 0 4px; margin-top: 12px; text-transform: uppercase; letter-spacing: .05em; }
.fw-diff-section.added   { color: var(--success-dark); }
.fw-diff-section.removed { color: var(--danger-dark); }
.fw-diff-section.modified { color: var(--warning-dark); }

/* FW-02 — collapsible diff groups + change tags */
.fw-diff-search-row { margin-bottom: 12px; }
.fw-diff-group { margin-bottom: 12px; border: 1px solid var(--n-200); border-radius: 8px; overflow: hidden; }
.fw-diff-group-hdr {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; padding: 8px 14px; cursor: pointer;
  text-align: left; border-radius: 0;
}
.fw-diff-group-hdr:hover { filter: brightness(.97); }
.fw-diff-group-hdr.added   { background: var(--success-light); }
.fw-diff-group-hdr.removed { background: var(--danger-light); }
.fw-diff-group-hdr.modified { background: var(--amber-light); }
.fw-diff-group-count { margin-left: 6px; font-weight: 400; opacity: .7; font-size: var(--text-2xs); }
.fw-diff-group-chevron { font-size: 12px; color: var(--n-400); transition: transform var(--t-fast); }
.fw-diff-group--collapsed .fw-diff-group-chevron { transform: rotate(-90deg); }
.fw-diff-group-body { border-top: 1px solid var(--n-200); }
.fw-diff-changes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.fw-diff-change-tag { font-size: 11px; background: var(--warning-light); border: 1px solid var(--amber-border); border-radius: 4px; padding: 1px 6px; color: #78350f; white-space: nowrap; }
.fw-diff-change-tag em { color: #9a3412; font-style: normal; }
.fw-diff-change-tag strong { color: var(--success-dark); }

/* Compare report — drift-style counter tiles + tabbed sections */
.fw-cmp-report { border: 1px solid var(--n-200); border-radius: 8px; overflow: hidden; font-size: var(--text-sm); }
.fw-cmp-header { display: flex; align-items: center; gap: 10px; padding: 13px 18px; background: var(--hero-bg); border-bottom: 1px solid rgba(255,255,255,.08); font-size: var(--text-sm); font-weight: 800; color: var(--hero-text); }
.fw-cmp-tiles { display: flex; gap: 0; border-bottom: 1px solid var(--n-200); }
.fw-cmp-tile {
  flex: 1; padding: 12px 16px; background: var(--tile-bg); border: none; border-right: 1px solid var(--n-200);
  cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px;
  transition: filter .1s; outline: none;
}
.fw-cmp-tile:last-child { border-right: none; }
.fw-cmp-tile:hover { filter: brightness(.97); }
.fw-cmp-tile.active { box-shadow: inset 0 -3px 0 var(--tile-tc); }
.fw-cmp-tile-num { font-size: 22px; font-weight: 700; color: var(--tile-tc); line-height: 1; }
.fw-cmp-tile-lbl { font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tile-tc); opacity: .7; }
.fw-cmp-impl-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--n-100); background: var(--n-0); }
.fw-cmp-section-hdr { font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 8px 12px; background: var(--n-50); }
.fw-cmp-section-changed { color: var(--warning-dark); background: var(--amber-light); }
.fw-cmp-section-ok { color: var(--success-dark); background: var(--success-light); }

/* ─── Validate Report ────────────────────────────────────────────────── */
.fw-validate-report { border: 1px solid var(--n-200); border-radius: 8px; padding: 14px 16px; background: var(--n-25); font-size: var(--text-sm); }
.fw-validate-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--hero-bg); border-bottom: 1px solid rgba(255,255,255,.08); padding: 13px 16px; margin: -14px -16px 14px; border-radius: 8px 8px 0 0; }

.fw-validate-counters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.fw-validate-counter { flex: 1; min-width: 100px; background: var(--n-0); border: 1px solid var(--n-200); border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.fw-validate-counter-err  { border-color: var(--danger-border); background: var(--danger-light); }
.fw-validate-counter-warn { border-color: var(--amber-border); background: var(--amber-light); }
.fw-validate-counter-num  { font-size: 22px; font-weight: 700; color: var(--n-800); line-height: 1; }
.fw-validate-counter-err  .fw-validate-counter-num { color: var(--danger); }
.fw-validate-counter-warn .fw-validate-counter-num { color: var(--warning); }
.fw-validate-counter-lbl  { font-size: var(--text-2xs); color: var(--n-500); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.fw-validate-summary {
  font-size: var(--text-sm); font-weight: 600; cursor: pointer; color: var(--n-750);
  padding: 4px 0; user-select: none;
}
.fw-validate-summary-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.fw-validate-summary-hint { display: block; font-size: var(--text-2xs); font-weight: 400; color: var(--n-400); margin-top: 2px; padding-left: 2px; }
.fw-validate-summary-err  { color: var(--danger-dark); }
.fw-validate-summary-warn { color: var(--warning-dark); }

/* Inline validate expand row in version table */
.fw-ver-validate-row > td { padding: 0 !important; border-bottom: 2px solid var(--brand) !important; }
.fw-ver-validate-cell { padding: 12px 16px !important; background: var(--n-50); }

/* Per-warning rows */
.fw-val-warn-row td { transition: opacity .15s; }
.fw-val-warn-field { font-size: var(--text-xs); color: var(--n-600); }
.fw-val-warn-msg   { font-size: var(--text-xs); color: var(--warning-dark); }
.fw-val-warn-action { width: 96px; text-align: right; }
.fw-val-warn-accepted .fw-val-warn-field,
.fw-val-warn-accepted .fw-val-warn-msg,
.fw-val-warn-accepted td:first-child { opacity: .45; }

/* Accept button */
.fw-val-accept-btn {
  font-size: var(--text-2xs); font-weight: 600; padding: 3px 9px; border-radius: 5px;
  border: 1px solid #d1d5db; background: #f9fafb; color: var(--n-750); cursor: pointer;
  white-space: nowrap; transition: background .15s, border-color .15s, color .15s;
  line-height: 1.4;
}
.fw-val-accept-btn:hover   { background: var(--success-light); border-color: var(--success-border); color: var(--success-dark); }
.fw-val-accept-btn.accepted { background: var(--success-light); border-color: #4ade80; color: var(--success-dark); font-weight: 700; }

/* Accepted count badge in summary */
.fw-val-accepted-badge {
  font-size: var(--text-2xs); font-weight: 600;
  background: var(--success-light); color: var(--success-dark); border: 1px solid #4ade80;
  border-radius: 4px; padding: 1px 7px; white-space: nowrap;
}

/* ─── Framework Context Card (assessment dashboard) ─────────────────── */
/* ── Framework context card (compact vertical, narrow column) ── */
/* fw-ctx-* body styles now defined in the clo-* additions block above */

/* ── Side-by-side row: fw-ctx (narrow) + gap analysis+trend (wide) ── */
.ov-side-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  margin-bottom: var(--sp-5);
  align-items: start;
}
.ov-side-row .card { margin-bottom: 0; }
.ov-side-row > *:last-child { grid-column: 2; }
@media (max-width: 900px) {
  .ov-side-row { grid-template-columns: 1fr; }
  .ov-side-row > *:last-child { grid-column: 1; }
}


/* ─── Import Panel ───────────────────────────────────────────────────── */
.fw-import-box { border: 1px solid var(--n-200); border-radius: 8px; padding: 14px 16px; background: var(--n-25); }
.fw-import-context-note { font-size: var(--text-xs); color: #1e40af; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; line-height: 1.6; }
.fw-imp-download-link { display: inline-block; margin-top: 6px; font-size: var(--text-xs); color: #2563eb; text-decoration: underline; cursor: pointer; }
.fw-imp-download-link:hover { color: #1d4ed8; }
.fw-import-instructions { font-size: var(--text-xs); color: var(--n-600); line-height: 1.6; background: var(--n-100); border-radius: 6px; padding: 8px 12px; }
.fw-import-instructions code { background: var(--n-200); border-radius: 3px; padding: 1px 4px; font-size: var(--text-2xs); }
.fw-import-file-label { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: var(--text-sm); background: var(--n-0); cursor: pointer; transition: background .1s; }
.fw-import-file-label:hover { background: var(--n-100); }
.fw-import-result { font-size: var(--text-sm); }

/* ── Framework import column picker ───────────────────────────────── */
.fw-imp-col-section { border: 1px solid rgba(255,255,255,.08); border-radius: 8px; overflow: hidden; margin-top: 4px; }
.fw-imp-col-header { background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.fw-imp-col-title { font-size: var(--text-sm); font-weight: 600; color: var(--hero-text); }
.fw-imp-col-sub { font-size: var(--text-xs); color: var(--hero-muted); }
.fw-imp-col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0; padding: 8px 10px; max-height: 200px; overflow-y: auto; }
.fw-imp-col-row { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 5px; cursor: pointer; font-size: var(--text-sm); color: var(--hero-muted); transition: background .1s; }
.fw-imp-col-row:hover { background: rgba(255,255,255,.06); }
.fw-imp-col-row input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--brand, var(--brand-mid)); flex-shrink: 0; }
.fw-imp-col-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-imp-col-required .fw-imp-col-name { color: var(--n-800); font-weight: 600; }
.fw-imp-col-badge { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; background: rgba(99,102,241,.12); color: var(--brand); border-radius: 4px; padding: 1px 5px; flex-shrink: 0; border: 1px solid rgba(99,102,241,.3); }
.fw-imp-col-loading { font-size: var(--text-sm); color: var(--hero-muted); padding: 10px 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; margin-top: 4px; }
.fw-imp-col-error { font-size: var(--text-sm); color: var(--danger); padding: 10px 14px; background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.25); border-radius: 8px; margin-top: 4px; }

/* ── Framework Data Source — free column picker ─────────────────── */
.fw-imp-role-mapper { border: 1px solid rgba(255,255,255,.08); border-radius: 10px; margin-top: 4px; }
.fw-ds-slots { display: flex; flex-direction: column; }
.fw-ds-slot { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.fw-ds-slot:last-child { border-bottom: none; }
.fw-ds-col-select { flex: 1; min-width: 0; font-size: var(--text-sm); }
.fw-ds-label-input { flex: 1; min-width: 0; font-size: var(--text-sm); }
.fw-ds-note { font-size: var(--text-xs); color: var(--hero-muted); padding: 8px 14px; background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(255,255,255,.06); }

/* ── Multi-sheet accordion ─────────────────────────────────────────── */
.fw-imp-sheets-section { border: 1px solid rgba(255,255,255,.08); border-radius: 8px; overflow: hidden; }
.fw-imp-sheets-header { background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.fw-imp-sheets-list { display: flex; flex-direction: column; }
.fw-imp-sheet-card { border-bottom: 1px solid rgba(255,255,255,.06); }
.fw-imp-sheet-card:last-child { border-bottom: none; }
.fw-imp-sheet-card.fw-imp-sheet-excluded { opacity: .4; }
.fw-imp-sheet-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background .1s; user-select: none; }
.fw-imp-sheet-header:hover { background: rgba(255,255,255,.04); }
.fw-imp-sheet-include { display: flex; align-items: center; flex-shrink: 0; }
.fw-imp-sheet-include input { width: 15px; height: 15px; accent-color: var(--brand, var(--brand-mid)); cursor: pointer; }
.fw-imp-sheet-name { font-size: var(--text-sm); font-weight: 600; color: var(--hero-text); flex: 1; }
.fw-imp-sheet-meta { font-size: var(--text-xs); color: var(--hero-muted); flex-shrink: 0; }
.fw-imp-sheet-chevron { font-size: var(--text-xs); color: var(--hero-muted); flex-shrink: 0; width: 14px; text-align: center; }
.fw-imp-sheet-body { background: rgba(0,0,0,.15); border-top: 1px solid rgba(255,255,255,.06); padding-bottom: 8px; }
.fw-import-error { padding: 10px 14px; border-radius: 6px; background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.25); color: var(--danger); font-size: var(--text-sm); }

/* ── Import framework modal ────────────────────────────────────────── */
.fw-imp-modal { max-width: 820px !important; }

/* va-optional-header and dark-bg text elements scoped to the white modal body */
.fw-imp-modal .va-optional-header { color: var(--n-600) !important; }
.fw-imp-modal .va-optional-header span { color: var(--n-500); }
.fw-imp-modal .va-optional-header::after { background: linear-gradient(90deg, var(--n-200), transparent); }
.fw-imp-modal .fw-imp-col-chk-name { color: var(--n-700); }
.fw-imp-modal .fw-imp-col-chk-row:hover { background: rgba(0,0,0,.04); }
.fw-imp-modal .fw-imp-sheet-item { border-color: var(--n-200); }
.fw-imp-modal .fw-imp-sheet-item-hdr { background: var(--n-50); }
.fw-imp-modal .fw-imp-sheet-item-hdr:hover { background: var(--n-100); }
.fw-imp-modal .fw-imp-sheet-item-name { color: var(--n-800); }
.fw-imp-modal .fw-imp-sheet-item-meta { color: var(--n-500); }
.fw-imp-modal .fw-imp-sheet-item-body { background: var(--n-0); border-top-color: var(--n-200); }
.fw-imp-body { display: flex; flex-direction: column; gap: 0; padding: 0 24px 20px; }
.fw-imp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fw-imp-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.fw-imp-section-strip {
  display: flex; align-items: center; gap: 10px; margin: 20px 0 14px;
}
.fw-imp-section-strip:first-child { margin-top: 0; }
.fw-imp-section-icon {
  width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-400) 100%); flex-shrink: 0; font-size: 14px;
}
.fw-imp-section-text { display: flex; flex-direction: column; }
.fw-imp-section-title { font-size: var(--text-sm); font-weight: 700; color: var(--hero-text); line-height: 1.2; }
.fw-imp-section-sub { font-size: var(--text-xs); color: var(--hero-muted); }
.fw-imp-req { color: var(--danger); font-size: var(--text-xs); }
.fw-imp-field { display: flex; flex-direction: column; margin-bottom: 14px; }
.fw-imp-field:last-child { margin-bottom: 0; }
.fw-imp-label-row { display: flex; align-items: center; gap: 6px; }
.fw-imp-hint { margin: 4px 0 0; font-size: 11px; color: var(--hero-muted); line-height: 1.5; }
.fw-imp-hint code { background: rgba(0,0,0,.4); color: #93c5fd; padding: 1px 4px; border-radius: 3px; font-size: var(--text-2xs); }
.fw-imp-auto-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 1px 5px; border-radius: 3px;
  background: rgba(99,102,241,.12); color: var(--brand); border: 1px solid rgba(99,102,241,.35);
}
.fw-imp-auto-badge--edited { background: rgba(251,146,60,.1); color: #c2540a; border-color: rgba(251,146,60,.4); }
.fw-imp-filename   { font-size: var(--text-sm); color: var(--hero-muted); }
.fw-imp-err-details{ margin-top: 8px; }
.fw-imp-err-summary{ font-size: var(--text-xs); cursor: pointer; color: var(--hero-muted); }
.fw-imp-err-list   { font-size: var(--text-2xs); color: var(--danger); margin: 6px 0 0; padding-left: 16px; }
.fw-imp-skip-note  { font-size: var(--text-xs); color: var(--hero-muted); margin-top: 4px; }
.fws-add-input     { height: 30px; font-size: var(--text-sm); }

/* Built-in checkbox row */
.fw-imp-builtin-check-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 8px; margin-top: 4px;
  background: rgba(99,102,241,.07); border: 1px solid rgba(99,102,241,.18); cursor: pointer;
}
.fw-imp-builtin-check-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--brand); flex-shrink: 0; margin-top: 2px; cursor: pointer; }
.fw-imp-builtin-check-label { display: flex; flex-direction: column; gap: 2px; }
.fw-imp-builtin-check-label strong { font-size: var(--text-sm); color: var(--n-800); font-weight: 600; }
.fw-imp-builtin-check-label span { font-size: var(--text-xs); color: var(--n-500); }

/* ── File drop zone ────────────────────────────────────────────────── */
.fw-imp-drop-zone {
  border: 2px dashed rgba(99,102,241,.4); border-radius: 12px;
  padding: 28px 20px; text-align: center; cursor: pointer;
  background: rgba(99,102,241,.04); transition: all .15s;
}
.fw-imp-drop-zone:hover, .fw-imp-drop-zone.dragover {
  border-color: var(--brand); background: rgba(99,102,241,.1);
}
.fw-imp-drop-icon { font-size: 32px; margin-bottom: 8px; }
.fw-imp-drop-title { font-size: var(--text-sm); font-weight: 600; color: var(--n-800); margin-bottom: 4px; }
.fw-imp-drop-sub { font-size: var(--text-xs); color: var(--n-500); }
.fw-imp-drop-success { border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.06); }
.fw-imp-drop-success .fw-imp-drop-icon-wrap { color: #4ade80; }

/* ── Sheet / column config area ────────────────────────────────────── */
.fw-imp-config-wrap {
  border: 1px solid rgba(255,255,255,.08); border-radius: 10px; overflow: hidden; margin-top: 16px;
}
.fw-imp-config-hdr {
  background: var(--hero-bg);
  padding: 10px 16px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.fw-imp-config-hdr-title { font-size: var(--text-sm); font-weight: 700; color: var(--hero-text); }
.fw-imp-config-hdr-meta { font-size: var(--text-xs); color: var(--hero-muted); }
.fw-imp-config-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.fw-imp-config-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fw-imp-config-lbl { font-size: var(--text-xs); font-weight: 600; color: var(--hero-muted); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 6px; }
.fw-imp-config-hint { font-size: 11px; color: var(--hero-muted); margin-top: 4px; }
.fw-imp-autosel { font-size: 11px; color: var(--brand); display: block; margin-top: 4px; }
.fw-imp-autosel--warn { color: #fb923c; }

/* Visible columns section inside config wrap */
.fw-imp-cols-section { border-top: 1px solid rgba(255,255,255,.06); padding-top: 12px; }
.fw-imp-cols-title { font-size: var(--text-xs); font-weight: 700; color: var(--hero-text); margin-bottom: 2px; }
.fw-imp-cols-sub { font-size: 11px; color: var(--hero-muted); margin-bottom: 10px; }
.fw-imp-cols-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px; }
.fw-imp-col-chk-row { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 6px; cursor: pointer; }
.fw-imp-col-chk-row:hover { background: rgba(255,255,255,.05); }
.fw-imp-col-chk-row input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--brand); flex-shrink: 0; }
.fw-imp-col-chk-name { font-size: var(--text-xs); font-family: monospace; color: #c8d1db; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.fw-imp-col-lbl-input { height: 24px; font-size: 11px; padding: 0 6px; display: none; width: 120px; flex-shrink: 0; }

/* Multi-sheet cards */
.fw-imp-sheet-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.fw-imp-sheet-item { border: 1px solid rgba(255,255,255,.08); border-radius: 8px; overflow: hidden; }
.fw-imp-sheet-item.excluded { opacity: .4; }
.fw-imp-sheet-item-hdr {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer;
  background: rgba(255,255,255,.03); transition: background .1s; user-select: none;
}
.fw-imp-sheet-item-hdr:hover { background: rgba(255,255,255,.06); }
.fw-imp-sheet-item-name { font-size: var(--text-sm); font-weight: 600; color: var(--hero-text); flex: 1; }
.fw-imp-sheet-item-meta { font-size: var(--text-xs); color: var(--hero-muted); }
.fw-imp-sheet-item-body { padding: 10px 14px; background: rgba(0,0,0,.12); border-top: 1px solid rgba(255,255,255,.06); }

/* ── ID column picker ──────────────────────────────────────────────── */
.fw-imp-id-picker { margin-bottom: 14px; padding: 12px 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; }
.fw-imp-id-picker--sheet { margin: 8px 0 4px; padding: 8px 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 6px; }
.fw-imp-id-picker-label { font-size: var(--text-sm); font-weight: 600; color: var(--hero-muted); display: block; margin-bottom: 6px; }
.fw-imp-id-picker--sheet .fw-imp-id-picker-label { font-size: var(--text-xs); margin-bottom: 4px; }
.fw-imp-id-picker-select { max-width: 280px; }
.fw-imp-id-picker--sheet .fw-imp-id-picker-select { max-width: 240px; font-size: var(--text-sm); }
.fw-imp-id-autosel { display: inline-block; margin-top: 5px; font-size: 11.5px; color: var(--brand); }
.fw-imp-id-autosel--warn { color: var(--hero-muted); }

/* ── Suggested filters (import modal) ─────────────────────────────── */
.fw-imp-suggested-filters {
  border: 1px solid rgba(99,102,241,.25); border-radius: 8px; overflow: hidden; margin-top: 8px;
  background: rgba(99,102,241,.06);
}
.fw-imp-suggested-filters .fw-imp-col-header { background: rgba(99,102,241,.12); border-bottom-color: rgba(99,102,241,.2); }
.fw-imp-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
.fw-imp-filter-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid rgba(99,102,241,.35); border-radius: 20px; background: rgba(99,102,241,.1); cursor: pointer;
  font-size: var(--text-xs); color: var(--brand); transition: all .12s; user-select: none;
}
.fw-imp-filter-chip:hover { background: rgba(99,102,241,.2); border-color: var(--brand); }
.fw-imp-filter-chip input[type=checkbox] { display: none; }
.fw-imp-filter-chip:has(input:checked),
.fw-imp-filter-chip.checked {
  background: var(--brand); border-color: var(--brand); color: var(--n-0);
}
.fw-imp-filter-chip-count {
  font-size: 10px; font-weight: 700; background: rgba(255,255,255,.2);
  border-radius: 8px; padding: 1px 5px;
}

/* ── Framework empty state + first-use hint ────────────────────────── */
.fw-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 56px 24px; gap: 12px; color: var(--n-400);
}
.fw-empty-icon  { font-size: 44px; line-height: 1; filter: grayscale(.3); }
.fw-empty-title { font-size: 16px; font-weight: 700; color: var(--n-600); }
.fw-empty-sub   { font-size: var(--text-sm); text-align: center; max-width: 340px; line-height: 1.6; color: var(--n-500); }
.fw-first-use-hint {
  margin: 0 0 10px; padding: 10px 16px; background: var(--brand-light);
  border: 1px solid var(--brand-border); border-radius: 8px;
  font-size: var(--text-sm); color: var(--brand-hover); line-height: 1.5;
}

/* ── Import preview table ────────────────────────────────────────────── */
.fw-imp-preview { border: 1px solid var(--n-200); border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.fw-imp-preview-scroll { overflow-x: auto; max-height: 160px; }
.fw-imp-preview-table {
  width: 100%; border-collapse: collapse; font-size: var(--text-xs);
}
.fw-imp-preview-table th {
  background: var(--n-50); border-bottom: 1px solid var(--n-200); padding: 5px 10px;
  font-weight: 600; color: var(--n-600); text-align: left; white-space: nowrap; position: sticky; top: 0;
}
.fw-imp-preview-table td {
  padding: 4px 10px; border-bottom: 1px solid var(--n-100);
  color: var(--n-700); white-space: nowrap; max-width: 180px;
  overflow: hidden; text-overflow: ellipsis;
}
.fw-imp-preview-table tr:last-child td { border-bottom: none; }
.fw-imp-preview-table tr:hover td { background: var(--n-50); }

/* Framework import — column checkbox list */
.fw-ds-col-list { display:flex;flex-direction:column;gap:4px;margin-top:8px;padding:0 10px 10px; }
.fw-ds-col-row { display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:5px; }
.fw-ds-col-row:hover { background:var(--n-50); }
.fw-ds-col-check-label { display:flex;align-items:center;gap:7px;cursor:pointer;min-width:160px;font-size:13px;color:var(--n-700); }
.fw-ds-col-check-label input[type=checkbox] { width:15px;height:15px;accent-color:var(--brand);flex-shrink:0; }
.fw-ds-col-name { font-family:monospace;font-size:12px; }
.fw-ds-label-input { height:28px!important;font-size:12px!important;padding:0 8px!important;flex:1;max-width:240px; }

/* Framework import — sheet column tags */
.fw-imp-sheet-cols { padding:4px 0; }
.fw-imp-col-tags { display:flex;flex-wrap:wrap;gap:5px;padding:6px 0; }
.fw-imp-col-tag { background:var(--n-100);color:var(--n-700);font-size:11px;font-family:monospace;padding:2px 8px;border-radius:4px; }
.fw-imp-sheet-section { border:1px solid var(--n-200);border-radius:8px;margin-top:16px; }
.fw-imp-sheet-section-title { background:var(--n-50);border-bottom:1px solid var(--n-200);padding:10px 16px;font-size:12px;font-weight:700;color:var(--n-700);letter-spacing:.01em; }
.fw-imp-sheet-section .fw-imp-id-picker { padding:14px 16px 0; }
.fw-imp-sheet-section .fw-imp-id-picker + .fw-imp-id-picker { padding-top:12px; }
.fw-imp-sheet-section .fw-imp-role-mapper { border:none;border-top:1px solid var(--n-100);border-radius:0;margin-top:12px; }
.fw-imp-sheet-section .fw-imp-role-mapper .fw-imp-col-header { border-radius:0; }
.fw-imp-sheet-section .fw-imp-suggested-filters { border-top:1px solid var(--n-100); }
.fw-imp-sheet-section .fw-imp-preview { border-top:1px solid var(--n-100);border-radius:0; }
.fw-imp-sheet-section .fw-imp-preview .fw-imp-col-header { border-radius:0; }

/* ─── Framework Update Checker ────────────────────────────────────────── */
.fw-update-results { display: flex; flex-direction: column; gap: 8px; }
.fw-update-card { padding: 12px 16px; border-radius: 8px; border: 1px solid var(--n-200); font-size: var(--text-sm); }
.fw-update-new  { border-color: var(--brand-muted); background: var(--brand-light); }
.fw-update-scf  { border-color: #c4b5fd; background: var(--purple-light); }
.fw-update-ok   { border-color: var(--success-border); background: var(--success-light); color: var(--success-dark); }
.fw-update-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--brand); color: var(--n-0); white-space: nowrap; }
.fw-update-badge-scf { background: var(--purple); }

/* ─── Workspace Home ──────────────────────────────────────────────────── */
.home-stat-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; }
.home-stat { background: var(--n-0); border: 1px solid var(--n-200); border-radius: 10px; padding: 16px 20px; }
.home-stat-val { font-size: 28px; font-weight: 700; color: var(--n-800); line-height: 1; }
.home-stat-lbl { font-size: var(--text-xs); color: var(--n-500); margin-top: 4px; }
.home-stat-warn .home-stat-val { color: var(--orange); }
.home-count-warn { color: var(--orange); }

.home-section-title { font-size: var(--text-md); font-weight: 600; color: var(--n-800); margin-bottom: 12px; }
.home-assess-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 24px; }
.home-assess-card { background: var(--n-0); border: 1px solid var(--n-200); border-radius: 10px; padding: 18px 20px; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.home-assess-card:hover { box-shadow: 0 4px 16px rgba(99,102,241,.08); border-color: var(--brand-muted); }
.home-assess-card.home-assess-active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-light); }
.home-assess-card-name { font-weight: 600; font-size: var(--text-base); color: var(--n-800); margin-bottom: 4px; }
.home-assess-card-client { font-size: var(--text-xs); color: var(--n-500); margin-bottom: 12px; }
.home-assess-card-fw { font-size: var(--text-2xs); background: var(--brand-light); color: var(--brand-active); padding: 2px 7px; border-radius: 4px; font-weight: 600; display: inline-block; margin-bottom: 10px; }
.home-assess-card-progress-bar { height: 4px; background: var(--n-200); border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
.home-assess-card-progress-fill { height: 100%; background: var(--brand); border-radius: 2px; transition: width .3s; }
.home-assess-card-stats { display: flex; gap: 12px; font-size: var(--text-2xs); color: var(--n-500); flex-wrap: wrap; }
.home-assess-card-stats span { white-space: nowrap; }
.home-assess-new { background: var(--n-50); border: 2px dashed var(--n-300); border-radius: 10px; padding: 18px 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--n-400); font-size: var(--text-sm); font-weight: 500; transition: border-color .15s, color .15s; }
.home-assess-new:hover { border-color: var(--brand); color: var(--brand); }
.home-new-icon { font-size: 20px; line-height: 1; }

.attention-card { background: var(--n-0); border: 1px solid var(--n-200); border-radius: 10px; padding: 16px 20px; margin-bottom: 24px; }
.attention-card-title { font-size: var(--text-sm); font-weight: 600; color: var(--n-800); margin-bottom: 10px; }
.attention-list { display: flex; flex-direction: column; gap: 6px; }
.attention-item { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); padding: 8px 12px; border-radius: 8px; background: #fefce8; border: 1px solid var(--warning-border); color: #78350f; cursor: pointer; transition: background .15s; }
.attention-item:hover { background: var(--warning-light); }
.attention-tag { font-size: var(--text-2xs); font-weight: 700; padding: 2px 7px; border-radius: 4px; white-space: nowrap; margin-left: auto; }
.attention-tag-risk  { background: var(--danger-light); color: var(--danger-dark); }
.attention-tag-rfi   { background: var(--brand-light); color: var(--brand-active); }
.attention-tag-task  { background: var(--success-light); color: #065f46; }

.home-empty { text-align: center; padding: 60px 20px; }
.home-empty-icon { font-size: 48px; margin-bottom: 16px; color: var(--n-300); }
.home-empty h3 { font-size: 18px; font-weight: 600; color: var(--n-800); margin-bottom: 8px; }
.home-empty p { font-size: var(--text-base); color: var(--n-500); margin-bottom: 20px; }

/* ─── Assessment Cards (Workspace Home) ──────────────────────────────── */
/* .home-section-header defined in platform block below */
.home-assess-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.home-assess-title { font-weight: 600; font-size: var(--text-base); color: var(--n-800); margin-bottom: 3px; }
.home-assess-meta { font-size: var(--text-xs); color: var(--n-500); display: flex; gap: 10px; flex-wrap: wrap; }
.home-assess-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.home-active-chip { font-size: 10px; font-weight: 700; background: var(--brand); color: var(--n-0); padding: 2px 7px; border-radius: 4px; }
.home-assess-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.home-progress-track { flex: 1; height: 4px; background: var(--n-200); border-radius: 2px; overflow: hidden; }
.home-progress-fill { height: 100%; border-radius: 2px; transition: width .3s; }
.home-progress-pct { font-size: var(--text-2xs); font-weight: 600; white-space: nowrap; min-width: 32px; text-align: right; }
.home-assess-counts { display: flex; gap: 12px; font-size: var(--text-2xs); color: var(--n-500); flex-wrap: wrap; }
.home-new-label { font-size: var(--text-sm); font-weight: 500; }
.home-attention-card { margin-bottom: 20px; }

/* ─── Inline Row Editing ──────────────────────────────────────────────── */

.ctrl-expand-btn {
  flex-shrink: 0; width: 20px; height: 20px; font-size: 10px;
  color: var(--n-0); background: var(--brand); border-radius: var(--r-xs);
  cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), transform var(--t-fast);
}
.ctrl-expand-btn:hover { background: var(--brand-hover); }
.controls-table tr.ctrl-main-row:hover { background: var(--brand-light); }
.controls-table tr.ctrl-main-row:hover .ctrl-expand-btn { background: var(--brand-hover); }
.ctrl-has-input { color: var(--brand); font-size: 8px; line-height: 1; flex-shrink: 0; }
mark.hl { background: #fef08a; color: inherit; border-radius: 2px; padding: 0 1px; font-style: normal; }
.btn-detail { font-size: 16px; padding: 0 6px; line-height: 1.6; color: var(--n-400); background: none; border: none; cursor: pointer; transition: color var(--t-fast); }
.btn-detail:hover { color: var(--brand); }
.ctrl-star-btn { font-size: 14px; padding: 0 5px; line-height: 1.6; color: var(--n-300); background: none; border: none; cursor: pointer; transition: color var(--t-fast); }
.ctrl-star-btn:hover { color: var(--amber); }
.ctrl-star-btn--on { color: var(--amber) !important; }
.ctrl-starred-toggle { transition: background var(--t-fast), color var(--t-fast); }
.ctrl-starred-toggle.active { background: var(--warning-light); color: var(--warning-dark); border-color: var(--amber-border); }

/* Custom / org controls */
.ctrl-org-badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 4px;
  background: var(--brand-soft); color: var(--purple); vertical-align: middle; margin-left: 4px;
}
.ctrl-custom-row { background: #fdfbff; }
.ctrl-custom-row:hover { background: var(--purple-light) !important; }
.ctrl-custom-desc { display: block; font-size: var(--text-2xs); color: var(--n-500); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }

/* Custom control modal form */
.cc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.cc-field { display: flex; flex-direction: column; gap: 4px; }
.cc-field label { font-size: var(--text-xs); font-weight: 600; color: var(--n-500); }
.cc-field input, .cc-field textarea { padding: 8px 10px; border: 1px solid var(--n-200); border-radius: 6px; font-size: var(--text-sm); font-family: inherit; resize: vertical; }
.cc-field input:focus, .cc-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
.cc-field input[readonly] { background: var(--n-50); color: var(--n-400); }
.cc-full { grid-column: 1 / -1; }

/* ── Full-window inline overlay (scoped to .main-content) ── */
.main-content { position: relative; }
.cio-overlay {
  position: absolute; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity .2s ease;
  pointer-events: none;
}
.cio-overlay--open { opacity: 1; pointer-events: all; }
.cio-panel {
  width: 100%; height: 100%;
  background: var(--n-50);
  display: flex; flex-direction: column;
  transform: translateY(16px); transition: transform .22s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}
.cio-overlay--open .cio-panel { transform: translateY(0); }
.cio-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--n-50); color: var(--n-700);
  border-bottom: 1px solid var(--n-200);
  flex-shrink: 0;
}
.cio-control-id {
  font-size: var(--text-sm); font-weight: 700; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
  min-width: 0; color: var(--n-800);
}
.cio-nav-btn {
  background: var(--n-0); border: 1px solid var(--n-300); color: var(--n-700);
  padding: 4px 10px; border-radius: 5px; cursor: pointer;
  font-size: var(--text-xs); font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.cio-nav-btn:hover { background: var(--n-100); }
.cio-nav-btn:disabled { opacity: .35; cursor: default; }
.cio-save-btn {
  background: var(--brand); border: none; color: var(--n-0);
  padding: 4px 12px; border-radius: 5px; cursor: pointer;
  font-size: var(--text-xs); font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
.cio-save-btn:hover { background: var(--brand-hover); }
.cio-counter {
  font-size: var(--text-2xs); color: var(--n-500); white-space: nowrap; flex-shrink: 0;
}
.cio-close {
  background: var(--n-100); border: 1px solid var(--n-300); color: var(--n-600);
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  font-size: var(--text-base); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cio-close:hover { background: var(--n-200); }
.cio-body { flex: 1; overflow: hidden; min-height: 0; display: flex; flex-direction: column; }
.cio-bottom-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--n-50); color: var(--n-700);
  border-top: 1px solid var(--n-200);
  flex-shrink: 0;
}

/* ── Control full-screen popup (.cfp-*) ─────────────────────────────────── */
.cfp-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.6); backdrop-filter: blur(3px);
  z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.cfp-backdrop--open { opacity: 1; pointer-events: all; }
.cfp-panel {
  width: min(1400px, 96vw); height: 90vh;
  background: var(--n-50); border-radius: 14px;
  box-shadow: 0 32px 80px rgba(0,0,0,.35);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(20px);
  transition: transform .22s cubic-bezier(.22,1,.36,1);
}
.cfp-backdrop--open .cfp-panel { transform: translateY(0); }
.cfp-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; flex-shrink: 0;
  background: var(--hero-bg); border-bottom: 1px solid rgba(255,255,255,.08);
}
.cfp-title {
  flex: 1; font-weight: 700; font-size: var(--text-md);
  color: var(--n-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cfp-topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cfp-body {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
/* The inline panel inside the popup needs the same flex chain as the cio-body */
.cfp-body .ctrl-inline-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.cfp-body .il-layout { flex: 1; min-height: 0; }

/* ── Split layout: Assessor | System Owner side by side ── */
.il-split-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; padding: 12px 14px 0;
  flex: 1; min-height: 0; overflow: hidden;
}
.il-assessor-section {
  background: var(--n-0); border: 1.5px solid var(--n-200);
  border-radius: 12px; display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
}
.il-so-section {
  background: var(--n-0); border: 1.5px solid var(--n-200);
  border-radius: 12px; display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
}
.il-section-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 7px; flex-shrink: 0;
  border-bottom: 1px solid var(--n-200);
  font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.il-assessor-section .il-section-header { color: var(--n-600); background: var(--n-50); }
.il-so-section .il-section-header { color: var(--n-600); background: var(--n-50); }
.il-section-body {
  flex: 1; overflow-y: auto; padding: 12px 14px;
  min-height: 0;
}

/* ── Secondary tab row (Cloud / Evidence / References / History) ── */
.il-secondary-tabs {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 5px 14px 5px;
  background: var(--n-50); border-top: 1px solid var(--n-200);
  flex-shrink: 0;
}
.il-secondary-pane { flex: 1; overflow-y: auto; padding: 12px 16px; min-height: 0; }
.il-secondary-area {
  display: none; flex-direction: column;
  background: var(--n-0); border-top: 1px solid var(--n-200);
  flex-shrink: 0; max-height: 40%;
}
.il-secondary-area--open { display: flex; }

/* ── Inline row container (kept hidden — panel now opens in overlay) ── */
.ctrl-inline-row { display: none !important; }
.ctrl-inline-cell { padding: 0 !important; border-bottom: 2px solid var(--brand); border-top: none; }
.ctrl-inline-panel { padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ctrl-inline-loading { font-size: var(--text-base); color: var(--n-400); padding: var(--sp-4) 0; text-align: center; }
.ctrl-inline-loading::before { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid var(--n-200); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; margin-right: 8px; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Two-row layout ── */
.il-layout {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
}

/* ── Top row: control reference strip ── */
.il-ref-col {
  background: var(--n-50);
  border-bottom: 1px solid var(--n-150, #e9edf2);
  padding: 8px 14px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.il-ref-id-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%;
}
.il-ref-gear {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: var(--text-base); color: var(--n-500); padding: 3px 6px; border-radius: 5px;
  line-height: 1; flex-shrink: 0;
}
.il-ref-gear:hover { color: var(--brand); background: var(--brand-soft); }
.il-strip-gear { margin-left: auto; font-size: var(--text-sm); padding: 2px 5px; }
.il-assessor-section .il-strip-gear { color: var(--n-400); }
.il-assessor-section .il-strip-gear:hover { color: var(--n-700); background: var(--n-100); }
.il-so-section .il-strip-gear { color: var(--n-400); }
.il-so-section .il-strip-gear:hover { color: var(--n-700); background: var(--n-100); }
.il-so-ref-pill {
  font-size: 10px; padding: 2px 8px; border-radius: 10px;
  background: rgba(255,255,255,.45); border: 1px solid var(--success-border);
  color: var(--success-dark); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .1s;
}
.il-so-ref-pill:hover { background: rgba(255,255,255,.75); }
.il-so-ref-pill.active { background: var(--success-dark); color: var(--n-0); border-color: var(--success-dark); }
.il-ref-fields { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.il-ref-empty { font-size: var(--text-xs); color: var(--n-400); font-style: italic; }

/* ── Inline ref field picker ─────────────────────────────────────────────────── */
.il-picker-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.il-picker-panel {
  background: var(--n-0); border-radius: 12px; width: 320px; max-height: 540px;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(15,23,42,.22), 0 2px 8px rgba(15,23,42,.08);
  border: 1px solid var(--n-150);
}
.il-picker-panel--wide { width: 560px; max-width: 95vw; max-height: 80vh; }

/* Header */
.il-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px;
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: 12px 12px 0 0; flex-shrink: 0;
}
.il-picker-header-left { display: flex; align-items: center; gap: 8px; }
.il-picker-title { font-size: var(--text-base); font-weight: 700; color: var(--hero-text); }
.il-picker-count-badge {
  font-size: var(--text-2xs); font-weight: 700; padding: 2px 8px; border-radius: 10px;
  background: var(--brand); color: var(--n-0); letter-spacing: .01em;
}
.il-picker-close {
  background: none; border: none; cursor: pointer; font-size: var(--text-md);
  color: var(--n-400); padding: 3px 5px; border-radius: 5px; line-height: 1;
}
.il-picker-close:hover { color: var(--n-800); background: var(--n-100); }

/* Search */
.il-picker-search-bar { padding: 10px 14px 6px; flex-shrink: 0; border-bottom: 1px solid var(--n-100); }
.il-picker-search {
  width: 100%; box-sizing: border-box; height: 32px; border-radius: 7px;
  border: 1px solid var(--n-200); padding: 0 10px; font-size: var(--text-sm); color: var(--n-800);
  background: var(--n-0); outline: none;
}
.il-picker-search:focus { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }

/* Body */
.il-picker-body { overflow-y: auto; flex: 1; min-height: 0; }
.il-picker-body--groups { padding: 0; }

/* Group sections */
.il-picker-group { border-bottom: 1px solid var(--n-100); }
.il-picker-group:last-child { border-bottom: none; }
.il-picker-group-header {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px 7px;
  background: linear-gradient(90deg, var(--n-50), #f4f7ff);
  border-bottom: 1px solid var(--n-100); position: sticky; top: 0; z-index: 1;
}
.il-picker-group-title {
  font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--brand); flex-shrink: 0;
}
.il-picker-group-hint {
  font-size: var(--text-2xs); color: var(--n-400); flex: 1; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.il-picker-group-actions { display: flex; gap: 4px; flex-shrink: 0; }
.il-picker-group-btn {
  font-size: var(--text-2xs); font-weight: 600; padding: 2px 8px; border-radius: 5px;
  border: 1px solid var(--n-200); background: var(--n-0); cursor: pointer; color: var(--n-600);
}
.il-picker-group-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* 2-column grid of items */
.il-picker-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 8px 10px 10px;
}
.il-picker-item {
  display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px;
  border-radius: 7px; cursor: pointer; border: 1px solid transparent;
  transition: background .1s, border-color .1s;
}
.il-picker-item:hover { background: var(--n-50); border-color: var(--n-150); }
.il-picker-item:has(.il-picker-cb:checked) {
  background: var(--brand-soft); border-color: var(--brand-border);
}
.il-picker-cb { accent-color: var(--brand); width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.il-picker-item-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.il-picker-item-label { font-size: var(--text-xs); font-weight: 500; color: var(--n-800); line-height: 1.3; }
.il-picker-item:has(.il-picker-cb:checked) .il-picker-item-label { color: var(--brand); font-weight: 600; }

/* Fill rate mini bar */
.il-picker-item-fill { display: flex; align-items: center; gap: 5px; }
.il-picker-fill-wrap {
  flex: 1; height: 3px; background: var(--n-150); border-radius: 2px; overflow: hidden;
}
.il-picker-fill-bar {
  height: 100%; background: var(--brand); border-radius: 2px; min-width: 2px;
  transition: width .3s ease;
}
.il-picker-fill-pct { font-size: 10px; color: var(--n-400); flex-shrink: 0; white-space: nowrap; }

/* Footer */
.il-picker-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-top: 1px solid var(--n-150); gap: 8px;
  flex-shrink: 0; background: #fafbfc; border-radius: 0 0 12px 12px;
}

/* ── Row-1 picker footer bar ── */
.il-picker-footer-bar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; padding: 10px 14px;
  border-top: 1px solid var(--n-150); flex-shrink: 0;
  background: #fafbfc; border-radius: 0 0 12px 12px;
}
/* ── Row-1 ordered selection list ── */
.il-ref-picker-order-list {
  display: flex; flex-direction: column; gap: 4px;
  min-height: 32px;
}
.il-ref-picker-order-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 7px;
  background: var(--brand-light); border: 1px solid var(--brand-border, var(--brand-muted));
  font-size: 12.5px; cursor: grab;
}
.il-ref-picker-order-item:active { cursor: grabbing; }
.il-ref-picker-drag { color: var(--n-400); font-size: var(--text-base); cursor: grab; flex-shrink: 0; }
.il-ref-picker-item-label { flex: 1; color: var(--n-800); font-size: 12.5px; }
.il-ref-picker-remove {
  background: none; border: none; cursor: pointer;
  color: var(--n-400); font-size: var(--text-2xs); padding: 2px 4px;
  border-radius: 4px; flex-shrink: 0; line-height: 1;
}
.il-ref-picker-remove:hover { color: var(--danger); background: var(--danger-light); }
.il-ref-picker-empty { font-size: var(--text-xs); color: var(--n-300); padding: 6px 4px; }

/* Keep old single-col picker rows working for other pickers */
.il-picker-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px;
  font-size: var(--text-sm); color: var(--n-700); cursor: pointer; border-radius: 4px;
}
.il-picker-row:hover { background: var(--n-50); }
.il-picker-row input { accent-color: var(--brand); width: 14px; height: 14px; flex-shrink: 0; }
.il-ref-group {
  font-size: 10px; font-weight: 700; color: var(--brand); background: var(--brand-soft);
  border: 1px solid var(--brand-border); border-radius: 10px; padding: 1px 8px;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.il-ref-hl-spacer { flex: 1; }
.il-ref-highlight {
  font-size: 10px; font-weight: 700;
  color: var(--warning-dark, var(--warning-dark)); background: var(--warning-light, var(--warning-light));
  border: 1px solid var(--amber, var(--amber-border)); border-radius: 10px;
  padding: 1px 8px; white-space: nowrap; letter-spacing: .04em; text-transform: uppercase;
  flex-shrink: 0;
}
.il-ref-picker-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--n-500); margin-bottom: 6px;
}
.il-ref-row {
  display: flex; align-items: baseline; gap: 4px;
  font-size: var(--text-xs); white-space: nowrap;
}
.il-ref-label { font-size: 10px; font-weight: 700; color: var(--n-400); text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
.il-ref-val   { color: var(--n-750); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

/* ── Bottom row: tab bar + panes ── */
.il-right-col { display: flex; flex-direction: column; min-height: 0; background: var(--n-0); }
.il-tab-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px 7px;
  background: var(--n-50);
  border-bottom: 2px solid var(--n-200); flex-shrink: 0;
}

/* ── Tab pills ── */
.ctrl-inline-pills { display: inline-flex; background: var(--n-100); border-radius: 8px; padding: 3px; gap: 2px; flex-shrink: 0; }
.ctrl-inline-pill { padding: 4px 11px; font-size: var(--text-2xs); font-weight: 500; border: none; background: transparent; color: var(--n-500); border-radius: 6px; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); white-space: nowrap; }
.ctrl-inline-pill:hover { color: var(--n-700); background: rgba(255,255,255,.6); }
.ctrl-inline-pill.active { background: var(--n-0); color: var(--brand); font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.10); }

/* ── Status badge row ── */
.il-status-row { display: flex; align-items: center; gap: 5px; margin-left: auto; flex-wrap: wrap; }
.il-status-chip, .il-impl-chip {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: var(--n-100);
  color: var(--chip-color); white-space: nowrap;
}
.il-flag-chip {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  border: 1px solid var(--warning-border); background: var(--warning-light); color: var(--warning-dark); white-space: nowrap;
}

/* ── Pane body ── */
.ctrl-inline-pane { padding: 12px 16px; flex: 1; overflow-y: auto; }

/* Legacy — kept for old code paths that may reference it */
.ctrl-inline-header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; flex-wrap: wrap; background: linear-gradient(135deg,var(--n-0) 0%,#f8f7ff 100%); border-bottom: 1px solid var(--n-100); }
.ctrl-inline-name { font-size: var(--text-sm); font-weight: 600; color: var(--n-800); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctrl-inline-detail {
  font-size: var(--text-2xs); color: var(--brand); white-space: nowrap;
  font-weight: 600; text-decoration: none;
  padding: 3px 9px; border: 1px solid var(--brand-muted);
  border-radius: 6px; background: var(--brand-soft);
  transition: background var(--t-fast);
}
.ctrl-inline-detail:hover { background: var(--brand-light); }

/* ── Field zones (platform / framework / assessment grouping) ── */
.il-zone + .il-zone { border-top: 1px solid var(--n-100); margin-top: 8px; padding-top: 8px; }
.il-zone-label {
  font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--n-350, var(--n-400)); margin-bottom: 6px;
}

/* ── Form layout ── */
.il-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 8px; }
.il-field { display: flex; flex-direction: column; gap: 4px; }
.il-field label {
  font-size: 10px; font-weight: 700; color: var(--n-500);
  text-transform: uppercase; letter-spacing: .04em;
}
.il-field input[type="text"],
.il-field input[type="date"],
.il-field select,
.il-field textarea {
  font-size: var(--text-xs); padding: 6px 9px;
  border: 1.5px solid var(--n-200); border-radius: 7px;
  background: var(--n-0); color: var(--n-800); resize: vertical;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.il-field input[type="text"]:hover,
.il-field input[type="date"]:hover,
.il-field select:hover,
.il-field textarea:hover { border-color: var(--n-300); }
.il-field input:focus, .il-field select:focus, .il-field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.10);
}
.il-field input:disabled, .il-field select:disabled, .il-field textarea:disabled {
  background: var(--n-50); color: var(--n-400); border-color: var(--n-100); cursor: not-allowed;
}
.il-req { color: var(--danger); font-size: var(--text-2xs); }
.il-appl-checkboxes { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.il-type-fields { margin: 6px 0 4px; padding: 10px 12px; background: var(--n-50); border-radius: 8px; border: 1px solid #e8edf4; }

/* ── Actions bar ── */
.il-actions {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 14px 9px;
  border-top: 1px solid var(--n-200);
  background: var(--n-50); flex-shrink: 0;
}

/* ── Raise dropdown ── */
.il-raise-wrap { position: relative; }
.il-raise-btn { display: flex; align-items: center; gap: 4px; }
.il-raise-panel {
  position: absolute; top: calc(100% + 4px); left: 0;
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); min-width: 140px; z-index: 9990;
  overflow: hidden;
}
.il-raise-item {
  display: block; width: 100%; text-align: left;
  padding: 7px 14px; font-size: var(--text-xs); font-weight: 500;
  color: var(--n-700); background: transparent; border: none;
  cursor: pointer; transition: background .08s;
}
.il-raise-item:hover { background: var(--n-50); }
.il-actions-dirty { border-top-color: var(--amber); background: var(--amber-light); }
.il-action-sep { flex: 1; min-width: 8px; }
.il-reason-input {
  flex: 1; min-width: 120px; max-width: 240px;
  font-size: var(--text-2xs); padding: 5px 9px;
  border: 1.5px solid var(--n-200); border-radius: 7px; color: var(--n-600);
}
.il-reason-input:focus { outline: none; border-color: var(--brand); }
.il-dirty-indicator { font-size: var(--text-2xs); color: var(--warning); font-weight: 700; white-space: nowrap; }
.il-unsaved-banner { display: flex; align-items: center; gap: 8px; }
.il-discard-btn { color: var(--danger); border-color: var(--danger-border); }
.il-discard-btn:hover { background: var(--danger-light); border-color: var(--danger); }

/* ── Custom fields section ── */
.il-custom-fields-section { margin: 14px 0 4px; }
.il-custom-fields-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; font-weight: 800; color: var(--brand-mid); letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 10px; padding: 6px 12px;
  background: var(--brand-soft); border: 1px solid var(--brand-border);
  border-radius: 8px 8px 0 0; gap: 8px;
}
/* Display-only field value */
.il-cf-display {
  font-size: var(--text-sm); color: var(--n-800); padding: 6px 0; line-height: 1.4;
  border-bottom: 1px dashed var(--n-200);
}
.il-cf-display-empty { color: var(--n-400); font-style: italic; }
/* Radio group */
.il-cf-radio-group { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 0; }
.il-cf-radio-label {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--text-sm); color: var(--n-700); cursor: pointer;
}
.il-cf-radio-label input { accent-color: var(--brand); width: 14px; height: 14px; cursor: pointer; }
.il-cf-radio-label:has(input:disabled) { cursor: default; opacity: .6; }

/* ─── Manage Fields Modal Tabs ────────────────────────────────────────── */
.mf-tabs {
  display: flex; gap: 0; border-bottom: 2px solid var(--n-100);
  margin: 0 -24px; padding: 0 24px;
}
.mf-tab {
  padding: 10px 20px; font-size: var(--text-sm); font-weight: 600; color: var(--n-500);
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -2px; cursor: pointer; transition: color .15s, border-color .15s;
}
.mf-tab:hover { color: var(--brand); }
.mf-tab--active { color: var(--brand); border-bottom-color: var(--brand); }

/* Column options tab */
.mf-co-list { display: flex; flex-direction: column; gap: 16px; }
.mf-co-row {
  background: var(--n-50); border: 1px solid var(--n-100); border-radius: 8px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.mf-co-col-label { font-size: var(--text-sm); font-weight: 700; color: var(--n-700); }
.mf-co-pills { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.mf-co-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--brand-soft); color: var(--brand-mid);
  border: 1px solid var(--brand-border); border-radius: 99px;
  padding: 3px 10px 3px 12px; font-size: var(--text-xs); font-weight: 500;
}
.mf-co-pill-del {
  background: none; border: none; cursor: pointer; color: var(--brand-mid);
  font-size: var(--text-2xs); line-height: 1; padding: 0; opacity: .7;
}
.mf-co-pill-del:hover { opacity: 1; color: var(--danger); }
/* Framework-level options — read-only, visually distinct */
.mf-co-pill--fw {
  background: var(--n-100); color: var(--n-500);
  border-color: var(--n-200); padding: 3px 12px; cursor: default;
}
.mf-co-add-wrap { display: flex; gap: 8px; align-items: center; }
.mf-co-add-input { flex: 1; max-width: 300px; }

/* ─── SVG Charts ──────────────────────────────────────────────────────── */
.svg-chart-wrap { display: flex; align-items: center; gap: 24px; }
.svg-donut-label { text-anchor: middle; dominant-baseline: central; }
.chart-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.chart-legend-item { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--n-600); }
.chart-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.chart-legend-val { margin-left: auto; font-weight: 700; color: var(--n-800); font-size: var(--text-xs); }

/* Horizontal bar chart */
.hbar-chart { display: flex; flex-direction: column; gap: 8px; }
.hbar-row { display: flex; align-items: center; gap: 10px; font-size: var(--text-xs); }
.hbar-label { width: 130px; flex-shrink: 0; color: var(--n-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.hbar-track { flex: 1; height: 10px; background: var(--n-100); border-radius: 5px; overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 5px; transition: width .6s cubic-bezier(.4,0,.2,1); }
.hbar-count { width: 30px; flex-shrink: 0; text-align: right; font-weight: 700; color: var(--n-800); }

/* Radial / gauge chart */
.gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gauge-label { font-size: var(--text-xs); font-weight: 600; color: var(--n-500); text-align: center; }

/* ─── Chart.js wrappers ──────────────────────────────────────────────────── */
.cj-donut-wrap { display: inline-flex; flex-shrink: 0; }
.cj-donut-center { pointer-events: none; }
.cj-gauge-wrap { display: flex; justify-content: center; align-items: flex-end; }
/* Ensure canvas elements inside chart wrappers size correctly */
.cj-donut-wrap canvas,
.spd-card-body canvas[data-cj],
.impl-pie-wrap canvas[data-cj] { display: block; }
/* Pie chart canvas replaces .impl-pie-svg size contract */
canvas.impl-pie-svg { width: 180px !important; height: 180px !important; }
/* Guideline sparkline donut */
.guideline-sparkline,
.guideline-sparkline canvas { width: 28px; height: 28px; display: block; }
/* Override spd-gauge-svg contract for the canvas gauge */
.spd-card-body > .cj-gauge-wrap { width: 100%; }

/* ─── Enhanced Overview Cards ─────────────────────────────────────────── */
.ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 0; }
.ov-panel { background: var(--n-50); border: 1px solid var(--n-200); border-radius: 12px; padding: 20px; }
.ov-panel-title { font-size: var(--text-sm); font-weight: 700; color: var(--n-600); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 16px; }
.ov-stat-row { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.ov-stat { flex: 1; min-width: 72px; text-align: center; background: var(--n-0); border: 1px solid var(--n-200); border-radius: 8px; padding: 12px 8px; }
.ov-stat-num { font-size: 24px; font-weight: 700; line-height: 1; }
.ov-stat-lbl { font-size: 10px; color: var(--n-400); margin-top: 4px; font-weight: 500; }

/* ─── Guided Onboarding Wizard ────────────────────────────────────────── */
.wizard-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.72); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.wizard-modal { background: var(--n-0); border-radius: 20px; width: 100%; max-width: 640px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 40px 80px rgba(0,0,0,.25); animation: wizard-in .25s cubic-bezier(.4,0,.2,1); }
@keyframes wizard-in { from { opacity:0; transform: scale(.96) translateY(12px); } to { opacity:1; transform: none; } }

.wizard-header { background: linear-gradient(135deg, var(--brand-depth) 0%, var(--n-800) 100%); padding: 32px 36px 28px; position: relative; overflow: hidden; }
.wizard-header::after { content:''; position:absolute; top:-60px; right:-60px; width:220px; height:220px; background: radial-gradient(circle, rgba(99,102,241,.35) 0%, transparent 70%); pointer-events:none; }
.wizard-header-eyebrow { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 2.5px; color: var(--brand-400); margin-bottom: 8px; text-transform: uppercase; }
.wizard-header-title { font-size: 26px; font-weight: 800; color: var(--n-50); line-height: 1.2; margin-bottom: 6px; }
.wizard-header-sub { font-size: var(--text-base); color: var(--n-400); line-height: 1.5; }
.wizard-steps-track { display: flex; gap: 6px; margin-top: 20px; }
.wizard-step-pip { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.15); transition: background .3s; }
.wizard-step-pip.active { background: var(--brand); }
.wizard-step-pip.done { background: var(--brand); }

.wizard-body { flex: 1; overflow-y: auto; padding: 28px 36px; }
.wizard-pane { display: none; }
.wizard-pane.active { display: block; }
.wizard-pane h3 { font-size: var(--text-lg); font-weight: 700; color: var(--n-800); margin-bottom: 6px; }
.wizard-pane > p { font-size: var(--text-base); color: var(--n-500); line-height: 1.55; margin-bottom: 20px; }
.wizard-fw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wizard-fw-card { border: 2px solid var(--n-200); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: all .15s; }
.wizard-fw-card:hover { border-color: var(--brand-muted); background: var(--brand-light); }
.wizard-fw-card.selected { border-color: var(--brand); background: var(--brand-light); }
.wizard-fw-icon { font-size: 22px; margin-bottom: 8px; }
.wizard-fw-name { font-size: var(--text-sm); font-weight: 700; color: var(--n-800); margin-bottom: 3px; }
.wizard-fw-desc { font-size: var(--text-xs); color: var(--n-500); line-height: 1.4; }
.wizard-fw-pill { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; margin-top: 6px; display: inline-block; }
.wizard-fw-au   { background: var(--brand-tint); color: var(--brand-hover); }
.wizard-fw-iso  { background: var(--success-light); color: var(--success-dark); }
.wizard-fw-nist { background: var(--brand-light); color: var(--brand-hover); }
.wizard-fw-other { background: var(--n-100); color: var(--n-600); }
.wizard-fw-note { font-size: var(--text-xs); color: var(--brand); background: var(--brand-light); border: 1px solid var(--brand-muted); border-radius: 8px; padding: 8px 12px; margin-top: 14px; display: none; }
.wizard-fw-note.visible { display: block; }

.wizard-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wizard-form-row.full { grid-template-columns: 1fr; }
.wizard-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.wizard-field label { font-size: var(--text-sm); font-weight: 600; color: var(--n-750); }
.wizard-field input, .wizard-field select, .wizard-field textarea {
  padding: 10px 12px; border: 1.5px solid var(--n-200); border-radius: 8px;
  font-size: var(--text-base); font-family: inherit; color: var(--n-800); transition: border-color .15s;
  background: var(--n-0);
}
.wizard-field input:focus, .wizard-field select:focus, .wizard-field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.wizard-checklist { display: flex; flex-direction: column; gap: 10px; }
.wizard-check-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--n-50); border: 1px solid var(--n-200); border-radius: 10px; }
.wizard-check-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.wizard-check-body { flex: 1; }
.wizard-check-title { font-size: var(--text-sm); font-weight: 700; color: var(--n-800); margin-bottom: 2px; }
.wizard-check-desc { font-size: var(--text-xs); color: var(--n-500); line-height: 1.4; }
.wizard-check-ok { background: var(--success-light); border-color: var(--success-border); }
.wizard-check-ok .wizard-check-title { color: var(--success-dark); }
.wizard-success { text-align: center; padding: 20px 0; }
.wizard-success-icon { font-size: 52px; margin-bottom: 12px; }
.wizard-success-title { font-size: 22px; font-weight: 800; color: var(--n-800); margin-bottom: 8px; }
.wizard-success-sub { font-size: var(--text-base); color: var(--n-500); line-height: 1.6; margin-bottom: 24px; }

.wizard-footer { padding: 20px 36px; border-top: 1px solid var(--n-100); display: flex; align-items: center; justify-content: space-between; background: var(--n-25); }
.wizard-footer-left { font-size: var(--text-xs); color: var(--n-400); }
.wizard-footer-right { display: flex; gap: 10px; }
.wizard-btn-back { background: none; border: 1.5px solid var(--n-200); color: var(--n-600); padding: 9px 20px; border-radius: 8px; font-size: var(--text-base); font-weight: 600; cursor: pointer; transition: all .15s; }
.wizard-btn-back:hover { border-color: var(--brand); color: var(--brand); }
.wizard-btn-next { background: var(--brand); color: var(--n-0); border: none; padding: 10px 24px; border-radius: 8px; font-size: var(--text-base); font-weight: 700; cursor: pointer; transition: opacity .15s, transform .15s, background .15s; box-shadow: var(--shadow-brand-sm); }
.wizard-btn-next:hover { background: var(--brand-hover); transform: translateY(-1px); }
.wizard-btn-next:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ─── Wizard — no-framework error state ─────────────────────────────── */
.ww-nfw-icon { font-size: 48px; text-align: center; margin-bottom: 12px; }
.ww-nfw-msg { font-size: var(--text-sm); color: var(--n-600); line-height: 1.6; text-align: center; margin: 0; }

/* gs-card styles are defined in the platform block below */

/* ─── Secondary Sidebar Badges ───────────────────────────────────────── */
.sec-badge { display: inline-block; background: var(--danger); color: var(--n-0); font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; line-height: 16px; }

/* ─── Workspace Active Assessment Snapshot ───────────────────────────── */
.ws-active-block { background: var(--n-0); border: 1px solid var(--n-200); border-radius: 14px; padding: 20px 24px; margin-bottom: 24px; }
.ws-active-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.ws-active-label { font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); margin-bottom: 4px; display: block; }
.ws-active-name { font-size: var(--text-lg); font-weight: 700; color: var(--n-800); margin-bottom: 4px; }
.ws-active-meta { font-size: var(--text-xs); color: var(--n-500); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ws-active-rag { font-size: var(--text-xs); font-weight: 700; padding: 5px 12px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.ws-progress-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ws-progress-track { flex: 1; height: 7px; background: var(--n-200); border-radius: 4px; overflow: hidden; }
.ws-progress-pct { font-size: var(--text-sm); font-weight: 700; min-width: 36px; text-align: right; }
.ws-kpi-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 14px; }
.ws-kpi-tile { border-radius: 10px; padding: 10px 12px; }
.ws-kpi-val { font-size: 20px; font-weight: 700; line-height: 1.1; margin-bottom: 2px; }
.ws-kpi-lbl { font-size: var(--text-2xs); font-weight: 600; color: var(--n-750); }
.ws-kpi-sub { font-size: 10px; color: var(--n-400); margin-top: 2px; }
.ws-quick-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ws-quick-btn { white-space: nowrap; }

/* ─── Cloud Monitoring Section (.cm-*) ────────────────────────────────── */
.cm-stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.cm-stat-card { background: var(--n-0); border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.cm-stat-num { font-size: 28px; font-weight: 800; color: var(--n-800); line-height: 1; margin-bottom: 4px; }
.cm-stat-lbl { font-size: var(--text-xs); color: var(--n-500); font-weight: 500; }

.cm-accounts-overview { display: flex; flex-direction: column; gap: 12px; }
.cm-acct-row { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: var(--n-50); border-radius: 10px; border: 1px solid var(--n-200); }
.cm-acct-left { display: flex; align-items: center; gap: 10px; flex: 1; flex-wrap: wrap; }
.cm-provider-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.cm-acct-label { font-weight: 600; font-size: var(--text-base); color: var(--n-800); }
.cm-acct-ref { font-family: monospace; font-size: var(--text-2xs); color: var(--n-400); }
.cm-acct-right { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.cm-pct-label { font-size: var(--text-xs); color: var(--n-600); font-weight: 500; }
.cm-compliance-bar { height: 8px; border-radius: 4px; overflow: hidden; display: flex; background: var(--n-100); }
.cm-bar-compliant { background: var(--brand); }
.cm-bar-noncompliant { background: var(--danger); }
.cm-bar-na { background: var(--n-300); }

.cm-sync-ok    { font-size: var(--text-2xs); color: var(--brand); font-weight: 500; }
.cm-sync-err   { font-size: var(--text-2xs); color: var(--danger); font-weight: 500; }
.cm-sync-run   { font-size: var(--text-2xs); color: var(--warning); font-weight: 500; }
.cm-sync-never { font-size: var(--text-2xs); color: var(--n-400); }

.cm-empty { text-align: center; padding: 40px 24px; color: var(--n-500); }

.cm-error-row td { padding: 0 12px 8px; background: var(--danger-light); }
.cm-error-detail { font-size: var(--text-xs); color: var(--danger); padding: 4px 0; line-height: 1.5; word-break: break-all; }
.cm-finding-row:hover td { background: var(--brand-soft); }

.cm-detail-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 1200;
  display: flex; justify-content: flex-end; align-items: stretch;
}
.cm-detail-panel {
  width: min(480px, 100vw); background: var(--n-0); display: flex; flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12); overflow: hidden;
}
.cm-detail-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 20px 20px 16px; border-bottom: 1px solid var(--n-100);
  background: var(--n-50); flex-shrink: 0;
}
.cm-detail-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.cm-detail-section { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--n-100); }
.cm-detail-section:last-child { border-bottom: none; margin-bottom: 0; }
.cm-detail-label { font-size: var(--text-xs); font-weight: 700; color: var(--n-400); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.cm-detail-value { font-size: var(--text-sm); color: var(--n-700); line-height: 1.5; }
.cm-count-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--brand-tint); color: var(--brand-hover); border-radius: 12px; padding: 2px 10px; font-size: var(--text-xs); font-weight: 700; margin-left: 8px; }

.cm-sev-pill    { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: var(--text-2xs); font-weight: 700; }
.cm-status-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: var(--text-2xs); font-weight: 600; white-space: nowrap; }

.cm-filter-select { padding: 6px 12px; border: 1.5px solid var(--n-200); border-radius: 8px; font-size: var(--text-sm); color: var(--n-750); background: var(--n-0); cursor: pointer; }
.cm-filter-select:focus { outline: none; border-color: var(--brand); }

/* Add account modal */
.cm-modal { background: var(--n-0); border-radius: 16px; width: 600px; max-width: 96vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.cm-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08); padding: 16px 28px; border-radius: 16px 16px 0 0;
}
.cm-modal-header h3 { font-size: var(--text-md); font-weight: 800; color: var(--hero-text); margin: 0; }
.cm-modal-body { padding: 20px 28px; }
.cm-modal-footer { padding: 16px 28px; border-top: 1px solid var(--n-100); display: flex; justify-content: flex-end; gap: 10px; background: var(--n-25); border-radius: 0 0 16px 16px; }
.cm-info-box { margin-top: 12px; background: var(--brand-light); border: 1px solid var(--brand-muted); border-radius: 8px; padding: 10px 14px; font-size: var(--text-xs); color: var(--brand-active); line-height: 1.6; }
.cm-info-box code { background: var(--brand-light); padding: 1px 5px; border-radius: 4px; font-family: monospace; }

/* Source mode banner */
.cm-mode-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; margin-bottom: 12px;
  border-radius: var(--r-base); font-size: var(--text-sm); font-weight: 500;
  border: 1px solid transparent;
}
.cm-mode-banner--live    { background: var(--teal-light); border-color: var(--teal-border, #a7f3d0); color: var(--success); }
.cm-mode-banner--demo    { background: var(--amber-light); border-color: var(--warning-border, var(--warning-border)); color: var(--warning-dark, var(--warning-dark)); }
.cm-mode-banner--mixed   { background: var(--n-50); border-color: var(--n-200); color: var(--n-700); }
.cm-mode-banner a        { color: inherit; font-weight: 700; text-decoration: underline; }

.cm-mode-dot         { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cm-mode-dot--live   { background: var(--success); box-shadow: 0 0 0 2px rgba(16,185,129,.2); }
.cm-mode-dot--demo   { background: var(--warning); }

/* Connection status badge (inline) */
.cm-conn-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: var(--r-pill);
  font-size: var(--text-2xs); font-weight: 700; white-space: nowrap;
}
.cm-conn-badge--live    { background: var(--teal-light); color: var(--success); }
.cm-conn-badge--demo    { background: var(--amber-light); color: var(--warning-dark, var(--warning-dark)); }
.cm-conn-badge--error   { background: var(--danger-light); color: var(--danger); }
.cm-conn-badge--unknown { background: var(--n-50); color: var(--n-400); }

/* Cloud compliance badge on controls table */
.ctrl-cloud-badge {
  display: inline-block; font-size: 9px; line-height: 1;
  padding: 1px 4px; border-radius: var(--r-pill);
  vertical-align: middle; margin-left: 3px; font-weight: 700;
  background: var(--n-100); color: var(--n-500);
}
.ctrl-cloud-badge--pass { background: var(--teal-light); color: var(--success); }
.ctrl-cloud-badge--fail { background: var(--danger-light); color: var(--danger); }

@media (max-width: 900px) {
  .cm-stat-strip { grid-template-columns: repeat(2, 1fr); }
  .cm-acct-row { flex-direction: column; align-items: flex-start; }
}

/* ─── Inline panel Cloud Evidence tab (.il-cloud-*) ─────────────────── */
.il-cloud-loading { padding: 20px; color: var(--n-400); font-size: var(--text-sm); display: flex; align-items: center; gap: 10px; }
.il-cloud-empty { text-align: center; padding: 24px 16px; color: var(--n-500); font-size: var(--text-sm); }
.il-cloud-header {
  padding: 11px 16px 10px;
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.il-cloud-bar-wrap { height: 6px; background: var(--n-100); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.il-cloud-bar-fill { height: 100%; border-radius: 3px; transition: width .4s; }
.il-cloud-stats { display: flex; gap: 16px; font-size: var(--text-xs); font-weight: 500; }
.il-cloud-findings { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; max-height: 260px; overflow-y: auto; }
.il-cloud-finding { background: var(--n-25); border-radius: 6px; padding: 8px 10px; font-size: var(--text-xs); }
.il-cloud-finding-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.il-cloud-status { padding: 2px 7px; border-radius: 10px; font-size: var(--text-2xs); font-weight: 600; }
.il-cloud-sev { font-size: var(--text-2xs); font-weight: 700; }
.il-cloud-provider { color: var(--n-500); font-size: var(--text-2xs); }
.il-cloud-synced { color: var(--n-400); font-size: var(--text-2xs); }
.il-cloud-rule { font-weight: 600; color: var(--n-800); margin-bottom: 2px; }
.il-cloud-resource { font-family: monospace; font-size: 10px; color: var(--n-400); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.il-cloud-annotation { color: var(--n-600); font-size: var(--text-2xs); font-style: italic; }

/* ── Control description banner (inside right col, above tabs) ── */
.il-ref-desc-row {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  background: var(--brand-tint);
  margin: 0 -14px -10px;
  padding: 8px 14px 9px;
  border-top: 1px solid var(--brand-muted);
}
.il-ref-desc-text {
  flex: 1; min-width: 0;
  font-size: var(--text-sm); font-weight: 600; color: var(--n-900); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.il-desc-details-btn {
  flex-shrink: 0;
  font-size: var(--text-2xs); font-weight: 600;
  color: var(--brand); background: var(--brand-light);
  border: 1px solid var(--brand-border, var(--brand-muted));
  border-radius: 6px; padding: 3px 10px; cursor: pointer;
  white-space: nowrap;
}
.il-desc-details-btn:hover { background: var(--brand-soft); }

/* ── Control Details popup ── */
/* ── Control Details popup ── */
.il-cd-box {
  background: var(--n-0); border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08);
  width: 620px; max-width: 96vw; max-height: 82vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.il-cd-header {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 20px 16px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--purple) 100%);
  flex-shrink: 0; position: relative;
}
.il-cd-header-badge {
  background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.35);
  color: var(--n-0); font-size: var(--text-sm); font-weight: 800; letter-spacing: .04em;
  padding: 4px 11px; border-radius: 7px; white-space: nowrap; flex-shrink: 0;
  align-self: flex-start; margin-top: 2px;
}
.il-cd-header-meta { flex: 1; min-width: 0; }
.il-cd-header-group {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.12); border-radius: 4px;
  padding: 2px 8px; margin-bottom: 6px;
}
.il-cd-header-name {
  font-size: var(--text-md); font-weight: 700; color: var(--n-0); line-height: 1.35;
  word-break: break-word;
}
.il-cd-close {
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
  color: var(--n-0); width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; font-size: var(--text-sm); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; align-self: flex-start; transition: background .15s;
}
.il-cd-close:hover { background: rgba(255,255,255,.28); }
.il-cd-body {
  overflow-y: auto; padding: 20px 20px 24px;
  display: flex; flex-direction: column; gap: 20px;
}
.il-cd-section { display: flex; flex-direction: column; gap: 10px; }
.il-cd-section-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--brand-mid);
  display: flex; align-items: center; gap: 8px;
}
.il-cd-section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--brand-tint);
}
.il-cd-desc {
  font-size: 13.5px; color: var(--n-700); line-height: 1.7;
  white-space: pre-wrap; background: var(--n-50);
  border-left: 3px solid var(--brand-muted);
  border-radius: 0 8px 8px 0; padding: 12px 14px;
}
.il-cd-table { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; border: 1px solid var(--n-200); }
.il-cd-row {
  display: flex; gap: 0; align-items: flex-start;
  font-size: 12.5px; background: var(--n-0);
}
.il-cd-row--alt { background: var(--n-50); }
.il-cd-row:not(:last-child) { border-bottom: 1px solid var(--n-100); }
.il-cd-label {
  font-weight: 600; color: var(--n-500); white-space: normal; word-break: break-word;
  width: 140px; min-width: 140px; max-width: 140px; padding: 8px 12px;
  border-right: 1px solid var(--n-200); background: inherit;
  font-size: var(--text-xs); line-height: 1.5;
}
.il-cd-val { color: var(--n-800); flex: 1; min-width: 0; padding: 8px 12px; line-height: 1.6; word-break: break-word; white-space: pre-wrap; }
.il-cd-empty { font-size: var(--text-sm); color: var(--n-400); text-align: center; padding: 24px 0; }

/* ── Global unsaved-changes guard modal ── */
.usg-box {
  background: var(--n-0); border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08);
  width: 440px; max-width: 94vw;
  display: flex; flex-direction: column; overflow: hidden;
}
.usg-header {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--n-100);
}
.usg-icon {
  font-size: 22px; line-height: 1; flex-shrink: 0; margin-top: 1px;
}
.usg-title {
  font-size: var(--text-md); font-weight: 700; color: var(--n-900); margin-bottom: 3px;
}
.usg-sub {
  font-size: var(--text-sm); color: var(--n-500);
}
.usg-list {
  list-style: none; margin: 0; padding: 14px 20px 12px;
  display: flex; flex-direction: column; gap: 6px;
  border-bottom: 1px solid var(--n-100);
}
.usg-item {
  font-size: var(--text-sm); color: var(--n-700); font-weight: 500;
  background: var(--n-50); border: 1px solid var(--n-200);
  border-radius: 6px; padding: 6px 12px;
}
.usg-footer {
  display: flex; align-items: center; gap: 8px; justify-content: flex-end;
  padding: 14px 20px;
}
.usg-cancel-btn {
  background: var(--n-0); border: 1px solid var(--n-300); color: var(--n-600);
  margin-right: auto;
}
.usg-cancel-btn:hover { background: var(--n-50); }
.usg-discard-btn {
  background: var(--n-0); border: 1px solid var(--error, var(--danger)); color: var(--error, var(--danger));
}
.usg-discard-btn:hover { background: #fff5f5; }
.usg-save-btn { min-width: 120px; }

/* ── Evidence summary ── */
.il-evidence-summary { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.il-evidence-no-cloud { font-size: var(--text-xs); color: var(--n-400); padding: 7px 12px; background: var(--n-50); border: 1px dashed var(--n-200); border-radius: 8px; }
.il-evidence-no-sysowner { font-size: var(--text-xs); color: var(--n-400); padding: 7px 12px; background: var(--n-50); border: 1px dashed var(--n-200); border-radius: 8px; }

/* ── System Owner tab sections ── */
.il-so-section { margin-bottom: 14px; }
.il-so-section-header {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-2xs); font-weight: 700; color: var(--n-600);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 10px; padding: 7px 12px;
  background: var(--n-50); border: 1px solid #e8edf4;
  border-radius: 8px 8px 0 0;
}
.il-so-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.il-so-badge-auto { background: var(--brand-soft); color: var(--purple); }
.il-so-badge-edit { background: var(--success-light); color: var(--success-dark); }
.il-so-cloud-section { background: var(--n-25); border: 1px solid var(--n-200); border-radius: 10px; padding: 12px 14px; }
.il-so-readonly-grid { display: flex; flex-direction: column; gap: 4px; }
.il-so-readonly-row { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-xs); padding: 4px 0; }
.il-so-readonly-row--full { flex-direction: column; gap: 3px; }
.il-so-readonly-label { color: var(--n-500); font-size: var(--text-2xs); font-weight: 700; min-width: 160px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .03em; }
.il-so-readonly-value { color: var(--n-800); font-size: var(--text-xs); }
.il-so-pre { white-space: pre-line; font-size: var(--text-2xs); color: var(--n-600); max-height: 80px; overflow-y: auto; display: block; }
.il-so-no-cloud { font-size: var(--text-xs); color: var(--n-400); padding: 4px 0; }
.il-field--full { grid-column: 1 / -1; }
@media (max-width: 768px) {
  .il-field-grid { grid-template-columns: 1fr; }
}

/* ── Implementation status pair ── */
.il-impl-pair {
  display: flex; align-items: stretch; gap: 0; margin: 0 0 14px;
  border: 1.5px solid #e8edf4; border-radius: 12px; overflow: hidden; background: var(--n-0);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.il-impl-half { flex: 1; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.il-impl-half--so  { background: var(--n-50); border-right: 1.5px solid #e8edf4; }
.il-impl-half--asr { background: #fafbff; }
.il-impl-half-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--n-400); }
.il-impl-half-value { font-size: var(--text-md); font-weight: 700; line-height: 1.2; }
.il-impl-divider { flex-shrink: 0; font-size: 18px; color: var(--n-300); padding: 0 8px; display: flex; align-items: center; }

/* ── Section divider ── */
.il-section-divider {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--n-400);
  border-top: 1px solid var(--n-100); margin: 10px 0 8px; padding-top: 8px;
}

/* Cloud evidence summary block shown in Assessor tab */
.il-cloud-evidence-block { background: linear-gradient(135deg, var(--brand-light) 0%, var(--purple-light) 100%); border: 1px solid var(--brand-muted); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.il-cloud-evidence-block-header { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); font-weight: 700; color: var(--brand-active); margin-bottom: 6px; }
.il-cloud-evidence-row { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-xs); color: var(--n-750); padding: 3px 0; border-top: 1px solid var(--brand-tint); }
.il-cloud-evidence-row:first-of-type { border-top: none; }
.il-sysowner-evidence-block { background: var(--success-light); border: 1px solid var(--success-border); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.il-sysowner-evidence-block-header { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); font-weight: 700; color: var(--success-dark); margin-bottom: 6px; }
.il-sysowner-evidence-row { font-size: var(--text-xs); color: var(--n-750); padding: 2px 0; }
.il-sysowner-evidence-label { font-weight: 600; color: var(--success-dark); font-size: var(--text-2xs); }

/* ============================================================
   Security Posture & Assessment Dashboard (.spd-*)
   ============================================================ */

/* Outer card — full-bleed, no internal padding */
.spd-card {
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-lg);
  margin-bottom: var(--sp-5); box-shadow: var(--shadow-xs); overflow: hidden;
}

/* ── KPI strip ── */
.spd-kpi-strip {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border-bottom: 1px solid var(--n-100);
}
.spd-kpi {
  padding: 14px 18px; border-right: 1px solid var(--n-100);
  border-top: 3px solid var(--ka, var(--n-400));
}
.spd-kpi:last-child { border-right: none; }
.spd-kpi-num { font-size: 26px; font-weight: 800; line-height: 1; margin-bottom: 3px; }
.spd-kpi-lbl { font-size: var(--text-2xs); font-weight: 700; color: var(--n-600); margin-bottom: 1px; }
.spd-kpi-sub { font-size: 10px; color: var(--n-400); }

/* ── 2×2 chart grid below the hero+KPI card ── */
.spd-chart-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin-bottom: var(--sp-5);
}

.spd-chart-card {
  background: var(--n-0); border: 1px solid var(--n-200);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; overflow: hidden;
}

.spd-chart-card--scroll .spd-group-list {
  max-height: 280px; overflow-y: auto; padding-right: 4px;
}

.spd-chart-card-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 14px 18px; flex-shrink: 0;
}

.spd-chart-card-title {
  font-size: var(--text-sm); font-weight: 800; color: var(--hero-text); letter-spacing: .01em;
}

.spd-chart-card-badge {
  font-size: var(--text-2xs); font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
  background: color-mix(in srgb, var(--bc, var(--n-400)) 12%, transparent);
  color: var(--bc, var(--n-500));
  border: 1px solid color-mix(in srgb, var(--bc, var(--n-400)) 25%, transparent);
}

.spd-chart-card-sub {
  font-size: var(--text-2xs); color: var(--n-400); font-weight: 500;
}

/* Card body — direct content children get uniform padding (legacy non-spd-card-body cards) */
.spd-chart-card > .spd-impl-chart,
.spd-chart-card > .spd-impl-hbar,
.spd-chart-card > .spd-gauge-wrap,
.spd-chart-card > .spd-group-list,
.spd-chart-card > .spd-no-cloud {
  padding: 16px 18px;
  flex: 1;
}
/* ── Security Posture Assessment — single outer card ── */
.spd-posture-card {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  margin-bottom: 16px;
}
.spd-posture-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 16px 20px;
}
.spd-posture-header-left { display: flex; flex-direction: column; gap: 3px; }
.spd-posture-header-right { flex-shrink: 0; }
.spd-posture-rag {
  display: flex; flex-direction: column; align-items: center;
  background: color-mix(in srgb, var(--rc, var(--brand-mid)) 10%, var(--n-0));
  border: 1.5px solid color-mix(in srgb, var(--rc, var(--brand-mid)) 30%, transparent);
  border-radius: 10px; padding: 8px 16px; min-width: 90px;
}
.spd-posture-rag-pct {
  font-size: 22px; font-weight: 800; color: var(--rc, var(--brand-mid)); line-height: 1;
}
.spd-posture-rag-lbl {
  font-size: 10px; font-weight: 700; color: var(--rc, var(--brand-mid));
  text-transform: uppercase; letter-spacing: .06em; margin-top: 3px;
}
/* Two-card side-by-side layout for Security Posture Assessment */
.spd-posture-two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 820px) {
  .spd-posture-two-col { grid-template-columns: 1fr; }
}
.adm-card-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--hero-muted); margin-bottom: 3px;
}
/* Inner 2-col grid (legacy, kept for backward compat) */
.spd-posture-inner {
  display: grid; grid-template-columns: 1fr 1px 1fr;
}
/* Each sub-panel */
.spd-posture-panel {
  display: flex; flex-direction: column;
}
.spd-posture-panel-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--n-100);
}
/* Vertical divider between panels */
.spd-posture-divider {
  background: var(--n-200); width: 1px; align-self: stretch;
}

/* Assessment identity block — inside framework compliance card */
.spd-compliance-identity {
  display: flex; flex-direction: column; gap: 3px;
  width: 100%; margin: 0 0 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--n-200);
}
.spd-compliance-eyebrow {
  font-size: 10px; font-weight: 700; color: var(--brand-400);
  text-transform: uppercase; letter-spacing: .08em;
}
.spd-compliance-assess-title {
  font-size: 16px; font-weight: 800; color: var(--hero-text); line-height: 1.2;
}
.spd-compliance-assess-meta {
  font-size: var(--text-2xs); color: var(--hero-muted);
}

/* Generic padded card body */
.spd-card-body {
  padding: 16px 18px; flex: 1; display: flex; flex-direction: column; gap: 12px;
}

/* gauge centred inside card body */
.spd-card-body > .spd-gauge-svg { display: block; margin: 0 auto 4px; }
.spd-card-body > .spd-gauge-rows { width: 100%; }

.spd-compliance-impl {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.spd-impl-section-title {
  font-size: var(--text-xs); font-weight: 700; color: var(--n-800); display: flex; align-items: baseline;
  text-transform: uppercase; letter-spacing: .04em;
}

/* Domain progress rows inside compliance card */
.spd-dom-list { display: flex; flex-direction: column; gap: 8px; }
.spd-dom-row { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: 10px; }
.spd-dom-name { font-size: var(--text-2xs); font-weight: 600; color: var(--n-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spd-dom-track { height: 10px; border-radius: 5px; background: var(--n-100); overflow: hidden; }
.spd-dom-fill { height: 100%; border-radius: 5px; transition: width .4s ease; }
.spd-dom-pct { font-size: var(--text-2xs); font-weight: 700; text-align: right; }

/* ── Gauge (half-arc) — larger in wide card ── */
.spd-gauge-wrap {
  display: flex; align-items: flex-start; gap: 16px;
}
.spd-gauge-svg {
  width: 230px; height: 122px; flex-shrink: 0; overflow: visible;
}
.spd-card-body > .spd-gauge-svg {
  width: 100%; max-width: 280px; height: auto;
}
.spd-gauge-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.spd-gauge-row {
  display: grid; grid-template-columns: 10px 1fr auto auto;
  align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--n-750);
}
.spd-gauge-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.spd-gauge-lbl { font-size: var(--text-sm); color: var(--n-700); }
.spd-gauge-val { font-weight: 800; color: var(--n-900); text-align: right; font-size: var(--text-base); }
.spd-gauge-pct { font-size: var(--text-xs); color: var(--n-400); min-width: 34px; text-align: right; }
.spd-gauge-bar-wrap { margin-top: 6px; }
.spd-gauge-bar {
  display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--n-100);
}
.spd-gauge-bar > div { height: 100%; transition: width .3s; }

/* ── Implementation pie chart ── */
.impl-pie-layout {
  display: flex; align-items: center; gap: 20px; flex: 1;
}
.impl-pie-wrap { flex-shrink: 0; }
.impl-pie-svg { width: 180px; height: 180px; display: block; }
.impl-pie-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.impl-pie-leg-row {
  display: grid; grid-template-columns: 12px 1fr auto auto;
  align-items: center; gap: 8px;
}
.impl-pie-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.impl-pie-lbl { font-size: var(--text-sm); color: var(--n-700); font-weight: 500; }
.impl-pie-val { font-size: var(--text-base); font-weight: 800; color: var(--n-900); text-align: right; }
.impl-pie-pct { font-size: var(--text-xs); color: var(--n-400); min-width: 36px; text-align: right; }

/* ── Implementation horizontal bar chart ── */
.spd-impl-hbar { flex: 1; }
.impl-hbar-list { display: flex; flex-direction: column; gap: 14px; }
.impl-hbar-row { display: grid; grid-template-columns: 1fr 160px 40px; align-items: center; gap: 14px; }
.impl-hbar-lbl { font-size: var(--text-sm); font-weight: 600; color: var(--n-700); white-space: normal; word-break: break-word; }
.impl-hbar-track { height: 18px; border-radius: 9px; background: var(--n-100); overflow: hidden; }
.impl-hbar-fill { height: 100%; border-radius: 9px; transition: width .4s ease; }
.impl-hbar-val { font-size: var(--text-base); font-weight: 700; color: var(--n-800); text-align: right; }

/* ── Donut row (big donut + meta) ── */
.spd-donut-row {
  display: flex; align-items: flex-start; gap: 24px;
}
.spd-donut-row > svg { flex-shrink: 0; }
.spd-donut-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* Legend */
.spd-donut-legend { display: flex; flex-direction: column; gap: 7px; }
.spd-leg-row {
  display: grid; grid-template-columns: 12px 1fr auto auto;
  align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--n-750);
}
.spd-leg-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.spd-leg-row strong { font-weight: 800; color: var(--n-900); text-align: right; }
.spd-leg-pct { font-size: var(--text-2xs); color: var(--n-400); min-width: 32px; text-align: right; }

/* Stacked bar */
.spd-stack-bar {
  display: flex; height: 8px; border-radius: 4px; overflow: hidden;
  background: var(--n-100);
}
.spd-stack-bar > div { height: 100%; transition: width .3s; }
.spd-stack-labels {
  display: flex; justify-content: space-between;
  font-size: var(--text-2xs); color: var(--n-400); margin-top: 4px;
}

/* ── Cloud accounts ── */
.spd-cloud-accounts { display: flex; flex-direction: column; gap: 7px; }
.spd-acct-row { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); }
.spd-acct-name { min-width: 100px; font-weight: 600; color: var(--n-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spd-acct-bar { flex: 1; height: 8px; background: var(--n-100); border-radius: 4px; overflow: hidden; }
.spd-acct-bar > div { height: 100%; border-radius: 4px; transition: width .3s; }
.spd-acct-pct { font-size: var(--text-2xs); font-weight: 700; min-width: 34px; text-align: right; }
.spd-cloud-link { font-size: var(--text-xs); color: var(--brand); display: block; margin-top: 10px; }
.spd-cloud-link:hover { text-decoration: underline; }

/* No cloud empty state */
.spd-no-cloud {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; color: var(--n-500); font-size: var(--text-sm); gap: 6px;
  min-height: 180px;
}
.spd-no-cloud-icon { font-size: 36px; }
.spd-no-cloud p { margin: 0; }
.spd-no-cloud p:nth-child(3) { font-size: var(--text-xs); color: var(--n-400); }

/* ── Implementation hbar (use shared .hbar-*) ── */
.spd-impl-chart { flex: 1; }

/* ── Domain group list ── */
.spd-group-list { display: flex; flex-direction: column; gap: 7px; }
.spd-grp-row {
  display: grid; grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: 8px;
}
.spd-grp-name {
  font-size: var(--text-xs); color: var(--n-700); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.spd-grp-track { width: 120px; height: 8px; background: var(--n-100); border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.spd-grp-fill  { height: 100%; border-radius: 4px; transition: width .3s; }
.spd-grp-stat  { font-size: var(--text-xs); font-weight: 700; min-width: 34px; text-align: right; }
.spd-grp-count { font-size: var(--text-2xs); color: var(--n-400); min-width: 40px; text-align: right; }

/* ── Activity & Attention card (.act-*) ── */

/* Card wrapper override — no extra padding, tight fit */
.act-card { display: flex; flex-direction: column; padding: 0 !important; overflow: hidden; }

/* Summary pill strip */
.act-summary-strip {
  display: flex; gap: 6px; padding: 10px 14px 8px;
  border-bottom: 1px solid var(--n-100); flex-shrink: 0; flex-wrap: wrap;
}
.act-summary-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px; font-size: var(--text-2xs); font-weight: 700;
}
.act-summary-pill .act-pill-num {
  font-size: var(--text-md); font-weight: 900; line-height: 1;
}
.act-pill--crit { background: var(--danger-light); color: var(--danger); border: 1px solid var(--danger-border); }
.act-pill--warn { background: var(--amber-light); color: #b45309; border: 1px solid var(--warning-border); }
.act-pill--info { background: var(--purple-light); color: #5b21b6; border: 1px solid var(--brand-border); }

/* Card body — scrollable list */
.act-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.act-item-list { display: flex; flex-direction: column; overflow-y: auto; flex: 1; }

/* Individual item row */
.act-item {
  display: flex; align-items: stretch;
  background: var(--n-0);
  border-bottom: 1px solid var(--n-100);
  cursor: pointer; transition: background .12s;
  text-decoration: none; color: inherit;
  min-height: 56px;
}
.act-item:last-child { border-bottom: none; }
.act-item:hover { background: color-mix(in srgb, var(--ac, var(--brand-mid)) 5%, var(--n-0)); }
.act-item:hover .act-item-arrow { opacity: 1; transform: translateX(3px); }

/* Left accent bar */
.act-item-accent {
  width: 4px; background: var(--ac, var(--n-400)); flex-shrink: 0; border-radius: 2px;
}

/* Icon bubble */
.act-item-icon-wrap {
  width: 40px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.act-item-icon-bubble {
  width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in srgb, var(--ac, var(--brand-mid)) 12%, var(--n-0));
  border: 1.5px solid color-mix(in srgb, var(--ac, var(--brand-mid)) 25%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-base); line-height: 1;
}

/* Text content */
.act-item-content { flex: 1; padding: 10px 8px 10px 4px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.act-item-label {
  font-size: 12.5px; font-weight: 700; color: var(--n-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px; line-height: 1.2;
}
.act-item-sub { font-size: var(--text-2xs); color: var(--n-500); line-height: 1.4; }

/* Count badge */
.act-item-count {
  font-size: 20px; font-weight: 900; line-height: 1; letter-spacing: -0.03em;
  padding: 0 8px; flex-shrink: 0; display: flex; align-items: center;
  color: var(--ac, var(--n-400));
}

/* Arrow */
.act-item-arrow {
  font-size: var(--text-base); color: var(--ac, var(--n-400)); padding: 0 10px 0 4px;
  opacity: 0; transition: opacity .15s, transform .15s; font-weight: 700;
  display: flex; align-items: center;
}

/* Severity dot indicator */
.act-item-sev {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ac, var(--n-400)); margin-right: 5px;
  display: inline-block; flex-shrink: 0;
}

/* All-clear state */
.act-all-clear {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; padding: 32px 20px; text-align: center;
}
.act-all-clear-ring {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-soft), var(--brand-border));
  border: 3px solid var(--purple-light);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 10px rgba(167,139,250,.12);
}
.act-all-clear-icon { font-size: 30px; line-height: 1; }
.act-all-clear-title { font-size: var(--text-md); font-weight: 800; color: #4c1d95; }
.act-all-clear-sub { font-size: var(--text-xs); color: var(--n-500); max-width: 200px; line-height: 1.5; }

/* Shared legacy colours kept for use in other sections */
.ld-att-warn { background: var(--amber-light); border: 1px solid var(--warning-border); }
.ld-att-info { background: var(--brand-light); border: 1px solid var(--brand-muted); }
.ld-att-err  { background: var(--danger-light); border: 1px solid var(--danger-border); }
.ld-att-ok   { background: var(--success-light); border: 1px solid var(--success-border); }

/* Empty state */
.spd-empty { font-size: var(--text-xs); color: var(--n-400); padding: 8px 0; margin: 0; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .spd-kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .spd-kpi:nth-child(3) { border-right: none; }
  .spd-kpi:nth-child(4) { border-top: 1px solid var(--n-100); border-right: 1px solid var(--n-100); }
}
@media (max-width: 900px) {
  .spd-chart-grid { grid-template-columns: 1fr; }
  .spd-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .spd-donut-row { flex-direction: column; align-items: center; }
  .spd-gauge-wrap { flex-direction: column; align-items: center; }
  .spd-posture-inner { grid-template-columns: 1fr; }
  .spd-posture-divider { display: none; }
  .spd-posture-panel { border-top: 1px solid var(--n-200); }
  .spd-grp-track { width: 80px; }
}

/* ISM + Trend row below the chart grid */
.ov-bottom-row {
  margin-bottom: var(--sp-5);
}

/* ─── Login Modal ─────────────────────────────────────────────────────── */
.login-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15,23,42,0.72); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
}
.login-modal-box {
  background: var(--n-0); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  padding: 36px 32px 28px; width: 100%; max-width: 400px;
  display: flex; flex-direction: column; gap: var(--sp-4);
  animation: modal-in .18s ease;
}
.login-modal-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--text-md); font-weight: 800; letter-spacing: .06em; color: var(--n-800);
}
.login-modal-title { font-size: var(--text-xl); font-weight: 700; color: var(--n-900); margin: 0; }
.login-error {
  background: var(--danger-light); border: 1px solid var(--danger-border);
  border-radius: var(--r-md); color: var(--danger);
  font-size: var(--text-base); font-weight: 500; padding: 10px var(--sp-3);
}
.login-field { display: flex; flex-direction: column; gap: 4px; }
.login-field label { font-size: var(--text-sm); font-weight: 600; color: var(--n-600); }
.login-field input {
  border: 1.5px solid var(--n-200); border-radius: var(--r-md);
  padding: 9px 12px; font-size: var(--text-md); color: var(--n-800);
  outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast);
  font-family: inherit; width: 100%;
}
.login-field input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.login-btn {
  background: var(--brand); color: var(--n-0); border: none; border-radius: var(--r-md);
  padding: 11px 0; font-size: var(--text-md); font-weight: 700; cursor: pointer;
  width: 100%; transition: background var(--t-fast), box-shadow var(--t-fast);
}
.login-btn:hover:not(:disabled) { background: var(--brand-hover); box-shadow: var(--shadow-brand-sm); }
.login-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.login-hint {
  font-size: var(--text-sm); color: var(--n-400); text-align: center;
  border-top: 1px solid var(--n-100); padding-top: var(--sp-3); line-height: 1.7;
}
.login-hint code {
  background: var(--n-100); padding: 1px 5px; border-radius: var(--r-xs);
  font-family: 'SF Mono', 'Fira Code', monospace; font-size: var(--text-xs); color: var(--n-600);
}

/* ─── Copy to clipboard button ───────────────────────────────────────── */
.copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  background: none; border: 1px solid transparent;
  border-radius: var(--r-xs); cursor: pointer;
  color: var(--n-400); transition: color .12s, background .12s, border-color .12s;
  vertical-align: middle; flex-shrink: 0;
}
.copy-btn:hover { color: var(--brand); background: var(--brand-light); border-color: var(--brand-muted); }
.copy-btn--done { color: var(--success) !important; background: var(--success-light) !important; border-color: var(--success-border) !important; }

/* Forgot-password / back-to-login text link */
.login-link-btn {
  background: none; border: none; cursor: pointer;
  font-size: var(--text-sm); color: var(--brand);
  padding: 0; text-decoration: underline;
  transition: color .15s;
}
.login-link-btn:hover { color: var(--brand-hover); }

/* Dev mode skip button */
.login-dev-btn {
  width: 100%; padding: 8px 0;
  background: none; border: 1.5px dashed var(--n-300);
  border-radius: var(--r-md); cursor: pointer;
  font-size: var(--text-sm); color: var(--n-500);
  transition: border-color .15s, color .15s;
}
.login-dev-btn:hover { border-color: var(--warning); color: var(--warning-dark); background: var(--amber-light); }

/* SSO / IdP buttons */
.login-sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 10px 0;
  background: var(--n-0); border: 1.5px solid var(--n-200);
  border-radius: var(--r-md); cursor: pointer;
  font-size: var(--text-md); font-weight: 600; color: var(--n-800);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.login-sso-btn:hover { background: var(--n-50); border-color: var(--brand); }
.login-sso-btn--last { border-color: var(--brand); background: var(--brand-light); }
.login-sso-icon { font-size: 18px; line-height: 1; }
.login-last-used { font-size: var(--text-xs); font-weight: 600; background: var(--brand); color: var(--n-0); border-radius: 10px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }

.login-input {
  border: 1.5px solid var(--n-200); border-radius: var(--r-md);
  padding: 9px 12px; font-size: var(--text-md); color: var(--n-800);
  outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast);
  font-family: inherit; width: 100%; box-sizing: border-box;
}
.login-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }

.login-divider {
  display: flex; align-items: center; gap: 10px;
  color: var(--n-400); font-size: var(--text-sm);
}
.login-divider::before,
.login-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--n-100);
}

/* ─── Auth Providers admin (.ap-*) ───────────────────────────────────── */
.ap-list { display: flex; flex-direction: column; gap: 8px; }
.ap-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--n-100);
  border-radius: var(--r-md); background: var(--n-50);
}
.ap-row-icon { font-size: 22px; flex-shrink: 0; }
.ap-row-body { flex: 1; min-width: 0; }
.ap-row-name { font-size: var(--text-sm); font-weight: 600; color: var(--n-900); }
.ap-row-type { font-size: var(--text-2xs); color: var(--n-500); margin-top: 2px; }
.ap-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ap-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 20px; margin-left: 6px;
}
.ap-badge-default { background: var(--brand-tint); color: var(--brand); }
.ap-badge-disabled { background: var(--n-100); color: var(--n-500); }

.ap-section-label {
  font-size: var(--text-xs); font-weight: 700; color: var(--n-500);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 6px; margin-top: 4px;
}
.ap-idp-presets {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 10px 12px; background: var(--n-50);
  border: 1px solid var(--n-100); border-radius: var(--r-sm); margin-top: 4px;
}

/* ─── User Role Badge (sidebar) ────────────────────────────────────────── */
/* User badge — avatar only in narrow sidebar; full card hidden */
.user-role-badge { display: none; }
.urb-avatar {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--brand); color: var(--n-0);
  font-size: var(--text-base); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer;
}
.urb-avatar:hover { background: var(--brand-hover); }
.urb-info { display: none; }
.urb-name  { display: none; }
.urb-role  { display: none; }
/* Sign-out as sidebar icon button */
.urb-logout {
  width: 36px; height: 36px; border-radius: 8px;
  background: none; border: 1px solid var(--n-700); cursor: pointer;
  color: var(--n-400); font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.urb-logout:hover { color: var(--danger); border-color: var(--danger); background: rgba(239,68,68,.08); }

/* ─── Role pill (tables) ────────────────────────────────────────────────── */
.role-pill {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: var(--text-2xs); font-weight: 600; white-space: nowrap;
}

/* ─── Sign-off role notice ──────────────────────────────────────────────── */
.so-role-notice {
  background: #fef9e7; border: 1px solid var(--warning-border); border-radius: 8px;
  color: var(--warning-dark); font-size: var(--text-sm); padding: 10px 14px;
}

/* ─── Inline panel read-only note ─────────────────────────────────────── */
.il-readonly-note {
  font-size: var(--text-2xs); font-weight: 600; color: var(--warning-dark);
  background: var(--warning-light); border: 1px solid var(--warning-border);
  border-radius: 8px; padding: 5px 12px; white-space: nowrap;
}
.il-readonly-banner {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-2xs); color: var(--warning-dark); background: var(--warning-light);
  border: 1px solid var(--warning-border); border-radius: 7px;
  padding: 5px 12px; margin-bottom: 10px;
}
.il-readonly-banner::before { content: '👁'; font-size: var(--text-xs); }

/* ─── System Owner pane — control context strip ─── */
.il-so-strip {
  display: flex; flex-direction: column; gap: 0;
  background: var(--success-light); border-bottom: 2px solid var(--success-border);
  padding: 10px 16px 8px;
}
.il-so-strip-item {
  display: grid; grid-template-columns: 130px 1fr;
  gap: 6px; padding: 5px 0; border-top: 1px solid var(--n-100);
  font-size: var(--text-xs); align-items: baseline;
}
.il-so-strip-item:first-child { border-top: none; }
.il-so-strip-item--desc  { align-items: flex-start; }
.il-so-strip-item--empty .il-so-strip-val { color: var(--n-300); }
.il-so-strip-label { font-size: 10px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; padding-top: 1px; }
.il-so-strip-val { color: var(--n-800); line-height: 1.5; word-break: break-word; }
.il-so-strip-desc { font-weight: 600; color: var(--success-dark); }

/* ─── Assessor section — control context strip ─── */
.il-assessor-strip {
  display: flex; flex-direction: column; gap: 0;
  background: #dbeafe; border-bottom: 2px solid #bfdbfe;
  padding: 10px 16px 8px;
}
.il-assessor-strip .il-so-strip-item { border-top-color: #bfdbfe; }
.il-assessor-strip .il-so-strip-desc { color: #1d4ed8; }

/* ─── Assessor tab — system owner context block ─── */
.il-so-ctx-block {
  margin: 0 0 14px;
  border: 1.5px solid var(--success-light);
  border-radius: 10px; background: var(--success-light); overflow: hidden;
}
.il-so-ctx-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; font-size: var(--text-xs); font-weight: 700;
  color: #065f46; background: var(--success-light);
  border-bottom: 1px solid var(--success-light);
}
.il-so-ctx-badge {
  margin-left: auto; font-size: 10px; font-weight: 600;
  color: var(--brand); background: var(--brand-tint);
  border-radius: 4px; padding: 2px 7px; letter-spacing: .3px;
}
.il-so-ctx-row {
  display: grid; grid-template-columns: 170px 1fr;
  gap: 8px; padding: 6px 14px;
  border-bottom: 1px solid var(--success-light); font-size: var(--text-xs);
}
.il-so-ctx-row:last-child { border-bottom: none; }
.il-so-ctx-label { color: var(--n-750); font-weight: 600; font-size: var(--text-2xs); }
.il-so-ctx-val   { color: #111827; white-space: pre-wrap; word-break: break-word; font-size: var(--text-xs); }

/* ─── SO fw-reference block (inside sysowner inline pane) ─────────────── */
.il-so-fw-block {
  margin: 0 0 14px;
  border: 1.5px solid var(--brand-border);
  border-radius: 10px; background: var(--brand-light); overflow: hidden;
}
.il-so-fw-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; font-size: var(--text-xs); font-weight: 700;
  color: var(--brand); background: var(--brand-tint);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.il-so-fw-row {
  display: grid; grid-template-columns: 140px 1fr;
  gap: 8px; padding: 6px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08); font-size: var(--text-xs);
}
.il-so-fw-row:last-child { border-bottom: none; }
.il-so-fw-label { color: var(--n-750); font-weight: 600; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .4px; }
.il-so-fw-val   { color: #111827; white-space: pre-wrap; word-break: break-word; font-size: var(--text-xs); }

/* ─── Users role select ───────────────────────────────────────────────── */
.users-role-select {
  border: 1px solid var(--n-200); border-radius: 6px; padding: 4px 8px;
  font-size: var(--text-xs); color: var(--n-750); background: var(--n-0); cursor: pointer;
}
.users-role-select:focus { outline: none; border-color: var(--brand); }

/* ─── Users & Roles page ─────────────────────────────────────────────── */
.users-filter-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
/* ── Users & Access page sections ── */
.usr-section-card { margin: 0 0 20px; }
.usr-stats {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 24px 0;
}
.usr-stat {
  display: flex; flex-direction: column; align-items: center;
  background: var(--n-0); border: 1px solid var(--n-200);
  border-radius: var(--r-lg); padding: 8px 16px; min-width: 64px;
}
.usr-stat-val { font-size: var(--text-lg); font-weight: 800; color: var(--n-800); line-height: 1.2; }
.usr-stat-val--ok     { color: var(--success); }
.usr-stat-val--warn   { color: var(--warning); }
.usr-stat-val--danger { color: var(--danger); }
.usr-stat-lbl { font-size: var(--text-2xs); color: var(--n-400); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* ── Assessment team cards inside Users page ── */
.usr-team-card {
  background: var(--n-0); border: 1px solid var(--n-200);
  border-radius: var(--r-xl); padding: 16px 18px;
  margin-bottom: 10px;
}
.usr-team-card-hd {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--n-100);
  flex-wrap: wrap;
}
.usr-team-card-title { font-weight: 700; font-size: var(--text-sm); color: var(--n-800); }
.usr-team-card-sub   { font-size: var(--text-xs); color: var(--n-400); margin-top: 2px; }
.usr-team-empty      { font-size: var(--text-sm); color: var(--n-400); padding: 8px 0 12px; }
.usr-team-add {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--n-100);
}
.usr-team-add-label {
  font-size: var(--text-xs); font-weight: 600; color: var(--n-500);
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}

.user-cards-grid {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--n-100); border: 1px solid var(--n-200);
  border-radius: var(--r-xl); overflow: hidden;
}
.user-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--n-0); padding: 14px 18px;
  transition: background var(--t-fast);
}
.user-card:hover { background: var(--n-50); }
.user-card--suspended { opacity: .6; }
.user-card-avatar {
  width: 40px; height: 40px; border-radius: var(--r-lg); display: flex;
  align-items: center; justify-content: center;
  font-size: var(--text-base); font-weight: 700; flex-shrink: 0;
}
.user-card-body { flex: 1; min-width: 0; }
.user-card-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.user-card-name {
  font-size: var(--text-sm); font-weight: 700; color: var(--n-900);
}
.user-card-meta {
  font-size: var(--text-xs); color: var(--n-400); margin-top: 2px;
}
.user-card-role { flex-shrink: 0; }
.user-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 8px; flex-wrap: wrap;
}
.user-card-hint { font-size: var(--text-2xs); color: var(--n-300); }
.user-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.user-self-badge {
  display: inline-block; padding: 1px 7px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700; background: var(--brand-light); color: var(--brand);
  vertical-align: middle; margin-left: 4px; text-transform: uppercase; letter-spacing: .04em;
}
.user-suspended-badge {
  display: inline-block; padding: 1px 7px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700; background: var(--warning-light); color: var(--warning-dark);
  vertical-align: middle; margin-left: 4px; text-transform: uppercase; letter-spacing: .04em;
}
.user-locked-badge {
  display: inline-block; padding: 1px 7px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700; background: var(--danger-light); color: var(--danger-dark);
  vertical-align: middle; margin-left: 4px; text-transform: uppercase; letter-spacing: .04em;
}
.user-locked-badge { display: inline-block; padding: 1px 7px; border-radius: var(--r-pill); font-size: 10px; font-weight: 700; background: var(--danger-light); color: var(--danger-dark); vertical-align: middle; margin-left: 4px; text-transform: uppercase; letter-spacing: .04em; }
.user-invite-badge {
  display: inline-block; padding: 1px 7px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700; background: var(--brand-soft); color: #5b21b6;
  vertical-align: middle; margin-left: 4px; letter-spacing: .04em;
}
.user-card--locked { border-left: 3px solid var(--danger); }

/* Permissions matrix */
.perm-matrix {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px;
  padding: 20px;
}
.perm-card {
  --perm-accent: var(--brand);
  border: 1px solid var(--n-200); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-xs); background: var(--surface);
  border-left: 3px solid var(--perm-accent);
  transition: box-shadow .15s, transform .15s;
}
.perm-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.perm-card-header {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; font-weight: 700; font-size: var(--text-sm);
  background: var(--hero-bg);
  border-bottom: 2px solid var(--perm-accent);
}
.perm-card-icon { font-size: var(--text-md); flex-shrink: 0; }
.perm-card-label { flex: 1; color: var(--hero-text); }
.perm-card-count {
  font-size: var(--text-2xs); font-weight: 700; color: var(--n-700);
  background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.perm-list {
  margin: 0; padding: 10px 14px 14px 14px; list-style: none;
  font-size: var(--text-xs); color: var(--n-500); line-height: 1.8;
}
.perm-list li { display: flex; align-items: flex-start; gap: 7px; }
.perm-list li::before {
  content: '✓'; color: var(--perm-accent); font-weight: 700;
  font-size: var(--text-xs); flex-shrink: 0; margin-top: 1px;
}

/* ─── Keyboard Shortcuts ─────────────────────────────────────────────── */

/* Focused row highlight when navigating with j/k */
.ctrl-main-row.ks-focused td { background: var(--brand-light) !important; outline: 2px solid var(--brand); outline-offset: -1px; }

/* Shortcut help overlay */
.ks-help-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .12s ease;
}
.ks-help-dialog {
  background: var(--n-0); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  width: 560px; max-width: 95vw; overflow: hidden;
}
.ks-help-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08); padding: 14px 20px; border-radius: 16px 16px 0 0;
}
.ks-help-title { font-size: var(--text-md); font-weight: 800; color: var(--hero-text); }
.ks-help-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  padding: 20px;
}
@media (max-width: 560px) { .ks-help-body { grid-template-columns: 1fr; } }
.ks-help-group { display: flex; flex-direction: column; gap: 6px; padding: 0 10px; }
.ks-help-group + .ks-help-group { border-left: 1px solid var(--n-100); }
.ks-help-group-title {
  font-size: var(--text-xs); font-weight: 700; color: var(--n-400);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}
.ks-help-row {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); color: var(--n-600);
}
.ks-help-row span { margin-left: 4px; }
.ks-help-row kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 5px;
  background: var(--n-100); border: 1px solid var(--n-300);
  border-bottom-width: 2px; border-radius: var(--r-xs);
  font-size: 10px; font-weight: 700; color: var(--n-700);
  font-family: -apple-system, 'Segoe UI', sans-serif;
  white-space: nowrap;
}

/* ─── Mobile Secondary Sidebar ──────────────────────────────────────── */
.mob-sb-bar {
  display: none; /* shown via JS on mobile */
  align-items: center; gap: 8px;
  padding: 6px 14px;
  background: var(--n-50); border-bottom: 1px solid var(--n-100);
}
.mob-sb-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--n-0); border: 1px solid var(--n-200);
  border-radius: var(--r-sm); cursor: pointer;
  font-size: var(--text-sm); font-weight: 600; color: var(--n-700);
  transition: background .1s, border-color .1s;
}
.mob-sb-toggle:hover { background: var(--n-100); border-color: var(--n-300); }
.mob-sb-toggle svg { flex-shrink: 0; }

.mob-sb-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 199;
  background: rgba(15,23,42,.35); backdrop-filter: blur(2px);
}
.mob-sb-backdrop.mob-sb-backdrop-show { display: block; }

@media (max-width: 768px) {
  .secondary-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 260px; z-index: 200;
    background: var(--n-0); border-right: 1px solid var(--n-100);
    box-shadow: 4px 0 24px rgba(0,0,0,.12);
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    overflow-y: auto; padding: 20px 0;
  }
  .secondary-sidebar.mob-sb-open {
    transform: translateX(0);
  }
}

/* ─── Evidence Library (.ev-*) ──────────────────────────────────────── */
.ev-stat-strip {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 16px 0 20px;
}
.ev-stat {
  flex: 1; min-width: 120px;
  background: var(--n-0); border: 1px solid var(--n-100);
  border-radius: var(--r-md); padding: 14px 18px;
  box-shadow: var(--shadow-xs);
}
.ev-stat-val { font-size: var(--text-xl); font-weight: 700; color: var(--n-900); line-height: 1.2; }
.ev-stat-lbl { font-size: var(--text-xs); color: var(--n-500); margin-top: 2px; }

.ev-card {
  background: var(--n-0); border: 1px solid var(--n-100);
  border-radius: var(--r-md); margin-bottom: 8px;
  box-shadow: var(--shadow-xs); transition: box-shadow .15s;
  overflow: hidden;
}
.ev-card:hover { box-shadow: var(--shadow-sm); }
.ev-card-open { border-color: var(--brand); }
.ev-card-open .ev-card-main { background: #f8f7ff; }

.ev-card-main {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; cursor: pointer;
}
.ev-card-icon {
  font-size: 28px; line-height: 1; flex-shrink: 0;
  padding-top: 2px;
}
.ev-card-body { flex: 1; min-width: 0; }
.ev-card-title {
  font-size: var(--text-sm); font-weight: 600; color: var(--n-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 3px;
}
.ev-card-desc {
  font-size: var(--text-xs); color: var(--n-600);
  margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev-card-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.ev-card-actions {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}

.ev-tag {
  display: inline-block; padding: 2px 7px;
  background: var(--n-100); border-radius: 20px;
  font-size: var(--text-2xs); color: var(--n-600);
}
.ev-links-badge {
  display: inline-block; padding: 2px 8px;
  background: var(--brand-light); color: var(--brand);
  border-radius: 20px; font-size: var(--text-2xs); font-weight: 600;
}
.ev-links-badge-warn {
  background: var(--orange-light); color: var(--warning);
}
.ev-date { font-size: var(--text-2xs); color: var(--n-400); margin-left: auto; }

.ev-card-detail { border-top: 1px solid var(--n-100); }
.ev-detail-inner { padding: 14px 16px; }
.ev-detail-label {
  font-size: var(--text-xs); font-weight: 600; color: var(--n-500);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 8px;
}
.ev-ctrl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-ctrl-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  background: var(--n-100); border: 1px solid var(--n-200);
  border-radius: var(--r-xs);
  font-size: var(--text-2xs); color: var(--n-700);
}
.ev-ctrl-chip-full {
  background: var(--success-light); border-color: var(--success-border); color: var(--success-dark);
  padding: 4px 10px;
}
.ev-ctrl-chip-more {
  background: var(--n-100); color: var(--n-500); font-style: italic;
}
.ev-unlink-btn {
  background: none; border: none; cursor: pointer;
  color: var(--n-400); font-size: var(--text-2xs); padding: 0 2px; line-height: 1;
}
.ev-unlink-btn:hover { color: var(--danger); }

/* Chain of Custody log */
.custody-log { display: flex; flex-direction: column; gap: 4px; }
.custody-entry {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 8px; border-radius: 6px; background: var(--n-50);
  font-size: var(--text-xs);
}
.custody-icon { font-size: var(--text-base); flex-shrink: 0; margin-top: 1px; }
.custody-body { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.custody-action { font-weight: 700; color: var(--n-700); text-transform: capitalize; }
.custody-actor { color: var(--n-500); }
.custody-detail { color: var(--n-600); font-style: italic; }
.custody-ip { color: var(--n-400); font-size: 10px; padding: 1px 5px; background: var(--n-100); border-radius: 4px; }
.custody-ts { flex-shrink: 0; color: var(--n-400); font-size: var(--text-2xs); white-space: nowrap; }

/* Evidence link modal row */
.ev-link-group { border-bottom: 1px solid var(--n-100); }
.ev-link-group:last-child { border-bottom: none; }
.ev-link-group-header {
  padding: 7px 16px; font-size: var(--text-2xs); font-weight: 800;
  color: var(--brand-mid); background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-transform: uppercase; letter-spacing: .08em; position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ev-link-group-name { flex: 1; min-width: 0; }
.ev-link-group-btn {
  font-size: 10px; padding: 2px 8px; flex-shrink: 0;
  background: var(--n-100); color: var(--n-600); border: 1px solid var(--n-200);
  border-radius: 4px; cursor: pointer; text-transform: none; letter-spacing: 0;
  white-space: nowrap;
}
.ev-link-group-btn:hover { background: var(--brand); color: var(--n-0); border-color: var(--brand); }
.ev-link-group-btn.ev-link-group-linked { background: var(--success-light); color: var(--success-dark); border-color: var(--success-border); }
.ev-link-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 16px; transition: background .1s; border-bottom: 1px solid var(--n-50);
}
.ev-link-row:hover { background: var(--n-50); }
.ev-link-row.ev-link-row-linked { background: var(--success-light); }
.ev-link-row-info { flex: 1; min-width: 0; }
.ev-link-ctrl-name { font-size: var(--text-sm); color: var(--n-800); }
.ev-link-ctrl-desc {
  font-size: var(--text-2xs); color: var(--n-500); margin-top: 4px;
  line-height: 1.5; max-height: 54px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}

/* Evidence empty state */
.ev-empty {
  text-align: center; padding: 60px 20px;
  color: var(--n-600);
}
.ev-empty-icon { font-size: 48px; margin-bottom: 16px; }
.ev-empty h3 { font-size: var(--text-lg); color: var(--n-700); margin: 0 0 8px; }
.ev-empty p { font-size: var(--text-sm); color: var(--n-500); margin: 0 0 20px; }

/* Evidence type & method badges */
.ev-type-badge { font-size:11px; padding:1px 6px; border-radius:10px; background:var(--brand-light); color:var(--brand); font-weight:600; }
.ev-type-url { background:var(--amber-light); color:var(--warning-dark,var(--warning-dark)); }
.ev-type-note { background:var(--purple-light); color:#6b21a8; }
.ev-method-badge { font-size:11px; padding:1px 6px; border-radius:10px; background:var(--success-light); color:var(--success); font-weight:500; }

/* Evidence expiry badges */
.ev-expiry-badge { font-size:11px; padding:1px 6px; border-radius:10px; font-weight:600; background:var(--info-light); color:var(--brand); }
.ev-expiry-ok   { background:var(--success-light); color:var(--success-dark); }
.ev-expiry-soon { background:var(--amber-light); color:var(--warning-dark); }
.ev-expiry-expired { background:var(--danger-light); color:var(--danger-dark); }

/* Evidence sufficiency */
.ev-suf-badge { font-size:11px; padding:1px 6px; border-radius:10px; font-weight:600; }
.ev-suf-select { font-size:11px; padding:1px 4px; border-radius:4px; border:1px solid var(--n-200); cursor:pointer; background:var(--n-0); }

/* Inline evidence tab */
.il-ev-drop {
  border: 2px dashed var(--n-200); border-radius:8px; padding:20px 16px;
  text-align:center; color:var(--n-400); font-size:13px; cursor:pointer;
  transition: border-color .15s, background .15s; margin:12px 16px 0;
}
.il-ev-drop:hover, .il-ev-drop.drag-over { border-color:var(--brand); background:var(--brand-light); color:var(--brand); }
.il-ev-drop-hint { font-size:12px; margin-top:4px; color:var(--n-400); }
.il-ev-actions { display:flex; gap:8px; padding:8px 16px; }
.il-ev-list { padding:8px 16px; display:flex; flex-direction:column; gap:6px; }
.il-ev-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; background:var(--n-50); border:1px solid var(--n-100); }
.il-ev-item-icon { font-size:18px; flex-shrink:0; }
.il-ev-item-body { flex:1; min-width:0; }
.il-ev-item-title { font-size:13px; font-weight:600; color:var(--n-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.il-ev-item-meta { display:flex; gap:6px; margin-top:2px; flex-wrap:wrap; }
.il-ev-quick-form { margin:8px 16px; padding:12px; background:var(--n-50); border-radius:8px; border:1px solid var(--n-200); display:flex; flex-direction:column; gap:8px; }
.il-ev-quick-form input, .il-ev-quick-form textarea, .il-ev-quick-form select { font-size:12px; padding:5px 8px; border:1px solid var(--n-200); border-radius:4px; width:100%; box-sizing:border-box; }
.il-ev-quick-form textarea { resize:vertical; min-height:60px; }
.il-ev-quick-actions { display:flex; gap:8px; }

/* ─── Command Palette ────────────────────────────────────────────────── */
/* ─── Command Palette ─────────────────────────────────────────────────── */
.cp-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15,23,42,.55); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 80px; animation: cpFadeIn .12s ease;
}
@keyframes cpFadeIn { from { opacity: 0; } to { opacity: 1; } }
.cp-dialog {
  width: 100%; max-width: 640px;
  background: var(--n-0); border-radius: 16px;
  box-shadow: 0 24px 64px rgba(79,70,229,.18), 0 0 0 1px rgba(79,70,229,.1);
  overflow: hidden; animation: cpSlideIn .15s cubic-bezier(.22,.68,0,1.2);
}
@keyframes cpSlideIn { from { transform: translateY(-16px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* Input row — indigo gradient header */
.cp-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cp-icon { color: var(--brand-mid); flex-shrink: 0; }
.cp-input {
  flex: 1; border: none; outline: none; font-size: var(--text-md); font-weight: 500;
  color: var(--hero-text); background: transparent; font-family: inherit;
}
.cp-input::placeholder { color: var(--n-600); }
.cp-esc-hint {
  background: rgba(79,70,229,.08); color: var(--brand-mid);
  border: 1px solid var(--brand-muted); border-radius: 6px;
  padding: 2px 8px; font-size: var(--text-2xs); font-weight: 600; font-family: inherit;
  flex-shrink: 0; letter-spacing: .02em;
}

/* Results list */
.cp-results { max-height: 420px; overflow-y: auto; padding: 6px 0; }
.cp-group-label {
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-pale);
  padding: 10px 18px 4px;
}
.cp-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; cursor: pointer; transition: background .08s;
}
.cp-item:hover, .cp-item.cp-active {
  background: var(--purple-light);
}
.cp-item.cp-active .cp-item-main { color: var(--brand); }
.cp-item-icon { font-size: var(--text-md); flex-shrink: 0; width: 24px; text-align: center; }
.cp-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cp-item-main { font-size: var(--text-sm); font-weight: 500; color: var(--n-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .08s; }
.cp-item-sub  { font-size: var(--text-2xs); color: var(--n-500); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-item-type { font-size: 10px; color: var(--brand-pale); font-family: monospace; flex-shrink: 0; }
.cp-badge {
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
  white-space: nowrap; flex-shrink: 0; text-transform: capitalize;
}
.cp-mark { background: var(--brand-tint); color: var(--brand-hover); border-radius: 2px; padding: 0 1px; }
.cp-empty { padding: 32px 16px; text-align: center; color: var(--n-400); font-size: var(--text-sm); }
.cp-loading { padding: 24px 16px; text-align: center; color: var(--brand-pale); font-size: var(--text-sm); }

/* Footer hint bar */
.cp-footer {
  display: flex; align-items: center; gap: 16px;
  padding: 9px 18px;
  border-top: 1px solid var(--brand-soft);
  background: #faf9ff;
  font-size: var(--text-2xs); color: var(--brand-pale);
}
.cp-footer kbd {
  background: var(--brand-soft); border: 1px solid var(--brand-muted); border-radius: 5px;
  padding: 1px 6px; font-size: 10px; font-family: inherit; color: var(--brand-mid);
}
.cp-footer-scope { margin-left: auto; color: var(--brand); font-weight: 600; font-size: var(--text-2xs); }

/* ============================================================
   Assessment Team Card (.team-*)
   ============================================================ */
.team-list { display: flex; flex-direction: column; gap: 6px; }
.team-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: var(--n-50); border: 1px solid var(--n-100); }
.team-row:hover { background: var(--n-100); }
.team-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-hover); font-weight: 700; font-size: var(--text-base); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.team-info { flex: 1; min-width: 0; }
.team-name { font-size: var(--text-sm); font-weight: 600; color: var(--n-800); display: block; }
.team-username { font-size: var(--text-2xs); color: var(--n-400); }
.team-role-pill { font-size: var(--text-2xs); font-weight: 600; padding: 2px 10px; border-radius: 10px; white-space: nowrap; }
.team-role-select { font-size: var(--text-xs); padding: 3px 6px; border: 1px solid var(--n-200); border-radius: 6px; background: var(--n-0); color: var(--n-750); cursor: pointer; width: auto; flex-shrink: 0; }
.team-remove-btn { flex-shrink: 0; width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--danger-border); background: var(--n-0); color: var(--danger); font-size: var(--text-xs); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.team-remove-btn:hover { background: var(--danger-light); }
.team-add-form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--n-100); }
.team-add-inner { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ─── Wizard Import Drop Zone ─────────────────────────────────────────── */
.wizard-import-drop {
  border: 2px dashed var(--n-300); border-radius: 12px; padding: 32px 24px;
  text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
  margin-top: 8px;
}
.wizard-import-drop:hover, .wizard-import-drop.dragover {
  border-color: var(--brand); background: var(--brand-light);
}
.wizard-import-icon { font-size: 36px; line-height: 1; margin-bottom: 8px; }
.wizard-import-label { font-size: var(--text-base); font-weight: 600; color: var(--n-800); margin-bottom: 4px; }
.wizard-import-hint { font-size: var(--text-xs); color: var(--n-400); }

/* ─── Domain Summary Panel (Controls page) ───────────────────────────── */
.dom-summary {
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: 14px;
  overflow: hidden; margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.dom-summary-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 20px; cursor: pointer; user-select: none;
  border-bottom: 1px solid rgba(255,255,255,.08); transition: filter .15s;
  background: var(--hero-bg);
}
.dom-summary-header:hover { filter: brightness(.97); }
.dom-summary-title { font-size: var(--text-sm); font-weight: 700; color: var(--hero-text); text-transform: capitalize; letter-spacing: 0.01em; }
.dom-toggle-hint { font-size: var(--text-2xs); color: var(--hero-muted); }
.dom-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1px; background: var(--n-200);
}
.dom-card {
  padding: 16px 18px; background: var(--n-0); cursor: pointer;
  transition: background .15s, border-left-color .15s;
  display: flex; flex-direction: column; gap: 8px;
  border-left: 3px solid transparent;
}
.dom-card:hover { background: var(--brand-light); border-left-color: var(--brand); }
.dom-card-name { font-size: var(--text-xs); font-weight: 600; color: var(--n-750); line-height: 1.35; }
.dom-card-bar .guideline-bar { height: 5px; border-radius: 3px; }
.dom-card-footer { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.dom-card-pct { font-size: var(--text-lg); font-weight: 800; line-height: 1; }
.dom-card-count { font-size: var(--text-2xs); color: var(--n-400); }
.dom-collapsed .dom-cards { display: none; }
.dom-collapsed .dom-summary-header { border-bottom: none; }
.dom-collapsed .dom-toggle-hint::after { content: ' (click to expand)'; }
.dom-summary:not(.dom-collapsed) .dom-toggle-hint::after { content: ' (click to collapse)'; }

/* ─── Assessment Comparison ─────────────────────────────────────────────── */
.cmp-summary-strip { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cmp-summary-item { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); }
.cmp-chip {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: .3px;
}
.cmp-improved  { background: var(--success-light); color: var(--success-dark); }
.cmp-regressed { background: var(--danger-light); color: var(--danger-dark); }
.cmp-changed   { background: var(--warning-light); color: var(--warning-dark); }
.cmp-unchanged { background: var(--n-100); color: var(--n-600); }
.cmp-only-a    { background: var(--brand-light); color: var(--brand-hover); }
.cmp-only-b    { background: var(--brand-soft); color: var(--purple); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.cmp-table th {
  background: var(--n-50); text-align: left; padding: 8px 12px;
  border-bottom: 1px solid var(--n-200); font-size: var(--text-2xs); font-weight: 700;
  color: var(--n-600); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap;
}
.cmp-table td { padding: 7px 12px; border-bottom: 1px solid var(--n-100); vertical-align: middle; }
.cmp-row-changed td { background: #fafaf6; }
.cmp-id { font-family: monospace; color: var(--brand); font-weight: 600; white-space: nowrap; }

/* Comparison filter chips */
.cmp-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--n-100); }
.cmp-filter-chip { padding: 3px 10px; border-radius: 12px; border: 1px solid var(--n-200); background: var(--n-50); color: var(--n-600); font-size: var(--text-xs); cursor: pointer; font-weight: 500; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.cmp-filter-chip:hover, .cmp-fc-active { background: var(--brand); color: var(--n-0); border-color: var(--brand); }
.cmp-fc-improved.cmp-fc-active  { background: var(--success-dark); border-color: var(--success-dark); }
.cmp-fc-regressed.cmp-fc-active { background: var(--danger-dark); border-color: var(--danger-dark); }
.cmp-fc-changed.cmp-fc-active   { background: var(--warning-dark); border-color: var(--warning-dark); }
.cmp-fc-unchanged.cmp-fc-active { background: var(--n-600); border-color: var(--n-600); }

/* ─── CMP-02: Compare donut summary ────────────────────────────────────── */
.cmp-donut-row {
  display: flex; align-items: center; justify-content: center;
  gap: 0; padding: 24px 20px; flex-wrap: wrap;
}
.cmp-donut-card {
  flex: 1; min-width: 200px; max-width: 320px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.cmp-donut-label {
  font-size: var(--text-sm); font-weight: 600; color: var(--n-700);
  text-align: center; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmp-donut-body { display: flex; align-items: center; gap: 16px; }
.cmp-donut-legend { display: flex; flex-direction: column; gap: 5px; }
.cmp-legend-row { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); }
.cmp-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cmp-legend-lbl { color: var(--n-600); flex: 1; }
.cmp-legend-val { font-weight: 600; color: var(--n-700); min-width: 20px; text-align: right; }
.cmp-donut-total { font-size: var(--text-xs); color: var(--n-400); }
.cmp-donut-divider {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 24px; flex-shrink: 0;
}
.cmp-vs-badge {
  font-size: var(--text-sm); font-weight: 700; color: var(--n-400);
  background: var(--n-100); border-radius: 50%; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.cmp-delta { font-size: var(--text-xs); font-weight: 600; color: var(--n-400); }
.cmp-delta-up   { color: var(--success); }
.cmp-delta-down { color: var(--danger); }
.cmp-donut-row-3 .cmp-donut-card { min-width: 160px; max-width: 240px; }
.cmp-donut-row-3 .cmp-donut-divider { padding: 0 12px; }
.cmp-mode-toggle { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.cmp-mode-btn { padding: 5px 14px; font-size: var(--text-sm); font-weight: 500; background: var(--n-0); color: var(--n-500); border: none; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.cmp-mode-btn:first-child { border-right: 1px solid var(--border); }
.cmp-mode-active { background: var(--brand) !important; color: var(--n-0) !important; }

/* RFI overdue badge + filter */
.rfi-overdue-badge { font-size: var(--text-xs); font-weight: 700; background: var(--danger-light); color: var(--danger-dark); border-radius: 10px; padding: 1px 7px; margin-left: 4px; }
.rfi-overdue-filter { display: flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--n-600); cursor: pointer; white-space: nowrap; }
.rfi-overdue-filter input { cursor: pointer; }
/* RFI response attachment */
.rfi-att-chip { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-2xs); color: var(--brand); text-decoration: none; background: var(--brand-bg, #f0f4ff); border-radius: 4px; padding: 1px 5px; margin-top: 3px; white-space: nowrap; }
.rfi-att-chip:hover { opacity: 0.8; }
.rfi-att-existing { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--n-50); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; }
.rfi-att-link { font-size: var(--text-sm); color: var(--brand); text-decoration: none; flex: 1; }
.rfi-att-link:hover { text-decoration: underline; }
.rfi-att-del { background: none; border: none; cursor: pointer; color: var(--n-400); font-size: var(--text-sm); padding: 0 2px; line-height: 1; }
.rfi-att-del:hover { color: var(--danger); }
/* Controls autopilot */
.ctrl-autopilot-btn { border-color: var(--brand) !important; color: var(--brand) !important; }
.ctrl-autopilot-btn:hover { background: var(--brand-light) !important; }
.ctrl-autopilot-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ─── Notification Dropdown ─────────────────────────────────────────────── */
.notif-bell { position: relative; }
.notif-count {
  position: absolute; top: 2px; right: 2px;
  background: var(--danger); color: var(--n-0); border-radius: 10px;
  font-size: 10px; font-weight: 700; min-width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; pointer-events: none;
}
.notif-dropdown {
  position: fixed; bottom: 70px; left: 72px;
  width: 340px; max-height: 420px; overflow-y: auto;
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.16); z-index: 1200;
}
.notif-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: var(--text-xs); font-weight: 800; color: var(--hero-text); position: sticky; top: 0;
  background: var(--hero-bg);
}
.notif-item {
  display: flex; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--n-50); cursor: pointer;
  transition: background .12s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--n-50); }
.notif-icon { font-size: var(--text-base); line-height: 1.4; flex-shrink: 0; }
.notif-body { display: flex; flex-direction: column; gap: 2px; }
.notif-msg { font-size: var(--text-sm); font-weight: 500; color: var(--n-800); line-height: 1.35; }
.notif-detail { font-size: var(--text-2xs); color: var(--n-500); }
.notif-empty { padding: 20px; text-align: center; color: var(--n-400); font-size: var(--text-sm); }
.notif-loading { padding: 20px; text-align: center; color: var(--n-400); font-size: var(--text-sm); }
.notif-sev-critical .notif-msg { color: var(--danger-dark); }
.notif-sev-warning  .notif-msg { color: var(--warning-dark); }
.notif-footer { padding: 8px 14px; border-top: 1px solid var(--n-100); text-align: center; }
.notif-view-all { font-size: var(--text-xs); color: var(--brand); font-weight: 600; text-decoration: none; }
.notif-view-all:hover { text-decoration: underline; }

/* ─── Notification Centre (NOTIF-03) ──────────────────────────────────────── */
.nc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.nc-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.nc-filter-btn { padding: 5px 14px; border: 1px solid var(--n-200); border-radius: 20px; background: var(--n-0); color: var(--n-600); font-size: var(--text-xs); font-weight: 500; cursor: pointer; transition: all var(--t-fast); }
.nc-filter-btn:hover { border-color: var(--brand); color: var(--brand); }
.nc-filter-btn--active { background: var(--brand); border-color: var(--brand); color: var(--n-0); }
.nc-list { display: flex; flex-direction: column; gap: 10px; }
.nc-loading { padding: 40px; text-align: center; color: var(--n-400); }
.nc-item {
  display: flex; gap: 14px; background: var(--n-0); border: 1px solid var(--n-200);
  border-radius: 10px; padding: 14px 16px; align-items: flex-start;
}
.nc-item--danger  { border-left: 4px solid var(--danger); }
.nc-item--warning { border-left: 4px solid var(--amber); }
.nc-item--info    { border-left: 4px solid var(--brand); }
.nc-item-icon { font-size: 18px; line-height: 1.3; flex-shrink: 0; }
.nc-item-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.nc-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nc-item-title { font-size: var(--text-sm); font-weight: 600; color: var(--n-900); }
.nc-item-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.nc-badge { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: var(--n-100); color: var(--n-600); }
.nc-badge--danger  { background: var(--danger-light); color: var(--danger-dark); }
.nc-badge--warning { background: var(--warning-light); color: var(--warning-dark); }
.nc-badge--info    { background: #dbeafe; color: #1e40af; }
.nc-item-detail { font-size: var(--text-xs); color: var(--n-500); }
.nc-item-actions { display: flex; gap: 8px; }

/* ─── Cross-Assessment Inheritance Tab ──────────────────────────────────── */
.il-inherit-current {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--success-light); border: 1px solid var(--success-border); border-radius: 8px;
  padding: 8px 12px; margin-bottom: 12px; font-size: var(--text-xs); color: var(--success-dark);
}
.il-inherit-candidate {
  border: 1px solid var(--n-200); border-radius: 8px;
  margin-bottom: 12px; overflow: hidden;
}
.il-inherit-cand-header {
  display: flex; gap: 12px; align-items: center;
  background: var(--hero-bg);
  padding: 8px 12px; font-size: var(--text-xs); border-bottom: 1px solid rgba(255,255,255,.08);
}
.il-inherit-cand-assess { font-weight: 700; color: var(--hero-text); flex: 1; }
.il-inherit-cand-status { color: var(--brand); }
.il-inherit-cand-impl   { color: var(--purple); }
.il-inherit-cand-date   { color: var(--n-400); font-size: var(--text-2xs); }
.il-inherit-fields {
  padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 6px 16px;
}
.il-inherit-chk-label {
  font-size: var(--text-xs); display: flex; align-items: center; gap: 4px; cursor: pointer;
}
.il-inherit-val {
  background: var(--n-100); color: var(--n-600); border-radius: 4px;
  padding: 1px 5px; font-size: 10px; font-family: monospace; max-width: 100px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── Guideline Row Sparkline ────────────────────────────────────────────── */
.guideline-sparkline { height: 28px; width: 28px; }

/* ─── Snapshot card table ────────────────────────────────────────────────── */
#snapshot-card table td, #snapshot-card table th {
  padding: 7px 10px; border-bottom: 1px solid var(--n-100); font-size: var(--text-xs);
}

/* ─── Inline Control History Tab ─────────────────────────────────────────── */
.il-hist-row {
  padding: 8px 0; border-bottom: 1px solid var(--n-100);
  display: flex; flex-direction: column; gap: 4px;
}
.il-hist-row:last-child { border-bottom: none; }
.il-hist-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--text-2xs);
}
.il-hist-field { font-weight: 700; color: var(--n-750); }
.il-hist-by    { color: var(--brand); }
.il-hist-when  { color: var(--n-400); }
.il-hist-reason { color: var(--warning); font-style: italic; }
.il-hist-diff  { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); flex-wrap: wrap; }
.il-hist-old   { background: var(--danger-light); color: var(--danger-dark); padding: 2px 6px; border-radius: 4px; font-family: monospace; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.il-hist-new   { background: var(--success-light); color: var(--success-dark); padding: 2px 6px; border-radius: 4px; font-family: monospace; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.il-hist-arrow { color: var(--n-400); font-size: var(--text-base); }

/* ─── Assessment Card Clone Button ───────────────────────────────────────── */
.home-assess-actions {
  display: flex; gap: 6px; padding: 6px 0 0; border-top: 1px solid var(--n-100); margin-top: 4px;
}
.home-assess-clone-btn {
  font-size: var(--text-2xs); padding: 3px 8px; opacity: 0.7;
}
.home-assess-card:hover .home-assess-clone-btn { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   LANDING PAGE — ELEGANT WHITE THEME
   Clean white base · var(--brand) accent · generous space · hover lifts
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Base */
#landing-page { background: var(--n-0); color: var(--n-900); font-family: 'Inter', system-ui, sans-serif; }

/* ─── Nav */
.lp-nav { background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--n-100); box-shadow: 0 1px 0 var(--n-100); }
.lp-logo-icon { background: var(--brand); border-radius: 9px; }
.lp-logo-text { color: var(--n-900); letter-spacing: 2.5px; }
.lp-nav-links a { color: var(--n-500); transition: color .15s; }
.lp-nav-links a:hover { color: var(--brand); }
.lp-btn-sm { color: var(--n-600); border-color: var(--n-200); }
.lp-btn-signin { color: var(--brand); background: var(--brand-light); border-color: var(--brand-muted); }
.lp-btn-signin:hover { background: var(--brand-tint); border-color: var(--brand); }
.lp-btn-sm:hover { color: var(--brand); border-color: var(--brand-muted); background: var(--brand-light); }

/* ─── Hero (theme overrides — base styles now set at top of LP section) */
.lp-hero-h1 { color: var(--n-900); }
.lp-hero-sub { color: var(--n-600); }
.lp-hero-trust { color: var(--n-400); }
.lp-trust-sep { color: var(--n-300); }

/* ─── Eyebrow */
.lp-hero-eyebrow { display: inline-flex; color: var(--brand-hover); background: var(--brand-light); border: 1px solid var(--brand-muted); border-radius: 20px; padding: 5px 14px; font-size: var(--text-2xs); letter-spacing: 1.5px; font-weight: 700; }
.lp-eyebrow-dot  { background: var(--brand); }
@keyframes lp-pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }

/* ─── Gradient text */
.lp-gradient-text { background: linear-gradient(135deg, var(--brand-active) 0%, var(--brand) 60%, var(--brand) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ─── Buttons */
.lp-logo-icon     { background: var(--brand); }
.lp-btn-cta       { background: var(--brand); color: var(--n-0); border-radius: 9px; font-weight: 600; }
.lp-btn-cta:hover { background: var(--brand-hover); transform: translateY(-1px); box-shadow: 0 4px 18px rgba(99,102,241,.3); }
.lp-btn-secondary { background: var(--n-0); color: var(--n-750); border: 1.5px solid var(--n-200); }
.lp-btn-secondary:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.lp-btn-primary   { background: var(--brand); color: var(--n-0); border-radius: 10px; box-shadow: 0 4px 18px rgba(99,102,241,.28); }
.lp-btn-primary:hover { background: var(--brand-hover); box-shadow: 0 6px 24px rgba(99,102,241,.38); opacity: 1; transform: translateY(-2px); }
.lp-btn-ghost { color: var(--n-600); border: 1.5px solid var(--n-200); border-radius: 10px; }
.lp-btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* ─── Section shared */
.lp-section-label { color: var(--brand); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 2px; }
.lp-section-h2    { color: var(--n-900); font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.lp-section-sub   { color: var(--n-500); font-size: var(--text-base); line-height: 1.6; }

/* ─── Hero chips */
.lp-chip-green  { background: var(--brand-light); border-color: var(--brand-muted); color: var(--brand); font-weight: 600; }
.lp-chip-indigo { background: var(--brand-light); border-color: var(--brand-muted); color: var(--brand-hover); font-weight: 600; }
.lp-chip-amber  { background: var(--amber-light); border-color: var(--warning-border); color: #a16207; font-weight: 600; }

/* ─── Social bar */
.lp-social-bar   { background: var(--n-25); border-top: 1px solid var(--n-100); border-bottom: 1px solid var(--n-100); }
.lp-social-label { color: var(--n-400); font-size: var(--text-2xs); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.lp-social-badge {
  background: var(--n-0); border: 1px solid var(--n-150); color: var(--n-750);
  border-radius: 8px; padding: 6px 14px; font-size: var(--text-sm); font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.lp-social-badge:hover { border-color: var(--brand-muted); box-shadow: 0 2px 10px rgba(99,102,241,.08); transform: translateY(-1px); }
.lp-sb-icon { font-size: var(--text-md); line-height: 1; }

/* ─── Customer segment section — dark treatment preserved in light mode */
.lp-customers { background: linear-gradient(160deg, var(--n-900) 0%, var(--brand-depth) 50%, var(--n-900) 100%); }
.lp-customers .lp-section-h2 { color: var(--n-50); }
.lp-customers .lp-section-label { color: var(--brand-400); }
.lp-customers .lp-section-sub { color: var(--n-400); }

/* ─── Deployment (light-mode overrides) */
.lp-dcard { background: var(--n-0); border-color: var(--n-200); }
.lp-dcard-icon { background: var(--brand-light); color: var(--brand); }
.lp-dcard-title { color: var(--n-900); }
.lp-dcard-desc { color: var(--n-600); }
.lp-dcard-list li { color: var(--n-500); }
.lp-dcard-list li::before { background: var(--brand); }
.lp-dcard-env { border-top-color: var(--n-100); }
.lp-dcard-env span { background: var(--brand-light); color: var(--brand-hover); border-color: var(--brand-muted); }
.lp-dcard-featured { background: linear-gradient(160deg, var(--brand-depth) 0%, var(--n-800) 100%); border-color: rgba(99,102,241,.4); }
.lp-deploy-proof { background: var(--n-50); border-top-color: var(--n-200); }
.lp-deploy-proof-icon { background: var(--brand-light); color: var(--brand); }
.lp-deploy-proof-label { color: var(--n-900); }
.lp-deploy-proof-val { color: var(--n-500); }
.lp-deploy-proof-div { background: var(--n-200); }

/* ─── Problem + Impact (light-mode overrides) */
.lp-pain { background: var(--brand-light); }
.lp-pain .lp-section-h2 { color: var(--n-900); }
.lp-pain .lp-section-label { color: var(--brand); }
.lp-pain .lp-section-sub { color: var(--n-600); }
.lp-pain-card { background: var(--n-0); border-color: var(--n-200); }
.lp-pain-card-icon { background: var(--danger-light); color: var(--danger); }
.lp-pain-card-title { color: var(--n-900); }
.lp-pain-card-desc { color: var(--n-600); }
.lp-pain-card-fix { color: var(--brand-hover); border-color: var(--n-200); background: rgba(99,102,241,.04); }
.lp-pain-card-fix svg { color: var(--brand); }
.lp-pain-impact { background: linear-gradient(100deg, var(--brand-depth) 0%, var(--n-800) 60%, var(--n-900) 100%); }

/* ─── How it works */
.lp-how { background: #f8faff; }
.lp-how .lp-section-h2 { color: var(--n-900); }
.lp-how .lp-section-label { color: var(--brand-mid); }
.lp-how .lp-section-sub { color: var(--n-600); }
.lp-how-step-label { font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--brand-muted); margin-bottom: 10px; }
.lp-how-icon { background: var(--brand-light); color: var(--brand); width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; flex-shrink: 0; }
.lp-how-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; }
.lp-how-steps::before {
  content: ''; position: absolute; top: 20px; left: calc(12.5% + 8px); right: calc(12.5% + 8px);
  height: 2px; background: linear-gradient(90deg, var(--brand-muted), var(--brand-mid), var(--brand-muted));
  z-index: 0;
}
.lp-how-step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; position: relative; }
.lp-how-num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: var(--n-0);
  font-size: 18px; font-weight: 900; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-bottom: 16px; position: relative; z-index: 1;
  box-shadow: 0 4px 20px rgba(99,102,241,.4);
}
.lp-how-connector { display: none; }
.lp-how-connector-last { display: none; }
.lp-how-body h4 { font-size: var(--text-md); font-weight: 800; color: var(--n-900); margin-bottom: 6px; line-height: 1.3; }
.lp-how-body p  { font-size: var(--text-sm); color: var(--n-500); line-height: 1.6; }

/* ─── Feature tabs */
.lp-tabs-section { background: var(--brand-light); }
.lp-tabs-section .lp-section-h2 { color: var(--n-900); }
.lp-tabs-nav { background: rgba(99,102,241,.08); border: 1px solid var(--brand-muted); border-radius: 12px; padding: 4px; }
.lp-tab-btn { color: var(--n-500); background: transparent; border-radius: 9px; font-size: var(--text-sm); font-weight: 600; padding: 10px 20px; transition: background .15s, color .15s, box-shadow .15s; }
.lp-tab-btn:hover { color: var(--brand-hover); background: rgba(255,255,255,.6); }
.lp-tab-btn.active { color: var(--n-0); background: var(--brand); box-shadow: 0 2px 10px rgba(99,102,241,.35); }
.lp-tab-text h3 { color: var(--n-900); }
.lp-tab-text p { color: var(--n-600); }
.lp-tab-point { color: var(--n-800); }
.lp-tab-check { background: var(--brand-light); color: var(--brand); }
.lp-tm-id-txt { color: var(--brand); }
.lp-tm-il-active { color: var(--brand); border-bottom-color: var(--brand); }
.lp-active-id { color: var(--brand-hover); }
.lp-tm-expanded { background: var(--brand-light); }
.lp-il-active { color: var(--brand); border-bottom-color: var(--brand); }
.lp-mock-active   { background: var(--brand) !important; }
.lp-mock-hbar-fill { background: linear-gradient(90deg, var(--brand), var(--brand-hover)); }
.lp-mock-tile-brand .lp-mock-tile-val { color: var(--brand); }
.lp-mock-tile-brand { border-top-color: var(--brand); }
.lp-mock-td-id    { color: var(--brand); }
.lp-mock-hero-eyebrow { background: var(--brand); }
.lp-mock-leg-brand { background: var(--brand); }
.lp-mock-hbar-pct { color: var(--brand); }
.lp-mock-pct { color: var(--brand); }

/* ─── Testimonials */
.lp-testimonials { background: var(--n-0); }
.lp-testi-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  margin-bottom: 48px; flex-wrap: wrap;
}
.lp-testi-rating-block { text-align: right; flex-shrink: 0; }
.lp-testi-big-stars { font-size: 22px; color: var(--amber); letter-spacing: 3px; line-height: 1; margin-bottom: 6px; }
.lp-testi-rating-text { font-size: var(--text-sm); color: var(--n-500); line-height: 1.5; }
.lp-testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.lp-testi-card {
  background: transparent; border: none; border-right: 1px solid var(--n-200);
  padding: 8px 36px 8px 0; display: flex; flex-direction: column; gap: 16px;
  transition: none;
}
.lp-testi-card:last-child { border-right: none; padding-right: 0; }
.lp-testi-card:not(:first-child) { padding-left: 36px; }
.lp-testi-featured {
  background: transparent; border-top: 3px solid var(--brand); border-right: 1px solid var(--n-200);
  padding-top: 24px; box-shadow: none;
}
.lp-testi-featured:hover { transform: none; box-shadow: none; }
.lp-testi-quote-mark { font-size: 56px; line-height: .75; color: var(--brand-muted); font-family: Georgia, serif; }
.lp-testi-featured .lp-testi-quote-mark { color: var(--brand); }
.lp-testi-quote { font-size: var(--text-base); color: var(--n-800); line-height: 1.75; flex: 1; font-style: italic; }
.lp-testi-featured .lp-testi-quote { color: var(--n-900); font-weight: 500; }
.lp-testi-footer { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--n-100); }
.lp-testi-stars  { color: var(--amber); font-size: var(--text-2xs); letter-spacing: 3px; }
.lp-testi-avatar { width: 40px; height: 40px; border-radius: 50%; font-size: var(--text-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--n-0); }
.lp-testi-av-indigo { background: linear-gradient(135deg, var(--brand), var(--brand-hover)); }
.lp-testi-av-green  { background: linear-gradient(135deg, #10b981, #059669); }
.lp-testi-av-purple { background: linear-gradient(135deg, var(--purple), #ec4899); }
.lp-testi-name { font-size: var(--text-sm); font-weight: 700; color: var(--n-900); }
.lp-testi-featured .lp-testi-name { color: var(--n-900); }
.lp-testi-role { font-size: var(--text-xs); color: var(--n-500); }
.lp-testi-featured .lp-testi-role { color: var(--brand); }

/* ─── Frameworks */
.lp-frameworks { background: var(--n-0); }
.lp-frameworks .lp-section-label { color: var(--brand); }
.lp-frameworks .lp-section-h2    { color: var(--n-900); }
.lp-frameworks .lp-section-sub   { color: var(--n-500); }
.lp-fw-groups { display: flex; flex-direction: column; gap: 20px; }
.lp-fw-group { border: 1px solid var(--n-150); border-radius: 16px; overflow: hidden; }
.lp-fw-group-header { padding: 14px 20px; font-size: var(--text-2xs); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid var(--n-150); }
.lp-fw-group-au   { background: var(--brand-light); color: var(--brand-hover); }
.lp-fw-group-intl { background: var(--brand-light); color: var(--brand); }
.lp-fw-group-us   { background: var(--brand-light); color: var(--brand); }
.lp-fw-group-uk   { background: var(--brand-light); color: var(--purple); }
.lp-fw-card {
  background: var(--n-0); border-right: 1px solid var(--n-100); border-bottom: 1px solid var(--n-100);
  transition: background .12s, transform .12s;
}
.lp-fw-card:hover { background: var(--n-50); }
.lp-fw-logo-asd   { background: var(--brand-light); color: var(--brand-hover); }
.lp-fw-logo-e8    { background: var(--brand-light); color: var(--brand); }
.lp-fw-logo-disp  { background: var(--brand-light); color: var(--brand); }
.lp-fw-logo-iso   { background: var(--brand-light); color: var(--brand); }
.lp-fw-logo-nist  { background: var(--brand-light); color: var(--brand); }
.lp-fw-logo-800   { background: var(--brand-light); color: var(--brand); }
.lp-fw-logo-fedramp { background: var(--brand-light); color: var(--brand); }
.lp-fw-logo-cmmc  { background: var(--brand-light); color: var(--brand); }
.lp-fw-logo-soc2  { background: var(--brand-light); color: var(--brand); }
.lp-fw-logo-pci   { background: var(--brand-light); color: var(--brand); }
.lp-fw-logo-ce    { background: var(--brand-light); color: var(--purple); }
.lp-fw-logo-caf   { background: var(--brand-light); color: var(--purple); }
.lp-fw-logo-custom { background: var(--n-100); color: var(--n-500); }
.lp-fw-card-body strong { color: var(--n-900); }
.lp-fw-card-body span   { color: var(--n-500); }
.lp-fw-card-custom .lp-fw-card-body strong { color: var(--n-400); }

/* ─── Security promise strip */
.lp-promise-strip {
  background: linear-gradient(90deg, var(--n-900) 0%, var(--brand-depth) 50%, var(--n-900) 100%);
  border-top: 1px solid rgba(99,102,241,.2);
  border-bottom: 1px solid rgba(99,102,241,.2);
}
.lp-promise-inner {
  max-width: 1200px; margin: 0 auto; padding: 22px 32px;
  display: flex; align-items: center; gap: 0; flex-wrap: wrap;
}
.lp-promise-item {
  flex: 1; display: flex; align-items: center; gap: 10px;
  font-size: var(--text-sm); font-weight: 600; color: var(--n-300);
  padding: 6px 20px; white-space: nowrap;
}
.lp-promise-item:hover { color: var(--n-100); }
.lp-promise-item svg { color: var(--brand-400); flex-shrink: 0; }
.lp-promise-sep { width: 1px; height: 28px; background: rgba(99,102,241,.25); flex-shrink: 0; }

/* ─── Demo CTA */
.lp-demo-cta { background: var(--n-0); }
.lp-demo-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.lp-demo-left h2 { font-size: 38px; font-weight: 900; color: var(--n-900); line-height: 1.2; letter-spacing: -.02em; margin-bottom: 12px; }
.lp-demo-left p  { font-size: var(--text-base); color: var(--n-500); line-height: 1.65; margin-bottom: 18px; }
.lp-demo-list li { color: var(--n-300); font-size: var(--text-base); }
.lp-demo-list li::before { content: '✓'; color: var(--brand); font-weight: 700; }
.lp-demo-form-card {
  background: var(--n-0); border: 1px solid var(--n-150); border-radius: 20px; padding: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.lp-demo-form-card h3 { font-size: var(--text-lg); font-weight: 700; color: var(--n-900); margin-bottom: 4px; }
.lp-demo-form-sub { font-size: var(--text-sm); color: var(--n-500); margin-bottom: 18px; }
.lp-demo-input, .lp-demo-select { background: var(--n-50); border: 1.5px solid var(--n-200); color: var(--n-900); border-radius: 9px; font-size: var(--text-base); padding: 11px 14px; }
.lp-demo-input::placeholder { color: var(--n-400); }
.lp-demo-input:focus, .lp-demo-select:focus { border-color: var(--brand); background: var(--n-0); box-shadow: 0 0 0 3px rgba(99,102,241,.08); }
.lp-demo-field label { font-size: var(--text-sm); font-weight: 600; color: var(--n-750); margin-bottom: 6px; }
.lp-demo-btn { background: var(--brand); color: var(--n-0); border-radius: 12px; font-size: var(--text-md); font-weight: 700; padding: 13px; letter-spacing: .01em; box-shadow: 0 4px 18px rgba(99,102,241,.28); transition: background .15s, transform .15s, box-shadow .15s, opacity .15s; }
.lp-demo-btn:hover { background: var(--brand-hover); opacity: 1; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(99,102,241,.36); }

/* ─── Step numbers */
.lp-step-num { background: var(--brand); color: var(--n-0); box-shadow: 0 4px 14px rgba(99,102,241,.3); }
.lp-step { background: var(--n-0); border: 1px solid var(--n-150); border-radius: 16px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.lp-step:hover { transform: translateY(-4px); border-color: var(--brand-muted); box-shadow: 0 10px 28px rgba(99,102,241,.1); }

/* ─── Footer */
.lp-footer { background: var(--n-900); border-top: none; }
.lp-footer-bottom-bar { border-top-color: rgba(255,255,255,.06); }
.lp-footer-badge { background: rgba(99,102,241,.15); border-color: rgba(99,102,241,.25); color: var(--brand-muted); }
.lp-footer-col h4 { color: var(--n-300); }
.lp-footer-col a { color: var(--n-500); }
.lp-footer-col a:hover { color: var(--n-400); }
.lp-footer-tagline { color: var(--n-500); }
.lp-footer-made { color: var(--n-600); }

/* ─── Responsive additions for new sections */
@media (max-width: 900px) {
  .lp-hero-h1 { font-size: 32px; }
  .lp-section-h2 { font-size: 24px; }
  .lp-metrics-h2 { font-size: 24px; }
  .lp-pain-grid { grid-template-columns: 1fr; }
  .lp-metrics-grid { grid-template-columns: 1fr; }
  .lp-testi-grid { grid-template-columns: 1fr; }
  .lp-testi-card,
  .lp-testi-card:not(:first-child) { padding: 0 0 28px; border-right: none; border-bottom: 1px solid var(--n-200); }
  .lp-testi-card:last-child { border-bottom: none; padding-bottom: 0; }
  .lp-testi-featured { border-right: none; padding-top: 28px; }
  .lp-testi-header { flex-direction: column; align-items: flex-start; margin-bottom: 40px; }
  .lp-testi-rating-block { text-align: left; }
  .lp-how-steps { grid-template-columns: repeat(2,1fr); gap: 24px; }
  .lp-how-steps::before { display: none; }
  .lp-promise-inner { flex-direction: column; gap: 12px; }
  .lp-promise-sep { display: none; }
  .lp-promise-item { padding: 4px 0; }
  .lp-demo-split { grid-template-columns: 1fr; gap: 40px; }
  .lp-demo-left h2 { font-size: 22px; }
}
@media (max-width: 600px) {
  .lp-hero-h1 { font-size: 32px; }
  .lp-section-h2 { font-size: 20px; }
  .lp-customers-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-pain-grid { grid-template-columns: repeat(3, 1fr); }
  .lp-metrics-grid { grid-template-columns: repeat(3, 1fr); }
  .lp-testi-grid { grid-template-columns: repeat(3, 1fr); }
  .lp-metrics-h2 { font-size: 20px; }
  .lp-metric-num { font-size: 32px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PLATFORM — Command-Center Dashboard & Chart Styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Platform card upgrade ────────────────────────────────────────────── */
.card {
  background: var(--n-0); border: 1px solid var(--n-150);
  border-radius: 14px; padding: 22px 24px;
  margin-bottom: 18px; box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: box-shadow .2s cubic-bezier(.4,0,.2,1), border-color .2s;
}
.card:hover { box-shadow: 0 4px 16px rgba(99,102,241,.07); border-color: #d1defe; }

/* ─── Content page wrapper ─────────────────────────────────────────────── */
.page-body { padding: 24px 28px; }
.page-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.page-grid-3 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.page-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
@media (max-width: 1100px) {
  .page-grid-4 { grid-template-columns: repeat(2,1fr); }
  .page-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .page-grid-2, .page-grid-3, .page-grid-4 { grid-template-columns: 1fr; }
  .page-body { padding: 16px; }
}

/* ─── KPI Tile ─────────────────────────────────────────────────────────── */
.kpi-tile {
  background: var(--n-0); border: 1px solid var(--n-150); border-radius: 14px;
  padding: 20px 22px; display: flex; flex-direction: column; gap: 4px;
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.kpi-tile:hover { box-shadow: 0 6px 18px rgba(99,102,241,.09); border-color: var(--brand-muted); transform: translateY(-2px); }
.kpi-tile-eyebrow { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 1px; color: var(--n-400); text-transform: uppercase; }
.kpi-tile-value { font-size: 32px; font-weight: 800; line-height: 1.1; color: var(--n-900); letter-spacing: -.02em; }
.kpi-tile-value.blue  { color: var(--brand); }
.kpi-tile-value.green { color: var(--success); }
.kpi-tile-value.amber { color: var(--warning); }
.kpi-tile-value.red   { color: var(--danger); }
.kpi-tile-sub { font-size: var(--text-xs); color: var(--n-500); margin-top: 2px; }
.kpi-tile-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--text-2xs); font-weight: 600; padding: 2px 7px; border-radius: 20px;
  margin-top: 6px; align-self: flex-start;
}
.kpi-tile-delta.up   { background: var(--success-light); color: var(--success-dark); }
.kpi-tile-delta.down { background: var(--danger-light); color: var(--danger); }
.kpi-tile-delta.flat { background: var(--n-100); color: var(--n-500); }

/* ─── Chart card ───────────────────────────────────────────────────────── */
.chart-card {
  background: var(--n-0); border: 1px solid var(--n-150); border-radius: 14px;
  padding: 20px 24px; box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.chart-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.chart-card-title { font-size: var(--text-base); font-weight: 700; color: var(--n-900); }
.chart-card-sub   { font-size: var(--text-xs); color: var(--n-400); margin-top: 2px; }
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 14px; font-size: var(--text-xs); color: var(--n-500);
}
.chart-legend-item { display: flex; align-items: center; gap: 6px; }
.chart-legend-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }

/* ─── Home dash header ─────────────────────────────────────────────────── */
.home-dash-header {
  background: var(--n-0); border-bottom: 1px solid var(--n-150);
  padding: 20px 28px; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; flex-shrink: 0;
}
.home-dash-title { font-size: 20px; font-weight: 700; color: var(--n-900); }
.home-dash-meta  { font-size: var(--text-sm); color: var(--n-500); margin-top: 3px; }
.home-dash-actions { display: flex; gap: 10px; align-items: center; }

/* ─── Portfolio KPI strip ──────────────────────────────────────────────── */
.portfolio-kpi-strip {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 0; background: var(--n-0); border-bottom: 1px solid var(--n-150);
}
.pf-kpi {
  padding: 18px 22px; border-right: 1px solid var(--n-150);
  display: flex; flex-direction: column; gap: 3px;
}
.pf-kpi:last-child { border-right: none; }
.pf-kpi-val { font-size: 28px; font-weight: 800; color: var(--n-900); letter-spacing: -.03em; line-height: 1; }
.pf-kpi-val.blue  { color: var(--brand); }
.pf-kpi-val.green { color: var(--success); }
.pf-kpi-val.amber { color: var(--warning); }
.pf-kpi-val.red   { color: var(--danger); }
.pf-kpi-lbl { font-size: var(--text-2xs); color: var(--n-400); font-weight: 500; }
@media (max-width: 900px) {
  .portfolio-kpi-strip { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 540px) {
  .portfolio-kpi-strip { grid-template-columns: repeat(2,1fr); }
}

/* ─── Assessment cards v3 ──────────────────────────────────────────────── */
.assess-cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;
}

.ac3 {
  background: var(--n-0);
  border: 1.5px solid var(--n-150);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: box-shadow .18s, border-color .18s, transform .15s;
}
.ac3:hover { box-shadow: 0 8px 28px rgba(79,70,229,.12); border-color: var(--brand-muted); transform: translateY(-2px); }
.ac3--active { border-color: var(--brand); box-shadow: 0 4px 18px rgba(79,70,229,.18); background: linear-gradient(160deg, #f8f7ff 0%, var(--brand-light) 100%); }
.ac3--active .ac3-stats { background: #e8eaf6; border-color: #e8eaf6; }
.ac3--active .ac3-stat  { background: rgba(255,255,255,0.7); }

/* Coloured top accent bar driven by CSS var --ac3-accent */
.ac3-accent-bar {
  height: 4px; width: 100%; flex-shrink: 0;
  background: var(--ac3-accent, var(--brand));
}

.ac3-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }

/* Header */
.ac3-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ac3-head-left { flex: 1; min-width: 0; }
.ac3-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.ac3-title { font-size: var(--text-md); font-weight: 800; color: var(--n-900); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac3-org   { font-size: var(--text-2xs); color: var(--n-400); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ac3-active-pill {
  background: var(--brand-light); color: var(--brand); font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px; letter-spacing: .4px; border: 1px solid var(--brand-muted);
}

/* Chips row */
.ac3-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ac3-chip {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 20px; font-size: 10px; font-weight: 600;
  background: var(--n-100); color: var(--n-500); border: 1px solid var(--n-200);
}
.ac3-chip--warn    { background: var(--amber-light); color: var(--warning); border-color: var(--warning-border); }
.ac3-chip--danger  { background: var(--danger-light); color: var(--danger); border-color: var(--danger-border); }
.ac3-chip--fw      { background: var(--brand-light); color: var(--brand); border-color: var(--brand-muted); }
.ac3-chip--assessor { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac3-chip--tag      { background: var(--purple-light, #f0eaff); color: var(--purple, #7c3aed); border-color: var(--purple-muted, #c4b5fd); cursor: pointer; }
.ac3-chip--tag:hover { opacity: .8; }
.ac3-chip--tag-active { background: var(--purple, #7c3aed); color: #fff; border-color: var(--purple, #7c3aed); }

/* ASMT-05 — Tag filter bar on portfolio home */
.home-tag-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.home-tag-bar-label { font-size: var(--text-xs); font-weight: 600; color: var(--n-400); flex-shrink: 0; }
.home-tag-pill {
  background: var(--n-50);
  border: 1px solid var(--n-200);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--n-500);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.home-tag-pill:hover { background: var(--purple-light, #f0eaff); color: var(--purple, #7c3aed); border-color: var(--purple-muted, #c4b5fd); }
.home-tag-pill--active { background: var(--purple, #7c3aed); color: #fff; border-color: var(--purple, #7c3aed); }

/* ASMT-05 — Tag chip editor in assessment settings modal */
.astag-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; margin-bottom: 8px; }
.astag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--purple-light, #f0eaff);
  border: 1px solid var(--purple-muted, #c4b5fd);
  color: var(--purple, #7c3aed);
  border-radius: 12px;
  padding: 2px 8px 2px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
}
.astag-chip-del {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--purple, #7c3aed);
  padding: 0 1px;
  font-size: 13px;
  line-height: 1;
  opacity: .7;
}
.astag-chip-del:hover { opacity: 1; }
.astag-add-row { display: flex; gap: 6px; align-items: center; }
.astag-input { flex: 1; height: 32px; font-size: var(--text-sm); }

/* Progress bar */
.ac3-prog { display: flex; align-items: center; gap: 10px; }
.ac3-prog-track { flex: 1; height: 7px; background: var(--n-150); border-radius: 4px; overflow: hidden; }
.ac3-prog-fill  { height: 100%; background: var(--ac3-accent, var(--brand)); border-radius: 4px; transition: width .4s cubic-bezier(.4,0,.2,1); }
.ac3-prog-pct   { font-size: var(--text-xs); font-weight: 800; color: var(--ac3-accent, var(--brand)); min-width: 34px; text-align: right; }

/* Mini stat strip */
.ac3-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--n-100);
  border: 1px solid var(--n-100); border-radius: 10px; overflow: hidden;
}
.ac3-stat {
  background: var(--n-0); padding: 8px 4px; text-align: center;
}
.ac3-stat--warn .ac3-stat-num { color: var(--warning); }
.ac3-stat--info .ac3-stat-num { color: var(--brand); }
.ac3-stat-num { font-size: 16px; font-weight: 800; color: var(--n-800); line-height: 1; }
.ac3-stat-den { font-size: var(--text-2xs); font-weight: 500; color: var(--n-400); }
.ac3-stat-lbl { font-size: 10px; color: var(--n-400); text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; font-weight: 600; }

/* Action footer */
.ac3-actions { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--n-100); margin-top: auto; }

/* ── legacy aliases kept so no other code breaks ── */
.ac2-count-warn   { color: var(--warning); font-weight: 600; }
.ac2-count-danger { color: var(--danger); font-weight: 600; }


/* ─── Portfolio 2×2 grid override ──────────────────────────────────────── */
.pf-2x2-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 680px) { .pf-2x2-grid { grid-template-columns: 1fr; } }

/* ─── Portfolio Analytics card (vertical stacked sections) ─────────────── */
.pf-analytics-inner {
  display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr;
  min-height: 160px;
}
.pf-analytics-inner--vertical {
  display: flex; flex-direction: column;
}
.pf-analytics-divider {
  background: var(--n-100); width: 1px; align-self: stretch;
}
.pf-analytics-hdivider {
  height: 1px; background: var(--n-100); margin: 0;
}
.pf-analytics-section {
  display: flex; flex-direction: column; padding: 14px 18px; gap: 10px; flex: 1;
}
.pf-analytics-section-title {
  font-size: var(--text-2xs); font-weight: 700; color: var(--n-400);
  text-transform: uppercase; letter-spacing: .05em;
}
.pf-analytics-section-body {
  display: flex; flex-direction: column; gap: 8px; flex: 1;
}
@media (max-width: 900px) {
  .pf-analytics-inner { grid-template-columns: 1fr; }
  .pf-analytics-divider { width: 100%; height: 1px; }
}

/* ─── Activity feed rows ───────────────────────────────────────────────── */
.pf-feed-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; border-bottom: 1px solid var(--n-50);
}
.pf-feed-row--alt { background: #fafbff; }
.pf-feed-row:last-child { border-bottom: none; }
.pf-feed-icon { font-size: 16px; flex-shrink: 0; width: 24px; text-align: center; }
.pf-feed-content { flex: 1; min-width: 0; }
.pf-feed-main { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.pf-feed-ctrl  { font-size: var(--text-2xs); font-weight: 700; color: var(--brand); font-family: 'SF Mono','Fira Code',monospace; flex-shrink: 0; }
.pf-feed-name  { font-size: var(--text-xs); color: var(--n-800); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-feed-meta  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-feed-field { font-size: var(--text-2xs); color: var(--n-400); text-transform: capitalize; }
.pf-feed-val   { font-size: var(--text-2xs); color: var(--n-600); }
.pf-feed-val strong { color: var(--brand); }
.pf-feed-reason { font-size: var(--text-2xs); color: var(--n-400); font-style: italic; }
.pf-feed-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.pf-feed-who   { font-size: var(--text-2xs); font-weight: 600; color: var(--n-600); }
.pf-feed-when  { font-size: 10px; color: var(--n-400); white-space: nowrap; }

/* ─── Vertical bar chart ───────────────────────────────────────────────── */
.vbar-chart {
  display: flex; align-items: flex-end; gap: 6px; height: 120px;
  padding: 0 4px;
}
.vbar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.vbar-bar { width: 100%; border-radius: 4px 4px 0 0; min-height: 3px; transition: height .4s cubic-bezier(.4,0,.2,1); }
.vbar-lbl { font-size: 10px; color: var(--n-400); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vbar-val { font-size: 10px; font-weight: 700; color: var(--n-600); }

/* ─── Inline SVG line chart ────────────────────────────────────────────── */
.sparkline-wrap { width: 100%; overflow: hidden; }

/* ─── Status ring donut row ────────────────────────────────────────────── */
.donut-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut-legend { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 120px; }
.donut-legend-item { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--n-600); }
.donut-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.donut-legend-val { font-weight: 700; color: var(--n-900); margin-left: auto; }

/* ─── Mini radar card ──────────────────────────────────────────────────── */
.mini-radar-card { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* ─── Active snapshot block (home) — upgrade ───────────────────────────── */
.ws-active-block {
  background: var(--n-0); border: 1.5px solid var(--n-150); border-radius: 14px;
  padding: 22px 24px; margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(99,102,241,.05);
}
.ws-active-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.ws-active-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--brand); text-transform: uppercase; margin-bottom: 4px; }
.ws-active-name { font-size: var(--text-lg); font-weight: 700; color: var(--n-900); }
.ws-active-meta { display: flex; gap: 14px; font-size: var(--text-xs); color: var(--n-400); flex-wrap: wrap; margin-top: 5px; }
.ws-active-rag { font-size: var(--text-xs); font-weight: 700; padding: 5px 12px; border-radius: 20px; white-space: nowrap; }
.ws-progress-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ws-progress-track { flex: 1; height: 8px; background: var(--n-150); border-radius: 4px; overflow: hidden; }
.ws-progress-pct { font-size: var(--text-base); font-weight: 800; min-width: 40px; text-align: right; }
.ws-kpi-strip {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 10px; margin-bottom: 14px;
}
.ws-kpi-tile {
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.05);
}
.ws-kpi-val { font-size: 20px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.ws-kpi-lbl { font-size: var(--text-2xs); font-weight: 600; color: var(--n-600); }
.ws-kpi-sub { font-size: 10px; color: var(--n-400); margin-top: 2px; }
.ws-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-quick-btn { font-size: var(--text-xs); }

/* ─── Attention banner ─────────────────────────────────────────────────── */
.home-attention-card { border-left: 4px solid var(--amber); }
.home-attention-card h3 { display: flex; align-items: center; gap: 8px; }
.attention-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.attention-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; background: var(--amber-light); border: 1px solid var(--warning-border);
  border-radius: 10px; cursor: pointer; transition: background .15s;
}
.attention-item:hover { background: var(--warning-light); }
.attention-title { font-size: var(--text-sm); font-weight: 600; color: var(--warning-dark); flex: 1; }
.attention-reasons { display: flex; gap: 6px; flex-wrap: wrap; }
.attention-tag { font-size: var(--text-2xs); font-weight: 600; background: var(--warning-light); color: #b45309; padding: 2px 8px; border-radius: 20px; }

/* ─── Getting started card ─────────────────────────────────────────────── */
.gs-card {
  background: var(--n-0); border: 1px solid var(--brand-border); border-radius: 14px;
  overflow: hidden; margin-bottom: 18px;
}
.gs-card-header {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08); padding: 14px 20px;
}
.gs-card-title  { font-size: var(--text-sm); font-weight: 800; color: var(--hero-text); letter-spacing: .01em; }
.gs-card-pct    { font-size: var(--text-xs); font-weight: 700; color: var(--brand-400); }
.gs-card-body { padding: 16px 20px 18px; }
.gs-track { height: 6px; background: var(--brand-tint); border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.gs-fill  { height: 100%; background: var(--brand-mid); border-radius: 3px; transition: width .4s; }
.gs-items { display: flex; flex-direction: column; gap: 8px; }
.gs-item  { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); }
.gs-item-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--brand-muted); display: flex; align-items: center; justify-content: center; font-size: var(--text-2xs); font-weight: 700; flex-shrink: 0; }
.gs-item-check.done { background: var(--brand-mid); border-color: var(--brand-mid); color: var(--n-0); }
.gs-item-check.todo { background: var(--n-0); }
.gs-item-text      { flex: 1; color: var(--n-700); }
.gs-item-text.done { color: var(--n-400); text-decoration: line-through; }
.gs-item-action    { font-size: var(--text-xs); font-weight: 600; color: var(--brand); cursor: pointer; white-space: nowrap; }
.gs-item-action:hover { text-decoration: underline; }

/* ─── Home stat strip ──────────────────────────────────────────────────── */
.home-stat-strip {
  display: grid; grid-template-columns: repeat(6,1fr);
  background: var(--n-0); border-bottom: 1px solid var(--n-150);
}
.home-stat {
  padding: 14px 18px; border-right: 1px solid var(--n-150);
  display: flex; flex-direction: column; gap: 2px;
}
.home-stat:last-child { border-right: none; }
.home-stat-val  { font-size: 22px; font-weight: 800; color: var(--n-900); letter-spacing: -.02em; }
.home-stat-lbl  { font-size: var(--text-2xs); color: var(--n-400); font-weight: 500; }
.home-stat-warn { color: var(--warning); }

/* ─── Home section header ──────────────────────────────────────────────── */
.home-section-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--hero-bg);
  border: 1px solid var(--brand-border); border-radius: 10px;
  padding: 12px 18px; margin: 4px 0 12px;
}
.home-section-header h3 { font-size: var(--text-sm); font-weight: 800; color: var(--n-800); letter-spacing: .04em; text-transform: uppercase; }

/* ─── Risk heatmap mini ────────────────────────────────────────────────── */
.risk-heatmap {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 4px;
}
.hm-cell {
  aspect-ratio: 1; border-radius: 5px; display: flex; align-items: center;
  justify-content: center; font-size: var(--text-2xs); font-weight: 700; color: var(--n-0);
  cursor: default; transition: opacity .15s;
}
.hm-cell:hover { opacity: .8; }
.hm-0  { background: var(--n-100); color: var(--n-400); }
.hm-1  { background: var(--success-light); color: var(--success-dark); }
.hm-2  { background: var(--warning-light); color: var(--warning-dark); }
.hm-3  { background: var(--orange-border); color: #9a3412; }
.hm-4  { background: var(--danger-border); color: var(--danger-dark); }
.hm-5  { background: var(--danger); color: var(--n-0); }
.hm-label-row, .hm-label-col {
  font-size: 9px; color: var(--n-400); display: flex; align-items: center; justify-content: center;
}

/* ─── Mobile secondary sidebar (kept for backward compat) ─────────────── */
.mob-sb-bar   { display: none; }
.mob-sb-backdrop { display: none; }

/* ─── Version Drift Report ─────────────────────────────────────────────── */
.drift-report {
  border: 1px solid var(--n-200); border-radius: 8px; overflow: hidden;
  font-size: var(--text-sm); margin-top: 4px;
}
.drift-report-header {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 13px 16px;
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: var(--text-sm); font-weight: 700; color: var(--hero-text);
}
.drift-arrow-sep { color: var(--n-400); font-size: var(--text-base); }
.drift-meta      { color: var(--n-400); font-size: var(--text-xs); margin-left: auto; }

/* Tabs / summary bar */
.drift-tabs {
  display: flex; gap: 2px; flex-wrap: wrap; padding: 10px 12px;
  border-bottom: 1px solid var(--n-200); background: var(--n-0);
}
.drift-tab {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 14px; border-radius: 7px; border: 1px solid transparent;
  cursor: pointer; background: var(--n-50); transition: all .12s; min-width: 64px;
}
.drift-tab:hover     { background: var(--n-100); border-color: var(--n-200); }
.drift-tab-active    { background: color-mix(in srgb, var(--tab-color, var(--brand)) 12%, var(--n-0)); border-color: color-mix(in srgb, var(--tab-color, var(--brand)) 40%, var(--n-0)); }
.drift-tab-count     { font-size: 20px; font-weight: 700; line-height: 1; color: var(--tab-color, var(--brand)); }
.drift-tab-label     { font-size: 10px; color: var(--n-500); text-align: center; margin-top: 2px; white-space: nowrap; }

/* Table wrapper */
.drift-table-wrap    { padding: 12px 16px; background: var(--n-0); }
.drift-table-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.drift-main-table    { width: 100%; }
.drift-main-row      { transition: background .1s; }
.drift-row-expandable { cursor: pointer; }
.drift-row-expandable:hover { background: var(--n-50); }
.drift-row-open      { background: color-mix(in srgb, var(--brand) 5%, var(--n-0)); }
.drift-ctrl-name     { max-width: 260px; }

.drift-type-badge {
  display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: var(--text-2xs); font-weight: 700;
  background: color-mix(in srgb, var(--badge-color) 14%, var(--n-0));
  color: var(--badge-color); border: 1px solid color-mix(in srgb, var(--badge-color) 30%, var(--n-0));
  white-space: nowrap;
}

.drift-fc-summary    { font-size: var(--text-xs); }
.drift-fc-pill       { display: inline-block; background: var(--n-100); color: var(--n-700); border-radius: 4px; padding: 1px 6px; font-size: var(--text-2xs); font-weight: 600; margin-right: 3px; white-space: nowrap; }
.drift-fc-more       { font-size: var(--text-2xs); color: var(--n-400); }

.drift-expand-cell   { width: 28px; text-align: center; }
.drift-expand-icon   { font-size: var(--text-base); color: var(--n-400); display: inline-block; transition: transform .15s, color .1s; line-height: 1; }
.drift-row-open .drift-expand-icon { transform: rotate(90deg); color: var(--brand); }

/* Expanded detail row */
.drift-detail-row    { background: var(--n-50); }
.drift-detail-wrap   { padding: 10px 16px 14px !important; border-top: 1px dashed var(--n-200); }
.drift-detail-header { font-size: var(--text-xs); color: var(--n-600); margin-bottom: 8px; }
.drift-detail-table  { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.drift-detail-table th { padding: 5px 8px; background: var(--n-100); font-size: var(--text-2xs); color: var(--n-500); font-weight: 700; text-align: left; border-bottom: 1px solid var(--n-200); }
.drift-detail-field  { font-weight: 600; color: var(--n-700); white-space: nowrap; padding: 5px 8px; width: 160px; border-bottom: 1px solid var(--n-100); }
.drift-detail-from   { color: var(--n-500); padding: 5px 8px; white-space: pre-wrap; word-break: break-word; border-bottom: 1px solid var(--n-100); }
.drift-detail-to     { color: var(--n-900); padding: 5px 8px; white-space: pre-wrap; word-break: break-word; border-bottom: 1px solid var(--n-100); }
.drift-detail-arrow  { padding: 5px 6px; text-align: center; border-bottom: 1px solid var(--n-100); }

/* Remediation */
.drift-remediation   { padding: 14px 16px; border-top: 1px solid var(--n-200); background: var(--n-50); }
.drift-remediation h4 { margin: 0 0 10px; font-size: var(--text-sm); color: var(--n-700); }
.drift-remediation-option {
  padding: 10px 14px; border: 1px solid var(--n-200); border-radius: 7px;
  background: var(--n-0); margin-bottom: 8px;
}
.drift-rem-desc      { margin: 4px 0 0; color: var(--n-500); font-size: var(--text-xs); }

.drift-none {
  text-align: center; padding: 24px; color: var(--brand);
  background: var(--brand-light); border-radius: 8px; border: 1px solid var(--brand-muted);
}

/* ─── Document Template Library ──────────────────────────────────── */
.doc-tpl-layout { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:0 0 40px; }
@media (max-width:900px) { .doc-tpl-layout { grid-template-columns:1fr; } }

.doc-tpl-library, .doc-tpl-asm-panel {
  background:var(--n-0); border:1px solid var(--n-100); border-radius:12px; overflow:hidden;
}
.doc-tpl-lib-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.08);
  background: var(--hero-bg);
}
.doc-tpl-lib-tabs { display:flex; gap:2px; background:var(--n-100); border-radius:var(--r-md); padding:3px; }
.doc-tpl-lib-tab { font-size:12px; padding:4px 12px; border-radius:var(--r-sm); border:none; background:transparent; cursor:pointer; color:var(--n-500); font-weight:500; transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast); }
.doc-tpl-lib-tab:hover { color:var(--n-700); background:rgba(255,255,255,.5); }
.doc-tpl-lib-tab.active { background:var(--n-0); color:var(--brand); font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.10); }

.doc-tpl-grid { padding:12px; display:flex; flex-direction:column; gap:10px; }
.doc-tpl-card {
  border:1px solid var(--n-100); border-radius:8px; padding:12px;
  transition:box-shadow .15s;
}
.doc-tpl-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.08); }
.doc-tpl-card-header {
  display:flex; align-items:center; gap:6px;
  padding: 10px 14px; margin: -12px -12px 10px;
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: 7px 7px 0 0;
}
.doc-tpl-type-badge { font-size:10px; font-weight:700; padding:1px 7px; border-radius:10px; }
.doc-tpl-builtin-badge { font-size:10px; padding:1px 6px; border-radius:10px; background:var(--n-100); color:var(--n-500); }
.doc-tpl-file-badge { font-size:10px; padding:1px 6px; border-radius:10px; background:var(--success-light); color:#065f46; font-weight:600; }
.doc-tpl-file-chip { font-size:11px; color:var(--n-500); font-style:italic; }
.doc-tpl-card-name { font-size:13px; font-weight:700; color:var(--hero-text); margin-bottom:3px; }
.doc-tpl-card-desc { font-size:12px; color:var(--n-500); margin-bottom:6px; line-height:1.4; }
.doc-tpl-card-meta { font-size:11px; color:var(--n-400); margin-bottom:8px; }
.doc-tpl-card-actions { display:flex; gap:6px; flex-wrap:wrap; }
.doc-tpl-empty { color:var(--n-400); font-size:13px; padding:20px; text-align:center; }

.doc-tpl-asm-tabs { display:flex; gap:2px; padding:10px 12px; border-bottom:1px solid var(--n-100); flex-wrap:wrap; background:var(--n-50); }
.doc-tpl-asm-tab { font-size:12px; padding:4px 12px; border-radius:var(--r-sm); border:none; background:transparent; cursor:pointer; color:var(--n-500); display:flex; align-items:center; gap:4px; font-weight:500; transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast); }
.doc-tpl-asm-tab:hover { color:var(--n-700); background:rgba(255,255,255,.7); }
.doc-tpl-asm-tab.active { background:var(--n-0); color:var(--brand); font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.10); border-radius:var(--r-sm); }
.doc-tpl-ver-badge { font-size:10px; opacity:.75; }

.doc-tpl-org-editor-panel {
  margin-top: 20px; border: 2px solid var(--brand-muted); border-radius: var(--r-lg);
  background: var(--n-0); box-shadow: var(--shadow-sm);
}
.doc-tpl-org-editor-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--n-100);
  background: var(--hero-bg);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
#doc-tpl-org-editor-body { padding: 16px 18px; }

.doc-tpl-asm-editor-inner { padding:16px; }
.doc-tpl-asm-meta-bar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--n-100);
}
.doc-tpl-section-block {
  border:1px solid var(--n-100); border-radius:8px; padding:12px; margin-bottom:10px;
  background:var(--n-50);
}
.doc-tpl-section-label { font-size:11px; font-weight:700; color:var(--n-500); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; display:block; }
.doc-tpl-subsec-block {
  border:1px dashed var(--n-200); border-radius:6px; padding:8px; margin:6px 0; background:var(--n-0);
}

/* ─── References tab (dependency sources) ─────────────────────────────────── */
.il-ref-help { font-size:12px; color:var(--n-500); background:var(--n-50); border-radius:6px; padding:8px 10px; margin-bottom:10px; line-height:1.5; }
.il-ref-list { display:flex; flex-direction:column; gap:10px; }
.il-ref-card { border:1px solid var(--n-100); border-radius:8px; padding:12px 14px; background:var(--n-0); }
.il-ref-card-header { display:flex; align-items:center; gap:8px; margin: -12px -14px 10px; padding: 10px 14px; background: var(--hero-bg); border-bottom: 1px solid rgba(255,255,255,.08); }
.il-ref-source-name { font-size:13px; font-weight:700; color:var(--hero-text); flex:1; }
.il-ref-updated { font-size:11px; color:var(--n-400); }
.il-ref-status-chip { font-size:11px; font-weight:600; padding:2px 8px; border-radius:8px; white-space:nowrap; }
.il-ref-status-none { background:var(--n-100); color:var(--n-400); }
.il-ref-status-implemented,.il-ref-status-compliant { background:var(--success-light); color:var(--success-dark); }
.il-ref-status-not_implemented,.il-ref-status-non_compliant { background:var(--danger-light); color:var(--danger); }
.il-ref-status-partial,.il-ref-status-in_progress { background:var(--warning-light); color:#a16207; }
.il-ref-comment { font-size:12px; color:var(--n-700); line-height:1.5; margin-bottom:6px; white-space:pre-wrap; }
.il-ref-comment--empty { color:var(--n-400); font-style:italic; }
.il-ref-meta { display:flex; flex-direction:column; gap:2px; margin-bottom:6px; }
.il-ref-meta-row { display:flex; gap:8px; font-size:11.5px; color:var(--n-500); }
.il-ref-meta-row span:first-child { min-width:120px; font-weight:600; }
.il-ref-card-actions { display:flex; gap:6px; margin-top:8px; }
.il-ref-inherit-btn { border-color:var(--brand); color:var(--brand); }
.il-ref-fill-btn { background:var(--brand); color:var(--n-0); border-color:var(--brand); }
.il-ref-inherited-badge { font-size:12px; background:var(--brand-light); color:var(--brand-hover); border:1px solid var(--brand-muted); border-radius:6px; padding:6px 10px; margin-bottom:10px; display:flex; align-items:center; gap:6px; }

/* ─── Dependency sources modal ────────────────────────────────────────────── */
.dep-src-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--n-100); }
.dep-src-row:last-child { border-bottom:none; }
.dep-src-icon { font-size:18px; flex-shrink:0; }
.dep-src-body { flex:1; min-width:0; }
.dep-src-name { font-size:13px; font-weight:700; color:var(--n-800); }
.dep-src-meta { font-size:11px; color:var(--n-400); margin-top:1px; }

/* ─── Assessment chip (sidebar) ───────────────────────────────────────────── */
.sb-assess-chip {
  margin: 8px 8px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.sb-assess-chip:hover { background: rgba(255,255,255,.06); }
.sb-assess-chip--active { border-color: rgba(255,255,255,.1); background: rgba(99,102,241,.18); }
.sb-assess-chip--warn   { border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.1); }
.sb-assess-chip-inner {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
}
.sb-assess-chip-icon { font-size: var(--text-md); flex-shrink: 0; }
.sb-assess-chip-text { flex: 1; min-width: 0; }
.sb-assess-chip-name {
  display: block; font-size: var(--text-xs); font-weight: 700;
  color: var(--n-200); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-assess-chip--warn .sb-assess-chip-name { color: var(--amber-border); }
.sb-assess-chip-meta {
  display: block; font-size: 10px; color: var(--n-400);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
.sb-assess-chip-swap { font-size: var(--text-sm); color: var(--n-500); flex-shrink: 0; }
.sb-assess-chip:hover .sb-assess-chip-swap { color: var(--n-400); }

/* ─── Sidebar zone labels & divider ──────────────────────────────────────── */
.sidebar-zone-label {
  display: block;
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #3d4f5c;
  padding: 10px 10px 3px;
  pointer-events: none;
}
.sidebar-zone-label--admin { color: var(--n-600); }
.sidebar-zone-divider {
  height: 1px; background: rgba(255,255,255,.06);
  margin: 6px 8px;
}

/* ── Collapsible sidebar groups ─────────────────────────────────────────── */
.sidebar-group { display: flex; flex-direction: column; }
.sidebar-group-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px 3px;
  background: none; border: none; cursor: pointer; width: 100%;
  font-family: inherit;
}
.sidebar-group-toggle-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #3d4f5c;
}
.sidebar-group-toggle:hover .sidebar-group-toggle-label { color: var(--hero-muted); }
.sidebar-group-chevron {
  color: #3d4f5c; flex-shrink: 0;
  transition: transform .18s ease;
}
.sidebar-group-toggle:hover .sidebar-group-chevron { color: var(--hero-muted); }
.sidebar-group-links {
  display: flex; flex-direction: column; gap: 1px;
  overflow: hidden;
}

/* Administration zone links */
.sidebar-link--admin { opacity: .85; }
.sidebar-link--admin.active,
.sidebar-link--admin:hover { opacity: 1; }

/* ─── Scope bar (top of right panel) ─────────────────────────────────────── */
.scope-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 0 20px; height: 34px; flex-shrink: 0;
  font-size: var(--text-xs); border-bottom: 1px solid var(--n-100);
  background: var(--n-0);
  transition: background .2s, border-color .2s;
}
.scope-bar--assessment {
  background: var(--brand-light); border-bottom-color: var(--brand-muted);
}
.scope-bar--admin {
  background: var(--n-50); border-bottom-color: var(--n-200);
}
.scope-bar--workspace {
  background: var(--n-0); border-bottom-color: var(--n-100);
}
.scope-bar-context {
  font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--n-500);
}
.scope-bar--assessment .scope-bar-context { color: var(--brand); }
.scope-bar--admin .scope-bar-context { color: var(--n-600); }
.scope-bar-name {
  font-size: var(--text-xs); color: var(--n-800); font-weight: 600;
}
.scope-bar-name:not(:empty)::before {
  content: '›'; margin-right: 6px; color: var(--n-400); font-weight: 400;
}

/* ─── Administration sub-nav bar ──────────────────────────────────────── */
.adm-subnav {
  display: flex; align-items: center; gap: 2px;
  padding: 0 20px; height: 46px; flex-shrink: 0;
  background: var(--n-800);
  overflow-x: auto; scrollbar-width: none;
}
.adm-subnav::-webkit-scrollbar { display: none; }
.adm-subnav-tab {
  display: inline-flex; align-items: center;
  padding: 0 14px; height: 30px;
  font-size: var(--text-sm); font-weight: 500; color: rgba(255,255,255,.65);
  background: none;
  border: 1px solid transparent; border-radius: var(--r-base);
  cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.adm-subnav-tab:hover {
  color: var(--n-0);
  background: rgba(255,255,255,.1);
}
.adm-subnav-tab--active {
  color: var(--n-0); font-weight: 600;
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.25);
}
.adm-subnav-label {
  display: inline-flex; align-items: center;
  padding-right: 16px; margin-right: 8px;
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: rgba(255,255,255,.4);
  border-right: 1px solid rgba(255,255,255,.15);
  white-space: nowrap; flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   CS Design System — shared card, chart & page-hero components
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Page hero (dark header band) ────────────────────────────────────── */
.home-hero {
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 24px 28px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-shrink: 0;
}
.home-hero-inner { min-width: 0; }
.home-hero-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--brand-400); margin-bottom: 6px;
}
.home-hero-title {
  font-size: 26px; font-weight: 800; color: var(--hero-text); letter-spacing: -.02em; line-height: 1.15;
}
.home-hero-meta { font-size: var(--text-sm); color: var(--hero-muted); margin-top: 5px; }
.home-hero-overdue { color: var(--danger); font-weight: 700; }
.home-hero .home-dash-actions { flex-shrink: 0; }

/* ─── Shared cs-card-header (kept for backward compat, mirrors clo-card-header) ─ */
.cs-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.08); gap: 12px;
  background: var(--hero-bg);
}
.cs-card-title { font-size: var(--text-md); font-weight: 800; color: var(--hero-text); }
.cs-card-sub   { font-size: var(--text-2xs); color: var(--brand-400); margin-top: 2px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* ─── Chart cards (replaces fragmented .chart-card) ───────────────────── */
.cs-chart-card {
  background: var(--n-0); border: 1px solid var(--n-150); border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05); overflow: hidden;
  display: flex; flex-direction: column;
}
.cs-chart-header {
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08); padding: 14px 20px;
}
.cs-chart-title { font-size: var(--text-base); font-weight: 800; color: var(--hero-text); }
.cs-chart-sub   { font-size: var(--text-2xs); color: var(--brand-400); margin-top: 2px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cs-chart-body  { padding: 16px 20px; flex: 1; }
.cs-chart-footer {
  padding: 10px 20px 14px; border-top: 1px solid var(--n-50);
}
.home-charts-row { margin-bottom: 20px; }

/* Donut + legend side by side */
.cs-donut-layout { display: flex; align-items: center; gap: 20px; }
.cs-donut-layout > svg { flex-shrink: 0; }

/* ─── Metrics card tiles ───────────────────────────────────────────────── */
.cs-metrics-card .cs-card-header { align-items: flex-start; }
.cs-metric-tile {
  background: var(--tile-bg, var(--n-50)); border-radius: 10px;
  padding: 14px 16px;
}
.cs-metric-val {
  font-size: 30px; font-weight: 800; color: var(--tile-color, var(--n-800));
  line-height: 1; margin-bottom: 5px;
}
.cs-metric-lbl { font-size: var(--text-2xs); font-weight: 600; color: var(--n-500); }

/* ─── Analysis card ────────────────────────────────────────────────────── */
.cs-analysis-card .cs-card-header { align-items: flex-start; }

/* ─── Leadership Dashboard dark hero ──────────────────────────────────── */
.ld-hero {
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 24px 28px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.ld-hero-inner { min-width: 0; }
.ld-hero-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--brand-mid); margin-bottom: 6px;
}
.ld-hero-title {
  font-size: 22px; font-weight: 800; color: var(--n-800);
  letter-spacing: -.02em; line-height: 1.2; margin: 0 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ld-hero-sub { font-size: var(--text-sm); color: var(--n-500); margin: 0; }
.ld-hero-rag {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
  background: var(--n-0); border: 1px solid var(--n-200);
  border-radius: 14px; padding: 14px 22px; text-align: center;
  border-top: 3px solid var(--rag, var(--brand));
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.ld-hero-rag-pct {
  font-size: 32px; font-weight: 800; color: var(--rag, var(--brand)); line-height: 1;
}
.ld-hero-rag-lbl { font-size: var(--text-2xs); color: var(--n-500); margin-top: 4px; font-weight: 600; }

@media (max-width: 900px) {
  .home-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ld-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ld-hero-title { white-space: normal; }
  .ld-hero-rag { align-self: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMINISTRATION AREA — shared design system
   Applies to: Users, Security Log, Identity & SSO, Email & Notifications,
               Org Settings, Framework Settings, Vendor Admin
   Prefix: .adm-*
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section layout ────────────────────────────────────────────────────── */
.adm-section { display: flex; flex-direction: column; gap: 16px; }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.adm-card {
  background: var(--n-0); border: 1px solid var(--n-200);
  border-radius: var(--r-xl); box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.adm-card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 20px;
  border-bottom: 1px solid var(--hero-border);
  background: var(--hero-bg);
  position: relative; overflow: hidden;
}
.adm-card-header::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-mid, var(--brand-mid)));
}
.adm-card-header--flush { padding: 12px 20px 0; border-bottom: none; background: none; }
.adm-card-header--flush::before { display: none; }
.adm-card-title {
  font-size: var(--text-base); font-weight: 700; color: var(--hero-text); line-height: 1.3;
}
.adm-card-sub {
  font-size: var(--text-xs); color: var(--hero-muted); margin-top: 2px; font-weight: 400;
}
.adm-card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.adm-card-body { padding: 18px 20px; }
.adm-card-body--compact { padding: 12px 16px; }
.adm-card-body--bare { padding: 0; }
.adm-card-footer {
  padding: 10px 20px; border-top: 1px solid var(--n-100);
  background: var(--n-50); border-radius: 0 0 var(--r-xl) var(--r-xl);
  font-size: var(--text-xs); color: var(--n-400); display: flex; align-items: center; gap: 12px;
}

/* ── Stat bar ──────────────────────────────────────────────────────────── */
.adm-stat-bar {
  display: flex; gap: 0; flex-wrap: wrap;
  border-top: 1px solid var(--n-100);
}
.adm-stat-item {
  flex: 1 1 80px; min-width: 72px;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 12px 16px;
  border-right: 1px solid var(--n-100);
  gap: 2px;
}
.adm-stat-item:last-child { border-right: none; }
.adm-stat-num {
  font-size: 22px; font-weight: 800; line-height: 1.15;
  color: var(--n-900);
}
.adm-stat-num--brand  { color: var(--brand); }
.adm-stat-num--green  { color: var(--success); }
.adm-stat-num--amber  { color: var(--warning); }
.adm-stat-num--red    { color: var(--danger); }
.adm-stat-num--purple { color: var(--purple); }
.adm-stat-lbl {
  font-size: var(--text-2xs); font-weight: 600; color: var(--n-400);
  text-transform: uppercase; letter-spacing: .05em;
}
.adm-stat-accent {
  width: 3px; height: 100%; border-radius: 2px;
  position: absolute; left: 0; top: 0;
}

/* ── Filter / toolbar bar ──────────────────────────────────────────────── */
.adm-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--n-100);
  background: var(--n-50);
}
.adm-toolbar-spacer { flex: 1; }
.adm-toolbar-count {
  font-size: var(--text-xs); color: var(--n-400); white-space: nowrap; font-weight: 500;
}

/* ── Section divider inside a card body ───────────────────────────────── */
.adm-section-divider {
  font-size: var(--text-2xs); font-weight: 700; color: var(--n-400);
  text-transform: uppercase; letter-spacing: .07em;
  padding: 10px 0 6px;
  border-top: 1px solid var(--n-100); margin-top: 14px;
}
.adm-section-divider:first-child { border-top: none; margin-top: 0; padding-top: 0; }

/* ── Notice / info strip ───────────────────────────────────────────────── */
.adm-info-strip {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--brand-light); border: 1px solid var(--brand-muted);
  border-radius: var(--r-lg); padding: 11px 14px;
  font-size: var(--text-sm); color: var(--brand-active); line-height: 1.5;
}
.adm-info-strip--warn {
  background: var(--warning-light); border-color: var(--warning-border); color: var(--warning-dark);
}
.adm-info-strip--danger {
  background: var(--danger-light); border-color: var(--danger-border); color: var(--danger-dark);
}
.adm-info-strip--success {
  background: var(--success-light); border-color: var(--success-border); color: var(--success);
}
/* Option tag for already-mapped controls in select dropdowns */
.opt-mapped { color: var(--warning); }

/* ── Row list (for provider lists, queue items, etc.) ─────────────────── */
.adm-row-list { display: flex; flex-direction: column; }
.adm-row-item {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 20px; border-bottom: 1px solid var(--n-100);
  transition: background var(--t-fast);
}
.adm-row-item:last-child { border-bottom: none; }
.adm-row-item:hover { background: var(--n-50); }
.adm-row-icon {
  font-size: 20px; flex-shrink: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); border-radius: var(--r-md);
}
.adm-row-body { flex: 1; min-width: 0; }
.adm-row-title {
  font-size: var(--text-sm); font-weight: 700; color: var(--n-900);
  display: flex; align-items: center; gap: 7px;
}
.adm-row-sub { font-size: var(--text-xs); color: var(--n-400); margin-top: 2px; }
.adm-row-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* ── Status badges used across admin ──────────────────────────────────── */
.adm-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--r-pill);
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;
}
.adm-badge--green  { background: var(--success-light); color: var(--success-dark); }
.adm-badge--amber  { background: var(--warning-light); color: var(--warning-dark); }
.adm-badge--red    { background: var(--danger-light); color: var(--danger-dark); }
.adm-badge--blue   { background: #dbeafe; color: #1e40af; }
.adm-badge--purple { background: #f3e8ff; color: #6b21a8; }
.adm-badge--neutral { background: var(--n-100); color: var(--n-600); }
.adm-badge--brand  { background: var(--brand-soft); color: var(--brand-active); }

/* ── Admin form grid ───────────────────────────────────────────────────── */
.adm-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.adm-form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.adm-form-full { grid-column: 1 / -1; }
.adm-form-label {
  font-size: var(--text-xs); font-weight: 600; color: var(--n-600); margin-bottom: 4px; display: block;
}
.adm-form-hint {
  font-size: var(--text-2xs); color: var(--n-400); margin-top: 3px; line-height: 1.4;
}

/* ── Empty / zero-state ────────────────────────────────────────────────── */
.adm-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 24px; text-align: center; gap: 10px;
  font-size: var(--text-sm); color: var(--n-400); line-height: 1.6;
}
.adm-empty-icon { font-size: 32px; opacity: .45; line-height: 1; }
.adm-empty-title { font-size: var(--text-sm); font-weight: 700; color: var(--n-600); }
.adm-empty-sub { font-size: var(--text-sm); color: var(--n-400); max-width: 360px; line-height: 1.55; }

/* ── Responsive: collapse 2-col grids on small screens ────────────────── */
@media (max-width: 640px) {
  .adm-form-grid,
  .adm-form-grid--3 { grid-template-columns: 1fr; }
  .adm-stat-bar { flex-direction: column; }
  .adm-stat-item { border-right: none; border-bottom: 1px solid var(--n-100); }
  .adm-stat-item:last-child { border-bottom: none; }
}

/* ─── Admin gear button — consistent settings icon for admin headers ──── */
.adm-gear-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px; border: none; cursor: pointer;
  font-size: var(--text-md); line-height: 1; flex-shrink: 0;
  background: rgba(255,255,255,.15); color: rgba(255,255,255,.8);
  transition: background .15s, color .15s, transform .2s;
}
.adm-gear-btn:hover { background: rgba(255,255,255,.3); color: var(--n-0); transform: rotate(30deg); }
/* Neutral variant — for card headers that are not dark/brand-coloured */
.adm-gear-btn--neutral {
  background: var(--n-100); color: var(--n-500);
}
.adm-gear-btn--neutral:hover { background: var(--brand-soft); color: var(--brand); transform: rotate(30deg); }
/* Match toolbar button height when gear sits inside a toolbar row */
.fw-toolbar-right .adm-gear-btn { height: 32px; width: 32px; }

/* ─── Admin section tabs (adm-tab) ────────────────────────────────────── */
.adm-tab-bar {
  display: flex; gap: 2px;
  background: rgba(255,255,255,.12); border-radius: var(--r-md); padding: 3px;
}
.adm-tab {
  padding: 4px 13px; font-size: var(--text-xs); font-weight: 600;
  border: none; border-radius: var(--r-sm); cursor: pointer;
  color: rgba(255,255,255,.65); background: transparent;
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.adm-tab:hover { color: var(--n-0); background: rgba(255,255,255,.18); }
.adm-tab.adm-tab--active { background: rgba(255,255,255,.22); color: var(--n-0); }

/* Neutral variant — for card headers (not dark background) */
.adm-tab-bar--neutral {
  background: var(--n-100); border-radius: var(--r-md); padding: 3px;
}
.adm-tab-bar--neutral .adm-tab {
  color: var(--n-500);
}
.adm-tab-bar--neutral .adm-tab:hover { color: var(--n-800); background: var(--n-200); }
.adm-tab-bar--neutral .adm-tab.adm-tab--active {
  background: var(--n-0); color: var(--n-900);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ─── Admin page: identity providers list ─────────────────────────────── */
.ap-list { display: flex; flex-direction: column; gap: 0; }
.ap-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 20px; border-bottom: 1px solid var(--n-100);
  transition: background var(--t-fast);
}
.ap-row:last-child { border-bottom: none; }
.ap-row:hover { background: var(--n-50); }
.ap-row-icon {
  font-size: 20px; flex-shrink: 0; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); border-radius: var(--r-md);
}
.ap-row-body { flex: 1; min-width: 0; }
.ap-row-name {
  font-size: var(--text-sm); font-weight: 700; color: var(--n-900);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ap-row-type { font-size: var(--text-xs); color: var(--n-400); margin-top: 2px; }
.ap-row-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.ap-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill);
  letter-spacing: .04em; text-transform: uppercase;
}
.ap-badge-default { background: var(--brand-soft); color: var(--brand-active); }
.ap-badge-disabled { background: var(--danger-light); color: var(--danger-dark); }
.ap-icon--local { background: var(--n-100); }
.ap-icon--ldap  { background: #dbeafe; }
.ap-icon--oidc  { background: var(--brand-soft); }
.ap-icon--saml  { background: #f3e8ff; }

/* ─── Admin notice ────────────────────────────────────────────────────── */
.adm-notice {
  background: var(--brand-light); border: 1px solid var(--brand-muted);
  border-radius: var(--r-lg); padding: 12px 16px;
  font-size: var(--text-sm); color: var(--brand-active);
  display: flex; align-items: center; gap: 8px;
}
.adm-notice-link {
  color: var(--brand); font-weight: 700; text-decoration: underline; cursor: pointer;
}
.adm-notice-link:hover { text-decoration: none; }

@media (max-width: 600px) {
  .ap-row { flex-wrap: wrap; }
  .ap-row-actions { flex-wrap: wrap; }
  .adm-tab-bar { flex-wrap: wrap; }
}

/* ─── Non-alarming empty / access states ──────────────────────────────── */
.adm-access-denied {
  display: flex; flex-direction: column; align-items: center;
  padding: 56px 24px; text-align: center; gap: 12px;
}
.adm-access-denied-icon {
  width: 56px; height: 56px; border-radius: var(--r-xl);
  background: var(--n-100); display: flex; align-items: center; justify-content: center;
  font-size: 26px; opacity: .7;
}
.adm-access-denied-title {
  font-size: var(--text-md); font-weight: 700; color: var(--n-600);
}
.adm-access-denied-sub {
  font-size: var(--text-sm); color: var(--n-400); max-width: 360px; line-height: 1.55;
}

.empty-state-inline {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; border-radius: 8px;
  background: var(--n-50); border: 1px solid var(--n-200);
  font-size: var(--text-sm); color: var(--n-500);
}

/* ── Framework Settings admin table ───────────────────────────────── */
.adm-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.adm-table thead tr { border-bottom: 2px solid var(--n-200); }
.adm-table th {
  padding: 9px 14px; text-align: left;
  font-size: var(--text-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--n-500);
  background: linear-gradient(to bottom, var(--n-50), var(--n-100));
}
.adm-table th:first-child { border-radius: var(--r-sm) 0 0 0; }
.adm-table th:last-child  { border-radius: 0 var(--r-sm) 0 0; }
.adm-table td { padding: 10px 14px; border-bottom: 1px solid var(--n-100); vertical-align: middle; color: var(--n-800); }
.adm-table tbody tr:last-child td { border-bottom: none; }
.adm-table tbody tr:hover td { background: var(--brand-soft); }
.adm-table-footer {
  padding: 10px 16px; font-size: var(--text-xs); color: var(--n-400);
  border-top: 1px solid var(--n-100); background: var(--n-50);
}
.empty-state-icon { font-size: 16px; flex-shrink: 0; line-height: 1.4; }
.empty-state-msg { line-height: 1.5; }

/* ── Control Mapping admin ────────────────────────────────────────── */
.cmap-badge {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: var(--text-2xs); font-weight: 600;
}
.cmap-badge--confirmed { background: var(--success-light); color: var(--success-dark); }
.cmap-badge--draft     { background: var(--warning-light); color: var(--warning-dark); }
.cmap-badge--community { background: var(--brand-soft); color: var(--brand-active); }
.cmap-badge--vendor    { background: var(--n-100); color: var(--n-600); }

.cmap-form-row { display: flex; gap: 12px; }
.cmap-form-half { flex: 1; display: flex; flex-direction: column; gap: 4px; }

/* Third-party (community based) import notice */
.cmap-community-notice {
  background: var(--brand-light); border: 1px solid var(--brand-muted);
  border-radius: 8px; padding: 12px 16px; font-size: var(--text-sm);
  color: var(--n-800); line-height: 1.6; margin-bottom: 14px;
}
.cmap-community-notice strong { color: var(--brand-active); }

/* ── Cross-framework coverage card ────────────────────────────────── */
.cov-fw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.cov-fw-card {
  background: var(--n-0); border: 1px solid var(--n-200);
  border-radius: var(--r-lg); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-xs);
}
.cov-fw-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cov-fw-name { font-size: var(--text-sm); font-weight: 700; color: var(--n-800); }
.cov-fw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cov-stat { text-align: center; }
.cov-stat-num { font-size: 18px; font-weight: 700; color: var(--n-800); line-height: 1.2; }
.cov-stat-lbl { font-size: 10px; color: var(--n-400); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.cov-fw-bar-wrap { height: 5px; background: var(--n-100); border-radius: 3px; overflow: hidden; }
.cov-fw-bar { height: 100%; border-radius: 3px; transition: width .4s ease; }
.cov-fw-footer { font-size: var(--text-2xs); color: var(--n-400); }
.cov-fw-disclaimer {
  font-size: var(--text-2xs); color: #78716c; background: var(--amber-light);
  border-radius: 5px; padding: 5px 8px; border-left: 2px solid var(--amber);
}
.cov-community-hint {
  font-size: var(--text-2xs); color: var(--brand-active); background: var(--brand-light);
  border-radius: 5px; padding: 5px 8px; border-left: 2px solid var(--brand-muted);
}

/* ── org-* — Organisation Settings ──────────────────────────────────── */
.org-class-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 48px 24px; text-align: center;
}
.org-class-empty-icon { font-size: 36px; line-height: 1; }
.org-class-empty-title { font-size: var(--text-lg); font-weight: 700; color: var(--n-900); }
.org-class-empty-sub { font-size: var(--text-md); color: var(--n-400); max-width: 380px; }
.org-class-field-hint { font-size: var(--text-xs); color: var(--n-400); margin-top: 4px; }
.org-class-footer {
  padding: 10px 14px; border-top: 1px solid var(--n-100);
  background: var(--n-50); border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.org-class-footer-note { font-size: var(--text-xs); color: var(--n-400); }

/* ── rp-* — Role Permissions Matrix ─────────────────────────────────────── */
.rp-table {
  width: 100%; border-collapse: collapse; font-size: var(--text-sm);
  table-layout: fixed;
}
.rp-table thead th {
  padding: 10px 10px; font-size: var(--text-2xs); font-weight: 700;
  color: var(--n-500); text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 2px solid var(--n-200);
  background: linear-gradient(to bottom, var(--n-50), var(--n-100));
  text-align: center; vertical-align: bottom;
}
.rp-perm-label-header { text-align: left !important; width: 240px; }
.rp-table thead th:first-child { border-radius: var(--r-sm) 0 0 0; }
.rp-table thead th:last-child  { border-radius: 0 var(--r-sm) 0 0; }
.rp-table tbody tr { border-bottom: 1px solid var(--n-100); transition: background var(--t-fast); }
.rp-table tbody tr:hover { background: var(--brand-soft); }
.rp-table tbody tr:last-child { border-bottom: none; }
.rp-perm-label {
  padding: 10px 14px; font-size: var(--text-sm); font-weight: 600; color: var(--n-800);
  vertical-align: middle; text-align: left;
}
.rp-perm-label small {
  display: block; font-size: var(--text-2xs); font-weight: 400; color: var(--n-400); margin-top: 2px;
}
.rp-cell { padding: 8px 10px; text-align: center; vertical-align: middle; }
.rp-cell--locked { opacity: .45; cursor: not-allowed; background: var(--n-50); }
.rp-col-header--locked { color: var(--n-400) !important; background: var(--n-50) !important; border-left: 2px solid var(--n-200); }
.rp-check { width: 15px; height: 15px; cursor: pointer; accent-color: var(--brand-active); }
.rp-role-badge {
  display: inline-block; font-size: var(--text-xs); font-weight: 700; padding: 3px 9px;
  border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-active);
  margin-bottom: 3px;
}
.rp-role-badge--locked { background: var(--n-100); color: var(--n-500); }
.rp-footer {
  padding: 10px 16px; border-top: 1px solid var(--n-100);
  background: var(--n-50); border-radius: 0 0 var(--r-lg) var(--r-lg);
  font-size: var(--text-xs); color: var(--n-400); display: flex; gap: 16px; align-items: center;
}

/* ── as-* — Assessment Settings Modal ───────────────────────────────────── */
.as-modal {
  background: var(--n-0); border-radius: var(--r-xl); width: 700px; max-width: 95vw;
  max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.22);
  display: flex; flex-direction: column;
}
.as-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 0; position: sticky; top: 0; background: var(--n-0); z-index: 1;
  border-bottom: 1px solid var(--n-100); padding-bottom: 14px;
}
.as-modal-title { font-size: var(--text-lg); font-weight: 700; color: var(--n-900); }
.as-modal-close {
  background: none; border: none; cursor: pointer; font-size: 20px; color: var(--n-400);
  line-height: 1; padding: 2px 6px; border-radius: 4px;
}
.as-modal-close:hover { background: var(--n-100); color: var(--n-900); }
.as-modal-body { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; gap: 20px; }
.as-section-title {
  font-size: var(--text-xs); font-weight: 700; color: var(--n-400); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--n-100);
}
.as-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.as-field { display: flex; flex-direction: column; gap: 4px; }
.as-field--full { grid-column: 1 / -1; }
.as-label { font-size: var(--text-xs); font-weight: 600; color: var(--n-600); }
.as-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px;
  border-top: 1px solid var(--n-100); background: var(--n-50);
  position: sticky; bottom: 0;
}
.as-phase-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid var(--n-100); cursor: default;
}
.as-phase-ghost { opacity: .4; background: var(--brand-soft); }
.as-phase-chosen { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.as-phase-row:last-child { border-bottom: none; }
.as-phase-name {
  flex: 1; font-size: var(--text-sm); font-weight: 500; color: var(--n-800);
  background: none; border: 1px solid transparent; border-radius: 5px;
  padding: 4px 7px; transition: border-color .15s;
}
.as-phase-name:focus { outline: none; border-color: var(--brand-muted); background: var(--n-0); }
.as-phase-pct {
  width: 56px; font-size: var(--text-sm); text-align: center;
  background: none; border: 1px solid transparent; border-radius: 5px;
  padding: 4px 5px; transition: border-color .15s;
}
.as-phase-pct:focus { outline: none; border-color: var(--brand-muted); background: var(--n-0); }
.as-phase-del {
  background: none; border: none; cursor: pointer; color: var(--n-300);
  font-size: var(--text-md); padding: 2px 5px; border-radius: 4px; line-height: 1;
}
.as-phase-del:hover { color: var(--danger); background: var(--danger-light); }
.as-phase-add {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: var(--text-xs); color: var(--brand-active); cursor: pointer;
  background: none; border: none; padding: 4px 2px;
}
.as-phase-add:hover { text-decoration: underline; }

/* ── sl-* — Security Event Log ──────────────────────────────────────────── */
.sl-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.sl-table thead {
  background: linear-gradient(to bottom, var(--n-50), var(--n-100));
  position: sticky; top: 0; z-index: 1;
}
.sl-th {
  padding: 9px 14px; text-align: left; font-size: var(--text-2xs); font-weight: 700;
  color: var(--n-500); text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 2px solid var(--n-200); white-space: nowrap;
}
.sl-table tbody tr { border-bottom: 1px solid var(--n-100); transition: background .12s; }
.sl-table tbody tr:hover { background: var(--n-50); }
.sl-table tbody tr:last-child { border-bottom: none; }
.sl-td-time   { padding: 9px 14px; white-space: nowrap; color: var(--n-500); width: 165px; }
.sl-td-event  { padding: 9px 14px; white-space: nowrap; }
.sl-td-user   { padding: 9px 14px; }
.sl-td-ip     { padding: 9px 14px; white-space: nowrap; color: var(--n-500); font-family: monospace; font-size: var(--text-2xs); }
.sl-td-detail { padding: 9px 14px; color: var(--n-500); max-width: 280px; }
.sl-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; padding: 2px 9px;
  border-radius: var(--r-pill); letter-spacing: .03em; white-space: nowrap;
}
.sl-code {
  font-family: monospace; font-size: var(--text-2xs); background: var(--n-100);
  padding: 2px 7px; border-radius: var(--r-sm); color: var(--n-800);
}
.sl-detail { font-size: var(--text-2xs); color: var(--n-500); }
.sl-pagination {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-top: 1px solid var(--n-100);
}
.sl-page-label { font-size: var(--text-xs); color: var(--n-500); }

/* ── Inline ? tooltip ────────────────────────────────────────────────────── */
.tip-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; margin-left: 5px; vertical-align: middle;
  cursor: default;
}
.tip-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--n-200); color: var(--n-500);
  font-size: 9px; font-weight: 700; font-family: sans-serif;
  line-height: 1; letter-spacing: 0; transition: background .15s, color .15s;
  user-select: none;
}
.tip-wrap:hover .tip-icon,
.tip-wrap:focus .tip-icon {
  background: var(--brand-muted); color: var(--brand-active);
  outline: none;
}
.tip-bubble {
  display: none;
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%);
  background: var(--hero-bg-start); color: var(--hero-strong);
  font-size: 12px; font-weight: 400; line-height: 1.5;
  padding: 7px 11px; border-radius: 6px;
  width: max-content; max-width: 260px;
  white-space: normal; text-align: left;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  pointer-events: none; z-index: 100001;
  --arrow-size: 5px;
}
.tip-bubble::after {
  content: '';
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: var(--arrow-size) solid transparent;
  border-top-color: var(--hero-bg-start);
}
.tip-wrap:hover .tip-bubble,
.tip-wrap:focus .tip-bubble { display: block; }

/* ── Global tooltip bubble — positioned by _tipShow via getBoundingClientRect ── */
#_global-tip-bubble {
  display: none; position: fixed; z-index: 100001;
  background: var(--hero-bg-start); color: var(--hero-strong);
  font-size: 12px; font-weight: 400; line-height: 1.5;
  padding: 7px 11px; border-radius: 6px;
  width: max-content; max-width: 260px;
  white-space: normal; text-align: left;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  pointer-events: none;
}

/* ── Flatpickr theme integration ─── */
.flatpickr-calendar { font-family: inherit !important; border-radius: var(--r-md) !important; box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; border: 1px solid var(--n-200) !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--brand) !important; border-color: var(--brand) !important; }
.flatpickr-day:hover { background: var(--brand-light, var(--brand-light)) !important; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month { background: var(--brand) !important; color: var(--n-0) !important; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--n-0) !important; fill: var(--n-0) !important; }
.flatpickr-weekday { color: var(--n-500) !important; }

/* ── Choices.js theme integration ─── */
.choices__inner { border: 1px solid var(--n-300) !important; border-radius: var(--r-sm) !important; background: var(--n-0) !important; min-height: 38px !important; font-size: var(--text-sm) !important; font-family: inherit !important; padding: 4px 8px !important; }
.choices__input { font-family: inherit !important; font-size: var(--text-sm) !important; }
.choices__list--dropdown { border: 1px solid var(--n-200) !important; border-radius: var(--r-md) !important; box-shadow: 0 8px 24px rgba(0,0,0,.10) !important; }
.choices__list--dropdown .choices__item--selectable.is-highlighted { background: var(--brand-light, var(--brand-light)) !important; color: var(--brand) !important; }
.choices[data-type*="select-one"] .choices__inner { padding-right: 28px !important; }
.choices[data-type*="select-one"]::after { border-color: var(--n-400) transparent transparent !important; }

/* ── Improved empty states ───────────────────────────────────────────────── */
.es-block {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 56px 32px; text-align: center;
}
.es-icon  { font-size: 40px; line-height: 1; }
.es-title { font-size: 16px; font-weight: 700; color: var(--n-800); }
.es-sub   { font-size: var(--text-sm); color: var(--n-400); max-width: 400px; line-height: 1.6; }
.es-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

/* ── Setup Wizard (.sw-*) ─────────────────────────────────────────────────── */
.sw-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--n-900);
  background-image: radial-gradient(ellipse at 30% 40%, rgba(79,70,229,.14) 0%, transparent 55%),
                    radial-gradient(ellipse at 80% 70%, rgba(99,102,241,.08) 0%, transparent 50%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}

/* Split-panel shell — fixed height so every step is the same size */
.sw-shell {
  width: 100%; max-width: 980px;
  height: 620px;
  display: flex; flex-direction: row;
  border-radius: var(--r-md);
  box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px var(--hero-border);
}

/* ── Left panel — dark nav sidebar ── */
.sw-header {
  width: 290px;
  min-width: 290px;
  background: var(--n-800);
  display: flex;
  flex-direction: column;
  padding: 0;
  flex-shrink: 0;
  border-right: 1px solid var(--hero-border);
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md) 0 0 var(--r-md);
}

/* Top accent strip */
.sw-header::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-mid) 100%);
}

.sw-header-inner {
  padding: 36px 28px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Brand mark */
.sw-brand-mark {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 28px;
}
.sw-brand-dot {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: var(--n-0);
  flex-shrink: 0;
}
.sw-brand-name {
  font-size: var(--text-sm); font-weight: 700; color: var(--hero-strong);
  letter-spacing: .02em;
}

.sw-eyebrow {
  font-size: var(--text-3xs); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand-pale); margin-bottom: 10px;
}

.sw-title {
  font-size: 17px; font-weight: 700; color: var(--hero-strong);
  margin: 0 0 8px; line-height: 1.35;
}

.sw-sub {
  font-size: var(--text-xs); color: var(--hero-muted); margin: 0; line-height: 1.65;
}

/* Step nav */
.sw-progress {
  display: flex; flex-direction: column;
  margin-top: 32px;
  position: relative;
}

/* Vertical connector line */
.sw-progress::before {
  content: '';
  position: absolute; left: 18px; top: 14px;
  width: 2px;
  bottom: 14px;
  background: rgba(255,255,255,.07);
}

.sw-pip {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px 8px 8px;
  border-radius: var(--r-xs);
  font-size: var(--text-xs); font-weight: 500;
  color: var(--n-500);
  cursor: default;
  transition: background var(--t-fast), color var(--t-fast);
  position: relative; z-index: 1;
}

/* Dot */
.sw-pip::before {
  content: '';
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--n-700); flex-shrink: 0;
  border: 2px solid var(--n-600);
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  display: flex; align-items: center; justify-content: center;
}

.sw-pip.done {
  color: var(--brand-pale);
}
.sw-pip.done::before {
  background: var(--brand); border-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

.sw-pip.active {
  background: rgba(79,70,229,.12);
  color: var(--brand-pale);
}
.sw-pip.active::before {
  background: var(--brand); border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(79,70,229,.2);
}

.sw-step-label { display: none; }

/* ── Right panel — white content area ── */
.sw-body {
  flex: 1;
  background: var(--n-0);
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  overflow: hidden;
}

/* Scrollable content zone — fills remaining height, scrolls if content is tall */
.sw-content-scroll {
  flex: 1;
  min-height: 0;
  padding: 36px 40px 24px;
  overflow-y: auto;
}

.sw-pane { display: none; }
.sw-pane.active { display: block; }

/* Pane heading */
.sw-pane-title {
  font-size: 20px; font-weight: 700; color: var(--n-900);
  margin: 0 0 4px; letter-spacing: -.01em;
}
.sw-pane-sub {
  font-size: var(--text-sm); color: var(--n-500); margin: 0 0 24px; line-height: 1.5;
}

.sw-section-title {
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--n-600);
  margin: 24px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--n-200);
}
.sw-section-title:first-child { margin-top: 0; }

.sw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sw-grid.full { grid-template-columns: 1fr; }
.sw-field { display: flex; flex-direction: column; gap: 5px; }

.sw-field label {
  font-size: var(--text-xs); font-weight: 700; color: var(--n-800);
  display: flex; align-items: center; gap: 4px;
}

.sw-field input, .sw-field select {
  padding: 9px 12px; border: 1px solid var(--n-300); border-radius: var(--r-xs);
  font-size: var(--text-base); font-family: inherit; color: var(--n-800);
  background: var(--n-50); transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  outline: none;
}
.sw-field input::placeholder { color: var(--n-400); }

.sw-field input:focus, .sw-field select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(79,70,229,.15);
  background: var(--n-0);
}

.sw-hint { font-size: var(--text-2xs); color: var(--n-500); line-height: 1.4; }
.sw-req { color: var(--danger); }

.sw-field input.sw-field-err, .sw-field select.sw-field-err {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
  background: var(--danger-light);
}
.sw-field-msg {
  font-size: var(--text-2xs); color: var(--danger); line-height: 1.3;
  display: none;
}
.sw-field-msg.visible { display: block; }

/* Theme picker */
.sw-theme-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.sw-theme-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent;
  cursor: pointer; transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); outline: none;
  box-shadow: var(--shadow-xs);
}
.sw-theme-btn:hover { transform: scale(1.12); box-shadow: var(--shadow-sm); }
.sw-theme-btn.active { border-color: var(--n-800); transform: scale(1.12); box-shadow: var(--shadow-md); }

/* Welcome cards */
.sw-welcome-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.sw-welcome-card {
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-sm);
  border-top: 3px solid var(--brand);
  padding: 18px 16px; display: flex; flex-direction: column; gap: 8px;
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.sw-welcome-card:hover {
  box-shadow: var(--shadow-brand-sm);
  border-color: var(--brand-muted);
}
.sw-welcome-icon-wrap {
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--brand-light); display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.sw-welcome-icon { font-size: 22px; }
.sw-welcome-label { font-size: var(--text-sm); font-weight: 700; color: var(--n-800); }
.sw-welcome-desc  { font-size: var(--text-xs); color: var(--n-500); line-height: 1.55; }

/* Done screen */
.sw-done-hero {
  text-align: center; padding: 8px 0 24px;
}
.sw-done-badge {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand-tint) 100%);
  border: 2px solid var(--brand-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 30px; margin-bottom: 14px;
}
.sw-done-title { font-size: 20px; font-weight: 700; color: var(--n-900); margin-bottom: 6px; }
.sw-done-sub   { font-size: var(--text-sm); color: var(--n-500); line-height: 1.6; }

.sw-done-steps { display: flex; flex-direction: column; gap: 10px; }
.sw-done-step {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--n-50); border: 1px solid var(--n-200);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-xs); padding: 14px 16px;
  transition: box-shadow var(--t-fast);
}
.sw-done-step:hover { box-shadow: var(--shadow-brand-sm); }
.sw-done-step-icon-wrap {
  width: 32px; height: 32px; border-radius: var(--r-md);
  background: var(--brand-light); display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.sw-done-step-icon  { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.sw-done-step-body  { display: flex; flex-direction: column; gap: 2px; }
.sw-done-step-title { font-size: var(--text-sm); font-weight: 700; color: var(--n-800); }
.sw-done-step-desc  { font-size: var(--text-xs); color: var(--n-500); line-height: 1.45; }

/* Footer */
.sw-footer {
  padding: 14px 40px 16px;
  border-top: 1px solid var(--n-200);
  background: var(--n-50);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; gap: 12px;
}
.sw-footer-left { display: flex; align-items: center; gap: 10px; }
.sw-footer-step { font-size: var(--text-xs); color: var(--n-400); font-weight: 500; }
.sw-err { font-size: var(--text-sm); color: var(--danger); flex: 1; }

.sw-btn-back {
  padding: 8px 18px; border-radius: var(--r-xs); border: 1px solid var(--n-300);
  background: var(--n-0); color: var(--n-700); font-size: var(--text-sm); font-weight: 600;
  cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); font-family: inherit;
}
.sw-btn-back:hover { background: var(--n-100); border-color: var(--brand); color: var(--brand); }

.sw-btn-next {
  padding: 9px 22px; border-radius: var(--r-xs); border: none;
  background: var(--brand); color: var(--n-0); font-size: var(--text-sm); font-weight: 700;
  cursor: pointer; font-family: inherit; letter-spacing: .01em;
  transition: background var(--t-fast), box-shadow var(--t-fast);
  box-shadow: var(--shadow-brand-sm);
}
.sw-btn-next:hover    { background: var(--brand-hover); box-shadow: var(--shadow-brand-md); }
.sw-btn-next:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.sw-password-strength {
  height: 3px; border-radius: 2px; margin-top: 5px;
  background: var(--n-200); overflow: hidden;
}
.sw-password-strength-bar {
  height: 100%; border-radius: 2px; width: 0; transition: width .3s, background .3s;
}

/* Responsive — stack on small screens */
@media (max-width: 680px) {
  .sw-overlay { padding: 0; align-items: stretch; }
  .sw-shell { flex-direction: column; border-radius: 0; max-width: 100%; height: 100%; }
  .sw-header { width: 100%; min-width: 0; }
  .sw-header-inner { padding: 24px 20px 16px; }
  .sw-progress { flex-direction: row; margin-top: 16px; }
  .sw-progress::before { display: none; }
  .sw-pip { flex: 1; padding: 4px 6px; font-size: 0; justify-content: center; }
  .sw-pip::before { width: 10px; height: 10px; }
  .sw-content-scroll { padding: 24px 20px 16px; }
  .sw-footer { padding: 12px 20px; }
  .sw-welcome-grid { grid-template-columns: 1fr; }
  .sw-grid { grid-template-columns: 1fr; }
}

/* ─── Vendor Admin Section (.va-*) ─────────────────────────────────────────── */

/* Phase bar */
/* ── App Owner Hero Header ────────────────────────────────────────────────── */

.va-hero {
  background: var(--hero-bg);
  border-radius: var(--r-10);
  padding: 28px 32px 24px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--hero-border);
}
.va-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-mid, var(--brand-mid)), var(--brand));
}
.va-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.va-hero-left { display: flex; align-items: center; gap: 16px; }
.va-hero-icon {
  width: 48px; height: 48px; border-radius: var(--r-10);
  background: linear-gradient(135deg, var(--n-800), var(--n-700));
  border: 1px solid var(--hero-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0; overflow: hidden;
}
.va-hero-logo-img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.va-hero-title { font-size: 20px; font-weight: 800; color: var(--hero-strong); letter-spacing: -.01em; }
.va-hero-sub { font-size: 13px; color: var(--hero-muted); margin-top: 3px; line-height: 1.4; }
.va-hero-status {
  display: flex; align-items: center; gap: 8px; margin-top: 18px; flex-wrap: wrap;
}
.va-phase-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 20px;
  font-size: 12px; font-weight: 700; white-space: nowrap; letter-spacing: .04em;
  border: 1px solid transparent;
}
.va-phase-pill--setup    { background: rgba(168,85,247,.15); color: #c084fc; border-color: rgba(168,85,247,.25); }
.va-phase-pill--reg      { background: rgba(245,158,11,.15); color: var(--amber-border); border-color: rgba(245,158,11,.25); }
.va-phase-pill--live     { background: rgba(34,197,94,.15);  color: #4ade80; border-color: rgba(34,197,94,.25); }
.va-phase-hint { font-size: 13px; color: var(--hero-muted); }
.va-hero-progress { margin-top: 20px; }
.va-hero-progress-bar {
  height: 5px; background: rgba(255,255,255,.08); border-radius: 10px;
  overflow: hidden; max-width: 320px;
}
.va-hero-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-mid, var(--brand-mid)));
  border-radius: var(--r-pill);
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.va-hero-progress-label {
  font-size: 11px; color: var(--hero-muted); margin-top: 6px;
}

/* ── Status banners ───────────────────────────────────────────────────────── */
.va-live-banner, .va-reg-banner {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 18px; border-radius: var(--r-lg); margin-bottom: 20px;
  box-shadow: var(--shadow-xs);
}
.va-live-banner { background: var(--success-light); border: 1px solid var(--success-border); }
.va-reg-banner  { background: var(--warning-light); border: 1px solid var(--warning-border); }
.va-live-banner-icon, .va-reg-banner-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.va-live-banner-title, .va-reg-banner-title { font-size: var(--text-lg); font-weight: 700; color: var(--n-900); margin-bottom: 3px; }
.va-live-banner-sub, .va-reg-banner-sub { font-size: var(--text-md); color: var(--n-600); line-height: 1.5; }

/* ── Checklist (kept for compat) ─────────────────────────────────────────── */
.va-checklist-card { margin-bottom: 16px; }
.va-checklist-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.va-checklist-sub { font-size: var(--text-md); color: var(--n-500); margin-top: 2px; }
.va-checklist-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.va-progress-bar { width: 200px; height: 8px; background: var(--n-200); border-radius: var(--r-pill); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
.va-progress-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-mid)); border-radius: var(--r-pill); transition: width .5s cubic-bezier(.4,0,.2,1); }
.va-progress-label { font-size: var(--text-xs); font-weight: 600; color: var(--n-500); }

/* ── Step list — collapsible accordion ───────────────────────────────────── */

.va-steps { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }

.va-step {
  border-radius: var(--r-md);
  border: 1px solid var(--n-200);
  background: var(--n-0);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: border-color .15s, box-shadow .15s;
  position: relative;
}
.va-step::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 3px 0 0 3px;
  background: transparent; transition: background .15s;
}
.va-step:hover::before   { background: var(--brand); }
.va-step--done::before   { background: var(--success); }
.va-step--open::before   { background: var(--brand); }
.va-step--done  { background: var(--success-light); border-color: var(--success-border); }
.va-step--open  { border-color: var(--brand-muted); box-shadow: var(--shadow-brand-sm); }
.va-step:hover  { border-color: var(--n-400); box-shadow: var(--shadow-sm); }
.va-step--done:hover { box-shadow: 0 2px 6px rgba(22,163,74,.1); }

.va-step-head {
  display: flex; align-items: center; gap: 14px;
  cursor: pointer; user-select: none; padding: 14px 16px 14px 20px;
}
.va-step-icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  background: var(--n-100); color: var(--n-500);
  border: 1.5px solid var(--n-300);
  transition: background .15s, color .15s, border-color .15s;
}
.va-step--done .va-step-icon {
  background: var(--success); color: var(--n-0); border-color: var(--success);
  font-size: 15px; box-shadow: 0 2px 6px rgba(22,163,74,.22);
}
.va-step--open .va-step-icon {
  background: var(--brand); color: var(--n-0); border-color: var(--brand);
  box-shadow: var(--shadow-brand-sm);
}
.va-step-body { flex: 1; min-width: 0; }
.va-step-title { font-size: 15px; font-weight: 700; color: var(--n-900); margin-bottom: 2px; }
.va-step--done .va-step-title { color: var(--success); }
.va-step--open .va-step-title { color: var(--brand); }
.va-step-desc  { font-size: 13px; color: var(--n-500); line-height: 1.45; }
.va-step-badge {
  font-size: 11px; font-weight: 700; color: var(--success);
  background: var(--success-light); padding: 3px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--success-border); white-space: nowrap;
}
.va-step-req {
  font-size: 11px; font-weight: 700; color: var(--n-500);
  background: var(--n-100); padding: 3px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--n-300); white-space: nowrap;
}
.va-step-chevron {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--n-400); flex-shrink: 0;
  transition: transform .2s, color .15s, background .15s;
  background: transparent;
}
.va-step-chevron svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.5; fill: none; }
.va-step:hover .va-step-chevron { color: var(--n-600); background: var(--n-100); }
.va-step--open .va-step-chevron { color: var(--brand); background: var(--brand-light); transform: rotate(90deg); }
.va-step--done .va-step-chevron { color: var(--success); }

.va-step-content { border-top: 1px solid var(--n-200); background: var(--n-0); }
.va-step--done .va-step-content { border-color: var(--success-border); }
.va-step--open .va-step-content { border-color: var(--brand-muted); }
.va-content-inner { padding: 20px 24px 24px; }

/* Optional step groups */
.va-optional-header {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--n-400); margin: 28px 0 8px;
  display: flex; align-items: center; gap: 10px;
}
.va-optional-header::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--n-300), transparent);
}
.va-steps--optional .va-step { background: var(--n-50); border-color: var(--n-200); }
.va-steps--optional .va-step--done { background: var(--success-light); }
.va-steps--optional .va-step::before { opacity: .7; }

/* Handover card */
.va-handover-card { margin-top: 6px; margin-bottom: 16px; }
.va-handover-card--locked { opacity: .5; pointer-events: none; filter: grayscale(.3); }
.va-handover-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.va-handover-icon {
  width: 48px; height: 48px; border-radius: var(--r-10);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--n-900), var(--n-700));
  box-shadow: var(--shadow-sm);
}
.va-handover-body { flex: 1; min-width: 0; }
.va-handover-title { font-size: 15px; font-weight: 700; color: var(--n-900); margin-bottom: 3px; }
.va-handover-sub   { font-size: 13px; color: var(--n-500); line-height: 1.5; }

.va-handover-ready {
  background: var(--hero-bg);
  border: 1px solid var(--hero-border);
  border-radius: var(--r-10);
  padding: 20px 24px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
}
.va-handover-ready::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--success), #4ade80);
}
.va-handover-ready .va-handover-title { color: var(--hero-strong); }
.va-handover-ready .va-handover-sub   { color: var(--hero-muted); }

/* ── Form fields ─────────────────────────────────────────────────────────── */

.va-field-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px;
}
@media (max-width: 600px) { .va-field-grid { grid-template-columns: 1fr; } }
.va-field { display: flex; flex-direction: column; gap: 5px; }
.va-field label { font-size: var(--text-base); font-weight: 600; color: var(--n-700); }
.va-field input, .va-field select, .va-field textarea {
  padding: 9px 12px; border: 1.5px solid var(--n-200); border-radius: var(--r-md);
  font-size: var(--text-md); font-family: inherit; color: var(--n-900);
  outline: none; background: var(--n-0); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.va-field input:focus, .va-field select:focus, .va-field textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.va-err {
  font-size: var(--text-sm); color: var(--danger); margin-bottom: 10px;
  padding: 8px 12px; background: var(--danger-light); border: 1px solid var(--danger-border);
  border-radius: var(--r-md);
}
.va-actions { display: flex; gap: 10px; padding-top: 6px; }

/* ── Framework list rows ─────────────────────────────────────────────────── */

.va-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
.va-list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  background: var(--n-0); border-bottom: 1px solid var(--n-100);
  transition: background var(--t-fast);
  position: relative;
}
.va-list-row:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
.va-list-row:last-child { border-bottom: none; border-radius: 0 0 var(--r-md) var(--r-md); }
.va-list-row:only-child { border-radius: var(--r-md); }
.va-list-row:hover { background: var(--n-50); }
.va-list-row-body { flex: 1; min-width: 0; }
.va-list-row-title { font-size: var(--text-md); font-weight: 600; color: var(--n-900); }
.va-list-row-meta  { font-size: var(--text-sm); color: var(--n-500); margin-top: 2px; }
.va-list-empty {
  font-size: var(--text-md); color: var(--n-400); padding: 32px; text-align: center;
}

/* Section divider */
.va-section-divider {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--n-400); margin: 16px 0 12px;
  border-top: 1px solid var(--n-200); padding-top: 14px;
}
.va-req { font-size: var(--text-xs); font-weight: 700; color: var(--danger); margin-left: 4px; }

/* ── Panel containers (inside step expanded content) ─────────────────────── */

.va-panel {
  background: var(--n-0); border: 1px solid var(--n-200);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.va-panel-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; flex-wrap: wrap;
  background: var(--hero-bg);
  border-bottom: 1px solid var(--hero-border);
}
.va-panel-toolbar-title {
  font-size: var(--text-md); font-weight: 700; color: var(--hero-text);
}
.va-panel-toolbar--sub {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 20px; flex-wrap: wrap;
  border-bottom: 1px solid var(--n-100); background: var(--n-0);
}
.va-panel-hint { font-size: var(--text-sm); color: var(--n-500); flex: 1; min-width: 0; line-height: 1.5; }
.va-panel-add-btn { flex-shrink: 0; }
.va-panel-body { padding: 0; }

/* Section title — named block headers within a panel */
.va-panel-section-title {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 11px 20px 9px;
  background: var(--hero-bg);
  border-top: 1px solid var(--hero-border); border-bottom: 1px solid var(--hero-border);
}
.va-panel-section-title:first-child { border-top: none; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.va-panel-section-label {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--brand-400);
}
.va-panel-section-hint {
  font-size: var(--text-sm); color: var(--hero-muted); margin-top: 2px; line-height: 1.45;
}
.va-panel-loading {
  font-size: var(--text-sm); color: var(--n-400); padding: 32px; text-align: center;
}
.va-panel-empty {
  font-size: var(--text-sm); color: var(--n-400); padding: 32px; text-align: center;
  line-height: 1.6;
}
.va-panel-error {
  font-size: var(--text-md); color: var(--danger); padding: 12px 20px;
  background: var(--danger-light); border-top: 1px solid var(--danger-border);
}
.va-panel-count {
  font-size: var(--text-xs); color: var(--n-400); padding: 8px 20px 10px;
  text-align: right; border-top: 1px solid var(--n-100); background: var(--n-50);
}

/* ── Data tables ─────────────────────────────────────────────────────────── */

.va-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.va-table thead tr { border-bottom: 2px solid var(--n-200); }
.va-table th {
  padding: 9px 14px; text-align: left;
  font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--n-500);
  background: linear-gradient(to bottom, var(--n-50), var(--n-100));
}
.va-table th:first-child { border-radius: var(--r-sm) 0 0 0; }
.va-table th:last-child  { border-radius: 0 var(--r-sm) 0 0; }
.va-table td { padding: 10px 14px; border-bottom: 1px solid var(--n-100); vertical-align: middle; color: var(--n-800); }
.va-table tbody tr:last-child td { border-bottom: none; }
.va-table tbody tr:hover td { background: var(--brand-soft); }
.va-td-primary { font-weight: 600; color: var(--n-900); font-size: var(--text-md); }
.va-td-actions {
  text-align: right; white-space: nowrap; padding-right: 14px !important;
}
.va-td-actions button + button { margin-left: 5px; }

/* Monospace / framework columns in mappings table */
.va-td-mono { font-family: monospace; font-size: var(--text-xs); color: var(--n-700); }
.va-td-fw   { font-size: var(--text-sm); color: var(--n-500); }

/* ── Framework column option chips (read-only preview in table) ─────────── */

.fws-opt-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.fws-opt-chip--ro {
  display: inline-flex; align-items: center;
  background: var(--brand-light); color: var(--brand); border: 1px solid var(--brand-muted);
  border-radius: var(--r-pill); padding: 1px 9px;
  font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
}
.fws-opt-more {
  font-size: var(--text-xs); color: var(--n-400); font-style: italic;
}
.ffd-no-opts { font-size: var(--text-xs); color: var(--n-400); font-style: italic; }

/* suggest badge (passive, in table) */
.fws-suggest-badge {
  display: inline-block; padding: 1px 7px;
  border-radius: var(--r-pill); border: 1.5px dashed var(--n-300);
  font-size: var(--text-xs); color: var(--n-500); background: var(--n-50);
  white-space: nowrap; margin-right: 4px; cursor: default;
}

/* key + label cells */
.ffd-c-key { width: 150px; }
.ffd-c-key .ffd-col-key,
.ffd-tbl .ffd-col-key { font-family: monospace; font-size: var(--text-xs); font-weight: 700; color: var(--n-700); }
.ffd-c-lbl { font-weight: 600; font-size: var(--text-sm); color: var(--n-900); text-align: left; }
.ffd-lbl-muted { color: var(--n-400); }

/* ── Manage Options modal ────────────────────────────────────────────────── */
/* ── olkp-* — Org Dropdown Lists grid table ──────────────────────────────── */
.olkp-table .olkp-c-name { width: 220px; font-weight: 600; color: var(--n-900); }
.olkp-table .olkp-c-preview { max-width: 0; }
.olkp-table .olkp-c-count { width: 100px; text-align: right; white-space: nowrap; }
.olkp-table .olkp-c-acts { width: 80px; text-align: right; }
.olkp-row--inactive .com-opt-name { color: var(--n-400); text-decoration: line-through; }

.com-modal { max-width: 500px; }
.com-modal-body { padding: 0; }
.modal-sub { font-size: var(--text-sm); color: var(--n-500); margin: 2px 0 0; }
.com-opt-list {
  padding: 8px 0; max-height: 320px; overflow-y: auto;
  border-bottom: 1px solid var(--n-100);
}
.com-opt-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 20px; gap: 8px;
  border-bottom: 1px solid var(--n-100);
}
.com-opt-row:last-child { border-bottom: none; }
.com-opt-row:hover { background: var(--brand-soft); }
.com-opt-name { font-size: var(--text-sm); color: var(--n-800); flex: 1; }
.com-opt-actions { display: flex; gap: 6px; flex-shrink: 0; }
.com-rename-inp {
  height: 28px; font-size: var(--text-sm); padding: 2px 8px;
  border: 1.5px solid var(--brand); border-radius: var(--r-sm);
  font-family: inherit; width: 200px; background: var(--n-0); color: var(--n-800); outline: none;
}
.com-empty { padding: 20px; font-size: var(--text-sm); color: var(--n-400); text-align: center; }
.com-add-row {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-bottom: 1px solid var(--n-100);
}
.com-add-inp { flex: 1; }
.com-clear-btn { margin-right: auto; }
.com-suggest-section { padding: 0 0 4px; }
.com-suggest-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px 6px;
}
.com-suggest-title { font-size: var(--text-xs); font-weight: 600; color: var(--n-500); text-transform: uppercase; letter-spacing: .04em; }
.com-suggest-list { padding: 0 0 4px; }
.com-suggest-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 20px; border-bottom: 1px solid var(--n-100);
}
.com-suggest-row:last-child { border-bottom: none; }
.com-suggest-val { font-size: var(--text-sm); color: var(--n-600); flex: 1; }

/* ── Lookup-values editor (lve-*) ───────────────────────────────────────────── */
.lve-wrap { display: flex; flex-direction: column; }
.lve-list { max-height: 260px; }
.com-opt-row--inactive { opacity: 0.55; }
.lve-meta { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.lve-add-row { flex-wrap: wrap; }
.lve-hint { font-size: var(--text-xs); color: var(--n-400); margin: 6px 20px 0; }

/* ── Field & Panel Config — list rows ───────────────────────────────────────── */
.ffd-list { display: flex; flex-direction: column; }

.ffd-row {
  display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--n-100);
  background: var(--surface); min-width: 0;
}
.ffd-row:last-child { border-bottom: none; }
.ffd-row--unmapped  { background: var(--n-50); }
.ffd-row--hidden    { background: var(--n-50); opacity: 0.6; }
.ffd-row:hover      { background: var(--brand-soft); }
.ffd-drag-handle    { color: var(--n-300); cursor: grab; font-size: 16px; user-select: none; flex-shrink: 0; width: 16px; }
.ffd-drag-handle:hover { color: var(--n-500); }
.ffd-drag-active    { opacity: .4; }

.ffd-row--header  { background: var(--n-50); border-bottom: 2px solid var(--n-200); pointer-events: none; }
.ffd-col--hdr     { font-size: var(--text-xs); font-weight: 700; color: var(--n-500); text-transform: uppercase; letter-spacing: .04em; justify-content: flex-start; }
.ffd-col          { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; }
.ffd-col--name    { flex: 2; font-size: var(--text-sm); font-weight: 600; color: var(--n-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-content: flex-start; }
.ffd-col--status  { flex: 1.2; }
.ffd-col--party   { flex: 1; }
.ffd-col-empty    { color: var(--n-300); font-size: var(--text-xs); }
.ffd-row-acts     { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

.ffd-badge {
  display: inline-flex; align-items: center; padding: 1px 7px;
  border-radius: var(--r-pill); font-size: var(--text-2xs); font-weight: 600;
  white-space: nowrap; border: 1px solid transparent;
}
.ffd-badge--type    { background: var(--n-100);           color: var(--n-600);              border-color: var(--n-200); }
.ffd-badge--party   { background: var(--brand-light);     color: var(--brand);              border-color: var(--brand-muted); }
.ffd-badge--saves   { background: var(--success-light);   color: var(--success);            border-color: var(--success-muted, #6ee7b7); font-family: monospace; }
.ffd-badge--opts    { background: var(--brand-soft);      color: var(--brand);              border-color: var(--brand-muted); }
.ffd-badge--req     { background: var(--error-light, #fee2e2); color: var(--error, #dc2626); border-color: var(--error-muted, #fca5a5); }
.ffd-badge--ref     { background: var(--n-800);           color: var(--n-0);                border-color: var(--n-700); }
.ffd-badge--muted   { background: var(--n-100);           color: var(--n-400);              border-color: var(--n-200); font-style: italic; }
.ffd-badge--active  { background: var(--success-light);   color: var(--success);            border-color: var(--success-muted, #6ee7b7); }

/* Configure button */
.ffd-cfg-btn {
  height: 26px; padding: 0 12px; font-size: var(--text-xs); font-weight: 600;
  border: 1px solid var(--n-200); border-radius: var(--r-base);
  background: var(--n-0); color: var(--n-600); cursor: pointer; font-family: inherit;
  transition: background .1s, border-color .1s, color .1s; white-space: nowrap;
}
.ffd-cfg-btn:hover { background: var(--brand); border-color: var(--brand); color: var(--n-0); }

/* Configure modal */
.ffd-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.ffd-modal-opts { padding: 12px; background: var(--n-50); border: 1px solid var(--n-200); border-radius: var(--r-sm); }
.ffd-m-check-label { display: flex; align-items: center; gap: 8px; align-self: end; padding-bottom: 6px; }
.ffd-m-ref-label   { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--n-600); cursor: pointer; }
.btn-danger { background: var(--danger-light); color: var(--danger); border: 1px solid var(--danger-border); border-radius: var(--r-sm); padding: 6px 14px; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: inherit; }
.btn-danger:hover { background: var(--danger); color: var(--n-0); }

/* ── Framework-seed hint on pre-filled fields ───────────────────────────── */
.il-fw-seed-hint {
  display: inline-block; margin-left: 6px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--brand); background: var(--brand-light);
  border: 1px solid var(--brand-muted); border-radius: var(--r-pill);
  padding: 1px 6px; vertical-align: middle; cursor: help;
}

/* ── Framework Field Definitions table ──────────────────────────────────── */
.ffd-table .adm-table th,
.ffd-table .adm-table td { font-size: var(--text-xs); padding: 5px 8px; vertical-align: middle; }
.ffd-table .adm-table th { background: var(--n-50); font-weight: 700; }
.ffd-table .form-input   { height: 28px; padding: 2px 6px; font-size: var(--text-xs); min-width: 0; }
.ffd-table select.form-input { min-width: 90px; }

/* ── ffd-* missing element styles ───────────────────────────────────────── */
.ffd-col-key        { display: block; font-size: var(--text-xs); font-weight: 700; color: var(--n-600); font-family: monospace; }
.ffd-col-label-hint { display: block; font-size: var(--text-xs); color: var(--n-400); margin-top: 1px; }
.ffd-label-input    { height: 28px !important; padding: 2px 6px !important; font-size: var(--text-xs) !important; }
.ffd-fw-row--unmapped td { background: var(--n-50); }
.ffd-fw-row--mapped td  { background: var(--n-0); }
.ffd-mapped-summary { display: flex; align-items: center; gap: 8px; padding: 10px 20px 8px; flex-wrap: wrap; }
.ffd-mapped-chip    {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  background: var(--brand-pale); border: 1px solid var(--brand-muted);
  border-radius: var(--r-pill); font-size: var(--text-xs); color: var(--brand);
  font-weight: 600;
}
.ffd-mapped-chip-party { color: var(--n-500); font-weight: 400; }
.ffd-manage-btn     { margin-left: auto; }
.fd-inherited-note  { font-size: var(--text-2xs); color: var(--n-400); font-style: italic; }
.ffd-col-layout     { width: 70px; text-align: center !important; }
.ffd-col-req        { width: 36px; text-align: center !important; }
.ffd-col-vis        { width: 36px; text-align: center !important; }
.ffd-col-acts       { width: 110px; }
.ffd-drag-handle    { width: 20px; color: var(--n-400); cursor: grab; text-align: center; user-select: none; font-size: 16px; padding: 8px 6px !important; transition: color .15s; }
.ffd-drag-handle:hover  { color: var(--n-600); }
.ffd-drag-handle:active { cursor: grabbing; color: var(--brand); }
.ffd-drag-active    { opacity: 0.5; }
tr.ffd-drag-over    { border-top: 2px solid var(--brand); }

/* Fields table — shared cell styles */
.ffd-tbl th, .ffd-tbl td { font-size: var(--text-xs); padding: 6px 8px; vertical-align: middle; }
.ffd-tbl th  { background: var(--n-50); font-weight: 700; color: var(--n-600); white-space: nowrap; }
.ffd-tbl .form-input, .ffd-inp { height: 28px; padding: 2px 6px; font-size: var(--text-xs); min-width: 0; }
.ffd-row--unmapped td   { background: var(--n-50); }
.ffd-saves-to       { max-width: 180px; min-width: 130px; }
.ffd-req-label      { font-size: var(--text-xs); display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.ffd-tier-badge           { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.ffd-tier-badge--fw,
.ffd-tier-badge--framework { background: var(--brand-50, #eff6ff); color: var(--brand, #2563eb); }
.ffd-tier-badge--platform  { background: var(--n-100); color: var(--n-600); }
.ffd-tier-badge--custom    { background: var(--success-light); color: var(--success); }

/* ── Chip editor ─────────────────────────────────────────────────────────── */
.fws-opt-chips      { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 4px; }
.fws-opt-chip       { display: inline-flex; align-items: center; gap: 3px; background: var(--brand-light); color: var(--brand); border: 1px solid var(--brand-muted); border-radius: var(--r-pill); padding: 1px 4px 1px 9px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.fws-opt-chip-del   { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: none; border-radius: 50%; background: transparent; color: var(--brand); font-size: 11px; cursor: pointer; padding: 0; line-height: 1; }
.fws-opt-chip-del:hover { background: var(--brand); color: var(--n-0); }
.fws-opt-add-wrap   { display: inline-flex; align-items: center; gap: 4px; }
.fws-opt-input      { height: 24px; padding: 2px 8px; font-size: var(--text-xs); border: 1px solid var(--n-200); border-radius: var(--r-base); background: var(--n-0); color: var(--n-900); outline: none; width: 120px; font-family: inherit; }
.fws-opt-input:focus { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-focus, #bfdbfe); }
.fws-opt-add-btn    { height: 24px; padding: 0 10px; font-size: var(--text-xs); font-weight: 600; border: 1px solid var(--brand); border-radius: var(--r-base); background: var(--brand); color: var(--n-0); cursor: pointer; transition: background .12s; font-family: inherit; }
.fws-opt-add-btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.ffd-layout-toggle  { display: inline-flex; border: 1px solid var(--n-200); border-radius: 6px; overflow: hidden; }
.ffd-lay-btn {
  padding: 3px 8px; font-size: var(--text-xs); font-weight: 600;
  background: var(--n-0); border: none; cursor: pointer; color: var(--n-500);
  font-family: inherit; transition: background .12s, color .12s;
}
.ffd-lay-btn:first-child { border-right: 1px solid var(--n-200); }
.ffd-lay-btn--active { background: var(--brand); color: var(--n-0); }
.ffd-lay-btn:hover:not(.ffd-lay-btn--active) { background: var(--n-50); }
.ffd-src-badge { font-size: var(--text-2xs); font-weight: 600; padding: 1px 6px; border-radius: 4px; margin-left: 4px; vertical-align: middle; }
.ffd-src-badge--fw { background: var(--brand-tint, #e8f0fe); color: var(--brand-active, #1a56db); }
.ffd-src-badge--custom { background: var(--n-100); color: var(--n-500); }
.fd-inherited-note { font-size: var(--text-2xs); color: var(--n-400); font-style: italic; }

/* ── Framework Settings page — fws-* design system ─────────────────────── */

.fws-card-title-block {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.fws-card-eyebrow {
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--brand); line-height: 1;
}
.fws-card-title {
  font-size: var(--text-base); font-weight: 700; color: var(--n-900); line-height: 1.2;
}
.fws-card-hint {
  font-size: var(--text-xs); color: var(--n-500); line-height: 1.4; margin-top: 1px;
}
.fws-header-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.fws-filter-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--n-50);
  border-bottom: 1px solid var(--n-100);
}
.fws-filter-select {
  height: 32px; padding: 4px 10px; font-size: var(--text-sm); min-width: 160px; max-width: 240px;
}
.fws-filter-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); color: var(--n-600); cursor: pointer; user-select: none;
}
.fws-filter-check input[type="checkbox"] { accent-color: var(--brand); width: 14px; height: 14px; cursor: pointer; }

.fws-loading-state {
  padding: 32px 20px; text-align: center;
  font-size: var(--text-sm); color: var(--n-400); line-height: 1.6;
}
.td-empty {
  padding: 28px 16px !important; text-align: center;
  font-size: var(--text-sm); color: var(--n-400);
}

/* Tab bar */
.fws-tab-bar {
  display: flex; gap: 0; padding: 0 20px;
  border-bottom: 2px solid var(--n-100); background: var(--n-0);
}
.fws-tab {
  padding: 10px 16px; font-size: var(--text-sm); font-weight: 600;
  color: var(--n-500); background: transparent; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  cursor: pointer; font-family: inherit;
  transition: color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.fws-tab:hover { color: var(--n-700); }
.fws-tab--active { color: var(--brand); border-bottom-color: var(--brand); }

/* Tab panels */
.fws-tab-panel { display: block; }
.fws-tab-panel--hidden { display: none; }
.fws-panel-desc {
  padding: 12px 20px 0;
  font-size: var(--text-sm); color: var(--n-500); line-height: 1.5;
  border-top: none;
}

/* ── Framework column fill-rate bar ────────────────────────────────────── */
.ffd-fill-bar {
  display: inline-block; width: 80px; height: 7px;
  background: var(--n-200); border-radius: var(--r-pill); overflow: hidden;
  vertical-align: middle;
}
.ffd-fill-inner {
  display: block; height: 100%;
  background: var(--brand); border-radius: var(--r-pill);
  transition: width .3s ease;
}

/* ── fws-* table layout helpers ─────────────────────────────────────────── */

.fws-col-drag   { width: 28px; padding: 0 4px !important; }
.fws-col-type   { width: 90px; }
.fws-col-count  { width: 80px; font-size: var(--text-sm); color: var(--n-400); }
.fws-col-actions{ width: 120px; text-align: right !important; padding-right: 12px !important; }
.fws-row-actions{ display: flex; gap: 6px; justify-content: flex-end; }
.fws-cat-name   { font-weight: 600; font-size: var(--text-sm); color: var(--n-900); }
.fws-cat-table td { vertical-align: middle; text-align: left; }
.fws-grp-name   { font-weight: 500; font-size: var(--text-sm); color: var(--n-900); }
.fws-grp-table td { vertical-align: middle; text-align: left; }
.fws-suggest-trigger {
  display: inline-block; margin-top: 6px;
  padding: 3px 10px; font-size: var(--text-xs); font-weight: 600;
  border: 1px solid var(--brand-muted); border-radius: var(--r-pill);
  background: var(--brand-pale); color: var(--brand);
  cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.fws-suggest-trigger:hover { background: var(--brand-light); border-color: var(--brand); }

.fws-suggest-modal-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 340px; overflow-y: auto;
}
.fws-suggest-modal-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 10px; border-radius: var(--r-base);
  background: var(--n-50); border: 1px solid var(--n-100);
  transition: opacity var(--t-fast);
}
.fws-suggest-modal-row--done { opacity: .4; }
.fws-suggest-modal-val { font-size: var(--text-sm); color: var(--n-800); flex: 1; min-width: 0; }

/* Mappings table */
.fws-map-table-wrap { overflow-x: auto; }
.fws-map-table      { width: 100%; font-size: var(--text-xs); }
.fws-map-id         { font-size: var(--text-xs); }
.fws-map-fw         { font-size: var(--text-xs); color: var(--n-500); }
.fws-map-type       { width: 90px; }
.fws-map-type-badge { font-size: var(--text-xs); font-weight: 700; }
.fws-map-trunc      { font-size: var(--text-xs); color: var(--n-500); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fws-map-platform-label { font-size: var(--text-xs); color: var(--n-400); }

/* ── Field definitions section headers ───────────────────────────────────── */

.ffd-section        { padding-bottom: 0; }
.ffd-section + .ffd-section { border-top: 1px solid var(--n-100); margin-top: 4px; padding-top: 4px; }
.ffd-section-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px 20px 8px;
}
.ffd-order-hint {
  margin: 0 20px 8px; padding: 7px 12px;
  font-size: var(--text-xs); color: var(--brand-mid);
  background: var(--brand-light); border-radius: 6px;
  border-left: 3px solid var(--brand-muted);
}
.ffd-section-title  {
  display: block; font-size: var(--text-sm); font-weight: 700; color: var(--n-700);
  margin-bottom: 2px;
}
.ffd-section-hint   { font-size: var(--text-xs); color: var(--n-400); }
.ffd-table-wrap     { overflow-x: auto; }
.ffd-empty-row      { text-align: center; color: var(--n-400); padding: 20px 16px !important; font-size: var(--text-sm); }
.ffd-th-hint        { font-weight: 400; font-size: var(--text-2xs); color: var(--n-400); }
.ffd-col-fill       { width: 120px; }
.ffd-col-req        { width: 50px; }
.ffd-col-acts       { width: 130px; }
.ffd-select         { height: 26px !important; padding: 2px 6px !important; font-size: var(--text-xs) !important; min-width: 0; }
.ffd-req-label      { justify-content: flex-start; }
.ffd-unmapped-note  { color: var(--n-400); font-size: var(--text-xs); }
.ffd-disabled       { opacity: .4; }

/* Framework columns merged table */
.ffd-fwcols-table th,
.ffd-fwcols-table td { font-size: var(--text-xs); padding: 8px 10px; vertical-align: top; }
.ffd-fwcols-table th { background: var(--n-50); font-weight: 700; color: var(--n-600); }
.ffd-fwcol-row td { border-bottom: 1px solid var(--n-100); }
.ffd-fwcol-row--unmapped td { background: var(--n-25, var(--n-50)); }
.ffd-fwcol-name  { width: 150px; }
.ffd-fwcol-opts  { width: 260px; }
.ffd-fwcol-panel { }
.ffd-fwcol-acts  { width: 120px; vertical-align: middle !important; text-align: right; }

/* Panel config mini-grid */
.ffd-panel-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.ffd-panel-field { display: flex; flex-direction: column; gap: 2px; }
.ffd-panel-field--full { grid-column: 1 / -1; }
.ffd-panel-field--req { justify-content: flex-end; align-items: flex-start; }
.ffd-panel-lbl   { font-size: var(--text-2xs); font-weight: 600; color: var(--n-400); text-transform: uppercase; letter-spacing: .04em; }
.ffd-panel-field input[type="checkbox"] { margin-top: 4px; width: 14px; height: 14px; cursor: pointer; }

/* Unmapped state */
.ffd-unmapped-state  { display: flex; flex-direction: column; gap: 8px; }
.ffd-unmapped-state .ffd-unmapped-note { font-style: italic; }
.ffd-map-row         { display: flex; align-items: center; gap: 6px; }
.ffd-map-row .ffd-panel-lbl { white-space: nowrap; }

.ffd-clear-btn { font-size: var(--text-2xs) !important; padding: 1px 6px !important; margin-top: 4px; height: auto !important; }

/* Add-field modal grid */
.ffd-add-grid       { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ffd-add-full       { grid-column: 1 / -1; }
.ffd-add-req-row    { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.ffd-bulk-tbl       { width: 100%; margin: 0; }
.ffd-bulk-tbl td    { padding: 6px 8px; vertical-align: middle; }
.ffd-bulk-tbl .ffd-inp { font-size: var(--text-sm); padding: 4px 6px; }

/* ── Strip field selector (ref / assessor / SO tabs) ─────────────────────── */

/* ── Strip settings panels ─────────────────────────────────────────────── */

/* Preview bar */
.fws-strip-preview {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--n-100);
  background: var(--n-25, var(--n-50));
}
.fws-strip-preview-label {
  font-size: var(--text-xs); font-weight: 600; color: var(--n-500);
  white-space: nowrap; padding-top: 3px;
}
.fws-strip-preview-pills {
  display: flex; flex-wrap: wrap; gap: 4px; flex: 1;
}
.fws-strip-preview-pill {
  display: inline-block; padding: 2px 8px;
  font-size: var(--text-xs); font-weight: 500;
  background: var(--brand-pale); color: var(--brand);
  border: 1px solid var(--brand-muted); border-radius: var(--r-pill);
}
.fws-strip-preview-pill--fixed {
  background: var(--n-100); color: var(--n-600); border-color: var(--n-200);
}
.fws-strip-preview-empty {
  font-size: var(--text-xs); color: var(--n-400); font-style: italic; padding-top: 2px;
}

/* Checkbox body */
.fws-strip-body { padding: 8px 0 0; }

/* Two-column group card */
.fws-strip-group {
  margin: 8px 16px 0;
  border: 1px solid var(--n-150, var(--n-200)); border-radius: var(--r-base);
  overflow: hidden;
}
.fws-strip-group + .fws-strip-group { margin-top: 8px; }
.fws-strip-group-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px;
  background: var(--n-50); border-bottom: 1px solid var(--n-150, var(--n-200));
}
.fws-strip-group-title {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--n-600);
}
.fws-strip-group-hint {
  font-size: var(--text-xs); color: var(--n-400);
}
.fws-strip-checks   {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; padding: 6px 8px 8px;
}
.fws-strip-check    {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: var(--r-sm, var(--r-base));
  font-size: var(--text-sm); color: var(--n-700);
  cursor: pointer; user-select: none;
  transition: background var(--t-fast);
}
.fws-strip-check:hover:not(.fws-strip-check--fixed) { background: var(--n-50); }
.fws-strip-check--fixed { cursor: default; color: var(--n-500); }
.fws-strip-check input[type="checkbox"] { accent-color: var(--brand); cursor: pointer; flex-shrink: 0; }
.fws-strip-check--fixed input[type="checkbox"] { cursor: default; }
.fws-strip-fixed-badge {
  margin-left: auto; font-size: var(--text-2xs); font-weight: 600;
  color: var(--n-400); background: var(--n-100); border-radius: var(--r-pill);
  padding: 1px 5px; white-space: nowrap;
}

/* Footer */
.fws-strip-footer   {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; margin-top: 12px;
  border-top: 1px solid var(--n-100); background: var(--n-50);
}
.fws-strip-footer-note {
  margin-left: auto;
  font-size: var(--text-xs); color: var(--n-400);
}

/* ── Pagination bar ──────────────────────────────────────────────────────── */

.va-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 20px; border-top: 1px solid var(--n-100); background: var(--n-50);
  flex-wrap: wrap;
}
.va-pager-btn {
  padding: 5px 14px; font-size: var(--text-sm); font-weight: 600;
  border: 1.5px solid var(--n-200); border-radius: var(--r-pill);
  background: var(--n-0); color: var(--n-600); cursor: pointer;
  font-family: inherit; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.va-pager-btn:hover:not(:disabled) { background: var(--brand-light); border-color: var(--brand-muted); color: var(--brand); }
.va-pager-btn:disabled { opacity: .4; cursor: default; }
.va-pager-info { font-size: var(--text-sm); color: var(--n-500); flex: 1; text-align: center; }

/* ── Action buttons ──────────────────────────────────────────────────────── */

.va-btn-edit, .va-btn-del, .va-btn-neutral {
  padding: 4px 12px; font-size: var(--text-xs); font-weight: 600;
  border-radius: var(--r-sm); cursor: pointer; font-family: inherit;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.va-btn-edit {
  border: 1.5px solid var(--n-200); background: var(--n-0); color: var(--n-600);
}
.va-btn-edit:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.va-btn-del {
  border: 1px solid var(--danger-border); background: var(--danger-light); color: var(--danger);
}
.va-btn-del:hover { background: var(--danger-light); border-color: var(--danger); }
.va-btn-neutral {
  border: 1.5px solid var(--n-200); background: var(--n-0); color: var(--n-600);
}
.va-btn-neutral:hover { background: var(--n-100); border-color: var(--n-300); }

/* ── Badges ──────────────────────────────────────────────────────────────── */

.va-badge {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: var(--r-pill);
  font-size: var(--text-2xs); font-weight: 700; margin-left: 6px;
  letter-spacing: .04em; vertical-align: middle; white-space: nowrap;
}
td > .va-badge:only-child { margin-left: 0; }
.va-badge--sys      { background: var(--n-100); color: var(--n-600); }
.va-badge--custom   { background: var(--brand-light); color: var(--brand-active); border: 1px solid var(--brand-muted); }
.va-badge--confirmed{
  background: var(--success-light); color: var(--success-dark);
  border: 1px solid var(--success-border);
}
.va-badge--draft    {
  background: var(--warning-light); color: var(--warning-dark);
  border: 1px solid var(--warning-border);
}
.va-badge--type     { background: var(--purple-light); color: #6b21a8; border: 1px solid var(--purple-border); }

/* ── Role cards ──────────────────────────────────────────────────────────── */

.va-role-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid var(--n-200);
}
.va-role-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: var(--n-0);
  border: 1px solid var(--n-200); border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.va-role-card:hover { border-color: var(--brand-muted); box-shadow: var(--shadow-brand-md); }
.va-role-card-icon {
  width: 40px; height: 40px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
  background: var(--n-50); border: 1px solid var(--n-200);
}
.va-role-card-body { flex: 1; min-width: 0; }
.va-role-card-name { font-size: var(--text-md); font-weight: 700; color: var(--n-900); }
.va-role-card-count { font-size: var(--text-xs); color: var(--n-500); margin-top: 3px; }

/* ── Permissions matrix ──────────────────────────────────────────────────── */

.va-perm-check-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--n-100);
  font-size: var(--text-md); color: var(--n-800);
  transition: background var(--t-fast); cursor: pointer;
}
.va-perm-check-row:hover { background: var(--n-50); }
.va-perm-check-row:last-child { border-bottom: none; }
.va-perm-chk { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; flex-shrink: 0; }

/* ── Light tab pills (va-tab) — for white/light toolbar backgrounds ─────── */

.va-tab {
  padding: 5px 14px; font-size: var(--text-sm); font-weight: 600;
  border: 1.5px solid var(--n-200); border-radius: var(--r-pill);
  cursor: pointer; background: var(--n-0); color: var(--n-500);
  font-family: inherit; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.va-tab:hover { background: var(--n-50); border-color: var(--n-300); color: var(--n-700); }
.va-tab.va-tab--active {
  background: var(--brand-light); border-color: var(--brand-muted);
  color: var(--brand); font-weight: 700;
}

/* ── Locked / disabled state ─────────────────────────────────────────────── */

.va-locked {
  font-size: var(--text-sm); color: var(--n-400); font-style: italic; padding: 2px 6px;
}

/* ── Color swatch (classification panel) ─────────────────────────────────── */

.va-color-swatch {
  width: 16px; height: 16px; border-radius: var(--r-xs);
  border: 1px solid rgba(0,0,0,.12); display: inline-block;
  vertical-align: middle; flex-shrink: 0;
}
.va-color-swatch--none { background: var(--n-200); border-style: dashed; }

/* ── Inactive row ─────────────────────────────────────────────────────────── */

.va-row--inactive { opacity: .5; }

.btn-danger-outline {
  padding: 5px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--danger-border);
  background: var(--n-0); color: var(--danger); font-size: var(--text-base); font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background var(--t-fast);
}
.btn-danger-outline:hover { background: var(--danger-light); }

/* ── bil-* — Billing section ─────────────────────────────────────────────── */
.bil-unconfigured {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 40px 24px; text-align: center;
}
.bil-unconfigured-icon { font-size: 2.5rem; }
.bil-unconfigured-title { font-size: var(--text-lg); font-weight: 700; color: var(--n-700); }
.bil-unconfigured-sub { font-size: var(--text-sm); color: var(--n-500); max-width: 520px; line-height: 1.6; }
.bil-unconfigured-sub code {
  font-family: 'SF Mono','Fira Code',monospace; font-size: 0.8em;
  background: var(--n-100); padding: 1px 5px; border-radius: 4px;
}
.bil-status-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.bil-status-badge {
  display: inline-block; padding: 3px 12px; border-radius: 20px;
  font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.02em;
}
.bil-plan-label { font-size: var(--text-base); font-weight: 600; color: var(--n-700); }
.bil-seats-label { font-size: var(--text-sm); color: var(--n-500); }
.bil-note { margin: 4px 0 0; font-size: var(--text-sm); color: var(--n-500); }
.bil-warn {
  margin-top: 12px; padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--warning-light); color: var(--warning); font-size: var(--text-sm); font-weight: 500;
}
.bil-plans-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px;
}
.bil-plan-card {
  border: 1.5px solid var(--n-200); border-radius: var(--r-md);
  padding: 18px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.bil-plan-card:hover { border-color: var(--brand-border); box-shadow: var(--shadow-sm); }
.bil-plan-card--active { border-color: var(--brand-active); background: var(--brand-soft); }
.bil-plan-name { font-size: var(--text-base); font-weight: 700; color: var(--n-800); }
.bil-plan-seats { font-size: var(--text-sm); color: var(--n-500); }
.bil-plan-price { font-size: var(--text-lg); font-weight: 700; color: var(--n-700); }
.bil-plan-badge {
  display: inline-block; padding: 2px 10px; border-radius: 12px;
  font-size: var(--text-xs); font-weight: 700; align-self: flex-start;
}
.bil-plan-btn { align-self: flex-start; margin-top: auto; }
.btn-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--brand-active); font-size: inherit; font-family: inherit;
  text-decoration: underline; font-weight: 600;
}
.btn-link:hover { color: var(--brand-hover); }

/* ─── Snapshot schedule selector (snap-*) ──────────────────────────────── */
.snap-header-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.snap-schedule-wrap {
  display: flex; align-items: center; gap: 6px;
}
.snap-schedule-label {
  font-size: var(--text-sm); color: var(--n-500); white-space: nowrap;
}
.snap-schedule-select {
  font-size: var(--text-sm); padding: 4px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--n-300); background: var(--n-0); color: var(--n-700);
  cursor: pointer;
}
.snap-schedule-select:focus { outline: none; border-color: var(--brand-border); }

/* ─── Inline AI Advisor tab (ila-*) ──────────────────────────────────── */
.ila-wrap {
  display: flex; flex-direction: column; height: 100%; min-height: 0;
}
.ila-messages {
  flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px;
}
.ila-msg { display: flex; flex-direction: column; gap: 3px; }
.ila-msg--user { align-items: flex-end; }
.ila-msg--assistant { align-items: flex-start; }
.ila-msg-role {
  font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--n-400);
}
.ila-msg--user .ila-msg-role { color: var(--brand-active); }
.ila-msg-text {
  max-width: 90%; padding: 8px 12px; border-radius: var(--r-md);
  font-size: var(--text-sm); line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.ila-msg--user .ila-msg-text {
  background: var(--brand-soft); color: var(--n-800); border-bottom-right-radius: 4px;
}
.ila-msg--assistant .ila-msg-text {
  background: var(--n-100); color: var(--n-800); border-bottom-left-radius: 4px;
}
.ila-thinking { color: var(--n-500); font-style: italic; }
.ila-input-row {
  display: flex; gap: 6px; padding: 8px 10px;
  border-top: 1px solid var(--n-200); flex-shrink: 0;
}
.ila-input {
  flex: 1; resize: none; border: 1px solid var(--n-300); border-radius: var(--r-sm);
  padding: 6px 10px; font-size: var(--text-sm); font-family: inherit; line-height: 1.4;
}
.ila-input:focus { outline: none; border-color: var(--brand-border); }
.ila-not-configured {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px; text-align: center;
}
.ila-nc-icon { font-size: 28px; }
.ila-nc-title { font-size: var(--text-base); font-weight: 700; color: var(--n-700); }
.ila-nc-body { font-size: var(--text-sm); color: var(--n-500); max-width: 320px; line-height: 1.5; }

/* ─── Session expiry warning banner ──────────────────────────────────── */
.session-expiry-banner {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--n-800); color: var(--n-0); padding: 10px 18px;
  border-radius: var(--r-md); display: flex; align-items: center; gap: 12px;
  font-size: var(--text-sm); font-weight: 500; z-index: 9990;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  animation: _slideUp 0.25s ease;
}
@keyframes _slideUp { from { opacity:0; transform:translateX(-50%) translateY(12px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }

/* ─── POAM completion styles ─────────────────────────────────────────── */
.poam-completion-rate {
  display: inline-block; padding: 2px 10px; border-radius: 12px;
  font-size: var(--text-xs); font-weight: 700;
  background: var(--brand-soft); color: var(--brand-active);
  margin-left: 8px;
}
.poam-row-done td { opacity: 0.65; }
.poam-done-stamp { font-size: var(--text-2xs); color: var(--success); font-weight: 600; }
.btn-success-sm {
  font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--success); background: transparent; color: var(--success);
  cursor: pointer; font-weight: 600;
}
.btn-success-sm:hover { background: var(--success); color: var(--n-0); }

/* ─── System Owner exclusive panel (il-layout--so-only) ─────────────── */

/* The SO-only layout stacks ref-col on top then the scrollable content below.
   The parent chain is: cio-body (flex col, flex:1, min-h:0, overflow:hidden)
   → ctrl-inline-panel (padding:0) → il-layout (flex col).
   We need il-layout--so-only to fill the available height so the right col
   can scroll internally. */
.il-layout--so-only {
  flex: 1;           /* fill cio-body */
  min-height: 0;     /* allow shrink in flex chain */
  overflow: hidden;  /* clip; inner column scrolls */
}

/* Right column: the scrollable content area */
.il-so-right-col {
  flex: 1;
  min-height: 0;     /* critical — without this overflow-y:auto collapses */
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--n-0);
  -webkit-overflow-scrolling: touch;
}

/* ── Shared section label used in intent / risk / how blocks ──────────── */
.il-so-section-label {
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 6px;
  color: var(--n-500);
}
.il-so-section-label--risk { color: var(--n-500); }
.il-so-section-label--how  { color: var(--n-500); }

/* ── Intent block ─────────────────────────────────────────────────────── */
.il-so-intent-block {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: 10px;
  padding: 12px 14px;
  flex-shrink: 0;
}
.il-so-intent-text {
  font-size: var(--text-sm); color: var(--n-900); line-height: 1.65;
}

/* ── Risk context block ───────────────────────────────────────────────── */
.il-so-risk-block {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: 10px;
  padding: 12px 14px;
  flex-shrink: 0;
}
.il-so-risk-text {
  font-size: 12.5px; color: var(--n-800); line-height: 1.65;
}

/* ── How to address block ─────────────────────────────────────────────── */
.il-so-how-block {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: 10px;
  padding: 12px 14px;
  flex-shrink: 0;
}
.il-so-how-text {
  font-size: 12.5px; color: var(--n-800); line-height: 1.65;
}

/* ── Card wrapper shared by examples and fields blocks ─────────────────── */
.il-so-examples-block,
.il-so-fields-block {
  border: 1px solid var(--n-200);
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--n-0);
}

/* ── SO input fields block ─────────────────────────────────────────────── */
.il-so-fields-block .il-section-body { padding: 10px 14px 6px; }

/* ── Guidance column (SO login — left slot) ─────────────────────────────── */
/* The guidance column reuses .il-assessor-section styling but its body needs
   to scroll and stack the intent/checklist/examples cards vertically */
.il-so-guidance-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px 14px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
}
/* Remove default section-body overflow restriction for this column */
.il-so-guidance-col .il-section-body {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}

/* ── Vendor admin: Generate Guidance button ─────────────────────────────── */
.va-guidance-btn { color: var(--brand); border-color: var(--brand-border); }
.va-guidance-btn:hover { background: var(--brand-soft); }

/* ═══════════════════════════════════════════════════════════════════════
   DESIGN UPLIFT — Session 17
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Controls table empty state uplift ──────────────────────────────── */
.es-block {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 64px 32px; text-align: center; animation: fadeIn .25s ease;
}
.es-icon-wrap {
  width: 64px; height: 64px; border-radius: 18px;
  background: var(--brand-light); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 4px;
  box-shadow: 0 0 0 8px rgba(99,102,241,.06);
}
.es-icon  { font-size: 40px; line-height: 1; }
.es-title { font-size: 16px; font-weight: 700; color: var(--n-800); }
.es-sub   { font-size: var(--text-sm); color: var(--n-400); max-width: 380px; line-height: 1.65; }
.es-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

/* ─── Skeleton loading ────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton {
  display: inline-block;
  background: linear-gradient(90deg, var(--n-100) 25%, var(--n-50) 50%, var(--n-100) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
.skeleton-text  { height: 12px; width: 80%; }
.skeleton-title { height: 18px; width: 55%; }
.skeleton-block { height: 80px; width: 100%; border-radius: var(--r-md); }
.skeleton-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.skeleton-badge { height: 20px; width: 64px; border-radius: var(--r-pill); }

/* Skeleton card rows */
.skel-card-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--n-100);
}
.skel-card-row:last-child { border-bottom: none; }
.skel-card-body { flex: 1; display: flex; flex-direction: column; gap: 7px; }

/* ─── Empty States ────────────────────────────────────────────────────── */
.cs-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 64px 32px; text-align: center;
  gap: 12px;
}
.cs-empty-icon {
  width: 64px; height: 64px; border-radius: 18px;
  background: var(--brand-light); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin-bottom: 4px;
  box-shadow: 0 0 0 8px rgba(99,102,241,.06);
}
.cs-empty-icon--muted {
  background: var(--n-100); color: var(--n-400);
  box-shadow: 0 0 0 8px rgba(100,116,139,.04);
}
.cs-empty-icon--success {
  background: var(--success-light); color: var(--success);
  box-shadow: 0 0 0 8px rgba(22,163,74,.06);
}
.cs-empty-title {
  font-size: 16px; font-weight: 700; color: var(--n-800); line-height: 1.3;
}
.cs-empty-desc {
  font-size: var(--text-sm); color: var(--n-500); max-width: 380px; line-height: 1.6; margin: 0;
}
.cs-empty-actions {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px;
}

/* Inline empty (inside table cells, small panels) */
.empty-state-inline {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; color: var(--n-400); font-size: var(--text-sm);
}
.empty-state-icon { font-size: 16px; flex-shrink: 0; }
.empty-state-msg { flex: 1; line-height: 1.5; }

/* ─── Scope bar uplift ────────────────────────────────────────────────── */
.scope-bar {
  display: flex; align-items: center; gap: 0;
  height: 36px; flex-shrink: 0;
  font-size: var(--text-xs); border-bottom: 1px solid var(--n-100);
  background: var(--n-0);
  transition: background .2s, border-color .2s;
  overflow: hidden;
}
.scope-bar--assessment {
  background: var(--brand-light); border-bottom-color: var(--brand-muted);
}
.scope-bar--admin {
  background: var(--n-800); border-bottom-color: rgba(255,255,255,.08);
}
.scope-bar--workspace {
  background: var(--n-0); border-bottom-color: var(--n-100);
}
.scope-bar-segment {
  display: flex; align-items: center; height: 100%; padding: 0 16px; gap: 6px;
  font-size: var(--text-2xs); white-space: nowrap;
}
.scope-bar-segment + .scope-bar-segment { border-left: 1px solid rgba(0,0,0,.06); }
.scope-bar--admin .scope-bar-segment + .scope-bar-segment { border-left-color: rgba(255,255,255,.08); }
.scope-bar-icon {
  font-size: var(--text-sm); flex-shrink: 0;
}
.scope-bar-context {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--n-500);
}
.scope-bar--assessment .scope-bar-context { color: var(--brand); }
.scope-bar--admin .scope-bar-context { color: rgba(255,255,255,.5); }
.scope-bar-name {
  font-size: var(--text-xs); color: var(--n-800); font-weight: 600; line-height: 1;
  max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scope-bar--assessment .scope-bar-name { color: var(--brand-active); }
.scope-bar--admin .scope-bar-name { color: rgba(255,255,255,.85); }
.scope-bar-name:not(:empty)::before {
  content: '›'; margin-right: 6px; color: var(--n-400); font-weight: 400;
}
.scope-bar--assessment .scope-bar-name:not(:empty)::before { color: var(--brand-pale); }
.scope-bar--admin .scope-bar-name:not(:empty)::before { color: rgba(255,255,255,.25); }
/* Right-aligned actions in scope bar */
.scope-bar-actions {
  margin-left: auto; display: flex; align-items: center; gap: 6px; padding-right: 12px;
}
.scope-bar-pill {
  font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: var(--r-pill);
  background: var(--brand-soft); color: var(--brand-active);
  border: 1px solid var(--brand-muted); white-space: nowrap;
}
.scope-bar--assessment .scope-bar-pill { background: rgba(255,255,255,.5); border-color: var(--brand-pale); }

/* ─── Home Hero uplift ────────────────────────────────────────────────── */
.home-hero {
  background: linear-gradient(135deg, var(--n-900) 0%, var(--brand-depth) 60%, #1a1150 100%);
  border-bottom: 1px solid rgba(99,102,241,.2);
  padding: 28px 32px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-shrink: 0; position: relative; overflow: hidden;
}
.home-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(99,102,241,.12) 0%, transparent 65%);
  pointer-events: none;
}
.home-hero-inner { min-width: 0; position: relative; z-index: 1; }
.home-hero-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--brand); margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.home-hero-eyebrow::before {
  content: ''; width: 18px; height: 2px;
  background: var(--brand); border-radius: 2px; flex-shrink: 0;
}
.home-hero-title {
  font-size: 28px; font-weight: 900; color: var(--n-900);
  letter-spacing: -.03em; line-height: 1.1;
}
.home-hero-title span { color: var(--brand); }
.home-hero-meta { font-size: var(--text-sm); color: var(--n-500); margin-top: 6px; }
.home-hero-overdue { color: var(--danger); font-weight: 700; }
.home-hero-meta { font-size: var(--text-sm); color: var(--n-500); margin-top: 8px; }
.home-hero-overdue { color: var(--danger); font-weight: 700; }
.home-hero-stats {
  display: flex; gap: 20px; margin-top: 14px; flex-wrap: wrap;
}
.home-hero-stat {
  display: flex; flex-direction: column; gap: 1px;
}
.home-hero-stat-num {
  font-size: 22px; font-weight: 800; color: var(--n-800); line-height: 1;
  letter-spacing: -.02em;
}
.home-hero-stat-num--brand   { color: var(--brand); }
.home-hero-stat-num--success { color: var(--success); }
.home-hero-stat-num--warning { color: var(--warning); }
.home-hero-stat-num--danger  { color: var(--danger); }
.home-hero-stat-lbl {
  font-size: 10px; color: var(--n-500); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}
.home-dash-actions { position: relative; z-index: 1; flex-shrink: 0; }

/* ─── Assessment card uplift ──────────────────────────────────────────── */
.assess-card {
  background: var(--n-0); border: 1.5px solid var(--n-200); border-radius: var(--r-xl);
  display: flex; flex-direction: column; overflow: hidden;
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
  cursor: pointer; position: relative;
}
/* Subtle coloured top accent line */
.assess-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--n-200);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  transition: background var(--t-base);
}
.assess-card:hover::before { background: var(--brand-mid); }
.assess-card-active::before { background: var(--brand) !important; }
.assess-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--n-300); }
.assess-card-active { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.assess-card-active:hover { box-shadow: var(--shadow-brand-md), 0 0 0 3px rgba(99,102,241,.14); }
.assess-fw-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: var(--r-pill); letter-spacing: .3px;
  background: var(--brand-soft); color: var(--brand-active); border: 1px solid var(--brand-muted);
}
.assess-rag-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  display: inline-block;
}
.assess-rag-green  { background: var(--success); }
.assess-rag-amber  { background: var(--warning); }
.assess-rag-red    { background: var(--danger); }
.assess-rag-grey   { background: var(--n-300); }

/* ─── Home stat tiles uplift ──────────────────────────────────────────── */
.home-stat {
  background: var(--n-0); border: 1px solid var(--n-200);
  border-radius: var(--r-lg); padding: 18px 20px;
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
  position: relative; overflow: hidden;
}
.home-stat::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(99,102,241,.03) 100%);
  pointer-events: none;
}
.home-stat:hover { box-shadow: var(--shadow-sm); border-color: var(--n-300); }
.home-stat-val { font-size: 30px; font-weight: 800; color: var(--n-800); line-height: 1; }
.home-stat-lbl { font-size: var(--text-2xs); color: var(--n-400); margin-top: 5px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.home-stat-icon {
  position: absolute; top: 14px; right: 16px;
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: var(--text-base);
  background: var(--brand-light); color: var(--brand); opacity: .7;
}
.home-stat-warn .home-stat-val { color: var(--warning); }
.home-stat-warn .home-stat-icon { background: var(--warning-light); color: var(--warning); }
.home-count-warn { color: var(--warning); }

/* ─── Badge / status chip system (uplift) ────────────────────────────── */
.chip-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: var(--r-pill); font-size: var(--text-2xs);
  font-weight: 600; white-space: nowrap; line-height: 1.4;
}
.chip-pill--brand   { background: var(--brand-light); color: var(--brand-active); border: 1px solid var(--brand-muted); }
.chip-pill--success { background: var(--success-light); color: var(--success); border: 1px solid var(--success-border); }
.chip-pill--warning { background: var(--warning-light); color: var(--warning); border: 1px solid var(--warning-border); }
.chip-pill--danger  { background: var(--danger-light); color: var(--danger); border: 1px solid var(--danger-border); }
.chip-pill--muted   { background: var(--n-100); color: var(--n-500); border: 1px solid var(--n-200); }
.chip-pill--purple  { background: var(--purple-light); color: var(--purple); border: 1px solid var(--purple-border); }

/* ─── Metric card uplift ──────────────────────────────────────────────── */
.metric-card {
  padding: var(--sp-5); background: var(--n-0);
  border-radius: var(--r-lg); border: 1px solid var(--n-200);
  box-shadow: var(--shadow-xs); transition: box-shadow var(--t-base), border-color var(--t-base);
  position: relative; overflow: hidden;
}
.metric-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: transparent; transition: background var(--t-base);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.metric-card:hover { box-shadow: var(--shadow-sm); border-color: var(--brand-muted); }
.metric-card:hover::after { background: var(--brand-mid); }
.metric-value { font-size: 32px; font-weight: 900; color: var(--n-800); line-height: 1; letter-spacing: -.02em; }

/* ─── Section tab bar uplift ──────────────────────────────────────────── */
.section-tabs {
  display: flex; gap: 0; border-bottom: 2px solid rgba(255,255,255,.08);
  background: var(--hero-bg-start); flex-shrink: 0; overflow-x: auto;
  padding: 0 24px; scrollbar-width: none;
}
.section-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 18px; font-size: var(--text-sm); font-weight: 500; color: var(--hero-muted);
  border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer;
  white-space: nowrap; transition: color var(--t-base), border-color var(--t-base);
  background: none; border-left: none; border-right: none; border-top: none;
}
.section-tab:hover { color: var(--n-150); }
.section-tab.active { color: var(--hero-text); border-bottom-color: var(--brand); font-weight: 700; }
.section-tab-badge {
  font-size: 10px; font-weight: 700; background: rgba(255,255,255,.12); color: var(--n-150);
  border-radius: var(--r-pill); padding: 1px 6px; min-width: 18px; text-align: center;
}

.assessment-meta {
  display: flex; gap: var(--sp-4); margin-top: 4px;
  font-size: var(--text-sm); color: var(--n-500); flex-wrap: wrap;
}
.assessment-meta span { display: flex; align-items: center; gap: 4px; }
.header-actions { display: flex; gap: var(--sp-2); align-items: center; flex-shrink: 0; }
/* Framework version badge in overview header */
.ov-fw-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--brand-light); border: 1px solid var(--brand-border);
  color: var(--brand); font-size: var(--text-2xs); font-weight: 600; white-space: nowrap;
}
.ov-fw-ver {
  background: var(--brand-pale); border-radius: 3px;
  padding: 0 4px; font-size: 10px; font-weight: 700; color: var(--brand-active);
}

/* ─── Card / modal / section headers — dark panel style ──────────────── */
.card-header,
.modal-header,
.cs-card-header,
.cs-chart-header,
.va-panel-toolbar,
.va-panel-section-title,
.tr-section-header,
.col-toggle-header,
.gi-card-header {
  background: var(--hero-bg);
  border-bottom-color: rgba(255,255,255,.08);
  position: relative; overflow: hidden;
}
.card-header::before,
.modal-header::before,
.cs-card-header::before,
.cs-chart-header::before,
.tr-section-header::before,
.gi-card-header::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-mid, var(--brand-mid)));
}
/* Text inside dark headers */
.card-header h2, .card-header h3, .card-header h4,
.modal-header h3, .modal-header h4,
.cs-card-header h3, .cs-card-header h4,
.cs-chart-header h3, .cs-chart-header h4,
.tr-section-header .tr-section-title,
.gi-card-header .gi-card-title {
  color: var(--hero-text);
}
.card-header .card-sub,
.modal-subtitle,
.cs-card-header .cs-card-sub,
.gi-card-header .gi-card-sub {
  color: var(--hero-muted);
}
/* Stat count badge needs to stay readable on dark */
.tr-section-count {
  background: rgba(255,255,255,.12);
  color: var(--n-150);
}

/* ─── Controls table uplift ───────────────────────────────────────────── */
.controls-table thead tr th {
  background: linear-gradient(to bottom, var(--n-50), #eff1fb);
  border-bottom: 2px solid var(--brand-border);
  color: var(--n-600); font-size: var(--text-2xs);
}
.controls-table tbody tr:hover { background: var(--purple-light); }
.fw-ctrl-id {
  font-family: 'SF Mono', 'Fira Code', monospace; font-size: var(--text-2xs);
  color: var(--brand-active); font-weight: 700;
  background: var(--brand-light); padding: 2px 6px;
  border-radius: 4px; white-space: nowrap;
  border: 1px solid var(--brand-muted);
}

/* ─── Toast uplift ────────────────────────────────────────────────────── */
.app-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--n-900); color: var(--n-50);
  padding: 11px 24px; border-radius: var(--r-pill);
  font-size: var(--text-sm); font-weight: 500;
  opacity: 0; transition: opacity .24s ease, transform .24s cubic-bezier(.22,1,.36,1);
  pointer-events: none; z-index: 9999; white-space: normal; max-width: 480px; text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.3); letter-spacing: .01em;
  display: flex; align-items: center; gap: 8px;
}
.app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.app-toast--success { background: var(--success-dark); box-shadow: 0 8px 24px rgba(22,101,52,.35); }
.app-toast--error   { background: var(--danger-dark); box-shadow: 0 8px 24px rgba(185,28,28,.35); }
.app-toast--warning { background: var(--warning-dark); box-shadow: 0 8px 24px rgba(146,64,14,.3); }


/* ─── Modal uplift ────────────────────────────────────────────────────── */
.modal, .modal-box {
  background: var(--n-0); border-radius: var(--r-xl);
  padding: var(--sp-6); width: 100%; max-width: 480px;
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 24px 80px rgba(15,23,42,.28), 0 2px 8px rgba(15,23,42,.06);
  animation: modal-in .2s cubic-bezier(.22,1,.36,1);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 10px 10px 0 0;
  padding: 14px 20px; margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-5);
  position: relative; overflow: hidden;
}
.modal-header::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-mid, var(--brand-mid)));
}
.modal-header h3 { font-size: var(--text-md); font-weight: 800; color: var(--hero-text); margin: 0; }

/* ─── Landing page hero (light theme) ─────────────────────────────────── */
.lp-hero-h1 {
  font-size: 46px; line-height: 1.05; font-weight: 900;
  color: var(--n-900); margin-bottom: 18px; letter-spacing: -.03em;
}
.lp-hero-sub {
  font-size: 16px; color: var(--n-600); line-height: 1.7; margin-bottom: 28px;
}
.lp-gradient-text {
  background: linear-gradient(135deg, var(--brand-mid), var(--purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Stats strip */
.lp-stat-num { font-size: 40px; font-weight: 900; color: var(--n-900); line-height: 1; letter-spacing: -.03em; }
.lp-stat-label { font-size: var(--text-xs); color: var(--n-500); margin-top: 5px; text-align: center; }

/* Features section card uplift */
.lp-feat-card {
  background: var(--n-0); border: 1px solid var(--n-150); border-radius: 14px; padding: 20px;
  transition: box-shadow .2s, border-color .2s, transform .2s;
  position: relative; overflow: hidden;
}
.lp-feat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand-mid), var(--purple));
  opacity: 0; transition: opacity .2s;
}
.lp-feat-card:hover { border-color: var(--brand-muted); box-shadow: 0 8px 32px rgba(99,102,241,.1); transform: translateY(-2px); }
.lp-feat-card:hover::before { opacity: 1; }
.lp-feat-card h3 { font-size: var(--text-md); font-weight: 700; color: var(--n-800); margin-bottom: 7px; }
.lp-feat-card p  { font-size: var(--text-sm); color: var(--n-500); line-height: 1.6; }

/* LP CTA button uplift */
.lp-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--brand), var(--purple));
  color: var(--n-0); border: none; padding: 13px 26px; border-radius: 12px;
  font-size: var(--text-md); font-weight: 700; cursor: pointer;
  transition: opacity .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(99,102,241,.45);
  letter-spacing: -.01em;
}
.lp-btn-primary:hover { opacity: .93; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(99,102,241,.55); }
.lp-btn-lg { padding: 15px 32px; font-size: 16px; border-radius: 14px; }

/* Nav CTA */
.lp-btn-cta {
  background: linear-gradient(135deg, var(--brand), var(--purple));
  color: var(--n-0); border: none; padding: 8px 20px;
  border-radius: 8px; font-size: var(--text-sm); font-weight: 700; cursor: pointer;
  transition: opacity .2s, transform .15s;
  box-shadow: 0 2px 12px rgba(99,102,241,.4);
}
.lp-btn-cta:hover { opacity: .9; transform: translateY(-1px); }

/* Section h2 uplift on light background */
.lp-features .lp-section-h2,
.lp-pain .lp-section-h2,
.lp-how .lp-section-h2,
.lp-testimonials .lp-section-h2,
.lp-workflow .lp-section-h2 {
  font-size: 32px; font-weight: 900; letter-spacing: -.025em;
}

/* How it works step uplift */
.lp-step {
  flex: 1; background: var(--n-0); border: 1px solid var(--n-150); border-radius: 18px;
  padding: 28px 24px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  position: relative; overflow: hidden;
}
.lp-step:hover {
  border-color: var(--brand-muted);
  box-shadow: 0 8px 28px rgba(99,102,241,.1);
  transform: translateY(-3px);
}
.lp-step-num {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, var(--brand), var(--purple));
  color: var(--n-0); font-weight: 800; font-size: var(--text-md);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(99,102,241,.3);
}
.lp-step-body h4 { font-size: 16px; font-weight: 800; color: var(--n-800); margin-bottom: 8px; }
.lp-step-body p  { font-size: var(--text-sm); color: var(--n-500); line-height: 1.6; }

/* Footer tagline uplift */
.lp-footer-tagline { font-size: var(--text-sm); color: var(--n-600); margin: 8px 0 10px; line-height: 1.6; }

/* ─── Attention / info banner ─────────────────────────────────────────── */
.cs-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-radius: var(--r-md);
  font-size: var(--text-sm); line-height: 1.55;
}
.cs-banner--info    { background: var(--info-light); border: 1px solid var(--info-border); color: var(--brand-active); }
.cs-banner--success { background: var(--success-light); border: 1px solid var(--success-border); color: var(--success-dark); }
.cs-banner--warning { background: var(--warning-light); border: 1px solid var(--warning-border); color: var(--warning-dark); }
.cs-banner--danger  { background: var(--danger-light); border: 1px solid var(--danger-border); color: var(--danger-dark); }
.cs-banner-icon { font-size: var(--text-md); flex-shrink: 0; margin-top: 1px; }
.cs-banner-body { flex: 1; min-width: 0; }
.cs-banner-title { font-weight: 700; margin-bottom: 2px; }

/* ─── Risk heatmap cell sizing uplift ─────────────────────────────────── */
.risk-heat-cell {
  transition: transform .15s, box-shadow .15s;
  cursor: pointer;
}
.risk-heat-cell:hover {
  transform: scale(1.05); box-shadow: var(--shadow-sm); z-index: 1; position: relative;
}

/* ─── Pager controls uplift ───────────────────────────────────────────── */
.ctrl-pager {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 10px 16px; flex-wrap: wrap;
}
.ctrl-pager-btn {
  min-width: 30px; height: 30px; padding: 0 8px;
  border: 1px solid var(--n-200); border-radius: var(--r-sm);
  background: var(--n-0); color: var(--n-600);
  font-size: var(--text-xs); font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  font-family: inherit;
}
.ctrl-pager-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.ctrl-pager-btn.active { background: var(--brand); color: var(--n-0); border-color: var(--brand); font-weight: 700; }
.ctrl-pager-btn:disabled { opacity: .4; cursor: not-allowed; }
.ctrl-pager-info {
  font-size: var(--text-xs); color: var(--n-400); padding: 0 8px; white-space: nowrap;
}
.pag-info { font-size: var(--text-xs); color: var(--n-400); }
.pag-btns { display: flex; align-items: center; gap: 3px; }
.pag-ellipsis { font-size: var(--text-xs); color: var(--n-400); padding: 0 4px; }

/* ─── Scrollbar polish (webkit) ───────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--n-200); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--n-300); }
.sidebar ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); }
.sidebar ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }

/* ─── Focus ring (accessibility) ─────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm);
}

/* ─── Print cover page uplift (in printDocument()) ───────────────────── */
/* NOTE: The print cover is generated inline in app.js printDocument().
   These classes exist for reference; actual print styles live in app.js. */
.print-cover-brand-bar {
  background: var(--brand); height: 6px; margin-bottom: 32px; border-radius: 0;
}

/* ─── Transition smoothing ────────────────────────────────────────────── */
.sidebar-link, .btn-primary, .btn-outline, .btn-secondary, .btn-sm,
.assess-card, .home-stat, .metric-card, .lp-feat-card, .lp-step,
.va-step, .gl-chapter-card, .gi-card {
  will-change: transform;
}

/* ─── Typography utilities ────────────────────────────────────────────── */
.font-mono { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-balance  { text-wrap: balance; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }
.lh-tight  { line-height: 1.2; }
.lh-normal { line-height: 1.5; }
.lh-loose  { line-height: 1.7; }

/* ─── Micro-interaction utilities ─────────────────────────────────────── */
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
@keyframes pulse-soft { 0%,100% { opacity: 1; } 50% { opacity: .6; } }

.anim-fade-in     { animation: fadeIn .2s ease; }
.anim-fade-in-up  { animation: fadeInUp .25s cubic-bezier(.22,1,.36,1); }
.anim-scale-in    { animation: scaleIn .18s cubic-bezier(.22,1,.36,1); }
.anim-pulse-soft  { animation: pulse-soft 2s ease infinite; }

/* Card sections that render dynamically should animate in */
.main-content-inner > * { animation: fadeIn .18s ease; }

/* ─── Chart area shared improvements ──────────────────────────────────── */
.cs-chart-card {
  background: var(--n-0); border: 1px solid var(--n-200);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-base);
}
.cs-chart-card:hover { box-shadow: var(--shadow-sm); }

/* ─── Attachment upload zone uplift ───────────────────────────────────── */
.attach-upload-zone {
  border: 2px dashed var(--n-300); border-radius: 12px; margin-top: 12px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.attach-upload-zone:hover {
  border-color: var(--brand); background: var(--brand-light);
  box-shadow: 0 0 0 4px rgba(99,102,241,.06);
}
.attach-upload-label {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 24px; cursor: pointer; font-size: var(--text-sm); color: var(--n-500); text-align: center;
}
.attach-upload-icon {
  font-size: 28px; opacity: .6;
  transition: transform .2s, opacity .2s;
}
.attach-upload-zone:hover .attach-upload-icon { transform: translateY(-2px); opacity: 1; }
.attach-upload-hint { font-size: var(--text-2xs); color: var(--n-400); }

/* ─── Responsive tweaks (design uplift) ───────────────────────────────── */
@media (max-width: 1024px) {
  .main-header { padding: 16px 18px 14px; }
  .main-header h2 { font-size: 20px; }
  .home-hero { padding: 22px 20px 18px; }
  .home-hero-title { font-size: 24px; }
}
@media (max-width: 768px) {
  .main-header h2 { font-size: 18px; }
  .home-hero-title { font-size: 20px; }
  .home-hero-stats { gap: 14px; }
  .home-hero-stat-num { font-size: 18px; }
  .sw-header { padding: 20px 20px 18px; }
  .sw-footer { padding: 12px 20px 14px; }
  .lp-hero-h1 { font-size: 34px; }
}
@media (max-width: 480px) {
  .lp-hero-h1 { font-size: 28px; }
  .sw-welcome-grid { grid-template-columns: 1fr; }
  .sw-grid { grid-template-columns: 1fr; }
}
.va-guidance-btn--done { color: var(--success); border-color: var(--success-border); }

/* ─── Activity feed pager — align to upgraded pager system ──────────────── */
/* af-pager — aliased onto ctrl-pager system */
.af-pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ─── Closure grid — sign-off + snapshot side by side ───────────────────── */
.closure-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 0;
}
@media (max-width: 900px) { .closure-grid { grid-template-columns: 1fr; } }

/* ─── Sign-off card header uplift ────────────────────────────────────────── */
/* (clo-card-header already defined above with dark style) */

/* ─── Seat usage badge in Users header ───────────────────────────────────── */
.seat-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: rgba(165,180,252,.15); border: 1px solid rgba(165,180,252,.3);
  color: var(--brand-muted); font-size: var(--text-2xs); font-weight: 600; white-space: nowrap;
}
.seat-badge--warn {
  background: rgba(252,211,77,.15); border-color: rgba(252,211,77,.3); color: var(--amber-border);
}
.seat-badge--full {
  background: rgba(252,165,165,.15); border-color: rgba(252,165,165,.3); color: var(--danger-border);
}

/* ─── Evidence card hover — accent border + lift (session 18) ─────────────── */
.ev-card {
  background: var(--n-0,var(--n-0)); border: 1px solid var(--n-100);
  border-radius: var(--r-md); margin-bottom: 8px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
  overflow: hidden;
  border-left: 3px solid transparent;
}
.ev-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  border-left-color: var(--brand-muted);
}
.ev-card-open {
  border-left-color: var(--brand);
  border-color: var(--brand-muted);
}
.ev-card-open .ev-card-main { background: var(--brand-soft,#f8f7ff); }

/* ─── Landing page hex → token overrides (session 18) ────────────────────── */
.lp-dcard-badge {
  background: linear-gradient(135deg, var(--brand-mid,var(--brand-mid)), var(--purple,var(--purple)));
}
.lp-dcard-featured {
  background: linear-gradient(160deg, var(--brand-depth) 0%, var(--n-800) 100%);
  border-color: rgba(99,102,241,.4);
}
.lp-pain { background: var(--brand-soft,var(--brand-light)); }
.lp-pain-impact {
  background: linear-gradient(100deg, var(--brand-depth) 0%, var(--n-800) 60%, var(--n-900) 100%);
}

/* ─── Policy Vault (sdoc) ────────────────────────────────────────────── */
.sdoc-grid { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.sdoc-card {
  background: var(--surface);
  border: 1px solid var(--n-100);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: box-shadow var(--t-fast);
}
.sdoc-card:hover { box-shadow: var(--shadow-sm); }
.sdoc-card-icon { font-size: 1.6rem; flex-shrink: 0; line-height:1; margin-top:2px; }
.sdoc-card-body { flex: 1; min-width: 0; }
.sdoc-card-title { font-weight: 600; font-size: var(--text-base); margin-bottom: 4px; }
.sdoc-card-desc { font-size: var(--text-sm); color: var(--n-500); margin-top: 4px; }
.sdoc-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.sdoc-card-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; flex-wrap: wrap; }

.sdoc-ext-badge {
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 4px; background: var(--n-100); color: var(--n-600);
  text-transform: uppercase;
}
.sdoc-ext-pdf  { background: var(--danger-light); color: var(--danger-dark); }
.sdoc-ext-docx, .sdoc-ext-doc { background: #dbeafe; color: #1d4ed8; }
.sdoc-ext-xlsx, .sdoc-ext-xls, .sdoc-ext-csv { background: var(--success-light); color: #065f46; }
.sdoc-ext-pptx { background: #ffedd5; color: #c2410c; }
.sdoc-ext-txt, .sdoc-ext-md { background: var(--n-100); color: var(--n-600); }

.sdoc-cat-badge {
  font-size: var(--text-2xs); padding: 2px 7px; border-radius: 10px;
  background: var(--brand-soft,var(--brand-light)); color: var(--brand);
}
.sdoc-status-badge {
  font-size: var(--text-2xs); padding: 2px 7px; border-radius: 10px; font-weight: 600;
}
.sdoc-status-ok   { background: var(--success-light,var(--success-light)); color: var(--success,#059669); }
.sdoc-status-warn { background: var(--warning-light); color: var(--warning-dark); }
.sdoc-size, .sdoc-date, .sdoc-by { font-size: var(--text-2xs); color: var(--n-400); }

.sdoc-empty { text-align: center; padding: 60px 20px; color: var(--n-400); }
.sdoc-empty-icon { font-size: 3rem; margin-bottom: 12px; }
.sdoc-empty h3 { font-size: var(--text-lg); color: var(--n-600); margin-bottom: 8px; }
.sdoc-empty p  { font-size: var(--text-sm); max-width: 420px; margin: 0 auto; }

.sdoc-ai-banner { padding: 16px 20px; margin-bottom: 16px; border-left: 3px solid var(--brand); }
.sdoc-ai-panel  { margin: 0 0 16px; }
.sdoc-ai-panel-header {
  padding: 14px 18px;
  font-weight: 600;
  font-size: var(--text-base);
  border-bottom: 1px solid var(--n-100);
  display: flex; align-items: center; gap: 8px;
}
.sdoc-ai-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.sdoc-ai-panel-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--n-100);
  display: flex; justify-content: flex-end; gap: 8px;
}
.sdoc-ai-row {
  background: var(--n-50,var(--n-50));
  border: 1px solid var(--n-100);
  border-radius: var(--radius-sm,6px);
  padding: 12px 14px;
}
.sdoc-ai-row-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.sdoc-ai-row-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.sdoc-check-label {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); cursor: pointer; color: var(--n-600);
}
.sdoc-suggestion-pill {
  font-size: var(--text-2xs); font-weight: 700;
  padding: 2px 6px; border-radius: 4px;
  background: var(--brand-soft,var(--brand-light)); color: var(--brand);
  text-transform: capitalize;
}
.sdoc-conf-badge { font-size: var(--text-xs); font-weight: 600; }
.sdoc-note-ta { font-size: var(--text-sm); min-height: 52px; }

/* ── AI Configuration section (oai-*) ─────────────────────────────────── */
.oai-card { margin-bottom: 16px; }
.oai-status-badge {
  display: inline-block;
  font-size: var(--text-xs); font-weight: 600;
  padding: 2px 8px; border-radius: 10px; margin-left: 8px;
  vertical-align: middle;
}
.oai-badge--on  { background: var(--success-light); color: var(--success-dark); }
.oai-badge--off { background: var(--n-100); color: var(--n-500); }
.oai-test-result {
  padding: 10px 14px; border-radius: var(--radius-sm, 6px);
  font-size: var(--text-sm); margin-top: 8px;
}
.oai-test-running { background: var(--n-50); color: var(--n-600); }
.oai-test-ok   { background: var(--success-light); color: var(--success-dark); border: 1px solid var(--success-border); }
.oai-test-fail { background: var(--danger-light); color: var(--danger-dark); border: 1px solid var(--danger-border); }
.oai-usage-totals {
  display: flex; gap: 0; border-bottom: 1px solid var(--n-100);
}
.oai-usage-stat {
  flex: 1; padding: 14px 18px; text-align: center;
  border-right: 1px solid var(--n-100);
}
.oai-usage-stat:last-child { border-right: none; }
.oai-usage-stat-val { font-size: var(--text-lg); font-weight: 700; color: var(--n-800); }
.oai-usage-stat-lbl { font-size: var(--text-xs); color: var(--n-500); margin-top: 2px; }
.oai-usage-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.oai-usage-table th, .oai-usage-table td {
  padding: 8px 14px; text-align: left;
  border-bottom: 1px solid var(--n-100);
}
.oai-usage-table th { font-weight: 600; font-size: var(--text-xs); color: var(--n-500); background: var(--n-50); }
.oai-model-chip {
  font-size: var(--text-2xs); font-weight: 600;
  background: var(--n-100); color: var(--n-600);
  padding: 1px 5px; border-radius: 4px;
}

/* ── Inline panel AI draft buttons ────────────────────────────────────── */
.il-ai-btn {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--text-2xs); font-weight: 600;
  padding: 2px 7px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-mid), var(--purple));
  color: var(--n-0); border: none; cursor: pointer;
  transition: opacity .15s; white-space: nowrap; flex-shrink: 0;
}
.il-ai-btn:hover { opacity: .85; }
.il-ai-btn:disabled { opacity: .5; cursor: default; }
.il-ai-drafted {
  background-color: #fefce8 !important;
  border-color: var(--amber-border) !important;
}
.il-ai-draft-badge {
  position: absolute; bottom: 6px; right: 8px;
  font-size: var(--text-2xs); font-weight: 600; color: var(--warning-dark);
  background: var(--warning-light); padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--amber-border); pointer-events: none;
}

/* ── Document template AI draft button ────────────────────────────────── */
.dt-ai-draft-btn {
  position: absolute; top: 6px; right: 8px;
}

/* ── Template Library (.tl-*) ──────────────────────────────────────────── */
.tl-tabs { display:flex; gap:4px; padding:16px 20px 0; border-bottom:1px solid var(--n-200); }
.tl-tab { padding:8px 16px; font-size:var(--text-sm); font-weight:600; border:none; background:transparent; cursor:pointer; color:var(--n-500); border-bottom:2px solid transparent; transition:color var(--t-fast),border-color var(--t-fast); display:flex; align-items:center; gap:6px; }
.tl-tab.active { color:var(--brand); border-bottom-color:var(--brand); }
.tl-tab:hover:not(.active) { color:var(--n-700); }
.tl-tab-count { font-size:var(--text-xs); font-weight:700; padding:1px 6px; border-radius:10px; background:var(--n-100); color:var(--n-500); }
.tl-tab.active .tl-tab-count { background:var(--brand-light); color:var(--brand); }
.tl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; padding:20px; }
.tl-card { background:var(--surface); border:1px solid var(--n-200); border-radius:var(--r-lg); display:flex; flex-direction:column; cursor:pointer; transition:box-shadow var(--t-fast),border-color var(--t-fast),transform var(--t-fast); overflow:hidden; }
.tl-card:hover { box-shadow:var(--shadow-md); border-color:var(--n-300); transform:translateY(-1px); }
.tl-card-top { padding:16px 18px 12px; flex:1; }
.tl-card-type-row { display:flex; align-items:center; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.tl-card-type-badge { font-size:10px; font-weight:800; padding:2px 8px; border-radius:8px; }
.tl-card-name { font-size:var(--text-base); font-weight:700; color:var(--n-800); line-height:1.3; margin-bottom:4px; }
.tl-card-desc { font-size:var(--text-xs); color:var(--n-500); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tl-card-footer { padding:10px 18px; border-top:1px solid var(--n-100); display:flex; align-items:center; justify-content:space-between; background:var(--n-50); }
.tl-card-meta { font-size:var(--text-xs); color:var(--n-400); }
.tl-badge { font-size:10px; font-weight:700; padding:1px 6px; border-radius:8px; white-space:nowrap; }
.tl-badge-builtin { background:var(--n-100); color:var(--n-500); }
.tl-badge-vendor  { background:var(--brand-soft); color:var(--purple); }
.tl-detail-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:8px; }
.tl-detail-title { font-size:18px; font-weight:800; color:var(--n-900); }
.tl-detail-desc { font-size:var(--text-sm); color:var(--n-500); line-height:1.6; }
.tl-detail-actions { display:flex; gap:8px; flex-wrap:wrap; flex-shrink:0; }
.tl-sections-list { display:flex; flex-direction:column; gap:6px; }
.tl-section-row { display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--n-50); border:1px solid var(--n-200); border-radius:var(--r-md); font-size:var(--text-sm); }
.tl-section-num { width:22px; height:22px; border-radius:50%; background:var(--brand); color:var(--n-0); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tl-section-title { flex:1; font-weight:600; color:var(--n-800); }
.tl-section-guidance { font-size:var(--text-2xs); color:var(--n-400); font-style:italic; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:300px; }
.tl-file-row { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--n-50); border:1px solid var(--n-200); border-radius:var(--r-md); margin-bottom:4px; }
.tl-file-icon { font-size:16px; flex-shrink:0; }
.tl-file-name { font-size:var(--text-xs); font-weight:600; color:var(--n-700); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tl-type-card { display:flex; flex-direction:column; align-items:center; gap:8px; padding:20px 12px; border:2px solid var(--n-200); border-radius:var(--r-lg); background:var(--n-0); cursor:pointer; transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast); text-align:center; }
.tl-type-card:hover { border-color:var(--brand); background:var(--brand-light,var(--brand-light)); box-shadow:0 2px 8px rgba(99,102,241,.12); }
.tl-type-card-icon { font-size:28px; line-height:1; }
.tl-type-card-label { font-size:var(--text-sm); font-weight:700; color:var(--n-900); }
.tl-type-card-desc { font-size:var(--text-xs); color:var(--n-500); line-height:1.4; }

/* ── Document Editor (.de-*) ───────────────────────────────────────────── */
.de-layout { display:grid; grid-template-columns:260px 1fr; gap:0; min-height:600px; border:1px solid var(--n-200); border-radius:var(--r-lg); overflow:hidden; background:var(--n-0); }
.de-nav { border-right:1px solid var(--n-200); background:var(--n-50); display:flex; flex-direction:column; }
.de-nav-header { padding:14px 16px 10px; border-bottom:1px solid var(--n-200); }
.de-nav-title { font-size:var(--text-sm); font-weight:700; color:var(--n-800); }
.de-nav-meta { font-size:var(--text-2xs); color:var(--n-400); margin-top:2px; }
.de-nav-list { flex:1; overflow-y:auto; padding:6px; }
.de-nav-item { display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:var(--r-md); cursor:pointer; border:1px solid transparent; font-size:var(--text-sm); transition:background var(--t-fast); }
.de-nav-item:hover { background:var(--n-100); }
.de-nav-item.active { background:var(--brand-light); border-color:var(--brand-muted); }
.de-nav-item.accepted { color:var(--success); }
.de-nav-item.is-na { color:var(--n-400); text-decoration:line-through; }
.de-nav-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--n-300); }
.de-nav-dot.accepted { background:var(--success); }
.de-nav-dot.is-na { background:var(--n-200); }
.de-nav-dot.locked { background:var(--amber); }
.de-nav-lock-icon { font-size:10px; flex-shrink:0; }
.de-body { display:flex; flex-direction:column; overflow:hidden; }
.de-toolbar { display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid var(--n-200); flex-wrap:wrap; background:var(--n-0); }
.de-toolbar-title { font-weight:700; font-size:var(--text-base); color:var(--n-900); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.de-toolbar-badges { display:flex; gap:6px; align-items:center; flex-shrink:0; }
.de-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px; white-space:nowrap; }
.de-badge-draft     { background:var(--warning-light); color:var(--warning-dark); }
.de-badge-accepted  { background:var(--success-light); color:#065f46; }
.de-badge-na        { background:var(--n-100); color:var(--n-500); }
.de-badge-locked    { background:var(--warning-light); color:var(--warning-dark); }
.de-badge-stale     { background:var(--danger-light); color:var(--danger-dark); }
.de-content-area { flex:1; overflow-y:auto; padding:24px 28px; display:flex; flex-direction:column; gap:16px; }
.de-guidance-box { background:var(--amber-light); border:1px solid var(--amber-border); border-radius:var(--r-md); padding:10px 14px; font-size:var(--text-xs); color:#78350f; line-height:1.6; }
.de-guidance-label { font-weight:700; margin-bottom:3px; font-size:var(--text-2xs); text-transform:uppercase; letter-spacing:.04em; color:var(--warning-dark); }
.de-editor-wrap { border:1px solid var(--n-300); border-radius:var(--r-md); min-height:200px; background:var(--n-0); overflow:hidden; }
.de-editor-wrap:focus-within { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-light, var(--brand-light)); }
.de-editor-toolbar { display:flex; gap:2px; padding:6px 8px; border-bottom:1px solid var(--n-200); background:var(--n-50); flex-wrap:wrap; }
.de-fmt-btn { padding:3px 7px; border:1px solid transparent; border-radius:4px; background:transparent; cursor:pointer; font-size:13px; font-weight:600; color:var(--n-600); transition:background var(--t-fast); }
.de-fmt-btn:hover { background:var(--n-200); }
.de-fmt-btn.active { background:var(--brand-light); color:var(--brand); border-color:var(--brand-muted); }
.de-editable { padding:14px 16px; min-height:180px; outline:none; font-size:var(--text-sm); line-height:1.7; color:var(--n-800); }
.de-editable p { margin:0 0 8px; }
.de-editable strong { font-weight:700; }
.de-editable em { font-style:italic; }
.de-editable ul, .de-editable ol { margin:0 0 8px; padding-left:22px; }
.de-editable li { margin-bottom:3px; }
.de-editable table { border-collapse:collapse; width:100%; margin-bottom:8px; font-size:var(--text-xs); }
.de-editable th, .de-editable td { border:1px solid var(--n-300); padding:5px 8px; text-align:left; }
.de-editable th { background:var(--n-100); font-weight:700; }
.de-editable h1 { font-size:1.6em; font-weight:800; margin:0 0 8px; color:var(--n-900); }
.de-editable h2 { font-size:1.3em; font-weight:700; margin:0 0 6px; color:var(--n-900); }
.de-editable h3 { font-size:1.1em; font-weight:700; margin:0 0 4px; color:var(--n-800); }
.de-editable hr { border:none; border-top:2px solid var(--n-300); margin:12px 0; }
.de-editable .de-page-break { border-top:2px dashed var(--n-300); margin:16px 0; text-align:center; color:var(--n-400); font-size:var(--text-xs); user-select:none; }
.de-editable .de-tbl { border-collapse:collapse; width:100%; margin-bottom:8px; }
.de-editable .de-tbl th, .de-editable .de-tbl td { border:1px solid var(--n-300); padding:6px 10px; }
.de-editable .de-tbl th { background:var(--n-100); font-weight:700; font-size:var(--text-xs); }
.de-fmt-select { padding:2px 6px; border:1px solid var(--n-200); border-radius:4px; background:var(--n-0); font-size:12px; color:var(--n-700); cursor:pointer; height:26px; }
.de-fmt-select:hover { border-color:var(--n-400); }
.de-tb-sep { width:1px; background:var(--n-200); align-self:stretch; margin:2px 4px; flex-shrink:0; }
.de-color-btn { position:relative; cursor:pointer; }
.de-word-count { font-size:var(--text-2xs); color:var(--n-400); align-self:center; white-space:nowrap; padding-left:4px; }
.de-tbl-ctx { display:flex; gap:4px; align-items:center; padding:4px 16px; background:#fefce8; border-bottom:1px solid var(--warning-border); flex-wrap:wrap; }
.de-tbl-ctx-label { font-size:var(--text-2xs); font-weight:700; color:var(--warning-dark); margin-right:4px; }
.de-nav-footer { padding:8px; border-top:1px solid var(--n-200); }
.de-nav-reorder { display:none; gap:2px; align-items:center; flex-shrink:0; }
.de-nav-item:hover .de-nav-reorder { display:flex; }
.de-nav-reorder-btn { padding:1px 4px; border:none; background:transparent; cursor:pointer; font-size:11px; color:var(--n-500); border-radius:3px; line-height:1; }
.de-nav-reorder-btn:hover { background:var(--n-200); }
.de-autosave-status { font-size:var(--text-2xs); color:var(--n-400); align-self:center; margin-left:4px; }
.de-img-btn { cursor:pointer; }
.de-editable img { max-width:100%; height:auto; border-radius:4px; margin:4px 0; display:block; }
.de-editable.de-drag-over { outline:2px dashed var(--brand); outline-offset:2px; }
.de-subsection { border:1px solid var(--n-200); border-radius:var(--r-md); margin:0 28px 10px; overflow:hidden; }
.de-subsection-header { display:flex; align-items:center; gap:8px; padding:9px 14px; background:var(--n-50); cursor:pointer; user-select:none; }
.de-subsection-header:hover { background:var(--n-100); }
.de-subsection-toggle { font-size:11px; color:var(--n-400); flex-shrink:0; }
.de-subsection-title { font-size:var(--text-sm); font-weight:600; color:var(--n-800); flex:1; }
.de-subsection-body { padding:14px 16px; border-top:1px solid var(--n-200); background:var(--n-0); }
.de-action-bar { display:flex; gap:8px; align-items:center; padding:10px 16px; border-top:1px solid var(--n-200); background:var(--n-50); flex-wrap:wrap; }
.de-action-bar-right { margin-left:auto; display:flex; gap:8px; }
.de-presence-bar { display:flex; gap:6px; align-items:center; padding:6px 16px; background:var(--n-50); border-bottom:1px solid var(--n-100); font-size:var(--text-2xs); color:var(--n-500); }
.de-presence-avatar { width:22px; height:22px; border-radius:50%; background:var(--brand); color:var(--n-0); font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.de-comments-list { display:flex; flex-direction:column; gap:8px; }
.de-comment { padding:10px 14px; border:1px solid var(--n-200); border-radius:var(--r-md); background:var(--n-0); font-size:var(--text-xs); }
.de-comment.resolved { opacity:.5; }
.de-comment-author { font-weight:700; color:var(--n-700); }
.de-comment-time { color:var(--n-400); font-size:var(--text-2xs); margin-left:6px; }
.de-comment-body { margin-top:4px; color:var(--n-700); line-height:1.5; }
.de-comment-resolve { font-size:var(--text-2xs); color:var(--brand); cursor:pointer; margin-top:6px; }
.de-na-overlay { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px; text-align:center; color:var(--n-400); gap:8px; }
.de-na-overlay-icon { font-size:32px; }
.de-na-overlay-text { font-size:var(--text-sm); }

/* Jodit editor integration ── */
.de-jodit-ta { display:none; }  /* hidden — Jodit replaces it */
.de-editor-wrap { position:relative; min-height:260px; }
.de-editor-wrap .jodit-container { border:1px solid var(--n-300); border-radius:var(--r-md); font-size:var(--text-sm); }
.de-editor-wrap .jodit-container:not(.jodit_disabled):focus-within { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-light,var(--brand-light)); }
.de-editor-wrap .jodit-wysiwyg { min-height:220px; padding:14px 16px; font-size:var(--text-sm); line-height:1.7; color:var(--n-800); }
.de-editor-wrap .jodit-toolbar__box { border-radius:var(--r-md) var(--r-md) 0 0; background:var(--n-50); border-bottom:1px solid var(--n-200); }
.de-editor-wrap .jodit-status-bar { border-top:1px solid var(--n-100); background:var(--n-50); font-size:var(--text-2xs); color:var(--n-400); border-radius:0 0 var(--r-md) var(--r-md); }
/* Subsection Jodit — compact toolbar */
.de-subsection-body .jodit-wysiwyg { min-height:140px; }

/* ── Doc nav drag-to-reorder (Sortable) ────────────────────────────────── */
.de-nav-drag-handle { color:var(--n-300); cursor:grab; font-size:14px; flex-shrink:0; padding:0 4px 0 2px; line-height:1; user-select:none; }
.de-nav-drag-handle:hover { color:var(--n-500); }
.de-nav-drag-handle:active { cursor:grabbing; }
.de-nav-item.de-nav-ghost { opacity:.4; background:var(--brand-light,var(--brand-light)); border-radius:var(--r-sm); }
.de-nav-item.de-nav-chosen { background:var(--n-100); box-shadow:0 2px 8px rgba(99,102,241,.15); }

/* ── Section version history modal (.de-vh-*) ──────────────────────────── */
.de-vh-modal-box { max-width:900px; width:96vw; max-height:90vh; display:flex; flex-direction:column; }
.de-vh-body { display:flex; flex:1; overflow:hidden; min-height:0; }
.de-vh-sidebar { width:220px; flex-shrink:0; border-right:1px solid var(--n-200); overflow-y:auto; background:var(--n-50); }
.de-vh-sidebar-hdr { padding:10px 14px; font-size:var(--text-xs); font-weight:700; color:var(--n-500); text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--n-200); }
.de-vh-ver-row { padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--n-100); transition:background var(--t-base); }
.de-vh-ver-row:hover { background:var(--n-100); }
.de-vh-ver-row.de-vh-ver-active { background:var(--brand-light,var(--brand-light)); border-left:3px solid var(--brand); padding-left:11px; }
.de-vh-ver-meta { display:flex; gap:6px; align-items:center; margin-bottom:2px; }
.de-vh-ver-num { font-size:var(--text-xs); font-weight:700; color:var(--brand); }
.de-vh-ver-by { font-size:var(--text-xs); color:var(--n-600); }
.de-vh-ver-date { font-size:var(--text-2xs); color:var(--n-400); }
.de-vh-main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.de-vh-legend { display:flex; gap:12px; align-items:center; padding:8px 16px; background:var(--n-50); border-bottom:1px solid var(--n-100); flex-wrap:wrap; }
.de-vh-legend-ins { font-size:var(--text-xs); font-weight:600; color:var(--success-dark); background:var(--success-light); padding:2px 8px; border-radius:4px; }
.de-vh-legend-del { font-size:var(--text-xs); font-weight:600; color:var(--danger-dark); background:var(--danger-light); padding:2px 8px; border-radius:4px; }
.de-vh-diff { flex:1; overflow-y:auto; padding:16px 20px; font-size:var(--text-sm); line-height:1.8; color:var(--n-800); white-space:pre-wrap; word-break:break-word; }
ins.de-vh-ins { background:var(--success-light); color:var(--success-dark); text-decoration:none; padding:0 2px; border-radius:2px; }
del.de-vh-del { background:var(--danger-light); color:var(--danger-dark); text-decoration:line-through; padding:0 2px; border-radius:2px; }
.de-vh-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--n-100); background:var(--n-50); }

/* ── Reports list (.rp2-*) ─────────────────────────────────────────────── */
.rp2-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; padding:4px 0; }
.rp2-card {
  background:var(--n-0); border:1px solid var(--n-200); border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs); display:flex; flex-direction:column; overflow:hidden;
  transition:box-shadow var(--t-base), border-color var(--t-base);
}
.rp2-card:hover { box-shadow:0 4px 16px rgba(99,102,241,.10); border-color:var(--brand-border); }
.rp2-card-head {
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg, var(--n-50) 0%, var(--brand-light) 55%, var(--brand-soft) 100%);
  border-bottom:1px solid var(--brand-border); padding:12px 16px; flex-shrink:0;
}
.rp2-doc-label { font-size:10px; font-weight:800; padding:2px 8px; border-radius:8px; letter-spacing:.04em; }
.rp2-card-body { display:flex; flex-direction:column; gap:8px; padding:16px; flex:1; }
.rp2-card-title { font-size:var(--text-sm); font-weight:700; color:var(--n-900); line-height:1.3; }
.rp2-card-desc { font-size:var(--text-xs); color:var(--n-500); line-height:1.5; flex:1; }
.rp2-card-progress { font-size:var(--text-2xs); color:var(--n-400); }
.rp2-card-footer { display:flex; gap:6px; flex-wrap:wrap; padding:10px 16px; border-top:1px solid var(--n-100); background:var(--n-50); }
.rp2-card-footer .btn-primary,
.rp2-card-footer .btn-sm { font-size:var(--text-xs); }
.rp2-status-pill { padding:2px 8px; border-radius:20px; font-weight:700; font-size:10px; }
.rp2-status-draft  { background:var(--warning-light); color:var(--warning); border:1px solid var(--warning-border); }
.rp2-status-signed { background:var(--success-light); color:var(--success); border:1px solid var(--success-border); }
.rp2-status-stale  { background:var(--danger-light);  color:var(--danger);  border:1px solid var(--danger-border); }

/* ── Evidence Coverage card (.ev-cov-*) ─────────────────────────────────── */
.ev-cov-overall-track { flex:1; height:10px; background:var(--n-100); border-radius:99px; overflow:hidden; }
.ev-cov-overall-fill  { height:100%; border-radius:99px; transition:width .4s ease; }
.ev-cov-overall-bar   { display:flex; align-items:center; gap:12px; }
.ev-cov-overall-label { font-size:var(--text-sm); font-weight:700; white-space:nowrap; }
.ev-cov-groups        { display:flex; flex-direction:column; gap:6px; }
.ev-cov-row           { display:grid; grid-template-columns:220px 1fr 44px 54px auto; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--n-100); }
.ev-cov-row:last-child { border-bottom:none; }
.ev-cov-row-label     { font-size:var(--text-xs); color:var(--n-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ev-cov-bar-wrap      { height:8px; background:var(--n-100); border-radius:99px; overflow:hidden; }
.ev-cov-bar           { height:100%; border-radius:99px; transition:width .4s ease; }
.ev-cov-row-pct       { font-size:var(--text-xs); font-weight:700; text-align:right; }
.ev-cov-row-count     { font-size:var(--text-2xs); color:var(--n-400); text-align:right; }
.ev-cov-row-flags     { display:flex; gap:4px; }
.ev-cov-grp-flag      { font-size:10px; font-weight:600; padding:1px 6px; border-radius:20px; white-space:nowrap; }
.ev-cov-flag--warn    { background:var(--warning-light); color:var(--warning); }
.ev-cov-flag--info    { background:var(--n-100); color:var(--n-500); }
.ev-cov-badge         { font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; }
.ev-cov-badge--warn   { background:var(--warning-light); color:var(--warning); }
.ev-cov-badge--info   { background:var(--n-100); color:var(--n-500); }
/* Evidence count badge in controls table */
.ev-cell-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 5px;
  background:var(--brand-light); color:var(--brand); border:1px solid var(--brand-border);
  border-radius:99px; font-size:11px; font-weight:700; cursor:pointer;
}
.ev-cell-badge:hover { background:var(--brand); color:#fff; }
.ev-cell-warn { font-size:11px; color:var(--warning); margin-left:3px; }
.ev-cell-warn--info { color:var(--n-400); }

/* ── Document preview modal (.rp2-prev-*) ────────────────────────────────── */
.rp2-prev-body-wrap {
  overflow-y: auto; flex: 1; padding: 32px 48px;
  background: var(--n-50);
}
.rp2-prev-doc {
  max-width: 720px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--n-200);
  border-radius: 8px; padding: 40px 48px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.rp2-prev-section { margin-bottom: 32px; }
.rp2-prev-h2 {
  font-size: var(--text-xl); font-weight: 700; color: var(--n-900);
  margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--brand-border);
}
.rp2-prev-h3 {
  font-size: var(--text-base); font-weight: 600; color: var(--n-700);
  margin: 20px 0 8px;
}
.rp2-prev-body { font-size: var(--text-sm); color: var(--n-700); line-height: 1.8; }
.rp2-prev-body h1,.rp2-prev-body h2,.rp2-prev-body h3 { color:var(--n-900); margin:16px 0 8px; }
.rp2-prev-body p { margin:0 0 10px; }
.rp2-prev-body ul,.rp2-prev-body ol { padding-left:20px; margin:0 0 10px; }
.rp2-prev-body table { width:100%; border-collapse:collapse; margin:12px 0; font-size:var(--text-xs); }
.rp2-prev-body th,.rp2-prev-body td { border:1px solid var(--n-200); padding:6px 10px; text-align:left; }
.rp2-prev-body th { background:var(--n-50); font-weight:600; }
.rp2-prev-empty { padding:40px; text-align:center; color:var(--n-400); font-size:var(--text-sm); }

/* ── EVID-A02: Controls evidence coverage strip (.ctrlcov-*) ─────────────── */
.ctrlcov-strip {
  background: var(--surface);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.ctrlcov-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--n-50);
  border-bottom: 1px solid var(--n-100);
}
.ctrlcov-title {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--n-600);
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.ctrlcov-overall {
  font-size: var(--text-xs);
  font-weight: 600;
  flex: 1;
}
.ctrlcov-toggle {
  padding: 1px 8px;
  font-size: var(--text-2xs);
  flex-shrink: 0;
}
.ctrlcov-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px 0 4px;
  max-height: 260px;
  overflow-y: auto;
}
.ctrlcov-group {
  display: grid;
  grid-template-columns: 200px 1fr 38px 48px auto;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  border-bottom: 1px solid var(--n-50);
}
.ctrlcov-group:last-child { border-bottom: none; }
.ctrlcov-group-label {
  font-size: var(--text-xs);
  color: var(--n-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctrlcov-bar-wrap {
  height: 7px;
  background: var(--n-100);
  border-radius: 99px;
  overflow: hidden;
}
.ctrlcov-bar {
  height: 100%;
  border-radius: 99px;
  transition: width .3s ease;
}
.ctrlcov-pct {
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.ctrlcov-count {
  font-size: var(--text-2xs);
  color: var(--n-400);
  text-align: right;
  white-space: nowrap;
}
.ctrlcov-flags { display: flex; gap: 4px; align-items: center; }
.ctrlcov-flag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 99px;
  white-space: nowrap;
}
.ctrlcov-flag--warn { background: var(--warning-light); color: var(--warning); }
.ctrlcov-flag--info { background: var(--n-100);         color: var(--n-500);   }
@media (max-width: 860px) {
  .ctrlcov-group { grid-template-columns: 120px 1fr 34px 40px auto; gap: 6px; }
}

/* ── RPT-01: Split-pane reports layout ───────────────────────────────────── */
.rp2-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.rp2-split--open {
  grid-template-columns: minmax(320px, 420px) 1fr;
}
.rp2-split-list { min-width: 0; }
.rp2-split--open .rp2-split-list .rp2-grid {
  grid-template-columns: 1fr;
}
.rp2-split-preview {
  display: none;
  min-width: 0;
  background: var(--n-50);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 120px);
  flex-direction: column;
}
.rp2-split--open .rp2-split-preview {
  display: flex;
  flex-direction: column;
}
.rp2-prev-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--n-200);
  background: var(--surface);
  flex-shrink: 0;
  gap: 10px;
}
.rp2-prev-pane-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--n-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp2-prev-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 300px;
  padding: 40px;
  text-align: center;
  color: var(--n-400);
}
.rp2-prev-ph-icon { font-size: 40px; margin-bottom: 12px; }
.rp2-prev-ph-title { font-size: var(--text-sm); font-weight: 600; color: var(--n-600); margin-bottom: 6px; }
.rp2-prev-ph-sub { font-size: var(--text-xs); line-height: 1.5; }
.rp2-card--active {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-light);
}
@media (max-width: 900px) {
  .rp2-split--open { grid-template-columns: 1fr; }
  .rp2-split-preview { position: static; max-height: none; }
}

/* ── UX-07: User profile page (.upr-*) ──────────────────────────────────── */
.upr-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: flex-start;
}
.upr-identity {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  position: sticky;
  top: 16px;
}
.upr-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--brand-light); color: var(--brand);
  font-size: 28px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.upr-name {
  font-size: var(--text-base); font-weight: 700; color: var(--n-800);
  word-break: break-word;
}
.upr-username { font-size: var(--text-xs); color: var(--n-400); }
.upr-role-badge {
  display: inline-block; padding: 2px 10px; border-radius: 10px;
  font-size: var(--text-2xs); font-weight: 700; margin-top: 2px;
}
.upr-email { font-size: var(--text-xs); color: var(--n-500); word-break: break-all; margin-top: 4px; }
.upr-last-login { font-size: var(--text-2xs); color: var(--n-400); margin-top: 2px; }
.upr-panels { display: flex; flex-direction: column; gap: 16px; }
.upr-section { padding: 20px 24px; }
.upr-section-title {
  font-size: var(--text-sm); font-weight: 700; color: var(--n-700);
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--n-100);
}
.upr-fields { display: flex; flex-direction: column; gap: 10px; }
.upr-field { display: flex; flex-direction: column; gap: 4px; }
.upr-hint { font-size: var(--text-2xs); color: var(--n-400); margin-top: 3px; }
.upr-error {
  font-size: var(--text-xs); color: var(--danger);
  background: var(--danger-light); border-radius: 6px;
  padding: 6px 10px; margin-top: 8px;
}
.upr-section-footer {
  display: flex; justify-content: flex-end; margin-top: 16px;
  padding-top: 12px; border-top: 1px solid var(--n-100);
}
.upr-swatches { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0; }
.upr-notif-list { display: flex; flex-direction: column; gap: 6px; }
.upr-notif-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--n-50);
  cursor: pointer; font-size: var(--text-sm);
}
.upr-notif-row:last-child { border-bottom: none; }
.upr-notif-row input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.upr-notif-label { font-weight: 500; color: var(--n-700); flex: 1; }
.upr-notif-hint { font-size: var(--text-xs); color: var(--n-400); flex: 2; }
@media (max-width: 680px) {
  .upr-layout { grid-template-columns: 1fr; }
  .upr-identity { position: static; }
  .upr-notif-hint { display: none; }
}

/* ── DB Explorer (.dbx-*) ─────────────────────────────────────────────────── */
.dbx-layout { display:flex; gap:16px; align-items:flex-start; }
.dbx-sidebar { width:260px; min-width:200px; flex-shrink:0; overflow:hidden; }
.dbx-main { flex:1; min-width:0; overflow:hidden; }
.dbx-list-body { overflow-y:auto; max-height:calc(100vh - 280px); }
.dbx-search {
  display:block; width:calc(100% - 24px); margin:10px 12px 6px;
  padding:6px 10px; border:1px solid var(--n-200); border-radius:var(--r-md);
  font-size:var(--text-xs); background:var(--n-50); color:var(--n-800);
}
.dbx-search:focus { outline:none; border-color:var(--brand-muted); background:var(--n-0); }
#dbx-list-items { overflow-y:auto; }
.dbx-list-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 14px; cursor:pointer; font-size:var(--text-xs); color:var(--n-700);
  transition:background .12s; border-bottom:1px solid var(--n-100);
}
.dbx-list-item:last-child { border-bottom:none; }
.dbx-list-item:hover { background:var(--n-50); }
.dbx-list-item--active { background:var(--brand-light); color:var(--brand); font-weight:600; }
.dbx-tname { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:monospace; }
.dbx-tcount { font-size:10px; font-weight:700; padding:1px 6px; border-radius:var(--r-pill); background:var(--n-100); color:var(--n-500); flex-shrink:0; margin-left:4px; }
.dbx-list-item--active .dbx-tcount { background:var(--brand-soft); color:var(--brand-active); }
.dbx-empty { padding:32px 24px; color:var(--n-400); font-size:var(--text-sm); text-align:center; }
.dbx-err { padding:16px; color:var(--danger); font-size:var(--text-sm); }
.dbx-pager-info { font-size:var(--text-xs); color:var(--n-500); white-space:nowrap; }
.dbx-table-wrap { overflow-x:auto; max-height:calc(100vh - 260px); }
.dbx-table { width:100%; border-collapse:collapse; font-size:var(--text-xs); }
.dbx-table th {
  position:sticky; top:0; z-index:1;
  background:linear-gradient(to bottom,var(--n-50),var(--n-100));
  border-bottom:2px solid var(--n-200);
  padding:8px 12px; text-align:left; font-weight:700; color:var(--n-600);
  white-space:nowrap; font-size:var(--text-2xs); text-transform:uppercase; letter-spacing:.05em;
}
.dbx-table td { padding:7px 12px; border-bottom:1px solid var(--n-100); color:var(--n-800); max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
.dbx-table tr:last-child td { border-bottom:none; }
.dbx-table tr:hover td { background:var(--n-50); }
.dbx-null { color:var(--n-300); font-style:italic; font-size:10px; }

/* ── Config Values (.cfv-*) ──────────────────────────────────────────────── */
.cfv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:16px; }
.cfv-group { margin:0; overflow:hidden; }
.cfv-table { width:100%; border-collapse:collapse; font-size:var(--text-xs); }
.cfv-table th { padding:7px 14px; text-align:left; font-weight:700; font-size:var(--text-2xs); color:var(--n-500); text-transform:uppercase; letter-spacing:.05em; background:var(--n-50); border-bottom:1px solid var(--n-100); }
.cfv-table td { padding:7px 14px; border-bottom:1px solid var(--n-100); vertical-align:middle; }
.cfv-table tr:last-child td { border-bottom:none; }
.cfv-table tr:hover td { background:var(--n-50); }
.cfv-key { font-family:monospace; font-size:11px; color:var(--brand); font-weight:600; white-space:nowrap; }
.cfv-val { color:var(--n-700); word-break:break-all; }

/* ═══════════════════════════════════════════════════════════════════════
   Dark Theme — [data-theme="dark"]
   Inspired by AWS Console — dark sidebar, blue accents: dark top bar, light sidebar, AWS blue accents.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --aws-top:       #232f3e;   /* AWS dark navy — top bar */
  --aws-top-hover: #31415a;   /* lighter on hover */
  --aws-sidebar:   #1a2332;   /* sidebar dark */
  --aws-sidebar-active: #16212e;
  --aws-blue:      var(--aws-orange);   /* AWS primary blue */
  --aws-orange:    #ff9900;   /* AWS orange — highlights, badges */
  --aws-text-inv:  #d5dbdb;   /* light text on dark bg */
  --aws-border:    var(--n-300);
}

/* ── Top bar (sidebar header area) ───────────────────────────────────── */
[data-theme="dark"] .sidebar {
  background: var(--aws-sidebar);
  border-right: 1px solid #0a1520;
}

[data-theme="dark"] .sidebar-logo-wrap,
[data-theme="dark"] .sidebar-header {
  background: var(--aws-top);
  border-bottom: 1px solid #0a1520;
}

[data-theme="dark"] .sidebar-logo-text,
[data-theme="dark"] .sidebar-header * {
  color: var(--n-0) !important;
}

/* ── Sidebar nav links ────────────────────────────────────────────────── */
[data-theme="dark"] .sidebar-link {
  color: var(--aws-text-inv);
  border-radius: 0;
}

[data-theme="dark"] .sidebar-link:hover {
  background: var(--aws-top-hover);
  color: var(--n-0);
}

[data-theme="dark"] .sidebar-link.active {
  background: var(--aws-blue);
  color: var(--n-0);
  border-left: 3px solid var(--aws-orange);
}

[data-theme="dark"] .sidebar-group-label {
  color: #8ca0b3;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .08em;
  padding-left: 16px;
}

[data-theme="dark"] .sidebar-bottom {
  border-top: 1px solid #2d3e50;
}

[data-theme="dark"] .sidebar-bottom .sidebar-link {
  color: #8ca0b3;
}

/* ── Main content area ────────────────────────────────────────────────── */
[data-theme="dark"] body {
  background: var(--hero-strong);  /* AWS console light grey background */
}

/* .main-header now uses the dark hero style globally — no override needed */

/* ── Cards ────────────────────────────────────────────────────────────── */
[data-theme="dark"] .card,
[data-theme="dark"] .ov-card {
  background: var(--n-0);
  border: 1px solid var(--aws-border);
  border-radius: 4px;
  box-shadow: none;
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .ov-card:hover {
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
[data-theme="dark"] .btn-primary {
  background: var(--aws-blue);
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: .01em;
}

[data-theme="dark"] .btn-primary:hover {
  background: #005f99;
}

[data-theme="dark"] .btn-outline {
  border-color: var(--aws-blue);
  color: var(--aws-blue);
  border-radius: 2px;
}

[data-theme="dark"] .btn-outline:hover {
  background: var(--brand-light);
}

/* ── Tables ───────────────────────────────────────────────────────────── */
[data-theme="dark"] table thead th {
  background: var(--n-25);
  border-bottom: 2px solid var(--aws-border);
  color: var(--hero-bg-start);
  font-weight: 700;
}

[data-theme="dark"] table tbody tr:hover td {
  background: var(--brand-light);
}

/* ── Badges / severity chips ──────────────────────────────────────────── */
[data-theme="dark"] .badge-critical { background: #870303; color: var(--n-0); }
[data-theme="dark"] .badge-high     { background: var(--danger); color: var(--n-0); }
[data-theme="dark"] .badge-medium   { background: #e07941; color: var(--n-0); }
[data-theme="dark"] .badge-low      { background: #f0ad00; color: var(--n-0); }

/* ── Active assessment pill ───────────────────────────────────────────── */
[data-theme="dark"] .sidebar-assessment-chip {
  background: #1b2a38;
  border: 1px solid #2d3e50;
  color: #7dd3fc;
}

/* ── Section stat numbers (AWS big-number style) ──────────────────────── */
[data-theme="dark"] .ov-stat-val,
[data-theme="dark"] .home-stat-val {
  color: var(--aws-blue);
  font-size: 28px;
  font-weight: 400;
  border-bottom: 2px solid var(--aws-blue);
  display: inline-block;
  padding-bottom: 2px;
}

/* ── Progress bars ────────────────────────────────────────────────────── */
[data-theme="dark"] .progress-bar-fill {
  background: var(--aws-blue);
}

/* ── Theme swatch highlight for AWS ──────────────────────────────────── */
[data-theme="dark"] .theme-swatch[data-theme="dark"] {
  outline: 3px solid var(--aws-orange);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Dark Theme — Section Overrides (Home, Overview, Controls)
   Only active when [data-theme="dark"] is set on <html>.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page body & global surface ──────────────────────────────────────── */
[data-theme="dark"] body {
  background: var(--hero-strong);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* .main-header now uses the dark hero style globally — no override needed */
[data-theme="dark"] .assessment-meta {
  color: var(--hero-muted);
  font-size: 13px;
  gap: 12px;
}

/* ── Stat strip — AWS large-number style ──────────────────────────────── */
[data-theme="dark"] .tr-stat-strip {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--n-200);
  margin-top: 12px;
  background: var(--n-0);
}

[data-theme="dark"] .tr-stat {
  flex: 1;
  padding: 16px 20px 14px;
  border-right: 1px solid var(--n-200);
  border-left: none !important;
  position: relative;
}

[data-theme="dark"] .tr-stat:last-child {
  border-right: none;
}

[data-theme="dark"] .tr-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand, var(--aws-orange));
  opacity: 0;
}

[data-theme="dark"] .tr-stat:hover::before {
  opacity: 1;
}

[data-theme="dark"] .tr-stat-num {
  font-size: 28px !important;
  font-weight: 400 !important;
  color: var(--aws-orange) !important;
  line-height: 1.1;
  border-bottom: 2px solid var(--aws-orange);
  display: inline-block;
  padding-bottom: 2px;
  margin-bottom: 6px;
}

[data-theme="dark"] .tr-stat-num--brand  { color: var(--aws-orange) !important; border-bottom-color: var(--aws-orange); }
[data-theme="dark"] .tr-stat-num--danger { color: var(--danger) !important; border-bottom-color: var(--danger); }
[data-theme="dark"] .tr-stat-num--success{ color: #1d8348 !important; border-bottom-color: #1d8348; }

[data-theme="dark"] .tr-stat-lbl {
  font-size: 12px;
  font-weight: 700;
  color: #545b64;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Assessment cards grid (Home) ─────────────────────────────────────── */
[data-theme="dark"] .ac3 {
  background: var(--n-0);
  border: 1px solid var(--n-300);
  border-radius: 4px;
  box-shadow: none;
  transition: box-shadow .15s ease;
}

[data-theme="dark"] .ac3:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  border-color: var(--aws-orange);
}

[data-theme="dark"] .ac3--active {
  border-color: var(--aws-orange);
  border-width: 2px;
}

[data-theme="dark"] .ac3-accent-bar {
  height: 4px;
  background: var(--ac3-accent, var(--aws-orange));
  border-radius: 4px 4px 0 0;
}

[data-theme="dark"] .ac3-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--hero-bg-start);
}

[data-theme="dark"] .ac3-org {
  font-size: 12px;
  color: #545b64;
}

[data-theme="dark"] .ac3-chip {
  background: var(--hero-strong);
  border: 1px solid var(--n-300);
  color: var(--hero-bg-start);
  border-radius: 2px;
  font-size: 11px;
  padding: 2px 7px;
}

[data-theme="dark"] .ac3-chip--danger { background: #fdf3f1; border-color: var(--danger); color: var(--danger); }
[data-theme="dark"] .ac3-chip--warn   { background: #fef6e4; border-color: #e07941; color: #bd5500; }
[data-theme="dark"] .ac3-chip--fw     { background: var(--brand-light); border-color: #7abbdd; color: var(--aws-orange); }

[data-theme="dark"] .ac3-stat-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--aws-orange);
}

[data-theme="dark"] .ac3-stat-lbl {
  font-size: 11px;
  color: #545b64;
  text-transform: uppercase;
  letter-spacing: .04em;
}

[data-theme="dark"] .ac3-active-pill {
  background: var(--aws-orange);
  color: var(--n-0);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── SPD chart cards (Home analytics) ─────────────────────────────────── */
[data-theme="dark"] .spd-chart-card {
  background: var(--n-0);
  border: 1px solid var(--n-300);
  border-radius: 4px;
  box-shadow: none;
}

[data-theme="dark"] .spd-chart-card-header {
  border-bottom: 1px solid var(--n-200);
  padding: 12px 16px;
  background: var(--n-25);
}

[data-theme="dark"] .spd-chart-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--hero-bg-start);
}

[data-theme="dark"] .spd-chart-card-sub {
  font-size: 12px;
  color: #545b64;
}

[data-theme="dark"] .spd-chart-card-badge {
  background: #fdf3f1;
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 2px;
}

/* ── Needs Attention items ─────────────────────────────────────────────── */
[data-theme="dark"] .attention-item {
  background: var(--n-25);
  border: 1px solid var(--n-200);
  border-left: 3px solid var(--danger);
  border-radius: 2px;
  padding: 10px 14px;
}

[data-theme="dark"] .attention-item:hover {
  background: #fdf3f1;
  cursor: pointer;
}

[data-theme="dark"] .attention-tag {
  background: #fdf3f1;
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 2px;
}

/* ── Overview — leadership dashboard cards ─────────────────────────────── */
[data-theme="dark"] .card,
[data-theme="dark"] .ov-card {
  background: var(--n-0);
  border: 1px solid var(--n-300);
  border-radius: 4px;
  box-shadow: none;
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .ov-card:hover {
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

[data-theme="dark"] .card h3,
[data-theme="dark"] .ov-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--hero-bg-start);
  border-bottom: 1px solid var(--n-200);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

/* ── Status badges ─────────────────────────────────────────────────────── */
[data-theme="dark"] .status-badge,
[data-theme="dark"] .assess-status-badge {
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

[data-theme="dark"] .status-active     { background: #e6f4ea; color: #1d8348; border: 1px solid #a2d9b1; }
[data-theme="dark"] .status-draft      { background: var(--hero-strong); color: #545b64; border: 1px solid var(--n-300); }
[data-theme="dark"] .status-completed  { background: var(--brand-light); color: var(--aws-orange); border: 1px solid #7abbdd; }
[data-theme="dark"] .status-archived   { background: var(--hero-strong); color: #879596; border: 1px solid var(--n-300); }

/* ── Controls table ────────────────────────────────────────────────────── */
[data-theme="dark"] .ctrl-table-wrap {
  background: var(--n-0);
  border: 1px solid var(--n-300);
  border-radius: 4px;
}

[data-theme="dark"] .ctrl-filters-bar {
  background: var(--n-25);
  border-bottom: 1px solid var(--n-200);
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

[data-theme="dark"] .ctrl-filter-chip {
  background: var(--brand-light);
  border: 1px solid #7abbdd;
  color: var(--aws-orange);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px 3px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

[data-theme="dark"] .ctrl-table thead th {
  background: var(--n-25);
  border-bottom: 2px solid var(--n-300);
  color: var(--hero-bg-start);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 10px 12px;
  position: sticky;
  top: 0;
  z-index: 1;
}

[data-theme="dark"] .ctrl-table tbody tr:hover td {
  background: var(--brand-light);
}

[data-theme="dark"] .ctrl-table tbody td {
  border-bottom: 1px solid var(--hero-strong);
  color: var(--hero-bg-start);
  font-size: 13px;
  padding: 10px 12px;
}

[data-theme="dark"] .ctrl-id-badge {
  background: var(--hero-strong);
  border: 1px solid var(--n-300);
  color: var(--hero-bg-start);
  border-radius: 2px;
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
}

/* ── Progress bars ─────────────────────────────────────────────────────── */
[data-theme="dark"] .ac3-prog-track {
  background: var(--n-200);
  border-radius: 2px;
  height: 6px;
}

[data-theme="dark"] .ac3-prog-fill {
  border-radius: 2px;
  height: 6px;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .btn-primary {
  background: var(--aws-orange);
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: none;
}

[data-theme="dark"] .btn-primary:hover {
  background: #005f99;
}

[data-theme="dark"] .btn-outline {
  border-color: var(--aws-orange);
  color: var(--aws-orange);
  border-radius: 2px;
  background: transparent;
}

[data-theme="dark"] .btn-outline:hover {
  background: var(--brand-light);
}

[data-theme="dark"] .btn-sm {
  border-radius: 2px;
  font-size: 12px;
  border: 1px solid var(--n-300);
  background: var(--n-0);
  color: var(--hero-bg-start);
}

[data-theme="dark"] .btn-sm:hover {
  background: var(--hero-strong);
  border-color: var(--aws-orange);
  color: var(--aws-orange);
}

/* ── Framework badge ───────────────────────────────────────────────────── */
[data-theme="dark"] .ov-fw-badge {
  background: var(--brand-light);
  border: 1px solid #7abbdd;
  color: var(--aws-orange);
  border-radius: 2px;
  font-size: 12px;
  padding: 2px 8px;
}

/* ── Toast notifications ───────────────────────────────────────────────── */
[data-theme="dark"] .toast {
  border-radius: 2px;
  border-left: 4px solid var(--aws-orange);
}

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--hero-strong); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #879596; }

/* ═══════════════════════════════════════════════════════════════════════
   Light Theme — [data-theme="light"]
   Fully white/light surface — sidebar, headers, and nav all use light
   backgrounds with dark text. Accent colour stays indigo (same as default).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CSS variable overrides for surfaces ─────────────────────────────── */
[data-theme="light"] {
  --hero-bg:       linear-gradient(135deg, #f8fafc 0%, #f1f5f9 60%, #e8edf5 100%);
  --hero-bg-start: #f8fafc;
  --hero-bg-mid:   #f1f5f9;
  --hero-bg-end:   #e8edf5;
  --hero-strong:   #0f172a;
  --hero-muted:    #64748b;
  --hero-text:     #1e293b;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
[data-theme="light"] .sidebar {
  background: #ffffff;
  border-right: 1px solid var(--n-200);
}

[data-theme="light"] .sidebar-logo {
  border-bottom: 1px solid var(--n-200);
}

[data-theme="light"] .sidebar-logo-text {
  color: var(--n-800);
}

[data-theme="light"] .sidebar-link {
  color: var(--n-600);
}

[data-theme="light"] .sidebar-link:hover {
  background: var(--brand-light);
  color: var(--brand);
  border-color: var(--brand-muted);
}

[data-theme="light"] .sidebar-link.active {
  background: var(--brand-light);
  color: var(--brand);
  border-left-color: var(--brand);
  font-weight: 700;
}

[data-theme="light"] .sidebar-link.active svg {
  color: var(--brand);
}

[data-theme="light"] .sidebar-group-label {
  color: var(--n-400);
}

[data-theme="light"] .sidebar-sep {
  background: var(--n-200);
}

[data-theme="light"] .sidebar-bottom {
  border-top: 1px solid var(--n-200);
}

[data-theme="light"] .sidebar ::-webkit-scrollbar-thumb { background: var(--n-300); }
[data-theme="light"] .sidebar ::-webkit-scrollbar-thumb:hover { background: var(--n-400); }

/* ── Secondary sidebar ───────────────────────────────────────────────── */
[data-theme="light"] .secondary-sidebar {
  background: #f8fafc;
  border-right: 1px solid var(--n-200);
}

[data-theme="light"] .sec-link {
  color: var(--n-500);
}

[data-theme="light"] .sec-link:hover {
  background: var(--brand-light);
  color: var(--brand);
}

[data-theme="light"] .sec-link.active {
  color: var(--brand);
  border-left-color: var(--brand);
  background: var(--brand-light);
}

[data-theme="light"] .adm-nav-primary {
  color: var(--n-600);
}

[data-theme="light"] .adm-nav-primary:hover {
  background: var(--brand-light);
  color: var(--brand);
}

[data-theme="light"] .adm-nav-group--open > .adm-nav-primary {
  color: var(--brand);
  background: var(--brand-light);
}

[data-theme="light"] .adm-nav-children {
  background: var(--n-50);
  border-top: 1px solid var(--n-200);
}

[data-theme="light"] .adm-nav-sub {
  color: var(--n-500);
}

[data-theme="light"] .adm-nav-sub:hover {
  background: var(--brand-light);
  color: var(--brand);
}

[data-theme="light"] .adm-nav-sub.active {
  color: var(--brand);
  border-left-color: var(--brand);
  background: var(--brand-light);
}

/* ── Section tabs bar ────────────────────────────────────────────────── */
[data-theme="light"] .section-tabs {
  background: #ffffff;
  border-bottom: 2px solid var(--n-200);
}

[data-theme="light"] .section-tab {
  color: var(--n-500);
}

[data-theme="light"] .section-tab:hover {
  color: var(--n-800);
}

[data-theme="light"] .section-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

[data-theme="light"] .section-tab-badge {
  background: var(--n-100);
  color: var(--n-600);
}

/* ── Main header ─────────────────────────────────────────────────────── */
[data-theme="light"] .main-header {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 0 0 1px var(--n-200);
}

[data-theme="light"] .main-header h2 {
  color: var(--n-900);
}

[data-theme="light"] .main-header-sub,
[data-theme="light"] .assessment-meta {
  color: var(--n-500);
}

[data-theme="light"] .assessment-meta strong,
[data-theme="light"] .assessment-meta b {
  color: var(--n-700);
}

[data-theme="light"] .main-header .tr-stat {
  background: var(--n-50);
  border-color: var(--n-200);
}

[data-theme="light"] .main-header .tr-stat-label { color: var(--n-500); }
[data-theme="light"] .main-header .tr-stat-value { color: var(--n-800); }

/* ── Card headers that use --hero-text ───────────────────────────────── */
[data-theme="light"] .card-header h2,
[data-theme="light"] .card-header h3 {
  color: var(--n-800);
}

[data-theme="light"] .modal-header h3 {
  color: var(--n-800);
}

[data-theme="light"] .modal-close:hover {
  background: var(--n-100);
  color: var(--n-700);
}

/* ── Sidebar assessment chip ─────────────────────────────────────────── */
[data-theme="light"] .sidebar-assessment-chip,
[data-theme="light"] .sb-assess-chip {
  background: var(--brand-light);
  border-color: var(--brand-muted);
  color: var(--brand);
}

[data-theme="light"] .sb-assess-chip:hover {
  background: var(--brand-tint);
}

[data-theme="light"] .sb-assess-chip-name {
  color: var(--brand);
}

[data-theme="light"] .update-dot {
  border-color: #ffffff;
}

/* ── Admin subnav ────────────────────────────────────────────────────── */
[data-theme="light"] .adm-subnav {
  background: var(--n-100);
  border-bottom: 1px solid var(--n-200);
}

/* ── Theme swatch active ring ────────────────────────────────────────── */
[data-theme="light"] .theme-swatch--active {
  border-color: var(--n-400);
  box-shadow: 0 0 0 2px var(--n-0), 0 0 0 4px var(--n-300);
}

/* ── Sidebar zone labels ─────────────────────────────────────────────── */
[data-theme="light"] .sidebar-zone-label {
  color: var(--n-400);
}

[data-theme="light"] .sidebar-zone-divider {
  background: var(--n-200);
}

/* ── Light swatch visibility — give it a border so it's visible on dark sidebars ── */
.theme-swatch[data-theme="light"] {
  border: 1.5px solid var(--n-300);
  box-shadow: inset 0 0 0 1px var(--n-200);
}

/* ════════════════════════════════════════════════════════════
   SO Claim Workflow — shared badges and pipeline
   ════════════════════════════════════════════════════════════ */

/* Shared claim status badge */
.so-claim-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.so-claim-draft     { background: var(--n-100);          color: var(--n-600); }
.so-claim-submitted { background: var(--brand-tint);     color: var(--brand-active); }
.so-claim-review    { background: var(--amber-light);    color: var(--warning-dark, #854d0e); }
.so-claim-accepted  { background: var(--success-light);  color: var(--success-dark, #166534); }
.so-claim-rejected  { background: var(--danger-light);   color: var(--danger); }

/* Shared action buttons */
.btn-so-submit {
  background: var(--brand);
  color: var(--n-0);
  border: none;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.btn-so-submit:hover { background: var(--brand-hover); }

.btn-success {
  background: var(--success);
  color: var(--n-0);
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.btn-success:hover { filter: brightness(0.9); }

.btn-warn {
  background: var(--amber);
  color: var(--n-0);
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.btn-warn:hover { filter: brightness(0.9); }

.btn-danger-outline {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.btn-danger-outline:hover { background: var(--danger-light); }

/* SO claim pipeline (SO input view progress card) */
.so-pipeline-grid {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.so-pipeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--n-50);
  border: 1px solid var(--n-200);
  border-radius: 8px;
  padding: 10px 18px;
  min-width: 80px;
  text-align: center;
}
.so-pipeline-step--ok     { background: var(--success-light); border-color: var(--success-border); }
.so-pipeline-step--warn   { background: var(--amber-light);   border-color: var(--warning-border); }
.so-pipeline-step--danger { background: var(--danger-light);  border-color: var(--danger-border, #fca5a5); }
.so-pipeline-step--info   { background: var(--brand-light);   border-color: var(--brand-muted); }
.so-pipeline-num {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--n-800);
}
.so-pipeline-step--ok     .so-pipeline-num { color: var(--success-dark, #166534); }
.so-pipeline-step--warn   .so-pipeline-num { color: var(--warning, #d97706); }
.so-pipeline-step--danger .so-pipeline-num { color: var(--danger); }
.so-pipeline-step--info   .so-pipeline-num { color: var(--brand); }
.so-pipeline-lbl {
  font-size: var(--text-2xs);
  color: var(--n-500);
  margin-top: 4px;
  white-space: nowrap;
}
.so-pipeline-arrow {
  padding: 0 6px;
  color: var(--n-300);
  font-size: var(--text-sm);
}

/* Card border tint by claim status — SO input cards */
.so-ctrl-card.so-claim-submitted    { border-left: 3px solid var(--brand); }
.so-ctrl-card.so-claim-under_review { border-left: 3px solid var(--amber); }
.so-ctrl-card.so-claim-accepted     { border-left: 3px solid var(--success); }
.so-ctrl-card.so-claim-rejected     { border-left: 3px solid var(--danger); }

/* Assessor feedback banner inside SO input card */
.so-review-feedback {
  padding: 8px 12px;
  font-size: var(--text-xs);
  border-radius: 4px;
  margin: 4px 0 0;
}
.so-review-feedback--rejected { background: var(--danger-light);  color: var(--danger); }
.so-review-feedback--accepted { background: var(--success-light); color: var(--success-dark, #166534); }

/* Locked-state note inside SO input card */
.so-locked-note {
  padding: 8px 12px;
  font-size: var(--text-xs);
  background: var(--n-50);
  border: 1px solid var(--n-200);
  border-radius: 4px;
  color: var(--n-600);
  margin-bottom: 10px;
}

/* AI suggestion panel */
.so-ai-btn { background: var(--brand-tint); color: var(--brand); border: 1px solid var(--brand-muted); }
.so-ai-loading { font-size: var(--text-xs); color: var(--n-500); padding: 8px 0; }
.so-ai-error   { font-size: var(--text-xs); color: var(--danger); padding: 8px 0; }
.so-ai-suggestion-panel {
  background: var(--brand-light);
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 8px 0;
}
.so-ai-suggestion-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--brand);
  margin-bottom: 6px;
}
.so-ai-model { font-weight: 400; color: var(--n-500); font-size: var(--text-2xs); }
.so-ai-suggestion-body { font-size: var(--text-sm); white-space: pre-wrap; color: var(--hero-strong); margin-bottom: 8px; }
.so-ai-suggestion-actions { display: flex; gap: 6px; }

/* ════════════════════════════════════════════════════════════
   SO Claim Panel — controls-inline.js assessor view
   ════════════════════════════════════════════════════════════ */

.il-so-claim-block {
  border-radius: 6px;
  border: 1px solid var(--n-200);
  background: var(--n-50);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.il-so-claim-block.il-so-claim--submitted { border-color: var(--brand-muted);    background: var(--brand-light); }
.il-so-claim-block.il-so-claim--review    { border-color: var(--warning-border); background: var(--amber-light); }
.il-so-claim-block.il-so-claim--accepted  { border-color: var(--success-border); background: var(--success-light); }
.il-so-claim-block.il-so-claim--rejected  { border-color: var(--danger-border, #fca5a5); background: var(--danger-light); }

.il-so-claim-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.il-so-claim-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: var(--text-2xs);
  font-weight: 700;
  background: var(--n-200);
  color: var(--n-700);
}
.il-so-claim--submitted .il-so-claim-badge { background: var(--brand-tint);     color: var(--brand-active); }
.il-so-claim--review    .il-so-claim-badge { background: var(--amber-light);    color: var(--warning-dark, #854d0e); }
.il-so-claim--accepted  .il-so-claim-badge { background: var(--success-light);  color: var(--success-dark, #166534); }
.il-so-claim--rejected  .il-so-claim-badge { background: var(--danger-light);   color: var(--danger); }

.il-so-claim-meta { font-size: var(--text-2xs); color: var(--n-500); font-weight: 400; }
.il-so-claim-notes { font-size: var(--text-sm); white-space: pre-wrap; color: var(--hero-strong); margin-bottom: 6px; }
.il-so-claim-notes--empty { color: var(--n-400); font-style: italic; }
.il-so-claim-review-note {
  font-size: var(--text-xs);
  background: var(--amber-light);
  border-radius: 4px;
  padding: 4px 8px;
  color: var(--warning-dark, #78350f);
  margin-bottom: 6px;
}
.il-so-claim-review-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--n-200);
}
.il-so-claim-review-row input[type="text"] {
  padding: 4px 8px;
  border: 1px solid var(--n-300);
  border-radius: 4px;
  font-size: var(--text-xs);
  background: var(--hero-bg);
  color: var(--hero-strong);
}

/* ════════════════════════════════════════════════════════════
   SO Assessor Review Dashboard
   ════════════════════════════════════════════════════════════ */

.so-asr-bucket {
  border: 1px solid var(--n-200);
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
}
.so-asr-bucket-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  background: var(--n-50);
  user-select: none;
  list-style: none;
  color: var(--n-700, #374151);
}
.so-asr-bucket-summary::-webkit-details-marker { display: none; }
.so-asr-bucket[open] .so-asr-bucket-summary { border-bottom: 1px solid var(--n-200); }

/* Chevron rotates when bucket is open */
.so-asr-chevron { flex-shrink: 0; color: var(--n-400); transition: transform .15s; }
.so-asr-bucket[open] .so-asr-chevron { transform: rotate(0deg); }
details:not([open]) .so-asr-chevron { transform: rotate(-90deg); }

.so-asr-row { border-bottom: 1px solid var(--n-100); background: var(--surface); }
.so-asr-row:last-child { border-bottom: none; }
.so-asr-row.so-claim-submitted    { border-left: 3px solid var(--brand); }
.so-asr-row.so-claim-under_review { border-left: 3px solid var(--amber); }
.so-asr-row.so-claim-accepted     { border-left: 3px solid var(--success); }
.so-asr-row.so-claim-rejected     { border-left: 3px solid var(--danger); }

.so-asr-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  flex-wrap: wrap;
}
.so-asr-name {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--n-800, #1e293b);
  min-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-asr-sub {
  font-size: var(--text-2xs);
  color: var(--n-400);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-asr-meta { font-size: var(--text-2xs); color: var(--n-400); }

.so-asr-detail {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--n-100);
  background: var(--n-25, var(--n-50));
}
.so-asr-claim-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--n-500);
  margin-bottom: 6px;
}
.so-asr-claim-notes {
  font-size: var(--text-sm);
  white-space: pre-wrap;
  color: var(--n-800, #1e293b);
  margin-bottom: 10px;
  padding: 10px 12px;
  background: var(--n-25, var(--n-50));
  border: 1px solid var(--n-200);
  border-radius: 6px;
  line-height: 1.6;
}
.so-asr-claim-notes--empty { color: var(--n-400); font-style: italic; }
.so-asr-field-list { margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.so-asr-field-row { display: flex; gap: 8px; font-size: var(--text-sm); }
.so-asr-field-key { font-weight: 600; color: var(--n-600); min-width: 140px; flex-shrink: 0; }
.so-asr-field-val { color: var(--n-800); }
.so-asr-prior-note {
  font-size: var(--text-xs);
  background: var(--amber-light);
  border-radius: 4px;
  padding: 6px 10px;
  color: var(--warning-dark, #78350f);
  margin-bottom: 10px;
}
.so-asr-review-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--n-200);
}
.so-asr-note-input {
  flex: 1;
  min-width: 180px;
  padding: 6px 10px;
  border: 1px solid var(--n-300);
  border-radius: 4px;
  font-size: var(--text-xs);
  background: var(--surface);
  color: var(--n-800, #1e293b);
}
.so-asr-note-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint); }
.so-asr-empty {
  padding: 14px 14px;
  color: var(--n-400);
  font-size: var(--text-sm);
  font-style: italic;
}

/* Control context block — shown in both SO card and assessor detail panel */
.so-ctrl-context {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--n-150, var(--n-200));
}
.so-ctx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.so-ctx-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: var(--text-xs);
  background: var(--n-100);
  border: 1px solid var(--n-200);
  border-radius: 4px;
  padding: 2px 8px;
  color: var(--hero-strong);
}
.so-ctx-tag-key {
  font-weight: 600;
  color: var(--n-500);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.so-ctx-desc {
  font-size: var(--text-sm);
  color: var(--n-600);
  line-height: 1.55;
  white-space: pre-wrap;
}


/* ─── SO Implementation Status Badges ─────────────────────────────────────── */
.so-impl-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--text-2xs);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.so-impl-implemented        { background: var(--success-light); color: var(--success-dark, #166534); }
.so-impl-partially_implemented { background: var(--amber-light); color: var(--amber-dark, #92400e); }
.so-impl-not_implemented    { background: var(--danger-light); color: var(--danger-dark, #991b1b); }
.so-impl-not_applicable     { background: var(--n-100); color: var(--n-500); }

/* ─── SO Claim Structured Form ─────────────────────────────────────────────── */
.so-claim-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.so-claim-form-status,
.so-claim-form-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.so-claim-form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--hero-strong);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.so-claim-form-req {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--danger);
}
.so-claim-form-sublabel {
  font-size: var(--text-2xs);
  font-weight: 400;
  color: var(--n-500);
}
.so-impl-select {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--n-300);
  border-radius: 6px;
  font-size: var(--text-sm);
  color: var(--hero-strong);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s;
}
.so-impl-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.so-impl-select:disabled {
  background: var(--n-50);
  color: var(--n-500);
  cursor: not-allowed;
}
.so-impl-hint {
  font-size: var(--text-2xs);
  color: var(--n-500);
  min-height: 16px;
  line-height: 1.4;
}
.so-claim-form-guidance {
  background: var(--n-50);
  border: 1px solid var(--n-200);
  border-radius: 6px;
  padding: 10px 14px;
}
.so-claim-form-guidance-title {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--n-600);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.so-claim-form-guidance-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.so-claim-form-guidance-list li {
  font-size: var(--text-xs);
  color: var(--n-600);
  line-height: 1.45;
}

/* ─── Assessor detail — SO self-assessment status row ──────────────────────── */
.so-asr-impl-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--n-150, var(--n-200));
  margin-bottom: 6px;
}

/* ─── Inline panel SO select label ────────────────────────────────────────── */
.il-so-impl-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--hero-strong);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

/* ─── SO Owner Claims — skeleton + fade ──────────────────────────────────── */
.so-stat-skeleton {
  height: 52px; width: 100%;
  background: linear-gradient(90deg, var(--n-100) 25%, var(--n-50) 50%, var(--n-100) 75%);
  background-size: 200% 100%;
  animation: so-shimmer 1.2s infinite;
  border-radius: 8px;
}
@keyframes so-shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
.so-card-fade-out {
  opacity: 0; transform: translateX(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

/* ─── SO Owner Claims — Tab bar ────────────────────────────────────────────── */
.so-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--n-200);
  background: var(--n-50);
  overflow-x: auto;
  flex-shrink: 0;
}
.so-tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--n-500);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s, border-color .12s;
}
.so-tab-btn:hover { color: var(--n-700, #374151); }
.so-tab-btn--active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.so-tab-count {
  background: var(--n-200);
  color: var(--n-600);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: var(--text-2xs);
  font-weight: 700;
}
.so-tab-count--active { background: var(--brand-tint); color: var(--brand); }
.so-tab-content { min-height: 120px; }
.so-empty-tab { padding: 32px; text-align: center; color: var(--n-400); font-size: var(--text-sm); }

/* ─── SO chapter groups (collapsed by default) ─────────────────────────────── */
.so-chapter-group { border-bottom: 1px solid var(--n-100); }
.so-chapter-group:last-child { border-bottom: none; }
.so-chapter-group > summary {
  cursor: pointer;
  padding: 10px 16px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--n-700, #374151);
  background: var(--n-25, var(--n-50));
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  user-select: none;
}
.so-chapter-group > summary::-webkit-details-marker { display: none; }
.so-chapter-group[open] > summary { border-bottom: 1px solid var(--n-100); }
.so-chapter-name { flex: 1; }
.so-chapter-count {
  background: var(--n-200);
  color: var(--n-600);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: var(--text-2xs);
  font-weight: 700;
}
.so-group-body { }

/* ─── SO control card header actions ───────────────────────────────────────── */
.so-ctrl-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.so-open-ctrl-btn {
  background: var(--n-50);
  border: 1px solid var(--n-300);
  color: var(--n-600);
  font-size: var(--text-2xs);
}
.so-open-ctrl-btn:hover { background: var(--n-100); color: var(--n-800, #1e293b); }

/* ─── SO has-input indicator dot ───────────────────────────────────────────── */
.so-has-input-dot {
  font-size: 8px;
  color: var(--success);
  line-height: 1;
  flex-shrink: 0;
}

/* ─── SO Search ─────────────────────────────────────────────────────────────── */
.so-list-search { padding: 12px 16px; border-bottom: 1px solid var(--n-200); }
.so-search-input {
  width: 100%; max-width: 360px; padding: 7px 12px;
  border: 1px solid var(--n-300); border-radius: 6px;
  background: var(--surface); color: var(--n-800);
  font-size: var(--text-sm);
}
.so-search-input:focus { outline: none; border-color: var(--brand); }

/* ─── SO Bulk submit bar ────────────────────────────────────────────────────── */
.so-bulk-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--brand);
  border-top: 1px solid var(--brand-active);
  z-index: 10;
}
.so-bulk-bar-count {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
  flex: 1;
}
.so-bulk-cb {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--brand);
}
.so-bulk-cb-placeholder {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.so-select-all-btn {
  margin-left: auto;
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--brand);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.so-select-all-btn:hover { background: var(--brand-tint); }

/* ─── Sidebar secondary links ───────────────────────────────────────────────── */
.sidebar-link--secondary {
  padding-left: 28px;
  font-size: var(--text-2xs, 11px);
  opacity: .75;
}
.sidebar-link--secondary svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.sidebar-link--secondary .sidebar-link-label {
  font-size: var(--text-2xs, 11px);
}
.sidebar-link--secondary:hover {
  opacity: 1;
}
.sidebar-link--secondary.active {
  opacity: 1;
}

/* ─── ATO Certificate (.ato-*) ─────────────────────────────────────────── */
.ato-body {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ato-intro {
  font-size: var(--text-sm);
  color: var(--n-500);
  margin: 0;
}
.ato-cert-empty {
  font-size: var(--text-sm);
  color: var(--n-400);
  font-style: italic;
  margin: 0;
}
.ato-cert-block {
  border: 1px solid var(--n-200);
  border-radius: 8px;
  padding: 16px;
  background: var(--n-0, #fff);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ato-cert-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ato-cert-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ato-cert-num {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--n-700);
}
.ato-cert-type {
  font-size: var(--text-sm);
  color: var(--n-500);
}
.ato-cert-meta {
  font-size: 12px;
  color: var(--n-500);
}
.ato-cert-conditions {
  font-size: var(--text-sm);
  color: var(--n-600);
  background: var(--warning-light, #fefce8);
  border-radius: 6px;
  padding: 10px 12px;
}
.ato-cert-conditions ul {
  margin: 6px 0 0 16px;
  padding: 0;
}
.ato-cert-conditions li { margin-bottom: 4px; }
.ato-cert-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ato-cert-link-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.ato-cert-link-input {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  padding: 5px 8px;
  border: 1px solid var(--n-200);
  border-radius: 5px;
  background: var(--n-50, #f9fafb);
  color: var(--n-600);
  cursor: pointer;
}
.ato-issue-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ato-cert-hint {
  font-size: var(--text-sm);
  color: var(--n-400);
  font-style: italic;
  margin: 0;
}
.ato-revoked-hist {
  font-size: var(--text-sm);
  color: var(--n-400);
}
.ato-revoked-hist summary {
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}
.btn-danger-outline {
  background: transparent;
  border: 1px solid var(--danger, #ef4444);
  color: var(--danger, #ef4444);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: var(--text-sm);
  cursor: pointer;
  white-space: nowrap;
}
.btn-danger-outline:hover { background: var(--danger, #ef4444); color: #fff; }

/* ATO public verify page */
.ato-verify-wrap {
  background: var(--n-0, #fff);
  border: 1px solid var(--n-200);
  border-radius: 12px;
  padding: 40px;
  max-width: 600px;
  width: 100%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
.ato-verify-logo {
  font-size: 22px;
  font-weight: 800;
  color: var(--brand);
  margin-bottom: 28px;
  text-align: center;
  letter-spacing: -0.5px;
}
.ato-vfy-status {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.ato-vfy-type {
  text-align: center;
  font-size: var(--text-xl, 18px);
  font-weight: 700;
  color: var(--n-800);
  margin-bottom: 4px;
}
.ato-vfy-certnum {
  text-align: center;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  color: var(--n-500);
  margin-bottom: 24px;
}
.ato-vfy-grid {
  border: 1px solid var(--n-200);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
.ato-vfy-row {
  display: flex;
  border-bottom: 1px solid var(--n-100);
}
.ato-vfy-row:last-child { border-bottom: none; }
.ato-vfy-key {
  width: 180px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--n-500);
  padding: 10px 12px;
  background: var(--n-50, #f9fafb);
  border-right: 1px solid var(--n-200);
}
.ato-vfy-val {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--n-700);
  padding: 10px 12px;
}
.ato-vfy-section { margin-bottom: 16px; }
.ato-vfy-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--n-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.ato-vfy-cond-list {
  margin: 0 0 0 16px;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--n-700);
}
.ato-vfy-cond-list li { margin-bottom: 4px; }
.ato-vfy-revoked {
  background: var(--danger-light, #fee2e2);
  color: #991b1b;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: var(--text-sm);
  margin-bottom: 16px;
}
.ato-vfy-footer {
  font-size: 11px;
  color: var(--n-400);
  text-align: center;
  margin-top: 8px;
  border-top: 1px solid var(--n-100);
  padding-top: 16px;
}

/* ─── Evidence Expiry Card (.evx-*) ────────────────────────────────────── */
.evx-bucket {
  margin-bottom: 16px;
}
.evx-bucket:last-child { margin-bottom: 0; }
.evx-bucket-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.evx-bucket-count {
  background: var(--n-100);
  color: var(--n-600);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
}
.evx-item-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.evx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--n-150, var(--n-200));
  border-radius: 7px;
  background: var(--n-0, #fff);
}
.evx-item-body { flex: 1; min-width: 0; }
.evx-item-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--n-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evx-item-meta {
  font-size: 12px;
  color: var(--n-500);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.evx-ctrl {
  font-size: 11px;
  color: var(--n-500);
  background: var(--n-100);
  border-radius: 4px;
  padding: 1px 6px;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evx-ctrl--none { color: var(--n-400); font-style: italic; background: transparent; }
.evx-days {
  font-size: 11px;
  font-weight: 600;
  color: var(--amber);
}
.evx-days--expired { color: var(--danger); }
.evx-renew-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── SO-04: System Owner Progress Dashboard (.sop-*) ─────────────────────── */
.sop-dashboard {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
  align-items: flex-start;
}
.sop-progress-card {
  flex: 1;
  min-width: 0;
  padding: 18px 20px 14px;
}
.sop-card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--n-600);
  margin-bottom: 12px;
}
.sop-progress-body {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 14px;
}
.sop-donut {
  flex-shrink: 0;
}
.sop-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.sop-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--n-600);
}
.sop-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sop-legend-label {
  flex: 1;
}
.sop-legend-n {
  font-weight: 600;
  color: var(--n-700);
}
.sop-progress-bar-wrap {
  margin-top: 4px;
}
.sop-progress-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--n-100);
}
.sop-bar-seg { height: 100%; transition: width 0.3s; }
.sop-bar-accepted  { background: var(--brand); }
.sop-bar-submitted { background: var(--amber); }
.sop-bar-rejected  { background: var(--danger); }
.sop-bar-draft     { background: var(--n-200); }
.sop-bar-label {
  font-size: var(--text-2xs);
  color: var(--n-400);
  margin-top: 5px;
}
.sop-side-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 160px;
  flex-shrink: 0;
}
.sop-metric-card {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sop-metric-card--warn  { border-left: 3px solid var(--amber); }
.sop-metric-card--danger { border-left: 3px solid var(--danger); }
.sop-metric-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.sop-metric-body { min-width: 0; }
.sop-metric-num {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--n-800);
}
.sop-metric-lbl {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--n-600);
}
.sop-metric-hint {
  font-size: var(--text-2xs);
  color: var(--n-400);
  margin-top: 2px;
}
@media (max-width: 680px) {
  .sop-dashboard { flex-direction: column; }
  .sop-side-cards { flex-direction: row; width: 100%; }
  .sop-metric-card { flex: 1; }
}

/* ── CTRL-07: Control comment thread (.ilcmt-*) ─────────────────────────── */
.il-comments-wrap {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  overflow-y: auto;
}
.ilcmt-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.ilcmt-empty {
  color: var(--n-400);
  font-size: var(--text-xs);
  padding: 8px 0;
}
.ilcmt-item {
  background: var(--n-50);
  border: 1px solid var(--n-200);
  border-radius: 6px;
  padding: 8px 10px;
}
.ilcmt-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.ilcmt-author {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--n-700);
}
.ilcmt-time {
  font-size: var(--text-2xs);
  color: var(--n-400);
}
.ilcmt-body {
  font-size: var(--text-xs);
  color: var(--n-700);
  white-space: pre-wrap;
  word-break: break-word;
}
.ilcmt-compose {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  border-top: 1px solid var(--n-200);
  padding-top: 8px;
  flex-shrink: 0;
}
.ilcmt-textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--n-300);
  border-radius: 5px;
  padding: 6px 8px;
  font-size: var(--text-xs);
  font-family: inherit;
  color: var(--n-800);
  background: var(--white);
  min-height: 52px;
}
.ilcmt-textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-light);
}

/* ── UX-09: Site-wide announcement banner (.ann-*) ────────────────────────── */
.ann-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: var(--text-sm);
  font-weight: 500;
  border-bottom: 1px solid transparent;
}
.ann-banner--info    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.ann-banner--warning { background: var(--amber-light); color: #92400e; border-color: #fde68a; }
.ann-banner--danger  { background: var(--danger-light); color: var(--danger); border-color: #fecaca; }
.ann-banner--success { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.ann-banner-text { flex: 1; }
.ann-banner-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  opacity: .6;
  padding: 0 4px;
  flex-shrink: 0;
  color: inherit;
}
.ann-banner-close:hover { opacity: 1; }

/* ── CTRL-09: Duplicate control ID warning ───────────────────────────────── */
.ctrl-dup-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--amber-light, #fef9ec);
  border: 1px solid var(--amber-muted, #f5c842);
  border-radius: 7px;
  padding: 10px 14px;
  font-size: var(--text-sm);
  color: var(--n-700);
  margin-bottom: 10px;
}
.ctrl-dup-banner-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.ctrl-dup-banner code { background: rgba(0,0,0,.06); padding: 1px 4px; border-radius: 3px; font-size: var(--text-xs); }
.ctrl-dup-banner-close {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  padding: 0 2px;
  font-size: 13px;
  color: var(--n-400);
  flex-shrink: 0;
}
.ctrl-dup-banner-close:hover { color: var(--n-700); }
.ctrl-dup-badge {
  display: inline-block;
  background: var(--amber-light, #fef9ec);
  border: 1px solid var(--amber-muted, #f5c842);
  color: var(--amber-dark, #7c5800);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1.4;
}

/* ── ilmap-* — FW-03: Cross-framework mappings tab in inline panel ──────── */
.ilmap-wrap { padding: 12px 14px; }
.ilmap-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ilmap-ctrl-ref {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--n-800);
  font-family: monospace;
}
.ilmap-count {
  font-size: var(--text-xs);
  color: var(--n-400);
}
.ilmap-fw-group { margin-bottom: 14px; }
.ilmap-fw-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--n-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}
.ilmap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}
.ilmap-table th {
  text-align: left;
  color: var(--n-400);
  font-weight: 600;
  padding: 3px 6px 5px;
  border-bottom: 1px solid var(--n-100);
}
.ilmap-table td {
  padding: 5px 6px;
  color: var(--n-700);
  border-bottom: 1px solid var(--n-50);
  vertical-align: middle;
}
.ilmap-table tr:last-child td { border-bottom: none; }
.ilmap-ctrl-id { font-family: monospace; font-weight: 600; color: var(--n-800); }
.ilmap-badge {
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: capitalize;
}
.ilmap-notes { color: var(--n-500); font-style: italic; }
.ilmap-draft-note {
  background: var(--amber-light);
  border: 1px solid var(--amber-muted);
  border-radius: 5px;
  padding: 6px 10px;
  font-size: var(--text-xs);
  color: var(--amber-dark, #7c5800);
  margin-bottom: 10px;
}
.ilmap-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--n-500);
  font-size: var(--text-sm);
}
.ilmap-empty-icon { font-size: 28px; margin-bottom: 6px; }
.ilmap-empty-hint { font-size: var(--text-xs); color: var(--n-400); margin-top: 4px; }

/* ── mgl-* — Magic upload links table (evidence library) ─────────────────── */
.mgl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--n-100);
  flex-wrap: wrap;
}
.mgl-row:last-child { border-bottom: none; }
.mgl-row--inactive { opacity: 0.55; }
.mgl-row-main { display: flex; align-items: center; gap: 10px; flex: 1; flex-wrap: wrap; min-width: 0; }
.mgl-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.mgl-status {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
}
.mgl-status--active { background: var(--success-bg, #dcfce7); color: var(--success-dark, #166534); }
.mgl-status--expired { background: var(--n-100); color: var(--n-500); }
.mgl-status--revoked { background: var(--danger-bg, #fee2e2); color: var(--danger-dark, #991b1b); }
.mgl-label { font-size: var(--text-sm); font-weight: 600; color: var(--n-700); }
.mgl-meta { font-size: var(--text-xs); color: var(--n-400); }

/* ── mup-* — Magic upload public page ────────────────────────────────────── */
.mup-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--bg-secondary, #f5f7fa);
}
.mup-card {
  background: var(--bg-primary, #fff);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  padding: 40px 36px;
  width: 100%;
  max-width: 520px;
}
.mup-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.mup-logo-name {
  font-size: var(--text-xl, 1.25rem);
  font-weight: 700;
  color: var(--n-800);
}
.mup-spinner { color: var(--n-400); font-size: var(--text-sm); padding: 24px 0; text-align: center; }
.mup-intro { margin-bottom: 24px; }
.mup-title { font-size: var(--text-xl, 1.25rem); font-weight: 700; margin: 0 0 6px; color: var(--n-900); }
.mup-sub { font-size: var(--text-sm); color: var(--n-600); margin: 0 0 4px; }
.mup-meta { font-size: var(--text-xs); color: var(--n-400); margin: 0; }
.mup-drop {
  border: 2px dashed var(--n-200);
  border-radius: 10px;
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.mup-drop:hover, .mup-drop--over {
  border-color: var(--brand);
  background: var(--brand-light, #eff6ff);
}
.mup-drop-icon { font-size: 2rem; margin-bottom: 8px; }
.mup-drop-text { font-size: var(--text-sm); font-weight: 600; color: var(--n-700); }
.mup-drop-sub { font-size: var(--text-xs); color: var(--n-400); margin-top: 4px; }
.mup-err {
  background: var(--danger-bg, #fee2e2);
  color: var(--danger-dark, #991b1b);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: var(--text-sm);
  margin-top: 10px;
}
.mup-progress-bar {
  height: 6px;
  background: var(--n-100);
  border-radius: 99px;
  overflow: hidden;
  margin: 12px 0 4px;
}
.mup-progress-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 99px;
  width: 0;
  transition: width 0.2s;
}
.mup-progress-label { font-size: var(--text-xs); color: var(--n-400); }
.mup-submit { width: 100%; margin-top: 20px; padding: 12px; font-size: var(--text-base); }
.mup-success, .mup-error {
  text-align: center;
  padding: 32px 16px;
}
.mup-success-icon, .mup-error-icon { font-size: 3rem; margin-bottom: 12px; }
.mup-success h2 { color: var(--success-dark, #166534); margin: 0 0 8px; }
.mup-error h2 { color: var(--danger, #dc2626); margin: 0 0 8px; }
.mup-success p, .mup-error p { color: var(--n-500); font-size: var(--text-sm); margin: 0 0 20px; }

/* ── notif-job-* — Scheduled notification jobs panel (NOTIF-02) ─────────── */
.notif-job-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--n-100);
  flex-wrap: wrap;
}
.notif-job-row:last-child { border-bottom: none; }
.notif-job-info { flex: 1; min-width: 0; }
.notif-job-key { font-size: var(--text-sm); font-weight: 600; color: var(--n-800); }
.notif-job-desc { font-size: var(--text-xs); color: var(--n-500); margin-top: 2px; }
.notif-job-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.notif-job-result { font-size: var(--text-xs); font-weight: 600; }
.notif-job-result--ok   { color: var(--success, #16a34a); }
.notif-job-result--muted { color: var(--n-400); }
.notif-job-result--err  { color: var(--danger, #dc2626); }

/* ── tr-filter-pill — Dismissible active-filter pill in table toolbars ───── */
.tr-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: opacity 0.15s;
}
.tr-filter-pill:hover { opacity: 0.75; }
.tr-filter-pill--danger {
  background: var(--danger-bg, #fee2e2);
  color: var(--danger-dark, #991b1b);
  border-color: var(--danger-light, #fecaca);
}

/* ── tr-stat--clickable — Stat tile that acts as a filter shortcut ────────── */
.tr-stat--clickable { cursor: pointer; }
.tr-stat--clickable:hover { filter: brightness(0.95); }

/* ── rfitpl-* — RFI template picker and admin management (RFI-04) ─────────── */
.rfitpl-btn {
  font-size: var(--text-xs);
  color: var(--brand);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  margin-bottom: 8px;
}
.rfitpl-btn:hover { opacity: 0.75; }
.rfitpl-picker { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.rfitpl-picker-empty { color: var(--n-400); font-size: var(--text-sm); padding: 12px 0; text-align: center; }
.rfitpl-category-header {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--n-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 0 2px;
}
.rfitpl-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.rfitpl-item:hover { border-color: var(--brand); background: var(--brand-bg, #f0f4ff); }
.rfitpl-item-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.rfitpl-item-desc  { font-size: var(--text-xs); color: var(--n-500); }
.rfitpl-item-last  { border-color: var(--brand); }
.rfitpl-last-badge { font-size: 10px; font-weight: 600; background: var(--brand-bg, #e8f0fe); color: var(--brand); border-radius: 4px; padding: 1px 5px; margin-left: 6px; }

/* Admin management table */
.rfitpl-admin-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.rfitpl-admin-table th { text-align: left; padding: 6px 10px; font-weight: 600; color: var(--n-500); font-size: var(--text-xs); border-bottom: 1px solid var(--border); }
.rfitpl-admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-light, var(--border)); vertical-align: middle; }
.rfitpl-admin-table tr:last-child td { border-bottom: none; }
.rfitpl-add-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 12px; }
.rfitpl-add-row .form-input { flex: 1; min-width: 140px; }
.rfitpl-add-row .rfitpl-add-desc { flex: 2; min-width: 200px; }

/* ── atpl — Assessment Template picker / wizard ─────────────────────────── */
.atpl-wizard-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
  color: var(--n-400);
  font-size: var(--text-sm);
}
.atpl-wizard-divider::before,
.atpl-wizard-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.atpl-wizard-tpl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.atpl-wizard-tpl-label {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--n-600);
  font-weight: 500;
}
.atpl-picker-modal {
  background: var(--n-0);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.atpl-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.atpl-picker-title {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text-primary);
}
.atpl-picker-body {
  padding: 12px 16px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.atpl-picker-item {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.atpl-picker-item:hover { border-color: var(--brand); background: var(--brand-bg, #f0f4ff); }
.atpl-picker-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.atpl-picker-meta { font-size: var(--text-xs); color: var(--n-400); margin-top: 2px; }

/* ── Panel Config — preview modal ────────────────────────────────────────── */
/* The preview reuses the real panel's .il-assessor-section / .il-so-section
   / .il-section-header / .il-section-body classes so the visual output matches
   what assessors actually see. Only the modal chrome and per-role badges are
   styled here. */

.ffd-preview-modal-body {
  display: flex; flex-direction: column; gap: 14px;
  max-height: 70vh; overflow-y: auto;
  background: var(--n-50);
  padding: 14px 18px;
}

/* Role selector strip — sits between the modal header and body */
.ffd-preview-roles {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 18px;
  background: var(--n-50);
  border-bottom: 1px solid var(--n-100);
}
.ffd-preview-role-btn {
  padding: 6px 12px;
  font-size: var(--text-xs); font-weight: 600;
  border: 1px solid var(--n-200); border-radius: var(--r-base);
  background: var(--surface); color: var(--n-700);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.ffd-preview-role-btn:hover { border-color: var(--n-300); }
.ffd-preview-role-btn--active {
  background: var(--brand); border-color: var(--brand); color: var(--n-0);
}
.ffd-preview-role-hint {
  font-size: var(--text-xs); color: var(--n-500);
  padding: 0 4px; line-height: 1.4;
}

/* Lift the section header so the editable/read-only badge sits flush right. */
.ffd-preview-section .il-section-header {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
}
.ffd-preview-section .il-section-header > span:first-child { flex: 0 0 auto; }

/* Inputs in the preview shouldn't be interactive — clicks shouldn't go anywhere. */
.ffd-preview-section input,
.ffd-preview-section select,
.ffd-preview-section textarea { pointer-events: none; }

/* Editable / read-only mode badges */
.ffd-preview-pane-mode {
  font-size: var(--text-2xs); font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.ffd-preview-pane-mode--edit {
  background: var(--success-light, #d1fae5); color: var(--success, #059669);
}
.ffd-preview-pane-mode--ro {
  background: var(--n-100); color: var(--n-500);
}

.ffd-preview-empty {
  color: var(--n-400); font-size: var(--text-sm); padding: 24px; text-align: center;
}

/* ─── pcf — Platform Common Fields ──────────────────────────────────────── */
.pcf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 4px 0 24px;
}
.pcf-loading {
  color: var(--n-400); font-size: var(--text-sm); padding: 32px 0;
  grid-column: 1 / -1;
}
.pcf-card {
  background: var(--surface);
  border: 1px solid var(--n-200);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pcf-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pcf-card-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.pcf-rename-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--n-400);
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
}
.pcf-rename-btn:hover { color: var(--brand); background: var(--brand-bg, #f0f4ff); }
.pcf-card-type {
  font-size: var(--text-2xs);
  color: var(--n-400);
  font-family: monospace;
  margin-bottom: 4px;
}
.pcf-opts-section { margin-top: 8px; border-top: 1px solid var(--n-100); padding-top: 10px; }
.pcf-opts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pcf-opts-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--n-500);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pcf-opts-list { display: flex; flex-direction: column; gap: 4px; }
.pcf-opt-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pcf-opt-chip {
  flex: 1;
  font-size: var(--text-xs);
  background: var(--n-50);
  border: 1px solid var(--n-200);
  border-radius: 6px;
  padding: 3px 8px;
  color: var(--text-primary);
}
.pcf-opt-action {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--n-400);
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
}
.pcf-opt-action:hover { color: var(--brand); background: var(--brand-bg, #f0f4ff); }
.pcf-opt-action--del:hover { color: var(--danger); background: var(--rose-light, #fff0f0); }
.pcf-opts-empty { font-size: var(--text-xs); color: var(--n-300); font-style: italic; padding: 4px 0; }
.pcf-inline-input {
  background: var(--n-50); border: 1px solid var(--brand); border-radius: 4px;
  padding: 2px 6px; font-size: var(--text-xs); color: var(--text-primary); outline: none;
}
.pcf-inline-input:focus { box-shadow: 0 0 0 2px var(--brand-bg, #e8f0fe); }

/* ── tn-* Tenant / Organisation Management (vendor admin) ────────────────── */
.tn-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.tn-search { flex:1; min-width:180px; max-width:320px; padding:7px 12px; border:1px solid var(--n-200); border-radius:8px; font-size:var(--text-sm); background:var(--bg-primary); color:var(--text-primary); }
.tn-search:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-bg,#e8f0fe); }

.tn-table-wrap { overflow-x:auto; border-radius:10px; border:1px solid var(--n-200); }
.tn-table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.tn-table th { background:var(--n-50); color:var(--n-500); font-weight:600; font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.5px; padding:9px 14px; border-bottom:1px solid var(--n-200); text-align:left; white-space:nowrap; }
.tn-table td { padding:11px 14px; border-bottom:1px solid var(--n-100); vertical-align:middle; }
.tn-table tr:last-child td { border-bottom:none; }
.tn-table tr:hover td { background:var(--n-50); }

.tn-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:2px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.4px; }
.tn-badge--active   { background:var(--success-light); color:var(--success); }
.tn-badge--pending  { background:var(--warning-light); color:var(--warning); }
.tn-badge--suspended{ background:var(--n-100); color:var(--n-500); }

.tn-actions { display:flex; gap:6px; }
.tn-btn { padding:4px 10px; border-radius:6px; font-size:var(--text-xs); font-weight:500; cursor:pointer; border:1px solid transparent; white-space:nowrap; }
.tn-btn--primary { background:var(--brand); color:#fff; border-color:var(--brand); }
.tn-btn--primary:hover { opacity:.88; }
.tn-btn--outline { background:transparent; color:var(--brand); border-color:var(--n-200); }
.tn-btn--outline:hover { border-color:var(--brand); background:var(--brand-bg,#f0f4ff); }
.tn-btn--danger { background:transparent; color:var(--danger); border-color:var(--n-200); }
.tn-btn--danger:hover { border-color:var(--danger); background:var(--rose-light,#fff0f0); }

.tn-empty { text-align:center; padding:48px 24px; color:var(--n-400); font-size:var(--text-sm); }
.tn-empty-icon { font-size:32px; margin-bottom:8px; }

/* Create org modal */
.tn-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tn-form-grid--full { grid-column:1/-1; }
.tn-section-divider { grid-column:1/-1; border:none; border-top:1px solid var(--n-200); margin:4px 0; }
.tn-section-label { grid-column:1/-1; font-size:var(--text-xs); font-weight:600; color:var(--n-500); text-transform:uppercase; letter-spacing:.5px; margin-bottom:-4px; }
.tn-slug-preview { font-size:var(--text-xs); color:var(--n-400); margin-top:4px; }

/* Invite row */
.tn-invite-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--n-100); font-size:var(--text-sm); }
.tn-invite-row:last-child { border-bottom:none; }
.tn-invite-token { font-family:monospace; font-size:11px; color:var(--n-500); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-invite-meta { color:var(--n-400); font-size:var(--text-xs); white-space:nowrap; }