/* 奕宝工作台 · 样式
   天蓝底 + 白卡片 + 大圆角，给 5-6 岁的手指用：所有能点的东西 ≥ 56px
   主色变量叫 --pri（原来叫 --green，2026-08-04 换成天蓝后改名） */

:root{
  --bg:#EDF6FD; --bg2:#DCEDFA;
  --card:#FFFFFF; --ink:#1E3A50; --ink2:#64839C; --ink3:#9AB3C8;
  --line:#D5E7F5;
  --pri:#46A6E8; --pri-d:#3489CB; --pri-l:#E2F1FD;
  --pink:#F58BA0; --pink-l:#FDE7EC;
  --blue:#7FB5E8; --blue-l:#E6F1FB;
  --yellow:#F2C14E; --yellow-l:#FDF2D8;
  --purple:#B79BE0; --purple-l:#F0E9FA;
  --red:#E8756B; --red-l:#FCEAE8;
  --r:22px; --r2:16px;
  --shadow:0 2px 10px rgba(70,120,165,.10);
  --shadow2:0 6px 22px rgba(70,120,165,.18);
  --rail:96px;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
/* 必须在所有布局规则之前：作者样式会压过浏览器对 [hidden] 的 display:none，
   .app / .gate / .pop 都写了 display:flex，不加这条它们会一直显示出来。 */
[hidden]{display:none !important}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:"PingFang SC","HarmonyOS Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit}
input,select,textarea{font-family:inherit; font-size:17px}

/* ---------------- 闸门 ---------------- */
.gate{position:fixed; inset:0; z-index:99; background:var(--bg);
  display:flex; align-items:center; justify-content:center; padding:24px}
.gatebox{width:100%; max-width:360px; text-align:center; background:var(--card);
  border-radius:var(--r); padding:36px 26px; box-shadow:var(--shadow2)}
.gatemark{font-size:56px; line-height:1}
.gatebox h1{font-size:26px; margin:12px 0 6px}
.gatebox p{color:var(--ink2); font-size:15px; margin:0 0 20px}
.gatebox input{width:100%; padding:16px; border:2px solid var(--line); border-radius:14px;
  text-align:center; letter-spacing:2px; background:var(--bg); outline:none}
.gatebox input:focus{border-color:var(--pri)}
.gateerr{color:var(--red); font-size:14px; min-height:20px; margin-top:10px}

/* ---------------- 骨架 ---------------- */
.app{display:flex; height:100%; overflow:hidden}

.rail{
  width:var(--rail); flex:0 0 var(--rail); background:var(--bg2);
  border-right:1px solid var(--line); display:flex; flex-direction:column;
  align-items:center; padding:14px 0 10px;
}
.railtop{text-align:center; margin-bottom:10px}
.avatar{width:52px; height:52px; border-radius:18px; margin:0 auto;
  background:linear-gradient(140deg,var(--pri),var(--blue));
  color:#fff; font-size:24px; font-weight:700; display:flex; align-items:center; justify-content:center}
.railname{font-size:13px; color:var(--ink2); margin-top:5px}
.railnav{flex:1; width:100%; overflow-y:auto; padding:4px 8px;
  display:flex; flex-direction:column; gap:3px; scrollbar-width:none}
.railnav::-webkit-scrollbar{display:none}
.railitem{width:100%; padding:9px 2px; border-radius:15px; text-align:center;
  color:var(--ink2); font-size:12px; line-height:1.25; transition:.15s}
.railitem i{display:block; font-size:24px; font-style:normal; margin-bottom:2px}
.railitem.on{background:var(--card); color:var(--ink); font-weight:600; box-shadow:var(--shadow)}
.railitem .dot{display:inline-block; min-width:17px; height:17px; padding:0 4px;
  background:var(--red); color:#fff; border-radius:9px; font-size:11px; line-height:17px;
  margin-left:2px; vertical-align:top}
.railfoot{display:flex; gap:6px; padding-top:8px}
.railbtn{width:38px; height:38px; border-radius:12px; background:var(--card);
  font-size:18px; box-shadow:var(--shadow)}

.main{flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden}
.topbar{display:flex; align-items:center; gap:12px; padding:14px 20px 10px}
.topbar h2{font-size:22px; margin:0}
.sp{flex:1}
.purse{display:flex; gap:8px}
.purse span{background:var(--card); border-radius:14px; padding:8px 14px;
  font-weight:700; font-size:16px; box-shadow:var(--shadow); white-space:nowrap}
.purse-star{color:#D99A15}
.purse-coin{color:#B07C3F}

.view{flex:1; overflow-y:auto; padding:4px 20px 40px; -webkit-overflow-scrolling:touch}

.tabbar{display:none}

/* ---------------- 通用卡片 ---------------- */
.card{background:var(--card); border-radius:var(--r); padding:18px; margin-bottom:14px;
  box-shadow:var(--shadow)}
.card-hd{display:flex; align-items:center; gap:8px; margin-bottom:14px}
.card-hd h3{margin:0; font-size:19px}
.card-hd .sub{color:var(--ink3); font-size:14px; font-weight:400}
.muted{color:var(--ink2)}
.empty{text-align:center; color:var(--ink3); padding:32px 16px; font-size:15px}
.empty .big{font-size:44px; display:block; margin-bottom:10px}

/* ---------------- 首页 ---------------- */
.hero{background:linear-gradient(140deg,#F4FBFF,#DCEEFC);
  border-radius:var(--r); padding:22px; margin-bottom:14px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:20px}
.hero-num{font-size:56px; font-weight:800; line-height:1; color:#E0A11B;
  letter-spacing:-1px}
.hero-num small{font-size:20px; font-weight:600; margin-left:4px}
.hero-txt{flex:1; min-width:0}
.hero-hello{font-size:19px; font-weight:700; margin-bottom:4px}
.hero-sub{color:var(--ink2); font-size:14px}
.hero-ring{width:82px; height:82px; flex:0 0 82px; position:relative}
.hero-ring svg{transform:rotate(-90deg)}
.hero-ring .rt{position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:19px; font-weight:800; color:var(--pri-d)}

.statrow{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px}
.stat{border-radius:var(--r2); padding:16px 12px; text-align:center}
.stat .v{font-size:27px; font-weight:800; line-height:1.1}
.stat .l{font-size:13px; margin-top:4px; opacity:.75}
.stat .bar{height:6px; border-radius:3px; background:rgba(0,0,0,.07); margin-top:9px; overflow:hidden}
.stat .bar i{display:block; height:100%; border-radius:3px}
.stat.g{background:var(--pri-l); color:#1F6FA8}
.stat.g .bar i{background:var(--pri)}
.stat.b{background:var(--blue-l); color:#3B6E9C}
.stat.b .bar i{background:var(--blue)}
.stat.y{background:var(--yellow-l); color:#9A7212}
.stat.y .bar i{background:var(--yellow)}

/* 任务大卡片 */
.tasks{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.task{
  background:var(--card); border:2px solid var(--line); border-radius:var(--r2);
  padding:14px 10px; text-align:center; min-height:118px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  transition:.15s; position:relative; overflow:hidden;
}
.task:active{transform:scale(.95)}
.task .ic{font-size:36px; line-height:1.1}
.task .nm{font-size:16px; font-weight:600}
.task .py{font-size:12px; color:var(--ink3); letter-spacing:.3px}
.task .sc{font-size:13px; color:var(--yellow); font-weight:700}
.task.done{background:var(--pri-l); border-color:var(--pri); color:#1F6FA8}
.task.done .sc{color:var(--pri-d)}
.task.wait{background:var(--yellow-l); border-color:var(--yellow)}
.task .badge{position:absolute; top:6px; right:8px; font-size:15px}
.task.full{opacity:.45}

/* 分类小标题 */
.grp{margin:18px 0 10px; font-size:15px; font-weight:700; color:var(--ink2);
  display:flex; align-items:center; gap:7px}
.grp:first-child{margin-top:2px}

/* ---------------- 心愿商店 ---------------- */
.wishes{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px}
.wish{background:var(--card); border:2px solid var(--line); border-radius:var(--r2);
  padding:16px 12px; text-align:center; transition:.15s; position:relative}
.wish:active{transform:scale(.96)}
.wish .ic{font-size:38px; line-height:1.1}
.wish .nm{font-size:15px; font-weight:600; margin-top:4px}
.wish .py{font-size:11px; color:var(--ink3)}
.wish .price{margin-top:8px; display:inline-block; background:var(--yellow-l);
  color:#9A7212; font-weight:800; font-size:15px; padding:4px 12px; border-radius:12px}
.wish.ok{border-color:var(--pri); background:var(--pri-l)}
.wish.ok .price{background:var(--pri); color:#fff}
.wish.no{opacity:.62}
.wish.no .price{background:#DEEAF3; color:var(--ink3)}
.wish .lack{font-size:12px; color:var(--ink3); margin-top:5px}

/* ---------------- 抓娃娃 ---------------- */
.tierbar{display:flex; gap:8px; margin-bottom:14px}
.tierbar button{flex:1; padding:13px 6px; border-radius:14px; background:var(--card);
  font-size:15px; font-weight:600; color:var(--ink2); box-shadow:var(--shadow)}
.tierbar button.on{background:var(--pri); color:#fff}
.machine{background:linear-gradient(160deg,#EBF6FF,#D2E8FB); border-radius:var(--r);
  padding:18px; text-align:center; box-shadow:var(--shadow)}
.claw{font-size:40px; margin-bottom:-6px}
.balls{background:#fff; border-radius:18px; padding:16px 12px; min-height:130px;
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center}
.ball{width:38px; height:38px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; color:#fff; font-size:17px; font-weight:800}
.gobtn{margin-top:16px; width:104px; height:104px; border-radius:50%;
  background:linear-gradient(160deg,var(--pri),var(--pri-d)); color:#fff;
  font-size:28px; font-weight:800; box-shadow:0 6px 0 #2B74AE; transition:.1s}
.gobtn:active{transform:translateY(4px); box-shadow:0 2px 0 #2B74AE}
.gobtn:disabled{background:#D9D2C4; box-shadow:0 6px 0 #C2BAA9; cursor:not-allowed}
.gocost{margin-top:10px; color:var(--ink2); font-size:14px}

/* 中奖弹窗 */
.pop{position:fixed; inset:0; z-index:120; background:rgba(20,45,66,.55);
  display:flex; align-items:center; justify-content:center; padding:24px}
.popbox{background:var(--card); border-radius:28px; padding:32px 26px; text-align:center;
  max-width:340px; width:100%; animation:pin .35s cubic-bezier(.2,1.5,.4,1)}
@keyframes pin{from{transform:scale(.5); opacity:0}to{transform:scale(1); opacity:1}}
.popbox .ic{font-size:72px; line-height:1}
.popbox h3{font-size:24px; margin:12px 0 6px}
.popbox p{color:var(--ink2); margin:0 0 22px; font-size:15px}

/* ---------------- 存折 / 列表 ---------------- */
.rows{display:flex; flex-direction:column}
.row{display:flex; align-items:center; gap:12px; padding:14px 4px;
  border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .ic{font-size:26px; width:34px; text-align:center; flex:0 0 34px}
.row .m{flex:1; min-width:0}
.row .t{font-size:16px; font-weight:600}
.row .s{font-size:13px; color:var(--ink3); margin-top:1px}
.row .n{font-size:19px; font-weight:800; white-space:nowrap}
.row .n.up{color:var(--pri-d)}
.row .n.dn{color:var(--red)}
.row .n.zero{color:var(--ink3)}
.row .bal{font-size:12px; color:var(--ink3); text-align:right; margin-top:2px}

/* ---------------- 成长统计 ---------------- */
.chart{display:flex; align-items:flex-end; gap:3px; height:150px; padding-top:10px}
.chart .col{flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; gap:2px; height:100%}
.chart .bar{width:100%; max-width:16px; border-radius:4px 4px 0 0; background:var(--pri);
  min-height:2px}
.chart .bar.neg{background:var(--red)}
.chart .lb{font-size:9px; color:var(--ink3); height:12px}
.bigstat{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; text-align:center}
.bigstat .v{font-size:30px; font-weight:800; color:var(--pri-d)}
.bigstat .l{font-size:13px; color:var(--ink2); margin-top:2px}

/* ---------------- 家长端 ---------------- */
.pend{display:flex; align-items:center; gap:12px; padding:13px 4px;
  border-bottom:1px solid var(--line)}
.pend:last-child{border-bottom:0}
.pend .ic{font-size:26px}
.pend .m{flex:1; min-width:0}
.pend .t{font-weight:600}
.pend .s{font-size:12px; color:var(--ink3)}
.pend .acts{display:flex; gap:8px}
.mini{padding:9px 15px; border-radius:12px; font-size:15px; font-weight:600}
.mini.ok{background:var(--pri); color:#fff}
.mini.no{background:var(--red-l); color:var(--red)}
.mini.gh{background:var(--bg2); color:var(--ink2)}

.btn-go{width:100%; padding:16px; border-radius:16px; background:var(--pri);
  color:#fff; font-size:18px; font-weight:700; margin-top:16px}
.btn-go:active{background:var(--pri-d)}
.btnrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
.btnrow button{flex:1; min-width:120px; padding:14px; border-radius:14px;
  background:var(--bg2); font-weight:600}
.btnrow button.pri{background:var(--pri); color:#fff}
.btnrow button.dan{background:var(--red-l); color:var(--red)}

.fld{margin-bottom:14px}
.fld label{display:block; font-size:14px; color:var(--ink2); margin-bottom:6px}
.fld input,.fld select{width:100%; padding:13px; border:2px solid var(--line);
  border-radius:13px; background:var(--bg); outline:none}
.fld input:focus,.fld select:focus{border-color:var(--pri)}

/* 家长端的表列多，窄屏让它自己横滚，别把整页撑破 */
.tscroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tscroll table.simple{min-width:820px}
table.simple{width:100%; border-collapse:collapse; font-size:15px}
table.simple th,table.simple td{padding:10px 6px; border-bottom:1px solid var(--line);
  text-align:left}
table.simple th{color:var(--ink2); font-weight:600; font-size:13px}
table.simple input{width:72px; padding:7px; border:2px solid var(--line);
  border-radius:9px; background:var(--bg); text-align:center}

/* ---------------- 学习闯关 ---------------- */
.subj{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px}
.subjcard{background:var(--card); border-radius:var(--r); padding:18px 12px; text-align:center;
  box-shadow:var(--shadow); border:3px solid transparent; transition:.15s}
.subjcard:active{transform:scale(.96)}
.subjcard.on{border-color:var(--pri)}
.subjcard .ic{font-size:40px; line-height:1.1}
.subjcard .nm{font-size:17px; font-weight:700; margin-top:4px}
.subjcard .pg{font-size:13px; color:var(--ink2); margin-top:3px}
.subjcard .due{display:inline-block; margin-top:6px; background:var(--red); color:#fff;
  font-size:12px; padding:2px 9px; border-radius:9px}

.groups{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.gcard{background:var(--card); border:2px solid var(--line); border-radius:var(--r2);
  padding:15px 12px; text-align:left; transition:.15s}
.gcard:active{transform:scale(.97)}
.gcard .gt{font-size:16px; font-weight:700}
.gcard .gs{font-size:13px; color:var(--ink2); margin-top:3px}
.gcard .gbar{height:7px; border-radius:4px; background:var(--bg2); margin-top:9px; overflow:hidden}
.gcard .gbar i{display:block; height:100%; background:var(--pri); border-radius:4px}
.gcard.lock{opacity:.45}
.gcard.done{border-color:var(--pri); background:var(--pri-l)}

.modepick{display:flex; gap:10px; margin:4px 0 14px}
.modepick button{flex:1; padding:15px; border-radius:16px; background:var(--card);
  font-size:16px; font-weight:700; box-shadow:var(--shadow)}
.modepick button.on{background:var(--pri); color:#fff}

.quizhead{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.quizhead .back{width:48px; height:48px; border-radius:15px; background:var(--card);
  font-size:22px; box-shadow:var(--shadow)}
.quizhead .pbar{flex:1; height:12px; border-radius:6px; background:var(--bg2); overflow:hidden}
.quizhead .pbar i{display:block; height:100%; background:var(--pri); border-radius:6px;
  transition:width .25s}
.quizhead .cnt{font-size:16px; font-weight:700; color:var(--ink2); white-space:nowrap}

.qcard{background:var(--card); border-radius:var(--r); padding:26px 20px; text-align:center;
  box-shadow:var(--shadow); margin-bottom:14px}
.bigchar{font-size:110px; line-height:1.15; font-weight:600}
.bigpy{font-size:24px; color:var(--pri-d); letter-spacing:1px; margin-bottom:4px}
.bigword{font-size:19px; color:var(--ink2); margin-top:8px}
.bigen{font-size:52px; font-weight:700; letter-spacing:.5px; word-break:break-word}
.bigmath{font-size:56px; font-weight:800; letter-spacing:2px}
.speakbtn{margin-top:16px; padding:14px 30px; border-radius:18px; background:var(--blue-l);
  color:#3B6E9C; font-size:19px; font-weight:700}
.speakbtn:active{background:var(--blue); color:#fff}

/* 古诗 */
.poem-t{font-size:30px; font-weight:800; letter-spacing:2px}
.poem-a{font-size:15px; color:var(--ink3); margin-top:2px}
.poem{margin:16px 0 4px}
.poem-py{font-size:14px; color:var(--pri-d); letter-spacing:.5px; line-height:1.5}
.poem-line{font-size:26px; font-weight:600; letter-spacing:2px; line-height:1.5;
  margin-bottom:6px}

.choices{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.choices.one{grid-template-columns:1fr}
.choices.one .choice{font-size:21px; letter-spacing:1px; min-height:70px; padding:16px 12px}
.choice{background:var(--card); border:3px solid var(--line); border-radius:20px;
  padding:20px 10px; font-size:34px; font-weight:700; min-height:92px; transition:.12s;
  box-shadow:var(--shadow)}
.choice.small{font-size:23px}
.choice:active{transform:scale(.95)}
.choice.right{background:var(--pri-l); border-color:var(--pri); color:#1F6FA8}
.choice.wrong{background:var(--red-l); border-color:var(--red); color:var(--red)}

.knowrow{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.knowrow button{padding:20px; border-radius:20px; font-size:20px; font-weight:700;
  box-shadow:var(--shadow)}
.knowrow .yes{background:var(--pri); color:#fff}
.knowrow .no{background:var(--yellow-l); color:#9A7212}

.levels{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px}
.lv{background:var(--card); border:2px solid var(--line); border-radius:var(--r2);
  padding:16px 12px; text-align:center; transition:.15s}
.lv:active{transform:scale(.96)}
.lv .n{font-size:26px; font-weight:800; color:var(--pri-d)}
.lv .t{font-size:15px; font-weight:600; margin-top:2px}
.lv .d{font-size:12px; color:var(--ink3); margin-top:2px}
.lv.pass{background:var(--pri-l); border-color:var(--pri)}
.lv.lock{opacity:.4}

/* ---------------- 塔防草坪（PvZ 味道，全原创 emoji + CSS） ---------------- */
.lawn{
  position:relative; border-radius:var(--r2); overflow:hidden; margin-bottom:14px;
  box-shadow:var(--shadow); background:#7FC65A;
  padding:10px 8px 8px;
}
/* 深浅相间的草皮条纹 */
.lawn::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.10) 0 16.666%, rgba(0,0,0,.05) 16.666% 33.333%);
  pointer-events:none;
}
.lawnbar{position:relative; display:flex; align-items:center; gap:8px;
  margin-bottom:6px; padding:0 2px; font-size:13px; font-weight:700; color:#1F5E2A}
.lawnbar .kills{background:rgba(255,255,255,.85); border-radius:10px; padding:2px 10px}
.lawnbar .sp2{flex:1}
.lawnbar .warn{background:#FFE08A; color:#8A5B00; border-radius:10px; padding:2px 10px}

.lane{position:relative; display:grid; grid-template-columns:repeat(6,1fr);
  align-items:center; height:74px}
.lane .cell{text-align:center; font-size:30px; line-height:1}
.lane .house{font-size:36px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.lane .plant{animation:grow .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes grow{from{transform:scale(0) translateY(10px); opacity:0}
                to{transform:scale(1) translateY(0); opacity:1}}

.zombie{position:absolute; top:50%; font-size:34px; line-height:1;
  transform:translate(-50%,-50%); transition:left .45s ease;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.28))}
.zombie.walk{animation:wob .7s ease-in-out infinite}
@keyframes wob{0%,100%{transform:translate(-50%,-50%) rotate(-5deg)}
               50%{transform:translate(-50%,-50%) rotate(5deg)}}
.zombie.dead{animation:die .5s forwards}
@keyframes die{to{transform:translate(-50%,-50%) scale(1.6) rotate(90deg); opacity:0}}

.pea{position:absolute; top:50%; font-size:17px; transform:translate(-50%,-50%);
  animation:shoot .42s linear forwards}
@keyframes shoot{to{left:var(--to); opacity:.2}}

.blocked{position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; background:rgba(255,255,255,.72); font-size:19px;
  font-weight:800; color:#1F5E2A; animation:flash .9s ease-out forwards}
@keyframes flash{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}}

.stars{font-size:34px; letter-spacing:4px; margin-top:6px}

/* ---------------- 弹层 ---------------- */
.scrim{position:fixed; inset:0; background:rgba(20,45,66,.45); z-index:100}
.sheet{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(460px,calc(100% - 32px)); max-height:84vh; overflow-y:auto;
  background:var(--card); border-radius:26px; padding:24px; z-index:101;
  box-shadow:var(--shadow2)}
.sheet h3{margin:0 0 4px; font-size:21px}
.sheet .sheetpy{color:var(--ink3); font-size:13px; margin-bottom:16px}
.tiers{display:flex; flex-direction:column; gap:10px}
.tier{display:flex; align-items:center; gap:12px; padding:16px;
  border:2px solid var(--line); border-radius:16px; text-align:left}
.tier:active{border-color:var(--pri); background:var(--pri-l)}
.tier .tl{flex:1; font-size:17px; font-weight:600}
.tier .ts{color:var(--yellow); font-weight:800; font-size:17px}

.toast{position:fixed; left:50%; bottom:96px; transform:translateX(-50%);
  background:rgba(20,45,66,.94); color:#fff; padding:13px 22px; border-radius:16px;
  z-index:130; font-size:16px; max-width:82%; text-align:center; box-shadow:var(--shadow2)}
.toast.err{background:var(--red)}

/* +N 飘字 */
.float{position:fixed; z-index:140; font-size:34px; font-weight:800; color:var(--yellow);
  pointer-events:none; animation:fl 1s ease-out forwards; text-shadow:0 2px 6px rgba(0,0,0,.15)}
@keyframes fl{
  0%{transform:translate(-50%,0) scale(.6); opacity:0}
  25%{transform:translate(-50%,-18px) scale(1.25); opacity:1}
  100%{transform:translate(-50%,-84px) scale(1); opacity:0}
}

/* ---------------- 手机端 ---------------- */
@media (max-width:768px){
  body{font-size:16px}
  .rail{display:none}
  .view{padding:2px 14px 96px}
  .topbar{padding:12px 14px 8px}
  .topbar h2{font-size:20px}
  .purse span{font-size:15px; padding:7px 11px}
  .hero{gap:14px; padding:18px}
  .hero-num{font-size:46px}
  .hero-ring{width:66px; height:66px; flex-basis:66px}
  .statrow{gap:9px}
  .stat{padding:13px 8px}
  .stat .v{font-size:23px}
  .tasks{grid-template-columns:repeat(3,1fr); gap:9px}
  .task{min-height:106px; padding:11px 5px}
  .task .ic{font-size:31px}
  .task .nm{font-size:14px}
  .task .py{font-size:10px}
  .wishes{grid-template-columns:repeat(2,1fr); gap:10px}

  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--card); border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 14px rgba(70,120,165,.10);
  }
  .tabbar button{flex:1; padding:6px 2px; border-radius:14px; color:var(--ink3);
    font-size:11px; line-height:1.25; position:relative}
  .tabbar button i{display:block; font-size:23px; font-style:normal; margin-bottom:1px}
  .tabbar button.on{color:var(--pri-d); font-weight:700}
  .tabbar button .dot{position:absolute; top:2px; right:calc(50% - 22px);
    min-width:16px; height:16px; padding:0 4px; background:var(--red); color:#fff;
    border-radius:8px; font-size:10px; line-height:16px}
  .toast{bottom:110px}
}

@media (min-width:769px){
  .view{max-width:1100px; width:100%}
}

/* 嗓音逐个试听 */
.voicelist{display:flex; flex-wrap:wrap; gap:8px}
.voicelist button{padding:10px 14px; border-radius:13px; background:var(--bg2);
  color:var(--ink2); font-size:14px; font-weight:600; border:2px solid transparent}
.voicelist button.on{background:var(--pri); color:#fff; border-color:var(--pri-d)}