/* ===== CyberHeroesHQ — Network Defense Lab ===== */
/* Dark cyber range aesthetic. Green-on-black terminal vibes with electric accents. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-950:     #050d0f;
  --bg-900:     #0a1a1f;
  --bg-800:     #0f2530;
  --bg-panel:   #0d1e24;
  --green-500:  #22c55e;
  --green-400:  #4ade80;
  --green-300:  #86efac;
  --cyan-500:   #06b6d4;
  --cyan-400:   #22d3ee;
  --amber-500:  #f59e0b;
  --amber-400:  #fbbf24;
  --red-500:    #ef4444;
  --red-400:    #f87171;
  --slate-400:  #94a3b8;
  --slate-300:  #cbd5e1;
  --white:      #ffffff;
  --font-mono:  'Courier New', Courier, monospace;
  --font-body:  'Satoshi', system-ui, sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;
  --max-w:      1100px;
  --panel-r:    10px;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg-950);
  color: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.lab-nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(5,13,15,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(34,197,94,0.12);
  padding: 0 24px;
}
.lab-nav-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
}
.lab-nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-weight: 700; }
.lab-nav-brand-mark { font-size: 1.25rem; }
.lab-nav-tag { font-size: 0.7rem; background: rgba(34,197,94,0.15); color: var(--green-400); border: 1px solid rgba(34,197,94,0.25); border-radius: 4px; padding: 2px 7px; letter-spacing: 0.06em; text-transform: uppercase; }
.lab-nav-links { display: flex; align-items: center; gap: 24px; }
.lab-nav-links a { color: var(--slate-400); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.lab-nav-links a:hover { color: var(--white); }
.lab-nav-back { display: flex; align-items: center; gap: 6px; color: var(--green-400) !important; font-weight: 500; }

/* ── Lab Header ───────────────────────────────────────────────────────────── */
.lab-header {
  background: linear-gradient(180deg, rgba(34,197,94,0.06) 0%, transparent 100%);
  border-bottom: 1px solid rgba(34,197,94,0.1);
  padding: 36px 24px 28px;
}
.lab-header-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.lab-header-text h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 400; line-height: 1.15; margin-bottom: 8px; }
.lab-header-text h1 em { font-style: italic; color: var(--green-400); }
.lab-header-sub { color: var(--slate-400); font-size: 0.95rem; max-width: 560px; }
.lab-header-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.lab-xp-badge { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); border-radius: 8px; padding: 12px 18px; text-align: center; }
.lab-xp-badge .xp-num { font-size: 1.6rem; font-weight: 700; color: var(--green-400); display: block; line-height: 1; }
.lab-xp-badge .xp-label { font-size: 0.7rem; color: var(--slate-400); text-transform: uppercase; letter-spacing: 0.08em; }
.lab-badge-preview { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--slate-400); }
.lab-badge-preview .badge-icon { font-size: 1.4rem; }

/* ── Progress Tracker ─────────────────────────────────────────────────────── */
.lab-progress-bar-wrap {
  background: var(--bg-900);
  border-bottom: 1px solid rgba(34,197,94,0.08);
  padding: 16px 24px;
}
.lab-progress-bar-inner { max-width: var(--max-w); margin: 0 auto; }
.lab-levels-track { display: flex; align-items: center; gap: 0; }
.lab-level-step {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
}
.lab-level-step:last-child { flex: 0 0 auto; }
.lab-level-dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 2px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: var(--slate-400);
  flex-shrink: 0; position: relative; z-index: 1; transition: all 0.3s;
}
.lab-level-dot.active { background: rgba(34,197,94,0.15); border-color: var(--green-400); color: var(--green-400); }
.lab-level-dot.done { background: var(--green-500); border-color: var(--green-500); color: var(--bg-950); }
.lab-level-label { font-size: 0.72rem; color: var(--slate-400); white-space: nowrap; display: none; }
.lab-level-connector { flex: 1; height: 2px; background: rgba(255,255,255,0.07); margin: 0 4px; transition: background 0.3s; }
.lab-level-connector.done { background: var(--green-500); }
@media (min-width: 600px) { .lab-level-label { display: block; } }

/* ── Main Layout ──────────────────────────────────────────────────────────── */
.lab-main { max-width: var(--max-w); margin: 0 auto; padding: 32px 24px 64px; }

/* ── Panels (all levels share this shell) ─────────────────────────────────── */
.lab-level-panel {
  display: none;
  background: var(--bg-panel);
  border: 1px solid rgba(34,197,94,0.12);
  border-radius: var(--panel-r);
  overflow: hidden;
}
.lab-level-panel.active { display: block; }

