@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap');

:root {
  --fs-xs: 12px; --fs-sm: 14px; --fs-base: 15px; --fs-md: 16px;
  --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 26px; --fs-3xl: 32px;
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2,.8,.2,1); --dur: 200ms;
}

/* ============ 10 PERFECT CONTRAST THEMES ============ */

/* 1. Dark Default */
[data-theme="dark-default"] {
  --bg-page: #0f172a; --bg-surface: #1e293b; --bg-surface-2: #334155; --bg-surface-3: #475569;
  --text-page: #e2e8f0; --text-surface: #f8fafc; --text-muted: #94a3b8;
  --border: #475569; --border-strong: #64748b;
  --accent: #38bdf8; --accent-fg: #0f172a;
  --success: #22c55e; --success-soft: #14532d; --danger: #f87171; --danger-soft: #7f1d1d; --warning: #fbbf24; --warning-soft: #78350f;
  --code-bg: #0a0f1a; --code-text: #e2e8f0;
  --input-bg: #0f172a; --input-border: #475569;
}

/* 2. Light Default */
[data-theme="light-default"] {
  --bg-page: #f3f4f6; 
  --bg-surface: #ffffff; 
  --bg-surface-2: #f3f4f6; 
  --bg-surface-3: #e5e7eb;
  --text-page: #111827; 
  --text-surface: #111827; 
  --text-muted: #6b7280;
  --border: #e5e7eb; --border-strong: #d1d5db;
  --accent: #6366f1; --accent-fg: #ffffff;
  --success: #10b981; --success-soft: #d1fae5; --danger: #ef4444; --danger-soft: #fee2e2; --warning: #f59e0b; --warning-soft: #fef3c7;
  --code-bg: #1e293b; --code-text: #f8fafc; /* Keep code blocks dark for contrast */
  --input-bg: #ffffff; --input-border: #d1d5db;
}

/* 3. Light Warm */
[data-theme="light-warm"] {
  --bg-page: #fdf6e3; 
  --bg-surface: #fffbeb; 
  --bg-surface-2: #fef3c7; 
  --bg-surface-3: #fde68a;
  --text-page: #451a03; 
  --text-surface: #451a03; 
  --text-muted: #92400e;
  --border: #fde68a; --border-strong: #fcd34d;
  --accent: #d97706; --accent-fg: #ffffff;
  --success: #10b981; --success-soft: #d1fae5; --danger: #dc2626; --danger-soft: #fee2e2; --warning: #d97706; --warning-soft: #fef3c7;
  --code-bg: #3a3020; --code-text: #fdf6e3;
  --input-bg: #fffbeb; --input-border: #fcd34d;
}

/* 4. Light Cool */
[data-theme="light-cool"] {
  --bg-page: #f0f9ff; 
  --bg-surface: #ffffff; 
  --bg-surface-2: #e0f2fe; 
  --bg-surface-3: #bae6fd;
  --text-page: #082f49; 
  --text-surface: #082f49; 
  --text-muted: #0369a1;
  --border: #bae6fd; --border-strong: #7dd3fc;
  --accent: #0284c7; --accent-fg: #ffffff;
  --success: #10b981; --success-soft: #d1fae5; --danger: #ef4444; --danger-soft: #fee2e2; --warning: #f59e0b; --warning-soft: #fef3c7;
  --code-bg: #0a192f; --code-text: #f0f4f8;
  --input-bg: #ffffff; --input-border: #7dd3fc;
}

/* 5. Light Sepia */
[data-theme="light-sepia"] {
  --bg-page: #f5f5f4; 
  --bg-surface: #fafaf9; 
  --bg-surface-2: #f5f5f4; 
  --bg-surface-3: #e7e5e4;
  --text-page: #292524; 
  --text-surface: #292524; 
  --text-muted: #78716c;
  --border: #e7e5e4; --border-strong: #d6d3d1;
  --accent: #78716c; --accent-fg: #ffffff;
  --success: #10b981; --success-soft: #d1fae5; --danger: #dc2626; --danger-soft: #fee2e2; --warning: #d97706; --warning-soft: #fef3c7;
  --code-bg: #2b1f15; --code-text: #f4ecd8;
  --input-bg: #fafaf9; --input-border: #d6d3d1;
}

