/* ============================================================
   ZelBreach — Gruvbox Dark Theme
   Fira Sans / Fira Mono — Premium SaaS UI
   ============================================================ */

/* ---------- CSS Variables (Gruvbox) ---------- */
:root {
  --bg:       #1d2021;
  --bg1:      #282828;
  --bg2:      #32302f;
  --bg3:      #3c3836;
  --bg4:      #504945;
  --fg:       #ebdbb2;
  --fg1:      #d5c4a1;
  --fg2:      #bdae93;
  --fg3:      #a89984;
  --fg4:      #928374;
  --red:      #cc241d;
  --red-bright: #fb4934;
  --green:    #98971a;
  --green-bright: #b8bb26;
  --yellow:   #d79921;
  --yellow-bright: #fabd2f;
  --blue:     #458588;
  --blue-bright: #83a598;
  --purple:   #b16286;
  --purple-bright: #d3869b;
  --aqua:     #689d6a;
  --aqua-bright: #8ec07c;
  --orange:   #d65d0e;
  --orange-bright: #fe8019;

  --sidebar-w: 230px;
  --topnav-h:  58px;
  --radius:    6px;
  --radius-lg: 10px;
  --shadow:    0 2px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --transition: 0.18s ease;
}

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

html { height: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Fira Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  height: 100%;
  overflow-x: hidden;
}

a { color: var(--blue-bright); text-decoration: none; }
a:hover { color: var(--yellow-bright); }

input, select, textarea, button {
  font-family: inherit;
  font-size: 14px;
}

code, pre, .ip-code {
  font-family: 'Fira Mono', monospace;
  font-size: 12px;
}

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg1); }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg4); }

/* ============================================================
   LAYOUT
   ============================================================ */

body:not(.auth-body) {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg1);
  border-right: 1px solid var(--bg3);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width var(--transition);
  z-index: 100;
}

.sidebar.collapsed { width: 56px; }
.sidebar.collapsed .logo-text,
.sidebar.collapsed .logo-badge,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-badge-ai,
.sidebar.collapsed .nav-badge-zelc,
.sidebar.collapsed .sidebar-section-label,
.sidebar.collapsed .sidebar-user-info,
.sidebar.collapsed .sidebar-user-cog { display: none; }
.sidebar.collapsed .sidebar-user { justify-content: center; }

.sidebar-logo {
  padding: 16px 14px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--bg3);
  flex-shrink: 0;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--red), var(--orange));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  flex-shrink: 0;
}

.logo-icon svg { width: 18px; height: 18px; }

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

.logo-badge {
  font-size: 10px;
  background: var(--bg3);
  color: var(--fg4);
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: auto;
}

.sidebar-section-label {
  padding: 12px 14px 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--fg4);
  text-transform: uppercase;
}

.sidebar-nav {
  padding: 0 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--fg3);
  font-size: 13px;
  font-weight: 500;
  position: relative;
  transition: background var(--transition), color var(--transition);
  margin-bottom: 1px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.nav-item:hover {
  background: var(--bg2);
  color: var(--fg);
}

.nav-item.active {
  background: var(--bg3);
  color: var(--fg);
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-icon svg { width: 16px; height: 16px; }

.nav-active-bar {
  position: absolute;
  right: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--yellow);
  border-radius: 2px;
}

.nav-badge-ai {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #fff;
  padding: 1px 5px;
  border-radius: 8px;
}

.nav-badge-zelc {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, var(--orange), var(--yellow));
  color: #1d2021;
  padding: 1px 5px;
  border-radius: 8px;
}

.nav-item-admin { margin-top: 4px; }

.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid var(--bg3);
  padding: 8px;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition);
  text-decoration: none;
  color: var(--fg);
}

.sidebar-user:hover { background: var(--bg2); }
.sidebar-user.active { background: var(--bg3); }

.sidebar-user-avatar {
  font-size: 20px;
  flex-shrink: 0;
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: 11px;
  color: var(--fg4);
}

.sidebar-user-cog { margin-left: auto; flex-shrink: 0; }
.sidebar-user-cog svg { width: 14px; height: 14px; }

/* ---------- Main Area ---------- */
.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
}

/* ---------- Top Nav ---------- */
.topnav {
  height: var(--topnav-h);
  background: var(--bg1);
  border-bottom: 1px solid var(--bg3);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  flex-shrink: 0;
  z-index: 50;
}

.topnav-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.topnav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-toggle {
  background: none;
  border: none;
  color: var(--fg3);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  transition: color var(--transition), background var(--transition);
  flex-shrink: 0;
}

.sidebar-toggle:hover { color: var(--fg); background: var(--bg2); }
.sidebar-toggle svg { width: 18px; height: 18px; }

/* Search */
.search-wrap {
  flex: 1;
  max-width: 480px;
  position: relative;
}

.search-icon-left {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg4);
  pointer-events: none;
}

.search-icon-left svg { width: 15px; height: 15px; }

.search-input {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 7px 36px 7px 34px;
  color: var(--fg);
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition);
}

.search-input:focus {
  border-color: var(--blue);
  background: var(--bg);
}

.search-input::placeholder { color: var(--fg4); }

.search-kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--fg4);
  background: var(--bg3);
  border: 1px solid var(--bg4);
  border-radius: 3px;
  padding: 1px 5px;
  pointer-events: none;
}

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  max-height: 320px;
  overflow-y: auto;
  display: none;
}

.search-results.open { display: block; }

.sr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--bg3);
  transition: background var(--transition);
}

.sr-item:last-child { border-bottom: none; }
.sr-item:hover { background: var(--bg2); }

.sr-type {
  font-size: 10px;
  color: var(--fg4);
  background: var(--bg3);
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.sr-title { font-size: 13px; color: var(--fg); font-weight: 500; }

/* Topnav pill */
.topnav-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(152,151,26,0.12);
  border: 1px solid rgba(152,151,26,0.3);
  color: var(--green-bright);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 500;
}

.topnav-pill-dot {
  width: 6px;
  height: 6px;
  background: var(--green-bright);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.topnav-icon-btn {
  position: relative;
  background: none;
  border: 1px solid var(--bg3);
  color: var(--fg3);
  cursor: pointer;
  padding: 7px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  transition: all var(--transition);
}

.topnav-icon-btn:hover { color: var(--fg); background: var(--bg2); }
.topnav-icon-btn svg { width: 16px; height: 16px; }

.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--bg1);
}

/* Profile Menu */
.profile-wrap { position: relative; }

.profile-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 6px 10px;
  cursor: pointer;
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  transition: all var(--transition);
}

.profile-trigger:hover { background: var(--bg3); }

.profile-avi {
  font-size: 18px;
  line-height: 1;
}

.profile-caret svg { width: 14px; height: 14px; color: var(--fg4); }

.profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  display: none;
}

.profile-menu.open { display: block; }

.profile-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--bg3);
}

.pmh-avi { font-size: 28px; }

.pmh-info { display: flex; flex-direction: column; min-width: 0; }
.pmh-name { font-size: 13px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmh-email { font-size: 11px; color: var(--fg4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.profile-menu-items { padding: 6px; }

.pmi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--fg3);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.pmi:hover { background: var(--bg2); color: var(--fg); }
.pmi svg { width: 15px; height: 15px; }
.pmi-divider { height: 1px; background: var(--bg3); margin: 4px 0; }
.pmi-logout { color: var(--red); }
.pmi-logout:hover { background: rgba(204,36,29,0.1); color: var(--red-bright); }

/* ---------- Page Content ---------- */
.page-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
/* Run page: remove outer padding so layout fills edge-to-edge */
.page-content.run-page {
  padding: 0;
  overflow-x: hidden;
}

/* ---------- Page Header ---------- */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.page-header-left h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.3px;
}

.page-subtitle {
  color: var(--fg4);
  font-size: 13px;
  margin-top: 3px;
}

.page-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg4);
  font-size: 12px;
  margin-bottom: 6px;
  transition: color var(--transition);
}

.back-link:hover { color: var(--fg); }
.back-link svg { width: 13px; height: 13px; }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---------- Cards ---------- */
.card {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bg3);
  gap: 10px;
}

.card-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-header h3 svg { width: 15px; height: 15px; color: var(--fg4); }
.card-header-right { display: flex; align-items: center; gap: 8px; }
.card-link { font-size: 12px; color: var(--blue-bright); }
.card-link:hover { color: var(--yellow-bright); }

.card-body {
  padding: 18px;
}

.card-body.center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--blue);
  color: var(--fg);
  border: none;
  border-radius: var(--radius);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-primary:hover { background: var(--blue-bright); color: var(--bg); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary svg { width: 15px; height: 15px; }
.btn-primary.btn-full { width: 100%; justify-content: center; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg3);
  color: var(--fg);
  border: 1px solid var(--bg4);
  border-radius: var(--radius);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-secondary:hover { background: var(--bg4); color: var(--fg); border-color: var(--fg4); }
.btn-secondary svg { width: 15px; height: 15px; }

.btn-ghost-sm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--bg4);
  color: var(--fg3);
  border-radius: var(--radius);
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-ghost-sm:hover { background: var(--bg3); color: var(--fg); border-color: var(--fg4); }
.btn-ghost-sm svg { width: 13px; height: 13px; }

.btn-primary-sm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--blue);
  color: var(--fg);
  border: none;
  border-radius: var(--radius);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-primary-sm:hover { background: var(--blue-bright); color: var(--bg); }
.btn-primary-sm svg { width: 13px; height: 13px; }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--fg3);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius);
  transition: all var(--transition);
}

.btn-icon:hover { background: var(--bg3); color: var(--fg); }
.btn-icon svg { width: 16px; height: 16px; }

.btn-icon-sm svg { width: 13px; height: 13px; }

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(204,36,29,0.15);
  color: var(--red-bright);
  border: 1px solid rgba(204,36,29,0.3);
  border-radius: var(--radius);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
}

.btn-danger:hover { background: var(--red); color: #fff; }
.btn-danger svg { width: 15px; height: 15px; }

.btn-text-sm {
  background: none;
  border: none;
  color: var(--blue-bright);
  cursor: pointer;
  font-size: 12px;
  padding: 4px 8px;
}

.btn-text-sm:hover { color: var(--yellow-bright); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.badge-type { background: var(--bg3); color: var(--fg3); }
.badge-preset { background: rgba(215,153,33,0.15); color: var(--yellow-bright); }
.badge-demo { background: rgba(105,150,122,0.15); color: var(--aqua-bright); }
.badge-info { background: var(--bg3); color: var(--fg4); }
.badge-red { background: rgba(204,36,29,0.15); color: var(--red-bright); }
.badge-green { background: rgba(152,151,26,0.15); color: var(--green-bright); }
.badge-muted { background: var(--bg3); color: var(--fg4); }

.badge-critical { background: rgba(204,36,29,0.2); color: var(--red-bright); }
.badge-high { background: rgba(215,153,33,0.2); color: var(--yellow-bright); }
.badge-medium { background: rgba(69,133,136,0.2); color: var(--blue-bright); }
.badge-low { background: rgba(152,151,26,0.2); color: var(--green-bright); }

/* ---------- Forms ---------- */
.form-field {
  margin-bottom: 16px;
}

.form-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg3);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-input {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 9px 12px;
  color: var(--fg);
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}

.form-input:focus { border-color: var(--blue); background: var(--bg); }
.form-input:disabled { opacity: 0.5; cursor: not-allowed; }
.form-input::placeholder { color: var(--fg4); }

.form-select {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 9px 12px;
  color: var(--fg);
  font-size: 13px;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23928374' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  transition: border-color var(--transition);
}

.form-select:focus { border-color: var(--blue); }

.form-select-sm {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 5px 10px;
  color: var(--fg);
  font-size: 12px;
  outline: none;
  cursor: pointer;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.input-wrap {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg4);
  pointer-events: none;
}

.input-icon svg { width: 14px; height: 14px; }

.input-wrap .form-input {
  padding-left: 34px;
}

.input-btn-right {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--fg4);
  cursor: pointer;
  padding: 4px;
}

.input-btn-right:hover { color: var(--fg); }
.input-btn-right svg { width: 14px; height: 14px; }

.field-hint { font-size: 11px; color: var(--fg4); margin-top: 4px; display: block; }
.required { color: var(--red-bright); }

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.form-actions-sticky {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--bg3);
  padding: 14px 0 0;
  margin-top: 24px;
  z-index: 10;
}

.form-actions-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.live-score-display {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  font-size: 13px;
  color: var(--fg3);
}

.live-score-display strong { font-size: 20px; font-weight: 700; }

.search-input-sm {
  background: var(--bg);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 6px 10px;
  color: var(--fg);
  font-size: 12px;
  outline: none;
  width: 200px;
}

.search-input-sm:focus { border-color: var(--blue); }

/* ---------- Tables ---------- */
.sim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sim-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--bg3);
}

.sim-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--bg3);
  color: var(--fg3);
  vertical-align: middle;
}

.sim-table tbody tr:last-child td { border-bottom: none; }
.sim-table tbody tr:hover { background: var(--bg2); }

.sim-table-wrap { overflow-x: auto; }

.tbl-link {
  display: inline-flex;
  align-items: center;
  color: var(--fg4);
  transition: color var(--transition);
}

.tbl-link:hover { color: var(--blue-bright); }
.tbl-link svg { width: 15px; height: 15px; }

.sim-name { font-weight: 500; color: var(--fg); }
.date-cell { color: var(--fg4); font-size: 12px; }

/* ---------- Stat Cards ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.stats-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.stat-card {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.stat-card-red { border-left: 3px solid var(--red); }
.stat-card-blue { border-left: 3px solid var(--blue); }
.stat-card-yellow { border-left: 3px solid var(--yellow); }
.stat-card-green { border-left: 3px solid var(--green); }

.stat-icon {
  width: 36px;
  height: 36px;
  background: var(--bg3);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fg3);
}

.stat-icon svg { width: 18px; height: 18px; }

.stat-body { flex: 1; min-width: 0; }

.stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.1;
}

.stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg3);
  margin-top: 2px;
}

.stat-sub {
  font-size: 11px;
  color: var(--fg4);
  margin-top: 1px;
}

/* Score pill and bars */
.score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  width: 36px;
  height: 26px;
  border-radius: 4px;
}

.pct-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg3);
}

.pct-bar span {
  width: 60px;
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
  overflow: hidden;
  display: block;
}

.pct-bar span span {
  height: 100%;
  background: var(--red);
  border-radius: 2px;
  width: 0;
  display: block;
}

.pct-bar-blue span span { background: var(--blue); }

/* Stealth badges */
.stealth-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stealth-balanced { background: rgba(152,151,26,0.15); color: var(--green-bright); }
.stealth-stealthy { background: rgba(69,133,136,0.15); color: var(--blue-bright); }
.stealth-loud { background: rgba(204,36,29,0.15); color: var(--red-bright); }

/* Alert items */
.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bg3);
  position: relative;
}

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

.alert-sev-bar {
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  flex-shrink: 0;
}

.alert-critical .alert-sev-bar { background: var(--red); }
.alert-high .alert-sev-bar { background: var(--yellow); }
.alert-medium .alert-sev-bar { background: var(--blue); }
.alert-low .alert-sev-bar { background: var(--green); }

.alert-body { flex: 1; min-width: 0; }

.alert-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 3px;
}

.alert-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.alert-meta span { font-size: 11px; color: var(--fg4); }

.alert-status { font-size: 11px; font-weight: 600; white-space: nowrap; }
.status-open { color: var(--red-bright); }
.status-resolved { color: var(--green-bright); }

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

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

.tab-btn:hover { color: var(--fg); }
.tab-btn.active { color: var(--yellow-bright); border-bottom-color: var(--yellow-bright); }

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

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

.filter-btn {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  color: var(--fg3);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--transition);
}

.filter-btn:hover { background: var(--bg3); color: var(--fg); }
.filter-btn.active { background: var(--blue); border-color: var(--blue); color: var(--fg); }

.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
  color: var(--fg4);
  font-size: 10px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 4px;
  margin-left: 4px;
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--fg4);
  gap: 12px;
  text-align: center;
}

.empty-state svg, .empty-state i { width: 48px; height: 48px; opacity: 0.4; }
.empty-state h3 { font-size: 16px; color: var(--fg3); }
.empty-state p { font-size: 13px; }

/* Info list */
.info-list { display: flex; flex-direction: column; }

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 18px;
  border-bottom: 1px solid var(--bg3);
  gap: 12px;
}

.info-item:last-child { border-bottom: none; }
.info-item span { font-size: 12px; color: var(--fg4); }
.info-item strong { font-size: 13px; color: var(--fg); text-align: right; }

/* Quick actions */
.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px;
}

.qa-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: var(--radius);
  background: var(--bg2);
  border: 1px solid var(--bg3);
  color: var(--fg3);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}

.qa-btn:hover { background: var(--bg3); color: var(--fg); }
.qa-btn svg { width: 20px; height: 20px; }
.qa-run:hover { border-color: var(--blue); color: var(--blue-bright); }
.qa-scenario:hover { border-color: var(--red); color: var(--red-bright); }
.qa-defender:hover { border-color: var(--green); color: var(--green-bright); }
.qa-ai:hover { border-color: var(--purple); color: var(--purple-bright); }

/* Activity */
.activity-list { padding: 8px 0; }

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 14px;
}

.act-dot {
  width: 6px;
  height: 6px;
  background: var(--bg4);
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.act-body { flex: 1; min-width: 0; }
.act-desc { font-size: 12px; color: var(--fg3); display: block; }
.act-meta { font-size: 11px; color: var(--fg4); }

/* Dashboard grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
}

.dash-col-main { display: flex; flex-direction: column; gap: 20px; }
.dash-col-side { display: flex; flex-direction: column; gap: 20px; }

/* Risk gauge */
.risk-gauge-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
}

.gauge-label {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gauge-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.gauge-text {
  font-size: 11px;
  color: var(--fg4);
  margin-top: 2px;
}

.risk-metrics {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 8px;
}

.rm-item { text-align: center; }
.rm-item span { display: block; font-size: 11px; color: var(--fg4); }
.rm-item strong { display: block; font-size: 14px; font-weight: 700; color: var(--fg); }

/* Severity legend */
.severity-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.sl-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--fg3);
}

.sl-dot { width: 8px; height: 8px; border-radius: 50%; }
.sl-item strong { margin-left: auto; font-weight: 600; color: var(--fg); }

/* ============================================================
   SCENARIO CARDS
   ============================================================ */

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.scenario-card {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--transition), transform var(--transition);
}

.scenario-card:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}

.sc-head { display: flex; align-items: flex-start; gap: 12px; }

.sc-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fg3);
}

.sc-icon svg { width: 20px; height: 20px; }
.sc-icon-ransomware { background: rgba(204,36,29,0.15); color: var(--red-bright); }
.sc-icon-phishing_ato { background: rgba(215,153,33,0.15); color: var(--yellow-bright); }
.sc-icon-web_breach { background: rgba(69,133,136,0.15); color: var(--blue-bright); }
.sc-icon-cloud_privesc { background: rgba(131,165,152,0.15); color: var(--aqua-bright); }
.sc-icon-insider_theft { background: rgba(177,98,134,0.15); color: var(--purple-bright); }
.sc-icon-ad_compromise { background: rgba(254,128,25,0.15); color: var(--orange-bright); }
.sc-icon-saas_hijack { background: rgba(152,151,26,0.15); color: var(--green-bright); }
.sc-icon-supply_chain { background: rgba(106,142,106,0.15); color: var(--aqua-bright); }

.sc-meta { flex: 1; min-width: 0; }
.sc-name { font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 4px; }
.sc-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-desc { font-size: 12px; color: var(--fg4); line-height: 1.5; }

.sc-stages-label { font-size: 11px; color: var(--fg4); display: block; margin-bottom: 6px; }

.sc-stage-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.stage-pill {
  font-size: 10px;
  background: var(--bg3);
  color: var(--fg3);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.stage-arrow { color: var(--fg4); }
.stage-arrow svg { width: 10px; height: 10px; }

.sc-tactics { display: flex; flex-wrap: wrap; gap: 4px; }

.tactic-tag {
  font-size: 10px;
  background: rgba(69,133,136,0.12);
  color: var(--blue-bright);
  border: 1px solid rgba(69,133,136,0.25);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

.tactic-tag-lg {
  font-size: 12px;
  padding: 4px 10px;
}

.tactic-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.tactic-more { background: var(--bg3); color: var(--fg4); border-color: transparent; }

.sc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--bg3);
  gap: 10px;
}

.sc-stats { display: flex; gap: 12px; }
.sc-stats span { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--fg4); }
.sc-stats span svg { width: 12px; height: 12px; }
.sc-actions { display: flex; gap: 6px; align-items: center; }

/* ============================================================
   ENVIRONMENT
   ============================================================ */

.env-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.env-card {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--transition);
}

.env-card:hover { border-color: var(--blue); }

.env-card-icon {
  width: 48px;
  height: 48px;
  background: var(--bg3);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg3);
}

.env-card-icon svg { width: 24px; height: 24px; }
.env-card-body { flex: 1; }
.env-card-body h3 { font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 4px; }
.env-card-body p { font-size: 12px; color: var(--fg4); line-height: 1.4; }

.env-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.env-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--fg4);
}

.env-card-meta span svg { width: 12px; height: 12px; }

.risk-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.env-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg3);
  border: 1px solid var(--bg4);
  border-radius: var(--radius);
  padding: 7px 12px;
  font-size: 12px;
  color: var(--fg3);
  text-decoration: none;
  transition: all var(--transition);
}

.env-card-btn:hover { background: var(--blue); border-color: var(--blue); color: var(--fg); }
.env-card-btn svg { width: 13px; height: 13px; }

/* Asset table */
.crit-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.crit-critical { background: rgba(204,36,29,0.2); color: var(--red-bright); }
.crit-high { background: rgba(215,153,33,0.2); color: var(--yellow-bright); }
.crit-medium { background: rgba(69,133,136,0.2); color: var(--blue-bright); }
.crit-low { background: rgba(152,151,26,0.2); color: var(--green-bright); }

.ip-code { color: var(--aqua-bright); background: var(--bg3); padding: 1px 6px; border-radius: 3px; }

.risk-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg3);
}

.risk-bar {
  height: 4px;
  border-radius: 2px;
  max-width: 60px;
}

.crown-icon { color: var(--yellow); margin-right: 4px; }
.crown-icon svg { width: 13px; height: 13px; }
.crown-jewel-row { background: rgba(215,153,33,0.03); }

.text-yellow { color: var(--yellow-bright); }
.text-muted { color: var(--fg4); font-size: 13px; }

/* Crown jewels grid */
.crown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.crown-card {
  background: var(--bg1);
  border: 1px solid rgba(215,153,33,0.3);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 0 0 1px rgba(215,153,33,0.1);
}

.crown-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.crown-star { color: var(--yellow-bright); font-size: 16px; }

.crown-card-header h3 { font-size: 14px; font-weight: 600; color: var(--fg); flex: 1; }

.crown-info { margin-bottom: 12px; }
.ci-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--bg3); font-size: 12px; }
.ci-row:last-child { border-bottom: none; }
.ci-row span { color: var(--fg4); }
.ci-row strong, .ci-row code { color: var(--fg); }

.crown-controls { }
.cc-label { font-size: 11px; color: var(--fg4); display: block; margin-bottom: 6px; }
.ctrl-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; background: var(--bg3); color: var(--fg3); padding: 2px 8px; border-radius: 10px; margin-right: 4px; margin-bottom: 4px; }
.ctrl-chip svg { width: 10px; height: 10px; }

/* Topology */
.topology-canvas {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--bg);
  min-height: 400px;
}

.topo-zone {
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 12px;
}

.topo-zone-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg4);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}

.topo-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topo-asset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 11px;
  color: var(--fg3);
  position: relative;
  cursor: default;
  transition: border-color var(--transition);
  min-width: 80px;
}

.topo-asset:hover { border-color: var(--blue); }
.topo-asset svg { width: 18px; height: 18px; }
.topo-critical { border-left: 2px solid var(--red); }
.topo-high { border-left: 2px solid var(--yellow); }
.topo-medium { border-left: 2px solid var(--blue); }
.topo-crown { border-color: rgba(215,153,33,0.4); }

.topo-crown-dot {
  position: absolute;
  top: 2px;
  right: 4px;
  color: var(--yellow-bright);
  font-size: 10px;
}

/* Asset drawer */
.asset-drawer {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  height: 100vh;
  background: var(--bg1);
  border-left: 1px solid var(--bg3);
  z-index: 300;
  transition: right 0.25s ease;
  display: flex;
  flex-direction: column;
}

.asset-drawer.open { right: 0; }

.asset-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--bg3);
  flex-shrink: 0;
}

.asset-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.ad-section { margin-bottom: 16px; }
.ad-section h4 { font-size: 12px; font-weight: 600; color: var(--fg4); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }

/* ============================================================
   ATTACK PLAN
   ============================================================ */

.attack-plan-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  height: calc(100vh - var(--topnav-h) - 100px);
  min-height: 600px;
}

.ap-library {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ap-library-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--bg3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ap-library-header h3 {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--fg);
}

.ap-library-header h3 svg { width: 14px; height: 14px; }

.ap-tactics {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.ap-tactic-group { margin-bottom: 8px; }

.ap-tactic-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--fg4);
  padding: 4px 8px;
}

.ap-technique {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius);
  cursor: grab;
  transition: background var(--transition);
  user-select: none;
  position: relative;
}

.ap-technique:hover { background: var(--bg2); }
.ap-technique:active { cursor: grabbing; }

.tech-id { font-size: 10px; font-family: 'Fira Mono', monospace; color: var(--blue-bright); background: rgba(69,133,136,0.12); padding: 1px 5px; border-radius: 3px; flex-shrink: 0; }
.tech-name { font-size: 12px; color: var(--fg3); flex: 1; }

.tech-add {
  opacity: 0;
  color: var(--blue-bright);
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity var(--transition);
}

.ap-technique:hover .tech-add { opacity: 1; }
.tech-add svg { width: 14px; height: 14px; }

/* Canvas */
.ap-canvas {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ap-canvas-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ap-canvas-header h3 { font-size: 13px; font-weight: 600; color: var(--fg); display: flex; align-items: center; gap: 7px; }
.ap-canvas-header h3 svg { width: 14px; height: 14px; }
.ap-canvas-actions { display: flex; align-items: center; gap: 8px; }

.ap-chain-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-height: 200px;
  border: 2px dashed transparent;
  transition: border-color var(--transition), background var(--transition);
}

.ap-chain-container:dragover {
  border-color: var(--blue);
  background: rgba(69,133,136,0.05);
}

.ap-chain-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--fg4);
  gap: 10px;
  text-align: center;
}

.ap-chain-empty svg { width: 40px; height: 40px; opacity: 0.3; }

.chain-step-plan {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 0;
}

.chain-connector {
  display: flex;
  justify-content: center;
  padding: 4px 0;
  color: var(--fg4);
}

.chain-connector svg { width: 14px; height: 14px; }

.chain-tactic-label { font-size: 10px; color: var(--blue-bright); text-transform: uppercase; letter-spacing: 0.5px; }
.chain-desc { font-size: 11px; color: var(--fg4); margin-top: 2px; display: block; }

.ap-config {
  padding: 14px 16px;
  border-top: 1px solid var(--bg3);
}

.ap-config h3 { font-size: 13px; font-weight: 600; margin-bottom: 12px; color: var(--fg); }

.ap-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.ap-impact-preview {
  padding: 14px 16px;
  border-top: 1px solid var(--bg3);
  background: rgba(69,133,136,0.05);
}

.ap-impact-preview h3 { font-size: 13px; font-weight: 600; margin-bottom: 12px; color: var(--fg); display: flex; align-items: center; gap: 7px; }
.ap-impact-preview h3 svg { width: 14px; height: 14px; }

.impact-metrics {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
}

.im-item { text-align: center; flex: 1; }
.im-label { font-size: 11px; color: var(--fg4); }
.im-value { font-size: 22px; font-weight: 700; color: var(--fg); }

/* ============================================================
   DEFENDER CONTROLS
   ============================================================ */

.category-scores-bar {
  display: flex;
  gap: 0;
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.cs-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 120px;
}

.cs-label { font-size: 11px; color: var(--fg4); white-space: nowrap; }
.cs-bar-wrap { flex: 1; height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.cs-bar { height: 100%; border-radius: 2px; transition: width 0.4s ease; }
.cs-value { font-size: 12px; font-weight: 700; min-width: 28px; text-align: right; }

.controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
}

.controls-category {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.controls-cat-header {
  padding: 10px 0 4px;
}

.controls-cat-header h3 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--fg4);
  display: flex;
  align-items: center;
  gap: 8px;
}

.controls-cat-header h3::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bg3);
}

.control-card {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 14px;
  transition: border-color var(--transition);
}

.control-card:hover { border-color: var(--bg4); }

.control-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.control-icon {
  width: 32px;
  height: 32px;
  background: var(--bg3);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fg4);
}

.control-icon svg { width: 16px; height: 16px; }

.control-info { flex: 1; min-width: 0; }
.control-label { display: block; font-size: 13px; font-weight: 600; color: var(--fg); }
.control-desc { display: block; font-size: 11px; color: var(--fg4); line-height: 1.4; margin-top: 2px; }

.control-value-display { text-align: right; flex-shrink: 0; font-size: 18px; font-weight: 700; transition: color var(--transition); }
.control-value-display span { font-size: 12px; color: var(--fg4); font-weight: 400; }

.control-slider-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.slider-label-low, .slider-label-high {
  font-size: 10px;
  color: var(--fg4);
  flex-shrink: 0;
}

.slider-track {
  flex: 1;
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
}

.control-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.control-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fg);
  cursor: pointer;
  border: 2px solid var(--bg1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  transition: transform 0.1s;
}

.control-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.slider-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
  transition: width 0.1s, background 0.3s;
}

.control-impact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.impact-label { font-size: 10px; color: var(--fg4); }