.lab-panel-header {
  background: rgba(34,197,94,0.06);
  border-bottom: 1px solid rgba(34,197,94,0.1);
  padding: 18px 24px;
  display: flex; align-items: center; gap: 14px;
}
.lab-panel-icon { font-size: 1.5rem; }
.lab-panel-title-block {}
.lab-panel-num { font-size: 0.72rem; color: var(--green-400); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; }
.lab-panel-title { font-size: 1.1rem; font-weight: 600; }
.lab-panel-body { padding: 24px; }

/* ── Cipher Mentor ────────────────────────────────────────────────────────── */
.cipher-bubble {
  background: rgba(6,182,212,0.06);
  border: 1px solid rgba(6,182,212,0.2);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 24px;
  display: flex; gap: 12px; align-items: flex-start;
}
.cipher-avatar { font-size: 1.4rem; flex-shrink: 0; }
.cipher-text { font-size: 0.88rem; color: var(--slate-300); line-height: 1.6; }
.cipher-text strong { color: var(--cyan-400); }

/* ── Level 1: Network Map ─────────────────────────────────────────────────── */
.network-map-wrap { position: relative; }
.network-svg-wrap {
  background: rgba(5,13,15,0.8);
  border: 1px solid rgba(34,197,94,0.1);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}
.network-svg-wrap svg { display: block; width: 100%; }

/* Device status legend */
.network-legend { display: flex; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--slate-400); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.legend-dot.normal  { background: var(--green-500); }
.legend-dot.suspect { background: var(--amber-500); }
.legend-dot.compromised { background: var(--red-500); }

/* Device tooltip */
.device-tooltip {
  background: var(--bg-800);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 8px;
  padding: 14px;
  font-size: 0.82rem;
  min-width: 220px;
  display: none;
  margin-bottom: 16px;
}
.device-tooltip.visible { display: block; }
.device-tooltip-name { font-weight: 700; font-size: 0.92rem; margin-bottom: 6px; }
.device-tooltip-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 3px; color: var(--slate-400); }
.device-tooltip-row span:last-child { color: var(--slate-300); font-family: var(--font-mono); font-size: 0.78rem; }
.device-tooltip-status-normal { color: var(--green-400); font-weight: 600; }
.device-tooltip-status-suspect { color: var(--amber-400); font-weight: 600; }
.device-tooltip-status-compromised { color: var(--red-400); font-weight: 600; }

/* L1 task area */
.l1-task-area { background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 18px; }
.l1-task-title { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--amber-400); margin-bottom: 12px; }
.l1-device-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 16px; }
.l1-choice-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--slate-300);
  text-align: left;
  transition: all 0.2s;
  display: flex; align-items: center; gap: 8px;
}
.l1-choice-btn:hover { border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.05); }
.l1-choice-btn.selected { border-color: var(--amber-400); background: rgba(245,158,11,0.08); color: var(--amber-400); }
.l1-choice-btn.correct { border-color: var(--green-400); background: rgba(34,197,94,0.1); color: var(--green-400); }
.l1-choice-btn.wrong { border-color: var(--red-400); background: rgba(239,68,68,0.08); color: var(--red-400); }

/* ── Level 2: Traffic Inspector ───────────────────────────────────────────── */
.traffic-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(34,197,94,0.1);
  border-radius: 8px;
  margin-bottom: 20px;
  background: rgba(5,13,15,0.6);
}
.traffic-table {
  width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.78rem;
  table-layout: fixed;
}
.traffic-table thead tr { background: rgba(34,197,94,0.07); border-bottom: 1px solid rgba(34,197,94,0.12); }
.traffic-table th { padding: 10px 12px; text-align: left; color: var(--green-400); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.traffic-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer; transition: background 0.15s;
}
.traffic-table tbody tr:hover { background: rgba(34,197,94,0.04); }
.traffic-table tbody tr.selected-row { background: rgba(34,197,94,0.07); }
.traffic-table td { padding: 9px 12px; color: var(--slate-300); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.traffic-table td:first-child { color: var(--slate-400); font-size: 0.72rem; }
.pkt-flag-btn {
  padding: 3px 10px; border-radius: 4px; font-size: 0.72rem; cursor: pointer; transition: all 0.15s; border: 1px solid; background: transparent; font-family: var(--font-body);
}
.pkt-flag-btn.flagged   { border-color: var(--amber-400); color: var(--amber-400); background: rgba(245,158,11,0.1); }
.pkt-flag-btn.unflagged { border-color: rgba(255,255,255,0.15); color: var(--slate-400); }
.pkt-flag-btn:hover     { border-color: var(--amber-400); color: var(--amber-400); }
.badge-sus  { color: var(--amber-400); }
.badge-safe { color: var(--green-400); }

/* Packet detail pane */
.pkt-detail {
  background: rgba(5,13,15,0.8);
  border: 1px solid rgba(6,182,212,0.2);
  border-radius: 8px; padding: 16px; margin-bottom: 16px;
  display: none; font-size: 0.82rem;
}
.pkt-detail.visible { display: block; }
.pkt-detail-title { color: var(--cyan-400); font-weight: 700; margin-bottom: 10px; font-size: 0.88rem; }
.pkt-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.pkt-detail-row { display: flex; flex-direction: column; gap: 2px; }
.pkt-detail-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate-400); }
.pkt-detail-val { font-family: var(--font-mono); color: var(--slate-300); }
.pkt-cipher-note { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); color: var(--slate-400); font-size: 0.8rem; }

