/* css/main.css — Core layout, dark theme, typography, responsive breakpoints */

/* ─── Custom Properties (Dark Theme) ─────────────────────────────────────── */
:root {
  --color-bg:          #1a1a2e;
  --color-bg-elevated: #16213e;
  --color-bg-card:     #0f3460;
  --color-bg-hover:    #1a2a4a;
  --color-surface:     #1e2d45;

  --color-accent:      #e94560;
  --color-accent-hover:#d63651;
  --color-accent-aa:   #c03050;  /* darker rose — WCAG AA with white (5.56:1) */
  --color-accent-text: #ff6f89;
  --color-accent-soft: rgba(233, 69, 96, 0.15);
  --color-accent2:     #7c3aed;
  --color-accent2-soft:rgba(124, 58, 237, 0.15);
  --color-accent2-text: color-mix(in srgb, var(--color-accent2) 36%, var(--color-text));

  --color-text:        #eef2f7;
  --color-text-muted:  #9aa3b2;  /* lightened: now 5.44:1 on surface, 4.91:1 on bg-card */
  --color-text-dim:    #8e93a0;  /* lightened: 4.50:1 on surface, 5.55:1 on bg */

  --color-success:     #10b981;
  --color-error:       #ef4444;
  --color-warning:     #f59e0b;
  --color-info:        #3b82f6;
  --color-info-soft:   rgba(59, 130, 246, 0.12);
  --color-error-soft:  rgba(239, 68, 68, 0.12);
  --color-success-soft:rgba(16, 185, 129, 0.12);
  --color-warning-soft:rgba(245, 158, 11, 0.12);
  --color-info-text:   #93c5fd;
  --color-error-text:  #fca5a5;
  --color-on-accent:   #fff4f6;

  --terminal-bg:         color-mix(in srgb, var(--color-bg) 58%, #000 42%);
  --terminal-bg-elevated:color-mix(in srgb, var(--color-bg-elevated) 74%, #000 26%);
  --terminal-text:       color-mix(in srgb, var(--color-text) 96%, var(--color-bg) 4%);
  --terminal-text-dim:   color-mix(in srgb, var(--color-text-muted) 82%, var(--color-text) 18%);
  --terminal-line-prompt:color-mix(in srgb, var(--color-info) 84%, var(--color-text) 16%);
  --terminal-line-error: color-mix(in srgb, var(--color-error) 74%, var(--color-text) 26%);
  --terminal-line-success:color-mix(in srgb, var(--color-success) 76%, var(--color-text) 24%);
  --terminal-border:     rgba(255,255,255,0.1);
  --terminal-border-soft:rgba(255,255,255,0.06);
  --terminal-muted:      rgba(255,255,255,0.4);
  --terminal-muted-dim:  rgba(255,255,255,0.3);
  --terminal-scrollbar:  rgba(255,255,255,0.15);
  --terminal-outline-soft: color-mix(in srgb, var(--color-info) 30%, transparent);
  --terminal-info-border: color-mix(in srgb, var(--color-info) 20%, transparent);
  --terminal-success-border: color-mix(in srgb, var(--color-success) 20%, transparent);
  --terminal-dot-red:    color-mix(in srgb, var(--color-error) 82%, var(--color-text) 18%);
  --terminal-dot-yellow: color-mix(in srgb, var(--color-warning) 88%, var(--color-text) 12%);
  --terminal-dot-green:  color-mix(in srgb, var(--color-success) 82%, var(--color-text) 18%);

  --color-border:      rgba(255,255,255,0.08);
  --color-border-focus:var(--color-accent);
  --color-scrim:       rgba(0,0,0,0.5);
  --color-border-subtle: rgba(255,255,255,0.04);
  --color-error-outline-soft: rgba(239, 68, 68, 0.2);
  --color-accent-shadow: rgba(192, 48, 80, 0.35);
  --color-accent-shadow-strong: rgba(233, 69, 96, 0.45);
  --color-export-border: rgba(124, 58, 237, 0.35);
  --color-export-bg: rgba(124, 58, 237, 0.12);
  --color-warning-border-soft: color-mix(in srgb, var(--color-warning) 25%, transparent);
  --color-success-border-soft: rgba(16, 185, 129, 0.32);
  --color-sync-bg-start: rgba(124, 58, 237, 0.08);
  --color-sync-bg-end: rgba(15, 52, 96, 0.18);
  --color-release-pass-text: #b9f5c7;
  --color-release-pass-bg: rgba(46, 139, 87, 0.22);
  --color-release-pending-text: #ffd9a8;
  --color-release-pending-bg: rgba(180, 110, 20, 0.24);
  --color-step-code-bg: rgba(233, 69, 96, 0.1);
  --color-step-code-border: rgba(233, 69, 96, 0.2);
  --color-welcome-border: rgba(233, 69, 96, 0.22);
  --color-crossref-border: rgba(124, 58, 237, 0.25);
  --color-feedback-warn-border: rgba(245, 158, 11, 0.25);
  --shadow-tool-card-hover: 0 4px 16px rgba(233, 69, 96, 0.12);
  --color-accent2-border-soft: color-mix(in srgb, var(--color-accent2) 25%, transparent);
  --color-info-border-soft: color-mix(in srgb, var(--color-info) 20%, transparent);

  --color-code-bg:     rgba(255, 255, 255, 0.06);  /* inline code background — semantic token */
  --color-bg-deep:     #0d0d1a;                     /* deeper dark for tinting */

  --sidebar-width:     280px;
  --sidebar-width-sm:  200px;
  --header-height:     56px;
  --footer-height:     52px;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.5);

  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-sans:  'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:  'Fira Code', 'Cascadia Code', 'Consolas', 'Monaco', monospace;

  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   350ms ease;
}

/* ─── Reset & Base ───────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Focus Visible ──────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ─── Skip Link ──────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: 1rem;
  inset-inline-start: 1rem;
  translate: 0 calc(-100% - 2rem);
  background: var(--color-accent-aa);
  color: var(--color-on-accent);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  z-index: 9999;
  transition: translate var(--transition-fast);
}
.skip-link:focus {
  translate: 0 0;
}

/* ─── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-text);
}
h1, h2, h3 {
  text-wrap: balance;
}
h1 { font-size: clamp(1.5rem,  4vw, 2rem); }
h2 { font-size: clamp(1.25rem, 3vw, 1.5rem); }
h3 { font-size: clamp(1.1rem,  2.5vw, 1.25rem); }
h4 { font-size: clamp(1rem,    2vw, 1.1rem); }

p { margin-block-end: 0.75rem; text-wrap: pretty; }
p:last-child { margin-block-end: 0; }

a {
  color: var(--color-accent-text);
  text-decoration: underline;
}
a:hover { text-decoration: none; }

code, pre {
  font-family: var(--font-mono);
  direction: ltr !important;
  unicode-bidi: isolate;
}

pre {
  background: var(--terminal-bg);
  padding: 1rem;
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: 0.875rem;
  color: var(--terminal-text);
  border: 1px solid var(--color-border);
}

code {
  background: var(--color-code-bg);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

/* ─── Views ──────────────────────────────────────────────────────────────── */
.view {
  min-height: 100dvh;
}

.inner-view {
  animation: fadeIn var(--transition-normal) ease;
}

.logo-icon {
  font-size: 3rem;
  display: block;
  margin-block-end: 0.5rem;
}

.logo-icon-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-text);
}

