/* Citizen water app v2. Faithful to the accepted mockups S1-S9 (deliverables/design/2026-09-27-citizen-app-v2).
   Owner quality rules: content images show whole (contain), content text wraps (no clamp, no ellipsis). */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { min-height: 100%; background: #e5e9e0; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--ink);
  font-family: "Sarabun", "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif;
  font-size: var(--t-body); line-height: 1.5; overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid var(--green-700); outline-offset: 3px; }
button:disabled { cursor: default; opacity: .45; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.shell { position: relative; width: 100%; max-width: var(--app-width); min-height: 100vh; min-height: 100dvh; margin: 0 auto; background: var(--cream); display: flex; flex-direction: column; }
.shell::before { content: ""; display: block; height: env(safe-area-inset-top, 0px); flex: none; }
#view { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#view:focus { outline: none; }
.page { flex: 1; padding: 12px var(--gutter) 24px; min-width: 0; }
.has-tabbar .page { padding-bottom: var(--nav-clear); }
.test-banner { padding: 4px 12px; font-size: var(--t-tab); text-align: center; color: var(--amber-ink); background: var(--amber-note-bg); border-bottom: 1px solid var(--amber-note-line); }

/* ---------- icons: single-colour alpha masks from assets/icons (asset manifest A) ---------- */
.ic { display: inline-block; flex: none; width: var(--glyph); height: var(--glyph); background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ic--home { --m: url(../assets/icons/tab-home.png); }
.ic--home-f { --m: url(../assets/icons/tab-home-filled.png); }
.ic--bill { --m: url(../assets/icons/tab-bill.png); }
.ic--bill-f { --m: url(../assets/icons/tab-bill-filled.png); }
.ic--notices { --m: url(../assets/icons/tab-notices.png); }
.ic--notices-f { --m: url(../assets/icons/tab-notices-filled.png); }
.ic--requests { --m: url(../assets/icons/tab-requests.png); }
.ic--requests-f { --m: url(../assets/icons/tab-requests-filled.png); }
.ic--pay { --m: url(../assets/icons/pay-drop.png); }
.ic--history { --m: url(../assets/icons/history.png); }
.ic--add-house { --m: url(../assets/icons/add-house.png); }
.ic--request { --m: url(../assets/icons/request.png); }
.ic--transfer { --m: url(../assets/icons/transfer.png); }
.ic--bell { --m: url(../assets/icons/bell.png); }
.ic--house { --m: url(../assets/icons/house.png); }
.ic--chev-r { --m: url(../assets/icons/chevron-right.png); }
.ic--chev-d { --m: url(../assets/icons/chevron-down.png); }
.ic--back { --m: url(../assets/icons/back.png); }
.ic--close { --m: url(../assets/icons/close.png); }
.ic--download { --m: url(../assets/icons/download.png); }
.ic--image { --m: url(../assets/icons/image.png); }
.ic--calendar { --m: url(../assets/icons/calendar.png); }
.ic--warning { --m: url(../assets/icons/warning.png); }
.ic--check { --m: url(../assets/icons/check.png); }
.ic--expand { --m: url(../assets/icons/expand.png); }
.ic--info { --m: url(../assets/icons/info.png); }
.ic--alert-triangle { --m: url(../assets/icons/alert-triangle.png); }
.ic--alert-circle { --m: url(../assets/icons/alert-circle.png); }
.ic--map-pin { --m: url(../assets/icons/map-pin.png); }
.ic--clock { --m: url(../assets/icons/clock.png); }
.ic--phone-bank { --m: url(../assets/icons/phone-bank.png); }
.ic--phone { --m: url(../assets/icons/phone.png); }
.ic--shield { --m: url(../assets/icons/shield.png); }
.ic--trash { --m: url(../assets/icons/trash.png); }
.ic--locate { --m: url(../assets/icons/svc/locate.png); }
.ic--camera { --m: url(../assets/icons/svc/camera.png); }
.ic--officer-note { --m: url(../assets/icons/svc/officer-note.png); }
/* One Astra icon per e-service type (catalog v1 ids). */
.ic--svc-install { --m: url(../assets/icons/svc/install.png); }
.ic--svc-transfer { --m: url(../assets/icons/svc/transfer.png); }
.ic--svc-reconnect { --m: url(../assets/icons/svc/reconnect.png); }
.ic--svc-suspend { --m: url(../assets/icons/svc/suspend.png); }
.ic--svc-cancel { --m: url(../assets/icons/svc/cancel.png); }
.ic--svc-update { --m: url(../assets/icons/svc/update.png); }
.ic--svc-meter-check { --m: url(../assets/icons/svc/meter-check.png); }
.ic--svc-meter-broken { --m: url(../assets/icons/svc/meter-broken.png); }
.ic--svc-meter-move { --m: url(../assets/icons/svc/meter-move.png); }
.ic--svc-meter-size { --m: url(../assets/icons/svc/meter-size.png); }
.ic--svc-bill-review { --m: url(../assets/icons/svc/bill-review.png); }
.ic--svc-leak-discount { --m: url(../assets/icons/svc/leak-discount.png); }
.ic--svc-installment { --m: url(../assets/icons/svc/installment.png); }
.ic--svc-no-arrears { --m: url(../assets/icons/svc/no-arrears.png); }
.ic--svc-receipt-copy { --m: url(../assets/icons/svc/receipt-copy.png); }
.ic--svc-leak { --m: url(../assets/icons/svc/leak.png); }
.ic--svc-no-water { --m: url(../assets/icons/svc/no-water.png); }
.ic--svc-quality { --m: url(../assets/icons/svc/quality.png); }
.ic--svc-water-truck { --m: url(../assets/icons/svc/water-truck.png); }
.ic--svc-general { --m: url(../assets/icons/svc/general.png); }

/* ---------- top bars ---------- */
.topbar { display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 4px 8px 0; }
.topbar h1 { flex: 1; min-width: 0; font-size: var(--t-title); line-height: 1.3; font-weight: 700; color: var(--green-900); overflow-wrap: break-word; }
.topbar--center h1 { text-align: center; }
.topbar--center::after { content: ""; flex: none; width: var(--tap); }
.topbar--center.topbar--noback::after, .topbar--center.has-end::after { display: none; }
.topbar--center.topbar--noback h1 { padding: 0 var(--tap); }
.topbar--center.has-end.topbar--noback h1 { padding: 0 0 0 var(--tap); }
.topbar--left h1 { padding-left: 4px; }
.topbar--plain { padding: 8px var(--gutter) 0; }
.topbar--plain h1 { padding: 0; }
.iconbtn { display: grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 50%; background: none; color: var(--green-900); }
.iconbtn .ic { width: 26px; height: 26px; }
.topbar-end { flex: none; min-height: var(--tap-dense); padding: 0 8px; border: 0; background: none; font-size: var(--t-body); font-weight: 600; color: var(--green-900); }

/* ---------- v4 green town header (tab pages + bill/pay stack) ----------
   Decorative background, not content: the town/river art may be cover-cropped here (owner rule no-crop applies to
   content images only). A deep-green tint keeps white text >= 4.5:1 over any part of the art. */
.hero { position: relative; display: flex; align-items: center; gap: 10px; min-height: var(--hero-h); margin: 0 var(--gutter); padding: 8px 8px 8px 14px; border-radius: 0 0 18px 18px; background-color: var(--green-800);
  background-image: linear-gradient(90deg, rgba(14, 61, 20, .72) 0%, rgba(14, 61, 20, .38) 60%, rgba(14, 61, 20, .3) 100%), url(../assets/header/header-town.png);
  background-image: linear-gradient(90deg, rgba(14, 61, 20, .72) 0%, rgba(14, 61, 20, .38) 60%, rgba(14, 61, 20, .3) 100%), image-set(url(../assets/header/header-town.png) 1x, url(../assets/header/header-town-2x.png) 2x);
  background-size: cover; background-position: center 60%; color: var(--white); overflow: hidden; }
.hero--back { padding-left: 4px; }
.hero-text { flex: 1; min-width: 0; }
.hero h1 { font-size: var(--t-hero); line-height: 1.3; font-weight: 800; color: var(--white); overflow-wrap: break-word; }
.hero-sub { font-size: var(--t-help); line-height: 1.35; font-weight: 600; color: var(--hero-sub); overflow-wrap: break-word; }
/* Brand mark as in the old app (prototype .emblem): the water-mark tile with a faint mint edge. */
.hero-mark { flex: none; width: 38px; height: 38px; border: 1px solid rgba(109, 228, 194, .28); border-radius: 11px; background: var(--green-900); object-fit: contain; }
.hero .iconbtn { color: var(--white); }
.hero .bellbtn { margin: 0; }
.hero .bellbtn .ic { color: var(--white); }
.hero .badge { top: 2px; right: 2px; background: var(--gold-bar); color: var(--green-900); }
.hero-end { color: var(--hero-sub); font-size: var(--t-help); font-weight: 700; }

/* ---------- v4 amount block: deep green, drop watermark ---------- */
.amtblock { position: relative; padding: 10px 16px 12px; border-radius: var(--radius); background: var(--green-800); color: var(--white); overflow: hidden; }
.amtblock::after { content: ""; position: absolute; right: 18px; top: 50%; width: 58px; height: 72px; transform: translateY(-50%); background: var(--white); opacity: .1; pointer-events: none;
  -webkit-mask: url(../assets/icons/pay-drop.png) center / contain no-repeat; mask: url(../assets/icons/pay-drop.png) center / contain no-repeat; }
.amtblock > * { position: relative; z-index: 1; }
.amtblock .lbl { font-size: var(--t-body); font-weight: 600; line-height: 1.35; color: var(--white); }
.amtblock .amount { margin: 0; color: var(--white); }
.amtblock .due, .amtblock .sub { font-size: var(--t-body); line-height: 1.4; color: var(--white); }
.amtblock .chip { margin: 2px 0 2px; }

/* ---------- v4 solid icon tiles ---------- */
.tile { display: grid; place-items: center; flex: none; width: var(--tile); height: var(--tile); border-radius: 14px; background: var(--green-900); color: var(--white); }
.tile .ic { width: var(--glyph); height: var(--glyph); }
.tile--soft { width: 44px; height: 44px; border-radius: 12px; background: var(--green-050); color: var(--green-900); }
.tile--sm { width: 44px; height: 44px; border-radius: 12px; }
/* The Astra service icons are fine-line art: drawn larger in the tile so they read like the mockup's glyphs. */
.tile .ic[class*="ic--svc-"] { width: 34px; height: 34px; }
.tile--sm .ic[class*="ic--svc-"] { width: 30px; height: 30px; }
.rd-note > .ic--officer-note { width: 32px; height: 32px; }
.slot-add .ic--camera { width: 32px; height: 32px; }

/* ---------- cards, rows ---------- */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li + li { border-top: 1px solid var(--line-soft); }
.row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--row); padding: 8px 14px; border: 0; background: none; text-align: left; text-decoration: none; }
.row .ic--chev-r { width: 20px; height: 20px; color: var(--ink-soft); }
.row-main { flex: 1; min-width: 0; }
.section-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0 8px; }
.section-h h2 { font-size: var(--t-section); line-height: 1.3; font-weight: 700; color: var(--green-900); }
.linkbtn { display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap-dense); padding: 0 4px; border: 0; background: none; color: var(--green-900); font-size: var(--t-body); text-decoration: none; }
.linkbtn .ic { width: 18px; height: 18px; }
.textlink { display: inline-flex; align-items: center; min-height: var(--tap-dense); padding: 0 4px; border: 0; background: none; color: var(--green-800); font-size: var(--t-body); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.muted { color: var(--ink-soft); }
.meta { font-size: var(--t-meta); color: var(--ink-soft); }
.help { font-size: var(--t-help); color: var(--ink-soft); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: var(--tap); padding: 8px 16px; border: 2px solid var(--green-900); border-radius: var(--radius-s); background: var(--green-900); color: var(--white); font-size: var(--t-section); font-weight: 700; line-height: 1.3; text-decoration: none; text-align: center; }
.btn--ghost { background: var(--white); color: var(--green-900); }
.btn--quiet { border: 1px solid #c9ccc6; background: var(--white); color: var(--ink); font-weight: 600; }
.btn--danger { border-color: var(--red-ink); background: var(--white); color: var(--red-ink); }
.btn .ic { width: 26px; height: 26px; }
.btn + .btn { margin-top: 12px; }

/* ---------- chips (state text is never cut) ---------- */
.chip { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 12px; border-radius: 8px; font-size: var(--t-help); font-weight: 700; line-height: 1.4; }
.chip--unpaid, .chip--due { background: var(--amber-bg); color: var(--amber-ink); }
.chip--overdue { background: var(--red-bg); color: var(--red-ink); }
.chip--awaiting_check { background: var(--blue-bg); color: var(--blue-ink); }
.chip--funds_confirmed, .chip--paid, .chip--done { background: var(--paid-bg); color: var(--paid-ink); }
.chip--progress { background: var(--blue-bg); color: var(--blue-ink); }

/* ---------- house selector (S1, S2, S6) ---------- */
.house-sel { flex: 1; width: 100%; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: var(--row); padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); text-align: left; }
.house-sel > .ic--house { width: 28px; height: 28px; color: var(--green-900); }
.house-sel > .ic--chev-d { width: 22px; height: 22px; color: var(--green-900); }
.house-sel b { display: block; font-size: var(--t-section); line-height: 1.3; font-weight: 700; color: var(--green-900); overflow-wrap: break-word; }
.house-sel small { display: block; font-size: var(--t-help); line-height: 1.4; color: var(--ink-soft); }
.bellbtn { position: relative; }
.bellbtn .ic { width: 28px; height: 28px; color: var(--ink); }
.badge { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--badge); color: var(--white); font-size: var(--t-tab); font-weight: 700; line-height: 20px; text-align: center; }
/* Dots: 44 px targets; the active one is a pill. */
.dots { display: flex; justify-content: center; gap: 0; margin: 2px 0 0; }
.dot { display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -10px; padding: 0; border: 0; background: none; }
.dot::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: #b9beb8; transition: width .15s; }
.dot[aria-current="true"]::before { width: 22px; background: var(--green-900); }

