/* Shared UI for Python, SQL, NumPy and Pandas. */
.coding-course-screen {
  --cc-bg:#f7f2ec; --cc-surface:#fffdf9; --cc-surface-2:#f2e9df;
  --cc-ink:#251d18; --cc-muted:#78695f; --cc-line:#dfd2c6;
  --cc-accent:#d55a20; --cc-accent-2:#f28a46;
  --cc-code:#171411; --cc-code-line:#3a302a;
  background:var(--cc-bg); color:var(--cc-ink);
}
.coding-course-screen .course-topbar {
  min-height:62px;
  padding:12px max(20px,calc((100% - 920px) / 2 + 20px));
  justify-content:flex-start; gap:8px; border-color:var(--cc-line);
  background:rgba(255,253,249,.96); box-shadow:0 5px 22px rgba(49,32,21,.06);
  backdrop-filter:blur(14px);
}
.coding-course-screen .course-topbar .back-btn,
.coding-course-screen .course-sidebar-toggle,
.coding-course-screen .pw-course-starred-btn {
  min-height:38px; margin:0; padding:0 13px; border:1px solid var(--cc-line);
  border-radius:11px; background:var(--cc-surface); color:var(--cc-ink);
  font:650 .72rem/1 'DM Sans',sans-serif;
}
.coding-course-screen .pw-course-starred-btn { margin-left:auto; }
.coding-course-screen .course-sidebar-toggle {
  width:38px; min-width:38px; height:38px; padding:0;
  display:grid; place-items:center;
  font-size:1.05rem; border-radius:11px;
}
.coding-course-screen .course-topbar .back-btn:hover,
.coding-course-screen .course-sidebar-toggle:hover,
.coding-course-screen .pw-course-starred-btn:hover {
  border-color:var(--cc-accent); background:#fff2e9; color:var(--cc-accent);
}
.coding-course-screen .course-layout { min-height:calc(100dvh - 118px); background:var(--cc-bg); }
.coding-course-screen .course-sidebar {
  width:304px; min-width:304px; max-height:calc(100dvh - 118px); top:62px;
  display:flex; flex-direction:column; overflow:hidden;
  border-color:var(--cc-line); background:#f3ebe2;
  transition:width .22s ease,min-width .22s ease,border-color .22s ease;
}
.coding-course-screen .course-sidebar-header {
  flex:0 0 auto;
  min-height:78px; padding:16px; gap:12px; border-color:var(--cc-line); background:var(--cc-surface);
}
.coding-course-screen .course-sidebar-header:hover { background:var(--cc-surface); }
.coding-course-screen .course-sidebar-icon {
  width:44px!important; height:44px!important; padding:7px; object-fit:contain;
  border:1px solid var(--cc-line); border-radius:13px; background:var(--cc-surface-2);
}
.coding-course-screen .course-sidebar-title {
  color:var(--cc-ink); font:750 .98rem/1.2 'Playfair Display',serif;
}
.coding-course-screen .course-sidebar-sub { color:var(--cc-muted); font-size:.64rem; line-height:1.4; }
.coding-course-screen .course-sidebar-tools {
  position:relative; z-index:3; flex:0 0 auto; padding:10px 8px 8px;
  border-bottom:1px solid var(--cc-line); background:#f3ebe2;
}
.coding-course-screen .course-nav {
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:8px 8px 30px; scrollbar-color:var(--cc-accent) transparent;
}
.coding-course-screen .course-progress-box {
  margin:0 2px 9px; padding:13px; border:1px solid var(--cc-line);
  border-radius:13px; background:var(--cc-surface);
}
.coding-course-screen .course-sidebar-search {
  position:relative; display:flex; align-items:center; margin:0 2px;
}
.coding-course-screen .course-sidebar-search > span {
  position:absolute; left:12px; color:var(--cc-muted); font-size:1rem; pointer-events:none;
}
.coding-course-screen .course-sidebar-search input {
  width:100%; height:40px; padding:0 12px 0 34px;
  border:1px solid var(--cc-line); border-radius:11px; outline:0;
  background:var(--cc-surface); color:var(--cc-ink);
  font:550 .7rem/1 'DM Sans',sans-serif;
}
.coding-course-screen .course-sidebar-search input::placeholder { color:var(--cc-muted); }
.coding-course-screen .course-sidebar-search input:focus {
  border-color:var(--cc-accent); box-shadow:0 0 0 3px rgba(213,90,32,.12);
}
.coding-course-screen .course-progress-row,
.coding-course-screen .course-progress-sub { color:var(--cc-muted); }
.coding-course-screen .course-progress-pct { color:var(--cc-accent); }
.coding-course-screen .course-progress-bar { height:7px; background:var(--cc-surface-2); }
.coding-course-screen .course-progress-bar span {
  background:linear-gradient(90deg,var(--cc-accent),var(--cc-accent-2));
}
.coding-course-screen .course-progress-weight { background:var(--cc-surface-2); color:var(--cc-muted); }
.coding-course-screen .course-progress-sub-val { color:var(--cc-ink); }
.coding-course-screen .course-sidebar-module {
  margin:5px 0; overflow:hidden; border:1px solid transparent; border-radius:12px;
}
.coding-course-screen .course-sidebar-module.active-module {
  border-color:var(--cc-line); background:rgba(255,253,249,.62);
}
.coding-course-screen .course-sidebar-module-header {
  min-height:45px; padding:10px 9px; border-radius:11px;
  color:var(--cc-ink); font-size:.69rem; line-height:1.35;
}
.coding-course-screen .course-sidebar-module-header:hover,
.coding-course-screen .course-sidebar-module-header.active-module { background:#eadfd4; color:var(--cc-ink); }
.coding-course-screen .course-sidebar-chevron {
  width:22px; height:22px; display:grid; place-items:center; margin:-1px 0 0;
  border:1px solid var(--cc-line); border-radius:7px; color:var(--cc-accent); font-size:.52rem;
}
.coding-course-screen .course-sidebar-mod-prog {
  min-width:31px; margin-left:6px; padding:3px 6px; border:1px solid var(--cc-line);
  border-radius:99px; color:var(--cc-muted); background:var(--cc-surface); text-align:center;
}
.coding-course-screen .course-sidebar-mod-prog.complete {
  border-color:#75a88e; background:#e7f4ed; color:#327257;
}
.coding-course-screen .course-sidebar-chapters { padding:2px 5px 8px; }
.coding-course-screen .course-sidebar-chapter {
  min-height:38px; padding:7px; gap:8px; border:0; border-radius:9px;
  color:var(--cc-muted); font-size:.65rem;
}
.coding-course-screen .course-sidebar-chapter:hover { background:var(--cc-surface); color:var(--cc-ink); }
.coding-course-screen .course-sidebar-chapter.active {
  border:0; background:#f6ddcb; color:#9c3c13; box-shadow:inset 3px 0 var(--cc-accent);
}
.coding-course-screen .course-sidebar-ch-num {
  min-width:27px; height:24px; display:grid; place-items:center;
  border:1px solid var(--cc-line); border-radius:7px; color:var(--cc-accent);
  background:transparent; font-size:.57rem;
}
.coding-course-screen .course-sidebar-chapter.done .course-sidebar-ch-num {
  border-color:#75a88e; background:#e7f4ed; color:#327257;
}
.coding-course-screen .course-content {
  max-height:calc(100dvh - 118px); padding:34px clamp(24px,4vw,58px) 80px;
  background:var(--cc-bg); scrollbar-color:var(--cc-accent) transparent;
}
.coding-course-screen .course-content>* {
  width:min(100%,1000px); margin-left:auto; margin-right:auto;
}
.coding-course-screen .course-header,
.coding-course-screen .ap-unit-header,
.coding-course-screen .course-assessment-unit-header {
  position:relative; overflow:hidden; min-height:168px; display:flex; flex-direction:column;
  justify-content:center; margin-bottom:22px; padding:30px clamp(24px,4vw,42px);
  border:1px solid #4b3529; border-radius:23px;
  background:radial-gradient(circle at 86% 18%,rgba(242,138,70,.27),transparent 26%),
             linear-gradient(135deg,#171411 0%,#2d211b 62%,#743315 100%);
  box-shadow:0 18px 46px rgba(43,27,18,.14);
}
.coding-course-screen .course-header::after,
.coding-course-screen .ap-unit-header::after,
.coding-course-screen .course-assessment-unit-header::after {
  content:'</>'; position:absolute; right:clamp(24px,5vw,60px); top:50%;
  transform:translateY(-50%); color:rgba(255,255,255,.08);
  font:800 clamp(3.5rem,8vw,7rem)/1 'SF Mono',monospace;
}
.coding-course-screen .course-title,
.coding-course-screen .ap-unit-title,
.coding-course-screen .course-assessment-unit-title {
  position:relative; z-index:1; max-width:720px; margin:0 0 9px; color:#fff8f2;
  font-size:clamp(1.8rem,3.5vw,2.8rem); letter-spacing:-.025em;
  font-family:'Playfair Display',serif; line-height:1.13;
}
.coding-course-screen .course-goals,
.coding-course-screen .course-assessment-unit-stats {
  position:relative; z-index:1; max-width:690px; margin:0; color:#d7c5b8; line-height:1.6;
}
.coding-course-screen .ap-unit-course-name,
.coding-course-screen .course-assessment-unit-course-name {
  position:relative; z-index:1; margin-bottom:8px; color:#ffad79;
  font-size:.67rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase;
}
.coding-course-screen .ap-unit-header .pw-mod-pos,
.coding-course-screen .course-assessment-unit-header .pw-mod-pos {
  position:relative; z-index:1; max-width:320px; margin:15px 0 0;
}
.coding-course-screen .ap-unit-header .pw-mod-pos-bar,
.coding-course-screen .course-assessment-unit-header .pw-mod-pos-bar { background:rgba(255,255,255,.14); }
.coding-course-screen .ap-unit-header .pw-mod-pos-label,
.coding-course-screen .course-assessment-unit-header .pw-mod-pos-label { color:#d7c5b8; }
.coding-course-screen .course-level-badge {
  position:relative; z-index:1; align-self:flex-start; margin-bottom:10px;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.09); color:#ffb785;
}
.coding-course-screen .course-erase-actions { position:relative; z-index:1; }
.coding-course-screen .course-erase-btn {
  border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#eadbd0;
}
html[data-theme="dark"] .coding-course-screen .course-erase-btn {
  border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.11); color:#fff5ed;
}
.coding-course-screen .course-module-progress-strip,
.coding-course-screen .course-bucket-strip {
  margin:16px auto 26px; padding:14px 16px; border:1px solid var(--cc-line);
  border-radius:13px; background:var(--cc-surface);
}
.coding-course-screen .course-bucket-strip { border-left:4px solid var(--cc-accent); }
.coding-course-screen .course-module-progress-strip .course-progress-row,
.coding-course-screen .course-bucket-strip .course-progress-row { color:var(--cc-ink); }
.coding-course-screen .course-bucket-note { color:var(--cc-muted); }
.coding-course-screen .course-bucket-note strong { color:var(--cc-accent); }
.coding-course-screen .course-section { margin-bottom:34px; }
.coding-course-screen .course-section-heading {
  display:flex; align-items:center; gap:10px; margin:0 0 14px; padding-top:8px;
  color:var(--cc-ink); font-size:1.28rem;
}
.coding-course-screen .course-section-heading::before {
  content:''; width:5px; height:22px; border-radius:99px; background:var(--cc-accent);
}
.coding-course-screen .course-section-body,
.coding-course-screen .np-lesson,
.coding-course-screen .pd-lesson,
.coding-course-screen .course-section-body p,
.coding-course-screen .course-inline-list li { color:var(--cc-ink); font-size:.91rem; line-height:1.75; }
.coding-course-screen .course-chapter-grid {
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px;
}
.coding-course-screen .course-chapter-card {
  min-height:64px; padding:11px 13px; gap:11px; border-color:var(--cc-line);
  border-radius:13px; background:var(--cc-surface); box-shadow:0 4px 14px rgba(48,31,20,.035);
}
.coding-course-screen .course-chapter-card:hover {
  border-color:var(--cc-accent); background:#fff4ec; transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(69,37,19,.09);
}
.coding-course-screen .course-chapter-card-num {
  min-width:35px; height:35px; display:grid; place-items:center;
  border:1px solid #e7b998; border-radius:10px; color:var(--cc-accent);
  background:#fff5ee; font-size:.66rem;
}
.coding-course-screen .course-chapter-card-title {
  flex:1; color:var(--cc-ink); font-weight:650; line-height:1.35;
}
.coding-course-screen .course-module-progress { color:var(--cc-muted); white-space:nowrap; }
.coding-course-screen .course-chapter-card-check { color:#3f8a69; }
.coding-course-screen .course-chapter-card.done { border-color:#b9d7c8; background:#f5fbf8; }
.coding-course-screen .course-example,
.coding-course-screen .course-practice-item,
.coding-course-screen .course-assessment-type-section,
.coding-course-screen .course-assessment-question-card,
.coding-course-screen .ml-overview-box {
  border-color:var(--cc-line); border-radius:15px; background:var(--cc-surface);
  box-shadow:0 5px 18px rgba(48,31,20,.04);
}
.coding-course-screen .course-example,
.coding-course-screen .course-practice-item,
.coding-course-screen .course-assessment-question-card { padding:20px; }
.coding-course-screen .course-practice-num {
  min-width:34px; height:34px; border-radius:10px; background:#f8dfce; color:var(--cc-accent);
}
.coding-course-screen .course-assessment-type-header {
  min-height:52px; padding:13px 16px; border-color:var(--cc-line);
  background:#f7efe7; color:var(--cc-ink);
}
.coding-course-screen .course-assessment-type-header:hover { background:#f4e3d6; }
.coding-course-screen .course-assessment-type-body { padding:14px; }
.coding-course-screen .course-assessment-question-num,
.coding-course-screen .course-assessment-question-id { color:var(--cc-accent); font-weight:750; }
.coding-course-screen .course-assessment-choice {
  min-height:48px; padding:11px 13px; border-color:var(--cc-line);
  border-radius:11px; background:#fffdfa; color:var(--cc-ink);
}
.coding-course-screen .course-assessment-choice:hover {
  border-color:var(--cc-accent); background:#fff2e8;
}

.coding-course-screen .course-assessment-choice.correct,
.coding-course-screen .course-assessment-choice.correct:hover {
  background:#d1fae5; border-color:#059669; color:#14110D;
}
.coding-course-screen .course-assessment-choice.incorrect,
.coding-course-screen .course-assessment-choice.incorrect:hover {
  background:#fee2e2; border-color:#dc2626; color:#14110D;
}
.coding-course-screen .course-assessment-choice.correct .course-assessment-choice-letter {
  background:#059669; color:#fff;
}
.coding-course-screen .course-assessment-choice.incorrect .course-assessment-choice-letter {
  background:#dc2626; color:#fff;
}
.coding-course-screen .course-assessment-choice.correct .course-assessment-choice-text,
.coding-course-screen .course-assessment-choice.incorrect .course-assessment-choice-text {
  color:#14110D;
}

html[data-theme="dark"] .coding-course-screen .course-assessment-choice.correct,
html[data-theme="dark"] .coding-course-screen .course-assessment-choice.correct:hover {
  background:#123524; border-color:#34d399; color:#eafff5;
}
html[data-theme="dark"] .coding-course-screen .course-assessment-choice.incorrect,
html[data-theme="dark"] .coding-course-screen .course-assessment-choice.incorrect:hover {
  background:#3b1618; border-color:#f87171; color:#ffecec;
}
html[data-theme="dark"] .coding-course-screen .course-assessment-choice.correct .course-assessment-choice-text,
html[data-theme="dark"] .coding-course-screen .course-assessment-choice.incorrect .course-assessment-choice-text {
  color:inherit;
}
.coding-course-screen .course-assessment-choice-letter {
  min-width:27px; height:27px; display:grid; place-items:center;
  border-radius:8px; background:#f3e2d5; color:var(--cc-accent);
}
.coding-course-screen .course-code,
.coding-course-screen .np-code-block,
.coding-course-screen .pd-code-block {
  min-height:110px; padding:24px; border:1px solid var(--cc-code-line); border-radius:13px;
  background:var(--cc-code); color:#eee7df; box-shadow:inset 0 1px rgba(255,255,255,.04);
  font-size:1rem; line-height:1.7;
}
.coding-course-screen .course-code-input,
.coding-course-screen .course-assessment-free-response,
.coding-course-screen textarea.sql-code-input,
.coding-course-screen textarea.np-code-input,
.coding-course-screen textarea.pd-code-input {
  border:1px solid var(--cc-code-line); border-radius:12px;
  background:var(--cc-code); color:#eee7df; caret-color:var(--cc-accent-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.coding-course-screen .course-code-input {
  min-height:220px; padding:20px; font-size:.96rem; line-height:1.65;
}
.coding-course-screen .course-code-input:focus,
.coding-course-screen .course-assessment-free-response:focus,
.coding-course-screen textarea:focus {
  border-color:var(--cc-accent); box-shadow:0 0 0 3px rgba(213,90,32,.12); outline:0;
}
.coding-course-screen .course-code-output,
.coding-course-screen .np-output-block,
.coding-course-screen .pd-output-block {
  border:1px solid var(--cc-line); border-radius:11px; background:#eee7df; color:var(--cc-ink);
}
.coding-course-screen .course-run-btn,
.coding-course-screen .course-try-btn,
.coding-course-screen .course-assessment-check-btn,
.coding-course-screen .btn-primary {
  min-height:37px; padding:0 15px; border:0; border-radius:10px;
  background:var(--cc-accent); color:#fff; font-weight:700;
}
.coding-course-screen .course-run-btn:hover,
.coding-course-screen .course-try-btn:hover,
.coding-course-screen .course-assessment-check-btn:hover,
.coding-course-screen .btn-primary:hover { background:#b94717; }
.coding-course-screen .course-check-btn { border-radius:10px; }
.coding-course-screen .course-solution-btn,
.coding-course-screen .course-hint-btn,
.coding-course-screen .course-assessment-hint-btn,
.coding-course-screen .course-assessment-answer-btn {
  min-height:35px; padding:0 12px; border:1px solid var(--cc-line);
  border-radius:9px; background:var(--cc-surface-2); color:var(--cc-ink);
}
.coding-course-screen .course-reinforcement { background:#fff1e6; border-color:var(--cc-accent); border-radius:13px; }
.coding-course-screen .course-mistakes,
.coding-course-screen .course-summary { border-radius:13px; }
.coding-course-screen .course-table-wrap {
  border-color:var(--cc-line); border-radius:13px; background:var(--cc-surface);
}
.coding-course-screen .course-table th { background:var(--cc-surface-2); }
.coding-course-screen .pw-page-nav-card {
  border-color:var(--cc-line); border-radius:14px; background:var(--cc-surface);
}
.coding-course-screen .pw-page-nav-card:hover { border-color:var(--cc-accent); background:#fff4ec; }
.coding-course-screen .pw-page-nav-label { color:var(--cc-accent); }
.coding-course-screen .pw-page-next .pw-page-nav-label { color:var(--cc-accent); }
.coding-course-screen .pw-page-next .pw-page-nav-title { color:var(--cc-ink); }
.coding-course-screen .pw-page-next .pw-page-nav-meta { color:var(--cc-muted); }

/* Shared coding-course landing dashboard. */
.coding-course-screen .cc-home { max-width:1120px; }
.cc-home-hero {
  position:relative; overflow:hidden; min-height:390px; display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr); align-items:center; gap:38px;
  padding:50px clamp(30px,5vw,66px); border:1px solid #4b3529; border-radius:28px;
  background:radial-gradient(circle at 84% 14%,rgba(242,138,70,.3),transparent 28%),
             linear-gradient(135deg,#171411 0%,#30231d 58%,#823817 100%);
  color:#fff8f2; box-shadow:0 25px 70px rgba(43,27,18,.2);
}
.cc-home-hero::after {
  content:''; position:absolute; inset:0; opacity:.1; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:34px 34px; mask-image:linear-gradient(to left,#000,transparent 72%);
}
.cc-home-copy { position:relative; z-index:2; }
.cc-home-eyebrow {
  display:block; color:#ffad79; font-size:.68rem; font-weight:750;
  letter-spacing:.14em; text-transform:uppercase;
}
.cc-home-copy h1 {
  margin:12px 0 17px; color:#fff; font:750 clamp(2.6rem,5vw,4.5rem)/.98 'Playfair Display',serif;
  letter-spacing:-.045em;
}
.cc-home-copy>p { max-width:620px; margin:0; color:#e1d1c5; font-size:.92rem; line-height:1.72; }
.cc-home-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.cc-home-actions button {
  min-height:44px; padding:0 17px; border-radius:11px;
  font:700 .73rem/1 'DM Sans',sans-serif; cursor:pointer;
}
.cc-home-primary { border:0; background:#fff8f2; color:#943b14; }
.cc-home-primary span { margin-left:12px; }
.cc-home-secondary { border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.08); color:#fff; }
.cc-home-actions button:hover { transform:translateY(-2px); }
.cc-home-stats { display:flex; flex-wrap:wrap; gap:20px; margin-top:28px; color:#d8c7ba; font-size:.64rem; }
.cc-home-stats span { display:flex; align-items:baseline; gap:5px; }
.cc-home-stats strong { color:#fff; font-size:.94rem; }
.cc-home-mark { position:relative; z-index:2; min-height:270px; display:grid; place-items:center; }
.cc-home-mark::before {
  content:''; position:absolute; width:232px; height:232px; border-radius:42px;
  border:1px solid rgba(255,190,143,.3); transform:rotate(8deg);
  background:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
             linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:28px 28px;
}
.cc-home-mark::after {
  content:'CODE'; position:absolute; left:20px; bottom:38px; color:rgba(255,255,255,.16);
  font:800 1.15rem/1 'SF Mono',monospace; letter-spacing:.14em;
}
#course-screen .cc-home-mark::after { content:'def main()'; }
#sql-course-screen .cc-home-mark::after { content:'SELECT *'; }
#np-course-screen .cc-home-mark::after { content:'[ 0 1 ]'; }
#pd-course-screen .cc-home-mark::after { content:'DATAFRAME'; }
#ml-course-screen .cc-home-mark::after { content:'MODEL.AI'; }
.cc-home-mark img {
  width:105px; height:105px; padding:19px; object-fit:contain; border-radius:28px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.32);
  box-shadow:0 0 55px rgba(232,112,47,.22);
}
.cc-home-mark span {
  position:absolute; right:23px; top:46px; width:48px; height:48px; display:grid; place-items:center;
  border-radius:50%; background:#f39a60; color:#3b2115; font:800 .73rem/1 monospace;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}
#course-screen .cc-home-mark span,
#sql-course-screen .cc-home-mark span,
#np-course-screen .cc-home-mark span,
#pd-course-screen .cc-home-mark span,
#ml-course-screen .cc-home-mark span { font-size:0; }
#course-screen .cc-home-mark span::after { content:'PY'; font-size:.75rem; }
#sql-course-screen .cc-home-mark span::after { content:'SQL'; font-size:.65rem; }
#np-course-screen .cc-home-mark span::after { content:'NP'; font-size:.72rem; }
#pd-course-screen .cc-home-mark span::after { content:'PD'; font-size:.72rem; }
#ml-course-screen .cc-home-mark span::after { content:'AI'; font-size:.75rem; }
.cc-home-continue {
  width:calc(100% - 54px); max-width:880px; position:relative; z-index:4;
  display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:13px;
  margin:-25px auto 52px; padding:15px 18px; border:1px solid var(--cc-line);
  border-radius:16px; background:var(--cc-surface); color:var(--cc-ink); text-align:left;
  box-shadow:0 15px 42px rgba(45,27,17,.14); cursor:pointer;
}
.cc-home-continue:hover { border-color:var(--cc-accent); transform:translateY(-2px); }
.cc-home-continue-icon {
  width:38px; height:38px; display:grid; place-items:center; border-radius:11px;
  background:var(--cc-surface-2); color:var(--cc-accent); font-weight:800;
}
.cc-home-continue>span:nth-child(2) { min-width:0; display:flex; flex-direction:column; gap:2px; }
.cc-home-continue small { color:var(--cc-accent); font-size:.58rem; font-weight:750; text-transform:uppercase; letter-spacing:.06em; }
.cc-home-continue strong { overflow:hidden; color:var(--cc-ink); font-size:.8rem; text-overflow:ellipsis; white-space:nowrap; }
.cc-home-continue em { color:var(--cc-muted); font-size:.61rem; font-style:normal; }
.cc-home-continue>span:last-child { color:var(--cc-accent); font-size:.64rem; font-weight:750; white-space:nowrap; }
.cc-home-heading {
  display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:20px;
}
.cc-home-heading span { color:var(--cc-accent); font-size:.66rem; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }
.cc-home-heading h2 { margin:6px 0 0; color:var(--cc-ink); font:750 clamp(1.7rem,3vw,2.45rem)/1.12 'Playfair Display',serif; }
.cc-home-heading>p { max-width:310px; margin:0; color:var(--cc-muted); font-size:.72rem; line-height:1.55; }
.cc-home-roadmap { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.cc-module-card {
  min-width:0; overflow:hidden; display:flex; flex-direction:column;
  border:1px solid var(--cc-line); border-radius:17px; background:var(--cc-surface);
  transition:.2s ease;
}
.cc-module-card:hover { border-color:#dc966f; transform:translateY(-3px); box-shadow:0 13px 34px rgba(50,29,17,.09); }
.cc-module-card.done { border-color:#acd0bd; }
.cc-module-main {
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:stretch;
  padding:17px; border:0; background:transparent; color:var(--cc-ink);
  font:inherit; text-align:left; cursor:pointer;
}
.cc-module-top { display:flex; justify-content:space-between; color:var(--cc-accent); font-size:.59rem; text-transform:uppercase; letter-spacing:.05em; }
.cc-module-top i { color:var(--cc-muted); font-style:normal; }
.cc-module-number {
  width:48px; height:48px; display:grid; place-items:center; margin:20px 0 14px;
  border:1px solid #e7b998; border-radius:14px; background:#fff4eb;
  color:var(--cc-accent); font:750 .8rem/1 'DM Sans',sans-serif;
}
.cc-module-main>strong { min-height:43px; color:var(--cc-ink); font:750 .91rem/1.27 'Playfair Display',serif; }
.cc-module-main>small { margin-top:5px; color:var(--cc-muted); font-size:.59rem; }
.cc-module-progress { height:5px; margin-top:auto; overflow:hidden; border-radius:99px; background:var(--cc-surface-2); }
.cc-module-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--cc-accent),var(--cc-accent-2)); }
.cc-module-open { display:flex; justify-content:space-between; margin-top:11px; color:var(--cc-accent); font-size:.62rem; font-weight:700; }
.cc-module-open i { font-style:normal; }
.cc-module-quick {
  display:flex; gap:6px; padding:8px; border-top:1px solid var(--cc-line); background:var(--cc-surface-2);
}
.cc-module-quick button {
  flex:1; min-height:31px; padding:0 7px; border:1px solid var(--cc-line); border-radius:8px;
  background:var(--cc-surface); color:var(--cc-ink); font:700 .56rem/1 'DM Sans',sans-serif; cursor:pointer;
}
.cc-module-quick button:hover { border-color:var(--cc-accent); color:var(--cc-accent); }
.cc-home-method {
  margin-top:58px; padding:25px; display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; border-radius:20px; background:var(--cc-surface-2);
}
.cc-home-method>div { display:grid; grid-template-columns:33px 1fr; column-gap:9px; }
.cc-home-method span { grid-row:1/3; color:var(--cc-accent); font-size:.62rem; font-weight:800; }
.cc-home-method strong { color:var(--cc-ink); font-size:.75rem; }
.cc-home-method p { margin:4px 0 0; color:var(--cc-muted); font-size:.64rem; line-height:1.48; }

.cc-completion-controls {
  position:relative; z-index:2; display:flex; align-items:center; flex-wrap:wrap;
  gap:7px; margin-top:17px;
}
.cc-completion-controls span {
  min-height:32px; display:inline-flex; align-items:center; padding:0 10px;
  border:1px solid rgba(255,255,255,.22); border-radius:9px;
  color:#d8c7ba; background:rgba(255,255,255,.07); font-size:.61rem; font-weight:700;
}
.cc-completion-controls button {
  min-height:32px; padding:0 11px; border:1px solid rgba(255,255,255,.25);
  border-radius:9px; background:rgba(255,255,255,.09); color:#fff;
  font:700 .61rem/1 'DM Sans',sans-serif; cursor:pointer;
}
.cc-completion-controls button:hover:not(:disabled) {
  border-color:#ffad79; background:rgba(255,129,64,.18); color:#ffd4bb;
}
.cc-completion-controls button:disabled { opacity:.38; cursor:default; }
.cc-completion-controls.is-complete span {
  border-color:rgba(112,200,158,.42); background:rgba(53,135,96,.2); color:#9ce0bf;
}

html[data-theme="dark"] .coding-course-screen {
  --cc-bg:#100d0b; --cc-surface:#1d1814; --cc-surface-2:#2a211b;
  --cc-ink:#f5eee8; --cc-muted:#b9aa9f; --cc-line:#46382f;
  --cc-accent:#ff8140; --cc-accent-2:#ffad79; --cc-code:#0b0908; --cc-code-line:#4a3930;
}
html[data-theme="dark"] .coding-course-screen .course-topbar { background:rgba(24,19,16,.96); }
html[data-theme="dark"] .coding-course-screen .course-topbar .back-btn,
html[data-theme="dark"] .coding-course-screen .course-sidebar-toggle,
html[data-theme="dark"] .coding-course-screen .pw-course-starred-btn {
  background:var(--cc-surface); color:var(--cc-ink);
}
html[data-theme="dark"] .coding-course-screen .course-topbar .back-btn:hover,
html[data-theme="dark"] .coding-course-screen .course-sidebar-toggle:hover,
html[data-theme="dark"] .coding-course-screen .pw-course-starred-btn:hover {
  background:#3a2419; color:#ffad79;
}
html[data-theme="dark"] .coding-course-screen .course-sidebar { background:#15110e; }
html[data-theme="dark"] .coding-course-screen .course-sidebar-tools { background:#15110e; }
html[data-theme="dark"] .coding-course-screen .course-sidebar-search input {
  background:#211a16; border-color:#49382e; color:#f7eee7;
}
html[data-theme="dark"] .coding-course-screen .course-sidebar-module.active-module { background:#211a16; }
html[data-theme="dark"] .coding-course-screen .course-sidebar-module-header:hover,
html[data-theme="dark"] .coding-course-screen .course-sidebar-module-header.active-module { background:#2a211b; }
html[data-theme="dark"] .coding-course-screen .course-sidebar-chapter:hover { background:#211a16; }
html[data-theme="dark"] .coding-course-screen .course-sidebar-chapter.active { background:#43271a; color:#ffc09a; }
html[data-theme="dark"] .coding-course-screen .course-sidebar-chapter.done .course-sidebar-ch-num,
html[data-theme="dark"] .coding-course-screen .course-sidebar-mod-prog.complete {
  border-color:#396b56; background:#173126; color:#82d2ae;
}
html[data-theme="dark"] .coding-course-screen .course-chapter-card:hover,
html[data-theme="dark"] .coding-course-screen .pw-page-nav-card:hover { background:#302019; }
html[data-theme="dark"] .coding-course-screen .course-chapter-card-num {
  border-color:#6d432d; background:#352219;
}
html[data-theme="dark"] .coding-course-screen .course-chapter-card.done {
  border-color:#315c4a; background:#172a22;
}
html[data-theme="dark"] .coding-course-screen .course-assessment-type-header { background:#2a211b; }
html[data-theme="dark"] .coding-course-screen .course-assessment-type-header:hover { background:#35251d; }
html[data-theme="dark"] .coding-course-screen .course-assessment-choice {
  background:#181411; color:var(--cc-ink);
}
html[data-theme="dark"] .coding-course-screen .course-assessment-choice:hover { background:#352219; }
html[data-theme="dark"] .coding-course-screen .course-assessment-choice-letter { background:#35251d; }
html[data-theme="dark"] .coding-course-screen .course-code-output,
html[data-theme="dark"] .coding-course-screen .np-output-block,
html[data-theme="dark"] .coding-course-screen .pd-output-block {
  background:#211a16; color:var(--cc-ink);
}
html[data-theme="dark"] .coding-course-screen .course-reinforcement { background:#352219; }
html[data-theme="dark"] .cc-module-number { border-color:#6d432d; background:#352219; }
html[data-theme="dark"] .cc-module-card.done { border-color:#315c4a; }

@media (min-width:769px) {
  .coding-course-screen.sidebar-open .course-sidebar {
    width:0;
    min-width:0;
    border-right-color:transparent;
    visibility:hidden;
  }
}

@media (max-width:900px) {
  .coding-course-screen .course-sidebar { width:300px; min-width:300px; }
  .coding-course-screen .course-content { padding:25px 20px 65px; }
  .cc-home-roadmap { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px) {
  .coding-course-screen .course-topbar { padding:8px 10px; }
  .coding-course-screen .course-topbar .back-btn { font-size:.66rem; padding:0 9px; }
  .coding-course-screen .course-sidebar {
    position:fixed; top:0; bottom:0; left:-310px; height:100dvh; max-height:100dvh; z-index:60;
  }
  .coding-course-screen.sidebar-open .course-sidebar { left:0; }
  .coding-course-screen .course-content {
    max-height:calc(100dvh - 116px); padding:18px 12px 55px;
  }
  .coding-course-screen .course-header,
  .coding-course-screen .ap-unit-header,
  .coding-course-screen .course-assessment-unit-header {
    min-height:150px; padding:24px 20px; border-radius:18px;
  }
  .coding-course-screen .course-header::after,
  .coding-course-screen .ap-unit-header::after,
  .coding-course-screen .course-assessment-unit-header::after { display:none; }
  .coding-course-screen .course-title,
  .coding-course-screen .ap-unit-title,
  .coding-course-screen .course-assessment-unit-title { font-size:1.75rem; }
  .coding-course-screen .course-chapter-grid { grid-template-columns:1fr; }
  .coding-course-screen .course-example,
.coding-course-screen .course-practice-item,
.coding-course-screen .course-assessment-question-card { padding:15px; }
  .cc-home-hero { min-height:auto; grid-template-columns:1fr; padding:38px 24px 31px; border-radius:21px; }
  .cc-home-mark { display:none; }
  .cc-home-copy h1 { font-size:2.65rem; }
  .cc-home-continue { width:calc(100% - 18px); margin-bottom:40px; grid-template-columns:38px minmax(0,1fr); }
  .cc-home-continue>span:last-child { display:none; }
  .cc-home-heading { align-items:flex-start; flex-direction:column; gap:9px; }
  .cc-home-roadmap { grid-template-columns:1fr; }
  .cc-home-method { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .coding-course-screen .pw-course-starred-btn { width:38px; padding:0; font-size:0; }
  .coding-course-screen .pw-course-starred-btn::after { content:'☆'; font-size:.9rem; }
  .coding-course-screen .course-practice-item { flex-direction:column; }
}

/* ════════════════════════════════════════════════════════════════════════
   SHARED SURFACES ACROSS ALL FIVE CODING COURSES

   Python, SQL, NumPy, Pandas and ML all render on `.coding-course-screen`
   and already share the `.course-*` and `.cc-*` families. What had drifted
   were the per-course leftovers: the grouped rules above reach `.np-*` and
   `.pd-*` but were never extended to `.sql-*` or `.ml-*`, so a SQL result
   grid and a Pandas dataset grid — the same object on screen — carried
   separate, slightly different rules, and ML's lesson text used its own
   size, leading and colour.

   These rules bring the stragglers onto the shared tokens. They are additive
   and last in the file, so they win on equal specificity without anything
   above needing to be edited.
   ════════════════════════════════════════════════════════════════════════ */

/* Editors — SQL's was the only one carrying its own font stack. */
.coding-course-screen textarea.sql-code-input,
.coding-course-screen textarea.np-code-input,
.coding-course-screen textarea.pd-code-input,
.coding-course-screen .course-code-input {
  font-family:'Fira Code','Consolas','Monaco',monospace;
  min-height:220px; padding:20px; font-size:.96rem; line-height:1.65;
}

/* Run output: a SQL result grid and a Pandas dataset grid are the same
   object, so they get the same frame. */
.coding-course-screen .sql-result-scroll,
.coding-course-screen .pd-dataset-scroll {
  border:1px solid var(--cc-line); border-radius:11px;
  background:var(--cc-surface);
}
.coding-course-screen .sql-result-table,
.coding-course-screen .pd-dataset-table,
.coding-course-screen .np-lesson-table {
  border-collapse:collapse; min-width:100%;
}
.coding-course-screen .sql-result-table th,
.coding-course-screen .pd-dataset-table th,
.coding-course-screen .np-lesson-table th {
  padding:8px 12px; border-bottom:1px solid var(--cc-line);
  background:var(--cc-surface-2); color:var(--cc-ink);
  font-weight:700; position:sticky; top:0;
}
.coding-course-screen .sql-result-table td,
.coding-course-screen .pd-dataset-table td,
.coding-course-screen .np-lesson-table td {
  padding:8px 12px; border-bottom:1px solid var(--cc-line);
  color:var(--cc-muted);
}
.coding-course-screen .sql-result-table tbody tr:last-child td,
.coding-course-screen .pd-dataset-table tbody tr:last-child td,
.coding-course-screen .np-lesson-table tbody tr:last-child td {
  border-bottom:none;
}

/* SQL had no code-block rule at all, so its rendered SQL sat unstyled while
   the same block in NumPy and Pandas got the dark editor treatment. */
.coding-course-screen .sql-result,
.coding-course-screen .sql-return-hint { color:var(--cc-muted); }

/* Lesson prose: ML used its own size, leading and colour. */
.coding-course-screen .np-lesson-text,
.coding-course-screen .pd-lesson,
.coding-course-screen .ml-lesson-text {
  font-size:.92rem; line-height:1.7; color:var(--cc-ink); margin:0 0 10px;
}
.coding-course-screen .np-lesson,
.coding-course-screen .pd-lesson,
.coding-course-screen .np-lesson:last-child,
.coding-course-screen .pd-lesson:last-child,

/* Boxed asides — the overview box and SQL's hint box share one card. */
.coding-course-screen .ml-overview-box,
.coding-course-screen .sql-hint-box {
  border:1px solid var(--cc-line); border-radius:15px;
  background:var(--cc-surface); box-shadow:0 5px 18px rgba(48,31,20,.04);
  padding:20px;
}

html[data-theme="dark"] .coding-course-screen .sql-result-scroll,
html[data-theme="dark"] .coding-course-screen .pd-dataset-scroll,
html[data-theme="dark"] .coding-course-screen .ml-overview-box,
html[data-theme="dark"] .coding-course-screen .sql-hint-box {
  background:#211a16; color:var(--cc-ink);
}
html[data-theme="dark"] .coding-course-screen .sql-result-table th,
html[data-theme="dark"] .coding-course-screen .pd-dataset-table th,
html[data-theme="dark"] .coding-course-screen .np-lesson-table th {
  background:#35251d;
}