:root {
  --paper: #f7f2e8;
  --paper-2: #fffdf8;
  --ink: #14243b;
  --muted: #687080;
  --line: #d9d5ca;
  --lilac: #b9a8ef;
  --lilac-soft: #ece7fb;
  --coral: #ef6a53;
  --coral-soft: #fbe3dc;
  --leaf: #37785a;
  --leaf-soft: #dfece3;
  --corn: #e9b943;
  --corn-soft: #f8edc7;
  --orange: #ed8f3b;
  --shadow: 0 18px 60px rgba(26, 31, 41, .15);
  --nav-height: 72px;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: #d9d5ca; color: var(--ink); }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

button, input, select { font: inherit; letter-spacing: 0; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(239, 106, 83, .35); outline-offset: 2px; }

.phone-shell {
  position: relative;
  width: min(100%, 430px);
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
}

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-height: 58px;
  padding: max(8px, env(safe-area-inset-top)) 14px 6px;
  border-bottom: 1px solid rgba(20, 36, 59, .08);
  background: rgba(247, 242, 232, .94);
  backdrop-filter: blur(16px);
}

.wordmark {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: 800;
}

.brand-mark {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper-2);
  font-family: STSong, Songti SC, serif;
}

.icon-button {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  font-size: 23px;
  cursor: pointer;
}

.icon-button.is-hidden { visibility: hidden; }

#app { min-height: calc(100dvh - 58px); padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 24px); }

.bottom-nav {
  position: fixed;
  z-index: 40;
  right: max(0px, calc((100vw - 430px) / 2));
  bottom: 0;
  left: max(0px, calc((100vw - 430px) / 2));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  padding: 7px 16px calc(7px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(20, 36, 59, .12);
  background: rgba(255, 253, 248, .96);
  backdrop-filter: blur(18px);
}

.bottom-nav button {
  display: grid;
  place-content: center;
  gap: 3px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #7b7c7c;
  cursor: pointer;
}

.bottom-nav button > span { font-size: 22px; line-height: 1; }
.bottom-nav small { font-size: 11px; }
.bottom-nav button.is-active { color: var(--coral); font-weight: 800; }

.toast {
  position: fixed;
  z-index: 90;
  right: 50%;
  bottom: calc(var(--nav-height) + 18px);
  width: max-content;
  max-width: min(340px, calc(100vw - 32px));
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--ink);
  color: white;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, 10px);
  transition: .2s ease;
}

.toast.is-visible { opacity: 1; transform: translate(50%, 0); }

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 800;
}

