/* Screen-only color theme. Printed worksheets stay neutral. */
@media screen {
  :root {
    --rainbow-coral: #ef786f;
    --rainbow-orange: #f4a340;
    --rainbow-yellow: #f5cf55;
    --rainbow-green: #47a887;
    --rainbow-blue: #4d91cf;
    --rainbow-purple: #8c72c7;
    --rainbow-pink: #d96f9d;
    --rainbow-ink: #344154;
  }

  body {
    color: var(--rainbow-ink);
    background:
      radial-gradient(circle at 7% 5%, rgba(245, 207, 85, .16), transparent 22rem),
      radial-gradient(circle at 93% 18%, rgba(140, 114, 199, .12), transparent 25rem),
      linear-gradient(180deg, #fffdf9 0%, #f7fbff 55%, #fffafc 100%);
  }

  .app-header {
    border-bottom: 0;
    box-shadow: 0 5px 24px rgba(68, 74, 102, .10);
  }

  .app-header::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 4px;
    background: linear-gradient(90deg,
      var(--rainbow-coral), var(--rainbow-orange), var(--rainbow-yellow),
      var(--rainbow-green), var(--rainbow-blue), var(--rainbow-purple), var(--rainbow-pink));
  }

  .brand-mark {
    background: linear-gradient(145deg, #51bca0, #4d91cf 55%, #8c72c7);
    box-shadow: 0 8px 20px rgba(77, 145, 207, .28);
  }

  .version-badge,
  .db-badge {
    border-color: #cde6f5;
    color: #3979b0;
    background: #edf8ff;
  }

  .home-hero {
    border-color: #eadff5;
    background:
      radial-gradient(circle at 88% 12%, rgba(239, 120, 111, .20), transparent 17rem),
      radial-gradient(circle at 62% 100%, rgba(77, 145, 207, .17), transparent 20rem),
      linear-gradient(135deg, #fff8de 0%, #fff 44%, #f5efff 100%);
    box-shadow: 0 18px 46px rgba(105, 91, 131, .12);
  }

  .home-hero::before {
    background: linear-gradient(145deg, rgba(244, 163, 64, .24), rgba(217, 111, 157, .18));
  }

  .eyebrow { color: #b65b7f; }
  .hero-copy h2 { color: #354055; }
  .hero-copy h2 em { color: #6f59b0; }
  .hero-copy h2 em::after { background: rgba(245, 207, 85, .60); }

  .hero-button,
  .button.primary,
  .mobile-preview-jump:not(.hidden) {
    background: linear-gradient(115deg, #ef786f, #d96f9d 52%, #8c72c7);
    border-color: transparent;
    box-shadow: 0 9px 24px rgba(217, 111, 157, .30);
  }

  .hero-button:hover,
  .button.primary:hover {
    background: linear-gradient(115deg, #e86860, #c95d8d 52%, #7960b5);
  }

  .home-stats > div:nth-child(1) b { color: #d86862; }
  .home-stats > div:nth-child(2) b { color: #3d91a6; }
  .home-stats > div:nth-child(3) b { color: #7a61b7; }
  .home-stats > div { border-right-color: rgba(128, 111, 148, .20); }

  .section-title span { color: #9270bd; }
  .section-title h2 { color: #354055; }

  .group-card {
    border-width: 2px;
    box-shadow: 0 8px 22px rgba(54, 72, 100, .08);
  }

  .group-card.basic { border-color: #a9decf; background: linear-gradient(135deg, #fafffd 22%, #e2f8f1); }
  .group-card.sound { border-color: #bccbf0; background: linear-gradient(135deg, #fbfcff 22%, #e7edff); }
  .group-card.meaning { border-color: #efd28e; background: linear-gradient(135deg, #fffefa 22%, #fff1ca); }
  .group-card.applied { border-color: #d7bce9; background: linear-gradient(135deg, #fffcff 22%, #f2e4fb); }
  .group-card.basic .group-symbol { background: #d9f5ed; color: #25866f; }
  .group-card.sound .group-symbol { background: #e3eaff; color: #526ec0; }
  .group-card.meaning .group-symbol { background: #ffedbd; color: #a96d12; }
  .group-card.applied .group-symbol { background: #f0ddfb; color: #8456a8; }
  .group-card.basic .group-arrow { background: #d9f5ed; color: #25866f; }
  .group-card.sound .group-arrow { background: #e3eaff; color: #526ec0; }
  .group-card.meaning .group-arrow { background: #ffedbd; color: #a96d12; }
  .group-card.applied .group-arrow { background: #f0ddfb; color: #8456a8; }

  .standalone-tools {
    border-color: #e8d8ec;
    background: linear-gradient(135deg, #fff8ed, #f6f4ff 54%, #eefaff);
  }

  .home-task-card {
    border-color: #e3e3ee;
    box-shadow: 0 7px 20px rgba(64, 72, 105, .08);
  }

  .home-task-grid .home-task-card:nth-child(7n + 1) { border-top: 4px solid var(--rainbow-coral); }
  .home-task-grid .home-task-card:nth-child(7n + 2) { border-top: 4px solid var(--rainbow-orange); }
  .home-task-grid .home-task-card:nth-child(7n + 3) { border-top: 4px solid var(--rainbow-yellow); }
  .home-task-grid .home-task-card:nth-child(7n + 4) { border-top: 4px solid var(--rainbow-green); }
  .home-task-grid .home-task-card:nth-child(7n + 5) { border-top: 4px solid var(--rainbow-blue); }
  .home-task-grid .home-task-card:nth-child(7n + 6) { border-top: 4px solid var(--rainbow-purple); }
  .home-task-grid .home-task-card:nth-child(7n) { border-top: 4px solid var(--rainbow-pink); }

  .category-intro {
    border-color: #ded8f2;
    background:
      radial-gradient(circle at 92% 10%, rgba(245, 207, 85, .22), transparent 13rem),
      linear-gradient(125deg, #effbf7, #f7f2ff 58%, #fff8e9);
  }

  .category-intro > span {
    background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 58%, #8c72c7));
  }

  .task-cluster:nth-child(4n + 1) { --cluster-color: var(--rainbow-green); --cluster-soft: #e9f8f3; }
  .task-cluster:nth-child(4n + 2) { --cluster-color: var(--rainbow-blue); --cluster-soft: #edf5fd; }
  .task-cluster:nth-child(4n + 3) { --cluster-color: var(--rainbow-orange); --cluster-soft: #fff5e8; }
  .task-cluster:nth-child(4n) { --cluster-color: var(--rainbow-purple); --cluster-soft: #f4effb; }
  .task-cluster > header > span { background: var(--cluster-color, var(--accent)); }
  .task-cluster header > b { color: var(--cluster-color, var(--accent)); background: var(--cluster-soft, var(--accent-soft)); }
  .task-cluster .subcategory-card::before { background: var(--cluster-color, var(--accent)); opacity: .65; }
  .task-cluster .sub-icon { color: var(--cluster-color, var(--accent)); background: var(--cluster-soft, var(--accent-soft)); }
  .task-cluster .subcategory-card i { color: var(--cluster-color, var(--accent)); background: var(--cluster-soft, var(--accent-mist)); }

  .cluster-grid .subcategory-card:nth-child(7n + 1) { --card-color: var(--rainbow-coral); --card-soft: #fff0ee; }
  .cluster-grid .subcategory-card:nth-child(7n + 2) { --card-color: var(--rainbow-orange); --card-soft: #fff4e5; }
  .cluster-grid .subcategory-card:nth-child(7n + 3) { --card-color: #c39a20; --card-soft: #fff8d9; }
  .cluster-grid .subcategory-card:nth-child(7n + 4) { --card-color: var(--rainbow-green); --card-soft: #eaf8f3; }
  .cluster-grid .subcategory-card:nth-child(7n + 5) { --card-color: var(--rainbow-blue); --card-soft: #edf5fd; }
  .cluster-grid .subcategory-card:nth-child(7n + 6) { --card-color: var(--rainbow-purple); --card-soft: #f3effb; }
  .cluster-grid .subcategory-card:nth-child(7n) { --card-color: var(--rainbow-pink); --card-soft: #fff0f6; }
  .cluster-grid .subcategory-card::before { background: var(--card-color, var(--cluster-color, var(--accent))); opacity: .9; }
  .cluster-grid .subcategory-card .sub-icon,
  .cluster-grid .subcategory-card i,
  .cluster-grid .subcategory-card em { color: var(--card-color, var(--accent)); background: var(--card-soft, var(--accent-soft)); }

  .controls {
    background:
      radial-gradient(circle at 0 0, rgba(245, 207, 85, .15), transparent 18rem),
      linear-gradient(180deg, #fff9f2, #f7fbff 38%, #faf7ff);
  }

  .setup-section {
    border-color: #e1e2ed;
    box-shadow: 0 7px 22px rgba(70, 78, 109, .07);
  }

  .setup-section:nth-of-type(1) { border-top: 4px solid var(--rainbow-coral); }
  .setup-section:nth-of-type(2) { border-top: 4px solid var(--rainbow-blue); }
  .setup-section:nth-of-type(3) { border-top: 4px solid var(--rainbow-purple); }
  .setup-section:nth-of-type(1) .step-heading > span { background: var(--rainbow-coral); }
  .setup-section:nth-of-type(2) .step-heading > span { background: var(--rainbow-blue); }
  .setup-section:nth-of-type(3) .step-heading > span { background: var(--rainbow-purple); }

  .vocabulary-section {
    border-top: 4px solid var(--rainbow-blue);
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  }

  .common-settings-panel {
    border-color: #e7d8ee;
    background: linear-gradient(90deg, #fff8e8, #f5f2ff 55%, #edf8ff);
  }

  .word-choice:nth-child(7n + 1) { background: #fff7f5; border-color: #f2d6d2; }
  .word-choice:nth-child(7n + 2) { background: #fff9ef; border-color: #f0dfc8; }
  .word-choice:nth-child(7n + 3) { background: #fffced; border-color: #ece3bc; }
  .word-choice:nth-child(7n + 4) { background: #f2fbf7; border-color: #d0e9df; }
  .word-choice:nth-child(7n + 5) { background: #f1f8fd; border-color: #d4e5f1; }
  .word-choice:nth-child(7n + 6) { background: #f7f3fc; border-color: #e1d7ed; }
  .word-choice:nth-child(7n) { background: #fff4f8; border-color: #eed7e2; }
  .word-choice:has(input:checked) {
    background: linear-gradient(145deg, #eaf8f3, #eef3ff);
    border-color: var(--rainbow-blue);
    box-shadow: 0 0 0 2px rgba(77, 145, 207, .12);
  }

  .builder-flow .done i { background: var(--rainbow-green); border-color: var(--rainbow-green); }
  .builder-flow .active i { border-color: var(--rainbow-blue); color: var(--rainbow-blue); box-shadow: 0 0 0 3px #e3f2fc; }
  .builder-flow .done, .builder-flow .active { color: #4a76a0; }
  .builder-flow > em { background: linear-gradient(90deg, #bce4d8, #d9d6f0); }

  .workspace {
    background:
      radial-gradient(circle at 15% 5%, rgba(77, 145, 207, .13), transparent 23rem),
      radial-gradient(circle at 90% 25%, rgba(217, 111, 157, .10), transparent 25rem),
      #eef1f6;
  }

  .preview-toolbar {
    border-color: #d7d9e8;
    background: rgba(255, 255, 255, .90);
  }

  .preview-label > span {
    background: var(--rainbow-purple);
    box-shadow: 0 0 0 4px #eee7f8;
  }

  .site-footer {
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--rainbow-coral), var(--rainbow-yellow), var(--rainbow-green), var(--rainbow-blue), var(--rainbow-purple)) 1;
    background: #fff;
  }

  .site-footer a { color: #775dac; }

  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible {
    outline: 3px solid rgba(77, 145, 207, .38);
    outline-offset: 3px;
  }
}

@media screen and (prefers-reduced-motion: no-preference) {
  .group-card,
  .home-task-card,
  .subcategory-card,
  .hero-button,
  .button { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
}

@media print {
  .app-header::after { display: none; }
}