/* ═══════════════════════════════════════════════
   TCPDump Cyber Lab — Stylesheet v4.0
   IT / ICS-SCADA / IoT — Cyber Ops Console
   ═══════════════════════════════════════════════ */

:root {
    --bg-void: #05080e;
    --bg-surface: #0a1018;
    --bg-raised: #0e1620;
    --bg-card: #111c2a;
    --bg-terminal: #020a06;
    --bg-input: #0a1210;

    --neon-green: #00ff9d;
    --neon-green-dim: #00cc7d;
    --neon-green-glow: rgba(0, 255, 157, 0.15);
    --neon-green-ghost: rgba(0, 255, 157, 0.05);
    --neon-blue: #00d4ff;
    --neon-blue-dim: #00a8cc;
    --neon-blue-glow: rgba(0, 212, 255, 0.12);
    --neon-red: #ff3b5c;
    --neon-red-dim: #cc2e49;
    --neon-red-glow: rgba(255, 59, 92, 0.12);
    --neon-amber: #ffb020;
    --neon-amber-glow: rgba(255, 176, 32, 0.1);
    --neon-purple: #b48eff;
    --neon-orange: #ff6b35;
    --neon-orange-glow: rgba(255, 107, 53, 0.12);
    --neon-cyan: #00ffe0;

    --text-100: #e8edf5;
    --text-200: #b0bdd0;
    --text-300: #6b7a90;
    --text-400: #3d4d60;
    --text-500: #1e2c3a;

    --border: #1a2738;
    --border-light: #243448;

    --font-display: 'Chakra Petch', sans-serif;
    --font-body: 'Outfit', sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;

    --radius: 6px;
    --radius-lg: 10px;
    --transition: 200ms ease;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-body); background:var(--bg-void); color:var(--text-200); line-height:1.6; min-height:100vh; overflow-x:hidden; position:relative; }

/* --- Ambient --- */
.ambient-grid { position:fixed; inset:0; background-image:linear-gradient(var(--neon-green-ghost) 1px,transparent 1px),linear-gradient(90deg,var(--neon-green-ghost) 1px,transparent 1px); background-size:50px 50px; pointer-events:none; z-index:0; opacity:0.4; }
.scan-line { position:fixed; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,transparent,var(--neon-green),transparent); opacity:0.25; animation:scanMove 5s ease-in-out infinite; pointer-events:none; z-index:9999; }
@keyframes scanMove { 0%,100%{top:0;opacity:0} 10%{opacity:0.25} 90%{opacity:0.25} 50%{top:100vh} }

/* --- Header --- */
.lab-header { position:sticky; top:0; z-index:100; background:var(--bg-void); border-bottom:1px solid var(--border); backdrop-filter:blur(20px); }
.header-inner { max-width:1100px; margin:0 auto; padding:0 24px; }

.header-status-bar { display:flex; align-items:center; gap:20px; padding:8px 0; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:0.65rem; color:var(--text-400); text-transform:uppercase; letter-spacing:0.12em; flex-wrap:wrap; }
.status-item { display:flex; align-items:center; gap:6px; }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--neon-green); box-shadow:0 0 6px var(--neon-green); }
.status-dot.pulse { animation:dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse { 0%,100%{opacity:1;box-shadow:0 0 6px var(--neon-green)} 50%{opacity:0.4;box-shadow:0 0 2px var(--neon-green)} }
.mono-accent { color:var(--neon-green-dim); }

/* Hub / Shop links */
.header-ext-links { margin-left:auto; display:flex; gap:4px; }
.ext-link { padding:3px 12px; border:1px solid var(--border-light); border-radius:3px; color:var(--neon-blue); font-family:var(--font-display); font-size:0.62rem; font-weight:600; text-decoration:none; text-transform:uppercase; letter-spacing:0.1em; transition:all var(--transition); }
.ext-link:hover { border-color:var(--neon-blue-dim); background:var(--neon-blue-glow); color:var(--neon-blue); box-shadow:0 0 10px var(--neon-blue-glow); }

.header-brand { display:flex; align-items:center; gap:16px; padding:20px 0 16px; }
.brand-icon { color:var(--neon-green); flex-shrink:0; opacity:0.7; }
.brand-text h1 { font-family:var(--font-display); font-size:clamp(1.5rem,4vw,2rem); font-weight:700; color:var(--text-100); letter-spacing:0.02em; line-height:1.1; }
.brand-text h1 .accent { color:var(--neon-green); text-shadow:0 0 30px var(--neon-green-glow); }
.brand-text .subtitle { font-size:0.9rem; color:var(--text-300); margin-top:4px; font-weight:400; }

/* Nav */
.lab-nav { display:flex; gap:2px; }
.nav-tab { display:flex; align-items:center; gap:8px; padding:12px 20px; background:transparent; border:none; color:var(--text-400); font-family:var(--font-display); font-size:0.78rem; font-weight:500; letter-spacing:0.06em; cursor:pointer; position:relative; transition:color var(--transition); text-transform:uppercase; }
.nav-tab::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:transparent; transition:background var(--transition); }
.nav-tab:hover { color:var(--text-200); }
.nav-tab.active { color:var(--neon-green); }
.nav-tab.active::after { background:var(--neon-green); box-shadow:0 0 12px var(--neon-green-glow); }
.nav-tab .tab-num { font-family:var(--font-mono); font-size:0.65rem; opacity:0.5; }

