:root {
    /* --- CORPORATE SCI-FI PALETTE --- */
    --bg-void: #0f1117;
    --bg-glass: rgba(20, 24, 33, 0.75);
    --bg-glass-hover: rgba(255, 255, 255, 0.05);

    /* --- NEW VARIABLES (Defaults) --- */
    --bg-panel-header: #13151a;
    --bg-terminal-container: #050505;
    --bg-command-deck: rgba(20, 24, 33, 0.4);
    --bg-element: rgba(0, 0, 0, 0.2);

    /* NEW: Text Visibility Fixes */
    --bg-pre: #050505;           /* Code block background */
    --text-code: #e2e8f0;        /* Code text color */
    --text-box: #e0e0e0;         /* Info/Warning box text color */
    --btn-submit-bg: #eceef5;    /* Submit button background */
    --btn-submit-fg: #000000;    /* Submit button arrow color */

    /* Shadows */
    --shadow-base: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);

    /* --- EXISTING VARIABLES --- */
    --border-base: 1px solid rgba(255, 255, 255, 0.08);
    --border-highlight: 1px solid rgba(59, 130, 246, 0.4);

    /* Typography */
    --font-ui: 'Inter', sans-serif;
    --font-code: 'JetBrains Mono', monospace;

    --text-main: #eceef5;
    --text-muted: #94a3b8;
    --text-dim: #475569;

    /* Accents */
    --accent-primary: #3b82f6;
    --accent-secondary: #a855f7;
    --accent-success: #10b981;
    --accent-glow: 0 0 20px rgba(59, 130, 246, 0.15);
}

/* --- RESET --- */
* {
    box-sizing: border-box;
    outline: none;
}

body {
    margin: 0;
    background-color: var(--bg-void);
    color: var(--text-main);
    font-family: var(--font-ui);
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    /* Subtle vignette background */
    background-image: radial-gradient(circle at top center, #1e293b 0%, #0f1117 70%);
}

/* --- UTILITIES --- */
.glass-panel {
    background: var(--bg-glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: var(--border-base);
    border-radius: 8px;
    box-shadow: var(--shadow-base), var(--shadow-inset);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Custom Scrollbar (Sleek/Invisible) */
.scrollable-y {
    overflow-y: auto;
    height: 100%;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}


/* --- LAYOUT GRID --- */
#app-container {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 16px;
    gap: 16px;
}

/* SIDEBARS (WIDER) */
#sidebar,
#ai-panel {
    width: 400px;
    flex-shrink: 0;
}


/* --- LEFT SIDEBAR STYLES --- */
.sidebar-header {
    padding: 18px 24px;
    border-bottom: var(--border-base);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
}

.brand-chip {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    color: var(--text-main);
    display: flex;
    gap: 10px;
    align-items: center;
}

.brand-chip i {
    color: var(--accent-primary);
}

.live-badge {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--accent-success);
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.section-title {
    padding: 24px 24px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Device Selector */
#device-selector {
    padding: 0 24px;
}

.device-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.device-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 14px;
    cursor: pointer;
    text-align: left;
    position: relative;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.device-card:hover {
    background: var(--bg-glass-hover);
}

.device-card.active {
    background: rgba(59, 130, 246, 0.08);
    border-color: var(--accent-primary);
    box-shadow: var(--accent-glow);
}

.status-led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-dim);
    margin-bottom: 4px;
}

.device-card.active .status-led {
    background: var(--accent-success);
    box-shadow: 0 0 8px var(--accent-success);
}

.d-name {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}

.d-detail {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: var(--font-code);
}

.dev-icon {
    position: absolute;
    top: 14px;
    right: 14px;
    color: rgba(255, 255, 255, 0.1);
    font-size: 1.2rem;
}

.device-card.active .dev-icon {
    color: var(--accent-primary);
    opacity: 0.5;
}

/* Curriculum */
#tutorial-area {
    padding: 0 24px 24px;
}

.module-block {
    margin-bottom: 20px;
}

.module-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding-left: 4px;
}

.task-card {
    background: transparent;
    border-bottom: var(--border-base);
    margin-bottom: 0;
    border-radius: 0;
}

.task-card summary {
    padding: 12px 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-main);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s;
    border-radius: 4px;
}

.task-card summary:hover {
    background: var(--bg-glass-hover);
}

.task-card[open] summary {
    font-weight: 600;
    color: var(--accent-primary);
}