.impact-tag {
  font-size: 10px;
  background: rgba(69,133,136,0.12);
  color: var(--blue-bright);
  padding: 1px 7px;
  border-radius: 4px;
}

.tier-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 4px;
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tier-excellent { background: rgba(204,36,29,0.15); color: var(--red-bright); }
.tier-good { background: rgba(215,153,33,0.15); color: var(--yellow-bright); }
.tier-fair { background: rgba(69,133,136,0.15); color: var(--blue-bright); }
.tier-weak { background: rgba(152,151,26,0.15); color: var(--green-bright); }

.overall-score-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
}

.overall-score-badge svg { width: 15px; height: 15px; }
.overall-score-badge strong { font-size: 16px; font-weight: 800; }
.score-label { font-size: 11px; opacity: 0.8; }

/* ============================================================
   RUN PAGE
   ============================================================ */

.run-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 20px;
  align-items: start;
}

/* Env selector */
.env-selector-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.env-opt {
  background: var(--bg2);
  border: 2px solid var(--bg3);
  border-radius: var(--radius);
  padding: 10px 8px;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.env-opt:hover { border-color: var(--blue); background: rgba(69,133,136,0.05); }
.env-opt.selected { border-color: var(--blue); background: rgba(69,133,136,0.1); }

.env-opt-icon {
  width: 28px;
  height: 28px;
  background: var(--bg3);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg3);
  flex-shrink: 0;
}

.env-opt-icon svg { width: 16px; height: 16px; }
.env-opt-label { font-size: 11px; font-weight: 600; color: var(--fg3); line-height: 1.2; text-align: center; }
.env-opt-desc { display: none; font-size: 10px; color: var(--fg4); }
.env-opt-risk { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

.risk-high { color: var(--yellow-bright); }
.risk-critical { color: var(--red-bright); }
.risk-medium { color: var(--blue-bright); }

/* Stealth selector */
.stealth-selector {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.stealth-opt {
  background: var(--bg2);
  border: 2px solid var(--bg3);
  border-radius: var(--radius);
  padding: 10px;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stealth-opt:hover { border-color: var(--blue); }
.stealth-opt.selected { border-color: var(--yellow); background: rgba(215,153,33,0.05); }

.stealth-opt svg { width: 18px; height: 18px; color: var(--fg3); }
.stealth-opt strong { font-size: 12px; color: var(--fg); }
.stealth-opt span { font-size: 10px; color: var(--fg4); }

.stealth-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 8px; }
.stealth-stealthy { background: rgba(69,133,136,0.2); color: var(--blue-bright); }
.stealth-balanced { background: rgba(152,151,26,0.2); color: var(--green-bright); }
.stealth-loud { background: rgba(204,36,29,0.2); color: var(--red-bright); }

.btn-launch { margin-top: 8px; font-size: 14px; padding: 12px; }

/* Run Console */
.run-console {
  background: var(--bg);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
}

.console-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg1);
  border-bottom: 1px solid var(--bg3);
}

.console-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}

.console-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg4);
}

.console-status-dot.running {
  background: var(--green-bright);
  animation: pulse 1s infinite;
}

.console-status-dot.done { background: var(--blue); animation: none; }

.console-body {
  font-family: 'Fira Mono', monospace;
  font-size: 12px;
  padding: 12px 16px;
  min-height: 200px;
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.console-line {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 2px 0;
}

.cl-time { color: var(--fg4); flex-shrink: 0; min-width: 44px; }
.cl-text { color: var(--fg3); flex: 1; }
.cl-success { color: var(--green-bright); font-weight: 700; margin-left: auto; flex-shrink: 0; }
.cl-blocked { color: var(--red-bright); font-weight: 700; margin-left: auto; flex-shrink: 0; }

.console-info .cl-text { color: var(--fg4); }
.console-stage .cl-text { color: var(--yellow-bright); }
.console-success .cl-text { color: var(--green-bright); }
.console-error .cl-text { color: var(--red-bright); }

.console-progress-bar {
  height: 3px;
  background: var(--bg3);
  overflow: hidden;
}

.cpb-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--aqua));
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* Run results */
.run-results {
  background: var(--bg1);
  border: 1px solid rgba(152,151,26,0.3);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  text-align: center;
}

.run-results-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.results-done-icon svg { width: 36px; height: 36px; color: var(--green-bright); }
.run-results-header h3 { font-size: 16px; font-weight: 700; }

.run-score-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.rs-card {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
}

.rs-card-main { border-color: var(--yellow); background: rgba(215,153,33,0.05); }
.rs-label { font-size: 10px; color: var(--fg4); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.rs-value { font-size: 22px; font-weight: 800; }

.run-console-area { display: flex; flex-direction: column; gap: 0; }

/* ============================================================
   RESULTS PAGES
   ============================================================ */

.results-run-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
}

.result-card {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--transition);
}

.result-card:hover { border-color: var(--blue); }

.result-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.rc-title h3 { font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 4px; }

.rc-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid;
  border-radius: var(--radius);
  padding: 6px 12px;
  flex-shrink: 0;
}

.rc-score strong { font-size: 22px; font-weight: 800; line-height: 1; }
.rc-score span { font-size: 10px; opacity: 0.7; }

.result-metrics { display: flex; flex-direction: column; gap: 6px; }

.rm-metric {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.rml { color: var(--fg4); width: 100px; flex-shrink: 0; font-size: 11px; }
.rmb-wrap { flex: 1; height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.rmb { height: 100%; border-radius: 2px; transition: width 0.4s; }
.rmv { color: var(--fg3); font-weight: 600; width: 36px; text-align: right; }

.result-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.result-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--fg4);
}

.result-meta span svg { width: 12px; height: 12px; }

.affected-assets { display: flex; flex-wrap: wrap; gap: 4px; }

.asset-chip {
  font-size: 10px;
  font-family: 'Fira Mono', monospace;
  background: var(--bg3);
  color: var(--fg4);
  padding: 2px 8px;
  border-radius: 4px;
}

.result-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Simulation detail score overview */
.sim-score-overview {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 20px;
}

.sso-main { flex-shrink: 0; }

.sso-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  justify-content: center;
  gap: 2px;
}

.sso-num { font-size: 32px; font-weight: 800; line-height: 1; }
.sso-label { font-size: 10px; opacity: 0.7; }
.sso-risk { font-size: 11px; font-weight: 700; }

.sso-metrics { flex: 1; display: flex; flex-direction: column; gap: 10px; }

.sso-m { display: flex; align-items: center; gap: 10px; }
.sso-m-bar { flex: 1; height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.sso-m-bar div { height: 100%; border-radius: 3px; transition: width 0.5s; }
.sso-m-val { width: 42px; text-align: right; font-size: 13px; font-weight: 600; color: var(--fg); }
.sso-m-label { width: 110px; font-size: 12px; color: var(--fg4); }

/* Timeline */
.timeline-wrap { display: flex; flex-direction: column; padding: 8px 0; }

.timeline-item {
  display: flex;
  gap: 16px;
  padding: 0 0 0 8px;
}

.tl-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 20px;
}

.tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid;
  flex-shrink: 0;
  margin-top: 14px;
}

.tl-dot-success { background: var(--green-bright); border-color: var(--green-bright); }
.tl-dot-blocked { background: var(--bg3); border-color: var(--blue-bright); }
.tl-dot-partial { background: var(--yellow); border-color: var(--yellow); }

.tl-line { flex: 1; width: 2px; background: var(--bg3); }

.tl-body {
  flex: 1;
  padding: 10px 0 20px;
}

.tl-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

.tl-stage { font-size: 12px; font-weight: 700; color: var(--yellow-bright); text-transform: uppercase; letter-spacing: 0.5px; }
.tl-technique { font-size: 13px; font-weight: 600; color: var(--fg); }
.tl-time { margin-left: auto; font-size: 11px; color: var(--fg4); font-family: 'Fira Mono', monospace; }
.tl-desc { font-size: 13px; color: var(--fg3); }

.outcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.outcome-badge svg { width: 11px; height: 11px; }
.outcome-success { background: rgba(152,151,26,0.2); color: var(--green-bright); }
.outcome-blocked { background: rgba(69,133,136,0.2); color: var(--blue-bright); }
.outcome-partial { background: rgba(215,153,33,0.2); color: var(--yellow-bright); }
.outcome-unknown { background: var(--bg3); color: var(--fg4); }

/* Alert detail */
.alert-detail-list { display: flex; flex-direction: column; gap: 10px; }

.alert-detail-item {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  display: flex;
  gap: 0;
  overflow: hidden;
}

.adi-left {
  width: 4px;
  display: flex;
  flex-direction: column;
}

.adi-sev-bar { flex: 1; }

.alert-detail-item.alert-critical .adi-sev-bar { background: var(--red); }
.alert-detail-item.alert-high .adi-sev-bar { background: var(--yellow); }
.alert-detail-item.alert-medium .adi-sev-bar { background: var(--blue); }
.alert-detail-item.alert-low .adi-sev-bar { background: var(--green); }

.adi-icon {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg4);
}

.adi-icon svg { width: 16px; height: 16px; }

.adi-body {
  flex: 1;
  padding: 12px;
}

.adi-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.adi-title-row h3 { font-size: 14px; font-weight: 600; color: var(--fg); flex: 1; }
.adi-desc { font-size: 13px; color: var(--fg3); margin-bottom: 8px; }
.adi-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adi-meta span { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--fg4); }
.adi-meta span svg { width: 12px; height: 12px; }

.mitre-tag {
  font-size: 10px;
  font-family: 'Fira Mono', monospace;
  background: rgba(69,133,136,0.15);
  color: var(--blue-bright);
  border: 1px solid rgba(69,133,136,0.3);
  padding: 1px 6px;
  border-radius: 3px;
}

/* Evidence */
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}

.evidence-card {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ev-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg2);
  border-bottom: 1px solid var(--bg3);
}

.ev-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.ev-type-badge svg { width: 11px; height: 11px; }
.ev-log { background: rgba(215,153,33,0.15); color: var(--yellow-bright); }
.ev-artifact { background: rgba(204,36,29,0.15); color: var(--red-bright); }
.ev-network { background: rgba(69,133,136,0.15); color: var(--blue-bright); }
.ev-credential { background: rgba(177,98,134,0.15); color: var(--purple-bright); }
.ev-database { background: rgba(106,142,106,0.15); color: var(--aqua-bright); }
.ev-data { background: rgba(152,151,26,0.15); color: var(--green-bright); }

.ev-stage { font-size: 11px; color: var(--fg4); }
.ev-artifact-name { margin-left: auto; font-size: 11px; color: var(--fg4); display: flex; align-items: center; gap: 4px; }
.ev-artifact-name svg { width: 11px; height: 11px; }

.ev-title { font-size: 13px; font-weight: 600; color: var(--fg); padding: 10px 14px 4px; }

.ev-content {
  font-family: 'Fira Mono', monospace;
  font-size: 11px;
  color: var(--green-bright);
  background: var(--bg);
  padding: 12px 14px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
  margin: 0 14px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--bg3);
}

/* Report view */
.report-view {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 800px;
}

.rv-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.rv-header h2 { font-size: 18px; font-weight: 700; color: var(--fg); flex: 1; }

.rv-section { margin-bottom: 20px; }
.rv-section h3 { font-size: 14px; font-weight: 700; color: var(--yellow-bright); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.rv-section p { font-size: 13px; color: var(--fg3); line-height: 1.7; }

.rv-risk-badge {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 20px;
  padding: 8px 16px;
  background: rgba(204,36,29,0.1);
  border: 1px solid rgba(204,36,29,0.3);
  border-radius: var(--radius);
}

.rv-findings, .rv-actions {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rv-findings li, .rv-actions li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--fg3);
  padding: 8px 12px;
  background: var(--bg2);
  border-radius: var(--radius);
}

.rv-findings li svg { color: var(--yellow); flex-shrink: 0; width: 14px; height: 14px; margin-top: 1px; }
.rv-actions li svg { color: var(--green-bright); flex-shrink: 0; width: 14px; height: 14px; margin-top: 1px; }
.rv-footer { display: flex; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bg3); }

/* Reports list */
.reports-list { display: flex; flex-direction: column; gap: 8px; }

.report-item {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  transition: border-color var(--transition);
}

.report-item:hover { border-color: var(--blue); }

.report-type-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fg3);
}

.report-type-icon svg { width: 18px; height: 18px; }
.report-executive { background: rgba(215,153,33,0.15); color: var(--yellow-bright); }
.report-technical { background: rgba(69,133,136,0.15); color: var(--blue-bright); }

.report-body { flex: 1; }
.report-body h3 { font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 4px; }
.report-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.report-meta span { font-size: 12px; color: var(--fg4); }
.report-actions { display: flex; gap: 6px; }

/* ============================================================
   AI PAGE
   ============================================================ */

.ai-demo-banner, .ai-live-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.ai-demo-banner {
  background: rgba(215,153,33,0.08);
  border: 1px solid rgba(215,153,33,0.2);
}

.ai-live-banner {
  background: rgba(152,151,26,0.08);
  border: 1px solid rgba(152,151,26,0.2);
}

.adb-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-demo-banner .adb-icon { background: rgba(215,153,33,0.2); color: var(--yellow-bright); }
.ai-live-banner .adb-icon { background: rgba(152,151,26,0.2); color: var(--green-bright); }
.adb-icon svg { width: 18px; height: 18px; }

.adb-text { flex: 1; }
.adb-text strong { display: block; font-size: 13px; color: var(--fg); }
.adb-text span { font-size: 12px; color: var(--fg4); }

.ai-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  height: calc(100vh - var(--topnav-h) - 180px);
  min-height: 500px;
}

.ai-chat-panel {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg3);
  background: var(--bg2);
}

.aina-avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}

.aina-avatar svg { width: 18px; height: 18px; }
.aina-info { flex: 1; }
.aina-info strong { display: block; font-size: 13px; color: var(--fg); }
.aina-info span { font-size: 11px; color: var(--fg4); }

.ai-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aina-welcome {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.aw-avatar {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}

.aw-avatar svg { width: 16px; height: 16px; }
.aw-text { flex: 1; background: var(--bg2); border-radius: var(--radius); padding: 12px 14px; }
.aw-text p { font-size: 13px; color: var(--fg3); margin-bottom: 6px; }
.aw-text p:last-child { margin-bottom: 0; }

.suggested-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.sp-btn {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  color: var(--fg3);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--transition);
}

.sp-btn:hover { background: var(--bg3); color: var(--fg); border-color: var(--blue); }

.chat-msg { display: flex; gap: 10px; align-items: flex-start; }

.chat-msg-user { flex-direction: row-reverse; }

.cm-avatar {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.cm-avatar svg { width: 14px; height: 14px; }
.cm-user-avi { background: var(--bg4); }

.cm-content {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--fg3);
  line-height: 1.6;
  max-width: 85%;
}

.chat-msg-user .cm-content {
  background: rgba(69,133,136,0.1);
  border-color: rgba(69,133,136,0.3);
  color: var(--fg);
}

.cm-content-wrap { display: flex; flex-direction: column; gap: 4px; }
.cm-model { font-size: 10px; color: var(--fg4); }

.cm-content h3, .cm-content h4 { color: var(--yellow-bright); margin: 8px 0 4px; font-size: 13px; }
.cm-content code { background: var(--bg); padding: 1px 5px; border-radius: 3px; font-family: 'Fira Mono', monospace; font-size: 11px; }
.cm-content hr { border: none; border-top: 1px solid var(--bg3); margin: 8px 0; }
.cm-content strong { color: var(--fg); }
.cm-content em { color: var(--fg4); }
.md-li, .md-li-num { padding: 2px 0 2px 12px; position: relative; }
.md-li::before { content: '•'; position: absolute; left: 0; color: var(--blue-bright); }
.md-li-num::before { content: '→'; position: absolute; left: 0; color: var(--yellow-bright); font-size: 10px; }

.thinking-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.thinking-dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--fg4);
  border-radius: 50%;
  animation: think 1.4s infinite ease-in-out both;
}

.thinking-dots span:nth-child(1) { animation-delay: -0.32s; }
.thinking-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes think {
  0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.chat-context-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg);
  border-top: 1px solid var(--bg3);
  font-size: 12px;
  color: var(--fg4);
}

.ai-chat-input-area {
  border-top: 1px solid var(--bg3);
  background: var(--bg1);
  flex-shrink: 0;
}

.chat-input-wrap {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  align-items: flex-end;
}

.chat-textarea {
  flex: 1;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 9px 12px;
  color: var(--fg);
  font-size: 13px;
  resize: none;
  outline: none;
  line-height: 1.5;
  max-height: 120px;
  overflow-y: auto;
  transition: border-color var(--transition);
}

.chat-textarea:focus { border-color: var(--blue); }
.chat-textarea::placeholder { color: var(--fg4); }

.chat-send-btn {
  background: var(--blue);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  transition: background var(--transition);
  flex-shrink: 0;
}

.chat-send-btn:hover { background: var(--blue-bright); }
.chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-send-btn svg { width: 16px; height: 16px; }

.ai-side-panel { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }

.ai-mode-list { display: flex; flex-direction: column; gap: 2px; padding: 8px; }

.ai-mode-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg3);
  transition: all var(--transition);
  text-align: left;
  width: 100%;
}

.ai-mode-item:hover { background: var(--bg2); color: var(--fg); }
.ai-mode-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--fg4); }
.ai-mode-item div strong { display: block; font-size: 13px; }
.ai-mode-item div span { display: block; font-size: 11px; color: var(--fg4); }

.ai-sim-list { display: flex; flex-direction: column; }

.ai-sim-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bg3);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  cursor: pointer;
  color: var(--fg3);
  transition: background var(--transition);
  text-align: left;
  width: 100%;
}

.ai-sim-item:last-child { border-bottom: none; }
.ai-sim-item:hover { background: var(--bg2); }

.asi-score { font-size: 18px; font-weight: 800; min-width: 32px; flex-shrink: 0; }
.asi-info { flex: 1; min-width: 0; }
.asi-name { display: block; font-size: 12px; font-weight: 500; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asi-meta { display: block; font-size: 10px; color: var(--fg4); }

/* ============================================================
   PROFILE PAGE
   ============================================================ */

.profile-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: start;
}

.profile-col-main { display: flex; flex-direction: column; gap: 20px; }
.profile-col-side { display: flex; flex-direction: column; gap: 16px; }

.profile-avatar-edit { margin-bottom: 20px; }
.pae-current { margin-bottom: 10px; }
.profile-avi-lg { font-size: 48px; display: block; }
.pae-label { margin-bottom: 10px; }
.pae-label strong { display: block; font-size: 13px; color: var(--fg); }
.pae-label span { font-size: 12px; color: var(--fg4); }

.avatar-grid { display: flex; flex-wrap: wrap; gap: 8px; }

.avatar-opt {
  width: 40px;
  height: 40px;
  background: var(--bg2);
  border: 2px solid var(--bg3);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all var(--transition);
}

.avatar-opt:hover { border-color: var(--blue); background: var(--bg3); }
.avatar-opt.selected { border-color: var(--yellow); background: rgba(215,153,33,0.1); }

.profile-summary-avi { font-size: 56px; margin-bottom: 8px; }
.profile-summary-name { font-size: 16px; font-weight: 700; color: var(--fg); margin-bottom: 2px; }
.profile-summary-email { font-size: 12px; color: var(--fg4); margin-bottom: 8px; }
.profile-summary-meta { margin-top: 8px; }
.profile-summary-meta span { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg4); justify-content: center; }
.profile-summary-meta span svg { width: 12px; height: 12px; }

.tfa-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--bg3); }
.tfa-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tfa-header h4 { font-size: 14px; font-weight: 600; color: var(--fg); }

/* ============================================================
   ADMIN PAGE
   ============================================================ */

.admin-data-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

.admin-data-actions { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; }

.admin-data-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--fg4);
}

.admin-data-note svg { width: 14px; height: 14px; color: var(--blue-bright); flex-shrink: 0; margin-top: 1px; }

.user-cell { display: flex; align-items: center; gap: 8px; }
.user-cell-avi { font-size: 16px; }

.status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.status-active { background: rgba(152,151,26,0.15); color: var(--green-bright); }
.status-inactive { background: var(--bg3); color: var(--fg4); }

/* ============================================================
   NOTIFICATIONS DRAWER
   ============================================================ */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 250;
  display: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.drawer-overlay.open { display: block; opacity: 1; }

.notif-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 400px;
  height: 100vh;
  background: var(--bg1);
  border-left: 1px solid var(--bg3);
  z-index: 300;
  transition: right 0.25s ease;
  display: flex;
  flex-direction: column;
}

.notif-drawer.open { right: 0; }

.notif-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--bg3);
  flex-shrink: 0;
}

.notif-drawer-head h3 { font-size: 15px; font-weight: 700; color: var(--fg); }

.notif-drawer-actions { display: flex; align-items: center; gap: 8px; }

.notif-tabs {
  display: flex;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--bg3);
  flex-shrink: 0;
}

.notif-tab {
  background: none;
  border: none;
  color: var(--fg4);
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition);
}

.notif-tab:hover { color: var(--fg); }
.notif-tab.active { color: var(--yellow-bright); border-bottom-color: var(--yellow-bright); }

.notif-list {
  flex: 1;
  overflow-y: auto;
}

.notif-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px;
  color: var(--fg4);
  font-size: 13px;
}

.notif-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bg3);
  cursor: pointer;
  transition: background var(--transition);
  position: relative;
}

.notif-item:hover { background: var(--bg2); }
.notif-item.unread { background: rgba(215,153,33,0.04); }
.notif-item.unread::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--yellow); }

.notif-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-icon svg { width: 15px; height: 15px; }
.ni-alert { background: rgba(204,36,29,0.15); color: var(--red-bright); }
.ni-simulation_complete { background: rgba(152,151,26,0.15); color: var(--green-bright); }
.ni-report_ready { background: rgba(69,133,136,0.15); color: var(--blue-bright); }
.ni-system { background: var(--bg3); color: var(--fg4); }
.ni-ai_ready { background: rgba(177,98,134,0.15); color: var(--purple-bright); }
.ni-control_weakness { background: rgba(215,153,33,0.15); color: var(--yellow-bright); }
.ni-user_login { background: var(--bg3); color: var(--fg4); }
.ni-tenant_activity { background: rgba(106,142,106,0.15); color: var(--aqua-bright); }

.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: 13px; font-weight: 600; color: var(--fg); margin-bottom: 2px; }
.notif-msg { font-size: 12px; color: var(--fg4); line-height: 1.4; margin-bottom: 4px; }
.notif-time { font-size: 11px; color: var(--fg4); }
.notif-unread-dot { width: 7px; height: 7px; background: var(--yellow); border-radius: 50%; flex-shrink: 0; margin-top: 6px; }

/* ============================================================
   AUTH PAGES
   ============================================================ */

.auth-body {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-page {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.auth-brand { text-align: center; }

.auth-logo {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--red), var(--orange));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  margin: 0 auto 10px;
}

.auth-logo svg { width: 28px; height: 28px; }

.auth-brand-name {
  font-size: 26px;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -0.5px;
}

.auth-brand-tagline { font-size: 13px; color: var(--fg4); margin-top: 3px; }

.auth-card {
  width: 100%;
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.auth-card-header { margin-bottom: 20px; }
.auth-card-header h2 { font-size: 18px; font-weight: 700; color: var(--fg); }
.auth-card-header p { font-size: 13px; color: var(--fg4); margin-top: 3px; }

.auth-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(204,36,29,0.1);
  border: 1px solid rgba(204,36,29,0.3);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--red-bright);
  font-size: 13px;
  margin-bottom: 16px;
}

.auth-alert svg { width: 15px; height: 15px; flex-shrink: 0; }

.auth-form { display: flex; flex-direction: column; gap: 0; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  color: var(--fg4);
  font-size: 12px;
}

.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bg3);
}

.btn-quick-login {
  width: 100%;
  background: rgba(215,153,33,0.1);
  border: 1px solid rgba(215,153,33,0.3);
  color: var(--yellow-bright);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition);
}

.btn-quick-login:hover { background: rgba(215,153,33,0.15); border-color: var(--yellow); }
.btn-quick-login svg { width: 15px; height: 15px; }

.ql-hint { font-size: 11px; color: var(--yellow-bright); opacity: 0.7; margin-left: 4px; }

.auth-demo-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.adi-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 10px 14px;
}

.adi-item svg { width: 16px; height: 16px; color: var(--blue-bright); flex-shrink: 0; margin-top: 2px; }
.adi-item strong { display: block; font-size: 12px; color: var(--fg); }
.adi-item span { font-size: 11px; color: var(--fg4); }

.auth-footer { font-size: 11px; color: var(--fg4); text-align: center; }

/* ============================================================
   DETAIL PAGES (SCENARIO SHOW, ETC.)
   ============================================================ */

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: start;
}

.detail-col-main { display: flex; flex-direction: column; gap: 20px; }
.detail-col-side { display: flex; flex-direction: column; gap: 16px; }

/* Attack chain — legacy rule neutralised; see run-chain-row / rch-chain */
.attack-chain { display: flex; flex-direction: row; gap: 0; }

.chain-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  position: relative;
}

.chain-step-num {
  width: 28px;
  height: 28px;
  background: var(--blue);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  z-index: 1;
}

.chain-step-body { flex: 1; padding-bottom: 20px; }
.chain-stage { font-size: 11px; font-weight: 700; color: var(--yellow-bright); text-transform: uppercase; letter-spacing: 0.5px; }
.chain-technique { font-size: 14px; font-weight: 600; color: var(--fg); margin: 2px 0; }

.chain-arrow {
  position: absolute;
  left: 13px;
  top: 28px;
  color: var(--bg4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chain-arrow svg { width: 14px; height: 14px; }

.impact-text { font-size: 14px; color: var(--fg3); line-height: 1.6; margin-bottom: 12px; }
.target-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.target-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--bg3); color: var(--fg3); font-size: 12px; padding: 4px 10px; border-radius: var(--radius); }
.target-tag svg { width: 12px; height: 12px; }

.control-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.control-tag { display: inline-flex; align-items: center; gap: 5px; background: rgba(152,151,26,0.12); border: 1px solid rgba(152,151,26,0.25); color: var(--green-bright); font-size: 12px; padding: 3px 10px; border-radius: var(--radius); }
.control-tag svg { width: 11px; height: 11px; }

.card-footer-action { margin-top: 12px; border-top: 1px solid var(--bg3); padding-top: 10px; }

/* ============================================================
   MODALS
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.open { display: flex; }

.modal {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
  max-height: 85vh;
  overflow-y: auto;
}

.modal-lg { max-width: 600px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bg3);
}

.modal-header h3 { font-size: 15px; font-weight: 700; color: var(--fg); }

.modal-body { padding: 20px; }

.modal-actions { display: flex; gap: 10px; margin-top: 20px; }

/* ============================================================
   ALERT BANNERS
   ============================================================ */

.alert-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
}

.alert-banner svg { width: 16px; height: 16px; flex-shrink: 0; }

.alert-banner-success {
  background: rgba(152,151,26,0.12);
  border: 1px solid rgba(152,151,26,0.3);
  color: var(--green-bright);
}

.alert-banner-error {
  background: rgba(204,36,29,0.12);
  border: 1px solid rgba(204,36,29,0.3);
  color: var(--red-bright);
}

/* ============================================================
   ERROR PAGE
   ============================================================ */

.error-page {
  text-align: center;
  max-width: 400px;
}

.error-code {
  font-size: 80px;
  font-weight: 900;
  color: var(--red);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -3px;
}

.error-page h1 { font-size: 22px; font-weight: 700; color: var(--fg); margin-bottom: 8px; }
.error-page p { font-size: 14px; color: var(--fg4); margin-bottom: 20px; }

/* ============================================================
   ANIMATIONS
   ============================================================ */

.spin {
  animation: spin 1s linear infinite;
}

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

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .dash-col-side { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 200px; }
  .run-layout { grid-template-columns: 1fr; }
  .attack-plan-layout { grid-template-columns: 1fr; height: auto; }
  .ap-library { max-height: 300px; }
  .detail-grid, .profile-layout { grid-template-columns: 1fr; }
  .ai-layout { grid-template-columns: 1fr; height: auto; }
  .ai-side-panel { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .sidebar { position: fixed; transform: translateX(-100%); z-index: 200; }
  .sidebar.mobile-open { transform: translateX(0); }
  .main-area { margin-left: 0; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .topnav-pill { display: none; }
  .search-wrap { max-width: 200px; }
}

/* ============================================================
   DETAIL GRID RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  .controls-grid { grid-template-columns: 1fr; }
  .ap-config-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ZELBREACH RUN PAGE — MISSION CONTROL DASHBOARD
   Premium dark-theme UI for breach simulation
   ============================================================ */

/* ---------- Mission Strip ---------- */
.mission-strip {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--bg1);
  border-bottom: 1px solid var(--bg4);
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.ms-inner {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 1.5rem;
  height: 44px;
  overflow-x: auto;
}
.ms-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 0;
  flex-shrink: 0;
}
.ms-brand-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fg4);
  flex-shrink: 0;
}
.ms-brand-dot.ms-dot-running {
  background: var(--yellow-bright);
  box-shadow: 0 0 6px var(--yellow-bright);
  animation: msDotPulse 1s infinite;
}
.ms-brand-dot.ms-dot-complete {
  background: var(--green-bright);
  box-shadow: 0 0 6px var(--green-bright);
}
@keyframes msDotPulse {
  0%,100% { opacity:1; }
  50% { opacity:0.3; }
}
.ms-brand-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--fg3);
  text-transform: uppercase;
  white-space: nowrap;
}
.ms-divider {
  width: 1px;
  height: 20px;
  background: var(--bg4);
  margin: 0 12px;
  flex-shrink: 0;
}
.ms-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}
.ms-stat-label {
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg4);
  line-height: 1;
}
.ms-stat-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg1);
  line-height: 1.2;
}
.ms-mono { font-family: 'Fira Mono', monospace; font-size: 12px; }
.ms-stage { color: var(--yellow-bright); letter-spacing: 0.04em; font-size: 11px; }
.ms-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--bg3);
  border: 1px solid var(--bg4);
}
.ms-pill-ok     { background: rgba(152,151,26,0.2);  border-color: var(--green); color: var(--green-bright); }
.ms-pill-warn   { background: rgba(215,153,33,0.2);  border-color: var(--yellow); color: var(--yellow-bright); }
.ms-pill-danger { background: rgba(204,36,29,0.2);   border-color: var(--red); color: var(--red-bright); }
.ms-detect-pill, .ms-contain-pill, .ms-risk-pill { min-width: 52px; text-align: center; }
.ms-spacer { flex: 1; min-width: 8px; }
.ms-status-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.ms-ready-glow   { color: var(--green-bright); text-shadow: 0 0 8px rgba(184,187,38,0.4); }
.ms-running-label{ color: var(--yellow-bright); animation: msRunBlink 1.4s infinite; }
.ms-complete-label { color: var(--aqua-bright); }
@keyframes msRunBlink { 0%,100%{opacity:1} 50%{opacity:0.5} }
.ms-progress-bar {
  height: 2px;
  background: var(--bg3);
}
.ms-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--yellow), var(--red-bright));
  transition: width 0.5s ease;
  box-shadow: 0 0 6px var(--yellow);
}
/* env risk pills reuse */
.env-risk-critical { background: rgba(204,36,29,0.25); border-color: var(--red); color: var(--red-bright); }
.env-risk-high     { background: rgba(215,153,33,0.25); border-color: var(--yellow); color: var(--yellow-bright); }
.env-risk-medium   { background: rgba(69,133,136,0.25); border-color: var(--blue); color: var(--blue-bright); }

