:root{--bg:#F6F5F1;--card:#fff;--ink:#1F2421;--muted:#6B716C;--line:#E6E3DC;--accent:#286E61;--soft:#E2F0EC;--warn:#8A5A0F;--warnsoft:#FBF1DE;--red:#B42318;--redsoft:#FDE8E6}
*{box-sizing:border-box;margin:0;padding:0}
body{width:412px;height:915px;overflow:hidden;background:var(--bg);color:var(--ink);font-family:"Noto Sans",system-ui,sans-serif;font-size:16px;line-height:1.35;position:relative}
.status{height:28px;display:flex;justify-content:space-between;padding:6px 20px 0;font-size:13px;color:var(--muted)}
.tag{position:absolute;top:5px;left:50%;transform:translateX(-50%);background:#7A5AF8;color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.wrap{padding:6px 18px 0}
h1{font-size:26px;font-weight:700}h2{font-size:18px;font-weight:650}
.sub{color:var(--muted);font-size:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin-top:12px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.05)}
.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}
.btn{display:flex;align-items:center;justify-content:center;height:52px;border-radius:14px;background:var(--accent);color:#fff;font-weight:650;font-size:17px}
.btn.ghost{background:var(--soft);color:var(--accent)}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600;background:var(--soft);color:var(--accent)}
.pill.w{background:var(--warnsoft);color:var(--warn)}.pill.r{background:var(--redsoft);color:var(--red)}
.bar{height:12px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:8px}.bar i{display:block;height:100%;background:var(--accent)}
.tabs{position:absolute;left:0;right:0;bottom:0;height:72px;background:var(--card);border-top:1px solid var(--line);display:flex}
.tabs div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;color:var(--muted);gap:2px}
.tabs div b{font-size:22px;font-weight:400}.tabs .on{color:var(--accent);font-weight:700}
.ex{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-top:10px}
.num{width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.num.done{background:var(--accent);color:#fff}
.step{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.sb{width:64px;height:64px;border-radius:16px;background:var(--soft);color:var(--accent);font-size:32px;font-weight:600;display:flex;align-items:center;justify-content:center}
.val{font-size:40px;font-weight:700;text-align:center}.val small{display:block;font-size:13px;color:var(--muted);font-weight:500}
.big4{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.big4 div{height:124px;border-radius:18px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:650;font-size:17px;gap:6px}
.big4 div b{font-size:36px;font-weight:400}.big4 .main{background:var(--accent);color:#fff;border:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips span{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:14px;font-weight:600}
.chips .on{background:var(--accent);color:#fff;border-color:var(--accent)}
.li{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.li:first-child{border-top:none}
.x{width:32px;height:32px;border-radius:50%;background:var(--bg);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.bub{max-width:82%;padding:12px 14px;border-radius:18px;margin-top:10px;font-size:15px}
.ai{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:6px}
.me{background:var(--accent);color:#fff;margin-left:auto;border-bottom-right-radius:6px}
.dim{position:absolute;inset:0;background:rgba(20,25,22,.45)}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--bg);border-radius:24px 24px 0 0;padding:10px 18px 18px}
.grab{width:44px;height:5px;border-radius:3px;background:#cfccc4;margin:0 auto 10px}
.macro{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;text-align:center}
.macro div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 4px}
.macro b{display:block;font-size:22px}.macro span{font-size:12px;color:var(--muted)}