.task-body {
    padding: 12px;
    background: var(--bg-element); /* changed from rgba(0,0,0,0.2) */
    border-radius: 4px;
    margin-bottom: 10px;
}

.task-body p {
    margin: 0 0 8px 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.badge {
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: var(--font-code);
    font-weight: 700;
    width: 40px;
    text-align: center;
}

.badge.any {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}

.badge.router {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-primary);
}

.badge.switch {
    background: rgba(168, 85, 247, 0.15);
    color: var(--accent-secondary);
}

pre {
    background: var(--bg-pre); /* changed from #050505 */
    padding: 12px;
    border-radius: 4px;
    border: var(--border-base);
    margin: 0;
    overflow-x: auto;
}

code {
    font-family: var(--font-code);
    font-size: 0.8rem;
    color: var(--text-code); /* changed from #e2e8f0 */
}


/* --- CENTER COLUMN --- */
#center-column {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 1. Terminal Container */
.terminal-container {
    flex: 1;
    /* Take up all available space */
    min-height: 0;
    /* Allow shrinking */
    background: var(--bg-terminal-container);
    border: var(--border-base);
    display: flex;
    flex-direction: column;
}

/* --- TOP BAR LAYOUT --- */
.panel-top-bar {
    height: 48px;
    background: var(--bg-panel-header);
    border-bottom: var(--border-base);
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes Left and Right apart */
    padding: 0 16px;
    flex-shrink: 0;
}

.bar-left, .bar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tab-label {
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- CUSTOM THEME DROPDOWN --- */
.theme-select {
    appearance: none;           /* Removes default browser arrow */
    -webkit-appearance: none;   /* Safari fix */
    background-color: var(--bg-element);
    color: var(--text-main);
    border: var(--border-base);
    border-radius: 4px;
    padding: 6px 32px 6px 12px; /* Extra padding right for custom arrow */
    font-size: 0.75rem;
    font-family: var(--font-ui);
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* Custom Arrow drawn with CSS gradients */
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.theme-select:hover {
    border-color: var(--accent-primary);
    background-color: var(--bg-glass-hover);
}

.theme-select option {
    background-color: #0f1117; /* Forces dark dropdown menu even in some browsers */
    color: white;
}

/* --- STATUS INDICATORS --- */
.system-notice {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.system-notice i { color: var(--accent-secondary); }

.bar-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.1);
}

.status-indicator.connected {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 4px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-success);
}

.status-indicator .dot {
    width: 6px;
    height: 6px;
    background-color: var(--accent-success);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-success);
    animation: pulse 2s infinite;
}

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

/* ... (Tab label styles) ... */

#terminal-wrapper {
    flex-grow: 1;
    position: relative;
    padding: 12px;
    overflow: hidden;
    /* Prevent overflow */
}

.xterm .xterm-viewport {
    background-color: transparent !important;
}

/* 2. Command Deck (Bottom Area) */
.command-deck {
    flex: 0 0 240px;
    /* Fixed height, don't grow or shrink */
    background: var(--bg-command-deck);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    padding: 16px;
    overflow-y: auto;
    /* Allow scrolling if content overflows */
}

.deck-widget {
    background: var(--bg-element); /* changed from rgba(255,255,255,0.02) */
    border: var(--border-base);
    border-radius: 6px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.widget-label {
    font-size: 0.65rem;
    color: var(--text-dim);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 12px;
    display: block;
}

/* Info Widget */
.stat-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

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

.stat-val {
    color: var(--text-main);
    font-family: var(--font-code);
}

/* Link Widget */
.deck-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 10px;
    border-radius: 6px;
    transition: all 0.2s;
    border: 1px solid transparent;
    /* Default border */
}

.deck-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Color Variants */
.deck-link.purple {
    border-color: var(--accent-secondary);
    background: rgba(168, 85, 247, 0.1);
}

.deck-link.purple i {
    color: var(--accent-secondary);
}

.deck-link.purple:hover {
    background: rgba(168, 85, 247, 0.2);
}

.deck-link.blue {
    border-color: var(--accent-primary);
    background: rgba(59, 130, 246, 0.1);
}

.deck-link.blue i {
    color: var(--accent-primary);
}

.deck-link.blue:hover {
    background: rgba(59, 130, 246, 0.2);
}

.deck-link.cyan {
    border-color: #0077b5;
    /* LinkedIn Blue */
    background: rgba(0, 119, 181, 0.1);
}

.deck-link.cyan i {
    color: #0077b5;
}