/* ---------- v4 home: banking-style house carousel ---------- */
.amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; margin: 2px 0 6px; color: var(--green-900); font-variant-numeric: tabular-nums; }
.amount b { font-size: var(--t-amount); font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.amount span { font-size: var(--t-section); font-weight: 700; line-height: 1.3; }
a.row, a.ncard-open, a.nt-open, a.bellbtn { text-decoration: none; color: inherit; }
a.rtype, a.quick-btn, a.hcard--add { text-decoration: none; }
.houses { margin: 0 calc(-1 * var(--gutter)); }
.hc-track { position: relative; display: flex; align-items: stretch; gap: 10px; padding: 0 var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.hc-track::-webkit-scrollbar { display: none; }
.hc-track:focus-visible { outline-offset: -3px; }
/* Current card ~86 % wide; the next card peeks ~24 px. */
.hcard { flex: 0 0 calc(100% - 18px); min-width: 0; scroll-snap-align: start; padding: 10px 10px 0; box-shadow: 0 1px 3px rgba(19, 51, 28, .06); }
.hcard--static { padding-bottom: 10px; }
/* Head: tile | address + account | chip | sheet chevron; on phones under 380 px the chip moves under the address. */
.hc-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "tile main chip chev"; align-items: center; gap: 4px 8px; margin-bottom: 8px; }
.hc-head .tile--soft { grid-area: tile; width: 40px; height: 40px; border-radius: 10px; }
.hc-head .row-main { grid-area: main; }
.hc-head .chip { grid-area: chip; }
.hc-head .hc-sheet { grid-area: chev; }
@media (max-width: 379px) {
  .hc-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tile main chev" "tile chip chev"; }
  .hc-head .chip { justify-self: start; }
}
.hc-head .row-main b, .hc-head h2 { display: block; font-size: var(--t-body); line-height: 1.3; font-weight: 700; color: var(--ink); overflow-wrap: break-word; }
.hc-head .row-main small { display: block; font-size: var(--t-meta); line-height: 1.35; color: var(--ink-soft); }
.hc-head .chip { flex: none; min-height: 26px; padding: 2px 8px; font-size: var(--t-meta); }
.hc-sheet { width: var(--tap-dense); height: var(--tap-dense); margin: -4px -6px -4px -8px; }
.hc-sheet .ic { width: 22px; height: 22px; }
.hc-none { padding: 4px 6px 14px; }
.hc-none .lbl { font-weight: 700; }
.hcard .cut { margin: 6px 4px 0; color: var(--red-ink); font-weight: 700; }
.hcard .viewbill { width: auto; margin: 6px -10px 0; padding: 0 14px; min-height: var(--row-dense); border-top: 1px solid var(--line); font-size: var(--t-section); font-weight: 700; color: var(--green-900); }
.hcard .viewbill .ic--chev-r { color: var(--green-900); }
.hcard .errbox { margin: 0 0 10px; }
.hcard--add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 180px; border: 2px dashed #a9b3a8; border-radius: var(--radius); background: transparent; color: var(--green-900); font-size: var(--t-section); font-weight: 700; box-shadow: none; }
.add-plus { display: grid; place-items: center; width: var(--tile); height: var(--tile); border-radius: 50%; background: var(--green-050); font-size: 28px; font-weight: 700; line-height: 1.3; }

.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.quick-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 64px; padding: 4px 2px; border: 0; background: none; color: var(--ink); text-decoration: none; font-size: var(--t-help); font-weight: 600; line-height: 1.4; text-align: center; }
.quick-btn span:last-child { overflow-wrap: break-word; }