/* ---------- Run Mission Control Layout ---------- */
/* ── Old 3-col (kept for reference, no longer used) ── */
.run-mc-layout  { display: none; }
.rmc-left       { display: none; }
.rmc-center     { display: none; }
.rmc-right      { display: none; }

/* ────────────────────────────────────────────────────────────
   ROW 3 — 2-column: Config (fixed-width) | Analysis (flex)
   ──────────────────────────────────────────────────────────── */
.run-two-col {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 0.75rem;
  padding: 0.75rem 0.75rem 0;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

/* Left: config panel — sticky within the two-col row */
.rtc-left {
  position: sticky;
  top: calc(var(--topnav-h) + 44px + 0.75rem);
  max-height: calc(100vh - var(--topnav-h) - 44px - 1.5rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--bg4) transparent;
}

/* Right: analysis (blue team / ATT&CK) */
.rtc-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Inside the right column, blue team + asset + evidence stack vertically */
#activeRunRight,
#preRunRight {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ────────────────────────────────────────────────────────────
   ROW 4+ — Full-width operational bottom area
   ──────────────────────────────────────────────────────────── */
.run-bottom {
  padding: 0.75rem 0.75rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
}

.run-bottom-section {
  width: 100%;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .run-two-col { grid-template-columns: 260px 1fr; }
}
@media (max-width: 860px) {
  .run-two-col { grid-template-columns: 1fr; }
  .rtc-left    { position: static; max-height: none; }
}

/* ---------- Config Panel ---------- */
.config-panel {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Stickiness is handled by the .rtc-left wrapper */
}
.config-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--bg3);
  position: sticky;
  top: 0;
  background: var(--bg1);
  z-index: 10;
}
.config-panel-header h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--fg);
  margin: 0;
}
.config-panel-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg4);
  background: var(--bg3); padding: 3px 8px; border-radius: 4px;
}
.cfg-section {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--bg3);
}
.cfg-section:last-child { border-bottom: none; }
.cfg-section-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg3);
  margin-bottom: 0.6rem;
}
.cfg-select {
  background: var(--bg2);
  border: 1px solid var(--bg4);
  color: var(--fg);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  width: 100%;
  font-size: 13px;
}
.cfg-select:focus { border-color: var(--yellow); outline: none; }

/* Scenario Preview Card */
.scenario-preview-card {
  margin-top: 0.75rem;
  background: var(--bg2);
  border: 1px solid var(--bg4);
  border-radius: var(--radius);
  padding: 0.75rem;
  animation: fadeIn 0.25s ease;
}
@keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
.spc-type {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--yellow-bright);
  margin-bottom: 4px;
}
.spc-desc { font-size: 11.5px; color: var(--fg2); margin-bottom: 0.5rem; line-height: 1.5; }
.spc-meta { display: flex; gap: 1rem; margin-bottom: 0.5rem; }
.spc-meta-item {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--fg3);
}
.spc-meta-item svg { width: 12px; height: 12px; }
.spc-tactics { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 0.5rem; }
.spc-tactic-badge {
  font-size: 9.5px; padding: 2px 6px; border-radius: 4px;
  background: rgba(69,133,136,0.2); border: 1px solid var(--blue);
  color: var(--blue-bright);
}
.spc-radar-wrap { margin-top: 0.5rem; }

/* Environment Grid */
.env-grid-premium {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}
.env-card {
  background: var(--bg2);
  border: 1px solid var(--bg4);
  border-radius: var(--radius);
  padding: 0.5rem;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.env-card:hover { border-color: var(--blue); background: var(--bg3); }
.env-card.selected { border-color: var(--yellow); background: rgba(215,153,33,0.08); }
.env-card-icon {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--bg3); display: flex; align-items: center; justify-content: center;
  color: var(--fg2);
}
.env-card-icon svg { width: 14px; height: 14px; }
.env-card-body { display: flex; flex-direction: column; gap: 1px; }
.env-card-label { font-size: 11px; font-weight: 600; color: var(--fg1); }
.env-card-assets { font-size: 9.5px; color: var(--fg4); }
.env-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.env-risk-badge {
  font-size: 8.5px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.env-risk-critical { background:rgba(204,36,29,0.2); color:var(--red-bright); border:1px solid var(--red); }
.env-risk-high     { background:rgba(215,153,33,0.2); color:var(--yellow-bright); border:1px solid var(--yellow); }
.env-risk-medium   { background:rgba(69,133,136,0.2); color:var(--blue-bright); border:1px solid var(--blue); }
.env-surface-score {
  font-size: 10px; font-weight: 700; font-family: 'Fira Mono';
  color: var(--fg3);
}

/* Stealth Cards */
.stealth-grid { display: flex; flex-direction: column; gap: 6px; }
.stealth-card {
  background: var(--bg2);
  border: 1px solid var(--bg4);
  border-radius: var(--radius);
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: all var(--transition);
}
.stealth-card:hover { border-color: var(--blue); background: var(--bg3); }
.stealth-card.selected { border-color: var(--yellow); background: rgba(215,153,33,0.06); }
.stealth-card-top {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 5px;
}
.stealth-card-top svg { width: 14px; height: 14px; color: var(--fg2); }
.stealth-card-top strong { font-size: 12px; color: var(--fg); flex: 1; }
.stealth-badge {
  font-size: 9px; font-weight: 700; padding: 2px 6px;
  border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em;
}
.stealth-stealthy { background:rgba(152,151,26,0.2);  color:var(--green-bright); border:1px solid var(--green); }
.stealth-balanced { background:rgba(69,133,136,0.2);  color:var(--blue-bright);  border:1px solid var(--blue); }
.stealth-loud     { background:rgba(204,36,29,0.2);   color:var(--red-bright);   border:1px solid var(--red); }
.stealth-card-desc {
  font-size: 10.5px; color: var(--fg3); line-height: 1.45;
  margin: 0 0 6px;
}
.stealth-noise-bar-wrap { }
.stealth-noise-label { font-size: 9px; color: var(--fg4); margin-bottom: 3px; }
.stealth-noise-track {
  height: 3px; background: var(--bg4); border-radius: 2px; overflow: hidden;
}
.stealth-noise-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--green), var(--yellow), var(--red));
  transition: width 0.3s ease;
}

/* Objective Pills */
.objective-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.obj-pill {
  padding: 5px 10px;
  border-radius: 16px;
  border: 1px solid var(--bg4);
  background: var(--bg2);
  font-size: 11px;
  color: var(--fg2);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.obj-pill:hover { border-color: var(--blue); color: var(--blue-bright); }
.obj-pill.selected { border-color: var(--yellow); background: rgba(215,153,33,0.1); color: var(--yellow-bright); font-weight: 600; }

/* Depth Selector */
.depth-selector { display: flex; gap: 5px; }
.depth-card {
  flex: 1;
  background: var(--bg2);
  border: 1px solid var(--bg4);
  border-radius: var(--radius);
  padding: 0.6rem 0.5rem;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.depth-card:hover { border-color: var(--blue); }
.depth-card.selected { border-color: var(--yellow); background: rgba(215,153,33,0.08); }
.depth-card svg { width: 14px; height: 14px; color: var(--fg2); }
.depth-card strong { font-size: 11px; color: var(--fg); }
.depth-card span { font-size: 9.5px; color: var(--fg4); }

/* Realism Controls */
.cfg-collapsible-toggle {
  display: flex; align-items: center; gap: 8px;
  width: 100%; background: var(--bg2); border: 1px solid var(--bg4);
  border-radius: var(--radius); padding: 0.5rem 0.75rem;
  font-size: 12px; font-weight: 600; color: var(--fg2);
  cursor: pointer; transition: all var(--transition);
}
.cfg-collapsible-toggle:hover { border-color: var(--blue); color: var(--fg); }
.cfg-collapsible-toggle svg { width: 14px; height: 14px; }
.cfg-caret { margin-left: auto; transition: transform 0.2s; }
.cfg-collapsible-body { padding-top: 0.75rem; }
.realism-slider-wrap { margin-bottom: 0.625rem; }
.realism-slider-header {
  display: flex; justify-content: space-between;
  font-size: 11px; margin-bottom: 4px;
}
.realism-slider-header label { color: var(--fg2); }
.realism-slider-val { font-family: 'Fira Mono'; font-size: 11px; color: var(--yellow-bright); font-weight: 600; }
.realism-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--yellow-bright) var(--val, 70%), var(--bg4) var(--val, 70%));
  border-radius: 2px; outline: none; cursor: pointer;
}
.realism-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%; background: var(--yellow-bright);
  border: 2px solid var(--bg1); cursor: pointer;
  box-shadow: 0 0 4px rgba(215,153,33,0.5);
}
.realism-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--yellow-bright); border: 2px solid var(--bg1);
  cursor: pointer;
}

/* Pre-Run Estimates */
.pre-run-estimates {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
}
.pre-est-item {
  background: var(--bg2); border: 1px solid var(--bg4);
  border-radius: var(--radius); padding: 0.5rem 0.25rem;
  text-align: center;
}
.pei-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg4); margin-bottom: 4px; }
.pei-value { font-size: 15px; font-weight: 700; font-family: 'Fira Mono'; }

/* Launch Button */
.config-launch-top {
  padding: 0.875rem 1rem 0;
}
.config-launch-top .btn-abort {
  margin-top: 0.5rem;
}

.btn-launch-primary {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 0.875rem;
  background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 100%);
  color: var(--bg);
  font-size: 14px; font-weight: 700; letter-spacing: 0.03em;
  border: none; border-radius: var(--radius);
  cursor: pointer; overflow: hidden;
  transition: all 0.2s;
  box-shadow: 0 4px 20px rgba(215,153,33,0.35);
}
.btn-launch-primary:hover {
  box-shadow: 0 6px 28px rgba(215,153,33,0.55);
  transform: translateY(-1px);
}
.btn-launch-primary:active { transform: translateY(0); }
.btn-launch-glow {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  animation: launchGlowSweep 2.5s ease-in-out infinite;
}
@keyframes launchGlowSweep {
  0%   { transform: translateX(-100%); }
  50%,100% { transform: translateX(100%); }
}
.btn-launch-primary svg { width: 16px; height: 16px; }

.btn-abort {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 0.625rem;
  background: rgba(204,36,29,0.15); color: var(--red-bright);
  border: 1px solid var(--red); border-radius: var(--radius);
  font-size: 12px; font-weight: 600; cursor: pointer;
  margin-top: 0.5rem; transition: all var(--transition);
}
.btn-abort:hover { background: rgba(204,36,29,0.25); }

/* ---------- Attack Chain — Full-Width Row ---------- */
.run-chain-row {
  width: 100%;
  background: var(--bg1);
  border-top: 1px solid var(--bg3);
  border-bottom: 1px solid var(--bg4);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  position: relative;
  z-index: 10;
}
.run-chain-inner {
  width: 100%;
}

/* Header bar */
.rch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--bg3);
  background: var(--bg2);
  gap: 1rem;
}
.rch-title {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 12px; font-weight: 600; color: var(--fg2);
  flex-shrink: 0;
}
.rch-title svg { width: 13px; height: 13px; }
.rch-sub {
  font-size: 11px; font-weight: 400; color: var(--yellow-bright);
  font-family: 'Fira Mono'; margin-left: 4px;
}
.rch-legend {
  display: flex; gap: 0.75rem; align-items: center; flex-shrink: 0;
}
.rchl {
  font-size: 10px; font-weight: 600; padding: 2px 7px;
  border-radius: 10px; text-transform: uppercase; letter-spacing: 0.03em;
}
.rchl.pending  { background: var(--bg4);         color: var(--fg4); }
.rchl.active   { background: rgba(250,189,47,.2); color: var(--yellow-bright); border: 1px solid var(--yellow); }
.rchl.success  { background: rgba(251,73,52,.15); color: var(--red-bright);    border: 1px solid var(--red); }
.rchl.blocked  { background: rgba(184,187,38,.15);color: var(--green-bright);  border: 1px solid var(--green); }
.rchl.detected { background: rgba(131,165,152,.15);color: var(--blue-bright); border: 1px solid var(--blue); }

/* Scroll container: single horizontal row, no wrapping */
.rch-scroll-wrap {
  overflow-x: auto;
  overflow-y: visible;
  padding: 0.875rem 1rem 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--bg4) transparent;
}
.rch-scroll-wrap::-webkit-scrollbar { height: 4px; }
.rch-scroll-wrap::-webkit-scrollbar-track { background: transparent; }
.rch-scroll-wrap::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 2px; }

/* The chain itself: single flex row, never wraps */
.rch-chain {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  min-width: max-content; /* guarantees one row */
}

/* Stage card */
.rch-stage {
  width: 104px;
  flex-shrink: 0;
  background: var(--bg2);
  border: 1px solid var(--bg4);
  border-radius: var(--radius);
  padding: 0.55rem 0.6rem 0.45rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s;
  user-select: none;
  text-align: center;
}
.rch-stage:hover { border-color: var(--fg3); background: var(--bg3); }

.rch-stage-num {
  position: absolute;
  top: 4px; left: 5px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--bg4);
  font-size: 8px; font-weight: 700;
  color: var(--fg4);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.rch-stage-icon {
  margin: 0.1rem auto 0.3rem;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, box-shadow 0.2s;
}
.rch-stage-icon svg { width: 12px; height: 12px; color: var(--fg3); transition: color 0.2s; }
.rch-stage-name {
  font-size: 10px; font-weight: 700;
  color: var(--fg1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.rch-stage-tid {
  font-size: 8.5px; color: var(--blue-bright);
  font-family: 'Fira Mono'; margin-bottom: 3px;
}
.rch-stage-status {
  font-size: 8px; font-weight: 700;
  text-transform: uppercase;
  padding: 1px 5px; border-radius: 3px;
  background: var(--bg4); color: var(--fg4);
  display: inline-block; margin-bottom: 3px;
  transition: background 0.2s, color 0.2s;
}
.rch-stage-meta {
  display: flex; justify-content: space-between;
  font-size: 8px; color: var(--fg4);
  font-family: 'Fira Mono';
  margin-bottom: 1px;
}
.rch-stage-asset {
  font-size: 8px; color: var(--fg4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Active ring sweep ── */
.acs-active-ring {
  position: absolute; inset: -1px;
  border-radius: var(--radius);
  pointer-events: none;
}
.rch-stage.active .acs-active-ring {
  background: linear-gradient(
    135deg,
    transparent 0%, rgba(250,189,47,.18) 40%,
    rgba(250,189,47,.38) 50%, rgba(250,189,47,.18) 60%,
    transparent 100%
  );
  background-size: 200% 200%;
  animation: ringSweep 1.4s linear infinite;
}

/* ── Stage states ── */
.rch-stage.active {
  border-color: var(--yellow-bright);
  box-shadow: 0 0 0 1px var(--yellow), 0 0 18px rgba(250,189,47,.4), 0 0 36px rgba(250,189,47,.12);
  background: rgba(215,153,33,.09);
  animation: stageFire 1.1s ease-in-out infinite;
  transform: translateY(-3px);
  z-index: 2;
}
.rch-stage.active .rch-stage-status {
  background: var(--yellow); color: var(--bg);
  animation: badgePulse 0.8s ease-in-out infinite;
}
.rch-stage.active .rch-stage-num   { background: var(--yellow); color: var(--bg); }
.rch-stage.active .rch-stage-icon  { background: rgba(215,153,33,.25); box-shadow: 0 0 8px rgba(250,189,47,.4); }
.rch-stage.active .rch-stage-icon svg { color: var(--yellow-bright); }

.rch-stage.success {
  border-color: var(--red-bright);
  background: rgba(204,36,29,.1);
  animation: stageSuccess 0.6s ease-out forwards;
}
.rch-stage.success .rch-stage-status { background: var(--red-bright); color: var(--fg); font-weight: 800; }
.rch-stage.success .rch-stage-num    { background: var(--red); color: var(--fg); }
.rch-stage.success .rch-stage-icon   { background: rgba(204,36,29,.2); }
.rch-stage.success .rch-stage-icon svg { color: var(--red-bright); }

.rch-stage.blocked {
  border-color: var(--green-bright);
  background: rgba(152,151,26,.1);
  animation: stageBlocked 0.5s ease-out forwards;
}
.rch-stage.blocked .rch-stage-status { background: var(--green-bright); color: var(--bg); }
.rch-stage.blocked .rch-stage-num    { background: var(--green); color: var(--bg); }
.rch-stage.blocked .rch-stage-icon   { background: rgba(152,151,26,.2); }
.rch-stage.blocked .rch-stage-icon svg { color: var(--green-bright); }

.rch-stage.detected {
  border-color: var(--blue-bright);
  background: rgba(69,133,136,.1);
  animation: stageDetected 0.6s ease-out forwards;
}
.rch-stage.detected .rch-stage-status { background: var(--blue-bright); color: var(--bg); }
.rch-stage.detected .rch-stage-num    { background: var(--blue); color: var(--fg); }
.rch-stage.detected .rch-stage-icon   { background: rgba(69,133,136,.2); }
.rch-stage.detected .rch-stage-icon svg { color: var(--blue-bright); }

/* ── Connector arrows ── */
.rch-arrow {
  flex-shrink: 0;
  width: 32px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--bg4);
  transition: color 0.25s, filter 0.25s;
}
.rch-arrow svg { width: 32px; height: 16px; }
.rch-arrow.active {
  color: var(--yellow-bright);
  filter: drop-shadow(0 0 4px rgba(250,189,47,.7));
}
.rch-arrow.active svg path {
  stroke-dasharray: 6 4;
  animation: dashFlow 0.45s linear infinite;
}
.rch-arrow.done          { color: var(--red-bright); filter: drop-shadow(0 0 3px rgba(251,73,52,.35)); }
.rch-arrow.blocked-done  { color: var(--green-bright); }

/* ── Keyframes (shared with ac-stage for backwards compat) ── */
.ac-stage { display: none; } /* hide old ac-stage if rendered anywhere */
.ac-card-header { display: none; }
  border-bottom: 1px solid var(--bg3);
}
.ac-card-header h4 {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; margin: 0; color: var(--fg);
}
.ac-card-header h4 svg { width: 14px; height: 14px; }
.ac-legend { display: flex; gap: 10px; flex-shrink: 0; }
.ac-leg-item {
  font-size: 9.5px; display: flex; align-items: center; gap: 4px;
}
.ac-leg-item::before {
  content: ''; display: inline-block;
  width: 8px; height: 8px; border-radius: 2px;
}
.ac-leg-pending::before  { background: var(--bg4); }
.ac-leg-active::before   { background: var(--yellow-bright); }
.ac-leg-success::before  { background: var(--red-bright); }
.ac-leg-blocked::before  { background: var(--green-bright); }
.ac-leg-detected::before { background: var(--blue-bright); }
.ac-leg-pending  { color: var(--fg4); }
.ac-leg-active   { color: var(--yellow-bright); }
.ac-leg-success  { color: var(--red-bright); }
.ac-leg-blocked  { color: var(--green-bright); }
.ac-leg-detected { color: var(--blue-bright); }

.attack-chain-wrap {
  overflow-x: auto; padding: 1rem 1rem 0.75rem;
  scrollbar-width: thin; scrollbar-color: var(--bg4) var(--bg2);
}
.attack-chain {
  display: flex; align-items: flex-start; min-width: max-content; gap: 0;
}

/* Stage card */
.ac-stage {
  width: 90px; flex-shrink: 0;
  background: var(--bg2); border: 1px solid var(--bg4);
  border-radius: var(--radius); padding: 0.5rem;
  cursor: pointer; position: relative; overflow: hidden;
  transition: all 0.25s; user-select: none;
}
.ac-stage:hover { border-color: var(--fg4); z-index: 1; }
.acs-header { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.acs-idx {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg4); display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; color: var(--fg3); flex-shrink: 0;
}
.acs-icon svg { width: 12px; height: 12px; color: var(--fg3); }
.acs-name     { font-size: 10px; font-weight: 700; color: var(--fg1); margin-bottom: 2px; line-height: 1.2; }
.acs-technique{ font-size: 8.5px; color: var(--blue-bright); font-family: 'Fira Mono'; margin-bottom: 2px; }
.acs-tech-name{ font-size: 9px; color: var(--fg4); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acs-status-row { display: flex; align-items: center; justify-content: space-between; gap: 2px; margin-bottom: 2px; }
.acs-status-badge {
  font-size: 8px; font-weight: 700; padding: 1px 4px; border-radius: 3px;
  text-transform: uppercase; background: var(--bg4); color: var(--fg4);
}
.acs-duration { font-size: 9px; font-family: 'Fira Mono'; color: var(--fg4); }
.acs-asset    { font-size: 8.5px; color: var(--fg4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acs-confidence { font-size: 9px; color: var(--fg3); font-family: 'Fira Mono'; }
/* ── Active ring: scanning sweep when stage fires ── */
.acs-active-ring {
  position: absolute; inset: -1px;
  border-radius: var(--radius);
  pointer-events: none;
}
.ac-stage.active .acs-active-ring {
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(250,189,47,0.18) 40%,
    rgba(250,189,47,0.35) 50%,
    rgba(250,189,47,0.18) 60%,
    transparent 100%
  );
  background-size: 200% 200%;
  animation: ringSweep 1.4s linear infinite;
}
@keyframes ringSweep {
  0%   { background-position: -100% -100%; }
  100% { background-position: 200% 200%; }
}

/* ── Stage states ── */
.ac-stage.active {
  border-color: var(--yellow-bright);
  box-shadow: 0 0 0 1px var(--yellow), 0 0 20px rgba(250,189,47,0.35), 0 0 40px rgba(250,189,47,0.12);
  animation: stageFire 1.1s ease-in-out infinite;
  background: rgba(215,153,33,0.09);
  transform: translateY(-2px);
  z-index: 2;
}
.ac-stage.active .acs-status-badge {
  background: var(--yellow);
  color: var(--bg);
  animation: badgePulse 0.8s ease-in-out infinite;
}
.ac-stage.active .acs-idx {
  background: var(--yellow);
  color: var(--bg);
}

/* SUCCESS: red flash then settle */
.ac-stage.success {
  border-color: var(--red-bright);
  background: rgba(204,36,29,0.1);
  animation: stageSuccess 0.6s ease-out forwards;
}
.ac-stage.success .acs-status-badge { background: var(--red-bright); color: var(--fg); font-weight: 800; }
.ac-stage.success .acs-idx { background: var(--red); color: var(--fg); }

/* BLOCKED: green flash */
.ac-stage.blocked {
  border-color: var(--green-bright);
  background: rgba(152,151,26,0.1);
  animation: stageBlocked 0.5s ease-out forwards;
}
.ac-stage.blocked .acs-status-badge { background: var(--green-bright); color: var(--bg); }
.ac-stage.blocked .acs-idx { background: var(--green); color: var(--bg); }

/* DETECTED: blue alert flash */
.ac-stage.detected {
  border-color: var(--blue-bright);
  background: rgba(69,133,136,0.1);
  animation: stageDetected 0.6s ease-out forwards;
}
.ac-stage.detected .acs-status-badge { background: var(--blue-bright); color: var(--bg); }
.ac-stage.detected .acs-idx { background: var(--blue); color: var(--fg); }

/* ── Keyframes ── */
@keyframes stageFire {
  0%   { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--yellow), 0 0 16px rgba(250,189,47,0.3); }
  50%  { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--yellow-bright), 0 0 28px rgba(250,189,47,0.6), 0 4px 16px rgba(0,0,0,0.4); }
  100% { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--yellow), 0 0 16px rgba(250,189,47,0.3); }
}
@keyframes stageSuccess {
  0%  { box-shadow: 0 0 0 3px var(--red-bright), 0 0 30px rgba(251,73,52,0.8); transform: scale(1.04); }
  40% { box-shadow: 0 0 0 1px var(--red-bright), 0 0 16px rgba(251,73,52,0.4); transform: scale(1.01); }
  100%{ box-shadow: 0 0 6px rgba(251,73,52,0.2); transform: scale(1); }
}
@keyframes stageBlocked {
  0%  { box-shadow: 0 0 0 3px var(--green-bright), 0 0 24px rgba(184,187,38,0.7); transform: scale(1.03); }
  100%{ box-shadow: 0 0 6px rgba(184,187,38,0.15); transform: scale(1); }
}
@keyframes stageDetected {
  0%  { box-shadow: 0 0 0 3px var(--blue-bright), 0 0 24px rgba(131,165,152,0.7); transform: scale(1.03); }
  100%{ box-shadow: 0 0 6px rgba(131,165,152,0.15); transform: scale(1); }
}
@keyframes badgePulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.65; }
}

/* ── Connector arrows between stages ── */
.ac-connector {
  display: flex; align-items: center; padding: 0 2px;
  color: var(--bg4); flex-shrink: 0; align-self: center;
  margin-bottom: 24px;
  transition: color 0.25s, filter 0.25s;
  position: relative;
}
.ac-connector.active {
  color: var(--yellow-bright);
  filter: drop-shadow(0 0 4px rgba(250,189,47,0.7));
  animation: connectorPulse 0.6s ease-in-out infinite alternate;
}
.ac-connector.done {
  color: var(--red-bright);
  filter: drop-shadow(0 0 3px rgba(251,73,52,0.4));
}
.ac-connector.blocked-done {
  color: var(--green-bright);
}
.ac-connector svg { width: 24px; height: 16px; }
/* Animated dash on active connector */
.ac-connector.active svg path {
  stroke-dasharray: 6 4;
  animation: dashFlow 0.5s linear infinite;
}
@keyframes connectorPulse {
  from { opacity: 0.7; }
  to   { opacity: 1;   }
}
@keyframes dashFlow {
  from { stroke-dashoffset: 20; }
  to   { stroke-dashoffset: 0;  }
}

/* ---------- Telemetry Console ---------- */
.telemetry-card {
  background: #181a1b;
  border: 1px solid var(--bg4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
}
.tel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.625rem 1rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--bg4);
  gap: 0.5rem;
  flex-wrap: wrap;
}
.tel-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--fg);
}
.tel-pulse-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fg4);
  transition: all 0.15s;
}
.tel-pulse-dot.active {
  background: var(--green-bright);
  box-shadow: 0 0 6px var(--green-bright);
}
.tel-badge {
  font-size: 9.5px; padding: 1px 6px; border-radius: 8px;
  background: var(--bg3); color: var(--fg3);
  font-family: 'Fira Mono';
}
.tel-controls { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tel-btn {
  width: 26px; height: 26px;
  background: var(--bg3); border: 1px solid var(--bg4);
  border-radius: var(--radius); color: var(--fg3);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.tel-btn:hover { border-color: var(--blue); color: var(--fg); }
.tel-btn svg { width: 12px; height: 12px; }
.tel-filters { display: flex; gap: 3px; }
.tel-filter {
  padding: 3px 8px; border-radius: 10px;
  background: var(--bg3); border: 1px solid var(--bg4);
  font-size: 10px; color: var(--fg3); cursor: pointer;
  transition: all var(--transition);
}
.tel-filter:hover { border-color: var(--blue); }
.tel-filter.active {
  background: rgba(69,133,136,0.2);
  border-color: var(--blue); color: var(--blue-bright);
}
.tel-body {
  height: 260px; overflow-y: auto;
  padding: 0.5rem 0.75rem;
  font-family: 'Fira Mono', monospace; font-size: 11px;
  background: #0f1011;
  position: relative;
}
.tel-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 8px; color: var(--fg4);
  font-family: 'Fira Sans'; font-size: 12px;
}
.tel-empty-state svg { width: 24px; height: 24px; opacity: 0.4; }
.tel-line {
  display: flex; gap: 6px; padding: 1.5px 0;
  line-height: 1.4; animation: telLineFade 0.15s ease;
}
@keyframes telLineFade { from{opacity:0;transform:translateX(-4px)} to{opacity:1;transform:none} }
.tel-ts    { color: var(--fg4); flex-shrink: 0; min-width: 60px; }
.tel-stage-lbl {
  flex-shrink: 0; min-width: 90px; max-width: 90px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 9.5px; padding-top: 1px; color: var(--fg4);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.tel-text { flex: 1; word-break: break-all; }
.tel-line-attack   .tel-text { color: var(--red-bright); }
.tel-line-defense  .tel-text { color: var(--blue-bright); }
.tel-line-alert    .tel-text { color: var(--yellow-bright); }
.tel-line-evidence .tel-text { color: var(--aqua-bright); }
.tel-line-success  .tel-text { color: var(--green-bright); }
.tel-line-system   .tel-text { color: var(--fg4); }
.tel-progress {
  height: 2px; background: var(--bg4);
}
.tel-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-bright), var(--aqua-bright));
  transition: width 0.3s ease;
}

