/* ============================================
   UI SKINS — Complete visual overrides
   Default (no data-ui) = "Dev" (current look)
   ============================================ */

/* ============================================
   CLEAN MINIMAL — Notion/Linear inspired
   ============================================ */

html[data-ui="minimal"] {
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
}

html[data-ui="minimal"] body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  font-size: 15.5px;
  line-height: 1.75;
  letter-spacing: -0.01em;
}

/* Topbar */
html[data-ui="minimal"] #topbar {
  border-bottom: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
}
html[data-ui="minimal"] #topbar .logo {
  font-weight: 600;
  font-size: 1em;
  letter-spacing: -0.02em;
}

/* Search */
html[data-ui="minimal"] #search-input {
  border-radius: 10px;
  border-color: transparent;
  background: var(--surface2);
}
html[data-ui="minimal"] #search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
html[data-ui="minimal"] #search-results { border-radius: 14px; }

/* Sidebar */
html[data-ui="minimal"] #sidebar {
  border-right: none;
  box-shadow: 1px 0 8px rgba(0,0,0,0.06);
}
html[data-ui="minimal"] .module-header {
  border-radius: 8px;
  margin: 0 0.5rem;
  padding: 0.6rem 0.75rem;
}
html[data-ui="minimal"] .module-header:hover { background: var(--surface2); }
html[data-ui="minimal"] .module-num {
  border-radius: 6px;
  width: 24px;
  height: 24px;
}
html[data-ui="minimal"] .section-link {
  border-left: none;
  border-radius: 6px;
  margin: 1px 0.5rem;
  padding: 0.3rem 0.75rem 0.3rem 2.2rem;
}
html[data-ui="minimal"] .section-link.active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-left: none;
  font-weight: 600;
}
html[data-ui="minimal"] .progress-bar-bg { border-radius: 4px; height: 4px; }
html[data-ui="minimal"] .progress-bar-fill { border-radius: 4px; }

/* Content */
html[data-ui="minimal"] #content-area {
  padding: 3rem 2.5rem 5rem;
  max-width: 820px;
}
html[data-ui="minimal"] h1 {
  font-size: 2.6em;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.2;
}
html[data-ui="minimal"] h2 {
  font-size: 1.75em;
  font-weight: 700;
  letter-spacing: -0.03em;
  border-bottom: none;
  padding-bottom: 0;
  margin: 2.5rem 0 1.2rem;
}
html[data-ui="minimal"] h3 {
  font-size: 1.35em;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Cards & surfaces */
html[data-ui="minimal"] pre {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 1.2rem 1.3rem;
}
html[data-ui="minimal"] .callout {
  border-radius: 12px;
  border-left-width: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
html[data-ui="minimal"] .toc {
  border-radius: 14px;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
html[data-ui="minimal"] table {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: none;
}
html[data-ui="minimal"] td, html[data-ui="minimal"] th {
  border-color: var(--surface2);
}

/* Module cards */
html[data-ui="minimal"] .module-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 1.5rem;
  transition: box-shadow 0.2s, transform 0.2s;
}
html[data-ui="minimal"] .module-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transform: translateY(-3px);
  border: none;
}
html[data-ui="minimal"] .topic-tag { border-radius: 8px; }
html[data-ui="minimal"] .badge { border-radius: 8px; }

/* Quiz */
html[data-ui="minimal"] .quiz-question {
  border-radius: 14px;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
html[data-ui="minimal"] .quiz-option { border-radius: 10px; }
html[data-ui="minimal"] .quiz-score { border-radius: 16px; border: none; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
html[data-ui="minimal"] .quiz-btn { border-radius: 10px; }

/* Flashcard */
html[data-ui="minimal"] .flashcard-front,
html[data-ui="minimal"] .flashcard-back { border-radius: 18px; border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
html[data-ui="minimal"] .flashcard-btn { border-radius: 10px; }
html[data-ui="minimal"] .flashcard-filter-btn { border-radius: 10px; }

/* News */
html[data-ui="minimal"] .news-card { border-radius: 14px; border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
html[data-ui="minimal"] .news-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.1); transform: translateY(-2px); }
html[data-ui="minimal"] .news-highlight-card { border-radius: 14px; border: none; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border-left: 4px solid var(--accent); }
html[data-ui="minimal"] .news-filter-pill { border-radius: 10px; }
html[data-ui="minimal"] .news-tag { border-radius: 8px; }

/* Back to top */
html[data-ui="minimal"] #back-to-top { border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: none; }

/* Continue banner */
html[data-ui="minimal"] .continue-banner { border-radius: 14px; border-left-width: 3px; }
html[data-ui="minimal"] .continue-banner-btn { border-radius: 10px; }

/* Theme dropdown */
html[data-ui="minimal"] #theme-dropdown { border-radius: 14px; border: none; box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
html[data-ui="minimal"] .theme-option { border-radius: 8px; }


/* ============================================
   TERMINAL — Monospace hacker aesthetic
   ============================================ */

html[data-ui="terminal"] body {
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.6;
}

/* Topbar */
html[data-ui="terminal"] #topbar {
  border-bottom: 1px dashed var(--border);
  background: var(--bg);
}
html[data-ui="terminal"] #topbar .logo {
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95em;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: var(--accent);
}
html[data-ui="terminal"] #topbar .logo::before {
  content: '> ';
  color: var(--accent2);
}