/* ---------- v4 whole-poster notice cards (home, notices tab) ---------- */
.ncard { overflow: hidden; }
.ncard-img { position: relative; display: grid; place-items: center; width: calc(100% - 12px); margin: 6px 6px 0; padding: 8px; border: 0; border-radius: 10px; background: var(--poster-bg); }
.ncard-img img { width: auto; max-width: 100%; height: auto; max-height: 120px; object-fit: contain; }
.ncard-img .ic--expand { position: absolute; right: 8px; bottom: 8px; width: 20px; height: 20px; color: var(--ink-soft); }
.ncard-open { display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 6px 12px 8px 14px; }
.ncard-open b { display: block; font-size: var(--t-body); line-height: 1.35; font-weight: 700; color: var(--ink); overflow-wrap: break-word; }
.ncard-open small { display: block; font-size: var(--t-help); color: var(--ink-soft); }
.ncard-open .ic--chev-r { width: 20px; height: 20px; color: var(--ink); }

/* ---------- empty states ---------- */
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 8px 16px; text-align: center; }
.empty img { width: 200px; max-width: 70%; height: auto; object-fit: contain; }
.empty h2 { font-size: var(--t-section); line-height: 1.3; color: var(--green-900); }
.empty p { color: var(--ink-soft); }
.empty .btn { margin-top: 8px; }

/* ---------- bill list (S2) ---------- */
.bill-row { flex-wrap: wrap; gap: 4px 10px; }
.bill-row .per { min-width: 56px; color: var(--ink-soft); font-size: var(--t-body); }
.bill-row .amt { flex: 1 1 auto; font-size: var(--t-section); font-weight: 700; color: var(--green-900); }
.bill-row .chip { margin-left: auto; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* ---------- bill detail (S3) ---------- */
.detail { padding: 14px 16px 4px; }
.detail .lbl { font-size: var(--t-help); font-weight: 600; color: var(--ink-soft); }
.card.detail:has(> .amtblock) { padding: 8px 8px 0; }
.detail > .amtblock .lbl { font-size: var(--t-body); color: var(--white); }
.detail-rows { padding: 2px 10px 4px; }
.detail-rows > .kv:first-child, .detail-rows > .cut + .kv { border-top: 0; }
.detail-rows > .cut { padding: 8px 0 2px; color: var(--red-ink); font-weight: 700; }
.detail-rows .kv { min-height: 44px; }
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 40px; padding: 7px 0; border-top: 1px solid var(--line-soft); }
.kv > span:first-child { color: var(--ink-soft); }
.kv > span:last-child { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.kv--total > span { color: var(--ink) !important; font-size: var(--t-section); font-weight: 800; }
.kv--total > span:last-child { color: var(--green-900) !important; }
.kv--strong > span:last-child { font-weight: 700; color: var(--green-900); }
.more { border-top: 1px solid var(--line); }
.more > summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--row-dense); cursor: pointer; list-style: none; color: var(--ink); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary .ic { width: 22px; height: 22px; color: var(--green-900); transition: transform .15s; }
.more[open] > summary .ic { transform: rotate(180deg); }
.detail-cta { margin-top: 12px; }

