/* daily-account.css — the Daily Account. Phone first: an app bar, four parts and a tab bar
   at the foot; sheets rise from the bottom. On a wide screen the app sits in a column the
   width of a large phone, beside nothing — it is a phone app first.
   Light and dark follow the device. The colours of a day (came, did not come, half,
   different) are the same everywhere: the calendar, the cards and the legend. */
:root{
  --bg:#f3f0e8; --bg2:#ebe6db; --card:#fffdf9; --ink:#1c1e21; --ink2:#5f646c; --ink3:#8b9099; --line:#e3ddd0; --line2:#d6cfbf;
  --ac:#b84a12; --ac2:#9a3d0d; --acs:#fbeadf; --acink:#fff;
  --ok:#1d7f43; --oks:#e2f3e8; --no:#c2283f; --nos:#fde5e9; --half:#a35f00; --halfs:#fcefd2; --chg:#2457c5; --chgs:#e4ecfd; --off:#9aa0a8; --offs:#eeebe4;
  --shadow:0 1px 2px rgba(40,30,10,.06),0 8px 24px -14px rgba(40,30,10,.28);
  --r:18px; --r2:12px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Malayalam","Noto Sans Devanagari","Nirmala UI","Helvetica Neue",Arial,sans-serif;
  --tabh:64px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#111315; --bg2:#181b1e; --card:#1c2024; --ink:#eeebe5; --ink2:#a8adb5; --ink3:#7c828b; --line:#2a2f34; --line2:#363c42;
    --ac:#ff8f52; --ac2:#ffab7d; --acs:#3a2418; --acink:#1b0e06;
    --ok:#5fd38d; --oks:#173a26; --no:#ff7a8c; --nos:#43202a; --half:#f4b740; --halfs:#3c3016; --chg:#86a8ff; --chgs:#1e2c4d; --off:#6c727a; --offs:#24282c;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -16px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; }
body{ font-family:var(--font); background:var(--bg); color:var(--ink); line-height:1.45; font-size:15px; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
a{ color:var(--ac); }
svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
:focus-visible{ outline:2.5px solid var(--ac); outline-offset:2px; border-radius:6px; }
.num,b.num{ font-variant-numeric:tabular-nums; }

/* ---------- the website around the app ---------- */
header.site{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; background:var(--card); border-bottom:1px solid var(--line); }
header.site .brand{ display:flex; align-items:center; font-weight:900; font-size:19px; letter-spacing:-.02em; color:#0e386d; text-decoration:none; font-family:Georgia,serif; }
@media (prefers-color-scheme:dark){ header.site .brand{ color:#cfe0ff; } }
header.site .brand img{ width:24px; height:24px; margin-right:8px; }
header.site .brand span{ color:#0b7d74; }
.hdr-right{ display:flex; align-items:center; gap:12px; }
header.site .back{ font-size:13px; font-weight:700; text-decoration:none; color:var(--ink2); }
.hdr-install{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; padding:7px 12px; border-radius:99px; background:var(--ac); color:var(--acink); }
.hdr-install svg{ width:16px; height:16px; stroke-width:2.2; }
main.page{ width:100%; max-width:600px; margin:0 auto; padding:18px 12px 32px; flex:1; }
.intro{ text-align:center; padding:4px 8px 14px; }
h1.title{ font-size:26px; line-height:1.15; font-weight:800; letter-spacing:-.02em; }
.sub{ color:var(--ink2); font-size:15px; margin-top:6px; }
footer.site{ text-align:center; color:var(--ink2); font-size:13px; padding:22px 16px 30px; }

.installcard{ display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px; margin-bottom:12px; box-shadow:var(--shadow); }
.installcard img{ border-radius:12px; flex:none; }
.ic-text{ flex:1; min-width:0; }
.ic-text b{ display:block; font-size:15px; }
.ic-text span{ display:block; font-size:13px; color:var(--ink2); }

/* ---------- the app ---------- */
.app{ position:relative; background:var(--bg2); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); min-height:640px; display:flex; flex-direction:column; }
.appbar{ display:flex; align-items:center; gap:10px; padding:12px 12px 10px 14px; background:var(--card); border-bottom:1px solid var(--line); border-radius:24px 24px 0 0; }
.appbar img{ border-radius:9px; flex:none; }
.ab-id{ flex:1; min-width:0; }
.ab-id b{ display:block; font-size:17px; font-weight:750; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ab-id span{ display:block; font-size:12.5px; color:var(--ink2); }
.iconbtn{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--ink); flex:none; }
.iconbtn:hover{ background:var(--bg2); }
.iconbtn svg{ width:22px; height:22px; }
#abAdd{ background:var(--ac); color:var(--acink); }
#abAdd:hover{ background:var(--ac2); }
.bars:empty{ display:none; }
.notice{ display:flex; align-items:center; gap:10px; margin:10px 12px 0; padding:10px 12px; background:var(--card); border:1px solid var(--line); border-radius:var(--r2); font-size:14px; font-weight:600; }
.notice > span{ flex:1; }
.notice.warn,.warn{ color:var(--no); background:var(--nos); border-color:transparent; font-size:13.5px; font-weight:600; padding:9px 12px; border-radius:var(--r2); }
.pane{ flex:1; padding:12px 12px 20px; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 16px; border-radius:12px; font-size:14.5px; font-weight:700; background:var(--card); border:1px solid var(--line2); color:var(--ink); }
.btn:hover{ border-color:var(--ink3); }
.btn.solid{ background:var(--ac); border-color:var(--ac); color:var(--acink); }
.btn.solid:hover{ background:var(--ac2); border-color:var(--ac2); }
.btn.danger{ color:var(--no); border-color:var(--no); background:transparent; }
.btn.sm{ min-height:34px; padding:0 12px; font-size:13px; border-radius:10px; }
.btn.big{ min-height:52px; font-size:16px; width:100%; }
.btnrow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.btnrow .btn{ flex:1 1 auto; }
.xbtn{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:var(--ink2); font-size:16px; flex:none; }
.xbtn:hover{ background:var(--bg2); }
.linkbtn{ color:var(--ac); font-weight:700; font-size:14px; padding:10px 4px; text-decoration:underline; text-underline-offset:3px; }

/* ---------- today ---------- */
.dayswitch,.monthswitch{ display:flex; align-items:center; justify-content:space-between; gap:6px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:5px; }
.daylabel{ position:relative; flex:1; text-align:center; cursor:pointer; padding:3px 0; border-radius:10px; }
.daylabel b{ display:block; font-size:16px; font-weight:750; }
.daylabel span{ display:block; font-size:12.5px; color:var(--ink2); }
.daylabel input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.daylabel input::-webkit-calendar-picker-indicator{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.monthswitch{ margin:10px 0; }
.monthswitch b{ font-size:16.5px; font-weight:750; }
.iconbtn:disabled{ opacity:.3; cursor:default; background:none; }

.summary{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.sumbox{ text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; }
.sumbox span{ display:block; font-size:12.5px; color:var(--ink2); font-weight:600; }
.sumbox b{ display:block; font-size:24px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-top:2px; }
.sumbox.due{ background:var(--ac); border-color:var(--ac); color:var(--acink); }
.sumbox.due span{ color:inherit; opacity:.85; }

.welcome{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px 16px 12px; margin-top:10px; text-align:center; }
.welcome h2{ font-size:20px; font-weight:800; letter-spacing:-.01em; }
.welcome p{ color:var(--ink2); font-size:14px; margin:6px 0 14px; }
.kindgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.kindbtn{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 6px 12px; border-radius:16px; background:var(--bg); border:1.5px solid transparent; font-weight:700; font-size:14px; }
.kindbtn:hover{ border-color:var(--line2); }
.kindbtn.pick{ border-color:var(--ac); background:var(--acs); }
.kic{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; background:var(--kc,#6b7280); flex:none; }
.kic svg{ width:24px; height:24px; stroke-width:1.9; }
.kic.sm{ width:36px; height:36px; border-radius:11px; }
.kic.sm svg{ width:20px; height:20px; }

.cards{ list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; }
.card-top{ display:flex; align-items:center; gap:12px; padding:12px 12px 4px 12px; }
.card-id{ flex:1; min-width:0; display:flex; align-items:center; gap:12px; text-align:left; border-radius:12px; padding:2px; margin:-2px; }
.card-id:hover .ctx b{ color:var(--ac); }
.ctx{ flex:1; min-width:0; display:block; }
.ctx b{ display:block; font-size:16px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctx span{ display:block; font-size:12.5px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pill{ font-size:12px; font-weight:800; padding:4px 9px; border-radius:99px; white-space:nowrap; flex:none; }
.pill.ok{ background:var(--oks); color:var(--ok); }
.pill.no{ background:var(--nos); color:var(--no); }
.pill.half{ background:var(--halfs); color:var(--half); }
.pill.chg{ background:var(--chgs); color:var(--chg); }
.pill.off{ background:var(--offs); color:var(--ink2); }
.pill.wait{ background:var(--offs); color:var(--ink2); }
.card-ctl{ display:flex; align-items:center; gap:8px; padding:8px 12px 12px; }
.qtyctl{ flex:1; display:flex; align-items:center; background:var(--bg); border-radius:14px; padding:4px; }
.qtyctl button.stp{ width:48px; height:48px; border-radius:11px; font-size:24px; font-weight:500; display:grid; place-items:center; color:var(--ink); }
.qtyctl button.stp:hover{ background:var(--card); }
.qtyctl button.stp:disabled{ opacity:.3; }
.qtyval{ flex:1; text-align:center; font-weight:800; font-size:20px; font-variant-numeric:tabular-nums; padding:6px 0; border-radius:10px; }
.qtyval small{ font-size:13px; font-weight:700; color:var(--ink2); margin-left:3px; }
.nobtn{ min-height:56px; padding:0 14px; border-radius:14px; background:var(--bg); font-weight:750; font-size:14px; color:var(--ink2); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.nobtn svg{ width:18px; height:18px; stroke-width:2.4; }
.nobtn[aria-pressed="true"]{ background:var(--no); color:#fff; }
@media (prefers-color-scheme:dark){ .nobtn[aria-pressed="true"]{ color:#2a0b12; } }
.seg3{ flex:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; background:var(--bg); border-radius:14px; padding:4px; }
.seg3 button{ min-height:48px; border-radius:11px; font-weight:750; font-size:14px; color:var(--ink2); }
.seg3 button[aria-pressed="true"][data-v="1"]{ background:var(--ok); color:#fff; }
.seg3 button[aria-pressed="true"][data-v="0.5"]{ background:var(--half); color:#fff; }
.seg3 button[aria-pressed="true"][data-v="0"]{ background:var(--no); color:#fff; }
@media (prefers-color-scheme:dark){ .seg3 button[aria-pressed="true"]{ color:#101214 !important; } }
.offline{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--bg); border-radius:14px; padding:6px 6px 6px 14px; font-size:14px; color:var(--ink2); font-weight:600; min-height:56px; }
.card-foot{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--line); font-size:13px; color:var(--ink2); text-align:left; }
.card-foot:hover{ background:var(--bg); }
.card-foot b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.card-foot .due{ white-space:nowrap; font-weight:700; color:var(--ac); }
.card.stopped{ opacity:.7; }
.addrow{ width:100%; margin-top:10px; display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; border-radius:var(--r); border:1.5px dashed var(--line2); color:var(--ink2); font-weight:700; }
.addrow:hover{ border-color:var(--ac); color:var(--ac); }
.addrow svg{ width:20px; height:20px; }
.hint{ font-size:13px; color:var(--ink2); text-align:center; margin-top:12px; padding:0 8px; }
.empty{ color:var(--ink2); text-align:center; padding:28px 12px; font-size:14px; }

/* ---------- chips ---------- */
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chips.scroller{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:2px 2px 4px; margin:0 -2px; }
.chips.scroller::-webkit-scrollbar{ display:none; }
.chip{ display:inline-flex; align-items:center; gap:7px; flex:none; min-height:40px; padding:0 14px 0 6px; border-radius:99px; background:var(--card); border:1px solid var(--line); font-weight:700; font-size:14px; white-space:nowrap; }
.chip.plain{ padding:0 14px; }
.chip .dot{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--kc); }
.chip .dot svg{ width:16px; height:16px; }
.chip[aria-checked="true"],.chip[aria-pressed="true"]{ background:var(--ink); color:var(--card); border-color:var(--ink); }

/* ---------- month ---------- */
.calsum{ display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:13.5px; color:var(--ink2); padding:0 4px 8px; }
.calsum b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.cal{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:8px; }
.cal .wh{ text-align:center; font-size:11.5px; font-weight:700; color:var(--ink3); padding:2px 0 4px; }
.cal .wh.sun{ color:var(--no); }
.cd{ position:relative; aspect-ratio:1/1.08; border-radius:11px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; background:var(--bg); font-variant-numeric:tabular-nums; min-width:0; }
.cd .n{ font-size:13px; font-weight:700; line-height:1; }
.cd .v{ font-size:11px; font-weight:800; line-height:1.1; max-width:100%; overflow:hidden; text-overflow:clip; white-space:nowrap; }
.cd.ok{ background:var(--oks); color:var(--ok); }
.cd.no{ background:var(--nos); color:var(--no); }
.cd.half{ background:var(--halfs); color:var(--half); }
.cd.chg{ background:var(--chgs); color:var(--chg); }
.cd.off{ background:var(--offs); color:var(--ink3); }
.cd.future{ background:transparent; color:var(--ink3); border:1px dashed var(--line2); }
.cd.future.no{ border-color:var(--no); color:var(--no); }
.cd.out{ background:transparent; color:var(--ink3); opacity:.45; cursor:default; }
.cd.today{ box-shadow:0 0 0 2px var(--ink) inset; }
.cd.blank{ background:transparent; cursor:default; }
.cd.marked::after{ content:""; position:absolute; top:5px; right:5px; width:5px; height:5px; border-radius:50%; background:currentColor; }
button.cd:not(.out):hover{ filter:brightness(.96); }
.legend{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--ink2); padding:10px 4px 0; }
.legend i{ display:inline-block; width:12px; height:12px; border-radius:4px; vertical-align:-1px; margin-right:5px; }
.legend .ok{ background:var(--ok); } .legend .no{ background:var(--no); } .legend .half{ background:var(--half); } .legend .chg{ background:var(--chg); } .legend .off{ background:var(--off); }

/* ---------- bill ---------- */
.paper{ background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:18px 18px 16px; border:1px solid var(--line); position:relative; }
.paper::after{ content:""; position:absolute; left:14px; right:14px; bottom:-7px; height:8px; background:radial-gradient(circle at 6px -1px, transparent 6px, var(--card) 6.5px) 0 0/12px 8px repeat-x; }
.pp-home{ font-size:12.5px; color:var(--ink2); font-weight:600; }
.pp-title{ font-size:20px; font-weight:800; letter-spacing:-.01em; line-height:1.2; margin-top:2px; }
.pp-month{ font-size:14px; font-weight:700; color:var(--ac); }
.pp-meta{ font-size:13px; color:var(--ink2); margin-top:4px; }
.pp-rows{ list-style:none; margin-top:12px; border-top:1px dashed var(--line2); }
.pp-rows li{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 0; border-bottom:1px dashed var(--line); font-size:14px; }
.pp-rows li span{ min-width:0; overflow-wrap:anywhere; }
.pp-rows li b{ white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:700; }
.pp-rows li.minus b{ color:var(--ok); }
.pp-rows li.sub{ font-weight:800; border-bottom:1px solid var(--line2); }
.pp-rows li.sub b{ font-weight:800; }
.pp-rows li.small{ font-size:12.5px; color:var(--ink2); }
.pp-rows li.note span{ color:var(--ink2); }
.pp-notes{ list-style:none; margin-top:8px; font-size:12.5px; color:var(--ink2); }
.pp-notes li{ padding:2px 0; }
.pp-total{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; padding:12px 14px; border-radius:14px; background:var(--acs); color:var(--ac2); }
.pp-total span{ font-weight:800; font-size:15px; }
.pp-total b{ font-size:26px; font-weight:850; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.pp-total.done,.pp-total.adv{ background:var(--oks); color:var(--ok); }
@media (prefers-color-scheme:dark){ .pp-total{ color:var(--ac); } }
.pp-all{ list-style:none; margin-top:12px; }
.pp-all li{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px dashed var(--line); }
.pp-all li > .ppt{ flex:1; min-width:0; }
.pp-all li > .ppt b{ display:block; font-size:14.5px; }
.pp-all li > .ppt small{ display:block; font-size:12.5px; color:var(--ink2); }
.pp-all li > b{ font-variant-numeric:tabular-nums; }
.actions{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:20px; }
.act{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 4px 9px; border-radius:14px; background:var(--card); border:1px solid var(--line); font-size:12.5px; font-weight:700; color:var(--ink); text-decoration:none; }
.act svg{ width:22px; height:22px; }
.act:hover{ border-color:var(--ink3); }
.act.wa{ background:#1fa855; border-color:#1fa855; color:#fff; }
.act.wa:hover{ background:#178a45; }

/* ---------- grouped lists (more, bill money) ---------- */
.group{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px; margin-top:12px; }
.group:first-child{ margin-top:0; }
.group-head{ display:flex; justify-content:space-between; gap:10px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); margin-bottom:6px; }
.group-head span:last-child{ letter-spacing:0; text-transform:none; font-weight:700; }
.rows{ list-style:none; }
.rows li{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.rows li:last-child{ border-bottom:none; }
.rows li .rt{ flex:1; min-width:0; }
.rows li .rt b{ display:block; font-size:15px; font-weight:700; }
.rows li .rt span{ display:block; font-size:12.5px; color:var(--ink2); }
.rows li > b{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.rows li > b.pay{ color:var(--ok); }
.rows li.tap{ cursor:pointer; border-radius:10px; }
.rows li.tap:hover{ background:var(--bg); }
.rows li .chev{ width:18px; height:18px; color:var(--ink3); flex:none; }
.rows .none{ color:var(--ink2); font-size:14px; padding:8px 0; display:block; border:none; }
.note{ font-size:13.5px; color:var(--ink2); }
.note.small{ font-size:12px; margin-top:8px; }
.whatsnew{ margin-top:10px; font-size:13.5px; }
.whatsnew summary{ cursor:pointer; font-weight:700; color:var(--ac); }
.rel{ margin-top:8px; }
.rel b{ font-size:14px; } .rel span{ color:var(--ink2); margin-left:8px; font-size:12.5px; }
.rel ul{ margin:4px 0 0 18px; color:var(--ink2); }

/* ---------- fields ---------- */
.field{ margin-top:12px; min-width:0; }
.field label,.flabel{ display:block; font-size:12.5px; font-weight:700; color:var(--ink2); margin-bottom:5px; }
input:not([type="checkbox"]):not([type="file"]),select{ width:100%; min-height:46px; padding:10px 12px; border-radius:12px; border:1px solid var(--line2); background:var(--card); font-size:16px; }
input:focus,select:focus{ outline:none; border-color:var(--ac); box-shadow:0 0 0 3px var(--acs); }
.two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 10px; }
.moneyin{ display:flex; align-items:center; border:1px solid var(--line2); border-radius:12px; background:var(--card); overflow:hidden; }
.moneyin:focus-within{ border-color:var(--ac); box-shadow:0 0 0 3px var(--acs); }
.moneyin .cur{ padding:0 0 0 12px; color:var(--ink2); font-weight:700; }
.moneyin input{ border:none !important; box-shadow:none !important; }
.stepper{ display:flex; align-items:center; border:1px solid var(--line2); border-radius:12px; background:var(--card); overflow:hidden; }
.stepper input{ border:none !important; box-shadow:none !important; text-align:center; font-weight:700; padding:10px 0 !important; min-width:0; }
.stepper .stp{ width:46px; height:46px; font-size:22px; color:var(--ink); flex:none; }
.stepper .stp:hover{ background:var(--bg); }
.stepper.big input{ font-size:24px; }
.stepper.big .stp{ width:58px; height:58px; font-size:28px; }
.seg{ display:flex; gap:3px; background:var(--bg); border-radius:12px; padding:3px; }
.seg button{ flex:1; min-height:42px; border-radius:10px; font-weight:700; font-size:13.5px; color:var(--ink2); padding:0 6px; }
.seg button[aria-checked="true"]{ background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.14); }
.wdrow{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.wdrow button{ min-height:42px; border-radius:10px; background:var(--bg); font-weight:700; font-size:13px; color:var(--ink2); }
.wdrow button[aria-pressed="true"]{ background:var(--ink); color:var(--card); }
.switch{ display:flex; align-items:center; gap:12px; margin-top:14px; cursor:pointer; font-size:14.5px; font-weight:600; }
.switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.switch .sw{ position:relative; width:50px; height:30px; border-radius:99px; background:var(--line2); flex:none; transition:background .2s; }
.switch .sw::after{ content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s; }
.switch input:checked + .sw{ background:var(--ok); }
.switch input:checked + .sw::after{ transform:translateX(20px); }
.switch input:focus-visible + .sw{ outline:2.5px solid var(--ac); outline-offset:2px; }
.switch small{ display:block; font-size:12.5px; color:var(--ink2); font-weight:500; }
.checks{ display:flex; flex-wrap:wrap; gap:8px; }
.checks label{ display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 12px; border-radius:12px; background:var(--bg); font-weight:700; font-size:14px; cursor:pointer; }
.checks input{ width:18px; height:18px; accent-color:var(--ac); }
details.more{ margin-top:14px; border-top:1px solid var(--line); padding-top:10px; }
details.more summary{ cursor:pointer; font-weight:700; color:var(--ac); font-size:14px; padding:4px 0; }
.kindrow{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:2px 16px 4px; }
.kindrow::-webkit-scrollbar{ display:none; }
.kindrow button{ flex:none; display:flex; flex-direction:column; align-items:center; gap:4px; width:70px; padding:8px 2px; border-radius:14px; font-size:12px; font-weight:700; color:var(--ink2); border:1.5px solid transparent; }
.kindrow button[aria-checked="true"]{ border-color:var(--ac); background:var(--acs); color:var(--ink); }

/* ---------- sheets ---------- */
dialog.sheet{ position:fixed; inset:auto 0 0 0; margin:0 auto; width:100%; max-width:560px; max-height:92vh; max-height:92dvh; border:none; border-radius:22px 22px 0 0; background:var(--card); color:var(--ink); padding:0; box-shadow:0 -10px 40px rgba(0,0,0,.25); display:none; flex-direction:column; }
dialog.sheet[open]{ display:flex; animation:rise .24s cubic-bezier(.2,.8,.2,1); }
dialog.sheet::backdrop{ background:rgba(15,12,8,.45); animation:fade .2s; }
@keyframes rise{ from{ transform:translateY(40px); opacity:.4; } to{ transform:none; opacity:1; } }
@keyframes fade{ from{ opacity:0; } }
.sheet-head{ display:flex; align-items:flex-start; gap:10px; padding:16px 16px 6px; position:relative; }
.sheet-head::before{ content:""; position:absolute; top:6px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:4px; background:var(--line2); }
.sheet-head > div{ flex:1; min-width:0; padding-top:6px; }
.sheet-head b{ display:block; font-size:18px; font-weight:800; }
.sheet-head span{ display:block; font-size:13px; color:var(--ink2); }
.sheet-body{ padding:0 16px 12px; overflow-y:auto; overscroll-behavior:contain; }
.sheet-foot{ display:flex; gap:8px; align-items:center; padding:10px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); flex-wrap:wrap; }
.sheet-foot .grow{ flex:1; }
@media (min-width:700px){
  dialog.sheet{ inset:0; margin:auto; border-radius:22px; max-height:86vh; }
  dialog.sheet[open]{ animation:pop .2s ease-out; }
  @keyframes pop{ from{ transform:scale(.96); opacity:.5; } }
  .sheet-head::before{ display:none; }
}
.choices{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:6px; }
.choice{ display:flex; align-items:center; gap:10px; min-height:58px; padding:8px 12px; border-radius:14px; background:var(--bg); font-weight:750; font-size:15px; text-align:left; border:2px solid transparent; }
.choice i{ width:14px; height:14px; border-radius:5px; flex:none; }
.choice small{ display:block; font-weight:600; font-size:12px; color:var(--ink2); }
.choice[aria-pressed="true"]{ border-color:var(--ink); background:var(--card); }
.choice.ok i{ background:var(--ok); } .choice.no i{ background:var(--no); } .choice.half i{ background:var(--half); } .choice.chg i{ background:var(--chg); }
.isteps{ background:var(--bg); border-radius:14px; padding:12px 14px; margin-top:10px; }
.isteps b{ font-size:14.5px; }
.isteps ol{ margin:6px 0 0 20px; font-size:14px; color:var(--ink2); }
.isteps.mine{ border:1.5px solid var(--ac); background:var(--acs); }

/* ---------- the tab bar ---------- */
.tabbar{ position:sticky; bottom:0; z-index:5; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px); border-top:1px solid var(--line); border-radius:0 0 24px 24px; padding:6px 6px calc(6px + env(safe-area-inset-bottom)); }
.tabbar button{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0 4px; border-radius:12px; font-size:11.5px; font-weight:700; color:var(--ink3); }
.tabbar button svg{ width:24px; height:24px; stroke-width:1.9; }
.tabbar button[aria-selected="true"]{ color:var(--ac); }
.tabbar button[aria-selected="true"] svg{ stroke-width:2.3; }

/* ---------- toast ---------- */
.toast{ position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); top:auto; right:auto; margin:0; transform:translate(-50%,12px); background:var(--ink); color:var(--card); border:none; font-size:14px; font-weight:600; padding:12px 16px; border-radius:14px; box-shadow:0 12px 30px -8px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; display:flex; gap:14px; align-items:center; max-width:calc(100vw - 32px); width:max-content; z-index:50; inset:auto auto calc(84px + env(safe-area-inset-bottom)) 50%; }
.toast.on{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.toast button{ color:var(--ac); font-weight:800; font-size:14px; white-space:nowrap; }
@media (prefers-color-scheme:dark){ .toast button{ color:#b5532a; } }

/* ---------- guide and questions ---------- */
.mh-guide,.faqbox{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-top:16px; }
.mh-guide h2,.faqbox h2{ font-size:19px; font-weight:800; margin:18px 0 6px; letter-spacing:-.01em; }
.mh-guide h2:first-child,.faqbox h2:first-child{ margin-top:0; }
.mh-guide p,.mh-guide li{ font-size:15px; color:var(--ink); }
.mh-guide p{ margin:8px 0; }
.mh-guide ul,.mh-guide ol{ margin:8px 0 8px 22px; }
.mh-guide li{ margin:4px 0; }
.mh-guide code{ background:var(--bg); padding:1px 5px; border-radius:5px; font-size:.92em; }
.mh-guide .mh-scroll{ overflow-x:auto; margin:10px 0; }
.mh-guide table{ border-collapse:collapse; width:100%; font-size:14px; }
.mh-guide th,.mh-guide td{ border:1px solid var(--line2); padding:7px 9px; text-align:left; vertical-align:top; }
.mh-guide th{ background:var(--bg); }
.mh-guide td.r,.mh-guide th.r{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
details.faq{ border-top:1px solid var(--line); padding:11px 0; }
details.faq summary{ cursor:pointer; font-weight:700; font-size:15px; }
details.faq p{ color:var(--ink2); font-size:14.5px; margin-top:6px; }
.pages{ margin-top:14px; font-size:14px; color:var(--ink2); }
.pages a{ font-weight:700; margin-right:10px; }

/* ---------- as an installed app ---------- */
body.is-app header.site, body.is-app .intro, body.is-app .installcard, body.is-app .mh-guide, body.is-app .faqbox, body.is-app .mh-related, body.is-app footer.site{ display:none; }
html.pre-app header.site, html.pre-app .intro, html.pre-app .installcard, html.pre-app footer.site{ display:none; }
body.is-app.show-guide .mh-guide, body.is-app.show-guide .faqbox{ display:block; }
body.is-app{ background:var(--bg2); }
body.is-app main.page{ max-width:640px; padding:0; }
body.is-app .app{ border:none; border-radius:0; box-shadow:none; min-height:100vh; min-height:100dvh; }
body.is-app .appbar{ position:sticky; top:0; z-index:5; border-radius:0; padding-top:calc(12px + env(safe-area-inset-top)); background:color-mix(in srgb, var(--card) 90%, transparent); -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px); }
body.is-app .tabbar{ position:fixed; left:0; right:0; bottom:0; max-width:640px; margin:0 auto; border-radius:0; }
body.is-app .pane{ padding-bottom:calc(var(--tabh) + 28px + env(safe-area-inset-bottom)); }
body.is-app.show-guide .mh-guide{ margin:12px; }
body.is-app.show-guide .faqbox{ margin:12px 12px calc(var(--tabh) + 30px); }
@media (min-width:700px){
  body.is-app{ background:var(--bg); }
  body.is-app .app{ border-left:1px solid var(--line); border-right:1px solid var(--line); }
}
@media (max-width:420px){
  main.page{ padding:12px 8px 24px; }
  .app{ border-radius:20px; }
  .appbar{ border-radius:20px 20px 0 0; }
  .tabbar{ border-radius:0 0 20px 20px; }
  .pane{ padding:10px 8px 16px; }
  .sumbox b{ font-size:21px; }
  .cal{ gap:3px; padding:6px; }
  .cd{ border-radius:9px; }
  .cd .v{ font-size:10px; }
  .actions{ gap:6px; }
  h1.title{ font-size:23px; }
}

/* ---------- print: only the bill ---------- */
#printArea{ display:none; }
@media print{
  @page{ margin:14mm; }
  body > *:not(#printArea){ display:none !important; }
  body{ background:#fff; color:#000; display:block; }
  #printArea{ display:block !important; max-width:150mm; margin:0 auto; }
  #printArea .paper{ box-shadow:none; border:1px solid #000; background:#fff; color:#000; }
  #printArea .paper::after{ display:none; }
  #printArea .pp-month,#printArea .pp-total,#printArea .pp-rows li.minus b{ color:#000; }
  #printArea .pp-total{ background:#fff; border:2px solid #000; }
  #printArea .pp-home,#printArea .pp-meta,#printArea .pp-notes,#printArea .pp-rows li.small{ color:#333; }
  #printArea .pp-rows,#printArea .pp-rows li{ border-color:#888; }
  #printArea .pp-foot{ margin-top:10px; font-size:10px; color:#555; text-align:center; }
}