/* ============================================
   AIDEFEND RSAC 2026 - Cyber Dashboard Theme
   ============================================ */

/* CSS Custom Properties */
:root {
    /* Colors - Dark Cyber Theme */
    --bg-primary: #0a0e14;
    --bg-secondary: #12181f;
    --bg-tertiary: #1a222c;
    --bg-card: #151c25;
    --bg-card-hover: #1d2633;

    /* Accent Colors */
    --accent-primary: #00d4ff;
    --accent-secondary: #00ff88;
    --accent-warning: #ffb800;
    --accent-danger: #ff4757;
    --accent-purple: #a855f7;

    /* Neon Glow Colors */
    --glow-cyan: rgba(0, 212, 255, 0.5);
    --glow-green: rgba(0, 255, 136, 0.5);
    --glow-red: rgba(255, 71, 87, 0.5);
    --glow-yellow: rgba(255, 184, 0, 0.5);
    --glow-purple: rgba(168, 85, 247, 0.5);

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #a0aec0;
    --text-muted: #6b7280;
    --text-bright: #e2e8f0;

    /* Status Colors */
    --status-on: var(--accent-secondary);
    --status-off: var(--accent-danger);
    --status-blocked: var(--accent-danger);
    --status-detected: var(--accent-warning);
    --status-quarantined: var(--accent-purple);
    --status-evicted: var(--accent-danger);
    --status-rolled-back: var(--accent-primary);

    /* Team Colors */
    --team-app: #3b82f6;
    --team-ml: #8b5cf6;
    --team-platform: #f59e0b;
    --team-sec: #ef4444;

    /* Tactic Colors */
    --tactic-harden: #3b82f6;
    --tactic-detect: #f59e0b;
    --tactic-isolate: #8b5cf6;
    --tactic-deceive: #ec4899;
    --tactic-evict: #ef4444;
    --tactic-restore: #10b981;
    --tactic-model: #6366f1;

    /* Borders */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-color-hover: rgba(255, 255, 255, 0.15);
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    --font-size-4xl: 40px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Z-index layers */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-overlay: 400;
    --z-toast: 500;
}

/* Presenter Mode Overrides */
.presenter-mode {
    --font-size-base: 18px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 28px;
    --font-size-3xl: 36px;
    --font-size-4xl: 48px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   Reset & Base Styles
   ============================================ */

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

html {
    font-size: var(--font-size-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

body.dark-mode {
    background: linear-gradient(135deg, var(--bg-primary) 0%, #0d1117 50%, var(--bg-primary) 100%);
}

/* Background Grid Pattern */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: -1;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* ============================================
   Header
   ============================================ */

.main-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-lg);
    background: rgba(10, 14, 20, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.logo-icon {
    width: 32px;
    height: 32px;
    color: var(--accent-primary);
    filter: drop-shadow(0 0 8px var(--glow-cyan));
}

.logo-text {
    font-size: var(--font-size-xl);
    font-weight: 700;
    letter-spacing: 2px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tagline {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    padding-left: var(--space-lg);
    border-left: 1px solid var(--border-color);
}

.header-center {
    display: flex;
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Global Toggle */
.global-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
}

.toggle-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.toggle-switch {
    position: relative;
    width: 96px;
    height: 42px;
    background: var(--bg-tertiary);
    border-radius: 21px;
    border: 2px solid var(--status-off);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.toggle-switch.active {
    border-color: var(--status-on);
    box-shadow: 0 0 12px var(--glow-green), 0 0 24px rgba(0, 255, 136, 0.1);
    animation: toggleGlow 2s ease-in-out infinite;
}

@keyframes toggleGlow {
    0%, 100% { box-shadow: 0 0 12px var(--glow-green); }
    50% { box-shadow: 0 0 18px var(--glow-green), 0 0 28px rgba(0, 255, 136, 0.15); }
}

.toggle-slider {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: var(--status-off);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-switch.active .toggle-slider {
    left: calc(100% - 34px);
    background: var(--status-on);
    box-shadow: 0 0 15px var(--glow-green);
}

.toggle-state {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 700;
    color: var(--status-off);
    transition: var(--transition-base);
}

.toggle-switch.active .toggle-state {
    right: auto;
    left: 10px;
    color: var(--status-on);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--border-radius-md);
    transition: var(--transition-fast);
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.btn-icon:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.btn-icon.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--bg-primary);
}

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

.btn-danger {
    background: rgba(255, 71, 87, 0.1);
    border: 1px solid var(--accent-danger);
    color: var(--accent-danger);
}

.btn-danger:hover {
    background: var(--accent-danger);
    color: var(--text-primary);
}

.btn-primary {
    background: var(--accent-primary);
    color: var(--bg-primary);
    font-weight: 600;
}

.btn-primary:hover {
    box-shadow: 0 0 20px var(--glow-cyan);
}

/* ============================================
   Landing Page - Hero
   ============================================ */

.landing-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-sm) var(--space-xl) var(--space-xl);
}

.hero-section {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-md);
    align-items: center;
    margin-bottom: 0;
    min-height: unset;
}

.hero-content {
    max-width: 600px;
}

.hero-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-sm);
}

.hero-title .highlight {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.hero-stats-inline {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-stats-inline strong {
    color: var(--accent-primary);
    font-size: var(--font-size-lg);
    font-weight: 700;
    text-shadow: 0 0 15px var(--glow-cyan);
}

.stat-divider {
    color: var(--text-muted);
    font-weight: 300;
}

/* Hero Visual - Defense Rings */
.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    width: 140px;
}

.defense-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid;
    animation: pulse-ring 3s ease-in-out infinite;
}

.outer-ring {
    width: 170px;
    height: 170px;
    border-color: rgba(0, 212, 255, 0.2);
    animation-delay: 0s;
}

.middle-ring {
    width: 120px;
    height: 120px;
    border-color: rgba(0, 255, 136, 0.3);
    animation-delay: 0.5s;
}

.inner-ring {
    width: 70px;
    height: 70px;
    border-color: rgba(168, 85, 247, 0.4);
    animation-delay: 1s;
}

.defense-core {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 50%;
    box-shadow: 0 0 20px var(--glow-cyan);
}

.core-icon {
    width: 22px;
    height: 22px;
    color: var(--bg-primary);
}

@keyframes pulse-ring {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.7;
    }
}

/* ============================================
   Battlegrounds Section
   ============================================ */

.battlegrounds-section {
    margin-bottom: var(--space-2xl);
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.section-title svg {
    width: 28px;
    height: 28px;
    color: var(--accent-primary);
}

.section-subtitle {
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.battleground-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
}

.battleground-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    transition: var(--transition-base);
    overflow: hidden;
}

.battleground-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 212, 255, 0.15);
}

.card-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
    opacity: 0;
    transition: var(--transition-base);
}

.battleground-card:hover .card-glow {
    opacity: 1;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
    background: rgba(0, 212, 255, 0.1);
}

.card-icon svg {
    width: 24px;
    height: 24px;
    color: var(--accent-primary);
}

.card-icon.supply-chain { background: rgba(59, 130, 246, 0.15); }
.card-icon.supply-chain svg { color: #3b82f6; }

.card-icon.rag { background: rgba(16, 185, 129, 0.15); }
.card-icon.rag svg { color: #10b981; }

.card-icon.agent { background: rgba(139, 92, 246, 0.15); }
.card-icon.agent svg { color: #8b5cf6; }

.card-icon.asset { background: rgba(245, 158, 11, 0.15); }
.card-icon.asset svg { color: #f59e0b; }

.card-number {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--bg-tertiary);
}

.card-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.card-hook {
    font-size: var(--font-size-sm);
    color: var(--accent-primary);
    font-style: italic;
    margin-bottom: var(--space-md);
}

.card-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    flex-grow: 1;
    margin-bottom: var(--space-md);
}

.card-techniques {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}

.technique-count {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 500;
}

.team-tags {
    display: flex;
    gap: var(--space-xs);
}

.team-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    text-transform: uppercase;
}

.team-tag.app { background: rgba(59, 130, 246, 0.2); color: var(--team-app); }
.team-tag.ml { background: rgba(139, 92, 246, 0.2); color: var(--team-ml); }
.team-tag.platform { background: rgba(245, 158, 11, 0.2); color: var(--team-platform); }
.team-tag.sec { background: rgba(239, 68, 68, 0.2); color: var(--team-sec); }

.card-arrow {
    position: absolute;
    right: var(--space-lg);
    bottom: var(--space-lg);
    opacity: 0;
    transform: translateX(-10px);
    transition: var(--transition-base);
}

.card-arrow svg {
    width: 20px;
    height: 20px;
    color: var(--accent-primary);
}

.battleground-card:hover .card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================
   Tactics Section
   ============================================ */

.tactics-section {
    margin-bottom: var(--space-2xl);
}

.tactics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-md);
}

.tactic-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    transition: var(--transition-base);
}

.tactic-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.tactic-card svg {
    width: 32px;
    height: 32px;
    margin-bottom: var(--space-sm);
    color: var(--accent-primary);
}

.tactic-card[data-tactic="harden"] svg { color: var(--tactic-harden); }
.tactic-card[data-tactic="detect"] svg { color: var(--tactic-detect); }
.tactic-card[data-tactic="isolate"] svg { color: var(--tactic-isolate); }
.tactic-card[data-tactic="deceive"] svg { color: var(--tactic-deceive); }
.tactic-card[data-tactic="evict"] svg { color: var(--tactic-evict); }
.tactic-card[data-tactic="restore"] svg { color: var(--tactic-restore); }
.tactic-card[data-tactic="model"] svg { color: var(--tactic-model); }

.tactic-card h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.tactic-card p {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* ============================================
   Footer
   ============================================ */

.main-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-sm) var(--space-xl);
    background: rgba(10, 14, 20, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-color);
    z-index: var(--z-sticky);
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.footer-divider {
    color: var(--border-color);
}

.footer-hotkeys {
    display: flex;
    gap: var(--space-md);
}

kbd {
    display: inline-block;
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    margin-right: var(--space-xs);
}

/* ============================================
   Toast Notifications
   ============================================ */

.toast-container {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    z-index: var(--z-toast);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease;
    pointer-events: auto;
}

.toast.success {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 20px var(--glow-green);
}

.toast.warning {
    border-color: var(--accent-warning);
    box-shadow: 0 0 20px var(--glow-yellow);
}

.toast.error {
    border-color: var(--accent-danger);
    box-shadow: 0 0 20px var(--glow-red);
}

.toast.info {
    border-color: var(--accent-primary);
    box-shadow: 0 0 20px var(--glow-cyan);
}

.toast-icon {
    width: 20px;
    height: 20px;
}

.toast.success .toast-icon { color: var(--accent-secondary); }
.toast.warning .toast-icon { color: var(--accent-warning); }
.toast.error .toast-icon { color: var(--accent-danger); }
.toast.info .toast-icon { color: var(--accent-primary); }

.toast-content {
    flex: 1;
}

.toast-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 2px;
}

.toast-message {
    font-size: 14px;
    color: var(--text-secondary);
}

.toast-close {
    padding: var(--space-xs);
    color: var(--text-muted);
    transition: var(--transition-fast);
}

.toast-close:hover {
    color: var(--text-primary);
}

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

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast.hiding {
    animation: slideOut 0.3s ease forwards;
}

/* ============================================
   Attract Mode Overlay
   ============================================ */

.attract-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 20, 0.98);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-overlay);
    cursor: pointer;
}

.attract-overlay.hidden {
    display: none;
}

.attract-content {
    text-align: center;
    padding: var(--space-2xl);
    animation: fadeInUp 0.5s ease;
}

.attract-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.attract-logo svg {
    width: 64px;
    height: 64px;
    color: var(--accent-primary);
    filter: drop-shadow(0 0 20px var(--glow-cyan));
}

.attract-logo span {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.attract-scenario {
    margin-bottom: var(--space-2xl);
}

.attract-title {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.attract-hook {
    font-size: var(--font-size-xl);
    color: var(--accent-primary);
    font-style: italic;
}

.attract-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    color: var(--text-secondary);
    animation: pulse 2s ease-in-out infinite;
}

.attract-cta svg {
    width: 24px;
    height: 24px;
}

.attract-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--bg-tertiary);
}

.attract-progress-bar {
    height: 100%;
    background: var(--accent-primary);
    width: 0;
    transition: width 0.1s linear;
}

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

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

