/* ========== 正式版样式（三套主题 + 游戏化开关） ========== */
:root[data-theme="warm"]{
  --bg:#FBF3E4; --card:#FFFDF6; --ink:#4A3A28; --muted:#8A7357;
  --accent:#B8772D; --accent2:#D9A441; --accent-ink:#fff;
  --line:#E8DCC4; --ok:#4C8C5B; --danger:#C65B4A;
}
:root[data-theme="orange"]{
  --bg:#FFF1E0; --card:#FFFBF4; --ink:#3E2C1C; --muted:#9A7048;
  --accent:#E05E1B; --accent2:#F08A3C; --accent-ink:#fff;
  --line:#F0DCC0; --ok:#3F7A4C; --danger:#C65B4A;
}
:root[data-theme="green"]{
  --bg:#EFF5EC; --card:#FBFDF9; --ink:#2F3B2A; --muted:#6F8267;
  --accent:#4C8C5B; --accent2:#7FB069; --accent-ink:#fff;
  --line:#DCE8D4; --ok:#2F6B3E; --danger:#C65B4A;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{font-size:clamp(20px, 4.6vw, 26px);}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  line-height:1.55; touch-action:manipulation;}
button{font-family:inherit; font-size:1rem; border:none; cursor:pointer;}
button:active{transform:scale(.97);}

#app{max-width:520px; margin:0 auto; padding:0 1rem calc(6.5rem + env(safe-area-inset-bottom)) 1rem;}

header.top{position:sticky; top:0; z-index:20; background:var(--bg);
  padding:.8rem 0 .5rem; border-bottom:2px solid var(--line); margin-bottom:.6rem;}
.top-row{display:flex; justify-content:space-between; align-items:center;}
.greet{font-weight:700; font-size:1.15rem;}
.date{color:var(--muted); font-size:.78rem;}
.icon-btn{background:var(--card); border:2px solid var(--line); border-radius:1.2rem;
  padding:.15rem .65rem; font-size:.9rem; color:var(--accent);}

.card{background:var(--card); border:2px solid var(--line); border-radius:1.2rem;
  padding:1rem 1.1rem; margin:.7rem 0; box-shadow:0 2px 6px rgba(0,0,0,.04);}
.card h3{margin:0 0 .5rem; font-size:1.02rem; display:flex; align-items:center; gap:.4rem;}
.card .sub{color:var(--muted); font-size:.82rem;}

.hero{text-align:center; padding:1.1rem .5rem .9rem;}
.hero .day{font-size:2.6rem; font-weight:800; color:var(--accent); line-height:1.1;}
.hero .day small{font-size:.42em; font-weight:600; color:var(--ink);}
.hero .subline{margin-top:.4rem; color:var(--muted); font-size:.85rem;}
.hero .subline b{color:var(--accent);}

.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem;}
.grid3 .g{background:var(--card); border:2px solid var(--line); border-radius:1rem;
  text-align:center; padding:.7rem .3rem;}
.grid3 .g .v{font-size:1.35rem; font-weight:800; color:var(--accent);}
.grid3 .g .l{font-size:.72rem; color:var(--muted);}

.hp-wrap{margin-top:.3rem;}
.hp-track{height:1.15rem; background:var(--line); border-radius:.8rem; overflow:hidden;}
.hp-fill{height:100%; background:linear-gradient(90deg,var(--accent2),var(--accent));
  border-radius:.8rem; transition:width 1s;}
.hp-text{display:flex; justify-content:space-between; font-size:.72rem; color:var(--muted); margin-top:.15rem;}

.big-btn{display:block; width:100%; padding:1.05rem .8rem; border-radius:1.3rem;
  font-size:1.25rem; font-weight:800; background:var(--accent); color:var(--accent-ink);
  box-shadow:0 4px 0 rgba(0,0,0,.12); margin:.5rem 0;}