/* 6. Light High Contrast */
[data-theme="light-high-contrast"] {
  --bg-page: #ffffff; 
  --bg-surface: #ffffff; 
  --bg-surface-2: #f3f4f6; 
  --bg-surface-3: #e5e7eb;
  --text-page: #000000; 
  --text-surface: #000000; 
  --text-muted: #000000;
  --border: #000000; --border-strong: #000000;
  --accent: #0000ff; --accent-fg: #ffffff;
  --success: #008000; --success-soft: #dcfce7; --danger: #cc0000; --danger-soft: #fee2e2; --warning: #cc8800; --warning-soft: #fef3c7;
  --code-bg: #000000; --code-text: #ffffff;
  --input-bg: #ffffff; --input-border: #000000;
}

/* 7. Dark Midnight */
[data-theme="dark-midnight"] {
  --bg-page: #0a0a0a; --bg-surface: #1a1a1a; --bg-surface-2: #2a2a2a; --bg-surface-3: #3a3a3a;
  --text-page: #e0e0e0; --text-surface: #e0e0e0; --text-muted: #909090;
  --border: #333333; --border-strong: #555555;
  --accent: #bb86fc; --accent-fg: #1a1a1a;
  --success: #03dac6; --success-soft: #004d40; --danger: #cf6679; --danger-soft: #3b1a22; --warning: #ffb74d; --warning-soft: #3b2a10;
  --code-bg: #000000; --code-text: #e0e0e0;
  --input-bg: #111111; --input-border: #333333;
}

/* 8. Dark Forest */
[data-theme="dark-forest"] {
  --bg-page: #0b1e0b; --bg-surface: #1a2e1a; --bg-surface-2: #2a3e2a; --bg-surface-3: #3a4e3a;
  --text-page: #c8e6c9; --text-surface: #c8e6c9; --text-muted: #81a884;
  --border: #2e4a2e; --border-strong: #456b45;
  --accent: #66bb6a; --accent-fg: #0b1e0b;
  --success: #a5d6a7; --success-soft: #1b3a1b; --danger: #ef5350; --danger-soft: #3b1a1a; --warning: #ffb74d; --warning-soft: #3b2a10;
  --code-bg: #050f05; --code-text: #c8e6c9;
  --input-bg: #051a05; --input-border: #2e4a2e;
}

/* 9. Dark Ocean */
[data-theme="dark-ocean"] {
  --bg-page: #0a192f; --bg-surface: #112240; --bg-surface-2: #1d3557; --bg-surface-3: #2a4569;
  --text-page: #a8b2d1; --text-surface: #a8b2d1; --text-muted: #64748b;
  --border: #233554; --border-strong: #345075;
  --accent: #64ffda; --accent-fg: #0a192f;
  --success: #57cbff; --success-soft: #0f2e3f; --danger: #ef476f; --danger-soft: #3f1a2b; --warning: #ffd166; --warning-soft: #3f2e10;
  --code-bg: #020d1e; --code-text: #a8b2d1;
  --input-bg: #020d1e; --input-border: #233554;
}

/* 10. Dark Solarized */
[data-theme="dark-solarized"] {
  --bg-page: #002b36; --bg-surface: #073642; --bg-surface-2: #0a4551; --bg-surface-3: #125863;
  --text-page: #839496; --text-surface: #839496; --text-muted: #586e75;
  --border: #586e75; --border-strong: #6b828b;
  --accent: #268bd2; --accent-fg: #ffffff;
  --success: #859900; --success-soft: #1a2e00; --danger: #dc322f; --danger-soft: #3b0e0c; --warning: #b58900; --warning-soft: #3b2a00;
  --code-bg: #001f26; --code-text: #839496;
  --input-bg: #00212b; --input-border: #586e75;
}

