:root {
    --bg-void: #0a0e14;
    --bg-terminal: #10151c;
    --bg-panel: #141a22;
    --bg-elevated: #1a212b;
    --border: #232b36;
    --border-soft: #1c232d;
    --text: #d7dee6;
    --text-dim: #79828e;
    --text-faint: #4b5563;
    --keyword: #6ee7a8;
    --string: #f2b866;
    --function: #6fb6ff;
    --danger: #ff6b6b;
    --success: #6ee7a8;
    --cursor: #f2b866;
    --dot-red: #ff5f57;
    --dot-yellow: #febc2e;
    --dot-green: #28c840;
    --radius: 10px;
    --mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "Courier New", monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body[data-theme="light"] {
    --bg-void: #eef1f4;
    --bg-terminal: #ffffff;
    --bg-panel: #f6f8fa;
    --bg-elevated: #eef0f3;
    --border: #dde2e8;
    --border-soft: #e7eaee;
    --text: #1b2430;
    --text-dim: #5b6470;
    --text-faint: #93999f;
    --keyword: #14804a;
    --string: #a05a06;
    --function: #1462b0;
    --danger: #c62f2f;
    --success: #14804a;
    --cursor: #a05a06;
}

body[data-theme="dracula"] {
    --bg-void: #191a21;
    --bg-terminal: #282a36;
    --bg-panel: #21222c;
    --bg-elevated: #343746;
    --border: #44475a;
    --border-soft: #3a3d4d;
    --text: #f8f8f2;
    --text-dim: #b6b8c2;
    --text-faint: #6272a4;
    --keyword: #50fa7b;
    --string: #f1fa8c;
    --function: #8be9fd;
    --danger: #ff5555;
    --success: #50fa7b;
    --cursor: #f1fa8c;
}

body[data-theme="matrix"] {
    --bg-void: #000000;
    --bg-terminal: #020402;
    --bg-panel: #040a04;
    --bg-elevated: #081208;
    --border: #0f3d0f;
    --border-soft: #0a2a0a;
    --text: #00ff41;
    --text-dim: #0dbb35;
    --text-faint: #086b1f;
    --keyword: #00ff41;
    --string: #39ff6a;
    --function: #00cc33;
    --danger: #ff3b3b;
    --success: #00ff41;
    --cursor: #00ff41;
}

body[data-theme="solarized"] {
    --bg-void: #001e26;
    --bg-terminal: #002b36;
    --bg-panel: #073642;
    --bg-elevated: #0a4552;
    --border: #0e5a68;
    --border-soft: #0a4552;
    --text: #eee8d5;
    --text-dim: #93a1a1;
    --text-faint: #657b83;
    --keyword: #b58900;
    --string: #2aa198;
    --function: #268bd2;
    --danger: #dc322f;
    --success: #859900;
    --cursor: #b58900;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 16px;
    background: var(--bg-void);
    background-image:
        radial-gradient(circle at 15% 10%, rgba(110, 231, 168, 0.06), transparent 40%),
        radial-gradient(circle at 85% 90%, rgba(111, 182, 255, 0.06), transparent 40%);
    color: var(--text);
    font-family: var(--sans);
    transition: background-color 0.3s ease, color 0.3s ease;
}

#app {
    width: 100%;
    max-width: 620px;
}

#terminal {
    background: var(--bg-terminal);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    animation: bootUp 0.5s ease both;
}

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

#titlebar {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
}

.dots { display: flex; gap: 7px; flex: 0 0 auto; }
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dot.red { background: var(--dot-red); }
.dot.yellow { background: var(--dot-yellow); }
.dot.green { background: var(--dot-green); }

#titlebar-text {
    flex: 1;
    text-align: center;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 0.02em;
}

#titlebar-controls { display: flex; gap: 4px; flex: 0 0 auto; }

.icon-btn {
    background: transparent;
    border: none;
    font-size: 15px;
    padding: 4px 7px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s ease;
}
.icon-btn:hover { background: var(--bg-elevated); }

.icon-btn-wrap { position: relative; }
.icon-tooltip {
    position: absolute;
    top: 130%;
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--mono);
    font-size: 11px;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 6px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 50;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.icon-tooltip.show { opacity: 1; transform: translateY(0); }
.icon-btn-wrap:hover .icon-tooltip { opacity: 1; transform: translateY(0); }

