:root{
  --bg:#eef1f4; --card:#fff; --ink:#1f2d3d; --muted:#6b7a8d; --line:#e3e7ec;
  --navy:#223344; --navy-2:#2e4257; --accent:#0f6e56;
  --full-bg:#d7f0e4; --full-ink:#0f5132;
  --half-bg:#dbe8fb; --half-ink:#1e3a5f;
  --low-bg:#fde8c4; --low-ink:#7a4f00;
  --out-bg:#f7d6d6; --out-ink:#7a1f1f;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;}
#app{max-width:520px; margin:0 auto; min-height:100vh; background:var(--bg); display:flex; flex-direction:column;}

.bar{position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px;
  background:var(--navy); color:#fff; padding:14px 16px; padding-top:max(14px,env(safe-area-inset-top));}
.bar .brand{font-size:17px; font-weight:600;}
.bar .sub{font-size:13px; opacity:.8;}
.bar .count{margin-left:auto; font-size:14px; opacity:.9;}
.bar .icon{background:rgba(255,255,255,.15); border:0; color:#fff; width:34px; height:34px;
  border-radius:9px; font-size:22px; line-height:1; cursor:pointer;}
.bar > div:nth-child(2){line-height:1.2}

.progress{height:4px; background:var(--line);}
.progress>div{height:100%; background:var(--accent); transition:width .25s ease;}

.pad{padding:16px; flex:1;}
.lead{color:var(--muted); font-size:15px; margin:4px 0 18px;}
.tip{color:var(--muted); font-size:13px; margin-top:20px; text-align:center;}

.unit-card{display:flex; align-items:center; width:100%; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:18px 16px; margin-bottom:12px; cursor:pointer; text-align:left;}
.unit-card .u-name{font-size:18px; font-weight:600;}
.unit-card .u-meta{color:var(--muted); font-size:13px; margin-left:12px;}
.unit-card .chev{margin-left:auto; color:var(--muted); font-size:26px; line-height:1;}

.list .row{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:10px;}
.rname{font-size:15px; font-weight:500; margin-bottom:10px;}
.rname .new{font-size:10px; background:var(--accent); color:#fff; padding:1px 6px; border-radius:4px; margin-left:4px; vertical-align:1px;}
.rname .note{font-size:12px; color:var(--muted); font-style:italic; margin-left:6px;}

.seg{display:grid; grid-template-columns:repeat(4,1fr); gap:6px;}
.seg.two{grid-template-columns:1fr 1fr;}
.opt{border:1px solid var(--line); background:#f7f9fb; color:var(--muted); border-radius:9px;
  padding:11px 4px; font-size:13px; font-weight:500; cursor:pointer; min-height:44px;}
.opt.on{color:#fff;}
.opt.on.full{background:var(--full-bg); color:var(--full-ink); border-color:var(--full-ink);}
.opt.on.half{background:var(--half-bg); color:var(--half-ink); border-color:var(--half-ink);}
.opt.on.low{background:var(--low-bg); color:var(--low-ink); border-color:var(--low-ink);}
.opt.on.out{background:var(--out-bg); color:var(--out-ink); border-color:var(--out-ink);}

.step{display:flex; align-items:center; gap:14px;}
.rnd{width:44px; height:44px; border-radius:11px; border:1px solid var(--navy); background:#fff; color:var(--navy);
  font-size:22px; line-height:1; cursor:pointer;}
.step .num{font-size:19px; font-weight:600; min-width:26px; text-align:center;}
.step .par{font-size:13px; margin-left:auto;}
.step .par.ok{color:var(--full-ink);} .step .par.low{color:var(--low-ink); font-weight:600;}

.foot{position:sticky; bottom:0; display:flex; gap:10px; justify-content:space-between; align-items:center;
  background:var(--bg); border-top:1px solid var(--line); padding:12px 16px; padding-bottom:max(12px,env(safe-area-inset-bottom));}
.foot.col{flex-direction:column;}
.btn{flex:1; background:var(--navy); color:#fff; border:0; border-radius:12px; padding:14px; font-size:15px; font-weight:600; cursor:pointer; width:100%;}
.btn.ghost{background:#fff; color:var(--navy); border:1px solid var(--navy);}

h3{font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:18px 0 8px;}
.frow{display:flex; justify-content:space-between; align-items:center; background:var(--card);
  border:1px solid var(--line); border-radius:10px; padding:11px 14px; margin-bottom:8px; font-size:15px;}
.rz{font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px;}
.rz.low{background:var(--low-bg); color:var(--low-ink);}
.rz.out{background:var(--out-bg); color:var(--out-ink);}

.toast{position:fixed; left:50%; bottom:90px; transform:translateX(-50%); background:var(--ink); color:#fff;
  padding:10px 18px; border-radius:999px; font-size:14px; z-index:20;}