/* ============ BASE & ANIMATIONS ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg-page); color: var(--text-page);
  font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.5;
  -webkit-font-smoothing: antialiased; height: 100vh; overflow: hidden;
  transition: background var(--dur), color var(--dur);
}

body {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  height: 100vh;
}

body.takeover { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
body.takeover .sidebar { display: none; }

button { font-family: var(--font-sans); cursor: pointer; border: none; }
code, pre, kbd { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: var(--accent); text-decoration: none; }

@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
@keyframes popIn { 0% { transform: scale(0); opacity: 0; } 80% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: none; } }

.page > *, .dashboard > *, #lesson-tab-content { animation: fadeSlideUp 0.4s var(--ease) both; }
.checkmark-icon { animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.welcome h1 { animation: float 4s ease-in-out infinite; }

button, .sb-item, .course-card-large, .project-card, .blog-page-card, .tab, .action-btn { transition: all 0.2s var(--ease); }
button:hover, .btn-primary:hover, .btn-ghost:hover { transform: translateY(-2px); }
.course-card-large:hover, .project-card:hover, .blog-page-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 10px 25px rgba(0,0,0,0.2); }

/* ============ SIDEBAR & TOPBAR ============ */
.sidebar { grid-area: sidebar; background: var(--bg-surface); color: var(--text-surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.sb-brand { padding: 18px 20px; font-size: var(--fs-lg); font-weight: 700; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; cursor: pointer; }
.sb-brand:hover { background: var(--bg-surface-2); }
.sb-brand-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.sb-nav { flex: 1; overflow-y: auto; padding: 12px 12px 20px; }
.sb-section { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: 16px 12px 8px; }
.sb-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer; user-select: none; margin-bottom: 2px; }
.sb-item:hover { background: var(--bg-surface-2); color: var(--text-surface); transform: translateX(4px); }
.sb-item.active { background: var(--accent); color: var(--accent-fg); font-weight: 600; }
.sb-item .ico { width: 20px; text-align: center; font-size: var(--fs-md); flex-shrink: 0; }
.sb-item .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-footer { border-top: 1px solid var(--border); padding: 16px 20px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sb-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--fs-sm); flex-shrink: 0; }
.sb-user { flex: 1; min-width: 0; }
.sb-user-email { font-size: var(--fs-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-signout { background: transparent; border: none; color: var(--text-muted); font-size: var(--fs-md); padding: 6px; border-radius: var(--r-sm); cursor: pointer; }
.sb-signout:hover { background: var(--bg-surface-2); color: var(--text-surface); }
.sb-signin-btn { width: 100%; height: 40px; background: var(--accent); color: var(--accent-fg); border: none; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; }

.topbar { grid-area: topbar; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: var(--bg-surface); color: var(--text-surface); border-bottom: 1px solid var(--border); gap: 16px; z-index: 50; }
.topbar-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.back-btn { display: none; align-items: center; gap: 6px; height: 32px; padding: 0 14px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500; flex-shrink: 0; }
.back-btn:hover { background: var(--bg-surface-2); color: var(--text-surface); }
.back-btn.visible { display: inline-flex; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-muted); overflow: hidden; min-width: 0; }
.breadcrumb .sep { color: var(--border); }
.breadcrumb strong { color: var(--text-surface); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.theme-toggle { background: transparent; border: none; font-size: 20px; cursor: pointer; padding: 4px; border-radius: var(--r-sm); }
.theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  z-index: 100;
  width: 280px; /* Give it a fixed width so it doesn't look cramped */
  animation: fadeSlideUp 0.2s var(--ease);
}

.theme-menu[hidden] {
  display: none;
}
.theme-toggle:hover { transform: scale(1.05); }
.streak { display: flex; align-items: center; gap: 6px; padding: 4px 12px; background: var(--bg-surface-2); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; }
.topbar-signin { height: 32px; padding: 0 16px; background: var(--accent); color: var(--accent-fg); border: none; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; }

/* ============ MAIN & TABS ============ */
#content { grid-area: main; overflow-y: auto; overflow-x: hidden; min-height: 0; background: var(--bg-page); }
.dashboard, .page { max-width: 1200px; margin: 0 auto; padding: 32px 32px 80px; }

.tabs { display: flex; gap: 6px; background: var(--bg-surface); padding: 6px; border-radius: var(--r-lg); border: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; width: fit-content; }
.tab { padding: 10px 20px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); border-radius: var(--r-md); cursor: pointer; white-space: nowrap; background: transparent; border: none; }
.tab:hover { color: var(--text-surface); background: var(--bg-surface-2); }
.tab.active { color: var(--accent-fg); background: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.2); font-weight: 600; }

