:root {
  color-scheme: dark;
  --course-page: #0e1314;
  --course-surface: #17201f;
  --course-surface-muted: #202b29;
  --course-text: #f2f3ef;
  --course-muted: #b8c1ba;
  --course-line: rgba(232, 227, 211, 0.16);
  --course-accent: #c5a880;
  --course-danger: #d99687;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: var(--course-page);
  color: var(--course-text);
  font-family: "IBM Plex Sans", sans-serif;
}

button { font: inherit; }

.course-shell {
  width: min(100%, 42rem);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(1.5rem, env(safe-area-inset-top)) 1rem max(2rem, env(safe-area-inset-bottom));
}

.course-header { padding: 1rem 0 1.5rem; }
.eyebrow { margin: 0 0 .75rem; color: var(--course-accent); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
h1, h2 { margin: 0; color: var(--course-text); }
h1 { font-family: "Source Serif 4", Georgia, serif; font-size: clamp(2rem, 8vw, 2.75rem); font-weight: 600; line-height: 1.05; }
h2 { font-size: 1.125rem; line-height: 1.35; }
.intro, .state-panel p, .course-card p { color: var(--course-muted); line-height: 1.55; }
.intro { max-width: 34rem; margin: 1rem 0 0; font-size: 1rem; }

.catalog h2 { margin: 0 0 1rem; }
.course-list { display: grid; gap: .75rem; }
.course-card, .state-panel { border: 1px solid var(--course-line); border-radius: .75rem; background: var(--course-surface); }
.course-card { padding: 1.25rem; }
.course-card h3 { margin: 0; font-size: 1.125rem; line-height: 1.35; }
.course-card p { margin: .5rem 0 1rem; }
.course-meta { margin: 0 0 1rem; color: var(--course-accent); font-size: .875rem; }

.state-panel { padding: 1.25rem; }
.state-error { border-color: rgba(217, 150, 135, .55); }
.state-error h2 { color: var(--course-danger); }

.button { min-height: 2.75rem; padding: .625rem 1rem; border: 1px solid transparent; border-radius: .5rem; cursor: pointer; font-weight: 600; }
.button-primary { width: 100%; background: var(--course-accent); color: #1e1b16; }
.button-secondary { background: transparent; border-color: var(--course-line); color: var(--course-text); }
.button:focus-visible { outline: 3px solid rgba(197, 168, 128, .55); outline-offset: 2px; }
.button:disabled { cursor: wait; opacity: .65; }

.skeleton { border-radius: .25rem; background: linear-gradient(90deg, var(--course-surface-muted), #2b3834, var(--course-surface-muted)); background-size: 200% 100%; animation: pulse 1.2s ease-in-out infinite; }
.skeleton-title { width: 50%; height: 1.5rem; }
.skeleton-line { width: 100%; height: 1rem; margin-top: .75rem; }
.skeleton-line.short { width: 68%; }
@keyframes pulse { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

@media (min-width: 48rem) { .course-shell { padding-inline: 2rem; } .course-card { padding: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }