/* ═══════════════════════════════════════════════════
   CORSO TKINTER — STYLESHEET
   Versione: 2.0 — Cross-browser, fully responsive
═══════════════════════════════════════════════════ */

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* ══════════════════════════════
   THEMES — CSS custom properties
══════════════════════════════ */

/* LIGHT (default) */
:root, [data-theme="light"] {
  --bg:               #f0f2f5;
  --surface:          #ffffff;
  --surface2:         #f7f8fa;
  --border:           #e4e6eb;
  --text:             #1c1e21;
  --muted:            #65676b;
  --accent:           #1877f2;
  --accent2:          #42b72a;
  --accent3:          #e74c3c;
  --accent4:          #f39c12;
  --code-bg:          #1e2030;
  --code-text:        #abb2bf;
  --nav-bg:           #1877f2;
  --highlight-bg:     #e7f3ff;
  --highlight-border: #c8e0ff;
  --callout-tip-bg:   #e6f4ea;
  --callout-tip-text: #1a5c28;
  --callout-warn-bg:  #fff8e1;
  --callout-warn-text:#7a5300;
  --shadow:           0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:        0 4px 12px rgba(0,0,0,.12);
  --shadow-lg:        0 8px 24px rgba(0,0,0,.14);
  --radius:           12px;
  --sidebar-w:        280px;
  --right-w:          300px;
  --top-h:            56px;
  --mono: 'JetBrains Mono', 'Courier New', Courier, monospace;
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* DARK — Catppuccin Mocha */
[data-theme="dark"] {
  --bg:               #1e1e2e;
  --surface:          #24273a;
  --surface2:         #313244;
  --border:           #45475a;
  --text:             #cdd6f4;
  --muted:            #a6adc8;
  --accent:           #89b4fa;
  --accent2:          #a6e3a1;
  --accent3:          #f38ba8;
  --accent4:          #fab387;
  --code-bg:          #11111b;
  --code-text:        #cdd6f4;
  --nav-bg:           #181825;
  --highlight-bg:     rgba(137,180,250,.12);
  --highlight-border: rgba(137,180,250,.30);
  --callout-tip-bg:   rgba(166,227,161,.10);
  --callout-tip-text: #a6e3a1;
  --callout-warn-bg:  rgba(250,179,135,.10);
  --callout-warn-text:#fab387;
  --shadow:           0 1px 4px rgba(0,0,0,.40);
  --shadow-md:        0 4px 16px rgba(0,0,0,.50);
  --shadow-lg:        0 8px 28px rgba(0,0,0,.60);
}

/* MIDNIGHT — GitHub Dark */
[data-theme="midnight"] {
  --bg:               #0d1117;
  --surface:          #161b22;
  --surface2:         #21262d;
  --border:           #30363d;
  --text:             #e6edf3;
  --muted:            #848d97;
  --accent:           #58a6ff;
  --accent2:          #3fb950;
  --accent3:          #ff7b72;
  --accent4:          #d29922;
  --code-bg:          #010409;
  --code-text:        #e6edf3;
  --nav-bg:           #161b22;
  --highlight-bg:     rgba(88,166,255,.10);
  --highlight-border: rgba(88,166,255,.25);
  --callout-tip-bg:   rgba(63,185,80,.08);
  --callout-tip-text: #3fb950;
  --callout-warn-bg:  rgba(210,153,34,.08);
  --callout-warn-text:#d29922;
  --shadow:           0 1px 4px rgba(0,0,0,.50);
  --shadow-md:        0 4px 16px rgba(0,0,0,.60);
  --shadow-lg:        0 8px 28px rgba(0,0,0,.70);
}

/* FOREST */
[data-theme="forest"] {
  --bg:               #0f2027;
  --surface:          #162028;
  --surface2:         #1e2f38;
  --border:           #2a4050;
  --text:             #d4e8d4;
  --muted:            #7aac8a;
  --accent:           #4caf82;
  --accent2:          #81c784;
  --accent3:          #ef5350;
  --accent4:          #ffb74d;
  --code-bg:          #0a1a20;
  --code-text:        #d4e8d4;
  --nav-bg:           #0f2a1e;
  --highlight-bg:     rgba(76,175,130,.12);
  --highlight-border: rgba(76,175,130,.30);
  --callout-tip-bg:   rgba(129,199,132,.10);
  --callout-tip-text: #81c784;
  --callout-warn-bg:  rgba(255,183,77,.10);
  --callout-warn-text:#ffb74d;
  --shadow:           0 1px 4px rgba(0,0,0,.50);
  --shadow-md:        0 4px 16px rgba(0,0,0,.60);
  --shadow-lg:        0 8px 28px rgba(0,0,0,.70);
}

/* SEPIA */
[data-theme="sepia"] {
  --bg:               #f4ecd8;
  --surface:          #fdf6e3;
  --surface2:         #f0e8d0;
  --border:           #d4c5a9;
  --text:             #3c3220;
  --muted:            #7c6c50;
  --accent:           #b5460a;
  --accent2:          #527a3a;
  --accent3:          #c0392b;
  --accent4:          #c67c1a;
  --code-bg:          #1e1912;
  --code-text:        #e8d9b5;
  --nav-bg:           #8b4513;
  --highlight-bg:     rgba(181,70,10,.08);
  --highlight-border: rgba(181,70,10,.20);
  --callout-tip-bg:   rgba(82,122,58,.10);
  --callout-tip-text: #527a3a;
  --callout-warn-bg:  rgba(198,124,26,.10);
  --callout-warn-text:#c67c1a;
  --shadow:           0 1px 3px rgba(0,0,0,.10);
  --shadow-md:        0 4px 12px rgba(0,0,0,.15);
  --shadow-lg:        0 8px 20px rgba(0,0,0,.18);
}

/* ── SMOOTH THEME TRANSITION ── */
body { transition: background-color .25s ease, color .2s ease; }
.card, .left-sidebar, .right-sidebar, .top-nav,
.lesson-header-card, .lesson-card, .nav-menu-item,
.stat-box, .rp-section, .sidebar-progress, .profile-body,
.profile-stats, .callout, .quiz-box, .quiz-opt, .widget-card,
.lesson-footer, .lesson-card-top, .code-header {
  transition: background-color .25s ease, border-color .25s ease, color .2s ease;
}

/* ══════════════════════════════
   BASE LAYOUT
══════════════════════════════ */
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── TOP NAV ── */
.top-nav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  height: var(--top-h);
  background: var(--nav-bg);
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  gap: 8px;
}
.top-nav-left { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.top-nav-logo {
  font-size:15px; font-weight:800; color:#fff;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.top-nav-logo span { font-size:13px; font-weight:600; opacity:.9; }
.hamburger {
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.15);
  border:none; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  transition:background .2s; flex-shrink:0;
}
.hamburger:hover { background:rgba(255,255,255,.28); }
.hamburger span {
  display:block; width:18px; height:2px;
  background:#fff; border-radius:2px; transition:all .3s;
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.top-nav-search {
  flex:1; max-width:360px;
  display:flex; align-items:center;
  background:rgba(255,255,255,.18); border-radius:20px; padding:0 14px;
  height:36px; gap:8px; min-width:0;
}
.top-nav-search input {
  background:transparent; border:none; outline:none; color:#fff;
  font-size:14px; font-family:var(--sans); width:100%; min-width:0;
}
.top-nav-search input::placeholder { color:rgba(255,255,255,.65); }

.top-nav-right {
  display:flex; align-items:center; gap:6px; flex-shrink:0;
}
.nav-pill {
  display:flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.15); border:none; border-radius:8px;
  padding:6px 12px; color:#fff; font-size:13px; font-weight:600;
  font-family:var(--sans); cursor:pointer; transition:background .2s; white-space:nowrap;
}
.nav-pill:hover { background:rgba(255,255,255,.28); }
.nav-pill:disabled { opacity:.45; cursor:not-allowed; }
.progress-pill {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.15); border-radius:20px; padding:4px 12px 4px 6px;
}
.progress-circle {
  width:28px; height:28px; border-radius:50%;
  background:conic-gradient(rgba(255,255,255,.95) 0%, rgba(255,255,255,.2) 0%);
  display:flex; align-items:center; justify-content:center;
  font-size:8px; font-weight:800; color:#fff; transition:background .4s;
  flex-shrink:0;
}
.progress-pill span { font-size:12px; color:#fff; font-weight:600; white-space:nowrap; }

/* ── THEME PICKER ── */
.theme-picker { position:relative; }
.theme-toggle-btn {
  display:flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.15); border:none; border-radius:8px;
  padding:6px 10px; color:#fff; font-size:12px; font-weight:600;
  font-family:var(--sans); cursor:pointer; transition:background .2s; white-space:nowrap;
}
.theme-toggle-btn:hover { background:rgba(255,255,255,.28); }
.theme-toggle-btn svg { stroke:#fff; flex-shrink:0; }
.theme-dropdown {
  display:none; position:fixed; top:calc(var(--top-h) + 6px); right:8px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:8px; min-width:170px; z-index:400;
  animation:dropIn .15s ease;
}
@keyframes dropIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.theme-dropdown.open { display:block; }
.theme-dropdown-title {
  font-size:10px; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:1.2px; padding:4px 8px 8px;
}
.theme-opt {
  display:flex; align-items:center; gap:8px; width:100%;
  padding:8px 10px; border:none; border-radius:8px;
  background:transparent; color:var(--text); font-size:13px; font-weight:600;
  font-family:var(--sans); cursor:pointer; text-align:left; transition:background .15s;
}
.theme-opt:hover { background:var(--surface2); }
.theme-opt.active { background:var(--highlight-bg); color:var(--accent); }
.theme-opt.active::after { content:'✓'; margin-left:auto; font-weight:800; }
.theme-swatch {
  width:20px; height:20px; border-radius:5px; border:1px solid var(--border);
  flex-shrink:0; display:inline-block;
}

/* ── LAYOUT ── */
.layout {
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--right-w);
  gap:16px;
  max-width:1400px;
  margin:0 auto;
  padding: calc(var(--top-h) + 16px) 16px 32px;
  align-items:start;
}

