:root {
    --bg: #07111f;
    --bg-soft: #0d1830;
    --panel: rgba(13, 23, 43, 0.9);
    --panel-2: rgba(20, 32, 59, 0.88);
    --line: rgba(184, 204, 236, 0.14);
    --line-strong: rgba(184, 204, 236, 0.22);
    --text: #f4f8ff;
    --muted: #bfd0ec;
    --muted-strong: #d6e2f6;
    --gold: #f3c33c;
    --gold-soft: rgba(243, 195, 60, 0.16);
    --cyan: #41c8ff;
    --cyan-soft: rgba(65, 200, 255, 0.15);
    --success: #5bd39d;
    --danger: #ff7885;
    --info: #7fb0ff;
    --shadow: 0 28px 72px rgba(0, 0, 0, 0.34);
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background:
        radial-gradient(circle at top left, rgba(65, 200, 255, 0.14), transparent 28%),
        radial-gradient(circle at top right, rgba(243, 195, 60, 0.10), transparent 24%),
        linear-gradient(180deg, #06101d 0%, #0a1528 48%, #07101d 100%);
    color: var(--text);
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(65, 200, 255, 0.28);
    color: #fff;
}

a {
    color: var(--muted-strong);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}
a:hover { color: #ffffff; }

.page-shell { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
.container-xl {
    max-width: 1240px;
    width: 100%;
    padding-left: 1.15rem;
    padding-right: 1.15rem;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    background: rgba(5, 11, 22, 0.82);
}

.brand-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 0;
}
.brand-mark {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(243, 195, 60, 0.22), rgba(65, 200, 255, 0.18));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    font-weight: 800;
    color: var(--gold);
    letter-spacing: 0.06em;
}
.brand-title { font-weight: 800; font-size: 1.12rem; color: #fff; }
.brand-subtitle { color: var(--muted); font-size: 0.88rem; }

.main-nav {
    row-gap: 0.65rem;
}
.main-nav a:not(.btn) {
    color: var(--muted);
    font-weight: 600;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
}
.main-nav a:not(.btn):hover {
    color: #fff;
    background: rgba(255,255,255,0.05);
}
.rank-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.62rem 0.96rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.05);
    color: #fff;
    font-size: 0.92rem;
    white-space: nowrap;
}

.footer-band {
    margin-top: 2rem;
    padding: 24px 0;
    border-top: 1px solid rgba(255,255,255,0.07);
    background: rgba(5, 11, 22, 0.78);
}
.footer-title { font-weight: 700; color: #fff; }
.footer-copy { color: var(--muted); font-size: 0.95rem; }

.card-panel,
.module-card,
.auth-card,
.leader-panel,
.stat-card {
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}
.card-panel { padding: 30px; }

.flash-stack {
    display: grid;
    gap: 0.8rem;
    margin-bottom: 1rem;
}
.alert {
    color: #fff;
    border-radius: 18px !important;
    padding: 1rem 1.1rem;
    backdrop-filter: blur(10px);
}
.alert-success { background: rgba(91, 211, 157, 0.16); }
.alert-danger { background: rgba(255, 120, 133, 0.18); }
.alert-warning { background: rgba(243, 195, 60, 0.2); color: #111827; }
.alert-info { background: rgba(127, 176, 255, 0.18); }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.95fr);
    gap: 24px;
    align-items: stretch;
}
.hero-panel { padding: 42px; }
.hero-side { padding: 30px; }
.display-title {
    font-size: clamp(2.8rem, 7vw, 5.6rem);
    line-height: 0.95;
    letter-spacing: -0.07em;
    font-weight: 800;
    margin: 0 0 20px;
}
.hero-text,
.section-copy,
.module-card p,
.feature-item p,
.auth-copy,
.story-hook,
.theory-body p,
.review-card p,
.feed-card span,
.feed-item p {
    color: var(--muted);
    line-height: 1.72;
    font-size: 1.02rem;
}
.hero-text strong,
.section-copy strong,
.review-card strong,
.feature-item strong,
.question-panel h2,
.module-card h3,
.feed-item h3,
.footer-title,
.brand-title,
.leader-row strong,
.achievement-tile strong {
    color: #fff;
}

