:root {
    --bg: #0f172a;
    --sidebar: #1e293b;
    --card: #1e293b;
    --text: #f8fafc;
    --muted: #94a3b8;
    --accent: #38bdf8;
    --border: #334155;
    --terminal: #000;
    --code-bg: #0b1222;
    --token-keyword: #c678dd;
    --token-string: #98c379;
    --token-comment: #5c6370;
    --token-number: #d19a66;
    --token-func: #61afef;
    --sb-track: #0f172a;
    --sb-thumb: #334155;
}

[data-theme="amethyst"] { --bg: #1a0b2e; --sidebar: #240e3f; --card: #2d1250; --text: #f3e8ff; --muted: #a78bfa; --accent: #d8b4fe; --border: #4c1d95; --terminal: #0f051a; --code-bg: #1a0b2e; --token-keyword: #f472b6; --token-string: #fbbf24; --token-comment: #a78bfa80; --token-number: #818cf8; --token-func: #c084fc; --sb-track: #1a0b2e; --sb-thumb: #4c1d95; }
[data-theme="light"] { --bg: #ffffff; --sidebar: #f1f5f9; --card: #f8fafc; --text: #0f172a; --muted: #475569; --accent: #0284c7; --border: #e2e8f0; --terminal: #5a687e; --code-bg: #f8fafc; --token-keyword: #7c3aed; --token-string: #16a34a; --token-comment: #94a3b8; --token-number: #ea580c; --token-func: #2563eb; --sb-track: #f1f5f9; --sb-thumb: #cbd5e1; }
[data-theme="paper"] { --bg: #fdfaf3; --sidebar: #f0ede4; --card: #fcfaf7; --text: #80351a; --muted: #55542e; --accent: #2d35a0; --border: #dcd7c9; --terminal: #615d59; --code-bg: #918b7f; --token-keyword: #8b0000; --token-string: #2e8b57; --token-comment: #a0a0a0; --token-number: #b8860b; --token-func: #000080; --sb-track: #f0ede4; --sb-thumb: #dcd7c9; }
[data-theme="royal"] { --bg: #0a1128; --sidebar: #101935; --card: #141e46; --text: #e1eaf2; --muted: #8da9c4; --accent: #f8b400; --border: #1b2a4e; --terminal: #050a18; --code-bg: #0a1128; --token-keyword: #ff9f1c; --token-string: #2ec4b6; --token-comment: #8da9c480; --token-number: #e71d36; --token-func: #ffbf00; --sb-track: #0a1128; --sb-thumb: #1b2a4e; }
[data-theme="antique"] { --bg: #3d2b1f; --sidebar: #2b1e16; --card: #4a3526; --text: #f4ecd8; --muted: #bdae93; --accent: #e2725b; --border: #5a4030; --terminal: #1a120b; --code-bg: #3d2b1f; --token-keyword: #e2725b; --token-string: #8ec07c; --token-comment: #928374; --token-number: #d3869b; --token-func: #fabd2f; --sb-track: #2b1e16; --sb-thumb: #5a4030; }
[data-theme="nordic"] { --bg: #2e3440; --sidebar: #3b4252; --card: #434c5e; --text: #eceff4; --muted: #d8dee9; --accent: #88c0d0; --border: #4c566a; --terminal: #242933; --code-bg: #2e3440; --token-keyword: #81a1c1; --token-string: #a3be8c; --token-comment: #616e88; --token-number: #b48ead; --token-func: #88c0d0; --sb-track: #2e3440; --sb-thumb: #4c566a; }
[data-theme="cyber"] { --bg: #050505; --sidebar: #0a0a0a; --card: #111; --text: #00ff41; --muted: #008f11; --accent: #00ff41; --border: #00ff41; --terminal: #000; --code-bg: #000; --token-keyword: #00ff41; --token-string: #00ff41; --token-comment: #004400; --token-number: #00ff41; --token-func: #00ff41; --sb-track: #050505; --sb-thumb: #00ff41; }
[data-theme="forest"] { --bg: #061e16; --sidebar: #0b2e24; --card: #0f3d31; --text: #e1f5fe; --muted: #80cbc4; --accent: #4db6ac; --border: #1de9b6; --terminal: #00120b; --code-bg: #061e16; --token-keyword: #d4e157; --token-string: #81c784; --token-comment: #4db6ac80; --token-number: #ffb74d; --token-func: #4fc3f7; --sb-track: #061e16; --sb-thumb: #0b2e24; }
[data-theme="ember"] { --bg: #1c0a0a; --sidebar: #2d1414; --card: #3d1b1b; --text: #fff5f5; --muted: #e57373; --accent: #ff8a65; --border: #4a2525; --terminal: #0d0404; --code-bg: #1c0a0a; --token-keyword: #ffb74d; --token-string: #81c784; --token-comment: #e5737380; --token-number: #ce93d8; --token-func: #ff8a65; --sb-track: #1c0a0a; --sb-thumb: #4a2525; }
[data-theme="ocean"] { --bg: #002233; --sidebar: #003344; --card: #004455; --text: #e1f5fe; --muted: #81d4fa; --accent: #4fc3f7; --border: #006677; --terminal: #001122; --code-bg: #002233; --token-keyword: #80cbc4; --token-string: #fff59d; --token-comment: #81d4fa80; --token-number: #f48fb1; --token-func: #4fc3f7; --sb-track: #002233; --sb-thumb: #006677; }

/* GLOBAL */
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    transition: background 0.3s, color 0.3s;
}
.font-mono { font-family: 'Fira Code', monospace; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--sb-track); }
::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 10px; border: 2px solid var(--sb-track); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Sidebar */
.sidebar { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.sidebar-item {
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}
.sidebar-item.active {
    background: linear-gradient(90deg, rgba(56,189,248,0.2), transparent);
    border-left-color: var(--accent);
    color: var(--accent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Syntax highlighting */
.token-keyword { color: var(--token-keyword); font-weight: 600; }
.token-string { color: var(--token-string); }
.token-comment { color: var(--token-comment); font-style: italic; }
.token-number { color: var(--token-number); }
.token-func { color: var(--token-func); }

/* Analogy box */
.analogy-box {
    border-left: 4px solid var(--accent);
    background: linear-gradient(135deg, rgba(56,189,248,0.08), rgba(56,189,248,0.02));
    transition: all 0.3s;
}
.analogy-box:hover {
    background: rgba(56,189,248,0.12);
    transform: translateX(8px);
}

/* Button focus */
button:focus { outline: none; }
button:focus-visible, select:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Premium Editor */
.premium-editor {
    background: var(--code-bg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5) !important;
    position: relative;
    z-index: 10;
}
.max-w-3xl { max-width: 70rem !important; }

/* Copy button */
.copy-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11px;
    font-family: monospace;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text);
    opacity: 0.7;
}
.copy-btn:hover {
    opacity: 1;
    background: rgba(255,255,255,0.2);
    transform: scale(1.02);
}
.copy-btn.copied {
    background: var(--accent);
    color: #000;
    opacity: 1;
}

/* Loading skeleton */
.skeleton {
    background: linear-gradient(90deg, var(--border) 25%, rgba(255,255,255,0.1) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 8px;
}
@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Inline code */
.inline-code {
    background: rgba(56, 189, 248, 0.1);
    border-radius: 6px;
    padding: 2px 6px;
    font-family: 'Fira Code', monospace;
    font-size: 0.9em;
    white-space: normal;
    word-break: break-word;
}
.prose strong {
    color: var(--accent);
    font-weight: 700;
}

/* ===== CONSOLE ===== */
#console-container {
    backdrop-filter: blur(4px);
    box-shadow: 0 20px 35px -10px rgba(0,0,0,0.5);
    border-radius: 12px;
    overflow: hidden;
}
#console-container.hidden { display: none !important; }
#console-header {
    cursor: grab;
    user-select: none;
}
#console-header:active { cursor: grabbing; }
#console-body {
    font-family: 'Fira Code', monospace;
    font-size: 13px;
    line-height: 1.5;
}
#console-resizer {
    background: linear-gradient(135deg, transparent 50%, var(--accent) 50%);
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    opacity: 0.4;
    transition: opacity 0.2s;
    pointer-events: auto;
}
#console-resizer:hover {
    opacity: 1;
    background: linear-gradient(135deg, transparent 50%, var(--accent) 80%);
}

/* Desktop console (floating) */
@media (min-width: 641px) {
    #console-container {
        position: fixed;
        bottom: 100px;
        left: 50%;
        margin-left: -250px;
        background: var(--terminal);
        border: 1px solid var(--border);
        min-width: 300px;
        width: 500px;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }
}

/* Mobile console (inline) */
@media (max-width: 640px) {
    #console-container {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        margin: 1.5rem 0 0 0 !important;
        width: 100% !important;
        transform: none !important;
        min-width: auto !important;
        height: auto !important;
        min-height: 250px;
        max-height: 60vh;
    }
    #console-resizer { display: none !important; }
    #console-body { max-height: 250px; overflow-y: auto; }
}

/* ===== NAVIGATION BUTTONS ===== */
#prev-lesson, #next-lesson {
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#next-lesson { box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3); }
#next-lesson:hover { transform: translateX(4px); }
#prev-lesson:hover { transform: translateX(-4px); }

/* ===== MOBILE TEXT WRAP FIXES ===== */
@media (max-width: 640px) {
    .prose p, .analogy-box, .prose strong, .prose em {
        word-break: normal !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        hyphens: auto;
    }
    .prose { max-width: 100% !important; overflow-x: hidden !important; }
    #active-content { overflow-x: hidden !important; padding: 0 0.5rem; }
    .inline-code {
        white-space: normal !important;
        word-break: break-word !important;
        display: inline-block;
        max-width: 100%;
    }
    .analogy-box {
        font-size: 0.95rem;
        padding: 1rem;
        word-break: normal !important;
    }
    .premium-editor pre {
        font-size: 12px;
        padding: 1rem;
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-word;
    }
    #prev-lesson, #next-lesson {
        padding: 10px 16px;
        font-size: 14px;
        justify-content: center;
        width: 100%;
    }
    .max-w-3xl.mx-auto.mt-12.flex {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* Also apply to desktop to be safe */
.prose p, .analogy-box {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}
body, .prose, #active-content {
    word-break: normal;
}

/* Desktop console (floating, draggable) */
@media (min-width: 641px) {
    #console-container {
        position: fixed !important;
        bottom: 100px !important;
        left: 50% !important;
        margin-left: -250px !important;
        background: var(--terminal);
        border: 1px solid var(--border);
        min-width: 300px;
        width: 500px;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        resize: both;
        overflow: auto;
    }
    #console-resizer {
        display: block !important;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 16px;
        height: 16px;
        background: linear-gradient(135deg, transparent 50%, var(--accent) 50%);
        cursor: nwse-resize;
        z-index: 1001;
    }
}