#screen { padding: 22px 24px 26px; }

#breadcrumb {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--text-faint);
    margin-bottom: 18px;
}
#breadcrumb-cmd { color: var(--text-dim); }

.hidden { display: none !important; }

/* CHAPTER SELECT */
#chapter-select h1 {
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--keyword);
    margin: 0 0 4px;
}
.subtitle {
    font-family: var(--mono);
    color: var(--text-dim);
    font-size: 13px;
    margin: 0 0 20px;
}

#chapter-list { display: grid; gap: 9px; }

.category-header {
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--function);
    margin: 14px 0 2px;
}
.category-header:first-child { margin-top: 0; }

.file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 13px 15px;
    font-family: var(--mono);
    font-size: 14.5px;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    text-align: left;
}
.file-item:hover {
    border-color: var(--keyword);
    background: var(--bg-elevated);
    transform: translateX(3px);
}
.file-icon { color: var(--function); flex: 0 0 auto; }
.file-title { flex: 1; }
.file-scores {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    align-items: center;
}
.file-tag {
    font-size: 11.5px;
    color: var(--text-faint);
    flex: 0 0 auto;
}
.file-tag.has-best { color: var(--string); }
.file-tag.global-tag { color: var(--function); }

/* PROGRESS */
#progress-container { margin-bottom: 16px; }
#progress-label {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 6px;
}
#progress-track {
    height: 8px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 5px;
    overflow: hidden;
}
#progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--keyword), var(--function));
    border-radius: 5px;
    transition: width 0.4s ease;
}

/* STATS */
#stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 9px 13px;
    margin-bottom: 16px;
}
.green { color: var(--success); }
.red { color: var(--danger); }
#stat-streak { color: var(--string); transition: transform 0.15s ease; }
#stat-streak.pulse { animation: pulseStreak 0.3s ease; }
@keyframes pulseStreak { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* QUESTION */
.terminal-line {
    font-family: var(--mono);
    font-size: 16px;
    line-height: 1.65;
    white-space: pre-wrap;
    text-align: left;
    background: var(--bg-panel);
    border-left: 3px solid var(--keyword);
    border-radius: 0 8px 8px 0;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.prompt { color: var(--keyword); font-weight: 700; margin-right: 8px; }
.cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    vertical-align: text-bottom;
    background: var(--cursor);
    animation: blink 1s step-end infinite;
    margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

#choices { display: grid; gap: 9px; margin-bottom: 14px; }

.choice-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 13px 15px;
    font-family: var(--mono);
    font-size: 15px;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.choice-btn:hover:not(:disabled) {
    border-color: var(--function);
    background: var(--bg-elevated);
    transform: translateX(3px);
}
.choice-btn:disabled { cursor: default; }
.key-hint {
    font-size: 11px;
    color: var(--text-faint);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    flex: 0 0 auto;
}
.choice-btn.correct {
    border-color: var(--success);
    background: rgba(110, 231, 168, 0.1);
    color: var(--success);
}
.choice-btn.correct .key-hint { border-color: var(--success); color: var(--success); }
.choice-btn.wrong {
    border-color: var(--danger);
    background: rgba(255, 107, 107, 0.1);
    color: var(--danger);
    animation: shake 0.35s ease;
}
.choice-btn.wrong .key-hint { border-color: var(--danger); color: var(--danger); }
@keyframes shake {
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
    100% { transform: translateX(0); }
}

#feedback {
    font-family: var(--mono);
    font-size: 13.5px;
    white-space: pre-wrap;
    line-height: 1.5;
    padding: 0;
    min-height: 0;
    margin-bottom: 4px;
}
#feedback.correct, #feedback.wrong {
    padding: 11px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    border-left: 3px solid;
}
#feedback.correct { background: rgba(110, 231, 168, 0.08); border-color: var(--success); color: var(--success); }
#feedback.wrong { background: rgba(255, 107, 107, 0.08); border-color: var(--danger); color: var(--danger); }

#question-controls { display: flex; gap: 10px; margin-top: 4px; }

.primary-btn {
    background: var(--keyword);
    color: #08110c;
    font-weight: 700;
    border: none;
    padding: 13px 20px;
    border-radius: 8px;
    font-family: var(--mono);
    font-size: 14.5px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(110, 231, 168, 0.3); }