.button-primary { background: var(--ink); color: white; }
.button-secondary { border-color: var(--ink); background: transparent; }
.button-coral { background: var(--coral); color: #fff; }
.button-danger { background: #a53e32; color: #fff; }
.button-wide { width: 100%; }
.button:disabled { cursor: not-allowed; opacity: .42; }

.course-hero { padding-bottom: 8px; }
.hero-art { position: relative; min-height: 332px; overflow: hidden; background: var(--lilac-soft); }
.hero-art img { display: block; width: 100%; height: 332px; object-fit: cover; object-position: 35% center; }
.hero-label {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 7px 10px;
  background: var(--paper-2);
  font-size: 11px;
  font-weight: 900;
}
.hero-copy { position: relative; margin-top: -52px; padding: 0 22px; }
.hero-copy-inner { padding: 19px 18px 20px; border-left: 5px solid var(--coral); background: var(--paper-2); box-shadow: 0 10px 26px rgba(20, 36, 59, .08); }
.eyebrow { margin: 0 0 8px; color: var(--coral); font-size: 12px; font-weight: 900; text-transform: uppercase; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, .display, .day-title { font-family: STSong, Songti SC, "Noto Serif CJK SC", serif; }
h1 { margin: 0; font-size: 36px; line-height: 1.06; font-weight: 900; }
.hero-subtitle { margin: 10px 0 15px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.hero-meta span { padding: 5px 8px; border: 1px solid var(--line); font-size: 11px; font-weight: 700; }

.section { padding: 26px 20px; }
.section + .section { border-top: 1px solid var(--line); }
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-title h2 { margin: 0; font-family: STSong, Songti SC, serif; font-size: 25px; }
.section-title p, .section-intro { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.progress-strip { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--ink); color: white; }
.progress-track { flex: 1; height: 6px; overflow: hidden; background: rgba(255,255,255,.2); }
.progress-fill { display: block; height: 100%; background: var(--corn); }
.progress-strip strong { font-size: 14px; }
.progress-strip small { color: rgba(255,255,255,.72); }

.day-list { display: grid; }
.day-row {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.day-row:last-child { border-bottom: 0; }
.day-number { color: var(--lilac); font-family: "Comic Sans MS", cursive; font-size: 29px; font-weight: 800; transform: rotate(-5deg); }
.day-row strong { display: block; margin-bottom: 6px; font-size: 15px; }
.day-row small { color: var(--muted); }
.day-status { font-size: 12px; font-weight: 800; }
.day-status.done { color: var(--leaf); }
.day-status.next { color: var(--coral); }

.promise-band { padding: 28px 22px; background: var(--corn-soft); }
.promise-band h2 { margin: 0 0 10px; font-family: STSong, Songti SC, serif; font-size: 24px; }
.promise-band p { margin: 0; line-height: 1.7; }

.day-head { padding: 22px 20px 20px; }
.day-kicker { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: var(--coral); font-size: 12px; font-weight: 900; }
.day-title { margin: 0; font-size: 32px; line-height: 1.13; }
.day-intro { margin: 13px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.stage-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 20px; border-bottom: 1px solid var(--line); }
.stage-tabs button { min-height: 44px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-size: 12px; font-weight: 800; cursor: pointer; }
.stage-tabs button.is-active { border-bottom-color: var(--coral); color: var(--ink); }
.stage-tabs button:disabled { opacity: .45; cursor: not-allowed; }

.knowledge-stack { padding: 22px 20px 12px; }
.prompt-note { margin: 0 0 16px; padding: 12px 14px; border-left: 4px solid var(--lilac); background: var(--lilac-soft); font-family: STSong, Songti SC, serif; font-size: 16px; line-height: 1.55; }
.knowledge-card { position: relative; min-height: 230px; padding: 28px 24px 76px; overflow: hidden; background: var(--paper-2); box-shadow: 0 12px 32px rgba(20, 36, 59, .08); }
.knowledge-card::after { content: attr(data-count); position: absolute; right: 18px; bottom: 10px; color: var(--lilac); font-family: "Comic Sans MS", cursive; font-size: 48px; opacity: .75; transform: rotate(-7deg); }
.knowledge-card h3 { margin: 0 0 18px; font-family: STSong, Songti SC, serif; font-size: 26px; }
.knowledge-card p { margin: 0; font-size: 16px; line-height: 1.8; }
.knowledge-nav { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 10px; padding: 14px 0 8px; }
.knowledge-nav button { width: 48px; height: 44px; border: 1px solid var(--ink); background: transparent; font-size: 20px; cursor: pointer; }
.knowledge-dots { display: flex; justify-content: center; gap: 6px; }
.knowledge-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.knowledge-dots i.is-active { width: 22px; border-radius: 5px; background: var(--coral); }

.activity { padding: 22px 18px 12px; }
.activity-lead { margin: 0 2px 18px; line-height: 1.65; }
.activity-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 12px; font-weight: 800; }
.activity-progress span { flex: 1; height: 7px; background: var(--line); }
.activity-progress i { display: block; height: 100%; background: var(--coral); }

.food-pool, .tag-row, .choice-grid, .chip-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.food-card, .tag-chip, .choice-card, .select-chip {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-2);
  cursor: pointer;
}
.food-card { display: grid; min-width: calc(25% - 7px); min-height: 78px; flex: 1 0 calc(25% - 7px); place-items: center; gap: 3px; padding: 9px 6px; text-align: center; }
.food-card .emoji { font-size: 26px; }
.food-card small { font-size: 11px; line-height: 1.25; }
.food-card.is-selected { border: 2px solid var(--coral); background: var(--coral-soft); }
.food-card.is-placed { opacity: .4; }

.drop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.drop-zone { min-height: 118px; padding: 12px 10px; border: 2px dashed var(--line); border-radius: 6px; background: rgba(255,255,255,.35); cursor: pointer; }
.drop-zone strong { display: block; margin-bottom: 4px; font-size: 13px; }
.drop-zone > small { display: block; min-height: 30px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.drop-zone.is-over, .drop-zone:active { border-color: var(--coral); }
.drop-zone[data-tone="corn"] { background: var(--corn-soft); }
.drop-zone[data-tone="coral"] { background: var(--coral-soft); }
.drop-zone[data-tone="leaf"] { background: var(--leaf-soft); }
.drop-zone[data-tone="lilac"] { background: var(--lilac-soft); }
.zone-items { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.zone-items span { padding: 3px 5px; background: rgba(255,255,255,.8); font-size: 10px; }
.zone-items button { padding: 4px 6px; border: 0; border-radius: 3px; background: rgba(255,255,255,.86); color: var(--ink); font-size: 10px; cursor: pointer; }

.feedback { margin-top: 14px; padding: 12px 14px; border-left: 4px solid var(--leaf); background: var(--leaf-soft); font-size: 13px; line-height: 1.6; }
.feedback.is-try { border-left-color: var(--corn); background: var(--corn-soft); }
.helper { margin: 10px 2px; color: var(--muted); font-size: 11px; line-height: 1.5; }

.single-challenge { padding: 20px; background: var(--paper-2); box-shadow: 0 10px 30px rgba(20,36,59,.07); }
.single-challenge .big-food { text-align: center; }
.single-challenge .big-food span { display: block; font-size: 58px; }
.single-challenge .big-food h3 { margin: 4px 0 18px; font-family: STSong, Songti SC, serif; font-size: 25px; }
.tag-chip, .select-chip { min-height: 39px; padding: 8px 11px; font-size: 12px; font-weight: 700; }
.tag-chip.is-selected, .select-chip.is-selected { border-color: var(--ink); background: var(--ink); color: #fff; }

.choice-card { min-height: 112px; flex: 1 1 calc(50% - 5px); padding: 15px 10px; text-align: center; }
.choice-card .emoji { display: block; margin-bottom: 7px; font-size: 35px; }
.choice-card.is-selected { border: 2px solid var(--coral); background: var(--coral-soft); }
.question-title { margin: 0 0 16px; font-family: STSong, Songti SC, serif; font-size: 20px; line-height: 1.45; }

.form-block { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.form-block h3 { margin: 0 0 10px; font-size: 14px; }
.select-chip { margin: 0 6px 7px 0; }
.form-label { display: block; margin: 16px 0 8px; font-size: 12px; font-weight: 900; }
.select-field { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper-2); }

.label-still { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 16px; }
.order-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 16px; }
.order-step { min-height: 76px; padding: 8px 4px; border: 1px solid var(--line); background: var(--paper-2); cursor: pointer; }
.order-step span { display: block; color: var(--lilac); font-family: "Comic Sans MS", cursive; font-size: 22px; }
.order-step small { font-size: 10px; }
.order-step.is-done { border-color: var(--leaf); background: var(--leaf-soft); }
.product-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 12px 0; padding-bottom: 4px; }
.product-tabs button { flex: 0 0 auto; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: transparent; cursor: pointer; }
.product-tabs button.is-active { background: var(--ink); color: white; }
.nutrition-label { border: 2px solid var(--ink); background: #fff; }
.nutrition-label header { display: flex; justify-content: space-between; padding: 11px 12px; border-bottom: 5px solid var(--ink); }
.nutrition-label header strong { font-size: 14px; }
.nutrition-label header span { padding: 3px 6px; background: var(--corn-soft); font-size: 10px; }
.label-line { padding: 10px 12px; border-bottom: 1px solid var(--ink); font-size: 12px; line-height: 1.5; }
.label-line:last-child { border-bottom: 0; }

.plate-board { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; aspect-ratio: 1; margin: 14px auto; padding: 12px; border: 2px solid var(--ink); border-radius: 50%; background: #fffdf8; }
.plate-zone { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; padding: 8px; border: 1px dashed rgba(20,36,59,.28); cursor: pointer; }
.plate-zone:nth-child(1) { border-radius: 100% 5px 5px 5px; background: var(--corn-soft); }
.plate-zone:nth-child(2) { border-radius: 5px 100% 5px 5px; background: var(--coral-soft); }
.plate-zone:nth-child(3) { border-radius: 5px 5px 5px 100%; background: var(--leaf-soft); }
.plate-zone:nth-child(4) { border-radius: 5px 5px 100% 5px; background: var(--lilac-soft); }
.plate-zone strong { font-size: 11px; }
.plate-zone .zone-items { justify-content: center; }

.mode-switch { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 16px; border: 1px solid var(--ink); }
.mode-switch button { min-height: 42px; border: 0; background: transparent; cursor: pointer; font-size: 12px; font-weight: 800; }
.mode-switch button.is-active { background: var(--ink); color: #fff; }
.scenario-list { display: grid; gap: 10px; }
.scenario-card { padding: 16px; border: 1px solid var(--line); background: var(--paper-2); }
.scenario-card.is-selected { border: 2px solid var(--coral); }
.scenario-card header { display: flex; align-items: center; gap: 10px; }
.scenario-card header span { font-size: 30px; }
.scenario-card h3 { margin: 0 0 3px; font-size: 15px; }
.scenario-card p { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.scenario-option { display: block; width: 100%; min-height: 42px; margin-top: 7px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: transparent; text-align: left; cursor: pointer; font-size: 12px; }
.scenario-option.is-selected { border-color: var(--leaf); background: var(--leaf-soft); font-weight: 800; }

.complete-panel { padding: 30px 20px; text-align: center; }
.complete-stamp { display: grid; width: 92px; height: 92px; margin: 0 auto 18px; place-items: center; border: 3px solid var(--coral); border-radius: 50%; color: var(--coral); font-family: STSong, Songti SC, serif; font-size: 20px; font-weight: 900; transform: rotate(-6deg); }
.complete-panel h2 { margin: 0 0 10px; font-family: STSong, Songti SC, serif; font-size: 29px; }
.complete-panel > p { margin: 0 auto 22px; color: var(--muted); line-height: 1.7; }
.artifact-sheet { margin: 0 0 20px; padding: 18px; border-top: 6px solid var(--corn); background: var(--paper-2); box-shadow: 0 12px 30px rgba(20,36,59,.08); text-align: left; }
.artifact-sheet small { color: var(--muted); }
.artifact-sheet h3 { margin: 7px 0 12px; font-family: STSong, Songti SC, serif; font-size: 21px; }
.artifact-sheet p { margin: 6px 0; font-size: 13px; line-height: 1.55; }
.next-actions { display: grid; gap: 9px; }

.results-head { padding: 28px 20px 22px; background: var(--ink); color: #fff; }
.results-head h1 { font-size: 34px; }
.results-head p { margin: 10px 0 0; color: rgba(255,255,255,.7); line-height: 1.6; }
.achievement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.achievement { min-height: 135px; padding: 15px; border: 1px solid var(--line); background: var(--paper-2); }
.achievement.is-locked { opacity: .45; }
.achievement b { display: block; margin-bottom: 18px; color: var(--lilac); font-family: "Comic Sans MS", cursive; font-size: 24px; }
.achievement strong { display: block; margin-bottom: 6px; font-size: 13px; }
.achievement small { color: var(--muted); line-height: 1.4; }
.toolkit-cover { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 15px; }
.toolkit-list { display: grid; gap: 8px; }
.toolkit-line { padding: 12px; border-left: 4px solid var(--leaf); background: var(--leaf-soft); font-size: 13px; line-height: 1.5; }
.empty-results { padding: 38px 20px; text-align: center; }
.empty-results .display { font-size: 31px; }

.confirm-dialog { width: min(340px, calc(100% - 32px)); padding: 24px; border: 0; border-radius: 6px; background: var(--paper-2); color: var(--ink); box-shadow: var(--shadow); }
.confirm-dialog::backdrop { background: rgba(20,36,59,.6); }
.confirm-dialog h2 { margin: 0 0 8px; font-family: STSong, Songti SC, serif; }
.confirm-dialog p { color: var(--muted); }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }

@media (min-width: 560px) {
  body { padding: 24px 0; }
  .phone-shell { min-height: calc(100dvh - 48px); border: 1px solid rgba(20,36,59,.16); border-radius: 24px; box-shadow: var(--shadow); }
  #app { min-height: calc(100dvh - 106px); }
  .topbar { border-radius: 24px 24px 0 0; }
  .bottom-nav { right: calc((100vw - 430px) / 2); left: calc((100vw - 430px) / 2); bottom: 24px; border-radius: 0 0 24px 24px; }
}

@media (max-width: 350px) {
  h1 { font-size: 31px; }
  .food-card { flex-basis: calc(33.333% - 6px); }
  .drop-grid { grid-template-columns: 1fr; }
  .day-title { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}