/* === Material Symbols (self-hosted) === */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(material-symbols-outlined.ttf) format('truetype');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
}

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

/* === Design Tokens === */
:root {
  --surface:          #0e52a8;
  --surface-alt:      #0a4490;
  --surface-elevated: #2068c0;
  --border:           #3880cc;
  --text:             #fff8d0;
  --text-sec:         #f0c060;
  --accent:           #1ccce0;
  --accent-hover:     #40dff0;
  --accent-light:     rgba(28, 204, 224, 0.18);
  --radius:           8px;
  --radius-lg:        16px;
  --max-width:        960px;
  --font:             -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:        "SF Mono", "Fira Code", Menlo, monospace;
  --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.1);

  /* Poppy feature icon colors */
  --color-amber:      #f59e0b;
  --color-coral:      #f43f5e;
  --color-violet:     #8b5cf6;
  --color-rose:       #ec4899;
  --color-teal:       #14b8a6;
  --color-green:      #22c55e;
  --color-blue:       #3b82f6;
  --color-indigo:     #6366f1;

  /* Theme-switchable tokens */
  --nav-bg:           rgba(14, 82, 168, 0.95);
  --gradient-bar:     linear-gradient(to right, #e63946, #f77f00, #fcbf49, #2a9d8f, #264653, #6a4c93);
  --btn-gradient:     linear-gradient(135deg, #1ccce0, #0097a7);
  --btn-shadow:       rgba(28, 204, 224, 0.4);
  --btn-shadow-hover: rgba(28, 204, 224, 0.5);
  --cta-bg:           #062c70;
  --cta-text:         #f0f8ff;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(120,200,255,0.35) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.32) 0%, transparent 50%), linear-gradient(145deg, #082e80 0%, #0e52a8 50%, #0a6e78 100%);
}

/* === Typography === */
html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--surface-gradient);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  font-weight: 600;
  color: var(--text);
}

h1 { font-size: 2.4rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; }

p { margin-bottom: 1rem; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--accent-hover);
}

/* External link indicator */
a[href^="http"]::after {
  content: "\2197";
  font-size: 0.75em;
  margin-left: 0.2em;
  vertical-align: super;
}

/* No indicator for nav links or image links */
nav a[href^="http"]::after,
a.no-ext::after {
  content: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* === Layout === */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

main {
  min-height: calc(100vh - 160px);
  padding: 2rem 0;
  animation: fadeIn 0.4s ease-out;
}

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

/* === Navigation === */
.site-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.8rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  background: var(--nav-bg);
}

.site-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: var(--gradient-bar);
}

.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.site-nav .brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  letter-spacing: -0.02em;
}

.site-nav .brand img {
  width: 28px;
  height: 28px;
}

.site-nav .brand:hover {
  color: var(--accent);
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  flex-wrap: wrap;
}

.nav-links a {
  color: var(--text-sec);
  font-size: 0.9rem;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.nav-links a:hover {
  color: var(--text);
}

.nav-links a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* === Footer === */
.site-footer {
  position: relative;
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
  padding: 2rem 0;
  margin-top: 3rem;
  color: var(--text-sec);
  font-size: 0.85rem;
}

.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--gradient-bar);
}

.site-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-links {
  display: flex;
  gap: 1.2rem;
  list-style: none;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-sec);
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--accent);
}

/* === Hero === */
.hero {
  text-align: center;
  padding: 4rem 0 3rem;
}

.hero-logo {
  width: 120px;
  height: 120px;
  margin: 0 auto 1.5rem;
}

.hero h1 {
  font-size: 2.8rem;
  margin-bottom: 0.5rem;
  letter-spacing: -0.03em;
}

.hero .tagline {
  color: var(--text-sec);
  font-size: 1.15rem;
  max-width: 500px;
  margin: 0 auto;
}

/* === Product Cards === */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
  align-items: stretch;
}

.product-grid > a {
  display: block;
  height: 100%;
}

.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.product-card .card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.product-card .card-header img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
}

.product-card .card-header h3 {
  margin: 0;
}

.product-card .card-desc {
  color: var(--text-sec);
  font-size: 0.95rem;
  margin-bottom: 1rem;
  flex: 1;
}

.product-card .card-link {
  font-size: 0.9rem;
  font-weight: 500;
}

/* === Featured Product (Home) === */
.featured {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: var(--shadow-sm);
}

.featured-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.featured-text h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.featured-text h2 img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
}

.featured-screenshot {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.featured-screenshot img {
  transition: transform 0.3s;
}

.featured-screenshot:hover img {
  transform: scale(1.02);
}

/* === Screenshot Gallery === */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.gallery-item {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.gallery-item:hover {
  box-shadow: var(--shadow-md);
}

.gallery-item img {
  transition: transform 0.3s;
}

.gallery-item:hover img {
  transform: scale(1.02);
}

.gallery-item figcaption {
  background: var(--surface-alt);
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--text-sec);
}

/* === Badges === */
.badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.badge {
  background: var(--accent-light);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 500;
}

/* === Feature List === */
.features {
  margin: 2rem 0;
}

.feature-group {
  margin-bottom: 2rem;
}

.feature-group h3 {
  margin-bottom: 0.75rem;
  color: var(--accent);
}

.feature-group ul {
  list-style: none;
  padding: 0;
}

.feature-group li {
  padding: 0.4rem 0;
  padding-left: 1.5rem;
  position: relative;
  color: var(--text-sec);
  font-size: 0.95rem;
}

.feature-group li::before {
  content: "\2022";
  color: var(--accent);
  position: absolute;
  left: 0.25rem;
}

/* === Get Started / CTA === */
.cta-section {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  margin: 2rem 0;
}

.cta-section h2 {
  margin-bottom: 1rem;
}

.cta-section pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  overflow-x: auto;
  margin: 1rem 0;
  color: var(--text);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--btn-gradient);
  color: #fff;
  padding: 0.75rem 2rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 14px var(--btn-shadow);
}

.btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--btn-shadow-hover);
}

.btn::after {
  content: none;
}