/* Search */
html[data-ui="terminal"] #search-input {
  border-radius: 0;
  border: 1px dashed var(--border);
  font-family: inherit;
}
html[data-ui="terminal"] #search-results { border-radius: 0; border-style: dashed; }

/* Sidebar */
html[data-ui="terminal"] #sidebar { border-right: 1px dashed var(--border); }
html[data-ui="terminal"] .module-header {
  padding: 0.4rem 0.8rem;
  font-family: inherit;
}
html[data-ui="terminal"] .module-num {
  border-radius: 0;
  font-family: inherit;
  width: 20px;
  height: 20px;
  font-size: 0.7em;
}
html[data-ui="terminal"] .module-title {
  font-family: inherit;
  font-size: 0.82em;
}
html[data-ui="terminal"] .module-chevron { display: none; }
html[data-ui="terminal"] .module-header::after {
  content: '/';
  color: var(--text-dim);
  font-size: 0.75em;
  margin-left: auto;
}
html[data-ui="terminal"] .module-header.open::after { content: '-'; }
html[data-ui="terminal"] .section-link {
  font-family: inherit;
  font-size: 0.75em;
  border-left: 1px dashed transparent;
  padding: 0.2rem 0.8rem 0.2rem 2.4rem;
  border-radius: 0;
}
html[data-ui="terminal"] .section-link::before {
  content: '|-';
  color: var(--text-dim);
  margin-right: 0.3rem;
  font-size: 0.9em;
}
html[data-ui="terminal"] .section-link.active {
  border-left: 1px dashed var(--accent);
  border-radius: 0;
  background: transparent;
  color: var(--accent);
}
html[data-ui="terminal"] .progress-bar-bg { border-radius: 0; height: 2px; }
html[data-ui="terminal"] .progress-bar-fill { border-radius: 0; }

/* Content */
html[data-ui="terminal"] #content-area { max-width: 820px; padding: 2.5rem 2rem 5rem; }
html[data-ui="terminal"] h1 {
  font-family: inherit;
  font-size: 2em;
  font-weight: 800;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: var(--accent);
}
html[data-ui="terminal"] h1::before { content: '# '; color: var(--text-dim); }
html[data-ui="terminal"] h2 {
  font-family: inherit;
  font-size: 1.5em;
  font-weight: 700;
  border-bottom: 1px dashed var(--border);
  color: var(--accent);
  margin: 2.5rem 0 1.2rem;
}
html[data-ui="terminal"] h2::before { content: '## '; color: var(--text-dim); }
html[data-ui="terminal"] h3 {
  font-family: inherit;
  font-size: 1.2em;
  font-weight: 600;
  color: var(--accent3);
  margin: 1.75rem 0 0.75rem;
}
html[data-ui="terminal"] h3::before { content: '### '; color: var(--text-dim); }
html[data-ui="terminal"] h4 { font-family: inherit; }
html[data-ui="terminal"] h4::before { content: '> '; color: var(--accent4); }
html[data-ui="terminal"] .subtitle { font-family: inherit; font-size: 0.9em; }
html[data-ui="terminal"] .last-updated { font-family: inherit; }