.eyebrow {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 14px;
}
.eyebrow.muted { color: #ffd978; }
.section-title {
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.055em;
    font-size: clamp(2rem, 3vw, 3.3rem);
    margin: 0;
}

.hero-stat-grid,
.feed-card-grid,
.achievement-grid,
.achievement-grid.compact {
    display: grid;
    gap: 14px;
}
.hero-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feed-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }

.mini-stat,
.feed-card,
.achievement-tile,
.level-panel,
.story-hook,
.feature-item,
.results-score-card,
.option-item,
.timeline-step {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.mini-stat,
.feed-card,
.stat-card,
.achievement-tile,
.feature-item,
.results-score-card,
.level-panel { padding: 18px; }

.mini-stat span,
.stat-card span { display: block; font-size: 1.55rem; font-weight: 800; }
.mini-stat small,
.stat-card small {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.74rem;
}

.mission-console-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 16px;
    color: var(--muted);
}
.console-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
}
.console-dot:first-child { background: var(--danger); }
.console-dot:nth-child(2) { background: var(--gold); }
.console-dot:nth-child(3) { background: var(--success); }

.feed-label {
    display: inline-block;
    margin-bottom: 10px;
    padding: 0.38rem 0.78rem;
    border-radius: 999px;
    background: var(--gold-soft);
    color: #ffdd7a;
    font-size: 0.82rem;
    font-weight: 700;
}
.feed-card strong,
.feature-item strong { display: block; margin-bottom: 0.45rem; font-size: 1.05rem; }
.feed-item h3 { font-size: 1.72rem; font-weight: 700; margin-bottom: 12px; }

.section-band { padding: 10px 2px 0; }
.alt-band {
    padding: 28px;
    border-radius: 32px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.025));
    border: 1px solid rgba(255,255,255,0.08);
}
.section-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    flex-wrap: wrap;
}
.section-heading-row .section-copy { max-width: 560px; margin: 0; }

.module-card {
    padding: 26px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.module-card:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.38);
}
.module-card h3 {
    font-size: 1.38rem;
    line-height: 1.16;
    font-weight: 700;
    margin: 12px 0 14px;
}
.module-badge,
.module-meta span,
.chip,
.completion-banner,
.answer-state,
.question-label {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.46rem 0.82rem;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,0.1);
}
.module-badge,
.module-meta span,
.completion-banner {
    background: rgba(255,255,255,0.055);
    color: #eef5ff;
}
.chip.cybersecurity {
    background: var(--cyan-soft);
    color: #b2ebff;
}
.chip.ai {
    background: var(--gold-soft);
    color: #ffe08a;
}
.module-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
}
.story-hook {
    margin-top: 16px;
    padding: 18px;
    color: var(--muted-strong);
}
.story-hook.large { font-size: 1.06rem; }

.leader-panel { padding: 28px; }
.leader-row,
.mission-log-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.leader-row:last-child,
.mission-log-row:last-child { border-bottom: 0; }
.leader-points { font-weight: 800; color: #fff; }

.auth-shell {
    min-height: calc(100vh - 240px);
    display: grid;
    place-items: center;
}
.auth-card { width: min(100%, 580px); padding: 36px; }
.auth-card-wide { width: min(100%, 780px); }
.auth-title {
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 0.98;
    font-weight: 800;
    letter-spacing: -0.05em;
}

.form-label { color: var(--muted-strong); font-weight: 600; }
.form-control {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text);
    border-radius: 18px;
    padding: 0.92rem 1rem;
}
.form-control::placeholder { color: rgba(191, 208, 236, 0.72); }
.form-control:focus {
    background: rgba(255,255,255,0.08);
    border-color: rgba(243,195,60,0.36);
    color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(243, 195, 60, 0.14);
}

.dashboard-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}
.level-panel {
    min-width: min(100%, 320px);
    padding: 22px;
}
.level-value { font-size: 2rem; font-weight: 800; }
.level-copy,
.text-muted,
.form-text { color: var(--muted) !important; }

.soft-progress {
    height: 12px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
}
.soft-progress .progress-bar {
    background: linear-gradient(90deg, var(--cyan), var(--gold));
    border-radius: 999px;
}

