/* ── Reset & Variables ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #ffffff;
  --bg-2:        #f4f8ff;
  --surface:     #ffffff;
  --surface-2:   #f0f5ff;
  --surface-3:   #e8f0fe;
  --border:      rgba(11,31,69,0.1);
  --border-2:    rgba(11,31,69,0.07);
  --primary:     #1d5fb4;
  --primary-h:   #2a72d5;
  --secondary:   #5b9af8;
  --text:        #0b1f45;
  --text-2:      #3f5a82;
  --text-3:      #8097b8;
  --critical:    #dc2626;
  --high:        #d97706;
  --medium:      #2563eb;
  --low:         #3b82f6;
  --info:        #64748b;
  --secure:      #059669;
  --warning:     #d97706;
  --sidebar-w:   240px;
  --radius:      12px;
  --radius-sm:   8px;
  --shadow:      0 4px 24px rgba(11,31,69,0.08);
  --shadow-sm:   0 2px 8px rgba(11,31,69,0.06);
  --transition:  0.2s ease;
  /* ── Aliases (secondary naming used throughout older CSS) ─────────────── */
  --accent:      var(--primary);
  --accent-h:    var(--primary-h);
  --text-1:      var(--text);
  --text-secondary: var(--text-2);
  --bg-1:        var(--surface);
  --bg-3:        var(--surface-3);
  --bg-4:        var(--surface-2);
  --bg-card:     var(--surface);
  --font-mono:   'JetBrains Mono', monospace;
  /* ── Focus ring shared value ────────────────────────────────────────── */
  --focus-ring:  0 0 0 3px rgba(29,95,180,0.2);
}

/* ── Light Theme (alias - same as root) ──────────────────────────────────── */
[data-theme="light"] {
  --bg:          #ffffff;
  --bg-2:        #f4f8ff;
  --surface:     #ffffff;
  --surface-2:   #f0f5ff;
  --surface-3:   #e8f0fe;
  --border:      rgba(11,31,69,0.1);
  --border-2:    rgba(11,31,69,0.07);
  --primary:     #1d5fb4;
  --primary-h:   #2a72d5;
  --text:        #0b1f45;
  --text-2:      #3f5a82;
  --text-3:      #8097b8;
  --shadow:      0 4px 24px rgba(11,31,69,0.08);
  --shadow-sm:   0 2px 8px rgba(11,31,69,0.06);
  --bg-3:        #e8f0fe;
  --bg-4:        #f0f5ff;
  --bg-card:     #ffffff;
  --text-1:      #0b1f45;
  --focus-ring:  0 0 0 3px rgba(29,95,180,0.2);
}

/* ── Dark Theme ──────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:          #080812;
  --bg-2:        #0d0d1a;
  --surface:     #12121f;
  --surface-2:   #1a1a2e;
  --surface-3:   #1e1e35;
  --border:      rgba(91,154,248,0.18);
  --border-2:    rgba(255,255,255,0.06);
  --primary:     #5b9af8;
  --primary-h:   #7bb5ff;
  --secondary:   #22d3ee;
  --text:        #e2e8f0;
  --text-2:      #94a3b8;
  --text-3:      #64748b;
  --critical:    #ef4444;
  --high:        #f97316;
  --medium:      #eab308;
  --secure:      #10b981;
  --warning:     #f59e0b;
  --shadow:      0 4px 24px rgba(0,0,0,0.4);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.3);
  --bg-3:        #1e1e35;
  --bg-4:        #1a1a2e;
  --bg-card:     #12121f;
  --text-1:      #e2e8f0;
  --focus-ring:  0 0 0 3px rgba(91,154,248,0.25);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  overflow-x: hidden;
}

h1,h2,h3,h4 { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0; top: 0;
  z-index: 100;
  transition: transform var(--transition);
  overflow: hidden;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 20px;
  border-bottom: 1px solid var(--border-2);
}

.logo-icon {
  font-size: 26px;
  color: var(--primary);
  line-height: 1;
}

.logo-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
}

.logo-accent { color: var(--primary); }

.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  overflow-x: hidden;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  text-align: left;
  width: 100%;
  position: relative;
}

.nav-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav-item.active {
  background: rgba(29,95,180,0.15);
  color: var(--primary-h);
}

.nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: .85;
}
.nav-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}
.nav-item.active .nav-icon { opacity: 1; }
.nav-item:hover .nav-icon { opacity: 1; }

.nav-label { flex: 1; }

.nav-group-label {
  padding: 8px 14px 2px;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3, #475569);
  margin-top: 4px;
}

.feat-tier-badge {
  font-size: .6rem; font-weight: 700; letter-spacing: .04em;
  background: rgba(251,191,36,.15); color: #fbbf24;
  border: 1px solid rgba(251,191,36,.3); border-radius: 4px;
  padding: 1px 5px; margin-left: 4px; vertical-align: middle;
  white-space: nowrap;
}

.nav-badge {
  background: var(--critical);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  min-width: 20px;
  text-align: center;
}

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.version-tag {
  font-size: 11px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
}

.docs-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500;
  color: var(--text-3); text-decoration: none;
  padding: 3px 7px; border-radius: 6px;
  transition: color .15s, background .15s;
}
.docs-link:hover { color: var(--text-1); background: var(--bg-2); }

/* ── Mobile header ────────────────────────────────────────────────────────── */
.mobile-header {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  align-items: center;
  padding: 0 16px;
  gap: 14px;
  z-index: 200;
}

.mobile-menu-btn {
  background: none;
  border: none;
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
}

.mobile-logo {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

/* ── Main content ─────────────────────────────────────────────────────────── */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-w);
  padding: 32px 40px;
  min-width: 0;
  overflow-x: hidden;
}

/* ── Views ────────────────────────────────────────────────────────────────── */
.view { display: none; }
.view.active { display: block; }

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header {
  margin-bottom: 28px;
}

.results-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.page-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.page-subtitle {
  font-size: 14px;
  color: var(--text-2);
  margin-top: 6px;
}

.results-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}

.btn-primary:hover { background: var(--primary-h); transform: translateY(-1px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-secondary:hover { background: var(--surface-3); }

.btn-danger {
  padding: 10px 20px;
  background: rgba(239,68,68,0.15);
  color: var(--critical);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-danger:hover { background: rgba(239,68,68,0.25); }

/* ── Shared input / button primitives (used across modals in index.html) ─── */
/* auth-input: dark-themed text input - mirrors auth.css for use in main app  */
.auth-input {
  width: 100%;
  background: var(--surface-2, #1a1a2e);
  border: 1px solid var(--border, #2a2d3a);
  border-radius: 8px;
  color: var(--text, #e2e8f0);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s;
  box-sizing: border-box;
  appearance: none;
}
.auth-input:focus  { outline: none; border-color: var(--primary, #1d5fb4); }
.auth-input::placeholder { color: var(--text-3, #475569); }
/* btn-ghost: transparent bordered button for secondary/cancel actions */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  color: var(--text-2, #94a3b8);
  border: 1px solid var(--border, #2a2d3a);
  border-radius: var(--radius-sm, 8px);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.btn-ghost:hover { border-color: var(--primary, #1d5fb4); color: var(--primary, #1d5fb4); background: rgba(29,95,180,.06); }

/* ── Scanner 2-column layout ──────────────────────────────────────────────── */
.scanner-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}

.scanner-col-primary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}

.scanner-col-secondary {
  position: sticky;
  top: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scanner-adv-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}

/* Scan form card - used in Batch and other non-scanner forms */
.scan-form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}

.form-group { margin-bottom: 24px; }

.form-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.label-icon { font-size: 15px; }

.optional-tag {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: none;
  letter-spacing: 0;
  margin-left: auto;
}

.input-wrapper { position: relative; }

.form-input {
  width: 100%;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

/* URL / domain / code inputs use monospace */
.form-input.mono, .form-input[type="url"], .url-input {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}

.form-input::placeholder { color: var(--text-3); }
.form-input:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.form-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.input-hint {
  display: block;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 6px;
}

/* ── Scan type cards ──────────────────────────────────────────────────────── */
.scan-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.scan-type-card {
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
  transition: all var(--transition);
  display: block;
}

.scan-type-card:hover { border-color: var(--primary); background: var(--surface-2); }

.scan-type-card:has(input:checked) {
  border-color: var(--primary);
  background: rgba(29,95,180,0.1);
  box-shadow: 0 0 0 1px var(--primary);
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
  text-align: center;
}

.type-icon { font-size: 22px; }
.type-name { font-size: 13px; font-weight: 600; color: var(--text); }
.type-desc { font-size: 11px; color: var(--text-2); }

/* ── Disclaimer ───────────────────────────────────────────────────────────── */
.disclaimer-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(234,179,8,0.08);
  border: 1px solid rgba(234,179,8,0.2);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: rgba(234,179,8,0.9);
  margin-bottom: 24px;
}

.disclaimer-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ── Authorization consent checkbox ─────────────────────────────────────── */
.auth-consent-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(29,95,180,0.07);
  border: 1px solid rgba(29,95,180,0.25);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.auth-consent-box:has(input:checked) {
  background: rgba(34,197,94,0.07);
  border-color: rgba(34,197,94,0.35);
}
.auth-consent-box input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--primary);
  cursor: pointer;
}
.auth-consent-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  user-select: none;
}
.auth-consent-text strong { color: var(--text); }
.consent-target {
  font-family: monospace;
  color: var(--primary);
  font-size: 11px;
  word-break: break-all;
}
.consent-target:not(:empty)::before { content: '"'; }
.consent-target:not(:empty)::after  { content: '" '; }

/* ── Scan button ──────────────────────────────────────────────────────────── */
.btn-scan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: 0.3px;
}

.btn-scan:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(29,95,180,0.4);
}

.btn-scan:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-icon { font-size: 18px; }

/* ── Progress panel ───────────────────────────────────────────────────────── */
.progress-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-top: 24px;
}

.progress-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.scanning-pulse {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--primary);
  animation: pulse-ring 1.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

.pulse-dot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--primary);
}

@keyframes pulse-ring {
  0%   { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.progress-info { flex: 1; min-width: 0; }
.progress-title { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.progress-message { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress-pct { font-size: 20px; font-weight: 700; color: var(--primary); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }

.progress-track {
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* ── Summary grid ─────────────────────────────────────────────────────────── */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: center;
  transition: transform var(--transition);
}

.summary-card:hover { transform: translateY(-2px); }

.summary-card.critical { border-color: rgba(239,68,68,0.35); }
.summary-card.high     { border-color: rgba(249,115,22,0.35); }
.summary-card.medium   { border-color: rgba(234,179,8,0.35); }
.summary-card.low      { border-color: rgba(59,130,246,0.35); }
.summary-card.info     { border-color: var(--border); }
.summary-card.score    { border-color: rgba(29,95,180,0.35); }

.summary-value {
  display: block;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  font-family: 'JetBrains Mono', monospace;
}

.summary-card.critical .summary-value { color: var(--critical); }
.summary-card.high     .summary-value { color: var(--high); }
.summary-card.medium   .summary-value { color: var(--medium); }
.summary-card.low      .summary-value { color: var(--low); }
.summary-card.info     .summary-value { color: var(--info); }
.summary-card.score    .summary-value { color: var(--primary); }

.summary-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 6px;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.tabs-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.tab-btn {
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: -1px;
}

.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.filter-chip {
  padding: 6px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.filter-chip:hover, .filter-chip.active { color: white; }
.filter-chip.active.critical, .filter-chip.critical:hover { background: var(--critical); border-color: var(--critical); }
.filter-chip.active.high,     .filter-chip.high:hover     { background: var(--high);     border-color: var(--high); }
.filter-chip.active.medium,   .filter-chip.medium:hover   { background: var(--medium);   border-color: var(--medium); color: #1a1a00; }
.filter-chip.active.low,      .filter-chip.low:hover      { background: var(--low);      border-color: var(--low); }
.filter-chip.active.info,     .filter-chip.info:hover     { background: var(--info);     border-color: var(--info); }
.filter-chip.active[data-sev="all"] { background: var(--primary); border-color: var(--primary); }

/* ── Finding cards ────────────────────────────────────────────────────────── */
.finding-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  transition: transform var(--transition);
}

.finding-card:hover { transform: translateX(2px); }
.finding-card.critical { border-left-color: var(--critical); }
.finding-card.high     { border-left-color: var(--high); }
.finding-card.medium   { border-left-color: var(--medium); }
.finding-card.low      { border-left-color: var(--low); }
.finding-card.info     { border-left-color: var(--info); }
.finding-card.secure   { border-left-color: var(--secure); opacity: 0.75; }

.finding-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}

.finding-header:hover { background: var(--surface-2); }

.finding-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
}

.finding-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sev-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sev-badge.critical { background: rgba(239,68,68,0.2);  color: var(--critical); }
.sev-badge.high     { background: rgba(249,115,22,0.2); color: var(--high); }
.sev-badge.medium   { background: rgba(234,179,8,0.2);  color: var(--medium); }
.sev-badge.low      { background: rgba(59,130,246,0.2); color: var(--low); }
.sev-badge.info     { background: rgba(100,116,139,0.2);color: var(--info); }
.sev-badge.secure   { background: rgba(16,185,129,0.2); color: var(--secure); }

.owasp-tag {
  font-size: 10px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  background: var(--surface-2);
  padding: 3px 7px;
  border-radius: 4px;
}

.chevron {
  color: var(--text-3);
  font-size: 12px;
  transition: transform var(--transition);
}

.finding-card.open .chevron { transform: rotate(90deg); }

.finding-body {
  display: none;
  padding: 0 18px 18px;
  border-top: 1px solid var(--border-2);
}

.finding-card.open .finding-body { display: block; }

.finding-section { margin-top: 14px; }

.section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
  margin-bottom: 6px;
}

.finding-desc { font-size: 13px; color: var(--text-2); line-height: 1.6; }

.code-block {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #a78bfa;
  white-space: pre-wrap;
  word-break: break-all;
}

.remediation-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  background: rgba(16,185,129,0.06);
  border: 1px solid rgba(16,185,129,0.15);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

/* ── Performance content ──────────────────────────────────────────────────── */
.perf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.perf-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.perf-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-2);
  font-size: 13px;
}

.metric-row:last-child { border-bottom: none; }

.metric-label { color: var(--text-2); }

.metric-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
}

.metric-value.good    { color: var(--secure); }
.metric-value.slow    { color: var(--warning); }
.metric-value.bad     { color: var(--critical); }
.metric-value.neutral { color: var(--text); }

.score-display {
  text-align: center;
  padding: 24px;
}

.score-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 8px solid var(--surface-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  position: relative;
}

.score-num {
  font-size: 28px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
}

.score-label { font-size: 10px; color: var(--text-3); margin-top: 2px; }

.grade-badge {
  display: inline-block;
  font-size: 20px;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: var(--radius-sm);
}

.rec-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 10px;
}

.rec-card.high   { border-left-color: var(--critical); }
.rec-card.medium { border-left-color: var(--warning); }
.rec-card.low    { border-left-color: var(--low); }

.rec-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.rec-desc  { font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.rec-impact { font-size: 12px; color: var(--text-3); font-style: italic; }

/* ── History table ────────────────────────────────────────────────────────── */
.history-controls {
  margin-bottom: 20px;
  max-width: 400px;
}

.search-input { font-family: 'Inter', sans-serif !important; }

.history-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.history-table th {
  background: var(--surface-2);
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid var(--border);
}

.history-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-2);
  vertical-align: middle;
}

.history-table tr:last-child td { border-bottom: none; }
.history-table tr:hover td { background: var(--surface-2); }

.url-cell {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--secondary);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.type-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.type-chip.both { background: rgba(29,95,180,0.15); color: var(--primary); }
.type-chip.vuln { background: rgba(239,68,68,0.12); color: var(--critical); }
.type-chip.perf { background: rgba(34,211,238,0.12); color: var(--secondary); }
.type-chip.api  { background: rgba(16,185,129,0.12); color: var(--secure); }

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-chip.completed .status-dot { background: var(--secure); }
.status-chip.running   .status-dot { background: var(--warning); animation: blink 1s infinite; }
.status-chip.failed    .status-dot { background: var(--critical); }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.risk-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}

.risk-badge.low-risk   { background: rgba(16,185,129,0.15); color: var(--secure); }
.risk-badge.med-risk   { background: rgba(234,179,8,0.15);  color: var(--medium); }
.risk-badge.high-risk  { background: rgba(249,115,22,0.15); color: var(--high); }
.risk-badge.crit-risk  { background: rgba(239,68,68,0.15);  color: var(--critical); }

.table-actions { display: flex; gap: 8px; }

.btn-icon-sm {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-icon-sm:hover { color: var(--text); background: var(--surface-2); }
.btn-icon-sm.danger:hover { color: var(--critical); border-color: var(--critical); }

.empty-state {
  padding: 60px 32px;
  text-align: center;
  color: var(--text-2);
}

.empty-icon { font-size: 40px; display: block; margin-bottom: 12px; }

/* ── Toast notifications ──────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-size: 14px;
  color: var(--text);
  pointer-events: all;
  animation: slide-in 0.3s ease;
  max-width: 360px;
}

.toast.success { border-left: 3px solid var(--secure); }
.toast.error   { border-left: 3px solid var(--critical); }
.toast.info    { border-left: 3px solid var(--primary); }

@keyframes slide-in {
  from { transform: translateX(100px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 400px;
  width: 90%;
  box-shadow: var(--shadow);
}

.modal-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.modal-body { font-size: 14px; color: var(--text-2); margin-bottom: 20px; line-height: 1.5; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ── Loading spinner ──────────────────────────────────────────────────────── */
.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 40px auto;
}

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

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 30px rgba(0,0,0,0.5);
  }

  .mobile-header { display: flex; }

  .main-content {
    margin-left: 0;
    padding: 80px 16px 32px;
  }

  .scan-type-grid { grid-template-columns: repeat(2, 1fr); }
  .scan-form-card { padding: 20px 16px; }
  .scanner-layout { grid-template-columns: 1fr; }
  .scanner-col-secondary { position: static; }
  .settings-grid { grid-template-columns: 1fr !important; }
  .settings-card-full { grid-column: 1 !important; }
  .perf-grid { grid-template-columns: 1fr; }

  .history-table th:nth-child(4),
  .history-table td:nth-child(4),
  .history-table th:nth-child(5),
  .history-table td:nth-child(5) { display: none; }

  .results-header { flex-direction: column; }
  .results-actions { width: 100%; flex-wrap: wrap; }
  .results-actions button { flex: 1 1 auto; min-width: 60px; justify-content: center; font-size: 11px; padding: 6px 8px; }

  .summary-grid { grid-template-columns: repeat(3, 1fr); }

  .page-title { font-size: 22px; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-header > div:last-child { width: 100%; display: flex; gap: 8px; flex-wrap: wrap; }

  /* Triage controls stack on mobile */
  .triage-controls { flex-wrap: wrap; }
  .triage-controls .form-input[style*="width"] { width: 100% !important; }
  .triage-controls .search-input { width: 100%; }

  /* Finding cards: hide meta badges on tiny screens */
  .finding-meta { gap: 4px; }
  .finding-meta .owasp-chip { display: none; }
  .finding-header { padding: 12px 14px; gap: 8px; }
  .bulk-check { flex-shrink: 0; }

  /* Dashboard grid: 1 column */
  .dash-section-grid { grid-template-columns: 1fr !important; }
  .dash-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Monitoring domain cards: single column */
  #mon-domains-grid { grid-template-columns: 1fr !important; }

  /* History table horizontal scroll */
  .history-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Modal sizing */
  .modal-content { max-width: 100vw !important; margin: 8px; }
  .sub-modal-content { max-width: calc(100vw - 32px); max-height: 90vh; overflow-y: auto; }

  /* Auth details section */
  .auth-fields input, .auth-fields textarea, .auth-fields select { font-size: 16px; }
}

@media (max-width: 480px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-bar { gap: 6px; flex-wrap: wrap; }
  .filter-chip { padding: 5px 10px; font-size: 11px; }

  /* Results action bar: icon-only mode on very small screens */
  .results-actions button span:not(.nav-icon) { display: none; }
  .results-actions button { min-width: 36px; padding: 6px; }

  /* Scan type grid: 2-col but smaller */
  .scan-type-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .scan-type-option label { padding: 10px 6px; font-size: 11px; }

  .page-title { font-size: 18px; }
  .page-subtitle { font-size: 12px; }
}