/* ============================================
   Scenario Page Layout
   ============================================ */

.scenario-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    grid-template-rows: auto 1fr auto;
    gap: var(--space-md);
    height: calc(100vh - 120px);
    padding: var(--space-md) var(--space-xl);
}

.scenario-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
}

.scenario-title {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.scenario-title h1 {
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.scenario-title .hook {
    font-size: var(--font-size-sm);
    color: var(--accent-primary);
    font-style: italic;
}

/* Architecture Diagram */
.architecture-container {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.architecture-diagram {
    position: relative;
    width: 100%;
    height: 100%;
    padding: var(--space-lg);
}

/* Architecture Nodes */
.arch-node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 8px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    transition: var(--transition-base);
    min-width: 80px;
    text-align: center;
}

.arch-node.active {
    border-color: var(--accent-primary);
    box-shadow: 0 0 20px var(--glow-cyan);
}

.arch-node.compromised {
    border-color: var(--accent-danger);
    box-shadow: 0 0 20px var(--glow-red);
}

.arch-node.protected {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 20px var(--glow-green);
}

.arch-node svg {
    width: 24px;
    height: 24px;
    margin-bottom: var(--space-xs);
    color: var(--text-secondary);
}

.arch-node.active svg { color: var(--accent-primary); }
.arch-node.compromised svg { color: var(--accent-danger); }
.arch-node.protected svg { color: var(--accent-secondary); }

.arch-node-label {
    font-size: var(--font-size-xs);
    font-weight: 500;
}

/* SVG Connectors */
.connectors-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.connector {
    stroke: var(--border-color);
    stroke-width: 2;
    fill: none;
    transition: var(--transition-base);
}

.connector.active {
    stroke: var(--accent-primary);
    filter: drop-shadow(0 0 4px var(--glow-cyan));
}

.connector.flow-attack {
    stroke: var(--accent-danger);
    stroke-dasharray: 8 4;
    animation: flowAttack 1s linear infinite;
}

.connector.flow-defense {
    stroke: var(--accent-secondary);
    stroke-dasharray: 8 4;
    animation: flowDefense 1s linear infinite;
}

@keyframes flowAttack {
    from { stroke-dashoffset: 12; }
    to { stroke-dashoffset: 0; }
}

@keyframes flowDefense {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: 12; }
}

/* Right Panel */
.right-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Technique Details Panel */
.technique-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.technique-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.technique-panel-header h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.technique-panel-content {
    padding: var(--space-md);
    overflow-y: auto;
    max-height: 100%;
}

.technique-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;
}

.technique-id {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 20px;
    padding: 5px 14px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    color: var(--accent-primary);
    flex-shrink: 0;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.technique-name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.technique-rationale {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    line-height: 1.45;
}

/* Technique Explanation - WHY/HOW/OUTCOME section - Compact */
.technique-explanation {
    margin: var(--space-xs) 0;
    padding: 8px;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.08), rgba(0, 212, 255, 0.03));
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: var(--border-radius-md);
}

.technique-explanation .technique-detail {
    margin-bottom: 6px;
    padding: 5px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius-sm);
    border-left: 2px solid var(--accent-primary);
}

.technique-explanation .technique-detail:last-child {
    margin-bottom: 0;
}

.technique-explanation .technique-detail-label {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.technique-explanation .technique-detail-label svg {
    width: 14px;
    height: 14px;
}

.technique-explanation .technique-detail-text {
    font-size: 16px;
    line-height: 1.4;
    color: var(--text-bright);
}

.technique-explanation .technique-detail.why-detail {
    border-left-color: var(--accent-primary);
}

.technique-explanation .technique-detail.how-detail {
    border-left-color: var(--accent-purple);
}

.technique-explanation .outcome-detail {
    padding: 8px;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 255, 136, 0.05));
    border-radius: var(--border-radius-sm);
    border-left: 2px solid var(--accent-secondary);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.1);
}

.technique-explanation .outcome-text {
    color: var(--accent-secondary);
    font-weight: 600;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

.technique-outcome {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
}

.outcome-blocked {
    background: rgba(255, 71, 87, 0.15);
    color: var(--status-blocked);
}

.outcome-detected {
    background: rgba(255, 184, 0, 0.15);
    color: var(--status-detected);
}

.outcome-quarantined {
    background: rgba(168, 85, 247, 0.15);
    color: var(--status-quarantined);
}

.outcome-evicted {
    background: rgba(255, 71, 87, 0.15);
    color: var(--status-evicted);
}

.outcome-rolled-back {
    background: rgba(0, 212, 255, 0.15);
    color: var(--status-rolled-back);
}

/* Blast Radius Meter */
.blast-radius-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: var(--space-md);
}

.blast-radius-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.blast-radius-header svg {
    width: 16px;
    height: 16px;
    color: var(--accent-danger);
}

.blast-meter {
    height: 14px;
    background: var(--bg-tertiary);
    border-radius: 7px;
    overflow: hidden;
    margin-bottom: var(--space-sm);
}

.blast-meter-fill {
    height: 100%;
    border-radius: 4px;
    transition: var(--transition-base);
}

.blast-meter-fill.low {
    width: 20%;
    background: linear-gradient(90deg, var(--accent-secondary), rgba(0, 255, 136, 0.7));
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

.blast-meter-fill.medium {
    width: 50%;
    background: linear-gradient(90deg, var(--accent-warning), rgba(255, 184, 0, 0.7));
    box-shadow: 0 0 8px rgba(255, 184, 0, 0.4);
}

.blast-meter-fill.high {
    width: 80%;
    background: linear-gradient(90deg, var(--accent-danger), rgba(255, 71, 87, 0.8));
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.5);
}

.blast-meter-fill.critical {
    width: 100%;
    background: linear-gradient(90deg, #ff2040, var(--accent-danger));
    animation: pulseDangerEnhanced 0.8s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(255, 71, 87, 0.6);
}

@keyframes pulseDangerEnhanced {
    0%, 100% { opacity: 1; box-shadow: 0 0 15px rgba(255, 71, 87, 0.6); }
    50% { opacity: 0.7; box-shadow: 0 0 25px rgba(255, 71, 87, 0.9), 0 0 40px rgba(255, 71, 87, 0.3); }
}

.blast-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* Team Lens */
.team-lens-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: var(--space-md);
}

.team-lens-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.team-lens-header svg {
    width: 16px;
    height: 16px;
    color: var(--accent-primary);
}

.team-lens-current {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
}

.team-lens-current .team-badge {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
}

.team-badge.app { background: rgba(59, 130, 246, 0.2); color: var(--team-app); }
.team-badge.ml { background: rgba(139, 92, 246, 0.2); color: var(--team-ml); }
.team-badge.platform { background: rgba(245, 158, 11, 0.2); color: var(--team-platform); }
.team-badge.sec { background: rgba(239, 68, 68, 0.2); color: var(--team-sec); }

/* Bottom Controls */
.scenario-controls {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
}

/* Timeline Stepper */
.timeline-stepper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.timeline-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.timeline-track {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
}

.timeline-step {
    flex: 1;
    height: 10px;
    background: var(--bg-tertiary);
    border-radius: 5px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.timeline-step.completed {
    background: var(--accent-secondary);
    box-shadow: 0 0 4px rgba(0, 255, 136, 0.3);
}

.timeline-step.current {
    background: var(--accent-primary);
    box-shadow: 0 0 12px var(--glow-cyan), 0 0 4px var(--glow-cyan);
    animation: stepPulse 1.5s ease-in-out infinite;
}

@keyframes stepPulse {
    0%, 100% { box-shadow: 0 0 12px var(--glow-cyan); }
    50% { box-shadow: 0 0 20px var(--glow-cyan), 0 0 6px var(--accent-primary); }
}

.timeline-step.has-intervention::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: var(--accent-warning);
    border-radius: 50%;
    margin: -8px auto 0;
    box-shadow: 0 0 6px var(--glow-yellow);
}

.step-info {
    min-width: 80px;
    text-align: right;
}

.step-counter {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Terminal */
.terminal-container {
    grid-column: 1 / -1;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    max-height: 200px;
}

.terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.terminal-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.terminal-title svg {
    width: 14px;
    height: 14px;
    color: var(--accent-secondary);
}

.terminal-filters {
    display: flex;
    gap: var(--space-sm);
}

.terminal-filter {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.terminal-filter:hover,
.terminal-filter.active {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.terminal-content {
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.8;
    overflow-y: auto;
    max-height: 180px;
}

.terminal-line {
    display: flex;
    gap: var(--space-sm);
    white-space: nowrap;
    animation: fadeIn 0.2s ease;
    padding: 1px 4px;
    border-left: 3px solid transparent;
    border-radius: 2px;
}

.terminal-line.log-error {
    border-left-color: var(--accent-danger);
    background: rgba(255, 71, 87, 0.06);
}

.terminal-line.log-warn {
    border-left-color: var(--accent-warning);
    background: rgba(255, 184, 0, 0.04);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.log-timestamp {
    color: var(--text-muted);
}

.log-level {
    min-width: 50px;
    font-weight: 600;
}

.log-level.info { color: var(--accent-primary); }
.log-level.warn { color: var(--accent-warning); }
.log-level.error { color: var(--accent-danger); }
.log-level.debug { color: var(--text-muted); }

.log-service {
    color: var(--accent-purple);
    min-width: 120px;
}

.log-message {
    color: var(--text-bright);
}

.log-technique {
    color: var(--accent-secondary);
    font-weight: 600;
}

/* ============================================
   Utility Classes
   ============================================ */

.hidden {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

.text-muted {
    color: var(--text-muted);
}

.text-success {
    color: var(--accent-secondary);
}

.text-danger {
    color: var(--accent-danger);
}

.text-warning {
    color: var(--accent-warning);
}

.mt-md {
    margin-top: var(--space-md);
}

.mb-md {
    margin-bottom: var(--space-md);
}

/* ============================================
   Responsive
   ============================================ */

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

    .right-panel {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

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

    .hero-visual {
        order: -1;
        height: 120px;
        width: 120px;
        margin: 0 auto;
        overflow: visible;
    }

    /* Scale rings to fit the smaller hero visual */
    .outer-ring { width: 120px; height: 120px; }
    .middle-ring { width: 86px; height: 86px; }
    .inner-ring  { width: 52px; height: 52px; }

    .battleground-grid {
        grid-template-columns: 1fr;
    }

    .header-left .tagline {
        display: none;
    }

    .right-panel {
        grid-template-columns: 1fr;
    }

    .footer-hotkeys {
        display: none;
    }
}

/* ============================================
   Presenter Mode Specific
   ============================================ */

.presenter-mode .main-header {
    padding: var(--space-lg) var(--space-xl);
}

.presenter-mode .logo-icon {
    width: 40px;
    height: 40px;
}

.presenter-mode .logo-text {
    font-size: var(--font-size-2xl);
}

.presenter-mode .hero-title {
    font-size: 56px;
}

.presenter-mode .battleground-card {
    padding: var(--space-xl);
}

.presenter-mode .card-title {
    font-size: var(--font-size-2xl);
}

.presenter-mode .terminal-content {
    font-size: var(--font-size-sm);
}

.presenter-mode .arch-node {
    padding: var(--space-lg);
}

.presenter-mode .arch-node-label {
    font-size: var(--font-size-sm);
}

/* ============================================
   Data Flow Particle Animations
   ============================================ */

/* Particle base styles */
.data-particle {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    offset-rotate: 0deg;
}

.data-particle.attack {
    background: var(--accent-danger);
    box-shadow: 0 0 8px var(--accent-danger), 0 0 16px var(--glow-red);
}

.data-particle.defense {
    background: var(--accent-secondary);
    box-shadow: 0 0 8px var(--accent-secondary), 0 0 16px var(--glow-green);
}

.data-particle.data {
    background: var(--accent-primary);
    box-shadow: 0 0 8px var(--accent-primary), 0 0 16px var(--glow-cyan);
}

/* Particle flow animation using offset-path */
@keyframes dataParticleFlow {
    0% {
        offset-distance: 0%;
        transform: scale(0.3);
        opacity: 0;
    }
    15% {
        opacity: 1;
        transform: scale(1);
    }
    85% {
        opacity: 0.9;
        transform: scale(0.9);
    }
    100% {
        offset-distance: 100%;
        opacity: 0;
        transform: scale(0.2);
    }
}

/* Animated connection lines */
.connector.animated {
    stroke-dasharray: 8 4;
}

.connector.animated.attack {
    stroke: var(--accent-danger);
    animation: flowAttackLine 0.8s linear infinite;
}

.connector.animated.defense {
    stroke: var(--accent-secondary);
    animation: flowDefenseLine 0.8s linear infinite;
}

.connector.animated.data {
    stroke: var(--accent-primary);
    animation: flowDataLine 0.8s linear infinite;
}

@keyframes flowAttackLine {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -12; }
}

@keyframes flowDefenseLine {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: 12; }
}

@keyframes flowDataLine {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: 12; }
}

/* Node glow animations */
@keyframes nodeGlowPulse {
    0%, 100% {
        box-shadow: 0 0 20px var(--glow-color, var(--glow-cyan));
    }
    50% {
        box-shadow: 0 0 35px var(--glow-color, var(--glow-cyan)), 0 0 50px var(--glow-color, var(--glow-cyan));
    }
}

.arch-node.glowing {
    animation: nodeGlowPulse 1.5s ease-in-out infinite;
}

.arch-node.active.attack-node {
    --glow-color: var(--glow-red);
    border-color: var(--accent-danger);
}

.arch-node.active.defense-node {
    --glow-color: var(--glow-green);
    border-color: var(--accent-secondary);
}

/* Scanning effect for detection nodes */
@keyframes scanLine {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.arch-node.scanning::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.3), transparent);
    animation: scanLine 1.5s ease-in-out infinite;
    overflow: hidden;
    border-radius: inherit;
}