.l2-score-bar { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.l2-score-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 8px 14px; font-size: 0.8rem; color: var(--slate-400); }
.l2-score-item span { font-weight: 700; color: var(--white); margin-left: 6px; }
.l2-score-item.good span { color: var(--green-400); }
.l2-score-item.bad  span { color: var(--red-400); }

/* ── Level 3: Firewall Builder ────────────────────────────────────────────── */
.fw-builder-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }
@media (max-width: 768px) { .fw-builder-layout { grid-template-columns: 1fr; } }

.fw-rules-wrap { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.fw-rule-row {
  background: rgba(5,13,15,0.7); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px; padding: 10px 14px;
  display: grid; grid-template-columns: auto 1fr 1fr 1fr auto; gap: 10px; align-items: center;
  font-size: 0.8rem;
}
.fw-rule-row.default-rule { border-color: rgba(239,68,68,0.2); background: rgba(239,68,68,0.03); }

.fw-select, .fw-input {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  color: var(--white); border-radius: 4px; padding: 5px 8px; font-size: 0.78rem;
  outline: none; font-family: var(--font-mono); width: 100%;
}
.fw-select:focus, .fw-input:focus { border-color: var(--green-400); }
.fw-select option { background: #0a1a1f; }
.fw-action-allow { color: var(--green-400); }
.fw-action-deny  { color: var(--red-400); }

.add-rule-btn {
  background: transparent; border: 1px dashed rgba(34,197,94,0.3); border-radius: 6px;
  color: var(--green-400); padding: 10px; font-size: 0.82rem; cursor: pointer;
  width: 100%; text-align: center; transition: all 0.2s;
}
.add-rule-btn:hover { background: rgba(34,197,94,0.06); border-style: solid; }

.fw-delete-btn {
  background: none; border: none; cursor: pointer; color: var(--slate-400);
  font-size: 1rem; padding: 2px; line-height: 1; transition: color 0.2s;
}
.fw-delete-btn:hover { color: var(--red-400); }

/* Firewall test results */
.fw-test-panel { background: var(--bg-900); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 16px; }
.fw-test-title { font-size: 0.82rem; font-weight: 700; margin-bottom: 12px; color: var(--slate-300); }
.fw-test-results { max-height: 280px; overflow-y: auto; }
.fw-test-item { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.75rem; font-family: var(--font-mono); }
.fw-test-item:last-child { border-bottom: none; }
.fw-test-label { color: var(--slate-400); }
.fw-test-result-ok   { color: var(--green-400); font-weight: 600; }
.fw-test-result-fail { color: var(--red-400); font-weight: 600; }
.fw-test-result-fp   { color: var(--amber-400); font-weight: 600; }

.fw-score-summary { background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.15); border-radius: 6px; padding: 12px; margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; text-align: center; }
.fw-score-val { font-size: 1.3rem; font-weight: 700; }
.fw-score-lbl { font-size: 0.68rem; color: var(--slate-400); text-transform: uppercase; letter-spacing: 0.06em; }
.fw-score-val.green { color: var(--green-400); }
.fw-score-val.red   { color: var(--red-400); }
.fw-score-val.amber { color: var(--amber-400); }

/* ── Level 4: Attack & Defend ─────────────────────────────────────────────── */
.l4-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; }
@media (max-width: 768px) { .l4-layout { grid-template-columns: 1fr; } }