/* ── Settings 2-column grid ───────────────────────────────────────────────── */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.settings-card-full {
  grid-column: 1 / -1;
}

/* ── Wide-screen scan type improvements ────────────────────────────────────── */
@media (min-width: 1400px) {
  .scanner-layout { grid-template-columns: 1fr 420px; }
  .scan-type-grid  { grid-template-columns: repeat(5, 1fr); }
}

/* ── History table full-width ─────────────────────────────────────────────── */
.history-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.history-table {
  width: 100%;
}

/* ── Results view improvements ────────────────────────────────────────────── */
#view-results .summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* ── Dashboard charts wider ───────────────────────────────────────────────── */
#dashboard-content {
  width: 100%;
}

/* ── Request logs ─────────────────────────────────────────────────────────── */
.logs-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.log-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  text-align: center;
  min-width: 80px;
}

.log-stat-value {
  display: block;
  font-size: 22px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
}

.log-stat-value.s2xx { color: var(--secure); }
.log-stat-value.s3xx { color: var(--secondary); }
.log-stat-value.s4xx { color: var(--warning); }
.log-stat-value.s5xx { color: var(--critical); }
.log-stat-value.serr { color: var(--critical); }
.log-stat-value.total { color: var(--primary); }

.log-stat-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  margin-top: 3px;
}

.log-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.log-filter-input {
  flex: 1;
  min-width: 200px;
  max-width: 360px;
}

.method-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.method-chip {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.method-chip:hover, .method-chip.active { color: white; }
.method-chip.active.GET    { background: var(--secure);    border-color: var(--secure); }
.method-chip.active.POST   { background: var(--primary);   border-color: var(--primary); }
.method-chip.active.PUT    { background: var(--warning);   border-color: var(--warning); color: #1a1a00; }
.method-chip.active.PATCH  { background: var(--secondary); border-color: var(--secondary); color: #001a1a; }
.method-chip.active.DELETE { background: var(--critical);  border-color: var(--critical); }
.method-chip.active.OPTIONS{ background: var(--info);      border-color: var(--info); }
.method-chip.active.ALL    { background: var(--primary);   border-color: var(--primary); }

.log-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.log-table th {
  background: var(--surface-2);
  padding: 10px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.log-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-2);
  vertical-align: middle;
}

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

.log-row { cursor: pointer; }
.log-row:hover td { background: var(--surface-2); }

.log-row.status-2xx { border-left: 2px solid var(--secure); }
.log-row.status-3xx { border-left: 2px solid var(--secondary); }
.log-row.status-4xx { border-left: 2px solid var(--warning); }
.log-row.status-5xx { border-left: 2px solid var(--critical); }
.log-row.status-err { border-left: 2px solid var(--critical); opacity: 0.7; }

.log-detail-row { display: none; }
.log-detail-row.open { display: table-row; }
.log-detail-row td { padding: 0; background: var(--bg-2) !important; }

.log-detail-inner {
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.log-detail-section h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  margin-bottom: 8px;
}

.header-list {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.7;
}

.header-key { color: var(--secondary); }
.header-val { color: var(--text); }

.log-preview {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #a78bfa;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 120px;
  overflow-y: auto;
  margin-top: 6px;
}

.method-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  min-width: 50px;
  text-align: center;
}

.method-badge.GET    { background: rgba(16,185,129,0.15);  color: var(--secure); }
.method-badge.POST   { background: rgba(29,95,180,0.15);  color: var(--primary); }
.method-badge.PUT    { background: rgba(234,179,8,0.15);   color: var(--medium); }
.method-badge.PATCH  { background: rgba(34,211,238,0.15);  color: var(--secondary); }
.method-badge.DELETE { background: rgba(239,68,68,0.15);   color: var(--critical); }
.method-badge.OPTIONS{ background: rgba(100,116,139,0.15); color: var(--info); }
.method-badge.HEAD   { background: rgba(100,116,139,0.15); color: var(--info); }

.status-pill {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.status-pill.s2xx { background: rgba(16,185,129,0.15);  color: var(--secure); }
.status-pill.s3xx { background: rgba(34,211,238,0.15);  color: var(--secondary); }
.status-pill.s4xx { background: rgba(234,179,8,0.15);   color: var(--warning); }
.status-pill.s5xx { background: rgba(239,68,68,0.15);   color: var(--critical); }
.status-pill.serr { background: rgba(239,68,68,0.15);   color: var(--critical); }

.log-url {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text);
  max-width: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-cell {
  color: var(--text-3);
  font-size: 11px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .log-detail-inner { grid-template-columns: 1fr; }
  .log-table th:nth-child(5),
  .log-table td:nth-child(5) { display: none; }
}

/* ── Utilities ────────────────────────────────────────────────────────────── */
.text-muted { color: var(--text-3); }
.mt-4 { margin-top: 16px; }

/* ── Auth section ─────────────────────────────────────────────────────────── */
.auth-details {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.auth-summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-2);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}
.auth-summary::-webkit-details-marker { display: none; }
.auth-summary::before {
  content: '▶';
  font-size: 10px;
  color: var(--text-3);
  transition: transform 0.2s;
}
details[open] .auth-summary::before { transform: rotate(90deg); }
.auth-summary:hover { background: var(--surface-2); color: var(--text); }
.auth-fields {
  padding: 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

/* ── Compare banner ───────────────────────────────────────────────────────── */
.compare-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(99, 102, 241, 0.06);
  font-size: 13px;
  color: var(--text-2);
}
.compare-banner .cmp-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.compare-banner .cmp-new   { color: var(--critical); }
.compare-banner .cmp-fixed { color: var(--secure); }
.compare-banner .cmp-date  { color: var(--text-3); font-size: 12px; margin-left: auto; }

/* ── False-positive markup ────────────────────────────────────────────────── */
.fp-menu-wrap {
  position: relative;
  display: inline-flex;
}
.fp-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.fp-btn:hover { color: var(--text); background: var(--surface-2); }

.fp-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  min-width: 180px;
  overflow: hidden;
}
.fp-menu.open { display: block; }
.fp-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.fp-menu button:hover { background: var(--surface-2); color: var(--text); }
.fp-menu button.clear-mark { color: var(--text-3); border-top: 1px solid var(--border); }

.fp-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}
.fp-badge.false_positive { background: rgba(29,95,180,0.15); color: #818cf8; }
.fp-badge.accepted_risk  { background: rgba(245,158,11,0.15);  color: #fbbf24; }
.fp-badge.resolved       { background: rgba(16,185,129,0.15);  color: var(--secure); }

.finding-card.user-marked { opacity: 0.65; }
.finding-card.user-marked .finding-header { text-decoration: line-through; text-decoration-color: var(--text-3); }

/* ── Scope exclusions ─────────────────────────────────────────────────────── */
.exclusions-textarea {
  resize: vertical;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  min-height: 72px;
  /* inherits .form-input base styles */
}

/* ── Severity override badge ──────────────────────────────────────────────── */
.sev-override-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  border: 1px solid currentColor;
  opacity: 0.85;
  margin-left: 6px;
}
.sev-override-badge::before { content: '↪ '; }

/* ── Schedule cards ───────────────────────────────────────────────────────── */
.schedule-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.schedule-card.disabled { opacity: 0.5; }
.schedule-info { flex: 1; min-width: 0; }
.schedule-url {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schedule-meta {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.schedule-meta span { display: flex; align-items: center; gap: 4px; }
.schedule-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-toggle {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-2);
  cursor: pointer;
  transition: var(--transition);
}
.btn-toggle:hover { background: var(--surface); color: var(--text); }
.btn-toggle.active { border-color: var(--secure); color: var(--secure); }
.schedule-next {
  font-size: 11px;
  color: var(--secondary);
  background: rgba(34,211,238,0.08);
  padding: 2px 8px;
  border-radius: 4px;
}

/* ── FP menu section divider ──────────────────────────────────────────────── */
.fp-menu-section {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px 4px;
  pointer-events: none;
}

/* ── Small danger button ──────────────────────────────────────────────────── */
.btn-danger-sm {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(239,68,68,0.3);
  background: rgba(239,68,68,0.08);
  color: var(--critical);
  cursor: pointer;
  transition: var(--transition);
}
.btn-danger-sm:hover { background: rgba(239,68,68,0.16); }

/* ── Form select ──────────────────────────────────────────────────────────── */
.form-select {
  appearance: none;
  width: 100%;
  background-color: var(--bg-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 36px 11px 14px;
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-select:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.form-select option {
  background: var(--surface-2);
  color: var(--text);
}

/* ── Profile bar ──────────────────────────────────────────────────────────── */
.profile-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.profile-select { flex: 1; font-size: 13px; }
.btn-save-profile {
  font-size: 12px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}
.btn-save-profile:hover { background: var(--surface); color: var(--text); }

/* ── Profile cards ────────────────────────────────────────────────────────── */
.profile-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.profile-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.profile-meta {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 3px;
  display: flex;
  gap: 12px;
}
.profile-actions { margin-left: auto; display: flex; gap: 8px; }
.btn-load-profile {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--primary);
  background: rgba(29,95,180,0.1);
  color: var(--primary-h);
  cursor: pointer;
  transition: var(--transition);
}
.btn-load-profile:hover { background: rgba(29,95,180,0.2); }

/* ── Bulk triage ──────────────────────────────────────────────────────────── */
.bulk-select-all {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
  user-select: none;
}
.bulk-select-all input { cursor: pointer; accent-color: var(--primary); }
.bulk-action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.bulk-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-h);
  margin-right: 4px;
}
.btn-bulk {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: var(--transition);
}
.btn-bulk:hover  { background: var(--surface-2); color: var(--text); }
.btn-bulk.clear  { color: var(--text-3); }
.btn-bulk-close  {
  margin-left: auto;
  font-size: 13px;
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px 8px;
}
.finding-card .bulk-check {
  display: none;
  margin-right: 8px;
  accent-color: var(--primary);
  cursor: pointer;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.bulk-mode .bulk-check { display: inline-block; }

/* ── Trend modal ──────────────────────────────────────────────────────────── */
.trend-modal {
  width: min(700px, 96vw);
  max-height: 90vh;
  overflow: auto;
  padding: 28px;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.modal-close {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
}
.modal-close:hover { color: var(--text); }
.trend-hint {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 12px;
  text-align: center;
}
.btn-trend {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--secondary);
  cursor: pointer;
  transition: var(--transition);
}
.btn-trend:hover { background: var(--surface-2); }

/* ── Confidence badge ─────────────────────────────────────────────────────── */
.conf-badge {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
  opacity: 0.85;
  white-space: nowrap;
}

/* ── Analyst notes textarea ───────────────────────────────────────────────── */
.notes-textarea {
  width: 100%;
  min-height: 56px;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  padding: 9px 12px;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  margin-top: 4px;
}
.notes-textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.notes-textarea::placeholder { color: var(--text-3); }

/* ── Shared: form-textarea ────────────────────────────────────────────────── */
.form-textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  padding: 11px 14px;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.form-textarea::placeholder { color: var(--text-3); }
.form-textarea.mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

.label-hint { font-size: 11px; color: var(--text-3); font-weight: 400; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ── Executive Summary ────────────────────────────────────────────────────── */
.exec-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) { .exec-grid { grid-template-columns: 1fr; } }

.exec-gauge-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.exec-gauge-wrap {
  position: relative;
  width: 160px;
  text-align: center;
}
.exec-gauge-svg { width: 160px; display: block; }
.exec-gauge-val {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  margin-top: -24px;
}
.exec-gauge-label {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}

.exec-counts-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.exec-count-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.3rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  min-width: 56px;
}
.exec-count-chip small { font-size: 10px; font-weight: 400; opacity: 0.7; }
.exec-crit { background: rgba(239,68,68,0.15);  color: var(--critical); }
.exec-high { background: rgba(249,115,22,0.15); color: var(--high); }
.exec-med  { background: rgba(234,179,8,0.15);  color: var(--medium); }
.exec-low  { background: rgba(59,130,246,0.15); color: var(--low); }

.exec-top-findings {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.exec-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}
.exec-top-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.exec-top-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.exec-top-item.exec-none { color: var(--text-3); font-style: italic; }
.exec-finding-name { flex: 1; }
.exec-finding-owasp { font-size: 11px; color: var(--text-3); white-space: nowrap; }

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

.exec-category-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.cat-id { font-family: 'JetBrains Mono', monospace; font-size: 12px; }

.exec-scan-meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-2);
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}
.exec-scan-meta strong { color: var(--text); }

/* ── Batch View ───────────────────────────────────────────────────────────── */
.batch-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.batch-status-label {
  font-weight: 600;
  font-size: 14px;
}
.batch-fraction {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--text-2);
}
.progress-bar-outer {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-3);
  overflow: hidden;
}
.progress-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transition: width 0.5s ease;
  border-radius: 4px;
}
.batch-current-target {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  min-height: 18px;
}

.batch-table-wrap {
  margin-top: 1.5rem;
  overflow-x: auto;
}
.batch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.batch-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}
.batch-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-2);
  vertical-align: middle;
}
.batch-table tbody tr:hover { background: var(--surface-2); }
.batch-target-url {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.batch-status-chip {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
}
.batch-status-chip.status-ok  { background: rgba(16,185,129,0.15); color: var(--secure); }
.batch-status-chip.status-err { background: rgba(239,68,68,0.15);  color: var(--critical); }
.batch-status-chip.status-run { background: rgba(29,95,180,0.15); color: var(--primary-h); }

.risk-badge.risk-low  { background: rgba(16,185,129,0.15); color: var(--secure); }
.risk-badge.risk-med  { background: rgba(234,179,8,0.15);  color: var(--medium); }
.risk-badge.risk-high { background: rgba(239,68,68,0.15);  color: var(--critical); }

.sev-cell { text-align: center; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.sev-cell.sev-critical { color: var(--critical); }
.sev-cell.sev-high     { color: var(--high); }
.sev-cell.sev-medium   { color: var(--medium); }
.sev-cell.sev-low      { color: var(--low); }

.btn-xs {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s;
}
.btn-xs:hover { background: var(--surface-3); }

/* ── Compliance chips on finding card ────────────────────────────────────── */
.compliance-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.compliance-chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(59,130,246,0.12);
  color: #93c5fd;
  line-height: 1.4;
}
.compliance-chip b { color: #bfdbfe; }

/* ── Settings View ────────────────────────────────────────────────────────── */
.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.settings-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.settings-desc {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 1rem;
  line-height: 1.5;
}
.settings-desc code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: var(--surface-3);
  padding: 1px 5px;
  border-radius: 4px;
}
.settings-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.settings-status {
  font-size: 12px;
  margin-left: 12px;
  vertical-align: middle;
}
.settings-status.ok  { color: var(--secure); }
.settings-status.err { color: var(--critical); }

/* ── Security Scorecard Banner ───────────────────────────────────────────── */
.scorecard-banner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.75rem;
  margin-bottom: 1.25rem;
}
.scorecard-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scorecard-grade {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  font-family: 'JetBrains Mono', monospace;
}
.scorecard-grade.grade-a { color: #22c55e; }
.scorecard-grade.grade-b { color: #86efac; }
.scorecard-grade.grade-c { color: #facc15; }
.scorecard-grade.grade-d { color: #fb923c; }
.scorecard-grade.grade-f { color: #ef4444; }
.scorecard-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}
.scorecard-score {
  font-size: 0.85rem;
  color: var(--text-2);
}
.scorecard-evidence {
  font-size: 0.78rem;
  color: var(--text-2);
  margin-top: 4px;
  line-height: 1.6;
}

/* ── Playwright Toggle ───────────────────────────────────────────────────── */
.playwright-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.playwright-toggle input[type="checkbox"] {
  display: none;
}
.toggle-track {
  width: 38px;
  height: 20px;
  background: var(--surface-3);
  border-radius: 10px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-2);
  transition: transform 0.2s, background 0.2s;
}
.playwright-toggle input:checked + .toggle-track {
  background: var(--accent);
}
.playwright-toggle input:checked + .toggle-track::after {
  transform: translateX(18px);
  background: #fff;
}
.toggle-label {
  font-size: 13px;
  color: var(--text-2);
}
.toggle-text {
  font-size: 12px;
  color: var(--text-2);
  opacity: 0.7;
}

/* ── False Positive / Risk Acceptance Table ──────────────────────────────── */
.fp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 12px;
}
.fp-table th {
  text-align: left;
  padding: 8px 10px;
  background: var(--surface-3);
  color: var(--text-2);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}
.fp-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}
.fp-td-url {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-2);
}
.fp-table tr:hover td {
  background: var(--surface-2);
}
.ra-expired td {
  opacity: 0.5;
}
.ra-exp-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  background: var(--surface-3);
  color: var(--text-2);
}
.ra-exp-badge.expired {
  background: var(--critical);
  color: #fff;
}
.activity-action-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(99, 102, 241, .15);
  color: #a5b4fc;
  white-space: nowrap;
}
.btn-danger-xs {
  padding: 3px 8px;
  font-size: 11px;
  border: 1px solid var(--critical);
  color: var(--critical);
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-danger-xs:hover {
  background: var(--critical);
  color: #fff;
}

/* ── Theme Toggle Button ─────────────────────────────────────────────────── */
.theme-toggle {
  background: none;
  border: 1px solid var(--border-2);
  color: var(--text-2);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  text-align: center;
}
.theme-toggle:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* ── Scan Tag Chips ──────────────────────────────────────────────────────── */
.tag-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  background: var(--surface-3);
  color: var(--primary-h);
  border: 1px solid var(--border);
  cursor: pointer;
  margin: 1px 2px;
  transition: background 0.15s;
}
.tag-chip:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ── Sparkline cells ─────────────────────────────────────────────────────── */
.sparkline-cell {
  width: 70px;
  min-width: 70px;
}
.sparkline {
  display: block;
  overflow: visible;
}

/* ── OWASP Coverage Heatmap ──────────────────────────────────────────────── */
.owasp-heatmap {
  margin-bottom: 1.5rem;
}
.heatmap-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
@media (max-width: 700px) {
  .heatmap-grid { grid-template-columns: repeat(2, 1fr); }
}
.heatmap-cell {
  background: var(--surface-2);
  border: 1px solid var(--cell-color, var(--border));
  border-radius: 8px;
  padding: 10px 12px;
  transition: background 0.2s;
}
.heatmap-cell:hover { background: var(--surface-3); }
.heatmap-id {
  font-size: 10px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-3);
  margin-bottom: 4px;
}
.heatmap-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.3;
}
.heatmap-sev {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Webhook row (settings) ──────────────────────────────────────────────── */
.webhook-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.webhook-row .form-input {
  flex: 1;
}
.btn-sm {
  padding: 6px 14px;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Progress ETA ────────────────────────────────────────────────────────── */
.progress-eta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Findings search box ─────────────────────────────────────────────────── */
.findings-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.findings-search-input {
  flex: 1;
  max-width: 420px;
  padding: 9px 12px;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.findings-search-input:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.findings-search-hint {
  font-size: 12px;
  color: var(--text-3);
}

/* ── Keyboard focus highlight ────────────────────────────────────────────── */
.finding-card.kb-focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Regression badge ────────────────────────────────────────────────────── */
.regression-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,165,0,0.18);
  color: #f0a000;
  border: 1px solid rgba(255,165,0,0.4);
  letter-spacing: 0.02em;
}

/* ── Suppressed status badge ─────────────────────────────────────────────── */
.fp-badge.suppressed {
  background: rgba(150,150,150,0.15);
  color: var(--text-3);
  border: 1px solid rgba(150,150,150,0.3);
}

/* ── History compare checkbox column ────────────────────────────────────── */
.th-compare { width: 28px; text-align: center; color: var(--text-3); }
.td-compare { text-align: center; width: 28px; }
.compare-check { cursor: pointer; accent-color: var(--accent); }
.history-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.history-controls .search-input { flex: 1; }

/* ── Keyboard shortcuts overlay ──────────────────────────────────────────── */
.shortcuts-modal {
  max-width: 420px;
  width: 100%;
}
.shortcuts-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}
.shortcut-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--text-2);
}
.shortcut-row span { flex: 1; }
kbd {
  display: inline-block;
  min-width: 32px;
  padding: 3px 8px;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
  color: var(--text);
  box-shadow: 0 1px 0 var(--border-2);
}