html[data-ui="terminal"] pre {
  border-radius: 0;
  border: 1px dashed var(--border);
  font-size: 0.85em;
}
html[data-ui="terminal"] code {
  font-family: inherit;
  border-radius: 0;
}
html[data-ui="terminal"] .callout {
  border-radius: 0;
  border-left: 2px dashed;
}
html[data-ui="terminal"] .toc {
  border-radius: 0;
  border: 1px dashed var(--border);
}
html[data-ui="terminal"] table { border-radius: 0; }
html[data-ui="terminal"] td, html[data-ui="terminal"] th {
  font-family: inherit;
  font-size: 0.85em;
  border-style: dashed;
}
html[data-ui="terminal"] .sep { border-top-style: dashed; }

/* Module cards */
html[data-ui="terminal"] .module-card {
  border-radius: 0;
  border-style: dashed;
  padding: 1rem;
}
html[data-ui="terminal"] .module-card:hover { transform: none; border-color: var(--accent); }
html[data-ui="terminal"] .module-card .card-num { font-family: inherit; }
html[data-ui="terminal"] .module-card .card-title { font-family: inherit; }
html[data-ui="terminal"] .module-card .card-desc { font-family: inherit; font-size: 0.88em; }
html[data-ui="terminal"] .topic-tag {
  border-radius: 0;
  font-family: inherit;
  border: 1px dashed var(--border);
  background: transparent;
}
html[data-ui="terminal"] .badge { border-radius: 0; }

/* Quiz */
html[data-ui="terminal"] .quiz-question { border-radius: 0; border-style: dashed; }
html[data-ui="terminal"] .quiz-option { border-radius: 0; border-style: dashed; font-family: inherit; }
html[data-ui="terminal"] .quiz-radio { border-radius: 0; }
html[data-ui="terminal"] .quiz-option.selected .quiz-radio::after { border-radius: 0; }
html[data-ui="terminal"] .quiz-score { border-radius: 0; border-style: dashed; }
html[data-ui="terminal"] .quiz-btn { border-radius: 0; font-family: inherit; }
html[data-ui="terminal"] .quiz-explanation { border-radius: 0; }

/* Flashcard */
html[data-ui="terminal"] .flashcard-front,
html[data-ui="terminal"] .flashcard-back { border-radius: 0; border-style: dashed; }
html[data-ui="terminal"] .flashcard-term { font-family: inherit; }
html[data-ui="terminal"] .flashcard-definition { font-family: inherit; }
html[data-ui="terminal"] .flashcard-btn { border-radius: 0; font-family: inherit; border-style: dashed; }
html[data-ui="terminal"] .flashcard-filter-btn { border-radius: 0; font-family: inherit; }

/* News */
html[data-ui="terminal"] .news-card { border-radius: 0; border-style: dashed; }
html[data-ui="terminal"] .news-card:hover { transform: none; border-color: var(--accent); }
html[data-ui="terminal"] .news-highlight-card { border-radius: 0; border-style: dashed; }
html[data-ui="terminal"] .news-filter-pill { border-radius: 0; font-family: inherit; border-style: dashed; }
html[data-ui="terminal"] .news-tag { border-radius: 0; font-family: inherit; }

/* Misc */
html[data-ui="terminal"] #back-to-top { border-radius: 0; border-style: dashed; }
html[data-ui="terminal"] #theme-dropdown { border-radius: 0; border-style: dashed; }
html[data-ui="terminal"] .theme-option { border-radius: 0; }
html[data-ui="terminal"] .theme-swatch { border-radius: 0; }
html[data-ui="terminal"] .nav-mode-btn { border-radius: 0; font-family: inherit; }
html[data-ui="terminal"] #nav-mode-toggle { border-radius: 0; }
html[data-ui="terminal"] .continue-banner { border-radius: 0; border-style: dashed; }
html[data-ui="terminal"] .continue-banner-btn { border-radius: 0; font-family: inherit; }
html[data-ui="terminal"] .sidebar-learn-btn { border-radius: 0; font-family: inherit; border-style: dashed; }
html[data-ui="terminal"] .welcome-stat-card { border-radius: 0; border-style: dashed; }
html[data-ui="terminal"] .card-status { border-radius: 0; }
html[data-ui="terminal"] #reading-bar-fill { border-radius: 0; }
html[data-ui="terminal"] .quiz-score-bar { border-radius: 0; }
html[data-ui="terminal"] .quiz-score-fill { border-radius: 0; }


