/* v237 unified child-friendly color system
   Palette: clear sky blue + fresh teal + warm star gold.
   Purpose: make V4 pages feel like one growth system, not separate colored prototypes. */
:root{
  --zhw-ink:#14304a;
  --zhw-muted:#60778d;
  --zhw-primary:#2563eb;
  --zhw-primary-2:#0ea5e9;
  --zhw-teal:#14b8a6;
  --zhw-green:#22c55e;
  --zhw-gold:#facc15;
  --zhw-amber:#f59e0b;
  --zhw-coral:#fb923c;
  --zhw-bg:#eef7ff;
  --zhw-bg-2:#f8fbff;
  --zhw-warm:#fff7e8;
  --zhw-card:#ffffff;
  --zhw-soft:#eff6ff;
  --zhw-soft-2:#ecfeff;
  --zhw-line:rgba(20,48,74,.13);
  --zhw-line-strong:rgba(37,99,235,.22);
  --zhw-shadow:0 18px 46px rgba(24,64,112,.13);
  --zhw-shadow-soft:0 10px 26px rgba(24,64,112,.10);
  --v4-ink:var(--zhw-ink);
  --v4-muted:var(--zhw-muted);
  --v4-blue:var(--zhw-primary);
  --v4-cyan:var(--zhw-primary-2);
  --v4-green:var(--zhw-green);
  --v4-orange:var(--zhw-amber);
  --v4-bg:var(--zhw-bg);
  --v4-card:var(--zhw-card);
  --v4-line:var(--zhw-line);
  --v4-shadow:var(--zhw-shadow);
  --science-bg:var(--zhw-bg);
  --science-card:var(--zhw-card);
  --science-card-2:var(--zhw-bg-2);
  --science-ink:var(--zhw-ink);
  --science-muted:var(--zhw-muted);
  --science-line:var(--zhw-line);
  --science-strong:var(--zhw-primary);
  --science-strong-2:#1d4ed8;
  --science-soft:var(--zhw-soft);
  --science-warn:#fff7ed;
  --science-bad:#fff1e8;
  --explore-bg:var(--zhw-bg);
  --explore-card:var(--zhw-card);
  --explore-card-2:var(--zhw-bg-2);
  --explore-ink:var(--zhw-ink);
  --explore-muted:var(--zhw-muted);
  --explore-line:var(--zhw-line);
  --explore-strong:var(--zhw-primary);
  --explore-strong-2:#1d4ed8;
  --explore-soft:var(--zhw-soft);
  --explore-warn:#fff7ed;
  --explore-bad:#fff1e8;
  --life-ink:var(--zhw-ink);
  --life-blue:var(--zhw-primary);
  --life-green:var(--zhw-green);
  --life-amber:var(--zhw-amber);
  --life-orange:var(--zhw-amber);
  --life-line:var(--zhw-line);
  --life-card:var(--zhw-card);
  --manners-ink:var(--zhw-ink);
  --manners-blue:var(--zhw-primary);
  --manners-green:var(--zhw-green);
  --manners-orange:var(--zhw-amber);
  --manners-line:var(--zhw-line);
  --manners-card:var(--zhw-card);
  --know-ink:var(--zhw-ink);
  --know-blue:var(--zhw-primary);
  --know-green:var(--zhw-green);
  --know-amber:var(--zhw-amber);
  --know-line:var(--zhw-line);
  --creation-ink:var(--zhw-ink);
  --creation-line:var(--zhw-line);
  --creation-mint:var(--zhw-teal);
  --creation-yellow:var(--zhw-gold);
  --creation-blue:var(--zhw-soft);
  --creation-shadow:var(--zhw-shadow);
}