/* Shake animation for blocked actions */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.arch-node.blocked {
    animation: shake 0.5s ease-in-out;
    border-color: var(--accent-danger);
}

/* Confetti/success burst */
@keyframes burstParticle {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--x, 50px), var(--y, -50px)) scale(0);
        opacity: 0;
    }
}

.success-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-secondary);
    animation: burstParticle 0.8s ease-out forwards;
}

/* Data stream continuous flow */
@keyframes streamPulse {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}

.data-stream {
    stroke: var(--accent-primary);
    stroke-width: 2;
    stroke-dasharray: 4 8;
    animation: flowDataLine 1s linear infinite, streamPulse 2s ease-in-out infinite;
}

/* Terminal typing cursor */
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.terminal-cursor {
    display: inline-block;
    width: 8px;
    height: 16px;
    background: var(--accent-secondary);
    animation: blink 1s step-end infinite;
    margin-left: 2px;
    vertical-align: middle;
}

/* Technique card entrance animation */
@keyframes techniqueSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.technique-panel-content.animate-in {
    animation: techniqueSlideIn 0.3s ease-out;
}

/* Blast radius meter animation */
@keyframes blastExpand {
    0% { width: 0; }
}

.blast-meter-fill.animating {
    animation: blastExpand 0.5s ease-out;
}

/* Status badge pulse */
@keyframes statusPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 currentColor;
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 4px transparent;
    }
}

.technique-outcome {
    animation: statusPulse 2s ease-in-out infinite;
}

/* Hero section floating animation */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.defense-core {
    animation: float 3s ease-in-out infinite;
}

/* Card hover lift effect */
.battleground-card {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.battleground-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(0, 212, 255, 0.03) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: inherit;
}

.battleground-card:hover::before {
    opacity: 1;
}

/* Scanline overlay effect */
.cyber-scanlines::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.1) 2px,
        rgba(0, 0, 0, 0.1) 4px
    );
    pointer-events: none;
    opacity: 0.3;
}

/* Neon text glow */
.neon-text {
    text-shadow:
        0 0 5px currentColor,
        0 0 10px currentColor,
        0 0 20px currentColor,
        0 0 40px currentColor;
}

/* Loading spinner for async operations */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

/* Comparison panel animations */
@keyframes compareSlideLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes compareSlideRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.comparison-off {
    animation: compareSlideLeft 0.5s ease-out;
}

.comparison-on {
    animation: compareSlideRight 0.5s ease-out 0.2s both;
}

/* Summary panel entrance */
@keyframes summaryFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.after-action-summary {
    animation: summaryFadeIn 0.5s ease-out;
}

/* ============================================
   Additional Visual Polish
   ============================================ */

/* Glass morphism panels */
.glass-panel {
    background: rgba(21, 28, 37, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Gradient borders */
.gradient-border {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary), var(--accent-purple));
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gradient-border:hover::before {
    opacity: 0.5;
}

/* Tooltip */
.tooltip {
    position: relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: var(--z-dropdown);
}

.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

/* Focus styles for accessibility */
:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Selection color */
::selection {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

/* ============================================
   Scenario Page - Three Panel Layout
   ============================================ */

.scenario-page {
    --header-height: 56px;
    --footer-height: 72px;
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.scenario-page .landing-main {
    display: none;
}

.scenario-main {
    display: grid;
    grid-template-columns: minmax(360px, 1.4fr) minmax(200px, 0.7fr) minmax(240px, 0.9fr);
    gap: 12px;
    flex: 1;
    min-height: 0;
    margin-bottom: var(--footer-height);
    padding: 8px 16px;
    overflow: hidden;
    /* No transition:all — new-layout handles its own column transition */
}

/* NEW LAYOUT: Step title bar on top, 2 columns below (arch 50%+, content panel) */
.scenario-main.new-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "title title"
        "arch panels";
    gap: 8px;
    padding: 4px 12px;
    transition: grid-template-columns 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When defense is showing, give panels slightly more space */
.scenario-main.new-layout.defense-expanded {
    grid-template-columns: 0.85fr 1.15fr;
}

/* When defense panel is showing, slightly compact nodes */
.defense-expanded .arch-node {
    padding: 2px 3px;
    min-width: 40px;
    max-width: 68px;
}
.defense-expanded .arch-node .node-icon {
    width: 18px;
    height: 18px;
    margin-bottom: 1px;
}
.defense-expanded .arch-node .node-icon svg {
    width: 12px;
    height: 12px;
}

/* Step Title Bar - compact single line */
.step-title-bar {
    grid-area: title;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px;
    background: linear-gradient(135deg, var(--bg-secondary), rgba(0, 255, 136, 0.03));
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(0, 255, 136, 0.15);
}

.step-title-bar .step-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.step-title-bar .step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 15px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: var(--bg-primary);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

.step-title-bar .step-team-badge {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: var(--border-radius-sm);
    letter-spacing: 0.5px;
}

.step-title-bar .step-team-badge.sec {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.15));
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.step-title-bar .step-team-badge.ml {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(168, 85, 247, 0.15));
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.3);
}
.step-title-bar .step-team-badge.app {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.15));
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.step-title-bar .step-team-badge.infra {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.15));
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.step-title-bar .step-team-badge.attacker {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.35), rgba(239, 68, 68, 0.2));
    color: #ff6b6b;
    border: 1px solid rgba(239, 68, 68, 0.4);
    animation: attackerPulse 2s infinite;
}

@keyframes attackerPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 12px rgba(239, 68, 68, 0.6); }
}

.step-title-bar .step-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-bright);
    margin: 0;
    flex-shrink: 0;
}

.step-title-bar .step-description {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 12px;
    border-left: 1px solid var(--border-color);
    opacity: 0.85;
}

/* Grid areas for new layout */
.scenario-main.new-layout .architecture-panel { grid-area: arch; overflow: hidden; min-height: 0; padding-bottom: 8px; }
.scenario-main.new-layout .dual-panel-container { grid-area: panels; overflow: hidden; min-height: 0; }

/* ============================================
   Dual Panel Layout (Story + Defense stacked)
   ============================================ */

/* Horizontal dual-panel container */
.dual-panel-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

/* Shared panel base styles */
.story-standalone-panel,
.defense-standalone-panel {
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    min-height: 0;
    height: 100%;
}

/* Story panel: full width by default, shrinks when defense slides in */
.story-standalone-panel {
    flex: 1 1 100%;
    min-width: 0;
    transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When defense is active, story shares space equally */
.dual-panel-container.has-defense .story-standalone-panel {
    flex: 1 1 0;
}

/* Defense panel: collapsed (zero width), slides in from right */
.defense-standalone-panel {
    flex: 0 0 0%;
    min-width: 0;
    opacity: 0;
    transform: translateX(20px);
    transition:
        flex 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* Defense panel expanded: slides in and takes equal space */
.defense-standalone-panel.defense-active {
    flex: 1 1 0;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* Panel headers */
.standalone-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.standalone-panel-header svg {
    width: 18px;
    height: 18px;
}

/* Panel body */
.standalone-panel-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    min-height: 0;
}

/* Story Panel */
.story-standalone-panel {
    background: linear-gradient(180deg, var(--bg-card), rgba(255, 184, 0, 0.03));
    border: 1px solid rgba(255, 184, 0, 0.15);
}

.story-standalone-panel .standalone-panel-header {
    color: var(--accent-warning);
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.1), rgba(255, 184, 0, 0.02));
    border-bottom: 2px solid rgba(255, 184, 0, 0.2);
}

.story-standalone-panel .standalone-panel-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Defense Panel */
.defense-standalone-panel {
    background: linear-gradient(180deg, var(--bg-card), rgba(0, 255, 136, 0.03));
    border: 1px solid rgba(0, 255, 136, 0.15);
}

.defense-standalone-panel .standalone-panel-header {
    color: var(--accent-secondary);
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 255, 136, 0.02));
    border-bottom: 2px solid rgba(0, 255, 136, 0.2);
}

/* Text styling for standalone panels */
.standalone-panel-body .technique-name,
.standalone-panel-body .narrative-header {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-bright);
}

.standalone-panel-body .technique-rationale,
.standalone-panel-body .business-impact-text {
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-primary);
}

.standalone-panel-body .narrative-text {
    font-size: 15px;
    line-height: 1.45;
    color: #ffffff;
}

.standalone-panel-body p {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
}

/* Technique panel content inside defense panel */
.defense-standalone-panel .technique-panel-content {
    padding: 0;
}

/* Technique outcome positioning inside standalone panel */
.defense-standalone-panel .technique-outcome {
    margin-left: 4px;
    margin-top: 8px;
    margin-bottom: 12px;
}

/* Legacy tab classes - keep for backward compat with hidden old panels */
.content-tabs-panel { display: none; }

/* ============================================
   Final Summary Panel - Clean Design
   ============================================ */
/* Final Summary Panel - Full width layout for summary step */
.final-summary-panel {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    overflow-y: auto;
    background: linear-gradient(180deg, var(--bg-card), rgba(0, 212, 255, 0.02));
    border: 1px solid rgba(0, 212, 255, 0.12);
    border-radius: var(--border-radius-lg);
}

.final-summary-panel.hidden {
    display: none !important;
}

/* Comparison Cards - Side by side layout */
.summary-comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 10px;
    flex-shrink: 0;
}

.comparison-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: var(--text-muted);
    padding: 0 8px;
}

.comparison-card {
    flex: 1;
    padding: 10px 12px;
    border-radius: var(--border-radius-lg);
    position: relative;
}

.comparison-card.off {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.1), rgba(255, 71, 87, 0.02));
    border: 1px solid rgba(255, 71, 87, 0.3);
}

.comparison-card.on {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 255, 136, 0.02));
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.comparison-badge {
    position: absolute;
    top: -8px;
    right: 12px;
    padding: 2px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
}

.comparison-badge.critical {
    background: var(--accent-danger);
    color: white;
}

.comparison-badge.protected {
    background: var(--accent-secondary);
    color: var(--bg-primary);
}

.comparison-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.comparison-card.off h3 {
    color: var(--accent-danger);
}

.comparison-card.on h3 {
    color: var(--accent-secondary);
}

.comparison-card h3 svg {
    width: 20px;
    height: 20px;
}

.comparison-vs.old-style {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}

.summary-comparison .comparison-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.summary-comparison .comparison-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 16px !important;
    line-height: 1.45 !important;
    margin-bottom: 6px;
    color: var(--text-bright) !important;
}

.summary-comparison .comparison-list li svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 3px;
}

.comparison-card.off .comparison-list li svg {
    color: var(--accent-danger);
}

.comparison-card.on .comparison-list li svg {
    color: var(--accent-secondary);
}

/* Summary Tabs Panel - Production quality with large clear text */
.summary-tabs-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--bg-secondary), rgba(0, 212, 255, 0.03));
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(0, 212, 255, 0.15);
    overflow: hidden;
    min-height: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.summary-tabs-header {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(0, 212, 255, 0.15);
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.05), transparent);
    flex-shrink: 0;
}