/* Progress */
.progress-track { height:2px; background:var(--border); }
.progress-fill { height:100%; width:25%; background:linear-gradient(90deg,var(--neon-green),var(--neon-blue)); transition:width 600ms cubic-bezier(0.23,1,0.32,1); box-shadow:0 0 12px var(--neon-green-glow); }

/* --- Main --- */
.lab-main { max-width:1100px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }
.lab-section { display:none; padding:40px 0 60px; animation:sectionIn 400ms ease; }
.lab-section.active { display:block; }
@keyframes sectionIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

.section-intro { margin-bottom:32px; }
.section-tag { font-family:var(--font-mono); font-size:0.68rem; color:var(--neon-green-dim); letter-spacing:0.2em; text-transform:uppercase; margin-bottom:8px; }
.section-intro h2 { font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--text-100); margin-bottom:8px; }
.section-intro p { font-size:0.95rem; color:var(--text-300); max-width:640px; }

/* Quick Commands */
.quick-cmds { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.cmd-chip { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 14px; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:all var(--transition); }
.cmd-chip:hover { border-color:var(--neon-blue-dim); background:var(--bg-card); transform:translateY(-1px); }
.cmd-chip code { font-family:var(--font-mono); font-size:0.75rem; color:var(--neon-blue); }
.cmd-chip .chip-desc { font-size:0.65rem; color:var(--text-400); text-transform:uppercase; letter-spacing:0.08em; }
.cmd-chip.chip-ics { border-color:rgba(255,107,53,0.2); }
.cmd-chip.chip-ics:hover { border-color:var(--neon-orange); background:var(--neon-orange-glow); }
.cmd-chip.chip-ics code { color:var(--neon-orange); }
.cmd-chip.chip-iot { border-color:rgba(0,255,224,0.15); }
.cmd-chip.chip-iot:hover { border-color:var(--neon-cyan); background:rgba(0,255,224,0.06); }
.cmd-chip.chip-iot code { color:var(--neon-cyan); }

/* Terminal */
.terminal-wrapper { background:var(--bg-terminal); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 4px 40px rgba(0,0,0,0.4),inset 0 1px 0 rgba(0,255,157,0.03); }
.terminal-bar { display:flex; align-items:center; gap:12px; padding:10px 16px; background:var(--bg-raised); border-bottom:1px solid var(--border); }
.terminal-dots { display:flex; gap:6px; }
.tdot { width:11px; height:11px; border-radius:50%; }
.tdot.close { background:#ff5f57; } .tdot.minimize { background:#febc2e; } .tdot.maximize { background:#28c840; }
.terminal-title { flex:1; font-family:var(--font-mono); font-size:0.72rem; color:var(--text-400); }
.terminal-clear-btn { padding:3px 10px; background:transparent; border:1px solid var(--border); border-radius:3px; color:var(--text-400); font-family:var(--font-mono); font-size:0.65rem; cursor:pointer; text-transform:uppercase; letter-spacing:0.08em; transition:all var(--transition); }
.terminal-clear-btn:hover { border-color:var(--neon-red-dim); color:var(--neon-red); }

.terminal-screen { padding:16px; min-height:340px; max-height:480px; overflow-y:auto; font-family:var(--font-mono); font-size:0.76rem; line-height:1.65; scrollbar-width:thin; scrollbar-color:var(--neon-green-dim) transparent; }
.terminal-screen::-webkit-scrollbar { width:4px; }
.terminal-screen::-webkit-scrollbar-thumb { background:var(--neon-green-dim); border-radius:4px; }

.term-line { white-space:pre-wrap; word-break:break-all; color:var(--neon-green); }
.term-line.system-msg { color:var(--text-400); }
.term-line.cmd-echo { color:var(--neon-blue); font-weight:500; }
.term-line.error-msg { color:var(--neon-red); }
.term-line.highlight { color:var(--neon-amber); }
.term-line.payload { color:var(--neon-purple); }
.term-line.ics-line { color:var(--neon-orange); }
.term-line.iot-line { color:var(--neon-cyan); }
.term-line .ts { color:var(--text-400); }
.term-line .proto { color:var(--neon-blue); }
.term-line .flag { color:var(--neon-amber); }
.term-line .suspicious { color:var(--neon-red); }

.terminal-input-area { display:flex; align-items:center; gap:8px; padding:10px 16px; background:var(--bg-input); border-top:1px solid var(--border); }
.input-prompt { font-family:var(--font-mono); font-size:0.76rem; color:var(--neon-green-dim); white-space:nowrap; user-select:none; }
.terminal-input { flex:1; background:transparent; border:none; outline:none; font-family:var(--font-mono); font-size:0.76rem; color:var(--neon-green); caret-color:var(--neon-green); }
.terminal-input::placeholder { color:var(--text-500); }

/* Scenario */
.scenario-nav-strip { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.scenario-indicators { display:flex; gap:6px; }
.sc-dot { width:28px; height:4px; border-radius:2px; background:var(--border-light); cursor:pointer; transition:all var(--transition); }
.sc-dot.active { background:var(--neon-green); box-shadow:0 0 8px var(--neon-green-glow); width:44px; }
.sc-dot.done { background:var(--neon-green-dim); }
.scenario-counter { font-family:var(--font-mono); font-size:0.75rem; color:var(--text-400); }

.scenario-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.scenario-card-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:var(--bg-raised); border-bottom:1px solid var(--border); flex-wrap:wrap; gap:8px; }
.scenario-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.severity-badge { padding:3px 10px; border-radius:3px; font-family:var(--font-mono); font-size:0.62rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; }
.severity-critical { background:rgba(255,59,92,0.12); color:var(--neon-red); border:1px solid rgba(255,59,92,0.25); }
.severity-high { background:rgba(255,176,32,0.1); color:var(--neon-amber); border:1px solid rgba(255,176,32,0.2); }
.severity-normal { background:var(--neon-green-ghost); color:var(--neon-green-dim); border:1px solid rgba(0,255,157,0.15); }

.domain-badge { padding:3px 8px; border-radius:3px; font-family:var(--font-mono); font-size:0.58rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; }
.domain-it { background:rgba(0,212,255,0.08); color:var(--neon-blue); border:1px solid rgba(0,212,255,0.2); }
.domain-ics { background:var(--neon-orange-glow); color:var(--neon-orange); border:1px solid rgba(255,107,53,0.25); }
.domain-iot { background:rgba(0,255,224,0.06); color:var(--neon-cyan); border:1px solid rgba(0,255,224,0.2); }

.scenario-title { font-family:var(--font-display); font-size:0.9rem; font-weight:600; color:var(--text-100); }
.scenario-id-label { font-family:var(--font-mono); font-size:0.65rem; color:var(--text-400); }

.scenario-logs { padding:16px 20px; background:var(--bg-terminal); font-family:var(--font-mono); font-size:0.72rem; line-height:1.6; color:var(--neon-green); max-height:360px; overflow-y:auto; white-space:pre-wrap; word-break:break-all; border-bottom:1px solid var(--border); scrollbar-width:thin; scrollbar-color:var(--neon-green-dim) transparent; }
.scenario-logs::-webkit-scrollbar { width:4px; }
.scenario-logs::-webkit-scrollbar-thumb { background:var(--neon-green-dim); border-radius:4px; }

.scenario-card-actions { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; flex-wrap:wrap; gap:8px; }
.scenario-step-btns { display:flex; gap:6px; }
.btn-sc-step { padding:7px 14px; background:transparent; border:1px solid var(--border); border-radius:var(--radius); color:var(--text-300); font-family:var(--font-body); font-size:0.8rem; cursor:pointer; transition:all var(--transition); }
.btn-sc-step:hover:not(:disabled) { border-color:var(--text-300); color:var(--text-100); }
.btn-sc-step:disabled { opacity:0.25; cursor:default; }

.btn-reveal { padding:8px 18px; background:var(--neon-green-ghost); border:1px solid rgba(0,255,157,0.2); border-radius:var(--radius); color:var(--neon-green); font-family:var(--font-display); font-size:0.78rem; font-weight:500; letter-spacing:0.04em; cursor:pointer; transition:all var(--transition); }
.btn-reveal:hover { background:rgba(0,255,157,0.1); border-color:var(--neon-green-dim); box-shadow:0 0 16px var(--neon-green-glow); }

.scenario-explanation { max-height:0; overflow:hidden; transition:max-height 400ms ease,padding 300ms ease; background:rgba(0,255,157,0.02); border-top:1px solid transparent; }
.scenario-explanation.open { max-height:600px; padding:20px; border-top-color:rgba(0,255,157,0.15); }
.explanation-label { font-family:var(--font-display); font-size:0.68rem; color:var(--neon-green); text-transform:uppercase; letter-spacing:0.15em; margin-bottom:10px; }
.explanation-body { font-size:0.88rem; color:var(--text-200); line-height:1.7; }
.explanation-body strong { color:var(--neon-green); font-weight:600; }
.ioc-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.ioc-tag { padding:3px 10px; background:var(--bg-raised); border:1px solid var(--border); border-radius:3px; font-family:var(--font-mono); font-size:0.65rem; color:var(--text-300); }

/* Analysis */
.analysis-hud { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; font-family:var(--font-mono); font-size:0.78rem; color:var(--text-400); }
.analysis-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.analysis-card-header { padding:14px 20px; background:var(--bg-raised); border-bottom:1px solid var(--border); font-family:var(--font-display); font-size:0.85rem; font-weight:600; color:var(--text-100); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.analysis-logs-mini { padding:14px 20px; background:var(--bg-terminal); font-family:var(--font-mono); font-size:0.7rem; line-height:1.6; color:var(--neon-green); max-height:180px; overflow-y:auto; white-space:pre-wrap; word-break:break-all; border-bottom:1px solid var(--border); }
.analysis-question { padding:16px 20px; font-size:0.92rem; font-weight:500; color:var(--text-100); border-bottom:1px solid var(--border); }
.analysis-options { padding:14px 20px; display:flex; flex-direction:column; gap:8px; }
.analysis-opt { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-200); font-size:0.85rem; cursor:pointer; transition:all var(--transition); }
.analysis-opt:hover:not(.locked) { border-color:var(--neon-blue-dim); background:rgba(0,212,255,0.04); }
.analysis-opt .opt-key { width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--text-400); font-family:var(--font-mono); font-size:0.7rem; font-weight:600; flex-shrink:0; transition:all var(--transition); }
.analysis-opt.correct { border-color:var(--neon-green-dim); background:var(--neon-green-ghost); color:var(--neon-green); }
.analysis-opt.correct .opt-key { background:var(--neon-green-dim); border-color:var(--neon-green); color:var(--bg-void); }
.analysis-opt.wrong { border-color:var(--neon-red-dim); background:var(--neon-red-glow); color:var(--neon-red); }
.analysis-opt.wrong .opt-key { background:var(--neon-red-dim); border-color:var(--neon-red); color:#fff; }
.analysis-opt.locked { cursor:default; opacity:0.45; }
.analysis-opt.locked.correct,.analysis-opt.locked.wrong { opacity:1; }

.analysis-feedback { padding:14px 20px; font-size:0.85rem; line-height:1.6; display:none; }
.analysis-feedback.show { display:block; }
.analysis-feedback.fb-correct { background:rgba(0,255,157,0.03); border-top:1px solid rgba(0,255,157,0.15); color:var(--neon-green-dim); }
.analysis-feedback.fb-wrong { background:rgba(255,59,92,0.03); border-top:1px solid rgba(255,59,92,0.15); color:var(--neon-red); }

.analysis-next-wrap { padding:12px 20px; display:flex; justify-content:flex-end; }
.btn-analysis-next { display:none; padding:8px 18px; background:var(--neon-green-ghost); border:1px solid rgba(0,255,157,0.2); border-radius:var(--radius); color:var(--neon-green); font-family:var(--font-display); font-size:0.8rem; font-weight:500; cursor:pointer; transition:all var(--transition); }
.btn-analysis-next.show { display:inline-flex; }
.btn-analysis-next:hover { background:rgba(0,255,157,0.1); }

/* Quiz */
.quiz-hud { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; font-family:var(--font-mono); font-size:0.78rem; color:var(--text-400); }
.quiz-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.quiz-question-body { padding:20px; font-size:0.95rem; font-weight:500; color:var(--text-100); line-height:1.65; border-bottom:1px solid var(--border); }
.quiz-question-body code { font-family:var(--font-mono); font-size:0.82rem; color:var(--neon-blue); background:var(--bg-terminal); padding:1px 6px; border-radius:3px; }
.quiz-code-block { padding:12px 20px; background:var(--bg-terminal); font-family:var(--font-mono); font-size:0.72rem; line-height:1.6; color:var(--neon-green); white-space:pre-wrap; word-break:break-all; border-bottom:1px solid var(--border); }
.quiz-options { padding:14px 20px; display:flex; flex-direction:column; gap:8px; }
.quiz-opt { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-200); font-size:0.85rem; cursor:pointer; transition:all var(--transition); }
.quiz-opt:hover:not(.locked) { border-color:var(--neon-blue-dim); }
.quiz-opt .opt-key { width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--text-400); font-family:var(--font-mono); font-size:0.7rem; font-weight:600; flex-shrink:0; transition:all var(--transition); }
.quiz-opt.correct { border-color:var(--neon-green-dim); background:var(--neon-green-ghost); color:var(--neon-green); }
.quiz-opt.correct .opt-key { background:var(--neon-green-dim); border-color:var(--neon-green); color:var(--bg-void); }
.quiz-opt.wrong { border-color:var(--neon-red-dim); background:var(--neon-red-glow); color:var(--neon-red); }
.quiz-opt.wrong .opt-key { background:var(--neon-red-dim); border-color:var(--neon-red); color:#fff; }
.quiz-opt.locked { cursor:default; opacity:0.4; }
.quiz-opt.locked.correct,.quiz-opt.locked.wrong { opacity:1; }

.quiz-feedback { padding:14px 20px; font-size:0.84rem; line-height:1.6; display:none; border-top:1px solid var(--border); }
.quiz-feedback.show { display:block; }
.quiz-feedback.fb-correct { background:rgba(0,255,157,0.03); border-top-color:rgba(0,255,157,0.15); color:var(--neon-green-dim); }
.quiz-feedback.fb-wrong { background:rgba(255,59,92,0.03); border-top-color:rgba(255,59,92,0.15); color:var(--neon-red); }

.quiz-nav-wrap { padding:12px 20px; display:flex; justify-content:flex-end; }
.btn-quiz-next { display:none; padding:8px 18px; background:var(--neon-green-ghost); border:1px solid rgba(0,255,157,0.2); border-radius:var(--radius); color:var(--neon-green); font-family:var(--font-display); font-size:0.8rem; font-weight:500; cursor:pointer; transition:all var(--transition); }
.btn-quiz-next.show { display:inline-flex; }
.btn-quiz-next:hover { background:rgba(0,255,157,0.1); }

/* Results */
.quiz-results { padding:20px 0; }
.quiz-results.hidden { display:none; }
.results-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:48px 32px; max-width:520px; margin:0 auto; text-align:center; }
.results-badge { font-size:3rem; margin-bottom:12px; line-height:1; }
.results-score-big { font-family:var(--font-display); font-size:3rem; font-weight:700; color:var(--neon-green); text-shadow:0 0 30px var(--neon-green-glow); }
.results-rank { display:inline-block; padding:5px 18px; border-radius:3px; font-family:var(--font-display); font-size:0.75rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; margin:14px 0 16px; }
.rank-beginner { background:rgba(255,176,32,0.12); color:var(--neon-amber); border:1px solid rgba(255,176,32,0.25); }
.rank-intermediate { background:var(--neon-blue-glow); color:var(--neon-blue); border:1px solid rgba(0,212,255,0.25); }
.rank-advanced { background:var(--neon-green-ghost); color:var(--neon-green); border:1px solid rgba(0,255,157,0.2); }
.results-message { font-size:0.92rem; color:var(--text-300); line-height:1.65; margin-bottom:20px; max-width:400px; margin-left:auto; margin-right:auto; }
.results-breakdown { display:flex; justify-content:center; gap:6px; margin-bottom:28px; flex-wrap:wrap; }
.rb-dot { width:20px; height:20px; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:0.6rem; font-family:var(--font-mono); }
.rb-dot.rb-correct { background:rgba(0,255,157,0.15); color:var(--neon-green); border:1px solid rgba(0,255,157,0.3); }
.rb-dot.rb-wrong { background:rgba(255,59,92,0.1); color:var(--neon-red); border:1px solid rgba(255,59,92,0.2); }
.btn-retake { padding:10px 24px; background:transparent; border:1px solid var(--border-light); border-radius:var(--radius); color:var(--text-300); font-family:var(--font-display); font-size:0.82rem; font-weight:500; cursor:pointer; transition:all var(--transition); }
.btn-retake:hover { border-color:var(--neon-blue-dim); color:var(--neon-blue); }