html,
body,
body.v4-page,
body.v235-science-page,
body.v218-explore-page,
body.v212-reading-template,
body.v213-reading-template,
body.v220-reading-template,
body[data-pad-template="learn-quiz-v234"],
body.clean-game-page,
body.creation-pad-page,
body.life-pad-page,
body.manners-pad-page,
body.knowledge-pad-page{
  color:var(--zhw-ink) !important;
  background:
    radial-gradient(circle at 10% 8%, rgba(37,99,235,.16), transparent 30%),
    radial-gradient(circle at 88% 10%, rgba(20,184,166,.13), transparent 28%),
    radial-gradient(circle at 76% 86%, rgba(250,204,21,.16), transparent 34%),
    linear-gradient(135deg,#f3f8ff 0%,#eef7ff 58%,#fff8e8 100%) !important;
}

/* Primary surfaces */
.v4-topbar,
.v4-panel,
.v4-card,
.v4-task,
.v4-stat,
.v4-feature,
.v4-more-menu,
.v4-tabbar,
.v4-badge-card,
.v4-history-row,
.science-pad-topbar,
.science-pad-card,
.science-pad-picker-box,
.thinking-pad-topbar,
.thinking-pad-card,
.thinking-pad-picker-box,
.life-pad-topbar,
.life-pad-card,
.life-pad-picker-box,
.manners-pad-topbar,
.manners-pad-card,
.manners-pad-picker-box,
.knowledge-pad-topbar,
.knowledge-pad-card,
.knowledge-pad-picker-box,
.reading-pad-topbar,
.reading-pad-card,
.reading-pad-board,
.reading-pad-result-card,
.creation-topbar,
.creation-panel,
.clean-game-shell,
.clean-game-topbar,
.clean-question-card,
.clean-pack-panel,
body[data-pad-template="learn-quiz-v234"] .practice-panel,
body[data-pad-template="learn-quiz-v234"] .v200-quiz-stage,
body[data-pad-template="learn-quiz-v234"] .v200-question-card,
body[data-pad-template="learn-quiz-v234"] .pad-question{
  background:rgba(255,255,255,.95) !important;
  border-color:var(--zhw-line) !important;
  box-shadow:var(--zhw-shadow) !important;
  color:var(--zhw-ink) !important;
}

/* Soft cards inside panels */
.v4-panel.soft,
.v4-task,
.v4-stat,
.v4-feature,
.v4-card b,
.v4-more-menu a,
.science-pad-observe,
.science-pad-ask,
.science-pad-pill,
.science-pad-choice,
.thinking-pad-observe,
.thinking-pad-ask,
.thinking-pad-pill,
.thinking-pad-choice,
.life-pad-rule,
.life-pad-choice,
.life-pad-level-badge,
.manners-pad-rule,
.manners-pad-choice,
.manners-pad-level-badge,
.knowledge-pad-rule,
.knowledge-pad-choice,
.knowledge-pad-level-badge,
.reading-pad-choice,
.reading-pad-pack,
.reading-pad-chip,
.creation-idea-card,
.creation-kicker,
.clean-quiz-hint,
.clean-pack-card,
body[data-pad-template="learn-quiz-v234"] .learn-level-choice,
body[data-pad-template="learn-quiz-v234"] .learn-level-tag,
body[data-pad-template="learn-quiz-v234"] .learn-insight,
body[data-pad-template="learn-quiz-v234"] .pad-choice{
  background:var(--zhw-bg-2) !important;
  border-color:var(--zhw-line) !important;
  color:var(--zhw-ink) !important;
  box-shadow:var(--zhw-shadow-soft) !important;
}

/* Primary action color: one consistent blue/sky gradient */
.v4-btn.primary,
.v4-task-actions button,
.v4-mini-link:hover,
.v4-tabbar a.active,
.science-pad-action-primary,
.science-pad-primary,
.thinking-pad-action-primary,
.thinking-pad-primary,
.life-pad-action.primary,
.life-pad-primary,
.manners-pad-action.primary,
.manners-pad-primary,
.knowledge-pad-action.primary,
.knowledge-pad-primary,
.reading-pad-primary,
.creation-primary,
.clean-top-action.primary,
.clean-series-btn.primary,
.clean-pack-close.primary,
body[data-pad-template="learn-quiz-v234"] .learn-level-choice.active,
body[data-pad-template="learn-quiz-v234"] .v200-finish-message + .v4-btn,
body[data-pad-template="learn-quiz-v234"] .series-next,
body[data-pad-template="learn-quiz-v234"] .primary{
  background:linear-gradient(135deg,var(--zhw-primary),var(--zhw-primary-2)) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 12px 26px rgba(37,99,235,.22) !important;
}

/* Secondary actions stay pale blue, not random module colors */
.v4-btn,
.v4-pill,
.v4-mini-link,
.science-pad-back,
.science-pad-top-action,
.science-pad-action-light,
.science-pad-secondary,
.thinking-pad-back,
.thinking-pad-top-action,
.thinking-pad-action-light,
.thinking-pad-secondary,
.life-pad-back,
.life-pad-action,
.life-pad-secondary,
.manners-pad-back,
.manners-pad-action,
.manners-pad-secondary,
.knowledge-pad-back,
.knowledge-pad-action,
.knowledge-pad-secondary,
.reading-pad-back,
.reading-pad-secondary,
.creation-home,
.creation-secondary,
.clean-back,
.clean-top-action,
.clean-series-btn,
.clean-pack-close,
body[data-pad-template="learn-quiz-v234"] .learn-level-choice,
body[data-pad-template="learn-quiz-v234"] .secondary{
  background:var(--zhw-soft) !important;
  border-color:#dbeafe !important;
  color:#1d4ed8 !important;
}

/* Warm accent is only for stars, badges, warnings and rewards */
.v4-btn.gold,
.v4-task em,
.v4-history-row em,
.v4-kicker,
.science-pad-action-warn,
.thinking-pad-action-warn,
.life-pad-action.warn,
.manners-pad-action.warn,
.knowledge-pad-action.warn,
.reading-pad-difficulty,
.creation-action,
.clean-pack-card small,
body[data-pad-template="learn-quiz-v234"] .learn-insight{
  background:#fff7ed !important;
  color:#b45309 !important;
  border-color:#fed7aa !important;
}

/* Module icon / brand blocks: use the same blue + gold blend */
.v4-brand-icon,
.v4-card b,
.v4-task i,
.v4-history-row i,
.v4-badge-card b,
.science-pad-icon,
.thinking-pad-icon,
.life-pad-title>span,
.manners-pad-title>span,
.knowledge-pad-title>span,
.reading-pad-emoji,
.creation-brand-icon,
.clean-game-icon,
body[data-pad-template="learn-quiz-v234"] .v200-quiz-hero-icon,
body[data-pad-template="learn-quiz-v234"] .mascot{
  background:linear-gradient(135deg,#dbeafe 0%,#ecfeff 52%,#fef3c7 100%) !important;
  color:var(--zhw-ink) !important;
  box-shadow:inset 0 0 0 1px rgba(37,99,235,.08), 0 8px 18px rgba(24,64,112,.08) !important;
}

/* Text color consistency */
.v4-brand small,
.v4-hero p,
.v4-section-head p,
.v4-card small,
.v4-feature span,
.v4-task span,
.v4-stat span,
.v4-page-footnote,
.v4-legacy-note,
.science-pad-title p,
.science-pad-observe span,
.science-pad-question-title,
.thinking-pad-title p,
.thinking-pad-observe span,
.thinking-pad-question-title,
.life-pad-title p,
.life-pad-scenario,
.life-pad-rule span,
.life-pad-question,
.manners-pad-title p,
.manners-pad-scenario,
.manners-pad-rule span,
.manners-pad-question,
.knowledge-pad-title p,
.knowledge-pad-scenario,
.knowledge-pad-rule span,
.knowledge-pad-question,
.reading-pad-lead,
.reading-pad-helper,
.creation-brand small,
.creation-workspace-note,
.clean-game-title p,
.clean-quiz-progress,
body[data-pad-template="learn-quiz-v234"] .desc,
body[data-pad-template="learn-quiz-v234"] .v200-progress{
  color:var(--zhw-muted) !important;
}

/* Answer states: green for correct, warm orange for retry; never transparent */
.life-pad-choice.is-ok,
.manners-pad-choice.is-ok,
.knowledge-pad-choice.is-ok,
.science-pad-choice.is-ok,
.thinking-pad-choice.is-ok,
.reading-pad-choice.is-ok,
.pad-choice.answer-ok,
.clean-choice-grid .pad-choice.answer-ok,
.clean-choice-grid button.answer-ok,
body[data-pad-template="learn-quiz-v234"] .pad-choice.answer-ok{
  background:#ecfdf5 !important;
  border-color:#22c55e !important;
  color:#166534 !important;
}
.life-pad-choice.is-bad,
.manners-pad-choice.is-bad,
.knowledge-pad-choice.is-bad,
.science-pad-choice.is-bad,
.thinking-pad-choice.is-bad,
.reading-pad-choice.is-bad,
.pad-choice.answer-bad,
.clean-choice-grid .pad-choice.answer-bad,
.clean-choice-grid button.answer-bad,
body[data-pad-template="learn-quiz-v234"] .pad-choice.answer-bad{
  background:#fff7ed !important;
  border-color:#fb923c !important;
  color:#9a3412 !important;
}

/* Center feedback cards: same opaque visual language */
.v4-growth-toast,
.science-pad-feedback,
.thinking-pad-feedback,
.life-pad-feedback,
.manners-pad-feedback,
.knowledge-pad-feedback,
.reading-pad-toast,
.reading-pad-result-layer .reading-pad-result-card,
.creation-toast-card,
.v225-result-pop,
.v237-feedback-pop,
.clean-result{
  background:#ffffff !important;
  color:var(--zhw-ink) !important;
  border:3px solid #bfdbfe !important;
  box-shadow:0 28px 80px rgba(24,64,112,.24) !important;
}
.v4-growth-toast strong,
.science-pad-feedback strong,
.thinking-pad-feedback strong,
.life-pad-feedback strong,
.manners-pad-feedback strong,
.knowledge-pad-feedback strong,
.reading-pad-toast strong,
.reading-pad-result-card strong,
.creation-toast-card strong,
.clean-result strong{
  color:var(--zhw-primary) !important;
}
.science-pad-feedback.ok,
.thinking-pad-feedback.ok,
.life-pad-feedback.ok,
.manners-pad-feedback.ok,
.knowledge-pad-feedback.ok,
.reading-pad-toast.ok,
.creation-toast-card.ok,
.v225-result-pop.ok{
  background:#ecfdf5 !important;
  border-color:#22c55e !important;
}
.science-pad-feedback.bad,
.thinking-pad-feedback.bad,
.life-pad-feedback.bad,
.manners-pad-feedback.bad,
.knowledge-pad-feedback.bad,
.reading-pad-toast.bad,
.creation-toast-card.bad,
.v225-result-pop.bad{
  background:#fff7ed !important;
  border-color:#fb923c !important;
}

/* V4 module page small accents can vary by ability, but stay inside the unified palette. */
[data-v4-category="learning"] .v4-kicker,
[data-v4-category="learning"] .v4-card em{background:#eff6ff !important;color:#1d4ed8 !important;border-color:#dbeafe !important;}
[data-v4-category="reading"] .v4-kicker,
[data-v4-category="reading"] .v4-card em{background:#ecfeff !important;color:#0f766e !important;border-color:#ccfbf1 !important;}
[data-v4-category="thinking"] .v4-kicker,
[data-v4-category="thinking"] .v4-card em{background:#eef2ff !important;color:#3730a3 !important;border-color:#c7d2fe !important;}
[data-v4-category="curiosity"] .v4-kicker,
[data-v4-category="curiosity"] .v4-card em,
[data-v4-category="science"] .v4-kicker,
[data-v4-category="science"] .v4-card em{background:#ecfeff !important;color:#0369a1 !important;border-color:#bae6fd !important;}
[data-v4-category="history"] .v4-kicker,
[data-v4-category="history"] .v4-card em{background:#fff7ed !important;color:#b45309 !important;border-color:#fed7aa !important;}
[data-v4-category="map"] .v4-kicker,
[data-v4-category="map"] .v4-card em{background:#ecfdf5 !important;color:#047857 !important;border-color:#bbf7d0 !important;}
[data-v4-category="manners"] .v4-kicker,
[data-v4-category="manners"] .v4-card em{background:#f5f3ff !important;color:#5b21b6 !important;border-color:#ddd6fe !important;}
[data-v4-category="life"] .v4-kicker,
[data-v4-category="life"] .v4-card em{background:#fff7ed !important;color:#c2410c !important;border-color:#fed7aa !important;}

/* Keep links and touch targets clean after the override. */
a,
button{ -webkit-tap-highlight-color:rgba(37,99,235,.15); }
.v4-card,
.v4-feature,
.v4-task,
.science-pad-choice,
.thinking-pad-choice,
.life-pad-choice,
.manners-pad-choice,
.knowledge-pad-choice,
.reading-pad-choice,
.clean-choice-grid .pad-choice,
.clean-choice-grid button,
body[data-pad-template="learn-quiz-v234"] .pad-choice{
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.v4-card:active,
.v4-feature:active,
.v4-task:active,
.science-pad-choice:active,
.thinking-pad-choice:active,
.life-pad-choice:active,
.manners-pad-choice:active,
.knowledge-pad-choice:active,
.reading-pad-choice:active,
.clean-choice-grid .pad-choice:active,
.clean-choice-grid button:active,
body[data-pad-template="learn-quiz-v234"] .pad-choice:active{
  transform:scale(.985);
}