.brand-icon {
  width: 1.2rem;
  height: 1.2rem;
}

/* ─── Form Elements ──────────────────────────────────────────────────────── */
.form-group {
  margin-block-end: 1.25rem;
}

.form-label {
  display: block;
  margin-block-end: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

.form-input,
.form-select {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus-visible,
.form-select:focus-visible {
  /* outline is kept (not suppressed) so High Contrast mode retains focus indicator */
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.form-input[aria-invalid="true"] {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px var(--color-error-outline-soft);
}

.form-hint {
  display: block;
  margin-block-start: 0.3rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.form-error {
  display: block;
  margin-block-start: 0.3rem;
  font-size: 0.8rem;
  color: var(--color-error);
}

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238892a4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-inline-end: 2.5rem;
}

.api-key-wrapper {
  display: flex;
  gap: 0.5rem;
}
.api-key-wrapper .form-input {
  flex: 1;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--color-accent-aa);
  color: var(--color-on-accent);
  box-shadow: 0 2px 8px var(--color-accent-shadow);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
  box-shadow: 0 4px 12px var(--color-accent-shadow-strong);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--color-bg-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid transparent;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--color-surface);
  color: var(--color-text);
}

.btn-full { width: 100%; }

.icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  min-width: 44px;
  min-height: 44px;
  padding: 0.4rem;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.ui-icon {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.icon-btn:hover {
  color: var(--color-text);
  background: var(--color-surface);
}

/* ─── App Header ─────────────────────────────────────────────────────────── */
.app-header {
  height: var(--header-height);
  background: var(--color-bg-elevated);
  border-block-end: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-inline: 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
  flex-shrink: 0;
}

.header-title {
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.header-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-inline-start: auto;
  font-size: 0.875rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.stat-icon {
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
}

.streak-fire {
  display: inline-flex;
  align-items: center;
  color: var(--color-warning);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-start: 0.5rem;
}

.nav-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  min-height: 44px;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.nav-btn:hover {
  color: var(--color-text);
  background: var(--color-surface);
}

.nav-btn.active {
  color: var(--color-accent-text);
  background: var(--color-accent-soft);
}

.lang-toggle-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  min-width: 44px;
  min-height: 44px;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  letter-spacing: 0.05em;
}
.lang-toggle-btn:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

/* Hamburger */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding: 0.4rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

/* ─── App Layout ─────────────────────────────────────────────────────────── */
#view-app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.app-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-areas: "sidebar main";
  flex: 1;
  min-height: 0;
}

/* ─── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar {
  grid-area: sidebar;
  background: var(--color-bg-elevated);
  border-inline-end: 1px solid var(--color-border);
  height: calc(100dvh - var(--header-height) - var(--footer-height));
  overflow-y: auto;
  overflow-x: hidden;
  position: sticky;
  top: var(--header-height);
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.sidebar-footer {
  margin-block-start: auto;
  padding: 1rem;
  border-block-start: 1px solid var(--color-border);
}

.global-progress {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.global-progress-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

#global-progress-text {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: end;
}

/* ─── Main Content ───────────────────────────────────────────────────────── */
.main-content {
  grid-area: main;
  padding: 2rem;
  padding-block-end: calc(2rem + var(--footer-height));
  overflow-y: auto;
  max-height: calc(100dvh - var(--header-height));
}

/* ─── Progress Bars ──────────────────────────────────────────────────────── */
.progress-bar-container {
  background: var(--color-surface);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent2));
  border-radius: 999px;
  transform: scaleX(var(--progress-scale, 0));
  transform-origin: left center;
  transition: transform 500ms ease;
}

/* ─── Module & Lesson Cards ──────────────────────────────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  min-height: 240px;
  contain: layout paint;
}

.export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: 0.75rem 1.25rem;
  padding: 0.75rem;
  border: 1px solid var(--color-export-border);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-export-bg), transparent);
}

/* ─── Getting Started Rail ───────────────────────────────────────────────── */
.getting-started-rail {
  margin-block: 0 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.getting-started-rail-bar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  background: var(--color-bg-elevated);
}