/* ── CARD ── */
.card {
  background:var(--surface); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.card + .card { margin-top:16px; }

/* ══════════════════════════════
   LEFT SIDEBAR
══════════════════════════════ */
.left-sidebar {
  position:sticky; top:calc(var(--top-h) + 16px);
  height:calc(100vh - var(--top-h) - 32px);
  display:flex; flex-direction:column; overflow:hidden;
  transition: transform .3s ease, width .3s ease;
}
.sidebar-profile { flex-shrink:0; }
.sidebar-scroll {
  flex:1; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:#c8d0db transparent;
}
.sidebar-scroll::-webkit-scrollbar { width:4px; }
.sidebar-scroll::-webkit-scrollbar-track { background:transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background:#c8d0db; border-radius:4px; }
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background:#a0aabc; }

/* Profile */
.profile-body { padding:20px 16px 12px; }
.profile-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.profile-logo { width:36px; height:36px; flex-shrink:0; }
.profile-name { font-size:17px; font-weight:800; color:var(--text); line-height:1.2; }
.profile-role { font-size:12px; color:var(--muted); margin-top:3px; }
.profile-bio {
  font-size:11px; color:var(--accent); font-weight:600; margin-top:8px;
  line-height:1.5; background:var(--highlight-bg); border-radius:6px; padding:5px 8px;
}
.profile-stats {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:1px; background:var(--border); border-top:1px solid var(--border);
}
.stat-box { background:var(--surface); padding:10px 6px; text-align:center; }
.stat-num { font-size:17px; font-weight:800; color:var(--accent); }
.stat-lbl { font-size:10px; color:var(--muted); margin-top:1px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }

/* Nav menu */
.nav-menu { padding:8px 0; }
.nav-menu-title {
  font-size:10px; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:1.5px; padding:10px 16px 4px;
}
.nav-menu-item {
  display:flex; align-items:center; gap:10px; padding:9px 16px;
  cursor:pointer; transition:background .15s; border-left:3px solid transparent;
  font-size:14px; font-weight:600; color:var(--muted); user-select:none;
}
.nav-menu-item:hover { background:var(--surface2); color:var(--accent); }
.nav-menu-item.active { background:var(--highlight-bg); color:var(--accent); border-left-color:var(--accent); }
.nav-menu-item.done::after { content:'✓'; margin-left:auto; color:var(--accent2); font-weight:800; }
.nav-icon {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0;
}
.ni-blue{background:var(--highlight-bg);} .ni-green{background:#e6f4ea;} .ni-orange{background:#fff3e0;}
.ni-purple{background:#f3e8fd;} .ni-pink{background:#fce4ec;} .ni-teal{background:#e0f7fa;}
.nav-num { font-size:10px; color:var(--muted); font-family:var(--mono); margin-left:auto; flex-shrink:0; }
.nav-menu-item.active .nav-num { color:var(--accent); }

/* Progress */
.sidebar-progress { padding:12px 16px; border-top:1px solid var(--border); }
.sp-label { font-size:11px; color:var(--muted); margin-bottom:6px; font-weight:600; }
.sp-bar-wrap { height:6px; background:var(--border); border-radius:3px; }
.sp-bar { height:6px; border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .4s; width:0%; }
.sp-info { display:flex; justify-content:space-between; margin-top:5px; font-size:10px; color:var(--muted); font-weight:600; }

/* Desktop sidebar collapse */
.left-sidebar.desktop-collapsed { transform:translateX(-100%); width:0; min-width:0; overflow:hidden; border:none; }
.layout.sidebar-collapsed { grid-template-columns:0 1fr var(--right-w); }

/* ══════════════════════════════
   CENTER COLUMN
══════════════════════════════ */
.center-col { min-width:0; width:100%; }

/* Lesson header card */
.lesson-header-card {
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:14px 18px; margin-bottom:16px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.lh-meta { flex:1; min-width:0; }
.lh-title {
  font-size:15px; font-weight:700; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lh-sub { font-size:12px; color:var(--muted); margin-top:2px; }
.lh-sub span { color:var(--accent); font-weight:700; }
.lh-actions { display:flex; gap:8px; flex-shrink:0; }
.lh-btn {
  padding:7px 16px; border-radius:6px; border:none; cursor:pointer;
  font-family:var(--sans); font-weight:700; font-size:13px; transition:all .15s; white-space:nowrap;
}
.lh-btn-primary { background:var(--accent); color:#fff; }
.lh-btn-primary:hover { opacity:.88; }
.lh-btn-primary:disabled { opacity:.4; cursor:not-allowed; }
.lh-btn-outline { background:var(--surface2); color:var(--accent); border:1px solid var(--border); }
.lh-btn-outline:hover { background:var(--highlight-bg); border-color:var(--accent); }

/* Lesson card */
.lesson-card { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.lesson-card-top {
  padding:20px 24px 16px; border-bottom:2px solid var(--accent);
  background:linear-gradient(to bottom,var(--highlight-bg) 0%,var(--surface) 100%);
}
.lesson-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent); color:#fff; font-size:10px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  padding:4px 10px; border-radius:4px; margin-bottom:12px;
}
.lesson-card-top h1 {
  font-size:28px; font-weight:800; color:var(--text); line-height:1.2;
  letter-spacing:-.5px; word-break:break-word;
}
.lesson-card-top h1 .highlight { color:var(--accent); }
.lesson-meta {
  display:flex; flex-wrap:wrap; gap:4px 14px;
  margin-top:10px; font-size:12px; color:var(--muted); font-family:var(--mono);
}
.lesson-meta span::before { content:'▸ '; color:var(--accent4); }

.lesson-body { padding:24px; }

/* Lesson footer */
.lesson-footer {
  border-top:1px solid var(--border); padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--surface2); flex-wrap:wrap; gap:8px;
}
.lf-left { font-size:13px; color:var(--muted); font-weight:500; }
.lf-btns { display:flex; gap:8px; }
.lf-btn {
  display:flex; align-items:center; gap:6px; padding:7px 16px;
  border-radius:6px; border:none; cursor:pointer;
  font-family:var(--sans); font-weight:700; font-size:13px; transition:all .15s;
  white-space:nowrap;
}
.lf-btn-prev { background:var(--surface); color:var(--accent); border:1.5px solid var(--border); }
.lf-btn-prev:hover { background:var(--highlight-bg); border-color:var(--accent); }
.lf-btn-prev:disabled { opacity:.35; cursor:not-allowed; }
.lf-btn-next { background:var(--accent); color:#fff; }
.lf-btn-next:hover { opacity:.88; }

/* ══════════════════════════════
   PROSE (lesson content)
══════════════════════════════ */
.prose { font-size:15px; line-height:1.85; color:var(--text); }
.prose h2 {
  font-size:19px; font-weight:800; color:var(--text);
  margin:28px 0 12px; padding-bottom:8px; border-bottom:2px solid var(--border);
  word-break:break-word;
}
.prose h3 { font-size:15px; font-weight:700; color:var(--accent); margin:20px 0 8px; word-break:break-word; }
.prose p { margin-bottom:14px; }
.prose ul { padding-left:20px; margin-bottom:14px; list-style:disc; }
.prose ul li { margin-bottom:6px; }
.prose strong { color:var(--text); font-weight:700; }

/* Inline code */
code {
  font-family:var(--mono); font-size:.82em;
  background:var(--highlight-bg); border:1px solid var(--highlight-border);
  border-radius:4px; padding:1px 5px; color:var(--accent);
  word-break:break-word; overflow-wrap:break-word;
}

/* ══════════════════════════════
   CODE BLOCKS — key fix area
══════════════════════════════ */
.code-block {
  border-radius:10px; overflow:hidden; margin:16px 0;
  box-shadow:var(--shadow);
  /* Prevent the block itself from overflowing its container */
  max-width:100%;
  min-width:0;
}
.code-header {
  background:#161b27; display:flex; align-items:center;
  justify-content:space-between; padding:8px 14px;
  font-family:var(--mono); font-size:11px; color:#8b949e;
  /* Never wrap header items */
  white-space:nowrap; overflow:hidden;
}
.code-header-name {
  overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0;
}
.code-dots { display:flex; gap:5px; flex-shrink:0; }
.code-dots span { width:10px; height:10px; border-radius:50%; display:block; flex-shrink:0; }
.dot-r{background:#ff5f57;} .dot-y{background:#ffbd2e;} .dot-g{background:#28c840;}
.code-copy {
  cursor:pointer; padding:3px 10px; border-radius:4px;
  border:1px solid #30363d; background:transparent; color:#8b949e;
  font-family:var(--mono); font-size:10px; transition:all .15s; flex-shrink:0;
}
.code-copy:hover { color:#58a6ff; border-color:#58a6ff; }

/* THE CRITICAL FIX: pre must scroll, never overflow its parent */
pre {
  background:var(--code-bg);
  padding:16px 18px;
  /* Horizontal scroll — never overflow */
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  /* Font */
  font-family:var(--mono);
  font-size:13px;
  line-height:1.75;
  color:var(--code-text);
  /* NEVER wrap code — let it scroll */
  white-space:pre;
  word-break:normal;
  word-wrap:normal;
  /* Remove any margin that could push it out */
  margin:0;
  tab-size:2;
  -moz-tab-size:2;
  /* Ensure it never exceeds its container width */
  max-width:100%;
  /* Scrollbar styling */
  scrollbar-width:thin;
  scrollbar-color:#45475a transparent;
}
pre::-webkit-scrollbar { height:5px; }
pre::-webkit-scrollbar-track { background:transparent; }
pre::-webkit-scrollbar-thumb { background:#45475a; border-radius:3px; }
pre::-webkit-scrollbar-thumb:hover { background:#6b7280; }

/* Syntax highlight */
.kw{color:#c678dd;} .fn{color:#61afef;} .str{color:#98c379;}
.cm{color:#5c6370;font-style:italic;} .num{color:#d19a66;}
.cls{color:#e5c07b;} .var{color:#e06c75;}

/* ── CALLOUTS ── */
.callout { border-radius:8px; padding:14px 16px; margin:16px 0; border-left:4px solid; font-size:14px; line-height:1.6; }
.callout-info  { background:var(--highlight-bg); border-color:var(--accent); color:var(--text); }
.callout-tip { background:var(--callout-tip-bg,#e6f4ea); border-color:var(--accent2); color:var(--callout-tip-text,#1a5c28); }
.callout-warn { background:var(--callout-warn-bg,#fff8e1); border-color:var(--accent4); color:var(--callout-warn-text,#7a5300); }
.callout-label { font-weight:800; font-size:11px; letter-spacing:1px; text-transform:uppercase; margin-bottom:5px; display:block; }

/* ── QUIZ ── */
.quiz-box { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:20px; margin:24px 0; }
.quiz-box h3 { font-size:14px; font-weight:700; color:var(--accent); margin-bottom:12px; }
.quiz-options { display:flex; flex-direction:column; gap:8px; }
.quiz-opt {
  padding:10px 14px; border-radius:8px; border:1.5px solid var(--border);
  cursor:pointer; transition:all .15s; font-size:13px; font-weight:600;
  display:flex; align-items:center; gap:10px; background:var(--surface); color:var(--text);
  word-break:break-word; text-align:left;
}
.quiz-opt:hover { border-color:var(--accent); background:var(--highlight-bg); color:var(--accent); }
.quiz-opt.correct { border-color:var(--accent2); background:var(--callout-tip-bg); color:var(--callout-tip-text); }
.quiz-opt.wrong   { border-color:var(--accent3); background:rgba(231,76,60,.08); color:var(--accent3); }
.opt-key {
  width:22px; height:22px; border-radius:4px; background:var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10px; flex-shrink:0; font-weight:700;
}
.quiz-result { margin-top:12px; font-size:13px; font-weight:600; display:none; }
.quiz-result.show { display:block; }

/* ── WIDGET GRID ── */
.widget-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin:16px 0; }
.widget-card { background:var(--surface2); border:1.5px solid var(--border); border-radius:10px; padding:14px; text-align:center; transition:all .2s; }
.widget-card[data-goto] { cursor:pointer; }
.widget-card[data-goto]:hover { border-color:var(--accent); background:var(--highlight-bg); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.widget-icon { font-size:22px; margin-bottom:6px; }
.wico { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; font-size:20px; margin-bottom:4px; }
.wico-orange{background:#fff3e0;} .wico-gray{background:var(--surface2);} .wico-accent3{background:#fff3e0;}
.wico-blue{background:var(--highlight-bg);} .wico-accent2{background:#ede7f6;} .wico-pink{background:#fce4ec;}
.wico-green{background:#e8f5e9;} .wcard-active { border-color:var(--accent)!important; box-shadow:0 0 0 2px var(--highlight-border); }
.widget-name { font-size:12px; font-weight:700; color:var(--text); word-break:break-word; }
.widget-desc { font-size:10px; color:var(--muted); margin-top:2px; }
.widget-card-arrow { font-size:9px; color:var(--accent); margin-top:4px; opacity:0; transition:opacity .2s; }
.widget-card[data-goto]:hover .widget-card-arrow { opacity:1; }

/* ── PROJECT BOX ── */
.project-box {
  background:linear-gradient(135deg,var(--highlight-bg),var(--callout-tip-bg,#e6f4ea));
  border:1.5px solid var(--highlight-border); border-radius:10px; padding:20px; margin:20px 0;
}
.project-box h2 { font-size:17px; font-weight:800; color:var(--accent); border:none; margin:0 0 10px; }

/* ── LESSON COMPLETE ── */
.lesson-complete { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:24px; margin:32px 0; text-align:center; }
.lesson-complete h3 { font-size:16px; font-weight:800; margin-bottom:6px; color:var(--text); }
.lesson-complete p { color:var(--muted); font-size:13px; margin-bottom:16px; }

/* ══════════════════════════════
   RIGHT SIDEBAR
══════════════════════════════ */
.right-sidebar { position:sticky; top:calc(var(--top-h) + 16px); }
.rp-section { padding:14px 16px; }
.rp-section + .rp-section { border-top:1px solid var(--border); }
.rp-title { font-size:11px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.rp-item { display:flex; align-items:center; gap:10px; padding:8px 6px; border-radius:8px; cursor:pointer; transition:background .15s; text-decoration:none; color:var(--text); margin-bottom:2px; }
.rp-item:hover { background:var(--surface2); }
.rp-item-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.ico-blue{background:var(--highlight-bg);} .ico-green{background:#e6f4ea;} .ico-orange{background:#fff3e0;}
.ico-pink{background:#fce4ec;} .ico-purple{background:#ede7f6;} .ico-teal{background:#e0f7fa;}
.rp-item-body { flex:1; min-width:0; }
.rp-item-label { font-size:12px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-item-sub { font-size:10px; color:var(--muted); margin-top:1px; }
.rp-badge { font-size:9px; font-weight:700; padding:2px 6px; border-radius:4px; text-transform:uppercase; letter-spacing:.5px; flex-shrink:0; }
.badge-new { background:var(--callout-tip-bg); color:var(--accent2); }
.badge-hot { background:#fce4ec; color:var(--accent3); }
.badge-free { background:var(--highlight-bg); color:var(--accent); }
.rp-news-item { padding:8px 6px; border-radius:8px; cursor:pointer; margin-bottom:4px; transition:background .15s; border-left:3px solid transparent; }
.rp-news-item:hover { background:var(--surface2); border-left-color:var(--accent); }
.rp-news-q { font-size:12px; font-weight:600; color:var(--text); line-height:1.4; }
.rp-news-meta { font-size:10px; color:var(--muted); margin-top:3px; }
.rp-progress-wrap { height:5px; background:var(--border); border-radius:3px; margin-top:6px; }
.rp-progress-bar { height:5px; border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .4s; }
.rp-pct-ring {
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(var(--accent) 0%, var(--border) 0%);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:var(--accent); transition:background .4s;
  box-shadow:inset 0 0 0 6px var(--surface2);
}
.rp-survey { background:linear-gradient(135deg,var(--accent),rgba(0,0,0,.25)); border-radius:10px; padding:14px; }
.rp-survey h4 { font-size:13px; font-weight:800; margin-bottom:6px; color:#fff; }
.rp-survey p { font-size:11px; opacity:.85; margin-bottom:10px; line-height:1.5; color:#fff; }
.rp-survey a {
  display:block; text-align:center; background:#fff; color:var(--accent);
  font-size:11px; font-weight:800; padding:7px; border-radius:6px; text-decoration:none; transition:opacity .2s;
}
.rp-survey a:hover { opacity:.9; }

/* ── OVERLAY ── */
.sidebar-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:150; }
.sidebar-overlay.show { display:block; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--muted); }

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */

/* ≤1200px: hide right sidebar */
@media (max-width:1200px) {
  :root { --right-w:0px; }
  .layout { grid-template-columns:var(--sidebar-w) 1fr; }
  .right-sidebar { display:none; }
  .layout.sidebar-collapsed { grid-template-columns:0 1fr; }
}

/* ≤900px: smaller sidebar, tighter layout */
@media (max-width:900px) {
  :root { --sidebar-w:240px; }
  .lesson-card-top h1 { font-size:24px; }
  pre { font-size:12px; }
  .lesson-body { padding:18px; }
  .top-nav-logo span { display:none; }
}

/* ≤820px: mobile — sidebar becomes overlay drawer */
@media (max-width:820px) {
  :root { --sidebar-w:0px; }
  .layout {
    grid-template-columns:1fr;
    padding-left:10px; padding-right:10px; gap:12px;
  }
  .left-sidebar {
    position:fixed; top:0; left:0; z-index:160;
    width:min(85vw,300px) !important;
    height:100%; max-height:100vh;
    background:var(--surface);
    box-shadow:var(--shadow-lg);
    transform:translateX(-100%);
    transition:transform .3s ease;
    border-radius:0; overflow-y:auto;
  }
  .left-sidebar.open { transform:translateX(0) !important; }
  .left-sidebar.desktop-collapsed { transform:translateX(-100%) !important; }
  .sidebar-scroll { overflow:visible; max-height:none; flex:none; }
  .lesson-header-card { padding:10px 14px; }
  .lh-title { font-size:14px; }
  .lesson-card-top { padding:16px 16px 12px; }
  .lesson-card-top h1 { font-size:22px; }
  .lesson-body { padding:14px; }
  .lesson-footer { padding:10px 14px; }
  .lf-btn { padding:6px 12px; font-size:12px; }
  .lh-btn { padding:6px 12px; font-size:12px; }
  pre { font-size:11.5px; padding:12px 14px; }
  .top-nav-search { max-width:180px; }
}

/* ≤600px: small phones */
@media (max-width:600px) {
  .top-nav { padding:0 8px; gap:6px; }
  .top-nav-search { display:none; }
  .nav-pill span { display:none; }
  .nav-pill { padding:5px 8px; }
  .theme-toggle-btn span { display:none; }
  .theme-toggle-btn { padding:5px 8px; }
  .lesson-card-top h1 { font-size:19px; }
  .lesson-meta { font-size:11px; }
  pre { font-size:10.5px; padding:10px 12px; }
  .widget-grid { grid-template-columns:repeat(2,1fr); }
  .quiz-opt { font-size:12px; padding:8px 10px; }
  .lh-actions { gap:4px; }
}

/* ≤380px: tiny screens */
@media (max-width:380px) {
  .lesson-card-top h1 { font-size:17px; }
  pre { font-size:9.5px; padding:8px 10px; }
  .lesson-body { padding:10px; }
  .lf-btn { padding:5px 8px; font-size:11px; }
  .nav-pill { padding:4px 6px; font-size:11px; }
}

/* ── PRINT ── */
@media print {
  .top-nav,.left-sidebar,.right-sidebar,.sidebar-overlay,.theme-picker { display:none!important; }
  .layout { display:block; padding:0; }
  .lesson-card { box-shadow:none; border:none; }
  pre { white-space:pre-wrap; overflow:visible; background:#f5f5f5; color:#000; font-size:11px; }
  .code-block { border:1px solid #ccc; }
  .lesson-card-top h1 { font-size:22px; }
}