/* ---------- Charts Section ---------- */
.charts-section {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin-bottom: 1rem;
}
.charts-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.875rem;
}
.charts-section-header h4 {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; margin: 0;
}
.charts-section-header h4 svg { width: 14px; height: 14px; }
.charts-section-sub { font-size: 11px; color: var(--fg4); }
.charts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
@media (max-width: 1400px) { .charts-grid { grid-template-columns: repeat(2, 1fr); } }
.chart-card {
  background: var(--bg2);
  border: 1px solid var(--bg4);
  border-radius: var(--radius);
  padding: 0.75rem;
}
.chart-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem;
}
.chart-title { font-size: 11px; font-weight: 600; color: var(--fg2); }
.chart-val { font-size: 12px; font-weight: 700; font-family: 'Fira Mono'; color: var(--yellow-bright); }
.chart-wrap { position: relative; }

/* ---------- ATT&CK Coverage ---------- */
.attck-card {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 0.875rem;
}
.attck-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--bg3);
}
.attck-card-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--fg);
}
.attck-card-title svg { width: 14px; height: 14px; color: var(--red-bright); flex-shrink: 0; }
.attck-framework-badge {
  font-size: 9px; padding: 1px 6px; border-radius: 6px;
  background: rgba(204,36,29,0.15); border: 1px solid var(--red);
  color: var(--red-bright); font-family: 'Fira Mono', monospace;
  font-weight: 700; letter-spacing: 0.03em;
}
.attck-header-right {
  display: flex; align-items: center; gap: 8px;
}
.attck-coverage-pct {
  font-size: 11px; font-weight: 700; color: var(--fg2);
  font-family: 'Fira Mono', monospace;
}
.attck-badge {
  font-size: 9.5px; padding: 2px 7px; border-radius: 8px;
  background: var(--bg3); color: var(--fg3);
}
.attck-legend {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--bg3);
}
.attck-leg {
  font-size: 9px; padding: 2px 6px; border-radius: 4px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.attck-leg.selected  { background:rgba(69,133,136,0.2);  color:var(--blue-bright);  border:1px solid var(--blue); }
.attck-leg.attempted { background:rgba(215,153,33,0.2);  color:var(--yellow-bright);border:1px solid var(--yellow); }
.attck-leg.succeeded { background:rgba(204,36,29,0.2);   color:var(--red-bright);   border:1px solid var(--red); }
.attck-leg.blocked   { background:rgba(152,151,26,0.2);  color:var(--green-bright); border:1px solid var(--green); }
.attck-leg.detected  { background:rgba(104,157,106,0.2); color:var(--aqua-bright);  border:1px solid var(--aqua); }

/* --- ATT&CK matrix: horizontally scrollable, 14 tactic columns --- */
.attck-matrix-wrap {
  overflow-x: auto;
  overflow-y: visible;
  padding: 0 0.625rem 0.625rem;
  /* thin scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--bg4) transparent;
}
.attck-matrix-wrap::-webkit-scrollbar { height: 5px; }
.attck-matrix-wrap::-webkit-scrollbar-track { background: transparent; }
.attck-matrix-wrap::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }

.attck-matrix {
  display: flex;
  flex-direction: row;
  gap: 4px;
  min-width: max-content;
  align-items: flex-start;
}

/* One tactic column */
.attck-col {
  width: 128px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: filter var(--transition);
}
.attck-col:hover { filter: brightness(1.12); }

.attck-col-header {
  background: var(--bg3);
  border: 1px solid var(--bg4);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 5px 6px 4px;
  text-align: center;
  position: sticky;
  top: 0;
}
.attck-col-ta-id {
  display: block;
  font-size: 8px;
  font-family: 'Fira Mono', monospace;
  color: var(--fg4);
  letter-spacing: 0.03em;
}
.attck-col-ta-name {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 1px 0;
}
.attck-col-count {
  display: block;
  font-size: 7.5px;
  color: var(--fg4);
  font-family: 'Fira Mono', monospace;
}

/* Technique boxes container */
.attck-tech-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Individual technique box */
.attck-tech-box {
  border-radius: 3px;
  padding: 4px 5px;
  cursor: default;
  transition: background var(--transition), border-color var(--transition);
  border: 1px solid transparent;
  overflow: hidden;
}
.attck-tech-id {
  display: block;
  font-size: 7.5px;
  font-family: 'Fira Mono', monospace;
  letter-spacing: 0.02em;
  opacity: 0.75;
  line-height: 1.2;
}
.attck-tech-name {
  display: block;
  font-size: 8.5px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* State colours */
.attck-tech-box.pending   { background: var(--bg2); border-color: var(--bg3); color: var(--fg4); }
.attck-tech-box.selected  { background: rgba(69,133,136,0.25);  border-color: var(--blue);         color: var(--blue-bright); }
.attck-tech-box.attempted { background: rgba(215,153,33,0.25);  border-color: var(--yellow);       color: var(--yellow-bright); }
.attck-tech-box.succeeded { background: rgba(204,36,29,0.30);   border-color: var(--red);          color: var(--red-bright); }
.attck-tech-box.blocked   { background: rgba(152,151,26,0.25);  border-color: var(--green);        color: var(--green-bright); }
.attck-tech-box.detected  { background: rgba(104,157,106,0.25); border-color: var(--aqua);         color: var(--aqua-bright); }

/* Per-column progress bar */
.attck-col-prog-track {
  height: 3px;
  background: var(--bg3);
  border-radius: 0 0 var(--radius) var(--radius);
  margin-top: 1px;
  overflow: hidden;
}
.attck-col-prog-fill {
  height: 100%;
  background: var(--yellow);
  border-radius: inherit;
  transition: width 0.5s ease;
}

/* Legacy single-column rules (kept for compat, now unused) */
.attck-tactic-col { display: none; }
.attck-tac-header, .attck-tac-id, .attck-tac-name,
.attck-tac-status, .attck-tac-tech,
.attck-progress-bar-track, .attck-progress-fill { display: none; }

.attck-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--bg1);
  border-radius: var(--radius-lg);
  border: 1px solid var(--bg4);
  z-index: 10; padding: 1rem;
  box-shadow: var(--shadow-lg);
}
.attck-overlay-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.75rem;
}
.attck-overlay-header strong { font-size: 13px; color: var(--fg); }
.attck-overlay-header button {
  background: none; border: none; color: var(--fg3);
  cursor: pointer; padding: 2px;
}
.attck-overlay-header button svg { width: 14px; height: 14px; }
.attck-card { position: relative; }
.aod-row { display: flex; gap: 1rem; margin-bottom: 6px; font-size: 12px; }
.aod-row span { color: var(--fg4); min-width: 80px; }
.aod-row strong { color: var(--fg); }
.aod-note { font-size: 10px; color: var(--fg4); margin-top: 0.5rem; font-style: italic; }

/* ---------- Blue Team Console ---------- */
.blueteam-card {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 0.875rem;
}
.bt-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bg3);
}
.bt-header h4 {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; margin: 0;
}
.bt-header h4 svg { width: 14px; height: 14px; }
.bt-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 8px; background: rgba(204,36,29,0.15);
  border: 1px solid var(--red); color: var(--red-bright);
}
.bt-alert-feed {
  max-height: 380px; overflow-y: auto;
  padding: 0.5rem;
}
.bt-alert-item {
  background: var(--bg2);
  border: 1px solid var(--bg4);
  border-radius: var(--radius);
  padding: 0.625rem;
  margin-bottom: 0.5rem;
  transition: all var(--transition);
}
.bt-alert-item.bt-contained { opacity: 0.6; }
.bt-sev-critical { border-left: 3px solid var(--red-bright); }
.bt-sev-high     { border-left: 3px solid var(--red); }
.bt-sev-medium   { border-left: 3px solid var(--yellow); }
.bt-sev-low      { border-left: 3px solid var(--blue); }
.bt-alert-header {
  display: flex; align-items: flex-start; gap: 6px; margin-bottom: 5px;
}
.bt-sev-icon svg { width: 13px; height: 13px; flex-shrink: 0; }
.bt-sev-critical .bt-sev-icon { color: var(--red-bright); }
.bt-sev-high     .bt-sev-icon { color: var(--red); }
.bt-sev-medium   .bt-sev-icon { color: var(--yellow-bright); }
.bt-alert-title-wrap { flex: 1; }
.bt-alert-title  { display: block; font-size: 11px; font-weight: 600; color: var(--fg); line-height: 1.3; }
.bt-alert-source { display: block; font-size: 9.5px; color: var(--fg4); font-family: 'Fira Mono'; }
.bt-alert-conf   { font-size: 10px; font-weight: 700; color: var(--yellow-bright); font-family: 'Fira Mono'; flex-shrink: 0; }
.bt-alert-asset  {
  display: flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--fg3); margin-bottom: 5px;
}
.bt-alert-asset svg { width: 11px; height: 11px; }
.bt-alert-contains { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.bt-contain-btn {
  padding: 3px 8px; border-radius: 10px;
  background: var(--bg3); border: 1px solid var(--bg4);
  font-size: 10px; color: var(--fg2); cursor: pointer;
  transition: all var(--transition);
}
.bt-contain-btn:hover { border-color: var(--yellow); color: var(--yellow-bright); }
.bt-alert-status { margin-bottom: 4px; }
.bt-tag {
  font-size: 9.5px; font-weight: 700; padding: 2px 7px;
  border-radius: 8px; text-transform: uppercase; letter-spacing: 0.04em;
}
.bt-tag-investigating { background:rgba(215,153,33,0.2); color:var(--yellow-bright); border:1px solid var(--yellow); }
.bt-tag-contained     { background:rgba(152,151,26,0.2); color:var(--green-bright);  border:1px solid var(--green); }
.bt-tag-escalated     { background:rgba(204,36,29,0.2);  color:var(--red-bright);    border:1px solid var(--red); }
.bt-analyst-notes {
  width: 100%; background: var(--bg3); border: 1px solid var(--bg4);
  border-radius: var(--radius); color: var(--fg2);
  font-family: 'Fira Sans'; font-size: 10.5px; padding: 5px 8px;
  resize: none; margin-top: 4px;
}
.bt-analyst-notes:focus { border-color: var(--blue); outline: none; }

/* ---------- Asset Map ---------- */
.asset-map-card {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 0.875rem;
}
.am-legend {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.am-leg {
  font-size: 9.5px; padding: 2px 6px; border-radius: 4px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.am-leg-normal    { background:var(--bg3); color:var(--fg3); }
.am-leg-attacked  { background:rgba(204,36,29,0.2); color:var(--red-bright); border:1px solid var(--red); }
.am-leg-contained { background:rgba(152,151,26,0.2); color:var(--green-bright); border:1px solid var(--green); }
.asset-map-wrap { padding: 0.75rem; }
.asset-map-svg { display: block; width: 100%; border-radius: var(--radius); background: var(--bg2); }

/* SVG nodes */
.am-path {
  stroke: var(--bg4); stroke-width: 1.5; fill: none;
  stroke-dasharray: 4 4; transition: stroke 0.4s;
}
.am-path-active { stroke: var(--yellow-bright); stroke-dasharray: none; stroke-width: 2; animation: pathFlow 0.8s ease; }
@keyframes pathFlow { from{opacity:0} to{opacity:1} }
.am-node { cursor: pointer; transition: filter 0.3s; }
.am-node:hover { filter: drop-shadow(0 0 5px var(--yellow)); }
.am-node.attacked { filter: drop-shadow(0 0 10px var(--red-bright)); }
.am-node.contained { filter: drop-shadow(0 0 8px var(--green-bright)); }
.am-node-circle, .am-node-rect, .am-node-hex, .am-node-db-top, .am-node-db-body, .am-node-db-bottom, .am-node-cloud {
  fill: var(--bg3); stroke: var(--bg4); stroke-width: 1.5; transition: all 0.3s;
}
.am-node.attacked .am-node-circle,
.am-node.attacked .am-node-rect,
.am-node.attacked .am-node-hex,
.am-node.attacked .am-node-db-top,
.am-node.attacked .am-node-db-body,
.am-node.attacked .am-node-db-bottom,
.am-node.attacked .am-node-cloud,
.am-node.attacked .am-node-star { stroke: var(--red-bright); fill: rgba(204,36,29,0.15); }
.am-node.contained .am-node-circle,
.am-node.contained .am-node-rect,
.am-node.contained .am-node-hex,
.am-node.contained .am-node-db-top,
.am-node.contained .am-node-db-body,
.am-node.contained .am-node-db-bottom,
.am-node.contained .am-node-cloud,
.am-node.contained .am-node-star { stroke: var(--green-bright); fill: rgba(152,151,26,0.12); }
.am-type-user    { stroke: var(--aqua); }
.am-type-email   { stroke: var(--orange); }
.am-type-endpoint{ stroke: var(--blue); }
.am-type-server  { stroke: var(--yellow); }
.am-type-dc      { stroke: var(--red); }
.am-type-db      { stroke: var(--red); }
.am-type-crown   { stroke: var(--yellow-bright); fill: rgba(215,153,33,0.1); }
.am-type-cloud   { stroke: var(--purple); }
.am-node-label {
  text-anchor: middle; font-size: 8px;
  fill: var(--fg4); font-family: 'Fira Sans'; font-weight: 500;
}
.am-node-icon   { text-anchor: middle; font-size: 10px; dominant-baseline: middle; }
.am-node-icon-sm{ text-anchor: middle; font-size: 9px; dominant-baseline: middle; }
.am-node-star   { fill: rgba(215,153,33,0.15); stroke: var(--yellow-bright); stroke-width: 1.5; }
.am-node-pulse-ring, .am-node-pulse-ring-rect, .am-node-pulse-ring-hex,
.am-node-pulse-ring-ellipse, .am-node-pulse-ring-star {
  fill: none; stroke: transparent; stroke-width: 2; opacity: 0;
}
.am-node-pulse-ring.pulsing, .am-node-pulse-ring-rect.pulsing,
.am-node-pulse-ring-hex.pulsing, .am-node-pulse-ring-ellipse.pulsing,
.am-node-pulse-ring-star.pulsing {
  stroke: var(--red-bright); opacity: 1;
  animation: svgPulse 1.2s ease-in-out infinite;
}
@keyframes svgPulse {
  0%,100% { opacity: 0.8; stroke-width: 2; }
  50%      { opacity: 0.2; stroke-width: 6; }
}

/* ---------- Timeline Replay ---------- */
.replay-strip {
  display: flex; align-items: center; gap: 0.875rem;
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  padding: 0.625rem 1rem;
  margin-bottom: 1rem;
}
.replay-controls { display: flex; gap: 3px; flex-shrink: 0; }
.replay-btn {
  width: 30px; height: 30px;
  background: var(--bg2); border: 1px solid var(--bg4);
  border-radius: var(--radius); color: var(--fg2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.replay-btn:hover { border-color: var(--yellow); color: var(--yellow-bright); }
.replay-btn-play {
  background: rgba(215,153,33,0.15);
  border-color: var(--yellow); color: var(--yellow-bright);
  width: 34px; height: 30px;
}
.replay-btn svg { width: 13px; height: 13px; }
.replay-timeline-wrap {
  flex: 1; position: relative;
}
.replay-stage-markers {
  position: absolute;
  top: -8px; left: 0; right: 0; height: 8px;
  pointer-events: none;
}
.replay-marker {
  position: absolute; top: 0;
  width: 6px; height: 6px; border-radius: 50%;
  transform: translateX(-50%);
  background: var(--bg4);
}
.replay-marker-success  { background: var(--red-bright); }
.replay-marker-blocked  { background: var(--green-bright); }
.replay-marker-detected { background: var(--blue-bright); }
.replay-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; margin: 0;
  background: var(--bg4); border-radius: 2px; outline: none;
  cursor: pointer; display: block;
}
.replay-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--yellow-bright); border: 2px solid var(--bg1); cursor: pointer;
}
.replay-time-wrap { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.replay-time-label { font-size: 9px; color: var(--fg4); }
.replay-time { font-family: 'Fira Mono'; font-size: 12px; color: var(--yellow-bright); font-weight: 600; }
.replay-speed-wrap { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.replay-speed-label { font-size: 9.5px; color: var(--fg4); }
.replay-speed-select {
  background: var(--bg2); border: 1px solid var(--bg4);
  color: var(--fg2); font-size: 11px; padding: 3px 6px;
  border-radius: var(--radius); cursor: pointer;
}

/* ---------- Completion Panel ---------- */
.completion-card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--bg1) 0%, rgba(50,48,47,0.8) 100%);
  border: 1px solid var(--bg4);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1rem;
  animation: fadeIn 0.5s ease;
}
.comp-glow {
  position: absolute; top: -50px; left: 50%;
  transform: translateX(-50%);
  width: 300px; height: 100px;
  background: radial-gradient(ellipse, rgba(215,153,33,0.12), transparent);
  pointer-events: none;
}
.comp-header {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem;
}
.comp-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(215,153,33,0.15); border: 1px solid var(--yellow);
  display: flex; align-items: center; justify-content: center;
  color: var(--yellow-bright); flex-shrink: 0;
}
.comp-icon svg { width: 22px; height: 22px; }
.comp-title h2 { font-size: 18px; font-weight: 700; color: var(--fg); margin: 0 0 4px; }
.comp-subtitle { font-size: 12px; color: var(--fg3); margin: 0; }
.comp-timestamp { font-size: 11px; color: var(--fg4); font-family: 'Fira Mono'; margin-left: auto; flex-shrink: 0; }
.comp-scores {
  display: flex; gap: 1.5rem; justify-content: space-around;
  flex-wrap: wrap; margin-bottom: 1.5rem;
}
.comp-score-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 70px;
}
.csi-ring-wrap { position: relative; }
.csi-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg3); text-align: center; }
.csi-label-sm { font-size: 9.5px; }
.csi-value { font-size: 2rem; font-weight: 700; font-family: 'Fira Mono'; text-align: center; }
.csi-value-large { font-size: 2.5rem; color: var(--yellow-bright); }
.csi-small { font-size: 11px; font-family: 'Fira Sans'; text-align: center; max-width: 100px; }
.comp-score-main .csi-value { font-size: 2.8rem; }
.comp-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.comp-actions .btn-primary, .comp-actions .btn-secondary, .comp-actions .btn-ghost {
  display: flex; align-items: center; gap: 6px;
  padding: 0.6rem 1rem; border-radius: var(--radius);
  font-size: 12px; font-weight: 600; cursor: pointer;
  text-decoration: none;
}
.comp-actions .btn-primary {
  background: var(--yellow); color: var(--bg);
  border: 1px solid transparent;
}
.comp-actions .btn-primary:hover { background: var(--yellow-bright); color: var(--bg); }
.comp-actions .btn-secondary {
  background: var(--bg2); color: var(--fg2);
  border: 1px solid var(--bg4);
}
.comp-actions .btn-secondary:hover { border-color: var(--yellow); color: var(--fg); }
.comp-actions .btn-ghost {
  background: none; color: var(--fg3);
  border: 1px solid var(--bg4);
}
.comp-actions .btn-ghost:hover { color: var(--fg); border-color: var(--fg4); }
.comp-actions svg { width: 14px; height: 14px; }

/* ---------- Business Impact ---------- */
.impact-card {
  background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); padding: 1rem;
  margin-bottom: 1rem;
}
.impact-badge {
  font-size: 10px; font-weight: 700; padding: 3px 8px;
  border-radius: 8px; text-transform: uppercase; letter-spacing: 0.06em;
}
.impact-badge-critical { background:rgba(204,36,29,0.2); color:var(--red-bright); border:1px solid var(--red); }
.impact-badge-high     { background:rgba(215,153,33,0.2); color:var(--yellow-bright); border:1px solid var(--yellow); }
.impact-badge-medium   { background:rgba(69,133,136,0.2); color:var(--blue-bright); border:1px solid var(--blue); }
.impact-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem;
  margin-top: 0.75rem;
}
@media (max-width: 900px) { .impact-grid { grid-template-columns: repeat(2, 1fr); } }
.impact-item {
  background: var(--bg2); border: 1px solid var(--bg4);
  border-radius: var(--radius); padding: 0.625rem;
  text-align: center;
}
.impact-item svg { width: 16px; height: 16px; color: var(--fg3); margin-bottom: 5px; }
.impact-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg4); margin-bottom: 4px; }
.impact-val { font-size: 12px; font-weight: 600; color: var(--fg1); }

/* ---------- Remediation ---------- */
.remed-card {
  background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); padding: 1rem;
  margin-bottom: 1rem;
}
.remed-count { font-size: 10px; color: var(--fg4); }
.remed-list { margin: 0.75rem 0; }
.remed-empty {
  display: flex; align-items: center; gap: 6px;
  padding: 1rem; color: var(--fg4); font-size: 12px;
}
.remed-empty svg { width: 16px; height: 16px; }
.remed-item {
  background: var(--bg2); border: 1px solid var(--bg4);
  border-radius: var(--radius); padding: 0.625rem;
  margin-bottom: 0.5rem; border-left-width: 3px;
}
.remed-priority-critical { border-left-color: var(--red-bright); }
.remed-priority-high     { border-left-color: var(--red); }
.remed-priority-medium   { border-left-color: var(--yellow); }
.remed-item-header { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.remed-control { font-size: 11px; font-weight: 600; color: var(--fg); flex: 1; }
.remed-prio {
  font-size: 8.5px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.remed-prio-critical { background:rgba(204,36,29,0.2); color:var(--red-bright); }
.remed-prio-high     { background:rgba(215,153,33,0.2); color:var(--yellow-bright); }
.remed-prio-medium   { background:rgba(69,133,136,0.2); color:var(--blue-bright); }
.remed-tech { font-size: 10px; font-family: 'Fira Mono'; color: var(--fg4); }
.remed-action { font-size: 11px; color: var(--fg2); margin: 0; line-height: 1.5; }
.remed-quick-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 0.75rem; padding-top: 0.75rem;
  border-top: 1px solid var(--bg3);
}
.remed-action-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 16px;
  background: var(--bg2); border: 1px solid var(--bg4);
  font-size: 11px; color: var(--fg2); cursor: pointer;
  transition: all var(--transition);
}
.remed-action-btn:hover { border-color: var(--blue); color: var(--blue-bright); }
.remed-action-btn.remed-primary {
  background: rgba(69,133,136,0.15); border-color: var(--blue);
  color: var(--blue-bright);
}
.remed-action-btn.remed-applied {
  background: rgba(152,151,26,0.15); border-color: var(--green);
  color: var(--green-bright); pointer-events: none;
}
.remed-action-btn svg { width: 12px; height: 12px; }

/* ---------- Evidence Drawer ---------- */
.evidence-card {
  background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ev-actions { display: flex; gap: 5px; }
.btn-xs {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--radius);
  background: var(--bg2); border: 1px solid var(--bg4);
  font-size: 10px; color: var(--fg3); cursor: pointer;
  transition: all var(--transition);
}
.btn-xs:hover { border-color: var(--blue); color: var(--blue-bright); }
.btn-xs svg { width: 10px; height: 10px; }
.ev-list {
  max-height: 280px; overflow-y: auto;
  padding: 0.5rem;
}
.ev-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 1.5rem; color: var(--fg4); font-size: 12px; text-align: center;
}
.ev-empty svg { width: 20px; height: 20px; opacity: 0.4; }
.ev-item {
  background: var(--bg2); border: 1px solid var(--bg4);
  border-radius: var(--radius); padding: 0.5rem;
  margin-bottom: 0.4rem; cursor: pointer; transition: all var(--transition);
}
.ev-item:hover { border-color: var(--blue); }
.ev-item-header { display: flex; gap: 6px; align-items: center; margin-bottom: 3px; }
.ev-type-badge {
  font-size: 8.5px; font-weight: 700; padding: 1px 5px;
  border-radius: 3px; text-transform: uppercase; letter-spacing: 0.05em;
}
.ev-type-attack   { background:rgba(204,36,29,0.2);  color:var(--red-bright);   border:1px solid var(--red); }
.ev-type-evidence { background:rgba(104,157,106,0.2);color:var(--aqua-bright);  border:1px solid var(--aqua); }
.ev-type-defense  { background:rgba(69,133,136,0.2); color:var(--blue-bright);  border:1px solid var(--blue); }
.ev-stage { font-size: 9.5px; color: var(--fg4); flex: 1; }
.ev-ts    { font-size: 9.5px; font-family:'Fira Mono'; color: var(--fg4); }
.ev-item-text { font-size: 10.5px; color: var(--fg2); font-family: 'Fira Mono'; line-height: 1.4; }
.ev-detail { padding: 0.25rem; }
.ev-detail-row { display:flex; gap:1rem; margin-bottom:8px; font-size:12px; }
.ev-detail-row span { color:var(--fg4); min-width:80px; }
.ev-detail-row strong, .ev-detail-row code { color:var(--fg); font-size:11px; }
.ev-detail-note { font-size:10px; color:var(--yellow-bright); margin-top:0.75rem; font-style:italic; }

/* ---------- Comparison Panel ---------- */
.comparison-card {
  background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); overflow: hidden;
  padding: 1rem;
}
.comp-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comp-select { background:var(--bg2); border:1px solid var(--bg4); color:var(--fg); padding:5px 8px; border-radius:var(--radius); font-size:11px; }
.comp-vs { font-size:11px; color:var(--fg4); font-weight:600; }
.btn-sm { padding:5px 10px; font-size:11px; display:flex; align-items:center; gap:4px; }
.btn-sm svg { width:12px; height:12px; }
.comp-runs-table-wrap { overflow-x:auto; margin-top:0.75rem; }
.comp-table { width:100%; border-collapse:collapse; font-size:12px; }
.comp-table th {
  text-align:left; padding:0.4rem 0.6rem;
  font-size:10px; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--fg4); border-bottom:1px solid var(--bg4);
}
.comp-table td { padding:0.5rem 0.6rem; border-bottom:1px solid var(--bg3); }
.comp-run-name a { color:var(--fg1); font-weight:500; }
.comp-run-name a:hover { color:var(--yellow-bright); }
.comp-run-date { color:var(--fg4); font-size:11px; }
.type-badge {
  font-size:9.5px; padding:2px 6px; border-radius:4px;
  background:var(--bg3); color:var(--fg3); border:1px solid var(--bg4);
}
.score-bar-wrap { min-width:80px; }
.score-bar {
  padding:2px 6px; border-radius:3px;
  display:inline-block; min-width:32px; text-align:center;
  font-size:11px; font-weight:600; font-family:'Fira Mono';
}
.trend-up   { color:var(--red-bright);   font-size:10px; font-family:'Fira Mono'; }
.trend-down { color:var(--green-bright); font-size:10px; font-family:'Fira Mono'; }
.trend-flat { color:var(--fg4); font-size:10px; }
.run-compare-diff {
  display:grid; grid-template-columns:1fr auto 1fr 1.5fr;
  gap:1rem; background:var(--bg2); padding:1rem;
  border-radius:var(--radius); margin-top:1rem;
  border:1px solid var(--bg4);
}
.rcd-col h4 { font-size:12px; margin-bottom:0.5rem; color:var(--fg1); }
.rcd-row { display:flex; gap:8px; align-items:center; margin-bottom:5px; font-size:11px; }
.rcd-row span { color:var(--fg4); min-width:70px; }
.rcd-row strong { color:var(--fg); font-family:'Fira Mono'; }
.rcd-diff { font-size:10px; font-family:'Fira Mono'; font-weight:700; }
.diff-up   { color:var(--red-bright); }
.diff-down { color:var(--green-bright); }
.diff-flat { color:var(--fg4); }
.rcd-divider { width:1px; background:var(--bg4); }
.rcd-chart-wrap { min-width:180px; }

/* ---------- Ready State ---------- */
.ready-state {
  background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); padding: 1.25rem;
  animation: fadeIn 0.4s ease;
}
.rs-header {
  display: flex; align-items: center; gap: 1.25rem;
  margin-bottom: 1.25rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--bg3);
}
/* Radar */
.rs-radar-wrap { flex-shrink: 0; }
.rs-radar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--bg4);
  position: relative; overflow: hidden;
}
.rs-radar-sweep {
  position: absolute;
  width: 100%; height: 100%;
  background: conic-gradient(from 0deg, rgba(152,151,26,0.3) 0deg, transparent 60deg);
  animation: radarSweep 3s linear infinite;
  transform-origin: center;
}
@keyframes radarSweep { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.rs-radar-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(152,151,26,0.2);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.rs-ring-1 { width: 90%; height: 90%; }
.rs-ring-2 { width: 60%; height: 60%; }
.rs-ring-3 { width: 30%; height: 30%; }
.rs-radar-dot {
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 4px var(--green-bright);
  animation: dotBlink 2s infinite;
}
.rs-rdot-1 { top: 20%; left: 65%; animation-delay: 0s; }
.rs-rdot-2 { top: 55%; left: 30%; animation-delay: 0.7s; }
.rs-rdot-3 { top: 70%; left: 70%; animation-delay: 1.4s; }
@keyframes dotBlink { 0%,100%{opacity:1} 50%{opacity:0.1} }
.rs-title { font-size: 18px; font-weight: 700; color: var(--fg); margin: 0 0 4px; }
.rs-title-accent { color: var(--green-bright); }
.rs-subtitle { font-size: 12px; color: var(--fg3); margin: 0; }
.rs-section { margin-bottom: 1rem; }
.rs-section-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--fg4); margin-bottom: 0.625rem;
}
.rs-section-label svg { width: 12px; height: 12px; }

