/* Youth technology palette. Color maps to learning modules, not decoration.
   The classroom structure and all execution/assessment behavior stay unchanged. */
:root {
  --class-ink:#1d2946;
  --class-muted:#63708a;
  color-scheme:light;
  --class-accent:#315add;
  --class-paper:#fff;
  --class-border:#dbe2f1;
  --mint:#7fdbea;
  --ink:#1d2946;
  --module-color:#234dd1;
  --module-tint:#e0e8ff;
  --module-line:#98b0ff;
  --module-fill:#3e61e2;
  --module-on:#fff;
}
body {
  background-color:#f3f7ff;
  background-image:radial-gradient(ellipse at 10% 0%,#d6e4ff 0%,transparent 45%),radial-gradient(ellipse at 96% 32%,#dbf5ff 0%,transparent 42%);
  background-attachment:fixed;
  color:var(--class-ink);
}
.lesson-sticky.topbar {
  background:#fcfdff;
  border-bottom:1px solid #d7e0f6;
  box-shadow:0 5px 24px #253e750b;
}
.lesson-sticky.topbar::before {
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#3e61e2 0%,#7f45cb 30%,#11bcd2 55%,#ffad42 78%,#ec5086 100%);
}
.lesson-sticky h1 {
  font-family:"DIN Alternate","PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:750;
  color:#202e53;
  letter-spacing:.01em;
}
.lesson-sticky .breadcrumb { color:#697b9d; }
.lesson-sticky .breadcrumb .site-brand { color:#315add;font-weight:700; }
.lesson-sticky .top-actions .ghost-btn { border-color:#c9d5f4;color:#485fc4;background:#f9fbff; }
.lesson-sticky .top-actions #courseIndexBtn { border-color:#315add;background:#315add;color:#fff;box-shadow:0 3px 9px #315add28; }
body .ghost-btn,body .secondary-btn { color:#4258b8;border-color:#c6d2f0;background:#f8faff; }
body .ghost-btn:hover,body .secondary-btn:hover { background:#edf1ff;border-color:#8ca4ef; }
body .primary-btn { background:#315add;border-color:#315add;color:#fff;box-shadow:0 4px 11px #315add24; }
body .primary-btn:hover { background:#3448b7; }
body .icon-btn { color:#5065c2;background:#f9fbff;border-color:#c9d5f4; }
button { transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease; }
/* A single five-color path: same module, same hue in navigation and content. */
[data-module="concept"],[data-learning-module="concept"] { --module-color:#234dd1;--module-tint:#e0e8ff;--module-line:#98b0ff;--module-fill:#3e61e2;--module-on:#fff; }
[data-module="why"],[data-learning-module="why"] { --module-color:#703ab8;--module-tint:#eee1ff;--module-line:#c3a0f1;--module-fill:#7f45cb;--module-on:#fff; }
[data-module="operate"],[data-learning-module="operate"] { --module-color:#006c80;--module-tint:#d9f6fb;--module-line:#80ddec;--module-fill:#11bcd2;--module-on:#003444; }
[data-module="solve"],[data-learning-module="solve"] { --module-color:#985206;--module-tint:#fff0d5;--module-line:#ffcb78;--module-fill:#ffad42;--module-on:#452707; }
[data-module="code"],[data-learning-module="code"] { --module-color:#b42f68;--module-tint:#ffe2ed;--module-line:#ffa3c4;--module-fill:#ec5086;--module-on:#341322; }
.lesson-sticky .progress-node { background:var(--module-fill);border-color:var(--module-fill);color:var(--module-on);border-radius:9px;box-shadow:0 3px 8px #3557a818; }
.lesson-sticky .progress-node span { color:var(--module-on);background:#ffffff20;border-color:var(--module-on);border-radius:7px;font-weight:700; }
.lesson-sticky .progress-node b { color:var(--module-on); }
.lesson-sticky .progress-node.current { background:var(--module-fill);color:var(--module-on);border-color:var(--module-fill);box-shadow:inset 0 -3px var(--module-on),0 4px 12px #3557a829; }
.lesson-sticky .progress-node.done span { background:var(--module-on);border-color:var(--module-on);color:var(--module-fill); }
body .module-heading h2,body .concept-card h3 { font-family:"DIN Alternate","PingFang SC","Microsoft YaHei",sans-serif;font-weight:700; }
.lesson-column > .module-heading { border-left:4px solid #5774e2;padding-left:16px; }
.lesson-column > .module-heading .section-kicker { color:#4258d0; }
body .concept-card,body .learning-module {
  border:1px solid var(--module-line);
  border-top:4px solid var(--module-fill);
  border-radius:14px;
  background:#fff;
  box-shadow:0 7px 24px #34528a07;
}
.learning-module .module-heading { border-left-color:var(--module-color); }
.learning-module .section-kicker { color:var(--module-color); }
.learning-module .card-topline { color:var(--module-color); }
.learning-module .card-number { background:var(--module-tint);border-radius:5px;padding:3px 9px;color:var(--module-color); }
.learning-module .module-goal,.learning-module .card-copy { color:#293853; }
.learning-module .whatis-figure {
  padding:14px;
  background:var(--module-tint);
  border:1px solid var(--module-line);
  border-radius:12px;
}
.whatis-figure svg text { fill:#243552; }
.whatis-figure svg text.annotation,.whatis-figure svg text.index-text { fill:#566681; }
.whatis-figure svg rect.diagram-box { fill:#fff;stroke:var(--module-line); }
.whatis-figure svg rect.accent-box { fill:var(--module-tint);stroke:var(--module-color);stroke-width:2.5; }
.whatis-figure svg rect.accent-box + text { fill:var(--module-color); }
.whatis-figure svg path.diagram-arrow { stroke:var(--module-color); }
.whatis-figure svg marker path { fill:var(--module-color); }
body .concept-tags span { border-color:#ccd8fb;background:#f2f5ff;color:#3f58be;border-radius:5px; }
body .code-snippet,.lesson-code { background:#f3f6fe;color:#263954;border-color:#d9e3f7; }
.learning-module .quick-check,.learning-module .self-check { border-top-color:var(--module-line); }
.learning-module .quick-check .section-kicker { display:inline-block;background:var(--module-tint);padding:5px 10px;border-radius:6px;letter-spacing:0;font-size:13px; }
body .choice { border-color:#d8e1f2;background:#fcfdff;border-radius:9px;color:#233450; }
body .choice:hover { border-color:var(--module-color);background:var(--module-tint); }
body .choice.correct { background:#eaf7f2;border-color:#177653;color:#175e46; }
body .choice.wrong { background:#fff4e9;border-color:#a96424;color:#79471f; }
body .feedback-box { background:#f3f6fd;color:#283952;border-color:#d9e3f5;border-radius:9px; }
.slice-cell { background:#fff;color:#214656;border-color:#a7dfe9; }
.slice-cell[aria-pressed="true"] { background:#08778c;border-color:#08778c;color:#fff; }
#sliceFeedback,.module-evidence { color:var(--module-color); }
/* Tools get an unmistakable blue instrument-panel identity. */
body .assistant-card { border-color:#cfdbf3;background:#fff;box-shadow:0 7px 25px #263c760c;border-radius:13px; }
.assistant-card .assistant-header { margin:-17px -17px 12px;padding:14px 17px;background:linear-gradient(110deg,#315add,#7545c8);border-bottom:1px solid #6880e0; }
.assistant-card .assistant-header h2 { color:#f3f7ff;font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-weight:700; }
.assistant-card .assistant-header h2::before { content:"✦";color:#91dbef;margin-right:9px;font-size:20px; }
.assistant-card .assistant-header .ghost-btn { background:#ffffff10;color:#e7efff;border-color:#91a4d35e; }
.assistant-card .assistant-header .ghost-btn:hover { background:#ffffff20; }
.assistant-card .ai-status { background:#fff4df;color:#775611;border-radius:7px; }
.assistant-card .assistant-intro { color:#63738e; }
.assistant-card .chat-message.ai { background:#f0f4ff;color:#2b3d65;border-left:3px solid #7593e5;border-radius:0 9px 9px 0; }
.assistant-card .chat-message.user { background:#e9efff;color:#334ca1; }
.assistant-card .chat-message p { color:inherit; }
.assistant-card .message-label { color:#65769a; }
.assistant-card .chat-form input { background:#fbfcff;border-color:#c9d7f0;border-radius:7px 0 0 7px;color:#273a5b; }
.assistant-card .chat-form button { background:#315add;border-radius:0 7px 7px 0;color:#fff; }
body .task-card { background:#11223c;border-color:#c0d0ec;border-radius:13px;box-shadow:0 7px 25px #263c7612; }
.python-panel-title { background:linear-gradient(110deg,#245fd1,#5b4bc9);border-bottom:1px solid #6880e0; }
.python-panel-title h2 { color:#f2f7ff;font-family:"PingFang SC","Microsoft YaHei",sans-serif; }
.python-panel-title h2::before { content:"›_";display:inline-block;margin-right:9px;color:#8ee1ed;font:700 19px ui-monospace,monospace; }
.python-panel-title .ghost-btn { background:#ffffff0c;border-color:#88a5c65e;color:#d7e9ff; }
.python-panel-title .ghost-btn:hover { background:#ffffff1e; }
.task-card .primary-btn { background:#315add;border-color:#7799fa;color:#fff;box-shadow:none; }
.task-card .primary-btn:hover { background:#536de7; }
.task-card .secondary-btn { background:#183454;border-color:#54709a;color:#dceaff; }
.task-card .secondary-btn:hover { background:#244365;border-color:#87aad5; }
.task-card .lab-toolbar { background:#142e4d;border-color:#49698f; }
.task-card .lab-libraries code { background:#234369;color:#acddea; }
.task-card .run-label { color:#b0d0e8; }
.task-card .status-dot { background:#86d4e6;box-shadow:none; }
.task-card .CodeMirror { background:#0c1b32;border-color:#48698f;color:#e6f0ff; }
.task-card .CodeMirror-gutters { background:#142b48;border-color:#365476; }
.task-card .CodeMirror-linenumber { color:#96b3d0; }
.task-card .python-executed-line { background:#17455b;box-shadow:inset 3px 0 #78d9e9; }
.task-card .CodeMirror:focus-within { outline-color:#7fdbea; }
.task-card .output-box { background:#0c1b32;border-color:#49698f; }
.task-card .trace-box { background:#10243e;border-color:#49698f; }
.task-card.python-expanded { box-shadow:0 18px 75px #172c6155; }
body .note-card { background:linear-gradient(120deg,#f6f2ff,#f0f6ff);border:1px solid #d5d5f4;border-top:4px solid #7950c8;border-radius:14px; }
body .note-prompt strong { font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:#334375; }
body .note-layout textarea { color:#263954;background:#fff;border-color:#cdd9ef; }
/* Directory and teacher surfaces retain the exact same hierarchy. */
#courseIndexDrawer .course-index-drawer { background:#fcfdff;border-color:#cbd9f5;box-shadow:0 14px 50px #223d6c26;border-radius:13px; }
#courseIndexDrawer .section-kicker { color:#4966ce; }
#courseIndexDrawer .catalog-row.current { background:#edf2ff;border-color:#5977d8;color:#3452ae; }
.book-tree > summary,.chapter-tree > summary,.vault-folder > summary { background:#f0f4ff;color:#364c77;border-radius:7px; }
.directory-tabs button[aria-selected="true"] { background:#315add;border-color:#315add;color:#fff; }
.vault-children { border-left-color:#d4dff7; }
.teacher-modal { border-color:#d0dafa;background:#fcfdff; }
@media (prefers-reduced-motion:reduce) { button { transition:none; } }