.ghost-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 13px 20px;
    border-radius: 8px;
    font-family: var(--mono);
    font-size: 14.5px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.ghost-btn:hover { border-color: var(--text-dim); color: var(--text); }

button:focus-visible, .file-item:focus-visible {
    outline: 2px solid var(--function);
    outline-offset: 2px;
}

/* RESULT */
#result-box { text-align: center; }
.commit-line {
    font-family: var(--mono);
    font-size: 30px;
    font-weight: 800;
    color: var(--keyword);
    letter-spacing: 0.02em;
    margin-bottom: 2px;
}
.commit-sub { font-family: var(--mono); color: var(--text-dim); font-size: 13px; margin: 0 0 18px; }

#grade-badge { margin-bottom: 18px; }
.grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    font-family: var(--mono);
    font-size: 28px;
    font-weight: 800;
    border: 2px solid;
}
.grade-a { color: var(--success); border-color: var(--success); background: rgba(110, 231, 168, 0.08); }
.grade-b { color: var(--function); border-color: var(--function); background: rgba(111, 182, 255, 0.08); }
.grade-c { color: var(--string); border-color: var(--string); background: rgba(242, 184, 102, 0.08); }
.grade-d, .grade-f { color: var(--danger); border-color: var(--danger); background: rgba(255, 107, 107, 0.08); }

#result-stats {
    display: grid;
    gap: 8px;
    text-align: left;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
    font-family: var(--mono);
    font-size: 13.5px;
}
.result-row { display: flex; justify-content: space-between; }
.result-row.new-best {
    justify-content: center;
    color: var(--string);
    font-weight: 700;
    padding-top: 4px;
    border-top: 1px solid var(--border-soft);
    margin-top: 4px;
}

.result-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.result-actions button { flex: 1 1 auto; min-width: 120px; }

/* REVIEW */
#review-box h2 {
    font-family: var(--mono);
    color: var(--keyword);
    font-size: 19px;
    margin: 0 0 14px;
}
#review-list { display: grid; gap: 10px; margin-bottom: 18px; }

.review-item {
    display: flex;
    gap: 12px;
    text-align: left;
    padding: 12px 14px;
    background: var(--bg-panel);
    border-radius: 8px;
    border-left: 4px solid var(--success);
}
.review-item.review-wrong { border-left-color: var(--danger); }
.review-icon { font-size: 16px; flex: 0 0 auto; }
.review-item.review-wrong .review-icon { color: var(--danger); }
.review-item:not(.review-wrong) .review-icon { color: var(--success); }
.review-body { flex: 1; }
.review-q { font-family: var(--mono); font-size: 14px; margin-bottom: 6px; }
.review-a { font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); }

/* TOAST */
#toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--mono);
    font-size: 13px;
    padding: 12px 18px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 10000;
    max-width: 90vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

#confetti-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
}

@media (max-width: 480px) {
    #screen { padding: 18px 16px 20px; }
    #chapter-select h1 { font-size: 19px; }
    .terminal-line { font-size: 14.5px; padding: 13px 14px; }
    .choice-btn { font-size: 14px; padding: 12px 13px; }
    #stats { font-size: 11.5px; padding: 8px 10px; }
    .commit-line { font-size: 25px; }
    .result-actions button { min-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* TIMER */
#stat-timer { color: var(--function); }

/* LEADERBOARD SUBMIT FORM */
#leaderboard-submit {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
#player-name-input {
    flex: 1;
    min-width: 140px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    font-family: var(--mono);
    font-size: 14px;
    color: var(--text);
}
#player-name-input:focus {
    outline: none;
    border-color: var(--function);
}
#player-name-input::placeholder { color: var(--text-faint); }

/* LEADERBOARD LIST */
#leaderboard-box h2 {
    font-family: var(--mono);
    color: var(--keyword);
    font-size: 19px;
    margin: 0 0 14px;
    text-align: center;
}
#leaderboard-list { display: grid; gap: 7px; margin-bottom: 18px; }