.summary-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    background: transparent;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.25s ease;
    border-bottom: 3px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-tab-btn:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
}

.summary-tab-btn.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
    background: rgba(0, 212, 255, 0.08);
}

.summary-tab-btn svg,
.summary-tab-btn i {
    width: 16px;
    height: 16px;
}

.summary-tabs-body {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.summary-tab-content {
    position: absolute;
    inset: 0;
    padding: 20px 24px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.summary-tab-content.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Summary - What Happened tab */
.summary-tab-content p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-bright);
    margin: 0;
    font-weight: 400;
}

/* Summary - Defenses Engaged tab - Grid layout */
.summary-tab-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.summary-tab-content ul li {
    font-size: 16px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.12), rgba(0, 212, 255, 0.08));
    border: 1px solid rgba(0, 255, 136, 0.25);
    border-radius: 5px;
    color: var(--accent-secondary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
}

.summary-tab-content ul li::before {
    content: '✓';
    font-weight: 600;
    color: var(--accent-secondary);
    font-size: 16px;
    flex-shrink: 0;
}

/* Summary - Team Takeaways tab - Grid layout */
.summary-tab-content .team-takeaways {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.summary-tab-content .team-takeaway {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(0, 180, 216, 0.08), rgba(0, 255, 136, 0.04));
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(0, 180, 216, 0.15);
}

.summary-tab-content .team-badge {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    flex-shrink: 0;
    letter-spacing: 0.3px;
    width: fit-content;
}

.summary-tab-content .team-takeaway p {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: var(--text-bright) !important;
    margin: 0;
}

/* Legacy summary-details for backwards compat */
.summary-details {
    display: none;
}

.summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: rgba(0, 212, 255, 0.1);
    border-radius: var(--border-radius-sm);
    color: var(--accent-primary);
}

.summary-icon.success {
    background: rgba(0, 255, 136, 0.1);
    color: var(--accent-secondary);
}

.summary-icon.warning {
    background: rgba(255, 184, 0, 0.1);
    color: var(--accent-warning);
}

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

.summary-text {
    flex: 1;
    min-width: 0;
}

.summary-text strong {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.summary-text p {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-bright);
    margin: 0;
}

.summary-text ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.summary-text ul li {
    font-size: 11px;
    color: var(--text-bright);
    padding: 2px 0;
}

.summary-text ul li::before {
    content: '✓ ';
    color: var(--accent-secondary);
}

/* Team Takeaways in Summary */
.summary-details .team-takeaways {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.summary-details .team-takeaway {
    flex: 1 1 200px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius-sm);
}

