/* Created by SmartKEA CyberInnovation */

/* Utility classes for JS-controlled visibility (CSP-safe) */
.hidden { display: none !important; }
.js-show { display: block !important; }

/* ═══════════════════════════════════════════
   DESIGN TOKENS — DARK (default)
   — Adapted from UNIE Universidad brand guidelines
   ═══════════════════════════════════════════ */
:root,
[data-theme="dark"] {
  --bg-body: #0a0a0f;
  --bg-sidebar: #111118;
  --bg-surface: #16161f;
  --bg-card: #1c1c28;
  --bg-input: #131319;
  --border: rgba(80, 90, 150, .16);
  --border-focus: #0600f6;
  --text-primary: #e8eaf4;
  --text-secondary: #9ea2be;
  --text-muted: #6b6f8e;
  --accent: #0600f6;
  --accent-hover: #2200ff;
  --accent-glow: rgba(6, 0, 246, .25);
  --accent-subtle: rgba(6, 0, 246, .08);
  --warning: #f59e0b;
  --warning-hover: #fbbf24;
  --success: #22c55e;
  --danger: #ef4444;
  --shadow-card: 0 2px 10px rgba(1, 0, 49, .30);
  --badge-bg: rgba(6, 0, 246, .16);
  --badge-text: #7b8aff;
  --chip-bg: rgba(6, 0, 246, .08);
  --chip-checked: rgba(6, 0, 246, .22);
  --chip-border: rgba(6, 0, 246, .20);
  --preset-bg: #16161f;
  --preset-hover: #1e1e2e;
  --footer-bg: #0d0d14;
  color-scheme: dark;
}

/* ═══════════════════════════════════════════
   DESIGN TOKENS — LIGHT
   ═══════════════════════════════════════════ */
[data-theme="light"] {
  --bg-body: #f7f7fb;
  --bg-sidebar: #ffffff;
  --bg-surface: #f3f2fe;
  --bg-card: #ffffff;
  --bg-input: #f3f2fe;
  --border: rgba(1, 0, 49, .08);
  --border-focus: #0600f6;
  --text-primary: #0d0d0d;
  --text-secondary: #444466;
  --text-muted: #888899;
  --accent: #0600f6;
  --accent-hover: #0500cc;
  --accent-glow: rgba(6, 0, 246, .14);
  --accent-subtle: rgba(6, 0, 246, .04);
  --warning: #d97706;
  --warning-hover: #b45309;
  --success: #16a34a;
  --danger: #dc2626;
  --shadow-card: 0 2px 10px rgba(1, 0, 49, .08);
  --badge-bg: rgba(6, 0, 246, .10);
  --badge-text: #0600f6;
  --chip-bg: rgba(6, 0, 246, .04);
  --chip-checked: rgba(6, 0, 246, .12);
  --chip-border: rgba(6, 0, 246, .25);
  --preset-bg: #f9f9fc;
  --preset-hover: #efeff8;
  --footer-bg: #eeeef5;
  color-scheme: light;
}
[data-theme="light"] .brand-logo {
  filter: none;
}

/* ═══════════════════════════════════════════
   SHARED TOKENS
   ═══════════════════════════════════════════ */
:root {
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --sidebar-w: 256px;
  --topbar-h: 56px;
  --transition: .2s cubic-bezier(.4,0,.2,1);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
}

/* ═══════════════════ RESET ═══════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg-body); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; transition: background var(--transition), color var(--transition); }
a { color: inherit; text-decoration: none; }

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

/* ═══════════════════ SIDEBAR ═══════════════════ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: width 0.25s ease, transform var(--transition), background var(--transition);
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-brand {
  display: flex; align-items: center; gap: .5rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--border);
}
.brand-logo {
  height: 24px;
  width: auto;
  flex-shrink: 0;
  filter: invert(1);   /* logo is black on transparent — invert for dark theme */
  opacity: .92;
}
.brand-info { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.brand-text { font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; white-space: nowrap; }
.brand-sub { font-size: .7rem; color: var(--text-muted); white-space: nowrap; }

.sidebar-nav { flex: 1; padding: .8rem .6rem; display: flex; flex-direction: column; gap: .25rem; }
.nav-btn {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; padding: .6rem .9rem;
  background: transparent; border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: .9rem; font-family: inherit;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.nav-btn:hover { background: var(--accent-subtle); color: var(--text-primary); }
.nav-btn.active { background: var(--accent-subtle); color: var(--accent); font-weight: 600; }
[data-theme="dark"] .nav-btn.active { color: #fff; }
.nav-icon { font-size: 1.05rem; width: 22px; text-align: center; }

/* Nav separator & section label */
.nav-separator {
  height: 1px;
  background: var(--border);
  margin: .6rem .4rem;
}
.nav-section-label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .2rem .9rem .4rem;
}

.sidebar-footer { padding: .8rem 1rem; border-top: 1px solid var(--border); }
.status-badge {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .7rem; border-radius: 999px;
  background: var(--accent-subtle);
  font-size: .78rem; color: var(--text-secondary);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); animation: pulse 2s infinite; }
.status-badge.ok .status-dot { background: var(--success); }
.status-badge.err .status-dot { background: var(--danger); animation: none; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ═══════════════════ MAIN CONTENT ═══════════════════ */
.main-content { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-height: 100vh; }

/* ═══════════════════ TOPBAR ═══════════════════ */
.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: .8rem;
  padding: 0 1.5rem;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
  transition: background var(--transition);
}
.menu-toggle { display: none; background: none; border: none; color: var(--text-primary); font-size: 1.4rem; cursor: pointer; }
.page-title { font-size: 1.1rem; font-weight: 600; flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: .5rem; }

.icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-input); color: var(--text-secondary);
  font-size: .9rem; font-family: inherit; font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.icon-btn:hover { border-color: var(--accent); color: var(--text-primary); }

.api-key-wrap {
  display: flex; align-items: center; gap: .4rem;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .3rem .7rem;
  transition: border-color var(--transition);
}
.api-key-wrap:focus-within { border-color: var(--border-focus); }
.key-icon { font-size: .9rem; }
.api-key-wrap input {
  background: transparent; border: none; outline: none;
  color: var(--text-primary); font-family: inherit; font-size: .85rem;
  width: 180px;
}
.api-key-wrap input::placeholder { color: var(--text-muted); }

/* ═══════════════════ PANELS ═══════════════════ */
.panels-container { padding: 1rem; flex: 1; }
.panel { display: none; animation: fadeIn .3s ease; }
.panel.active { display: flex; flex-direction: column; gap: 0.75rem; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ═══════════════════ CARD ═══════════════════ */
.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), background var(--transition);
}
.card:hover { border-color: var(--accent-glow); }
.card-highlight { border-left: 3px solid var(--accent); }
.card-header-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.card-title { font-size: 1.2rem; font-weight: 700; margin-bottom: .2rem; }
.card-description { color: var(--text-secondary); font-size: .88rem; margin-bottom: 1.2rem; }
.card-badge {
  padding: .25rem .65rem; border-radius: 999px;
  background: var(--badge-bg); color: var(--badge-text);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  flex-shrink: 0;
}

/* ═══════════════════ FORMS ═══════════════════ */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.form-group { display: flex; flex-direction: column; gap: .3rem; }
.form-group.full-width { grid-column: 1/-1; }
.form-group label { font-size: .82rem; font-weight: 500; color: var(--text-secondary); }
.form-group input,
.form-group select {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .55rem .75rem;
  color: var(--text-primary); font-family: inherit; font-size: .88rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-group input:focus,
.form-group select:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-glow); }
.form-group input::placeholder { color: var(--text-muted); }
.hint { color: var(--text-muted); font-size: .75rem; margin-top: .15rem; }

/* ═══════════════════ MODULES FIELDSET ═══════════════════ */
.modules-fieldset {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 1rem 1.2rem; margin-bottom: 1.2rem;
  transition: border-color var(--transition);
}
.modules-fieldset legend {
  font-size: .82rem; font-weight: 600; color: var(--text-secondary);
  padding: 0 .4rem;
}
.modules-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.module-chip {
  display: flex; align-items: center; gap: .35rem;
  padding: .4rem .75rem; border-radius: 999px;
  background: var(--chip-bg); border: 1px solid transparent;
  font-size: .82rem; color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  user-select: none;
}
.module-chip:hover { border-color: var(--chip-border); }
.module-chip:has(input:checked) { background: var(--chip-checked); border-color: var(--chip-border); color: var(--text-primary); font-weight: 500; }
.module-chip input { display: none; }