.getting-started-rail-expand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: start;
  padding: 0;
  min-height: 44px;
}

.getting-started-rail-icon {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
}

.getting-started-rail-name {
  font-weight: 600;
}

.getting-started-rail-meta {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--color-text-dim);
}

.getting-started-chevron {
  margin-inline-start: auto;
  color: var(--color-text-dim);
  font-size: 0.75rem;
  line-height: 1;
}

.getting-started-rail-dismiss {
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-dim);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.getting-started-rail-dismiss:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.getting-started-rail-body {
  padding: 1rem 1.125rem 1.25rem;
  border-block-start: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}

.getting-started-intro {
  margin: 0 0 1rem;
  max-width: 72ch;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.getting-started-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.9rem;
}

.getting-started-card {
  padding: 1rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-elevated) 88%, transparent);
}

.getting-started-card-title {
  margin: 0 0 0.45rem;
  font-size: 0.98rem;
}

.getting-started-card-body {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.getting-started-code {
  margin: 0.8rem 0 0;
  padding: 0.85rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-border) 78%);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg) 82%, var(--color-bg-deep) 18%);
  overflow-x: auto;
}

.getting-started-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 1rem;
}

.getting-started-skip-btn {
  color: var(--color-text-muted);
  border-color: var(--color-border-subtle);
}

.export-btn {
  flex: 1 1 auto;
  min-width: min(220px, 100%);
}

.export-btn-locked {
  opacity: 0.7;
  border-color: var(--color-border);
}

.module-card {
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.module-card-primary {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent-soft), var(--shadow-sm);
}

@media (min-width: 1200px) {
  .dashboard-grid .module-card-primary {
    grid-column: span 2;
  }
}

.module-card:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--shadow-md);
}

.module-card-header {
  background: var(--color-bg-elevated);
  padding: 1.25rem 1.25rem 0.75rem;
  border-block-end: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.module-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.module-svg-icon {
  width: 1.75rem;
  height: 1.75rem;
}

.module-info {
  flex: 1;
  min-width: 0;
}

.module-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-block-start: 0.6rem;
}

.module-meta-pill,
.lesson-meta-pill,
.module-difficulty-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 28px;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.module-meta-pill,
.lesson-meta-pill {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.module-meta-pill-parity,
.lesson-meta-pill-parity {
  background: color-mix(in srgb, var(--color-accent-soft) 68%, var(--color-surface) 32%);
  border-color: color-mix(in srgb, var(--color-accent) 26%, var(--color-border) 74%);
  color: var(--color-accent-text);
}

.module-difficulty-badge[data-level="beginner"] {
  background: var(--color-success-soft);
  color: var(--color-success);
  border: 1px solid var(--color-success-border-soft);
}

.module-difficulty-badge[data-level="intermediate"] {
  background: var(--color-warning-soft);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-border-soft);
}

.module-difficulty-badge[data-level="advanced"] {
  background: var(--color-error-soft);
  color: var(--color-error);
  border: 1px solid var(--color-error-outline-soft);
}

.module-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  margin-block-end: 0.25rem;
}

.module-desc {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.module-priority-chip {
  display: inline-block;
  margin-block-start: 0.45rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.module-progress-row {
  background: var(--color-bg-elevated);
  padding: 0.75rem 1.25rem;
  border-block-end: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.module-progress-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  min-width: 60px;
}

.module-progress-row .progress-bar-container {
  flex: 1;
}

.lesson-list {
  padding: 0.375rem 0.5rem;
  background: color-mix(in srgb, var(--color-bg-elevated) 85%, transparent);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lesson-card {
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.625rem;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  color: var(--color-text);
  transition: background var(--transition-fast), color var(--transition-fast);
  text-align: start;
  width: 100%;
}

.lesson-card:hover {
  background: color-mix(in srgb, var(--color-bg-hover) 55%, transparent);
}

.lesson-card.completed {
  background: color-mix(in srgb, var(--color-success-soft) 35%, transparent);
  color: var(--color-text-muted);
}
.lesson-card.in-progress {
  background: color-mix(in srgb, var(--color-accent-soft) 40%, transparent);
  color: var(--color-accent-text);
}

.lesson-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
}

.lesson-status-icon .ui-icon {
  width: 1rem;
  height: 1rem;
}

.lesson-meta {
  flex: 1;
  min-width: 0;
}

.lesson-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-block-end: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lesson-tags {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15em 0.5em;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tag-easy    { background: var(--color-success-soft); color: var(--color-success); }
.tag-medium  { background: var(--color-warning-soft); color: var(--color-warning); }
.tag-hard    { background: var(--color-error-soft); color: var(--color-error); }
.tag-time    { background: var(--color-surface); color: var(--color-text-muted); }

/* ─── Sidebar Module Groups ──────────────────────────────────────────────── */
.sidebar-module-group {
  border-block-end: 1px solid var(--color-border);
}

.sidebar-module-toggle {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.875rem 1rem;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: start;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.sidebar-module-toggle:hover {
  color: var(--color-text);
  background: var(--color-surface);
}

.sidebar-module-toggle.active {
  color: var(--color-text);
}

.sidebar-chevron {
  margin-inline-start: auto;
  transition: transform var(--transition-normal);
  font-size: 0.75rem;
  opacity: 0.6;
}

.sidebar-module-group[data-expanded="true"] .sidebar-chevron {
  transform: rotate(90deg);
}

.sidebar-lesson-list,
.sidebar-group-links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-module-group[data-expanded="true"] .sidebar-lesson-list,
.sidebar-group-tools:not(.collapsed) .sidebar-group-links {
  display: block;
}

.sidebar-lesson-item,
.sidebar-tool-item {
  margin: 0;
  padding: 0;
}

.sidebar-lesson-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1rem 0.5rem 2rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: start;
  font-family: var(--font-sans);
  transition: color var(--transition-fast), background var(--transition-fast);
  border-radius: 0;
}

.sidebar-lesson-link:hover {
  color: var(--color-text);
  background: var(--color-surface);
}

.sidebar-lesson-link[aria-current="page"] {
  color: var(--color-accent-text);
  background: var(--color-accent-soft);
  font-weight: 600;
}

.sidebar-lesson-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
}

.sidebar-lesson-icon .ui-icon,
.sidebar-module-icon .ui-icon {
  width: 0.9rem;
  height: 0.9rem;
}

.tag-time .time-icon,
.streak-inline-icon,
.api-key-toggle-icon,
.chat-close-icon {
  width: 0.95rem;
  height: 0.95rem;
}

/* ─── Lesson View ────────────────────────────────────────────────────────── */
.lesson-view-header {
  margin-block-end: 2rem;
}

.lesson-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-block-end: 0.5rem;
}

.lesson-breadcrumb-btn {
  min-height: 44px;
  padding: 0.2rem 0.65rem;
  font-size: 0.8rem;
}

.lesson-breadcrumb-sep {
  margin-inline: 0.4rem;
  opacity: 0.5;
}

.lesson-view-title {
  font-size: 1.5rem;
  margin-block-end: 0.75rem;
}

.lesson-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-end: 0.9rem;
}

