/* 成长小天地基础主题；界面图标为本地 SVG，奖品插画美术层见 art-direction.css。 */
:root {
  --ink: #294b3e;
  --muted: #758878;
  --line: #e3eadd;
  --soft: #f2f8ed;
  --green: #237958;
  --orange: #ec7629;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: #eaf1e8;
  font-size: 15px;
}
body {
  background-image: radial-gradient(#a8bca23d 1px, transparent 1px);
  background-size: 20px 20px;
}
.app-shell { background: #fffdf6; border-color: #e1e8d9; }
.app-header { height: 72px; padding-inline: 20px; background: #fffdf6; border-color: #eeeede; }
.brand { color: #2a674e; font-size: 20px; letter-spacing: -.6px; gap: 9px; }
.brand > svg { width: 34px; height: 34px; }
.brand small { font-size: 10px; letter-spacing: 1px; color: #8c9b7e; margin-top: 2px; }
.header-action { color: #6f806b; background: #f2f5e9; border: 1px solid #e6ebd8; border-radius: 20px; padding: 0 11px; min-height: 34px; font-size: 12px; }
.header-action svg { width: 14px; height: 14px; }
main { padding: 22px 20px calc(104px + env(safe-area-inset-bottom)); }
h1 { font-size: 26px; line-height: 1.45; letter-spacing: -.7px; color: #284f3c; }
h2 { color: #34553d; font-size: 17px; }
.eyebrow { color: #66854f; font-size: 12px; letter-spacing: .8px; font-weight: 600; margin-bottom: 9px; }
.subtitle { color: #71836c; font-size: 13px; margin-top: 8px; }
.page-heading { margin-bottom: 22px; }
.child-hero { position: relative; min-height: 112px; padding-right: 84px; margin-bottom: 12px; }
.child-hero .subtitle { font-size: 12px; white-space: nowrap; }
.hero-friend { position: absolute; right: 0; top: 8px; width: 84px; height: 98px; display: grid; place-items: center; }
.hero-friend > svg { width: 76px; height: 76px; transform: rotate(11deg); filter: drop-shadow(0 5px 0 #eecb7552); }
.hero-friend:before, .hero-friend:after { content: "✦"; position: absolute; color: #86b981; font-size: 18px; }
.hero-friend:before { top: 0; left: 2px; transform: rotate(-15deg); }
.hero-friend:after { right: -2px; bottom: 8px; color: #f7b65a; font-size: 24px; }
.card { border-radius: 20px; background: white; border-color: #e2e9db; box-shadow: 0 3px 0 #e6ebdc80; }
.balance-card { padding: 17px 20px; margin-bottom: 15px; }
.balance-card:not(.manage-balance) { border-color: #e7e8d2; background: #fff; }
.balance-card:not(.manage-balance) .label { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.balance-card:not(.manage-balance) .label:before { content: "★"; font-size: 13px; color: #d78b10; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #fff1c7; }
.label { font-size: 13px; color: #74836c; }
.balance-number { color: #267657; font-size: 45px; font-weight: 800; line-height: 1.1; letter-spacing: -1.5px; margin-top: 6px; }
.draw-count { border-color: #eceddf; padding-left: 18px; color: #6d7a60; font-size: 12px; }
.draw-count strong { color: #dd782d; font-size: 29px; }
.draw-count p { color: #89927a; font-size: 11px; margin-top: 5px; }
.wish-card { border: 1px solid #d6e7cb; background: linear-gradient(120deg, #eff8e7, #e7f5e9); box-shadow: 0 3px 0 #d9e8cc99; padding: 16px 17px; margin-bottom: 23px; position: relative; overflow: hidden; }
.wish-card:after { content: "✧"; color: #a9c99d; position: absolute; right: 15px; top: 8px; font-size: 28px; pointer-events: none; }
.wish-top { gap: 12px; }
.wish-icon { width: 46px; height: 51px; background: #ffffffb0; border: 1px solid #d0e5d2; border-radius: 14px; transform: rotate(-5deg); }
.wish-icon svg { width: 32px; height: 40px; }
.wish-title { color: #336b4e; font-size: 15px; }
.wish-description { color: #71876b; font-size: 11px; margin-top: 5px; }
.progress-row { font-size: 11px; color: #6d8560; margin-top: 14px; }
.progress { height: 8px; background: #cfe1c7; box-shadow: inset 0 1px 2px #acc5a344; }
.progress span { background: linear-gradient(90deg, #59b67b, #318e5d); min-width: 0; }
.guarantee { font-size: 12px; color: #53724b; margin-top: 10px; }
.guarantee strong { color: #b56815; font-weight: 800; }
.wish-card > .icon-watch { width: 40px; height: 45px; float: left; margin-right: 14px; }
.wish-card > div > p { color: #71876b; margin-top: 5px; font-size: 12px; }
.section-heading { margin-bottom: 13px; }
.section-heading > span { color: #94a083; font-size: 11px; }
.prize-grid { gap: 9px; }
.prize { min-height: 107px; border-radius: 16px; border: 1px solid #e8e5d5; background: #fff; box-shadow: 0 3px 0 #eae6d580; padding: 17px 5px 11px; gap: 8px; }
.prize[data-prize=watch] { border: 1.5px solid #edbc5e; background: #fff4d6; }
.prize[data-prize=movie] { background: #f1f0ff; border-color: #e6e0f6; }
.prize[data-prize=snack10] { background: #fff0e7; border-color: #f4e1d3; }
.prize[data-prize=cash10] { background: #eff8ed; border-color: #deedd9; }
.prize[data-prize=snack5] { background: #fff7dc; border-color: #f1e7c7; }
.prize[data-prize=cash5] { background: #edf7f5; border-color: #d8ebe4; }
.prize[data-prize=meal] { background: #ffefe8; border-color: #f5ded0; }
.prize[data-prize=cash2] { background: #f0f4ff; border-color: #dfe6f7; }
.prize[data-prize=cash1] { background: #f6f3fd; border-color: #e9e2f6; }
.prize svg { width: 43px; height: 43px; }
.prize-name { font-size: 12px; font-weight: 600; color: #596449; max-width: 100%; line-height: 1.5; }
.prize .badge { color: #825020; background: #f8ce73; border-radius: 0 12px 0 8px; right: 0; top: 0; padding: 3px 6px; font-size: 8px; }
.prize.selected { border: 2px solid #ed842c; background: #fff0bc; box-shadow: 0 0 0 3px #ffb74960, 0 3px 0 #ec9f4850; transform: translateY(-2px); }
.cash-mark { width: 44px; height: 34px; }
.cash-mark svg { width: 44px; height: 34px; }
.cash-mark b { position: relative; z-index: 1; color: #257351; font-size: 14px; }
.primary { background: #348861; border: 1px solid #2d7c56; border-radius: 15px; min-height: 52px; box-shadow: 0 4px 0 #216b47; font-size: 15px; font-weight: 700; transition: transform .15s, box-shadow .15s; }
.primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #216b47; }
.primary:disabled { background: #dee6d3; color: #6e8066; border-color: #d1ddc5; box-shadow: 0 3px 0 #c9d5bb; opacity: 1; }
.draw-button { background: linear-gradient(#ffa849, #f38a2e); border-color: #ee8c31; box-shadow: 0 4px 0 #ce6b20; margin-top: 20px; min-height: 54px; font-size: 17px; letter-spacing: .4px; color: #fff; }
.draw-button:active:not(:disabled) { box-shadow: 0 1px 0 #ce6b20; }
.draw-button svg { width: 23px; height: 23px; }
.footnote { color: #8b957b; font-size: 11px; margin-top: 14px; }
.bottom-nav { background: #fffef9f5; border-top: 1px solid #e6e9d9; box-shadow: 0 -4px 18px #7b8d5710; backdrop-filter: blur(14px); height: calc(78px + env(safe-area-inset-bottom)); padding-top: 7px; }
.nav-item { font-size: 11px; color: #829179; gap: 4px; font-weight: 500; }
.nav-item > svg { width: 24px; height: 24px; padding: 0; }
.nav-item:not(.active) > svg { filter: grayscale(.6); opacity: .65; }
.nav-item.active { color: #2d815a; }
.nav-item.active:before { content: ""; position: absolute; top: 1px; width: 49px; height: 29px; border-radius: 12px; background: #e7f2de; z-index: -1; }
.nav-item.active:after { width: 4px; height: 4px; background: #4d9c69; }
.stats { gap: 12px; }
.stat { background: #fff2d4; border: 1px solid #f0e3bd; border-radius: 18px; padding: 17px 18px; }
.stat + .stat { background: #eaf5e5; border-color: #dcebcf; }
.stat .label { color: #8b794b; font-size: 12px; }
.stat + .stat .label { color: #718965; }
.stat strong { color: #ae7323; font-size: 30px; font-weight: 800; }
.stat + .stat strong { color: #367b51; }
.stat strong small { font-size: 12px; }
.filters { gap: 9px; }
.filters select, .month-input { min-height: 44px; border-radius: 12px; background: #fffefb; border-color: #e4e8d8; font-size: 13px; color: #657459; }
.record { border-radius: 17px; background: #fff; border-color: #e6eadd; box-shadow: 0 2px 0 #e6ead94d; min-height: 91px; padding: 16px; }
.record-icon { background: #fff4dd; border-radius: 14px; width: 46px; height: 48px; }
.record:nth-child(3n+2) .record-icon { background: #f0ecff; }
.record:nth-child(3n) .record-icon { background: #e9f6ea; }
.record-icon svg { width: 31px; height: 31px; }
.record-title { font-size: 14px; color: #476044; font-weight: 600; }
.record-meta { color: #89917f; font-size: 11px; }
.record-right { color: #88917e; font-size: 11px; }
.record-right small { color: #89917f; font-size: 11px; }
.record-right .delta { color: #327d55; font-size: 20px; font-weight: 750; }
.record-right .delta.negative { color: #c57835; }
.ledger-record[data-kind=grant] { border-left: 3px solid #a0cca0; }
.ledger-record[data-kind=draw] { border-left: 3px solid #f3c087; }
.ledger-record[data-kind=revoke] { border-left: 3px solid #d7c3b8; }
.mini-tag { background: #f3f3e8; color: #899175; border-color: #e8e9d7; border-radius: 5px; font-size: 10px; }
.milestone { background: #edf6e4; border: 1px solid #dce9cb; border-radius: 17px; padding: 17px; }
.milestone > svg { width: 35px; height: 39px; }
.milestone strong { color: #477a4d; font-size: 14px; }
.milestone p { color: #7a8e68; font-size: 12px; }
.point-summary { background: #edf7ef; border-color: #d9e8d7; padding-top: 25px; }
.point-summary .balance-number { font-size: 54px; }
.substats { border-color: #d6e5d3; }
.substats > div + div { border-color: #d6e5d3; }
.substats strong { color: #4a8259; font-size: 23px; }
.substats > div + div strong { color: #b47e35; }
.substats .label { font-size: 12px; }
.segmented { background: #eef2e4; padding: 5px; border-radius: 13px; gap: 5px; }
.segmented button { min-height: 39px; font-size: 13px; color: #7c8b6f; border-radius: 10px; }
.segmented button.active { color: #326a47; background: #fffef9; box-shadow: 0 2px 3px #7e97641c; }
.text-button { font-size: 12px; color: #6a8d59; }
.manage-balance { background: #eaf5e6; border: 1px solid #d8e7d0; }
.manage-balance .text-button { color: #4f8155; font-size: 12px; }
.manage-balance .balance-number { font-size: 42px; }
.form-label { font-size: 13px; color: #697c61; }
.stepper { border-radius: 14px; border-color: #dde6d2; height: 56px; }
.stepper button { color: #418257; background: #eff6e8; }
.stepper input { font-size: 25px; color: #36754b; background: #fffefa; }
.presets button { border-color: #e2e8d7; min-height: 41px; border-radius: 10px; color: #769165; font-size: 14px; }
.presets button.active { border-color: #91b883; background: #edf7e4; color: #467847; }
textarea, input[type=password], input[type=text] { background: #fffefa; border-color: #e0e8d5; border-radius: 13px; color: #426449; font-size: 16px; }
textarea { min-height: 100px; }
input::placeholder, textarea::placeholder { color: #9ba58e; font-size: 13px; }
.reason-row button { color: #718963; background: #f0f5e8; border-radius: 8px; padding: 10px 11px; font-size: 11px; min-height: 36px; }
.divider { border-color: #e7ebdb; }
.undo { color: #99835a; border-color: #e9dfc8; background: #fffaf0; border-radius: 9px; min-height: 36px; font-size: 11px; }
.secondary { color: #5b7d4f; border-color: #dce5cf; background: #fffefa; border-radius: 12px; min-height: 44px; font-size: 13px; }
.compact-wish { background: #f0f7e8; border-color: #dfebd2; box-shadow: none; }
.compact-wish .guarantee { color: #7f946e; font-size: 11px; }
.draw-record .sequence, .cost { color: #8a977a; font-size: 11px; }
.empty { padding: 35px 16px; background: #fffefa; border: 1px dashed #dee6cf; border-radius: 18px; }
.empty svg { width: 45px; height: 45px; color: #a6b989; }
.empty h3 { color: #6b8358; font-size: 15px; }
.empty p { font-size: 12px; color: #8a987c; }
.login-hero { padding: 29px 0 20px; }
.login-hero .login-icon { background: #eaf4dc; border: 1px solid #dfebcb; width: 76px; height: 76px; border-radius: 25px; color: #6c9b58; transform: rotate(-6deg); box-shadow: 0 5px 0 #d7e6c4; }
.login-icon svg { width: 35px; height: 35px; }
.login-hero .eyebrow { margin-top: 28px; }
.login-hero h1 { font-size: 25px; }
.login-form { padding: 22px; border: 1px solid #e6e9d8; border-radius: 21px; background: #fffefa; }
.login-form input { background: white; }
.access-note { margin-top: 20px; font-size: 12px; color: #8b977c; background: #f2f5e8; }
.back-link { color: #82946c; font-size: 13px; }
.reset-section { border-color: #e8e8d8; gap: 10px; }
.reset-section h2 { color: #8c7960; font-size: 14px; }
.reset-section p { color: #a09987; font-size: 11px; }
.reset-section .secondary { color: #9e7b5a; border-color: #e9decc; background: #fffaf1; }
.form-error { color: #b96f36; border-color: #e4aa72; font-size: 13px; }
.initial-loading { color: #8c9c78; }
.loader { border-color: #dbe9ce; border-top-color: #4a9666; }
.fatal > svg { width: 52px; height: 52px; color: #87a373; margin-bottom: 22px; }
.fatal h1 { font-size: 23px; }
.fatal p { font-size: 13px; color: #8a9879; }
#toast { background: #305c42; color: #fffdf3; font-size: 13px; border-radius: 15px; box-shadow: 0 4px 20px #37582f24; }
dialog { color: #496142; background: #fffdf7; border: 1px solid #e0e7cf; border-radius: 25px; box-shadow: 0 12px 50px #30462c35; padding: 27px 23px; }
dialog::backdrop { background: #294a365c; }
.dialog-title { color: #48683f; font-size: 20px; }
.dialog-subtitle { color: #8a9679; font-size: 13px; }
.dialog-info { background: #f0f5e5; border-radius: 13px; color: #7a8869; font-size: 12px; line-height: 2; }
.dialog-actions { gap: 10px; }
.dialog-actions .primary { font-size: 13px; }
.result:before { content: "✦  ✧  ✦"; display: block; color: #e8ad3d; font-size: 25px; letter-spacing: 12px; margin-bottom: 15px; }
.result .eyebrow { color: #86a16b; }
.result .result-icon { background: #fff1c9; border: 1px solid #f2dca0; box-shadow: 0 5px 0 #eddaa8; border-radius: 26px; width: 88px; height: 88px; transform: rotate(-5deg); }
.result h2 { color: #467342; font-size: 23px; }
.result p { color: #8a977e; font-size: 13px; line-height: 1.9; }
.result p strong { color: #ba7c2e; font-size: 17px; }
.result .primary { background: #f49a3d; border-color: #ed8c30; box-shadow: 0 4px 0 #ce792a; }
.pending-banner { color: #987234; background: #fff4dc; border-color: #eedcaf; border-radius: 15px; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #589c62; outline-offset: 3px; }
body[data-mode=parent] main { background: #fffef9; }
body[data-mode=parent] .brand > svg { color: #70935b; }
/* 增强小屏幕上的文字与按钮对比度。 */
.primary:not(.draw-button):not(:disabled) { background: #2f8059; }
.draw-button, .result .primary { color: #69360f; }
.result .primary:not(:disabled) { background: #f7a348; }
.subtitle, .label, .form-label, .record-meta, .record-right, .record-right small,
.wish-description, .draw-count p, .milestone p, .footnote { color: #6d7a62; }
.record-meta, .record-right small { font-size: 12px; }
input::placeholder, textarea::placeholder { color: #718064; }
.prize .badge { font-size: 9px; }
@media (max-width:360px) {
  main { padding-inline: 15px; }
  .app-header { padding-inline: 16px; }
  .brand { font-size: 18px; gap: 7px; }
  .brand small { font-size: 9px; letter-spacing: .5px; }
  .child-hero { padding-right: 71px; }
  .child-hero h1 { font-size: 24px; }
  .hero-friend { width: 70px; right: -1px; }
  .hero-friend > svg { width: 64px; height: 64px; }
  .prize { min-height: 102px; padding-inline: 4px; }
  .prize-name { font-size: 12px; }
  .record { padding-inline: 12px; gap: 10px; }
  .record-title { font-size: 13px; }
  .record-meta, .record-right small { font-size: 11px; }
}
@media (min-width:600px) {
  .app-shell { margin: 22px auto; border-radius: 27px 27px 0 0; box-shadow: 0 9px 45px #4b704b12; }
  .bottom-nav { border-color: #e3e8d7; }
}