/* Citizen water service. Existing Sarabun and heritage palette retained. */
:root {
  --green-900:#0e3d14; --green-800:#14501c; --green-700:#1b5e20; --green-100:#dfeadf; --green-050:#eef4ee;
  --cream:#f7f5ee; --cream-dark:#eeeadd; --gold:#c9a227; --gold-soft:#f6e7bd;
  --amber-bg:#fff2d6; --amber-ink:#795410; --blue-bg:#e9f0f7; --blue-ink:#315b7a;
  --ink:#203326; --ink-soft:#56675b; --ink-faint:#637167; --line:#e0e5dc; --white:#fff;
  --radius:20px; --radius-sm:13px; --tap:50px; --shadow:0 3px 14px rgba(19,51,28,.045); --app-width:440px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { min-height:100%; background:#e5e9e0; }
body { margin:0; color:var(--ink); font-family:"Sarabun","Noto Sans Thai","Leelawadee UI",system-ui,sans-serif; font-size:16px; line-height:1.6; }
button,input,select { font:inherit; }
button,a,input,select { touch-action:manipulation; }
button { cursor:pointer; color:inherit; }
button,a { -webkit-user-select:none; user-select:none; }
svg { width:24px; height:24px; flex-shrink:0; vertical-align:middle; }
img { max-width:100%; display:block; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--green-700); outline-offset:4px; }
.header :focus-visible { outline-color:var(--gold-soft); }
button:disabled { cursor:default; opacity:.45; }
.phone { width:100%; max-width:var(--app-width); min-height:100vh; min-height:100dvh; margin:0 auto; background:var(--cream); position:relative; display:flex; flex-direction:column; isolation:isolate; }
#app { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; overflow-anchor:none; }
#app:focus { outline:none; }
h1[tabindex="-1"]:focus { outline:none; }
.draftbar { padding:5px 12px; font-size:11px; line-height:1.5; text-align:center; color:#4d614f; background:#eaf0e7; border-bottom:1px solid #dce5d9; }
.statusbar { display:flex; justify-content:space-between; align-items:center; min-height:27px; padding:5px 22px 2px; background:var(--green-900); color:var(--white); font-size:12px; font-weight:700; }
.statusbar .glyphs { font-size:11px; letter-spacing:2px; }
.statusbar.on-cream { color:var(--ink); background:var(--cream); }
/* Artwork belongs in the masthead, away from amounts and payment information. */
.header { position:relative; overflow:hidden; color:var(--white); background:var(--green-900); padding:8px 20px 29px; }
.header::before { content:""; position:absolute; inset:0; background:url("assets/river-community.webp") center 66% / cover no-repeat; mix-blend-mode:luminosity; opacity:.14; pointer-events:none; }
.header::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(14,61,20,.7),rgba(14,61,20,.03)); pointer-events:none; }
.header > * { position:relative; z-index:1; }
.brandrow { display:flex; align-items:center; gap:10px; }
.emblem { flex-shrink:0; display:grid; place-items:center; color:var(--green-900); background:var(--cream); border:1px solid var(--gold); border-radius:50%; }
.brandrow .emblem { width:42px; height:42px; box-shadow:0 0 0 4px rgba(247,245,238,.08); }
.brandrow .emblem svg { width:28px; height:28px; }
.brandrow .names { flex:1; min-width:0; }
.brandrow .names b { display:block; font-size:16px; line-height:1.5; font-weight:600; }
.brandrow .names span { display:block; font-size:12px; line-height:1.5; color:#e5d8ad; }
.bell { position:relative; display:grid; place-items:center; width:46px; height:46px; flex-shrink:0; padding:0; color:var(--white); border:1px solid rgba(255,255,255,.23); background:rgba(255,255,255,.06); border-radius:15px; }
.bell svg { width:22px; height:22px; }
.badge { position:absolute; right:-3px; top:-4px; min-width:19px; height:19px; display:grid; place-items:center; padding:0 5px; color:var(--green-900); background:var(--gold-soft); border:2px solid var(--green-900); border-radius:12px; font-size:10px; line-height:1; font-weight:700; }
.greeting { font-size:21px; line-height:1.5; font-weight:600; margin:19px 0 0; }
.body { flex:1; padding:20px 16px 32px; min-width:0; background:var(--cream); }
.home-body { position:relative; padding-top:0; margin-top:-15px; z-index:2; }
#app:has(.tabbar) > .body { padding-bottom:104px; }
.card { color:var(--ink); background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.card--flat { box-shadow:none; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:17px 17px 10px; flex-wrap:wrap; }
.card-head h2 { margin:0; font-size:16px; line-height:1.55; font-weight:700; color:var(--green-900); }
.card-head .sub { font-size:12px; color:var(--ink-soft); }
.section-title { margin:0 2px 12px; color:var(--green-900); font-size:16px; font-weight:700; }
/* Each address gets a full line; each bill keeps its own amount and action. */
.home-houses { border-color:#dce3d7; box-shadow:0 6px 24px rgba(14,61,20,.07); }
.home-houses > .card-head { padding-top:11px; padding-bottom:7px; border-bottom:1px solid var(--line); }
.addhouse { display:inline-flex; align-items:center; gap:5px; min-height:44px; padding:0 0 0 6px; background:none; border:0; color:var(--green-800); font-size:14px; font-weight:600; }
.plus { display:grid; place-items:center; }
.plus svg { width:18px; height:18px; }
.houserow { padding:13px 16px 14px; }
.houserow + .houserow { border-top:1px solid var(--line); }
.houserow--urgent { background:#fdfcf7; }
.house-link { display:grid; grid-template-columns:36px minmax(0,1fr) 16px; column-gap:9px; row-gap:7px; color:inherit; text-decoration:none; border-radius:9px; }
.house-icon { position:relative; width:36px; height:36px; background:var(--green-050); border:1px solid #e3eadf; border-radius:12px; display:grid; place-items:center; color:var(--green-800); }
.house-icon svg { width:20px; height:20px; }
.dot { width:9px; height:9px; border:2px solid #fdfcf7; border-radius:50%; background:var(--gold); position:absolute; top:-2px; right:-2px; }
.who { min-width:0; }
.who b { display:block; font-weight:600; font-size:16px; line-height:1.45; }
.who small { display:block; font-size:12px; color:var(--ink-soft); line-height:1.55; }
.house-link > .chev { color:#7b8b7b; padding-top:5px; }
.house-link > .chev svg { width:16px; height:16px; }
.money { grid-column:2 / -1; display:flex; gap:8px; align-items:center; justify-content:space-between; min-width:0; }
.amount { font-size:21px; font-weight:700; line-height:1.25; font-variant-numeric:tabular-nums; color:var(--green-900); white-space:nowrap; }
.amount small { font-size:13px; font-weight:400; color:var(--ink-soft); }
.house-state { text-align:right; min-width:0; }
.house-state .due { display:block; font-size:11px; margin-top:3px; color:var(--ink-soft); }
.houserow--urgent .money { grid-column:1 / -1; padding-top:5px; }
.houserow--urgent .amount { font-size:40px; font-weight:700; letter-spacing:-1px; }
.houserow--urgent .amount small { font-size:14px; letter-spacing:0; }
.houserow--settled .amount { color:var(--ink-soft); }
.house-pay { margin-top:12px; }
.chip { display:inline-block; font-size:12px; font-weight:600; line-height:1.5; padding:3px 8px; border-radius:7px; max-width:100%; }
.chip--amber { background:var(--amber-bg); color:var(--amber-ink); }
.chip--green { background:var(--green-050); color:var(--green-800); }
.chip--blue { background:var(--blue-bg); color:var(--blue-ink); }
/* Consistent controls and comfortable touch targets. */
.btn { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:var(--tap); padding:12px 16px; border:1px solid transparent; border-radius:var(--radius-sm); background:var(--green-800); color:var(--white); font-size:16px; font-weight:600; line-height:1.5; box-shadow:0 2px 3px rgba(14,61,20,.07); transition:background .15s,transform .15s; }
.btn svg { width:20px; height:20px; }
.btn:active { transform:translateY(1px); background:var(--green-900); }
.btn--ghost { background:var(--white); color:var(--green-800); border-color:#bccfba; box-shadow:none; }
.btn--ghost:active { background:var(--green-050); }
.btn--small { min-height:44px; padding:9px 14px; width:auto; font-size:14px; }
.btn-row { display:flex; gap:10px; }
.btn-row .btn { flex:1; }
.linkbtn { min-height:44px; padding:10px 4px; border:0; background:none; color:var(--green-800); font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.annstrip { display:flex; align-items:center; gap:10px; width:100%; margin:14px 0 20px; padding:12px; border:1px solid #e6d9b3; border-radius:16px; background:#faf2de; text-align:left; color:var(--green-900); }
.annstrip .mega { flex-shrink:0; width:34px; height:34px; display:grid; place-items:center; color:var(--amber-ink); background:#fff9eb; border-radius:11px; }
.annstrip .mega svg { width:19px; height:19px; }
.annstrip .text { flex:1; min-width:0; }
.annstrip .text b { display:block; font-size:14px; font-weight:600; line-height:1.5; }
.annstrip .text small { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; margin-top:3px; font-size:12px; color:#79643e; }
.annstrip > .chev { color:var(--amber-ink); font-size:24px; }
.tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; min-height:105px; padding:13px 5px; color:var(--green-900); background:var(--white); border:1px solid var(--line); border-radius:17px; font-size:13px; font-weight:600; line-height:1.45; box-shadow:var(--shadow); transition:border-color .15s,background .15s; }
.tile .ic { display:grid; place-items:center; width:42px; height:42px; background:var(--green-050); color:var(--green-800); border-radius:14px; }
.tile .ic svg { width:23px; height:23px; }
.tile:nth-child(4) .ic,.tile:nth-child(6) .ic { background:#f8f0db; color:#796427; }
.tile:active { background:var(--green-050); }
/* Charts remain per cycle; twelve months can scroll without shrinking labels. */
.usage-card { margin-top:20px; }
.chart { padding:17px 16px 16px; }
.chart .card-head { align-items:flex-start; gap:2px; flex-direction:column; }
.chart .housechips { display:flex; gap:6px; overflow-x:auto; padding:9px 2px 10px; scrollbar-width:thin; scrollbar-color:#c3d0bc transparent; scroll-snap-type:x proximity; }
.housechip { scroll-snap-align:start; flex-shrink:0; min-height:44px; padding:7px 12px; border:1px solid var(--line); border-radius:10px; background:#fafbf8; color:var(--ink-soft); font-size:12px; font-weight:600; }
.housechip[aria-pressed="true"] { background:var(--green-800); border-color:var(--green-800); color:white; }
.chart-plot { overflow-x:auto; padding-top:8px; scrollbar-width:thin; }
.bars { display:flex; align-items:flex-end; gap:10px; height:145px; padding:23px 4px 0; background:repeating-linear-gradient(to top,transparent 0,transparent 39px,#edf0e8 40px,#edf0e8 41px); }
.bar { flex:1; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }
.val { font-size:12px; font-weight:600; line-height:1.5; color:var(--green-900); margin-bottom:5px; }
.stick { width:100%; max-width:30px; min-height:6px; flex-shrink:1; background:#8fa88a; border-radius:5px 5px 0 0; }
.stick--peak { background:var(--green-800); }
.axis { display:flex; gap:10px; padding:7px 4px 3px; border-top:1px solid var(--line); }
.axis span { flex:1; min-width:0; font-size:11px; text-align:center; color:var(--ink-soft); white-space:nowrap; }
.chart-plot--year .bars,.chart-plot--year .axis { min-width:520px; }
.alert { display:flex; align-items:flex-start; gap:8px; padding:11px 12px; margin-top:14px; border-radius:11px; color:var(--amber-ink); background:var(--amber-bg); border:1px solid #ebddba; font-size:13px; line-height:1.65; }
.alert svg { width:18px; height:18px; margin-top:2px; }
/* All four state labels stay complete and readable. */
.rail { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; list-style:none; margin:8px 16px 14px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.rail .step { position:relative; display:flex; align-items:center; gap:12px; min-width:0; }
.rail .step:not(:last-child)::after { content:""; position:absolute; left:14px; top:30px; height:10px; border-left:1px solid #d1dacb; }
.rail .num { flex-shrink:0; display:grid; place-items:center; width:29px; height:29px; border:1px solid #c8d1c5; border-radius:50%; background:#f6f7f3; color:var(--ink-soft); font-size:13px; font-weight:600; }
.rail .num svg { width:16px; height:16px; }
.rail small { font-size:14px; line-height:1.55; color:var(--ink-soft); }
.rail .step--done .num { color:var(--white); background:var(--green-800); border-color:var(--green-800); }
.rail .step--now .num { color:var(--green-800); background:var(--white); border:2px solid var(--green-700); box-shadow:0 0 0 3px var(--green-050); }
.rail .step--now small { color:var(--green-900); font-weight:700; }
.lines { padding:3px 16px 14px; }
.line { display:flex; justify-content:space-between; gap:12px; padding:9px 0; font-size:15px; line-height:1.5; }
.line + .line { border-top:1px solid #edf0e8; }
.line span:first-child { color:var(--ink-soft); }
.line span:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.line--total { border-top:1px solid #b5c5ad !important; font-size:23px; font-weight:700; color:var(--green-900); margin-top:5px; padding-top:14px; }
.line--total span:first-child { color:var(--green-900); font-size:16px; align-self:center; }
.amount-hero { padding:18px 16px 16px; text-align:center; }
.amount-hero .big { font-size:42px; line-height:1.2; font-weight:700; color:var(--green-900); font-variant-numeric:tabular-nums; }
.amount-hero .big small { font-size:17px; font-weight:400; }
.amount-hero .meta { margin-top:7px; font-size:14px; color:var(--ink-soft); }
.qrbox { display:grid; place-items:center; gap:12px; padding:14px; }
.qr { width:190px; height:190px; background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 16px),repeating-linear-gradient(0deg,var(--ink) 0 8px,transparent 8px 16px); background-color:white; opacity:.18; filter:blur(1.2px); border-radius:6px; }
.qrframe { padding:20px; border:1px solid #ccd7c7; border-radius:20px; background:white; box-shadow:var(--shadow); }
.field { padding:10px 16px; }
.field label { display:block; margin-bottom:6px; color:var(--ink); font-size:14px; font-weight:600; }
.field input,.field select { width:100%; min-width:0; min-height:52px; padding:12px; border:1px solid #b9c7b7; border-radius:11px; background:var(--white); color:var(--ink); font-size:16px; line-height:1.5; }
.field input::placeholder { color:#788575; opacity:1; }
.field input:focus,.field select:focus { outline:2px solid var(--green-700); outline-offset:2px; }
.field input[readonly] { background:var(--green-050); border-color:var(--line); color:var(--green-900); font-weight:700; }
.field input[aria-invalid="true"] { border-color:var(--amber-ink); background:#fffaf0; }
.slot { display:flex; align-items:center; justify-content:center; gap:8px; width:calc(100% - 32px); min-height:76px; margin:6px 16px 0; padding:16px; border:1px dashed #aabb9f; border-radius:13px; background:#f8faf5; color:var(--ink-soft); font-size:15px; text-align:center; }
.slot.filled { background:var(--green-050); color:var(--green-800); border-style:solid; border-color:#acc1a4; }
.wizbody .slot { width:100%; }
.formnote { padding:2px 16px 8px; color:var(--ink-soft); font-size:13px; }
#bind-msg:empty { display:none; }
#bind-msg:not(:empty) { border-left:3px solid var(--gold); padding:9px 12px; background:var(--amber-bg); border-radius:4px; }
.list { display:flex; flex-direction:column; }
.listitem { display:flex; align-items:center; gap:12px; width:100%; padding:18px 16px; border:0; background:none; color:inherit; text-align:left; }
.listitem + .listitem { border-top:1px solid var(--line); }
.listitem .ic { width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; background:var(--green-050); border-radius:14px; }
.listitem .ic svg { width:22px; height:22px; }
.listitem .txt { flex:1; min-width:0; }
.listitem .txt b { display:block; font-size:16px; font-weight:600; line-height:1.55; }
.listitem .txt small { display:block; margin-top:4px; font-size:13px; color:var(--ink-soft); }
.listitem .chev { color:var(--ink-soft); font-size:24px; }
.listitem.unread { background:#fcfaf1; box-shadow:inset 3px 0 0 var(--gold); }
.tag-new { display:inline-block; margin-left:4px; padding:1px 6px; background:var(--gold-soft); color:var(--amber-ink); border-radius:5px; font-size:11px; font-weight:600; vertical-align:middle; }
.receipt { position:relative; padding:20px 16px 26px; text-align:center; background:var(--white); border-bottom:1px dashed #b8c9af; margin:0 14px 13px; }
.receipt .glyph { width:64px; height:64px; margin:0 auto 14px; display:grid; place-items:center; background:var(--green-050); color:var(--green-800); border-radius:20px; }
.receipt .glyph svg { width:30px; height:30px; }
.receipt .no { color:var(--green-900); font-size:21px; font-weight:700; }
.receipt .meta { margin-top:3px; font-size:13px; line-height:1.7; color:var(--ink-soft); }
.receipt .amt { margin:18px 0 12px; font-size:34px; font-weight:700; color:var(--green-900); font-variant-numeric:tabular-nums; }
.topbar { display:flex; align-items:center; gap:11px; padding:9px 16px 14px; background:var(--cream); border-bottom:1px solid #dce1d5; }
.back { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; padding:0 0 3px; border:1px solid var(--line); border-radius:14px; color:var(--green-900); background:var(--white); font-size:28px; line-height:1; }
.topbar .emblem { display:none; }
.topbar .t { min-width:0; }
.topbar h1 { margin:0; font-size:19px; line-height:1.45; font-weight:600; color:var(--green-900); }
.topbar .t > span { display:block; font-size:12px; color:var(--ink-soft); }
.tabbar { position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:20; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; max-width:var(--app-width); padding:7px 12px calc(9px + env(safe-area-inset-bottom,0px)); background:rgba(255,255,252,.97); border-top:1px solid #d9e1d3; box-shadow:0 -5px 22px rgba(14,61,20,.045); }
.tabbar button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:53px; padding:6px 3px; background:none; border:0; border-radius:13px; font-size:11px; line-height:1.45; color:var(--ink-soft); }
.tabbar button svg { width:23px; height:23px; }
.tabbar button[aria-current="page"] { color:var(--green-900); background:var(--green-050); font-weight:700; }
/* Wizards keep the next action within reach without covering the form. */
.wiz { display:flex; flex-direction:column; flex:1; min-height:0; }
.wizhead { padding:8px 20px 15px; border-bottom:1px solid var(--line); background:var(--cream); }
.wizhead .row { display:flex; align-items:center; gap:12px; }
.wizhead .label { color:var(--ink-soft); font-size:13px; font-weight:600; }
.wizhead .steps { display:flex; gap:6px; margin-top:14px; }
.wizhead .steps i { flex:1; height:4px; border-radius:4px; background:#dce3d6; }
.wizhead .steps i.on { background:var(--green-800); }
.wizhead .steps i.done { background:#92ac88; }
.wizbody { flex:1; min-width:0; padding:25px 22px 28px; }
.wizbody h1 { margin:0 0 10px; color:var(--green-900); font-size:25px; font-weight:600; line-height:1.5; }
.wizbody p.lead { margin:0 0 20px; color:var(--ink-soft); font-size:16px; line-height:1.7; }
.wizart { width:104px; height:104px; margin:8px auto 22px; display:grid; place-items:center; background:var(--green-050); color:var(--green-800); border:1px solid #dbe5d4; border-radius:30px; }
.wizart svg { width:48px; height:48px; }
.bind-art { width:180px; height:150px; object-fit:cover; object-position:50% 60%; margin:-8px auto 15px; mix-blend-mode:multiply; mask-image:radial-gradient(ellipse at center,#000 44%,transparent 73%); }
.wizsteps-list { list-style:none; margin:0; padding:0; }
.wizsteps-list li { display:flex; align-items:flex-start; gap:12px; padding:13px 0; font-size:15px; }
.wizsteps-list li + li { border-top:1px solid var(--line); }
.wizsteps-list li b { flex-shrink:0; display:grid; place-items:center; width:29px; height:29px; border-radius:9px; background:var(--green-050); color:var(--green-800); font-size:14px; font-weight:700; }
.wizsteps-list li b svg { width:18px; height:18px; }
.wizfoot { position:sticky; bottom:0; padding:13px 20px calc(17px + env(safe-area-inset-bottom,0px)); border-top:1px solid #dce3d6; background:rgba(247,245,238,.98); z-index:10; }
.wizfoot .hint { margin:9px 0 0; color:var(--ink-soft); text-align:center; font-size:12px; line-height:1.6; }
.bigchoice { display:flex; align-items:center; gap:13px; position:relative; width:100%; padding:19px 16px; margin:0 0 13px; color:inherit; background:var(--white); border:1px solid #cfd9c8; border-radius:17px; text-align:left; }
.bigchoice[aria-pressed="true"] { border:2px solid var(--green-700); padding:18px 15px; background:var(--green-050); }
.bigchoice .ic { width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; background:#f4f7f0; color:var(--green-800); border-radius:13px; }
.bigchoice .ic svg { width:25px; height:25px; }
.bigchoice b { display:block; color:var(--green-900); font-size:16px; font-weight:600; line-height:1.55; }
.bigchoice small { display:block; color:var(--ink-soft); font-size:13px; line-height:1.65; margin-top:5px; }
.done-mark { width:83px; height:83px; margin:8px auto 24px; display:grid; place-items:center; color:var(--green-800); background:var(--green-100); border:8px solid #eff3e9; border-radius:50%; }
.done-mark svg { width:35px; height:35px; }
.welcome { display:flex; flex-direction:column; flex:1; text-align:center; background:var(--cream); overflow:hidden; }
.welcome-brand { padding:40px 20px 5px; z-index:1; }
.welcome-emblem { display:grid; place-items:center; width:56px; height:56px; margin:0 auto 18px; border:1px solid #d1bd79; border-radius:19px; color:var(--green-900); background:#fffcf0; box-shadow:0 0 0 5px #efebd9; }
.welcome-emblem svg { width:30px; height:30px; }
.welcome h1 { margin:0; color:var(--green-900); font-size:33px; font-weight:600; line-height:1.45; }
.welcome-brand p { margin:5px 0 0; font-size:16px; color:var(--ink-soft); }
.welcome-art { width:100%; height:285px; object-fit:cover; object-position:50% 68%; mix-blend-mode:multiply; margin-top:0; mask-image:linear-gradient(transparent,#000 9%,#000 92%,transparent); }
.welcome-actions { margin-top:auto; padding:18px 24px 28px; }
.welcome-actions p { margin:0 auto 19px; max-width:270px; color:var(--ink-soft); font-size:16px; }
.welcome-actions .linkbtn { margin-top:12px; color:var(--ink-soft); font-weight:400; }
.empty { padding:42px 22px; color:var(--ink-soft); text-align:center; }
.empty .big { display:grid; place-items:center; width:72px; height:72px; margin:0 auto 18px; border-radius:22px; background:var(--green-050); color:var(--green-800); }
.empty .big svg { width:32px; height:32px; }
.disclaimer { margin:16px 2px 0; color:var(--ink-soft); font-size:12px; line-height:1.75; }
.toast { position:fixed; z-index:50; left:50%; bottom:calc(88px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); width:max-content; max-width:min(380px,calc(100% - 32px)); padding:13px 17px; border:1px solid #526c47; border-radius:14px; color:var(--white); background:var(--green-900); box-shadow:0 6px 24px rgba(14,61,20,.2); font-size:14px; line-height:1.65; text-align:center; }
@media (hover:hover) { .btn:hover { background:var(--green-900); } .btn--ghost:hover { background:var(--green-050); } .tile:hover,.listitem:hover { background:#f6f9f1; } .house-link:hover .who b { text-decoration:underline; text-underline-offset:3px; } }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.payment-house { display:flex; align-items:center; gap:12px; padding:14px 0 8px; color:var(--green-900); }
.payment-house > svg { width:27px; height:27px; flex:none; }
.payment-house b { font-weight:600; font-size:16px; }
.payment-house small { display:block; font-size:13px; color:var(--ink-soft); margin-top:4px; }
.wizbody .selection-hint { margin:12px 0 14px; font-size:14px; }
.month-picker { border:0; padding:0; margin:0; min-width:0; }
.select-all { display:flex; align-items:center; gap:11px; min-height:48px; margin-bottom:8px; font-size:15px; cursor:pointer; }
.select-all small { margin-left:auto; color:var(--ink-soft); font-size:13px; }
.month-picker input[type="checkbox"] { width:22px; height:22px; min-height:22px; flex:none; margin:0; padding:0; accent-color:var(--green-800); cursor:pointer; border-radius:5px; }
.month-option { display:flex; align-items:center; gap:11px; padding:16px 13px; margin-bottom:10px; min-height:88px; border:1px solid var(--line); border-radius:15px; background:var(--white); cursor:pointer; }
.month-option.is-selected { background:#f0f5e9; border-color:#799663; box-shadow:inset 0 0 0 1px #799663; }
.month-option:focus-within,.select-all:focus-within { outline:3px solid #a58a37; outline-offset:3px; }
.month-description { flex:1; min-width:0; }
.month-description > b { display:block; font-size:16px; font-weight:600; color:var(--green-900); }
.month-due { display:block; margin-top:7px; color:var(--ink-soft); font-size:12px; line-height:1.7; }
.month-due.is-overdue { color:var(--amber-ink); }
.month-price { font-size:19px; font-weight:700; color:var(--green-900); text-align:right; font-variant-numeric:tabular-nums; }
.month-price small { display:block; font-size:12px; font-weight:400; color:var(--ink-soft); }
.month-option.is-locked { background:#f1f0e9; cursor:default; }
.month-option.is-locked input { cursor:default; }
.month-option.is-locked .month-due { font-size:13px; }
.selection-total { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px; color:var(--ink-soft); font-size:14px; }
.selection-total b { font-size:28px; color:var(--green-900); font-variant-numeric:tabular-nums; }
.selection-total small { font-size:14px; font-weight:400; }
.btn:disabled { color:#62685e; background:#e0e4d9; cursor:not-allowed; box-shadow:none; }
.wizfoot > .btn + .btn { margin-top:10px; }
.payment-summary { padding:15px; margin:18px 0; border:1px solid var(--line); border-radius:16px; background:var(--white); }
.summary-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.summary-heading h2 { margin:0; font-size:15px; font-weight:600; line-height:1.7; color:var(--green-900); }
.summary-heading .linkbtn { min-width:72px; min-height:44px; padding:0; font-size:12px; margin:-7px -3px 0 0; }
.summary-account { margin:4px 0 12px; font-size:12px; color:var(--ink-soft); }
.payment-summary .line { padding:7px 0; font-size:14px; gap:12px; }
.payment-summary .line--total { margin-top:9px; padding-top:13px; font-size:15px; border-top:1px dashed #b6c2a9; }
.payment-summary .line--total b { color:var(--green-900); white-space:nowrap; }
.payment-methods { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0; }
.method-choice { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 8px; min-height:60px; border:1px solid var(--line); border-radius:13px; background:var(--white); color:var(--ink-soft); font-size:14px; }
.method-choice svg { width:24px; height:24px; flex:none; }
.method-choice[aria-pressed="true"] { background:var(--green-050); border-color:var(--green-800); box-shadow:inset 0 0 0 1px var(--green-800); color:var(--green-900); font-weight:600; }
.payment-instruction { margin:22px 0 12px; text-align:center; font-size:17px; font-weight:600; color:var(--green-900); }
.qr-note { text-align:center; font-size:14px; color:var(--ink-soft); margin:8px 0; }
.payment-field { padding-left:0; padding-right:0; }
.payment-slip { margin:6px 0 0; width:100%; }
.month-links { padding:0 16px 8px; }
.month-link { display:grid; grid-template-columns:minmax(0,1fr) auto 12px; align-items:center; gap:6px 10px; padding:17px 0; border-top:1px solid var(--line); color:var(--green-900); text-decoration:none; min-height:86px; }
.month-link b { font-size:17px; font-variant-numeric:tabular-nums; font-weight:600; }
.month-link small { font-size:12px; font-weight:400; }
.month-title { font-size:16px; }
.month-state { grid-row:2; grid-column:1 / 3; color:var(--ink-soft); font-size:14px; line-height:1.7; }
.month-link .chev { grid-column:3; grid-row:1 / 3; font-size:26px; color:var(--ink-soft); }
@media (max-width:359px) { .month-option { padding:14px 10px; gap:8px; } .month-description > b { font-size:15px; } .month-price { font-size:18px; } .summary-heading { flex-wrap:wrap; } .month-link { gap:6px; } .month-title { font-size:15px; } }
@media (max-width:359px) {
  .header { padding-left:16px; padding-right:16px; } .body { padding-left:12px; padding-right:12px; }
  .houserow { padding-left:12px; padding-right:12px; }
  .house-link { grid-template-columns:30px minmax(0,1fr) 12px; column-gap:7px; }
  .house-icon { width:30px; height:34px; } .who b { font-size:15px; } .who small { font-size:11px; }
  .houserow--urgent .amount { font-size:35px; } .chip { font-size:11px; }
  .tiles { gap:8px; } .tile { font-size:12px; }
  .rail { margin-left:12px; margin-right:12px; }
  .wizbody { padding-left:18px; padding-right:18px; }
}
@media (min-width:600px) {
  body { padding:28px 0; }
  .phone { min-height:calc(100vh - 56px); min-height:calc(100dvh - 56px); border:1px solid #cbd5c4; border-radius:26px; box-shadow:0 18px 60px rgba(26,50,28,.12); }
  .draftbar { border-radius:25px 25px 0 0; }
  .tabbar { bottom:18px; max-width:calc(var(--app-width) - 22px); padding:7px 9px 8px; border:1px solid #d9e1d3; border-radius:21px; box-shadow:0 8px 24px rgba(20,51,28,.12); }
  .welcome,.wizfoot { border-radius:0 0 25px 25px; } .welcome-art { height:310px; }
}
@media (max-height:700px) { .welcome-brand { padding-top:22px; } .welcome-art { height:205px; } .welcome-actions { padding-top:10px; padding-bottom:18px; } .bind-art { height:110px; width:155px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media (forced-colors:active) { .chip,.tile,.card,.tabbar { border:1px solid CanvasText; } .step--now .num,[aria-current="page"] { outline:2px solid Highlight; } }