/* ---------- pay select (S4a) ---------- */
.pay-group { margin-bottom: 12px; overflow: hidden; }
.pay-group h2 { display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: var(--t-section); line-height: 1.3; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); overflow-wrap: break-word; }
.pay-group h2 .ic { width: 28px; height: 28px; color: var(--green-900); }
.pay-group h2 span { min-width: 0; }
.pick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: var(--row); padding: 6px 16px; cursor: pointer; }
.pick + .pick { border-top: 1px solid var(--line); }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.box { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid #8a908b; border-radius: 6px; background: var(--white); color: var(--white); }
.box .ic { width: 18px; height: 18px; visibility: hidden; }
.pick input:checked + .box { border-color: var(--green-900); background: var(--green-900); }
.pick input:checked + .box .ic { visibility: visible; }
.pick input:focus-visible + .box { outline: 3px solid var(--green-700); outline-offset: 3px; }
.pick .per { flex: 1; color: var(--ink-soft); }
.pick .amt { font-size: var(--t-section); font-weight: 700; color: var(--green-900); text-align: right; }
.pick .chip { margin-left: 4px; }
.pick--info { cursor: default; background: var(--green-050); }
.box--info { border: 0; background: none; color: var(--green-900); }
.box--info .ic { width: 22px; height: 22px; visibility: visible; }
.pick--info .per small { display: block; font-size: var(--t-help); color: var(--ink-soft); }
.pick--info .amt { color: var(--ink-soft); }
.paybar { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) - 1px + env(safe-area-inset-bottom, 0px)); z-index: 15; width: 100%; max-width: var(--app-width); transform: translateX(-50%); padding: 6px var(--gutter) 36px; background: var(--white); border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; }
.paybar .lbl { font-size: var(--t-body); line-height: 1.3; color: var(--ink-soft); }
.paybar .amount { margin: 0 0 4px; }
.has-tabbar .page.paypage { padding-bottom: calc(var(--nav-clear) + 150px); }

/* ---------- pay QR (S4b) ---------- */
.seg { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; border: 1.5px solid var(--green-900); border-radius: var(--radius-s); background: var(--white); overflow: hidden; }
.seg button { min-height: var(--tap-dense); padding: 4px 8px; border: 0; background: none; font-size: var(--t-section); font-weight: 600; color: var(--ink); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--green-900); color: var(--white); border-radius: var(--radius-s); }
.qrpage { display: flex; flex-direction: column; align-items: center; text-align: center; }
.qrpage .seg, .qrpage [data-counter] { width: 100%; }
.qrpage .amtblock { width: 100%; text-align: left; margin-bottom: 10px; }
.qrpage .amtblock .amount { justify-content: flex-start; margin: 0; }
.qrpage .amtblock .sub { color: var(--white); }
.qrpage .seg { width: calc(100% - 32px); }
.qrpage .qrbox { margin-top: 12px; box-shadow: 0 1px 3px rgba(19, 51, 28, .08); border-radius: var(--radius); }
.qrpage [data-bank] { width: 100%; display: flex; flex-direction: column; align-items: center; }
.qrpage .amount { justify-content: center; margin: 12px 0 0; }
.qrpage .sub { color: var(--ink-soft); font-size: var(--t-body); }
.qrbox { position: relative; display: grid; place-items: center; width: 212px; max-width: 70vw; aspect-ratio: 1; margin: 8px 0 12px; padding: 12px; background: var(--white); border-radius: 8px; }
.qrbox canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.qr-test { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-12deg); padding: 4px 10px; border: 2px solid var(--red-ink); border-radius: 6px; background: rgba(255, 255, 255, .92); color: var(--red-ink); font-size: var(--t-section); font-weight: 800; line-height: 1.3; width: max-content; max-width: 92%; text-align: center; }
.qrpage .btn--ghost { width: calc(100% - 32px); }
.qrpage .help { margin: 6px 0 0; }
.paidlink { min-height: var(--tap); margin-top: 2px; padding: 0 16px; border: 0; background: none; color: var(--green-900); font-size: var(--t-section); font-weight: 800; }
.counter-note { margin: 12px 0; padding: 12px 14px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); color: var(--ink-soft); text-align: left; }

/* ---------- awaiting (S4c) ---------- */
.done { display: flex; flex-direction: column; align-items: center; text-align: center; }
.done .okmark { display: grid; place-items: center; width: 72px; height: 72px; margin: 20px 0 10px; border-radius: 50%; background: var(--green-900); color: var(--white); }
.done .okmark .ic--check { width: 40px; height: 40px; }
.done h2 { font-size: var(--t-hero); line-height: 1.3; color: var(--green-900); }
.done .chip { margin: 10px 0 16px; }
.done .card { width: 100%; padding: 4px 16px; text-align: center; }
.done .card .amount { justify-content: center; }
.done .card > div { padding: 10px 0; }
.done .card > div + div { border-top: 1px solid var(--line-soft); color: var(--ink-soft); }
.done .card .amount { margin: 0; }
.done .btn { margin-top: 16px; }