.stat-card { padding: 24px; height: 100%; }
.stat-card.compact { min-width: 170px; }

.module-hero .score-chip-stack {
    display: grid;
    gap: 14px;
    width: min(100%, 220px);
}
.timeline-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.timeline-step {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
}
.timeline-step strong {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.timeline-step span { color: var(--muted); font-weight: 600; }
.timeline-step.active strong {
    background: linear-gradient(135deg, var(--gold), #dca015);
    color: #101521;
}

.reading-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 24px;
}
.theory-body h3 {
    font-size: 1.34rem;
    margin: 26px 0 12px;
    font-weight: 700;
}
.theory-body ul,
.mission-checklist {
    color: var(--muted-strong);
    line-height: 1.88;
    padding-left: 1.15rem;
}
.theory-body li + li,
.mission-checklist li + li { margin-top: 0.28rem; }

.scenario-stack { display: grid; gap: 18px; }
.question-panel h2 {
    font-size: clamp(1.28rem, 2.2vw, 1.52rem);
    line-height: 1.3;
    margin: 0;
}
.option-stack {
    display: grid;
    gap: 12px;
}
.option-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.option-item:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
}
.option-item input {
    margin: 0.28rem 0 0;
    accent-color: var(--gold);
    transform: scale(1.1);
}
.option-item span {
    color: var(--muted-strong);
    font-weight: 500;
    line-height: 1.6;
}
.option-item.selected {
    background: linear-gradient(180deg, rgba(65, 200, 255, 0.13), rgba(243, 195, 60, 0.1));
    border-color: rgba(243, 195, 60, 0.28);
    box-shadow: 0 18px 34px rgba(0,0,0,0.2);
}

.results-hero {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
    align-items: center;
}
.results-score-card {
    min-width: min(100%, 240px);
    text-align: center;
}
.score-ring {
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1), transparent 42%), linear-gradient(135deg, rgba(65, 200, 255, 0.22), rgba(243, 195, 60, 0.26));
    border: 1px solid rgba(255,255,255,0.14);
    font-size: 1.9rem;
    font-weight: 800;
    color: #fff;
}
.review-stack { display: grid; gap: 16px; }
.review-card.correct { border-color: rgba(91, 211, 157, 0.26); }
.review-card.incorrect { border-color: rgba(255, 120, 133, 0.24); }
.answer-state {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.review-card.correct .answer-state {
    background: rgba(91, 211, 157, 0.18);
    color: #d7ffec;
    border-color: rgba(91, 211, 157, 0.22);
}
.review-card.incorrect .answer-state {
    background: rgba(255, 120, 133, 0.18);
    color: #ffe0e5;
    border-color: rgba(255, 120, 133, 0.22);
}

.achievement-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.achievement-tile {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
}
.achievement-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(243,195,60,0.18), rgba(65,200,255,0.16));
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 1.35rem;
}

.btn {
    border-width: 1px;
    box-shadow: none !important;
}
.btn-warning {
    background: linear-gradient(180deg, #ffcf53, #f0b417);
    border-color: rgba(255, 230, 160, 0.36);
    color: #101521;
    font-weight: 700;
}
.btn-warning:hover,
.btn-warning:focus {
    background: linear-gradient(180deg, #ffd66a, #f4ba1b);
    color: #101521;
}
.btn-outline-light {
    border-color: rgba(255,255,255,0.15);
    color: #f6f8ff;
    background: rgba(255,255,255,0.04);
}
.btn-outline-light:hover,
.btn-outline-light:focus {
    color: #fff;
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.22);
}

@media (max-width: 1199.98px) {
    .hero-grid,
    .reading-layout {
        grid-template-columns: 1fr;
    }
    .hero-side { order: 2; }
}

@media (max-width: 991.98px) {
    .topbar {
        position: static;
    }
    .hero-panel,
    .hero-side,
    .card-panel,
    .auth-card,
    .leader-panel,
    .stat-card {
        padding: 24px;
    }
    .timeline-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .hero-stat-grid,
    .feed-card-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .container-xl {
        padding-left: 0.95rem;
        padding-right: 0.95rem;
    }
    .brand-wrap {
        padding: 12px 0 0;
    }
    .main-nav {
        width: 100%;
        justify-content: flex-start;
        padding-bottom: 14px;
    }
    .display-title {
        font-size: 2.55rem;
        line-height: 0.98;
    }
    .section-title {
        font-size: 1.85rem;
    }
    .hero-text,
    .section-copy,
    .module-card p,
    .auth-copy,
    .theory-body p,
    .review-card p,
    .feed-item p {
        font-size: 0.98rem;
    }
    .timeline-strip,
    .achievement-grid,
    .hero-stat-grid,
    .feed-card-grid {
        grid-template-columns: 1fr;
    }
    .results-hero,
    .dashboard-hero,
    .section-heading-row {
        align-items: flex-start;
    }
    .module-hero .score-chip-stack,
    .results-score-card,
    .level-panel {
        width: 100%;
    }
    .option-item {
        padding: 14px 15px;
    }
}

.scenario-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 24px;
    align-items: start;
}