/* ── MTTR modal ──────────────────────────────────────────────────────────── */
.mttr-modal { max-width: 520px; width: 100%; }
.mttr-content { padding: 4px 0; }
.mttr-desc { font-size: 13px; color: var(--text-3); margin-bottom: 16px; }
.mttr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.mttr-owasp {
  width: 90px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  font-family: var(--font-mono);
}
.mttr-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--surface-3);
  border-radius: 4px;
  overflow: hidden;
}
.mttr-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  min-width: 4px;
  transition: width 0.4s ease;
}
.mttr-label {
  width: 120px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-2);
  text-align: right;
}
.mttr-total {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 16px;
  text-align: right;
}
.mttr-empty {
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
  padding: 24px 0;
  line-height: 1.6;
}

/* ── Compare modal ───────────────────────────────────────────────────────── */
.compare-modal { max-width: 860px; width: 100%; }
.compare-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-2);
  flex-wrap: wrap;
}
.compare-tag {
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
}
.compare-tag.tag-a { background: rgba(100,150,255,0.15); color: #7eb5ff; }
.compare-tag.tag-b { background: rgba(100,220,150,0.15); color: #7de0a0; }
.compare-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-col {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 12px;
  min-height: 120px;
}
.compare-col-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.cmp-new-title   { color: var(--critical); }
.cmp-fixed-title { color: var(--secure); }
.cmp-common-title{ color: var(--text-3); }
.compare-empty   { font-size: 12px; color: var(--text-3); }
.cmp-finding-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.cmp-finding-row:last-child { border-bottom: none; }
.cmp-sev-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cmp-sev-dot.critical { background: var(--critical); }
.cmp-sev-dot.high     { background: var(--high); }
.cmp-sev-dot.medium   { background: var(--medium); }
.cmp-sev-dot.low      { background: var(--low); }
.cmp-sev-dot.info     { background: var(--text-3); }
.cmp-name  { flex: 1; color: var(--text); }
.cmp-owasp { font-size: 10px; color: var(--text-3); font-family: var(--font-mono); }

/* ── Scan Notes ────────────────────────────────────────────────────────────── */
.scan-notes-wrap {
  margin-bottom: 16px;
}
.scan-notes-label {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.scan-notes-textarea {
  width: 100%;
  min-height: 72px;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-family: 'Inter', system-ui, sans-serif;
  padding: 10px 12px;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.scan-notes-textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.scan-notes-save {
  margin-top: 6px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition);
}
.scan-notes-save:hover { background: var(--primary-h); }

/* ── Triage View ───────────────────────────────────────────────────────────── */
.triage-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.triage-search-input {
  flex: 1;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  padding: 9px 12px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.triage-search-input:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.triage-count {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}
.triage-empty {
  text-align: center;
  color: var(--text-3);
  padding: 40px 0;
  font-size: 14px;
}
.triage-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: border-color .15s;
}
.triage-card:hover { border-color: var(--accent); }
.triage-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.triage-owasp {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-3);
  background: var(--bg-3, var(--bg));
  border-radius: 3px;
  padding: 1px 5px;
}
.triage-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.triage-target {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 4px;
}
.triage-target a { color: var(--accent); text-decoration: none; }
.triage-target a:hover { text-decoration: underline; }
.triage-date { font-size: 11px; color: var(--text-3); margin-left: auto; }
.triage-target-link {
  display: inline-block; font-size: 11px; color: var(--accent);
  background: rgba(29,95,180,.08); border-radius: 4px;
  padding: 1px 6px; margin: 2px 2px 2px 0; text-decoration: none;
}
.triage-target-link:hover { background: rgba(29,95,180,.2); }
.triage-persist-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 10px; background: rgba(245,158,11,.15);
  color: #f59e0b; border: 1px solid rgba(245,158,11,.3);
  white-space: nowrap; margin-left: auto;
}
.triage-card-persistent {
  border-color: rgba(245,158,11,.3);
  background: linear-gradient(135deg, var(--bg-2) 0%, rgba(245,158,11,.04) 100%);
}
.triage-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #2a2d3a);
}
.triage-btn {
  font-size: .72rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s;
}
.triage-btn-view    { background: rgba(29,95,180,.1); color: #a5b4fc; border-color: rgba(29,95,180,.25); }
.triage-btn-view:hover { background: rgba(29,95,180,.2); }
.triage-btn-resolve { background: rgba(34,197,94,.08); color: #4ade80; border-color: rgba(34,197,94,.25); }
.triage-btn-resolve:hover { background: rgba(34,197,94,.18); }
.triage-btn-fp      { background: rgba(100,116,139,.08); color: #94a3b8; border-color: rgba(100,116,139,.25); }
.triage-btn-fp:hover { background: rgba(100,116,139,.18); }
.triage-desc {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Tech Stack Panel ──────────────────────────────────────────────────────── */
.tech-stack-section { margin-bottom: 28px; }
.tech-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.tech-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.tech-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color .15s;
}
.tech-card:hover { border-color: var(--accent); }
.tech-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.tech-icon { font-size: 18px; }
.tech-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.tech-version {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-3);
  background: var(--bg);
  border-radius: 4px;
  padding: 1px 5px;
}
.tech-findings { display: flex; flex-wrap: wrap; gap: 4px; }
.tech-finding-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.tech-finding-badge.sev-critical { background: #fef2f2; color: var(--critical); }
.tech-finding-badge.sev-high     { background: #fff7ed; color: var(--high); }
.tech-finding-badge.sev-medium   { background: #fefce8; color: #a16207; }
.tech-finding-badge.sev-low      { background: #eff6ff; color: var(--low); }
.tech-finding-badge.sev-info     { background: var(--bg); color: var(--text-3); }
.tech-stack-empty {
  text-align: center;
  padding: 50px 0;
  color: var(--text-3);
}
.tech-empty-icon { font-size: 32px; display: block; margin-bottom: 10px; }

/* ── CVSS Table ────────────────────────────────────────────────────────────── */
.cvss-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.cvss-table th {
  text-align: left;
  padding: 7px 10px;
  background: var(--bg-2);
  color: var(--text-3);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.cvss-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.cvss-table tr:last-child td { border-bottom: none; }
.cvss-name { max-width: 260px; }
.cvss-score-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 12px;
}
.cvss-critical { background: #fef2f2; color: var(--critical); }
.cvss-high     { background: #fff7ed; color: var(--high); }
.cvss-medium   { background: #fefce8; color: #a16207; }
.cvss-low      { background: #eff6ff; color: var(--low); }
.cvss-vec-cell { max-width: 300px; }
.cvss-vector {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  word-break: break-all;
}

/* ── SLA Badges ─────────────────────────────────────────────────────────────── */
.sla-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-2);
  color: var(--text-3);
  border: 1px solid var(--border);
  margin-right: 4px;
}
.sla-badge.overdue {
  background: #fef2f2;
  color: var(--critical);
  border-color: var(--critical);
}

/* ── Content Dedup Banner ───────────────────────────────────────────────────── */
.dedup-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #faf5ff;
  border: 1px solid #a855f7;
  border-radius: 8px;
  margin-bottom: 14px;
  color: #7e22ce;
  font-size: 13px;
}
.dedup-icon { font-size: 16px; }
[data-theme="dark"] .dedup-banner {
  background: #2d1b4e;
  border-color: #7c3aed;
  color: #c4b5fd;
}

/* ── Quick scan badge ───────────────────────────────────────────────────────── */
.quick-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #fef9c3;
  color: #a16207;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 8px;
}
[data-theme="dark"] .quick-badge { background: #422006; color: #fcd34d; }

/* ── OpenAPI Upload ─────────────────────────────────────────────────────────── */
.openapi-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.openapi-file-input {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
}
.openapi-status {
  font-size: 12px;
  font-weight: 600;
}
.openapi-status.ok      { color: var(--secure); }
.openapi-status.error   { color: var(--critical); }
.openapi-status.uploading { color: var(--primary); }

/* ── Dashboard ──────────────────────────────────────────────────────────────── */
.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.dash-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 18px;
  text-align: center;
}
.dash-kpi.critical { border-color: var(--critical); }
.dash-kpi.high     { border-color: var(--high); }
.dash-kpi-value {
  display: block;
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}
.dash-kpi.critical .dash-kpi-value { color: var(--critical); }
.dash-kpi.high     .dash-kpi-value { color: var(--high); }
.dash-kpi-label {
  display: block;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dash-section-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 720px) { .dash-section-grid { grid-template-columns: 1fr; } }
.dash-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
}
.dash-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 14px;
}
.dash-sev-bars { display: flex; flex-direction: column; gap: 10px; }
.dash-sev-row  { display: flex; align-items: center; gap: 10px; }
.dash-sev-label {
  width: 62px;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
  flex-shrink: 0;
}
.dash-sev-label.critical { color: var(--critical); }
.dash-sev-label.high     { color: var(--high); }
.dash-sev-label.medium   { color: var(--warning); }
.dash-sev-label.low      { color: var(--low); }
.dash-sev-track {
  flex: 1;
  height: 8px;
  background: var(--bg-2);
  border-radius: 4px;
  overflow: hidden;
}
.dash-sev-fill { height: 100%; border-radius: 4px; transition: width .4s; }
.dash-sev-fill.critical { background: var(--critical); }
.dash-sev-fill.high     { background: var(--high); }
.dash-sev-fill.medium   { background: var(--warning); }
.dash-sev-fill.low      { background: var(--low); }
.dash-sev-count { font-size: 12px; color: var(--text-3); width: 28px; text-align: right; }
.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dash-table th {
  text-align: left;
  padding: 7px 10px;
  background: var(--bg-2);
  color: var(--text-3);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}
.dash-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.dash-table tr:last-child td { border-bottom: none; }
.dash-table a { color: var(--primary); text-decoration: none; }
.dash-table a:hover { text-decoration: underline; }
.empty-td { color: var(--text-3); font-style: italic; }

/* ── Dashboard tabs ─────────────────────────────────────────────────────────── */
.dash-tab-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.dash-tab-btn {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.dash-tab-btn:hover:not(.active) {
  border-color: var(--text-3);
  color: var(--text);
}
.dash-tab-btn.locked {
  opacity: .65;
  cursor: pointer;
}
.dash-tab-lock { font-size: .75em; vertical-align: middle; margin-left: 2px; }

/* ── Dashboard monitoring URL cards ─────────────────────────────────────────── */
.dash-mon-url-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-mon-url-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-mon-url-host {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-mon-url-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dash-mon-score {
  font-size: .75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

/* ── Dashboard locked panel ──────────────────────────────────────────────────── */
.dash-lock-card {
  border: 1px solid;
  border-radius: 14px;
  padding: 32px 36px;
  max-width: 680px;
}
@media (max-width: 600px) { .dash-lock-card { padding: 22px 18px; } }
.dash-lock-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.dash-lock-icon-big { font-size: 2rem; }
.dash-lock-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
}
.dash-lock-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
}
.dash-lock-desc {
  color: var(--text-2);
  font-size: .9rem;
  line-height: 1.55;
  margin: 0 0 16px;
}
.dash-lock-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-lock-bullets li {
  font-size: .87rem;
  color: var(--text-2);
  display: flex;
  gap: 8px;
}
.dash-lock-pricing {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.dash-lock-plan-price {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}
.dash-lock-plan-note {
  font-size: .75rem;
  color: var(--text-3);
  margin-top: 3px;
}

/* ── Exec Dashboard (new) ───────────────────────────────────────────────────── */
.exec-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.exec-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: .73rem;
  font-weight: 600;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  font-family: inherit;
}
.exec-chip:hover { border-color: var(--primary); color: var(--text); }
.exec-chip.active {
  background: rgba(59,130,246,.08);
  border-color: rgba(59,130,246,.5);
  color: var(--primary);
}
.exec-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.exec-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 800px) { .exec-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .exec-kpi-strip { grid-template-columns: 1fr 1fr; } }
.exec-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
.exec-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.exec-kpi-card.ek-score::before  { background: linear-gradient(90deg, #3b82f6, #8b5cf6); }
.exec-kpi-card.ek-crit::before   { background: var(--critical); }
.exec-kpi-card.ek-assets::before { background: var(--primary); }
.exec-kpi-card.ek-scan::before   { background: var(--low); }
.exec-kpi-card.ek-scan-red::before { background: var(--critical); }
.exec-kpi-label {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-3);
}
.exec-kpi-val {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.exec-kpi-val-sm { font-size: 1.1rem; margin-top: 4px; }
.exec-kpi-delta {
  font-size: .72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.exec-kpi-delta.good { color: #4ade80; }
.exec-kpi-delta.bad  { color: #f87171; }
.exec-kpi-delta.neu  { color: var(--text-3); }
.exec-grade-circle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 900;
  border: 1.5px solid;
  transition: all .25s;
}
.exec-comp-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 900px) { .exec-comp-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .exec-comp-row { grid-template-columns: 1fr; } }
.exec-comp-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.exec-comp-header { display: flex; align-items: center; justify-content: space-between; }
.exec-comp-name { font-size: .8rem; font-weight: 700; }
.exec-comp-badge {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid;
}
.ecb-pass { background: rgba(34,197,94,.1);  color: #4ade80; border-color: rgba(34,197,94,.2); }
.ecb-warn { background: rgba(234,179,8,.1);  color: #fbbf24; border-color: rgba(234,179,8,.2); }
.ecb-fail { background: rgba(239,68,68,.1);  color: #f87171; border-color: rgba(239,68,68,.2); }
.ecb-na   { background: rgba(75,96,128,.12); color: var(--text-3); border-color: var(--border); }
.exec-comp-pct { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.exec-comp-desc { font-size: .7rem; color: var(--text-2); line-height: 1.5; }
.exec-comp-bar-bg { height: 5px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.exec-comp-bar { height: 100%; border-radius: 99px; transition: width .4s ease; }
.exec-comp-items { display: flex; flex-direction: column; gap: 5px; }
.exec-comp-item { display: flex; align-items: center; gap: 6px; font-size: .68rem; color: var(--text-2); }
.exec-ci-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.exec-ci-pass { background: #22c55e; }
.exec-ci-fail { background: #ef4444; }
.exec-ci-warn { background: #eab308; }
.exec-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) { .exec-bottom-row { grid-template-columns: 1fr; } }
.exec-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.exec-card-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.exec-spark-wrap { height: 90px; position: relative; }
.exec-spark-svg { width: 100%; height: 80px; overflow: visible; }
.exec-spark-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}
.exec-spark-lbl { font-size: .62rem; color: var(--text-3); }
.exec-findings-list { display: flex; flex-direction: column; gap: 4px; }
.exec-finding-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  background: var(--bg-2);
  font-size: .76rem;
}
.exec-f-bar { width: 3px; height: 28px; border-radius: 2px; flex-shrink: 0; }
.exec-f-sev {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .07em;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  width: 56px;
  text-align: center;
  border: 1px solid;
}
.exec-f-name { flex: 1; color: var(--text-2); line-height: 1.3; }
.exec-f-owasp { font-size: .65rem; font-weight: 700; color: var(--text-3); flex-shrink: 0; }
.exec-owasp-list { display: flex; flex-direction: column; gap: 8px; }
.exec-owasp-row { display: flex; flex-direction: column; gap: 4px; }
.exec-owasp-top { display: flex; justify-content: space-between; align-items: center; }
.exec-owasp-name { font-size: .72rem; color: var(--text-2); }
.exec-owasp-count { font-size: .72rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.exec-owasp-track { height: 6px; background: var(--bg-2); border-radius: 99px; overflow: hidden; }
.exec-owasp-fill { height: 100%; border-radius: 99px; }
.exec-cert-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  transition: all .25s;
}
.exec-cert-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: execPulse 2s infinite;
}
@keyframes execPulse { 0%,100%{opacity:1}50%{opacity:.4} }
.exec-fade { transition: opacity .15s; }
.exec-fade.fading { opacity: 0; }

/* ── Asset Inventory ────────────────────────────────────────────────────────── */
.asset-controls {
  margin-bottom: 18px;
}
.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.asset-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.asset-card-header { display: flex; flex-direction: column; gap: 4px; }
.asset-url-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.asset-url {
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  word-break: break-all;
  flex: 1;
  min-width: 0;
}
.asset-url:hover { text-decoration: underline; }
.asset-risk-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}
.asset-risk-badge.critical { background: #fef2f2; color: var(--critical); }
.asset-risk-badge.high     { background: #fff7ed; color: var(--high); }
.asset-risk-badge.medium   { background: #fefce8; color: #a16207; }
.asset-risk-badge.low      { background: #f0fdf4; color: var(--secure); }
[data-theme="dark"] .asset-risk-badge.critical { background: #450a0a; }
[data-theme="dark"] .asset-risk-badge.high     { background: #431407; }
[data-theme="dark"] .asset-risk-badge.medium   { background: #422006; }
[data-theme="dark"] .asset-risk-badge.low      { background: #052e16; }
.asset-meta { display: flex; gap: 12px; }
.asset-meta-item { font-size: 12px; color: var(--text-3); }
.asset-finding-counts { display: flex; gap: 6px; flex-wrap: wrap; }
.asset-count-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.asset-count-badge.critical { background: #fef2f2; color: var(--critical); }
.asset-count-badge.high     { background: #fff7ed; color: var(--high); }
.asset-count-badge.medium   { background: #fefce8; color: #a16207; }
.asset-count-badge.low      { background: #eff6ff; color: var(--low); }
[data-theme="dark"] .asset-count-badge.critical { background: #450a0a; }
[data-theme="dark"] .asset-count-badge.high     { background: #431407; }
[data-theme="dark"] .asset-count-badge.medium   { background: #422006; }
[data-theme="dark"] .asset-count-badge.low      { background: #1e3a5f; }
.asset-trend {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
}
.trend-dot {
  width: 10px;
  border-radius: 2px 2px 0 0;
  display: inline-block;
}
.asset-actions { margin-top: 4px; }

/* ── Nuclei Templates ───────────────────────────────────────────────────────── */
.nuclei-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.nuclei-editor-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.nuclei-editor-textarea {
  width: 100%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.6;
  background: var(--bg-2);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.nuclei-editor-textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

/* ── Template Help Modal ────────────────────────────────────────────────────── */
.template-help-modal {
  max-width: 640px;
  width: 96vw;
  max-height: 85vh;
  overflow-y: auto;
}
.template-help-pre {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.65;
  overflow-x: auto;
  margin-top: 12px;
  white-space: pre;
}
.template-help-pre code { color: var(--text); }

/* ── btn-danger (small) ─────────────────────────────────────────────────────── */
.btn-danger.btn-xs {
  padding: 3px 8px;
  font-size: 11px;
  background: #fef2f2;
  color: var(--critical);
  border: 1px solid #fca5a5;
  border-radius: 4px;
  cursor: pointer;
}
.btn-danger.btn-xs:hover { background: #fee2e2; }
[data-theme="dark"] .btn-danger.btn-xs { background: #450a0a; border-color: #991b1b; }

/* ── Abort Button ───────────────────────────────────────────────────────────── */
.progress-abort-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.btn-abort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #fef2f2;
  color: var(--critical);
  border: 1px solid #fca5a5;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-abort:hover:not(:disabled) { background: #fee2e2; }
.btn-abort:disabled { opacity: .5; cursor: not-allowed; }
[data-theme="dark"] .btn-abort {
  background: #450a0a;
  border-color: #991b1b;
  color: #fca5a5;
}

/* ── Finding Correlations ───────────────────────────────────────────────────── */
.correlation-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.correlation-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid var(--border);
  background: var(--bg-2);
}
.correlation-item.sev-critical { border-color: var(--critical); background: #fef2f2; }
.correlation-item.sev-high     { border-color: var(--high);     background: #fff7ed; }
.correlation-item.sev-medium   { border-color: var(--warning);  background: #fefce8; }
[data-theme="dark"] .correlation-item.sev-critical { background: #2d0707; }
[data-theme="dark"] .correlation-item.sev-high     { background: #2d1507; }
[data-theme="dark"] .correlation-item.sev-medium   { background: #2d2007; }
.corr-sev-badge {
  display: inline-block;
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 800;
  margin-top: 1px;
}
.corr-sev-badge.critical { background: var(--critical); color: #fff; }
.corr-sev-badge.high     { background: var(--high);     color: #fff; }
.corr-sev-badge.medium   { background: var(--warning);  color: #fff; }
.corr-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
}

/* ── Industry Benchmark widget ───────────────────────────────────────────────── */
.benchmark-widget {
  margin: 8px 0 0;
  background: linear-gradient(90deg, #eff6ff, #f0fdfa);
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 10px 14px;
}
[data-theme="dark"] .benchmark-widget { background: linear-gradient(90deg, #0c1a2e, #0a1f1e); border-color: #1e40af; }
.benchmark-inner { display: flex; align-items: flex-start; gap: 10px; }
.benchmark-icon  { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
.benchmark-label { font-size: .78rem; font-weight: 600; color: #1e40af; margin-bottom: 2px; }
[data-theme="dark"] .benchmark-label { color: #93c5fd; }
.benchmark-stat  { font-size: .8rem; color: var(--text-1); line-height: 1.5; }

/* ── Attack Paths Panel ─────────────────────────────────────────────────────── */
.attack-paths-panel {
  margin: 12px 0 0;
  background: var(--bg-2);
  border: 1px solid #f97316;
  border-radius: 10px;
  padding: 14px 16px;
}
.attack-paths-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.attack-paths-icon { font-size: 1.2rem; }
.attack-paths-title { font-weight: 700; font-size: .95rem; color: var(--text-1); }
.attack-paths-hint { font-size: .75rem; color: var(--text-2); margin-left: auto; }
.attack-path-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--border);
  background: var(--bg-3);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.attack-path-chain {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-1);
  flex: 1;
  min-width: 0;
}
.attack-path-sources { width: 100%; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.corr-finding-name {
  display: inline-block;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: .7rem;
  color: var(--text-2);
}
/* ── Questionnaire Tab ───────────────────────────────────────────────────────── */
.questionnaire-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.questionnaire-title { font-size: 1rem; font-weight: 700; color: var(--text-1); margin: 0; }
.questionnaire-subtitle { font-size: .8rem; color: var(--text-2); margin: 2px 0 0; }
.questionnaire-category { font-size: .85rem; font-weight: 700; color: var(--primary-2); margin: 16px 0 6px; }
.questionnaire-row {
  display: grid;
  grid-template-columns: 1fr 100px 80px;
  gap: 8px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
}
.questionnaire-row:hover { background: var(--bg-2); border-radius: 4px; }
.q-question { color: var(--text-1); line-height: 1.45; }
.q-answer { font-weight: 700; text-align: center; padding: 2px 8px; border-radius: 12px; font-size: .75rem; }
.q-answer.yes      { background: #d1fae5; color: #065f46; }
.q-answer.no       { background: #fee2e2; color: #991b1b; }
.q-answer.partial  { background: #fef3c7; color: #92400e; }
.q-answer.not-assessed { background: var(--bg-3); color: var(--text-2); }
.q-override-btn { cursor: pointer; background: none; border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; font-size: .72rem; color: var(--text-2); }
.q-override-btn:hover { background: var(--bg-3); }
[data-theme="dark"] .q-answer.yes     { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .q-answer.no      { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .q-answer.partial { background: #422006; color: #fcd34d; }
.q-evidence { font-size: .72rem; color: var(--text-2); margin-top: 2px; line-height: 1.4; }

/* ── Wordlist Settings ──────────────────────────────────────────────────────── */
.wordlist-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.wordlist-count-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.settings-row-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* ── Vulnerability Age Badge ────────────────────────────────────────────────── */
.age-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── CSP Builder Modal ──────────────────────────────────────────────────────── */
.csp-modal {
  max-width: 680px;
  width: 95vw;
}
.csp-output {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text-1);
  max-height: 340px;
  overflow-y: auto;
  margin: 12px 0;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* ── Scan Diff Modal ─────────────────────────────────────────────────────────── */
.diff-modal-inner {
  max-width: 860px;
  width: 95vw;
}
.diff-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.diff-body {
  max-height: 520px;
  overflow-y: auto;
}
.diff-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.diff-header-row,
.diff-row {
  display: grid;
  grid-template-columns: 60px 1fr 120px 120px;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
}
.diff-header-row {
  background: var(--bg-3);
  font-weight: 700;
  color: var(--text-2);
  font-size: 11px;
  text-transform: uppercase;
}
.diff-row.diff-added    { background: rgba(34,197,94,0.08);  border-left: 3px solid var(--secure); }
.diff-row.diff-removed  { background: rgba(239,68,68,0.08);  border-left: 3px solid var(--critical); }
.diff-row.diff-changed  { background: rgba(234,179,8,0.08);  border-left: 3px solid var(--warning); }
.diff-row.diff-same     { background: transparent; }
.diff-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  background: var(--bg-3);
}
.diff-col-name { color: var(--text-1); font-size: 12px; }
.diff-col-a, .diff-col-b { text-align: center; }
.diff-summary {
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
  margin-top: 10px;
}

/* ── CWE Badge & Detail ─────────────────────────────────────────────────────── */
.scanner-badge {
  display: inline-flex; align-items: center;
  padding: 2px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
}
.scanner-badge.wpscan {
  background: rgba(33,182,112,.15); border: 1px solid rgba(33,182,112,.35); color: #21b670;
}
.cwe-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.35);
  color: #a78bfa;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  font-family: monospace;
}
.cwe-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cwe-link {
  color: #a78bfa;
  font-weight: 700;
  font-family: monospace;
  font-size: 12px;
  text-decoration: none;
}
.cwe-link:hover {
  text-decoration: underline;
}
.cwe-name-text {
  color: var(--text-2);
  font-size: 12px;
}

/* ── Multi-Target Security Heatmap ─────────────────────────────────────────── */
.heatmap-wrap {
  overflow-x: auto;
}
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.hm-legend-item {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 10px;
}
.hm-legend-item.hm-critical { background: rgba(239,68,68,0.75);  color: #fff; }
.hm-legend-item.hm-high     { background: rgba(249,115,22,0.70); color: #fff; }
.hm-legend-item.hm-medium   { background: rgba(234,179,8,0.60);  color: #000; }
.hm-legend-item.hm-low      { background: rgba(16,185,129,0.45); color: #fff; }
.hm-legend-item.hm-info     { background: rgba(29,95,180,0.30); color: #c4b5fd; }
.hm-legend-item.hm-empty    { background: var(--bg-3); color: var(--text-3); }
.heatmap-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.heatmap-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 820px;
  font-size: 12px;
}
.heatmap-table thead {
  background: var(--bg-3);
}
.hm-th {
  padding: 6px 8px;
  text-align: center;
  color: var(--text-2);
  font-size: 10px;
  font-weight: 700;
  white-space: pre-line;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.hm-asset-head {
  text-align: left;
  min-width: 200px;
}
.hm-cell {
  text-align: center;
  padding: 6px 4px;
  font-weight: 700;
  font-size: 11px;
  border-right: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: default;
  color: #fff;
}
.hm-cell.hm-empty { color: var(--text-3); background: var(--bg-3) !important; font-weight: 400; }
.hm-cell.hm-medium { color: #000; }
.hm-asset-cell {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
}
.hm-asset-link {
  color: var(--text-1);
  text-decoration: none;
  font-size: 11px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hm-asset-link:hover { color: var(--primary); }

/* btn active state (list/heatmap toggle) */
.btn-ghost.active {
  background: rgba(29,95,180,0.2);
  color: var(--primary);
  border-color: var(--primary);
}

/* ─── Tech Stack Change Banner ───────────────────────────────── */
.tech-change-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.4);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.tech-change-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1.4;
}
.tech-change-body { flex: 1; }
.tech-change-title {
  font-weight: 600;
  color: #fbbf24;
  font-size: 13px;
  margin-bottom: 4px;
}
.tech-change-details { font-size: 12px; color: var(--text-2); line-height: 1.6; }
.tech-change-tag {
  display: inline-block;
  font-size: 11px;
  border-radius: 4px;
  padding: 1px 6px;
  margin: 1px 3px 1px 0;
  font-weight: 500;
}
.tech-change-tag.added   { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.tech-change-tag.removed { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }

/* ─── Priority Matrix ─────────────────────────────────────────── */
.pm-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0;
}
.pm-axis-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: -4px;
}
.pm-axis-label {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
}
.pm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}
.pm-quadrant {
  border-radius: 10px;
  padding: 14px 14px 10px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--bg-2);
}
.pm-quick     { border-color: rgba(239,68,68,0.4);  background: rgba(239,68,68,0.05); }
.pm-plan      { border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.05); }
.pm-fill      { border-color: rgba(29,95,180,0.4); background: rgba(29,95,180,0.05); }
.pm-depriority{ border-color: rgba(100,116,139,0.4); background: rgba(100,116,139,0.05); }

.pm-q-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.pm-q-icon  { font-size: 16px; }
.pm-q-title { font-size: 12px; font-weight: 700; color: var(--text-1); }
.pm-q-desc  { font-size: 10px; color: var(--text-3); flex: 1; text-align: right; }

.pm-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--bg-3);
  font-size: 11px;
  color: var(--text-2);
  cursor: default;
}
.pm-item:hover { background: var(--bg-4, #1e2235); color: var(--text-1); }
.pm-item-sev {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
.pm-item-sev.critical { background: rgba(239,68,68,0.2); color: #f87171; }
.pm-item-sev.high     { background: rgba(251,146,60,0.2); color: #fb923c; }
.pm-item-sev.medium   { background: rgba(251,191,36,0.2); color: #fbbf24; }
.pm-item-sev.low      { background: rgba(29,95,180,0.2); color: #818cf8; }
.pm-item-sev.info     { background: rgba(100,116,139,0.2); color: #94a3b8; }
.pm-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-empty {
  color: var(--text-3);
  font-size: 11px;
  text-align: center;
  padding: 18px 0;
  font-style: italic;
}
.pm-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-3);
}
.pm-legend-item { display: flex; align-items: center; gap: 5px; }
.pm-legend-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ─── Recon Timeline Modal ────────────────────────────────────── */
.timeline-modal-inner {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: min(860px, 96vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.timeline-target-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.timeline-target-row label { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.timeline-target-row select {
  flex: 1;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-1);
  padding: 6px 10px;
  font-size: 13px;
}
.timeline-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.tl-list { display: flex; flex-direction: column; gap: 0; position: relative; }
.tl-list::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--border);
}
.tl-item {
  display: flex;
  gap: 16px;
  position: relative;
  padding-bottom: 20px;
}
.tl-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  z-index: 1;
  position: relative;
}
.tl-dot.scan    { border-color: var(--primary); background: rgba(29,95,180,0.2); color: var(--primary); }
.tl-dot.tech    { border-color: #fbbf24; background: rgba(251,191,36,0.15); color: #fbbf24; }
.tl-dot.risk-up { border-color: #f87171; background: rgba(239,68,68,0.15); color: #f87171; }
.tl-dot.risk-dn { border-color: #4ade80; background: rgba(34,197,94,0.15); color: #4ade80; }
.tl-dot.cert    { border-color: #60a5fa; background: rgba(96,165,250,0.15); color: #60a5fa; }
.tl-content { flex: 1; padding-top: 2px; }
.tl-title   { font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 3px; }
.tl-detail  { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.tl-date    { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.tl-empty   { text-align: center; color: var(--text-3); padding: 40px 0; font-size: 13px; }

/* ─── Finding Note Badges ───────────────────────────────────────────────── */
.fn-fp-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(239,68,68,0.15);
  color: #f87171;
  border: 1px solid rgba(239,68,68,0.35);
  letter-spacing: .04em;
  cursor: help;
}
.fn-note-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  cursor: help;
  opacity: .75;
}
.fn-note-badge:hover { opacity: 1; }

/* ─── Note / FP Modal ───────────────────────────────────────────────────── */
.note-modal-inner {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: min(540px, 94vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.note-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.note-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
  margin-bottom: -6px;
}
.note-textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 12px;
  font-size: 13px;
  font-family: 'Inter', system-ui, sans-serif;
  resize: vertical;
  line-height: 1.5;
  box-sizing: border-box;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.note-textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.note-fp-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.note-fp-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-2);
  user-select: none;
}
.note-fp-label input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--primary);
  cursor: pointer;
}
.note-fp-reason-row { display: flex; flex-direction: column; gap: 6px; }
.note-reason-input {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-1);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.note-reason-input:focus {
  outline: none;
  border-color: var(--primary);
}

/* ── User panel (sidebar) ─────────────────────────────────────────────────── */
.sidebar-user-panel {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-top: 1px solid var(--border);
  margin-top: auto; position: relative;
}
.sup-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: #1d5fb4; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.sup-info  { flex: 1; min-width: 0; }
.sup-name  { font-size: 12px; font-weight: 600; color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-tier  { font-size: 10px; font-weight: 700; }
.sup-menu-btn {
  background: none; border: none; color: var(--text-2); cursor: pointer;
  font-size: 18px; padding: 2px 6px; line-height: 1; border-radius: 4px;
}
.sup-menu-btn:hover { background: var(--bg-3); color: var(--text-1); }

.sup-dropdown {
  position: absolute; bottom: 52px; left: 8px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 6px 0; min-width: 200px; z-index: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.sup-dropdown button {
  display: block; width: 100%; text-align: left;
  padding: 9px 16px; font-size: 13px; color: var(--text-1);
  background: none; border: none; cursor: pointer; font-family: inherit;
}
.sup-dropdown button:hover { background: var(--bg-3); }
.sup-dropdown hr  { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.sup-logout { color: #f87171 !important; }

/* ── User modals ──────────────────────────────────────────────────────────── */
.user-modal-inner {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px;
  width: clamp(480px, 55vw, 680px); max-height: 90vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.user-modal-wide { width: clamp(560px, 65vw, 800px); }
.user-modal-inner > .modal-header {
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border); margin-bottom: 0; flex-shrink: 0;
}
.user-modal-inner > .modal-footer {
  padding: 16px 24px; border-top: 1px solid var(--border); padding-top: 16px; margin-top: 0;
}
.user-modal-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }

/* Subscription */
.sub-current-row  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sub-tier-badge {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 5px; border: 1px solid;
}
.sub-tier-badge.bronze    { color: #cd7f32; border-color: #cd7f32; background: rgba(205,127,50,.1); }
.sub-tier-badge.silver    { color: #94a3b8; border-color: #94a3b8; background: rgba(148,163,184,.1); }
.sub-tier-badge.gold      { color: #fbbf24; border-color: #fbbf24; background: rgba(251,191,36,.1); }
.sub-tier-badge.enterprise{ color: #818cf8; border-color: #818cf8; background: rgba(129,140,248,.1); }
.sub-tier-badge.vip       { color: #a855f7; border-color: #a855f7; background: rgba(168,85,247,.1); }
.sub-price   { font-size: 14px; font-weight: 700; color: var(--text-1); }
.sub-renewal { font-size: 12px; color: var(--text-2); }
.sub-section-title { font-size: 13px; font-weight: 700; color: var(--text-1); margin-bottom: 6px; }
.sub-hint    { font-size: 12px; color: var(--text-2); line-height: 1.5; }
/* Billing cycle toggle */
.billing-cycle-toggle {
  display: flex; gap: 0; margin-bottom: 14px;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.cycle-btn {
  flex: 1; padding: 8px 12px; font-size: 13px; font-weight: 500;
  background: transparent; color: var(--text-2); border: none; cursor: pointer;
  transition: background .15s, color .15s;
}
.cycle-btn.active { background: var(--primary); color: #fff; }
.cycle-btn:not(.active):hover { background: var(--bg-3); }
.cycle-discount-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  background: #22c55e; color: #000; border-radius: 4px;
  padding: 1px 5px; margin-left: 5px; vertical-align: middle;
}

.sub-plan-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 10px;
  margin-bottom: 12px;
}
.sub-plan-card {
  border: 1px solid var(--border); border-radius: 9px; padding: 12px;
  cursor: pointer; transition: border-color .15s; background: var(--bg-3);
  text-align: center;
}
.sub-plan-card:hover    { border-color: var(--primary); }
.sub-plan-card.current  { border-color: #22c55e; }
.sub-plan-card.selected { border-color: var(--primary); background: rgba(29,95,180,.15); box-shadow: 0 0 0 2px rgba(29,95,180,.3); position: relative; }
.plan-annual-note { font-size: 10px; color: var(--text-2); margin-top: 2px; }
.plan-current-tag { font-size: 10px; color: #22c55e; font-weight: 700; margin-top: 4px; }

/* Monri payment notice */
.monri-notice {
  margin-top: 8px; padding: 10px 14px; border-radius: 8px;
  background: rgba(29,95,180,.08); border: 1px solid rgba(29,95,180,.2);
  font-size: 12px; color: var(--text-2);
}
.monri-notice strong { color: var(--text-1); }

/* Payment method cards */
.pay-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.pay-method-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 10px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--bg-2);
  transition: border-color .15s, background .15s; text-align: center;
}
.pay-method-card:hover    { border-color: var(--primary); }
.pay-method-card.selected { border-color: var(--primary); background: rgba(29,95,180,.15); box-shadow: 0 0 0 2px rgba(29,95,180,.3); }
.pm-icon  { font-size: 1.5rem; }
.pm-label { font-size: .82rem; font-weight: 600; color: var(--text-1); }
.pm-hint  { font-size: .7rem;  color: var(--text-3); }

.sub-card-info { margin-bottom: 8px; }
.card-chip {
  display: inline-block; background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 12px; font-size: 13px; font-family: monospace;
}
.billing-history-list { display: flex; flex-direction: column; gap: 4px; }
.bill-hist-row {
  display: flex; gap: 12px; justify-content: space-between;
  font-size: 12px; color: var(--text-2); padding: 5px 0;
  border-bottom: 1px solid var(--bg-4);
}
.bill-amt { font-weight: 700; color: var(--text-1); }

/* ── Profile modal - auth-card style ────────────────────────────────────── */
.pm-card {
  background: var(--bg-2, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: 16px;
  width: clamp(360px, 48vw, 500px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.pm-close-btn {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; color: var(--text-2);
  cursor: pointer; font-size: 16px; line-height: 1;
  padding: 5px 9px; border-radius: 6px; transition: color .15s, background .15s;
  z-index: 2;
}
.pm-close-btn:hover { color: var(--text-1); background: var(--bg-3); }
.pm-hero {
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 36px 24px; text-align: center;
  border-bottom: 1px solid var(--border, #30363d);
}
.pm-avatar {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #1d5fb4 0%, #06b6d4 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 800; color: #fff;
  box-shadow: 0 4px 20px rgba(29,95,180,.4);
}
.pm-fullname { font-weight: 700; font-size: 1.1rem; color: var(--text-1); }
.pm-email    { font-size: .84rem; color: var(--text-2); margin-top: 3px; }
.pm-since    { font-size: .75rem; color: var(--text-3); margin-top: 3px; }
.pm-body {
  flex: 1; overflow-y: auto; padding: 0 36px;
}
.pm-section {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border, #30363d);
}
.pm-section:last-child { border-bottom: none; }
.pm-section-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-3);
}
.pm-pw-err { color: #f87171; font-size: .82rem; }
.pm-footer {
  padding: 20px 36px 28px;
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--border, #30363d);
}
.pm-save-btn {
  background: var(--primary, #1d5fb4); color: #fff;
  border: none; border-radius: 8px;
  padding: 12px 20px; font-size: 15px; font-weight: 600;
  cursor: pointer; width: 100%; font-family: inherit;
  transition: background .15s;
}
.pm-save-btn:hover { background: var(--primary-h, #818cf8); }
.pm-cancel-btn {
  background: none; color: var(--text-2);
  border: 1px solid var(--border, #30363d); border-radius: 8px;
  padding: 10px 20px; font-size: 14px;
  cursor: pointer; width: 100%; font-family: inherit;
  transition: border-color .15s, color .15s;
}
.pm-cancel-btn:hover { border-color: var(--primary); color: var(--primary); }

.btn-danger {
  background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.3);
  border-radius: 7px; padding: 7px 14px; font-size: 13px; cursor: pointer;
}
.btn-danger:hover { background: rgba(239,68,68,.25); }

/* Sites modal */
.sites-add-row  { display: flex; gap: 8px; }
.sites-limit-note { font-size: 12px; color: var(--text-2); }
.sites-list { display: flex; flex-direction: column; gap: 6px; }
.site-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--bg-3); border-radius: 8px; font-size: 13px;
}
.site-domain { flex: 1; font-weight: 600; }
.site-date   { font-size: 11px; color: var(--text-2); }
.badge-verified {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  background: rgba(34,197,94,0.12); color: #22c55e;
  border: 1px solid rgba(34,197,94,0.3); border-radius: 20px;
  white-space: nowrap;
}
.btn-verify {
  font-size: 11px; color: var(--primary); border-color: rgba(29,95,180,0.4);
}
.auth-confirm-row {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-size: 12px; color: var(--text-2); line-height: 1.5;
  padding: 10px; background: rgba(251,191,36,.06); border-radius: 8px;
  border: 1px solid rgba(251,191,36,.2);
}
.auth-confirm-row input { margin-top: 2px; flex-shrink: 0; accent-color: #1d5fb4; }

/* My tickets */
.my-tickets-list { display: flex; flex-direction: column; gap: 8px; }
.my-ticket-row   { padding: 10px 12px; background: var(--bg-3); border-radius: 8px; }
.mt-subject { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.mt-meta    { display: flex; gap: 12px; font-size: 12px; color: var(--text-2); }

/* Shared tier colors */
.tier-bronze    { color: #cd7f32; }
.tier-silver    { color: #94a3b8; }
.tier-gold      { color: #fbbf24; }
.tier-enterprise{ color: #818cf8; }
.tier-vip       { color: #a855f7; }

/* ── Batch 22: API Keys, Scan Profiles, Scheduled Scans ─────────────────────── */

/* API key rows */
.apikey-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--bg-3); border-radius: 8px;
  margin-bottom: 6px;
}
.apikey-info { flex: 1; min-width: 0; }
.apikey-name  { font-size: 13px; font-weight: 600; color: var(--text-1); }
.apikey-prefix{
  display: inline-block; font-size: 12px; font-family: monospace;
  background: var(--bg-4); padding: 2px 6px; border-radius: 4px;
  color: #1d5fb4; margin: 0 6px;
}
.apikey-meta { font-size: 11px; color: var(--text-2); }

/* Scan profile rows */
.profile-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--bg-3); border-radius: 8px;
  margin-bottom: 6px;
}
.profile-info { flex: 1; min-width: 0; }
.profile-name { font-size: 13px; font-weight: 600; color: var(--text-1); display: block; }
.profile-meta { font-size: 11px; color: var(--text-2); }

/* Scheduled scan rows */
.sched-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; background: var(--bg-3); border-radius: 8px;
  margin-bottom: 6px;
}
.sched-info  { flex: 1; min-width: 0; }
.sched-url   { font-size: 13px; font-weight: 600; color: var(--text-1); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-meta  { font-size: 11px; color: var(--text-2); display: block; }
.sched-toggle{
  display: flex; align-items: center; gap: 4px; font-size: 11px;
  color: var(--text-2); cursor: pointer;
}
.sched-toggle input { accent-color: #1d5fb4; }

/* Shared create form box */
.sp-create-form { margin-bottom: 14px; }

/* System health panel */
.health-grid {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 14px;
}
.health-metric {
  display: flex; align-items: center; gap: 10px; font-size: 12px;
}
.hm-label    { width: 36px; font-weight: 700; color: var(--text-2); flex-shrink: 0; }
.hm-bar-wrap { flex: 1; height: 6px; background: var(--bg-4); border-radius: 3px; overflow: hidden; }
.hm-bar      { height: 100%; border-radius: 3px; transition: width .4s, background .4s; width: 0; }
.hm-value    { width: 180px; font-size: 12px; color: var(--text-1); text-align: right; }
.health-details { display: flex; flex-wrap: wrap; gap: 0; }
.hd-row {
  display: flex; justify-content: space-between; align-items: center;
  width: 50%; padding: 5px 0; font-size: 12px; border-bottom: 1px solid var(--bg-4);
  color: var(--text-2);
}
.hd-row b { color: var(--text-1); }

/* Ticket badge pill in admin sidebar */
.ticket-badge-pill {
  background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 9px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Admin: adm-btn-xs.danger hover already defined; ensure consistent */
.adm-btn-xs.danger { border-color: rgba(239,68,68,.3); color: #f87171; }
.adm-btn-xs.danger:hover { background: rgba(239,68,68,.15); }

/* ── Batch 23: Onboarding wizard ─────────────────────────────────────────────── */
.onboarding-inner { max-width: 460px; padding: 36px; text-align: center; }
.onboarding-progress {
  display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 32px;
}
.onboarding-step-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg-4); border: 2px solid var(--border);
  transition: background .3s, border-color .3s;
}
.onboarding-step-dot.active { background: var(--accent); border-color: var(--accent); }
.onboarding-step-dot.done   { background: #4ade80; border-color: #4ade80; }
.onboarding-step-line { flex: 1; height: 2px; background: var(--border); max-width: 60px; }
.ob-icon  { font-size: 3rem; margin-bottom: 16px; }
.ob-title { font-size: 1.4rem; font-weight: 700; color: var(--text-1); margin-bottom: 12px; }
.ob-desc  { color: var(--text-2); font-size: .9rem; line-height: 1.6; margin-bottom: 24px; }

/* ── SLA breach indicator ────────────────────────────────────────────────────── */
.sla-breach-badge {
  background: #7f1d1d; color: #fca5a5;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  padding: 2px 8px; border-radius: 12px; margin-left: 8px;
}
.sla-ok-badge {
  background: #052e16; color: #4ade80;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  padding: 2px 8px; border-radius: 12px; margin-left: 8px;
}

/* ── Keyboard-focused finding ────────────────────────────────────────────────── */
.finding-item.kb-focused, .finding-card.kb-focused {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Keyboard shortcut toast (info variant) ─────────────────────────────────── */
.toast.info { background: #1e293b; border-color: #334155; }

/* ── Notification bell ───────────────────────────────────────────────────────── */
.sidebar-footer-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.notif-bell-wrap { position: relative; display: inline-flex; }
.notif-bell-btn {
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px; color: var(--text-2);
  position: relative; transition: background .2s, color .2s; flex-shrink: 0;
}
.notif-bell-btn:hover { background: var(--surface-2); color: var(--text); }
.notif-badge {
  position: absolute; top: 2px; right: 2px;
  background: #ef4444; color: #fff; font-size: 9px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; pointer-events: none;
}
.notif-dropdown {
  position: fixed;
  /* top/left set via JS in toggleNotifDropdown() */
  width: 340px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.55);
  z-index: 9999;
  overflow: hidden;
}
.notif-dropdown-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.notif-dropdown-title { font-weight: 600; color: var(--text-1); font-size: .9rem; }
.notif-mark-all {
  background: none; border: none; color: var(--accent); font-size: .78rem;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
  transition: background .15s;
}
.notif-mark-all:hover { background: rgba(29,95,180,.15); }
.notif-list { flex: 1; overflow-y: auto; }
.notif-empty { padding: 24px; text-align: center; color: var(--text-3); font-size: .85rem; }
.notif-item {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .15s;
  display: flex; gap: 10px; align-items: flex-start;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-3); }
.notif-item.unread { background: rgba(29,95,180,.06); }
.notif-item.unread:hover { background: rgba(29,95,180,.12); }
.notif-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  flex-shrink: 0; margin-top: 5px;
}
.notif-item.read .notif-dot { background: transparent; }
.notif-body { flex: 1; min-width: 0; }
.notif-item-title { font-weight: 600; color: var(--text-1); font-size: .85rem; margin-bottom: 2px; }
.notif-item-body { color: var(--text-2); font-size: .78rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-item-time { color: var(--text-3); font-size: .72rem; margin-top: 2px; }

/* ── Scan preset buttons ─────────────────────────────────────────────────────── */
.preset-btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.preset-btn {
  background: var(--bg-3); border: 1.5px solid var(--border); color: var(--text-2);
  padding: 8px 16px; border-radius: 8px; font-size: .85rem; font-weight: 500;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.preset-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--primary); }
.preset-btn.active { background: rgba(29,95,180,.15); border-color: var(--primary); color: var(--primary); }

/* ── Scan templates ──────────────────────────────────────────────────────────── */
.tpl-row { display: flex; gap: 8px; align-items: center; }
.tpl-select { flex: 1; min-width: 0; }
.btn-tpl-save {
  background: var(--bg-3); border: 1.5px solid var(--border); color: var(--text-2);
  padding: 8px 14px; border-radius: 8px; font-size: .82rem; font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s;
}
.btn-tpl-save:hover { background: var(--surface-2); border-color: var(--primary); color: var(--primary); }
.tpl-save-modal {
  background: var(--bg-3); border: 1.5px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-top: 6px;
}
.tpl-save-actions { display: flex; gap: 8px; margin-top: 8px; }
.btn-tpl-confirm {
  background: var(--primary); color: #fff; border: none;
  padding: 7px 16px; border-radius: 7px; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.btn-tpl-confirm:hover { opacity: .88; }
/* ── Finding prevalence badge ──────────────────────────────────────────────── */
.prevalence-tag {
  display: inline-block; font-size: .75rem; color: var(--text-3);
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: middle;
}

/* ── Asset inventory ─────────────────────────────────────────────────────────── */
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.asset-card {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px; cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.asset-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(29,95,180,.15); }
.asset-domain { font-weight: 700; color: var(--text-1); font-size: 1rem; margin-bottom: 4px; word-break: break-all; }
.asset-last-scan { color: var(--text-3); font-size: .78rem; margin-bottom: 12px; }
.asset-findings-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.asset-sev-chip {
  font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  text-transform: uppercase;
}
.asset-sev-chip.critical { background: #7f1d1d; color: #fca5a5; }
.asset-sev-chip.high     { background: #7c2d12; color: #fdba74; }
.asset-sev-chip.medium   { background: #713f12; color: #fde68a; }
.asset-sev-chip.low      { background: #1e3a5f; color: #93c5fd; }
.asset-ssl-row { font-size: .78rem; color: var(--text-3); }
.asset-ssl-row.warn { color: #fde68a; }
.asset-ssl-row.danger { color: #fca5a5; }
.asset-score-bar-wrap { margin-top: 10px; }
.asset-score-label { font-size: .75rem; color: var(--text-3); margin-bottom: 4px; }
.asset-score-bar { height: 4px; background: var(--bg-3); border-radius: 2px; overflow: hidden; }
.asset-score-fill { height: 100%; border-radius: 2px; transition: width .4s; }
.score-fill-good   { background: #4ade80; }
.score-fill-medium { background: #fde68a; }
.score-fill-bad    { background: #f87171; }

.asset-controls { margin-bottom: 16px; }


/* ── History Pagination ───────────────────────────────────────────────────── */
.pagination-bar {
  display: flex; align-items: center; gap: 4px;
  justify-content: center; padding: 16px 0 8px; flex-wrap: wrap;
}
.pg-btn {
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--text-2); border-radius: 6px; padding: 5px 11px;
  font-size: .82rem; cursor: pointer; transition: background .15s, color .15s;
}
.pg-btn:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); }
.pg-btn:disabled { opacity: .4; cursor: default; }
.pg-btn.pg-active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.pg-info { color: var(--text-3); font-size: .8rem; margin-right: 8px; }
.pg-ellipsis { color: var(--text-3); padding: 0 4px; }

/* ── Session Timeout Modal ────────────────────────────────────────────────── */
#session-timeout-modal .modal {
  border: 2px solid #f59e0b;
  background: var(--bg-1);
}
#session-countdown { color: #f59e0b; font-size: 1.1em; }

/* ── Asset Candidates Modal ───────────────────────────────────────────────── */
.ac-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  transition: background .15s;
}
.ac-row:hover { background: var(--surface-3); }
.ac-check { accent-color: var(--primary); width: 15px; height: 15px; flex-shrink: 0; }
.ac-name { font-size: 13px; color: var(--text); font-family: 'JetBrains Mono', monospace; word-break: break-all; }

/* ── Fix Snippets ─────────────────────────────────────────────────────────── */
.fix-snippets-section { margin-top: 10px; }
.snip-tabs {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 0;
}
.snip-tab {
  padding: 4px 12px; border-radius: 6px 6px 0 0;
  border: 1px solid var(--border); border-bottom: none;
  background: var(--surface-2); color: var(--text-3);
  font-size: .78rem; cursor: pointer; transition: background .15s, color .15s;
}
.snip-tab:hover { background: var(--surface-3); color: var(--text); }
.snip-tab.active { background: var(--surface-3); color: var(--primary); font-weight: 600; }
.snip-panes { position: relative; }
.snip-pane {
  display: none;
  margin: 0; padding: 12px 14px;
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: 0 6px 6px 6px;
  font-size: .78rem; line-height: 1.6;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text); white-space: pre-wrap; word-break: break-word;
  max-height: 220px; overflow-y: auto;
}
.snip-pane.active { display: block; }
.snip-copy-btn {
  margin-top: 6px; padding: 4px 14px;
  border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-2);
  font-size: .78rem; cursor: pointer; transition: background .15s;
}
.snip-copy-btn:hover { background: var(--primary); color: #fff; }

/* ── Compliance Posture ─────────────────────────────────────────────────────── */
.cp-frameworks { display: flex; flex-direction: column; gap: 24px; padding: 8px 0; }
.cp-framework { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 18px; }
.cp-fw-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cp-fw-name { font-size: 1rem; font-weight: 700; color: var(--text); }
.cp-fw-score { font-size: 1.2rem; font-weight: 800; }
.cp-progress-bar { height: 6px; background: var(--surface-3); border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.cp-progress-fill { height: 100%; border-radius: 4px; transition: width .4s; }
.cp-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.cp-stat { font-size: .8rem; font-weight: 600; }
.cp-stat.cp-pass { color: #16a34a; }
.cp-stat.cp-partial { color: #d97706; }
.cp-stat.cp-fail { color: #dc2626; }
.cp-stat.cp-na { color: var(--text-3); }
.cp-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.cp-table th { background: var(--surface-3); color: var(--text-2); font-weight: 600; padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border); }
.cp-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text); }
.cp-table tr:hover td { background: var(--surface-3); }
.cp-ctrl-id { font-family: monospace; font-size: .78rem; white-space: nowrap; color: var(--text-2); }
.cp-ctrl-status { white-space: nowrap; font-weight: 600; }
.cp-pass .cp-ctrl-status, .cp-pass-row .cp-ctrl-status { color: #16a34a; }
.cp-partial .cp-ctrl-status, .cp-partial-row .cp-ctrl-status { color: #d97706; }
.cp-fail .cp-ctrl-status, .cp-fail-row .cp-ctrl-status { color: #dc2626; }
.cp-na .cp-ctrl-status, .cp-na-row .cp-ctrl-status { color: var(--text-3); }
.cp-finding-chip { display: inline-block; background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px; padding: 1px 7px; font-size: .75rem; margin: 1px 2px; color: var(--text-2); }

/* ── CI/CD Integration panel ──────────────────────────────────────────────── */
.cicd-secret-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: .85rem; }
.cicd-secret-name { font-family: monospace; background: var(--surface-2); padding: 2px 8px; border-radius: 4px; color: var(--primary); white-space: nowrap; }
.cicd-secret-desc { color: var(--text-2); }
.cicd-snippet-wrap { position: relative; margin-top: 12px; }
.cicd-snippet { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 14px 14px 14px 14px; font-size: .78rem; font-family: monospace; white-space: pre; overflow-x: auto; color: var(--text); line-height: 1.5; margin: 0; max-height: 320px; overflow-y: auto; }
.cicd-copy-btn { position: absolute; top: 8px; right: 8px; z-index: 1; }
.cicd-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── Finding Insights ─────────────────────────────────────────────────────── */
.insight-section { background: color-mix(in srgb, var(--primary) 5%, var(--surface-1)); border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0; }
.insight-label { color: var(--primary) !important; }
.insight-body { display: flex; flex-direction: column; gap: 8px; font-size: .85rem; }
.insight-what { color: var(--text); line-height: 1.5; }
.insight-why { color: var(--text-2); line-height: 1.5; }
.insight-fix-wrap { margin-top: 2px; }
.insight-fix-title { font-weight: 600; font-size: .8rem; color: var(--text-2); margin-bottom: 4px; }
.insight-fix-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.insight-fix-list li { color: var(--text); line-height: 1.5; }
.insight-stack-hint { display: flex; align-items: flex-start; gap: 8px; background: var(--surface-2); border-radius: 6px; padding: 8px 10px; margin-top: 4px; font-size: .78rem; flex-wrap: wrap; }
.insight-stack-badge { background: var(--primary); color: #fff; border-radius: 4px; padding: 1px 7px; font-size: .72rem; font-weight: 700; white-space: nowrap; align-self: flex-start; margin-top: 1px; }
.insight-stack-hint code { font-family: monospace; color: var(--text); white-space: pre-wrap; word-break: break-all; }

/* ── Remediation Roadmap ─────────────────────────────────────────────────── */
.roadmap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .roadmap-grid { grid-template-columns: 1fr; } }
.roadmap-bucket { background: var(--surface); border: 1px solid; border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.roadmap-bucket-header { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.roadmap-count { margin-left: auto; font-size: .78rem; font-weight: 600; background: var(--surface-2); padding: 2px 8px; border-radius: 99px; color: var(--text-muted); }
.roadmap-item { background: var(--surface-2); border-radius: 7px; padding: 10px 12px; display: flex; align-items: flex-start; gap: 10px; }
.roadmap-sev { font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; white-space: nowrap; text-transform: uppercase; flex-shrink: 0; margin-top: 2px; }
.roadmap-item-body { flex: 1; min-width: 0; }
.roadmap-item-name { font-weight: 600; font-size: .85rem; color: var(--text); margin-bottom: 3px; }
.roadmap-item-rem { font-size: .78rem; color: var(--text-muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roadmap-tech-hints { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.roadmap-hint { font-size: .72rem; color: #a78bfa; }
.roadmap-owasp { font-size: .7rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; margin-top: 2px; }

/* ── AI Analysis tab ─────────────────────────────────────────────────────── */
.ai-analysis-box { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px 28px; white-space: pre-wrap; font-family: system-ui, sans-serif; font-size: .9rem; line-height: 1.7; color: var(--text); }
.ai-analysis-box h2 { color: var(--primary); font-size: 1rem; margin: 16px 0 6px; }
.ai-analysis-meta { font-size: .75rem; color: var(--text-muted); margin-bottom: 14px; }
.ai-analysis-cached { display: inline-block; background: #164e6344; color: #22d3ee; border-radius: 4px; padding: 1px 8px; font-size: .72rem; font-weight: 700; margin-left: 8px; }

/* ── Hardening Config cards ──────────────────────────────────────────────── */
.config-cards { display: flex; flex-direction: column; gap: 16px; }
.config-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.config-card-header { padding: 14px 18px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.config-card-title { font-weight: 700; font-size: .92rem; color: var(--text); flex: 1; }
.config-card-desc { font-size: .8rem; color: var(--text-muted); padding: 0 18px 10px; }
.config-snippets { border-top: 1px solid var(--border); }
.config-snippet-tabs { display: flex; gap: 4px; padding: 10px 18px 0; flex-wrap: wrap; }
.config-snippet-tab { font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 5px; cursor: pointer; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); transition: all .15s; }
.config-snippet-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.config-snippet-code { display: none; }
.config-snippet-code.active { display: block; }
.config-snippet-code pre { background: #0a0e1a; color: #e2e8f0; font-family: monospace; font-size: .8rem; padding: 14px 18px; margin: 10px 18px 14px; border-radius: 8px; overflow-x: auto; white-space: pre; line-height: 1.5; border: 1px solid #1e293b; }
.config-copy-btn { float: right; font-size: .7rem; background: #1e293b; color: #94a3b8; border: none; border-radius: 4px; padding: 2px 8px; cursor: pointer; margin-bottom: 4px; }
.config-copy-btn:hover { background: var(--primary); color: #fff; }

/* ── Pentest tools grid ──────────────────────────────────────────────────── */
.pentest-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.pentest-tool-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; }
.pentest-tool-icon { font-size: 2rem; margin-bottom: 10px; }
.pentest-tool-title { font-weight: 700; font-size: 1rem; color: var(--text); margin-bottom: 8px; }
.pentest-tool-desc { font-size: .84rem; color: var(--text-muted); line-height: 1.55; flex: 1; }

/* ── Compliance Dashboard framework tabs ────────────────────────────────── */
.cd-fw-btn { font-size: .82rem; font-weight: 600; padding: 5px 14px; border-radius: 6px; cursor: pointer; background: var(--surface-2, #1a1d27); color: var(--text-muted, #64748b); border: 1px solid var(--border, #2a2d3a); transition: all .15s; }
.cd-fw-btn:hover { color: var(--text, #e2e8f0); border-color: var(--primary, #1d5fb4); }
.cd-fw-btn.active { background: var(--primary, #1d5fb4); color: #fff; border-color: var(--primary, #1d5fb4); }
.cd-summary { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.cd-score-big { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.cd-score-label { font-size: .7rem; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
.cd-stat-pill { font-size: .78rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; }
.cd-stat-pass { background: #22c55e22; color: #22c55e; border: 1px solid #22c55e44; }
.cd-stat-warn { background: #eab30822; color: #eab308; border: 1px solid #eab30844; }
.cd-stat-fail { background: #ef444422; color: #ef4444; border: 1px solid #ef444444; }
.cd-table { width: 100%; border-collapse: collapse; font-size: .83rem; margin-top: 12px; }
.cd-table th { text-align: left; color: var(--text-muted, #64748b); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; padding: 8px 12px; border-bottom: 1px solid var(--border, #2a2d3a); }
.cd-table td { padding: 9px 12px; border-bottom: 1px solid var(--border, #2a2d3a); color: var(--text, #e2e8f0); vertical-align: middle; }
.cd-table tr:last-child td { border-bottom: none; }
.cd-pill-pass { background: #22c55e22; color: #22c55e; border: 1px solid #22c55e44; border-radius: 12px; font-size: .72rem; font-weight: 700; padding: 3px 10px; display: inline-block; }
.cd-pill-warn { background: #eab30822; color: #eab308; border: 1px solid #eab30844; border-radius: 12px; font-size: .72rem; font-weight: 700; padding: 3px 10px; display: inline-block; }
.cd-pill-fail { background: #ef444422; color: #ef4444; border: 1px solid #ef444444; border-radius: 12px; font-size: .72rem; font-weight: 700; padding: 3px 10px; display: inline-block; }
.cd-pill-secure { background: #22c55e22; color: #22c55e; border: 1px solid #22c55e44; border-radius: 12px; font-size: .72rem; font-weight: 700; padding: 3px 10px; display: inline-block; }
/* ── Teams tab layout ───────────────────────────────────────────────────── */
.org-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 960px) { .org-main-grid { grid-template-columns: 1fr; } }
.org-panel {
  background: var(--surface, #12121f);
  border: 1px solid var(--border, #2a2d3a);
  border-radius: var(--radius, 12px);
  overflow: hidden;
}
.org-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border, #2a2d3a);
}
.org-panel-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-1, #e2e8f0);
  letter-spacing: -.01em;
}
.org-panel-hint {
  font-size: .72rem;
  color: var(--text-3, #475569);
}
.org-table { margin: 0; width: 100%; }
.org-table thead th { padding: 8px 12px; font-size: .7rem; }
.org-table tbody td { padding: 9px 12px; font-size: .82rem; }
.org-panel #org-recent-scans,
.org-panel #org-members-list { padding: 8px 0; }

/* ── Teams tab - dash-grid stat cards ──────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.dash-card {
  background: var(--surface-2, #1a1d27);
  border: 1px solid var(--border, #2a2d3a);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: border-color .15s;
}
.dash-card:hover { border-color: rgba(29,95,180,.4); }
.dash-val {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--text-1, #e2e8f0);
  line-height: 1.1;
  margin-bottom: 5px;
  font-variant-numeric: tabular-nums;
}
.dash-label {
  font-size: .7rem;
  color: var(--text-3, #475569);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
}

/* ── Ticket file attachment ──────────────────────────────────────────────── */
.tk-file-label {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--surface-2, #1a1a2e);
  border: 1.5px dashed var(--border, #2a2d3a);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-2, #94a3b8);
  transition: border-color .15s, color .15s;
}
.tk-file-label:hover { border-color: var(--primary, #1d5fb4); color: var(--text-1, #e2e8f0); }
.tk-file-icon { font-size: 1.1rem; flex-shrink: 0; }

/* ── Profile modal redesign ─────────────────────────────────────────────── */
.pm-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(29,95,180,.15);
  color: #a5b4fc;
  border: 1px solid rgba(29,95,180,.3);
}
.pm-plan-badge.pm-plan-agency { background: rgba(245,158,11,.12); color: #fbbf24; border-color: rgba(245,158,11,.35); }
.pm-plan-badge.pm-plan-pro    { background: rgba(139,92,246,.12); color: #c4b5fd; border-color: rgba(139,92,246,.35); }
.pm-plan-badge.pm-plan-free   { background: rgba(100,116,139,.12); color: #94a3b8; border-color: rgba(100,116,139,.3); }
.pm-stats-strip {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border, #30363d);
  background: var(--bg-1, #0d1117);
}
.pm-stat-item {
  flex: 1; text-align: center;
  padding: 13px 8px;
  border-right: 1px solid var(--border, #30363d);
}
.pm-stat-item:last-child { border-right: none; }
.pm-stat-val  { font-size: 1.1rem; font-weight: 800; color: var(--text-1, #e6edf3); font-variant-numeric: tabular-nums; }
.pm-stat-lbl  { font-size: .62rem; color: var(--text-3, #484f58); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; margin-top: 2px; }

/* ── Scan diff collapsible sections ────────────────────────────────────── */
.diff-section { margin-bottom: 12px; border: 1px solid var(--border, #2a2d3a); border-radius: 8px; overflow: hidden; }
.diff-section-header { padding: 10px 14px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; font-size: .88rem; font-weight: 600; }
.diff-section-header:hover { background: var(--surface-2, #1a1d27); }
.diff-section-body { padding: 10px 14px; border-top: 1px solid var(--border, #2a2d3a); }
.diff-section-new .diff-section-header { color: #ef4444; }
.diff-section-fixed .diff-section-header { color: #22c55e; }
.diff-section-unchanged .diff-section-header { color: var(--text-muted, #64748b); }
.diff-finding-row { padding: 6px 0; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border, #2a2d3a); font-size: .83rem; }
.diff-finding-row:last-child { border-bottom: none; }
.diff-score-delta { display: inline-block; font-size: 1.4rem; font-weight: 800; padding: 6px 16px; border-radius: 8px; margin-bottom: 12px; }
.diff-score-improved { background: #22c55e22; color: #22c55e; }
.diff-score-regressed { background: #ef444422; color: #ef4444; }
.diff-score-neutral { background: #1d5fb422; color: #1d5fb4; }
/* ── Executive dashboard domain rows ───────────────────────────────────── */
.exec-domain-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border, #2a2d3a); font-size: .85rem; }
.exec-domain-row:last-child { border-bottom: none; }
.exec-domain-name { flex: 1; min-width: 0; font-weight: 600; color: var(--text, #e2e8f0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exec-domain-score { font-weight: 800; font-size: 1rem; min-width: 36px; text-align: right; }
.exec-crit-badge { background: #ef444422; color: #ef4444; border: 1px solid #ef444444; border-radius: 10px; font-size: .72rem; font-weight: 700; padding: 2px 8px; }

/* ── HTTP Evidence ────────────────────────────────────────────── */
.http-ev-wrap { display:none; margin-top:8px; }
.http-ev-wrap.open { display:block; }
.http-ev-toggle {
  background:none; border:1px solid rgba(255,255,255,.15); color:var(--text-3);
  font-size:.7rem; padding:1px 6px; border-radius:4px; cursor:pointer; margin-left:8px;
  vertical-align:middle;
}
.http-ev-pane { margin-bottom:12px; }
.http-ev-label { font-size:.72rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.http-ev-code {
  font-family:monospace; font-size:.75rem; background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.08); border-radius:6px;
  padding:10px 12px; overflow-x:auto; white-space:pre; color:#94a3b8;
  max-height:280px; overflow-y:auto;
}
.http-status-badge {
  display:inline-block; font-size:.7rem; padding:1px 6px; border-radius:4px;
  background:rgba(34,211,238,.15); color:#22d3ee; font-weight:700; margin-left:6px;
}
/* ── CVSS in finding card ─────────────────────────────────────── */
.cvss-score-badge.sev-critical { background:rgba(239,68,68,.2); color:#f87171; }
.cvss-score-badge.sev-high     { background:rgba(251,146,60,.2); color:#fb923c; }
.cvss-score-badge.sev-medium   { background:rgba(251,191,36,.2); color:#fbbf24; }
.cvss-score-badge.sev-low      { background:rgba(163,230,53,.2); color:#a3e635; }
.cvss-score-badge.sev-info     { background:rgba(148,163,184,.15); color:#94a3b8; }
.cvss-vector-text { font-family:monospace; font-size:.75rem; color:var(--text-3); }

/* ── Scanner badges (nmap, crt.sh, playwright, api, wpscan, nuclei) ───────── */
.scanner-badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.06em; padding:2px 6px; border-radius:4px; text-transform:uppercase; }
.scanner-badge.nmap      { background:#1e293b; color:#60a5fa; border:1px solid #60a5fa; }
.scanner-badge.crtsh     { background:#1e2b1e; color:#86efac; border:1px solid #86efac; }
.scanner-badge.playwright{ background:#2d1a4a; color:#c084fc; border:1px solid #c084fc; }
.scanner-badge.api-sec   { background:#1a2a3a; color:#38bdf8; border:1px solid #38bdf8; }
.scanner-badge.wpscan    { background:#1a2d1a; color:#4ade80; border:1px solid #4ade80; }
.scanner-badge.nuclei    { background:#2a1a1a; color:#fb923c; border:1px solid #fb923c; }

/* ── Finding overrides (accept risk / false positive) ─────────────────────── */
.override-badge { display:inline-block; font-size:.65rem; font-weight:700; border-radius:4px; padding:2px 7px; text-transform:uppercase; letter-spacing:.05em; }
.override-badge.accepted { background:#1e3a2f; color:#34d399; border:1px solid #34d399; }
.override-badge.fp       { background:#3a1e1e; color:#f87171; border:1px solid #f87171; }
.btn-override { font-size:.7rem; padding:2px 8px; border-radius:4px; border:1px solid #555; background:transparent; color:#aaa; cursor:pointer; margin-left:4px; }
.btn-override:hover { border-color:#888; color:#eee; }

/* ── Compliance gaps (PCI DSS / GDPR / ISO 27001) ─────────────────────────── */
.compliance-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:16px; }
.compliance-card { background:var(--card-bg,#12121f); border:1px solid var(--border,#2a2d3a); border-radius:8px; padding:16px; }
.compliance-card h4 { margin:0 0 8px; font-size:.9rem; color:var(--text,#e2e8f0); }
.compliance-gap-count { font-size:1.8rem; font-weight:700; }
.compliance-gap-count.ok   { color:#34d399; }
.compliance-gap-count.warn { color:#f59e0b; }
.compliance-controls { font-size:.72rem; color:#888; margin-top:8px; line-height:1.6; }
.compliance-ctrl { display:inline-block; background:var(--surface-2,#1a1d27); border:1px solid var(--border,#2a2d3a); border-radius:3px; padding:1px 5px; margin:2px 2px 2px 0; font-size:.68rem; color:var(--text-muted,#94a3b8); font-family:monospace; }

/* ── Auth profiles (Settings) ──────────────────────────────────────────────── */
.auth-profile-row { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--border,#2a2d3a); font-size:.82rem; }
.auth-profile-row:last-child { border-bottom:none; }
.auth-profile-row code { font-size:.75rem; color:#888; }

/* ── Monitoring alert preferences ──────────────────────────────────────────── */
.monitoring-prefs { margin-top:10px; padding:10px; background:rgba(255,255,255,.03); border-radius:6px; border:1px solid var(--border,#2a2d3a); }
.monitoring-prefs label { font-size:.8rem; color:#aaa; display:flex; align-items:center; gap:8px; margin-bottom:6px; cursor:pointer; }
.monitoring-prefs label:last-child { margin-bottom:0; }

/* ── Sprint 5 scanner badges ────────────────────────────────────────────────── */
.scanner-badge.waf    { background:#1a1a3a; color:#a78bfa; border:1px solid #a78bfa; }
.scanner-badge.email  { background:#1a2a1a; color:#4ade80; border:1px solid #4ade80; }
.scanner-badge.rate   { background:#2a1a2a; color:#e879f9; border:1px solid #e879f9; }
.scanner-badge.breach { background:#2a1a1a; color:#f87171; border:1px solid #f87171; }
.scanner-badge.dirbust{ background:#1a1a2a; color:#818cf8; border:1px solid #818cf8; }

/* ── Screenshot thumbnail ────────────────────────────────────────────────────── */
#screenshot-wrap { margin-top:12px; }
#scan-screenshot { max-width:100%; border-radius:8px; display:block; border:1px solid var(--border,#2a2d3a); }

/* ── Sprint 6 scanner badges ────────────────────────────────────────────────── */
.scanner-badge.csp    { background:#1a2a2a; color:#34d399; border:1px solid #34d399; }
.scanner-badge.gdpr   { background:#1a1a2a; color:#c084fc; border:1px solid #c084fc; }
.scanner-badge.oast    { background:#1a1a2a; color:#f59e0b; border:1px solid #f59e0b; }
.scanner-badge.darkweb { background:#0d0d1a; color:#a78bfa; border:1px solid #7c3aed; }
.scanner-badge.cloud   { background:#0d1a2a; color:#38bdf8; border:1px solid #0284c7; }

/* ── AI remediation ──────────────────────────────────────────────────────────── */
.btn-ai-fix { font-size:.72rem; padding:3px 10px; border-radius:4px; border:1px solid #1d5fb4; background:rgba(29,95,180,.1); color:#818cf8; cursor:pointer; margin-left:4px; transition:background .15s; }
.btn-ai-fix:hover { background:rgba(29,95,180,.25); }
.ai-remediation-box { margin-top:10px; padding:12px; background:rgba(29,95,180,.07); border:1px solid rgba(29,95,180,.3); border-radius:6px; }
.ai-remediation-header { font-size:.72rem; font-weight:700; color:#818cf8; text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.ai-remediation-body { font-size:.8rem; color:var(--text,#e2e8f0); white-space:pre-wrap; line-height:1.6; }


/* ── Mini-tools ──────────────────────────────────────────────────────────── */
.tool-page { max-width: 780px; margin: 0 auto; padding: 2rem 1rem; }
.tool-hero { text-align: center; margin-bottom: 2rem; }
.tool-hero .tool-icon { font-size: 3rem; margin-bottom: .5rem; }
.tool-hero h1 { font-size: 2rem; font-weight: 700; color: #f1f5f9; margin: 0 0 .5rem; }
.tool-hero p  { color: #94a3b8; max-width: 520px; margin: 0 auto; }
.tool-form-wrap { background: #12121f; border: 1px solid #2a2d3a; border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem; }
.tool-input-row { display: flex; gap: .75rem; }
.tool-input { flex: 1; background: #0d0f1a; border: 1px solid #2a2d3a; border-radius: 8px; padding: .7rem 1rem; color: #f1f5f9; font-size: .9rem; }
.tool-input:focus { outline: none; border-color: #1d5fb4; }
.tool-btn { background: #1d5fb4; color: #fff; border: none; border-radius: 8px; padding: .7rem 1.4rem; font-weight: 600; cursor: pointer; white-space: nowrap; font-size: .9rem; }
.tool-btn:hover { background: #4f46e5; }
.tool-result { margin-top: 1rem; }
.tool-loading { color: #94a3b8; padding: .75rem; text-align: center; }
.tool-error { background: #1e0c0c; border: 1px solid #f87171; border-radius: 8px; color: #f87171; padding: .75rem 1rem; }
.tool-card { background: #0d0f1a; border: 1px solid #2a2d3a; border-radius: 10px; padding: 1.25rem; }
.tool-card-pass { border-color: #22c55e40; }
.tool-card-warn { border-color: #f59e0b40; }
.tool-card-fail { border-color: #ef444440; }
.tool-result-main { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tool-result-icon { font-size: 2rem; }
.tool-result-title { font-weight: 700; color: #f1f5f9; font-size: 1.05rem; }
.tool-result-sub   { color: #94a3b8; font-size: .85rem; margin-top: .15rem; }
.tool-result-badge { display: flex; gap: 1.25rem; margin-left: auto; }
.tool-grade-circle { width: 56px; height: 56px; border-radius: 50%; border: 3px solid; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 900; flex-shrink: 0; }
.tool-score-badge  { font-size: 1.8rem; font-weight: 800; margin-left: auto; }
.tool-stat { text-align: center; }
.tool-stat .stat-val   { display: block; font-size: 1.4rem; font-weight: 700; color: #f1f5f9; }
.tool-stat .stat-label { display: block; font-size: .65rem; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
.text-pass { color: #22c55e !important; }
.text-warn { color: #f59e0b !important; }
.tool-expiry { font-size: .8rem; color: #64748b; margin-bottom: .5rem; }
.tool-warn { padding: .4rem .75rem; border-radius: 6px; font-size: .82rem; margin-top: .35rem; }
.tool-warn.critical { background: #1e0c0c; color: #f87171; }
.tool-warn.high     { background: #1e0c0c; color: #fb923c; }
.tool-warn.medium   { background: #1a150a; color: #fbbf24; }
.tool-warn.low      { background: #0d0f1a; color: #94a3b8; }
.tool-hdr-table { width: 100%; border-collapse: collapse; margin-top: .75rem; font-size: .82rem; }
.tool-hdr-table th { background: #1a1d27; color: #64748b; text-align: left; padding: .45rem .75rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.tool-hdr-table td { padding: .5rem .75rem; border-bottom: 1px solid #1e2130; vertical-align: top; }
.hdr-pass td:first-child { border-left: 3px solid #22c55e40; }
.hdr-fail td:first-child { border-left: 3px solid #ef444440; }
.hdr-desc { color: #64748b; font-size: .78rem; }
.hdr-val code { color: #94a3b8; font-size: .75rem; word-break: break-all; }
.tag-pass { color: #22c55e; font-weight: 600; }
.tag-fail { color: #ef4444; font-weight: 600; }
.em-check-row { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem; border-radius: 8px; margin-bottom: .5rem; }
.em-check-row.pass { background: #0a1a0e; }
.em-check-row.warn { background: #1a150a; }
.em-check-row.fail { background: #1a0a0a; }
.em-icon { font-size: 1.25rem; flex-shrink: 0; }
.em-detail strong { color: #f1f5f9; }
.em-record { display: block; margin-top: .35rem; color: #64748b; font-size: .75rem; word-break: break-all; background: #0d0f1a; padding: .3rem .5rem; border-radius: 4px; }
.tool-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; }
.tool-tab { background: transparent; border: 1px solid #2a2d3a; border-radius: 6px; color: #94a3b8; padding: .4rem .9rem; cursor: pointer; font-size: .85rem; }
.tool-tab.active { background: #1d5fb4; color: #fff; border-color: #1d5fb4; }
.tool-issue { border-left: 3px solid; padding: .5rem .75rem; margin-bottom: .35rem; background: #0d0f1a; border-radius: 0 6px 6px 0; font-size: .85rem; color: #cbd5e1; }
.issue-level { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-right: .5rem; }
.tool-section-title { color: #f1f5f9; margin-bottom: 1rem; font-size: 1rem; }
.tool-pass-msg { color: #22c55e; padding: .6rem .75rem; background: #0a1a0e; border-radius: 6px; margin-bottom: .5rem; }
.csp-dirs { margin-top: 1rem; }
.csp-dirs summary { cursor: pointer; color: #94a3b8; font-size: .85rem; }
.csp-src { background: #1a1d27; color: #94a3b8; padding: .1rem .3rem; border-radius: 3px; margin: .1rem; font-size: .75rem; display: inline-block; }
.tool-seo { color: #94a3b8; font-size: .9rem; line-height: 1.6; border-top: 1px solid #1e2130; padding-top: 1.5rem; margin-top: 1rem; }
.tool-seo h2 { color: #f1f5f9; font-size: 1.1rem; margin-top: 1.5rem; margin-bottom: .5rem; }
.tool-seo h3 { color: #cbd5e1; font-size: .95rem; margin-top: 1rem; }
.tool-seo ul, .tool-seo ol { padding-left: 1.5rem; }
.tool-seo li { margin-bottom: .4rem; }
.exec-crit-badge { background: #ef444422; color: #ef4444; border: 1px solid #ef444444; border-radius: 10px; font-size: .72rem; font-weight: 700; padding: 2px 8px; }

/* ── AI / Ollama UI ─────────────────────────────────────────────────────── */
.ai-executive-panel {
  margin: .75rem 0 1rem;
  border-radius: 10px;
  border: 1px solid #2a3a5a;
  background: linear-gradient(135deg, #0d1525 0%, #0f1a2e 100%);
  overflow: hidden;
}
.ai-summary-inner {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.25rem;
  align-items: flex-start;
}
.ai-summary-icon {
  font-size: 1.4rem;
  color: #60a5fa;
  flex-shrink: 0;
  margin-top: 2px;
}
.ai-summary-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #60a5fa;
  margin-bottom: .35rem;
}
.ai-summary-text {
  color: #cbd5e1;
  font-size: .9rem;
  line-height: 1.6;
}
.ai-remediation-section {
  border-top: 1px solid #1e2a3a;
  background: #0a1220;
  border-radius: 0 0 8px 8px;
  margin-top: .5rem;
}
.ai-remediation-section .ai-label {
  color: #60a5fa;
  font-weight: 700;
}
.ai-remediation-text {
  color: #94a3b8;
  font-size: .85rem;
  line-height: 1.65;
  white-space: pre-line;
}
.ai-fp-badge {
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  cursor: help;
}
.ai-fp-badge.high {
  background: #7c3aed22;
  color: #a78bfa;
  border: 1px solid #7c3aed44;
}
.ai-fp-badge.medium {
  background: #d9770622;
  color: #fb923c;
  border: 1px solid #d9770644;
}

/* ── AI Chat widget ─────────────────────────────────────────────────────── */
.ai-chat-widget {
  margin: 0 0 1rem;
  border-radius: 10px;
  border: 1px solid #2a3a5a;
  background: #0a1220;
  overflow: hidden;
}
.ai-chat-header {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .75rem 1rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.ai-chat-header:hover { background: #0d1830; }
.ai-chat-icon { font-size: 1rem; color: #60a5fa; }
.ai-chat-title { flex: 1; font-size: .85rem; font-weight: 600; color: #93c5fd; }
.ai-chat-toggle-icon { color: #60a5fa; font-size: .8rem; }
.ai-chat-body { border-top: 1px solid #1a2640; }
.ai-chat-messages {
  max-height: 280px;
  overflow-y: auto;
  padding: .75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.ai-msg {
  max-width: 90%;
  padding: .55rem .8rem;
  border-radius: 8px;
  font-size: .85rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.ai-msg-user {
  align-self: flex-end;
  background: #1e3a5f;
  color: #bfdbfe;
  border-radius: 8px 8px 2px 8px;
}
.ai-msg-bot {
  align-self: flex-start;
  background: #0f1f33;
  color: #cbd5e1;
  border: 1px solid #1e3a5f;
  border-radius: 2px 8px 8px 8px;
}
.ai-msg-loading { color: #60a5fa; font-style: italic; }
.ai-msg-err { color: #f87171; }
.ai-dots { letter-spacing: .1em; }
.ai-chat-input-row {
  display: flex;
  gap: .5rem;
  padding: .6rem 1rem;
  border-top: 1px solid #1a2640;
}
.ai-chat-input {
  flex: 1;
  background: #0d1525;
  border: 1px solid #2a3a5a;
  border-radius: 6px;
  color: #e2e8f0;
  padding: .45rem .75rem;
  font-size: .85rem;
  outline: none;
}
.ai-chat-input:focus { border-color: #60a5fa; }
.ai-chat-send { padding: .45rem 1rem; font-size: .82rem; }
.ai-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .5rem 1rem .75rem;
}
.ai-chat-suggestion {
  background: #0f1f33;
  border: 1px solid #2a3a5a;
  border-radius: 14px;
  color: #93c5fd;
  font-size: .75rem;
  padding: .3rem .8rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ai-chat-suggestion:hover { background: #1e3a5f; border-color: #60a5fa; }

/* ── AI CVE explanation ─────────────────────────────────────────────────── */
.ai-cve-section {
  border-top: 1px solid #1e2a3a;
  background: #0a1a10;
}
.ai-cve-section .ai-label { color: #34d399; font-weight: 700; }
.ai-cve-text {
  color: #94a3b8;
  font-size: .85rem;
  line-height: 1.65;
}

/* ── AI Diff summary in compare modal ──────────────────────────────────── */
.ai-diff-summary {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  background: #0a1220;
  border: 1px solid #2a3a5a;
  border-radius: 8px;
  padding: .85rem 1rem;
  margin: .75rem 0;
}
.ai-diff-icon { font-size: 1.1rem; color: #60a5fa; flex-shrink: 0; margin-top: 2px; }
.ai-diff-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #60a5fa;
  margin-bottom: .3rem;
}
.ai-diff-text { color: #cbd5e1; font-size: .88rem; line-height: 1.55; }

/* ── Compliance AI gap analysis ─────────────────────────────────────────── */
.btn-compliance-ai {
  margin-top: .85rem;
  width: 100%;
  background: #0a1220;
  border: 1px solid #2a3a5a;
  border-radius: 6px;
  color: #60a5fa;
  font-size: .78rem;
  font-weight: 600;
  padding: .4rem .75rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-compliance-ai:hover:not(:disabled) { background: #0d1830; border-color: #60a5fa; }
.btn-compliance-ai:disabled { opacity: .6; cursor: default; }
.compliance-ai-result { margin-top: .5rem; }
.compliance-ai-panel {
  background: #050d1a;
  border: 1px solid #1e3a5f;
  border-radius: 8px;
  padding: .8rem 1rem;
}
.compliance-ai-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #60a5fa;
  margin-bottom: .5rem;
}
.compliance-ai-text {
  color: #94a3b8;
  font-size: .82rem;
  line-height: 1.7;
}
.compliance-ai-text p { margin: 0 0 .5rem; }
.compliance-ai-text p:last-child { margin-bottom: 0; }
.compliance-ai-loading { color: #60a5fa; font-size: .8rem; font-style: italic; padding: .4rem 0; }
.compliance-ai-err { color: #f87171; font-size: .8rem; padding: .4rem 0; }

/* ── AI Triage badge ────────────────────────────────────────────────────────── */
.ai-triage-badge {
  display: inline-flex;
  align-items: center;
  background: #0a1a30;
  border: 1px solid #2a4a7a;
  border-radius: 10px;
  color: #60a5fa;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .15rem .5rem;
  cursor: default;
}

/* ── AI Config snippet ──────────────────────────────────────────────────────── */
.ai-config-section { border-top: 1px solid #1e2a3a; background: #050d1a; }
.ai-config-pre {
  background: #020810;
  border: 1px solid #1e3050;
  border-radius: 6px;
  color: #7dd3fc;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .78rem;
  line-height: 1.6;
  margin: .5rem 0 0;
  overflow-x: auto;
  padding: .75rem 1rem;
  white-space: pre;
}
.btn-get-config {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: #050d1a;
  border: 1px solid #1e3050;
  border-radius: 6px;
  color: #60a5fa;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 600;
  margin: .5rem 0 .25rem;
  padding: .35rem .75rem;
  transition: background .15s, border-color .15s;
}
.btn-get-config:hover:not(:disabled) { background: #0a1a30; border-color: #60a5fa; }
.btn-get-config:disabled { opacity: .55; cursor: default; }

/* ── AI Priority sort button ────────────────────────────────────────────────── */
.filter-chip.sort-ai {
  background: #050d1a;
  border: 1px solid #2a4a7a;
  color: #60a5fa;
}
.filter-chip.sort-ai.active {
  background: #1e3a5f;
  border-color: #60a5fa;
  color: #93c5fd;
}

/* ── NL Filter ──────────────────────────────────────────────────────────────── */
.nl-filter-wrap {
  margin: .75rem 0 .5rem;
  padding: .6rem .75rem;
  background: #050d1a;
  border: 1px solid #1e3050;
  border-radius: 8px;
}
.nl-filter-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.nl-filter-icon { color: #60a5fa; font-size: .85rem; flex-shrink: 0; }
.nl-filter-input {
  flex: 1;
  background: #0a0f1a;
  border: 1px solid #1e2a3a;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: .83rem;
  outline: none;
  padding: .4rem .7rem;
}
.nl-filter-input:focus { border-color: #60a5fa; }
.nl-filter-btn {
  background: #1e3a5f;
  border: 1px solid #2a5a8f;
  border-radius: 6px;
  color: #93c5fd;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 600;
  padding: .4rem .9rem;
  transition: background .15s;
  white-space: nowrap;
}
.nl-filter-btn:hover { background: #2a4a6f; }
.nl-filter-clear {
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: .85rem;
  padding: .2rem .4rem;
}
.nl-filter-clear:hover { color: #94a3b8; }
.nl-filter-answer {
  margin-top: .5rem;
  color: #cbd5e1;
  font-size: .83rem;
  line-height: 1.55;
  padding: .3rem .1rem;
}
.nl-filter-answer.loading { color: #60a5fa; font-style: italic; }

/* ── AI Pentest narrative ────────────────────────────────────────────────────── */
.ai-pentest-section { border-top: 1px solid #1e2a3a; background: #080d1a; }
.ai-pentest-section .ai-label { color: #a78bfa; font-weight: 700; }
.ai-pentest-text {
  color: #cbd5e1;
  font-size: .86rem;
  line-height: 1.7;
  font-style: italic;
}

/* ── Verify-fix AI explanation ──────────────────────────────────────────────── */
.verify-ai-explanation {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .8rem;
  font-weight: 400;
  font-style: italic;
  opacity: .85;
  line-height: 1.5;
}

/* ── AI Summary sub-rows ────────────────────────────────────────────────────── */
.ai-summary-sub {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: .82rem;
  color: var(--text-2);
  line-height: 1.55;
}
.ai-sub-icon { flex-shrink: 0; font-size: .9rem; margin-top: 1px; opacity: .7; }
.ai-comparison-block .ai-sub-text { color: #60a5fa; }

/* ── AI block sections (narrative, next scan) - shared style ─────────────────── */
.ai-block-section {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 14px 1.25rem;
}
.ai-block-section-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #818cf8;
  margin-bottom: 10px;
}

/* ── Next scan suggestions ──────────────────────────────────────────────────── */
.ai-next-scan-block { background: rgba(99,102,241,.05); }
.ai-next-scan-list { margin: 0; padding-left: 18px; }
.ai-next-scan-list li { font-size: .82rem; color: var(--text-2); margin-bottom: 6px; line-height: 1.5; }
.ai-next-reason { color: var(--text-3); margin-left: 4px; }

/* ── AI Co-pilot block (mid-scan investigation hints) ───────────────────────── */
.ai-copilot-block { background: rgba(16,185,129,.05); }
.ai-copilot-block .ai-block-section-label { color: #34d399; }
.ai-copilot-list { margin: 0; padding-left: 20px; }
.ai-copilot-list li { margin-bottom: 12px; }
.ai-copilot-step { font-size: .84rem; font-weight: 600; color: var(--text-1); margin-bottom: 2px; }
.ai-copilot-rationale { font-size: .78rem; color: var(--text-3); margin-bottom: 4px; }
.ai-copilot-cmd-wrap {
  position: relative;
  margin-top: 6px;
}
.ai-copilot-cmd {
  display: block;
  font-family: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
  font-size: .73rem;
  /* Always use a dark terminal look - readable in both light and dark mode */
  background: #0f1117;
  color: #e2e8f0;
  padding: 7px 38px 7px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.08);
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.5;
}
.ai-copilot-cmd::before {
  content: '$ ';
  color: #34d399;
  user-select: none;
}
.ai-copilot-copy {
  position: absolute;
  top: 5px;
  right: 6px;
  background: rgba(255,255,255,.08);
  border: none;
  border-radius: 4px;
  color: #94a3b8;
  cursor: pointer;
  font-size: .68rem;
  padding: 2px 6px;
  transition: background .15s, color .15s;
}
.ai-copilot-copy:hover { background: rgba(255,255,255,.16); color: #e2e8f0; }

/* ── Live co-pilot panel (visible during scan) ──────────────────────────────── */
.live-copilot-panel {
  background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(6,78,59,.1));
  border: 1px solid rgba(52,211,153,.25);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 12px 0 0;
  animation: fadeIn .4s ease;
}
.live-copilot-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.live-copilot-icon { font-size: 1rem; }
.live-copilot-title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #34d399;
}
.live-copilot-panel .ai-copilot-list { color: var(--text-2); }

/* ── Scan narrative + dark web interpretation ───────────────────────────────── */
.ai-scan-narrative-text {
  font-size: .83rem;
  color: var(--text-2);
  line-height: 1.7;
}
.ai-darkweb-interp-block .ai-sub-text { color: #a78bfa; }

/* ── Attack Chain Analysis panel ───────────────────────────────────────────── */
.ai-chains-panel { margin: 0 0 14px; }
.ai-chains-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 10px 10px 0 0;
  font-size: .85rem;
}
.ai-chains-icon { font-size: 1rem; }
.ai-chains-title { font-weight: 700; color: #f87171; }
.ai-chains-count { margin-left: auto; font-size: .75rem; color: var(--text-3); }
.ai-chain-card {
  padding: 12px 16px;
  background: rgba(15,20,35,.6);
  border: 1px solid rgba(239,68,68,.12);
  border-top: none;
}
.ai-chain-card:last-child { border-radius: 0 0 10px 10px; }
.ai-chain-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ai-chain-name { font-weight: 700; font-size: .9rem; color: var(--text-1); }
.ai-chain-sev { font-size: .75rem; font-weight: 700; letter-spacing: .05em; }
.ai-chain-steps { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.ai-chain-step { display: flex; align-items: flex-start; gap: 8px; }
.step-num {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(239,68,68,.15);
  color: #f87171;
  font-size: .72rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.step-text { font-size: .82rem; color: var(--text-2); line-height: 1.5; padding-top: 2px; }
.ai-chain-impact { font-size: .8rem; color: var(--text-3); font-style: italic; border-top: 1px solid rgba(255,255,255,.06); padding-top: 7px; }

/* ── AI Action Toolbar ──────────────────────────────────────────────────────── */
.ai-action-toolbar {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.ai-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 7px;
  color: #818cf8;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ai-action-btn:hover { background: rgba(99,102,241,.18); border-color: rgba(99,102,241,.4); color: #a5b4fc; }

/* ── Client Email Modal ─────────────────────────────────────────────────────── */
.client-email-modal {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.client-email-dialog {
  background: var(--surface-1, #0f172a);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  width: 100%; max-width: 560px;
  max-height: 90vh;
  display: flex; flex-direction: column;
}
.client-email-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-weight: 700; font-size: .9rem; color: #818cf8;
}
.client-email-close {
  background: none; border: none; color: var(--text-3); font-size: 1rem; cursor: pointer;
}
.client-email-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.client-email-label { font-size: .78rem; font-weight: 700; letter-spacing: .05em; color: var(--text-3); text-transform: uppercase; }
.client-email-input {
  width: 100%; padding: 9px 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px; color: var(--text-1); font-size: .85rem;
}
.client-email-generate {
  align-self: flex-start; padding: 8px 18px;
  background: #4f46e5; border: none; border-radius: 7px;
  color: #fff; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.client-email-generate:disabled { opacity: .5; cursor: not-allowed; }
.client-email-result { display: flex; flex-direction: column; gap: 6px; }
.client-email-copy-row { display: flex; align-items: center; justify-content: space-between; }
.client-email-result-label { font-size: .78rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; }
.btn-copy-email {
  padding: 4px 12px; background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.3);
  border-radius: 5px; color: #818cf8; font-size: .78rem; cursor: pointer;
}
.client-email-pre {
  white-space: pre-wrap; word-break: break-word;
  background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px; padding: 12px; font-size: .8rem;
  color: var(--text-2); line-height: 1.6; max-height: 55vh; overflow-y: auto;
}

/* ── Compliance Gap modal ───────────────────────────────────────────────────── */
.compliance-framework-row { display: flex; gap: 8px; margin-bottom: 14px; }
.compliance-fw-btn {
  padding: 6px 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px; color: var(--text-2); font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.compliance-fw-btn.active,
.compliance-fw-btn:hover { background: rgba(99,102,241,.2); border-color: rgba(99,102,241,.4); color: #a5b4fc; }
.compliance-loading { color: var(--text-3); font-size: .85rem; padding: 8px 0; }
.compliance-table { display: flex; flex-direction: column; gap: 6px; }
.comp-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
}
.comp-control-id { flex-shrink: 0; font-weight: 700; font-size: .82rem; color: #60a5fa; min-width: 54px; }
.comp-control-body { flex: 1; }
.comp-control-name { font-size: .85rem; font-weight: 600; color: var(--text-1); margin-bottom: 3px; }
.comp-gap { font-size: .78rem; color: var(--text-3); line-height: 1.5; }
.comp-status { flex-shrink: 0; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.comp-met { color: #4ade80; }
.comp-partial { color: #fbbf24; }
.comp-fail { color: #f87171; }

/* ── FP Second Opinion badge ────────────────────────────────────────────────── */
.fp-opinion-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 5px; font-size: .78rem; font-weight: 700;
}
.fp-real { background: rgba(239,68,68,.12); color: #f87171; }
.fp-false { background: rgba(74,222,128,.1); color: #4ade80; }
.fp-uncertain { background: rgba(251,191,36,.1); color: #fbbf24; }
.fp-reason { font-weight: 400; font-size: .75rem; margin-left: 4px; opacity: .8; }

/* ═══════════════════════════════════════════════════════════════════════════
   UI REDESIGN - Light-mode teget sidebar + v2 action bar
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Teget (dark navy) sidebar - light mode only ────────────────────────── */
:root:not([data-theme="dark"]) .sidebar,
[data-theme="light"] .sidebar {
  background: #0f2744;
  border-right: 1px solid rgba(255,255,255,.07);
}

:root:not([data-theme="dark"]) .sidebar-logo,
[data-theme="light"] .sidebar-logo {
  border-bottom-color: rgba(255,255,255,.08);
}

:root:not([data-theme="dark"]) .logo-text,
[data-theme="light"] .logo-text {
  color: #e2eaff;
}

:root:not([data-theme="dark"]) .logo-accent,
[data-theme="light"] .logo-accent {
  color: #60a5fa;
}

:root:not([data-theme="dark"]) .nav-group-label,
[data-theme="light"] .nav-group-label {
  color: rgba(148,179,235,.55);
}

:root:not([data-theme="dark"]) .nav-item,
[data-theme="light"] .nav-item {
  color: rgba(180,208,255,.8);
}

:root:not([data-theme="dark"]) .nav-item:hover,
[data-theme="light"] .nav-item:hover {
  background: rgba(255,255,255,.09);
  color: #fff;
}

:root:not([data-theme="dark"]) .nav-item.active,
[data-theme="light"] .nav-item.active {
  background: rgba(96,165,250,.18);
  color: #93c5fd;
}

:root:not([data-theme="dark"]) .nav-badge,
[data-theme="light"] .nav-badge {
  background: #ef4444;
  color: #fff;
}

:root:not([data-theme="dark"]) .sidebar-footer,
[data-theme="light"] .sidebar-footer {
  border-top-color: rgba(255,255,255,.08);
}

:root:not([data-theme="dark"]) .version-tag,
[data-theme="light"] .version-tag {
  color: rgba(148,179,235,.5);
}

:root:not([data-theme="dark"]) .sidebar-footer-row,
[data-theme="light"] .sidebar-footer-row {
  color: rgba(180,208,255,.7);
}

:root:not([data-theme="dark"]) .sidebar-footer-row:hover,
[data-theme="light"] .sidebar-footer-row:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}

:root:not([data-theme="dark"]) .feat-tier-badge,
[data-theme="light"] .feat-tier-badge {
  background: rgba(251,191,36,.12);
  color: #fcd34d;
  border-color: rgba(251,191,36,.25);
}

/* User panel on teget sidebar */
:root:not([data-theme="dark"]) .sidebar-user-panel,
[data-theme="light"] .sidebar-user-panel {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
}

:root:not([data-theme="dark"]) .sup-name,
[data-theme="light"] .sup-name {
  color: #e2eaff;
}

:root:not([data-theme="dark"]) .sup-email,
[data-theme="light"] .sup-email {
  color: rgba(148,179,235,.6);
}

/* Scrollbar in sidebar */
:root:not([data-theme="dark"]) .sidebar::-webkit-scrollbar-track,
[data-theme="light"] .sidebar::-webkit-scrollbar-track { background: transparent; }
:root:not([data-theme="dark"]) .sidebar::-webkit-scrollbar-thumb,
[data-theme="light"] .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); }

/* ── Hide legacy action bar (keep in DOM for JS) ────────────────────────── */
.results-actions {
  position: absolute;
  left: -9999px;
  visibility: hidden;
  pointer-events: auto;
}

/* ── v2 Results Action Bar ──────────────────────────────────────────────── */
.results-actions-v2 {
  display: none;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 0 14px;
}

.v2-sep {
  width: 1px;
  height: 22px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 2px;
}

/* Base v2 button */
.btn-v2 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: var(--surface-2, #f0f5ff);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-2);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn-v2:hover {
  background: var(--surface-3, #e8f0fe);
  border-color: var(--primary);
  color: var(--primary);
}

/* New scan button */
.v2-new-scan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: var(--primary);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.v2-new-scan:hover { background: var(--primary-h, #2a72d5); }

/* AI Tools button accent */
.btn-v2-ai {
  background: rgba(99,102,241,.08);
  border-color: rgba(99,102,241,.25);
  color: #818cf8;
}
.btn-v2-ai:hover {
  background: rgba(99,102,241,.16);
  border-color: rgba(99,102,241,.5);
  color: #a5b4fc;
}

[data-theme="dark"] .btn-v2-ai {
  background: rgba(99,102,241,.12);
  border-color: rgba(99,102,241,.3);
  color: #818cf8;
}

.v2-arrow { font-size: .7rem; opacity: .7; }

/* Dropdown wrapper */
.v2-dd-wrap {
  position: relative;
  display: inline-flex;
}

/* Dropdown menu - hidden by default, shown on click (.open class) */
.v2-dd-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 800;
  min-width: 200px;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(11,31,69,.12);
  padding: 6px;
  flex-direction: column;
  gap: 1px;
}

.v2-dd-wrap.open .v2-dd-menu {
  display: flex;
}

[data-theme="dark"] .v2-dd-menu {
  background: #1e293b;
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

/* Dropdown items */
.v2-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-2);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background .1s, color .1s;
  white-space: nowrap;
}

.v2-dd-item:hover {
  background: var(--surface-2, #f0f5ff);
  color: var(--text);
}

[data-theme="dark"] .v2-dd-item { color: #94a3b8; }
[data-theme="dark"] .v2-dd-item:hover { background: rgba(255,255,255,.07); color: #e2e8f0; }

/* Group label and separator */
.v2-dd-group {
  display: block;
  padding: 6px 10px 3px;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
}

.v2-dd-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 6px;
}

[data-theme="dark"] .v2-dd-sep { background: rgba(255,255,255,.07); }

/* ── Summary score hero ─────────────────────────────────────────────────── */
.summary-card.score {
  background: linear-gradient(135deg, #0f2744 0%, #1d3f6a 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 20px rgba(15,39,68,.25);
  min-width: 140px;
}

.summary-card.score .card-value {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
}

.summary-card.score .card-label {
  color: rgba(255,255,255,.7);
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

[data-theme="dark"] .summary-card.score {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}


/* ── Summary Hero (ring gauge + severity chips) ─────────────────────────── */
#summary-grid { margin-bottom: 20px; }

.summary-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.score-ring-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.score-ring-svg { width: 80px; height: 80px; display: block; }

.ring-track { stroke: var(--border); }
[data-theme="dark"] .ring-track { stroke: rgba(255,255,255,.1); }

.score-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.score-ring-num {
  font-size: 19px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
  line-height: 1.1;
}

.score-ring-sub {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .04em;
}

.score-info { flex: 1; min-width: 0; }

.score-info-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  margin-bottom: 10px;
}

.sev-chips { display: flex; flex-wrap: wrap; gap: 7px; }

.sev-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  transition: border-color .15s, background .15s;
}

.sev-n {
  font-size: 1.05rem;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
  color: var(--text-3);
}

.sev-l {
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sev-chip-active.sev-critical { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.06); }
.sev-chip-active.sev-high     { border-color: rgba(249,115,22,.35); background: rgba(249,115,22,.06); }
.sev-chip-active.sev-medium   { border-color: rgba(234,179,8,.35);  background: rgba(234,179,8,.06); }
.sev-chip-active.sev-low      { border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.06); }

.sev-critical .sev-n { color: #ef4444; }
.sev-high     .sev-n { color: #f97316; }
.sev-medium   .sev-n { color: #eab308; }
.sev-low      .sev-n { color: #3b82f6; }
.sev-info     .sev-n { color: #64748b; }

.sev-chip-active .sev-l { color: var(--text-2); }

.perf-cluster {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 20px;
  border-left: 1px solid var(--border);
  flex-shrink: 0;
}

.perf-metric { display: flex; flex-direction: column; align-items: center; gap: 2px; }

.perf-metric-val {
  font-size: 1.55rem;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: var(--primary);
  line-height: 1;
}

.perf-metric-lbl {
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
}


/* ── Results header row (score strip sits right of title) ───────────────── */
.results-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

/* ── Results Score Strip (inline in header) ─────────────────────────────── */
.results-score-strip {
  display: none;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 8px 0;
}

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

.rss-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  min-width: 56px;
}

.rss-n {
  font-size: 1.6rem;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
  color: var(--text-3);
}

.rss-l {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
}

.rss-critical .rss-n { color: #ef4444; }
.rss-high     .rss-n { color: #f97316; }
.rss-medium   .rss-n { color: #eab308; }
.rss-low      .rss-n { color: #3b82f6; }
.rss-info     .rss-n { color: #64748b; }

.rss-active.rss-critical { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.05); }
.rss-active.rss-high     { border-color: rgba(249,115,22,.3); background: rgba(249,115,22,.05); }
.rss-active.rss-medium   { border-color: rgba(234,179,8,.3);  background: rgba(234,179,8,.05); }
.rss-active.rss-low      { border-color: rgba(59,130,246,.3); background: rgba(59,130,246,.05); }

.rss-ring-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  flex-shrink: 0;
}

.rss-ring-svg { width: 90px; height: 90px; display: block; }

.rss-ring-track { stroke: var(--border); }
[data-theme="dark"] .rss-ring-track { stroke: rgba(255,255,255,.1); }

.rss-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.rss-ring-num {
  font-size: 22px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
  line-height: 1.1;
}

.rss-ring-sub {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.rss-perf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 12px;
  border-left: 1px solid var(--border);
  margin-left: 4px;
}

.rss-perf-val {
  font-size: 1.3rem;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: var(--primary);
  line-height: 1;
}

.rss-grade { font-size: 1rem; margin-top: 4px; }

.rss-sec-grade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 12px;
  margin-left: 2px;
}

.rss-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 4px 8px;
  opacity: .5;
}

.rss-perf-lbl {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-3);
}

/* ── AI two-column grid ─────────────────────────────────────────────────── */
.ai-results-grid {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
}

.ai-results-grid > * { flex: 1; min-width: 0; }

/* ── Tab More dropdown ──────────────────────────────────────────────────── */
.tab-more-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tab-more-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 700;
  min-width: 180px;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(11,31,69,.12);
  padding: 6px;
  flex-direction: column;
  gap: 1px;
}

.tab-more-menu.open { display: flex; }

[data-theme="dark"] .tab-more-menu {
  background: #1e293b;
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

.tab-more-item {
  display: block;
  width: 100%;
  padding: 7px 12px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-2);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background .1s, color .1s;
}

.tab-more-item:hover { background: var(--surface-2); color: var(--text); }
[data-theme="dark"] .tab-more-item { color: #94a3b8; }
[data-theme="dark"] .tab-more-item:hover { background: rgba(255,255,255,.07); color: #e2e8f0; }

.tab-more-item.tab-active {
  color: var(--primary);
  font-weight: 700;
}


/* ── Scan type badge in results subtitle ────────────────────────────────── */
.scan-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(29,95,180,.12);
  color: var(--primary);
  border: 1px solid rgba(29,95,180,.2);
  vertical-align: middle;
  margin-right: 4px;
}

[data-theme="dark"] .scan-type-badge {
  background: rgba(96,165,250,.15);
  color: #93c5fd;
  border-color: rgba(96,165,250,.25);
}

/* ── Page title for results (domain only, no prefix) ────────────────────── */
#results-title {
  font-size: 1.35rem;
  font-weight: 700;
  word-break: break-all;
}

/* ── Light mode improvements for score strip ────────────────────────────── */
:root:not([data-theme="dark"]) .rss-chip {
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(11,31,69,.06);
}

/* ── Finding card action bar ─────────────────────────────────────────────── */
.finding-actions-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0 2px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
  flex-wrap: wrap;
}

.finding-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  line-height: 1.4;
}

.finding-action-btn:hover {
  background: var(--surface-2);
  border-color: var(--primary);
  color: var(--primary);
}

.finding-more-wrap {
  position: relative;
}

.finding-more-menu {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 4px);
  z-index: 500;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(11,31,69,.15);
  padding: 6px;
  flex-direction: column;
  gap: 1px;
}

.finding-more-menu.open { display: flex; }

.finding-more-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--text);
  cursor: pointer;
}

.finding-more-menu button:hover { background: var(--surface-2); }

.fmm-group {
  padding: 6px 12px 2px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .06em;
  text-transform: uppercase;
}

[data-theme="dark"] .finding-more-menu {
  background: #1e293b;
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .finding-more-menu {
    background: #1e293b;
    border-color: rgba(255,255,255,.1);
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
  }
}

/* ── Sidebar: min-height:0 ensures overflow-y:auto activates in flexbox ─── */
.sidebar-nav {
  min-height: 0;
}

/* ── Light mode: AI finding sections (dark backgrounds → surface tokens) ── */
:root:not([data-theme="dark"]) .ai-remediation-section,
:root:not([data-theme="dark"]) .ai-config-section,
:root:not([data-theme="dark"]) .ai-pentest-section {
  background: var(--surface-2);
  border-top-color: var(--border);
}

:root:not([data-theme="dark"]) .ai-remediation-text,
:root:not([data-theme="dark"]) .ai-pentest-text {
  color: var(--text-2);
}

:root:not([data-theme="dark"]) .ai-config-pre {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--primary);
}

:root:not([data-theme="dark"]) .btn-get-config {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--primary);
}

:root:not([data-theme="dark"]) .ai-chat-widget {
  background: var(--surface);
  border-color: var(--border);
}

:root:not([data-theme="dark"]) .ai-chains-panel {
  background: var(--surface);
  border-color: var(--border);
}

:root:not([data-theme="dark"]) .ai-chain-card {
  background: var(--surface-2);
  border-color: var(--border);
}

:root:not([data-theme="dark"]) .ai-chain-impact {
  border-top-color: var(--border);
}

:root:not([data-theme="dark"]) .step-num {
  background: var(--surface-3);
  color: var(--text-2);
}

:root:not([data-theme="dark"]) .step-text {
  color: var(--text-2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ai-remediation-section,
  :root:not([data-theme="light"]) .ai-config-section,
  :root:not([data-theme="light"]) .ai-pentest-section {
    background: revert;
    border-top-color: revert;
  }
}

/* ── Light mode: AI Executive Briefing, chat, NL filter ─────────────────── */
:root:not([data-theme="dark"]) .ai-executive-panel {
  background: var(--surface);
  border-color: var(--border);
}

:root:not([data-theme="dark"]) .ai-summary-text { color: var(--text-2); }
:root:not([data-theme="dark"]) .ai-summary-label { color: var(--primary); }

:root:not([data-theme="dark"]) .ai-chat-widget {
  background: var(--surface);
  border-color: var(--border);
}

:root:not([data-theme="dark"]) .ai-chat-header { color: var(--text); }
:root:not([data-theme="dark"]) .ai-chat-header:hover { background: var(--surface-2); }
:root:not([data-theme="dark"]) .ai-chat-title { color: var(--primary); }
:root:not([data-theme="dark"]) .ai-chat-icon { color: var(--primary); }
:root:not([data-theme="dark"]) .ai-chat-toggle-icon { color: var(--primary); }
:root:not([data-theme="dark"]) .ai-chat-body { border-top-color: var(--border); }
:root:not([data-theme="dark"]) .ai-chat-input-row { border-top-color: var(--border); }

:root:not([data-theme="dark"]) .ai-chat-input {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

:root:not([data-theme="dark"]) .ai-msg-user {
  background: rgba(29,95,180,.12);
  color: var(--text);
}

:root:not([data-theme="dark"]) .ai-msg-bot {
  background: var(--surface-2);
  color: var(--text-2);
  border-color: var(--border);
}

:root:not([data-theme="dark"]) .nl-filter-wrap {
  background: var(--surface);
  border-color: var(--border);
}

:root:not([data-theme="dark"]) .nl-filter-input {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

:root:not([data-theme="dark"]) .nl-filter-btn {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

:root:not([data-theme="dark"]) .nl-filter-btn:hover { background: var(--primary-h); }
:root:not([data-theme="dark"]) .nl-filter-icon { color: var(--primary); }
:root:not([data-theme="dark"]) .nl-filter-answer { color: var(--text-2); }

/* ── Sidebar scrollbar ───────────────────────────────────────────────────── */
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
.sidebar-nav { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* ── Mobile: results header score strip ─────────────────────────────────── */
@media (max-width: 768px) {
  .results-header-row {
    flex-direction: column;
    gap: 12px;
  }
  .results-score-strip {
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
  }
  .rss-chips {
    flex-wrap: wrap;
    gap: 4px;
  }
  .rss-chip {
    padding: 6px 10px;
    min-width: 44px;
  }
  .rss-n { font-size: 1.1rem; }
  .rss-l { font-size: .58rem; }
  .rss-ring-wrap { width: 64px; height: 64px; }
  .rss-ring-svg  { width: 64px; height: 64px; }
  .rss-ring-num  { font-size: 15px; }
  .rss-perf-val  { font-size: 1rem; }
}

/* ── Mobile: finding action bar ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .finding-actions-bar { flex-wrap: wrap; gap: 4px; }
  .finding-action-btn  { padding: 3px 8px; font-size: .68rem; }
  .finding-more-wrap   { margin-left: 0; }
}

/* ── Light mode: remaining dark-only components ──────────────────────────── */
:root:not([data-theme="dark"]) .ai-cve-section {
  background: var(--surface-2);
  border-top-color: var(--border);
}
:root:not([data-theme="dark"]) .ai-cve-text { color: var(--text-2); }

:root:not([data-theme="dark"]) .ai-diff-summary {
  background: var(--surface);
  border-color: var(--border);
}
:root:not([data-theme="dark"]) .ai-diff-text { color: var(--text-2); }
:root:not([data-theme="dark"]) .ai-diff-label { color: var(--primary); }
:root:not([data-theme="dark"]) .ai-diff-icon  { color: var(--primary); }

:root:not([data-theme="dark"]) .btn-compliance-ai {
  background: var(--surface);
  border-color: var(--border);
  color: var(--primary);
}
:root:not([data-theme="dark"]) .btn-compliance-ai:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--primary);
}

:root:not([data-theme="dark"]) .ai-chat-suggestion {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--primary);
}
:root:not([data-theme="dark"]) .ai-chat-suggestion:hover {
  background: var(--surface-3);
  border-color: var(--primary);
}

:root:not([data-theme="dark"]) .ai-msg-loading { color: var(--primary); }

/* ── Attack chain empty state ────────────────────────────────────────────── */
.ai-chains-empty {
  padding: 18px 16px;
  font-size: .85rem;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Duplicate results-header override: keep only the flex-direction:column version ── */
/* (original at line 305 is a generic flex container; line 6533 block overrides correctly) */

/* ── Supply Chain ──────────────────────────────────────────────────────────── */

/* Filter bar */
.sc-filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* Intel card grid */
.sc-intel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.sc-intel-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.sc-intel-card-top {
  padding: 14px 14px 10px;
}
.sc-intel-card-body {
  padding: 0 14px 12px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 10px;
}

/* Category label */
.sc-cat-label {
  font-size: .72rem;
  color: var(--text-2);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}

/* Data access */
.sc-data-access { margin: 8px 0; }
.sc-da-label { font-size: .75rem; color: var(--text-2); margin-bottom: 4px; font-weight: 600; }
.sc-da-items { display: flex; flex-wrap: wrap; gap: 4px; }
.sc-da-chip {
  font-size: .72rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  color: var(--text-2);
}

.sc-summary-strip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.sc-strip-card {
  flex: 1 1 100px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
  min-width: 90px;
}
.sc-strip-card.sc-strip-warn { border-color: #f9731644; background: #f9731608; }
.sc-strip-card.sc-strip-crit { border-color: #ef444444; background: #ef444408; }
.sc-strip-card.sc-strip-score { border-color: var(--primary-2); }
.sc-strip-num   { font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--text-1); }
.sc-strip-label { font-size: .73rem; color: var(--text-2); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }

.sc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 860px) { .sc-grid { grid-template-columns: 1fr; } }

.sc-panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.sc-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 16px;
  font-weight: 600;
  font-size: .85rem;
  color: var(--text-1);
  border-bottom: 1px solid var(--border);
  background: var(--surface-3);
}
.sc-count-badge {
  background: var(--primary-2);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9px;
  min-width: 22px;
  text-align: center;
}

/* Supplier cards */
.sc-supplier-card { border-bottom: 1px solid var(--border); }
.sc-supplier-card:last-child { border-bottom: none; }
.sc-supplier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}
.sc-supplier-header:hover { background: var(--surface-3); }
.sc-supplier-name { font-weight: 600; font-size: .87rem; color: var(--text-1); }
.sc-chevron { transition: transform .2s; flex-shrink: 0; }
.sc-chevron.open { transform: rotate(180deg); }
.sc-supplier-body {
  display: none;
  padding: 0 14px 12px;
  font-size: .82rem;
  color: var(--text-2);
}
.sc-supplier-body.open { display: block; }
.sc-domain { font-family: monospace; font-size: .8rem; color: var(--text-2); margin-bottom: 6px; }
.sc-script-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.sc-script-url {
  font-size: .74rem;
  background: var(--surface-3);
  padding: 3px 6px;
  border-radius: 4px;
  word-break: break-all;
  color: var(--text-2);
}
.sc-incidents { margin-top: 6px; }
.sc-incidents ul { margin: 4px 0 0; padding-left: 16px; }
.sc-incidents li { margin-bottom: 3px; font-size: .8rem; }
.sc-inc-sev { font-weight: 700; font-size: .75rem; }
.sc-remediation {
  margin-top: 8px;
  background: var(--surface-3);
  border-left: 3px solid var(--primary-2);
  padding: 6px 10px;
  font-size: .8rem;
  border-radius: 0 4px 4px 0;
  color: var(--text-1);
}
.sc-sri-ok   { font-size: .72rem; font-weight: 600; color: #22c55e; }
.sc-sri-miss { font-size: .72rem; font-weight: 600; color: #f97316; }

/* Severity badge */
.sc-sev-badge {
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid transparent;
  letter-spacing: .03em;
}

/* Library table */
.sc-lib-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.sc-lib-table th {
  text-align: left;
  padding: 8px 12px;
  color: var(--text-2);
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}
.sc-lib-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.sc-lib-table tr:last-child td { border-bottom: none; }
.sc-lib-table tr.sc-lib-vuln { background: #f9731606; }
.sc-lib-table tr.sc-lib-vuln:hover { background: #f9731612; }
.sc-cve-list { margin-top: 6px; }
.sc-cve-item { font-size: .76rem; color: #f97316; margin-bottom: 2px; }

/* Manifests */
.sc-manifest-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
}
.sc-manifest-item:last-child { border-bottom: none; }
.sc-manifest-preview {
  margin-top: 8px;
  background: var(--surface-3);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: .73rem;
  overflow-x: auto;
  max-height: 80px;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-all;
}
.sc-manifest-link {
  font-size: .75rem;
  color: var(--primary-2);
  text-decoration: none;
  padding: 2px 7px;
  border: 1px solid var(--primary-2);
  border-radius: 4px;
}
.sc-manifest-link:hover { background: var(--primary-2); color: #fff; }

/* Alert */
.sc-alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: .85rem; }
.sc-alert-critical { background: #ef444412; border: 1px solid #ef444444; color: #ef4444; }

/* Empty */
.sc-empty-msg { padding: 20px; color: var(--text-2); font-size: .84rem; text-align: center; }