:root { --bg:#f6f7f9; --card:#fff; --line:#dfe3e8; --ink:#1b1f24; --dim:#5b6472; --go:#1f7a3d; --out:#a8410f; --bad:#b3261e; }
* { box-sizing: border-box; }
body { margin:0; padding:12px; background:var(--bg); color:var(--ink);
       font:16px/1.5 -apple-system,"Segoe UI",Roboto,"Noto Sans Thai",sans-serif; max-width:640px; margin-inline:auto; }
header { padding:4px 2px 12px; }
header b { font-size:18px; } header small { display:block; color:var(--dim); }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; }
.card.now { border-color:var(--go); border-width:2px; }
h2 { font-size:14px; color:var(--dim); font-weight:600; margin:0 0 10px; }
h3 { font-size:14px; margin:16px 0 6px; }
.pick { display:flex; flex-wrap:wrap; gap:8px; } .pick.col { flex-direction:column; }
.chip { min-height:48px; padding:10px 16px; font-size:16px; background:#fff; color:var(--ink);
        border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.chip.wide { text-align:left; width:100%; }
.chip.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--go); vertical-align:middle; }
.go { display:block; width:100%; min-height:56px; margin-top:12px; font-size:18px; font-weight:600;
      color:#fff; background:var(--go); border:0; border-radius:10px; cursor:pointer; }
.go.out { background:var(--out); } .go[disabled] { background:#b9bfc7; cursor:not-allowed; }
.big { font-size:18px; font-weight:600; margin:0 0 4px; }
.hint { color:var(--dim); margin:6px 2px; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:7px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--dim); font-weight:600; } .r { text-align:right; }
tr.pending td { background:#fff7e6; } tr.pending b { color:var(--out); }
.sum { margin:0; padding-left:18px; } .sum li { margin:3px 0; }
#msg { margin:0 0 12px; padding:0 2px; min-height:22px; font-size:15px; }
#msg.ok { color:var(--go); } #msg.bad { color:var(--bad); }

.photos { display:flex; gap:10px; margin-top:12px; }
.ph { flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:6px;
      padding:8px; border:1px dashed var(--line); border-radius:10px; }
.ph span { font-size:13px; color:var(--dim); }
.ph em { font-size:13px; color:var(--dim); font-style:normal; }
.mini { min-height:38px; padding:6px 12px; font-size:14px; background:#fff; color:var(--ink);
        border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.thumb { width:100%; max-width:120px; aspect-ratio:4/3; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
td.ev { white-space:nowrap; }
td.ev .thumb { width:40px; max-width:40px; margin-right:3px; vertical-align:middle; }
.store { font-size:13px; color:var(--dim); margin:0 2px 16px; }
.store.warn { color:var(--bad); font-weight:600; }
.nt { display:block; margin-top:10px; }
.nt span { display:block; font-size:13px; color:var(--dim); margin-bottom:4px; }
.nt input { width:100%; min-height:44px; padding:9px 11px; font-size:16px; color:var(--ink);
            background:#fff; border:1px solid var(--line); border-radius:8px; }
.note { display:block; font-size:12px; color:var(--dim); margin-top:2px; }
.geo { font-size:13px; color:var(--dim); margin:4px 0 0; }

.tabs { display:flex; gap:8px; margin-bottom:12px; }
.tab { flex:1; min-height:44px; font-size:15px; background:#fff; color:var(--dim);
       border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.tab.on { background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600; }
.card.alert { border-color:var(--out); border-width:2px; background:#fff7e6; }
.card.alert h2 { color:var(--out); }
.who { list-style:none; margin:0; padding:0; }
.who li { padding:9px 0; border-bottom:1px solid var(--line); }
.who li:last-child { border-bottom:0; }