.deck-link.cyan:hover {
    background: rgba(0, 119, 181, 0.2);
}

/* Sys Widget */
.notice-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    background: rgba(59, 130, 246, 0.05);
    padding: 10px;
    border-radius: 4px;
    border-left: 2px solid var(--accent-primary);
}

.notice-text i {
    margin-right: 6px;
    color: var(--accent-primary);
}


/* --- RIGHT SIDEBAR (AI) --- */
.brand-chip.purple i {
    color: var(--accent-secondary);
}

.online-status {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--accent-secondary);
    border: 1px solid rgba(168, 85, 247, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
}

#ai-output-container {
    flex-grow: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ai-message {
    display: flex;
    gap: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.ai-message.user {
    flex-direction: row-reverse;
}

.ai-message .avatar {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

.ai-message.user .avatar {
    background: var(--accent-primary);
    color: white;
}

.ai-message .content {
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 16px;
    border-radius: 8px;
    color: var(--text-main);
    border: var(--border-base);
    max-width: 85%;
}

.ai-message.user .content {
    background: var(--accent-primary);
    color: white;
    border: none;
}

.ai-input-area {
    padding: 20px;
    border-top: var(--border-base);
    display: flex;
    gap: 10px;
    background: rgba(0, 0, 0, 0.2);
}

#ai-input {
    flex-grow: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 12px;
    color: white;
    font-family: var(--font-ui);
    transition: 0.2s;
}

#ai-input:focus {
    border-color: var(--accent-primary);
    background: rgba(0, 0, 0, 0.3);
}

#ai-submit {
    width: 44px;
    border-radius: 6px;
    border: none;
    background: var(--btn-submit-bg); /* changed from var(--text-main) */
    color: var(--btn-submit-fg);     /* changed from #000 */
    cursor: pointer;
    transition: 0.2s;
}

#ai-submit:hover {
    background: white;
    transform: scale(1.05);
}


/* --- SPLASH --- */
#splash-screen {
    position: fixed;
    inset: 0;
    background: #0b0d11;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.logo-mark {
    font-size: 4rem;
    color: var(--accent-primary);
    margin-bottom: 20px;
    filter: drop-shadow(0 0 40px rgba(59, 130, 246, 0.3));
}

.splash-text h1 {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0;
}

.splash-text p {
    color: var(--text-muted);
    margin-top: 8px;
    font-size: 1rem;
}

.social-links {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 24px;
}

.social-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.social-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-primary);
    color: var(--text-main);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.social-btn i {
    font-size: 1.1rem;
}

#enter-lab-btn {
    margin-top: 40px;
    padding: 14px 36px;
    background: var(--accent-primary);
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: 0.2s;
}

#enter-lab-btn:hover {
    background: #2563eb;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

/* Mobile Warning */
#mobile-warning {
    display: none;
}

