:root {
  --pacific-cream: #fffdf7;
  --pacific-sail: #fff7cf;
  --pacific-sky: #edfaff;
  --pacific-lagoon: #dff8ff;
  --pacific-wave: #48cfff;
  --pacific-blue: #0672b9;
  --pacific-navy: #052c64;
  --pacific-deep: #031c3f;
  --pacific-orange: #ff7b22;
  --pacific-gold: #ffd36a;
  --pacific-line: #d6e6ed;
  --pacific-muted: #5d6b7b;
  --pacific-shadow: 0 18px 48px rgba(5, 44, 100, .13);

  --bg: var(--pacific-sky) !important;
  --panel: rgba(255, 253, 247, .86) !important;
  --panel2: rgba(255, 247, 207, .55) !important;
  --border: var(--pacific-line) !important;
  --line: var(--pacific-line) !important;
  --text: var(--pacific-deep) !important;
  --ink: var(--pacific-deep) !important;
  --muted: var(--pacific-muted) !important;
  --soft: #7d8a97 !important;
  --blue: var(--pacific-blue) !important;
  --green: #15b8d6 !important;
  --amber: var(--pacific-gold) !important;
  --orange: var(--pacific-orange) !important;
  --purple: #7d5fe8 !important;
  --violet: #7d5fe8 !important;
  --rose: #e65f48 !important;
  --teal: #15b8d6 !important;
}

html { background: var(--pacific-cream) !important; }

