/* Shared shell only; the original exercise scripts and feedback states stay intact. */
:root { color-scheme: dark; }
html { background: #222221; }
html body { box-sizing: border-box; background: #222221; color: #e6e2dc; line-height: 1.65; }
html body h1, html body h2 { color: #ecdcb8; }
.exercise-nav { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.5rem; width: min(1160px, 100%); margin: 0 auto 2rem; padding: .5rem 0 1rem; border-bottom: 1px dashed #5e5950; text-align: left; }
.exercise-nav a { display: inline-flex; align-items: center; min-height: 44px; color: #e6c27a; font: 600 .9rem/1.5 var(--font-body); text-decoration: none; }
.exercise-nav a:last-child { margin-left: auto; }
.exercise-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
html body.prepositions-page header { border-bottom: 1px dashed #5e5950; padding-top: 0; }
.prepositions-page .question-card, .prepositions-page .stat-box { background: #282724; border: 1px dashed #5e5950; }
.prepositions-page .level-btn, .prepositions-page .option-btn { background: #282724; color: #e6e2dc; border-color: #5e5950; transition: none; }
.prepositions-page .level-btn.active, .prepositions-page .next-btn, .prepositions-page .restart-btn { background: #e6c27a; border-color: #e6c27a; color: #28231c; transition: none; }
.prepositions-page .option-btn:hover, .prepositions-page .level-btn:hover { border-color: #e6c27a; }
.prepositions-page .blank { border-color: #e6c27a; }
.prepositions-page .option-btn.correct { background: #31533e; color: #fff; border-color: #8ab998; }
.prepositions-page .option-btn.incorrect { background: #713b38; color: #fff; border-color: #d69a91; }
.prepositions-page .final-score { color: #e6c27a; }
html { scroll-padding-top: 1.5rem; }
html body.tenses-page { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.tenses-page > .exercise-nav { width: min(1100px, 100%); }
.tenses-page #mainContainer { margin-inline: auto; }
.hub-header { margin-bottom: 2.5rem; text-align: center; }
.hub-header h1 { font-size: clamp(2.5rem, 6vw, 4rem); transform: rotate(-1deg); }
.hub-header p { color: #b4afa6; margin: .5rem 0 1.5rem; }
.hub-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-block: 1.5rem; }
.hub-nav a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: .6rem 1rem; border: 1px dashed #e6c27a; border-radius: 8px 12px 9px 14px; color: #ecdcb8; text-decoration: none; font-size: .9rem; }
.hub-nav a:hover { background: #e6c27a; color: #28231c; }
.tenses-page #tenseRoot h2 { font-size: 2.2rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .15rem; }
.tenses-page #tenseRoot h2 small { font: 400 1rem var(--font-body); color: #a0b0bf; }
@media (max-width: 600px) { .tenses-page #mainContainer { padding: 1.2rem 1rem 2rem; border-radius: 18px; } .hub-nav { gap: .5rem; } .hub-nav a { flex: 1 1 140px; } }
@media (max-width: 480px) { .exercise-nav { gap: .4rem 1rem; } .exercise-nav a { font-size: .8rem; } .exercise-nav a:last-child { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }