:root {
  color-scheme: dark;
  --background: #0b1020;
  --panel: #121a2e;
  --line: #26324d;
  --text: #e8edf8;
  --muted: #9aa8c2;
  --accent: #52e3a7;
  --accent-soft: rgba(82, 227, 167, 0.12);
  --error: #ff9b9b;
}

.lab-solved, .lab-message { margin: 0 0 12px; color: var(--accent); font-weight: 750; }.submit-code { border-color: #71b2ff !important; background: #71b2ff !important; color: #071727 !important; }.lab-history { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }.lab-history h2 { font-size: 1rem; }.lab-history p { margin: 8px 0; color: var(--muted); font-size: .82rem; }

@media (max-width: 1100px) { .lab-grid { grid-template-columns: 1fr 1fr; }.lab-scene-wrap { grid-column: 1 / -1; min-height: 440px; }.lab-scene-wrap canvas { min-height: 440px; } }
@media (max-width: 680px) { .lab-grid { grid-template-columns: 1fr; }.lab-scene-wrap { grid-column: auto; min-height: 360px; }.lab-scene-wrap canvas { min-height: 360px; }.lab-panel { min-height: auto; }.lab-header { font-size: .82rem; }.coding-lab-link b { display: none; } }

.coding-lab-link { display: flex; align-items: center; gap: 16px; margin: 0 0 28px; padding: 18px; border: 1px solid rgba(113,178,255,.5); border-radius: 16px; color: var(--text); text-decoration: none; background: linear-gradient(100deg, rgba(113,178,255,.13), #10182b); }.coding-lab-link > span { color: var(--accent); font-size: 2rem; }.coding-lab-link p { margin: 4px 0 0; color: var(--muted); }.coding-lab-link b { margin-left: auto; color: var(--accent); }.lab-body { background: #080f1d; }.lab-shell { min-height: 100vh; padding: 16px; }.lab-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; max-width: 1600px; margin: auto auto 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: #10182b; }.lab-header a { color: var(--accent); text-decoration: none; font-weight: 700; }.lab-header span { color: var(--accent); }.lab-grid { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.4fr) minmax(300px, 1fr); gap: 16px; max-width: 1600px; margin: auto; }.lab-panel, .lab-scene-wrap { min-height: 620px; overflow: auto; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #10182b; }.problem-panel h1 { font-size: 2rem; }.problem-panel h2, .lab-console h2 { font-size: 1rem; margin: 24px 0 8px; }.problem-panel p { color: var(--muted); line-height: 1.55; }.lab-problem-list { display: grid; gap: 5px; }.lab-problem-list a { padding: 8px; border-radius: 7px; color: var(--muted); text-decoration: none; }.lab-problem-list a.active, .lab-problem-list a:hover { background: var(--accent-soft); color: var(--accent); }.lab-scene-wrap { position: relative; padding: 0; overflow: hidden; }.lab-scene-wrap canvas { display: block; width: 100%; height: 100%; min-height: 620px; cursor: grab; }.scene-caption { position: absolute; bottom: 18px; left: 18px; display: grid; gap: 4px; padding: 12px; border-radius: 10px; background: rgba(8,15,29,.82); }.scene-caption span { color: var(--muted); font-size: .78rem; }.CodeMirror { height: 390px; border: 1px solid var(--line); border-radius: 10px; font: .9rem/1.5 "Cascadia Code", Consolas, monospace; }.lab-actions { display: flex; justify-content: end; gap: 10px; margin-top: 12px; }.lab-actions button { padding: 10px 14px; border: 1px solid var(--accent); border-radius: 8px; background: transparent; color: var(--accent); font-weight: 750; cursor: pointer; }.lab-actions .run-code { background: var(--accent); color: #062f22; }.lab-console { min-height: 130px; margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #08101e; }.lab-console p { color: var(--muted); }.lab-console pre { overflow: auto; color: #d5e3fd; }

.phase-five-section { margin-top: 42px; }.preferences-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #10182b; }.preferences-form label { display: grid; gap: 6px; color: var(--muted); font-size: .8rem; font-weight: 700; }.preferences-form input, .preferences-form select, .preferences-form button { min-height: 38px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #0e1627; color: var(--text); font: inherit; }.preferences-form fieldset { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; border: 0; padding: 0; }.preferences-form fieldset label { display: block; font-weight: 500; }.preferences-form button { border-color: var(--accent); background: var(--accent); color: #062f22; font-weight: 800; cursor: pointer; }.recommendation-grid, .milestone-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.weekly-challenge { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 42px; padding: 22px; border: 1px solid rgba(113, 178, 255, .45); border-radius: 16px; background: linear-gradient(120deg, rgba(113, 178, 255, .12), #10182b 70%); }.weekly-challenge h2 { margin: 8px 0; font-size: 1.35rem; }.milestone { display: grid; gap: 7px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); background: #10182b; }.milestone span { font-size: .82rem; }.milestone-unlocked { border-color: rgba(82, 227, 167, .45); color: var(--accent); background: var(--accent-soft); }

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(circle at top right, #17385a 0, transparent 36%), var(--background);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.dashboard {
  width: min(100%, 920px);
  padding: clamp(28px, 6vw, 64px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(18, 26, 46, 0.9);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
}

.eyebrow, .stat-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  margin: 10px 0 12px;
  font-size: clamp(2.5rem, 7vw, 4.75rem);
  letter-spacing: -0.06em;
}

h1 span {
  color: var(--accent);
}

.welcome {
  margin: 0 0 38px;
  color: var(--muted);
  font-size: 1.05rem;
}

.welcome strong {
  color: var(--text);
}

.streak-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 190, 92, 0.55);
  border-radius: 14px;
  background: rgba(255, 190, 92, 0.1);
  color: #ffd18a;
}

.streak-warning p {
  margin: 0;
  font-weight: 650;
}

.warning-icon {
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #ffd18a;
  color: #523000;
  font-size: 0.8rem;
  font-weight: 900;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.practice-link-card, .problem-card { color: inherit; text-decoration: none; }
.practice-link-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; padding: 24px; border: 1px solid rgba(82, 227, 167, 0.45); border-radius: 16px; background: linear-gradient(120deg, var(--accent-soft), #10182b 65%); }
.practice-link-card h2 { margin: 8px 0; font-size: 1.45rem; }.practice-link-card p { margin: 0; color: var(--muted); }.practice-link-card > span { color: var(--accent); font-size: 2rem; }
.back-link { display: inline-block; margin-bottom: 28px; color: var(--accent); text-decoration: none; font-weight: 700; }
.practice-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }.practice-progress, .problem-library { margin-top: 42px; }.practice-progress .section-heading h2 { margin: 0; }
.practice-xp { margin: -16px 0 24px; color: var(--muted); }.practice-xp strong { color: var(--accent); }.practice-xp span { margin-left: 8px; font-size: 0.85rem; }
.grouping-grid, .example-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; }.grouping-card, .detail-section { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #10182b; }.grouping-card p { margin: 12px 0 0; color: var(--muted); }
.difficulty, .topic-label, .problem-state { display: inline-block; margin-right: 6px; padding: 4px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 750; }.difficulty-easy { color: #71e8ae; background: rgba(82, 227, 167, 0.14); }.difficulty-medium { color: #ffd18a; background: rgba(255, 190, 92, 0.14); }.difficulty-hard { color: #ff9b9b; background: rgba(255, 120, 120, 0.14); }.topic-label { color: #a9c7ff; background: rgba(113, 178, 255, 0.14); }.problem-state { color: var(--muted); background: var(--line); }
.filter-form { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr) auto auto; align-items: end; gap: 12px; margin-bottom: 18px; }.filter-form label { display: grid; gap: 6px; color: var(--muted); font-size: 0.78rem; font-weight: 700; }.filter-form input, .filter-form select, .filter-form button { min-height: 40px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: #0e1627; color: var(--text); font: inherit; }.filter-form button { border-color: var(--accent); background: var(--accent); color: #062f22; font-weight: 800; cursor: pointer; }.clear-filters { padding: 10px 0; color: var(--muted); font-size: 0.85rem; text-decoration: none; white-space: nowrap; }
.problem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.problem-card { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #10182b; transition: border-color 0.15s ease, transform 0.15s ease; }.problem-card:hover { border-color: var(--accent); transform: translateY(-2px); }.problem-card h3 { margin: 16px 0 8px; }.problem-card p { min-height: 44px; margin: 0 0 16px; color: var(--muted); line-height: 1.45; }.problem-card .problem-state { margin: 0; }
.problem-detail { max-width: 820px; }.problem-meta { margin: 0 0 28px; }.detail-section { margin-top: 16px; }.detail-section h2 { margin: 0 0 10px; font-size: 1.1rem; }.detail-section p { margin: 0; color: var(--muted); line-height: 1.6; }.detail-section pre { overflow-x: auto; margin: 0; padding: 14px; border-radius: 10px; background: #08101e; color: #d5e3fd; font-family: "Cascadia Code", Consolas, monospace; white-space: pre-wrap; }
.workspace { margin-top: 22px; padding: 20px; border: 1px solid rgba(113, 178, 255, 0.4); border-radius: 16px; background: #10182b; }.workspace h2 { margin: 0 0 14px; }.editor-label { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--muted); font-size: 0.85rem; font-weight: 700; }.editor-label span { color: var(--accent); }.code-editor { width: 100%; min-height: 280px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #08101e; color: #d5e3fd; font: 0.9rem/1.55 "Cascadia Code", Consolas, monospace; resize: vertical; }.workspace-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; }.workspace-actions button, .save-solution { padding: 10px 14px; border: 1px solid var(--accent); border-radius: 9px; background: transparent; color: var(--accent); font: inherit; font-weight: 750; cursor: pointer; }.workspace-actions .submit-solution, .save-solution { background: var(--accent); color: #062f22; }.reset-code { margin-right: auto; color: var(--muted); font-size: 0.85rem; }.test-results { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }.test-results h3 { margin: 0 0 10px; }.result-success { color: var(--accent) !important; }.result-error { color: #ff9b9b !important; }.test-row { margin: 7px 0 !important; }.workspace-message { color: var(--accent) !important; font-weight: 700; }

.daily-challenge { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 28px; padding: 22px; border: 1px solid rgba(255, 190, 92, .45); border-radius: 16px; background: linear-gradient(120deg, rgba(255, 190, 92, .12), #10182b 70%); }.daily-challenge h2 { margin: 8px 0; font-size: 1.35rem; }.daily-challenge p { margin: 8px 0; }.challenge-link { color: var(--accent); font-weight: 800; text-decoration: none; white-space: nowrap; }.practice-insights, .skill-progress, .submission-history { margin-top: 42px; }.topic-progress-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.topic-progress-card { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #10182b; }.topic-progress-card > div:first-child { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }.topic-progress-card h3, .topic-progress-card p { margin: 0; }.topic-progress-card span, .topic-progress-card p { color: var(--muted); font-size: .8rem; }.topic-progress-card .progress-track { margin: 14px 0 10px; }.history-list { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; }.history-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--line); background: #10182b; }.history-row:first-child { border-top: 0; }.history-row div { display: grid; gap: 5px; }.history-row span { color: var(--muted); font-size: .82rem; }.history-row .result-success, .history-row .result-error { font-weight: 750; }

.stat-card, .error-message {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #10182b;
}

.contribution-card {
  border-color: rgba(82, 227, 167, 0.45);
  background: linear-gradient(145deg, var(--accent-soft), #10182b 70%);
}

.xp-card {
  border-color: rgba(113, 178, 255, 0.5);
  background: linear-gradient(145deg, rgba(113, 178, 255, 0.14), #10182b 70%);
}

.stat-value {
  margin: 16px 0 6px;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 750;
  letter-spacing: -0.06em;
}

.stat-value span {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
}

.stat-caption {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.progress-copy {
  margin: 16px 0 12px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.progress-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #71b2ff);
}

.progress-card .stat-caption {
  margin-top: 12px;
}

.daily-goal-section {
  margin-top: 48px;
}

.daily-goal-card {
  padding: 24px;
  border: 1px solid rgba(113, 178, 255, 0.4);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(113, 178, 255, 0.12), #10182b 70%);
}

.goal-count {
  margin: 0 0 14px;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 750;
  letter-spacing: -0.06em;
}

.goal-count span {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
}

.goal-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.goal-complete {
  color: var(--accent);
}

.goal-progress {
  background: linear-gradient(90deg, #71b2ff, var(--accent));
}

.daily-goal-card .stat-caption {
  margin-top: 12px;
}

.badges-section {
  margin-top: 48px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.section-heading h2 {
  margin: 8px 0 0;
  font-size: 1.6rem;
  letter-spacing: -0.04em;
}

.badge-summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.badge-card {
  display: flex;
  min-height: 132px;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #10182b;
}

.badge-icon {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  font-weight: 800;
}

.badge-card h3 {
  margin: 2px 0 6px;
  font-size: 1rem;
}

.badge-card p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.badge-status {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.badge-unlocked {
  border-color: rgba(82, 227, 167, 0.5);
  background: linear-gradient(145deg, var(--accent-soft), #10182b 75%);
}

.badge-unlocked .badge-icon {
  color: #062f22;
  background: var(--accent);
}

.badge-unlocked .badge-status {
  color: var(--accent);
}

.badge-locked {
  opacity: 0.64;
}

.badge-locked .badge-icon {
  color: var(--muted);
  background: var(--line);
}

.leaderboard-section {
  margin-top: 48px;
}

.leaderboard-caption {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.leaderboard-table {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 0.55fr 1.6fr 0.8fr 0.8fr 1.15fr 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: #10182b;
  font-size: 0.9rem;
}

.leaderboard-row:first-child {
  border-top: 0;
}

.leaderboard-header {
  color: var(--muted);
  background: #0e1627;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.current-user-row {
  background: linear-gradient(90deg, var(--accent-soft), #10182b 55%);
}

.current-user-row em {
  display: inline-block;
  margin-left: 7px;
  color: var(--accent);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 750;
}

.leaderboard-empty-state {
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: rgba(16, 24, 43, 0.65);
}

.leaderboard-empty-state p {
  margin: 0 0 8px;
  font-weight: 700;
}

.leaderboard-empty-state span {
  color: var(--muted);
  font-size: 0.9rem;
}

.error-message {
  margin-top: 32px;
  border-color: rgba(255, 155, 155, 0.45);
}

.error-message h2 {
  margin-top: 0;
  color: var(--error);
}

.error-message p {
  margin-bottom: 0;
  color: var(--muted);
}

@media (max-width: 680px) {
  .stats-grid, .badges-grid, .practice-stats-grid, .grouping-grid, .example-grid, .problem-grid, .topic-progress-grid {
    grid-template-columns: 1fr;
  }

  .filter-form { grid-template-columns: 1fr; align-items: stretch; }.clear-filters { padding: 4px 0; }
  .workspace-actions { align-items: stretch; flex-direction: column; }.reset-code { margin-right: 0; }
  .daily-challenge, .history-row { align-items: start; flex-direction: column; }

  .section-heading {
    align-items: start;
    flex-direction: column;
  }

  .leaderboard-table {
    overflow-x: auto;
  }

  .leaderboard-row {
    min-width: 620px;
  }
}