/* Quick presets */
.rs-presets-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.rs-preset-btn {
  background: var(--bg2); border: 1px solid var(--bg4);
  border-radius: var(--radius); padding: 0.625rem 0.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; transition: all var(--transition); text-align: center;
}
.rs-preset-btn:hover { border-color: var(--yellow); background: rgba(215,153,33,0.06); }
.rs-preset-btn svg { width: 16px; height: 16px; color: var(--fg2); }
.rs-preset-btn strong { font-size: 11px; color: var(--fg); }
.rs-preset-btn span { font-size: 9.5px; color: var(--fg4); }

/* Two-col section */
.rs-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; margin-bottom: 1rem; }
.rs-rec-card {
  background: var(--bg2); border: 1px solid var(--bg4);
  border-radius: var(--radius); padding: 0.75rem; min-height: 80px;
}
.rs-rec-loading { font-size: 11px; color: var(--fg4); }

/* Leaderboard */
.rs-lb-empty { font-size: 11px; color: var(--fg4); padding: 0.5rem 0; }
.rs-lb-list  { display: flex; flex-direction: column; gap: 5px; }
.rs-lb-item  {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--bg3);
}
.rs-lb-rank  { font-size: 13px; min-width: 18px; text-align: center; }
.rs-lb-info  { flex: 1; display: flex; flex-direction: column; }
.rs-lb-name  { font-size: 11px; font-weight: 600; color: var(--fg1); }
.rs-lb-scenario { font-size: 9.5px; color: var(--fg4); }
.rs-lb-score-bar-wrap { width: 48px; height: 4px; background: var(--bg4); border-radius: 2px; overflow: hidden; }
.rs-lb-score-bar { height: 100%; border-radius: 2px; }
.rs-lb-score { font-size: 12px; font-weight: 700; font-family: 'Fira Mono'; min-width: 28px; text-align: right; }

/* Control readiness */
.rs-controls-grid { display: flex; flex-direction: column; gap: 6px; }
.rs-ctrl-item { }
.rs-ctrl-header {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; margin-bottom: 3px;
}
.rs-ctrl-header svg { width: 12px; height: 12px; color: var(--fg3); }
.rs-ctrl-header span { flex: 1; color: var(--fg2); }
.rs-ctrl-score { font-family: 'Fira Mono'; font-size: 11px; font-weight: 600; }
.rs-ctrl-bar-track { height: 3px; background: var(--bg4); border-radius: 2px; overflow: hidden; }
.rs-ctrl-bar-fill { height: 100%; border-radius: 2px; }

/* ---------- Stage Detail Drawer ---------- */
.stage-detail-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55); z-index: 200; display: none;
}
.stage-detail-drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 420px; background: var(--bg1);
  border-left: 1px solid var(--bg4);
  z-index: 201; transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto; display: flex; flex-direction: column;
}
.stage-detail-drawer.open { transform: translateX(0); }
.sdd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--bg4);
  position: sticky; top: 0; background: var(--bg1); z-index: 1;
}
.sdd-header h3 { font-size: 14px; font-weight: 700; color: var(--fg); margin: 0; }
.sdd-close-btn {
  background: var(--bg3); border: 1px solid var(--bg4);
  border-radius: var(--radius); padding: 5px; cursor: pointer;
  color: var(--fg3); transition: all var(--transition);
  display: flex; align-items: center;
}
.sdd-close-btn:hover { border-color: var(--red); color: var(--red-bright); }
.sdd-close-btn svg { width: 13px; height: 13px; }
.sdd-body { padding: 1rem 1.25rem; flex: 1; }
.sdd-section { margin-bottom: 1rem; }
.sdd-label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--fg4); margin-bottom: 5px;
}
.sdd-val { font-size: 12px; color: var(--fg2); line-height: 1.5; }
.sdd-val-highlight { color: var(--yellow-bright); font-family: 'Fira Mono'; font-size: 11.5px; }
.sdd-val-alert { display:flex; align-items:center; gap:6px; color:var(--red-bright); font-size:11.5px; }
.sdd-val-alert svg { width:12px; height:12px; flex-shrink:0; }
.sdd-val-warn { color: var(--yellow-bright); font-size: 11.5px; }
.sdd-val-blue { color: var(--blue-bright); font-size: 11.5px; line-height: 1.5; }
.sdd-code {
  display: block; background: var(--bg2); border: 1px solid var(--bg4);
  border-radius: var(--radius); padding: 0.5rem 0.75rem;
  font-family: 'Fira Mono'; font-size: 10.5px;
  color: var(--aqua-bright); word-break: break-all; line-height: 1.5;
}
.sdd-assets { display: flex; flex-wrap: wrap; gap: 5px; }
.sdd-asset-tag {
  padding: 3px 8px; border-radius: 4px;
  background: rgba(69,133,136,0.15); border: 1px solid var(--blue);
  font-size: 10px; color: var(--blue-bright); font-family: 'Fira Mono';
}
.sdd-disclaimer {
  margin-top: 1.5rem; padding: 0.75rem;
  background: rgba(215,153,33,0.08); border: 1px solid rgba(215,153,33,0.2);
  border-radius: var(--radius);
  font-size: 10.5px; color: var(--yellow-bright); line-height: 1.5;
}

/* ---------- Asset Detail Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6); z-index: 300;
}
.zb-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg1); border: 1px solid var(--bg4);
  border-radius: var(--radius-lg); z-index: 301;
  width: 420px; max-width: 90vw;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.2s ease;
}
@keyframes modalIn { from{opacity:0;transform:translate(-50%,-48%)} to{opacity:1;transform:translate(-50%,-50%)} }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--bg4);
}
.modal-header h3 { font-size: 14px; font-weight: 700; margin: 0; color: var(--fg); }
.modal-close-btn {
  background: var(--bg3); border: 1px solid var(--bg4);
  border-radius: var(--radius); padding: 5px; cursor: pointer;
  color: var(--fg3); transition: all var(--transition);
  display: flex; align-items: center;
}
.modal-close-btn:hover { border-color: var(--red); color: var(--red-bright); }
.modal-close-btn svg { width: 13px; height: 13px; }
.modal-body { padding: 1rem 1.25rem; }
.modal-asset-detail .mad-row {
  display: flex; gap: 1rem; margin-bottom: 8px; font-size: 12px;
  align-items: baseline;
}
.modal-asset-detail .mad-row > span:first-child { color: var(--fg4); min-width: 90px; }
.modal-asset-detail .mad-row > strong { color: var(--fg); }
.modal-asset-detail .mad-row code { font-family:'Fira Mono'; font-size:11px; color:var(--aqua-bright); }
.crit-critical { color: var(--red-bright); }
.crit-high     { color: var(--yellow-bright); }
.crit-medium   { color: var(--blue-bright); }
.asset-status-normal   { color: var(--fg3); font-weight: 600; }
.asset-status-attacked { color: var(--red-bright); font-weight: 600; }
.asset-status-contained{ color: var(--green-bright); font-weight: 600; }
.mad-note { margin-top: 0.75rem; font-size: 10.5px; color: var(--yellow-bright); font-style: italic; }

/* ---------- Card header utility ---------- */
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bg3);
}
.card-header h3, .card-header h4 {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; margin: 0;
}
.card-header h3 svg, .card-header h4 svg { width: 14px; height: 14px; }

/* ---------- Toast Notifications ---------- */
.zb-toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 500;
}
.zb-toast {
  background: var(--bg2); border: 1px solid var(--bg4);
  border-radius: var(--radius); padding: 0.75rem 1rem;
  min-width: 260px; max-width: 320px;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px;
  transform: translateX(120%); opacity: 0;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  border-left-width: 3px;
}
.zb-toast.toast-visible { transform: translateX(0); opacity: 1; }
.zb-toast strong { font-size: 12px; color: var(--fg); }
.zb-toast span { font-size: 11px; color: var(--fg3); }
.toast-success { border-left-color: var(--green-bright); }
.toast-warn    { border-left-color: var(--yellow-bright); }
.toast-info    { border-left-color: var(--blue-bright); }
.toast-error   { border-left-color: var(--red-bright); }

/* ---------- Global status pill ---------- */
.status-pill { font-size:10px; font-weight:700; padding:2px 7px; border-radius:8px; text-transform:uppercase; letter-spacing:0.05em; }
.status-completed { background:rgba(152,151,26,0.2); color:var(--green-bright); border:1px solid var(--green); }
.status-running   { background:rgba(215,153,33,0.2); color:var(--yellow-bright); border:1px solid var(--yellow); }
.status-failed    { background:rgba(204,36,29,0.2);  color:var(--red-bright);   border:1px solid var(--red); }

/* ---------- Run page animations ---------- */
@keyframes radarSweep { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }


/* ══════════════════════════════════════════════════════════════════════
   DEFENDER CONTROLS — Full posture control center
   ══════════════════════════════════════════════════════════════════════ */

/* ── Page layout ───────────────────────────────────────────────────── */
.page-content.defender-page { padding: 0; overflow-x: hidden; }

/* ── Page header ───────────────────────────────────────────────────── */
.def-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.875rem;
  border-bottom: 1px solid var(--bg3);
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--bg1);
}
.def-page-header-left { display: flex; align-items: center; gap: 0.875rem; }
.def-page-icon {
  width: 40px; height: 40px;
  background: rgba(204,36,29,0.15);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--red-bright);
  flex-shrink: 0;
}
.def-page-icon svg { width: 20px; height: 20px; }
.def-page-title  { font-size: 18px; font-weight: 700; color: var(--fg); margin: 0; }
.def-page-subtitle { font-size: 11px; color: var(--fg4); margin: 2px 0 0; }

.def-page-header-right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.def-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Score badge */
.def-posture-score-badge { display: flex; align-items: center; gap: 0.75rem; }
.def-psb-ring { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.def-psb-svg  { width: 56px; height: 56px; }
.def-psb-val  {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--fg);
  font-family: 'Fira Mono', monospace;
}
.def-psb-info { display: flex; flex-direction: column; }
.def-psb-label{ font-size: 10px; color: var(--fg4); }
.def-psb-tier { font-size: 13px; font-weight: 700; color: var(--yellow-bright); }

/* Buttons */
.btn-def-primary {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--red); color: var(--bg);
  border: none; border-radius: var(--radius); padding: 0.5rem 1rem;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all var(--transition); white-space: nowrap;
}
.btn-def-primary:hover { background: var(--red-bright); }
.btn-def-primary svg { width: 13px; height: 13px; }
.btn-def-primary.def-btn-dirty {
  background: var(--yellow); animation: btnPulse 2s ease-in-out infinite;
}
@keyframes btnPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(215,153,33,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(215,153,33,0); }
}

.btn-def-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg2); color: var(--fg3);
  border: 1px solid var(--bg4); border-radius: var(--radius);
  padding: 0.5rem 0.875rem;
  font-size: 12px; font-weight: 500; cursor: pointer;
  transition: all var(--transition); white-space: nowrap;
}
.btn-def-secondary:hover { border-color: var(--blue); color: var(--fg); background: var(--bg3); }
.btn-def-secondary svg { width: 13px; height: 13px; }

/* ── Domain score band ─────────────────────────────────────────────── */
.def-domain-band {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0.5rem 1.25rem;
  background: var(--bg0);
  border-bottom: 1px solid var(--bg3);
  scrollbar-width: thin; scrollbar-color: var(--bg4) transparent;
}
.def-domain-band::-webkit-scrollbar { height: 3px; }
.def-domain-band::-webkit-scrollbar-thumb { background: var(--bg4); }

.def-domain-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius); padding: 5px 10px;
  cursor: pointer; transition: all var(--transition);
  min-width: max-content; white-space: nowrap;
  position: relative;
}
.def-domain-chip:hover, .def-dc-active { border-color: var(--blue); background: var(--bg2); }
.def-dc-weak   { border-color: rgba(204,36,29,0.4); }
.def-dc-strong { border-color: rgba(152,151,26,0.4); }

.def-dc-icon svg { width: 12px; height: 12px; flex-shrink: 0; }
.def-dc-name { font-size: 10px; font-weight: 600; color: var(--fg3); }
.def-dc-bar-wrap {
  width: 48px; height: 4px; background: var(--bg3); border-radius: 2px;
  position: relative; overflow: hidden;
}
.def-dc-bar, .def-dc-bar-fill {
  position: absolute; top: 0; left: 0; height: 100%; border-radius: 2px;
  transition: width 0.5s ease;
}
.def-dc-bar { opacity: 0.3; width: 100%; }
.def-dc-bar-fill { width: 0; }
.def-dc-val {
  font-size: 10px; font-weight: 700; font-family: 'Fira Mono', monospace;
  color: var(--fg2); min-width: 22px; text-align: right;
}

/* ── Main 2-column layout ──────────────────────────────────────────── */
.def-main-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  align-items: start;
}
.def-main-left  { min-width: 0; }
.def-main-right {
  display: flex; flex-direction: column; gap: 0.75rem;
  position: sticky;
  top: calc(var(--topnav-h, 52px) + 0.75rem);
  max-height: calc(100vh - var(--topnav-h, 52px) - 1.5rem);
  overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--bg4) transparent;
}

/* ── Tab bar ───────────────────────────────────────────────────────── */
.def-tab-bar {
  display: flex; gap: 2px; overflow-x: auto;
  border-bottom: 1px solid var(--bg3);
  margin-bottom: 0.75rem;
  scrollbar-width: none;
}
.def-tab-bar::-webkit-scrollbar { display: none; }
.def-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px;
  font-size: 11px; font-weight: 500; color: var(--fg4);
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.def-tab svg { width: 12px; height: 12px; }
.def-tab:hover { color: var(--fg2); }
.def-tab.active {
  color: var(--fg);
  border-bottom-color: var(--tab-accent, var(--red));
}
.def-tab-count {
  font-size: 9px; background: var(--bg3); color: var(--fg4);
  padding: 1px 5px; border-radius: 8px; font-family: 'Fira Mono', monospace;
}
.def-tab.active .def-tab-count { background: var(--tab-accent, var(--red)); color: var(--bg); opacity: 0.9; }

/* ── Filter bar ────────────────────────────────────────────────────── */
.def-filter-bar {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: 0.875rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--bg3);
}
.def-search-wrap {
  display: flex; align-items: center;
  background: var(--bg2); border: 1px solid var(--bg3);
  border-radius: var(--radius); padding: 0 10px;
  flex: 1; min-width: 200px; max-width: 360px;
}
.def-search-wrap:focus-within { border-color: var(--blue); }
.def-search-icon { color: var(--fg4); }
.def-search-icon svg { width: 13px; height: 13px; }
.def-search-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--fg); font-size: 12px; font-family: 'Fira Sans', sans-serif;
  padding: 7px 6px;
}
.def-search-input::placeholder { color: var(--fg4); }
.def-search-clear {
  background: none; border: none; color: var(--fg4); cursor: pointer;
  padding: 2px; display: flex;
}
.def-search-clear svg { width: 12px; height: 12px; }

.def-filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.def-filter-select {
  background: var(--bg2); border: 1px solid var(--bg3);
  border-radius: var(--radius); color: var(--fg3);
  font-size: 11px; font-family: 'Fira Sans', sans-serif;
  padding: 6px 10px; cursor: pointer; outline: none;
}
.def-filter-select:hover  { border-color: var(--blue); }
.def-filter-select:focus  { border-color: var(--blue); }

.def-filter-clear-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 1px solid var(--bg3);
  border-radius: var(--radius); color: var(--fg4);
  font-size: 11px; padding: 5px 8px; cursor: pointer;
  transition: all var(--transition);
}
.def-filter-clear-btn:hover { border-color: var(--red); color: var(--red-bright); }
.def-filter-clear-btn svg { width: 12px; height: 12px; }

.def-results-info { font-size: 10.5px; color: var(--fg4); white-space: nowrap; margin-left: auto; }
.def-results-sep  { margin: 0 4px; }

/* ── Controls grid ─────────────────────────────────────────────────── */
.def-controls-grid { display: flex; flex-direction: column; gap: 1rem; }

.def-cards-loading {
  display: flex; align-items: center; gap: 8px;
  color: var(--fg4); font-size: 12px; padding: 2rem;
}
.def-cards-loading svg { width: 16px; height: 16px; animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.def-empty-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.5rem; padding: 3rem; color: var(--fg4);
}
.def-empty-state svg { width: 32px; height: 32px; opacity: 0.4; }
.def-empty-state p   { font-size: 13px; }
.def-empty-state button {
  background: var(--bg2); border: 1px solid var(--bg4); color: var(--fg3);
  border-radius: var(--radius); padding: 6px 14px; font-size: 12px; cursor: pointer;
}

.def-domain-section { margin-bottom: 0.5rem; }
.def-domain-section-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700;
  color: var(--domain-color, var(--fg3));
  padding: 0.5rem 0 0.5rem;
  border-bottom: 1px solid var(--bg3);
  margin-bottom: 0.625rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.def-domain-section-header svg { width: 13px; height: 13px; }
.def-ds-count {
  margin-left: auto; font-size: 9px;
  background: var(--bg3); color: var(--fg4);
  padding: 1px 6px; border-radius: 8px; font-family: 'Fira Mono', monospace;
}

.def-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}

/* ── Individual control card ───────────────────────────────────────── */
.def-control-card {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  border-radius: var(--radius-lg);
  padding: 0.875rem;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  position: relative;
  overflow: hidden;
}
.def-control-card:hover {
  border-color: var(--card-accent, var(--blue));
  box-shadow: 0 2px 16px rgba(0,0,0,0.25);
  transform: translateY(-1px);
}
.def-card-accent-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  opacity: 0;
  transition: opacity 0.2s;
}
.def-control-card:hover .def-card-accent-bar { opacity: 1; }
.def-card-changed .def-card-accent-bar { opacity: 1; background: var(--yellow) !important; }
.def-card-gap     { border-color: rgba(204,36,29,0.3); }
.def-card-changed { border-color: rgba(215,153,33,0.5); }
.def-card-critical { }

.def-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.def-card-icon {
  width: 30px; height: 30px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.def-card-icon svg { width: 15px; height: 15px; }
.def-card-head-right { display: flex; align-items: center; gap: 5px; }

.def-card-critical-badge {
  display: flex; align-items: center; color: var(--yellow-bright);
}
.def-card-critical-badge svg { width: 11px; height: 11px; }
.def-card-changed-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--yellow-bright);
}

.def-card-name {
  font-size: 12px; font-weight: 600; color: var(--fg); margin-bottom: 3px;
  line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.def-card-desc {
  font-size: 10.5px; color: var(--fg4); margin-bottom: 0.625rem;
  line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Slider section */
.def-card-slider-section { margin-bottom: 0.5rem; }
.def-card-val-row { display: flex; align-items: baseline; gap: 3px; margin-bottom: 4px; }
.def-card-val    { font-size: 20px; font-weight: 700; font-family: 'Fira Mono', monospace; transition: color 0.3s; }
.def-card-val-label { font-size: 11px; color: var(--fg4); }
.def-card-pct-label { margin-left: auto; font-size: 10px; color: var(--fg4); }

.def-card-slider-wrap {
  position: relative; height: 6px; background: var(--bg3);
  border-radius: 3px; margin-bottom: 3px; overflow: visible;
}
.def-card-slider-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  border-radius: 3px; pointer-events: none; transition: width 0.1s, background 0.3s;
}
.def-control-slider {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: 0; right: 0; width: 100%;
  -webkit-appearance: none; appearance: none;
  background: transparent; outline: none; cursor: pointer;
  margin: 0; padding: 0; height: 20px;
}
.def-control-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--fg); border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  cursor: pointer; transition: transform 0.15s;
}
.def-control-slider::-webkit-slider-thumb:hover { transform: scale(1.25); }
.def-control-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--fg); border: 2px solid var(--bg);
  cursor: pointer;
}
.def-card-slider-labels { display: flex; justify-content: space-between; font-size: 9px; color: var(--fg4); }

/* Tags */
.def-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.def-stage-tag {
  font-size: 9px; padding: 2px 6px; border-radius: 4px; border: 1px solid;
  font-weight: 600; letter-spacing: 0.03em;
}
.def-attck-tag {
  font-size: 9px; padding: 2px 6px; border-radius: 4px;
  background: rgba(168,153,132,0.15); color: var(--fg4);
  border: 1px solid rgba(168,153,132,0.3);
  font-family: 'Fira Mono', monospace;
}

/* Tier badges on cards */
.def-card-tier {
  font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.def-tier-excellent { background: rgba(184,187,38,0.18); color: #b8bb26; border: 1px solid rgba(184,187,38,0.4); }
.def-tier-strong    { background: rgba(152,151,26,0.18); color: #98971a; border: 1px solid rgba(152,151,26,0.4); }
.def-tier-good      { background: rgba(215,153,33,0.18); color: #d79921; border: 1px solid rgba(215,153,33,0.4); }
.def-tier-fair      { background: rgba(69,133,136,0.18);  color: #458588; border: 1px solid rgba(69,133,136,0.4); }
.def-tier-weak      { background: rgba(214,93,14,0.18);   color: #d65d0e; border: 1px solid rgba(214,93,14,0.4); }
.def-tier-critical  { background: rgba(204,36,29,0.18);   color: #cc241d; border: 1px solid rgba(204,36,29,0.4); }

/* Flash animation */
@keyframes defFlash {
  0%,100% { box-shadow: none; }
  30%     { box-shadow: 0 0 0 3px var(--blue-bright); }
}
.def-card-flash { animation: defFlash 1.2s ease-out; }

/* ── Sidebar cards ─────────────────────────────────────────────────── */
.def-sidebar-card {
  background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); overflow: hidden;
}
.def-sc-header {
  display: flex; align-items: center; gap: 7px;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--bg3);
  font-size: 11px; font-weight: 600; color: var(--fg2);
}
.def-sc-header svg { width: 13px; height: 13px; flex-shrink: 0; }
.def-sc-icon svg { width: 13px; height: 13px; flex-shrink: 0; }
.def-sc-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-bright); margin-left: auto;
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(152,151,26,0.4); }
  50%      { opacity: 0.7; box-shadow: 0 0 0 4px rgba(152,151,26,0); }
}

/* Radar */
.def-radar-card canvas { display: block; padding: 0.75rem; }

/* Simulation influence */
.def-sim-influence { padding: 0.625rem 0.875rem; display: flex; flex-direction: column; gap: 8px; }
.def-si-row { display: flex; align-items: center; gap: 8px; }
.def-si-label { display: flex; align-items: center; gap: 5px; min-width: 140px; }
.def-si-label svg { width: 11px; height: 11px; color: var(--fg4); flex-shrink: 0; }
.def-si-label span { font-size: 10px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.def-si-bar-wrap { flex: 1; height: 5px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.def-si-bar { height: 100%; background: var(--yellow); border-radius: 3px; transition: width 0.5s ease; }
.def-si-val { font-size: 10px; font-weight: 700; color: var(--fg3); font-family: 'Fira Mono', monospace; min-width: 30px; text-align: right; }

/* Gaps list */
.def-gaps-list { padding: 0.625rem 0.875rem; display: flex; flex-direction: column; gap: 6px; }
.def-gap-item  { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 4px; border-radius: var(--radius); transition: background 0.15s; }
.def-gap-item:hover { background: var(--bg2); }
.def-gap-icon svg { width: 12px; height: 12px; flex-shrink: 0; }
.def-gap-body  { flex: 1; min-width: 0; }
.def-gap-name  { display: block; font-size: 10.5px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.def-gap-bar-wrap { height: 3px; background: var(--bg3); border-radius: 2px; margin-top: 3px; }
.def-gap-bar   { height: 100%; border-radius: 2px; transition: width 0.5s; }
.def-gap-val   { font-size: 11px; font-weight: 700; color: var(--red-bright); font-family: 'Fira Mono', monospace; flex-shrink: 0; }

/* ── Drawer ─────────────────────────────────────────────────────────── */
.def-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 800;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.def-drawer-overlay.open { opacity: 1; pointer-events: all; }
.def-drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 420px; max-width: 95vw;
  background: var(--bg1); border-left: 1px solid var(--bg3);
  z-index: 801; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
.def-drawer.open { transform: translateX(0); }

.def-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--bg3);
  background: var(--bg0); gap: 0.75rem; flex-shrink: 0;
}
.def-drawer-title-wrap { display: flex; align-items: center; gap: 0.75rem; }
.def-drawer-icon { font-size: 22px; line-height: 1; }
.def-drawer-icon svg { width: 22px; height: 22px; }
.def-drawer-header h3 { font-size: 14px; font-weight: 700; color: var(--fg); margin: 0; }
.def-drawer-domain-badge {
  display: inline-block; font-size: 9px; font-weight: 700;
  padding: 2px 8px; border-radius: 8px; margin-top: 3px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.def-drawer-close {
  background: none; border: 1px solid var(--bg3); color: var(--fg4);
  border-radius: var(--radius); padding: 5px; cursor: pointer;
  display: flex; transition: all var(--transition);
}
.def-drawer-close:hover { border-color: var(--red); color: var(--red-bright); }
.def-drawer-close svg { width: 15px; height: 15px; }

.def-drawer-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; scrollbar-width: thin; scrollbar-color: var(--bg4) transparent; }

/* Drawer contents */
.def-drawer-score-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.def-drawer-score-badge {
  display: flex; align-items: baseline; gap: 3px;
  font-family: 'Fira Mono', monospace; transition: color 0.3s;
}
.def-drawer-score-val { font-size: 36px; font-weight: 700; line-height: 1; }
.def-drawer-score-max { font-size: 14px; color: var(--fg4); }
.def-drawer-tier {
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 8px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.def-drawer-changed-badge {
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px;
  background: rgba(215,153,33,0.2); color: var(--yellow-bright);
  border: 1px solid rgba(215,153,33,0.4);
}
.def-drawer-slider-section { margin-bottom: 1rem; }
.def-drawer-slider-wrap {
  position: relative; height: 8px; background: var(--bg3); border-radius: 4px;
}
.def-drawer-slider-fill {
  position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px;
  pointer-events: none; transition: width 0.1s, background 0.3s;
}
.def-drawer-slider {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: 0; width: 100%; height: 24px;
}
.def-drawer-slider-labels { display: flex; justify-content: space-between; font-size: 9px; color: var(--fg4); margin-top: 4px; }
.def-drawer-section { margin-bottom: 1rem; }
.def-drawer-section-title { font-size: 10px; font-weight: 700; color: var(--fg4); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 6px; }
.def-drawer-desc { font-size: 12px; color: var(--fg3); line-height: 1.6; margin: 0; }
.def-drawer-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.def-stage-tag-lg {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; padding: 4px 9px; border-radius: 5px; border: 1px solid;
}
.def-stage-tag-lg svg { width: 10px; height: 10px; }
.def-attck-tag-lg {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; padding: 4px 9px; border-radius: 5px;
  background: rgba(104,157,106,0.12); border: 1px solid rgba(104,157,106,0.3);
  color: var(--aqua-bright); font-family: 'Fira Mono', monospace;
}
.def-attck-tag-lg svg { width: 10px; height: 10px; }
.def-scenario-tag {
  font-size: 10px; padding: 4px 9px; border-radius: 5px;
  background: rgba(215,153,33,0.12); border: 1px solid rgba(215,153,33,0.3); color: var(--yellow-bright);
}
.def-no-tags { font-size: 11px; color: var(--fg4); }
.def-drawer-impact-grid { display: flex; flex-direction: column; gap: 6px; }
.def-dim-item { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--fg3); }
.def-dim-item svg { width: 13px; height: 13px; flex-shrink: 0; }
.def-drawer-baseline-row {
  display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--fg3);
}
.def-drawer-gap-badge { font-size: 9px; padding: 2px 7px; border-radius: 6px; background: rgba(204,36,29,0.15); color: var(--red-bright); border: 1px solid rgba(204,36,29,0.3); }
.def-drawer-ok-badge  { font-size: 9px; padding: 2px 7px; border-radius: 6px; background: rgba(152,151,26,0.15); color: var(--green-bright); border: 1px solid rgba(152,151,26,0.3); }
.def-drawer-actions { display: flex; gap: 8px; padding-top: 0.5rem; border-top: 1px solid var(--bg3); margin-top: 1rem; }
.def-drawer-actions .btn-def-primary, .def-drawer-actions .btn-def-secondary { flex: 1; justify-content: center; }

/* ── Presets panel ─────────────────────────────────────────────────── */
.def-panel-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 900;
}
.def-panel {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius-xl, 14px); z-index: 901;
  max-width: 820px; width: 95vw; max-height: 85vh; overflow-y: auto;
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0,0,0,0.5));
  padding: 1.25rem;
}
.def-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 14px; font-weight: 700; color: var(--fg);
}
.def-panel-header svg { width: 15px; height: 15px; margin-right: 6px; }
.def-panel-header button {
  background: none; border: none; color: var(--fg4); cursor: pointer;
}
.def-panel-desc { font-size: 11px; color: var(--fg4); margin-bottom: 1rem; }
.def-presets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.625rem;
}
.def-preset-card {
  background: var(--bg2); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); padding: 0.875rem;
  cursor: pointer; transition: all var(--transition);
}
.def-preset-card:hover { border-color: var(--blue); background: var(--bg3); transform: translateY(-2px); }
.def-preset-icon { margin-bottom: 6px; }
.def-preset-icon svg { width: 20px; height: 20px; }
.def-preset-label { font-size: 12px; font-weight: 700; color: var(--fg); margin-bottom: 4px; }
.def-preset-desc  { font-size: 10.5px; color: var(--fg4); line-height: 1.4; }

/* ── Bottom sections ───────────────────────────────────────────────── */
.def-bottom {
  padding: 0 1.25rem 2.5rem;
  display: flex; flex-direction: column; gap: 0.875rem;
}
.def-section-card {
  background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); overflow: hidden;
}
.def-section-header {
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid var(--bg3);
}
.def-section-sub { font-size: 10px; color: var(--fg4); font-weight: 400; margin-left: 4px; }

