/* Classroom palette: no external CSS framework, fonts or paid theme service. */
:root[data-theme="purple"]{--navy:#45206b;--ink:#2b1946;--muted:#68567f;--line:#e3d6f0;--bg:#f8f3ff;--blue:#7540ba;--green:#6f3b9d;--shadow:0 6px 24px rgba(83,33,127,.09)}
:root[data-theme="dark"]{color-scheme:dark;--navy:#101a29;--ink:#e8eef8;--muted:#a4b6ce;--line:#34475e;--bg:#121b2b;--blue:#99c8ff;--green:#65d3ae;--shadow:0 6px 25px rgba(0,0,0,.2)}
:root[data-theme="dark-purple"]{color-scheme:dark;--navy:#1f1036;--ink:#f3eaff;--muted:#bea9d8;--line:#503a69;--bg:#1a1228;--blue:#d5a9ff;--green:#a9e8c0;--shadow:0 6px 25px rgba(0,0,0,.25)}
:root[data-theme="dark"] .sidebar,:root[data-theme="dark-purple"] .sidebar,
:root[data-theme="dark"] .panel,:root[data-theme="dark-purple"] .panel{background:var(--panel,#1c2a3d)}
:root[data-theme="dark-purple"]{--panel:#291c3c;--soft:#352647;--field:#241a35;--hover:#39294f}
:root[data-theme="dark"]{--panel:#1b293c;--soft:#25384b;--field:#152336;--hover:#31455c}
:root[data-theme="purple"]{--panel:#fff;--soft:#f2e8fc;--field:#fff;--hover:#eadcfb}
:root[data-theme="light"]{--panel:#fff;--soft:#f0f5fb;--field:#fff;--hover:#eaf2fc}
:root[data-theme="dark"] .stats,:root[data-theme="dark-purple"] .stats,
:root[data-theme="dark"] .example,:root[data-theme="dark-purple"] .example,
:root[data-theme="dark"] .submission,:root[data-theme="dark-purple"] .submission,
:root[data-theme="dark"] .tag,:root[data-theme="dark-purple"] .tag,
:root[data-theme="dark"] .tag.difficulty,:root[data-theme="dark-purple"] .tag.difficulty,
:root[data-theme="dark"] .feedback,:root[data-theme="dark-purple"] .feedback,
:root[data-theme="dark"] .lesson-note,:root[data-theme="dark-purple"] .lesson-note,
:root[data-theme="dark"] .challenge-option.selected,:root[data-theme="dark-purple"] .challenge-option.selected{background:var(--soft);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] .challenge-option:hover,:root[data-theme="dark-purple"] .challenge-option:hover{background:var(--hover)}
:root[data-theme="dark"] select,:root[data-theme="dark-purple"] select,
:root[data-theme="dark"] input,:root[data-theme="dark-purple"] input,
:root[data-theme="dark"] .secondary,:root[data-theme="dark-purple"] .secondary,
:root[data-theme="dark"] button:not(.primary):not(.success):not(.challenge-option):not(.theme-trigger):not(.next-lesson),:root[data-theme="dark-purple"] button:not(.primary):not(.success):not(.challenge-option):not(.theme-trigger):not(.next-lesson){background:var(--field);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] #output,:root[data-theme="dark-purple"] #output,
:root[data-theme="dark"] #code,:root[data-theme="dark-purple"] #code{background:var(--field);color:var(--ink)}
:root[data-theme="dark"] .console-heading strong,:root[data-theme="dark-purple"] .console-heading strong,
:root[data-theme="dark"] .eyebrow,:root[data-theme="dark-purple"] .eyebrow,
:root[data-theme="dark"] .list-head,:root[data-theme="dark-purple"] .list-head,
:root[data-theme="dark"] .small,:root[data-theme="dark-purple"] .small,
:root[data-theme="dark"] .panel-heading span,:root[data-theme="dark-purple"] .panel-heading span,
:root[data-theme="dark"] .example div,:root[data-theme="dark-purple"] .example div{color:var(--muted)}
:root[data-theme="dark"] .feedback.good,:root[data-theme="dark-purple"] .feedback.good{border-left-color:#6bdaa6}
:root[data-theme="dark"] .feedback.bad,:root[data-theme="dark-purple"] .feedback.bad{border-left-color:#ff9b94}
:root[data-theme="dark"] .skills-content pre,:root[data-theme="dark-purple"] .skills-content pre{background:#101827}
:root[data-theme="dark"] .skills-content p code,:root[data-theme="dark-purple"] .skills-content p code,
:root[data-theme="dark"] .instructions-text code,:root[data-theme="dark-purple"] .instructions-text code{background:var(--soft);color:var(--ink)}
:root[data-theme="purple"] .top,:root[data-theme="dark-purple"] .top{background:var(--navy)}
:root[data-theme="purple"] .toolbar .primary,:root[data-theme="dark-purple"] .toolbar .primary{background:#7540ba;border-color:#7540ba;color:#fff}
:root[data-theme="purple"] .toolbar .success,:root[data-theme="dark-purple"] .toolbar .success{background:#6d3ba8;border-color:#6d3ba8;color:#fff}
.theme-picker{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.theme-picker label{font-size:11px;color:inherit;white-space:nowrap}
.theme-picker select{width:auto;max-width:170px;padding:5px 8px;font-size:12px;border-radius:8px;color:var(--ink);background:var(--field,#fff);border:1px solid var(--line)}
.theme-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:14px 0}
.theme-swatch{display:grid;gap:4px;border:1px solid var(--line);background:var(--panel,#fff);color:var(--ink);border-radius:10px;padding:10px;text-align:left;min-width:0}
.theme-swatch span{display:block;height:27px;border-radius:6px}
.theme-swatch strong{font-size:12px}
.theme-swatch[data-choice="purple"] span{background:linear-gradient(90deg,#45206b 50%,#d9c0f6 50%)}
.theme-swatch[data-choice="dark-purple"] span{background:linear-gradient(90deg,#1f1036 50%,#9b67c6 50%)}
.theme-swatch[data-choice="dark"] span{background:linear-gradient(90deg,#101a29 50%,#44688d 50%)}
.theme-swatch[data-choice="light"] span{background:linear-gradient(90deg,#15273c 50%,#d5e4f2 50%)}
.theme-swatch[aria-pressed="true"]{outline:3px solid var(--blue);outline-offset:1px}
.theme-catalog{margin:14px 0}
.next-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin:18px 0}
.next-lesson{border:0;border-radius:8px;padding:11px 17px;color:#fff;background:#235e9d;font-weight:700}
.next-lesson:disabled{opacity:.5;cursor:not-allowed}
.related-links{display:grid;gap:6px;padding:12px;background:var(--soft);border-radius:9px;margin:14px 0}
.related-links a{font-size:13px}
.related-links p{margin:0 0 5px;font-size:12px;color:var(--muted)}
@media(max-width:560px){.theme-gallery{grid-template-columns:repeat(2,1fr)}.theme-picker label{display:none}}


/* 2026-10-22 refinement:
   Purple replaces blue as the shared accent; light backgrounds stay neutral.
   Dark themes use soft graphite/plum surfaces, not saturated navy/purple gradients.
   All custom properties are local; no external font or theme service. */
:root, :root[data-theme="light"]{
 --navy:#3b294b;--ink:#2a2830;--muted:#64606e;--line:#dedbe4;
 --bg:#f6f6f8;--blue:#6c438f;--green:#2c7559;
 --panel:#fff;--soft:#f1edf5;--field:#fff;--hover:#f1ebf7;
 --shadow:0 5px 21px rgba(54,38,65,.055)
}
:root[data-theme="purple"]{
 --navy:#452c59;--ink:#30273c;--muted:#6a6071;--line:#e4ddea;
 --bg:#faf8fb;--blue:#75499b;--green:#33775d;
 --panel:#fff;--soft:#f3eef7;--field:#fff;--hover:#f1e8f8;
 --shadow:0 5px 21px rgba(76,47,92,.06)
}
:root[data-theme="dark"]{
 color-scheme:dark;
 --navy:#29272d;--ink:#eae8ed;--muted:#bcb8c2;--line:#504c55;
 --bg:#25242a;--blue:#d3bedf;--green:#a4d7c0;
 --panel:#323038;--soft:#3c3942;--field:#302d35;--hover:#45414b;
 --shadow:0 5px 19px rgba(0,0,0,.12)
}
:root[data-theme="dark-purple"]{
 color-scheme:dark;
 --navy:#332d3b;--ink:#eeeaf1;--muted:#c4bdca;--line:#5b5361;
 --bg:#2c2931;--blue:#dec3e9;--green:#aed8c5;
 --panel:#38333e;--soft:#453f4b;--field:#36313c;--hover:#514959;
 --shadow:0 5px 19px rgba(0,0,0,.14)
}
:root[data-theme] .sidebar,
:root[data-theme] .panel,
:root[data-theme] .track,
:root[data-theme] .notice,
:root[data-theme] .theme-swatch{
 background:var(--panel);color:var(--ink);border-color:var(--line)
}
:root[data-theme] .stats,
:root[data-theme] .example,
:root[data-theme] .submission,
:root[data-theme] .tag,
:root[data-theme] .tag.difficulty,
:root[data-theme] .feedback,
:root[data-theme] .lesson-note,
:root[data-theme] .challenge-option.selected{
 background:var(--soft);color:var(--ink);border-color:var(--line)
}
:root[data-theme] .stats{color:var(--ink)}
:root[data-theme] .challenge-option:hover{background:var(--hover)}
:root[data-theme] .challenge-option.selected{
 border-color:var(--blue);
 box-shadow:inset 3px 0 0 var(--blue)
}
:root[data-theme] .top{background:var(--navy)}
:root[data-theme] .top .logo-icon{background:rgba(255,255,255,.14);color:#f9f4fd}
:root[data-theme] .eyebrow,
:root[data-theme] .small,
:root[data-theme] .list-head,
:root[data-theme] .panel-heading span,
:root[data-theme] .console-heading,
:root[data-theme] .panel-heading h3,
:root[data-theme] .example div,
:root[data-theme] .subtitle,
:root[data-theme] .sidebar p,
:root[data-theme] .bottom-note p,
:root[data-theme] .challenge-option small,
:root[data-theme] .submission p,
:root[data-theme] .privacy{color:var(--muted)}
:root[data-theme] .panel-heading h3,
:root[data-theme] .console-heading strong{color:var(--ink)}
:root[data-theme] .hero .eyebrow{color:var(--blue)}
:root[data-theme] .points{
 background:var(--soft);color:var(--blue);
 border:1px solid var(--line)
}
:root[data-theme] .tag{color:var(--ink)}
:root[data-theme] button:not(.primary):not(.success):not(.challenge-option):not(.next-lesson):not(.theme-swatch),
:root[data-theme] input,
:root[data-theme] select{
 background:var(--field);color:var(--ink);border-color:var(--line)
}
:root[data-theme] .toolbar .primary,
:root[data-theme] .next-lesson,
:root[data-theme] .track a.action,
:root[data-theme] .track:nth-child(2) a.action{
 background:#674681;border-color:#674681;color:#fff
}
:root[data-theme="purple"] .toolbar .primary,
:root[data-theme="purple"] .next-lesson,
:root[data-theme="purple"] .track a.action{
 background:#70468e;border-color:#70468e;color:#fff
}
:root[data-theme="dark"] .toolbar .primary,
:root[data-theme="dark"] .next-lesson,
:root[data-theme="dark"] .track a.action,
:root[data-theme="dark-purple"] .toolbar .primary,
:root[data-theme="dark-purple"] .next-lesson,
:root[data-theme="dark-purple"] .track a.action{
 background:#755b8a;border-color:#755b8a;color:#fff
}
:root[data-theme] .toolbar .success{background:#2c7256;border-color:#2c7256;color:#fff}
:root[data-theme="dark"] .toolbar .success,
:root[data-theme="dark-purple"] .toolbar .success{background:#38634f;border-color:#50775f;color:#f0fbf4}
:root[data-theme] .editor-header{background:#37313e;color:#f2e9f6}
:root[data-theme] .dot{background:#bfa4d5}
:root[data-theme] #lesson-example{background:#343039;color:#f0eaf4;border:1px solid #4b4252}
:root[data-theme] #code{background:#29262f;color:#f0eaf3;caret-color:#f2d0fa}
:root[data-theme] #output{background:var(--soft);color:var(--ink)}
:root[data-theme="dark"] #lesson-example,
:root[data-theme="dark-purple"] #lesson-example,
:root[data-theme="dark"] #code,
:root[data-theme="dark-purple"] #code{background:#29262e;color:#ece8f0}
:root[data-theme="dark"] .editor-header,
:root[data-theme="dark-purple"] .editor-header{background:#302c35;color:#e4dce7}
:root[data-theme] .feedback{border-left-color:var(--blue)}
:root[data-theme] .feedback.good{border-left-color:#589f79}
:root[data-theme] .feedback.bad{border-left-color:#c7857f}
:root[data-theme] #lesson-hints details,
:root[data-theme] .skills-content details{
 border-color:var(--line);color:var(--ink)
}
:root[data-theme] #lesson-hints summary{color:var(--ink)}
:root[data-theme] .lesson-note{border-left-color:var(--blue)}
:root[data-theme] .lesson-note code,
:root[data-theme] .instructions-text code,
:root[data-theme] #summary code,
:root[data-theme] #lead code,
:root[data-theme] #walkthrough code,
:root[data-theme] #reflection code,
:root[data-theme] #pitfall code,
:root[data-theme] #mission code,
:root[data-theme] #lesson-hints code,
:root[data-theme] .skills-content p code{
 display:inline;white-space:normal;
 background:var(--soft);color:var(--ink);
 border:1px solid var(--line);
 border-radius:4px;padding:1px 5px;
 font:0.94em/1.55 ui-monospace,SFMono-Regular,Consolas,monospace
}
:root[data-theme] .lesson-note code,
:root[data-theme] #pitfall code{background:var(--panel)}
:root[data-theme] .related-links{background:var(--soft)}
:root[data-theme] .related-links p{color:var(--muted)}
:root[data-theme] .theme-swatch[aria-pressed="true"]{
 outline:2px solid var(--blue);outline-offset:2px
}
:root[data-theme] .theme-swatch[data-choice="light"] span{
 background:linear-gradient(90deg,#3b294b 50%,#eeeaf1 50%)
}
:root[data-theme] .theme-swatch[data-choice="purple"] span{
 background:linear-gradient(90deg,#452c59 50%,#f3eef7 50%)
}
:root[data-theme] .theme-swatch[data-choice="dark"] span{
 background:linear-gradient(90deg,#29272d 50%,#4c4753 50%)
}
:root[data-theme] .theme-swatch[data-choice="dark-purple"] span{
 background:linear-gradient(90deg,#332d3b 50%,#5b4c62 50%)
}