/* === About Page === */
.about-content {
  max-width: 640px;
}

.social-links {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
  list-style: none;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-sec);
  font-size: 0.95rem;
  transition: color 0.2s;
}

.link-icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
  flex-shrink: 0;
}

.social-links a:hover {
  color: var(--accent);
}

/* === Blog === */
.blog-list {
  list-style: none;
}

.blog-list li {
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0;
}

.blog-list li:last-child {
  border-bottom: none;
}

.blog-list time {
  font-size: 0.85rem;
  color: var(--text-sec);
}

.blog-list h3 {
  margin: 0.25rem 0 0.5rem;
}

.blog-list .excerpt {
  color: var(--text-sec);
  font-size: 0.95rem;
}

.blog-post {
  max-width: 640px;
}

.blog-post .post-meta {
  color: var(--text-sec);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.blog-post h1 {
  margin-bottom: 0.5rem;
}

/* === Section Headings === */
.section-heading {
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

/* === Product Hero === */
.product-hero {
  text-align: center;
  padding: 5rem 0 3rem;
  position: relative;
}

.product-hero--unterlumen {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, rgba(244, 63, 94, 0.06) 50%, rgba(139, 92, 246, 0.04) 100%);
}

.product-hero--sippschaft {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.06) 0%, rgba(99, 102, 241, 0.06) 50%, rgba(139, 92, 246, 0.04) 100%);
}

.product-hero--caddyshack {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(20, 184, 166, 0.06) 50%, rgba(139, 92, 246, 0.04) 100%);
}

.product-hero img {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-lg);
  margin: 0 auto 1.5rem;
  box-shadow: var(--shadow-md);
}

.product-hero h1 {
  font-size: 3rem;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}

.product-hero .tagline {
  font-size: 1.3rem;
  color: var(--text-sec);
  font-weight: 400;
  max-width: 520px;
  margin: 0 auto;
}

.product-hero .badges {
  justify-content: center;
  margin-top: 1.5rem;
}

/* === Scroll Reveal === */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-scale {
  opacity: 0;
  transform: translateY(30px) scale(0.92);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }
.delay-7 { transition-delay: 0.7s; }

/* === Feature Cards === */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.feature-card {
  padding: 2rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.feature-card .material-symbols-outlined {
  font-size: 44px;
  margin-bottom: 1rem;
  display: block;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}

.feature-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.feature-card p {
  color: var(--text-sec);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* Icon colors */
.icon-amber  { color: var(--color-amber); }
.icon-coral  { color: var(--color-coral); }
.icon-violet { color: var(--color-violet); }
.icon-rose   { color: var(--color-rose); }
.icon-teal   { color: var(--color-teal); }
.icon-green  { color: var(--color-green); }
.icon-blue   { color: var(--color-blue); }
.icon-indigo { color: var(--color-indigo); }

/* === Product Sections === */
.product-section {
  padding: 4rem 0;
}

.product-section + .product-section {
  border-top: 1px solid var(--border);
}

.product-section .section-heading {
  text-align: center;
  font-size: 2rem;
  letter-spacing: -0.02em;
  border-bottom: none;
  margin-bottom: 0.5rem;
}

.product-section .section-sub {
  text-align: center;
  color: var(--text-sec);
  font-size: 1.1rem;
  max-width: 500px;
  margin: 0 auto 2rem;
}

/* === Screenshot Showcase === */
.showcase-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

.showcase-item {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.3s;
}

.showcase-item:hover {
  box-shadow: var(--shadow-lg);
}

.showcase-item img {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.showcase-item:hover img {
  transform: scale(1.03);
}

.showcase-item figcaption {
  padding: 0.75rem 1rem;
  background: var(--surface-alt);
}

.showcase-item figcaption strong {
  display: block;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 0.15rem;
}

.showcase-item figcaption span {
  font-size: 0.85rem;
  color: var(--text-sec);
}

/* === CTA (product pages) === */
.cta-section pre {
  background: var(--cta-bg);
  color: var(--cta-text);
  border: none;
}

.cta-section .btn-primary {
  background: var(--btn-gradient);
  border: none;
  color: #fff;
  padding: 0.75rem 2rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 4px 14px var(--btn-shadow);
}

.cta-section .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--btn-shadow-hover);
  color: #fff;
}

.cta-section .btn-secondary {
  background: var(--surface-elevated);
  color: var(--text);
  padding: 0.75rem 2rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
}

.cta-section .btn-secondary:hover {
  background: var(--border);
  color: var(--text);
  transform: translateY(-2px);
}

/* === Gradient Badges === */
.badge-gradient {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(244, 63, 94, 0.1));
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: var(--color-coral);
}

.badge-gradient-teal {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(99, 102, 241, 0.1));
  border: 1px solid rgba(20, 184, 166, 0.2);
  color: var(--color-teal);
}

.badge-gradient-blue {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(20, 184, 166, 0.1));
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: var(--color-blue);
}

/* === Utilities === */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.text-sec { color: var(--text-sec); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; }

/* === Responsive === */
@media (min-width: 640px) {
  .featured-inner {
    grid-template-columns: 1fr 1fr;
  }

  .hero h1 {
    font-size: 3.2rem;
  }

  .product-hero h1 {
    font-size: 3.4rem;
  }
}

@media (min-width: 960px) {
  .hero {
    padding: 5rem 0 4rem;
  }

  .hero h1 {
    font-size: 3.6rem;
  }

  .product-hero {
    padding: 6rem 0 4rem;
  }

  .product-hero h1 {
    font-size: 3.8rem;
  }

  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .nav-links {
    gap: 1rem;
  }

  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.3rem; }

  .featured {
    padding: 1.25rem;
  }

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

.feature-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .product-hero {
    padding: 3rem 0 2rem;
  }

  .product-hero h1 {
    font-size: 2rem;
  }

  .product-hero .tagline {
    font-size: 1.05rem;
  }

  .product-hero img {
    width: 72px;
    height: 72px;
  }

  .hero-logo {
    width: 80px;
    height: 80px;
  }

  .theme-selector {
    max-width: 140px;
    font-size: 0.7rem;
    padding: 0.25rem 1.4rem 0.25rem 0.4rem;
  }
}

