/* ── Get Started page ──────────────────────────────────────── */
.vscode-status-banner { margin-bottom: 28px; }
.vscode-status-banner .insight-icon { color: var(--text-muted); }
.vscode-status-banner.confirmed .insight-icon { color: var(--success); }
.vscode-status-text h3 { margin: 0 0 4px; font-size: 15px; }
.vscode-status-text p { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); }
.get-started-actions { margin: 10px 0 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.get-started-note { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; }
.prompt-card .prompt-card-head h2 { margin: 0; font-size: 15px; }
.vscode-check-status { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.vscode-check-status.checking { color: var(--text-muted); }
.vscode-check-status.found { color: var(--success); }
.prompt-grid .prompt-card p { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.ext-grid .text-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.vscode-check-status.not-found { color: var(--warning); }
.card-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.card-links .docs-link { color: var(--text-muted); }
.card-links .docs-link:hover { color: var(--text); }

/* Extensions-view preview mock */
.ext-preview { margin-bottom: 10px; }
.ext-preview summary { list-style: none; cursor: pointer; }
.ext-preview summary::-webkit-details-marker { display: none; }
.ext-preview-caret { margin-left: 8px !important; color: var(--text-muted); transition: transform .15s ease; }
.ext-preview[open] .ext-preview-caret { transform: rotate(180deg); }
.demo-ext-list { padding: 6px 0; }
.demo-ext-row { display: flex; align-items: center; gap: 12px; padding: 9px 16px; }
.demo-ext-row + .demo-ext-row { border-top: 1px solid rgba(255,255,255,.06); }
.demo-ext-icon { font-size: 16px; color: #c9d1d9; width: 20px; text-align: center; flex-shrink: 0; }
.demo-ext-meta { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.demo-ext-meta strong { font-size: 13px; color: #e6edf3; font-weight: 600; }
.demo-ext-meta span { font-size: 11px; color: #8b949e; }
.demo-ext-installed { font-size: 11.5px; font-weight: 600; color: var(--success); display: flex; align-items: center; gap: 5px; flex-shrink: 0; }

/* Status bar preview mock */
.demo-statusbar { display: flex; align-items: center; gap: 4px; padding: 0; background: var(--primary); }
.demo-statusbar-item {
    display: flex; align-items: center; gap: 7px; font-size: 12px; color: #fff; padding: 7px 12px; white-space: nowrap;
}
.demo-statusbar-spacer { flex: 1; }

/* ── Prompt Playbook ───────────────────────────────────────── */
.prompt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.prompt-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.prompt-card-link { display: block; cursor: pointer; transition: border-color .15s, transform .15s; }
.prompt-card-link:hover { border-color: var(--primary); transform: translateY(-2px); }
.prompt-card-link .prompt-card-head { position: relative; }
.prompt-card-link-icon { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.prompt-card-link:hover .prompt-card-link-icon { color: var(--primary); }
.prompt-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.prompt-icon { font-size: 20px; }
.prompt-card-head h2 { margin: 0; font-size: 16px; }
.prompt-tip { display: flex; gap: 8px; font-size: 12.5px; color: var(--text-muted); margin: 0 0 14px; align-items: flex-start; }
.prompt-tip i { color: var(--warning); margin-top: 2px; flex-shrink: 0; }
.prompt-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; align-items: start; }
.prompt-item {
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
    cursor: pointer; transition: border-color .15s, background .15s;
}
.prompt-item:hover, .prompt-item:focus-visible { border-color: var(--primary); background: rgba(99,102,241,.06); }
.prompt-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.prompt-item-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.prompt-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--primary); }
.prompt-item-actions { display: flex; gap: 4px; }
.prompt-icon-btn {
    width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border); background: transparent;
    color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.prompt-icon-btn:hover { color: var(--primary); border-color: var(--primary); }
.prompt-text { display: block; font-size: 13px; color: var(--text); white-space: pre-wrap; background: none; padding: 0; font-family: var(--font); }
.prompt-see-link {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--primary);
    margin-top: 8px;
}
.prompt-see-link:hover { text-decoration: underline; }

/* ── Prompt detail page ───────────────────────────────────── */
.prompt-detail { max-width: 760px; }
.prompt-detail-prompt {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 10px;
}
.stack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.stack-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.stack-item-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--primary); }

/* ── "See it happen" mock application window ──────────────── */
.demo-window {
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #0d1117;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.demo-titlebar {
    display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #161b22;
    border-bottom: 1px solid var(--border); font-size: 12.5px; color: #c9d1d9; font-weight: 600;
}
.demo-titlebar i { color: var(--primary); font-size: 12px; }
.demo-badge {
    margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); background: rgba(255,255,255,.06); padding: 2px 8px; border-radius: 999px;
}
.demo-replay-btn {
    display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: #c9d1d9;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 999px;
    padding: 3px 10px; cursor: pointer;
}
.demo-replay-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.demo-replay-btn i { color: inherit; font-size: 10px; }
.demo-body { padding: 14px 0; }

/* Diff / code */
.demo-code { font-family: "Cascadia Code", Consolas, monospace; font-size: 12.8px; line-height: 1.7; padding: 10px 0; }
.demo-line { display: flex; padding: 0 14px; white-space: pre; }
.demo-gutter { width: 18px; flex-shrink: 0; color: #6e7681; text-align: center; user-select: none; }
.demo-code-text { color: #c9d1d9; }
.demo-line-add { background: rgba(46,160,67,.18); }
.demo-line-add .demo-gutter { color: #3fb950; }
.demo-line-add .demo-code-text { color: #e3f7e8; }
.demo-line-del { background: rgba(248,81,73,.15); }
.demo-line-del .demo-gutter { color: #f85149; }
.demo-line-del .demo-code-text { color: #fcdbda; text-decoration: line-through; text-decoration-color: rgba(248,81,73,.5); }

/* Terminal */
.demo-terminal { font-family: "Cascadia Code", Consolas, monospace; font-size: 12.8px; line-height: 1.8; padding: 12px 14px; }
.demo-term-line { white-space: pre-wrap; color: #c9d1d9; }
.demo-term-cmd { color: #e6edf3; font-weight: 600; }
.demo-prompt-glyph { color: #3fb950; margin-right: 4px; }
.demo-term-out { color: #8b949e; padding-left: 2px; }

/* Commit box */
.demo-commit { padding: 14px 16px; }
.demo-commit-subject { color: #e6edf3; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.demo-commit-body { color: #8b949e; font-size: 12.5px; margin-bottom: 14px; }
.demo-commit-btn {
    display: inline-flex; align-items: center; gap: 6px; background: var(--primary); color: #fff; font-size: 12.5px;
    font-weight: 700; padding: 6px 14px; border-radius: 6px; width: fit-content; border: none; cursor: pointer; font-family: inherit;
}

/* Chat */
.demo-chat { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.demo-chat-row { display: flex; gap: 8px; align-items: flex-start; }
.demo-chat-user { justify-content: flex-end; }
.demo-chat-avatar {
    width: 22px; height: 22px; border-radius: 6px; background: var(--primary); color: #fff; font-size: 11px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;
}
.demo-chat-bubble {
    font-size: 13px; line-height: 1.55; padding: 8px 12px; border-radius: 10px; max-width: 480px; color: #e6edf3;
}
.demo-chat-user .demo-chat-bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 2px; }
.demo-chat-assistant .demo-chat-bubble { background: #21262d; border-bottom-left-radius: 2px; }

/* ── Animated playback states (progressive enhancement; only active once JS has run) ── */
.demo-js .demo-line-add {
    opacity: 0; transform: translateY(-3px); max-height: 0; overflow: hidden;
    transition: opacity .3s ease, transform .3s ease, max-height .3s ease;
}
.demo-js .demo-line-add.demo-reveal { opacity: 1; transform: translateY(0); max-height: 2.4em; }
.demo-js .demo-line-del { transition: opacity .35s ease, max-height .35s ease; max-height: 2.4em; overflow: hidden; }
.demo-js .demo-line-del .demo-code-text { text-decoration: none; transition: text-decoration-color .2s ease; }
.demo-js .demo-line-del.demo-removing .demo-code-text { text-decoration: line-through; text-decoration-color: rgba(252,219,218,.85); }
.demo-js .demo-line-del.demo-collapsed { opacity: 0; max-height: 0; }

.demo-js .demo-term-out {
    opacity: 0; transform: translateY(4px);
    transition: opacity .3s ease, transform .3s ease;
}
.demo-js .demo-term-out.demo-reveal { opacity: 1; transform: translateY(0); }
.demo-typing-caret::after {
    content: ''; display: inline-block; width: 6px; height: 1em; margin-left: 2px; vertical-align: text-bottom;
    background: #c9d1d9; animation: demo-caret-blink 0.9s steps(1) infinite;
}
@keyframes demo-caret-blink { 50% { opacity: 0; } }

.demo-js .demo-chat-row { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
.demo-js .demo-chat-row.demo-reveal { opacity: 1; transform: translateY(0); }
.demo-typing-row { display: none; }
.demo-js .demo-typing-row { display: flex; }
.demo-typing-dots { display: flex; align-items: center; gap: 4px; padding: 10px 14px !important; }
.demo-typing-dots span {
    width: 6px; height: 6px; border-radius: 50%; background: #8b949e; display: inline-block;
    animation: demo-typing-bounce 1.1s infinite ease-in-out;
}
.demo-typing-dots span:nth-child(2) { animation-delay: .15s; }
.demo-typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes demo-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.demo-js .demo-commit-body { opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; }
.demo-js .demo-commit-body.demo-reveal { opacity: 1; transform: translateY(0); }
.demo-js .demo-commit-btn { transition: background .25s ease, transform .2s ease; }
.demo-js .demo-commit-btn.demo-pulse { background: var(--success); transform: scale(1.05); }

/* ── Before vs. after metrics card ─────────────────────────── */
.metrics-card {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch;
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.metrics-col { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.metrics-col-before { background: var(--bg-card); }
.metrics-col-after { background: linear-gradient(160deg, rgba(99,102,241,.14), rgba(34,197,94,.08)); }
.metrics-col-head { font-size: 13px; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.metrics-col-after .metrics-col-head { color: var(--primary); }
.metrics-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text); }
.metrics-row i { width: 16px; color: var(--text-muted); text-align: center; }
.metrics-col-after .metrics-row i { color: var(--primary); }
.metrics-value { font-weight: 600; }
.metrics-vs {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 0 22px; background: var(--bg-elevated); border-left: 1px solid var(--border); border-right: 1px solid var(--border);
}
.metrics-speedup { font-size: 22px; font-weight: 800; color: var(--success); white-space: nowrap; }
.metrics-speedup-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.metrics-disclaimer { font-size: 11.5px; color: var(--text-muted); display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; }
.metrics-disclaimer i { margin-top: 2px; flex-shrink: 0; }
@media (max-width: 560px) {
    .metrics-card { grid-template-columns: 1fr; }
    .metrics-vs { flex-direction: row; padding: 10px 20px; border-left: none; border-right: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
}

.stack-item p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.prompt-detail-text-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: 8px; }
.prompt-text-lg { font-size: 15px; line-height: 1.5; flex: 1; }
.prompt-detail h2 { font-size: 16px; margin: 26px 0 12px; display: flex; align-items: center; gap: 8px; }
.prompt-detail h2 i { color: var(--primary); font-size: 14px; }
.prompt-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.prompt-steps li { padding-left: 4px; }
.prompt-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-chip {
    font-size: 12px; font-weight: 600; color: var(--text); background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 999px; padding: 5px 12px;
}
.prompt-outcome { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--success); border-radius: 0 10px 10px 0; padding: 14px 16px; font-size: 14px; color: var(--text); }
.prompt-outcome p { margin: 0; }
.prompt-outcome p + p { margin-top: 10px; }
.prompt-detail-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 30px; }

/* ── Training index: curriculum catalog ──────────────────── */
.curriculum-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(99,102,241,.02));
    border: 1px solid var(--border); border-radius: 16px; padding: 30px 32px; margin-bottom: 20px;
}
.curriculum-eyebrow {
    display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--primary); margin-bottom: 8px;
}
.curriculum-hero-text h1 { font-family: var(--font-serif); font-size: 32px; font-weight: 600; margin: 0 0 10px; }
.curriculum-hero-text p { margin: 0; color: var(--text-muted); font-size: 14.5px; max-width: 480px; line-height: 1.6; }
.curriculum-stats { display: flex; align-items: stretch; gap: 26px; flex-wrap: wrap; }
.curriculum-stat { display: flex; flex-direction: column; align-items: flex-start; min-width: 76px; }
.curriculum-stat-num { font-family: var(--font-serif); font-size: 28px; font-weight: 600; color: var(--text); line-height: 1.1; }
.curriculum-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-top: 4px; }
.curriculum-stat-progress { min-width: 130px; }
.curriculum-progress-track { width: 100%; height: 5px; border-radius: 4px; background: var(--border); overflow: hidden; margin-top: 8px; }
.curriculum-progress-fill { height: 100%; background: var(--success); border-radius: 4px; }

.curriculum-toc {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.curriculum-toc a {
    display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted);
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px 7px 8px;
}
.curriculum-toc a:hover { color: var(--text); border-color: var(--accent, var(--primary)); }
.curriculum-toc-num {
    display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent, var(--primary)); color: #0b0f17; font-size: 10px; font-weight: 700;
}

.curriculum-track { margin-bottom: 40px; scroll-margin-top: 20px; }
.track-head { display: flex; align-items: flex-start; gap: 18px; padding-bottom: 16px; border-bottom: 2px solid var(--accent, var(--border)); margin-bottom: 18px; }
.track-number { font-family: var(--font-serif); font-size: 40px; font-weight: 600; color: var(--accent, var(--primary)); line-height: 1; flex-shrink: 0; }
.track-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 4px; }
.track-badge { background: var(--accent, var(--primary)); color: #0b0f17; padding: 2px 9px; border-radius: 999px; font-size: 10px; }
.track-text h2 { font-family: var(--font-serif); font-size: 22px; font-weight: 600; margin: 0 0 6px; }
.track-text p { margin: 0; color: var(--text-muted); font-size: 13.5px; max-width: 620px; }

.syllabus-list { display: flex; flex-direction: column; gap: 10px; }
.syllabus-row {
    display: flex; align-items: center; gap: 20px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px 20px; transition: border-color .15s, transform .15s;
}
.syllabus-row:hover { border-color: var(--accent, var(--primary)); transform: translateX(2px); }
.syllabus-code {
    font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--text-muted); flex-shrink: 0;
    width: 40px; text-align: center;
}
.syllabus-body { flex: 1; min-width: 0; }
.syllabus-body h3 { margin: 0 0 4px; font-size: 15px; }
.syllabus-body p { margin: 0 0 8px; color: var(--text-muted); font-size: 13px; }
.syllabus-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }
.syllabus-status { display: flex; align-items: center; gap: 14px; flex-shrink: 0; width: 150px; }
.syllabus-status .progress-bar { flex: 1; }
.syllabus-arrow { color: var(--text-muted); font-size: 12px; }
.status-pill {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
    color: var(--text-muted); background: rgba(255,255,255,.06); padding: 3px 9px; border-radius: 999px;
}
.syllabus-row.status-completed .status-pill { color: var(--success); background: rgba(34,197,94,.12); }
.syllabus-row.status-in-progress .status-pill { color: var(--primary); background: rgba(99,102,241,.14); }
.syllabus-row.status-completed .syllabus-code { color: var(--success); }
@media (max-width: 760px) {
    .syllabus-row { flex-wrap: wrap; }
    .syllabus-status { width: 100%; }
}

/* ── Training index: Projects track ──────────────────────── */
.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
.project-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.project-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.project-card-head h3 { margin: 0 0 2px; font-size: 16px; }
.project-tagline { margin: 0; font-size: 12.5px; color: var(--accent, var(--primary)); font-weight: 600; }
.project-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 0 0 10px; }
.project-why { display: flex; gap: 8px; font-size: 12.5px; color: var(--text-muted); margin: 0 0 14px; align-items: flex-start; }
.project-why i { color: var(--warning); margin-top: 2px; flex-shrink: 0; }
.project-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.project-meta i { margin-right: 4px; }
.project-subhead { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 18px 0 8px; }
.project-setup { font-size: 13px; }
.project-prompts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.project-prompts code {
    display: block; font-size: 12.5px; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 8px; padding: 9px 12px; white-space: pre-wrap; font-family: var(--font);
}
.project-lesson-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; }

/* ── Lesson list on /training/module/<id> ─────────────────── */
.lesson-list { display: flex; flex-direction: column; gap: 8px; }
.lesson-row {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
}
.lesson-row:hover { border-color: var(--primary); }
.lesson-row.done { border-left: 3px solid var(--success); }
.lesson-row-num {
    width: 28px; height: 28px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;
}
.lesson-row.done .lesson-row-num { background: transparent; border: none; color: var(--success); }
.lesson-row-title { flex: 1; font-weight: 600; font-size: 14px; }
.lesson-row-meta { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.lesson-row-arrow { color: var(--text-muted); font-size: 12px; }

/* ── Lesson page layout ────────────────────────────────────── */
.lesson-layout { display: grid; grid-template-columns: 1fr 300px; gap: 26px; align-items: start; }
@media (max-width: 860px) { .lesson-layout { grid-template-columns: 1fr; } }

.lesson-header h1 { margin: 0 0 10px; font-size: 24px; }
.lesson-meta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.meta-pill {
    font-size: 12px; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border);
    padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
}

/* TTS player */
.tts-player {
    display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; padding: 10px 14px; margin-bottom: 20px; flex-wrap: wrap;
}
.tts-controls { display: flex; gap: 6px; }
.tts-btn {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated);
    color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.tts-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.tts-btn:disabled { opacity: .4; cursor: default; }
.tts-btn-main { background: var(--primary); border-color: var(--primary); color: #fff; }
.tts-progress-wrap { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 4px; }
.tts-progress-bar { height: 5px; border-radius: 4px; background: var(--border); overflow: hidden; }
.tts-progress-fill { height: 100%; width: 0; background: var(--primary); transition: width .15s linear; }
.tts-counter { font-size: 11px; color: var(--text-muted); }
.tts-select {
    background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
    font-size: 12px; padding: 5px 8px; max-width: 160px;
}

/* Lesson content (readable prose) */
.lesson-content { font-size: 15px; color: var(--text); }
.lesson-content h1 { font-size: 22px; margin: 0 0 14px; }
.lesson-content h2 { font-size: 18px; margin: 26px 0 10px; color: var(--text); }
.lesson-content h3 { font-size: 15px; margin: 18px 0 8px; color: var(--text); }
.lesson-content p { color: var(--text); margin: 0 0 14px; transition: background .2s; border-radius: 4px; }
.lesson-content li { margin-bottom: 6px; }
.lesson-content blockquote {
    border-left: 3px solid var(--primary); background: var(--bg-card); padding: 10px 16px; margin: 16px 0;
    color: var(--text-muted); border-radius: 0 8px 8px 0; font-style: italic;
}
.lesson-content table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13.5px; }
.lesson-content th, .lesson-content td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.lesson-content th { background: var(--bg-card); }
.lesson-content code { background: var(--bg-card); padding: 1px 6px; border-radius: 4px; font-size: 13px; }
.lesson-content pre { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 14px; overflow-x: auto; }
.lesson-content pre code { background: none; padding: 0; }
.lesson-content .tts-speaking { background: rgba(99, 102, 241, 0.16); box-shadow: 0 0 0 1px rgba(99,102,241,.3); }

/* Quiz */
.lesson-quiz { margin-top: 30px; padding: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.quiz-title { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.quiz-subtitle { color: var(--text-muted); font-size: 13px; margin-bottom: 18px; }
.quiz-question { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.quiz-question:last-of-type { border-bottom: none; }
.quiz-q-header { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.quiz-q-text { font-weight: 600; margin-bottom: 12px; font-size: 14.5px; }
.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.quiz-option {
    display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 8px;
    border: 1px solid var(--border); font-size: 13.5px; cursor: pointer;
}
.quiz-option:hover { border-color: var(--primary); }
.quiz-option input { margin-top: 3px; }
.quiz-option.correct-answer { border-color: var(--success); background: rgba(34,197,94,.08); }
.quiz-option.wrong-answer { border-color: var(--danger); background: rgba(239,68,68,.08); }
.quiz-explanation { font-size: 13px; color: var(--text-muted); margin-top: 10px; display: none; padding: 10px 12px; background: var(--bg-elevated); border-radius: 8px; }
.quiz-explanation.show { display: block; }
.quiz-actions { margin-top: 6px; }
.quiz-score { margin-top: 14px; font-size: 14px; font-weight: 600; }
#scoreMsg { font-size: 13px; color: var(--text-muted); font-weight: 400; margin-left: 8px; }

/* Lesson nav */
.lesson-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.lesson-nav-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--bg-card); font-size: 13.5px; font-weight: 600;
}
.lesson-nav-btn:hover { border-color: var(--primary); }
.mark-complete-btn {
    padding: 10px 16px; border-radius: 10px; border: 1px solid var(--success); background: transparent;
    color: var(--success); font-weight: 700; cursor: pointer; font-size: 13.5px; display: inline-flex; align-items: center; gap: 8px;
}
.mark-complete-btn.done, .mark-complete-btn:disabled { background: rgba(34,197,94,.12); cursor: default; }
.mark-complete-btn:hover:not(:disabled) { background: rgba(34,197,94,.12); }

/* Notes panel */
.notes-panel {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 78px;
}
.notes-header { display: flex; align-items: center; justify-content: space-between; }
.notes-header h3 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.notes-all-link { font-size: 12px; color: var(--primary); }
.notes-toolbar { display: flex; gap: 8px; }
.notes-tool-btn {
    font-size: 12px; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-muted);
    border-radius: 8px; padding: 6px 10px; cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.notes-tool-btn:hover { color: var(--text); border-color: var(--primary); }
.notes-tool-btn.recording { color: var(--danger); border-color: var(--danger); }
.notes-editor {
    width: 100%; min-height: 220px; resize: vertical; background: var(--bg-elevated); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-size: 13.5px; font-family: inherit;
}
.notes-footer { font-size: 11px; color: var(--text-muted); }

/* Notes list page */
.notes-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.note-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: block; }
.note-card:hover { border-color: var(--primary); }
.note-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.note-card-date { font-size: 11px; color: var(--text-muted); }
.note-card h3 { margin: 0 0 6px; font-size: 14.5px; }
.note-card p { margin: 0; color: var(--text-muted); font-size: 13px; }