.scenario-tip {
    padding: 20px 22px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-lg);
}

.scenario-tip ul {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--muted);
    display: grid;
    gap: 0.55rem;
}

.tip-label,
.question-type-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}

.tip-label {
    margin-bottom: 12px;
    color: var(--gold);
    background: rgba(243, 195, 60, 0.14);
    border: 1px solid rgba(243, 195, 60, 0.2);
}

.question-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: start;
}

.question-type-pill {
    color: var(--cyan);
    background: rgba(65, 200, 255, 0.12);
    border: 1px solid rgba(65, 200, 255, 0.2);
    white-space: nowrap;
}

.question-instruction {
    color: var(--muted-strong);
    margin-top: 0.65rem;
    margin-bottom: 0;
}

.sim-window {
    border-radius: 26px;
    overflow: hidden;
    background: rgba(4, 10, 20, 0.75);
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.sim-window-bar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.95rem 1.15rem;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: var(--muted-strong);
}

.sim-window-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
}

.inbox-list {
    display: grid;
    gap: 0;
}

.inbox-option {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: start;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.inbox-option:last-child {
    border-bottom: 0;
}

.inbox-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.inbox-main {
    display: grid;
    gap: 0.22rem;
}

.inbox-topline {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted-strong);
}

.inbox-topline small,
.inbox-preview,
.chat-subtitle,
.meta-label {
    color: var(--muted);
}

.inbox-subject {
    color: #fff;
    font-weight: 700;
}

.mail-tag {
    border-radius: 999px;
    padding: 0.42rem 0.72rem;
    height: fit-content;
    background: rgba(243, 195, 60, 0.14);
    color: #ffe7a3;
    border: 1px solid rgba(243, 195, 60, 0.2);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.email-shell,
.chat-sim {
    padding: 1.15rem;
}

.email-meta-grid {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0.55rem 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.meta-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.meta-value,
.email-body,
.chat-copy {
    color: var(--muted-strong);
    line-height: 1.75;
}

.email-body {
    padding: 1rem 0 0.25rem;
}

.email-body p:last-child {
    margin-bottom: 0;
}

.attachment-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.attachment-pill,
.selected-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.78rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--muted-strong);
}

.hotspot-token {
    appearance: none;
    border: 1px dashed rgba(243, 195, 60, 0.36);
    background: rgba(243, 195, 60, 0.12);
    color: #fff5d8;
    border-radius: 12px;
    padding: 0.14rem 0.42rem;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.hotspot-token:hover,
.hotspot-token:focus-visible {
    transform: translateY(-1px);
    background: rgba(243, 195, 60, 0.2);
    border-color: rgba(243, 195, 60, 0.55);
    box-shadow: 0 0 0 3px rgba(243, 195, 60, 0.12);
    outline: none;
}

.hotspot-token.active {
    background: linear-gradient(180deg, rgba(243, 195, 60, 0.3), rgba(243, 195, 60, 0.18));
    border-color: rgba(243, 195, 60, 0.75);
    color: #fff;
}

.hotspot-panel {
    display: grid;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.selected-hotspots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    color: var(--muted);
}

.chat-subtitle {
    padding: 1rem 1.15rem 0;
}

.chat-thread {
    display: grid;
    gap: 0.85rem;
    padding: 1rem 1.15rem 0;
}

.chat-bubble {
    max-width: min(100%, 760px);
    padding: 1rem 1rem 0.95rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}

.chat-bubble.employee {
    justify-self: start;
    background: rgba(65, 200, 255, 0.1);
    border-color: rgba(65, 200, 255, 0.18);
}

.chat-bubble.assistant {
    justify-self: end;
}

.chat-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.45rem;
    color: var(--muted-strong);
}

