:root {
  --space-void: oklch(0.12 0.03 280);
  --space-deep: oklch(0.16 0.04 280);
  --space-surface: oklch(0.20 0.04 280);
  --space-elevated: oklch(0.24 0.05 280);
  --star-gold: oklch(0.82 0.16 80);
  --star-gold-dim: oklch(0.65 0.12 80);
  --star-glow: oklch(0.82 0.16 80 / 0.4);
  --nebula-violet: oklch(0.68 0.20 290);
  --nebula-teal: oklch(0.72 0.14 195);
  --nebula-rose: oklch(0.72 0.16 10);
  --nebula-gold: oklch(0.82 0.16 80);
  --nebula-amber: oklch(0.75 0.14 65);
  --ink-primary: oklch(0.93 0.01 280);
  --ink-secondary: oklch(0.72 0.02 280);
  --ink-muted: oklch(0.55 0.02 280);
  --border-subtle: oklch(0.28 0.03 280);
  --border-glow: oklch(0.40 0.06 280);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 100px;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--space-void);
  color: var(--ink-primary);
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  min-height: 100dvh;
}

/* Nav */
.nav {
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  background: oklch(0.12 0.03 280 / 0.9);
  backdrop-filter: blur(12px);
  z-index: 100;
}
.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--star-gold);
  text-decoration: none;
}
.nav-brand-sub {
  font-weight: 600;
  color: var(--ink-muted);
  margin-left: 0.3rem;
}
.nav-links { display: flex; gap: 1rem; }
.nav-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-secondary);
  text-decoration: none;
  transition: color var(--duration-fast);
}
.nav-link:hover { color: var(--ink-primary); }

/* Footer */
.footer {
  border-top: 1px solid var(--border-subtle);
  padding: 2rem 1.5rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-muted);
}
.footer a { color: var(--ink-secondary); text-decoration: none; }
.footer a:hover { color: var(--star-gold); }

/* Catalog */
.catalog-hero {
  text-align: center;
  padding: clamp(3rem, 8vw, 5rem) 1.5rem 2rem;
  max-width: 700px;
  margin: 0 auto;
}
.catalog-hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: balance;
  margin-bottom: 1rem;
}
.catalog-hero p {
  font-size: 1.05rem;
  color: var(--ink-secondary);
  line-height: 1.7;
}

.catalog-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

/* Course Card */
.course-card {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: var(--space-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--ink-primary);
  transition: border-color var(--duration-normal) var(--ease-out-expo),
              transform var(--duration-fast) var(--ease-out-expo);
}
.course-card:hover {
  border-color: var(--star-gold-dim);
  transform: translateY(-3px);
}
.course-card-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
}
.course-card-level {
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--nebula-violet);
  color: white;
  font-size: 0.72rem;
}
.course-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.course-card-desc {
  font-size: 0.88rem;
  color: var(--ink-secondary);
  line-height: 1.5;
  flex: 1;
}
.course-card-meta {
  display: flex;
  gap: 1rem;
  margin-top: 1.25rem;
  font-size: 0.8rem;
  color: var(--ink-muted);
  font-weight: 600;
}
.course-card-progress {
  margin-top: 0.75rem;
  height: 4px;
  border-radius: 2px;
  background: var(--space-elevated);
  overflow: hidden;
}
.course-card-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--star-gold);
  border-radius: 2px;
  transition: width var(--duration-normal) var(--ease-out-expo);
}

/* Course Detail */
.course-detail {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}
.course-back {
  font-size: 0.88rem;
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 600;
}
.course-back:hover { color: var(--star-gold); }
.course-header h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0.75rem 0 0.5rem;
}
.course-desc {
  font-size: 1rem;
  color: var(--ink-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.course-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.course-stat {
  font-size: 0.85rem;
  color: var(--ink-secondary);
  padding: 0.4rem 0.8rem;
  background: var(--space-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}
.course-stat strong {
  color: var(--ink-primary);
}

/* Domain weight bar */
.course-domains-bar {
  display: flex;
  height: 32px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 2rem;
  gap: 2px;
}
.course-domain-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--seg-color);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--space-void);
}