/* Scenario readiness */
.def-scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.625rem; padding: 0.875rem;
}
.def-scenario-item {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: var(--radius);
  padding: 8px 10px;
}
.def-scn-icon svg { width: 14px; height: 14px; flex-shrink: 0; }
.def-scn-name { font-size: 10.5px; font-weight: 600; color: var(--fg3); white-space: nowrap; min-width: 90px; }
.def-scn-bar-wrap { flex: 1; height: 4px; background: var(--bg4); border-radius: 2px; overflow: hidden; }
.def-scn-bar { height: 100%; border-radius: 2px; transition: width 0.5s ease; }
.def-scn-val { font-size: 10px; font-weight: 700; font-family: 'Fira Mono', monospace; color: var(--fg3); min-width: 28px; text-align: right; }
.def-scn-badge { font-size: 8.5px; font-weight: 700; padding: 2px 6px; border-radius: 5px; text-transform: uppercase; white-space: nowrap; }
.def-badge-good { background: rgba(152,151,26,0.18); color: var(--green-bright); border: 1px solid rgba(152,151,26,0.35); }
.def-badge-fair { background: rgba(215,153,33,0.18); color: var(--yellow-bright); border: 1px solid rgba(215,153,33,0.35); }
.def-badge-weak { background: rgba(204,36,29,0.18);  color: var(--red-bright);   border: 1px solid rgba(204,36,29,0.35); }

/* Charts row */
.def-charts-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
}
.def-chart-card { }
.def-chart-card canvas { display: block; padding: 0.5rem 0.75rem 0.75rem; }
.def-donut-wrap { position: relative; display: inline-flex; justify-content: center; width: 100%; }
.def-donut-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  text-align: center; pointer-events: none;
}
.def-donut-val { font-size: 22px; font-weight: 700; color: var(--fg); font-family: 'Fira Mono', monospace; }
.def-donut-lbl { font-size: 9px; color: var(--fg4); }
.def-donut-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  padding: 0 0.75rem 0.75rem; font-size: 9.5px; color: var(--fg4);
}
.def-dl-item { display: flex; align-items: center; gap: 4px; }
.def-dl-dot  { width: 8px; height: 8px; border-radius: 50%; }

/* Recs + compare row */
.def-recs-compare-row {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 0.875rem;
  align-items: start;
}
.def-recs-list { padding: 0.75rem; display: flex; flex-direction: column; gap: 5px; }
.def-rec-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: var(--bg2); border: 1px solid var(--bg3);
  border-radius: var(--radius); cursor: pointer; transition: all var(--transition);
}
.def-rec-item:hover { border-color: var(--blue); background: var(--bg3); }
.def-rec-icon svg { width: 14px; height: 14px; flex-shrink: 0; }
.def-rec-body { flex: 1; min-width: 0; }
.def-rec-name { font-size: 11.5px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.def-rec-meta { display: flex; align-items: center; gap: 5px; margin-top: 2px; flex-wrap: wrap; }
.def-rec-domain { font-size: 9px; font-weight: 600; }
.def-rec-stage {
  font-size: 9px; padding: 1px 5px; border-radius: 4px;
  background: rgba(69,133,136,0.15); color: var(--aqua-bright);
  border: 1px solid rgba(69,133,136,0.3);
}
.def-rec-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.def-rec-score { font-size: 14px; font-weight: 700; color: var(--red-bright); font-family: 'Fira Mono', monospace; }
.def-rec-arrow { font-size: 9px; color: var(--fg4); font-family: 'Fira Mono', monospace; }
.def-rec-effort { font-size: 8.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.def-effort-high   { background: rgba(204,36,29,0.15); color: var(--red-bright); }
.def-effort-medium { background: rgba(215,153,33,0.15); color: var(--yellow-bright); }
.def-effort-low    { background: rgba(152,151,26,0.15); color: var(--green-bright); }

/* Compare */
.def-compare-card  { }
.def-compare-close-btn { margin-left: auto; background: none; border: none; color: var(--fg4); cursor: pointer; display: flex; }
.def-compare-close-btn svg { width: 14px; height: 14px; }
.def-compare-selectors { display: flex; align-items: center; gap: 8px; padding: 0.75rem; }
.def-compare-vs { font-size: 10px; color: var(--fg4); font-weight: 600; }
.def-compare-card canvas { padding: 0 0.75rem 0.75rem; }

/* Heatmap + saved row */
.def-heatmap-saved-row {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0.875rem;
  align-items: start;
}
.def-heatmap-wrap { padding: 0.875rem; display: flex; flex-direction: column; gap: 5px; }
.def-hm-row { display: flex; align-items: center; gap: 8px; }
.def-hm-label {
  display: flex; align-items: center; gap: 5px;
  min-width: 90px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.def-hm-label svg { width: 11px; height: 11px; flex-shrink: 0; }
.def-hm-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.def-hm-cells { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; }
.def-hm-cell {
  width: 16px; height: 16px; border-radius: 3px; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.def-hm-cell:hover { transform: scale(1.4); box-shadow: 0 2px 8px rgba(0,0,0,0.4); z-index: 2; }

/* Saved baselines */
.def-saved-list { padding: 0.75rem; display: flex; flex-direction: column; gap: 6px; }
.def-saved-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--bg2); border: 1px solid var(--bg3);
  border-radius: var(--radius);
}
.def-saved-body { flex: 1; min-width: 0; }
.def-saved-name { font-size: 11px; font-weight: 600; color: var(--fg3); }
.def-saved-meta { font-size: 9px; color: var(--fg4); }
.def-saved-score { font-size: 16px; font-weight: 700; font-family: 'Fira Mono', monospace; flex-shrink: 0; }
.def-saved-load {
  background: var(--bg3); border: 1px solid var(--bg4); color: var(--fg4);
  border-radius: var(--radius); padding: 4px 7px; cursor: pointer;
  display: flex; align-items: center; transition: all var(--transition);
}
.def-saved-load:hover { border-color: var(--blue); color: var(--blue-bright); }
.def-saved-load svg { width: 12px; height: 12px; }
.def-save-new-wrap { display: flex; gap: 6px; padding: 0.75rem; border-top: 1px solid var(--bg3); }
.def-save-name-input {
  flex: 1; background: var(--bg2); border: 1px solid var(--bg3);
  border-radius: var(--radius); color: var(--fg); font-size: 11px;
  font-family: 'Fira Sans', sans-serif; padding: 6px 10px; outline: none;
}
.def-save-name-input:focus { border-color: var(--blue); }
.def-save-new-wrap .btn-def-primary { white-space: nowrap; }

/* ── Toast ─────────────────────────────────────────────────────────── */
.def-toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1100;
  background: var(--bg2); border: 1px solid var(--green);
  border-radius: var(--radius-lg); padding: 0.75rem 1rem;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--fg2);
  box-shadow: var(--shadow-lg);
  transform: translateY(8px); opacity: 0;
  transition: all 0.25s ease;
}
.def-toast svg { width: 15px; height: 15px; color: var(--green-bright); flex-shrink: 0; }
.def-toast-show { transform: translateY(0); opacity: 1; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .def-main-layout { grid-template-columns: 1fr 240px; }
  .def-charts-row  { grid-template-columns: 1fr 1fr; }
  .def-recs-compare-row { grid-template-columns: 1fr; }
  .def-compare-card { display: block !important; }
}
@media (max-width: 1024px) {
  .def-main-layout { grid-template-columns: 1fr; }
  .def-main-right  { position: static; max-height: none; }
  .def-charts-row  { grid-template-columns: 1fr; }
  .def-heatmap-saved-row { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .def-cards-row { grid-template-columns: 1fr; }
  .def-scenario-grid { grid-template-columns: 1fr; }
  .def-presets-grid  { grid-template-columns: 1fr 1fr; }
  .def-page-header   { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESULTS & REPORTS — INDEX PAGE  (res-*, rrc-*)
   ═══════════════════════════════════════════════════════════════════════ */

.results-page .page-content { padding: 0; }

/* ── Page header ──────────────────────────────────────────────────────── */
.res-page-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; background: var(--bg1);
  border-bottom: 1px solid var(--bg3); gap: 12px;
}
.res-ph-left { display: flex; align-items: center; gap: 12px; }
.res-ph-icon {
  width: 40px; height: 40px; background: var(--bg2); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center;
}
.res-ph-icon svg { width: 20px; height: 20px; color: var(--blue-bright); }
.res-ph-title { font-size: 1.15rem; font-weight: 700; color: var(--fg); margin: 0; line-height: 1.2; }
.res-ph-sub   { font-size: 11px; color: var(--fg4); margin: 2px 0 0; }
.res-ph-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Layout toggle */
.res-layout-toggle { display: flex; background: var(--bg2); border: 1px solid var(--bg3); border-radius: var(--radius); overflow: hidden; }
.rlt-btn {
  background: none; border: none; color: var(--fg4); cursor: pointer;
  padding: 6px 10px; display: flex; align-items: center; transition: all var(--transition);
}
.rlt-btn svg { width: 14px; height: 14px; }
.rlt-btn:hover { color: var(--fg2); background: var(--bg3); }
.rlt-btn.active { color: var(--yellow-bright); background: var(--bg3); }

/* Buttons */
.btn-res-primary {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue); color: var(--bg); border: none;
  border-radius: var(--radius); padding: 7px 14px; font-size: 12px; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: all var(--transition);
}
.btn-res-primary:hover { background: var(--blue-bright); }
.btn-res-primary svg { width: 14px; height: 14px; }
.btn-res-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg2); color: var(--fg3); border: 1px solid var(--bg4);
  border-radius: var(--radius); padding: 7px 12px; font-size: 12px; font-weight: 500;
  cursor: pointer; text-decoration: none; transition: all var(--transition);
}
.btn-res-secondary:hover { border-color: var(--blue); color: var(--blue-bright); }
.btn-res-secondary svg { width: 14px; height: 14px; }

/* ── Summary band ─────────────────────────────────────────────────────── */
.res-summary-band {
  display: flex; flex-wrap: wrap; gap: 0;
  background: var(--bg1); border-bottom: 1px solid var(--bg3);
}
.res-kpi-card {
  display: flex; align-items: center; gap: 10px;
  padding: 0.9rem 1.25rem;
  border-right: 1px solid var(--bg3);
  flex: 1; min-width: 130px;
}
.res-kpi-card.res-kpi-wide { flex: 2; min-width: 200px; }
.res-kpi-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.res-kpi-icon svg { width: 18px; height: 18px; }
.res-kpi-body { min-width: 0; }
.res-kpi-val  { font-size: 1.2rem; font-weight: 700; font-family: 'Fira Mono', monospace; line-height: 1.1; }
.res-kpi-label{ font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg4); margin-top: 2px; }

/* ── Analytics row ────────────────────────────────────────────────────── */
.res-analytics-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0;
  border-bottom: 1px solid var(--bg3);
}
.res-chart-card {
  background: var(--bg1); padding: 1rem 1.25rem;
  border-right: 1px solid var(--bg3);
}
.res-chart-card:last-child { border-right: none; }
.res-chart-wide { grid-column: 1; }
.res-chart-wide canvas { height: 160px !important; max-height: 160px; }
.res-chart-header {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--fg3);
  margin-bottom: 0.75rem;
}
.res-chart-header svg { width: 14px; height: 14px; }
.res-chart-legend { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 9px; color: var(--fg4); }
.rcl-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.res-donut-wrap { display: flex; align-items: center; justify-content: center; height: 180px; }
.res-donut-wrap canvas { height: 180px !important; max-height: 180px; }

/* ── Main tabs ────────────────────────────────────────────────────────── */
.res-main-tabs {
  display: flex; border-bottom: 1px solid var(--bg3);
  background: var(--bg1); padding: 0 1rem;
}
.res-tab {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--fg4); cursor: pointer; padding: 0.75rem 1rem; font-size: 12px; font-weight: 500;
  transition: all var(--transition);
}
.res-tab svg { width: 14px; height: 14px; }
.res-tab:hover { color: var(--fg2); }
.res-tab.active { color: var(--yellow-bright); border-bottom-color: var(--yellow); }
.res-tab-badge {
  background: var(--bg3); color: var(--fg4); border-radius: 9px;
  padding: 0 5px; font-size: 9px; font-weight: 700;
}

/* Tab panels */
.res-tab-panel { display: none; }
.res-tab-panel.active { display: block; }

/* ── Filter bar ───────────────────────────────────────────────────────── */
.res-filter-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 0.75rem 1.25rem; background: var(--bg); border-bottom: 1px solid var(--bg3);
}
.res-search-box { position: relative; flex: 1; min-width: 220px; max-width: 360px; }
.res-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; color: var(--fg4); pointer-events: none;
}
.res-search-input {
  width: 100%; background: var(--bg2); border: 1px solid var(--bg3);
  border-radius: var(--radius); color: var(--fg); font-family: 'Fira Sans', sans-serif;
  font-size: 12px; padding: 7px 10px 7px 30px; outline: none;
}
.res-search-input:focus { border-color: var(--blue); }
.res-filter-group { display: flex; gap: 6px; flex-wrap: wrap; }
.res-select {
  background: var(--bg2); border: 1px solid var(--bg3); color: var(--fg3);
  border-radius: var(--radius); font-size: 11px; padding: 6px 8px; outline: none;
  cursor: pointer; transition: border-color var(--transition);
}
.res-select:focus { border-color: var(--blue); }
.res-filter-presets { display: flex; gap: 4px; }
.res-preset-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg2); border: 1px solid var(--bg3); color: var(--fg4);
  border-radius: var(--radius); font-size: 10px; padding: 5px 8px; cursor: pointer;
  transition: all var(--transition);
}
.res-preset-btn:hover { border-color: var(--yellow); color: var(--yellow-bright); }
.res-preset-btn svg { width: 10px; height: 10px; }
.res-filter-info { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg4); margin-left: auto; }
.res-clear-btn {
  background: none; border: none; color: var(--fg4); cursor: pointer; padding: 2px;
  display: flex; align-items: center; transition: color var(--transition);
}
.res-clear-btn:hover { color: var(--red-bright); }
.res-clear-btn svg { width: 13px; height: 13px; }

/* Compare bar */
.res-compare-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 0.6rem 1.25rem; background: rgba(69,133,136,.1);
  border: 1px solid var(--aqua); border-left: none; border-right: none;
  font-size: 12px; color: var(--fg3);
}
.res-compare-bar-info { display: flex; align-items: center; gap: 6px; flex: 1; }
.res-compare-bar-info svg { width: 14px; height: 14px; }

/* ── Run cards grid ───────────────────────────────────────────────────── */
.res-runs-layout { padding: 1.25rem; }
.res-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.res-run-card {
  background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); overflow: hidden; position: relative;
  transition: border-color var(--transition), transform var(--transition);
  display: flex; flex-direction: column;
}
.res-run-card:hover { border-color: var(--bg4); transform: translateY(-1px); }

/* accent bar */
.rrc-accent { height: 3px; width: 100%; }

/* compare checkbox */
.rrc-select-check {
  position: absolute; top: 14px; left: 10px; z-index: 2;
  opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.res-compare-mode .rrc-select-check { opacity: 1; pointer-events: auto; }

/* card header */
.rrc-header { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px 6px; }
.rrc-title-block { flex: 1; min-width: 0; }
.rrc-name { font-size: 12px; font-weight: 600; color: var(--fg); margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrc-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.rrc-scenario-badge {
  font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 3px;
  border: 1px solid; white-space: nowrap; max-width: 160px;
  overflow: hidden; text-overflow: ellipsis;
}
.rrc-env-badge {
  font-size: 9px; padding: 2px 6px; border-radius: 3px;
  background: var(--bg3); color: var(--fg4); white-space: nowrap;
}

/* score ring */
.rrc-score-ring { position: relative; width: 48px; height: 48px; flex-shrink: 0; }
.rrc-svg { width: 48px; height: 48px; }
.rrc-score-val {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 11px; font-weight: 700; font-family: 'Fira Mono', monospace;
}

/* metrics grid */
.rrc-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; padding: 4px 12px 8px; }
.rrc-metric { display: flex; flex-direction: column; gap: 2px; }
.rrc-m-bar-wrap { height: 3px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.rrc-m-bar { height: 100%; border-radius: 2px; transition: width 0.4s ease; }
.rrc-m-val { font-size: 10px; font-weight: 700; font-family: 'Fira Mono', monospace; color: var(--fg2); }
.rrc-m-lbl { font-size: 8px; color: var(--fg4); text-transform: uppercase; letter-spacing: .03em; }

/* meta row */
.rrc-meta {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 0 12px 6px; font-size: 9px; color: var(--fg4);
}
.rrc-meta-sep { color: var(--bg4); }
.rrc-time, .rrc-assets-count { display: flex; align-items: center; gap: 2px; }
.rrc-time svg, .rrc-assets-count svg { width: 9px; height: 9px; }

/* stealth badges */
.stealth-badge {
  font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: .04em; border: 1px solid;
}
.stealth-loud     { background: rgba(204,36,29,.15);  color: var(--red-bright);    border-color: rgba(204,36,29,.3); }
.stealth-balanced { background: rgba(215,153,33,.15); color: var(--yellow-bright); border-color: rgba(215,153,33,.3); }
.stealth-stealthy { background: rgba(152,151,26,.15); color: var(--green-bright);  border-color: rgba(152,151,26,.3); }

/* action strip */
.rrc-actions {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 10px; border-top: 1px solid var(--bg3);
  margin-top: auto;
}
.btn-rrc-primary {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg3); color: var(--fg3); border: none;
  border-radius: var(--radius); font-size: 10px; font-weight: 600; padding: 5px 9px;
  cursor: pointer; text-decoration: none; transition: all var(--transition); flex: 1;
  justify-content: center;
}
.btn-rrc-primary:hover { background: var(--blue); color: var(--bg); }
.btn-rrc-primary svg { width: 11px; height: 11px; }
.btn-rrc-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--bg3); color: var(--fg4);
  border-radius: var(--radius); width: 28px; height: 28px; cursor: pointer;
  text-decoration: none; transition: all var(--transition);
}
.btn-rrc-ghost:hover { border-color: var(--blue); color: var(--blue-bright); }
.btn-rrc-ghost svg { width: 12px; height: 12px; }

/* empty filter state */
.res-empty-filter {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 3rem 1rem; color: var(--fg4); font-size: 12px;
}
.res-empty-filter svg { width: 28px; height: 28px; }
.res-empty-filter button {
  background: var(--bg2); border: 1px solid var(--bg3); color: var(--fg3);
  border-radius: var(--radius); font-size: 11px; padding: 6px 12px; cursor: pointer;
}

/* ── Table layout ─────────────────────────────────────────────────────── */
.res-table-wrap { overflow-x: auto; }
.res-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.res-table thead th {
  background: var(--bg1); color: var(--fg4); font-size: 9px; text-transform: uppercase;
  letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--bg3);
  text-align: left; position: sticky; top: 0; z-index: 1; white-space: nowrap;
}
.res-table tbody tr { border-bottom: 1px solid var(--bg3); transition: background var(--transition); }
.res-table tbody tr:hover { background: var(--bg1); }
.res-table td { padding: 8px 10px; color: var(--fg3); }
.res-td-name a { color: var(--fg2); text-decoration: none; font-weight: 600; }
.res-td-name a:hover { color: var(--blue-bright); }
.res-td-scen { font-size: 9px; color: var(--fg4); }
.res-td-time { color: var(--fg4); white-space: nowrap; }
.res-td-actions { display: flex; gap: 4px; }

/* ── Timeline layout ──────────────────────────────────────────────────── */
.res-timeline-layout { padding: 0 0 0 2rem; }
.res-tl-item { display: flex; position: relative; padding: 0.6rem 0; gap: 12px; align-items: flex-start; }
.res-tl-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  margin-top: 4px; position: relative; z-index: 1; border: 2px solid var(--bg);
}
.res-tl-line {
  position: absolute; left: 4px; top: 24px; bottom: -10px;
  width: 1px; background: var(--bg3);
}
.res-tl-item:last-child .res-tl-line { display: none; }
.res-tl-body { flex: 1; min-width: 0; padding-bottom: 0.5rem; }
.res-tl-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.res-tl-header strong { font-size: 14px; font-family: 'Fira Mono', monospace; }
.res-tl-name { font-size: 12px; font-weight: 600; color: var(--fg); }
.res-tl-scen { font-size: 10px; }
.res-tl-time { font-size: 9px; color: var(--fg4); margin-left: auto; }
.res-tl-metrics { display: flex; gap: 8px; font-size: 9px; color: var(--fg4); }
.res-tl-actions { display: flex; gap: 6px; margin-top: 4px; }
.res-tl-actions .btn-rrc-ghost { width: auto; padding: 3px 8px; font-size: 9px; }

/* ── Compare panel ────────────────────────────────────────────────────── */
.res-compare-panel {
  margin: 1rem 1.25rem; background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); overflow: hidden;
}
.res-cp-header {
  display: flex; align-items: center; gap: 8px;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--bg3);
  font-size: 13px; font-weight: 600; color: var(--fg2);
}
.res-cp-header svg { width: 16px; height: 16px; }
.res-cp-close {
  margin-left: auto; background: none; border: none; color: var(--fg4); cursor: pointer;
}
.res-cp-close svg { width: 16px; height: 16px; }
.res-cp-body { padding: 1rem; overflow-x: auto; }

/* Compare table */
.res-cp-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.res-cp-table th, .res-cp-table td {
  border: 1px solid var(--bg3); padding: 8px 10px; text-align: center;
}
.res-cp-table th { background: var(--bg2); color: var(--fg4); font-size: 9px; text-transform: uppercase; }
.res-cp-table td:first-child { text-align: left; font-weight: 600; color: var(--fg3); }

/* ── Reports tab ──────────────────────────────────────────────────────── */
.res-reports-layout {
  display: grid; grid-template-columns: 1fr 340px; gap: 0;
  padding: 1.25rem; gap: 1.25rem;
}
.res-reports-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.75rem;
}
.res-reports-header h3 { font-size: 13px; font-weight: 600; color: var(--fg2); margin: 0; }
.res-reports-grid { display: flex; flex-direction: column; gap: 8px; }
.res-report-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); padding: 0.75rem 1rem;
  transition: border-color var(--transition);
}
.res-report-card:hover { border-color: var(--bg4); }
.res-rpt-icon {
  width: 36px; height: 36px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.res-rpt-icon svg { width: 18px; height: 18px; }
.res-rpt-body { flex: 1; min-width: 0; }
.res-rpt-name { font-size: 12px; font-weight: 600; color: var(--fg); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-rpt-meta { font-size: 9px; color: var(--fg4); display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.res-rpt-type-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; }
.res-rpt-actions { display: flex; gap: 4px; }

/* Report generator */
.res-report-gen-panel {
  background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); overflow: hidden; align-self: flex-start;
}
.res-rg-header {
  display: flex; align-items: center; gap: 8px;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--bg3);
  font-size: 12px; font-weight: 600; color: var(--fg2);
}
.res-rg-header svg { width: 15px; height: 15px; }
.res-rg-body { padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 12px; }
.res-rg-row { display: flex; flex-direction: column; gap: 4px; }
.res-rg-label { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg4); }
.res-rg-select { width: 100%; }
.res-rg-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.res-rg-type-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--bg2); border: 1px solid var(--bg3); color: var(--fg4);
  border-radius: var(--radius); padding: 8px 6px; cursor: pointer; font-size: 9px;
  transition: all var(--transition);
}
.res-rg-type-btn svg { width: 14px; height: 14px; }
.res-rg-type-btn:hover { border-color: var(--rtype-color); color: var(--rtype-color); }
.res-rg-type-btn.active { border-color: var(--rtype-color); color: var(--rtype-color); background: color-mix(in srgb, var(--rtype-color) 10%, var(--bg2)); }
.res-rg-generate-btn { width: 100%; justify-content: center; }
.res-rg-note { font-size: 9px; color: var(--fg4); margin: 0; line-height: 1.5; }

/* ── Preview drawer ───────────────────────────────────────────────────── */
.res-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 400;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.res-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.res-preview-drawer {
  position: fixed; right: 0; top: 0; bottom: 0; width: 400px; max-width: 95vw;
  background: var(--bg1); border-left: 1px solid var(--bg3);
  display: flex; flex-direction: column; z-index: 401;
  transform: translateX(100%); transition: transform 0.25s ease;
}
.res-preview-drawer.open { transform: translateX(0); }
.res-pd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1rem; border-bottom: 1px solid var(--bg3); flex-shrink: 0;
}
.res-pd-header h3 { font-size: 13px; font-weight: 600; color: var(--fg); margin: 0; }
.res-pd-header button {
  background: none; border: none; color: var(--fg4); cursor: pointer;
}
.res-pd-header button svg { width: 16px; height: 16px; }
.res-pd-body { flex: 1; overflow-y: auto; padding: 1rem; }
.res-pd-footer {
  padding: 0.75rem 1rem; border-top: 1px solid var(--bg3); flex-shrink: 0;
  display: flex; gap: 8px;
}

/* Preview drawer content elements */
.rpd-score-block { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.rpd-score-ring { width: 60px; height: 60px; position: relative; flex-shrink: 0; }
.rpd-score-ring svg { width: 60px; height: 60px; }
.rpd-score-val {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 14px; font-weight: 700; font-family: 'Fira Mono', monospace;
}
.rpd-score-meta { flex: 1; }
.rpd-score-name { font-size: 12px; font-weight: 600; color: var(--fg); margin-bottom: 4px; }
.rpd-score-sub  { font-size: 10px; color: var(--fg4); }
.rpd-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 1rem; }
.rpd-metric { background: var(--bg2); border-radius: var(--radius); padding: 8px 10px; }
.rpd-m-val  { font-size: 16px; font-weight: 700; font-family: 'Fira Mono', monospace; }
.rpd-m-lbl  { font-size: 9px; color: var(--fg4); margin-top: 2px; }

/* ── Export menu ──────────────────────────────────────────────────────── */
.res-export-menu {
  position: fixed; background: var(--bg2); border: 1px solid var(--bg4);
  border-radius: var(--radius-lg); z-index: 500; min-width: 160px;
  overflow: hidden; box-shadow: var(--shadow-lg);
}
.res-export-menu a {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px; font-size: 11px; color: var(--fg3); text-decoration: none;
  transition: background var(--transition);
}
.res-export-menu a svg { width: 13px; height: 13px; }
.res-export-menu a:hover { background: var(--bg3); color: var(--fg); }

/* ═══════════════════════════════════════════════════════════════════════

/* ═══════════════════════════════════════════════════════════════════════
   RESULTS — SHOW PAGE  (rsh-*)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── KPI band ─────────────────────────────────────────────────────────── */
.rsh-kpi-band {
  display: flex; flex-wrap: wrap; background: var(--bg1);
  border-bottom: 1px solid var(--bg3);
}
.rsh-kpi-card {
  display: flex; align-items: center; gap: 10px;
  padding: 0.8rem 1.1rem; border-right: 1px solid var(--bg3);
  flex: 1; min-width: 100px;
}
.rsh-kpi-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rsh-kpi-icon svg { width: 16px; height: 16px; }
.rsh-kpi-body { min-width: 0; }
.rsh-kpi-val  { font-size: 1.05rem; font-weight: 700; font-family: 'Fira Mono', monospace; line-height: 1.1; }
.rsh-kpi-lbl  { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg4); margin-top: 2px; }

.results-show-page .page-content { padding: 0; }

/* ── Page header ──────────────────────────────────────────────────────── */
.rsh-page-header {
  background: var(--bg1); border-bottom: 1px solid var(--bg3);
  position: sticky; top: 0; z-index: 100;
}
.rsh-ph-left {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 0.9rem 1.25rem; flex-wrap: wrap;
}
.rsh-ph-back {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; margin-top: 2px;
  font-size: 10px; color: var(--fg4); text-decoration: none;
  border: 1px solid var(--bg3); border-radius: var(--radius); padding: 4px 8px;
  transition: all var(--transition);
}
.rsh-ph-back:hover { color: var(--blue-bright); border-color: var(--blue); }
.rsh-ph-back svg { width: 11px; height: 11px; }
.rsh-ph-title-row { flex: 1; min-width: 0; }
.rsh-ph-title { font-size: 1.05rem; font-weight: 700; color: var(--fg); margin: 0 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rsh-ph-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.rsh-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 600; padding: 2px 7px; border-radius: 3px;
  background: var(--bg2); border: 1px solid var(--bg3); color: var(--fg4);
}
.rsh-badge svg { width: 10px; height: 10px; }
.rsh-badge-scenario { background: rgba(215,153,33,.1); border-color: rgba(215,153,33,.3); color: var(--yellow-bright); }
.rsh-badge-env      { background: rgba(69,133,136,.1); border-color: rgba(69,133,136,.3); color: var(--aqua); }
.rsh-badge-stealth  { background: rgba(152,151,26,.1); border-color: rgba(152,151,26,.3); color: var(--green-bright); }
.rsh-badge-status--completed { background: rgba(152,151,26,.1); border-color: rgba(152,151,26,.3); color: var(--green-bright); }
.rsh-badge-status--running   { background: rgba(215,153,33,.1); border-color: rgba(215,153,33,.3); color: var(--yellow-bright); }
.rsh-badge-status--failed    { background: rgba(204,36,29,.1);  border-color: rgba(204,36,29,.3);  color: var(--red-bright); }

.rsh-ph-right {
  display: flex; align-items: center; gap: 10px;
  padding: 0.6rem 1.25rem; border-top: 1px solid var(--bg3);
  background: var(--bg);
}
.rsh-score-ring { position: relative; width: 60px; height: 60px; flex-shrink: 0; }
.rsh-score-ring svg { width: 60px; height: 60px; }
.rsh-risk-badge {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 4px;
  border: 1px solid; flex-shrink: 0;
}
.rsh-ph-metrics { display: flex; gap: 0; flex: 1; overflow-x: auto; }
.rsh-ph-metric {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-right: 1px solid var(--bg3);
  font-size: 11px; white-space: nowrap; flex-shrink: 0;
}
.rsh-ph-metric svg { width: 12px; height: 12px; color: var(--fg4); }
.rsh-ph-metric-val { font-weight: 700; font-family: 'Fira Mono', monospace; color: var(--fg2); }
.rsh-ph-metric-lbl { font-size: 9px; color: var(--fg4); }