.sub-tabs { display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 4px; }
.sub-tab { padding: 6px 12px; font-size: var(--fs-sm); font-weight: 500; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.sub-tab:hover { background: var(--bg-surface-3); color: var(--text-surface); }
.sub-tab.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
/* ============ DASHBOARD & WIDGETS ============ */
.courses-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; margin-bottom: 40px; }
.course-card-large { background: var(--bg-surface); color: var(--text-surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 40px; cursor: pointer; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.course-card-large:hover { border-color: var(--accent); }
.course-icon { font-size: 48px; }
.course-title { font-size: var(--fs-2xl); font-weight: 700; }
.course-desc { font-size: var(--fs-md); color: var(--text-muted); line-height: 1.6; }

.welcome { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.welcome h1 { font-size: var(--fs-2xl); font-weight: 700; margin-bottom: 8px; color: var(--text-page); }
.welcome p { color: var(--text-muted); }
.continue-pill { display: inline-flex; align-items: center; gap: 16px; padding: 16px 24px; background: var(--bg-surface); color: var(--text-surface); border: 1px solid var(--accent); border-radius: var(--r-xl); cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.continue-pill:hover { background: var(--bg-surface-2); }
.continue-pill .pill-icon { font-size: var(--fs-xl); }
.continue-pill .pill-content { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.continue-pill .pill-label { color: var(--text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.continue-pill .pill-text { color: var(--text-surface); font-weight: 600; font-size: var(--fs-md); }
.continue-pill .pill-arrow { color: var(--accent); font-size: var(--fs-xl); margin-left: 8px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }
.stat-card { padding: 24px; background: var(--bg-surface); color: var(--text-surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.stat-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.stat-value { font-size: var(--fs-xl); font-weight: 700; font-family: var(--font-mono); }

.widget-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.widget { background: var(--bg-surface); color: var(--text-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.widget-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.widget-title { font-size: var(--fs-md); font-weight: 600; display: flex; align-items: center; gap: 10px; }
.dc-btn { width: 100%; height: 44px; background: var(--accent); color: var(--accent-fg); border: none; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; }
.cert-bar { height: 8px; background: var(--bg-surface-2); border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
.cert-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 1s ease; }

.blog-list { list-style: none; }
.blog-item { padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.blog-item:last-child { border-bottom: none; }
.blog-item:hover .blog-item-title { color: var(--accent); }
.blog-item-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-surface); margin-bottom: 4px; transition: color var(--dur); }
.blog-item-meta { font-size: var(--fs-xs); color: var(--text-muted); font-family: var(--font-mono); }

.lb-list { list-style: none; }
.lb-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.lb-item:last-child { border-bottom: none; }
.lb-rank { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-surface-2); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700; font-family: var(--font-mono); flex-shrink: 0; }
.lb-item:nth-child(1) .lb-rank { background: var(--warning); color: #0a0a0a; }
.lb-item:nth-child(2) .lb-rank { background: var(--text-muted); color: #0a0a0a; }
.lb-item:nth-child(3) .lb-rank { background: #b45309; color: #fff; }
.lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); flex-shrink: 0; }

/* ============ CODE-FIRST & RESIZABLE PANES ============ */
.codefirst { display: grid; grid-template-columns: 40% 6px 1fr; height: calc(100vh - 280px); min-height: 500px; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--bg-surface); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.cf-resizer { background: var(--border); cursor: col-resize; width: 6px; }
.cf-resizer:hover, .cf-resizer:active { background: var(--accent); }

.cf-spec-col { overflow-y: auto; display: flex; flex-direction: column; min-height: 0; background: var(--bg-surface); color: var(--text-surface); }
.cf-spec-head { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-shrink: 0; }
.cf-spec-title { font-size: var(--fs-lg); font-weight: 700; }
.cf-spec-body { padding: 24px; font-size: var(--fs-sm); line-height: 1.8; flex: 1; min-height: 0; }
.cf-spec-body h4 { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 10px; margin-top: 24px; }
.cf-expected { background: var(--code-bg); padding: 12px 16px; border-radius: var(--r-md); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--success); border: 1px solid var(--border); }

.action-row { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-surface-2); color: var(--text-surface); font-size: var(--fs-xs); font-weight: 500; cursor: pointer; }
.action-btn:hover { background: var(--bg-surface-3); }
.hint-content, .solution-content { display: none; margin-top: 12px; padding: 12px; border-radius: var(--r-md); background: var(--bg-surface-2); border-left: 3px solid var(--warning); font-family: var(--font-mono); font-size: var(--fs-sm); white-space: pre-wrap; color: var(--text-surface); }
.solution-content { border-left-color: var(--success); color: var(--success); }
.hint-content.visible, .solution-content.visible { display: block; }

.cf-test-item { padding: 12px 16px; border-radius: var(--r-md); font-size: var(--fs-xs); font-family: var(--font-mono); background: var(--bg-surface-2); color: var(--text-muted); white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word; max-height: 200px; overflow-y: auto; }
.cf-test-item.passed { background: var(--success-soft); color: var(--success); }
.cf-test-item.failed { background: var(--danger-soft); color: var(--danger); }

.cf-editor-col { display: flex; flex-direction: column; overflow: hidden; min-height: 0; background: var(--bg-surface); }
.cf-editor-bar { height: 48px; background: var(--bg-surface-2); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; color: var(--text-surface); }
.cf-editor-actions { display: flex; gap: 8px; }
.cf-monaco { flex: 1; min-height: 0; }
.cf-output-bar { flex-shrink: 0; background: var(--code-bg); border-top: 1px solid var(--border); max-height: 180px; overflow-y: auto; font-family: var(--font-mono); font-size: var(--fs-sm); }
.cf-output-label { padding: 6px 20px; background: var(--bg-surface-2); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); position: sticky; top: 0; }
.cf-output-content { padding: 16px 20px; white-space: pre-wrap; word-break: break-all; min-height: 48px; color: var(--code-text); }
.cf-output-content img { max-width: 100%; border-radius: var(--r-md); margin-top: 12px; border: 1px solid var(--border); }

.cf-nav { display: flex; justify-content: space-between; gap: 12px; padding: 20px 24px 24px; flex-shrink: 0; margin-top: auto; }
.btn-stop { display: none; background: var(--danger); color: white; border: none; height: 36px; padding: 0 16px; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; }
.btn-stop.visible { display: inline-flex; }

/* ============ QUIZ ============ */
.quiz-question { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; margin-bottom: 24px; }
.quiz-question p { font-size: var(--fs-md); font-weight: 600; margin-bottom: 16px; color: var(--text-surface); }
.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-option { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: all 0.2s; }
.quiz-option:hover { border-color: var(--accent); background: var(--bg-surface-3); }
.quiz-option input { accent-color: var(--accent); width: 20px; height: 20px; cursor: pointer; }
.quiz-option span { color: var(--text-surface); font-size: var(--fs-sm); }
.quiz-feedback { margin-top: 16px; padding: 12px 16px; border-radius: var(--r-md); font-size: var(--fs-sm); display: none; }
.quiz-feedback.correct { background: var(--success-soft); color: var(--success); display: block; }
.quiz-feedback.incorrect { background: var(--danger-soft); color: var(--danger); display: block; }

/* ============ LEADERBOARD FULL PAGE ============ */
.full-lb { background: var(--bg-surface); color: var(--text-surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-top: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.full-lb-row { display: grid; grid-template-columns: 64px 1fr 140px; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.full-lb-row:last-child { border-bottom: none; }
.full-lb-row.head { background: var(--bg-surface-2); font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.full-lb-row.me { background: rgba(129, 140, 248, 0.1); }
.full-lb-row .rank { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-surface-2); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 700; font-family: var(--font-mono); }
.full-lb-row .name { color: var(--text-surface); }
.full-lb-row.me .name { color: var(--accent); font-weight: 600; }
.full-lb-row .score { font-family: var(--font-mono); color: var(--text-muted); }

/* ============ OTHER PAGES ============ */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 24px; }
.project-card { background: var(--bg-surface); color: var(--text-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; cursor: pointer; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.project-card.done { border-color: rgba(52,211,153,.3); }
.project-card.locked { opacity: .75; }
.project-card-title { font-size: var(--fs-lg); font-weight: 600; margin-bottom: 8px; }
.project-card-desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.project-card-meta { font-size: var(--fs-xs); color: var(--text-muted); font-family: var(--font-mono); display: flex; justify-content: space-between; align-items: center; }

.blog-page-list { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.blog-page-card { background: var(--bg-surface); color: var(--text-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; cursor: pointer; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.blog-page-card h3 { font-size: var(--fs-lg); font-weight: 600; margin-bottom: 8px; }
.blog-page-card .meta { font-size: var(--fs-xs); color: var(--text-muted); font-family: var(--font-mono); margin-bottom: 12px; }
.blog-page-card p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }

.account-card { background: var(--bg-surface); color: var(--text-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; margin-bottom: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.account-card h3 { font-size: var(--fs-lg); font-weight: 600; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.account-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-size: var(--fs-sm); }
.account-row .label { color: var(--text-muted); }
.account-row .value { color: var(--text-surface); font-family: var(--font-mono); }

.pay-history-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.pay-history-table th { text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.pay-history-table td { padding: 16px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); color: var(--text-surface); }

.referral-card { background: var(--bg-surface); color: var(--text-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.referral-code-box { display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: var(--bg-surface-2); border: 1px dashed var(--border-strong); border-radius: var(--r-md); margin: 20px 0; }
.referral-code-box code { flex: 1; font-size: var(--fs-2xl); font-weight: 700; letter-spacing: .1em; color: var(--accent); font-family: var(--font-mono); }

.cheat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 24px; }
.cheat-card { background: var(--bg-surface); color: var(--text-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.cheat-card h3 { font-size: var(--fs-base); font-weight: 600; color: var(--accent); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.cheat-card pre { background: var(--code-bg); color: var(--code-text); padding: 14px 16px; border-radius: var(--r-md); font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.6; overflow-x: auto; margin: 0; }

.prose { font-size: var(--fs-base); line-height: 1.8; color: var(--text-surface); }
.prose h3 { font-size: var(--fs-lg); font-weight: 600; margin-top: 24px; margin-bottom: 12px; color: var(--text-page); }
.prose p { margin-bottom: 16px; }
.prose code { background: var(--bg-surface-2); padding: 2px 6px; border-radius: var(--r-sm); font-size: .9em; color: var(--text-surface); }
.prose pre { background: var(--code-bg); color: var(--code-text); padding: 16px 20px; border-radius: var(--r-md); margin: 16px 0; overflow-x: auto; font-size: var(--fs-sm); }

/* ============ MODALS & FORMS ============ */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); z-index: 200; padding: 24px; overflow-y: auto; display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh; }
.modal[hidden] { display: none; }
.modal-inner { max-width: 640px; width: 100%; background: var(--bg-surface); color: var(--text-surface); border: 1px solid var(--border-strong); border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); animation: modalIn 0.3s var(--ease); }
.modal-inner.wide { max-width: 800px; }
.modal-inner.narrow { max-width: 440px; }
.modal-head { padding: 20px 28px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-head h3 { font-size: var(--fs-lg); font-weight: 600; }
.modal-close { width: 32px; height: 32px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-muted); }
.modal-close:hover { background: var(--bg-surface-2); color: var(--text-surface); }
.modal-body { padding: 28px; max-height: 70vh; overflow-y: auto; }

.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.form-input, .form-textarea { width: 100%; padding: 0 16px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--r-md); color: var(--text-surface); font-size: var(--fs-sm); }
.form-input { height: 48px; }
.form-textarea { min-height: 120px; padding: 12px 16px; resize: vertical; }
.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--accent); }
.form-submit { width: 100%; height: 48px; background: var(--accent); color: var(--accent-fg); border: none; border-radius: var(--r-md); font-size: var(--fs-md); font-weight: 600; margin-top: 12px; }
.form-submit:hover { filter: brightness(1.1); }
.form-error { background: var(--danger-soft); color: var(--danger); padding: 12px 16px; border-radius: var(--r-md); font-size: var(--fs-sm); margin-bottom: 16px; display: none; }
.form-error.visible { display: block; }

.qa-thread { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; max-height: 50vh; overflow-y: auto; }
.qa-message { background: var(--bg-surface-2); padding: 16px; border-radius: var(--r-md); }
.qa-message.admin { border-left: 3px solid var(--accent); }
.qa-message .meta { font-size: var(--fs-xs); color: var(--text-muted); display: flex; justify-content: space-between; margin-bottom: 8px; }
.qa-message .content { font-size: var(--fs-sm); color: var(--text-surface); }
.qa-reply-box { display: flex; gap: 8px; border-top: 1px solid var(--border); padding-top: 16px; }

/* ============ UTILS & MOBILE ============ */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--success); color: #052e21; padding: 10px 20px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; z-index: 600; opacity: 0; transition: opacity 200ms; pointer-events: none; }
.toast.show { opacity: 1; }
.toast.error { background: var(--danger); color: #fff; }
.toast.warn { background: var(--warning); color: #0a0a0a; }

.loading-overlay { position: fixed; inset: 0; background: var(--bg-page); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; gap: 16px; }
.loading-overlay[hidden] { display: none; }
.spinner { width: 40px; height: 40px; border: 3px solid var(--bg-surface-2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }

.btn-primary { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; background: var(--accent); color: var(--accent-fg); border: none; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.btn-ghost { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.btn-ghost:hover { background: var(--bg-surface-2); color: var(--text-surface); }

/* Hide hamburger on desktop */
.hamburger-btn { display: none; background: transparent; border: none; color: var(--text-surface); font-size: 24px; padding: 0 8px; cursor: pointer; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); z-index: 90; }

@media (max-width: 1000px) {
  /* 1. Change main layout to topbar + content */
  body { grid-template-columns: 1fr; grid-template-rows: 56px 1fr; grid-template-areas: "topbar" "main"; }
  
  /* 2. Show hamburger */
  .hamburger-btn { display: block; }

  /* 3. Convert Sidebar to a slide-out Drawer */
  .sidebar { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    width: 280px; 
    z-index: 100; 
    transform: translateX(-100%); 
    transition: transform 0.3s var(--ease); 
    border-right: 1px solid var(--border);
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
    flex-direction: column; /* Revert to vertical */
  }
  .sidebar.open { transform: translateX(0); }
  
  /* 4. Show Backdrop */
  .sidebar-backdrop:not([hidden]) { display: block; }

  /* 5. Revert Sidebar items to their normal vertical look */
  .sb-brand, .sb-section, .sb-footer { display: block; }
  .sb-nav { flex-direction: column; padding: 12px 12px 20px; }
  .sb-item { flex-direction: row; gap: 12px; padding: 10px 14px; font-size: var(--fs-sm); min-width: auto; margin-bottom: 2px; text-align: left; }
  .sb-item .ico { font-size: var(--fs-md); }
  
  /* 6. Adjust Topbar & Main padding */
  .topbar { padding: 0 16px; }
  .dashboard, .page { padding: 20px 16px 60px; }
  
  /* 7. Responsive grid fixes */
  .courses-grid { grid-template-columns: 1fr; }
  .widget-grid { grid-template-columns: 1fr; }
  .codefirst { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; min-height: 600px; }
  .cf-resizer { display: none; }
  .cf-spec-col { border-bottom: 1px solid var(--border); max-height: 40vh; }
  .cf-editor-col { min-height: 400px; }
}

/* ============ THEME MENU FIXES ============ */

/* 1. Remove the tilt permanently */
.theme-toggle, .theme-toggle:hover { 
  transform: none !important; 
  display: flex; 
  align-items: center; 
  gap: 6px; 
  padding: 6px 12px; 
  background: var(--bg-surface-2); 
  border-radius: var(--r-md); 
  border: 1px solid var(--border);
  color: var(--text-surface);
}

/* 2. Dropdown Container */
.theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  z-index: 100;
  width: 280px;
  animation: modalIn 0.2s var(--ease);
}

.theme-menu[hidden] { display: none !important; }

/* 3. Swatches */
.theme-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.theme-swatch { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform 0.15s, border-color 0.15s; }
.theme-swatch:hover { transform: scale(1.15); }
.theme-swatch.active { border-color: var(--text-surface); box-shadow: 0 0 0 2px var(--bg-surface); }

/* Swatch Colors */
.theme-swatch[data-theme="dark-default"] { background: linear-gradient(135deg, #0f172a, #38bdf8); }
.theme-swatch[data-theme="light-default"] { background: #ffffff; border: 1px solid #e5e7eb; }
.theme-swatch[data-theme="dark-midnight"] { background: linear-gradient(135deg, #0a0a0a, #bb86fc); }
.theme-swatch[data-theme="dark-forest"] { background: linear-gradient(135deg, #0b1e0b, #66bb6a); }
.theme-swatch[data-theme="dark-ocean"] { background: linear-gradient(135deg, #0a192f, #64ffda); }
.theme-swatch[data-theme="dark-solarized"] { background: linear-gradient(135deg, #002b36, #268bd2); }
.theme-swatch[data-theme="light-warm"] { background: #fffbeb; border: 1px solid #fde68a; }
.theme-swatch[data-theme="light-cool"] { background: #f0f9ff; border: 1px solid #bae6fd; }
.theme-swatch[data-theme="light-sepia"] { background: #fafaf9; border: 1px solid #e7e5e4; }
.theme-swatch[data-theme="light-high-contrast"] { background: #ffffff; border: 2px solid #000000; }

/* Force Theory Code Blocks to look clean (no inline highlighting) */
.prose pre, 
.prose pre code,
.prose pre span {
  background: var(--code-bg) !important;
  color: var(--code-text) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.prose code:not(pre code) {
  background: var(--bg-surface-2);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font-size: .9em;
}

/* ============================================================
   FIX FOR QUILL.JS CODE BLOCK HIGHLIGHTING
   ============================================================ */

/* 1. Force the main code container to be dark */
#lesson-tab-content .prose pre,
#lesson-tab-content .prose .ql-code-block-container {
  background-color: var(--code-bg) !important;
  color: var(--code-text) !important;
  padding: 16px 20px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--border) !important;
  white-space: pre-wrap !important;
  font-family: var(--font-mono) !important;
  font-size: var(--fs-sm) !important;
  line-height: 1.6 !important;
}

/* 2. Nuke any inline background colors Quill injected into spans/lines */
#lesson-tab-content .prose pre *,
#lesson-tab-content .prose .ql-code-block-container *,
#lesson-tab-content .prose .ql-code-block {
  background-color: transparent !important;
  background: transparent !important;
  color: var(--code-text) !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3. Fix inline single-backtick code (like `age: int`) */
#lesson-tab-content .prose code:not(pre code) {
  background-color: var(--bg-surface-2) !important;
  color: var(--accent) !important;
  padding: 2px 6px !important;
  border-radius: var(--r-sm) !important;
}

/* ============ SEARCH TRIGGER (Topbar) ============ */
.search-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all 0.2s;
}
.search-trigger:hover { border-color: var(--border-strong); color: var(--text-surface); }
.search-kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* ============ SEARCH MODAL ============ */
.search-input-field {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-surface);
  font-size: var(--fs-lg);
  font-family: var(--font-sans);
}
.search-input-field::placeholder { color: var(--text-muted); }
.search-esc {
  font-size: 10px; font-family: var(--font-mono);
  padding: 2px 6px; background: var(--bg-surface-2);
  border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-subtle);
}
.search-results { max-height: 400px; overflow-y: auto; padding: 8px; }
.search-empty { padding: 32px; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }
.search-result-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: var(--r-md);
  cursor: pointer; color: var(--text-surface);
  transition: background 0.15s;
}
.search-result-item:hover, .search-result-item.selected { background: var(--accent-soft); color: var(--accent); }
.search-result-icon { font-size: 16px; width: 20px; text-align: center; }
.search-result-content { flex: 1; min-width: 0; }
.search-result-title { font-size: var(--fs-sm); font-weight: 600; }
.search-result-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.search-result-item:hover .search-result-meta { color: var(--accent); opacity: 0.8; }

@media (max-width: 1000px) {
  .search-text, .search-kbd { display: none; }
  .search-trigger { padding: 8px; }
}