.step-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: 0.5rem;
}

.step-progress-text {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.step-progress .progress-bar-container {
  flex: 1;
  height: 8px;
}

.lesson-storage-warning {
  margin-block-end: 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning-border-soft);
  color: var(--color-warning);
  font-weight: 600;
}

/* Explanation step */
.step-explanation {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-block-end: 1.5rem;
  animation: fadeIn var(--transition-normal) ease;
}

.step-explanation p { margin-block-end: 1rem; }
.step-explanation h3 { margin-block-end: 0.75rem; color: var(--color-text); }
.step-explanation ul, .step-explanation ol {
  padding-inline-start: 1.5rem;
  margin-block-end: 1rem;
}
.step-explanation li { margin-block-end: 0.35rem; }

.practice-support-panel {
  display: grid;
  gap: 0.85rem;
  margin-block: 1rem 1.25rem;
}

.practice-support-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.95rem 1rem;
}

.practice-support-card h3 {
  margin-block-end: 0.6rem;
  font-size: 0.92rem;
}

.practice-support-copy p:last-child,
.practice-support-list:last-child {
  margin-block-end: 0;
}

.practice-support-list {
  margin: 0;
  padding-inline-start: 1.15rem;
}

.practice-support-list li {
  margin-block-end: 0.45rem;
}

/* MCQ step */
.step-mcq {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-block-end: 1.5rem;
  animation: fadeIn var(--transition-normal) ease;
}

.mcq-question {
  font-size: 1.05rem;
  font-weight: 600;
  margin-block-end: 1.25rem;
  line-height: 1.5;
}

.mcq-options {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-block-end: 1.25rem;
}

.mcq-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.mcq-option:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.mcq-option input[type="radio"] {
  accent-color: var(--color-accent);
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.mcq-option.correct {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.mcq-option.incorrect {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

.step-feedback {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  margin-block-end: 1rem;
  animation: fadeIn var(--transition-fast) ease;
}

.step-feedback.correct { background: var(--color-success-soft); color: var(--color-success); }
.step-feedback.incorrect { background: var(--color-error-soft); color: var(--color-error); }

.step-hint-copy {
  margin-block-start: 0.5rem;
  font-size: 0.85rem;
  font-weight: 400;
}

.step-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Lesson complete panel */
.lesson-complete-panel {
  text-align: center;
  padding: 3rem 2rem;
  animation: fadeIn var(--transition-slow) ease;
}

.lesson-complete-btn {
  margin-block-start: 1.5rem;
}

.lesson-complete-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-block-end: 1rem;
}

.lesson-complete-svg {
  width: 4rem;
  height: 4rem;
  color: var(--color-warning);
}

.xp-award-badge {
  display: inline-block;
  background: color-mix(in srgb, var(--color-accent-aa) 78%, var(--color-bg-elevated));
  color: var(--color-on-accent);
  font-weight: 700;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 1.1rem;
  margin-block: 0.75rem;
  border: 1px solid var(--color-accent-shadow);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--color-accent) 18%, transparent);
  animation: scaleBounce 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─── Settings ───────────────────────────────────────────────────────────── */
.settings-container {
  max-width: 560px;
}

.settings-container h2 {
  margin-block-end: 1.5rem;
}

.settings-section {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-block-end: 1.5rem;
}

.settings-section h3 {
  margin-block-end: 0.75rem;
  font-size: 1rem;
}

.settings-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-block-end: 1rem;
  padding: 0.6rem 0.875rem;
  background: var(--color-warning-soft);
  border: 1px solid color-mix(in srgb, var(--color-warning) 45%, var(--color-border));
  border-radius: var(--radius-sm);
}

/* ─── Profile View ───────────────────────────────────────────────────────── */
.profile-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-block-end: 2rem;
  padding: 1.5rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.profile-avatar {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent2));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-on-accent);
  flex-shrink: 0;
}

.profile-name {
  font-size: 1.375rem;
  margin-block-end: 0.25rem;
}

.profile-level-badge {
  display: inline-block;
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-block-end: 2rem;
}

.profile-name-form {
  margin-block-end: 1.25rem;
}

.profile-name-row {
  display: flex;
  gap: 0.625rem;
  align-items: center;
}

.profile-name-row .form-input {
  flex: 1;
}

.stat-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
}

.stat-card-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-accent-text);
}

.stat-card-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-block-start: 0.25rem;
}