/* ── Tab bar ──────────────────────────────────────────────────────────── */
.rsh-tab-bar {
  display: flex; background: var(--bg1); border-bottom: 1px solid var(--bg3);
  overflow-x: auto; scrollbar-width: none; padding: 0 0.5rem;
}
.rsh-tab-bar::-webkit-scrollbar { display: none; }
.rsh-tab {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--fg4); cursor: pointer; padding: 0.65rem 1rem;
  font-size: 11px; font-weight: 500; font-family: 'Fira Sans', sans-serif;
  white-space: nowrap; transition: all var(--transition);
}
.rsh-tab svg { width: 12px; height: 12px; }
.rsh-tab:hover  { color: var(--fg2); }
.rsh-tab.active { color: var(--yellow-bright); border-bottom-color: var(--yellow); }
.rsh-tab-count  { background: var(--bg3); color: var(--fg4); border-radius: 8px; padding: 0 4px; font-size: 8px; font-weight: 700; }

/* ── Tab panels ───────────────────────────────────────────────────────── */
.rsh-tab-panel        { display: none; padding: 1.25rem; max-width: 100%; }
.rsh-tab-panel.active { display: block; }

/* ── Empty state ──────────────────────────────────────────────────────── */
.rsh-empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 3rem; color: var(--fg4); font-size: 12px; text-align: center;
}
.rsh-empty-state svg { width: 30px; height: 30px; }

/* ── Executive Summary ────────────────────────────────────────────────── */
.rsh-risk-banner {
  display: flex; align-items: center; gap: 8px;
  border-radius: var(--radius-lg); padding: 0.7rem 1rem;
  border: 1px solid; margin-bottom: 1rem; font-size: 12px; font-weight: 600;
}
.rsh-risk-banner svg { width: 15px; height: 15px; }
.rsh-risk-banner.risk-critical { background: rgba(204,36,29,.1);  border-color: rgba(204,36,29,.35);  color: var(--red-bright); }
.rsh-risk-banner.risk-high     { background: rgba(254,128,25,.1); border-color: rgba(254,128,25,.35); color: var(--orange); }
.rsh-risk-banner.risk-medium   { background: rgba(215,153,33,.1); border-color: rgba(215,153,33,.35); color: var(--yellow-bright); }
.rsh-risk-banner.risk-low      { background: rgba(152,151,26,.1); border-color: rgba(152,151,26,.35); color: var(--green-bright); }

.rsh-exec-headline  { font-size: 1rem; font-weight: 600; color: var(--fg); margin: 0 0 0.75rem; line-height: 1.45; }
.rsh-exec-narrative { font-size: 12px; color: var(--fg3); line-height: 1.65; margin-bottom: 1rem; }

.rsh-key-facts {
  background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius-lg);
  padding: 0.75rem 1rem 0.75rem 1.5rem; margin-bottom: 1rem;
  display: flex; flex-direction: column; gap: 5px;
}
.rsh-key-facts li { font-size: 11px; color: var(--fg3); display: flex; align-items: flex-start; gap: 5px; }
.rsh-key-facts li svg { width: 11px; height: 11px; color: var(--yellow-bright); flex-shrink: 0; margin-top: 2px; }

.rsh-crown-callout {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius-lg);
  padding: 0.75rem 1rem; margin-bottom: 1rem;
}
.rsh-crown-callout svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--fg4); }
.rsh-crown-callout--danger { border-color: rgba(204,36,29,.3); background: rgba(204,36,29,.05); }
.rsh-crown-callout--danger svg { color: var(--red-bright); }
.rsh-crown-callout--safe svg   { color: var(--green-bright); }
.rsh-crown-callout strong { display: block; font-size: 11px; font-weight: 700; color: var(--fg2); }
.rsh-crown-callout span   { font-size: 11px; color: var(--fg4); }

.rsh-finding-card {
  background: rgba(215,153,33,.07); border: 1px solid rgba(215,153,33,.2);
  border-radius: var(--radius-lg); padding: 0.75rem 1rem; margin-bottom: 1rem;
}
.rsh-finding-card-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--yellow-bright); margin-bottom: 5px;
}
.rsh-finding-card-label svg { width: 11px; height: 11px; }
.rsh-finding-card p { font-size: 12px; color: var(--fg3); margin: 0; line-height: 1.5; }

.rsh-detection-quality {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--fg4); margin-bottom: 1rem;
  background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius); padding: 5px 10px;
}
.rsh-detection-quality svg  { width: 13px; height: 13px; }
.rsh-dq--effective strong   { color: var(--green-bright); }
.rsh-dq--partial strong     { color: var(--yellow-bright); }
.rsh-dq--poor strong        { color: var(--red-bright); }

.rsh-sparkline-wrap { background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius-lg); padding: 0.75rem 1rem; margin-bottom: 1rem; }
.rsh-sparkline-label { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg4); margin-bottom: 6px; }
#rshSparkline { height: 80px !important; max-height: 80px; display: block; }

.rsh-first-rec-cta {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(69,133,136,.07); border: 1px solid rgba(69,133,136,.2);
  border-radius: var(--radius-lg); padding: 0.75rem 1rem;
}
.rsh-first-rec-cta svg { width: 16px; height: 16px; color: var(--aqua); flex-shrink: 0; margin-top: 2px; }
.rsh-first-rec-cta strong { display: block; font-size: 11px; font-weight: 700; color: var(--fg2); margin-bottom: 3px; }
.rsh-first-rec-cta p { font-size: 11px; color: var(--fg3); margin: 0; line-height: 1.5; flex: 1; }
.rsh-cta-link {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; margin-top: 2px;
  font-size: 10px; color: var(--aqua); text-decoration: none; border: 1px solid rgba(69,133,136,.3);
  border-radius: var(--radius); padding: 4px 8px; white-space: nowrap; transition: all var(--transition);
}
.rsh-cta-link:hover { background: rgba(69,133,136,.1); }
.rsh-cta-link svg { width: 11px; height: 11px; }

/* ── Timeline ─────────────────────────────────────────────────────────── */
.rsh-timeline { display: flex; flex-direction: column; }
.rsh-tl-item {
  display: flex; gap: 0; position: relative;
}
.rsh-tl-connector {
  display: flex; flex-direction: column; align-items: center;
  width: 28px; flex-shrink: 0; padding-top: 4px;
}
.rsh-tl-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--bg); position: relative; z-index: 1;
}
.rsh-tl-dot--success { background: var(--red-bright); }
.rsh-tl-dot--blocked { background: var(--green-bright); }
.rsh-tl-dot--partial { background: var(--yellow-bright); }
.rsh-tl-dot--unknown { background: var(--fg4); }
.rsh-tl-line { flex: 1; width: 1px; background: var(--bg3); min-height: 20px; }
.rsh-tl-item:last-child .rsh-tl-line { display: none; }

.rsh-tl-body { flex: 1; padding: 0 0 1rem 0; min-width: 0; }
.rsh-tl-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
.rsh-tl-stage {
  font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 3px;
  background: var(--bg3); color: var(--fg4); white-space: nowrap;
}
.rsh-tl-tech  { font-size: 12px; font-weight: 600; color: var(--fg2); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rsh-tl-time  { font-size: 9px; color: var(--fg4); font-family: 'Fira Mono', monospace; white-space: nowrap; margin-left: auto; }
.rsh-tl-outcome {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
  text-transform: uppercase; border: 1px solid; white-space: nowrap;
}
.rsh-tl-outcome svg { width: 9px; height: 9px; }
.rsh-tl-outcome--success { background: rgba(204,36,29,.1);  color: var(--red-bright);    border-color: rgba(204,36,29,.3); }
.rsh-tl-outcome--blocked { background: rgba(152,151,26,.1); color: var(--green-bright);  border-color: rgba(152,151,26,.3); }
.rsh-tl-outcome--partial { background: rgba(215,153,33,.1); color: var(--yellow-bright); border-color: rgba(215,153,33,.3); }
.rsh-tl-outcome--unknown { background: var(--bg3); color: var(--fg4); border-color: var(--bg4); }
.rsh-tl-desc  { font-size: 10px; color: var(--fg4); line-height: 1.4; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Alerts ───────────────────────────────────────────────────────────── */
.rsh-alerts-summary { display: flex; gap: 8px; margin-bottom: 1rem; flex-wrap: wrap; }
.rsh-alerts-sev-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius); padding: 6px 12px;
}
.rsh-asp-count { font-size: 1.1rem; font-weight: 700; font-family: 'Fira Mono', monospace; }
.rsh-asp-label { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg4); }
.rsh-alerts-sev-pill--critical .rsh-asp-count { color: var(--red-bright); }
.rsh-alerts-sev-pill--high     .rsh-asp-count { color: var(--orange); }
.rsh-alerts-sev-pill--medium   .rsh-asp-count { color: var(--yellow-bright); }
.rsh-alerts-sev-pill--low      .rsh-asp-count { color: var(--green-bright); }

.rsh-alerts-table-wrap { overflow-x: auto; }
.rsh-alerts-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.rsh-alerts-table th {
  background: var(--bg1); color: var(--fg4); font-size: 9px; text-transform: uppercase;
  letter-spacing: .04em; padding: 7px 10px; border-bottom: 1px solid var(--bg3); text-align: left;
}
.rsh-alerts-table td { padding: 8px 10px; border-bottom: 1px solid var(--bg2); color: var(--fg3); }
.rsh-alerts-table tr:last-child td { border-bottom: none; }
.rsh-alert-row--critical td:first-child { border-left: 2px solid var(--red-bright); }
.rsh-alert-row--high     td:first-child { border-left: 2px solid var(--orange); }
.rsh-alert-row--medium   td:first-child { border-left: 2px solid var(--yellow-bright); }
.rsh-alert-title { display: flex; align-items: center; gap: 5px; font-weight: 600; color: var(--fg2) !important; }
.rsh-alert-title svg { width: 11px; height: 11px; flex-shrink: 0; }
.rsh-alert-source { color: var(--fg4) !important; font-size: 10px; }
.rsh-sev-badge {
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px;
  text-transform: uppercase; border: 1px solid;
}
.rsh-sev-badge--critical { background: rgba(204,36,29,.12); color: var(--red-bright); border-color: rgba(204,36,29,.3); }
.rsh-sev-badge--high     { background: rgba(254,128,25,.12); color: var(--orange); border-color: rgba(254,128,25,.3); }
.rsh-sev-badge--medium   { background: rgba(215,153,33,.12); color: var(--yellow-bright); border-color: rgba(215,153,33,.3); }
.rsh-sev-badge--low      { background: rgba(152,151,26,.12); color: var(--green-bright); border-color: rgba(152,151,26,.3); }
.rsh-mitre-tag {
  font-size: 9px; font-family: 'Fira Mono', monospace; color: var(--blue-bright);
  background: rgba(69,133,136,.1); border: 1px solid rgba(69,133,136,.2);
  border-radius: 3px; padding: 1px 5px;
}
.rsh-alert-status { font-size: 9px; padding: 1px 5px; border-radius: 3px; background: var(--bg3); color: var(--fg4); }
.rsh-alert-status--triggered  { background: rgba(254,128,25,.1); color: var(--orange); }
.rsh-alert-status--suppressed { background: var(--bg3); color: var(--fg4); }

/* ── Evidence ─────────────────────────────────────────────────────────── */
.rsh-evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 10px; }
.rsh-evidence-item {
  background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); padding: 0.75rem 1rem; overflow: hidden;
}
.rsh-ev-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.rsh-ev-type {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 3px;
  background: var(--bg3); color: var(--fg4); text-transform: uppercase;
}
.rsh-ev-type svg { width: 9px; height: 9px; }
.rsh-ev-stage { font-size: 9px; color: var(--aqua); }
.rsh-ev-time  { font-size: 9px; color: var(--fg4); font-family: 'Fira Mono', monospace; margin-left: auto; }
.rsh-ev-title { font-size: 11px; font-weight: 600; color: var(--fg2); margin: 0 0 4px; }
.rsh-ev-desc  { font-size: 10px; color: var(--fg4); margin: 0 0 6px; line-height: 1.4; }
.rsh-ev-content {
  font-family: 'Fira Mono', monospace; font-size: 9px; color: var(--aqua);
  background: var(--bg2); border-radius: var(--radius); padding: 6px 8px;
  overflow-x: auto; white-space: pre; max-height: 80px; margin: 0;
}
.rsh-ev-technique {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; color: var(--purple); margin: 4px 0;
}
.rsh-ev-technique svg { width: 9px; height: 9px; }
.rsh-ev-technique code {
  font-family: 'Fira Mono', monospace; font-size: 9px;
  background: var(--purple)18; padding: 1px 4px; border-radius: 3px;
}
.rsh-ev-artifact {
  display: flex; align-items: center; gap: 4px; font-size: 9px; color: var(--fg4); margin-top: 4px;
}
.rsh-ev-artifact svg { width: 10px; height: 10px; }
.rsh-ev-confidence {
  margin-left: auto; font-size: 8px; color: var(--green); font-family: 'Fira Mono', monospace;
  background: var(--green)15; padding: 1px 5px; border-radius: 10px;
}
.rsh-ev-content { max-height: 120px; }

/* ── ATT&CK ───────────────────────────────────────────────────────────── */
.rsh-attck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 10px; }
.rsh-attck-tactic {
  background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); padding: 0.75rem;
}
.rsh-attck-tactic--succeeded { border-color: rgba(204,36,29,.3); }
.rsh-attck-tactic--partial   { border-color: rgba(215,153,33,.3); }
.rsh-attck-tactic--blocked   { border-color: rgba(152,151,26,.3); }
.rsh-attck-tactic-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.rsh-attck-tactic-name { font-size: 11px; font-weight: 700; color: var(--fg2); }
.rsh-attck-id { font-size: 8px; font-family: 'Fira Mono', monospace; color: var(--fg4); display: block; margin-bottom: 2px; }
.rsh-attck-tactic-status {
  font-size: 8px; font-weight: 700; padding: 2px 5px; border-radius: 3px;
  border: 1px solid; text-transform: capitalize; white-space: nowrap; flex-shrink: 0;
}
.rsh-attck-techniques { display: flex; flex-wrap: wrap; gap: 4px; }
.rsh-attck-tech-pill {
  font-size: 8px; padding: 2px 5px; border-radius: 3px; border: 1px solid;
  cursor: default; display: inline-flex; align-items: center; gap: 3px;
}
.rsh-attck-tech-pill svg { width: 8px; height: 8px; }
.rsh-attck-tech-pill code { font-size: 7px; font-family: 'Fira Mono', monospace; }
.rsh-detected-icon { width: 8px; height: 8px; }

/* ── Assets ───────────────────────────────────────────────────────────── */
.rsh-asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 10px; }
.rsh-asset-card {
  background: var(--bg1); border: 1px solid var(--bg3);
  border-top: 3px solid; border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 0.75rem 1rem;
}
.rsh-asset-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.rsh-asset-info { display: flex; align-items: center; gap: 5px; }
.rsh-asset-type-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; padding: 1px 6px; border-radius: 3px; background: var(--bg3); color: var(--fg4);
}
.rsh-asset-type-badge svg { width: 9px; height: 9px; }
.rsh-asset-crit-badge { font-size: 9px; font-weight: 700; }
.rsh-asset-name { font-size: 13px; font-weight: 700; font-family: 'Fira Mono', monospace; color: var(--fg); margin: 0 0 6px; }
.rsh-asset-status {
  font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 3px;
  text-transform: uppercase; border: 1px solid;
}
.rsh-asset-status--compromised { background: rgba(204,36,29,.1);  color: var(--red-bright);    border-color: rgba(204,36,29,.3); }
.rsh-asset-status--impacted    { background: rgba(254,128,25,.1); color: var(--orange);         border-color: rgba(254,128,25,.3); }
.rsh-asset-status--degraded    { background: rgba(215,153,33,.1); color: var(--yellow-bright);  border-color: rgba(215,153,33,.3); }
.rsh-asset-status--intact      { background: rgba(152,151,26,.1); color: var(--green-bright);   border-color: rgba(152,151,26,.3); }
.rsh-asset-status--unknown     { background: var(--bg3); color: var(--fg4); border-color: var(--bg4); }
.rsh-asset-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; margin-bottom: 8px;
}
.rsh-asset-meta span { display: flex; align-items: center; gap: 3px; font-size: 9px; color: var(--fg4); }
.rsh-asset-meta svg { width: 9px; height: 9px; flex-shrink: 0; }
.rsh-asset-impact { margin-bottom: 6px; }
.rsh-asset-impact-label { display: flex; justify-content: space-between; font-size: 9px; color: var(--fg4); margin-bottom: 3px; }
.rsh-asset-impact-bar  { height: 4px; background: var(--bg3); border-radius: 2px; }
.rsh-asset-impact-fill { height: 100%; border-radius: 2px; }
.rsh-asset-counts { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }
.rsh-asset-count-pill {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 8px; padding: 1px 6px; border-radius: 3px; border: 1px solid;
}
.rsh-asset-count-pill svg { width: 9px; height: 9px; }
.rsh-acp--alerts   { background: rgba(204,36,29,.08); color: var(--red-bright); border-color: rgba(204,36,29,.2); }
.rsh-acp--evidence { background: rgba(69,133,136,.08); color: var(--aqua); border-color: rgba(69,133,136,.2); }
.rsh-asset-controls { display: flex; flex-wrap: wrap; gap: 3px; }
.rsh-asset-ctrl-tag { font-size: 8px; padding: 1px 5px; border-radius: 3px; background: var(--bg3); color: var(--fg4); }

/* ── Controls ─────────────────────────────────────────────────────────── */
.rsh-controls-list { display: flex; flex-direction: column; gap: 8px; }
.rsh-control-card {
  background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); padding: 0.75rem 1rem;
}
.rsh-control-card--helped  { border-left: 3px solid var(--green-bright); }
.rsh-control-card--partial { border-left: 3px solid var(--yellow-bright); }
.rsh-control-card--failed  { border-left: 3px solid var(--red-bright); }
.rsh-control-card--absent  { border-left: 3px solid var(--bg4); }
.rsh-control-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.rsh-ctrl-left  { display: flex; align-items: center; gap: 7px; }
.rsh-ctrl-right { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.rsh-ctrl-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rsh-ctrl-name { font-size: 13px; font-weight: 700; color: var(--fg); margin: 0; }
.rsh-ctrl-domain-badge { font-size: 9px; padding: 1px 6px; border-radius: 3px; background: var(--bg3); color: var(--fg4); }
.rsh-ctrl-status-label {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600;
}
.rsh-ctrl-status-label svg { width: 12px; height: 12px; }
.rsh-ctrl-confidence-badge { font-size: 9px; color: var(--fg4); }
.rsh-ctrl-bar-wrap { margin-bottom: 8px; }
.rsh-ctrl-bar-label { display: flex; justify-content: space-between; font-size: 9px; color: var(--fg4); margin-bottom: 3px; }
.rsh-ctrl-bar { height: 4px; background: var(--bg3); border-radius: 2px; }
.rsh-ctrl-bar-fill { height: 100%; border-radius: 2px; }
.rsh-ctrl-effect {
  font-size: 11px; color: var(--fg3); margin: 0 0 6px;
  display: flex; align-items: flex-start; gap: 5px;
}
.rsh-ctrl-effect svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--blue-bright); margin-top: 1px; }
.rsh-ctrl-recommendation {
  font-size: 10px; color: var(--fg4); font-style: italic;
  border-left: 2px solid var(--bg4); padding-left: 8px;
  display: flex; align-items: flex-start; gap: 5px;
}
.rsh-ctrl-recommendation svg { width: 11px; height: 11px; flex-shrink: 0; color: var(--yellow-bright); margin-top: 1px; }

/* ── Business Impact ──────────────────────────────────────────────────── */
.rsh-biz-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 1rem;
}
.rsh-biz-kpi {
  background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius-lg);
  padding: 0.75rem; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
}
.rsh-biz-kpi svg { width: 18px; height: 18px; color: var(--fg4); }
.rsh-biz-kpi-val { font-size: 1.15rem; font-weight: 700; font-family: 'Fira Mono', monospace; color: var(--fg); }
.rsh-biz-kpi-lbl { font-size: 9px; color: var(--fg4); }

.rsh-biz-revenue {
  background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius-lg);
  padding: 0.75rem 1rem; margin-bottom: 1rem;
}
.rsh-biz-revenue-label {
  display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600;
  color: var(--red-bright); margin-bottom: 8px;
}
.rsh-biz-revenue-label svg { width: 13px; height: 13px; }
.rsh-biz-revenue-range { display: flex; align-items: center; gap: 10px; }
.rsh-rev-low  { font-size: 1.3rem; font-weight: 700; font-family: 'Fira Mono', monospace; color: var(--yellow-bright); }
.rsh-rev-sep  { color: var(--fg4); font-size: 1rem; }
.rsh-rev-high { font-size: 1.3rem; font-weight: 700; font-family: 'Fira Mono', monospace; color: var(--red-bright); }

.rsh-biz-extra {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 1rem;
}
.rsh-biz-extra-card {
  background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius-lg);
  padding: 0.75rem; display: flex; flex-direction: column; align-items: center;
  gap: 3px; text-align: center;
}
.rsh-biz-extra-card svg { width: 16px; height: 16px; color: var(--fg4); }
.rsh-biz-extra-val { font-size: 12px; font-weight: 700; color: var(--fg2); }
.rsh-biz-extra-lbl { font-size: 9px; color: var(--fg4); }

.rsh-biz-units { background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius-lg); padding: 0.75rem 1rem; }
.rsh-biz-units-title {
  display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  color: var(--fg3); margin: 0 0 10px;
}
.rsh-biz-units-title svg { width: 14px; height: 14px; }
.rsh-biz-unit { margin-bottom: 10px; }
.rsh-biz-unit:last-child { margin-bottom: 0; }
.rsh-biz-unit-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.rsh-biz-unit-name   { font-size: 11px; font-weight: 600; color: var(--fg3); }
.rsh-biz-unit-impact { font-size: 11px; font-weight: 700; font-family: 'Fira Mono', monospace; }
.rsh-biz-unit-detail { font-size: 9px; color: var(--fg4); margin: 0 0 4px; }
.rsh-biz-unit-bar    { height: 4px; background: var(--bg3); border-radius: 2px; }
.rsh-biz-unit-fill   { height: 100%; border-radius: 2px; }

/* ── Remediation ──────────────────────────────────────────────────────── */
.rsh-remed-list { display: flex; flex-direction: column; gap: 10px; }
.rsh-remed-card {
  display: flex; gap: 12px; background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); padding: 0.75rem 1rem;
}
.rsh-remed-number {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; font-family: 'Fira Mono', monospace;
  flex-shrink: 0; margin-top: 2px;
}
.rsh-remed-body { flex: 1; min-width: 0; }
.rsh-remed-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.rsh-remed-title { font-size: 12px; font-weight: 700; color: var(--fg); margin: 0; flex: 1; min-width: 0; }
.rsh-remed-meta-badges { display: flex; gap: 4px; flex-wrap: wrap; flex-shrink: 0; }
.rsh-remed-priority-badge {
  font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 3px;
  border: 1px solid; text-transform: uppercase;
}
.rsh-remed-domain-badge { font-size: 8px; padding: 2px 6px; border-radius: 3px; background: var(--bg3); color: var(--fg4); }
.rsh-remed-effort-badge, .rsh-remed-timeline-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 8px; color: var(--fg4); background: var(--bg2); border: 1px solid var(--bg3);
  border-radius: 3px; padding: 2px 5px;
}
.rsh-remed-effort-badge svg, .rsh-remed-timeline-badge svg { width: 8px; height: 8px; }
.rsh-remed-desc { font-size: 11px; color: var(--fg3); line-height: 1.5; margin: 0 0 8px; }
.rsh-remed-risk-reduction { margin-bottom: 8px; }
.rsh-remed-rr-label { display: flex; justify-content: space-between; font-size: 9px; color: var(--fg4); margin-bottom: 3px; }
.rsh-remed-rr-bar  { height: 4px; background: var(--bg3); border-radius: 2px; }
.rsh-remed-rr-fill { height: 100%; border-radius: 2px; background: var(--green-bright); }
.rsh-remed-stages { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rsh-remed-stages-label { font-size: 9px; color: var(--fg4); }
.rsh-remed-stage-pill {
  font-size: 8px; padding: 1px 5px; border-radius: 3px;
  background: rgba(69,133,136,.1); color: var(--aqua); border: 1px solid rgba(69,133,136,.2);
}

/* ── Compare ──────────────────────────────────────────────────────────── */
.rsh-compare-header { margin-bottom: 1rem; }
.rsh-compare-header h3 {
  display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--fg2); margin: 0 0 4px;
}
.rsh-compare-header h3 svg { width: 15px; height: 15px; }
.rsh-compare-intro { font-size: 11px; color: var(--fg4); margin: 0; }
.rsh-compare-controls { display: flex; gap: 8px; margin-bottom: 1rem; flex-wrap: wrap; }
.rsh-compare-input {
  flex: 1; min-width: 180px; background: var(--bg2); border: 1px solid var(--bg3);
  border-radius: var(--radius); color: var(--fg); font-family: 'Fira Mono', monospace;
  font-size: 12px; padding: 8px 10px; outline: none;
}
.rsh-compare-input:focus { border-color: var(--blue); }
.rsh-compare-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg2); border: 1px solid var(--bg3); color: var(--fg3);
  border-radius: var(--radius); padding: 8px 14px; font-size: 11px; cursor: pointer;
  transition: all var(--transition);
}
.rsh-compare-btn:hover { border-color: var(--blue); color: var(--blue-bright); }
.rsh-compare-btn svg { width: 13px; height: 13px; }
.rsh-compare-chart-wrap {
  background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius-lg);
  padding: 1rem; margin-bottom: 1rem; max-width: 560px;
}
#rshCompareChart { max-height: 400px; }
.rsh-compare-results { margin-top: 1rem; overflow-x: auto; }
.rsh-compare-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 2rem; color: var(--fg4); font-size: 11px; text-align: center;
}
.rsh-compare-placeholder svg { width: 24px; height: 24px; }

/* ── Exports ──────────────────────────────────────────────────────────── */
.rsh-export-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 1rem; }
.rsh-export-card {
  background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius-lg);
  padding: 1.25rem 1rem; display: flex; flex-direction: column; align-items: center;
  gap: 8px; text-align: center; transition: border-color var(--transition), transform var(--transition);
}
.rsh-export-card:hover { border-color: var(--blue); transform: translateY(-1px); }
.rsh-export-card-icon {
  width: 42px; height: 42px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
}
.rsh-export-card-icon svg { width: 20px; height: 20px; }
.rsh-export-card-title { font-size: 13px; font-weight: 700; color: var(--fg); }
.rsh-export-card-desc  { font-size: 10px; color: var(--fg4); line-height: 1.5; flex: 1; }
.rsh-export-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--radius); font-size: 11px; font-weight: 600;
  padding: 7px 14px; text-decoration: none; transition: all var(--transition);
  border: 1px solid;
}
.rsh-export-btn svg { width: 12px; height: 12px; }
.rsh-export-btn--json { background: rgba(69,133,136,.1); color: var(--aqua); border-color: rgba(69,133,136,.3); }
.rsh-export-btn--json:hover { background: rgba(69,133,136,.2); }
.rsh-export-btn--csv  { background: rgba(152,151,26,.1); color: var(--green-bright); border-color: rgba(152,151,26,.3); }
.rsh-export-btn--csv:hover  { background: rgba(152,151,26,.2); }
.rsh-export-btn--html { background: rgba(215,153,33,.1); color: var(--yellow-bright); border-color: rgba(215,153,33,.3); }
.rsh-export-btn--html:hover { background: rgba(215,153,33,.2); }

.rsh-export-report-card {
  background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius-lg);
  padding: 0.75rem 1rem; margin-bottom: 1rem;
}
.rsh-erc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rsh-erc-header svg { width: 15px; height: 15px; color: var(--fg4); }
.rsh-erc-header h4  { font-size: 12px; font-weight: 600; color: var(--fg); margin: 0; flex: 1; }
.rsh-erc-type-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; background: var(--bg3); color: var(--fg4); }
.rsh-erc-meta    { font-size: 10px; color: var(--fg4); display: flex; align-items: center; gap: 4px; margin: 0 0 4px; }
.rsh-erc-meta svg{ width: 10px; height: 10px; }
.rsh-erc-summary { font-size: 11px; color: var(--fg3); margin: 0; }