.summary-details .team-takeaway .team-badge {
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 700;
    border-radius: 3px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.summary-details .team-takeaway p {
    font-size: 11px;
    line-height: 1.3;
    margin: 0;
}

/* Final step layout - hide content tabs, show full-width summary */
.scenario-main.new-layout.final-step-layout {
    grid-template-areas:
        "summary summary";
    grid-template-rows: 1fr;
}

.scenario-main.new-layout.final-step-layout .step-title-bar {
    display: none !important;
}

.scenario-main.new-layout.final-step-layout .content-tabs-panel,
.scenario-main.new-layout.final-step-layout .dual-panel-container {
    display: none !important;
}

.scenario-main.new-layout.final-step-layout .architecture-panel {
    display: none !important;
}

.scenario-main.new-layout.final-step-layout .final-summary-panel {
    grid-area: summary;
    display: flex !important;
}

/* Defense Panel (right side) - Enhanced for RSA */
.defense-panel {
    background: linear-gradient(180deg, var(--bg-secondary), rgba(0, 255, 136, 0.02));
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(0, 255, 136, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.defense-panel .panel-header.compact {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 212, 255, 0.05));
    border-bottom: 1px solid rgba(0, 255, 136, 0.2);
}

.defense-panel .panel-header.compact h2 {
    color: var(--accent-secondary);
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.defense-panel .technique-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: none;
    background: transparent;
}

.defense-panel .technique-panel-content {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
}

/* Compact panel headers */
.panel-header.compact {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
}

.panel-header.compact h2 {
    font-size: 13px;
    gap: 6px;
}

.panel-header.compact h2 svg {
    width: 14px;
    height: 14px;
}

/* Final Step Container */
.final-step-container {
    grid-column: 2 / 4;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    overflow: hidden;
}

.final-step-container.hidden {
    display: none;
}

.scenario-main.new-layout.final-step-layout .architecture-panel {
    grid-column: 1;
    grid-row: 2;
}

.scenario-main.new-layout.final-step-layout .final-step-container {
    display: grid;
}

/* Final step panels styling - Enhanced */
.final-step-container .comparison-panel,
.final-step-container .summary-panel {
    background: linear-gradient(180deg, var(--bg-secondary), rgba(0, 212, 255, 0.02));
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(0, 212, 255, 0.15);
    padding: 12px;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.final-step-container .comparison-panel {
    display: flex;
    flex-direction: column;
}

.final-step-container .comparison-grid {
    display: flex;
    gap: 8px;
    flex: 1;
}

.final-step-container .comparison-side {
    flex: 1;
    padding: 10px;
    border-radius: var(--border-radius-md);
}

.final-step-container .comparison-header h3 {
    font-size: 16px;
    margin-bottom: 10px;
}

.final-step-container .comparison-list li {
    font-size: 16px;
    padding: 5px 0;
}

.final-step-container .summary-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.final-step-container .summary-section {
    padding: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
}

.final-step-container .summary-section h3 {
    font-size: 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.final-step-container .summary-section h3 svg {
    width: 16px;
    height: 16px;
}

.final-step-container .summary-section p,
.final-step-container .summary-section li {
    font-size: 16px;
    line-height: 1.45;
}

.final-step-container .team-takeaway {
    margin-bottom: 8px;
}

.final-step-container .team-badge {
    font-size: 12px;
    padding: 4px 10px;
}

/* Smooth transitions for panel visibility changes */
.scenario-main > section,
.scenario-main .comparison-panel,
.scenario-main .summary-panel {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Back Link */
.back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-md);
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.back-link:hover {
    background: var(--bg-secondary);
    color: var(--accent-primary);
}

.back-link svg {
    width: 20px;
    height: 20px;
}

/* Scenario Badge */
.scenario-badge {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.scenario-badge.supply-chain {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

.scenario-badge.rag {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.scenario-badge.agent {
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #8b5cf6;
}

.scenario-badge.asset {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.badge-number {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    opacity: 0.7;
}

/* Architecture Panel - Enhanced for RSA */
.architecture-panel {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--bg-card), rgba(0, 212, 255, 0.02));
    border: 1px solid rgba(0, 212, 255, 0.12);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.panel-header h2 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.panel-header h2 svg {
    width: 14px;
    height: 14px;
    color: var(--accent-primary);
}

.scenario-hook {
    font-size: 11px;
    color: var(--accent-primary);
    font-style: italic;
}

/* Architecture panel header — match standalone panel header style */
.architecture-panel .panel-header {
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 212, 255, 0.02));
    border-bottom: 2px solid rgba(0, 212, 255, 0.2);
}

.architecture-panel .panel-header h2 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--accent-primary);
    gap: 8px;
}

.architecture-panel .panel-header h2 svg {
    width: 18px;
    height: 18px;
}

.architecture-panel .scenario-hook {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.architecture-container {
    flex: 1;
    position: relative;
    min-height: 200px;
    padding: 12px;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(0, 212, 255, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(139, 92, 246, 0.03) 0%, transparent 50%),
        linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

/* Ensure SVG and nodes share the same inner container */
.architecture-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.architecture-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.architecture-nodes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Architecture Node Styles - Compact Premium Design */
.arch-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3px 5px;
    background: linear-gradient(145deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    min-width: 48px;
    max-width: 78px;
    text-align: center;
    overflow: hidden;
    z-index: 2;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.25),
        0 1px 2px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.arch-node:hover {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.arch-node .node-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    background: rgba(0, 212, 255, 0.1);
    border-radius: 5px;
    transition: all 0.3s ease;
}

.arch-node .node-icon svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.arch-node .node-label {
    font-size: 10px;
    font-weight: 700;
    white-space: pre-line;
    line-height: 1.15;
    color: var(--text-primary);
    letter-spacing: 0.2px;
}

.arch-node .node-pulse {
    position: absolute;
    inset: -4px;
    border: 1px solid transparent;
    border-radius: 10px;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

/* Node States - Enhanced for Stage Visibility */
.arch-node.active {
    border-color: var(--accent-primary);
    border-width: 2px;
    background: linear-gradient(145deg, rgba(0, 212, 255, 0.15) 0%, var(--bg-secondary) 100%);
    box-shadow:
        0 0 20px rgba(0, 212, 255, 0.45),
        0 0 40px rgba(0, 212, 255, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(0, 212, 255, 0.25);
    transform: translate(-50%, -50%) scale(1.08);
}

.arch-node.active .node-icon {
    background: rgba(0, 212, 255, 0.2);
}

.arch-node.active .node-icon svg {
    color: var(--accent-primary);
    filter: drop-shadow(0 0 4px var(--glow-cyan));
}

.arch-node.active .node-label {
    color: var(--text-bright);
}

.arch-node.active .node-pulse {
    border-color: var(--accent-primary);
    opacity: 1;
    animation: nodePulseRing 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.arch-node.attack-active {
    border-color: var(--accent-danger);
    border-width: 2px;
    background: linear-gradient(145deg, rgba(255, 71, 87, 0.2) 0%, var(--bg-secondary) 100%);
    box-shadow:
        0 0 22px rgba(255, 71, 87, 0.55),
        0 0 45px rgba(255, 71, 87, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 71, 87, 0.25);
    transform: translate(-50%, -50%) scale(1.08);
    animation: attackNodePulse 0.6s ease-in-out infinite;
}

.arch-node.attack-active .node-icon {
    background: rgba(255, 71, 87, 0.25);
}

.arch-node.attack-active .node-icon svg {
    color: var(--accent-danger);
    filter: drop-shadow(0 0 6px var(--glow-red));
}

.arch-node.attack-active .node-label {
    color: var(--accent-danger);
}

.arch-node.defense-active {
    border-color: var(--accent-secondary);
    border-width: 2px;
    background: linear-gradient(145deg, rgba(0, 255, 136, 0.15) 0%, var(--bg-secondary) 100%);
    box-shadow:
        0 0 20px rgba(0, 255, 136, 0.45),
        0 0 40px rgba(0, 255, 136, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(0, 255, 136, 0.25);
    transform: translate(-50%, -50%) scale(1.08);
}

.arch-node.defense-active .node-icon {
    background: rgba(0, 255, 136, 0.2);
}

.arch-node.defense-active .node-icon svg {
    color: var(--accent-secondary);
    filter: drop-shadow(0 0 4px var(--glow-green));
}

.arch-node.defense-active .node-label {
    color: var(--accent-secondary);
}

.arch-node.danger-node {
    border-color: rgba(255, 71, 87, 0.6);
    background: linear-gradient(145deg, rgba(255, 71, 87, 0.15) 0%, rgba(255, 71, 87, 0.05) 100%);
    animation: dangerPulse 3s ease-in-out infinite;
}

.arch-node.danger-node .node-icon {
    background: rgba(255, 71, 87, 0.2);
}

.arch-node.danger-node .node-icon svg {
    color: var(--accent-danger);
}

.arch-node.danger-node .node-label {
    color: var(--accent-danger);
}

@keyframes nodePulseRing {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.15);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes attackNodePulse {
    0%, 100% {
        box-shadow:
            0 0 30px rgba(255, 71, 87, 0.5),
            0 0 60px rgba(255, 71, 87, 0.25),
            0 4px 16px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow:
            0 0 40px rgba(255, 71, 87, 0.7),
            0 0 80px rgba(255, 71, 87, 0.35),
            0 4px 16px rgba(0, 0, 0, 0.3);
    }
}

@keyframes dangerPulse {
    0%, 100% {
        border-color: rgba(255, 71, 87, 0.4);
        box-shadow: 0 0 10px rgba(255, 71, 87, 0.2);
    }
    50% {
        border-color: rgba(255, 71, 87, 0.7);
        box-shadow: 0 0 20px rgba(255, 71, 87, 0.4);
    }
}

/* Connection Lines - Premium Design */
.connection-line {
    fill: none;
    stroke: rgba(100, 116, 139, 0.4);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.connection-line.active {
    stroke: var(--accent-primary);
    stroke-width: 3;
    filter: drop-shadow(0 0 6px var(--glow-cyan)) drop-shadow(0 0 12px rgba(0, 212, 255, 0.3));
    animation: activeLineGlow 2s ease-in-out infinite;
}

.connection-line.attack {
    stroke: var(--accent-danger);
    stroke-width: 3;
    stroke-dasharray: 12 6;
    animation: flowAttackLine 0.6s linear infinite, attackLineGlow 1s ease-in-out infinite;
    filter: drop-shadow(0 0 8px var(--glow-red)) drop-shadow(0 0 16px rgba(255, 71, 87, 0.4));
}

.connection-line.defense {
    stroke: var(--accent-secondary);
    stroke-width: 3;
    stroke-dasharray: 12 6;
    animation: flowDefenseLine 0.6s linear infinite, defenseLineGlow 2s ease-in-out infinite;
    filter: drop-shadow(0 0 6px var(--glow-green)) drop-shadow(0 0 12px rgba(0, 255, 136, 0.3));
}

.connection-line.connection-attack {
    stroke: rgba(255, 71, 87, 0.35);
    stroke-width: 2;
    stroke-dasharray: 8 6;
    animation: dangerLinePulse 2s ease-in-out infinite;
}

.connection-line.connection-normal {
    stroke: rgba(100, 116, 139, 0.35);
    stroke-width: 1.5;
}

@keyframes activeLineGlow {
    0%, 100% {
        filter: drop-shadow(0 0 6px var(--glow-cyan)) drop-shadow(0 0 12px rgba(0, 212, 255, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 10px var(--glow-cyan)) drop-shadow(0 0 20px rgba(0, 212, 255, 0.5));
    }
}

@keyframes attackLineGlow {
    0%, 100% {
        filter: drop-shadow(0 0 8px var(--glow-red)) drop-shadow(0 0 16px rgba(255, 71, 87, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 12px var(--glow-red)) drop-shadow(0 0 24px rgba(255, 71, 87, 0.6));
    }
}

@keyframes defenseLineGlow {
    0%, 100% {
        filter: drop-shadow(0 0 6px var(--glow-green)) drop-shadow(0 0 12px rgba(0, 255, 136, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 10px var(--glow-green)) drop-shadow(0 0 20px rgba(0, 255, 136, 0.5));
    }
}

@keyframes dangerLinePulse {
    0%, 100% {
        stroke: rgba(255, 71, 87, 0.25);
    }
    50% {
        stroke: rgba(255, 71, 87, 0.5);
    }
}

/* Flow Particles (SVG) - Premium with Rich Effects */
.flow-particle {
    transition: none;
    animation: particlePulse 0.6s ease-in-out infinite;
}

@keyframes particlePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.flow-particle.data {
    fill: var(--accent-primary);
    filter: drop-shadow(0 0 8px var(--glow-cyan))
            drop-shadow(0 0 18px rgba(0, 212, 255, 0.7))
            drop-shadow(0 0 30px rgba(0, 212, 255, 0.35));
}

.flow-particle.attack {
    fill: var(--accent-danger);
    filter: drop-shadow(0 0 10px var(--glow-red))
            drop-shadow(0 0 22px rgba(255, 71, 87, 0.8))
            drop-shadow(0 0 35px rgba(255, 71, 87, 0.45));
    animation: attackPulse 0.35s ease-in-out infinite;
}

@keyframes attackPulse {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 10px var(--glow-red)) drop-shadow(0 0 22px rgba(255, 71, 87, 0.8)); }
    50% { opacity: 0.85; filter: drop-shadow(0 0 16px var(--glow-red)) drop-shadow(0 0 32px rgba(255, 71, 87, 1)); }
}

.flow-particle.defense {
    fill: var(--accent-secondary);
    filter: drop-shadow(0 0 10px var(--glow-green))
            drop-shadow(0 0 22px rgba(0, 255, 136, 0.8))
            drop-shadow(0 0 35px rgba(0, 255, 136, 0.45));
}

/* Trail particles - fading glow trails */
.flow-particle.trail {
    opacity: 0.6;
}

.flow-particle.trail.data {
    fill: rgba(0, 212, 255, 0.7);
    filter: drop-shadow(0 0 6px var(--glow-cyan))
            drop-shadow(0 0 12px rgba(0, 212, 255, 0.4));
}

.flow-particle.trail.attack {
    fill: rgba(255, 71, 87, 0.7);
    filter: drop-shadow(0 0 6px var(--glow-red))
            drop-shadow(0 0 12px rgba(255, 71, 87, 0.4));
}

.flow-particle.trail.defense {
    fill: rgba(0, 255, 136, 0.7);
    filter: drop-shadow(0 0 6px var(--glow-green))
            drop-shadow(0 0 12px rgba(0, 255, 136, 0.4));
}

/* Connection line active state enhancement */
.connection-line.active {
    stroke-dasharray: 10, 5;
    stroke-width: 2.5;
    animation: flowDash 0.8s linear infinite;
    filter: drop-shadow(0 0 3px rgba(0, 212, 255, 0.4));
}

@keyframes flowDash {
    0% { stroke-dashoffset: 30; }
    100% { stroke-dashoffset: 0; }
}

.connection-line.active.attack {
    stroke-dasharray: 8, 4;
    stroke-width: 2.5;
    animation: flowDash 0.4s linear infinite;
    filter: drop-shadow(0 0 4px rgba(255, 71, 87, 0.5));
}

.connection-line.active.defense {
    stroke-width: 2.5;
    filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.5));
}

/* Blocked connection (dimmed with red X) */
.connection-line.blocked {
    stroke: var(--accent-danger);
    stroke-width: 2;
    stroke-dasharray: 6 4;
    opacity: 0.4;
    animation: none;
    filter: none;
}

/* Blast Radius Panel (within architecture) */
.blast-radius-panel {
    display: none;
}

.blast-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.blast-header svg {
    width: 16px;
    height: 16px;
    color: var(--accent-danger);
}

.blast-meter {
    margin-bottom: var(--space-sm);
}

.blast-meter-track {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--space-xs);
}

.blast-meter-labels {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Content Panel */
.content-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden; /* No scrolling - content must fit */
    min-height: 0;
}

.step-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    flex-shrink: 0;
}

.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--accent-primary);
    color: var(--bg-primary);
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
    flex-shrink: 0;
}

.step-team-badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    text-transform: uppercase;
}

.step-team-badge.app { background: rgba(59, 130, 246, 0.2); color: var(--team-app); }
.step-team-badge.ml { background: rgba(139, 92, 246, 0.2); color: var(--team-ml); }
.step-team-badge.platform { background: rgba(245, 158, 11, 0.2); color: var(--team-platform); }
.step-team-badge.sec { background: rgba(239, 68, 68, 0.2); color: var(--team-sec); }
.step-team-badge.all { background: rgba(0, 212, 255, 0.2); color: var(--accent-primary); }

.step-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.step-content {
    padding: 6px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    flex-shrink: 0;
}

.step-description {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Technique Panel (in content area) - Compact */
.content-panel .technique-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.technique-panel-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 600;
}

.technique-panel-header svg {
    width: 11px;
    height: 11px;
    color: var(--accent-warning);
}

/* Technique panel content inside tabs - scrollable */
.tab-content .technique-panel-content {
    padding: 0 0 80px 0;
    flex: 0 0 auto;
}

/* Outcome tag positioning inside tabs */
.tab-content .technique-outcome {
    margin-left: 4px;
    margin-top: 8px;
    margin-bottom: 40px;
}

.technique-strategies {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--border-color);
}

.technique-strategies strong {
    font-size: 10px;
    color: var(--text-secondary);
}

.technique-strategies ul {
    margin-top: 3px;
    padding-left: 14px;
}

.technique-strategies li {
    font-size: 10px;
    color: var(--text-secondary);
    margin-bottom: 1px;
    line-height: 1.25;
}

/* Comparison Panel - Ultra-compact stacked layout */
.comparison-panel {
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
}

.comparison-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.comparison-side {
    padding: 6px 8px;
    border-radius: 6px;
}

.comparison-side.off {
    background: rgba(255, 71, 87, 0.08);
    border: 1px solid rgba(255, 71, 87, 0.2);
}

.comparison-side.on {
    background: rgba(0, 255, 136, 0.08);
    border: 1px solid rgba(0, 255, 136, 0.2);
}

.comparison-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.comparison-header svg {
    width: 14px;
    height: 14px;
}

.comparison-side.off .comparison-header svg {
    color: var(--accent-danger);
}

.comparison-side.on .comparison-header svg {
    color: var(--accent-secondary);
}

.comparison-header h3 {
    font-size: 12px;
    font-weight: 600;
}

.comparison-list {
    list-style: none;
    margin-bottom: 4px;
}

.comparison-list li {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 10px;
    color: var(--text-secondary);
    margin-bottom: 3px;
    line-height: 1.25;
}

.comparison-list li svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    margin-top: 1px;
}

.comparison-side.off .comparison-list svg {
    color: var(--accent-danger);
}

.comparison-side.on .comparison-list svg {
    color: var(--accent-secondary);
}

.comparison-severity {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.comparison-severity.critical {
    background: rgba(255, 71, 87, 0.2);
    color: var(--accent-danger);
}

.comparison-severity.low {
    background: rgba(0, 255, 136, 0.2);
    color: var(--accent-secondary);
}

.comparison-divider {
    display: none; /* Hidden in stacked layout */
}

/* Summary Panel */
.summary-panel {
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.summary-section {
    margin-bottom: 6px;
}

.summary-section:last-child {
    margin-bottom: 0;
}

.summary-section h3 {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--accent-primary);
}

.summary-section h3 svg {
    width: 11px;
    height: 11px;
}

.summary-section p {
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1.3;
}

.summary-section ul {
    list-style: none;
}

.summary-section ul li {
    position: relative;
    padding-left: 8px;
    font-size: 10px;
    color: var(--text-secondary);
    margin-bottom: 1px;
    line-height: 1.25;
}

.summary-section ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 4px;
    height: 4px;
    background: var(--accent-secondary);
    border-radius: 50%;
}

.team-takeaways {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.team-takeaway {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: 4px;
}

.team-takeaway .team-badge {
    flex-shrink: 0;
}

.team-takeaway p {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.3;
}

/* ============================================
   Final Step Layout - Executive Impact Summary
   Compact single-screen layout for presentations
   ============================================ */

/* Hide architecture and story panels on final step */
.final-step-layout .architecture-panel,
.final-step-layout .story-panel {
    display: none !important;
}

/* Expand content panel to full width - stacked layout */
.final-step-layout .content-panel {
    grid-column: 1 / -1 !important;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 !important;
    height: 100%;
    overflow: hidden;
}

.final-step-layout .content-panel.final-panels-visible {
    display: flex;
    flex-direction: column;
}

/* Final step header - minimal */
.final-step-layout .step-header {
    text-align: left;
    margin-bottom: 0;
    padding: 6px 12px;
    border-bottom: none;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.08), rgba(0, 180, 216, 0.05));
    border-radius: 6px;
    border: 1px solid rgba(0, 255, 136, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.final-step-layout .step-indicator {
    margin-bottom: 0;
}

.final-step-layout .step-indicator .step-number {
    width: 28px;
    height: 28px;
    font-size: 13px;
}

.final-step-layout .step-title {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0;
}

.final-step-layout .step-description {
    display: none;
}

/* Animation */
@keyframes finalSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.final-step-layout .comparison-panel,
.final-step-layout .summary-panel {
    animation: finalSlideIn 0.25s ease-out forwards;
}

/* Comparison Panel - Top, compact */
.final-step-layout .comparison-panel {
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    flex-shrink: 0;
}

.final-step-layout .comparison-grid {
    display: grid;
    grid-template-columns: 1fr 28px 1fr;
    gap: 8px;
    align-items: stretch;
}

.final-step-layout .comparison-divider {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.final-step-layout .comparison-divider span {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 9px;
    color: var(--text-secondary);
}

.final-step-layout .comparison-side {
    position: relative;
    padding: 8px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
}

.final-step-layout .comparison-side.off {
    background: linear-gradient(145deg, rgba(255, 71, 87, 0.1), rgba(255, 71, 87, 0.03));
    border: 1px solid rgba(255, 71, 87, 0.35);
}

.final-step-layout .comparison-side.on {
    background: linear-gradient(145deg, rgba(0, 255, 136, 0.1), rgba(0, 255, 136, 0.03));
    border: 1px solid rgba(0, 255, 136, 0.35);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.08);
}

/* Status badges */
.final-step-layout .comparison-side::before {
    position: absolute;
    top: -9px;
    right: 10px;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.final-step-layout .comparison-side.off::before {
    content: 'BREACHED';
    background: linear-gradient(135deg, #ff4757, #ff6b81);
    color: white;
}

.final-step-layout .comparison-side.on::before {
    content: 'PROTECTED';
    background: linear-gradient(135deg, #00ff88, #00b4d8);
    color: #0a0e14;
}

.final-step-layout .comparison-header {
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.final-step-layout .comparison-header h3 {
    font-size: 18px;
    font-weight: 600;
}

.final-step-layout .comparison-header svg {
    width: 18px;
    height: 18px;
}

.final-step-layout .comparison-list {
    margin-bottom: 6px;
}

.final-step-layout .comparison-list li {
    font-size: 16px !important;
    padding: 4px 0;
    padding-left: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    line-height: 1.45 !important;
    color: var(--text-bright) !important;
}

.final-step-layout .comparison-list li:last-child {
    border-bottom: none;
}

.final-step-layout .comparison-list li svg {
    width: 18px;
    height: 18px;
    left: 0;
    top: 4px;
}

.final-step-layout .comparison-severity {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    text-align: center;
    border-radius: 3px;
    letter-spacing: 0.3px;
    margin-top: auto;
}

.final-step-layout .comparison-severity.critical {
    background: rgba(255, 71, 87, 0.2);
    color: #ff6b81;
    border: 1px solid rgba(255, 71, 87, 0.25);
}

.final-step-layout .comparison-severity.low {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.25);
    animation: successPulse 2s infinite;
}

@keyframes successPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(0, 255, 136, 0.15); }
    50% { box-shadow: 0 0 10px rgba(0, 255, 136, 0.3); }
}

/* Summary Panel - Bottom, 4-column horizontal */
.final-step-layout .summary-panel {
    padding: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.2fr 1.5fr;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.final-step-layout .summary-section {
    margin-bottom: 0;
    padding: 8px;
    background: linear-gradient(145deg, var(--bg-secondary), rgba(30, 41, 59, 0.5));
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.final-step-layout .summary-section h3 {
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    color: var(--accent-primary);
}

.final-step-layout .summary-section h3 svg {
    width: 14px;
    height: 14px;
}

.final-step-layout .summary-section p {
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-secondary);
}

.final-step-layout .summary-section ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Defenses Engaged section - special highlight */
.final-step-layout .summary-section:nth-child(2) {
    background: linear-gradient(145deg, rgba(0, 255, 136, 0.1), rgba(0, 212, 255, 0.05));
    border: 1px solid rgba(0, 255, 136, 0.25);
}

.final-step-layout .summary-section:nth-child(2) h3 {
    color: var(--accent-secondary);
}

.final-step-layout .summary-section ul {
    flex: 1;
}

.final-step-layout .summary-section ul li {
    font-size: 10px;
    padding: 4px 8px;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.18), rgba(0, 212, 255, 0.1));
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 4px;
    color: var(--accent-secondary);
    margin-bottom: 0;
    font-weight: 500;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.15);
}

.final-step-layout .summary-section ul li::before {
    display: none;
}

/* Residual Risk section - highlight positive outcome */
.final-step-layout .summary-section:nth-child(3) p {
    color: var(--accent-secondary);
    font-weight: 500;
}

/* Team takeaways - 4th column, vertical stack */
.final-step-layout .summary-section:last-child {
    background: linear-gradient(145deg, rgba(0, 180, 216, 0.1), rgba(0, 255, 136, 0.06));
    border: 1px solid rgba(0, 180, 216, 0.25);
}

.final-step-layout .team-takeaways {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    overflow: auto;
}

.final-step-layout .team-takeaway {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px;
    background: var(--bg-secondary);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.final-step-layout .team-takeaway .team-badge {
    font-size: 14px;
    padding: 6px 14px;
    flex-shrink: 0;
}

.final-step-layout .team-takeaway p {
    font-size: 18px !important;
    text-align: left;
    line-height: 1.6 !important;
    color: var(--text-bright) !important;
}

/* Presenter mode - larger fonts */
.presenter-mode .final-step-layout .step-title {
    font-size: 20px;
}

.presenter-mode .final-step-layout .comparison-header h3 {
    font-size: 15px;
}

.presenter-mode .final-step-layout .comparison-list li {
    font-size: 14px;
}

.presenter-mode .final-step-layout .summary-section h3 {
    font-size: 13px;
}

.presenter-mode .final-step-layout .summary-section p {
    font-size: 14px;
}

.presenter-mode .final-step-layout .summary-section ul li {
    font-size: 14px;
}

.presenter-mode .final-step-layout .team-takeaway p {
    font-size: 14px;
}

/* Responsive - stack vertically on narrow screens */
@media (max-width: 1200px) {
    .final-step-layout .summary-panel {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
}

@media (max-width: 900px) {
    /* fix 1fr row collapsing on height:auto parent */
    .scenario-main.new-layout.final-step-layout {
        grid-template-rows: auto;
    }

    .final-step-layout .comparison-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .final-step-layout .comparison-divider {
        display: none !important;
    }

    .final-step-layout .summary-panel {
        grid-template-columns: 1fr;
    }
}

/* Terminal Panel */
.terminal-panel {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.terminal-panel .panel-header {
    flex-shrink: 0;
}

.terminal-panel .terminal-container {
    flex: 1;
    overflow: hidden;
    border: none;
    border-radius: 0;
    max-height: none;
}

.terminal-panel .terminal-content {
    height: 100%;
    max-height: none;
    overflow-y: auto;
}

.log-corr {
    color: var(--text-muted);
    font-size: 10px;
}

/* Timeline Footer */
.timeline-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    background: rgba(10, 14, 20, 0.98);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-color);
    z-index: var(--z-sticky);
}

.timeline-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.timeline-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--bg-secondary);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--border-radius-md);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.timeline-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
    transform: scale(1.05);
}