@media (max-width: 1000px) {
    #app-container {
        display: none;
    }

    #mobile-warning {
        display: flex;
        height: 100vh;
        align-items: center;
        justify-content: center;
        padding: 20px;
        text-align: center;
    }

    .warning-box {
        padding: 40px;
        align-items: center;
    }

    .warning-box i {
        font-size: 3rem;
        color: var(--accent-secondary);
        margin-bottom: 20px;
    }

    .warning-box h2 {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

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

.hidden {
    display: none !important;
}

/* Phase 2 Enhancements */

/* Pro Tip & Verification Boxes */
.pro-tip,
.verify-step {
    margin-top: 10px;
    padding: 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    border-left: 3px solid;
}

.pro-tip {
    background: rgba(255, 215, 0, 0.1);
    /* Gold tint */
    border-color: #ffd700;
    /* CORRECT: Uses variable for theme switching */
    color: var(--text-box); 
}

.verify-step {
    background: rgba(0, 255, 127, 0.1);
    /* Spring Green tint */
    border-color: #00ff7f;
    /* CORRECT: Uses variable for theme switching */
    color: var(--text-box); 
}

.tip-label,
.verify-label {
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.tip-label {
    color: #ffd700;
}

.verify-label {
    color: #00ff7f;
}

/* Scenario Cards (Mission Control) */
.scenario-card {
    background: var(--bg-element); /* changed from rgba(0,0,0,0.3) */
    border: 1px solid var(--border-color); /* ensure this variable exists or use var(--border-base) */
    border-radius: 6px;
    margin-bottom: 15px;
    overflow: hidden;
}

.scenario-header {
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scenario-body {
    padding: 15px;
}

.mission-brief {
    margin-bottom: 15px;
    font-style: italic;
    color: #a0a0a0;
}

.mission-objectives {
    margin-bottom: 15px;
}

.mission-objectives ul {
    padding-left: 20px;
    margin-top: 5px;
}

/* Hidden Solution */
details.solution-reveal {
    margin-top: 15px;
    border: 1px dashed var(--accent-secondary);
    border-radius: 4px;
    background: rgba(168, 85, 247, 0.05);
}

details.solution-reveal summary {
    padding: 10px;
    cursor: pointer;
    color: var(--accent-secondary);
    font-weight: 600;
    list-style: none;
    text-align: center;
    transition: background 0.2s;
}

details.solution-reveal summary:hover {
    background: rgba(168, 85, 247, 0.1);
}

details.solution-reveal summary::after {
    content: " 🔒 ";
    font-size: 0.8rem;
    opacity: 0.8;
}

details.solution-reveal[open] summary::after {
    content: " 🔓 ";
}

.solution-content {
    padding: 15px;
    border-top: 1px dashed var(--accent-secondary);
}

/* Common Pitfalls (Red Box) */
.pitfall-box {
    margin-top: 10px;
    padding: 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    border-left: 3px solid;
    background: rgba(255, 69, 58, 0.1);
    /* Red tint */
    border-color: #ff453a;
    /* CORRECT: Uses variable for theme switching */
    color: var(--text-box); 
}

.pitfall-label {
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: #ff453a;
}

/* --- PROGRESS TRACKING --- */
.task-check {
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-muted);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.2s;
    color: transparent;
    /* Hide check icon by default */
    font-size: 0.7rem;
}

.task-check:hover {
    border-color: var(--accent-success);
}

.task-check.checked {
    background: var(--accent-success);
    border-color: var(--accent-success);
    color: #000;
    /* Show check icon */
}

.task-card.completed summary {
    color: var(--accent-success);
    text-decoration: line-through;
    opacity: 0.7;
}

.task-card.completed summary .task-check {
    opacity: 1;
    /* Keep check visible */
}

/* --- PHASE 4: TOPOLOGY WIDGET --- */
.topology-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.topology-map {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;             /* Reduced from 4px to tighten gaps */
    margin-top: 0px;      /* Removed the 10px top margin completely */
    transform: scale(0.9); /* The "Zoom Out" effect */
    transform-origin: top center; /* Pulls the bottom up */
    width: 100%;
}

.topo-node {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    transition: all 0.2s;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.topo-node:hover {
    background: var(--accent-primary);
    color: white;
    border-color: white;
    box-shadow: 0 0 15px var(--accent-primary);
    transform: scale(1.1);
    z-index: 10;
    /* Bring to front on hover */
}

/* Rich Tooltip styles removed from here as it's now a global element */

.topo-node:hover .topo-tooltip {
    /* Removed */
}

/* Tooltip Arrow styles removed from here as it's now a global element */

.tt-title {
    font-weight: 700;
    color: white;
    font-size: 0.8rem;
    margin-bottom: 4px;
}

.tt-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.3;
    margin-bottom: 6px;
}

.tt-meta {
    font-size: 0.65rem;
    color: var(--accent-success);
    font-family: var(--font-code);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 4px;
    border-radius: 3px;
    display: inline-block;
}

.topo-node.internet {
    color: #38bdf8;
    border-color: #38bdf8;
}

.topo-node.router {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.topo-node.switch {
    color: var(--accent-secondary);
    border-color: var(--accent-secondary);
}

.topo-node.pc {
    color: var(--accent-success);
    border-color: var(--accent-success);
}

.topo-link {
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1;
}

.topo-link.vertical {
    width: 2px;
    height: 8px;
}

.topo-link.horizontal-branch {
    width: 60px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
}

/* Little vertical drops for PCs */
.topo-link.horizontal-branch::before,
.topo-link.horizontal-branch::after {
    content: '';
    position: absolute;
    top: 0;
    width: 2px;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
}

.topo-link.horizontal-branch::before {
    left: 0;
}

.topo-link.horizontal-branch::after {
    right: 0;
}

.topo-row {
    display: flex;
    gap: 28px;
}

/* Deck Buttons */
.deck-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

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

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.2s;
}

.modal.hidden {
    opacity: 0;
    pointer-events: none;
}

.modal-content {
    width: 500px;
    max-width: 90%;
    background: #13151a;
    border: 1px solid var(--accent-primary);
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.2);
}

.modal-header {
    padding: 16px;
    border-bottom: var(--border-base);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--accent-primary);
}

