:root{
  --bg:#F4F7F7; --card:#fff; --ink:#1B2B2D; --muted:#5B6C6E; --primary:#2B6F73;
  --soft:#DDEEEE; --line:#D9E2E2; --warn:#E48B5F;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.4}
#app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top)}
.screen{flex:1;display:flex;flex-direction:column;padding:20px 20px 16px;gap:14px}
.screen.has-nav{padding-bottom:12px}
h1{font-size:26px;margin:0;font-weight:700;letter-spacing:-.3px}
h2{font-size:13px;margin:0 0 10px;color:var(--muted);font-weight:600;letter-spacing:.6px;text-transform:uppercase}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.row{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.grow{flex:1}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.icon-btn{border:0;background:var(--soft);color:var(--primary);width:40px;height:40px;border-radius:50%;
  font-size:18px;cursor:pointer;display:grid;place-items:center}
.progress{font-size:13px;color:var(--muted);font-weight:600}
.bar{height:6px;border-radius:3px;background:var(--soft);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--primary);border-radius:3px}

.btn{border:0;border-radius:14px;padding:15px 18px;font:inherit;font-weight:600;cursor:pointer;width:100%;
  background:var(--primary);color:#fff}
.btn.secondary{background:var(--soft);color:var(--primary)}
.btn.ghost{background:transparent;color:var(--primary);border:1px solid var(--line)}
.btn:disabled{opacity:.5;cursor:default}
.btn:active{transform:scale(.99)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:9px 14px;
  font:inherit;font-size:15px;cursor:pointer;min-height:40px}
.chip[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.scale .chip{padding:10px 0;text-align:center;border-radius:12px}

.stat{flex:1}
.stat b{display:block;font-size:30px;line-height:1.1}
.bars{display:flex;align-items:flex-end;gap:10px;height:110px;padding-top:6px}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%}
.bars .col i{display:block;width:100%;background:var(--primary);border-radius:6px 6px 2px 2px;min-height:3px}
.bars .col.zero i{background:var(--soft)}
.bars .col span{font-size:12px;color:var(--muted)}
.seg{display:flex;background:var(--soft);border-radius:12px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:transparent;border-radius:10px;padding:9px 4px;font:inherit;font-size:14px;
  color:var(--primary);font-weight:600;cursor:pointer}
.seg button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.factor{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line)}
.factor:last-child{border-bottom:0}
.attack{padding:11px 0;border-bottom:1px solid var(--line)}
.attack:last-child{border-bottom:0}
.pill{display:inline-block;background:var(--soft);color:var(--primary);border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600}
.auto{display:grid;gap:10px}
.auto div{display:flex;justify-content:space-between;gap:12px}
.auto b{font-weight:600}

input[type=datetime-local],textarea{width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:12px}
textarea{min-height:96px;resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:1px}
.switch{display:flex;justify-content:space-between;align-items:center;gap:12px}
.switch input{width:22px;height:22px;accent-color:var(--primary)}
.banner{background:#FFF1E8;border:1px solid #F3CDB7;color:#7A3F1F;border-radius:12px;padding:10px 12px;font-size:13px}

nav.tabs{position:sticky;bottom:0;display:flex;background:#fff;border-top:1px solid var(--line);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
nav.tabs button{flex:1;border:0;background:transparent;padding:8px 4px;font:inherit;font-size:12px;color:var(--muted);
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
nav.tabs button span{font-size:20px;line-height:1}
nav.tabs button[aria-current="page"]{color:var(--primary);font-weight:700}
.footer{margin-top:auto;display:grid;gap:10px;padding-top:6px}
.center{display:grid;place-items:center;text-align:center;gap:12px;flex:1}
.check{width:84px;height:84px;border-radius:50%;background:var(--soft);color:var(--primary);display:grid;place-items:center;font-size:42px}
#toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;max-width:90vw}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}