.badges-section h3 {
  margin-block-end: 1rem;
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem;
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem 0.5rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.badge-item.earned {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.badge-item.locked {
  filter: grayscale(100%);
  opacity: 0.4;
}

.badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.badge-svg-icon {
  width: 2rem;
  height: 2rem;
}

.badge-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.3;
}

.badge-item.earned .badge-name { color: var(--color-text); }

.profile-reset-wrap {
  margin-block-start: 2rem;
}

.btn-danger-text {
  color: var(--color-error);
}

/* ─── Toast Notifications ────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  top: calc(var(--header-height) + 1rem);
  inset-inline-end: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-border));
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  min-width: 240px;
  max-width: 320px;
  box-shadow: var(--shadow-lg);
  animation: toastIn var(--transition-normal) ease;
  pointer-events: auto;
  font-size: 0.875rem;
  font-weight: 600;
}

.toast.toast-success {
  border-color: color-mix(in srgb, var(--color-success) 55%, var(--color-border));
  background: color-mix(in srgb, var(--color-success-soft) 38%, var(--color-bg-elevated));
}
.toast.toast-warning {
  border-color: color-mix(in srgb, var(--color-warning) 55%, var(--color-border));
  background: color-mix(in srgb, var(--color-warning-soft) 36%, var(--color-bg-elevated));
}
.toast.toast-error   {
  border-color: color-mix(in srgb, var(--color-error) 55%, var(--color-border));
  background: color-mix(in srgb, var(--color-error-soft) 36%, var(--color-bg-elevated));
}
.toast.toast-out     { animation: toastOut var(--transition-normal) ease forwards; }

/* ─── Storage warning banner ─────────────────────────────────────────────── */
#storage-warning {
  background: var(--color-warning-soft);
  border-block-end: 1px solid var(--color-warning);
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  color: var(--color-warning);
  font-weight: 600;
  text-align: center;
  z-index: 50;
}

/* ─── Animations ─────────────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleBounce {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(120%); }
}

@keyframes xpCount {
  from { transform: scale(1.2); filter: brightness(1.5); }
  to   { transform: scale(1);   filter: brightness(1); }
}

/* ─── Responsive — Tablet (≤1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: var(--sidebar-width-sm);
  }
  .main-content {
    padding: 1.5rem;
  }
}

/* ─── Responsive — Mobile (≤768px) ──────────────────────────────────────── */
@media (max-width: 768px) {
  .app-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "main";
  }

  .hamburger-btn {
    display: flex;
  }

  .sidebar {
    position: fixed;
    inset-block: var(--header-height) 0;
    inset-inline-start: 0;
    width: var(--sidebar-width);
    z-index: 200;
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
  }

  /* RTL mobile sidebar */
  [dir="rtl"] .sidebar {
    inset-inline-start: auto;
    inset-inline-end: 0;
    transform: translateX(100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  [dir="rtl"] .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: var(--color-scrim);
    z-index: 199;
  }

  .header-stats { display: none; }
  .header-nav {
    gap: 0.125rem;
    margin-inline-start: auto;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .header-nav::-webkit-scrollbar {
    display: none;
  }

  .header-nav .nav-btn {
    flex: 0 0 auto;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
  }

  .main-content {
    padding: 1rem;
    max-height: calc(100dvh - var(--header-height));
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .export-actions {
    padding: 0.625rem;
  }

  .export-btn {
    width: 100%;
    min-width: 0;
  }

  .profile-name-row {
    flex-direction: column;
    align-items: stretch;
  }

  .lesson-view-header { margin-block-end: 1rem; }
}

@media (max-width: 480px) {
  .app-header {
    gap: 0.4rem;
    padding-inline: 0.625rem;
  }

  .header-brand {
    min-width: 0;
  }

  .header-title {
    font-size: 0.9rem;
  }

  .header-nav {
    max-width: 58vw;
  }
}

@media (max-width: 380px) {
  .header-nav .nav-btn {
    padding: 0.3rem 0.4rem;
    min-width: 36px;
    font-size: 0.72rem;
  }

  .header-title {
    display: none;
  }
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Tools & Reference — shared page scaffolding
   ══════════════════════════════════════════════════════════════════════════ */

/* Page header used by all 7 reference pages */
.ref-page-header {
  margin-block-end: 1.5rem;
}
.ref-page-header h1 {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.25rem;
}
.ref-page-header p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 0.9375rem;
}

/* Cross-reference callout */
.crossref-callout {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: var(--color-accent2-soft);
  border: 1px solid var(--color-accent2-border-soft);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-block-end: 1.25rem;
}
.crossref-callout a {
  color: var(--color-accent-text);
  text-decoration: none;
  font-weight: 500;
}
.crossref-callout a:hover { text-decoration: underline; }

/* ── Sidebar: Tools & Reference group ────────────────────────────────────── */
.sidebar-group-tools {
  margin-block-start: 0.5rem;
  padding-block-start: 0.5rem;
  border-block-start: 1px solid var(--color-border);
}
.sidebar-group-tools .sidebar-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: start;
}
.sidebar-group-tools .sidebar-group-header:hover { color: var(--color-text); }
.sidebar-group-tools .sidebar-group-header .chevron {
  margin-inline-start: auto;
  transition: transform 200ms;
}
.sidebar-group-tools.collapsed .chevron { transform: rotate(-90deg); }
.sidebar-group-tools.collapsed .sidebar-group-links { display: none; }

/* ── Dashboard: Tools & Reference section ────────────────────────────────── */
.dashboard-tools-section {
  margin-block-start: 2rem;
}
.dashboard-tools-section h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dashboard-tools-section h2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.tools-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  min-height: 40px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.tool-chip:hover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg-elevated));
}

.tool-chip-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-accent);
}

.tool-chip-icon .ui-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.tool-chip-title {
  font-size: 0.875rem;
  font-weight: 500;
}