/* Section Nav */
.section-footer-nav { display:flex; justify-content:space-between; align-items:center; margin-top:40px; padding-top:24px; border-top:1px solid var(--border); }
.btn-next,.btn-prev { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:var(--radius); font-family:var(--font-display); font-size:0.82rem; font-weight:500; cursor:pointer; transition:all var(--transition); letter-spacing:0.02em; }
.btn-next { background:var(--neon-green-ghost); border:1px solid rgba(0,255,157,0.2); color:var(--neon-green); }
.btn-next:hover { background:rgba(0,255,157,0.12); border-color:var(--neon-green-dim); box-shadow:0 0 20px var(--neon-green-glow); }
.btn-prev { background:transparent; border:1px solid var(--border); color:var(--text-400); }
.btn-prev:hover { border-color:var(--text-300); color:var(--text-200); }

/* Footer */
.lab-footer { border-top:1px solid var(--border); position:relative; z-index:1; }
.lab-footer::before { content:''; display:block; height:1px; background:linear-gradient(90deg,transparent,var(--neon-green-dim),transparent); opacity:0.3; }
.footer-inner { max-width:1100px; margin:0 auto; padding:20px 24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-left { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.footer-brand { font-family:var(--font-mono); font-size:0.78rem; color:var(--neon-green-dim); font-weight:500; }
.footer-sep { color:var(--text-500); }
.footer-note { font-size:0.72rem; color:var(--text-400); }
.footer-center { display:flex; align-items:center; gap:8px; }
.footer-link { color:var(--neon-blue); text-decoration:none; font-family:var(--font-display); font-size:0.78rem; font-weight:600; letter-spacing:0.04em; transition:color var(--transition); }
.footer-link:hover { color:var(--neon-green); text-shadow:0 0 8px var(--neon-green-glow); }
.footer-link-sep { color:var(--text-500); font-size:0.7rem; }
.footer-right { font-size:0.82rem; color:var(--text-400); }
.footer-right a { color:var(--neon-blue); text-decoration:none; font-weight:600; transition:color var(--transition); }
.footer-right a:hover { color:var(--neon-green); text-shadow:0 0 8px var(--neon-green-glow); }
.footer-author { color:var(--neon-amber) !important; }
.footer-author:hover { color:var(--neon-green) !important; }

/* === Guide Tab Special Styling === */
.nav-tab-guide { gap:5px; }
.tab-icon-ntt { font-size:1rem; line-height:1; color:var(--neon-amber); transition:color var(--transition); }
.nav-tab-guide.active .tab-icon-ntt { color:var(--neon-amber); text-shadow:0 0 10px var(--neon-amber-glow); }
.nav-tab-guide.active { color:var(--neon-amber); }
.nav-tab-guide.active::after { background:var(--neon-amber); box-shadow:0 0 12px var(--neon-amber-glow); }

/* === Guide Section === */
.guide-hero { display:flex; align-items:flex-start; gap:20px; margin-bottom:36px; }
.guide-avatar { width:64px; height:64px; border-radius:12px; background:linear-gradient(135deg,rgba(255,176,32,0.15),rgba(255,107,53,0.1)); border:1px solid rgba(255,176,32,0.3); display:flex; align-items:center; justify-content:center; font-size:2rem; color:var(--neon-amber); flex-shrink:0; box-shadow:0 0 20px var(--neon-amber-glow); }
.guide-hero-text { flex:1; }
.guide-hero-text h2 { font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--text-100); margin-bottom:6px; }
.guide-tagline { font-size:0.95rem; color:var(--text-300); max-width:600px; line-height:1.7; }

.guide-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:20px; }
.guide-card-header { display:flex; align-items:center; gap:10px; padding:16px 20px; background:var(--bg-raised); border-bottom:1px solid var(--border); }
.guide-card-icon { color:var(--neon-amber); font-size:1rem; }
.guide-card-header h3 { font-family:var(--font-display); font-size:0.95rem; font-weight:600; color:var(--text-100); }
.guide-card-body { padding:20px; }
.guide-card-body p { font-size:0.9rem; color:var(--text-200); line-height:1.7; margin-bottom:14px; }
.guide-card-body p:last-child { margin-bottom:0; }
.guide-card-body p strong { color:var(--neon-green); font-weight:600; }

