:root{--teal:#0f766e;--teal2:#14b8a6;--ink:#10231f;--ink2:#5b6b67;--bg:#eef5f3;--card:#fff;--line:#dbe7e4;--amber:#f59e0b;--rose:#e11d48}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.4}
#app{max-width:520px;margin:0 auto;min-height:100vh;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.top{background:linear-gradient(135deg,#0f766e,#115e59);color:#fff;padding:calc(18px + env(safe-area-inset-top)) 18px 56px;border-radius:0 0 28px 28px}
.top-in{display:flex;align-items:center;gap:14px}
.logo{width:56px;height:56px;border-radius:16px;object-fit:cover;background:#fff2}
h1{margin:0;font-size:22px}.top p{margin:2px 0 0;opacity:.85;font-size:14px}
main{padding:0 14px;margin-top:-40px}
h2{font-size:15px;color:var(--ink2);margin:22px 6px 8px;font-weight:600}
.card{background:var(--card);border-radius:20px;padding:16px;box-shadow:0 2px 10px #0f766e14;margin-bottom:12px}
.tab{display:none}.tab.active{display:block}
.hero-card{display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:center}
.gauge-wrap{position:relative;width:130px;height:130px}
.gauge{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:11;stroke-linecap:round}
.g-bg{stroke:#e3eeeb}.g-fg{stroke:var(--teal2);stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset .4s ease,stroke .3s}
.gauge-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge-txt b{font-size:28px;font-variant-numeric:tabular-nums}.gauge-txt span{font-size:12px;color:var(--ink2)}
.hero-side{display:flex;flex-direction:column;gap:8px}
.stat{display:flex;justify-content:space-between;font-size:14px;color:var(--ink2)}.stat b{color:var(--ink);font-size:18px}
.pill{align-self:flex-start;font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px;background:#e3eeeb;color:var(--ink2)}
.pill.mid{background:#fef3c7;color:#92400e}.pill.ok{background:#ccfbf1;color:#0f766e}
.bonus-box{grid-column:1/-1;background:linear-gradient(135deg,#0f766e,#14b8a6);color:#fff;border-radius:16px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.bonus-box span{font-size:13px;opacity:.9;max-width:55%}.bonus-box b{font-size:30px;font-variant-numeric:tabular-nums}
.tiers{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tier{border:1.5px solid var(--line);border-radius:12px;padding:8px;text-align:center;color:var(--ink2);transition:.25s}
.tier i{display:block;font-style:normal;font-size:12px}.tier b{font-size:15px;color:var(--ink)}
.tier.hit{border-color:var(--teal2);background:#ecfdf9}
.list{padding:4px 16px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.row:last-child{border:0}
.lbl{display:flex;flex-direction:column}.lbl small{color:var(--ink2);font-size:12px;max-width:190px}
.stepper{display:flex;align-items:center;gap:6px;direction:ltr;flex-shrink:0}
.stepper button{width:44px;height:44px;border-radius:14px;border:0;background:#e3eeeb;color:var(--teal);font-size:24px;font-weight:600;cursor:pointer}
.stepper button.plus{background:var(--teal);color:#fff}
.stepper button:active{transform:scale(.94)}
.stepper output{min-width:34px;text-align:center;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 15px;font:inherit;font-size:14px;cursor:pointer;color:var(--ink)}
.chips button.on{background:var(--teal);border-color:var(--teal);color:#fff}
.bar{display:grid;grid-template-columns:78px 1fr 92px;gap:8px;align-items:center;font-size:13px;margin:7px 0}
.bar .tr{height:12px;background:#e3eeeb;border-radius:99px;overflow:hidden;direction:ltr}
.bar .tr i{display:block;height:100%;background:#9ccfc6;border-radius:99px;transition:width .3s}
.bar.on .tr i{background:var(--teal)}.bar.on{font-weight:700}
.bar em{font-style:normal;color:var(--ink2);text-align:left;direction:ltr;font-variant-numeric:tabular-nums}
.how summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.how summary::after{content:"＋";color:var(--teal)}.how[open] summary::after{content:"−"}
.how ul{padding-inline-start:18px;margin:12px 0 0;color:var(--ink2);font-size:14px}.how li{margin:6px 0}
.how p{color:var(--ink2);font-size:14px}.hint{margin:10px 0 0}
.sl{display:block;padding:12px 0;border-bottom:1px solid var(--line)}.sl:last-child{border:0}
.sl span,.num span{display:flex;justify-content:space-between;font-size:14px;margin-bottom:10px;gap:8px}
.sl span b{color:var(--teal)}
input[type=range]{width:100%;accent-color:var(--teal);height:32px}
.num{display:block;padding:12px 0}
.num input{width:100%;font:inherit;font-size:22px;font-weight:700;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);text-align:right;background:#f8fbfa;direction:ltr}
.num input:focus{outline:2px solid var(--teal2);border-color:transparent}
.monthly-hero{display:block;text-align:center}
.monthly-hero>span{color:var(--ink2);font-size:14px}
.mega{display:block;font-size:48px;color:var(--teal);margin:2px 0 12px;font-variant-numeric:tabular-nums}
.split{display:flex;height:14px;border-radius:99px;overflow:hidden;background:#e3eeeb;direction:rtl}
.split i{display:block;height:100%;transition:width .3s}
.d1{background:var(--teal)}.d2{background:var(--amber)}.d3{background:#6366f1}
.legend{display:flex;justify-content:space-around;margin-top:12px;font-size:13px;color:var(--ink2)}
.legend div{display:flex;flex-direction:column;align-items:center;gap:2px}.legend b{color:var(--ink);font-size:16px}
.legend i{width:10px;height:10px;border-radius:50%;display:inline-block;margin-bottom:2px}
.note p{margin:0 0 10px;font-size:13.5px;color:var(--ink2)}.note p:last-child{margin:0}
.foot{font-size:12px;color:var(--ink2);text-align:center;padding:10px 8px}
.tabbar{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:0;background:#fffffff2;backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:8px 14px calc(8px + env(safe-area-inset-bottom));z-index:5}
.tabbar button{flex:1;max-width:240px;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;font:inherit;font-size:13px;color:var(--ink2);padding:6px;border-radius:14px;cursor:pointer}
.tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabbar button.on{color:var(--teal);font-weight:700;background:#e6f4f1}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.hint2{margin:-4px 6px 8px;font-size:12px;color:var(--ink2)}
.bar{grid-template-columns:118px 1fr 92px}