body,
body[data-room-theme],
body[data-room-theme="calm"],
body[data-room-theme="ocean"],
body[data-room-theme="forest"],
body[data-room-theme="bright"],
body[data-room-theme="creative"] {
  color: var(--pacific-deep) !important;
  background:
    radial-gradient(circle at 9% 6%, rgba(255, 123, 34, .18), transparent 26%),
    radial-gradient(circle at 86% 7%, rgba(72, 207, 255, .24), transparent 28%),
    radial-gradient(circle at 48% 0%, rgba(255, 211, 106, .2), transparent 31%),
    linear-gradient(180deg, var(--pacific-sky) 0%, var(--pacific-cream) 42%, #f7fcff 100%) !important;
}

body[data-page-bg="pacific"] {
  background:
    radial-gradient(circle at 9% 6%, rgba(255, 123, 34, .18), transparent 26%),
    radial-gradient(circle at 86% 7%, rgba(72, 207, 255, .24), transparent 28%),
    radial-gradient(circle at 48% 0%, rgba(255, 211, 106, .2), transparent 31%),
    linear-gradient(180deg, var(--pacific-sky) 0%, var(--pacific-cream) 42%, #f7fcff 100%) !important;
}

body[data-page-bg="white"] {
  background: linear-gradient(135deg, #fbfeff 0%, #ffffff 52%, #fff9ec 100%) !important;
}

body[data-page-bg="sky"] {
  background: linear-gradient(135deg, #dff5ff 0%, #f7fcff 48%, #fff4d8 100%) !important;
}

body[data-page-bg="lagoon"] {
  background: linear-gradient(135deg, #dff8f4 0%, #eefcff 44%, #fff2d0 100%) !important;
}

body[data-page-bg="lilac"] {
  background: linear-gradient(135deg, #f2edff 0%, #ffffff 48%, #e5fbff 100%) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(115deg, transparent 0 62%, rgba(255, 123, 34, .055) 62% 68%, transparent 68%),
    radial-gradient(ellipse at 24% 100%, rgba(5, 44, 100, .08), transparent 38%);
}

a { color: inherit; }

.topbar,
header.topbar,
.nav,
.wrap > .card,
.app > .topbar {
  background: rgba(255, 253, 247, .9) !important;
  border-color: rgba(214, 230, 237, .92) !important;
  color: var(--pacific-deep) !important;
  box-shadow: 0 12px 34px rgba(5, 44, 100, .06) !important;
}

.topbar,
header.topbar {
  backdrop-filter: blur(18px) !important;
}

.brand,
.logo,
.mark,
.crumb,
.guide-label,
.kicker {
  color: var(--pacific-orange) !important;
}

.brand,
.logo {
  color: var(--pacific-navy) !important;
}

h1, h2, h3, h4,
.brand h1,
.card h3,
.choice h3,
.subject h3,
.phase b,
.phase strong,
.metric b,
.summary strong,
.summary-card strong {
  color: var(--pacific-deep) !important;
  letter-spacing: 0 !important;
}

p,
.lead,
.subtitle,
.crumbs,
.small,
.status,
.hint,
.support-note,
.hub-help,
.card-guide,
.choice p,
.subject p,
.card p,
.panel p,
.guide p,
.scanner p,
.workspace p,
.role p,
.type-card p,
.metric span,
.chip,
.pill {
  color: var(--pacific-muted) !important;
}

.panel,
.box,
.card,
.project-card,
.mode-box,
.metric,
.learner-card,
.summary-card,
.curriculum-box,
.question,
.mission-card,
.learning-canvas,
.details-box,
.story-bridge details,
.input-card,
.role,
.type-card,
.privacy,
.setup-panel,
.choice,
.subject,
.flow-card,
.mini-card,
.portfolio-panel,
.portfolio-item,
.notice,
.good,
.rose,
.hero {
  background: rgba(255, 253, 247, .88) !important;
  border-color: var(--pacific-line) !important;
  color: var(--pacific-deep) !important;
  box-shadow: var(--pacific-shadow) !important;
}

.hero,
.intro,
.workspace,
.guide,
.scanner,
.summary-card,
.project-card,
.mission-card {
  background:
    radial-gradient(circle at 8% 0%, rgba(72, 207, 255, .17), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(255, 123, 34, .12), transparent 32%),
    rgba(255, 253, 247, .9) !important;
}

.left,
.right,
.guide {
  background: rgba(255, 253, 247, .62) !important;
  border-color: var(--pacific-line) !important;
}

.layout,
.page,
.app,
.wrap,
main {
  color: var(--pacific-deep) !important;
}

.btn,
.nav a,
.nav button,
.actions .btn,
.top-actions .btn,
.lang button,
.pill,
.chip,
.support button,
.nav-arrow,
.base-node,
.phase,
.step-chip {
  background: #fffdf7 !important;
  border: 1px solid var(--pacific-line) !important;
  color: var(--pacific-navy) !important;
  box-shadow: 0 8px 22px rgba(5, 44, 100, .07) !important;
}

.btn.primary,
.actions .btn.primary,
.top-actions .btn.primary,
.btn.green,
.btn.accent,
.btn.primary-pulse,
.start-card-action {
  background: linear-gradient(135deg, var(--pacific-navy), var(--pacific-blue)) !important;
  border-color: transparent !important;
  color: #fffdf7 !important;
}

.btn.orange,
.btn.yellow,
.mission-tag,
.choice-badge,
.setup-panel summary::after {
  background: linear-gradient(135deg, var(--pacific-orange), var(--pacific-gold)) !important;
  border-color: transparent !important;
  color: #321d00 !important;
}

.lang button.active,
.pill.active,
.chip.active,
.support button.active,
.nav button.active,
.role.active,
.type-card.active,
.card.selected,
.card.current,
.base-node.current,
.phase.active {
  background: #e5f7ff !important;
  border-color: rgba(6, 114, 185, .42) !important;
  color: var(--pacific-navy) !important;
  box-shadow: 0 0 0 4px rgba(72, 207, 255, .1) !important;
}

input,
select,
textarea,
.learning-canvas input,
.learning-canvas select,
.learning-canvas textarea {
  background: #fffdf7 !important;
  border: 1px solid var(--pacific-line) !important;
  color: var(--pacific-deep) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
}

input::placeholder,
textarea::placeholder { color: #8794a1 !important; }

option,
.learning-canvas select option {
  color: var(--pacific-deep) !important;
  background: #fffdf7 !important;
}

label,
.bar-label,
.q b,
.question b,
.bridge-card b,
.mode-box strong,
.privacy strong,
.tool-unlocked b,
.input-card b,
.subject strong,
.panel strong,
.box strong {
  color: var(--pacific-navy) !important;
}

.progress-track,
.track {
  background: #e6f1f5 !important;
  border-color: var(--pacific-line) !important;
}

.progress-fill,
.fill,
.bar {
  background: linear-gradient(90deg, var(--pacific-navy), var(--pacific-wave), var(--pacific-gold), var(--pacific-orange)) !important;
}

.num,
.node-num,
.phase-number,
.icon {
  background: #e5f7ff !important;
  color: var(--pacific-navy) !important;
  border-color: rgba(6, 114, 185, .18) !important;
}

.step,
.input-card,
.check,
.question,
.q,
.connection,
.next-note,
.inline-feedback,
.feedback {
  border-color: rgba(6, 114, 185, .24) !important;
  background: rgba(229, 247, 255, .54) !important;
  color: var(--pacific-muted) !important;
}

.question.current,
.notice {
  border-color: rgba(255, 123, 34, .32) !important;
  background: rgba(255, 240, 221, .72) !important;
}

.good,
.privacy,
.tool-unlocked {
  border-color: rgba(72, 207, 255, .34) !important;
  background: rgba(229, 247, 255, .72) !important;
}

.rose {
  border-color: rgba(255, 123, 34, .3) !important;
  background: rgba(255, 247, 207, .72) !important;
}

.card {
  --accent: var(--pacific-blue) !important;
}

.card.current h3 {
  color: var(--pacific-deep) !important;
}

.card.teaser {
  opacity: .72 !important;
  filter: none !important;
}

.base-node.done,
.card.done {
  border-color: rgba(21, 184, 214, .48) !important;
  background: #e8fbff !important;
}

.base-node.locked,
.phase.locked {
  opacity: .58 !important;
}

.modal-layer,
.help-layer {
  background: rgba(5, 44, 100, .24) !important;
}

.modal,
.help-card {
  background: #fffdf7 !important;
  color: var(--pacific-deep) !important;
  border-color: var(--pacific-line) !important;
}

.theme-dock {
  display: none !important;
}

.guide-label,
.mission-tag,
.eyebrow,
.crumb,
.label,
.kicker {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 7px 11px;
  background: #fff0dd !important;
  border: 1px solid rgba(255, 123, 34, .22) !important;
  color: #9b4312 !important;
}

.label {
  margin-bottom: 10px;
}

.topbar .btn,
.topbar .lang button {
  border-radius: 999px !important;
}

.cards,
.role-grid,
.type-grid,
.metrics,
.grid,
.two,
.subjects {
  gap: 16px !important;
}

.maker-story {
  overflow: hidden;
  padding: 0 !important;
}

.maker-story img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.maker-story .maker-copy {
  padding: 16px;
}

.maker-story .maker-copy strong {
  display: block;
  color: var(--pacific-deep) !important;
  font-size: 18px;
  margin-bottom: 6px;
}

.maker-story .maker-copy span {
  color: var(--pacific-muted) !important;
  line-height: 1.55;
  font-size: 13px;
}

@media (max-width: 980px) {
  .layout,
  .page,
  .grid,
  .two,
  .hero {
    grid-template-columns: 1fr !important;
  }
}