.checkbox-row {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; color: var(--text-secondary);
  margin-bottom: 1.2rem; cursor: pointer;
}
.checkbox-row input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }

/* ═══════════════════ PRESETS ═══════════════════ */
.presets-row { margin-top: 1.5rem; }
.presets-title { font-size: .82rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .7rem; }
.presets-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: .7rem; }
.preset-card {
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1rem 1.1rem;
  background: var(--preset-bg); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer; text-align: left;
  font-family: inherit;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.preset-card:hover { background: var(--preset-hover); border-color: var(--accent); transform: translateY(-2px); }
.preset-icon { font-size: 1.4rem; margin-bottom: .15rem; }
.preset-name { font-size: .9rem; font-weight: 600; color: var(--text-primary); }
.preset-desc { font-size: .75rem; color: var(--text-muted); line-height: 1.35; }

/* ═══════════════════ BUTTONS ═══════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.3rem; border: none;
  border-radius: var(--radius-sm); font-family: inherit;
  font-size: .88rem; font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 0 18px var(--accent-glow); }
.btn-launch {
  background: linear-gradient(135deg, var(--accent), #2940ff);
  color: #fff; font-size: .95rem; padding: .7rem 1.6rem;
}
.btn-launch:hover { box-shadow: 0 0 24px var(--accent-glow); filter: brightness(1.08); }
.btn-warning { background: var(--warning); color: #000; }
.btn-warning:hover { background: var(--warning-hover); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); }
.btn-outline:hover { border-color: var(--accent); color: var(--text-primary); }
.btn-icon { font-size: .9rem; }

/* ═══════════════════ BATCH ROWS ═══════════════════ */
.batch-users { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.batch-row { display: grid; grid-template-columns: 1fr 1fr .6fr auto; gap: .5rem; align-items: center; }
.batch-row input {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .5rem .7rem;
  color: var(--text-primary); font-family: inherit; font-size: .85rem;
  outline: none; transition: border-color var(--transition);
}
.batch-row input:focus { border-color: var(--border-focus); }
.btn-icon-only {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: rgba(239,68,68,.1); color: var(--danger);
  font-size: .8rem; cursor: pointer;
  transition: background var(--transition);
}
.btn-icon-only:hover { background: rgba(239,68,68,.25); }
.batch-actions { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ═══════════════════ OUTPUT (collapsible) ═══════════════════ */
details.output-section { margin-top: 1.5rem; }
details.output-section > summary.output-title {
  font-size: .82rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem;
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem;
  user-select: none;
}
details.output-section > summary.output-title::before {
  content: "▶"; font-size: .65rem; transition: transform .2s;
}
details.output-section[open] > summary.output-title::before {
  transform: rotate(90deg);
}
details.output-section > summary.output-title::-webkit-details-marker { display: none; }
pre#output {
  background: var(--bg-sidebar); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 1rem 1.2rem;
  min-height: 90px; max-height: 280px; overflow: auto;
  font-family: 'JetBrains Mono','Fira Code','Cascadia Code',monospace;
  font-size: .82rem; line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap; word-break: break-word;
  transition: background var(--transition), border-color var(--transition);
}

/* ═══════════════════ FOOTER ═══════════════════ */
.app-footer {
  padding: .5rem 1.5rem;
  font-size: .72rem; color: var(--text-muted);
  background: var(--footer-bg);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  transition: background var(--transition);
  position: sticky;
  bottom: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.footer-sep { opacity: .4; }

/* ═══════════════════ WIZARD (Lab Guide) ═══════════════════ */
.wizard { display: flex; flex-direction: column; gap: .1rem; margin: .5rem 0 1.2rem; }
.wizard-step {
  padding: .9rem 1rem;
  border-radius: var(--radius-md);
  transition: background var(--transition);
}
.wizard-step:hover { background: var(--accent-subtle); }
.step-header { display: flex; align-items: flex-start; gap: .9rem; }
.step-number {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #2940ff);
  color: #fff; border-radius: 50%;
  font-size: .85rem; font-weight: 700;
  box-shadow: 0 0 12px var(--accent-glow);
}
.step-info { min-width: 0; }
.step-title { font-size: .95rem; font-weight: 600; margin-bottom: .2rem; }
.step-text { font-size: .84rem; color: var(--text-secondary); line-height: 1.5; }

.guide-tip {
  display: flex; align-items: flex-start; gap: .7rem;
  background: var(--accent-subtle);
  border: 1px solid var(--chip-border);
  border-radius: var(--radius-md);
  padding: .9rem 1.1rem;
  margin-top: .5rem;
}
.guide-tip-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: .05rem; }
.guide-tip p { font-size: .84rem; color: var(--text-secondary); line-height: 1.5; }

/* ═══════════════════ LAUNCH PROGRESS ═══════════════════ */
.launch-progress-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem;
  margin-top: 1rem;
  box-shadow: var(--shadow-card);
  transition: background var(--transition), border-color var(--transition);
  animation: fadeIn .4s ease;
}
.progress-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.2rem;
}
.progress-title { font-size: 1rem; font-weight: 700; }
.progress-badge {
  padding: .25rem .7rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  background: var(--badge-bg); color: var(--badge-text);
  transition: background var(--transition), color var(--transition);
}
.progress-badge.running { background: rgba(59,130,246,.18); color: #60a5fa; }
.progress-badge.done { background: rgba(34,197,94,.18); color: #22c55e; }
.progress-badge.error { background: rgba(239,68,68,.18); color: #ef4444; }

.progress-tracker { display: flex; flex-direction: column; gap: .15rem; }
.progress-step {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .7rem; border-radius: var(--radius-sm);
  opacity: .45;
  transition: opacity var(--transition), background var(--transition);
}
.progress-step.active { opacity: 1; background: var(--accent-subtle); }
.progress-step.done { opacity: 1; }
.progress-step.error { opacity: 1; }
.pstep-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: .85rem;
  background: var(--bg-surface);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}
.progress-step.active .pstep-icon { background: var(--accent); color: #fff; animation: spinPulse 1.2s ease infinite; }
.progress-step.done .pstep-icon { background: var(--success); color: #fff; }
.progress-step.error .pstep-icon { background: var(--danger); color: #fff; }
@keyframes spinPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

.pstep-content { display: flex; flex-direction: column; min-width: 0; }
.pstep-label { font-size: .85rem; font-weight: 500; }
.pstep-detail { font-size: .75rem; color: var(--text-muted); margin-top: .1rem; }

.progress-bar-wrap {
  height: 6px; border-radius: 999px;
  background: var(--bg-surface);
  margin-top: 1.1rem; overflow: hidden;
}
.progress-bar {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #3b38ff);
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════ READY CARD ═══════════════════ */
.ready-card {
  margin-top: 1.2rem; padding: 1.3rem 1.5rem;
  background: var(--bg-surface); border: 1px solid var(--chip-border);
  border-radius: var(--radius-md);
  animation: fadeIn .4s ease;
}
.ready-header {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: 1rem;
}
.ready-header h3 { font-size: 1.05rem; font-weight: 700; }
.ready-icon { font-size: 1.4rem; }

.ready-details {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .6rem; margin-bottom: 1.2rem;
}
.ready-field {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .6rem .8rem;
  background: var(--bg-card); border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.ready-label { font-size: .72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.ready-value { font-size: .9rem; font-weight: 600; color: var(--text-primary); word-break: break-all; }
.ready-link { color: var(--accent); text-decoration: underline; cursor: pointer; }
.ready-link:hover { color: var(--accent-hover); }
.ready-password { font-family: 'JetBrains Mono','Fira Code',monospace; letter-spacing: .05em; }

.ready-actions {
  display: flex; gap: .7rem; margin-bottom: 1.1rem; flex-wrap: wrap;
}

.ready-steps { margin-top: .5rem; }
.ready-steps h4 { font-size: .82rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.ready-steps ol {
  padding-left: 1.4rem; display: flex; flex-direction: column; gap: .3rem;
}
.ready-steps li { font-size: .84rem; color: var(--text-secondary); line-height: 1.45; }

/* ═══════════════════════════════════════════════════════
   SECURITY DASHBOARD
   ═══════════════════════════════════════════════════════ */

.sec-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .8rem;
  margin-bottom: 1.5rem;
}
.sec-metric-card {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem 1.2rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), transform var(--transition);
}
.sec-metric-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.sec-metric-icon { font-size: 1.6rem; flex-shrink: 0; }
.sec-metric-info { display: flex; flex-direction: column; }
.sec-metric-value { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); }
.sec-metric-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

.sec-section { margin-bottom: 1.5rem; }
.sec-section-title {
  font-size: .9rem; font-weight: 700;
  margin-bottom: .7rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
}
.sec-section-desc {
  font-size: .82rem;
  color: var(--text-secondary);
  margin-bottom: .8rem;
}
.sec-empty { font-size: .82rem; color: var(--text-muted); font-style: italic; }

/* Hardening grid */
.hardening-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .5rem;
}
.hardening-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .8rem;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  font-size: .82rem;
}
.hardening-icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: .7rem;
  flex-shrink: 0;
}
.hardening-item.pass .hardening-icon { background: rgba(34,197,94,.18); color: var(--success); }
.hardening-item.warn .hardening-icon { background: rgba(245,158,11,.18); color: var(--warning); }
.hardening-item.fail .hardening-icon { background: rgba(239,68,68,.18); color: var(--danger); }

/* Locked IPs */
.locked-ips-list {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.locked-ip-chip {
  display: flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem;
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.25);
  border-radius: 999px;
  font-size: .78rem;
  color: var(--danger);
  font-family: 'JetBrains Mono','Fira Code',monospace;
}

/* Event distribution bars */
.event-bars {
  display: flex; flex-direction: column; gap: .4rem;
}
.event-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 60px;
  gap: .6rem;
  align-items: center;
  font-size: .8rem;
}
.event-bar-label {
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: capitalize;
}
.event-bar-track {
  height: 10px;
  background: var(--bg-surface);
  border-radius: 999px;
  overflow: hidden;
}
.event-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .5s ease;
}
.event-bar-fill.sql_injection { background: linear-gradient(90deg, #ef4444, #f87171); }
.event-bar-fill.xss { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.event-bar-fill.path_traversal { background: linear-gradient(90deg, #3b38ff, #2020e0); }
.event-bar-fill.command_injection { background: linear-gradient(90deg, #ec4899, #f472b6); }
.event-bar-fill.auth_failure { background: linear-gradient(90deg, #6366f1, #818cf8); }
.event-bar-fill.rate_limit { background: linear-gradient(90deg, #14b8a6, #2dd4bf); }
.event-bar-fill.lockout { background: linear-gradient(90deg, #dc2626, #ef4444); }
.event-bar-fill.payload_oversize { background: linear-gradient(90deg, #0600f6, #3b38ff); }
.event-bar-fill.clean { background: linear-gradient(90deg, #22c55e, #4ade80); }
.event-bar-count {
  text-align: right;
  font-weight: 600;
  color: var(--text-primary);
  font-family: 'JetBrains Mono','Fira Code',monospace;
  font-size: .78rem;
}

/* Events table */
.events-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.events-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}
.events-table th {
  background: var(--bg-surface);
  padding: .55rem .7rem;
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .7rem;
  border-bottom: 1px solid var(--border);
}
.events-table td {
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  vertical-align: top;
}
.events-table tr:last-child td { border-bottom: none; }
.events-table tr:hover td { background: var(--accent-subtle); }
.events-table .badge-blocked {
  display: inline-block;
  padding: .15rem .45rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
}
.events-table .badge-blocked.yes { background: rgba(239,68,68,.15); color: var(--danger); }
.events-table .badge-blocked.no { background: rgba(34,197,94,.15); color: var(--success); }

.events-table .category-badge {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
}
.category-badge.sql_injection { background: rgba(239,68,68,.12); color: #ef4444; }
.category-badge.xss { background: rgba(245,158,11,.12); color: #f59e0b; }
.category-badge.path_traversal { background: rgba(6,0,246,.12); color: #3b38ff; }
.category-badge.command_injection { background: rgba(236,72,153,.12); color: #ec4899; }
.category-badge.auth_failure { background: rgba(99,102,241,.12); color: #6366f1; }
.category-badge.rate_limit { background: rgba(20,184,166,.12); color: #14b8a6; }
.category-badge.lockout { background: rgba(220,38,38,.12); color: #dc2626; }
.category-badge.payload_oversize { background: rgba(6,0,246,.12); color: #0600f6; }
.category-badge.clean { background: rgba(34,197,94,.12); color: #22c55e; }
.category-badge.brute_force { background: rgba(220,38,38,.12); color: #dc2626; }
.category-badge.credential_stuffing { background: rgba(190,24,93,.12); color: #be185d; }
.category-badge.data_exfiltration { background: rgba(6,0,246,.12); color: #0600f6; }
.category-badge.scan_probe { background: rgba(245,158,11,.12); color: #f59e0b; }
.category-badge.request_flood { background: rgba(14,165,233,.12); color: #0ea5e9; }
.category-badge.unusual_payload { background: rgba(6,0,246,.10); color: #3b38ff; }
.category-badge.normal { background: rgba(34,197,94,.12); color: #22c55e; }


/* ═══════════════════════════════════════════════════════
   COMPLIANCE DASHBOARD
   ═══════════════════════════════════════════════════════ */

.comp-overall {
  display: flex; align-items: center; gap: 2rem;
  margin-bottom: 1.5rem;
  padding: 1.2rem 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.comp-score-ring {
  display: flex; flex-direction: column; align-items: center;
  min-width: 100px;
}
.comp-score-value {
  font-size: 2.4rem; font-weight: 800;
  background: linear-gradient(135deg, var(--accent), #3b38ff, #22c55e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}
.comp-score-label {
  font-size: .72rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.comp-summary {
  display: flex; gap: 1.2rem; flex-wrap: wrap;
}
.comp-summary-item {
  display: flex; flex-direction: column; align-items: center;
  gap: .1rem;
}
.comp-summary-count { font-size: 1.4rem; font-weight: 700; }
.comp-summary-count.pass { color: var(--success); }
.comp-summary-count.warn { color: var(--warning); }
.comp-summary-count.fail { color: var(--danger); }
.comp-summary-count.info { color: var(--accent); }
.comp-summary-label { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; }

/* NIST CSF grid */
.nist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .6rem;
}
.nist-card {
  display: flex; flex-direction: column; align-items: center;
  padding: .9rem .6rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: border-color var(--transition), transform var(--transition);
}
.nist-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.nist-function-code {
  font-size: .68rem; font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-text);
  margin-bottom: .3rem;
}
.nist-function-name {
  font-size: .82rem; font-weight: 600;
  color: var(--text-primary);
  margin-bottom: .2rem;
}
.nist-score {
  font-size: 1.4rem; font-weight: 800;
  line-height: 1;
}
.nist-score.high { color: var(--success); }
.nist-score.med { color: var(--warning); }
.nist-score.low { color: var(--danger); }
.nist-detail {
  font-size: .68rem; color: var(--text-muted);
  margin-top: .2rem;
}

/* Framework grid */
.fw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .7rem;
}
.fw-card {
  padding: 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), transform var(--transition);
}
.fw-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.fw-name { font-size: .9rem; font-weight: 700; margin-bottom: .3rem; }
.fw-score {
  font-size: 1.6rem; font-weight: 800;
  margin-bottom: .2rem;
}
.fw-score.high { color: var(--success); }
.fw-score.med { color: var(--warning); }
.fw-score.low { color: var(--danger); }
.fw-detail { font-size: .72rem; color: var(--text-muted); }

/* Controls filter */
.controls-filter {
  display: flex; gap: .4rem; margin-bottom: .8rem;
}
.filter-btn {
  padding: .35rem .8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: .78rem; font-family: inherit; font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.filter-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Controls list */
.controls-list {
  display: flex; flex-direction: column; gap: .4rem;
}
.control-item {
  display: flex; gap: .8rem;
  padding: .7rem .9rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.control-item:hover { background: var(--accent-subtle); }
.control-status {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .7rem;
  flex-shrink: 0;
  margin-top: .1rem;
}
.control-status.pass { background: rgba(34,197,94,.18); color: var(--success); }
.control-status.warn { background: rgba(245,158,11,.18); color: var(--warning); }
.control-status.fail { background: rgba(239,68,68,.18); color: var(--danger); }
.control-status.info { background: rgba(99,102,241,.18); color: var(--accent); }
.control-body { flex: 1; min-width: 0; }
.control-header {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .15rem;
  flex-wrap: wrap;
}
.control-id {
  font-size: .7rem; font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 4px;
  background: var(--badge-bg);
  color: var(--badge-text);
}
.control-title { font-size: .85rem; font-weight: 600; }
.control-nist {
  font-size: .65rem; font-weight: 600;
  padding: .1rem .35rem;
  border-radius: 4px;
  background: rgba(34,197,94,.1);
  color: var(--success);
}
.control-desc { font-size: .78rem; color: var(--text-muted); margin-bottom: .2rem; }
.control-evidence { font-size: .75rem; color: var(--text-secondary); line-height: 1.4; }
.control-remediation {
  font-size: .75rem;
  color: var(--warning);
  margin-top: .2rem;
  font-style: italic;
}


/* ═══════════════════════════════════════════════════════
   AI MODELS DASHBOARD
   ═══════════════════════════════════════════════════════ */

.ai-models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .7rem;
}
.ai-model-card {
  padding: 1rem 1.1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), transform var(--transition);
}
.ai-model-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.ai-model-name {
  font-size: .9rem; font-weight: 700;
  margin-bottom: .3rem;
  color: var(--text-primary);
}
.ai-model-type {
  display: inline-block;
  font-size: .68rem; font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-text);
  margin-bottom: .4rem;
}
.ai-model-desc {
  font-size: .78rem; color: var(--text-secondary);
  margin-bottom: .5rem; line-height: 1.4;
}
.ai-model-params {
  display: flex; flex-wrap: wrap; gap: .3rem;
}
.ai-param-chip {
  font-size: .7rem;
  padding: .2rem .5rem;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono','Fira Code',monospace;
}

/* AI result card */
.ai-result-card {
  margin-top: .8rem;
  padding: .8rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--chip-border);
  border-radius: var(--radius-sm);
  animation: fadeIn .3s ease;
}
.ai-result-row {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .3rem;
}
.ai-result-row:last-child { margin-bottom: 0; }
.ai-result-label {
  font-size: .78rem; color: var(--text-muted); font-weight: 600;
}
.ai-result-value {
  font-size: .88rem; font-weight: 700; color: var(--text-primary);
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
/* ═══════════════════ RESPONSIVE: TABLET ═══════════════════ */
@media (max-width: 1024px) {
  .scenarios-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .sec-metrics-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .distribution-charts-row { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════ RESPONSIVE: MOBILE (B-12) ═══════════════════ */
@media (max-width: 768px) {
  /* ── Sidebar: fully off-screen on mobile (overrides .collapsed too) ── */
  .sidebar,
  .sidebar.collapsed {
    width: var(--sidebar-w);
    transform: translateX(-100%);
  }
  .sidebar.open { transform: none; }

  /* ── Main content: no sidebar margin at all ── */
  .main-content,
  .sidebar.collapsed + .main-content {
    margin-left: 0 !important;
  }

  .menu-toggle { display: block; }

  /* ── API key: hide at tablet ── */
  .api-key-wrap { display: none; }

  /* ── Topbar: wrap nicely ── */
  .topbar {
    height: auto;
    min-height: var(--topbar-h);
    flex-wrap: wrap;
    padding: .5rem .8rem;
    gap: .4rem;
  }
  .page-title { font-size: .95rem; flex: 1; min-width: 0; }
  .topbar-actions { gap: .3rem; }

  /* ── Grids: 2-col or 1-col ── */
  .batch-row { grid-template-columns: 1fr 1fr; }
  .card-header-row { flex-direction: column; gap: .5rem; }
  .presets-grid { grid-template-columns: 1fr; }
  .ready-details { grid-template-columns: 1fr; }
  .step-header { gap: .6rem; }
  .sec-metrics-grid { grid-template-columns: 1fr 1fr; }
  .nist-grid { grid-template-columns: repeat(3, 1fr); }
  .fw-grid { grid-template-columns: 1fr 1fr; }
  .comp-overall { flex-direction: column; text-align: center; }
  .ai-models-grid { grid-template-columns: 1fr; }
  .scenario-card { padding: 0.8rem; }
  .distribution-charts-row { grid-template-columns: 1fr; }

  /* ── Touch-Friendly Targets (min 44px) ── */
  .nav-btn { min-height: 44px; padding: .7rem .9rem; }
  .btn { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .filter-btn { min-height: 44px; padding: .5rem .8rem; }
  .preset-card { min-height: 44px; }
  .module-chip { min-height: 40px; padding: .5rem .85rem; }

  /* ── Panels: less padding, prevent overflow ── */
  .panels-container { padding: .6rem; overflow-x: hidden; }
  .panel.active { overflow-x: hidden; }
  .card { padding: 1rem; overflow-wrap: break-word; word-break: break-word; }

  /* ── Toast positioning ── */
  .toast-container {
    right: 8px;
    left: 8px;
    max-width: none;
    width: auto;
  }

  /* ── Footer compact ── */
  .app-footer {
    flex-direction: column;
    text-align: center;
    gap: .3rem;
    padding: .6rem .8rem;
    font-size: .72rem;
  }
  .footer-sep { display: none; }
  .footer-credits {
    flex-direction: column;
    gap: .2rem;
    display: flex;
    align-items: center;
  }

  /* ── Event table: horizontal scroll ── */
  .events-table-wrap {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .events-table-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(90deg, transparent, var(--bg-card));
    pointer-events: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }
  .events-table { min-width: 500px; }

  /* ── Config/form grids ── */
  .form-grid { grid-template-columns: 1fr; }
  .config-grid { grid-template-columns: 1fr; }
  .hardening-grid { grid-template-columns: 1fr 1fr; }
  .controls-filter { flex-wrap: wrap; }

  /* ── Scenario detail: prevent inline overflow ── */
  .scenario-detail { overflow-x: hidden; }
  .scenario-detail pre,
  .scenario-detail code {
    white-space: pre-wrap;
    word-break: break-all;
  }
  .scenario-detail .env-table { overflow-x: auto; }
}

/* ═══════════════════ RESPONSIVE: SMALL PHONE (480px) ═══════════════════ */
@media (max-width: 480px) {
  .sec-metrics-grid { grid-template-columns: 1fr; }
  .nist-grid { grid-template-columns: 1fr 1fr; }
  .fw-grid { grid-template-columns: 1fr; }
  .batch-row { grid-template-columns: 1fr; }
  .ready-actions { flex-direction: column; }
  .ready-actions .btn { width: 100%; justify-content: center; }
  .page-title { font-size: .85rem; order: 1; }
  .menu-toggle { order: 0; }
  .topbar-actions { order: 2; flex-wrap: wrap; }
  .topbar-status { order: 3; width: 100%; justify-content: center; margin-top: .3rem; }
  .hardening-grid { grid-template-columns: 1fr; }

  /* ── Scenario cards: full width single column ── */
  .scenario-card { padding: .7rem; }

  /* ── Card even more compact ── */
  .card { padding: .8rem; }
  .card-title { font-size: 1.05rem; }
  .card-description { font-size: .82rem; }
}


/* ═══════════════════════════════════════════
   SCENARIOS
   ═══════════════════════════════════════════ */

.scenarios-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  margin: 0.75rem 0;
}
/* Responsive scenario grid breakpoints */
@media (max-width: 1100px) {
  .scenarios-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .scenarios-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .scenarios-grid { grid-template-columns: 1fr; }
}

.scenario-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.scenario-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #22c55e);
  opacity: 0;
  transition: opacity 0.3s;
}
.scenario-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px var(--accent-glow);
  border-color: var(--accent);
}
.scenario-card:hover::before { opacity: 1; }

.scenario-icon {
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}
.scenario-icon-lg {
  font-size: 3rem;
  margin-right: 1rem;
}

.scenario-industry {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0.25rem 0 0.5rem;
}

.scenario-meta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0.4rem 0;
}
.scenario-diff { color: var(--warning); letter-spacing: 2px; }
.scenario-hours { color: var(--accent); }

.scenario-apps {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin: 0.3rem 0;
}
.app-badge {
  background: var(--badge-bg);
  color: var(--badge-text);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 500;
}

.scenario-tasks-info {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.scenario-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.scenario-detail-header h3 {
  margin: 0 0 0.25rem;
}
.scenario-detail-header p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}


/* ═══════════════════════════════════════════
   DELIVERABLES
   ═══════════════════════════════════════════ */

.deliverables-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.deliverable-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-surface);
  border-radius: 8px;
  font-size: 0.9rem;
}
.deliverable-check { font-size: 1.1rem; }


/* ═══════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════ */

.faq-item {
  margin: 0.5rem 0;
  background: var(--bg-surface);
  border-radius: 8px;
  padding: 0.5rem 1rem;
}
.faq-item summary {
  cursor: pointer;
  padding: 0.4rem 0;
  color: var(--text-primary);
}
.faq-item p {
  color: var(--text-secondary);
  font-size: 0.88rem;
  padding: 0.25rem 0 0.25rem 1rem;
  margin: 0;
}


/* ═══════════════════════════════════════════
   GRADES
   ═══════════════════════════════════════════ */

.grade-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem;
  margin: 0.75rem 0;
  border-left: 4px solid var(--text-muted);
}
.grade-card.grade-pass { border-left-color: var(--success); }
.grade-card.grade-fair { border-left-color: var(--warning); }
.grade-card.grade-fail { border-left-color: var(--danger); }

.grade-card h4 {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.grade-score {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
}
.grade-label {
  font-size: 0.85rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.grade-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0.5rem 0;
}

.grade-dimensions {
  margin-top: 0.75rem;
}
.dim-row {
  display: grid;
  grid-template-columns: 140px 1fr 60px;
  align-items: center;
  gap: 0.5rem;
  margin: 0.3rem 0;
  font-size: 0.82rem;
}
.dim-name {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dim-bar {
  background: var(--bg-surface);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}
.dim-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #22c55e);
  border-radius: 4px;
  transition: width 0.5s ease;
}
.dim-score {
  text-align: right;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.78rem;
}

/* Table total row */
.table-total td {
  border-top: 2px solid var(--accent);
  background: var(--accent-subtle);
}

.text-center { text-align: center; }
.badge-primary {
  background: var(--accent);
  color: #fff;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
}

.muted { color: var(--text-muted); font-size: 0.88rem; }

@media (max-width: 500px) {
  .scenarios-grid { grid-template-columns: 1fr; }
  .dim-row { grid-template-columns: 100px 1fr 50px; }
}


/* ═══════════════════════════════════════════
   CONFIG GRID (generic)
   ═══════════════════════════════════════════ */

.config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0.75rem 0;
}
.config-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--bg-surface);
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.config-item label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  font-weight: 600;
}
.config-item code {
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  color: var(--accent);
  word-break: break-all;
  user-select: all;
  cursor: text;
}

.btn-secondary {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.btn-secondary:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
}

.panel-subtitle {
  color: var(--text-secondary);
  margin: -0.5rem 0 1.25rem;
  font-size: 0.9rem;
}

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

/* ═══════════════════════════════════════════════
   Teams Panel
   ═══════════════════════════════════════════════ */

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

.team-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.team-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light, #3b38ff));
  opacity: 0;
  transition: opacity 0.25s ease;
}

.team-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--accent);
}

.team-card:hover::before,
.team-card-active::before {
  opacity: 1;
}

.team-card-active {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
}

.team-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.team-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}

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

.team-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-industry {
  font-size: 0.78rem;
  color: var(--text-secondary);
  display: block;
  margin-top: 2px;
}

.team-card-stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
}

.team-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team-stat-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
}

.team-stat-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.team-card-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.progress-bar-mini {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill-mini {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #22c55e);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.team-scenario-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
}

/* Team Detail */
.team-detail-section {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  margin-top: 1rem;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.team-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.team-info-item {
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding: 0.4rem 0;
}

.team-info-item strong {
  color: var(--text);
}

.team-detail-members h4 {
  margin: 0.5rem 0 0.75rem;
  font-size: 0.95rem;
  color: var(--text);
}

.btn-sm {
  padding: 4px 10px;
  font-size: 0.78rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-danger {
  background: #ef4444;
  color: #fff;
}

.btn-danger:hover {
  background: #dc2626;
}

@media (max-width: 700px) {
  .team-cards-grid { grid-template-columns: 1fr; }
  .team-info-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   Launch, Datasets & Deliverables
   ═══════════════════════════════════════════════ */

.launch-section,
.datasets-section,
.import-guide-section,
.deliverables-section {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  margin-top: 1.25rem;
}

/* Launch — env vars grid */
.launch-env-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.launch-env-item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.82rem;
  padding: 0.4rem 0.6rem;
  background: var(--bg-secondary, #f3f4f6);
  border-radius: 6px;
  overflow: hidden;
}

.launch-env-key {
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  font-family: "Fira Code", "Consolas", monospace;
  font-size: 0.78rem;
}

.launch-env-val {
  color: var(--text);
  word-break: break-all;
  font-family: "Fira Code", "Consolas", monospace;
  font-size: 0.78rem;
}

.launch-code {
  background: #1e293b;
  color: #e2e8f0;
  padding: 1rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-family: "Fira Code", "Consolas", monospace;
  overflow-x: auto;
  white-space: pre-wrap;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

/* Datasets — stats chips */
.ds-stats {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ds-stat-chip {
  background: var(--accent);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* Datasets table */
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 1rem;
}

.ds-table th {
  background: var(--bg-secondary, #f3f4f6);
  padding: 0.5rem 0.6rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
}

.ds-table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.ds-table td a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.ds-table td a:hover {
  text-decoration: underline;
}

.ds-table tr:hover {
  background: rgba(99, 102, 241, 0.04);
}

.ds-actions {
  display: flex;
  gap: 0.75rem;
}

/* Import guide */
.import-guide-content {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text);
}

.import-guide-content code {
  background: var(--bg-secondary, #f3f4f6);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.82rem;
  font-family: "Fira Code", "Consolas", monospace;
}

.import-guide-content li {
  margin-bottom: 0.3rem;
}

/* Deliverables upload */
.del-upload-area {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 2px dashed var(--border);
  border-radius: 10px;
  margin-bottom: 1rem;
}

.del-upload-area label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.del-upload-area input[type="file"] {
  flex: 1;
  font-size: 0.85rem;
}

@media (max-width: 700px) {
  .launch-env-grid { grid-template-columns: 1fr; }
  .del-upload-area { flex-direction: column; align-items: stretch; }
}

/* ═══════════════════════════════════════════════
   Scenario Card Actions
   ═══════════════════════════════════════════════ */

.scenario-card-header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  cursor: pointer;
}

.scenario-card-info h4 { margin: 0; }
.scenario-card-info .scenario-industry { margin: 0.25rem 0; opacity: 0.7; font-size: 0.9rem; }

.scenario-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.scenario-card-actions .btn-accent,
.scenario-card-actions .btn-outline {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--accent);
}
.btn-outline:hover {
  background: var(--accent);
  color: white;
}

/* Scenario description */
.scenario-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0.3rem 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* Progress bar */
.scenario-progress-bar {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  height: 20px;
  overflow: hidden;
  margin: 0.3rem 0;
}

.scenario-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #3b38ff);
  border-radius: 20px;
  transition: width 0.5s ease;
}

.scenario-progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.app-badge-more {
  background: var(--accent) !important;
  color: white !important;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.app-badge-more:hover {
  transform: scale(1.1);
  opacity: 0.85;
}

/* Export Section */
.export-section {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  margin-top: 1rem;
}

.export-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.export-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Footer improvements */
.app-footer {
  text-align: center;
  padding: 1.25rem 1rem;
}

.footer-brand {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.footer-credits {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.footer-credits a {
  color: var(--accent);
  text-decoration: none;
}

.footer-credits a:hover {
  text-decoration: underline;
}

/* ═══ Odoo Dashboard ═══ */
.odoo-dashboard {
  border-top: 2px solid var(--accent);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}

.odoo-dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.odoo-dash-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.odoo-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.odoo-status-icon { font-size: 1.2rem; }
.odoo-status-icon.connected { color: #22c55e; }
.odoo-status-icon.error { color: #ef4444; }

.odoo-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.odoo-metric {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}

.odoo-metric-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.odoo-metric-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.odoo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-top: 0.75rem;
}

.odoo-table th {
  background: var(--bg-card);
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}

.odoo-table td {
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.odoo-table .num {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.odoo-bar {
  height: 8px;
  background: linear-gradient(90deg, var(--accent), #3b38ff);
  border-radius: 4px;
  min-width: 2px;
  transition: width 0.4s ease;
}

.odoo-tables-section,
.odoo-users-section {
  margin-top: 1rem;
}

.odoo-tables-section h4,
.odoo-users-section h4 {
  margin-bottom: 0.5rem;
}

/* Small buttons */
.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
}

.btn-sm.btn-outline {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}

.btn-sm.btn-outline:hover {
  background: var(--accent);
  color: white;
}

.btn-sm.btn-accent {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.btn-sm.btn-accent:hover {
  background: var(--accent-hover, #5b52e5);
}

.btn-sm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Unified link color */
a, .dataset-link {
  color: var(--accent);
}

/* Empty state placeholder */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  text-align: center;
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state p {
  max-width: 400px;
  line-height: 1.6;
}

/* Panel title */
.distribution-charts-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.panel-title {
  text-transform: none;
}

/* ═══════════════════════════════════════════
   ENTRANCE ANIMATIONS
   ═══════════════════════════════════════════ */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.scenario-card {
  animation: fadeSlideUp 0.4s ease both;
}
.scenario-card:nth-child(1) { animation-delay: 0.05s; }
.scenario-card:nth-child(2) { animation-delay: 0.10s; }
.scenario-card:nth-child(3) { animation-delay: 0.15s; }
.scenario-card:nth-child(4) { animation-delay: 0.20s; }
.scenario-card:nth-child(5) { animation-delay: 0.25s; }

.card {
  animation: fadeSlideUp 0.35s ease both;
}

/* ═══════════════════════════════════════════
   TASK LIST — INTERACTIVE CHECKBOXES
   ═══════════════════════════════════════════ */
.task-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  transition: background 0.2s, transform 0.15s;
  border: 1px solid transparent;
  margin-bottom: 0.35rem;
}

.task-row:hover {
  background: var(--accent-subtle);
  border-color: var(--border);
}

.task-row.completed {
  opacity: 0.55;
}

.task-row.completed .task-title {
  text-decoration: line-through;
}

.task-check {
  appearance: none;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 2px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  margin-top: 2px;
  background: var(--bg-card);
}

.task-check:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.task-check:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
  font-weight: 700;
}

.task-check:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

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

.task-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.task-order {
  background: var(--accent-subtle);
  color: var(--accent);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.task-title {
  font-weight: 600;
  font-size: 0.92rem;
}

.task-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  line-height: 1.4;
}

.task-meta {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}

.task-tag {
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--text-secondary);
  font-weight: 500;
}

.task-tag.tag-config { background: rgba(34,197,94,.1); color: #16a34a; border-color: rgba(34,197,94,.2); }
.task-tag.tag-data { background: rgba(59,130,246,.1); color: #3b82f6; border-color: rgba(59,130,246,.2); }
.task-tag.tag-exec { background: rgba(249,115,22,.1); color: #f97316; border-color: rgba(249,115,22,.2); }
.task-tag.tag-dashboard { background: rgba(6,0,246,.08); color: #3b38ff; border-color: rgba(6,0,246,.15); }
.task-tag.tag-financial { background: rgba(234,179,8,.1); color: #ca8a04; border-color: rgba(234,179,8,.2); }
.task-tag.tag-hr { background: rgba(236,72,153,.1); color: #ec4899; border-color: rgba(236,72,153,.2); }
.task-tag.tag-decision { background: rgba(14,165,233,.1); color: #0ea5e9; border-color: rgba(14,165,233,.2); }
.task-tag.tag-time { background: var(--chip-bg); color: var(--text-muted); }

/* ═══════════════════════════════════════════
   PROGRESS PANEL — MILESTONE CARDS
   ═══════════════════════════════════════════ */
.progress-scenario-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin-bottom: 0.75rem;
  transition: border-color 0.2s;
}

.progress-scenario-card:hover {
  border-color: var(--accent);
}

.progress-scenario-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.progress-scenario-name {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.progress-pct {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
}

.progress-bar-mini {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-input);
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.progress-bar-mini-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), #22c55e);
  transition: width 0.6s ease;
}

.progress-milestones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.milestone-chip {
  font-size: 0.72rem;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-weight: 500;
}

.milestone-chip.done {
  background: rgba(34,197,94,.12);
  color: #16a34a;
}

.milestone-chip.pending {
  background: var(--chip-bg);
  color: var(--text-muted);
}

/* Summary stats row */
.progress-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.progress-stat {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}

.progress-stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
}

.progress-stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ═══════════════════════════════════════════
   ODOO DASHBOARD ENHANCEMENTS
   ═══════════════════════════════════════════ */
.odoo-metric {
  position: relative;
  overflow: hidden;
}

.odoo-metric::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #22c55e);
  opacity: 0;
  transition: opacity 0.3s;
}

.odoo-metric:hover::before {
  opacity: 1;
}

.odoo-metric:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--accent-glow);
}

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-surface) 25%,
    var(--bg-card) 37%,
    var(--bg-surface) 63%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

.skeleton-text {
  height: 1rem;
  width: 80%;
  margin-bottom: 0.5rem;
}

.skeleton-metric {
  height: 3rem;
  width: 60%;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════
   SCENARIO DETAIL IMPROVEMENTS
   ═══════════════════════════════════════════ */
.scenario-detail-header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.scenario-icon-lg {
  font-size: 2.5rem;
  line-height: 1;
}

.scenario-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.scenario-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* ═══════════════════════════════════════════
   RUBRIC TABLE — COLOR CODED BADGES
   ═══════════════════════════════════════════ */
.rubric-points {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.85rem;
  color: white;
}

.rubric-points.pts-high { background: linear-gradient(135deg, var(--accent), #22c55e); }
.rubric-points.pts-med  { background: linear-gradient(135deg, #0600f6, #3b38ff); }
.rubric-points.pts-low  { background: linear-gradient(135deg, #f59e0b, #ef4444); }

/* ═══════════════════════════════════════════
   DATA TABLE IMPROVEMENTS
   ═══════════════════════════════════════════ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.data-table th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 2px solid var(--border);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.data-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

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

.data-table tbody tr:hover {
  background: var(--accent-subtle);
}

.data-table .table-total td {
  border-top: 2px solid var(--accent);
  font-weight: 600;
}

/* ═══════════════════════════════════════════
   FAQ ITEM POLISH
   ═══════════════════════════════════════════ */
.faq-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  margin-bottom: 0.5rem;
  overflow: hidden;
  transition: border-color 0.2s;
}

.faq-item:hover {
  border-color: var(--accent);
}

.faq-item summary {
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.faq-item summary::before {
  content: '▸';
  color: var(--accent);
  font-weight: 700;
  transition: transform 0.2s;
}

.faq-item[open] summary::before {
  transform: rotate(90deg);
}

.faq-item p {
  padding: 0 1rem 0.75rem;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   FOOTER POLISH
   ═══════════════════════════════════════════ */
.app-footer a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.2s;
}

.app-footer a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* ═══════════════════════════════════════════
   COMPLETION RING (used in progress panel)
   ═══════════════════════════════════════════ */
.completion-ring {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto;
}

.completion-ring svg {
  width: 80px;
  height: 80px;
  transform: rotate(-90deg);
}

.completion-ring circle {
  fill: none;
  stroke-width: 6;
}

.completion-ring .ring-bg {
  stroke: var(--border);
}

.completion-ring .ring-fill {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease;
}

.completion-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent);
}


/* ═══════════════════════════════════════════
   SQL LOADER SECTION
   ═══════════════════════════════════════════ */

.sql-loader-section,
.auto-progress-section {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  margin-top: 1.25rem;
}

.sql-loader-section h3,
.auto-progress-section h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sql-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.sql-warning {
  font-size: 0.78rem;
  color: var(--warning, #f59e0b);
  background: rgba(245, 158, 11, 0.08);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin-top: 0.15rem;
}

.btn-mini {
  padding: 3px 8px;
  font-size: 0.72rem;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-mini:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}


/* ═══════════════════════════════════════════
   SQL PREVIEW MODAL
   ═══════════════════════════════════════════ */

.sql-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}

.sql-preview-modal.visible {
  display: flex;
}

.sql-preview-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}

.sql-preview-dialog {
  position: relative;
  background: var(--bg-card, #fff);
  border-radius: 16px;
  width: 90%;
  max-width: 840px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  animation: modalSlideUp 0.25s ease;
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.sql-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.sql-preview-header h3 {
  margin: 0;
  font-size: 1rem;
}

.sql-preview-actions {
  display: flex;
  gap: 0.5rem;
}

.sql-preview-code {
  padding: 1.25rem 1.5rem;
  overflow: auto;
  flex: 1;
  background: #1e293b;
  color: #e2e8f0;
  font-family: "Fira Code", "Consolas", monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre-wrap;
  margin: 0;
  border-radius: 0 0 16px 16px;
  max-height: 70vh;
}


/* ═══════════════════════════════════════════
   FEATURE BADGES (Launch section)
   ═══════════════════════════════════════════ */

.launch-features {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.feature-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1.5px solid transparent;
}

.feature-badge.sql {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border-color: rgba(245, 158, 11, 0.3);
}

.feature-badge.auto {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.3);
}

.feature-badge.csv {
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent);
  border-color: rgba(99, 102, 241, 0.3);
}

.feature-badge.oneclick {
  background: rgba(236, 72, 153, 0.12);
  color: #db2777;
  border-color: rgba(236, 72, 153, 0.3);
}


/* ═══════════════════════════════════════════
   AUTO-PROGRESS VERIFICATION
   ═══════════════════════════════════════════ */

.ap-task-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  transition: border-color 0.2s;
}

.ap-task-card:hover {
  border-color: var(--accent);
}

.ap-task-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.ap-task-id {
  font-family: "Fira Code", monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-surface, #f3f4f6);
  padding: 2px 8px;
  border-radius: 4px;
}

.ap-badge {
  font-size: 0.72rem;
  padding: 2px 10px;
  border-radius: 12px;
  font-weight: 600;
}

.ap-badge.auto {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.ap-badge.manual {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.ap-check-count {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.ap-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 0.2rem 0;
}

.ap-check-icon {
  font-size: 0.9rem;
}

.ap-check-min {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--text-muted);
  background: var(--bg-surface, #f3f4f6);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: "Fira Code", monospace;
}

.ap-no-checks {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.25rem 0;
}

/* Scan button area */
.ap-scan-area {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 2px dashed var(--accent);
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.04);
}

/* Scan results */
.ap-scanning {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  color: var(--accent);
  font-weight: 500;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.ap-error {
  padding: 0.75rem 1rem;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #dc2626;
  font-weight: 500;
}

.ap-results {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.ap-results-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.08));
  border-bottom: 1px solid var(--border);
}

.ap-results-icon {
  font-size: 2rem;
}

.ap-results-pct {
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.ap-results-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.ap-results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--border);
}

.ap-result-item {
  padding: 0.75rem;
  text-align: center;
  border-right: 1px solid var(--border);
}

.ap-result-item:last-child {
  border-right: none;
}

.ap-result-value {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ap-result-item.verified .ap-result-value { color: #22c55e; }
.ap-result-item.partial .ap-result-value { color: #f59e0b; }
.ap-result-item.not-detected .ap-result-value { color: var(--text-muted); }
.ap-result-item.manual .ap-result-value { color: var(--accent); }

.ap-result-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.ap-updated {
  padding: 0.75rem 1.25rem;
  background: rgba(34, 197, 94, 0.06);
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.ap-updated-chip {
  display: inline-block;
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  margin: 0 0.25rem;
  font-family: "Fira Code", monospace;
}

.ap-task-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0;
  padding: 0.5rem;
}

.ap-task-detail {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.78rem;
  border-radius: 6px;
  transition: background 0.2s;
}

.ap-task-detail:hover {
  background: rgba(99, 102, 241, 0.05);
}

.ap-task-detail.verified { background: rgba(34, 197, 94, 0.06); }
.ap-task-detail.partial { background: rgba(245, 158, 11, 0.06); }

.ap-td-icon { font-size: 0.9rem; }
.ap-td-id {
  font-family: "Fira Code", monospace;
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.ap-td-pct {
  font-weight: 700;
  color: var(--text-primary);
  margin-left: auto;
}
.ap-td-checks {
  font-size: 0.7rem;
  color: var(--text-muted);
}

@media (max-width: 700px) {
  .ap-results-grid { grid-template-columns: repeat(2, 1fr); }
  .ap-task-detail-grid { grid-template-columns: 1fr 1fr; }
  .ap-scan-area { flex-direction: column; text-align: center; }
  .sql-preview-dialog { width: 98%; max-height: 92vh; }
}

/* ═══════════════════════════════════════════════
   Preload Section
   ═══════════════════════════════════════════════ */

.preload-section {
  background: var(--card-bg);
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-top: 1rem;
}
.preload-section h3 { margin-bottom: 0.5rem; }
.preload-status {
  padding: 0.75rem 1rem;
  background: var(--bg-muted, rgba(0,0,0,0.03));
  border-radius: var(--radius);
  margin: 0.75rem 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
[data-theme="dark"] .preload-status {
  background: rgba(255,255,255,0.05);
}
.preload-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
}
.preload-result { margin-top: 1rem; }
.preload-success {
  background: rgba(16, 185, 129, 0.1);
  border-left: 4px solid #10b981;
  padding: 1rem;
  border-radius: var(--radius);
}
.preload-success strong { color: #10b981; }
.preload-error {
  background: rgba(239, 68, 68, 0.1);
  border-left: 4px solid #ef4444;
  padding: 1rem;
  border-radius: var(--radius);
}
.preload-error strong { color: #ef4444; }
.preload-warnings {
  color: #f59e0b;
  font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════
   Agile Task Board
   ═══════════════════════════════════════════════ */

.tasks-board-section {
  margin-top: 1.5rem;
}
.tasks-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tasks-header h4 { margin: 0; }
.tasks-controls {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.task-filter-select {
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 0.82rem;
}
.task-board-stats {
  display: flex;
  gap: 0.4rem;
}
.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}
.stat-todo { background: rgba(156,163,175,0.15); color: var(--text-secondary); }
.stat-doing { background: rgba(59,130,246,0.15); color: #3b82f6; }
.stat-done { background: rgba(16,185,129,0.15); color: #10b981; }
.stat-total { background: var(--accent-bg, rgba(99,102,241,0.1)); color: var(--accent); font-weight: 700; }

/* Task row status states */
.task-row.status-todo { border-left: 3px solid var(--border); }
.task-row.status-doing { border-left: 3px solid #3b82f6; background: rgba(59,130,246,0.04); }
.task-row.status-done { border-left: 3px solid #10b981; }

.task-status-col {
  display: flex;
  align-items: flex-start;
  padding-top: 0.25rem;
  min-width: 110px;
}
.task-status-select {
  padding: 0.25rem 0.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.2s;
}
.task-status-select:focus {
  outline: none;
  border-color: var(--accent);
}
.task-owner-select {
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--bg-muted, rgba(0,0,0,0.03));
  color: var(--text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  max-width: 150px;
}
[data-theme="dark"] .task-owner-select {
  background: rgba(255,255,255,0.05);
}
.task-owner-select:hover, .task-owner-select:focus {
  border-color: var(--accent);
  background: var(--card-bg);
}
.task-add-member {
  background: none;
  border: 1px dashed var(--border);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.task-add-member:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(99,102,241,0.08);
}

/* ═══════════════════════════════════════════════
   Next Steps Assistant
   ═══════════════════════════════════════════════ */

.next-steps-section {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.next-steps-section h3 { margin-bottom: 0.75rem; }
.next-steps-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.next-step-card {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--bg-muted, rgba(0,0,0,0.02));
  border: 1px solid var(--border);
  transition: transform 0.15s, box-shadow 0.15s;
}
[data-theme="dark"] .next-step-card {
  background: rgba(255,255,255,0.03);
}
.next-step-card:hover {
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.step-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  width: 2rem;
  text-align: center;
}
.step-content {
  flex: 1;
}
.step-content strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--text-primary);
}
.step-content p {
  margin: 0.15rem 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.step-start { border-left: 3px solid var(--accent); }
.step-progress { border-left: 3px solid #3b82f6; }
.step-doing { border-left: 3px solid #f59e0b; }
.step-tip { border-left: 3px solid #3b38ff; background: rgba(6,0,246,0.04); }
[data-theme="dark"] .step-tip { background: rgba(139,92,246,0.08); }
.step-complete { border-left: 3px solid #10b981; background: rgba(16,185,129,0.06); }
[data-theme="dark"] .step-complete { background: rgba(16,185,129,0.12); }

/* Task row layout adjustment for new status col */
.task-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

@media (max-width: 600px) {
  .tasks-header { flex-direction: column; align-items: flex-start; }
  .task-status-col { min-width: auto; }
  .task-owner-select { max-width: 120px; }
  .next-step-card { flex-direction: column; }
  .step-icon { width: auto; }
}

/* ═══════════════════════════════════════════
   SIDEBAR COLLAPSE
   ═══════════════════════════════════════════ */
.sidebar-toggle {
  background: none; border: none;
  color: var(--text-muted);
  font-size: 1.2rem; cursor: pointer;
  margin-left: auto;
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition), transform var(--transition);
  flex-shrink: 0;
}
.sidebar-toggle:hover { background: var(--accent-subtle); color: var(--text-primary); }

/* Collapsed state */
.sidebar.collapsed {
  width: 56px;
}
.sidebar.collapsed .brand-info {
  width: 0; overflow: hidden; opacity: 0; position: absolute;
}
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .status-text {
  display: none;
}
.sidebar.collapsed .sidebar-brand {
  justify-content: center;
  padding: 0.9rem 0.4rem;
  gap: 0;
}
.sidebar.collapsed .sidebar-toggle {
  transform: rotate(180deg);
  margin: 0;
  position: absolute;
  right: 4px; top: 8px;
}
/* Hide the full logo when collapsed and show the asterisk fallback */
.sidebar.collapsed .brand-logo {
  display: none;
}
/* Hide the mini icon by default; show only when collapsed */
.sidebar .brand-icon-mini {
  display: none;
}
.sidebar.collapsed .brand-icon-mini {
  display: block;
  color: var(--accent);
  flex-shrink: 0;
}
.sidebar.collapsed .nav-btn {
  justify-content: center;
  padding: 0.7rem;
}
.sidebar.collapsed .nav-icon {
  width: auto;
  font-size: 1.15rem;
}
.sidebar.collapsed .sidebar-nav {
  padding: 0.8rem 0.3rem;
  align-items: center;
}
.sidebar.collapsed .status-badge {
  justify-content: center;
  padding: 0.4rem;
}
.sidebar.collapsed + .main-content {
  margin-left: 56px;
}
/* Override on mobile — sidebar is hidden, no margin needed */
@media (max-width: 768px) {
  .sidebar.collapsed + .main-content {
    margin-left: 0 !important;
  }
}

/* ═══════════════════════════════════════════
   TOPBAR STATUS STRIP
   ═══════════════════════════════════════════ */
.topbar-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  justify-content: center;
}
.topbar-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: all var(--transition);
}
.topbar-chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: background var(--transition);
}
.topbar-chip.ok {
  border-color: rgba(34, 197, 94, 0.3);
  color: var(--success);
}
.topbar-chip.ok .topbar-chip-dot {
  background: var(--success);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}
.topbar-chip.err {
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--danger);
}
.topbar-chip.err .topbar-chip-dot {
  background: var(--danger);
}
.topbar-chip.info {
  border-color: var(--accent-glow);
  color: var(--accent);
  background: var(--accent-subtle);
}

@media (max-width: 768px) {
  .topbar-status {
    display: flex;
    order: 3;
    width: 100%;
    justify-content: center;
    margin-top: .2rem;
    font-size: .75rem;
  }
  .topbar-chip { font-size: .7rem; padding: .15rem .5rem; }
}

/* ═══════════════════════════════════════════════════════
   THEME TOGGLE ANIMATION (B-11)
   ═══════════════════════════════════════════════════════ */

/* Smooth transition overlay for theme changes */
.theme-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
}

.theme-transition-overlay.active {
  animation: themeFlash 0.45s ease-out forwards;
}

@keyframes themeFlash {
  0% { opacity: 0; background: var(--accent); }
  20% { opacity: 0.08; }
  100% { opacity: 0; }
}

/* Theme toggle button animation */
.icon-btn.theme-btn {
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1),
              border-color var(--transition),
              background var(--transition),
              color var(--transition);
}
.icon-btn.theme-btn:active {
  transform: scale(0.8) rotate(20deg);
}
.icon-btn.theme-btn.animating {
  animation: themeRotate 0.5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes themeRotate {
  0% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(0.7) rotate(-90deg); }
  60% { transform: scale(1.15) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Smooth body/card transitions on theme change */
body,
.card,
.sidebar,
.topbar,
.app-footer,
.sec-metric-card,
.nist-card,
.fw-card,
.ai-model-card,
.preset-card,
.ready-card,
.control-item,
.comp-overall,
.hardening-item,
details.output-section pre {
  transition: background 0.4s ease,
              color 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}


/* ═══════════════════════════════════════════════════════
   TOAST NOTIFICATIONS (B-14)
   ═══════════════════════════════════════════════════════ */

.toast-container {
  position: fixed;
  top: calc(var(--topbar-h) + 12px);
  right: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 380px;
  width: calc(100vw - 32px);
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.12);
  pointer-events: auto;
  animation: toastSlideIn 0.35s cubic-bezier(.22,1,.36,1) forwards;
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.toast.removing {
  animation: toastSlideOut 0.3s cubic-bezier(.55,.06,.68,.19) forwards;
}

@keyframes toastSlideIn {
  0% { opacity: 0; transform: translateX(100%) scale(0.9); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toastSlideOut {
  0% { opacity: 1; transform: translateX(0) scale(1); max-height: 120px; margin-bottom: 0; }
  100% { opacity: 0; transform: translateX(100%) scale(0.85); max-height: 0; margin-bottom: -8px; padding: 0; }
}

.toast-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 1px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

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

.toast-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.toast-message {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
  word-break: break-word;
}

.toast-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background var(--transition), color var(--transition);
}
.toast-close:hover {
  background: rgba(128,128,128,0.15);
  color: var(--text-primary);
}

/* Toast progress bar */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0 0 var(--radius-md) 0;
  animation: toastProgress linear forwards;
}

@keyframes toastProgress {
  0% { width: 100%; }
  100% { width: 0%; }
}

/* Toast variants */
.toast.success {
  border-left: 3px solid var(--success);
}
.toast.success .toast-icon {
  background: rgba(34,197,94,.12);
  color: var(--success);
}
.toast.success .toast-progress {
  background: var(--success);
}

.toast.error {
  border-left: 3px solid var(--danger);
}
.toast.error .toast-icon {
  background: rgba(239,68,68,.12);
  color: var(--danger);
}
.toast.error .toast-progress {
  background: var(--danger);
}

.toast.warning {
  border-left: 3px solid var(--warning);
}
.toast.warning .toast-icon {
  background: rgba(245,158,11,.12);
  color: var(--warning);
}
.toast.warning .toast-progress {
  background: var(--warning);
}

.toast.info {
  border-left: 3px solid var(--accent);
}
.toast.info .toast-icon {
  background: var(--accent-subtle);
  color: var(--accent);
}
.toast.info .toast-progress {
  background: var(--accent);
}