.guide-domain-chips { display:flex; gap:8px; margin:14px 0; flex-wrap:wrap; }
.guide-chip { padding:5px 14px; border-radius:4px; font-family:var(--font-mono); font-size:0.7rem; font-weight:600; letter-spacing:0.08em; }
.guide-chip-it { background:rgba(0,212,255,0.08); color:var(--neon-blue); border:1px solid rgba(0,212,255,0.2); }
.guide-chip-ics { background:var(--neon-orange-glow); color:var(--neon-orange); border:1px solid rgba(255,107,53,0.25); }
.guide-chip-iot { background:rgba(0,255,224,0.06); color:var(--neon-cyan); border:1px solid rgba(0,255,224,0.2); }

/* Guide Flow (Module Map) */
.guide-flow { display:flex; flex-direction:column; gap:0; }
.guide-flow-step { display:flex; gap:16px; align-items:flex-start; }
.flow-step-num { width:40px; height:40px; border-radius:8px; background:var(--neon-green-ghost); border:1px solid rgba(0,255,157,0.15); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:0.75rem; font-weight:700; color:var(--neon-green); flex-shrink:0; }
.flow-step-content { flex:1; padding-bottom:8px; }
.flow-step-content h4 { font-family:var(--font-display); font-size:0.9rem; font-weight:600; color:var(--text-100); margin-bottom:6px; }
.flow-step-content p { font-size:0.85rem; color:var(--text-300); line-height:1.65; margin-bottom:10px; }
.guide-flow-arrow { text-align:center; color:var(--text-500); font-size:1.2rem; padding:4px 0 4px 18px; }

