:root{--bg:#eef5f1;--bg2:#f7faf8;--card:#fff;--tx:#10253f;--mut:#5f7288;--ac:#1fa35c;--ac2:#2f80ed;--onac:#fff;--bd:#e1eae6;--danger:#d64545;--sh:0 8px 24px rgba(16,37,63,.07);--k1:#dff5e8;--k2:#dcebff;--k3:#ebe3ff;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0a1524;--bg2:#0e1d30;--card:#122338;--tx:#e8f1f8;--mut:#8fa4ba;--ac:#3be07f;--ac2:#5aa2ff;--onac:#04210f;--bd:#1e3652;--danger:#ff7a7a;--sh:0 8px 24px rgba(0,0,0,.35);--k1:#12362a;--k2:#12304f;--k3:#2a2150}}
:root[data-theme="dark"]{--bg:#0a1524;--bg2:#0e1d30;--card:#122338;--tx:#e8f1f8;--mut:#8fa4ba;--ac:#3be07f;--ac2:#5aa2ff;--onac:#04210f;--bd:#1e3652;--danger:#ff7a7a;--sh:0 8px 24px rgba(0,0,0,.35);--k1:#12362a;--k2:#12304f;--k3:#2a2150}
*{box-sizing:border-box}
body{margin:0 auto;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--tx);font:16px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-variant-numeric:tabular-nums;padding:14px 14px 100px;max-width:680px;min-height:100vh}
header{display:flex;align-items:center;gap:12px;margin:2px 0 16px}
header .brand{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}header .brand b{color:var(--ac)}
header .sub{font-size:.85rem;color:var(--mut);margin-top:2px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:var(--sh)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.s b{display:block;font-size:1.2rem;line-height:1.25;font-weight:700;letter-spacing:-.01em;overflow-wrap:anywhere}.s span{font-size:.78rem;color:var(--mut)}
form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{font-size:.78rem;font-weight:500;color:var(--mut);display:flex;flex-direction:column;gap:5px}
input,select{font:inherit;min-height:44px;padding:10px 12px;border-radius:12px;border:1px solid var(--bd);background:var(--bg);color:var(--tx);width:100%}
input:focus,select:focus{outline:2px solid var(--ac);outline-offset:1px}
.full{grid-column:1/-1}
button{font:inherit;font-size:.88rem;min-height:40px;padding:8px 16px;border:0;border-radius:10px;background:var(--ac);color:var(--onac);font-weight:600;letter-spacing:.01em;cursor:pointer;transition:filter .15s,transform .1s}
button:hover{filter:brightness(1.06)}button:active{transform:scale(.98)}
button.sec{background:color-mix(in srgb,var(--ac) 10%,transparent);color:var(--ac);border:1px solid color-mix(in srgb,var(--ac) 28%,transparent)}
#ioCard button{flex:1 1 140px}
#obdAct{grid-template-columns:1fr 1fr}#obdAct button{font-size:.8rem;padding:8px 10px}
.row{border-top:1px solid var(--bd);padding:10px 0}.row:first-child{border-top:0}
.row .h{display:flex;justify-content:space-between;font-weight:600}.row .d{font-size:.85rem;color:var(--mut)}.row .k{color:var(--ac);font-weight:600}
.hc .d{font-size:.85rem;color:var(--mut);margin-top:3px}.hc .k{color:var(--ac);font-weight:600}
.del{background:none;color:var(--danger);padding:0 4px;font-size:.85rem}
.note{font-size:.8rem;color:var(--mut)}
.pill{display:inline-block;padding:3px 12px;border-radius:999px;font-weight:700;font-size:.85rem;color:#fff}.pv{background:#1fa35c}.pf{background:#d64545}
#now{padding:7px 12px;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;font-size:.72rem;line-height:1.2;box-shadow:none}
#now .pill{font-size:.64rem;padding:2px 8px;letter-spacing:.02em;flex:none}
#bkWarn{padding:8px 12px;font-size:.72rem;line-height:1.35;box-shadow:none}
details summary{font-weight:600;cursor:pointer}details p{margin:.5rem 0}
[hidden]{display:none!important}
input:disabled{opacity:.65}
button:disabled{opacity:.45}
.ico{background:none;border:1px solid var(--bd);width:38px;min-height:38px;height:38px;padding:0;font-size:1.4rem;line-height:1;border-radius:12px;color:var(--tx);display:inline-flex;align-items:center;justify-content:center}
.ico.red{color:var(--danger);border-color:var(--danger)}
#tabs{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:2px;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--bd);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));z-index:20}
#tabs button{flex:1;max-width:110px;min-height:52px;background:none;color:var(--mut);border-radius:14px;padding:6px 2px;font-size:.68rem;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:3px}
#tabs button svg{width:22px;height:22px}
#tabs button.on{color:var(--ac);background:color-mix(in srgb,var(--ac) 13%,transparent)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.kpi{border-radius:18px;padding:12px;box-shadow:var(--sh);border:1px solid var(--bd);min-width:0}
.kpi .ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.8rem;margin-bottom:8px}
.kpi b{display:block;font-size:1.05rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap}.kpi span{display:block;font-size:.7rem;color:var(--mut);margin-bottom:4px}
.seg{display:inline-flex;background:var(--bg);border-radius:999px;padding:3px;gap:2px}
.seg button{min-height:30px;padding:4px 10px;font-size:.75rem;background:none;color:var(--mut);border-radius:999px}
.seg button.on{background:var(--ac);color:var(--onac)}
.seg.wide{display:flex;width:100%}.seg.wide button{flex:1;padding:6px 2px;font-size:.8rem;min-height:40px}
input[type=range]{min-height:28px;padding:0;border:0;background:none;accent-color:var(--ac)}
.evh{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:no-preference){.card,.kpi{transition:transform .15s}.sheetc{animation:up .22s ease-out}}
#sModeSeg{background:none;border-radius:0;padding:0;gap:0;border-bottom:1px solid var(--bd)}
#sModeSeg button{flex:1;background:none;border-radius:0;min-height:40px;padding:6px 2px;color:var(--mut);border-bottom:3px solid transparent;margin-bottom:-1px;font-size:.88rem}
#sModeSeg button.on{background:none;color:var(--ac);border-bottom-color:var(--ac)}