:root{
  --bg:#0f1113; --surface:#181b1f; --surface2:#1f2429; --line:#2a3037;
  --text:#e8eaed; --muted:#98a2ad; --accent:#6ea8fe; --accent-dim:#274b7d;
  --ok:#4ec9a0; --warn:#e8b84b; --bad:#e8705c; --calm:#a78bfa;
  --r:14px; --sp:16px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f7f9; --surface:#fff; --surface2:#eef1f5; --line:#dde2e8;
         --text:#15181c; --muted:#5d6874; --accent:#2563eb; --accent-dim:#c7dbff; }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text); font:16px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  padding-bottom:76px; overscroll-behavior-y:contain;
}
h1,h2,h3{line-height:1.25;margin:0 0 .4em}
h1{font-size:1.5rem} h2{font-size:1.15rem} h3{font-size:1rem}
p{margin:0 0 .8em}
a{color:var(--accent)}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}

header.top{
  position:sticky;top:0;z-index:20;background:var(--bg);
  padding:14px var(--sp) 10px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px
}
header.top h1{margin:0;font-size:1.25rem;flex:1}
.pill{font-size:.72rem;padding:3px 9px;border-radius:99px;background:var(--surface2);color:var(--muted);white-space:nowrap}

main{padding:var(--sp);max-width:680px;margin:0 auto}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px}
.card.tight{padding:12px}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.tiny{font-size:.76rem}
.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.spread{justify-content:space-between}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}

.btn{background:var(--accent);color:#fff;border-radius:11px;padding:12px 16px;font-weight:600;text-align:center;display:block;width:100%}
.btn.sec{background:var(--surface2);color:var(--text)}
.btn.ghost{background:transparent;border:1px solid var(--line)}
.btn:active{transform:scale(.985)}
.btn.sm{padding:8px 12px;font-size:.9rem;width:auto;display:inline-block}

.qbtn{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:14px 8px;text-align:center;font-size:.85rem;line-height:1.3}
.qbtn .ico{display:block;font-size:1.5rem;margin-bottom:4px}
.qbtn.ok{border-color:#2f6b56} .qbtn.bad{border-color:#7a3c33}

nav.tabs{
  position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;
  background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)
}
nav.tabs button{flex:1;padding:9px 2px 8px;text-align:center;color:var(--muted);font-size:.68rem}
nav.tabs button .ico{display:block;font-size:1.35rem;margin-bottom:1px;filter:grayscale(1);opacity:.75}
nav.tabs button.on{color:var(--accent)}
nav.tabs button.on .ico{filter:none;opacity:1}

.banner{border-radius:var(--r);padding:14px;margin-bottom:14px;border:1px solid}
.banner.low {background:#14261f;border-color:#2f6b56}
.banner.mid {background:#2a2415;border-color:#6b5a2f}
.banner.high{background:#2e1d18;border-color:#7a3c33}
.banner.over{background:#3a1a14;border-color:#a04b3c}
.banner.info{background:var(--surface2);border-color:var(--line)}
@media (prefers-color-scheme: light){
  .banner.low{background:#e7f7f0} .banner.mid{background:#fdf5e0}
  .banner.high{background:#fdece7} .banner.over{background:#fbdcd5}
}

.chip{display:inline-block;font-size:.72rem;padding:3px 9px;border-radius:99px;background:var(--surface2);color:var(--muted);margin:0 5px 5px 0}
.chip.ev-vet{background:#1e3a2f;color:#7fe0bb} .chip.ev-wel{background:#1e2f3a;color:#7fc4e0}
.chip.ev-pro{background:#2f2a3a;color:#c0aee8} .chip.ev-spo{background:#3a2f1e;color:#e0c87f}
.chip.ev-com{background:var(--surface2)}       .chip.ev-app{background:#3a1e2f;color:#e89fc0}

.bar{height:7px;border-radius:99px;background:var(--surface2);overflow:hidden}
.bar > i{display:block;height:100%;background:var(--accent);border-radius:99px}

ul.clean{list-style:none;padding:0;margin:0}
ul.steps{padding-left:1.15em;margin:0 0 .8em}
ul.steps li{margin-bottom:.45em}
ol.steps{padding-left:1.3em;margin:0 0 .8em}
ol.steps li{margin-bottom:.55em}

.item{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);
      border-radius:12px;padding:13px 14px;margin-bottom:9px}
.item .t{font-weight:600}
.item .s{font-size:.8rem;color:var(--muted);margin-top:2px}

input,select,textarea{
  width:100%;background:var(--surface2);border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:11px 12px;font:inherit;margin-bottom:10px
}
label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:4px}
textarea{min-height:76px;resize:vertical}

.warnbox{border-left:3px solid var(--warn);padding:10px 12px;background:var(--surface2);border-radius:0 10px 10px 0;margin-bottom:12px}
.badbox {border-left:3px solid var(--bad); padding:10px 12px;background:var(--surface2);border-radius:0 10px 10px 0;margin-bottom:12px}
.okbox  {border-left:3px solid var(--ok);  padding:10px 12px;background:var(--surface2);border-radius:0 10px 10px 0;margin-bottom:12px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:88px;z-index:60;
  background:var(--surface2);border:1px solid var(--line);border-radius:11px;padding:11px 16px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);max-width:88vw;text-align:center;font-size:.9rem}

.sheet{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.5);display:flex;align-items:flex-end}
.sheet > div{background:var(--bg);width:100%;max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;padding:18px;
  padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.sheet h2{margin-top:0}
.dimgrid{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;font-size:.88rem}