/* ============================================
   EDITORIAL — Magazine / publication feel
   ============================================ */

html[data-ui="editorial"] body {
  font-family: 'Georgia', 'Times New Roman', 'Palatino Linotype', serif;
  font-size: 16px;
  line-height: 1.8;
}

/* Topbar */
html[data-ui="editorial"] #topbar {
  border-bottom: 2px solid var(--border);
  background: var(--surface);
}
html[data-ui="editorial"] #topbar .logo {
  font-family: 'Georgia', serif;
  font-weight: 700;
  font-size: 1.1em;
  letter-spacing: -0.02em;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: var(--accent);
}

/* Search */
html[data-ui="editorial"] #search-input {
  border-radius: 4px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.88em;
}
html[data-ui="editorial"] #search-results { border-radius: 4px; }

/* Sidebar */
html[data-ui="editorial"] #sidebar { border-right: 2px solid var(--border); }
html[data-ui="editorial"] .module-header { padding: 0.6rem 1.1rem; }
html[data-ui="editorial"] .module-title {
  font-family: 'Georgia', serif;
  font-size: 0.88em;
  font-weight: 600;
  letter-spacing: -0.01em;
}
html[data-ui="editorial"] .module-num {
  border-radius: 3px;
  font-family: -apple-system, sans-serif;
}
html[data-ui="editorial"] .section-link {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.78em;
  border-radius: 3px;
  border-left-width: 3px;
}
html[data-ui="editorial"] .section-link.active {
  border-radius: 0 3px 3px 0;
  border-left-width: 3px;
}

/* Content */
html[data-ui="editorial"] #content-area {
  max-width: 800px;
  padding: 3.5rem 2.5rem 5rem;
}
html[data-ui="editorial"] h1 {
  font-family: 'Georgia', serif;
  font-size: 2.8em;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.15;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: var(--text);
  margin-bottom: 0.5rem;
}
html[data-ui="editorial"] h2 {
  font-family: 'Georgia', serif;
  font-size: 1.8em;
  font-weight: 700;
  letter-spacing: -0.025em;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0.5rem;
  margin: 3rem 0 1.2rem;
}
html[data-ui="editorial"] h3 {
  font-family: 'Georgia', serif;
  font-size: 1.4em;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 2rem 0 0.75rem;
}
html[data-ui="editorial"] h4 {
  font-family: 'Georgia', serif;
  font-weight: 700;
  font-size: 1.15em;
}
html[data-ui="editorial"] .subtitle {
  font-family: -apple-system, sans-serif;
  font-size: 1.1em;
  line-height: 1.6;
}
html[data-ui="editorial"] .last-updated {
  font-family: -apple-system, sans-serif;
}

html[data-ui="editorial"] p {
  font-size: 1em;
  line-height: 1.85;
  margin-bottom: 1.2rem;
}

html[data-ui="editorial"] pre {
  border-radius: 4px;
  border-left: 4px solid var(--accent);
  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
  font-size: 0.82em;
  line-height: 1.6;
}
html[data-ui="editorial"] code {
  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
  border-radius: 3px;
  font-size: 0.85em;
}
html[data-ui="editorial"] .callout {
  border-radius: 0 4px 4px 0;
  border-left-width: 5px;
  font-family: -apple-system, sans-serif;
  font-size: 0.92em;
}
html[data-ui="editorial"] .toc {
  border-radius: 4px;
  border-left: 4px solid var(--accent);
}
html[data-ui="editorial"] .toc a {
  font-family: -apple-system, sans-serif;
}
html[data-ui="editorial"] table { border-radius: 4px; }
html[data-ui="editorial"] td, html[data-ui="editorial"] th {
  font-family: -apple-system, sans-serif;
  font-size: 0.88em;
  padding: 0.65rem 0.9rem;
}
html[data-ui="editorial"] th { border-bottom-width: 2px; }
html[data-ui="editorial"] .sep { border-top-width: 2px; margin: 2.5rem 0; }

