/* 参考图的水彩田园美术层：生成素材保存在 public/assets，布局与文字仍由网页渲染。 */
:root {
  --ink: #214e3c;
  --green: #228052;
  --line: #ecebdd;
  background: #f2f3e9;
}
body { background-image: radial-gradient(ellipse at 15% 15%, #e3eedb 0, transparent 45%), radial-gradient(ellipse at 90% 85%, #eee5cf 0, transparent 40%); }
.app-shell { background: #fffef9; border-color: #e9e7d9; }
.app-header { background: linear-gradient(100deg, #fffefb, #fffdf4); border-color: #f0eddf; }
.brand { color: #18583e; font-weight: 850; text-shadow: 0 1px #fff; }
.brand > .icon-star { width: 37px; height: 37px; filter: drop-shadow(0 2px 1px #d9ad6333); }
.brand small { color: #7e9573; }
main { position: relative; isolation: isolate; padding-top: 16px; }
body[data-mode=child] main:after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 81px;
  height: 90px; background: url('/assets/countryside-v1.png') left bottom / 160% auto no-repeat;
  opacity: .55; pointer-events: none;
}
.page-heading { position: relative; }
body[data-mode=child] .page-heading:not(.child-hero) { min-height: 104px; padding-bottom: 12px; }
body[data-mode=child] .page-heading:not(.child-hero):after {
  content: ""; position: absolute; right: -6px; bottom: -1px; width: 145px; height: 65px;
  background: url('/assets/countryside-v1.png') right bottom / 220px auto no-repeat; opacity: .65; pointer-events: none; z-index: -1;
}
.child-hero {
  margin-inline: -7px; margin-bottom: 17px; padding: 18px 13px 31px; min-height: 158px;
  border-radius: 18px; overflow: hidden; border: 1px solid #e7eedb;
  background: url('/assets/countryside-v1.png') right bottom / 100% auto no-repeat, linear-gradient(110deg, #f4fbef, #fffef1);
  box-shadow: inset 0 1px #fff, 0 3px 10px #9dad7020;
}
.child-hero .eyebrow { color: #648451; font-size: 11px; letter-spacing: 1px; margin-bottom: 6px; }
.child-hero h1 { color: #195337; font-weight: 850; line-height: 1.4; font-size: 25px; letter-spacing: -.8px; text-shadow: 0 1px 1px #fff; }
.child-hero .subtitle { font-size: 11px; color: #58774b; margin-top: 6px; }
.child-hero .hero-friend { display: none; }
.card { border-radius: 18px; border-color: #eee9da; box-shadow: 0 5px 16px #9e975b0d, 0 2px 2px #d1cdb829; }
.balance-card:not(.manage-balance) { background: linear-gradient(115deg, #fff, #fffefa); border-color: #eee9da; }
.balance-card:not(.manage-balance) .label { color: #5b7451; }
.balance-card:not(.manage-balance) .label:before { background: #fff2ce; color: #e8a22b; box-shadow: inset 0 1px 1px #fff; }
.balance-number { color: #176442; text-shadow: 0 2px #f2f8eb; }
.draw-count { color: #64755d; }
.wish-card {
  background: linear-gradient(120deg, #f0fae7, #e5f7ed); border: 1px solid #dcebd6;
  padding: 15px 17px 17px; box-shadow: 0 5px 16px #78935114, inset 0 1px 1px #fff;
}
.wish-card:before {
  content: ""; position: absolute; inset: auto 0 0; height: 70px;
  background: url('/assets/countryside-v1.png') left bottom / 150% auto no-repeat;
  opacity: .16; pointer-events: none;
}
.wish-card:after { content: "✧"; top: 7px; right: 93px; font-size: 17px; color: #b7cda1; }
.wish-card > * { position: relative; }
.wish-top { padding-right: 78px; min-height: 62px; }
.wish-title { font-size: 16px; color: #286342; }
.wish-description { font-size: 11px; line-height: 1.7; color: #65805b; }
.wish-icon { position: absolute; width: 104px; height: 86px; right: -18px; top: -7px; background: none; border: 0; transform: rotate(7deg); }
.wish-icon .reward-art-wrap { width: 104px; height: 86px; }
.wish-icon .reward-art { width: 104px; }
.wish-card .progress-row { margin-top: 9px; }
.progress { height: 9px; background: #c7e1cd; box-shadow: inset 0 1px 2px #82b58c33; }
.progress span { background: linear-gradient(110deg, #54c67d, #279d59); box-shadow: inset 0 1px 1px #ffffff80; }
.guarantee { color: #376346; }
.guarantee strong { color: #d98b21; }
.section-heading h2 { color: #24543b; font-weight: 800; font-size: 17px; }
.prize-grid { gap: 9px; }
.prize[data-prize] {
  min-height: 115px; padding: 9px 5px 10px; gap: 3px; border-radius: 15px;
  background: linear-gradient(145deg, #fff, #fffefa); border: 1px solid #eee9db;
  box-shadow: 0 4px 12px #b2a57810, inset 0 1px #fff;
}
.prize[data-prize=watch] {
  background: radial-gradient(ellipse at center, #fff4cd, #fffdf4 75%); border: 1.5px solid #edbb55;
  box-shadow: 0 0 0 2px #fff2d0, 0 5px 16px #e5b55a22;
}
.prize-name { color: #506340; font-size: 12px; font-weight: 650; line-height: 1.45; }
.prize .badge {
  top: -1px; right: -1px; color: #8b5819; background: linear-gradient(#ffe2a0, #f9cb71);
  border: 1px solid #efbe62; border-radius: 0 13px 0 10px; font-size: 8px; padding: 2px 5px; z-index: 1;
}
.prize.selected {
  border: 2px solid #ffab31; background: linear-gradient(#fff8db, #fff0b1);
  box-shadow: 0 0 0 3px #ffda8780, 0 5px 14px #db9d3f33; transform: translateY(-2px);
}
.reward-art-wrap { display: inline-grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-width: 0; flex: none; vertical-align: middle; width: 100%; height: 74px; }
.reward-art {
  display: block; width: 112px; max-width: 100%; min-width: 0; aspect-ratio: 1.375;
  background-image: url('/assets/rewards-watercolor-v1.png');
  background-repeat: no-repeat; background-size: 300% auto;
}
/* 图集的三行采用各自的透明安全区，避免手表表带或盘子边缘被裁切。 */
.art-watch { background-position: 0 0; }
.art-movie { background-position: 50% 0; }
.art-snack10 { background-position: 100% 0; }
.art-cash10 { background-position: 0 53.72%; aspect-ratio: 1.618; }
.art-snack5 { background-position: 50% 53.72%; aspect-ratio: 1.618; }
.art-cash5 { background-position: 100% 53.72%; aspect-ratio: 1.618; }
.art-meal { background-position: 0 100%; aspect-ratio: 1.571; }
.art-cash2 { background-position: 50% 100%; aspect-ratio: 1.571; }
.art-cash1 { background-position: 100% 100%; aspect-ratio: 1.571; }
.art-diningout { background-image: url('/assets/dining-out.svg'); background-size: contain; background-position: center; }
.art-budget { background-image: url('/assets/budget-admin.svg'); background-size: contain; background-position: center; }
.password-label { margin-top: 16px; }
.account-section h2 { color: var(--green); }
.record .record-icon { background: transparent; width: 54px; height: 48px; }
.record .record-icon .reward-art-wrap { width: 54px; height: 48px; }
.draw-record .record-icon { width: 44px; height: 44px; }
.draw-record .record-icon .reward-art-wrap { width: 44px; height: 44px; }
.milestone { background: linear-gradient(110deg, #edf8e6, #edfaf1); border-color: #deebd3; box-shadow: 0 3px 12px #9caf7a12; }
.milestone .reward-art-wrap { width: 58px; height: 54px; }
.milestone { gap: 10px; }
.completed-wish { display: flex; gap: 12px; align-items: center; }
.completed-wish > .reward-art-wrap { width: 76px; height: 66px; }
.completed-wish p { font-size: 12px; }
.draw-button {
  border-radius: 18px; border: 1px solid #ef9a3b; color: #68340e;
  background: linear-gradient(#ffb747 0%, #ff9f32 42%, #f58c24 100%);
  box-shadow: inset 0 2px 2px #ffffff80, 0 4px 0 #d77322, 0 7px 18px #edac5330;
}
.draw-button:disabled { background: linear-gradient(#eaf0df, #e0e9d6); border-color: #d7e2cd; color: #6e8165; box-shadow: 0 3px 0 #c8d7bc; }
.record { border-color: #eeeadd; box-shadow: 0 5px 15px #a49c5e09; background: linear-gradient(115deg, #fff, #fffefa); }
.stat { background: linear-gradient(120deg, #fff8e9, #fff2d7); border-color: #f0e5c5; box-shadow: inset 0 1px #fff, 0 4px 14px #ae9d5c0c; }
.stat + .stat { background: linear-gradient(120deg, #f5fbee, #eaf5e6); }
.point-summary { background: linear-gradient(130deg, #f4fbee, #e5f7ed); }
.bottom-nav { background: #fffefaf2; border-color: #e9ecdd; }
.nav-item.active { color: #d47c21; }
.nav-item.active:before { background: #fff0d5; }
.nav-item.active:after { background: #e49a36; }
.result .result-icon { width: 142px; height: 112px; background: radial-gradient(ellipse, #fff2c7, #fffdf5 72%); box-shadow: none; border: 0; transform: none; border-radius: 30px; }
.result .result-icon .reward-art-wrap { width: 142px; height: 112px; }
.result .result-icon .reward-art { width: 142px; }
.result:before { margin-bottom: 8px; }
.login-hero { background: url('/assets/countryside-v1.png') right bottom / 100% auto no-repeat; padding-bottom: 42px; margin-bottom: 20px; }
.login-form { box-shadow: 0 5px 18px #a6ab7810; }
.login-hero .subtitle { background: #fffef8b3; display: inline-block; padding-inline: 6px; border-radius: 6px; }
@media(max-width:360px) {
  .child-hero { padding: 15px 11px 27px; min-height: 149px; }
  .child-hero h1 { font-size: 23px; }
  .child-hero .subtitle { font-size: 10px; }
  .prize[data-prize] { min-height: 108px; }
  .prize .reward-art-wrap { height: 66px; }
  .prize-name { font-size: 11px; }
  .wish-title { font-size: 15px; }
  .wish-top { padding-right: 68px; }
  .wish-description { font-size: 10px; }
}