.close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
}

.close-btn:hover {
    color: white;
}

.modal-body {
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.cheat-group h4 {
    margin: 0 0 8px 0;
    color: var(--accent-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
}

.cheat-group code {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 4px;
    border-radius: 3px;
    color: var(--accent-success);
    font-size: 0.75rem;
}

.cheat-group {
    font-size: 0.8rem;
    line-height: 1.8;
    color: var(--text-muted);
}

.hidden {
    display: none !important;
}

/* --- QUIZ STYLES --- */

/* 1. The Modal Container (FIXES LIGHT MODE) */
#quiz-modal .modal-content {
    background-color: var(--bg-panel-header); /* Changes to White in Light Mode */
    color: var(--text-main);                  /* Changes to Black in Light Mode */
    border: 1px solid var(--border-highlight);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* 2. The Question Text */
#quiz-question {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main); /* Ensures text is visible in all themes */
    margin-bottom: 20px;
    line-height: 1.5;
    border-left: 3px solid var(--accent-primary);
    padding-left: 16px;
}

/* 3. The Next Question Button */
#next-question {
    background-color: var(--accent-primary);
    color: #ffffff !important; /* Always white text */
    text-align: center;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
}

#next-question:hover {
    background-color: var(--accent-secondary);
}

/* 4. Options Container */
#quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 5. Option Buttons */
#quiz-options .deck-btn {
    text-align: left;
    padding: 16px;
    font-size: 0.9rem;
    font-family: var(--font-code);
    background: var(--bg-element);
    border: 1px solid transparent;
    border-radius: 6px;
    transition: all 0.2s ease;
    color: var(--text-muted);
}

#quiz-options .deck-btn:hover:not(:disabled) {
    background: var(--bg-glass-hover);
    border-color: var(--accent-primary);
    color: var(--text-main);
    transform: translateX(6px);
}

/* Success State */
#quiz-options .deck-btn.correct {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: var(--accent-success) !important;
    color: var(--accent-success) !important;
}

/* Error State */
#quiz-options .deck-btn.wrong {
    background: rgba(255, 69, 58, 0.1) !important;
    border-color: #ff453a !important;
    opacity: 0.6;
}

/* Result Text */
#quiz-result {
    font-family: var(--font-code);
    font-size: 0.95rem;
    min-height: 30px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- FIXED QUIZ & THEME OVERRIDES --- */

/* 1. Force the Modal to use the Theme Variable */
#quiz-modal .modal-content {
    background-color: var(--bg-panel-header) !important; /* Forces White in Clean Mode */
    color: var(--text-main) !important;                  /* Forces Dark Text in Clean Mode */
    border: 1px solid var(--border-highlight);
}

/* 2. Make the Question Text Readable */
#quiz-question {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main); /* Updates automatically with theme */
    margin-bottom: 20px;
    border-left: 3px solid var(--accent-primary);
    padding-left: 16px;
}

/* 3. Fix the "Next Question" Button (Always Blue, White Text) */
#next-question {
    background-color: var(--accent-primary) !important;
    color: #ffffff !important; /* Force White Text so it pops */
    border: none;
    width: 100%;
    text-align: center;
    justify-content: center;
    margin-top: 20px;
    font-weight: bold;
}

#next-question:hover {
    background-color: var(--accent-secondary) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* 4. Quiz Option Buttons */
#quiz-options .deck-btn {
    text-align: left;
    padding: 16px;
    background: var(--bg-element); /* Becomes White in Clean Mode */
    color: var(--text-muted);      /* Becomes Grey in Clean Mode */
    border: 1px solid transparent;
    border-radius: 6px;
    transition: all 0.2s ease;
}

#quiz-options .deck-btn:hover:not(:disabled) {
    background: var(--bg-glass-hover);
    border-color: var(--accent-primary);
    color: var(--text-main);
    transform: translateX(6px);
}

/* 5. Correct/Wrong States */
#quiz-options .deck-btn.correct {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: var(--accent-success) !important;
    color: var(--accent-success) !important;
}

#quiz-options .deck-btn.wrong {
    background: rgba(255, 69, 58, 0.1) !important;
    border-color: #ff453a !important;
    opacity: 0.6;
}