/* School health bar */
.school-health-bar {
  background: rgba(5,13,15,0.8); border: 1px solid rgba(34,197,94,0.1); border-radius: 8px; padding: 16px; margin-bottom: 16px;
}
.school-health-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.school-health-title { font-size: 0.82rem; font-weight: 600; }
.school-health-pct { font-size: 1.1rem; font-weight: 700; color: var(--green-400); }
.health-track { height: 10px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.health-fill { height: 100%; background: linear-gradient(90deg, var(--green-500), var(--green-400)); border-radius: 999px; transition: width 0.5s ease, background 0.5s; }
.health-fill.medium { background: linear-gradient(90deg, var(--amber-500), var(--amber-400)); }
.health-fill.low    { background: linear-gradient(90deg, var(--red-500),   var(--red-400)); }

/* Timer */
.l4-timer { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
.l4-timer-label { font-size: 0.78rem; color: var(--slate-400); text-transform: uppercase; letter-spacing: 0.06em; }
.l4-timer-val { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--red-400); }
.l4-timer-val.safe { color: var(--green-400); }
.l4-timer-val.warn { color: var(--amber-400); }

/* Attack stages */
.l4-stages { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.l4-stage {
  background: rgba(5,13,15,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 14px;
  display: flex; align-items: flex-start; gap: 12px; opacity: 0.4; transition: opacity 0.3s, border-color 0.3s;
}
.l4-stage.pending  { opacity: 0.4; }
.l4-stage.active   { opacity: 1; border-color: var(--amber-400); background: rgba(245,158,11,0.04); animation: pulse-stage 1.5s infinite; }
.l4-stage.blocked  { opacity: 1; border-color: var(--green-400); background: rgba(34,197,94,0.04); }
.l4-stage.breached { opacity: 1; border-color: var(--red-400);   background: rgba(239,68,68,0.04); }

@keyframes pulse-stage {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
  50%      { box-shadow: 0 0 0 4px rgba(245,158,11,0.1); }
}

.l4-stage-icon { font-size: 1.3rem; flex-shrink: 0; }
.l4-stage-info { flex: 1; min-width: 0; }
.l4-stage-name { font-weight: 600; font-size: 0.88rem; margin-bottom: 3px; }
.l4-stage-desc { font-size: 0.78rem; color: var(--slate-400); }
.l4-stage-status { font-size: 0.72rem; margin-top: 4px; font-weight: 600; }
.l4-stage-status.pending  { color: var(--slate-400); }
.l4-stage-status.active   { color: var(--amber-400); }
.l4-stage-status.blocked  { color: var(--green-400); }
.l4-stage-status.breached { color: var(--red-400); }

/* Response toolkit */
.l4-toolkit { display: flex; flex-direction: column; gap: 8px; }
.l4-tool-btn {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
  padding: 10px 14px; cursor: pointer; text-align: left; transition: all 0.2s;
  font-size: 0.8rem; color: var(--slate-300); display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); width: 100%;
}
.l4-tool-btn:hover:not(:disabled) { border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.06); color: var(--white); }
.l4-tool-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.l4-tool-btn.used { opacity: 0.5; border-style: dashed; }
.l4-tool-icon { font-size: 1rem; }

/* Alert log */
.l4-alert-log {
  background: rgba(5,13,15,0.8); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 12px; max-height: 200px; overflow-y: auto;
  font-family: var(--font-mono); font-size: 0.74rem; margin-bottom: 16px;
}
.l4-alert-entry { padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.03); display: flex; gap: 10px; }
.l4-alert-ts { color: var(--slate-400); flex-shrink: 0; }
.l4-alert-msg { color: var(--slate-300); }
.l4-alert-msg.threat { color: var(--red-400); }
.l4-alert-msg.success { color: var(--green-400); }
.l4-alert-msg.warn { color: var(--amber-400); }

/* ── Level 5: Incident Report ─────────────────────────────────────────────── */
.l5-report-wrap { display: grid; gap: 16px; }
.l5-field-group { display: flex; flex-direction: column; gap: 6px; }
.l5-field-label { font-size: 0.78rem; font-weight: 600; color: var(--green-400); text-transform: uppercase; letter-spacing: 0.06em; }
.l5-field-hint  { font-size: 0.73rem; color: var(--slate-400); margin-bottom: 4px; }
.l5-select, .l5-input, .l5-textarea {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: var(--white); border-radius: 6px; padding: 10px 14px; font-size: 0.85rem;
  width: 100%; outline: none; font-family: var(--font-body); transition: border-color 0.2s;
}
.l5-select:focus, .l5-input:focus, .l5-textarea:focus { border-color: var(--green-400); }
.l5-textarea { resize: vertical; min-height: 80px; }
.l5-select option { background: #0a1a1f; }

.l5-report-header {
  background: rgba(34,197,94,0.05); border: 1px solid rgba(34,197,94,0.12); border-radius: 8px; padding: 16px 20px;
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;
}
.l5-report-brand { font-family: var(--font-display); font-size: 1rem; font-style: italic; color: var(--green-400); }
.l5-report-title-text { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--slate-400); }