/* ── Meet the Instructor ─────────────────────────────────────────────────── */
.instructor-section {
  margin-block-start: 2.5rem;
}
.instructor-heading {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.instructor-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.instructor-card {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-bg-elevated);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.instructor-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
}
.instructor-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.instructor-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
}
.instructor-name:hover {
  text-decoration: underline;
}
.instructor-bio {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   Cheat Sheet (`#view-cheatsheet`)
   ══════════════════════════════════════════════════════════════════════════ */
.cheatsheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}
.cheatsheet-category {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cheatsheet-category-header {
  padding: 0.75rem 1rem;
  background: var(--color-bg-card);
  border-block-end: 1px solid var(--color-border);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cheatsheet-entries {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cheatsheet-entry {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  border-block-end: 1px solid var(--color-border-subtle);
}
.cheatsheet-entry:last-child { border-block-end: none; }
.cheatsheet-entry-name {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-accent-text);
  white-space: nowrap;
}
.cheatsheet-entry-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.cheatsheet-copy-btn {
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 150ms, color 150ms;
}
.cheatsheet-copy-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}
.diff-badge {
  display: inline-block;
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.diff-badge.beginner    { background: var(--color-success-soft); color: var(--color-success); }
.diff-badge.intermediate{ background: var(--color-warning-soft); color: var(--color-warning); }
.diff-badge.advanced    { background: var(--color-error-soft);   color: var(--color-error);   }

/* ══════════════════════════════════════════════════════════════════════════
   Feature Index (`#view-featureindex`)
   ══════════════════════════════════════════════════════════════════════════ */
.featureindex-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-block-end: 1.25rem;
}
.featureindex-search {
  flex: 1;
  min-width: 200px;
  padding: 0.5rem 0.875rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 0.9375rem;
}
.featureindex-search:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.featureindex-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.featureindex-count {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  align-self: center;
}
.featureindex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.875rem;
}

@media (min-width: 1280px) {
  .featureindex-grid .featureindex-card:nth-child(5n + 1) {
    grid-column: span 2;
  }
}
.featureindex-card {
  padding: 0.875rem 1rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  transition: border-color 150ms;
}
.featureindex-card:hover { border-color: var(--color-accent); }
.featureindex-card-name {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-accent-text);
  font-weight: 600;
}
.featureindex-card-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.featureindex-card-meta {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-block-start: 0.25rem;
}
.type-badge {
  display: inline-block;
  padding: 0.1em 0.5em;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--color-accent2-soft);
  color: var(--color-accent2-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.featureindex-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-muted);
}
.featureindex-empty p { margin: 0 0 0.5rem; font-size: 1rem; }
.featureindex-empty small { font-size: 0.8125rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Quiz (`#view-quiz`)
   ══════════════════════════════════════════════════════════════════════════ */
.quiz-shell {
  max-width: 640px;
  margin-inline: auto;
}
.quiz-start-card,
.quiz-result-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  text-align: center;
}
.quiz-start-card h2,
.quiz-result-card h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}
.quiz-start-card p,
.quiz-result-card p {
  color: var(--color-text-muted);
  margin: 0 0 1.5rem;
}
.quiz-progress-bar {
  height: 4px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  margin-block-end: 1.5rem;
}
.quiz-progress-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--color-accent2), var(--color-accent));
  border-radius: 999px;
  transform: scaleX(var(--progress-scale, 0));
  transform-origin: left center;
  transition: transform 350ms ease;
}
.quiz-step-label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-block-end: 1rem;
  text-align: end;
}
.quiz-question-text {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  margin-block-end: 1.25rem;
  line-height: 1.5;
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-block-end: 1.5rem;
}
.quiz-option {
  padding: 0.75rem 1rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 0.9375rem;
  text-align: start;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.quiz-option:hover { border-color: var(--color-accent2); background: var(--color-accent2-soft); }
.quiz-option.selected { border-color: var(--color-accent2); background: var(--color-accent2-soft); }
.quiz-option.correct  { border-color: var(--color-success); background: var(--color-success-soft); }
.quiz-option.wrong    { border-color: var(--color-error);   background: var(--color-error-soft);   }
.quiz-tier-badge {
  display: inline-block;
  padding: 0.35em 1em;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-accent2), var(--color-accent));
  color: var(--color-on-accent);
  margin-block-end: 1rem;
}
.quiz-score-text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-block-end: 1.5rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   Config Builder (`#view-configbuilder`)
   ══════════════════════════════════════════════════════════════════════════ */
