:root{
  --green:#2B8A3E; --green-d:#237032; --ink:#1F2933; --mut:#6B7280;
  --bg:#F4F7F5; --card:#FFFFFF; --line:#E4E9E6; --fast:#E8590C; --ok:#2B8A3E;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5;
  padding-bottom:env(safe-area-inset-bottom);
}
.topbar{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:var(--green); color:#fff;
  padding-top:calc(14px + env(safe-area-inset-top));
}
.brand{font-weight:600; font-size:17px}
.streak{font-size:13px; background:rgba(255,255,255,.18); padding:4px 10px; border-radius:999px}
.main{padding:14px 14px 90px; max-width:640px; margin:0 auto}

.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:14px; box-shadow:0 1px 2px rgba(0,0,0,.03)}
.day-head{font-size:18px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.badge{font-size:12px; font-weight:500; color:#fff; background:var(--green); padding:2px 9px; border-radius:999px}
.badge.fast{background:var(--fast)}
.badge.done{background:var(--ok)}
.progress{font-size:13px; color:var(--mut); margin:8px 0 12px}
.items{display:flex; flex-direction:column; gap:8px}
.item{
  display:flex; align-items:flex-start; gap:10px; padding:11px 12px; border:1px solid var(--line);
  border-radius:12px; background:#FBFDFC; transition:.15s;
}
.item.checked{background:#EAF5ED; border-color:#BFE3C8}
.item input{margin-top:3px; width:20px; height:20px; accent-color:var(--green); flex:0 0 auto}
.item-name{font-weight:600}
.item-detail{display:block; font-size:12.5px; color:var(--mut); margin-top:2px}
.note{font-size:12.5px; color:var(--mut); margin:12px 0 0}
.btn{display:block; width:100%; border:none; border-radius:12px; padding:14px; font-size:16px; font-weight:600; cursor:pointer; margin-top:14px}
.btn.primary{background:var(--green); color:#fff}
.btn.primary:active{background:var(--green-d)}
.btn.ghost{background:#EEF2F0; color:var(--ink)}
.btn.danger{background:#FDECEC; color:#C0392B}

/* week */
.week-row{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px}
.wk{flex:0 0 auto; width:120px; border:1px solid var(--line); border-radius:12px; padding:10px; background:#fff}
.wk.today{border-color:var(--green); box-shadow:0 0 0 2px rgba(43,138,62,.15)}
.wk .wk-d{font-weight:600}
.wk .wk-t{font-size:12px; color:var(--mut); margin-top:2px}
.wk .wk-s{font-size:12px; margin-top:6px}
.wk .wk-s.done{color:var(--ok)} .wk .wk-s.nd{color:#B0B7B3}

/* checkin */
.stat{display:flex; gap:10px; margin-bottom:14px}
.stat .box{flex:1; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; text-align:center}
.stat .num{font-size:26px; font-weight:700; color:var(--green)}
.stat .lbl{font-size:12px; color:var(--mut); margin-top:2px}
.dots{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.dot{aspect-ratio:1; border-radius:8px; background:#E7ECE9; display:flex; align-items:center; justify-content:center; font-size:10px; color:#9AA3A0}
.dot.done{background:var(--green); color:#fff}
.dot.today{border:2px solid var(--green)}

/* settings */
.field{margin-bottom:16px}
.field label{display:block; font-size:13px; color:var(--mut); margin-bottom:6px}
.field input[type=time]{font-size:16px; padding:8px; border:1px solid var(--line); border-radius:10px; width:140px}
.fd-row{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1px solid var(--line); border-radius:999px; padding:7px 13px; font-size:13px; background:#fff; cursor:pointer}
.chip.on{background:var(--fast); color:#fff; border-color:var(--fast)}
.tip{font-size:12px; color:var(--mut); background:#F0F4F2; border-radius:10px; padding:10px; margin-top:6px}

.tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:10;
  display:flex; background:#fff; border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-btn{
  flex:1; border:none; background:none; padding:9px 0 7px; font-size:12px; color:var(--mut);
  display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer;
}
.nav-btn span{font-size:19px; line-height:1}
.nav-btn.active{color:var(--green); font-weight:600}

.toast{
  position:fixed; left:50%; bottom:90px; transform:translateX(-50%);
  background:rgba(31,41,51,.92); color:#fff; padding:10px 16px; border-radius:10px;
  font-size:13px; z-index:30; opacity:0; transition:.25s; pointer-events:none;
}
.toast.show{opacity:1}

.badge.var{background:#3B6FB5; color:#fff}
.swap-row{margin:10px 0 2px}
.btn.sm{width:auto; display:inline-block; padding:8px 14px; font-size:13px; margin:0}
.wk .wk-v{font-size:11px; color:var(--green); margin-top:2px; font-weight:500}