:root{--blue:#003366;--blue2:#0066cc;--light:#f4f8fc;--card:#ffffff;--text:#222;--muted:#666;--ok:#e8f7e8;--warn:#fff6d6;--line:#d9e2ec;}
*{box-sizing:border-box;} body{font-family:Arial,Helvetica,sans-serif;margin:0;background:var(--light);color:var(--text);} .container{width:92%;max-width:1200px;margin:auto;padding:20px;}
.header{background:var(--blue);color:white;padding:26px;text-align:center;border-radius:12px;margin-bottom:24px;} .header h1,.header h2{margin:6px 0;}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;} .card{background:var(--card);border-radius:12px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.12);border:1px solid var(--line);}
.btn{display:inline-block;background:var(--blue2);color:white;padding:11px 16px;border-radius:8px;text-decoration:none;font-weight:bold;margin:5px 6px 5px 0;} .btn.secondary{background:#555;} .btn.small{font-size:14px;padding:8px 12px;}
.progress-box{background:#eef5ff;border:1px solid #c9ddf5;border-radius:10px;padding:12px;margin:10px 0;} .progress-bar{height:16px;background:#ddd;border-radius:99px;overflow:hidden;} .progress-fill{height:16px;background:#2b8a3e;width:0%;}
.lesson-row{border-top:1px solid var(--line);padding:14px 0;} .footer{text-align:center;color:var(--muted);padding:30px;margin-top:30px;} .notice{background:var(--warn);border:1px solid #ead07a;padding:14px;border-radius:10px;margin:14px 0;}
.user-panel{background:white;border:1px solid var(--line);padding:16px;border-radius:12px;margin-bottom:18px;} input[type=text]{padding:10px;border:1px solid #aaa;border-radius:8px;min-width:240px;} .course-description{font-size:18px;line-height:1.5;max-width:900px;margin:12px auto;} button{padding:10px 14px;border:0;border-radius:8px;background:var(--blue2);color:white;font-weight:bold;cursor:pointer;}
.completed{background:var(--ok);border-color:#a7d7a7;} code{background:#fff8e8;padding:2px 5px;border-radius:4px;}

/* Code theme override */

:root { color-scheme: light; }
body.theme-light {
  --blue:#003366;
  --blue2:#0066cc;
  --light:#f4f8fc;
  --card:#ffffff;
  --text:#222222;
  --muted:#666666;
  --line:#d9e2ec;
}
body.theme-dark {
  --blue:#111827;
  --blue2:#2563eb;
  --light:#111827;
  --card:#1f2937;
  --text:#f9fafb;
  --muted:#d1d5db;
  --line:#4b5563;
}
body.theme-dark .user-panel, body.theme-dark .card, body.theme-dark .download-section {
  background:var(--card) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
}
body.theme-dark input[type=text] {
  background:#111827 !important;
  color:#f9fafb !important;
  border-color:#6b7280 !important;
}
body.theme-dark .progress-box {
  background:#172033 !important;
  border-color:#374151 !important;
}
body.theme-light pre, body.theme-light code, body.theme-light pre code, body.theme-light .sourceCode, body.theme-light div.sourceCode, body.theme-light div.sourceCode pre, body.theme-light .cell-output, body.theme-light .cell-code {
  background:#fffaf0 !important;
  color:#111111 !important;
}
body.theme-dark pre, body.theme-dark code, body.theme-dark pre code, body.theme-dark .sourceCode, body.theme-dark div.sourceCode, body.theme-dark div.sourceCode pre, body.theme-dark .cell-output, body.theme-dark .cell-code {
  background:#1f1f1f !important;
  color:#f5f5f5 !important;
}
pre, div.sourceCode, div.sourceCode pre, .cell-output, .cell-code {
  border:1px solid #ddd !important;
  box-shadow:none !important;
}
.theme-switcher {
  text-align:right;
  margin:8px 0 16px 0;
}
.theme-switcher button {
  background:#e9eef5;
  color:#111;
  border:1px solid #bfc7d1;
  margin-left:6px;
}
.theme-switcher button.active-theme {
  background:#0066cc !important;
  color:white !important;
}
body.theme-dark .theme-switcher { color:#f9fafb; }
body.theme-dark .theme-switcher button {
  background:#374151;
  color:#f9fafb;
  border-color:#6b7280;
}
@media print {
  body { background:white !important; color:black !important; }
  pre, code, pre code, .sourceCode, div.sourceCode, div.sourceCode pre, .cell-output, .cell-code {
    background:white !important;
    color:black !important;
    border:1px solid #ddd !important;
  }
  .theme-switcher { display:none !important; }
}