/* Module cards */
html[data-ui="editorial"] .module-card {
  border-radius: 6px;
  border-left: 5px solid var(--card-color, var(--accent));
  padding: 1.4rem 1.5rem;
}
html[data-ui="editorial"] .module-card:hover { transform: none; border-left-width: 5px; }
html[data-ui="editorial"] .module-card .card-num {
  font-family: -apple-system, sans-serif;
}
html[data-ui="editorial"] .module-card .card-title {
  font-family: 'Georgia', serif;
  font-size: 1.2em;
  letter-spacing: -0.02em;
}
html[data-ui="editorial"] .module-card .card-desc {
  font-family: inherit;
  font-size: 0.88em;
  line-height: 1.6;
}
html[data-ui="editorial"] .topic-tag {
  border-radius: 3px;
  font-family: -apple-system, sans-serif;
}
html[data-ui="editorial"] .badge { border-radius: 3px; }

/* Quiz */
html[data-ui="editorial"] .quiz-question { border-radius: 6px; border-left: 4px solid var(--accent3); }
html[data-ui="editorial"] .quiz-q-text { font-family: 'Georgia', serif; font-size: 1.05em; }
html[data-ui="editorial"] .quiz-option { border-radius: 4px; font-family: -apple-system, sans-serif; }
html[data-ui="editorial"] .quiz-radio { border-radius: 50%; }
html[data-ui="editorial"] .quiz-score { border-radius: 6px; }
html[data-ui="editorial"] .quiz-btn { border-radius: 4px; font-family: -apple-system, sans-serif; }
html[data-ui="editorial"] .quiz-explanation { font-family: -apple-system, sans-serif; }

/* Flashcard */
html[data-ui="editorial"] .flashcard-front,
html[data-ui="editorial"] .flashcard-back { border-radius: 8px; }
html[data-ui="editorial"] .flashcard-term { font-family: 'Georgia', serif; }
html[data-ui="editorial"] .flashcard-definition { font-family: inherit; line-height: 1.7; }
html[data-ui="editorial"] .flashcard-btn { border-radius: 4px; font-family: -apple-system, sans-serif; }
html[data-ui="editorial"] .flashcard-filter-btn { border-radius: 4px; font-family: -apple-system, sans-serif; }

/* News */
html[data-ui="editorial"] .news-card {
  border-radius: 4px;
  border-left: 4px solid;
  border-left-color: var(--accent);
}
html[data-ui="editorial"] .news-card:hover { transform: none; }
html[data-ui="editorial"] .news-card-title { font-family: 'Georgia', serif; font-size: 1.1em; font-weight: 700; letter-spacing: -0.015em; }
html[data-ui="editorial"] .news-card-summary { font-family: inherit; }
html[data-ui="editorial"] .news-highlight-card { border-radius: 4px; }
html[data-ui="editorial"] .news-highlight-title { font-family: 'Georgia', serif; letter-spacing: -0.01em; }
html[data-ui="editorial"] .news-filter-pill { border-radius: 4px; font-family: -apple-system, sans-serif; }
html[data-ui="editorial"] .news-tag { border-radius: 3px; font-family: -apple-system, sans-serif; }
html[data-ui="editorial"] .news-header h1 { font-family: 'Georgia', serif; }
html[data-ui="editorial"] .news-tier { border-radius: 1px; }

/* Misc */
html[data-ui="editorial"] #back-to-top { border-radius: 6px; }
html[data-ui="editorial"] #theme-dropdown { border-radius: 6px; }
html[data-ui="editorial"] .theme-option { border-radius: 3px; }
html[data-ui="editorial"] .nav-mode-btn { border-radius: 3px; font-family: -apple-system, sans-serif; }
html[data-ui="editorial"] #nav-mode-toggle { border-radius: 4px; }
html[data-ui="editorial"] .continue-banner { border-radius: 0 6px 6px 0; border-left-width: 5px; }
html[data-ui="editorial"] .continue-banner-btn { border-radius: 4px; font-family: -apple-system, sans-serif; }
html[data-ui="editorial"] .sidebar-learn-btn { border-radius: 4px; font-family: -apple-system, sans-serif; }
html[data-ui="editorial"] .welcome-stat-card { border-radius: 6px; }
html[data-ui="editorial"] .welcome-stat-value { font-family: -apple-system, sans-serif; }
html[data-ui="editorial"] .welcome-stat-label { font-family: -apple-system, sans-serif; }
html[data-ui="editorial"] .card-status { border-radius: 3px; }
html[data-ui="editorial"] #welcome h1 { font-family: 'Georgia', serif; }