/* Customer web — design/customer.html, screen for screen. Same tokens, same blocks:
   zero border-radius, hairlines between rows, flat solid blocks on the paper tone,
   Pridi for headings and every number that matters, IBM Plex Sans Thai for the rest.
   The prototype is drawn at 420px with 10–13px type; everything here is the same
   composition scaled to a real phone. Scoped to html.td-app because this file is
   loaded on the marketing page too. */
html.td-app{--paper:#f6f8fe;--soft:#edf2ff;--ink:#0b1b55;--mute:#5f72a0;--line:#d9e3f7;--coral:#f08a5d;--coral-pale:#fff0e6;--coral-ink:#b5512b;--wine:#1d3fd1;--wine-pale:#e3e9ff;--pink:#c7d2fe;--mint:#d7f0e6;--mint-ink:#1f7a5a;--green:#06c755;--hair:rgba(11,27,85,.09);--ease:cubic-bezier(.2,.75,.25,1)}
html.td-app,html.td-app body{margin:0;padding:0;background:var(--paper)}
html.td-app body{font-family:"IBM Plex Sans Thai",-apple-system,BlinkMacSystemFont,"Noto Sans Thai","Sarabun",sans-serif;font-size:15px;line-height:1.5;color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
#td-app *{box-sizing:border-box}
#td-app button,#td-app input{font:inherit;color:inherit}
#td-app button:focus-visible,#td-app a:focus-visible,#td-app input:focus-visible{outline:3px solid rgba(29,63,209,.45);outline-offset:3px}
#td-app svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px}
#td-app p{margin:0}
#td-app .muted{color:var(--mute)}
html.td-app body.td-dark{background:#0b0f1a;color:#fff}

/* ---------- frame ---------- */
/* Transform only, and no fill: a throttled tab freezes an animation on its first
   keyframe, so anything faded from 0 there ships blank. Content is visible by
   default; the slide is the enhancement. */
#td-app .wrap{position:relative;max-width:460px;margin:0 auto;padding:6px 26px 48px;animation:td-in .3s var(--ease)}
#td-app .wrap.wide{max-width:960px}
@keyframes td-in{from{transform:translateX(9px)}to{transform:none}}
#td-app .cols{display:grid;gap:8px 32px;grid-template-columns:1fr}
@media (min-width:760px){#td-app .cols{grid-template-columns:1fr 1fr}}
#td-app .cols section{padding:0;margin:0;max-width:none}

/* ---------- type ---------- */
#td-app h1{margin:0;font-family:"Pridi",Georgia,"Noto Serif Thai",serif;font-weight:400;font-size:40px;letter-spacing:-.035em;line-height:1;color:var(--ink)}
#td-app h2{margin:0;font-family:"Pridi",Georgia,serif;font-weight:400;font-size:22px;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
#td-app .kicker{margin:0 0 8px;color:var(--wine);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
#td-app .fine{margin-top:28px;font-size:12px;line-height:1.6;color:var(--mute);text-align:center}
#td-app .fine a,#td-app .fine button{padding:0;border:0;background:transparent;color:var(--mute);text-decoration:underline;font-size:12px;cursor:pointer}

/* ---------- the shell: one header, one bottom bar, both outlive the screen ---------- */
/* `display:grid` below beats the [hidden] attribute's own display:none, so say it
   here: a screen that asks for no header must actually get none. */
#td-app [hidden]{display:none!important}
#td-app .appbar{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;max-width:460px;margin:0 auto;padding:6px 26px 6px 22px;background:var(--paper)}
#td-app .appbar .bar-c{min-width:0;text-align:center;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#td-app .appbar .bar-r{display:flex;justify-content:flex-end}
#td-app .appbar .bar-l .brand{white-space:nowrap}
#td-app .bar-link{padding:0;border:0;background:none;color:var(--wine);font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer}
#td-app .bar-link:hover{text-decoration:underline}
#td-app .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-template-columns:repeat(5,1fr);max-width:460px;margin:0 auto;background:var(--card);border-top:1px solid var(--hair);padding-bottom:env(safe-area-inset-bottom)}
#td-app .tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 1px 9px;color:var(--mute);text-decoration:none;font-size:10px;font-weight:600;white-space:nowrap;letter-spacing:-.01em}
#td-app .tab svg.i{width:21px;height:21px}
#td-app .tab.on{color:var(--wine);box-shadow:inset 0 2px 0 var(--wine)}
#td-app .tab svg.i{width:22px;height:22px}
#td-app #td-main.has-tabs{padding-bottom:74px}
html.td-app body.td-dark #td-app #td-main.has-tabs{padding-bottom:0}
#td-app .brand{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--wine);text-decoration:none}
#td-app .brand i{display:inline-block;width:14px;height:14px;background:var(--wine)}
#td-app .icon-btn{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;background:transparent;color:var(--ink);cursor:pointer;text-decoration:none}
#td-app .icon-btn svg.i{width:20px;height:20px}
#td-app .topbar .url{font-size:11px;color:var(--mute)}

/* shop identity: a square mark and two lines */
#td-app .shop-mark{display:grid;place-items:center;width:56px;height:56px;flex:none;background:var(--coral-pale);color:var(--coral-ink);object-fit:cover;font-family:"Pridi",Georgia,serif;font-size:26px;line-height:1}
#td-app .shop-hero,#td-app .result-head,#td-app .sd-head{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center}
#td-app .result-head{grid-template-columns:44px 1fr}#td-app .result-head .shop-mark{width:44px;height:44px;font-size:22px}
#td-app .shop-hero small,#td-app .result-head small,#td-app .sd-head small{display:block;color:var(--mute);font-size:12px}
#td-app .shop-hero strong,#td-app .result-head strong,#td-app .sd-head strong{display:block;font-size:16px;font-weight:600;line-height:1.3}
#td-app .sd-head .line{display:inline-block;margin-top:4px;font-size:12px;color:var(--green);font-weight:700}
#td-app .contact{margin-top:14px;font-size:12px;color:var(--mute);line-height:1.6}

/* the pitch: one Pridi line and a sentence */
#td-app .pitch{margin-top:28px}
#td-app .pitch p{margin-top:12px;color:var(--mute);font-size:14px;line-height:1.6}
#td-app .bonus{display:inline-block;margin-top:12px;padding:0 0 2px;border-bottom:2px solid var(--coral);color:var(--coral-ink);font-size:12.5px;font-weight:700}

/* sign-in doors as rows */
#td-app .logins{display:grid;gap:8px;margin-top:26px}
#td-app .login{display:grid;grid-template-columns:22px 1fr;align-items:center;gap:12px;width:100%;padding:15px 16px;border:1px solid var(--hair);background:#fff;color:var(--ink);text-align:left;text-decoration:none;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s var(--ease),transform .12s var(--ease)}
#td-app .login:active{transform:translateY(1px)}
#td-app .login i{display:block;width:22px;height:22px}
#td-app .login--line{background:var(--green);border-color:var(--green);color:#fff}#td-app .login--line i{background:#fff}
#td-app .login--google i{background:#4285f4}
#td-app .login--mail i{background:var(--ink)}
#td-app .login--dev{grid-template-columns:1fr auto;border-style:dashed;padding:10px 10px 10px 16px}
#td-app .login--dev input{width:100%;padding:8px 0;border:0;border-bottom:1px solid var(--line);background:transparent;font-size:16px}
#td-app .login--dev input:focus{border-bottom-color:var(--wine);outline:0}
#td-app .login--dev button{padding:10px 14px;border:0;background:var(--wine);color:#fff;font-size:13px;font-weight:700;cursor:pointer}
#td-app .trust{margin-top:20px;padding:14px 0 0;border-top:1px solid var(--hair);font-size:12.5px;line-height:1.6;color:var(--mute)}
#td-app .trust b{color:var(--ink);font-weight:600}
#td-app .trust a{color:var(--mute)}

/* the points block: one flat blue block, Pridi number, one coral tag, one bar */
#td-app .points{margin-top:16px;padding:24px 22px 20px;background:var(--wine);color:#fff}
#td-app .points>span{display:block;font-size:12.5px;color:#c9d3ff}
#td-app .points strong{display:block;margin-top:8px;font-family:"Pridi",Georgia,serif;font-size:60px;font-weight:400;line-height:.95;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
#td-app .points em{display:inline-block;margin-top:12px;padding:0 0 3px;border-bottom:2px solid var(--coral);color:#fff;font-size:12px;font-style:normal;font-weight:600}
#td-app .points .bar{height:4px;margin-top:22px;background:rgba(255,255,255,.2)}
#td-app .points .bar i{display:block;height:100%;background:var(--coral);transition:width .4s var(--ease)}
#td-app .points .next{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:12.5px;color:#c9d3ff}
#td-app .points .next b{color:#fff;font-weight:600}
#td-app .redeem-cta{display:block;width:100%;margin-top:8px;padding:15px;border:0;background:var(--coral);color:var(--ink);text-align:center;text-decoration:none;font-size:14.5px;font-weight:700;cursor:pointer;transition:background .2s,transform .12s}
#td-app .redeem-cta:hover{background:#ec7a49}#td-app .redeem-cta:active{transform:translateY(1px)}

/* shop / taemdee CTA levels */
#td-app .cta-shop--line{display:block;margin-top:20px;font-size:13px;color:var(--mute)}
#td-app .cta-shop--line a{color:var(--green);font-weight:700;text-decoration:none}
#td-app .cta-shop--card{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-top:20px;padding:10px 0 10px 14px;border-left:3px solid var(--green)}
#td-app .cta-shop--card small{display:block;color:var(--mute);font-size:12px}
#td-app .cta-shop--card strong{font-size:14px;font-weight:600}
#td-app .cta-shop--card a{padding:9px 12px;border:0;background:var(--green);color:#fff;font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap}
#td-app .cta-shop--hero{display:block;margin:24px -26px 0;padding:22px 26px;background:var(--green);color:#fff}
#td-app .cta-shop--hero small{display:block;font-size:12px;opacity:.85}
#td-app .cta-shop--hero strong{display:block;margin:4px 0 14px;font-family:"Pridi",Georgia,serif;font-size:28px;font-weight:400;line-height:1.05;letter-spacing:-.02em}
#td-app .cta-shop--hero a{display:block;width:100%;padding:12px;border:0;background:#fff;color:#087a3a;text-align:center;font-size:14px;font-weight:700;text-decoration:none}
#td-app .cta-shop--hero p{margin-top:8px;font-size:12px;opacity:.8}
#td-app .cta-td--line{display:block;margin-top:28px;font-size:12.5px;color:var(--mute);text-align:center}
#td-app .cta-td--line a{color:var(--wine);font-weight:600;text-decoration:none}
#td-app .cta-td--card{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-top:28px;padding:12px 0 0;border-top:1px solid var(--hair)}
#td-app .cta-td--card small{display:block;color:var(--mute);font-size:12px}
#td-app .cta-td--card strong{font-size:13.5px;font-weight:600}
#td-app .cta-td--card a{padding:8px 10px;border:1px solid var(--wine);background:transparent;color:var(--wine);font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap}

/* sections and lists: a Pridi h2, a note on the right, rows with hairlines */
#td-app .section,#td-app .group{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:34px 0 4px}
#td-app .group h2{font-size:20px}
#td-app .group span,#td-app .section span{font-size:12px;color:var(--mute);white-space:nowrap}
/* `promo-band`, not `band`: landing.css paints `.band` dark with white text. */
#td-app .promo-band{margin:32px -26px 0;padding:24px 26px 8px;background:#fff;color:var(--ink)}
#td-app .promo-band .section{margin-top:0}
#td-app .camp article{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--hair)}
#td-app .camp small{display:block;color:var(--mute);font-size:12px;line-height:1.45}
#td-app .camp strong{display:block;font-size:14.5px;font-weight:600}
#td-app .camp b{font-family:"Pridi",Georgia,serif;font-size:30px;font-weight:400;letter-spacing:-.03em;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
#td-app .camp article.hot b{color:var(--coral-ink)}
#td-app .camp .bar{grid-column:1/-1;height:3px;margin-top:-4px;background:var(--soft)}
#td-app .camp .bar i{display:block;height:100%;background:var(--wine)}
#td-app .camp article.hot .bar i{background:var(--coral)}

#td-app .reward{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid var(--hair)}
#td-app .reward small{display:block;color:var(--mute);font-size:12px}
#td-app .reward strong{display:block;font-size:14.5px;font-weight:600}
#td-app .reward .btn-r{padding:9px 14px;border:0;background:var(--coral);color:var(--ink);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .2s,transform .12s}
#td-app .reward .btn-r:hover{background:#ec7a49}#td-app .reward .btn-r:active{transform:translateY(1px)}
#td-app .reward.locked{opacity:.75}
#td-app .reward.locked .btn-r{background:transparent;color:var(--mute);border:1px solid var(--hair);cursor:default}
#td-app .reward .terms{grid-column:1/-1;margin:-4px 0 0;font-size:11.5px;color:var(--mute)}
/* Amount picker on a rate burn. Square like every other control, and the chosen
   one carries the coral so the number the button will spend is never in doubt. */
#td-app .reward .terms{display:flex;flex-wrap:wrap;gap:6px}
#td-app .rate-chip{padding:6px 10px;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:11.5px;cursor:pointer}
#td-app .rate-chip.on{background:var(--coral);border-color:var(--coral);color:#fff}

#td-app .hist{margin-top:4px}
#td-app .hist>div{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
#td-app .hist small{display:block;color:var(--mute);font-size:11.5px}
#td-app .hist b{font-family:"Pridi",Georgia,serif;font-size:22px;font-weight:400;letter-spacing:-.03em;color:var(--wine);font-variant-numeric:tabular-nums}
#td-app .hist .neg b{color:var(--coral-ink)}

#td-app .sd-line{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-top:24px;padding:10px 0 10px 14px;border-left:3px solid var(--green)}
#td-app .sd-line small{display:block;color:var(--mute);font-size:12px}
#td-app .sd-line strong{font-size:13.5px;font-weight:600}
#td-app .sd-line a{padding:8px 10px;border:1px solid var(--hair);background:transparent;color:var(--ink);font-size:12.5px;font-weight:700;text-decoration:none}
#td-app .hide-shop{display:block;width:100%;margin:22px 0 0;padding:10px;border:0;background:transparent;color:var(--mute);font-size:12.5px;text-decoration:underline;cursor:pointer;text-align:center}

/* wallet */
#td-app .wallet-total{margin-top:4px}
#td-app .wallet-total span{display:block;font-size:12.5px;color:var(--mute)}
#td-app .wallet-total strong{display:block;margin-top:6px;font-family:"Pridi",Georgia,serif;font-size:56px;font-weight:400;line-height:.95;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
#td-app .wsum{display:grid;grid-template-columns:repeat(3,1fr);margin-top:24px;padding:14px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
#td-app .wsum b{display:block;font-family:"Pridi",Georgia,serif;font-size:26px;font-weight:400;line-height:1;letter-spacing:-.03em}
#td-app .wsum small{display:block;margin-top:4px;color:var(--mute);font-size:11.5px}
#td-app .wsum div.hot b{color:var(--coral-ink)}
#td-app .shops{display:block}
#td-app .shop{display:grid;grid-template-columns:40px 1fr auto;gap:14px;align-items:center;width:100%;padding:14px 0;border:0;border-bottom:1px solid var(--hair);background:transparent;color:inherit;text-align:left;text-decoration:none;cursor:pointer}
#td-app .shop .shop-mark{width:40px;height:40px;font-size:20px}
#td-app .shop strong{display:block;font-size:14.5px;font-weight:600}
#td-app .shop small{display:block;margin-top:2px;color:var(--mute);font-size:12px}
#td-app .shop .bar{height:3px;margin-top:8px;background:var(--soft)}
#td-app .shop .bar i{display:block;height:100%;background:var(--wine)}
#td-app .shop b{font-family:"Pridi",Georgia,serif;font-size:28px;font-weight:400;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#td-app .shop.ready{padding-left:12px;border-left:3px solid var(--coral)}
#td-app .shop.ready b{color:var(--coral-ink)}#td-app .shop.ready .bar i{background:var(--coral)}
#td-app .shop .rtag{display:inline-block;margin-left:6px;padding:0 0 1px;border-bottom:2px solid var(--coral);color:var(--coral-ink);font-size:11px;font-weight:700;vertical-align:2px}
#td-app .shop-foot{margin:20px 0 0;text-align:center;font-size:12px;color:var(--mute)}

/* redeem: the code is the page */
#td-app .qr{margin-top:18px}
#td-app .qr svg{width:212px;height:212px;display:block;margin:0 auto;padding:10px;background:#fff;border:1px solid var(--hair)}
#td-app .code{margin-top:18px;padding:22px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);text-align:center}
#td-app .code small{display:block;color:var(--mute);font-size:12.5px}
#td-app .code strong{display:block;margin:8px 0 6px;font-family:"Pridi",Georgia,serif;font-size:52px;font-weight:400;letter-spacing:.12em;line-height:1;color:var(--ink)}
#td-app .code.used{border-color:var(--hair)}#td-app .code.used strong{color:var(--mute)}
#td-app .code .exp{display:inline-block;margin-top:6px;padding:0 0 2px;border-bottom:2px solid var(--coral);color:var(--coral-ink);font-size:12.5px;font-weight:700}
#td-app .code .done{display:inline-block;margin-top:6px;padding:0 0 2px;border-bottom:2px solid var(--wine);color:var(--wine);font-size:12.5px;font-weight:700}
/* `how`, `rtag`, `act`: landing.css owns .steps/.tag/.btn */
#td-app .how{margin-top:20px;font-size:13px;line-height:1.8;color:var(--mute)}
#td-app .how b{font-weight:600;color:var(--ink)}
#td-app .verify{margin-top:12px;font-size:12px;color:var(--mute);text-align:center}
#td-app .terms.center{margin-top:10px;text-align:center;font-size:12px;color:var(--mute)}

/* generic message and forms */
#td-app .act{display:block;width:100%;padding:14px 18px;border:1px solid transparent;background:var(--soft);color:var(--ink);text-align:center;text-decoration:none;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s,transform .12s}
#td-app .act.primary{background:var(--wine);color:#fff}#td-app .act:active{transform:translateY(1px)}
#td-app .stack{display:flex;flex-direction:column;gap:8px;margin:20px 0 0}
#td-app .card{margin:16px 0 0;padding:16px 18px;background:#fff;border:1px solid var(--hair)}
#td-app .card h2{font-size:20px;margin-bottom:6px}
#td-app .input{width:100%;padding:13px 14px;border:1px solid var(--line);background:#fff;font-size:16px}
#td-app .input:focus{border-color:var(--wine);outline:0}
#td-app .msg{padding:11px 14px;background:var(--coral-pale);color:var(--coral-ink);font-weight:600;margin-bottom:12px}
#td-app .msg.ok{background:var(--wine-pale);color:var(--wine)}
#td-app .foot-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;padding-top:14px;border-top:1px solid var(--hair);font-size:14px}
#td-app .foot-links a,#td-app .linkish{padding:0;border:0;background:none;color:var(--wine);font-size:14px;font-weight:600;text-decoration:none;cursor:pointer}
#td-app .foot-links a:hover,#td-app .linkish:hover{text-decoration:underline}

/* ---------- camera (dark, edge to edge) ---------- */
#td-app .cam-wrap{position:relative;display:flex;flex-direction:column;min-height:100dvh;background:#0b0f1a;color:#fff}
#td-app .cam-top{position:absolute;z-index:3;top:calc(14px + env(safe-area-inset-top));left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;gap:10px}
#td-app .cam-top .brand{color:#fff}#td-app .cam-top .brand i{background:#fff}
/* The camera feed can be anything, including a white ceiling, so the controls and
   the hint carry their own dark ground rather than trusting the image behind them. */
#td-app .cam-top .icon-btn{background:rgba(11,15,26,.55);color:#fff}
#td-app .cam-top .pill{padding:9px 12px;background:rgba(11,15,26,.6);color:#fff;text-decoration:none;font-size:12.5px;font-weight:600}
#td-app .cam-top .brand{padding:7px 10px;background:rgba(11,15,26,.6)}
#td-app .cam-stage{position:relative;flex:1;min-height:70dvh;background:radial-gradient(ellipse at 50% 35%,#2a3350,#0b0f1a 70%);overflow:hidden}
#td-app #cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#td-app .guide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
#td-app .guide-box{width:72%;height:58%;margin-top:-16%;border:2px solid rgba(255,255,255,.7);box-shadow:0 0 0 999px rgba(0,0,0,.35)}
#td-app .cam-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(to top,rgba(11,15,26,.85),transparent);pointer-events:none}
#td-app .cam-hint{position:absolute;z-index:2;left:22px;right:22px;bottom:16px;margin:0;text-align:center;font-size:13px;line-height:1.5;color:rgba(255,255,255,.92)}
#td-app .cam-hint strong{display:block;font-size:16px;font-weight:600;margin-bottom:4px;color:#fff}
#td-app .cam-hint span{display:block}
#td-app .cam-foot{position:relative;padding:18px 18px calc(14px + env(safe-area-inset-bottom));text-align:center;background:#0b0f1a}
#td-app .shutter{position:relative;width:72px;height:72px;padding:0;border:4px solid #fff;background:var(--coral);cursor:pointer;transition:transform .12s var(--ease)}
#td-app .shutter::after{content:"";position:absolute;inset:6px;border:1px solid rgba(255,255,255,.6)}
#td-app .shutter span{display:none}
#td-app .shutter:active{transform:scale(.96)}#td-app .shutter:disabled{opacity:.4}
#td-app .cam-fallback{margin-top:12px;font-size:13px;color:rgba(255,255,255,.75)}
#td-app .fallback{color:#fff;text-decoration:underline;cursor:pointer}
#td-app .cam-note{margin-top:12px;font-size:11.5px;color:rgba(255,255,255,.55)}
#td-app .cam-foot .msg{text-align:left}

/* ---------- first screen (/login): the mosaic pitch of the shop app ---------- */
/* The column fills the viewport and shares the spare height between mosaic, pitch
   and doors, so a short phone still shows the button without scrolling. */
#td-app .wrap.first{display:flex;flex-direction:column;min-height:100dvh;padding-top:22px;gap:0}
#td-app .wrap.first .pitch{margin-top:26px}
/* Spare height sits under the doors, as on the app's first screen: mosaic, pitch and
   button stay together at the top; the consent line rides the bottom of the viewport. */
#td-app .wrap.first .doors{margin-top:26px}
#td-app .wrap.first .consent{margin-top:auto;padding-top:26px}
#td-app .faces{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;box-shadow:0 18px 44px rgba(10,30,58,.16)}
/* `height:auto` matters: the imgs carry height="256" so the box knows its shape
   before the bytes arrive, and without this the attribute wins over the ratio. */
#td-app .faces>*{display:block;width:100%;height:auto;aspect-ratio:1;min-width:0}
#td-app .faces img{object-fit:cover;background:var(--soft)}
#td-app .brand-tile{grid-column:1/3;grid-row:1/3;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;background:var(--coral);color:#fff}
/* `tdmark`, and an explicit fill: landing.css paints `.mark` with the brand colour,
   which on the coral tile would be coral on coral. */
#td-app .brand-tile .tdmark{width:56px;height:56px;flex:none;color:#fff;fill:#fff}
#td-app .brand-tile .tdmark g{fill:#fff}
#td-app .brand-tile span{margin-top:10px;font-size:26px;font-weight:700;line-height:1}
#td-app .wine-tile{background:var(--wine)}
#td-app .pitch h1 em{color:var(--coral);font-style:normal}
#td-app .doors .act{margin-bottom:0}
#td-app .providers{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:18px;font-size:13px}
#td-app .provider{display:inline-flex;align-items:center;gap:6px;color:var(--mute)}
#td-app .pg{display:grid;place-items:center;width:20px;height:20px;flex:none;font-style:normal;font-size:11px;font-weight:700;line-height:1}
#td-app .pg-line{background:var(--green);color:#fff;font-size:8px;letter-spacing:.02em}
#td-app .pg-google{background:#4285f4;color:#fff}
#td-app .pg-mail{background:var(--ink);color:#fff;font-size:12px}
#td-app .doors .login--dev{margin-top:10px}
#td-app .consent{margin-top:26px;padding-top:0;font-size:12px;line-height:1.6;color:var(--mute);text-align:center}
#td-app .consent a{color:var(--mute)}

/* ---------- promo cards (result + waiting): one or two, with presence ---------- */
#td-app .promos{display:grid;gap:8px;margin-top:20px}
#td-app .promo-card{display:grid;gap:6px;padding:15px 16px;background:var(--wine-pale)}
#td-app .promo-card strong{font-size:15px;font-weight:600;color:var(--ink);line-height:1.35}
#td-app .promo-card b{font-family:"Pridi",Georgia,serif;font-weight:400;font-size:26px;letter-spacing:-.03em;line-height:1;color:var(--wine);font-variant-numeric:tabular-nums}
#td-app .promo-card small{font-size:11.5px;line-height:1.5;color:var(--mute)}
#td-app .promo-card .bar{height:3px;background:rgba(29,63,209,.18)}
#td-app .promo-card .bar i{display:block;height:100%;background:var(--wine)}
#td-app .promo-card.hot{background:var(--coral-pale)}
#td-app .promo-card.hot b{color:var(--coral-ink)}
#td-app .promo-card.hot .bar{background:rgba(181,81,43,.18)}
#td-app .promo-card.hot .bar i{background:var(--coral-ink)}
#td-app .more{margin-top:12px;font-size:13px}
#td-app .more a{color:var(--wine);font-weight:600;text-decoration:none}
#td-app .more a:hover{text-decoration:underline}
#td-app .act.ghost{margin-top:22px;background:transparent;border-color:var(--hair);display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
#td-app .act.ghost:hover{background:var(--card)}

/* ---------- bottom sheet: a moment over the place the customer was in ---------- */
#td-app #td-main.sheet-host{position:fixed;inset:0;z-index:20;padding:0}
#td-app .scrim{position:absolute;inset:0;background:rgba(11,27,85,.45);animation:td-fade .2s var(--ease)}
#td-app .sheet{position:absolute;left:0;right:0;bottom:0;max-height:92dvh;overflow-y:auto;max-width:460px;margin:0 auto;padding:0 26px calc(26px + env(safe-area-inset-bottom));background:var(--paper);animation:td-up .28s var(--ease)}
#td-app .sheet .wrap{padding-top:0;animation:none}
#td-app .grip{display:block;width:44px;height:4px;margin:10px auto 14px;padding:0;border:0;background:var(--line);cursor:pointer}
@keyframes td-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes td-fade{from{opacity:0}to{opacity:1}}
/* The camera is dark edge to edge, so the bar joins it rather than sitting on paper. */
html.td-app body.td-dark #td-app .tabbar{background:#0b0f1a;border-top-color:rgba(255,255,255,.14)}
html.td-app body.td-dark #td-app .tab{color:rgba(255,255,255,.6)}
html.td-app body.td-dark #td-app .tab.on{color:#fff;box-shadow:inset 0 2px 0 var(--coral)}
#td-app .cam-wrap{padding-bottom:74px}

/* A coupon with a clock on it: the row wears the colour of "use me". */
#td-app .reward.soon small{color:var(--coral-ink);font-weight:600}
#td-app a.reward{text-decoration:none;color:inherit}
#td-app a.reward:hover strong{text-decoration:underline}

/* The customer's own face on their wallet: the provider's photo, or the drawn one. */
#td-app .me{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:14px;font-weight:600}
#td-app .me-face{width:44px;height:44px;flex:none;object-fit:cover;background:var(--soft)}

/* A sheet raised over whatever screen is showing (settings), not a route of its own. */
#td-app .sheet-over, .sheet-over{position:fixed;inset:0;z-index:30}
.sheet-over .scrim{position:absolute;inset:0;background:rgba(11,27,85,.45);animation:td-fade .2s var(--ease)}
.sheet-over .sheet{position:absolute;left:0;right:0;bottom:0;max-width:460px;margin:0 auto;padding:0 0 calc(20px + env(safe-area-inset-bottom));background:var(--paper);animation:td-up .28s var(--ease)}
.sheet-over .wrap{padding-top:0;padding-bottom:8px}
.sheet-over .grip{display:block;width:44px;height:4px;margin:10px auto 4px;padding:0;border:0;background:var(--line);cursor:pointer}
/* The greeting line on หน้าแรก carries a second, quieter fact under the name. */
#td-app .me span small{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--mute)}
#td-app .reward.locked .btn-r{background:transparent;color:var(--mute);border:1px solid var(--hair)}

/* Shop search on หน้าแรก: a plain field, results are the rows already below it. */
#td-app .input.find{margin:0 0 4px;font-size:15px;padding:11px 13px}
#td-app .shop[hidden]{display:none!important}

@media (prefers-reduced-motion:reduce){#td-app *,#td-app *::before,#td-app *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}