/* Brand: charcoal → ash → fire → smoke. Dark, because this is used outdoors after sunset. */
:root{--char:#181818;--dark:#383938;--smoke:#F1F2F2;--red:#CF2128;--orange:#F26933;--yellow:#F7B041;--cream:#F3CD94;--blue:#3E66B0;--green:#25857D;--pink:#EE3D82}
html,body{margin:0;padding:0;background:#0c0c0c;color:var(--smoke);font-family:'Anuphan','IBM Plex Sans Thai','Noto Sans Thai',system-ui,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
button,input,select{font-family:inherit;line-height:1.4;-webkit-tap-highlight-color:transparent}
@keyframes scrIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes sheetUp{from{transform:translateY(105%)}to{transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes upIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hotPulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Phone shell: fills a real phone; centred as a 390-wide column on a desktop. */
.stage{min-height:100vh;min-height:100dvh;display:flex;justify-content:center;background:#0c0c0c}
.phone{position:relative;width:100%;max-width:480px;height:100vh;height:100dvh;background:var(--char);overflow:hidden;display:flex;flex-direction:column}
@media (min-width:700px){.stage{align-items:center;padding:18px}.phone{max-width:390px;height:min(844px,calc(100dvh - 36px));border-radius:34px;box-shadow:0 34px 90px rgba(0,0,0,.65),0 0 0 1px rgba(241,242,242,.09)}}
.topbar{flex:none;display:flex;align-items:center;gap:8px;padding:11px 15px 8px;background:#101010;border-bottom:1px solid rgba(241,242,242,.06)}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--orange);color:var(--char);display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.viewport{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;animation:scrIn .24s ease both}
.hdr{flex:none;display:flex;align-items:center;gap:10px;padding:12px 16px 6px}
.bk{width:38px;height:38px;flex:none;border:none;border-radius:12px;background:var(--dark);color:var(--smoke);font-size:20px;cursor:pointer}
.ttl{font-size:17px;font-weight:600}
.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.foot{flex:none;padding:10px 16px calc(18px + env(safe-area-inset-bottom));border-top:1px solid rgba(241,242,242,.08)}
.cta{width:100%;border:none;background:var(--orange);color:var(--char);border-radius:16px;padding:18px;font-size:18px;font-weight:700;cursor:pointer}
.cta:disabled{background:#2a2b2a;color:rgba(241,242,242,.35);cursor:default}
.ghost{width:100%;border:1px solid rgba(243,205,148,.4);background:transparent;color:var(--cream);border-radius:14px;padding:13px;font-size:15px;font-weight:600;cursor:pointer}
.chip{flex:none;border-radius:999px;padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer}
.muted{color:var(--cream)}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.sw{width:9px;height:9px;border-radius:3px;flex:none;display:inline-block}
.card{background:var(--dark);border-radius:16px}
.field{width:100%;border:1px solid rgba(243,205,148,.4);background:#1f201f;color:var(--smoke);border-radius:12px;padding:13px 14px;font-size:17px}
.field:focus{outline:2px solid var(--orange);outline-offset:1px}
/* Payment Hold: red, pulsing, minutes:seconds. Never used for the Arrival Window. */
.hold-pill{margin-left:auto;display:flex;align-items:center;gap:6px;background:rgba(207,33,40,.16);border:1px solid var(--red);border-radius:999px;padding:5px 10px;font-size:12.5px}
.hold-bar{flex:none;margin:4px 16px 8px;display:flex;align-items:center;gap:10px;background:rgba(207,33,40,.16);border:1px solid var(--red);border-radius:14px;padding:11px 14px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:hotPulse 1s infinite;flex:none}
/* Arrival Window: mustard bordered callout, clock times. */
.window{border:2px solid var(--yellow);border-radius:14px;padding:15px 16px;background:rgba(247,176,65,.09)}
.window .k{font-size:13px;font-weight:700;color:var(--yellow);letter-spacing:.06em;margin-bottom:6px}
.toast{position:absolute;left:12px;right:12px;top:10px;z-index:60;border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.65;color:var(--smoke);box-shadow:0 12px 30px rgba(0,0,0,.5);animation:upIn .2s ease both}
.toast.red{background:rgba(207,33,40,.95);border:1px solid rgba(24,24,24,.4)}
.toast.green{background:rgba(37,133,125,.96);border:1px solid rgba(24,24,24,.4)}
.toast.yellow{background:rgba(56,44,20,.97);border:1px solid var(--yellow)}
.spinner{width:38px;height:38px;animation:spin 1s linear infinite}
.center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center}