:root{
  --candy-pink:#F48FB1; --candy-blue:#7CC4FF; --candy-mint:#81C784;
  --candy-orange:#FFB74D; --candy-purple:#B39DDB; --candy-red:#F53F3F;
  --ink:#5D4037;
}
*{ -webkit-tap-highlight-color:transparent; }
body{ font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; background:#F2F4F8; }
.font-cute{ font-family:'ZCOOL KuaiLe',"PingFang SC","Microsoft YaHei",cursive; }

#left-pane{ min-height:100vh; background:linear-gradient(180deg,#FFF3E0 0%,#E3F2FD 60%,#F3E5F5 100%); position:relative; overflow:hidden; }
#app-screen{ position:relative; z-index:2; max-width:860px; margin:0 auto; padding:24px 32px 64px; }

.float-star{ position:absolute; color:#fff; opacity:.55; z-index:1; animation:floaty 6s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-18px) rotate(15deg);} }

.candy-card{ background:#fff; border:3px solid; border-radius:28px; box-shadow:0 6px 0 rgba(0,0,0,.06); transition:transform .15s, box-shadow .15s; }
.candy-card:hover{ transform:translateY(-2px); }

.kid-btn{ border:none; border-radius:999px; font-weight:800; cursor:pointer; transition:transform .12s, filter .12s; box-shadow:0 5px 0 rgba(0,0,0,.12); }
.kid-btn:active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.12); }
.btn-add{ background:linear-gradient(180deg,#A5D6A7,#66BB6A); color:#fff; }
.btn-sub{ background:linear-gradient(180deg,#FFCC80,#FFA726); color:#fff; }
.btn-blue{ background:linear-gradient(180deg,#90CAF9,#42A5F5); color:#fff; }

.chip{ border:2.5px solid #eee; background:#fff; border-radius:999px; padding:6px 14px; font-size:14px; font-weight:700; cursor:pointer; transition:all .12s; }
.chip:hover{ transform:scale(1.08); }
.chip-add{ border-color:#A5D6A7; color:#2E7D32; background:#F1F8E9; }
.chip-sub{ border-color:#FFCC80; color:#E65100; background:#FFF8E1; }

.tab-btn{ border-radius:999px; padding:5px 16px; font-size:14px; font-weight:700; color:#9E9E9E; cursor:pointer; border:none; background:transparent; }
.tab-btn.on{ background:#FFF3E0; color:#EF6C00; }

.bar-wrap{ display:flex; align-items:flex-end; justify-content:center; gap:3px; height:110px; }
.bar{ width:11px; border-radius:6px 6px 3px 3px; transition:height .5s cubic-bezier(.34,1.56,.64,1); }
.bar.add{ background:linear-gradient(180deg,#81C784,#43A047); }
.bar.sub{ background:linear-gradient(180deg,#FFB74D,#F57C00); }

.modal-mask{ position:fixed; inset:0; background:rgba(93,64,55,.45); backdrop-filter:blur(3px); z-index:50; display:none; align-items:center; justify-content:center; }
.modal-mask.show{ display:flex; }
.modal-card{ animation:pop .25s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop{ from{ transform:scale(.7); opacity:0;} to{ transform:scale(1); opacity:1;} }
@keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-8px);} 75%{transform:translateX(8px);} }
.shake{ animation:shake .3s 2; }

@keyframes popNum{ 0%{transform:scale(1);} 40%{transform:scale(1.35); color:#FF7043;} 100%{transform:scale(1);} }
.num-pop{ animation:popNum .5s; display:inline-block; }

.confetti{ position:fixed; top:-12px; z-index:99; pointer-events:none; border-radius:3px; animation:fall linear forwards; }
@keyframes fall{ to{ transform:translateY(105vh) rotate(720deg); opacity:.6; } }

#toast{ position:fixed; left:50%; bottom:36px; transform:translateX(-50%) translateY(80px); background:#5D4037; color:#fff; padding:12px 24px; border-radius:999px; font-weight:700; z-index:100; opacity:0; transition:all .35s cubic-bezier(.34,1.56,.64,1); max-width:90vw; text-align:center; }
#toast.show{ transform:translateX(-50%) translateY(0); opacity:1; }

/* 孩子模式 */
body.kid-mode .parent-only{ display:none !important; }
body.kid-mode #app-screen{ max-width:640px; }
body.kid-mode .kid-zoom{ font-size:1.25em; }

@media (max-width:640px){
  #app-screen{ padding:16px 14px 48px; }
}