/* ---------- scan (S5a) ---------- */
.scan-stage { position: relative; display: grid; place-items: center; margin: 4px calc(-1 * var(--gutter)) 12px; min-height: 240px; padding: 16px; background: var(--scan-dark); color: var(--white); overflow: hidden; }
.scan-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.scan-frame { position: relative; width: 150px; height: 150px; margin-bottom: 36px; }
.scan-frame i { position: absolute; width: 26px; height: 26px; border: 0 solid var(--white); }
.scan-frame i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.scan-frame i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.scan-frame i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.scan-frame i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.scan-hint { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 1; text-align: center; font-size: var(--t-section); line-height: 1.35; }
.scan-prompt { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.scan-prompt img { width: 112px; height: 112px; object-fit: contain; }
.scan-prompt .btn { width: auto; min-width: min(180px, 100%); background: var(--white); color: var(--green-900); border-color: var(--white); }
.scan-msg { margin: 0 0 8px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--amber-note-bg); color: var(--amber-ink); font-size: var(--t-help); }
.scan-msg--ok { background: var(--green-050); color: var(--green-900); }
.file-btn { position: relative; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.center { text-align: center; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field label, .field .flabel { font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.field input, .field textarea, .field select { width: 100%; min-height: var(--tap); padding: 8px 12px; border: 1px solid #b9beb8; border-radius: var(--radius-s); background: var(--white); font-size: var(--t-body); }
.field textarea { min-height: 72px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 3px solid var(--green-700); outline-offset: 1px; border-color: var(--green-700); }
.field .err { font-size: var(--t-help); color: var(--red-ink); }
.guide-img { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--white); }
.guide-img img { width: 100%; height: auto; max-height: 320px; object-fit: contain; }
.files { list-style: none; margin: 4px 0 0; padding: 0; }
.files li { display: flex; align-items: center; gap: 8px; min-height: var(--tap-dense); border-top: 1px solid var(--line-soft); }
.files li span { flex: 1; min-width: 0; overflow-wrap: break-word; font-size: var(--t-help); }
.formcard { padding: 14px 16px 4px; }

/* ---------- history (S6) ---------- */
.hist .house-sel { min-height: var(--row-dense); padding: 4px 14px; }
.hist .house-sel b { font-size: var(--t-body); font-weight: 600; }
.hist .seg { margin: 8px 0; }
.hist .seg button { font-size: var(--t-body); }
.chart { padding: 8px 8px 4px; overflow-x: auto; }
.chart .unit { margin: 0 0 0 4px; font-size: var(--t-meta); color: var(--ink-soft); }
.chart svg { display: block; height: auto; font-family: inherit; }
.chart .ax { font-size: 13px; fill: var(--ink-soft); }
.chart .val { font-size: 13px; font-weight: 700; fill: var(--green-900); }
.note { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 10px 14px; border: 1px solid var(--amber-note-line); border-radius: var(--radius); background: var(--amber-note-bg); color: var(--amber-ink); }
.note .ic { width: 30px; height: 30px; }
.note p { font-size: var(--t-body); font-weight: 600; line-height: 1.4; }
.hist-row { font-size: var(--t-body); }

/* ---------- notifications (S7) ---------- */
.nt-row { align-items: center; padding: 12px 14px; }
.nt-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: var(--tap); }
.nt-thumb { position: relative; flex: none; display: grid; place-items: center; width: 64px; min-height: 72px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
.nt-thumb img { width: 100%; height: auto; max-height: 80px; object-fit: contain; }
.nt-thumb .ic--expand { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; color: var(--ink-soft); }
.nt-row small .gap { display: inline-block; width: 10px; }
/* Short relative-time/date label stays one word (never "วัน"/"นี้"); the address before it wraps instead. */
.nt-row small .nt-when { display: inline-block; white-space: nowrap; }
.nt-row .ttl { display: block; color: var(--ink); overflow-wrap: break-word; }
.nt-row.unread .ttl { font-weight: 800; color: var(--green-900); }
.nt-row .udot { display: inline-block; width: 10px; height: 10px; margin-left: 8px; border-radius: 50%; background: var(--green-900); vertical-align: middle; }
.nt-row small { display: block; font-size: var(--t-help); color: var(--ink-soft); }
.nt-row .ic--chev-r { align-self: center; }

/* ---------- requests (S8) ---------- */
.rtypes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rtype { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-height: 80px; padding: 4px 2px; border: 0; background: none; color: var(--ink); font-size: var(--t-body); font-weight: 600; line-height: 1.35; text-align: center; }
.rtype .tile .ic { width: var(--glyph); height: var(--glyph); }
.req-row { align-items: center; padding: 10px 14px; }
.req-row b { font-weight: 700; }
.req-row .chip { margin-top: 4px; }
.chip--muted { background: var(--line-soft); color: var(--ink-soft); }
.count { display: inline-grid; place-items: center; min-width: 28px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--green-100); color: var(--green-900); font-size: var(--t-help); font-weight: 700; line-height: 1.3; }

/* ---------- v4 services catalog (Requests tab) ---------- */
.mine-row { display: flex; align-items: center; gap: 10px; min-height: var(--row-dense); padding: 6px 12px 6px 14px; text-decoration: none; color: var(--ink); }
.mine-row b { font-size: var(--t-section); font-weight: 700; }
.mine-row .ic--chev-r { margin-left: auto; width: 20px; height: 20px; color: var(--ink); }
.svc-group { margin-top: 10px; }
.svc-h { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: var(--t-body); line-height: 1.3; font-weight: 700; color: var(--green-900); }
.svc-h::after { content: ""; flex: 1; height: 1px; background: var(--green-100); }
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 4px; }
.svc { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 88px; padding: 4px 2px; color: var(--ink); text-decoration: none; font-size: var(--t-meta); line-height: 1.35; text-align: center; overflow-wrap: break-word; }
.svc span:last-child { min-width: 0; max-width: 100%; }

/* ---------- v4 request form ---------- */
.reqform .field > label, .reqform .flabel { font-weight: 700; }
.opt-note { font-weight: 400; color: var(--ink-soft); }
.house-pill { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap-dense); margin: 0 0 12px; padding: 4px 14px; border: 1px solid var(--line); border-radius: 22px; background: var(--white); color: var(--ink); }
.house-pill > .ic { width: 22px; height: 22px; color: var(--green-900); }
.house-pill b { font-weight: 700; overflow-wrap: break-word; }
.house-pill--pick { position: relative; display: flex; padding: 0 10px 0 14px; }
.house-pill--pick select { flex: 1; min-width: 0; min-height: var(--tap-dense); padding: 0 28px 0 0; border: 0; background: none; font-weight: 700; appearance: none; -webkit-appearance: none; }
.house-pill--pick > .ic--chev-d { position: absolute; right: 12px; width: 18px; height: 18px; pointer-events: none; }
.opts { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
.opts legend { padding: 0; margin-bottom: 4px; font-weight: 700; }
.optrow { display: flex; flex-wrap: wrap; gap: 8px; }
.optcol { display: flex; flex-direction: column; gap: 6px; }
.opt { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap-dense); padding: 6px 12px; border: 1px solid #b9beb8; border-radius: var(--radius-s); background: var(--white); cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.optbox { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 2px solid #8a908b; border-radius: 50%; color: var(--white); }
.opt--check .optbox { border-radius: 6px; }
.optbox .ic { width: 14px; height: 14px; visibility: hidden; }
.opt:has(input:checked) { border-color: var(--green-900); background: var(--green-050); font-weight: 700; }
.opt input:checked + .optbox { border-color: var(--green-900); background: var(--green-900); }
.opt input:checked + .optbox .ic { visibility: visible; }
.opt input:focus-visible + .optbox { outline: 3px solid var(--green-700); outline-offset: 2px; }
.ferr-field { font-size: var(--t-help); color: var(--red-ink); font-weight: 600; }
.ferr { margin-bottom: 8px; color: var(--red-ink); font-weight: 600; }
[aria-invalid="true"] { border-color: var(--red-ink) !important; }
.slot-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.slot-list { display: contents; }
.slot-add { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 104px; min-height: 96px; padding: 6px; border: 1px dashed #a9b3a8; border-radius: var(--radius-s); background: var(--green-050); color: var(--green-900); font-size: var(--t-help); font-weight: 700; text-align: center; cursor: pointer; }
.slot-add .ic { width: 28px; height: 28px; }
.slot-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.slot-add:focus-within { outline: 3px solid var(--green-700); outline-offset: 2px; }
.slot-item { position: relative; }
.slot-thumb { position: relative; display: grid; place-items: center; width: 104px; min-height: 96px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--poster-bg); }
.slot-thumb img { width: 100%; height: auto; max-height: 120px; object-fit: contain; }
.slot-thumb .ic--expand { position: absolute; right: 4px; bottom: 4px; width: 16px; height: 16px; color: var(--ink-soft); }
.slot-doc { display: flex; align-items: center; gap: 6px; width: 104px; min-height: 96px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--white); font-size: var(--t-meta); overflow-wrap: anywhere; }
.slot-rm { position: absolute; top: -10px; right: -10px; display: grid; place-items: center; width: var(--tap-dense); height: var(--tap-dense); padding: 0; border: 0; background: none; color: var(--white); }
.slot-rm::before { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); }
.slot-rm .ic { position: relative; width: 16px; height: 16px; }
.loc { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.loc legend { padding: 0; margin-bottom: 6px; font-weight: 700; }
/* Static pin preview (no map tiles are fetched): decorative map art (whole, 2:1) with a centred pin. */
.loc-map { position: relative; aspect-ratio: 2 / 1; max-height: 180px; margin-bottom: 8px; border-radius: var(--radius-s); background: #f5f0e3 url(../assets/illustrations/map-preview.png) center / contain no-repeat; }
.loc-pin { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -26px 0 0 -13px; border-radius: 50% 50% 50% 0; background: var(--ink-faint); transform: rotate(-45deg); }
.loc-pin::after { content: ""; position: absolute; left: 8px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--white); }
.loc--set .loc-pin { background: var(--red-ink); }
.loc-btn { margin-bottom: 6px; }
.loc-out { margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.loc textarea { width: 100%; min-height: var(--tap); margin-top: 4px; padding: 8px 12px; border: 1px solid #b9beb8; border-radius: var(--radius-s); background: var(--white); }
.loc > label { display: block; margin-top: 6px; font-weight: 700; }

/* ---------- v4 request detail ---------- */
.rd { padding: 12px 14px; }
.rd-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.rd-top .meta { display: block; }
.rd-no { display: block; font-size: var(--t-section); line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.tl { list-style: none; margin: 12px 0 4px; padding: 0; }
.tl-step { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.tl-step:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--green-700); }
.tl-mark { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--green-700); color: var(--white); }
.tl-mark .ic { width: 16px; height: 16px; }
.tl-step--sched.tl-step--now .tl-mark { background: var(--white); border: 2px solid var(--blue-ink); color: var(--blue-ink); }
.tl-body { display: flex; flex-direction: column; min-width: 0; }
.tl-body b { color: var(--green-900); }
.tl-step--sched.tl-step--now .tl-body b { color: var(--blue-ink); }
.tl-sub { font-size: var(--t-help); color: var(--ink-soft); }
.tl-note { margin-top: 2px; font-size: var(--t-help); color: var(--ink); overflow-wrap: break-word; white-space: pre-line; }
.rd-note { display: flex; gap: 10px; margin: 4px 0 8px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--green-050); }
.rd-note > .ic { width: 28px; height: 28px; color: var(--green-900); }
.rd-note b { display: block; color: var(--green-900); }
.rd-note span { display: block; font-size: var(--t-help); overflow-wrap: break-word; white-space: pre-line; }
.rd-h { margin: 12px 0 6px; font-size: var(--t-body); font-weight: 700; color: var(--ink); }
.rd-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rd-photo { position: relative; display: grid; place-items: center; min-height: 120px; padding: 4px; border: 0; border-radius: var(--radius-s); background: var(--poster-bg); }
.rd-photo img { width: 100%; height: auto; max-height: 180px; object-fit: contain; }
.rd-photo .ic--expand { position: absolute; right: 6px; top: 6px; width: 18px; height: 18px; color: var(--ink-soft); }
.rd .more { margin-top: 8px; }
.rd-reply { margin-top: 12px; }
.rd-cancel { margin-top: 12px; }

/* ---------- v4 home cut card ---------- */
.amtblock--cut { background: var(--red-bg); color: var(--red-ink); }
.amtblock--cut::after { background: var(--red-ink); opacity: .12; }
.amtblock--cut .lbl, .amtblock--cut .amount, .amtblock--cut .due { color: var(--red-ink); }
.hc-reconnect { margin-top: 8px; min-height: var(--tap-dense); }

/* ---------- v4 more ---------- */
.more-row { gap: 12px; font-size: var(--t-body); }
.more-row b { font-weight: 700; }
.more-row .count { margin-right: 4px; }
.more-fold > summary { list-style: none; cursor: pointer; }
.more-fold > summary::-webkit-details-marker { display: none; }
.more-fold[open] > summary .ic--chev-r { transform: rotate(90deg); }
.more-body { padding: 0 14px 12px 70px; color: var(--ink-soft); }

/* ---------- notice detail + viewer ---------- */
.nd-img { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius); background: #e4e7e3; }
.nd-img img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
.nd-body { margin-top: 12px; white-space: pre-line; overflow-wrap: break-word; }
.nd-meta { margin-top: 8px; }
.nd-web { margin-top: 12px; }
.weblink { gap: 2px; }
.weblink .ic { width: 18px; height: 18px; }
.more-contact { display: flex; flex-direction: column; gap: 4px; }
.more-contact .umeta { color: var(--ink); }
.more-contact .umeta--noicon { padding-left: 30px; } /* no mail / LINE icon asset yet: text lines up with the icon rows */
.viewer { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: var(--viewer-bg); color: var(--white); touch-action: none; }
.viewer-stage { position: relative; flex: 1; overflow: hidden; }
.viewer-stage img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
.viewer-close { position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); right: 8px; z-index: 2; color: var(--white); background: rgba(0, 0, 0, .35); }
.viewer-count { position: absolute; left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 2; text-align: center; font-size: var(--t-help); }

