/* Layout: one full-height column, phone first; capped at 520px and centred on a computer. */
:root{
  --bg:#EEF2EC; --surface:#FFFFFF; --ink:#16251B; --muted:#56655B; --line:#DCE4DA;
  --brand:#1F6B45; --brand-ink:#FFFFFF; --leaf:#8CC63F; --sky:#1F78C8; --sky-tint:#E6F1FB;
  --tint:#E7F1E4; --warn:#B4610E; --warn-tint:#FCEFDF; --bad:#B42318; --bad-tint:#FDE8E6; --ok:#1F7A3F; --violet:#6B3FA0; --violet-tint:#F0E9F8;
  --frame:#16251B;
  --display:'Anuphan','Leelawadee UI',Tahoma,sans-serif;
  --body:'IBM Plex Sans Thai','Leelawadee UI',Tahoma,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0F1712; --surface:#18231C; --ink:#E7EFE8; --muted:#A3B3A7; --line:#2A3A30;
  --brand:#3FA36E; --brand-ink:#08130C; --leaf:#9ED35A; --sky:#6AB2F0; --sky-tint:#16283A;
  --tint:#1D2F23; --warn:#F2A65A; --warn-tint:#33240F; --bad:#FF8A7E; --bad-tint:#3A1916; --ok:#6FD39A; --violet:#C3A0F0; --violet-tint:#2A1E3A; --frame:#000; color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#0F1712; --surface:#18231C; --ink:#E7EFE8; --muted:#A3B3A7; --line:#2A3A30;
  --brand:#3FA36E; --brand-ink:#08130C; --leaf:#9ED35A; --sky:#6AB2F0; --sky-tint:#16283A;
  --tint:#1D2F23; --warn:#F2A65A; --warn-tint:#33240F; --bad:#FF8A7E; --bad-tint:#3A1916; --ok:#6FD39A; --violet:#C3A0F0; --violet-tint:#2A1E3A; --frame:#000; color-scheme:dark; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.5;
  padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left))}