.course-body {
  margin-bottom: 2.5rem;
}
.course-body h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.course-body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.5rem 0 0.5rem;
}
.course-body p, .course-body li {
  font-size: 0.92rem;
  color: var(--ink-secondary);
  line-height: 1.7;
}
.course-body ul { padding-left: 1.5rem; margin-bottom: 1rem; }

/* Module cards */
.course-modules {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.module-card {
  background: var(--space-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.module-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.module-card-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
}
.module-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--badge-color);
  color: var(--space-void);
}
.module-desc {
  font-size: 0.85rem;
  color: var(--ink-secondary);
  line-height: 1.5;
  margin-bottom: 1rem;
}
.module-lessons {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.module-lesson {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-primary);
  font-size: 0.88rem;
  font-weight: 500;
  transition: background var(--duration-fast);
}
.module-lesson:hover {
  background: var(--space-elevated);
}
.module-lesson-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-subtle);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: all var(--duration-fast);
}
.module-lesson-check.done {
  background: var(--nebula-teal);
  border-color: var(--nebula-teal);
}
.module-lesson-check.done::after {
  content: '✓';
  color: white;
  font-weight: 700;
}

.course-cta {
  text-align: center;
  margin-top: 2.5rem;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2.2rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  background: var(--star-gold);
  color: var(--space-void);
  box-shadow: 0 4px 20px var(--star-glow);
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-normal) var(--ease-out-expo);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--star-glow);
}

/* Lesson Layout */
.lesson-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: calc(100dvh - 60px);
}

.lesson-sidebar {
  border-right: 1px solid var(--border-subtle);
  padding: 1.5rem 1rem;
  position: sticky;
  top: 60px;
  height: calc(100dvh - 60px);
  overflow-y: auto;
  background: var(--space-deep);
}
.sidebar-back {
  font-size: 0.82rem;
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 600;
  display: block;
  margin-bottom: 1rem;
}
.sidebar-back:hover { color: var(--star-gold); }
.sidebar-domain {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-secondary);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.sidebar-link:hover { background: var(--space-surface); color: var(--ink-primary); }
.sidebar-link.active { background: var(--space-surface); color: var(--star-gold); font-weight: 700; }
.sidebar-check {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-subtle);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
}
.sidebar-check.done {
  background: var(--nebula-teal);
  border-color: var(--nebula-teal);
}
.sidebar-check.done::after {
  content: '✓';
  color: white;
  font-weight: 700;
}

.lesson-content {
  padding: 2.5rem 3rem 4rem;
  max-width: 720px;
}
.lesson-header {
  margin-bottom: 2rem;
}
.lesson-domain-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--badge-color, var(--nebula-violet));
  color: var(--space-void);
  margin-bottom: 0.5rem;
}
.lesson-header h1 {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.lesson-body h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 2rem 0 0.75rem;
}
.lesson-body p {
  font-size: 0.95rem;
  color: var(--ink-secondary);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.lesson-body code {
  background: var(--space-surface);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 0.88rem;
}
.lesson-body pre {
  background: var(--space-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.lesson-nav {
  display: flex;
  gap: 0.75rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.lesson-nav-btn {
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border-subtle);
  color: var(--ink-secondary);
  background: none;
  cursor: pointer;
  transition: border-color var(--duration-fast), color var(--duration-fast);
}
.lesson-nav-btn:hover { border-color: var(--star-gold); color: var(--star-gold); }
.lesson-nav-btn.complete {
  background: var(--nebula-teal);
  border-color: var(--nebula-teal);
  color: white;
}
.lesson-nav-btn.complete:hover { opacity: 0.9; }

/* Mobile */
@media (max-width: 768px) {
  .lesson-layout {
    grid-template-columns: 1fr;
  }
  .lesson-sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    max-height: 200px;
    overflow-y: auto;
  }
  .lesson-content {
    padding: 1.5rem;
  }
  .catalog-grid {
    grid-template-columns: 1fr;
  }
}