/* ---------- sheet + dialog + toast ---------- */
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .45); }
.sheet { position: fixed; left: 50%; bottom: 0; z-index: 71; width: 100%; max-width: var(--app-width); max-height: 80dvh; overflow-y: auto; transform: translateX(-50%); padding: 12px var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--white); border-radius: 16px 16px 0 0; }
.sheet h2 { margin: 0 0 8px; font-size: var(--t-section); line-height: 1.3; color: var(--green-900); }
.sheet .row[aria-current="true"] b { color: var(--green-900); }
.dialog { position: fixed; left: 50%; top: 50%; z-index: 71; width: min(340px, calc(100% - 32px)); transform: translate(-50%, -50%); padding: 18px 16px 16px; background: var(--white); border-radius: 16px; }
.dialog h2 { font-size: var(--t-section); line-height: 1.3; color: var(--ink); }
.dialog p { margin-top: 6px; color: var(--ink-soft); }
.dialog .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.dialog .acts .btn + .btn { margin-top: 0; }
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-clear) + 8px); z-index: 95; display: flex; align-items: center; gap: 8px; width: max-content; max-width: min(calc(100% - 32px), 408px); transform: translateX(-50%); padding: 10px 16px 10px 12px; border-radius: 10px; background: var(--ink); color: var(--white); font-size: var(--t-help); line-height: 1.4; overflow-wrap: break-word; }
.toast[hidden] { display: none; }
.toast .ic { width: 22px; height: 22px; }
.toast > span { min-width: 0; }
.errbox { margin: 12px 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.errbox b { display: block; color: var(--red-ink); }
.errbox .btn { margin-top: 10px; }
.skeleton { position: relative; min-height: 200px; overflow: hidden;
  background: linear-gradient(var(--line-soft), var(--line-soft)) 14px 18px / 55% 18px no-repeat,
    linear-gradient(var(--line-soft), var(--line-soft)) 14px 50px / 35% 14px no-repeat,
    linear-gradient(var(--line-soft), var(--line-soft)) 14px 84px / calc(100% - 28px) 96px no-repeat, var(--white); }
@media (prefers-reduced-motion: no-preference) { .skeleton { animation: skel 1.4s ease-in-out infinite; } }
@keyframes skel { 50% { opacity: .55; } }

/* ---------- more ---------- */
.more-list .row > .ic:first-child { width: 26px; height: 26px; color: var(--green-900); }
.more-list .row small.version { font-size: var(--t-tab); color: var(--ink-faint); }
.more-list .row b { display: block; font-weight: 600; overflow-wrap: break-word; }
.more-list .row small { display: block; font-size: var(--t-help); color: var(--ink-soft); }
.rm { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap-dense); padding: 0 10px; border: 1px solid #d9b3b3; border-radius: 8px; background: var(--white); color: var(--red-ink); font-size: var(--t-help); font-weight: 600; }
.rm .ic { width: 18px; height: 18px; }
.version { margin: 16px 0 0; text-align: center; font-size: var(--t-tab); color: var(--ink-faint); }
.prose p + p { margin-top: 10px; }

/* ---------- tab bar (H2a shape, compact) ---------- */
.tabbar { position: fixed; left: 50%; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; max-width: var(--app-width); transform: translateX(-50%); padding: 6px 4px calc(4px + env(safe-area-inset-bottom, 0px)); isolation: isolate; }
.tab-surface { position: absolute; inset: 0; z-index: -1; display: flex; pointer-events: none; background: linear-gradient(transparent 40px, var(--white) 40px); filter: drop-shadow(0 -2px 6px rgba(19, 51, 28, .05)); }
.tab-surface i { flex: 1; min-width: 0; background: var(--white); border-top: 1.5px solid var(--gold-bar); }
.tab-surface svg { flex: 0 0 104px; width: 104px; height: 44px; }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-height: 48px; padding: 2px 0 0; border: 0; background: none; color: var(--tab-ink); font-size: var(--t-tab); line-height: 1.4; text-decoration: none; }
.tab .ic { width: var(--glyph); height: var(--glyph); }
.tab[aria-current="page"] { color: var(--green-900); font-weight: 700; }
.tab-pay { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 48px; padding: calc(4px + var(--glyph)) 0 0; /* label on the same line as .tab labels: 2px pad + glyph + 2px gap */ border: 0; background: none; color: var(--green-900); font-size: var(--t-tab); font-weight: 700; line-height: 1.4; text-decoration: none; }
.fab { position: absolute; left: 50%; top: -28px; transform: translateX(-50%); display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--green-900); color: var(--white); box-shadow: 0 0 0 3px var(--white), 0 0 0 4.5px var(--gold-bar); }
.fab .ic { width: 30px; height: 30px; }
.tab-label { overflow-wrap: break-word; }

