/* CodeLearn — violet nuit, ambre et lilas. Layout rules live in styles.css. */
:root {
  color-scheme: dark;
  --paper: #151020;
  --white: #211a30;
  --ink: #f5f0ff;
  --muted: #b8aec9;
  --purple: #c3a1ff;
  --line: #3a2e4d;
  --mint: #82dfb0;
  --accent: #ffb454;
}
body { background: radial-gradient(ellipse at 85% 0, #39204d55, transparent 48%), var(--paper); }
::selection { background: #b38aff55; color: #fff; }
button, a, select, summary { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
select, button, input { font: inherit; }
.sidebar { background: #191323; border-color: var(--line); }
.brand { color: #fff; }
.brand-symbol { background: var(--accent); color: #28152d; box-shadow: 0 4px 22px #ffab3325; }
.brand-dot { color: var(--accent); }
.workspace-label, .preview-label, .sidebar-bottom { color: #aca0bf; }
nav a { color: #b9adc9; }
nav a.active { color: #edddff; background: #38274f; box-shadow: inset 3px 0 #b58aff; }
nav a:hover { background: #2c203e; color: #fff; }
.nav-dot { background: var(--accent); box-shadow: 0 0 9px #ffb45455; }
.sidebar-note { background: linear-gradient(145deg, #2e2140, #21182e); border-color: #473258; }
.tiny-spark, .heading-stamp span { color: var(--accent); }
.sidebar-note p, .sidebar-note .mini-code { color: #beacd3; }
.mini-code span { color: #92e3b6; }
.local-dot { background: #ab8fcf; }
.topbar { background: #191323ee; border-color: var(--line); }
.breadcrumb { color: #c2b6d1; }
.breadcrumb span { color: #7d6a94; }
.role-switch { background: #100c19; border-color: #3a2b4d; }
.role-switch button { color: #b4a6c6; }
.role-switch .selected { color: #f2e6ff; background: #3b2a52; box-shadow: none; }
.avatar { background: #402955; color: #e3c7ff; border: 1px solid #75528f; }
.eyebrow { color: var(--accent); }
.purple { color: var(--accent); }
.heading-stamp { color: #c6afd9; }
.page-heading h1 { max-width: 850px; }
.featured-course { background: linear-gradient(115deg, #342245, #261b3c 58%, #35234f); border-color: #61417b; box-shadow: 0 18px 60px #07030d35; }
.featured-course::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#c499ff08 1px, transparent 1px), linear-gradient(90deg, #c499ff08 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(90deg, transparent, #000); }
.featured-copy, .featured-visual { min-width: 0; position: relative; }
.featured-course h2 { color: #fff6ec; }
.featured-course p { color: #cbbddc; }
.light { background: #d0a6ff16; color: #e3c7ff; border: 1px solid #a77bd453; }
.python-mark { background: #20152e; color: #ffc46e; }
.course-facts { color: #d3bedf; }
.course-footnote { color: #c2afd1; }
.featured-visual { background: radial-gradient(ellipse, #aa72f92b, transparent 67%); }
.dungeon-art { overflow: hidden; filter: drop-shadow(0 15px 20px #0c061f30); }
.visual-label { color: #c9b0e0; }
.button { border-radius: 8px; font-weight: 700; }
.primary, .dark { color: #2c1830; background: var(--accent); box-shadow: 0 4px 18px #ffad4218; }
.primary:hover, .dark:hover { color: #221129; background: #ffc77b; }
.secondary { background: #2b203b; border-color: #59416f; color: #e3d2f3; }
.secondary:hover { background: #3b2b4e; }
.stop { background: #3a2438; color: #f1b9c7; }
.button:disabled { opacity: .55; box-shadow: none; }
.outline-badge { border-color: #57416d; color: #c3aed5; }
.chapter-card { background: linear-gradient(145deg, #241b32, #20182c); border-color: #443254; position: relative; }
.chapter-card.available { border-color: #aa7ce2; box-shadow: inset 0 3px #b78aec, 0 8px 30px #06030b20; }
.chapter-number { background: #352744; color: #d0bce2; }
.available .chapter-number { background: #51316c; color: #f0d7ff; }
.chapter-state, .available .chapter-state { color: #c6b0dd; }
.chapter-card p { color: #b9abc9; }
.chapter-card ol { border-color: #42324e; color: #c0b0cf; }
.chapter-card li:before { color: #a48bb9; }
.chapter-card li a.lesson-link { color: #e0d3eb; }
.chapter-card li a.lesson-link:hover { color: var(--accent); }
.chapter-locked { background: #21192d; }
.lesson-link.locked { color: #b3a3c4; }
.locked-icon, .lesson-status { color: #ad91c6; }
.lesson-status.success { color: #89e5b8; }
.next-icon { border-color: #705782; color: #c8a8e0; }
.next-course p { color: #b7a6c8; }
.footer { color: #ae9cbe; }
.skip, dialog { background: #251b34; color: var(--ink); border-color: #71518b; }
dialog::backdrop { background: #090512bb; backdrop-filter: blur(5px); }
.toast { background: #3c2951; border: 1px solid #8d65b0; box-shadow: 0 10px 40px #09030f88; }
.back-link, .workshop-heading p, .lesson-tag span, .lesson-navigation label { color: #bda6d0; }
.lesson-navigation select, .teacher-filter select { background: #271c37; border-color: #624674; color: #e8d9f4; }
.lesson-steps a { background: #271c37; border-color: #624674; color: #d0b7e2; }
.lesson-steps a.current { background: #b88bed; color: #241330; border-color: #b88bed; font-weight: 700; }
.step-locked { border-color: #645073; color: #b69dc8; }
.lesson-panel, .self-review { background: #21192e; border-color: #4a345d; }
.lesson-panel .eyebrow { color: #c7a2f0; }
.lesson-panel p, .lesson-panel ol { color: #c9bdd6; }
.lesson-task { background: #2b2032; }
.lesson-task .eyebrow { color: var(--accent); }
.learning-block h3 { color: #dfcaf3; font-weight: 650; }
.learning-block h3>span { background: #473058; color: #e3c5ff; }
.learning-block p, .learning-block ul { color: #c9bdd6; }
p code, li code, .learning-block code { background: #48325a; color: #eedaff; }
.learning-takeaway { background: #342440; border-color: #b383dd; }
.mission-objectives { gap: 14px; }
.objective-icon { border-color: #9b8aa8; }
.objective-passed .objective-icon { background: #77ddaa; border-color: #77ddaa; color: #152d23; }
.objective-passed>div>span:not(.sr-only) { color: #9be9bd; }
.objective-failed .objective-icon { background: #542838; border-color: #f39aa6; color: #ffb3bf; }
.objective-warning .objective-icon { background: #ffbb68; border-color: #ffbb68; color: #42240c; }
.objective-warning>div>span:not(.sr-only), .objective-warning .objective-feedback { color: #ffd49c; }
.objective-warning .objective-feedback { margin-top: 5px; font-size: 10px; line-height: 1.6; }
.lesson-status.method-warning { color: #ffbb68; }
.method-legend { color: #ffd49c; }
.state-cell.method-warning, #mission-results.method-review, #mission-results.all-passed.method-review { background: #4c3424; color: #ffd49c; }
#mission-results { background: #3c2d40; color: #e1c4a2; }
#mission-results.all-passed { background: #233e35; color: #9be9bd; }
.hint-panel { border-color: #59424d; }
.hints-heading, .hints-heading>span { color: #e6c39a; }
.lesson-panel .hints-intro, .all-hints-seen { color: #c7b3c9!important; }
.hint-reveal { background: #36263e; border-color: #8b637b; color: #ffd2a0; }
.hint-reveal:hover { background: #503047; border-color: #ffb454; }
.lesson-panel details { color: #dec4f4; }
.lesson-panel .revealed-hint { background: #302138; border-color: #735171; }
.lesson-panel .revealed-hint p { color: #d0bedb; }
.lesson-panel .revealed-hint pre { background: #191121; color: #eed5fe; }
.lesson-panel .strong-hint { background: #392a32; border-color: #af7f48; }
.atelier-toolbar { background: #2c203b; border-color: #614372; }
.muted, .icon-button { color: #bda9cf; }
.icon-button:hover, .text-button:hover { color: var(--accent); }
.workbench { border-color: #614372; box-shadow: 0 12px 35px #08040f30; }
.code-column { border-color: #4c365f; background: #16121f; }
.editor { background: #1a1525; }
#line-numbers { color: #a18bb6; }
.syntax-comment { color: #a49aaf; }
.console-head { background: #21182d; border-color: #413052; }
#console-output { background: #130f1b; }
.log-info { color: #ac9cbe; }
.game-column { background: #21192d; }
.game-head, .game-head strong { color: #d3bfdf; }
.live-dot { background: var(--accent); }
#canvas-overlay { background: radial-gradient(ellipse at 50% 35%, #43305e, #21172f); }
#canvas-overlay>span { color: #cbb7e0; }
.game-controls { color: #beaccf; }
.game-controls kbd { background: #35253f; border-color: #6c507d; color: #e8d7f5; }
.creative-tip { background: #22362e; border-color: #3e614f; }
.creative-tip>span, .creative-tip strong { color: #98e1b8; }
.creative-tip p, .creative-tip code { color: #bdd9c8; }
.engine-note, .local-notice, .autosave-note, .text-button { color: #b7a4c8; }
#save-state { color: #9cdcb7; }
.self-review label, .self-review p { color: #c7b6d5; }
.lesson-pager>span { color: #c5afd6; }
.api-reference dt { color: #dbb6ff; }
.api-reference dd { color: #c6b4d4; }
.demo-banner { background: #30203f; border-color: #674380; }
.demo-banner>span, .demo-banner strong { color: #e2bdff; }
.demo-banner p { color: #c5b0d8; }
.stats-grid article, .teacher-panel { background: #241a31; border-color: #4b345e; }
.stats-grid article>span, .stats-grid small, .stats-grid strong span { color: #c6afd8; }
.stats-grid .status-stat { color: var(--accent); }
.stats-grid article:first-child { border-top: 3px solid #b68aeb; }
.stats-grid article:nth-child(2) { border-top: 3px solid #80d8a8; }
.stats-grid article:nth-child(3) { border-top: 3px solid var(--accent); }
.teacher-filter, .legend { color: #c8b2d9; }
thead { background: #33233f; color: #d9c4e8; }
th, td { border-color: #493352; }
tbody th small, .cell-hint-count { color: #bfa5d2; }
.table-avatar { background: #513367; color: #edd1ff; }
.table-avatar.sample { background: #392c44; color: #c1a7d1; }
.local-row { background: #2d203b; }
.state-cell.ongoing { background: #513b29; color: #ffd195; }
.state-cell.sent { background: #47305c; color: #d7b6fa; }
.state-cell.validated { background: #284739; color: #9be4b8; }
.state-in-progress { color: #ffd195; }
.state-submitted { color: #d7b6fa; }
.state-validated { color: #9be4b8; }
.teacher-next p, #submission-preview ul { color: #c6b2d4; }
.review-support { background: #352440; border-color: #715082; color: #e2c4f6; }
.course-progress, .course-progress::-webkit-progress-bar { background: #554066; }
.course-progress::-webkit-progress-value { background: var(--accent); }
.course-progress::-moz-progress-bar { background: var(--accent); }
@media (max-width: 600px) {
  .page-heading h1 { font-size: 29px; }
  .section-heading { flex-wrap: wrap; }
  .sidebar { gap: 12px; }
  .featured-copy { padding: 24px 23px 0; }
  .featured-course h2 { font-size: 28px; }
  .lesson-panel>div { min-width: 0; }
  .lesson-panel pre { overflow-wrap: anywhere; }
  .lesson-pager { flex-wrap: wrap; }
  .footer { gap: 16px; line-height: 1.7; }
}