.timeline-btn.play-btn {
    width: 42px;
    height: 42px;
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--bg-primary);
}

.timeline-btn.play-btn:hover {
    box-shadow: 0 0 20px var(--glow-cyan);
}

.timeline-btn svg {
    width: 22px;
    height: 22px;
}

.timeline-wrapper {
    flex: 1;
}

.timeline-info {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    min-width: 180px;
    justify-content: flex-end;
}

.timeline-hotkeys {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* Color variables for flows */
:root {
    --color-data-flow: var(--accent-primary);
    --color-attack: var(--accent-danger);
    --color-defense: var(--accent-secondary);
}

/* Responsive adjustments for scenario page */
@media (max-width: 1600px) {
    .scenario-main {
        grid-template-columns: minmax(320px, 1.3fr) minmax(180px, 0.6fr) minmax(200px, 0.8fr);
        gap: 10px;
        padding: 6px 12px;
    }
}

@media (max-width: 1366px) {
    .scenario-main {
        grid-template-columns: minmax(280px, 1.3fr) minmax(160px, 0.6fr) minmax(180px, 0.75fr);
        gap: 8px;
    }

    .step-title {
        font-size: 12px;
    }

    .narrative-text {
        font-size: 10px;
    }

    .technique-callout-body {
        padding: 4px 6px;
    }
}

@media (max-width: 1200px) {
    .scenario-main {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr auto;
    }

    .architecture-panel {
        grid-row: 1 / 2;
    }

    .content-panel {
        grid-row: 1 / 2;
    }

    .story-panel {
        grid-column: 1 / -1;
        grid-row: 2 / 3;
        max-height: 280px;
    }
}

@media (max-width: 1024px) {
    .scenario-main {
        grid-template-columns: 1fr;
        height: auto;
        overflow-y: auto;
    }

    .architecture-panel {
        min-height: 350px;
    }

    .story-panel {
        max-height: 300px;
    }

    .terminal-panel {
        max-height: 200px;
    }
}

/* Presenter mode adjustments for scenario pages */
.presenter-mode .scenario-main {
    gap: var(--space-lg);
}

.presenter-mode .step-title {
    font-size: var(--font-size-2xl);
}

.presenter-mode .step-description {
    font-size: var(--font-size-lg);
}

.presenter-mode .arch-node {
    min-width: 90px;
    padding: 12px 16px;
}

.presenter-mode .arch-node .node-icon {
    width: 40px;
    height: 40px;
}

.presenter-mode .arch-node .node-icon svg {
    width: 22px;
    height: 22px;
}

.presenter-mode .arch-node .node-label {
    font-size: var(--font-size-sm);
}

.presenter-mode .timeline-footer {
    padding: var(--space-lg) var(--space-xl);
}

.presenter-mode .timeline-btn {
    width: 48px;
    height: 48px;
}

.presenter-mode .timeline-btn.play-btn {
    width: 56px;
    height: 56px;
}

/* ============================================
   Story Panel Styles
   ============================================ */

/* Story Panel Container - Enhanced for RSA */
.story-panel {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--bg-card), rgba(255, 184, 0, 0.02));
    border: 1px solid rgba(255, 184, 0, 0.12);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    height: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.story-panel .panel-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.1), rgba(255, 184, 0, 0.02));
    border-bottom: 1px solid rgba(255, 184, 0, 0.15);
}

.story-panel .panel-header h2 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-warning);
    text-shadow: 0 0 10px rgba(255, 184, 0, 0.3);
}

.story-panel .panel-header h2 svg {
    width: 14px;
    height: 14px;
    color: var(--accent-warning);
}

.story-content {
    flex: 1;
    overflow: hidden; /* No scrolling - must fit */
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

/* Phase Badge */
.phase-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.phase-badge svg {
    width: 14px;
    height: 14px;
}

.phase-badge.attack {
    background: rgba(255, 71, 87, 0.15);
    color: var(--accent-danger);
    border: 1px solid rgba(255, 71, 87, 0.3);
}

.phase-badge.detection {
    background: rgba(255, 184, 0, 0.15);
    color: var(--accent-warning);
    border: 1px solid rgba(255, 184, 0, 0.3);
}

.phase-badge.response {
    background: rgba(0, 212, 255, 0.15);
    color: var(--accent-primary);
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.phase-badge.outcome {
    background: rgba(0, 255, 136, 0.15);
    color: var(--accent-secondary);
    border: 1px solid rgba(0, 255, 136, 0.3);
}

/* Story Narrative Card */
.story-narrative-card {
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    border-left: 3px solid var(--border-color);
    transition: border-color var(--transition-base);
}

.story-narrative-card.attack {
    border-left-color: var(--accent-danger);
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.05) 0%, var(--bg-secondary) 100%);
}

.story-narrative-card.detection {
    border-left-color: var(--accent-warning);
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.05) 0%, var(--bg-secondary) 100%);
}

.story-narrative-card.response {
    border-left-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.05) 0%, var(--bg-secondary) 100%);
}

.story-narrative-card.outcome {
    border-left-color: var(--accent-secondary);
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.05) 0%, var(--bg-secondary) 100%);
}

.narrative-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.narrative-text {
    font-size: 16px;
    line-height: 1.4;
    color: var(--text-bright);
    font-style: normal;
    margin-bottom: 6px;
}

/* Removed decorative quotes - using practical language now */

/* Business Impact Section - Compact */
.business-impact {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 184, 0, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(255, 184, 0, 0.25);
}

.business-impact-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--accent-warning);
    margin-top: 2px;
}

.business-impact-content {
    flex: 1;
}

.business-impact-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-warning);
    margin-bottom: 4px;
}

.business-impact-text {
    font-size: 16px;
    color: var(--text-bright);
    line-height: 1.4;
}

/* Content bullet lists - used in story and defense panels */
.content-bullets {
    margin: 8px 0 0 0;
    padding-left: 20px;
    list-style-type: disc;
}

.content-bullets li {
    margin-bottom: 4px;
    line-height: 1.4;
}

.content-bullets li:last-child {
    margin-bottom: 0;
}

/* Defense state bullet icons */
.content-bullets.defense-off {
    list-style-type: none;
    padding-left: 4px;
}

.content-bullets.defense-off li::before {
    content: "✗ ";
    color: #ff4d4d;
    font-weight: 700;
    margin-right: 4px;
}

.content-bullets.defense-on {
    list-style-type: none;
    padding-left: 4px;
}

.content-bullets.defense-on li::before {
    content: "✓ ";
    color: #4ade80;
    font-weight: 700;
    margin-right: 4px;
}

/* Paired bullet display: OFF ✗ → ON ✓ */
.bullet-pairs {
    margin-top: 8px;
}

.bullet-pair {
    margin-bottom: 10px;
}

.bullet-pair:last-child {
    margin-bottom: 0;
}

.bullet-off {
    color: #ffffff;
    opacity: 0.85;
}

.bullet-off::before {
    content: "✗  ";
    color: #ff6b6b;
    font-weight: 700;
}

.bullet-off-text {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 77, 77, 0.9);
    text-decoration-thickness: 2px;
}

.bullet-on {
    padding-left: 20px;
    color: var(--text-bright);
}

.bullet-on::before {
    content: "→ ✓  ";
    color: #4ade80;
    font-weight: 700;
}

/* Bullets inside narrative text */
.narrative-text .content-bullets {
    margin-top: 6px;
    color: var(--text-bright);
}

/* Bullets inside business impact */
.business-impact-text .content-bullets {
    margin-top: 4px;
}

/* Bullets inside technique details */
.technique-detail-text .content-bullets {
    margin-top: 4px;
    padding-left: 16px;
}

/* Problem label - prominent red styling for stage visibility */
.problem-label {
    color: #ff6b6b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 1.05em;
}

.presenter-mode .problem-label {
    font-size: 1.1em;
}

/* Technique Callout Box - Compact */
.technique-callout {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    transition: all var(--transition-base);
}

.technique-callout.active {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.1);
}

.technique-callout-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(0, 255, 136, 0.08);
    border-bottom: 1px solid var(--border-color);
}

.technique-callout-header svg {
    width: 12px;
    height: 12px;
    color: var(--accent-secondary);
}

.technique-callout-header h3 {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-secondary);
}

.technique-callout-id {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    color: var(--accent-primary);
}

.technique-callout-body {
    padding: 6px 8px;
}

.technique-callout-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-primary);
}

/* Technique Why/How/Outcome - Compact */
.technique-detail {
    margin-bottom: 6px;
}

.technique-detail:last-child {
    margin-bottom: 0;
}

.technique-detail-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 3px;
}

.technique-detail-label.why {
    color: var(--accent-warning);
}

.technique-detail-label.how {
    color: var(--accent-primary);
}

.technique-detail-label.outcome {
    color: var(--accent-secondary);
}

.technique-detail-label svg {
    width: 10px;
    height: 10px;
}

.technique-detail-text {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
    padding-left: 15px;
}

/* Outcome Badge in Technique Callout */
.technique-outcome-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: rgba(0, 255, 136, 0.15);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    color: var(--accent-secondary);
}

.technique-outcome-badge svg {
    width: 10px;
    height: 10px;
}

/* Story Panel Empty State */
.story-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--space-md);
    text-align: center;
    color: var(--text-muted);
}

.story-empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-md);
    opacity: 0.5;
}

.story-empty-state p {
    font-size: var(--font-size-sm);
}

/* Divider in story panel */
.story-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--space-sm) 0;
}

/* Defense indicator (shown when AIDEFEND is ON) */
.defense-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(0, 255, 136, 0.1);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--accent-secondary);
}

.defense-indicator svg {
    width: 12px;
    height: 12px;
}

/* Attack indicator (shown when AIDEFEND is OFF) */
.attack-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(255, 71, 87, 0.1);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--accent-danger);
}

.attack-indicator svg {
    width: 12px;
    height: 12px;
}

/* Component Scope Section */
.component-scope {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
}

.component-scope-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-right: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.component-scope-label svg {
    width: 12px;
    height: 12px;
}

.component-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(0, 212, 255, 0.12);
    border: 1px solid rgba(0, 212, 255, 0.35);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    font-weight: 500;
    color: var(--accent-primary);
}

.component-tag svg {
    width: 6px;
    height: 6px;
}

/* Story Panel Animations */
@keyframes storySlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.story-narrative-card.animate-in {
    animation: storySlideIn 0.4s ease-out;
}

.technique-callout.animate-in {
    animation: storySlideIn 0.4s ease-out 0.1s both;
}

/* Presenter Mode Panel Adjustments */
.presenter-mode .story-panel,
.presenter-mode .story-standalone-panel {
    font-size: var(--font-size-lg);
}

.presenter-mode .narrative-text {
    font-size: var(--font-size-lg);
    line-height: 1.8;
}

.presenter-mode .business-impact-text {
    font-size: var(--font-size-base);
}

.presenter-mode .technique-callout-name {
    font-size: var(--font-size-lg);
}

.presenter-mode .technique-detail-text {
    font-size: var(--font-size-base);
}

.presenter-mode .standalone-panel-header {
    font-size: 15px;
    padding: 10px 16px;
}

.presenter-mode .standalone-panel-body .technique-rationale,
.presenter-mode .standalone-panel-body .narrative-text,
.presenter-mode .standalone-panel-body .business-impact-text {
    font-size: 18px;
    line-height: 1.5;
}

.presenter-mode .defense-standalone-panel .technique-id {
    font-size: 20px;
}

.presenter-mode .defense-standalone-panel .technique-name {
    font-size: 20px;
}

/* Responsive - stack to single column on small screens */
@media (max-width: 900px) {
    .scenario-main.new-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "title"
            "arch"
            "panels";
    }
}

@media (max-width: 1024px) {
    .narrative-text {
        font-size: var(--font-size-sm);
    }
}

/* Animation class for panel entrance */
.animate-in {
    animation: panelSlideIn 0.4s ease-out;
}

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

/* ============================================
   Scroll Hint Button (mobile only)
   Floating pill — guides users to off-screen panels
   ============================================ */
.scroll-hint-btn {
    position: fixed;
    bottom: 80px; /* above timeline footer (~48-72px) — fixed value, var not inherited by body */
    right: 14px;
    display: none; /* JS controls visibility */
    align-items: center;
    gap: 6px;
    padding: 9px 16px 9px 12px;
    background: rgba(0, 180, 216, 0.12);
    border: 1.5px solid rgba(0, 212, 255, 0.55);
    border-radius: 22px;
    color: #7df3ff;
    opacity: 0.75;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    z-index: 250; /* must be above timeline-footer (z-sticky: 200) */
    backdrop-filter: blur(14px);
    box-shadow:
        0 0 16px rgba(0, 212, 255, 0.4),
        0 0 32px rgba(0, 212, 255, 0.15),
        0 2px 10px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.4px;
    transition: opacity 0.2s, transform 0.15s;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    animation: hintGlow 2s ease-in-out infinite;
}
.scroll-hint-btn:active {
    transform: scale(0.94);
    animation: none;
}
.scroll-hint-btn:hover,
.scroll-hint-btn:focus-visible {
    opacity: 1;
}
.scroll-hint-btn .hint-arrow {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(0, 255, 200, 0.8));
    stroke-width: 3;
    color: #4aeaff;
}
@keyframes hintGlow {
    0%, 100% {
        box-shadow: 0 0 16px rgba(0, 212, 255, 0.4), 0 0 32px rgba(0, 212, 255, 0.15), 0 2px 10px rgba(0, 0, 0, 0.5);
        transform: translateY(0);
    }
    50% {
        box-shadow: 0 0 24px rgba(0, 212, 255, 0.6), 0 0 48px rgba(0, 212, 255, 0.25), 0 2px 10px rgba(0, 0, 0, 0.5);
        transform: translateY(-3px);
    }
}
/* Hide on desktop — this feature is mobile-only */
@media (min-width: 701px) {
    .scroll-hint-btn { display: none !important; }
}

/* ============================================
   COMPREHENSIVE RWD — Mobile-First Enhancements
   Breakpoints: 1200 / 900 / 768 / 640 / 480 / 375
   ============================================ */

/* ---------- 1200px: Compress timeline & step-title on smaller desktops ---------- */
@media (max-width: 1200px) {
    .step-title-bar .step-title {
        font-size: 16px;
    }
    .timeline-info {
        min-width: 120px;
    }
}

/* ---------- 900px: Enable scroll when layout stacks ---------- */
@media (max-width: 900px) {
    /* Layout stacks to single column here — enable vertical scroll */
    .scenario-page {
        overflow-y: auto;
        height: auto;
        min-height: 100vh;
    }

    /* CRITICAL: override defense-expanded columns — must stay 1 column on mobile */
    .scenario-main.new-layout.defense-expanded {
        grid-template-columns: 1fr;
    }

    /* Use auto rows so content-height drives layout (1fr needs fixed parent height) */
    .scenario-main.new-layout,
    .scenario-main.new-layout.defense-expanded {
        grid-template-rows: auto auto auto;
        min-height: 0;
    }

    /* Remove fixed height/overflow from panels — let content flow naturally */
    .dual-panel-container {
        height: auto;
        max-height: none;
        overflow: visible;
    }
    .story-standalone-panel,
    .defense-standalone-panel {
        height: auto;
        min-height: 200px;
        overflow: visible; /* was overflow:hidden which clips stacked content */
    }
    /* Panel body: let page scroll — no nested scroll on mobile */
    .standalone-panel-body {
        overflow-y: visible;
        max-height: none;
    }

    /* Defense panel — slide in from bottom on mobile */
    .defense-standalone-panel {
        transform: translateY(20px);
    }
    .defense-standalone-panel.defense-active {
        transform: translateY(0);
    }

    /* Defense-expanded node compaction: don't apply on mobile (layout already 1col) */
    .defense-expanded .arch-node {
        padding: 3px 5px;
        min-width: 48px;
        max-width: 78px;
    }
    .defense-expanded .arch-node .node-icon {
        width: 22px;
        height: 22px;
    }
    .defense-expanded .arch-node .node-icon svg {
        width: 14px;
        height: 14px;
    }

    /* Presenter mode: cap node sizes at ≤900px (architecture panel can be narrow in 2-col) */
    .presenter-mode .arch-node {
        min-width: 70px;
        padding: 5px 8px;
    }
    .presenter-mode .arch-node .node-icon {
        width: 26px;
        height: 26px;
    }
    .presenter-mode .arch-node .node-icon svg {
        width: 16px;
        height: 16px;
    }
    .presenter-mode .arch-node .node-label {
        font-size: 10px;
    }
}

/* ---------- 768px: Tablet portrait ---------- */
@media (max-width: 768px) {

    /* --- Header --- */
    .main-header {
        padding: 6px 12px;
        gap: 8px;
    }
    .header-left {
        gap: 8px;
    }
    .logo-icon {
        width: 24px;
        height: 24px;
    }
    .logo-text {
        font-size: var(--font-size-base);
        letter-spacing: 1px;
    }
    /* keep scenario-badge — moved hide to 640px */
    .header-right {
        gap: 6px;
    }
    .header-right .btn span {
        display: none; /* hide button text labels */
    }
    .global-toggle .toggle-label {
        font-size: 11px;
    }

    /* --- Landing hero --- */
    .hero-title {
        font-size: 24px; /* fixed — immune to mobile var overrides */
    }
    .hero-subtitle {
        font-size: 15px;
    }
    .hero-stats-inline {
        flex-wrap: wrap;
        font-size: var(--font-size-sm);
        gap: 6px;
    }
    .hero-visual {
        height: 100px;
        width: 100px;
    }

    /* --- Scenario: step title bar --- */
    .step-title-bar .step-description {
        display: none;
    }
    .step-title-bar .step-title {
        font-size: 14px;
    }
    .step-title-bar {
        padding: 4px 10px;
        gap: 8px;
    }

    /* --- Scenario: compact padding and footer --- */
    .scenario-main.new-layout {
        padding: 4px 8px;
        margin-bottom: 60px; /* compact footer height on mobile */
    }
    .scenario-page {
        --footer-height: 60px;
    }
    .architecture-container {
        min-height: 240px;
    }

    /* --- Timeline footer: compact --- */
    .timeline-footer {
        padding: 6px 10px;
        gap: 8px;
    }
    .timeline-btn {
        width: 36px;
        height: 36px;
    }
    .timeline-btn svg {
        width: 16px;
        height: 16px;
    }
    .timeline-btn.play-btn {
        width: 36px;
        height: 36px;
    }
    .timeline-hotkeys {
        display: none;
    }
    .timeline-info {
        min-width: unset;
        gap: 8px;
    }

    /* --- Final summary --- */
    .final-step-layout .team-takeaways {
        grid-template-columns: 1fr;
    }

    /* --- Presenter mode: compact nodes at tablet size --- */
    .presenter-mode .arch-node {
        min-width: 56px;
        max-width: 76px;
        padding: 4px 5px;
    }
    .presenter-mode .arch-node .node-icon {
        width: 22px;
        height: 22px;
    }
    .presenter-mode .arch-node .node-icon svg {
        width: 14px;
        height: 14px;
    }
    .presenter-mode .arch-node .node-label {
        font-size: 9px;
    }
    .presenter-mode .main-header {
        padding: 6px 12px;
    }
    .presenter-mode .logo-icon {
        width: 24px;
        height: 24px;
    }
    .presenter-mode .logo-text {
        font-size: 16px;
    }
}