.rsh-aina-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(177,98,134,.07); border: 1px solid rgba(177,98,134,.2);
  border-radius: var(--radius-lg); padding: 1rem 1.25rem; flex-wrap: wrap;
}
.rsh-aina-cta-text { display: flex; align-items: flex-start; gap: 10px; }
.rsh-aina-cta-text svg { width: 18px; height: 18px; color: var(--purple); flex-shrink: 0; margin-top: 2px; }
.rsh-aina-cta-text strong { display: block; font-size: 12px; font-weight: 700; color: var(--fg); margin-bottom: 3px; }
.rsh-aina-cta-text p { font-size: 11px; color: var(--fg4); margin: 0; line-height: 1.5; }
.rsh-aina-btn {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: rgba(177,98,134,.15); border: 1px solid rgba(177,98,134,.3);
  color: var(--purple); border-radius: var(--radius); font-size: 11px; font-weight: 600;
  padding: 8px 14px; text-decoration: none; transition: all var(--transition);
}
.rsh-aina-btn:hover { background: rgba(177,98,134,.25); }
.rsh-aina-btn svg { width: 13px; height: 13px; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .res-analytics-row { grid-template-columns: 1fr 1fr; }
  .res-analytics-row .res-chart-wide { grid-column: 1 / -1; }
  .res-reports-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .res-analytics-row { grid-template-columns: 1fr; }
  .rsh-biz-kpis  { grid-template-columns: 1fr 1fr; }
  .rsh-biz-extra { grid-template-columns: 1fr 1fr; }
  .rsh-export-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .res-summary-band { flex-direction: column; }
  .res-kpi-card { border-right: none; border-bottom: 1px solid var(--bg3); }
  .rsh-biz-kpis  { grid-template-columns: 1fr 1fr; }
  .rsh-biz-extra { grid-template-columns: 1fr 1fr; }
  .rsh-attck-grid  { grid-template-columns: 1fr 1fr; }
  .rsh-asset-grid  { grid-template-columns: 1fr; }
  .rsh-export-grid { grid-template-columns: 1fr; }
  .rsh-ph-right { flex-wrap: wrap; }
  .rsh-remed-card { flex-direction: column; }
  .res-ph-right { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SCENARIO LIBRARY  (scn-*)
   ═══════════════════════════════════════════════════════════════════════ */

.scenario-library-page .page-content,
.scenario-show-page    .page-content { padding: 0; }

/* ── Page header ──────────────────────────────────────────────────────── */
.scn-page-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 1rem 1.5rem; background: var(--bg1); border-bottom: 1px solid var(--bg3);
  flex-wrap: wrap;
}
.scn-ph-left { display: flex; align-items: center; gap: 10px; }
.scn-ph-icon {
  width: 38px; height: 38px; background: var(--bg2); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center;
}
.scn-ph-icon svg { width: 19px; height: 19px; color: var(--orange); }
.scn-ph-title  { font-size: 1.1rem; font-weight: 700; color: var(--fg); margin: 0 0 1px; }
.scn-ph-sub    { font-size: 10px; color: var(--fg4); margin: 0; }
.scn-ph-right  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Buttons */
.btn-scn-primary {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--blue); color: var(--bg); border: none; border-radius: var(--radius);
  font-size: 11px; font-weight: 600; padding: 7px 13px; cursor: pointer;
  text-decoration: none; transition: all var(--transition);
}
.btn-scn-primary:hover { background: var(--blue-bright); }
.btn-scn-primary svg { width: 13px; height: 13px; }
.btn-scn-secondary {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg2); border: 1px solid var(--bg3); color: var(--fg3);
  border-radius: var(--radius); font-size: 11px; padding: 6px 12px;
  cursor: pointer; text-decoration: none; transition: all var(--transition);
}
.btn-scn-secondary:hover { border-color: var(--blue); color: var(--blue-bright); }
.btn-scn-secondary svg { width: 13px; height: 13px; }
.btn-scn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--bg3); color: var(--fg4);
  border-radius: var(--radius); width: 28px; height: 28px; cursor: pointer;
  text-decoration: none; transition: all var(--transition);
}
.btn-scn-ghost:hover { border-color: var(--blue); color: var(--blue-bright); }
.btn-scn-ghost svg { width: 13px; height: 13px; }
.btn-scn-run {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(204,36,29,.15); border: 1px solid rgba(204,36,29,.3); color: var(--red-bright);
  border-radius: var(--radius); font-size: 10px; font-weight: 700; padding: 5px 10px;
  cursor: pointer; text-decoration: none; transition: all var(--transition); white-space: nowrap;
}
.btn-scn-run:hover { background: rgba(204,36,29,.25); }
.btn-scn-run svg { width: 11px; height: 11px; }

/* View toggle */
.scn-view-toggle { display: flex; background: var(--bg2); border: 1px solid var(--bg3); border-radius: var(--radius); overflow: hidden; }
.scn-view-btn {
  background: none; border: none; color: var(--fg4); cursor: pointer;
  padding: 6px 9px; display: flex; align-items: center; transition: all var(--transition);
}
.scn-view-btn svg { width: 13px; height: 13px; }
.scn-view-btn.active { color: var(--yellow-bright); background: var(--bg3); }
.scn-sort-select {
  background: var(--bg2); border: 1px solid var(--bg3); color: var(--fg3);
  border-radius: var(--radius); font-size: 11px; padding: 6px 8px; outline: none;
}

/* ── Recommendations strip ────────────────────────────────────────────── */
.scn-rec-strip {
  display: flex; gap: 6px; padding: 0.6rem 1.5rem;
  background: var(--bg); border-bottom: 1px solid var(--bg3);
  overflow-x: auto; scrollbar-width: none;
}
.scn-rec-strip::-webkit-scrollbar { display: none; }
.scn-rec-chip {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  background: var(--bg1); border: 1px solid var(--bg3); border-radius: 20px;
  font-size: 10px; color: var(--fg4); padding: 4px 10px; cursor: pointer;
  transition: all var(--transition); white-space: nowrap;
}
.scn-rec-chip svg { width: 10px; height: 10px; }
.scn-rec-chip:hover { border-color: var(--yellow); color: var(--yellow-bright); }
.scn-rec-chip.active { border-color: var(--yellow); color: var(--yellow-bright); background: rgba(215,153,33,.1); }

/* ── Packs section ────────────────────────────────────────────────────── */
.scn-packs-section { background: var(--bg1); border-bottom: 1px solid var(--bg3); padding: 0.75rem 1.5rem; }
.scn-packs-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.6rem;
}
.scn-packs-header h2 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg4); margin: 0; }
.scn-packs-toggle { background: none; border: none; color: var(--fg4); cursor: pointer; font-size: 10px; display: flex; align-items: center; gap: 4px; }
.scn-packs-toggle svg { width: 12px; height: 12px; }
.scn-packs-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.scn-packs-row::-webkit-scrollbar { display: none; }
.scn-pack-card {
  flex-shrink: 0; width: 160px; background: var(--bg2); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); padding: 0.75rem; cursor: pointer;
  transition: all var(--transition); border-top: 3px solid;
}
.scn-pack-card:hover { border-color: var(--bg4); transform: translateY(-1px); }
.scn-pack-card.active { background: var(--bg3); }
.scn-pack-icon {
  width: 30px; height: 30px; border-radius: var(--radius); display: flex; align-items: center;
  justify-content: center; margin-bottom: 6px;
}
.scn-pack-icon svg { width: 15px; height: 15px; }
.scn-pack-name  { font-size: 11px; font-weight: 700; color: var(--fg2); margin-bottom: 2px; line-height: 1.3; }
.scn-pack-count { font-size: 9px; color: var(--fg4); margin-bottom: 4px; }
.scn-pack-desc  { font-size: 9px; color: var(--fg4); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ── Library main layout ──────────────────────────────────────────────── */
.scn-library-main {
  display: grid; grid-template-columns: 240px 1fr;
  align-items: start; gap: 0;
}

/* ── Filters sidebar ──────────────────────────────────────────────────── */
.scn-filters-sidebar {
  background: var(--bg1); border-right: 1px solid var(--bg3);
  padding: 1rem; min-height: calc(100vh - 200px);
  position: sticky; top: 0; overflow-y: auto; max-height: calc(100vh - 200px);
}
.scn-search-wrap { position: relative; margin-bottom: 1rem; }
.scn-search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; color: var(--fg4); pointer-events: none; }
.scn-search-input {
  width: 100%; background: var(--bg2); border: 1px solid var(--bg3);
  border-radius: var(--radius); color: var(--fg); font-size: 11px;
  padding: 7px 8px 7px 28px; outline: none; font-family: 'Fira Sans', sans-serif; box-sizing: border-box;
}
.scn-search-input:focus { border-color: var(--blue); }
.scn-filter-group { margin-bottom: 1rem; }
.scn-filter-title {
  font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg4);
  font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
}
.scn-filter-title svg { width: 10px; height: 10px; }
.scn-filter-options { display: flex; flex-direction: column; gap: 3px; }
.scn-filter-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--fg3); cursor: pointer; padding: 2px 0;
  transition: color var(--transition);
}
.scn-filter-label:hover { color: var(--fg); }
.scn-filter-label input { accent-color: var(--yellow); width: 12px; height: 12px; flex-shrink: 0; }
.scn-filter-count { font-size: 9px; color: var(--fg4); margin-left: auto; background: var(--bg3); padding: 0 4px; border-radius: 8px; }
.scn-filter-label.active { color: var(--yellow-bright); }
.scn-clear-btn {
  width: 100%; background: var(--bg2); border: 1px solid var(--bg3); color: var(--fg4);
  border-radius: var(--radius); font-size: 10px; padding: 6px; cursor: pointer;
  margin-top: 8px; transition: all var(--transition);
}
.scn-clear-btn:hover { border-color: var(--red); color: var(--red-bright); }

/* ── Content area ─────────────────────────────────────────────────────── */
.scn-content-area { padding: 1rem; }
.scn-results-bar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 0.75rem; flex-wrap: wrap;
}
.scn-result-count { font-size: 11px; color: var(--fg4); }
.scn-active-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.scn-active-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(215,153,33,.12); border: 1px solid rgba(215,153,33,.25);
  color: var(--yellow-bright); border-radius: 20px; font-size: 9px; padding: 2px 7px;
}
.scn-active-chip button { background: none; border: none; color: inherit; cursor: pointer; padding: 0; display: flex; align-items: center; }
.scn-active-chip svg { width: 9px; height: 9px; }

/* ── Scenario cards grid ──────────────────────────────────────────────── */
.scn-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.scn-card-hidden { display: none !important; }
.scn-empty-state { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 3rem; color: var(--fg4); font-size: 12px; text-align: center; }
.scn-empty-state svg { width: 32px; height: 32px; }
.scn-empty-state button { background: var(--bg2); border: 1px solid var(--bg3); color: var(--fg3); border-radius: var(--radius); font-size: 11px; padding: 6px 14px; cursor: pointer; }

/* ── Scenario card ────────────────────────────────────────────────────── */
.scn-card {
  background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  position: relative;
}
.scn-card:hover { border-color: var(--bg4); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.scn-card-accent { height: 3px; width: 100%; flex-shrink: 0; }

.scn-card-top { display: flex; align-items: center; gap: 4px; padding: 8px 10px 4px; flex-wrap: wrap; }
.scn-cat-badge {
  font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 3px;
  border: 1px solid; text-transform: uppercase; letter-spacing: .04em;
}
.scn-builtin-badge {
  font-size: 8px; padding: 1px 5px; border-radius: 3px;
  background: rgba(69,133,136,.12); color: var(--aqua); border: 1px solid rgba(69,133,136,.25);
}
.scn-custom-badge {
  font-size: 8px; padding: 1px 5px; border-radius: 3px;
  background: rgba(177,98,134,.12); color: var(--purple); border: 1px solid rgba(177,98,134,.25);
}
.scn-diff-badge {
  font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
  border: 1px solid; margin-left: auto;
}
.scn-diff-easy   { color: var(--green-bright);  border-color: rgba(152,151,26,.3); background: rgba(152,151,26,.08); }
.scn-diff-medium { color: var(--yellow-bright); border-color: rgba(215,153,33,.3); background: rgba(215,153,33,.08); }
.scn-diff-hard   { color: var(--orange);        border-color: rgba(214,93,14,.3);  background: rgba(214,93,14,.08); }
.scn-diff-expert { color: var(--red-bright);    border-color: rgba(204,36,29,.3);  background: rgba(204,36,29,.08); }

.scn-card-name { font-size: 12px; font-weight: 700; color: var(--fg); margin: 2px 10px 4px; line-height: 1.3; }
.scn-card-desc { font-size: 10px; color: var(--fg4); margin: 0 10px 6px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.scn-chain-preview { display: flex; align-items: center; gap: 3px; padding: 4px 10px; overflow: hidden; }
.scn-chain-pill {
  font-size: 8px; padding: 2px 6px; border-radius: 3px; white-space: nowrap;
  background: var(--bg3); color: var(--fg4); flex-shrink: 0;
}
.scn-chain-arrow { color: var(--fg4); font-size: 9px; flex-shrink: 0; }

.scn-tactic-tags { display: flex; gap: 3px; padding: 4px 10px; flex-wrap: wrap; }
.scn-tactic-tag {
  font-size: 8px; font-family: 'Fira Mono', monospace; padding: 1px 5px; border-radius: 3px;
  background: rgba(69,133,136,.1); color: var(--aqua); border: 1px solid rgba(69,133,136,.2);
}
.scn-tactic-more { font-size: 8px; color: var(--fg4); }

.scn-card-stats {
  display: flex; gap: 8px; padding: 4px 10px;
  font-size: 9px; color: var(--fg4); border-top: 1px solid var(--bg2); border-bottom: 1px solid var(--bg2);
}
.scn-card-stats span { display: flex; align-items: center; gap: 3px; }
.scn-card-stats svg { width: 9px; height: 9px; }

.scn-card-tags { display: flex; gap: 3px; padding: 4px 10px; flex-wrap: wrap; }
.scn-asset-tag  { font-size: 8px; padding: 1px 5px; border-radius: 3px; background: var(--bg2); color: var(--fg4); border: 1px solid var(--bg3); }
.scn-ctrl-tag-c { font-size: 8px; padding: 1px 5px; border-radius: 3px; background: rgba(177,98,134,.08); color: var(--purple); border: 1px solid rgba(177,98,134,.2); }

.scn-card-actions {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 10px; margin-top: auto; border-top: 1px solid var(--bg3);
}

/* ── List view ────────────────────────────────────────────────────────── */
.scn-list-view { display: none; }
.scn-list-view.active { display: block; }
.scn-list-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.scn-list-table th {
  background: var(--bg1); color: var(--fg4); font-size: 9px; text-transform: uppercase;
  letter-spacing: .04em; padding: 7px 10px; border-bottom: 1px solid var(--bg3); text-align: left;
}
.scn-list-table td { padding: 8px 10px; border-bottom: 1px solid var(--bg2); color: var(--fg3); }
.scn-list-table tr:hover td { background: var(--bg1); }
.scn-list-name { font-weight: 600; color: var(--fg); text-decoration: none; }
.scn-list-name:hover { color: var(--blue-bright); }

/* ── Preview drawer ───────────────────────────────────────────────────── */
.scn-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 400;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.scn-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.scn-preview-drawer {
  position: fixed; right: 0; top: 0; bottom: 0; width: 420px; max-width: 95vw;
  background: var(--bg1); border-left: 1px solid var(--bg3);
  display: flex; flex-direction: column; z-index: 401;
  transform: translateX(100%); transition: transform .25s ease;
}
.scn-preview-drawer.open { transform: translateX(0); }
.scn-pd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1rem; border-bottom: 1px solid var(--bg3); flex-shrink: 0;
}
.scn-pd-header h3 { font-size: 13px; font-weight: 600; color: var(--fg); margin: 0; }
.scn-pd-header button { background: none; border: none; color: var(--fg4); cursor: pointer; }
.scn-pd-header button svg { width: 16px; height: 16px; }
.scn-pd-body { flex: 1; overflow-y: auto; padding: 1rem; }
.scn-pd-footer { padding: .75rem 1rem; border-top: 1px solid var(--bg3); display: flex; gap: 8px; }

/* ── Compare bar + panel ──────────────────────────────────────────────── */
.scn-compare-bar {
  display: flex; align-items: center; gap: 10px; padding: .6rem 1.5rem;
  background: rgba(69,133,136,.08); border-bottom: 1px solid var(--aqua);
  font-size: 12px; color: var(--fg3);
}
.scn-compare-bar svg { width: 14px; height: 14px; }
.scn-compare-panel {
  margin: 1rem 1.5rem; background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); overflow: hidden;
}
.scn-cp-header {
  display: flex; align-items: center; gap: 8px; padding: .75rem 1rem;
  border-bottom: 1px solid var(--bg3); font-size: 13px; font-weight: 600; color: var(--fg2);
}
.scn-cp-header svg { width: 16px; height: 16px; }
.scn-cp-close { margin-left: auto; background: none; border: none; color: var(--fg4); cursor: pointer; }
.scn-cp-close svg { width: 16px; height: 16px; }
.scn-cp-body { padding: 1rem; overflow-x: auto; }

/* ── Modal ────────────────────────────────────────────────────────────── */
.scn-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 500;
  display: flex; align-items: center; justify-content: center;
}
.scn-modal {
  background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius-lg);
  padding: 1.5rem; width: 420px; max-width: 95vw;
}
.scn-modal h3 { font-size: 15px; font-weight: 700; color: var(--fg); margin: 0 0 1rem; }
.scn-modal input {
  width: 100%; background: var(--bg2); border: 1px solid var(--bg3); color: var(--fg);
  border-radius: var(--radius); font-size: 12px; padding: 8px 10px; outline: none;
  font-family: 'Fira Sans', sans-serif; margin-bottom: 1rem; box-sizing: border-box;
}
.scn-modal input:focus { border-color: var(--blue); }
.scn-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ═══════════════════════════════════════════════════════════════════════
   SCENARIO SHOW PAGE  (scs-*)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page header ──────────────────────────────────────────────────────── */
.scs-page-header {
  display: flex; flex-direction: column; background: var(--bg1);
  border-bottom: 1px solid var(--bg3);
}
.scs-ph-accent { height: 4px; width: 100%; }
.scs-ph-main {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 1rem 1.5rem; flex-wrap: wrap;
}
.scs-ph-left { flex: 1; min-width: 0; }
.scs-ph-back {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--fg4); text-decoration: none;
  border: 1px solid var(--bg3); border-radius: var(--radius);
  padding: 3px 8px; margin-bottom: 8px; transition: all var(--transition);
}
.scs-ph-back:hover { color: var(--blue-bright); border-color: var(--blue); }
.scs-ph-back svg { width: 11px; height: 11px; }
.scs-ph-title { font-size: 1.2rem; font-weight: 700; color: var(--fg); margin: 0 0 6px; }
.scs-ph-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.scs-family-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 3px; border: 1px solid;
  text-transform: uppercase; letter-spacing: .04em;
}
.scs-ph-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.scs-ph-actions { display: flex; align-items: center; gap: 6px; }

/* ── KPI band ─────────────────────────────────────────────────────────── */
.scs-kpi-band {
  display: flex; flex-wrap: wrap; border-top: 1px solid var(--bg3);
}
.scs-kpi-card {
  display: flex; align-items: center; gap: 8px;
  padding: .7rem 1.1rem; border-right: 1px solid var(--bg3);
  flex: 1; min-width: 100px;
}
.scs-kpi-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.scs-kpi-icon svg { width: 14px; height: 14px; }
.scs-kpi-body { min-width: 0; }
.scs-kpi-val  { font-size: .95rem; font-weight: 700; font-family: 'Fira Mono', monospace; line-height: 1.1; }
.scs-kpi-lbl  { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg4); margin-top: 1px; }

/* ── Tab bar ──────────────────────────────────────────────────────────── */
.scs-tab-bar {
  display: flex; background: var(--bg); border-bottom: 1px solid var(--bg3);
  overflow-x: auto; scrollbar-width: none; padding: 0 .5rem;
}
.scs-tab-bar::-webkit-scrollbar { display: none; }
.scs-tab {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--fg4); cursor: pointer; padding: .6rem 1rem; font-size: 11px;
  font-weight: 500; font-family: 'Fira Sans', sans-serif;
  white-space: nowrap; transition: all var(--transition);
}
.scs-tab svg { width: 11px; height: 11px; }
.scs-tab:hover  { color: var(--fg2); }
.scs-tab.active { color: var(--yellow-bright); border-bottom-color: var(--yellow); }

/* ── Tab panels ───────────────────────────────────────────────────────── */
.scs-panel        { display: none; padding: 1.25rem; }
.scs-panel.active { display: block; }

/* ── Overview panel ───────────────────────────────────────────────────── */
.scs-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.scs-info-card {
  background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius-lg); padding: .75rem 1rem;
}
.scs-info-card h4 { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg4); margin: 0 0 8px; }
.scs-prop-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; font-size: 11px; }
.scs-prop-key { color: var(--fg4); }
.scs-prop-val { color: var(--fg2); font-weight: 600; }
.scs-tag-cloud { display: flex; flex-wrap: wrap; gap: 4px; }
.scs-tag {
  font-size: 9px; padding: 2px 7px; border-radius: 3px;
  background: var(--bg2); border: 1px solid var(--bg3); color: var(--fg4);
}
.scs-related-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 8px; }
.scs-related-card {
  background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius-lg);
  padding: .65rem .85rem; text-decoration: none; transition: all var(--transition);
}
.scs-related-card:hover { border-color: var(--blue); }
.scs-related-name { font-size: 11px; font-weight: 600; color: var(--fg); margin-bottom: 2px; }
.scs-related-cat  { font-size: 9px; color: var(--fg4); }

/* ── Attack chain panel ───────────────────────────────────────────────── */
.scs-chain-flow {
  display: flex; flex-wrap: wrap; gap: 0; align-items: flex-start;
  overflow-x: auto; padding-bottom: .5rem;
}
.scs-chain-step {
  display: flex; align-items: center; gap: 0; flex-shrink: 0;
}
.scs-chain-node {
  width: 140px; background: var(--bg1); border: 1px solid var(--bg3);
  border-radius: var(--radius-lg); padding: .65rem .75rem; text-align: center;
  position: relative;
}
.scs-chain-num {
  width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 9px; font-weight: 700; font-family: 'Fira Mono', monospace;
  margin: 0 auto 6px; background: var(--bg3); color: var(--fg4);
}
.scs-chain-stage { font-size: 10px; font-weight: 700; color: var(--fg); margin-bottom: 3px; }
.scs-chain-tech  { font-size: 9px; color: var(--fg4); margin-bottom: 3px; }
.scs-chain-mitre { font-size: 8px; font-family: 'Fira Mono', monospace; color: var(--aqua); background: rgba(69,133,136,.1); border-radius: 3px; padding: 1px 4px; display: inline-block; }
.scs-chain-arrow { color: var(--bg4); padding: 0 4px; font-size: 16px; align-self: center; }
.scs-chain-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 3rem; color: var(--fg4); font-size: 12px; }
.scs-chain-empty svg { width: 28px; height: 28px; }

/* ── Impact panel ─────────────────────────────────────────────────────── */
.scs-impact-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 1rem; }
.scs-impact-kpi {
  background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius-lg);
  padding: .75rem; text-align: center;
}
.scs-impact-kpi-val { font-size: 1.2rem; font-weight: 700; font-family: 'Fira Mono', monospace; }
.scs-impact-kpi-lbl { font-size: 9px; color: var(--fg4); margin-top: 2px; }
.scs-impact-bar-card {
  background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius-lg);
  padding: .75rem 1rem; margin-bottom: 10px;
}
.scs-impact-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.scs-impact-bar-row:last-child { margin-bottom: 0; }
.scs-impact-bar-label { font-size: 10px; color: var(--fg3); width: 120px; flex-shrink: 0; }
.scs-impact-bar-track { flex: 1; height: 6px; background: var(--bg3); border-radius: 3px; }
.scs-impact-bar-fill  { height: 100%; border-radius: 3px; }
.scs-impact-bar-val   { font-size: 10px; font-family: 'Fira Mono', monospace; width: 35px; text-align: right; flex-shrink: 0; }

/* ── ATT&CK panel ─────────────────────────────────────────────────────── */
.scs-attck-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 10px; }
.scs-attck-card {
  background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius-lg); padding: .65rem .75rem;
}
.scs-attck-ta-id   { font-size: 8px; font-family: 'Fira Mono', monospace; color: var(--fg4); margin-bottom: 2px; }
.scs-attck-ta-name { font-size: 11px; font-weight: 700; color: var(--fg2); margin-bottom: 6px; }
.scs-attck-techs   { display: flex; flex-wrap: wrap; gap: 3px; }
.scs-attck-tech    {
  font-size: 8px; font-family: 'Fira Mono', monospace;
  background: rgba(69,133,136,.1); color: var(--aqua); border: 1px solid rgba(69,133,136,.2);
  border-radius: 3px; padding: 1px 4px;
}

/* ── Controls panel ───────────────────────────────────────────────────── */
.scs-ctrl-list { display: flex; flex-direction: column; gap: 8px; }
.scs-ctrl-row  {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius-lg); padding: .65rem 1rem;
}
.scs-ctrl-icon { width: 28px; height: 28px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.scs-ctrl-icon svg { width: 14px; height: 14px; }
.scs-ctrl-name { font-size: 12px; font-weight: 700; color: var(--fg); margin-bottom: 2px; }
.scs-ctrl-desc { font-size: 10px; color: var(--fg4); line-height: 1.4; }

/* ── Assets panel ─────────────────────────────────────────────────────── */
.scs-assets-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 8px; }
.scs-asset-card {
  background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius-lg);
  padding: .75rem; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.scs-asset-icon { width: 32px; height: 32px; background: var(--bg2); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; }
.scs-asset-icon svg { width: 16px; height: 16px; color: var(--fg4); }
.scs-asset-name { font-size: 10px; font-weight: 600; color: var(--fg3); }

/* ── Env fit panel ────────────────────────────────────────────────────── */
.scs-fit-section { margin-bottom: 1rem; }
.scs-fit-section h4 { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg4); margin: 0 0 6px; }
.scs-fit-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.scs-fit-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; padding: 3px 10px; border-radius: var(--radius); border: 1px solid;
  background: var(--bg1);
}

/* ── Alerts panel ─────────────────────────────────────────────────────── */
.scs-alert-list   { display: flex; flex-direction: column; gap: 5px; margin-bottom: 1rem; }
.scs-alert-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius); padding: 6px 10px; font-size: 11px; color: var(--fg3);
}
.scs-alert-item svg { width: 12px; height: 12px; color: var(--orange); flex-shrink: 0; }
.scs-evidence-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg1); border: 1px solid var(--bg3); border-radius: var(--radius); padding: 6px 10px; font-size: 11px; color: var(--fg3);
}
.scs-evidence-item svg { width: 12px; height: 12px; color: var(--aqua); flex-shrink: 0; }

/* ── Runs panel ───────────────────────────────────────────────────────── */
.scs-runs-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.scs-runs-table th {
  background: var(--bg1); color: var(--fg4); font-size: 9px; text-transform: uppercase;
  letter-spacing: .04em; padding: 7px 10px; border-bottom: 1px solid var(--bg3); text-align: left;
}
.scs-runs-table td { padding: 8px 10px; border-bottom: 1px solid var(--bg2); color: var(--fg3); }
.scs-runs-table tr:last-child td { border-bottom: none; }
.scs-runs-table a { color: var(--fg2); text-decoration: none; font-weight: 600; }
.scs-runs-table a:hover { color: var(--blue-bright); }
.scs-no-runs {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 3rem; color: var(--fg4); font-size: 12px; text-align: center;
}
.scs-no-runs svg { width: 28px; height: 28px; }

/* ── Compare panel ────────────────────────────────────────────────────── */
.scs-compare-controls { display: flex; gap: 8px; margin-bottom: 1rem; flex-wrap: wrap; }
.scs-compare-input {
  flex: 1; min-width: 180px; background: var(--bg2); border: 1px solid var(--bg3);
  border-radius: var(--radius); color: var(--fg); font-size: 11px; padding: 7px 10px; outline: none;
  font-family: 'Fira Mono', monospace;
}
.scs-compare-input:focus { border-color: var(--blue); }
.scs-compare-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg2); border: 1px solid var(--bg3); color: var(--fg3);
  border-radius: var(--radius); font-size: 11px; padding: 7px 14px; cursor: pointer;
  transition: all var(--transition);
}
.scs-compare-btn:hover { border-color: var(--blue); color: var(--blue-bright); }
.scs-compare-btn svg { width: 13px; height: 13px; }

/* ── Action footer ────────────────────────────────────────────────────── */
.scs-action-footer {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 1rem 1.5rem; background: var(--bg1); border-top: 1px solid var(--bg3);
  margin-top: 1rem;
}

/* ── Family accent colors (for cards/tabs) ────────────────────────────── */
.scn-cat-identity         { background: rgba(215,153,33,.1);  color: var(--yellow-bright); border-color: rgba(215,153,33,.3); }
.scn-cat-active_directory { background: rgba(254,128,25,.1);  color: var(--orange);         border-color: rgba(254,128,25,.3); }
.scn-cat-endpoint         { background: rgba(204,36,29,.1);   color: var(--red-bright);     border-color: rgba(204,36,29,.3); }
.scn-cat-web_api          { background: rgba(177,98,134,.1);  color: var(--purple);         border-color: rgba(177,98,134,.3); }
.scn-cat-cloud            { background: rgba(69,133,136,.1);  color: var(--aqua);           border-color: rgba(69,133,136,.3); }
.scn-cat-saas             { background: rgba(131,165,152,.1); color: var(--blue-bright);    border-color: rgba(131,165,152,.3); }
.scn-cat-insider          { background: rgba(251,73,52,.1);   color: #fb4934;               border-color: rgba(251,73,52,.3); }
.scn-cat-data             { background: rgba(250,189,47,.1);  color: var(--yellow-bright);  border-color: rgba(250,189,47,.3); }
.scn-cat-network          { background: rgba(142,192,124,.1); color: var(--aqua-bright);    border-color: rgba(142,192,124,.3); }
.scn-cat-supply_chain     { background: rgba(146,131,116,.1); color: var(--fg3);            border-color: rgba(146,131,116,.3); }
.scn-cat-ot_iot           { background: rgba(214,93,14,.1);   color: var(--orange);         border-color: rgba(214,93,14,.3); }
.scn-cat-resilience       { background: rgba(104,157,106,.1); color: var(--aqua-bright);    border-color: rgba(104,157,106,.3); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .scn-library-main { grid-template-columns: 200px 1fr; }
}
@media (max-width: 860px) {
  .scn-library-main { grid-template-columns: 1fr; }
  .scn-filters-sidebar { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--bg3); }
  .scs-impact-grid { grid-template-columns: 1fr 1fr; }
  .scs-overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .scs-impact-grid { grid-template-columns: 1fr 1fr; }
  .scs-kpi-band { flex-wrap: wrap; }
  .scs-kpi-card { flex: 1 0 120px; border-right: none; border-bottom: 1px solid var(--bg3); }
  .scn-cards-grid { grid-template-columns: 1fr; }
  .scs-chain-flow { flex-direction: column; }
  .scs-chain-arrow { transform: rotate(90deg); }
}