button,input,select{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--sky); outline-offset:2px}
.bar{background:var(--brand); color:var(--brand-ink); padding:14px 16px 12px; display:flex; align-items:center; gap:10px}
.bar .t{font-family:var(--display); font-weight:600; font-size:18px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar button{background:rgba(255,255,255,.16); border:0; color:inherit; border-radius:10px; min-width:44px; height:40px; padding:0 10px; font-weight:600; white-space:nowrap}
.body{flex:1; overflow:auto; padding:16px; display:grid; gap:14px; align-content:start}
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px; display:grid; gap:10px; min-width:0}
.tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.tile{border:0; border-radius:16px; padding:14px 12px; text-align:left; min-height:92px; display:grid; gap:6px; align-content:start; background:var(--surface); color:var(--ink); border:1px solid var(--line)}
.tile .ic{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--tint); color:var(--brand)}
.tile .l{font-family:var(--display); font-weight:600; font-size:17px; line-height:1.2}
.tile .s{font-size:12px; color:var(--muted); line-height:1.3}
.tile.main{background:var(--brand); color:var(--brand-ink); border-color:var(--brand); grid-column:1/-1; min-height:84px; grid-template-columns:auto 1fr; align-items:center; column-gap:12px}
.tile.main .ic{background:rgba(255,255,255,.18); color:inherit; width:48px; height:48px; grid-row:span 2}
.tile.main .s{color:inherit; opacity:.85}
.tile.sky .ic{background:var(--sky-tint); color:var(--sky)} .tile.warn .ic{background:var(--warn-tint); color:var(--warn)} .tile.bad .ic{background:var(--bad-tint); color:var(--bad)} .tile.violet .ic{background:var(--violet-tint); color:var(--violet)}
.h{font-family:var(--display); font-weight:600; font-size:17px; margin:0}
.muted{color:var(--muted); font-size:14px}
.row{display:flex; align-items:center; gap:10px}
.grow{flex:1; min-width:0}
.pill{display:inline-block; border-radius:999px; padding:2px 10px; font-size:12px; font-weight:600; white-space:nowrap}
.pill.bad{background:var(--bad-tint); color:var(--bad)} .pill.warn{background:var(--warn-tint); color:var(--warn)} .pill.ok{background:var(--tint); color:var(--ok)} .pill.sky{background:var(--sky-tint); color:var(--sky)} .pill.violet{background:var(--violet-tint); color:var(--violet)}
.list{display:grid}
.item{display:flex; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); background:none; border-left:0; border-right:0; border-top:0; text-align:left; width:100%}
.item:last-child{border-bottom:0}
.thumb{width:40px; height:40px; border-radius:10px; flex:none; display:grid; place-items:center; font-family:var(--display); font-weight:700; color:#fff; font-size:14px}
.name{font-weight:600; line-height:1.3}
.num{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.choices{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.choice{border:2px solid var(--line); background:var(--surface); border-radius:14px; padding:12px; text-align:left; min-height:64px}
.choice[aria-pressed="true"]{border-color:var(--brand); background:var(--tint)}
.choice b{display:block; font-family:var(--display); font-size:15px; line-height:1.3}
.field{display:grid; gap:6px; font-weight:500; font-size:14px}
.field input,.field select{border:1.5px solid var(--line); background:var(--surface); border-radius:12px; padding:10px 12px; min-height:48px; font-size:16px; width:100%; min-width:0}
.cta{border:0; border-radius:14px; min-height:54px; font-family:var(--display); font-size:18px; font-weight:600; background:var(--brand); color:var(--brand-ink); width:100%}
.cta.sky{background:var(--sky); color:#fff} .cta.warn{background:var(--warn); color:#fff} .cta.bad{background:var(--bad); color:#fff}
.cta:disabled{opacity:.45; cursor:not-allowed}
.ghost{border:1.5px solid var(--line); background:var(--surface); border-radius:12px; min-height:44px; padding:0 14px; font-weight:600}
.two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.scan{position:relative; border-radius:18px; background:#0b120d; height:170px; overflow:hidden; display:grid; place-items:center; border:0; width:100%; color:#fff}
.scan .box{width:72%; height:46%; border:3px solid var(--leaf); border-radius:14px; position:relative}
.scan .laser{position:absolute; left:6%; right:6%; top:50%; height:2px; background:#ff4d4d; box-shadow:0 0 8px #ff4d4d}
@media (prefers-reduced-motion:no-preference){ .scan .laser{animation:sweep 1.6s ease-in-out infinite alternate} @keyframes sweep{from{top:12%}to{top:88%}} }
.scan .cap{position:absolute; bottom:10px; left:0; right:0; text-align:center; font-size:13px; opacity:.9}
.stepper{display:grid; grid-template-columns:56px 1fr 56px; gap:8px; align-items:center}
.stepper button{height:56px; border-radius:14px; border:0; background:var(--tint); color:var(--brand); font-size:26px; font-weight:700}
.stepper input{height:56px; text-align:center; font-size:26px; font-weight:700; border:1.5px solid var(--line); border-radius:14px; background:var(--surface); font-variant-numeric:tabular-nums; width:100%; min-width:0}
.seg{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:var(--tint); border-radius:12px; padding:4px; gap:4px}
.seg button{border:0; border-radius:9px; min-height:40px; background:none; font-weight:600; font-size:14px}
.seg button[aria-pressed="true"]{background:var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.12)}
.alert{border-radius:14px; padding:12px 14px; font-size:14px}
.alert.bad{background:var(--bad-tint); color:var(--bad)} .alert.warn{background:var(--warn-tint); color:var(--warn)} .alert.ok{background:var(--tint); color:var(--ok)} .alert.sky{background:var(--sky-tint); color:var(--sky)} .alert.violet{background:var(--violet-tint); color:var(--violet)}
.keypad{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.keypad button{height:58px; border-radius:16px; border:1px solid var(--line); background:var(--surface); font-size:24px; font-weight:600}
.dots{display:flex; gap:14px; justify-content:center; padding:6px 0}
.dots i{width:16px; height:16px; border-radius:50%; border:2px solid var(--brand); display:block}
.dots i.on{background:var(--brand)}
.foot{padding:9px 16px; font-size:12px; color:var(--muted); background:var(--surface); border-top:1px solid var(--line); text-align:center}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chips button{border:1.5px solid var(--line); background:var(--surface); border-radius:999px; padding:6px 14px; font-weight:600; font-size:14px; min-height:40px}
.chips button[aria-pressed="true"]{border-color:var(--brand); background:var(--tint); color:var(--brand)}
.toast{position:absolute; left:16px; right:16px; bottom:52px; background:var(--ink); color:var(--bg); border-radius:14px; padding:12px 14px; font-weight:600; font-size:14px; z-index:3}
.kv{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:14px}
.kv dt{color:var(--muted)} .kv dd{margin:0; font-weight:500}
.photo{width:100%; max-height:160px; object-fit:cover; border-radius:12px; border:1px solid var(--line)}
.badge{min-width:22px; height:22px; border-radius:999px; background:var(--bad); color:#fff; font-size:12px; font-weight:700; display:inline-grid; place-items:center; padding:0 6px}
.timeline{display:grid; gap:6px; font-size:13px; color:var(--muted)}
.timeline span.on{color:var(--ok); font-weight:600}
table.t{width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums}
table.t th{text-align:left; color:var(--muted); font-weight:500; padding:6px 4px; border-bottom:1px solid var(--line)}
table.t td{padding:6px 4px; border-bottom:1px solid var(--line); vertical-align:top}
table.t td.r, table.t th.r{text-align:right}

.screen{max-width:520px; margin:0 auto; min-height:100%; display:flex; flex-direction:column; position:relative; background:var(--bg)}
body{padding:0; padding-bottom:env(safe-area-inset-bottom)}
.bar{padding-top:max(14px, env(safe-area-inset-top)); position:sticky; top:0; z-index:5}
.busy{position:fixed; inset:0; background:rgba(10,20,14,.35); display:grid; place-items:center; z-index:20}
.busy span{background:var(--surface); color:var(--ink); border-radius:14px; padding:14px 18px; font-weight:600}
.center{min-height:70vh; display:grid; place-items:center; text-align:center; padding:24px}
a.link{color:var(--sky); font-weight:600}