/* ---------- 640px: Large phone ---------- */
@media (max-width: 640px) {

    /* --- Header: minimal --- */
    .main-header {
        padding: 6px 10px;
        backdrop-filter: none; /* remove blur for mobile perf */
    }
    .header-center .toggle-label {
        display: none; /* hide "AIDEFEND" label, keep switch */
    }
    /* Shrink global-toggle wrapper padding */
    .global-toggle {
        padding: 4px 8px;
        gap: 6px;
    }
    /* Compact toggle so 3 header sections fit on narrow screens */
    .toggle-switch {
        width: 76px !important;
        height: 38px !important;
        min-height: unset !important;
        padding: 0 !important; /* override coarse-pointer 8px side padding */
        border-radius: 19px;
    }
    .toggle-state {
        font-size: 11px;
    }
    .header-right {
        gap: 4px;
    }
    .scenario-badge {
        display: none; /* hide at 640px, not 768px */
    }

    /* --- Presenter mode: FULL neutralization on mobile ≤640px ---
         .presenter-mode class (0,1,0) beats :root (0,0,1)
         so font variables MUST be reset on the class itself. */
    .presenter-mode {
        --font-size-base: 15px;
        --font-size-sm: 13px;
        --font-size-lg: 16px;
        --font-size-xl: 18px;
        --font-size-2xl: 20px;
    }
    .presenter-mode .main-header {
        padding: 6px 10px;
    }
    .presenter-mode .logo-icon {
        width: 20px;
        height: 20px;
    }
    .presenter-mode .logo-text {
        font-size: 14px;
    }
    .presenter-mode .arch-node {
        padding: 4px 3px;
        min-width: 54px;
        max-width: 68px;
    }
    .presenter-mode .arch-node .node-icon {
        width: 20px;
        height: 20px;
    }
    .presenter-mode .arch-node .node-icon svg {
        width: 13px;
        height: 13px;
    }
    .presenter-mode .arch-node .node-label,
    .presenter-mode .arch-node-label {
        font-size: 9px;
    }
    .presenter-mode .scenario-main {
        gap: 6px;
    }
    .presenter-mode .step-title {
        font-size: 13px;
    }
    .presenter-mode .timeline-footer {
        padding: 5px 8px;
    }
    .presenter-mode .timeline-btn {
        width: 32px;
        height: 32px;
    }
    .presenter-mode .timeline-btn.play-btn {
        width: 34px;
        height: 34px;
    }
    .presenter-mode .standalone-panel-header {
        font-size: 12px;
        padding: 7px 10px;
    }
    .presenter-mode .standalone-panel-body .narrative-text,
    .presenter-mode .standalone-panel-body .business-impact-text,
    .presenter-mode .standalone-panel-body .technique-rationale {
        font-size: 14px;
        line-height: 1.45;
    }
    .presenter-mode .defense-standalone-panel .technique-id,
    .presenter-mode .defense-standalone-panel .technique-name {
        font-size: 14px;
    }
    .presenter-mode .hero-title {
        font-size: 22px;
    }
    .presenter-mode .battleground-card {
        padding: var(--space-sm) var(--space-md);
    }
    .presenter-mode .card-title {
        font-size: 16px;
    }

    /* --- Landing: hero visual hidden on very small screens --- */
    .hero-section {
        grid-template-columns: 1fr;
    }
    .hero-visual {
        display: none;
    }
    .hero-title {
        font-size: 22px; /* fixed — don't use var which scales too small on mobile */
    }
    .hero-subtitle {
        font-size: 14px;
    }
    .section-title {
        font-size: 20px;
    }
    .hero-stats-inline {
        font-size: 13px;
    }
    .battleground-grid {
        gap: var(--space-sm);
    }
    .battleground-card {
        padding: var(--space-sm) var(--space-md);
    }

    /* --- Scenario: stack dual panels vertically on mobile --- */
    .dual-panel-container {
        flex-direction: column;
    }
    .dual-panel-container .story-standalone-panel,
    .dual-panel-container.has-defense .story-standalone-panel {
        flex: 1 1 auto;
        min-height: 180px;
    }
    .dual-panel-container .defense-standalone-panel {
        transform: translateY(20px); /* slide in from bottom */
    }
    .dual-panel-container.has-defense .defense-standalone-panel {
        flex: 1 1 auto;
        min-height: 160px;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .architecture-container {
        min-height: 260px; /* must accommodate y:14-82% nodes with translate(-50%,-50%) centering */
    }

    /* --- Architecture nodes: sized for mobile — centered at x%,y% via existing translate(-50%,-50%) --- */
    .arch-node {
        min-width: 54px;
        max-width: 68px;
        padding: 4px 3px;
    }
    .arch-node .node-icon {
        width: 20px;
        height: 20px;
    }
    .arch-node .node-icon svg {
        width: 13px;
        height: 13px;
    }
    .arch-node .node-label {
        font-size: 9px;
    }

    /* --- Step title: even more compact --- */
    .step-title-bar .step-number {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
    .step-title-bar .step-team-badge {
        padding: 2px 6px;
        font-size: 10px;
    }
    .step-title-bar .step-title {
        font-size: 13px;
    }

    /* --- Timeline footer --- */
    .timeline-footer {
        padding: 5px 8px;
        gap: 6px;
    }
    .timeline-btn {
        width: 32px;
        height: 32px;
    }
    .timeline-btn svg {
        width: 14px;
        height: 14px;
    }
    .timeline-btn.play-btn {
        width: 34px;
        height: 34px;
    }
    .scenario-main.new-layout {
        margin-bottom: 52px;
        gap: 6px;
    }
    .scenario-page {
        --footer-height: 52px;
    }

    /* --- Final summary: stack comparison cards --- */
    .summary-comparison {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .comparison-vs {
        display: none;
    }
    .final-step-layout .comparison-grid {
        grid-template-columns: 1fr;
    }
    .final-step-layout .comparison-divider {
        display: none !important;
    }

    /* --- Team takeaway font override for mobile --- */
    .final-step-layout .team-takeaway p {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
    .final-step-layout .team-takeaway .team-badge {
        font-size: 11px;
        padding: 4px 8px;
    }

    /* --- Standalone panel headers: compact on mobile --- */
    .standalone-panel-header {
        font-size: 12px;
        padding: 7px 10px;
    }
    .defense-standalone-panel .technique-id {
        font-size: 14px !important;
    }
    .defense-standalone-panel .technique-name {
        font-size: 14px !important;
    }

    /* --- Comparison badge: avoid absolute overlap when stacked --- */
    .comparison-card {
        padding-top: 18px; /* room for badge above content */
    }
    .comparison-badge {
        font-size: 9px;
        padding: 2px 7px;
    }
}

/* ---------- 480px: Phone ---------- */
@media (max-width: 480px) {

    /* --- Root font scale --- */
    :root {
        --font-size-base: 14px;
        --font-size-sm: 12px;
        --font-size-xs: 10px;
    }
    /* Presenter-mode: must also reset on the class (higher specificity than :root) */
    .presenter-mode {
        --font-size-base: 14px;
        --font-size-sm: 12px;
        --font-size-xs: 10px;
        --font-size-lg: 15px;
        --font-size-xl: 17px;
        --font-size-2xl: 19px;
    }
    .presenter-mode .step-title {
        font-size: 12px;
    }
    .presenter-mode .timeline-footer {
        padding: 4px 6px;
    }
    .presenter-mode .timeline-btn {
        width: 30px;
        height: 30px;
    }

    /* --- Header: tight --- */
    .main-header {
        padding: 5px 8px;
    }
    /* Hide presenter / quick-mode buttons — not useful on phone */
    #presenterModeBtn, #quickModeBtn {
        display: none;
    }
    .logo-text {
        font-size: 14px;
        letter-spacing: 0.5px;
    }
    .logo-icon {
        width: 20px;
        height: 20px;
    }
    .back-link {
        font-size: 12px;
    }

    /* --- Landing hero --- */
    .hero-title {
        font-size: 20px; /* fixed — var(--font-size-base) is only 14px here, far too small */
    }
    .hero-subtitle {
        font-size: 13px;
    }
    .section-title {
        font-size: 18px;
    }
    .hero-stats-inline {
        font-size: 12px;
    }
    .tactics-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 6px;
    }

    /* --- Scenario main: minimal padding --- */
    .scenario-page {
        --footer-height: 48px;
    }
    .scenario-main.new-layout {
        padding: 3px 6px;
        gap: 5px;
        margin-bottom: 48px;
    }
    .architecture-container {
        min-height: 260px; /* keep consistent — don't shrink, node centering needs this */
    }

    /* --- Arch nodes: slightly tighter than 640px but still readable --- */
    .arch-node {
        padding: 3px 2px;
        min-width: 46px;
        max-width: 58px;
    }
    .arch-node .node-icon {
        width: 18px;
        height: 18px;
    }
    .arch-node .node-icon svg {
        width: 11px;
        height: 11px;
    }
    .arch-node .node-label {
        font-size: 8px;
    }

    /* --- Dual panels: even tighter --- */
    .dual-panel-container .story-standalone-panel,
    .dual-panel-container.has-defense .story-standalone-panel {
        min-height: 150px;
    }
    .dual-panel-container.has-defense .defense-standalone-panel {
        min-height: 140px;
    }

    /* --- Step title --- */
    .step-title-bar {
        padding: 3px 6px;
    }
    .step-title-bar .step-title {
        font-size: 12px;
    }

    /* --- Timeline footer: minimal --- */
    .timeline-footer {
        padding: 4px 6px;
        gap: 4px;
    }
    .timeline-btn {
        width: 30px;
        height: 30px;
    }
    .timeline-btn svg {
        width: 13px;
        height: 13px;
    }
    .timeline-wrapper {
        min-width: 0;
    }

    /* --- Final summary --- */
    .final-summary-panel {
        padding: 8px;
    }
    .outcome-headline {
        font-size: 14px;
    }
}

/* ---------- 375px: Small phone (iPhone SE) ---------- */
@media (max-width: 375px) {

    :root {
        --font-size-base: 13px;
        --font-size-sm: 11px;
        --font-size-xs: 9px;
    }
    .presenter-mode {
        --font-size-base: 13px;
        --font-size-sm: 11px;
        --font-size-xs: 9px;
        --font-size-lg: 14px;
        --font-size-xl: 16px;
        --font-size-2xl: 18px;
    }
    .presenter-mode .step-title {
        font-size: 11px;
    }
    .presenter-mode .logo-text {
        font-size: 12px;
    }
    .presenter-mode .logo-icon {
        width: 18px;
        height: 18px;
    }

    .logo-text {
        font-size: 12px;
    }
    .logo-icon {
        width: 18px;
        height: 18px;
    }

    .step-title-bar .step-title {
        font-size: 11px;
    }
    .step-title-bar .step-team-badge {
        display: none;
    }

    .architecture-container {
        min-height: 260px; /* keep — reducing causes top nodes (y:14%) to clip */
    }

    .arch-node {
        min-width: 40px;
        max-width: 52px;
    }
    .arch-node .node-label {
        font-size: 7px;
    }

    .timeline-btn {
        width: 28px;
        height: 28px;
    }
    .timeline-btn svg {
        width: 12px;
        height: 12px;
    }
}

/* ---------- Touch device: larger tap targets ---------- */
@media (hover: none) and (pointer: coarse) {
    .timeline-btn {
        min-width: 44px;
        min-height: 44px;
    }
    .toggle-switch {
        min-height: 44px;
        padding: 0 8px;
    }
    .btn {
        min-height: 40px;
        min-width: 40px;
    }
    .back-link {
        padding: 8px;
    }
}