.big-btn.alt{background:var(--card); color:var(--accent); border:3px solid var(--accent); box-shadow:none;}
.btn{display:inline-block; padding:.6rem 1rem; border-radius:2rem; font-size:.95rem;
  background:var(--card); border:2px solid var(--line); color:var(--accent);}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.btn.ok{background:var(--ok); color:#fff; border-color:var(--ok);}
.btn.ghost{background:transparent;}
.btn.danger{background:var(--danger); color:#fff; border-color:var(--danger);}

.checkin{display:flex; align-items:center; justify-content:space-between; gap:.6rem;}
.checkin.done .ci-btn{background:var(--ok); color:#fff; border-color:var(--ok);}
.ci-btn{border:3px dashed var(--accent); color:var(--accent); border-radius:1rem;
  padding:.7rem 1rem; font-size:1.02rem; font-weight:700; background:var(--card); flex:1;}

.task{display:flex; align-items:center; gap:.6rem; padding:.4rem 0; font-size:.95rem;}
.task .dot{width:1.3rem; height:1.3rem; border-radius:50%; border:3px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:.75rem; color:var(--muted);}
.task.on .dot{background:var(--ok); border-color:var(--ok); color:#fff;}
.task .xp{margin-left:auto; color:var(--muted); font-size:.75rem;}

.recov{display:flex; gap:.25rem; margin-top:.6rem;}
.recov .node{flex:1; text-align:center; font-size:.62rem; color:var(--muted);}
.recov .node .dot{width:.8rem; height:.8rem; border-radius:50%; background:var(--line); margin:0 auto .25rem;}
.recov .node.on .dot{background:var(--accent2);}
.recov .node.on{color:var(--accent);}

.msg{background:linear-gradient(135deg,var(--card),#fff2df); padding:.9rem 1rem;
  border-left:6px solid var(--accent2); border-radius:.9rem; margin:.5rem 0;}
.msg .who{font-size:.78rem; color:var(--accent); font-weight:700; margin-top:.3rem;}

nav.bottom{position:fixed; bottom:0; left:0; right:0; z-index:30; background:var(--card);
  border-top:2px solid var(--line); padding-bottom:env(safe-area-inset-bottom);}
nav.bottom .wrap{max-width:520px; margin:0 auto; display:flex; justify-content:space-around;}
nav.bottom button{background:none; padding:.55rem 0 .7rem; min-width:4.2rem;
  font-size:.72rem; color:var(--muted); display:flex; flex-direction:column; gap:.15rem; align-items:center;}
nav.bottom button .ic{font-size:1.3rem;}
nav.bottom button.active{color:var(--accent); font-weight:700;}

.view{display:none;}
.view.active{display:block;}
body[data-g="off"] .gamed{display:none !important;}

.overlay{position:fixed; inset:0; z-index:50; background:var(--bg);
  max-width:520px; margin:0 auto; display:none; flex-direction:column;}
.overlay.open{display:flex;}
.overlay .o-head{display:flex; align-items:center; gap:.4rem; padding:1rem 1rem .4rem;}
.overlay .o-head .close{font-size:1.3rem; background:none; color:var(--muted); padding:.2rem .5rem;}
.overlay .o-body{flex:1; overflow-y:auto; padding:0 1.1rem 2rem;}

.urge-hero{text-align:center; padding:1rem 0 .5rem;}
.urge-hero .wave{font-size:3rem; animation:wave 1.6s ease-in-out infinite;}
@keyframes wave{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-14px) scale(1.05);}}.cd{font-size:3.2rem; font-weight:800; color:var(--accent); margin:.4rem 0;}
.breath{width:7rem; height:7rem; border-radius:50%; margin:1rem auto;
  border:6px solid var(--accent2); display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:700; color:var(--accent); transition:transform 6s ease-in-out;}
.breath.in{transform:scale(1);}
.breath.out{transform:scale(.62);}
/* 动效开关：关掉后波浪/呼吸不再动，防晕眩 */
body[data-a="off"] .urge-hero .wave{animation:none;}
body[data-a="off"] .breath{transition:none;}
body[data-a="off"] .breath.in, body[data-a="off"] .breath.out{transform:none;}

.mile{display:flex; align-items:center; gap:.7rem; padding:.55rem 0; border-bottom:1px dashed var(--line);}
.mile:last-child{border-bottom:none;}
.mile .mc{width:2.3rem; height:2.3rem; border-radius:50%; background:var(--line);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem; font-weight:800; color:var(--muted); flex-shrink:0;}
.mile.done .mc{background:var(--accent); color:#fff;}
.mile.next{border:2px dashed var(--accent2); border-radius:.8rem; padding:.45rem;}
.mile .ti{flex:1;}
.mile .ti .n{font-weight:700;}
.mile .ti .d{font-size:.78rem; color:var(--muted);}
.mile .reward{border:2px solid var(--line); border-radius:.8rem; padding:.25rem .6rem; font-size:.78rem; color:var(--muted);}
.mile.done .reward{color:var(--accent); border-color:var(--accent);}

.badge-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem;}
.badge{background:var(--card); border:2px solid var(--line); border-radius:1rem;
  text-align:center; padding:.8rem .3rem .6rem;}
.badge .ic{font-size:1.7rem;}
.badge .t{font-size:.66rem; color:var(--muted); margin-top:.2rem;}
.badge.locked{opacity:.42;}
.badge.done{border-color:var(--accent2);}

.lesson{background:var(--card); border:3px solid var(--accent2); border-radius:1.2rem;
  padding:1.1rem 1.2rem; margin:.8rem 0;}
.lesson .k{font-size:.72rem; color:var(--accent); font-weight:700; letter-spacing:.08em;}
.lesson h2{margin:.25rem 0 .6rem; font-size:1.35rem;}
.lesson p{margin:.35rem 0;}
.lesson-lock{background:var(--card); border:2px dashed var(--line); border-radius:1.2rem;
  padding:.9rem 1.1rem; margin:.8rem 0; color:var(--muted); text-align:center;}

.alt-card{border:2px solid var(--line); border-radius:1rem; margin:.5rem 0; background:var(--card); overflow:hidden;}
.alt-card .head{display:flex; align-items:center; gap:.6rem; padding:.8rem 1rem; font-weight:700; width:100%; background:none; font-size:.98rem; color:var(--ink); text-align:left;}
.alt-card .steps{display:none; padding:0 1rem .9rem;}
.alt-card.open .steps{display:block;}
.alt-card .steps li{margin:.3rem 0;}

.bars{display:flex; align-items:flex-end; gap:2px; height:7rem; padding-top:.5rem;}
.bars .b{flex:1; background:var(--accent); border-radius:2px 2px 0 0; min-height:2px;}
.bars .b.zero{background:var(--line);}
.bars .b.hi{background:var(--danger);}
.bars-label{display:flex; justify-content:space-between; font-size:.68rem; color:var(--muted);}

.stat{display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px dashed var(--line); font-size:.95rem;}
.stat:last-child{border:none;}
.stat .num{color:var(--accent); font-weight:700;}

.setrow{display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.55rem 0;}
.setrow label{flex:1;}
input[type=number],input[type=text]{font-family:inherit; font-size:1rem; padding:.5rem .6rem;
  border:2px solid var(--line); border-radius:.8rem; background:var(--card); color:var(--ink); width:7rem; text-align:center;}
.switch{width:3.4rem; height:1.9rem; border-radius:1.2rem; background:var(--line); position:relative; transition:background .2s;}
.switch::after{content:""; position:absolute; top:.2rem; left:.25rem; width:1.5rem; height:1.5rem; border-radius:50%; background:#fff; transition:left .2s;}
.switch.on{background:var(--ok);}
.switch.on::after{left:1.65rem;}

.chips{display:flex; flex-wrap:wrap; gap:.45rem; margin:.4rem 0;}
.chip{border:2px solid var(--line); background:var(--card); border-radius:2rem; padding:.45rem .8rem; font-size:.9rem;}
.chip.sel{border-color:var(--accent); color:var(--accent); font-weight:700;}

textarea{font-family:inherit; font-size:1rem; padding:.6rem .7rem; border:2px solid var(--line);
  border-radius:.8rem; background:var(--card); color:var(--ink); width:100%; min-height:4.5rem; resize:vertical;}

#toast{position:fixed; left:50%; bottom:6.5rem; transform:translateX(-50%);
  background:rgba(60,45,25,.92); color:#fff; padding:.7rem 1.2rem; border-radius:2rem;
  font-size:.92rem; z-index:99; display:none; max-width:80%; text-align:center;}

.demo-note{font-size:.78rem; color:var(--muted); background:var(--card); border:1px dashed var(--line);
  border-radius:.8rem; padding:.5rem .7rem; margin:.7rem 0;}