.configbuilder-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 768px) {
  .configbuilder-layout { grid-template-columns: 1fr; }
}
.configbuilder-tabs {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-block-end: 1rem;
}
.configbuilder-tab {
  padding: 0.4rem 0.875rem;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 150ms, color 150ms, background 150ms;
}
.configbuilder-tab:hover { border-color: var(--color-accent2); color: var(--color-text); }
.configbuilder-tab.active {
  border-color: var(--color-accent2);
  background: var(--color-accent2-soft);
  color: var(--color-accent2-text);
}
.configbuilder-form-panel {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.configbuilder-form-panel .form-group { margin-block-end: 1rem; }
.configbuilder-preview-panel {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: sticky;
  top: 1rem;
}
.configbuilder-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  background: var(--color-bg-card);
  border-block-end: 1px solid var(--color-border);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.configbuilder-preview-actions {
  display: flex;
  gap: 0.5rem;
}
.configbuilder-code {
  margin: 0;
  padding: 1rem;
  background: var(--terminal-bg);
  color: var(--terminal-text);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  overflow-x: auto;
  max-height: 480px;
  overflow-y: auto;
  white-space: pre;
  direction: ltr;
}

/* ══════════════════════════════════════════════════════════════════════════
   Playground (`#view-playground`)
   ══════════════════════════════════════════════════════════════════════════ */

/* Toolbar */
.playground-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.playground-toolbar-spacer { flex: 1; }

/* Segmented mode toggle */
.playground-mode-toggle {
  display: flex;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.playground-mode-btn {
  padding: 0.35rem 0.875rem;
  min-width: 44px;
  min-height: 44px;
  font-size: 0.8125rem;
  font-weight: 500;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.playground-mode-btn.active {
  background: var(--color-accent2-soft);
  color: var(--color-accent2-text);
}

/* Command palette strip (free mode) */
.playground-chips-panel {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.playground-chips-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.playground-chips {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.125rem;
}
.playground-chips::-webkit-scrollbar { display: none; }
.playground-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  min-height: 32px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 150ms, background 150ms, color 150ms;
  white-space: nowrap;
}
.playground-chip:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}
.playground-chip[data-mod="2"] { color: var(--mod-2-color); border-color: color-mix(in srgb, var(--mod-2-color) 28%, transparent); }
.playground-chip[data-mod="2"]:hover { background: color-mix(in srgb, var(--mod-2-color) 12%, transparent); border-color: var(--mod-2-color); }
.playground-chip[data-mod="4"] { color: var(--mod-4-color); border-color: color-mix(in srgb, var(--mod-4-color) 28%, transparent); }
.playground-chip[data-mod="4"]:hover { background: color-mix(in srgb, var(--mod-4-color) 12%, transparent); border-color: var(--mod-4-color); }
.playground-chip[data-mod="5"] { color: var(--mod-5-color); border-color: color-mix(in srgb, var(--mod-5-color) 28%, transparent); }
.playground-chip[data-mod="5"]:hover { background: color-mix(in srgb, var(--mod-5-color) 12%, transparent); border-color: var(--mod-5-color); }
.playground-chip[data-mod="7"] { color: var(--mod-7-color); border-color: color-mix(in srgb, var(--mod-7-color) 28%, transparent); }
.playground-chip[data-mod="7"]:hover { background: color-mix(in srgb, var(--mod-7-color) 12%, transparent); border-color: var(--mod-7-color); }
.playground-chip[data-mod="8"] { color: var(--mod-8-color); border-color: color-mix(in srgb, var(--mod-8-color) 28%, transparent); }
.playground-chip[data-mod="8"]:hover { background: color-mix(in srgb, var(--mod-8-color) 12%, transparent); border-color: var(--mod-8-color); }

/* Guided exercise card */
.playground-exercise-panel {
  padding: 0.875rem 1.125rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-block-start: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.playground-exercise-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.playground-step-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent-text);
  white-space: nowrap;
  min-width: 4.5rem;
}
.playground-step-progress {
  flex: 1;
  height: 5px;
  background: var(--color-bg-card);
  border-radius: 999px;
  overflow: hidden;
}
.playground-step-progress-fill {
  height: 100%;
  width: 100%;
  background: var(--color-accent);
  border-radius: 999px;
  transform: scaleX(var(--progress-scale, 0));
  transform-origin: left center;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.playground-exercise-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.playground-step-hint {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.5;
}
.playground-step-cmd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-accent-text);
  background: var(--color-accent-soft);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.playground-step-cmd:hover,
.playground-step-cmd:focus-visible {
  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
  border-color: var(--color-accent);
  outline: none;
}
.playground-exercise-done {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.25rem;
}
.playground-done-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  background: var(--color-success-soft);
  color: var(--color-success);
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 700;
}
.playground-done-text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-success);
}

/* Terminal wrapper */
.playground-terminal-wrap {
  min-height: 340px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .playground-step-progress-fill { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Resources (`#view-resources`)
   ══════════════════════════════════════════════════════════════════════════ */
.resources-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 768px) {
  .resources-layout { grid-template-columns: 1fr; }
}
.resources-section-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.875rem;
  padding-block-end: 0.5rem;
  border-block-end: 1px solid var(--color-border);
}
.resource-pack-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-block-end: 0.625rem;
  transition: border-color 150ms;
}
.resource-pack-card:hover { border-color: var(--color-accent); }
.resource-pack-info { flex: 1; }
.resource-pack-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.2rem;
}
.resource-pack-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
}
.resource-link-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0;
  border-block-end: 1px solid var(--color-border-subtle);
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.9rem;
  transition: color 150ms;
}
.resource-link-item:last-child { border-block-end: none; }
.resource-link-item:hover { color: var(--color-accent-text); }
.resource-link-item .ext-icon {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Feedback (`#view-feedback`)
   ══════════════════════════════════════════════════════════════════════════ */
.feedback-layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 900px) {
  .feedback-layout { grid-template-columns: 1fr; }
}
.feedback-form-panel {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.feedback-kanban {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.875rem;
}
.feedback-column {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.feedback-column-header {
  padding: 0.625rem 0.875rem;
  background: var(--color-bg-card);
  border-block-end: 1px solid var(--color-border);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.feedback-column-header .count-badge {
  background: var(--color-border);
  color: var(--color-text-muted);
  border-radius: 999px;
  padding: 0.1em 0.5em;
  font-size: 0.7rem;
}
.feedback-cards-list {
  padding: 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 80px;
}
.feedback-card {
  padding: 0.75rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.feedback-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.25rem;
}
.feedback-card-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.feedback-empty-col {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-align: center;
  padding: 0.75rem;
  opacity: 0.6;
}
.feedback-tag {
  display: inline-block;
  padding: 0.1em 0.5em;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}
.feedback-warn {
  padding: 0.5rem 0.875rem;
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning-border-soft);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  color: var(--color-warning);
  margin-block-end: 0.75rem;
}

/* Status column accent strips */
.feedback-column[data-status="reviewing"] .feedback-column-header { border-block-start: 3px solid var(--color-info); }
.feedback-column[data-status="planned"]   .feedback-column-header { border-block-start: 3px solid var(--color-accent2); }
.feedback-column[data-status="building"]  .feedback-column-header { border-block-start: 3px solid var(--color-warning); }
.feedback-column[data-status="shipped"]   .feedback-column-header { border-block-start: 3px solid var(--color-success); }

.sync-summary-shell {
  margin-block-end: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-sync-bg-start), var(--color-sync-bg-end));
}