.option-stack-multi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checkbox-item {
    min-height: 100%;
}

.checkbox-item input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--gold);
    margin-top: 0.2rem;
}

@media (max-width: 991px) {
    .scenario-hero {
        grid-template-columns: 1fr;
    }

    .option-stack-multi {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .question-head,
    .inbox-option,
    .inbox-topline,
    .email-meta-grid {
        grid-template-columns: 1fr;
        display: grid;
    }

    .email-meta-grid {
        gap: 0.3rem;
    }

    .card-panel {
        padding: 22px;
    }

    .chat-bubble {
        max-width: 100%;
    }
}

.device-stage,
.permissions-shell,
.voicemail-shell,
.timeline-shell,
.browser-pane,
.calendar-card {
    padding: 1.15rem;
}

.device-header,
.voicemail-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.device-title,
.permissions-summary,
.sms-copy,
.timeline-copy,
.browser-notices,
.browser-footer-notes,
.permission-notes,
.transcript-card,
.calendar-notes {
    color: var(--muted-strong);
}

.device-status {
    color: var(--muted);
    font-size: 0.92rem;
}

.device-chip,
.browser-badge {
    border-radius: 999px;
    padding: 0.4rem 0.78rem;
    background: rgba(65, 200, 255, 0.12);
    border: 1px solid rgba(65, 200, 255, 0.22);
    color: var(--cyan);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.notification-stack,
.permission-stack,
.timeline-list {
    display: grid;
    gap: 0.85rem;
    margin-top: 1rem;
}

.notification-card,
.permission-row,
.timeline-item,
.poster-card,
.phone-preview-card,
.browser-form-grid,
.transcript-card,
.calendar-card {
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    border-radius: 20px;
}

.notification-card {
    padding: 1rem;
}

.notification-head,
.sms-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.4rem;
    color: var(--muted-strong);
}

.notification-title {
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.35rem;
}

.notification-copy,
.permissions-summary,
.permission-notes p,
.browser-notices p,
.browser-footer-notes p,
.calendar-notes p,
.poster-card p,
.phone-preview-card p,
.transcript-card p {
    margin-bottom: 0.55rem;
}

.sms-stage {
    padding-top: 0;
}

.sms-thread {
    display: grid;
    gap: 0.9rem;
    padding-top: 1rem;
}

.sms-bubble {
    max-width: min(100%, 640px);
    padding: 0.95rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}

.sms-bubble.incoming {
    justify-self: start;
}

.sms-bubble.outgoing {
    justify-self: end;
    background: rgba(65, 200, 255, 0.12);
    border-color: rgba(65, 200, 255, 0.18);
}

.browser-toolbar {
    gap: 0.85rem;
}

.browser-url {
    flex: 1;
    min-width: 0;
    border-radius: 999px;
    padding: 0.55rem 0.85rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--muted-strong);
    overflow-wrap: anywhere;
}

.browser-title,
.permissions-title,
.poster-card h3,
.phone-preview-card h3,
.calendar-card h3,
.voicemail-header h3 {
    color: #fff;
    margin-bottom: 0.75rem;
}

.browser-form-grid {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0.55rem 1rem;
    padding: 1rem;
    margin-top: 1rem;
}

