*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F6F1E8; --surface:#FFFDF8; --ink:#1C1A16; --ink-2:#6F6757; --ink-3:#9A907C; --line:#E3DACA;
  --accent:#8A6A3E; --good:#5B7257; --warn:#B5825A;
  --c1:#A84A24; --c2:#4C7A46; --c3:#35688C;
  --fd:"Fraunces",serif; --fu:"Inter",system-ui,sans-serif;
  --r:14px; --sh:0 1px 2px rgba(28,26,22,.04);
}
[data-theme="dark"]{
  --bg:#141210; --surface:#1C1915; --ink:#F2EBDD; --ink-2:#9A9183; --ink-3:#6B6458; --line:#2C2823;
  --accent:#C9A063; --good:#8DA888; --warn:#D9A277; --sh:none;
  --c1:#E8895A; --c2:#8CBC80; --c3:#6FB0D4;
}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--fu);font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;transition:background .2s,color .2s}
.app{max-width:440px;margin:0 auto;padding:0 20px calc(112px + env(safe-area-inset-bottom))}

header{position:sticky;top:0;z-index:9;padding:calc(18px + env(safe-area-inset-top)) 0 10px;
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px)}
.hrow{display:flex;align-items:center;gap:10px}
.eyebrow{font-size:12px;color:var(--ink-2)}
h1{font-family:var(--fd);font-weight:400;font-size:28px;line-height:1.12;letter-spacing:-.02em;flex:1}
.icon{width:34px;height:34px;flex:none;border:1px solid var(--line);border-radius:50%;background:transparent;
  color:var(--ink-2);font-size:14px;cursor:pointer;display:grid;place-items:center}
.back{font:inherit;font-size:13px;color:var(--ink-2);background:none;border:0;cursor:pointer;padding:0 0 4px;display:block}

.sec{margin:24px 0 9px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sec h2{font-size:12px;font-weight:500;color:var(--ink-2)}
.sec em{font-style:normal;font-size:12px;color:var(--ink-3)}
.sec button{font:inherit;font-size:12px;color:var(--ink-3);background:none;border:0;cursor:pointer}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:16px}
.card+.card{margin-top:10px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.g2>.card+.card,.g3>.card+.card{margin-top:0}
.g2>.card,.g3>.card{display:flex;flex-direction:column}
.g2>.card .mut,.g3>.card .mut{margin-top:auto;padding-top:4px}

.num{font-family:var(--fd);font-weight:400;letter-spacing:-.02em;line-height:1}
.n1{font-size:46px}.n2{font-size:30px}.n3{font-size:22px}
.unit{font-family:var(--fu);font-size:13px;color:var(--ink-2);letter-spacing:0}
.lab{font-size:12px;color:var(--ink-2)}
.mut{color:var(--ink-2);font-size:13px}
.pill{font-size:11px;letter-spacing:.04em;color:var(--ink-2);border:1px solid var(--line);
  border-radius:99px;padding:3px 9px;white-space:nowrap}
.up{color:var(--warn)}.dn{color:var(--good)}
.pill.sync{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent);
  background:color-mix(in srgb,var(--warn) 8%,transparent)}
.pill.up{border-color:color-mix(in srgb,var(--warn) 30%,transparent);
  background:color-mix(in srgb,var(--warn) 8%,transparent)}
.track{height:3px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:11px}
.track i{display:block;height:100%;background:var(--accent)}

.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.row:first-child{padding-top:0}.row:last-child{border-bottom:0;padding-bottom:0}
.row .k{color:var(--ink-2);font-size:13px}
.row .v{font-size:16px;font-variant-numeric:tabular-nums}
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;
  border:0;border-bottom:1px solid var(--line);cursor:pointer;background:none;width:100%;
  font:inherit;color:var(--ink);text-align:left}
.nav:last-child{border-bottom:0}
.nav small{display:block;color:var(--ink-3);font-size:12px}
.nav::after{content:"›";color:var(--ink-3);font-size:18px}

table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{text-align:right;padding:8px 0;font-size:13px;border-bottom:1px solid var(--line)}
th{font-size:11px;font-weight:500;color:var(--ink-3)}
th:first-child,td:first-child{text-align:left;color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
td b{font-weight:500}
tr.tot td{color:var(--ink);border-top:1px solid var(--line);border-bottom:0;font-weight:500}
tr.cur td,tr.hit td{color:var(--ink)}
tr.cur,tr.hit{background:color-mix(in srgb,var(--accent) 7%,transparent)}
tr.cur td:first-child{font-weight:500}
td[contenteditable]{cursor:text;border-radius:5px;outline:none}
td[contenteditable]:focus{background:color-mix(in srgb,var(--accent) 10%,transparent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent)}
td.diff{color:var(--ink-2)}
.rowdel{font:inherit;font-size:16px;line-height:1;color:var(--ink-3);background:none;border:0;
  cursor:pointer;padding:0 0 0 10px}
.rowdel:active{color:var(--warn)}
.row .k br+.mut{display:inline-block;margin-top:2px}
td.del{width:24px;padding-left:8px;text-align:right}
td.del button{font:inherit;font-size:17px;line-height:1;color:var(--ink-3);background:none;border:0;
  cursor:pointer;padding:2px 0 2px 6px}
td.del button:active{color:var(--warn)}
.sheet .fields:empty{display:none}
.scroll{overflow-x:auto;margin:0 -2px}

.bag .bg+.bg{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.bag h3{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.bag ul{list-style:none;margin-top:5px}
.bag li{display:flex;align-items:center;gap:9px;padding:1.5px 0;
  font-family:var(--fd);font-size:17px;letter-spacing:-.01em;line-height:1.3}
.bag li::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--ink-3);flex:none}
.bag li span{flex:1;outline:none;border-radius:5px}
.bag li span:focus{background:color-mix(in srgb,var(--accent) 10%,transparent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent)}
.bag li button{font:inherit;font-size:16px;line-height:1;color:var(--ink-3);background:none;border:0;
  cursor:pointer;padding:0 0 0 8px}
.bag li button:active{color:var(--warn)}
.bag .add{font:inherit;font-size:13px;color:var(--ink-3);background:none;border:0;cursor:pointer;
  padding:7px 0 0;margin-left:12px}
.bag .add:active{color:var(--accent)}

.note{font-family:var(--fd);font-size:16px;line-height:1.5}
.note-head{display:flex;justify-content:space-between;align-items:baseline;margin-top:9px}
.note-head button{font:inherit;font-size:12px;color:var(--ink-3);background:none;border:0;cursor:pointer}

.btn{display:block;width:100%;margin-top:10px;padding:13px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);color:var(--ink);font:inherit;font-size:14px;cursor:pointer;box-shadow:var(--sh)}
.btn.pri{background:color-mix(in srgb,var(--accent) 9%,var(--surface));
  border-color:color-mix(in srgb,var(--accent) 28%,transparent);color:var(--accent)}