/* ---------- first-run welcome (V4-welcome) ---------- */
.welcome { display: flex; flex-direction: column; padding-top: 20px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.wlist { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wrow { display: flex; align-items: center; gap: 16px; min-height: 84px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--white); box-shadow: 0 1px 3px rgba(19, 51, 28, .06); color: var(--ink); font-size: var(--t-title); font-weight: 700; line-height: 1.35; text-decoration: none; }
.wrow .row-main { overflow-wrap: break-word; }
.wtile { width: 56px; height: 56px; }
.wtile .ic { width: 30px; height: 30px; }
.wrow > .ic--chev-r { width: 22px; height: 22px; color: var(--ink); }
.wacts { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: auto; padding-top: 28px; }
.wbtn { min-height: 56px; font-size: var(--t-title); }
.wbtn .ic { width: 28px; height: 28px; }
.wskip { min-height: var(--tap); margin-top: 8px; padding: 0 12px; border: 0; background: none; color: var(--ink); font-size: var(--t-section); font-weight: 600; }
.wprivacy { display: inline-flex; align-items: center; min-height: var(--tap-dense); padding: 0 8px; color: var(--ink-soft); font-size: var(--t-help); text-decoration: none; }

/* ---------- urgent alerts: banner, badges, list cards, popup, detail (V4-urgent-*) ---------- */
.ubanner { display: flex; align-items: center; gap: 10px; min-height: 52px; margin-bottom: 12px; padding: 8px 10px 8px 14px; border: 1px solid; border-radius: 12px; font-size: var(--t-body); font-weight: 700; line-height: 1.4; text-decoration: none; }
.ubanner .row-main { overflow-wrap: break-word; }
.ubanner > .ic { width: 26px; height: 26px; }
.ubanner > .ic--chev-r { width: 20px; height: 20px; }
.ubanner--emergency { border-color: #f0b9b9; background: var(--red-bg); color: var(--red-ink); }
.ubanner--watch { border-color: var(--amber-note-line); background: var(--amber-note-bg); color: var(--amber-ink); }
.ubanner--important { border-color: var(--amber-note-line); background: var(--gold-soft); color: var(--lv-important-ink); }
.ubanner-lv { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 30px; padding: 2px 10px 2px 6px; border-radius: 8px; font-size: var(--t-help); font-weight: 700; line-height: 1.3; }
.ubanner-lv .ic { width: 20px; height: 20px; }
.ubanner--emergency .ubanner-lv { background: var(--lv-emergency); color: var(--lv-emergency-ink); }
.ubanner--watch .ubanner-lv { background: var(--lv-watch); color: var(--lv-watch-ink); }
.ubanner--important .ubanner-lv { background: var(--lv-important); color: var(--lv-important-ink); }
.ubadge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 32px; padding: 3px 12px 3px 8px; border-radius: 8px; color: var(--white); font-size: var(--t-body); font-weight: 700; line-height: 1.3; }
.ubadge .ic { width: 22px; height: 22px; }
.ubadge--emergency { background: var(--lv-emergency); color: var(--lv-emergency-ink); }
.ubadge--watch { background: var(--lv-watch); color: var(--lv-watch-ink); }
.ubadge--important { background: var(--lv-important); color: var(--lv-important-ink); }
.uchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ustatus { min-height: 32px; font-size: var(--t-help); }
.umeta { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-soft); font-size: var(--t-body); line-height: 1.45; }
.umeta > span { min-width: 0; overflow-wrap: break-word; }
.umeta .ic { width: 22px; height: 22px; margin-top: 1px; color: var(--green-900); }
.seg--tabs { gap: 6px; margin-bottom: 12px; padding: 5px; border: 1px solid var(--line); border-radius: 14px; }
.seg--tabs button { min-height: var(--tap); border-radius: 10px; background: var(--poster-bg); font-weight: 700; }
.seg--tabs button + button { border-left: 0; }
.ucard { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: center; gap: 8px; padding: 12px 2px 12px 14px; }
.ucard-open { display: flex; flex-direction: column; gap: 6px; min-width: 0; text-decoration: none; }
.ucard-h { font-size: var(--t-title); line-height: 1.3; font-weight: 800; color: var(--ink); overflow-wrap: break-word; }
.ucard-img, .uimg { position: relative; display: grid; place-items: center; padding: 6px; border: 0; border-radius: 10px; background: var(--poster-bg); }
.ucard-img { align-self: stretch; width: clamp(88px, 27vw, 116px); min-height: 110px; }
.ucard-img img { width: auto; max-width: 100%; height: auto; max-height: 140px; object-fit: contain; }
.ucard-img .ic--expand, .uimg .ic--expand { position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; color: var(--ink-soft); }
.ucard-go { display: grid; place-items: center; align-self: stretch; color: var(--ink); }
.ucard-go .ic { width: 22px; height: 22px; }
.uimg { width: 100%; padding: 10px; }
.uimg img { width: auto; max-width: 100%; height: auto; max-height: min(220px, 30dvh); object-fit: contain; }
.uhead { font-size: var(--t-hero); line-height: 1.3; font-weight: 800; color: var(--ink); overflow-wrap: break-word; }
.usum { line-height: 1.6; overflow-wrap: break-word; white-space: pre-line; }
.umeta-row, .umeta-col { display: flex; flex-direction: column; gap: 6px; }
.umeta--link { min-height: var(--tap-dense); align-items: center; color: var(--green-900); font-weight: 600; text-decoration: none; }
.uupd { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--green-050); overflow-wrap: break-word; }
.uupd b { color: var(--green-900); font-size: var(--t-help); }
.uact, .uatt { align-self: flex-start; gap: 6px; font-weight: 600; }
.uatt .ic { width: 20px; height: 20px; }
.uwrap { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: rgba(226, 229, 223, .72); overscroll-behavior: contain; }
.upop { display: flex; flex-direction: column; width: min(360px, 100%); max-height: calc(100dvh - 32px); border-radius: 16px; background: var(--white); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.upop:focus { outline: none; }
.upop-head { display: flex; flex: none; align-items: center; gap: 10px; min-height: 56px; padding: 4px 4px 4px 16px; border-radius: 16px 16px 0 0; color: var(--white); }
.upop-head > .ic { width: 28px; height: 28px; }
.upop-head b { flex: 1; min-width: 0; font-size: var(--t-title); font-weight: 800; line-height: 1.3; overflow-wrap: break-word; }
.upop-head .iconbtn { color: var(--white); }
.upop--emergency .upop-head { background: var(--lv-emergency); color: var(--lv-emergency-ink); }
.upop--emergency .upop-head .iconbtn { color: var(--lv-emergency-ink); }
.upop--watch .upop-head { background: var(--lv-watch); color: var(--lv-watch-ink); }
.upop--watch .upop-head .iconbtn { color: var(--lv-watch-ink); }
.upop-body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 4px; }
.upop-body .uhead, .upop-body .usum { text-align: center; }
.upop-body .uchips { justify-content: center; }
.upop-body .umeta { color: var(--ink); }
.upop-all, .upop-body .uact { align-self: center; }
.upop-body .umeta-row { align-items: center; }
.upop-foot { flex: none; padding: 8px 16px 16px; }
.upop-count { margin-bottom: 6px; text-align: center; font-size: var(--t-help); font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.upop-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.upop-acts--one { grid-template-columns: 1fr; }
/* Entry popup (poster / card / royal): frameless card, close X top-right inset from the edge, never over the image. */
.epop { position: relative; }
.epop-x { position: absolute; top: 6px; right: 6px; z-index: 1; background: var(--white); }
.epop-body { padding-top: 56px; }
.epop-img img { max-height: min(56dvh, 460px); }
.upop-acts .btn + .btn { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) { .upop { animation: upop-in .2s ease-out; } }
@keyframes upop-in { from { opacity: 0; transform: scale(.96); } }
.ustale { margin: 0 0 10px; }
.udetail { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.udetail-all { align-self: center; }
.udetail .uimg img { max-height: 60vh; }
.udetail-done { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); color: var(--paid-ink); font-weight: 700; }
.udetail-done .ic { width: 22px; height: 22px; }
@media (max-width: 380px) { .ucard .umeta { font-size: var(--t-help); } .ucard-h { font-size: var(--t-section); } }
@media (max-width: 300px) { .ucard { grid-template-columns: minmax(0, 1fr) 28px; } .ucard-img { grid-column: 1 / -1; width: 100%; } .upop-acts { grid-template-columns: 1fr; } .ubanner { flex-wrap: wrap; } }

@media (max-width: 359px) { .rtype { font-size: var(--t-help); } }
/* 200 % text / very narrow: stack instead of pushing content sideways. */
@media (max-width: 300px) {
  .nt-row, .hero { flex-wrap: wrap; }
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rtypes { grid-template-columns: minmax(0, 1fr); }
  .dialog .acts { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; }
  .topbar--center.topbar--noback h1, .topbar--center.has-end.topbar--noback h1 { padding: 0 8px; }
}
/* Short phones (iPhone 13 in Safari/LINE ~390x664): the last action on the QR and bill-detail pages must sit fully
   above the floating pay button without scrolling, so vertical spacing tightens (QR stays >= 170px, scannable). */
@media (max-height: 700px) {
  .qrpage .amtblock { margin-bottom: 6px; }
  .qrpage .qrbox { width: 170px; margin: 8px 0 8px; }
  .detail-rows .kv { min-height: 40px; padding: 5px 0; }
  .detail-cta { margin-top: 8px; }
}
/* Short viewports (200 % text): the total bar joins the page flow so it never covers the bills. */
@media (max-height: 520px) {
  .paybar { position: static; transform: none; width: auto; margin: 12px calc(-1 * var(--gutter)) 0; padding-bottom: 12px; }
  .has-tabbar .page.paypage { padding-bottom: var(--nav-clear); }
}
/* Thai compounds never split mid-word (js/thai-nobreak.js wraps them). Plain inline, same as web globals.css. */
.th-nb { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .ic { background: CanvasText; } .chip, .card, .tabbar, .seg, .ubadge, .ubanner, .upop, .upop-head { border: 1px solid CanvasText; } .fab { outline: 2px solid CanvasText; } }