/* ── Universal Buttons ────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--green-500); color: var(--bg-950); border: none; border-radius: 6px;
  padding: 12px 24px; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: all 0.2s;
  font-family: var(--font-body); display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary:hover:not(:disabled) { background: var(--green-400); transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn-secondary {
  background: transparent; color: var(--green-400); border: 1px solid var(--green-400);
  border-radius: 6px; padding: 10px 20px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
  font-family: var(--font-body); display: inline-flex; align-items: center; gap: 8px;
}
.btn-secondary:hover:not(:disabled) { background: rgba(34,197,94,0.08); }

.btn-danger {
  background: var(--red-500); color: var(--white); border: none; border-radius: 6px;
  padding: 10px 18px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
  font-family: var(--font-body);
}
.btn-danger:hover { background: var(--red-400); }

/* ── Level Action Row ─────────────────────────────────────────────────────── */
.level-action-row { display: flex; gap: 12px; align-items: center; margin-top: 20px; flex-wrap: wrap; }

/* ── Feedback Overlay ─────────────────────────────────────────────────────── */
.feedback-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.feedback-overlay.visible { opacity: 1; pointer-events: all; }
.feedback-card {
  background: var(--bg-panel); border: 1px solid rgba(34,197,94,0.2); border-radius: 12px;
  padding: 32px 36px; max-width: 480px; width: 100%; text-align: center;
  transform: translateY(20px); transition: transform 0.25s;
}
.feedback-overlay.visible .feedback-card { transform: translateY(0); }
.feedback-icon { font-size: 3rem; margin-bottom: 12px; display: block; }
.feedback-title { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 8px; }
.feedback-msg { font-size: 0.88rem; color: var(--slate-400); margin-bottom: 20px; line-height: 1.6; }
.feedback-score { font-size: 2rem; font-weight: 700; color: var(--green-400); margin-bottom: 4px; }
.feedback-score-label { font-size: 0.75rem; color: var(--slate-400); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 20px; }

/* ── Completion Screen ────────────────────────────────────────────────────── */
.completion-screen {
  display: none; text-align: center; padding: 48px 24px;
  background: var(--bg-panel); border: 1px solid rgba(34,197,94,0.2); border-radius: var(--panel-r);
}
.completion-screen.visible { display: block; }
.completion-badge { font-size: 5rem; margin-bottom: 16px; display: block; animation: bounce-in 0.5s ease; }
@keyframes bounce-in { 0%{transform:scale(0)} 70%{transform:scale(1.15)} 100%{transform:scale(1)} }
.completion-title { font-family: var(--font-display); font-size: 2rem; margin-bottom: 8px; }
.completion-title em { color: var(--green-400); font-style: italic; }
.completion-sub { font-size: 0.92rem; color: var(--slate-400); max-width: 440px; margin: 0 auto 24px; }
.completion-xp { font-size: 2.5rem; font-weight: 700; color: var(--green-400); margin-bottom: 4px; }
.completion-xp-label { font-size: 0.78rem; color: var(--slate-400); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 28px; }
.completion-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── NICE/CISA alignment chip ─────────────────────────────────────────────── */
.nice-bar {
  background: rgba(34,197,94,0.04); border: 1px solid rgba(34,197,94,0.1);
  border-radius: 8px; padding: 12px 16px; margin-top: 24px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.nice-label { font-size: 0.72rem; color: var(--slate-400); text-transform: uppercase; letter-spacing: 0.08em; }
.nice-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.nice-chip { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); color: var(--green-400); font-size: 0.72rem; border-radius: 4px; padding: 3px 8px; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .lab-header-inner { flex-direction: column; }
  .lab-header-meta { align-items: flex-start; flex-direction: row; }
  .fw-rule-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .lab-panel-body { padding: 16px; }
  .fw-builder-layout { grid-template-columns: 1fr; }
  .l4-layout { grid-template-columns: 1fr; }
  .feedback-card { padding: 24px 20px; }
}