.browser-field-label {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.browser-field-value {
    color: var(--muted-strong);
    font-weight: 600;
}

.browser-footer-notes {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.permissions-card {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    border-radius: 22px;
}

.permission-row {
    padding: 0.9rem 1rem;
}

.permission-notes {
    padding-top: 0.25rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.qr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1.15rem;
}

.poster-card,
.phone-preview-card {
    padding: 1rem;
}

.hotspot-token-block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 160px;
    margin-top: 1rem;
    border-style: solid;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.voicemail-header {
    padding-bottom: 0.85rem;
}

.transcript-card {
    padding: 1rem;
    margin-top: 1rem;
    line-height: 1.75;
}

.calendar-card {
    padding: 1rem;
    display: grid;
    gap: 0.85rem;
}

.calendar-row {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 0.9rem;
    align-items: start;
}

.calendar-row span {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.calendar-notes {
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.timeline-item {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 1rem;
    padding: 1rem;
}

.timeline-item.flagged {
    border-color: rgba(243, 195, 60, 0.2);
    background: rgba(243, 195, 60, 0.06);
}

.timeline-time {
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

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

@media (max-width: 767px) {
    .device-header,
    .voicemail-header,
    .calendar-row,
    .timeline-item,
    .browser-form-grid {
        grid-template-columns: 1fr;
        display: grid;
    }

    .sms-bubble,
    .notification-card {
        max-width: 100%;
    }

    .browser-toolbar {
        flex-wrap: wrap;
    }
}

/* Interactive scenario upgrades */
.inbox-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.3fr);
    gap: 18px;
}
.inbox-list-pane,
.inbox-preview-pane,
.decision-shell {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    padding: 16px;
}
.inbox-row {
    cursor: pointer;
}
.inbox-option.active-preview,
.inbox-option.selected {
    border-color: rgba(65, 200, 255, 0.34);
    background: rgba(65, 200, 255, 0.12);
}
.inbox-preview-item {
    display: none;
    animation: fadeCard 0.18s ease;
}
.inbox-preview-item.active {
    display: block;
}
.preview-body {
    min-height: 180px;
}
.email-meta-grid.compact {
    grid-template-columns: 120px minmax(0, 1fr);
}

.decision-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.decision-grid-multi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.option-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 18px 16px;
    border-radius: 22px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.option-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
}
.option-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.option-card-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 1.2rem;
}
.option-card-body {
    display: grid;
    gap: 6px;
    min-width: 0;
}
.option-card-body strong {
    color: #fff;
    font-size: 1rem;
    line-height: 1.25;
}
.option-card-body small {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.55;
}
.option-card-state {
    margin-left: auto;
    align-self: center;
    white-space: nowrap;
    padding: 0.42rem 0.78rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--muted-strong);
    font-size: 0.8rem;
    font-weight: 700;
}
.option-card.selected {
    border-color: rgba(65, 200, 255, 0.42);
    background: linear-gradient(180deg, rgba(65, 200, 255, 0.17), rgba(65, 200, 255, 0.08));
    box-shadow: 0 16px 36px rgba(0,0,0,0.25);
}
.option-card.selected .option-card-state {
    background: rgba(65, 200, 255, 0.18);
    color: #fff;
}
.option-card-good.selected {
    border-color: rgba(91, 211, 157, 0.45);
    background: linear-gradient(180deg, rgba(91, 211, 157, 0.18), rgba(91, 211, 157, 0.08));
}
.option-card-good.selected .option-card-state {
    background: rgba(91, 211, 157, 0.18);
}
.option-card-danger.selected {
    border-color: rgba(255, 120, 133, 0.45);
    background: linear-gradient(180deg, rgba(255, 120, 133, 0.18), rgba(255, 120, 133, 0.08));
}
.option-card-danger.selected .option-card-state {
    background: rgba(255, 120, 133, 0.16);
}
.option-card-warn.selected {
    border-color: rgba(243, 195, 60, 0.5);
    background: linear-gradient(180deg, rgba(243, 195, 60, 0.18), rgba(243, 195, 60, 0.08));
}
.option-card-warn.selected .option-card-state {
    background: rgba(243, 195, 60, 0.16);
}
.choice-feedback-panel {
    padding: 16px;
    border-radius: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}
.choice-selection {
    min-height: 58px;
}