.btn:disabled{opacity:.5;cursor:default}
.cta{margin:0 0 12px;padding:17px 16px;text-align:left}
.cta b{display:block;font-family:var(--fd);font-weight:400;font-size:20px;letter-spacing:-.01em}
.cta small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-2)}

.field{width:100%;font-family:var(--fd);font-size:34px;letter-spacing:-.02em;color:var(--ink);
  background:none;border:0;border-bottom:1px solid var(--line);padding:0 0 9px;outline:none}
.field:focus{border-color:var(--accent)}
.field::-webkit-outer-spin-button,.field::-webkit-inner-spin-button{appearance:none;margin:0}
.field[type=number]{appearance:textfield}
.field.time{width:auto;margin-top:7px;padding-bottom:7px}
.sel{width:100%;font:inherit;font-size:15px;color:var(--ink);background:transparent;
  border:1px solid var(--line);border-radius:10px;padding:10px 30px 10px 11px;margin-top:7px;
  appearance:none;cursor:pointer;background-repeat:no-repeat;background-position:right 11px center;background-size:9px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239A907C' stroke-width='1.4' fill='none'/%3E%3C/svg%3E")}
.sel:focus{outline:none;border-color:var(--accent)}

svg.spark{display:block;width:100%;height:64px;overflow:hidden}
.spark .ln{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round}
.spark .ar{fill:var(--accent);opacity:.08}
.spark .dot{fill:var(--accent)}
.spark .gl{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3}
.spark .tick{stroke:var(--line);stroke-width:1}
.spark .s1,.spark .s2,.spark .s3{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.spark .s1{stroke:var(--c1)}
.spark .s2{stroke:var(--c2)}
.spark .s3{stroke:var(--c3)}
.spark .zero{stroke:var(--line);stroke-width:1}
.legend{display:flex;gap:14px;margin-top:10px;flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2)}
.legend i{width:18px;height:3px;border-radius:2px;flex:none}
.days{display:flex;margin-top:6px}
.days span{flex:1;text-align:center;font-size:11px;letter-spacing:.04em;color:var(--ink-3)}
.days span.has{color:var(--ink-2)}
.days span.now{color:var(--ink);font-weight:500}

.view{display:none}.view.on{display:block;animation:f .18s ease}
@keyframes f{from{opacity:0;transform:translateY(3px)}to{opacity:1}}

.tabs{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;max-width:440px;margin:0 auto;
  padding:12px 12px calc(14px + env(safe-area-inset-bottom));gap:2px;
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.tabs button{flex:1;background:none;border:0;cursor:pointer;font:inherit;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);padding:4px 0}
.tabs button.on{color:var(--ink);font-weight:500}

/* sheet ------------------------------------------------------------------ */
dialog.sheet{border:0;padding:0;background:none;max-width:440px;width:100%;margin:auto auto 0}
dialog.sheet::backdrop{background:rgba(28,26,22,.35);backdrop-filter:blur(2px)}
.sheet-in{background:var(--surface);color:var(--ink);border-top-left-radius:20px;border-top-right-radius:20px;
  padding:22px 20px calc(22px + env(safe-area-inset-bottom));animation:up .22s ease}
@keyframes up{from{transform:translateY(14px)}to{transform:none}}
.sheet h3{font-family:var(--fd);font-weight:400;font-size:22px;letter-spacing:-.01em;margin-bottom:4px}
.sheet .fields{display:flex;gap:16px;margin-top:14px}
.sheet .fields>div{flex:1}
.sheet .btns{display:flex;gap:10px;margin-top:22px}
.sheet .btns .btn{margin-top:0}

.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%,8px);
  background:var(--ink);color:var(--bg);font-size:13px;padding:9px 15px;border-radius:99px;
  opacity:0;pointer-events:none;transition:.2s;z-index:20}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* sign in ---------------------------------------------------------------- */
.auth{max-width:380px;margin:0 auto;padding:16vh 24px 24px}
.auth h1{font-size:34px;margin-bottom:6px}
.auth input{width:100%;font:inherit;font-size:16px;color:var(--ink);background:transparent;
  border:1px solid var(--line);border-radius:10px;padding:13px 12px;margin-top:10px;outline:none}
.auth input:focus{border-color:var(--accent)}
.auth .err{color:var(--warn);font-size:13px;margin-top:12px}
.hide{display:none!important}