.sync-summary-title {
  font-size: 0.95rem;
  margin: 0 0 0.35rem;
}

.sync-summary-meta {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  margin: 0 0 0.6rem;
}

.sync-summary-list {
  margin: 0.6rem 0 0;
  padding-inline-start: 1rem;
}

.sync-summary-item {
  color: var(--color-text);
  font-size: 0.8125rem;
  margin-block: 0.2rem;
}

.verification-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  border: 1px solid transparent;
}

.verification-indicator.pending {
  color: var(--color-warning);
  background: var(--color-warning-soft);
  border-color: var(--color-warning-border-soft);
}

.verification-indicator.verified {
  color: var(--color-success);
  background: var(--color-success-soft);
  border-color: var(--color-success-border-soft);
}


/* ── Site footer ─────────────────────────────────────── */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  min-height: var(--footer-height);
  padding-inline: 1.5rem;
  padding-block: 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface);
  border-block-start: 1px solid var(--color-border);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 10;
}
.site-footer__instructor a {
  color: var(--color-accent);
  text-decoration: none;
}

.site-footer__instructor {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.site-footer__instructor a:hover {
  text-decoration: underline;
}
.site-footer__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-variant-numeric: tabular-nums;
}

.site-footer__version {
  color: var(--color-text-dim);
  letter-spacing: 0.04em;
}

@media (prefers-color-scheme: light) {
  :root {
    --color-bg:          #f5f7fa;
    --color-bg-elevated: #ffffff;
    --color-bg-card:     #edf1f7;
    --color-bg-hover:    #e4eaf3;
    --color-surface:     #eef2f7;

    --color-text:        #1a1a2e;
    --color-text-muted:  #4a5568;
    --color-text-dim:    #64748b;

    --color-border:         rgba(0, 0, 0, 0.09);
    --color-border-subtle:  rgba(0, 0, 0, 0.04);
    --color-scrim:          rgba(0, 0, 0, 0.35);
    --color-code-bg:        rgba(0, 0, 0, 0.05);
    --color-bg-deep:        #e8ecf2;

    --terminal-bg:          #0f1117;
    --terminal-bg-elevated: #1a1d27;
    --terminal-text:        #eef2f7;
    --terminal-text-dim:    #9aa3b2;
    --terminal-border:      rgba(255,255,255,0.1);
    --terminal-border-soft: rgba(255,255,255,0.06);
    --terminal-muted:       rgba(255,255,255,0.45);
    --terminal-muted-dim:   rgba(255,255,255,0.3);

    --shadow-sm:  0 1px 3px rgba(0,0,0,0.12);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.15);
    --shadow-lg:  0 8px 24px rgba(0,0,0,0.18);
  }
}

/* ─── Explicit light theme (user override) ───────────────────────────────── */
[data-theme="light"] {
  --color-bg:          #f5f7fa;
  --color-bg-elevated: #ffffff;
  --color-bg-card:     #edf1f7;
  --color-bg-hover:    #e4eaf3;
  --color-surface:     #eef2f7;

  --color-text:        #1a1a2e;
  --color-text-muted:  #4a5568;
  --color-text-dim:    #64748b;

  --color-border:        rgba(0, 0, 0, 0.09);
  --color-border-subtle: rgba(0, 0, 0, 0.04);
  --color-scrim:         rgba(0, 0, 0, 0.35);
  --color-code-bg:       rgba(0, 0, 0, 0.05);
  --color-bg-deep:       #e8ecf2;

  --terminal-bg:          #0f1117;
  --terminal-bg-elevated: #1a1d27;
  --terminal-text:        #eef2f7;
  --terminal-text-dim:    #9aa3b2;
  --terminal-border:      rgba(255,255,255,0.1);
  --terminal-border-soft: rgba(255,255,255,0.06);
  --terminal-muted:       rgba(255,255,255,0.45);
  --terminal-muted-dim:   rgba(255,255,255,0.3);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.18);
}

/* ─── Explicit dark theme (overrides OS light preference) ────────────────── */
[data-theme="dark"] {
  --color-bg:          #1a1a2e;
  --color-bg-elevated: #16213e;
  --color-bg-card:     #0f3460;
  --color-bg-hover:    #1a2a4a;
  --color-surface:     #1e2d45;

  --color-text:        #eef2f7;
  --color-text-muted:  #9aa3b2;
  --color-text-dim:    #8e93a0;

  --color-border:        rgba(255,255,255,0.08);
  --color-border-subtle: rgba(255,255,255,0.04);
  --color-scrim:         rgba(0,0,0,0.5);
  --color-code-bg:       rgba(255,255,255,0.06);
  --color-bg-deep:       #0d0d1a;

  --terminal-bg:          color-mix(in srgb, #1a1a2e 58%, #000 42%);
  --terminal-bg-elevated: color-mix(in srgb, #16213e 74%, #000 26%);
  --terminal-text:        #eef2f7;
  --terminal-text-dim:    #9aa3b2;
  --terminal-border:      rgba(255,255,255,0.1);
  --terminal-border-soft: rgba(255,255,255,0.06);
  --terminal-muted:       rgba(255,255,255,0.4);
  --terminal-muted-dim:   rgba(255,255,255,0.3);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
}