.guide-commands-mini { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.guide-commands-mini code { padding:3px 8px; background:var(--bg-terminal); border:1px solid var(--border); border-radius:3px; font-family:var(--font-mono); font-size:0.68rem; color:var(--neon-blue); }

/* Question Boxes */
.guide-question-box { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; background:rgba(255,176,32,0.04); border:1px solid rgba(255,176,32,0.12); border-left:3px solid var(--neon-amber); border-radius:0 var(--radius) var(--radius) 0; margin-top:10px; }
.gq-icon { width:22px; height:22px; border-radius:50%; background:rgba(255,176,32,0.12); border:1px solid rgba(255,176,32,0.25); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:0.72rem; font-weight:700; color:var(--neon-amber); flex-shrink:0; }
.guide-question-box span:last-child { font-size:0.82rem; color:var(--text-300); line-height:1.6; }
.guide-question-box em { color:var(--neon-amber); font-style:normal; font-weight:500; }

/* Scenario List in Guide */
.guide-scenario-list { display:flex; flex-direction:column; gap:5px; margin:10px 0; }
.gs-item { display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--bg-raised); border-radius:4px; font-size:0.8rem; color:var(--text-200); }
.gs-badge { padding:2px 8px; border-radius:2px; font-family:var(--font-mono); font-size:0.58rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; }
.gs-critical { background:rgba(255,59,92,0.1); color:var(--neon-red); }
.gs-high { background:rgba(255,176,32,0.08); color:var(--neon-amber); }
.gs-normal { background:var(--neon-green-ghost); color:var(--neon-green-dim); }
.gs-domain { padding:2px 6px; border-radius:2px; font-family:var(--font-mono); font-size:0.55rem; font-weight:600; letter-spacing:0.08em; }
.gs-it { background:rgba(0,212,255,0.06); color:var(--neon-blue-dim); }
.gs-ics { background:rgba(255,107,53,0.08); color:var(--neon-orange); }
.gs-iot { background:rgba(0,255,224,0.05); color:var(--neon-cyan); }