.decision-shell {
    display: grid;
    gap: 16px;
}
.decision-header-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.decision-title {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.5;
    color: var(--muted-strong);
}
.decision-status-pill {
    max-width: 360px;
    padding: 0.7rem 0.95rem;
    border-radius: 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    font-weight: 600;
}
.decision-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.decision-badges span {
    padding: 0.42rem 0.78rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--muted-strong);
    font-size: 0.78rem;
    font-weight: 700;
}
.decision-panel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.decision-panel-card,
.decision-note,
.decision-draft-card {
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    padding: 16px;
}
.decision-panel-card small {
    display: block;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    margin-bottom: 8px;
}
.decision-panel-card strong,
.decision-draft-card p {
    color: #fff;
    display: block;
}
.decision-panel-card p,
.decision-note,
.decision-draft-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}
.decision-note-stack {
    display: grid;
    gap: 10px;
}
.decision-sim-email-response .decision-status-pill,
.decision-sim-chat-response .decision-status-pill,
.decision-sim-oauth .decision-status-pill {
    background: rgba(65, 200, 255, 0.14);
}
.decision-sim-policy .decision-status-pill,
.decision-sim-ai-workspace .decision-status-pill,
.decision-sim-ai-prep .decision-status-pill,
.decision-sim-go-no-go .decision-status-pill,
.decision-sim-fact-check .decision-status-pill {
    background: rgba(243, 195, 60, 0.16);
}
.decision-sim-incident .decision-status-pill,
.decision-sim-report-draft .decision-status-pill,
.decision-sim-recovery .decision-status-pill {
    background: rgba(91, 211, 157, 0.16);
}

.selected-hotspots.choice-selection,
.selected-hotspots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--muted);
    line-height: 1.6;
}
.selected-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.78rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
}

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

@media (max-width: 991px) {
    .inbox-layout,
    .decision-panel-grid,
    .decision-grid,
    .decision-grid-multi {
        grid-template-columns: 1fr;
    }
}

/* v6 simulator upgrades */
.sim-section-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.65rem;
    color: #9bc9ff;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    font-weight: 800;
}
.sim-inline-title {
    margin: 0 0 1rem;
    color: #fff;
    font-size: 1.08rem;
    line-height: 1.45;
}
.workbench-layout,
.video-layout,
.mobile-hub-layout,
.collab-layout {
    display: grid;
    gap: 18px;
}
.workbench-layout {
    grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.15fr);
}
.video-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.9fr);
}
.mobile-hub-layout {
    grid-template-columns: minmax(290px, 1fr) minmax(280px, 0.95fr);
}
.collab-layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.workbench-column,
.video-stage-card,
.video-sidebar-card,
.mobile-card-shell,
.collab-column {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    padding: 18px;
}
.workbench-card-stack,
.video-note-stack,
.network-list {
    display: grid;
    gap: 12px;
}
.workbench-card,
.network-item,
.mobile-thread-row {
    border-radius: 18px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.09);
    padding: 14px 15px;
}
.workbench-card small,
.network-item small {
    display: block;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.71rem;
    margin-bottom: 0.45rem;
}
.workbench-card strong,
.network-item strong,
.mobile-thread-row strong {
    display: block;
    color: #fff;
    font-size: 0.98rem;
    line-height: 1.35;
}
.workbench-card p,
.network-item span,
.mobile-thread-row span,
.workbench-pane p,
.video-transcript-card p {
    margin: 0.35rem 0 0;
    color: var(--muted);
    line-height: 1.6;
    font-size: 0.95rem;
}
.workbench-pane,
.video-transcript-card {
    border-radius: 18px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.09);
    padding: 16px;
}
.workbench-pane-accent {
    background: rgba(243, 195, 60, 0.10);
    border-color: rgba(243, 195, 60, 0.22);
}
.video-participants-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.video-tile {
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(65,200,255,0.10), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.1);
    padding: 16px;
    min-height: 118px;
}
.video-tile strong {
    display: block;
    color: #fff;
    margin-bottom: 0.3rem;
}
.video-tile span,
.video-tile small {
    display: block;
    color: var(--muted);
    line-height: 1.45;
}
.video-tile small { margin-top: 0.45rem; }
.compact-chat .chat-bubble {
    margin-bottom: 10px;
}
.mobile-thread-row {
    display: grid;
    gap: 0.25rem;
}
.network-item {
    display: grid;
    gap: 0.2rem;
}
.preview-body p {
    color: var(--muted-strong);
}
@media (max-width: 991px) {
    .workbench-layout,
    .video-layout,
    .mobile-hub-layout,
    .collab-layout,
    .video-participants-grid {
        grid-template-columns: 1fr;
    }
}