.lb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: 13.5px;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 10px 14px;
}
.lb-rank { flex: 0 0 32px; color: var(--text-dim); font-weight: 700; }
.lb-row:nth-child(1) .lb-rank { color: #ffd75e; }
.lb-row:nth-child(2) .lb-rank { color: #c9d2da; }
.lb-row:nth-child(3) .lb-rank { color: #d99a5b; }
.lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-pct { flex: 0 0 auto; color: var(--success); font-weight: 700; }
.lb-time { flex: 0 0 auto; color: var(--text-dim); }

.lb-empty, .lb-loading {
    font-family: var(--mono);
    font-size: 13.5px;
    color: var(--text-dim);
    text-align: center;
    padding: 20px 10px;
}

/* PLAYER NAME ROW */
#player-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.player-label {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text-dim);
    flex: 0 0 auto;
}
#main-player-name {
    flex: 1;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    font-family: var(--mono);
    font-size: 13.5px;
    color: var(--text);
}
#main-player-name:focus { outline: none; border-color: var(--function); }
#main-player-name::placeholder { color: var(--text-faint); }

/* ACCOUNT MODAL */
#account-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10003;
    opacity: 0;
    transition: opacity 0.2s ease;
}
#account-overlay.show { opacity: 1; }

#account-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    width: min(420px, 90vw);
    max-height: 85vh;
    overflow-y: auto;
    background: var(--bg-terminal);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    z-index: 10004;
    padding: 20px 22px 22px;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: grid;
    gap: 16px;
}
#account-modal.show {
    opacity: 1;
    transform: translate(-50%, -50%);
}

#account-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#account-modal-header h2 {
    font-family: var(--mono);
    font-size: 16px;
    color: var(--keyword);
    margin: 0;
}
.account-modal-intro {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--text-dim);
    margin: -8px 0 0;
}

.save-option-title {
    font-family: var(--mono);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.save-option-desc {
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-dim);
    margin: 0 0 10px;
}
#google-signed-in-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--success);
}

/* SYNC CODE ROWS */
#sync-row, #restore-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    flex-wrap: wrap;
}
#restore-row { margin-top: 8px; }
#player-code-display {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--string);
    letter-spacing: 0.05em;
}
.small-btn { padding: 7px 12px; font-size: 12px; }
#restore-code-input {
    flex: 1;
    min-width: 160px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text);
}
#restore-code-input:focus { outline: none; border-color: var(--function); }
#restore-code-input::placeholder { color: var(--text-faint); }

/* PROGRESS SUMMARY */
#progress-summary {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-dim);
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 9px 13px;
    margin-bottom: 16px;
}
#progress-summary .ps-highlight { color: var(--string); font-weight: 700; }

/* SCOREBOARD SIDE PANEL */
#scoreboard-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.25s ease;
}
#scoreboard-overlay.show { opacity: 1; }

#scoreboard-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 88vw);
    background: var(--bg-terminal);
    border-left: 1px solid var(--border);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.4);
    z-index: 10002;
    padding: 20px 18px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.28s ease;
}
#scoreboard-panel.show { transform: translateX(0); }

#scoreboard-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
#scoreboard-panel-header h2 {
    font-family: var(--mono);
    font-size: 16px;
    color: var(--keyword);
    margin: 0;
}

#scoreboard-chapter-select {
    width: 100%;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text);
    margin-bottom: 14px;
}

#scoreboard-panel-list { display: grid; gap: 7px; }

/* SWITCH CHAPTER SIDE PANEL */
#switch-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.25s ease;
}
#switch-overlay.show { opacity: 1; }

#switch-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 88vw);
    background: var(--bg-terminal);
    border-left: 1px solid var(--border);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.4);
    z-index: 10002;
    padding: 20px 18px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.28s ease;
}
#switch-panel.show { transform: translateX(0); }

#switch-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
#switch-panel-header h2 {
    font-family: var(--mono);
    font-size: 16px;
    color: var(--keyword);
    margin: 0;
}

#switch-panel-list { display: grid; gap: 9px; }
#switch-panel-list .file-item.active-file {
    border-color: var(--keyword);
    background: var(--bg-elevated);
}

/* AD SLOTS */
.ad-slot {
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 34px 16px;
    text-align: center;
    color: var(--text-faint);
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 16px 0;
}

/* APP FOOTER */
.app-footer {
    text-align: center;
    margin-top: 6px;
}
.app-footer a {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--text-faint);
    text-decoration: none;
}
.app-footer a:hover { color: var(--text-dim); text-decoration: underline; }
.credit { margin-top: 10px; opacity: 0.7; }
.credit-logo { height: 18px; width: auto; display: inline-block; }