/* Rank Preview */
.guide-rank-preview { display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.grp-item { display:flex; align-items:center; gap:10px; font-size:0.82rem; color:var(--text-200); }
.grp-badge { padding:3px 10px; border-radius:3px; font-family:var(--font-mono); font-size:0.68rem; font-weight:700; min-width:60px; text-align:center; }
.grp-beginner { background:rgba(255,176,32,0.1); color:var(--neon-amber); border:1px solid rgba(255,176,32,0.2); }
.grp-intermediate { background:var(--neon-blue-glow); color:var(--neon-blue); border:1px solid rgba(0,212,255,0.2); }
.grp-advanced { background:var(--neon-green-ghost); color:var(--neon-green); border:1px solid rgba(0,255,157,0.15); }

/* Tips Grid */
.guide-tips-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:12px; }
.guide-tip { padding:16px; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); }
.guide-tip .tip-num { font-family:var(--font-mono); font-size:0.65rem; color:var(--neon-green-dim); margin-bottom:6px; letter-spacing:0.1em; }
.guide-tip p { font-size:0.84rem; color:var(--text-300); line-height:1.6; margin:0; }
.guide-tip p strong { color:var(--text-100); }

/* Guide CTA */
.guide-cta { text-align:center; margin-top:32px; padding:32px 20px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); }
.guide-cta p { font-size:0.92rem; color:var(--text-300); margin-bottom:20px; }
.btn-next-big { font-size:0.92rem; padding:14px 28px; }