/* === Settings Menu === */
.settings-menu {
  position: relative;
}

.settings-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-sec);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  border-radius: var(--radius);
  transition: color 0.2s, background-color 0.2s;
}

.settings-btn:hover {
  color: var(--text);
  background-color: var(--accent-light);
}

.settings-btn .material-symbols-outlined {
  font-size: 1.3rem;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.settings-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  box-shadow: var(--shadow-md);
  min-width: 220px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.settings-panel[hidden] {
  display: none;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-sec);
  white-space: nowrap;
}

.settings-row span {
  min-width: 5rem;
}

/* === Theme & Language Selectors === */
.theme-selector,
.lang-selector {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--surface-elevated);
  color: var(--text-sec);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.3rem 1.8rem 0.3rem 0.6rem;
  font-size: 0.8rem;
  font-family: var(--font);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 8l3-3.5H3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 0.7em;
  transition: border-color 0.2s, color 0.2s;
  flex-shrink: 0;
  max-width: 180px;
}

.theme-selector:hover,
.lang-selector:hover {
  border-color: var(--accent);
  color: var(--text);
}

.theme-selector:focus,
.lang-selector:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* === Themes (Farbenlehre) === */

/* 01 – Orange / Teal (complementary) */
[data-theme="01-orange-teal"] {
  --surface: #c04e0c; --surface-alt: #a84008; --surface-elevated: #d86820;
  --border: #e87840; --text: #fff8f0; --text-sec: #ffd0a0;
  --accent: #40c8bc; --accent-hover: #28b4a8; --accent-light: rgba(64,200,188,0.18);
  --nav-bg: rgba(192,78,12,0.95);
  --gradient-bar: linear-gradient(to right, #e8730e, #f5a623, #f7d794, #14b8a6, #0d9488, #0f766e);
  --btn-gradient: linear-gradient(135deg, #40c8bc, #0d9488);
  --btn-shadow: rgba(13,148,136,0.4); --btn-shadow-hover: rgba(13,148,136,0.5);
  --cta-bg: #6c2604; --cta-text: #fff5ec;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,200,140,0.4) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.32) 0%, transparent 50%), linear-gradient(145deg, #973c00 0%, #c44e0c 50%, #0c6860 100%);
}

/* 02 – Coral / Indigo (complementary) */
[data-theme="02-coral-indigo"] {
  --surface: #c22848; --surface-alt: #a61e3c; --surface-elevated: #d84060;
  --border: #e05878; --text: #fff0f4; --text-sec: #ffb8cc;
  --accent: #7880e0; --accent-hover: #8c94f0; --accent-light: rgba(120,128,224,0.18);
  --nav-bg: rgba(194,40,72,0.95);
  --gradient-bar: linear-gradient(to right, #e84057, #f06292, #f8bbd0, #7986cb, #5c6bc0, #3f51b5);
  --btn-gradient: linear-gradient(135deg, #7880e0, #3f51b5);
  --btn-shadow: rgba(120,128,224,0.4); --btn-shadow-hover: rgba(120,128,224,0.5);
  --cta-bg: #680c28; --cta-text: #fff0f4;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,180,180,0.4) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.32) 0%, transparent 50%), linear-gradient(145deg, #880e30 0%, #c22848 50%, #2a2888 100%);
}

/* 03 – Amber / Blue (complementary) */
[data-theme="03-amber-blue"] {
  --surface: #b87408; --surface-alt: #9c6004; --surface-elevated: #cc8c1c;
  --border: #e0a840; --text: #fffcf0; --text-sec: #ffe090;
  --accent: #58a0f0; --accent-hover: #70b4ff; --accent-light: rgba(88,160,240,0.18);
  --nav-bg: rgba(184,116,8,0.95);
  --gradient-bar: linear-gradient(to right, #d4930a, #f5c842, #fde68a, #60a5fa, #3b82f6, #2563eb);
  --btn-gradient: linear-gradient(135deg, #58a0f0, #2563eb);
  --btn-shadow: rgba(88,160,240,0.4); --btn-shadow-hover: rgba(88,160,240,0.5);
  --cta-bg: #704200; --cta-text: #fffaf0;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,220,100,0.45) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.32) 0%, transparent 50%), linear-gradient(145deg, #8c5000 0%, #c07808 50%, #1a3e90 100%);
}

/* 04 – Red / Cyan (complementary) */
[data-theme="04-red-cyan"] {
  --surface: #b41818; --surface-alt: #980e0e; --surface-elevated: #cc2c2c;
  --border: #e05050; --text: #fff5f5; --text-sec: #ffb8b8;
  --accent: #20d0e8; --accent-hover: #40e0f8; --accent-light: rgba(32,208,232,0.18);
  --nav-bg: rgba(180,24,24,0.95);
  --gradient-bar: linear-gradient(to right, #dc2626, #ef4444, #fca5a5, #67e8f9, #22d3ee, #06b6d4);
  --btn-gradient: linear-gradient(135deg, #20d0e8, #06b6d4);
  --btn-shadow: rgba(32,208,232,0.4); --btn-shadow-hover: rgba(32,208,232,0.5);
  --cta-bg: #6c0606; --cta-text: #fff5f5;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,160,140,0.4) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.32) 0%, transparent 50%), linear-gradient(145deg, #8c0808 0%, #b41818 50%, #087088 100%);
}

/* 05 – Yellow / Violet (complementary) */
[data-theme="05-yellow-violet"] {
  --surface: #b88004; --surface-alt: #9c6800; --surface-elevated: #cc9818;
  --border: #e0c030; --text: #fffdf0; --text-sec: #ffe888;
  --accent: #b068f0; --accent-hover: #c480ff; --accent-light: rgba(176,104,240,0.18);
  --nav-bg: rgba(184,128,4,0.95);
  --gradient-bar: linear-gradient(to right, #ca8a04, #eab308, #fde047, #c084fc, #a855f7, #7c3aed);
  --btn-gradient: linear-gradient(135deg, #b068f0, #7c3aed);
  --btn-shadow: rgba(176,104,240,0.4); --btn-shadow-hover: rgba(176,104,240,0.5);
  --cta-bg: #6c5000; --cta-text: #fffcf0;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,230,80,0.45) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.32) 0%, transparent 50%), linear-gradient(145deg, #8c5c00 0%, #c08404 50%, #581898 100%);
}

/* 06 – Rose / Emerald (complementary) */
[data-theme="06-rose-emerald"] {
  --surface: #be1040; --surface-alt: #a20834; --surface-elevated: #d42858;
  --border: #e06080; --text: #fff5f8; --text-sec: #ffb0c8;
  --accent: #38c898; --accent-hover: #50deb0; --accent-light: rgba(56,200,152,0.18);
  --nav-bg: rgba(190,16,64,0.95);
  --gradient-bar: linear-gradient(to right, #e11d48, #f43f5e, #fda4af, #6ee7b7, #34d399, #059669);
  --btn-gradient: linear-gradient(135deg, #38c898, #059669);
  --btn-shadow: rgba(56,200,152,0.4); --btn-shadow-hover: rgba(56,200,152,0.5);
  --cta-bg: #720428; --cta-text: #fff5f8;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,160,180,0.4) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.32) 0%, transparent 50%), linear-gradient(145deg, #8c0828 0%, #be1040 50%, #0b5240 100%);
}

/* 07 – Magenta / Green (complementary) */
[data-theme="07-magenta-green"] {
  --surface: #aa1ccc; --surface-alt: #8e14ac; --surface-elevated: #c030e0;
  --border: #d060e8; --text: #fdf5ff; --text-sec: #e8a8f8;
  --accent: #44cc60; --accent-hover: #5ede78; --accent-light: rgba(68,204,96,0.18);
  --nav-bg: rgba(170,28,204,0.95);
  --gradient-bar: linear-gradient(to right, #c026d3, #d946ef, #f0abfc, #86efac, #4ade80, #16a34a);
  --btn-gradient: linear-gradient(135deg, #44cc60, #16a34a);
  --btn-shadow: rgba(68,204,96,0.4); --btn-shadow-hover: rgba(68,204,96,0.5);
  --cta-bg: #680898; --cta-text: #fdf5ff;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(240,160,255,0.4) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.32) 0%, transparent 50%), linear-gradient(145deg, #820eaa 0%, #aa1ccc 50%, #166030 100%);
}

/* 08 – Peach / Slate (complementary) */
[data-theme="08-peach-slate"] {
  --surface: #c05c26; --surface-alt: #a44a1c; --surface-elevated: #d8703a;
  --border: #e08840; --text: #fff9f4; --text-sec: #ffcca4;
  --accent: #7090bc; --accent-hover: #88a8d0; --accent-light: rgba(112,144,188,0.18);
  --nav-bg: rgba(192,92,38,0.95);
  --gradient-bar: linear-gradient(to right, #ea7e3c, #fb923c, #fdba74, #94a3b8, #64748b, #475569);
  --btn-gradient: linear-gradient(135deg, #7090bc, #475569);
  --btn-shadow: rgba(112,144,188,0.4); --btn-shadow-hover: rgba(112,144,188,0.5);
  --cta-bg: #783414; --cta-text: #fff9f4;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,200,140,0.4) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.32) 0%, transparent 50%), linear-gradient(145deg, #944016 0%, #c05c26 50%, #2a3850 100%);
}

/* 09 – Sunset Warm (analogous: red-orange-amber) */
[data-theme="09-sunset-warm"] {
  --surface: #b43600; --surface-alt: #982c00; --surface-elevated: #cc4a10;
  --border: #e07030; --text: #fff9f4; --text-sec: #ffcc90;
  --accent: #f5a020; --accent-hover: #ffc040; --accent-light: rgba(245,160,32,0.18);
  --nav-bg: rgba(180,54,0,0.95);
  --gradient-bar: linear-gradient(to right, #d32f2f, #e65100, #f57c00, #ff9800, #ffa726, #ffcc02);
  --btn-gradient: linear-gradient(135deg, #f5a020, #e65100);
  --btn-shadow: rgba(245,160,32,0.4); --btn-shadow-hover: rgba(245,160,32,0.5);
  --cta-bg: #6c1c00; --cta-text: #fff9f4;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,200,100,0.45) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.32) 0%, transparent 50%), linear-gradient(145deg, #8c1400 0%, #b83800 50%, #c46600 100%);
}

/* 10 – Ocean Cool (analogous: blue-teal-cyan) — colors: classic light/white (swapped to default) */
[data-theme="10-ocean-cool"] {
  --surface: #ffffff; --surface-alt: #f7f8fa; --surface-elevated: #eef0f4;
  --border: #e0e3e8; --text: #1a1a2e; --text-sec: #6b7280;
  --accent: #2563eb; --accent-hover: #1d4ed8; --accent-light: rgba(37,99,235,0.08);
  --nav-bg: rgba(255,255,255,0.92);
  --btn-gradient: linear-gradient(135deg, #f43f5e, #8b5cf6);
  --btn-shadow: rgba(244,63,94,0.3); --btn-shadow-hover: rgba(244,63,94,0.4);
  --cta-bg: #1a1a2e; --cta-text: #e2e8f0;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,255,255,0.5) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.06) 0%, transparent 50%), linear-gradient(145deg, #f7f8fa 0%, #eef0f4 100%);
}

/* 11 – Forest Moss (analogous: green-olive-sage) */
[data-theme="11-forest-moss"] {
  --surface: #1e6828; --surface-alt: #185420; --surface-elevated: #307c3a;
  --border: #50a840; --text: #f0fff0; --text-sec: #a0d890;
  --accent: #80d030; --accent-hover: #9ae848; --accent-light: rgba(128,208,48,0.18);
  --nav-bg: rgba(30,104,40,0.95);
  --gradient-bar: linear-gradient(to right, #2e7d32, #388e3c, #558b2f, #689f38, #827717, #9e9d24);
  --btn-gradient: linear-gradient(135deg, #80d030, #558b2f);
  --btn-shadow: rgba(128,208,48,0.4); --btn-shadow-hover: rgba(128,208,48,0.5);
  --cta-bg: #0c3c10; --cta-text: #f0fff0;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(140,240,120,0.35) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.35) 0%, transparent 50%), linear-gradient(145deg, #0e4810 0%, #1e6828 50%, #364e0e 100%);
}

/* 12 – Twilight Purple (analogous: indigo-violet-plum) */
[data-theme="12-twilight-purple"] {
  --surface: #4818c4; --surface-alt: #3c10a8; --surface-elevated: #5c28d8;
  --border: #7850e0; --text: #f8f4ff; --text-sec: #c0a0f0;
  --accent: #c860fc; --accent-hover: #dc80ff; --accent-light: rgba(200,96,252,0.18);
  --nav-bg: rgba(72,24,196,0.95);
  --gradient-bar: linear-gradient(to right, #4338ca, #5b21b6, #7c3aed, #9333ea, #a855f7, #c084fc);
  --btn-gradient: linear-gradient(135deg, #c860fc, #7c3aed);
  --btn-shadow: rgba(200,96,252,0.4); --btn-shadow-hover: rgba(200,96,252,0.5);
  --cta-bg: #1c0480; --cta-text: #f8f4ff;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(180,140,255,0.4) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.32) 0%, transparent 50%), linear-gradient(145deg, #2c0890 0%, #4818c4 50%, #6e1acc 100%);
}

/* 13 – Blossom Pink (analogous: rose-pink-peach) */
[data-theme="13-blossom-pink"] {
  --surface: #ba1860; --surface-alt: #9e1050; --surface-elevated: #d03070;
  --border: #e050a0; --text: #fff5f8; --text-sec: #ffb0d8;
  --accent: #f870a0; --accent-hover: #ff90bc; --accent-light: rgba(248,112,160,0.18);
  --nav-bg: rgba(186,24,96,0.95);
  --gradient-bar: linear-gradient(to right, #be185d, #db2777, #ec4899, #f472b6, #f9a8d4, #fda4af);
  --btn-gradient: linear-gradient(135deg, #f870a0, #db2777);
  --btn-shadow: rgba(248,112,160,0.4); --btn-shadow-hover: rgba(248,112,160,0.5);
  --cta-bg: #700430; --cta-text: #fff5f8;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,160,200,0.4) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.32) 0%, transparent 50%), linear-gradient(145deg, #8e0840 0%, #ba1860 50%, #d82270 100%);
}

/* 14 – Earth Sienna (analogous: brown-terracotta-sand) */
[data-theme="14-earth-sienna"] {
  --surface: #8c3818; --surface-alt: #742c10; --surface-elevated: #a44c28;
  --border: #c06030; --text: #fff9f4; --text-sec: #ffc898;
  --accent: #e07830; --accent-hover: #f09040; --accent-light: rgba(224,120,48,0.18);
  --nav-bg: rgba(140,56,24,0.95);
  --gradient-bar: linear-gradient(to right, #8b4513, #a0522d, #b8733d, #c08040, #d2a060, #deb887);
  --btn-gradient: linear-gradient(135deg, #e07830, #a0522d);
  --btn-shadow: rgba(224,120,48,0.4); --btn-shadow-hover: rgba(224,120,48,0.5);
  --cta-bg: #4a1c08; --cta-text: #fff9f4;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,180,100,0.4) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.35) 0%, transparent 50%), linear-gradient(145deg, #5c2008 0%, #8c3818 50%, #704018 100%);
}

/* 15 – Primary Triad (red, blue, yellow) */
[data-theme="15-primary-triad"] {
  --surface: #aa0000; --surface-alt: #8e0000; --surface-elevated: #c21010;
  --border: #e04040; --text: #fff5f5; --text-sec: #ffb0b0;
  --accent: #ffd000; --accent-hover: #ffe840; --accent-light: rgba(255,208,0,0.18);
  --nav-bg: rgba(170,0,0,0.95);
  --gradient-bar: linear-gradient(to right, #d32f2f, #f44336, #fdd835, #ffd600, #1976d2, #1565c0);
  --btn-gradient: linear-gradient(135deg, #ffd000, #1976d2);
  --btn-shadow: rgba(255,208,0,0.4); --btn-shadow-hover: rgba(255,208,0,0.5);
  --cta-bg: #640000; --cta-text: #fff5f5;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,140,120,0.4) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.35) 0%, transparent 50%), linear-gradient(145deg, #8a0000 0%, #580050 50%, #001c8a 100%);
}

/* 16 – Secondary Triad (orange, green, violet) */
[data-theme="16-secondary-triad"] {
  --surface: #b43800; --surface-alt: #983000; --surface-elevated: #cc4c14;
  --border: #e07030; --text: #fff8f4; --text-sec: #ffcc88;
  --accent: #44cc44; --accent-hover: #60e060; --accent-light: rgba(68,204,68,0.18);
  --nav-bg: rgba(180,56,0,0.95);
  --gradient-bar: linear-gradient(to right, #e65100, #ff9800, #4caf50, #388e3c, #7b1fa2, #6a1b9a);
  --btn-gradient: linear-gradient(135deg, #44cc44, #7b1fa2);
  --btn-shadow: rgba(68,204,68,0.4); --btn-shadow-hover: rgba(68,204,68,0.5);
  --cta-bg: #6c2000; --cta-text: #fff8f4;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,180,80,0.4) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.35) 0%, transparent 50%), linear-gradient(145deg, #8c2400 0%, #1a5c18 50%, #460e8c 100%);
}

/* 17 – Vivid Triad (deep cerise, midnight blue, forest) */
[data-theme="17-pastel-triad"] {
  --surface: #961654; --surface-alt: #7c0e44; --surface-elevated: #ae2868;
  --border: #d04888; --text: #fff0f5; --text-sec: #ffb0d0;
  --accent: #80c0ff; --accent-hover: #a0d4ff; --accent-light: rgba(128,192,255,0.18);
  --nav-bg: rgba(150,22,84,0.95);
  --gradient-bar: linear-gradient(to right, #f48fb1, #f8bbd0, #90caf9, #bbdefb, #a5d6a7, #c8e6c9);
  --btn-gradient: linear-gradient(135deg, #80c0ff, #90caf9);
  --btn-shadow: rgba(128,192,255,0.4); --btn-shadow-hover: rgba(128,192,255,0.5);
  --cta-bg: #5c0430; --cta-text: #fff0f5;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,160,200,0.4) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.32) 0%, transparent 50%), linear-gradient(145deg, #7c0840 0%, #00308c 50%, #185c18 100%);
}

/* 18 – Teal / Coral / Amber (split-complementary) */
[data-theme="18-teal-coral-amber"] {
  --surface: #0d7870; --surface-alt: #0a6460; --surface-elevated: #208888;
  --border: #30b0a8; --text: #f0fff8; --text-sec: #90e0d8;
  --accent: #f86040; --accent-hover: #ff8060; --accent-light: rgba(248,96,64,0.18);
  --nav-bg: rgba(13,120,112,0.95);
  --gradient-bar: linear-gradient(to right, #0d9488, #14b8a6, #f59e0b, #fbbf24, #f43f5e, #e11d48);
  --btn-gradient: linear-gradient(135deg, #f86040, #e11d48);
  --btn-shadow: rgba(248,96,64,0.4); --btn-shadow-hover: rgba(248,96,64,0.5);
  --cta-bg: #044840; --cta-text: #f0fff8;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(120,255,240,0.35) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.32) 0%, transparent 50%), linear-gradient(145deg, #084c48 0%, #0d7870 50%, #8a5000 100%);
}

/* 19 – Violet / Lime / Tangerine (split-complementary) */
[data-theme="19-violet-lime-tangerine"] {
  --surface: #4e1888; --surface-alt: #3e1070; --surface-elevated: #6028a0;
  --border: #7850c8; --text: #f8f0ff; --text-sec: #c0a0e8;
  --accent: #b0e030; --accent-hover: #c8f050; --accent-light: rgba(176,224,48,0.18);
  --nav-bg: rgba(78,24,136,0.95);
  --gradient-bar: linear-gradient(to right, #7c3aed, #a78bfa, #a3e635, #84cc16, #fb923c, #f97316);
  --btn-gradient: linear-gradient(135deg, #b0e030, #84cc16);
  --btn-shadow: rgba(176,224,48,0.4); --btn-shadow-hover: rgba(176,224,48,0.5);
  --cta-bg: #280460; --cta-text: #f8f0ff;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(180,140,255,0.4) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.32) 0%, transparent 50%), linear-gradient(145deg, #380c78 0%, #4e1888 50%, #1e5808 100%);
}

/* 20 – Midnight / Orange (dark) */
[data-theme="20-midnight-orange"] {
  --surface: #0f172a; --surface-alt: #1e293b; --surface-elevated: #334155;
  --border: #475569; --text: #f1f5f9; --text-sec: #94a3b8;
  --accent: #f97316; --accent-hover: #fb923c; --accent-light: rgba(249,115,22,0.08);
  --nav-bg: rgba(15,23,42,0.95);
  --gradient-bar: linear-gradient(to right, #f97316, #fb923c, #fdba74, #334155, #1e293b, #0f172a);
  --btn-gradient: linear-gradient(135deg, #f97316, #ea580c);
  --btn-shadow: rgba(249,115,22,0.3); --btn-shadow-hover: rgba(249,115,22,0.4);
  --cta-bg: #020617; --cta-text: #cbd5e1;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,180,100,0.15) 0%, transparent 50%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.3) 0%, transparent 50%), linear-gradient(165deg, #0f172a 0%, #131c30 40%, #1a2030 100%);
}

/* 21 – Charcoal / Cyan (dark) */
[data-theme="21-charcoal-cyan"] {
  --surface: #1e1e2e; --surface-alt: #2a2a3e; --surface-elevated: #383850;
  --border: #4a4a64; --text: #e8ecf4; --text-sec: #9ca3b8;
  --accent: #22d3ee; --accent-hover: #67e8f9; --accent-light: rgba(34,211,238,0.08);
  --nav-bg: rgba(30,30,46,0.95);
  --gradient-bar: linear-gradient(to right, #22d3ee, #67e8f9, #a5f3fc, #383850, #2a2a3e, #1e1e2e);
  --btn-gradient: linear-gradient(135deg, #22d3ee, #06b6d4);
  --btn-shadow: rgba(34,211,238,0.3); --btn-shadow-hover: rgba(34,211,238,0.4);
  --cta-bg: #0e0e1a; --cta-text: #c0c8d8;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(100,220,240,0.12) 0%, transparent 50%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.3) 0%, transparent 50%), linear-gradient(165deg, #1e1e2e 0%, #222234 40%, #1e2830 100%);
}

/* 22 – Obsidian / Emerald (dark) */
[data-theme="22-obsidian-emerald"] {
  --surface: #0a0a0f; --surface-alt: #141420; --surface-elevated: #202030;
  --border: #303040; --text: #e8f0e8; --text-sec: #8ca08c;
  --accent: #34d399; --accent-hover: #6ee7b7; --accent-light: rgba(52,211,153,0.08);
  --nav-bg: rgba(10,10,15,0.95);
  --gradient-bar: linear-gradient(to right, #34d399, #6ee7b7, #a7f3d0, #202030, #141420, #0a0a0f);
  --btn-gradient: linear-gradient(135deg, #34d399, #059669);
  --btn-shadow: rgba(52,211,153,0.3); --btn-shadow-hover: rgba(52,211,153,0.4);
  --cta-bg: #040408; --cta-text: #b0c8b8;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(100,230,180,0.12) 0%, transparent 50%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.3) 0%, transparent 50%), linear-gradient(165deg, #0a0a0f 0%, #0c0e14 40%, #0a100e 100%);
}

/* 23 – Slate / Gold (dark) */
[data-theme="23-slate-gold"] {
  --surface: #1e293b; --surface-alt: #283548; --surface-elevated: #334155;
  --border: #475569; --text: #f1f5f9; --text-sec: #94a3b8;
  --accent: #fbbf24; --accent-hover: #fcd34d; --accent-light: rgba(251,191,36,0.08);
  --nav-bg: rgba(30,41,59,0.95);
  --gradient-bar: linear-gradient(to right, #fbbf24, #fcd34d, #fde68a, #475569, #334155, #1e293b);
  --btn-gradient: linear-gradient(135deg, #fbbf24, #d97706);
  --btn-shadow: rgba(251,191,36,0.3); --btn-shadow-hover: rgba(251,191,36,0.4);
  --cta-bg: #0f1724; --cta-text: #c8d4e0;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,210,80,0.15) 0%, transparent 50%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.3) 0%, transparent 50%), linear-gradient(165deg, #1e293b 0%, #222e40 40%, #262e38 100%);
}

/* 24 – Deep Purple / Lime (dark) */
[data-theme="24-deep-purple-lime"] {
  --surface: #1a0a2e; --surface-alt: #24143a; --surface-elevated: #30204a;
  --border: #44305e; --text: #f0e8f8; --text-sec: #a890c0;
  --accent: #a3e635; --accent-hover: #bef264; --accent-light: rgba(163,230,53,0.08);
  --nav-bg: rgba(26,10,46,0.95);
  --gradient-bar: linear-gradient(to right, #a3e635, #bef264, #d9f99d, #30204a, #24143a, #1a0a2e);
  --btn-gradient: linear-gradient(135deg, #a3e635, #65a30d);
  --btn-shadow: rgba(163,230,53,0.3); --btn-shadow-hover: rgba(163,230,53,0.4);
  --cta-bg: #0e041a; --cta-text: #c8c0d8;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(180,240,80,0.12) 0%, transparent 50%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.3) 0%, transparent 50%), linear-gradient(165deg, #1a0a2e 0%, #1e1034 40%, #181828 100%);
}

/* 25 – Navy / Coral (dark) */
[data-theme="25-navy-coral"] {
  --surface: #0c1427; --surface-alt: #162038; --surface-elevated: #222e48;
  --border: #344058; --text: #f0f0f8; --text-sec: #8898b0;
  --accent: #fb7185; --accent-hover: #fda4af; --accent-light: rgba(251,113,133,0.08);
  --nav-bg: rgba(12,20,39,0.95);
  --gradient-bar: linear-gradient(to right, #fb7185, #fda4af, #fecdd3, #222e48, #162038, #0c1427);
  --btn-gradient: linear-gradient(135deg, #fb7185, #e11d48);
  --btn-shadow: rgba(251,113,133,0.3); --btn-shadow-hover: rgba(251,113,133,0.4);
  --cta-bg: #040a18; --cta-text: #b8c0d0;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,140,150,0.12) 0%, transparent 50%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.3) 0%, transparent 50%), linear-gradient(165deg, #0c1427 0%, #10182c 40%, #141828 100%);
}

/* 26 – Carbon / Blue (dark) */
[data-theme="26-carbon-blue"] {
  --surface: #171717; --surface-alt: #222222; --surface-elevated: #2e2e2e;
  --border: #404040; --text: #e8e8e8; --text-sec: #a0a0a0;
  --accent: #3b82f6; --accent-hover: #60a5fa; --accent-light: rgba(59,130,246,0.08);
  --nav-bg: rgba(23,23,23,0.95);
  --gradient-bar: linear-gradient(to right, #3b82f6, #60a5fa, #93bbfd, #2e2e2e, #222222, #171717);
  --btn-gradient: linear-gradient(135deg, #3b82f6, #2563eb);
  --btn-shadow: rgba(59,130,246,0.3); --btn-shadow-hover: rgba(59,130,246,0.4);
  --cta-bg: #0a0a0a; --cta-text: #b0b8c8;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(80,150,255,0.12) 0%, transparent 50%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.3) 0%, transparent 50%), linear-gradient(165deg, #171717 0%, #1a1a1e 40%, #181820 100%);
}

/* 27 – Warm Gray (deep mahogany, amber accent) */
[data-theme="27-warm-gray"] {
  --surface: #483a2a; --surface-alt: #3c2e20; --surface-elevated: #5c4e3a;
  --border: #786050; --text: #fdf8f0; --text-sec: #e0c8a0;
  --accent: #c87020; --accent-hover: #dc8830; --accent-light: rgba(200,112,32,0.18);
  --nav-bg: rgba(72,58,42,0.95);
  --gradient-bar: linear-gradient(to right, #b45309, #d97706, #f59e0b, #d4cec4, #a89e90, #78726a);
  --btn-gradient: linear-gradient(135deg, #c87020, #b45309);
  --btn-shadow: rgba(200,112,32,0.4); --btn-shadow-hover: rgba(200,112,32,0.5);
  --cta-bg: #241a0e; --cta-text: #fdf8f0;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,200,120,0.3) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.35) 0%, transparent 50%), linear-gradient(145deg, #382818 0%, #483a2a 50%, #302218 100%);
}

/* 28 – Cool Gray (deep steel blue, blue accent) */
[data-theme="28-cool-gray"] {
  --surface: #283850; --surface-alt: #1e2c42; --surface-elevated: #384a62;
  --border: #485870; --text: #f0f4f8; --text-sec: #a0b0c8;
  --accent: #6090c8; --accent-hover: #78a8e0; --accent-light: rgba(96,144,200,0.18);
  --nav-bg: rgba(40,56,80,0.95);
  --gradient-bar: linear-gradient(to right, #4a6fa5, #6088b8, #7ca0cc, #c8ced4, #a0a8b0, #606870);
  --btn-gradient: linear-gradient(135deg, #6090c8, #4a6fa5);
  --btn-shadow: rgba(96,144,200,0.4); --btn-shadow-hover: rgba(96,144,200,0.5);
  --cta-bg: #121c2c; --cta-text: #f0f4f8;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(120,180,255,0.25) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.32) 0%, transparent 50%), linear-gradient(145deg, #1a2438 0%, #283850 50%, #1e3048 100%);
}

/* 29 – Sepia Classic (rich dark sepia) */
[data-theme="29-sepia-classic"] {
  --surface: #5a3c1c; --surface-alt: #4a3014; --surface-elevated: #6e5030;
  --border: #8a6030; --text: #fdf5e0; --text-sec: #e0c080;
  --accent: #d09030; --accent-hover: #e8a840; --accent-light: rgba(208,144,48,0.18);
  --nav-bg: rgba(90,60,28,0.95);
  --gradient-bar: linear-gradient(to right, #8b6914, #a07c20, #b89030, #c8a848, #d4c4a8, #ecdcc4);
  --btn-gradient: linear-gradient(135deg, #d09030, #8b6914);
  --btn-shadow: rgba(208,144,48,0.4); --btn-shadow-hover: rgba(208,144,48,0.5);
  --cta-bg: #2c1c08; --cta-text: #fdf5e0;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,210,120,0.35) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.35) 0%, transparent 50%), linear-gradient(145deg, #3c2808 0%, #5a3c1c 50%, #4a3418 100%);
}

/* 30 – Ink / Paper (deep ink) */
[data-theme="30-ink-paper"] {
  --surface: #181818; --surface-alt: #101010; --surface-elevated: #242424;
  --border: #383830; --text: #f0f0e8; --text-sec: #a0a098;
  --accent: #c8c8b8; --accent-hover: #e0e0d0; --accent-light: rgba(200,200,184,0.12);
  --nav-bg: rgba(24,24,24,0.97);
  --gradient-bar: linear-gradient(to right, #101010, #303030, #505048, #808070, #b0b0a0, #d0d0c0);
  --btn-gradient: linear-gradient(135deg, #404040, #1a1a1a);
  --btn-shadow: rgba(64,64,64,0.4); --btn-shadow-hover: rgba(64,64,64,0.5);
  --cta-bg: #080808; --cta-text: #e0e0d8;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,255,240,0.1) 0%, transparent 50%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.4) 0%, transparent 50%), linear-gradient(145deg, #0e0e0e 0%, #181818 50%, #100e08 100%);
}

/* 31 – Bauhaus Bold (primary Bauhaus red with yellow/blue accents) */
[data-theme="31-bauhaus-bold"] {
  --surface: #8a0000; --surface-alt: #720000; --surface-elevated: #a01010;
  --border: #d04040; --text: #fff5f5; --text-sec: #ffc0c0;
  --accent: #ffd800; --accent-hover: #ffec50; --accent-light: rgba(255,216,0,0.18);
  --nav-bg: rgba(138,0,0,0.95);
  --gradient-bar: linear-gradient(to right, #cc0000, #e60000, #ffcc00, #ffd500, #0044cc, #0033aa);
  --btn-gradient: linear-gradient(135deg, #ffd800, #0044cc);
  --btn-shadow: rgba(255,216,0,0.4); --btn-shadow-hover: rgba(255,216,0,0.5);
  --cta-bg: #400000; --cta-text: #fff5f5;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,140,120,0.4) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.38) 0%, transparent 50%), linear-gradient(145deg, #6a0000 0%, #8a0000 50%, #001880 100%);
}

/* 32 – Nordic Frost (deep Nordic blue, steel accent) */
[data-theme="32-nordic-frost"] {
  --surface: #1a3050; --surface-alt: #142440; --surface-elevated: #2a4060;
  --border: #384e68; --text: #f0f5fa; --text-sec: #90b0cc;
  --accent: #6ab4e8; --accent-hover: #88ccff; --accent-light: rgba(106,180,232,0.18);
  --nav-bg: rgba(26,48,80,0.95);
  --gradient-bar: linear-gradient(to right, #4682b4, #6a9ec4, #8eb8d4, #b0d0e0, #c8dce8, #dce8f0);
  --btn-gradient: linear-gradient(135deg, #6ab4e8, #4682b4);
  --btn-shadow: rgba(106,180,232,0.4); --btn-shadow-hover: rgba(106,180,232,0.5);
  --cta-bg: #0a1828; --cta-text: #f0f5fa;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(140,200,255,0.25) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.32) 0%, transparent 50%), linear-gradient(145deg, #0e1c38 0%, #1a3050 50%, #1e2c40 100%);
}

/* 34 – Bright Day (classic light: white surface, cobalt blue accent) */
[data-theme="33-bright-day"] {
  --surface: #ffffff; --surface-alt: #f7f8fa; --surface-elevated: #eef0f4;
  --border: #e0e3e8; --text: #1a1a2e; --text-sec: #6b7280;
  --accent: #2563eb; --accent-hover: #1d4ed8; --accent-light: rgba(37,99,235,0.08);
  --nav-bg: rgba(255,255,255,0.92);
  --btn-gradient: linear-gradient(135deg, #f43f5e, #8b5cf6);
  --btn-shadow: rgba(244,63,94,0.3); --btn-shadow-hover: rgba(244,63,94,0.4);
  --cta-bg: #1a1a2e; --cta-text: #e2e8f0;
  --surface-gradient: radial-gradient(ellipse 100% 45% at 22% 8%, rgba(255,255,255,0.5) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 80% 90%, rgba(0,0,0,0.06) 0%, transparent 50%), linear-gradient(145deg, #f7f8fa 0%, #eef0f4 100%);
}

/* Rainbow separator shared across all themes */
[data-theme] {
  --gradient-bar: linear-gradient(to right, #e63946, #f77f00, #fcbf49, #2a9d8f, #264653, #6a4c93);
}


/* Museum */
.museum-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.museum-list li {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.museum-era-screenshot {
  display: block;
  width: 100%;
  max-width: 560px;
  border-radius: 6px;
  border: 1px solid var(--border, #e0e0e0);
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  margin-bottom: 0.25rem;
}

.museum-era-note {
  font-size: 0.85rem;
  color: var(--text-muted, #888);
}