.accent { color:var(--neon-green); }
.hidden { display:none !important; }

/* Responsive */
@media (max-width:700px) {
    .header-status-bar { gap:8px; font-size:0.58rem; }
    .header-ext-links { margin-left:0; width:100%; justify-content:flex-start; margin-top:4px; }
    .header-brand { gap:10px; }
    .brand-icon { display:none; }
    .lab-nav { gap:0; overflow-x:auto; }
    .nav-tab { padding:10px 12px; font-size:0.68rem; gap:4px; }
    .nav-tab .tab-num { display:none; }
    .quick-cmds { gap:6px; }
    .cmd-chip { padding:6px 10px; }
    .cmd-chip code { font-size:0.65rem; }
    .terminal-screen { min-height:260px; font-size:0.68rem; }
    .section-footer-nav { flex-direction:column; gap:10px; align-items:stretch; }
    .btn-next,.btn-prev { justify-content:center; }
    .footer-inner { flex-direction:column; text-align:center; }
    .footer-left,.footer-center { justify-content:center; }
}


/* CertInstructor rebrand enhancements — inherits original palette */
.reset-link { background:transparent; border:0; cursor:pointer; font:inherit; }
.terminal-tools { display:flex; align-items:center; gap:8px; }
.copyable-wrap { position:relative; }
.copy-btn { position:absolute; top:8px; right:8px; z-index:2; padding:4px 9px; border-radius:3px; border:1px solid var(--border-light); background:var(--bg-raised); color:var(--text-300); font-family:var(--font-mono); font-size:0.62rem; cursor:pointer; transition:all var(--transition); }
.copy-btn:hover { border-color:var(--neon-blue-dim); color:var(--neon-blue); }
.copyable-wrap .scenario-logs, .copyable-wrap .analysis-logs-mini, .copyable-wrap .quiz-code-block { padding-right:64px; }
.results-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.btn-shop-cta { display:inline-flex; align-items:center; justify-content:center; padding:10px 24px; background:var(--neon-green-ghost); border:1px solid rgba(0,255,157,0.2); border-radius:var(--radius); color:var(--neon-green); font-family:var(--font-display); font-size:0.82rem; font-weight:600; text-decoration:none; transition:all var(--transition); }
.btn-shop-cta:hover { background:rgba(0,255,157,0.1); border-color:var(--neon-green-dim); box-shadow:0 0 20px var(--neon-green-glow); }

.cmd-chip-wrap { position:relative; display:flex; }
.cmd-chip-wrap .cmd-chip { padding-right:54px; width:100%; }
.cmd-copy-btn { position:absolute; top:6px; right:6px; padding:2px 6px; background:var(--bg-surface); border:1px solid var(--border-light); border-radius:3px; color:var(--text-400); font-family:var(--font-mono); font-size:0.56rem; text-transform:uppercase; cursor:pointer; transition:all var(--transition); }
.cmd-copy-btn:hover { border-color:var(--neon-blue-dim); color:var(--neon-blue); }