@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap";:root{color:#103846;font-synthesis:none;background:#eaf7f8;font-family:IBM Plex Sans Thai,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}button,input{font:inherit}.display-shell{background:#eff9f9;grid-template-columns:minmax(0,62fr) minmax(360px,38fr);width:100%;height:100%;display:grid}.media-pane{background:linear-gradient(145deg,#073b4c,#0b6f78);min-width:0;position:relative;overflow:hidden}.media-pane>img,.media-pane>video{width:100%;height:100%;display:block}.media-pane:after{content:"";pointer-events:none;background:linear-gradient(#0000,#02232db8);height:35%;position:absolute;inset:auto 0 0}.media-brand{z-index:2;color:#fff;text-shadow:0 2px 12px #002d39;flex-direction:column;display:flex;position:absolute;bottom:34px;left:38px}.media-brand b{font-size:25px}.media-brand span{opacity:.82;font-size:15px}.media-dots{z-index:3;gap:7px;display:flex;position:absolute;bottom:40px;right:30px}.media-dots i{background:#fff6;border-radius:10px;width:7px;height:7px}.media-dots i.active{background:#fff;width:24px}.media-fallback{text-align:center;color:#fff;background:radial-gradient(circle at 50% 45%,#148795,#073b4c 70%);place-content:center;width:100%;height:100%;display:grid}.media-fallback h2{margin:20px 0 0;font-size:42px}.media-fallback p{opacity:.75;font-size:20px}.logo{color:#096170;background:#fff;border-radius:20px;place-content:center;width:66px;height:66px;font-size:26px;font-weight:800;display:grid;box-shadow:0 14px 40px #002c3a40}.logo.large{border-radius:30px;width:104px;height:104px;margin:auto;font-size:40px}.order-pane{background:#f8fdfd;border-left:1px solid #cce5e8;grid-template-rows:auto 1fr auto;min-width:0;display:grid;box-shadow:-20px 0 50px #00344112}.order-pane>header{border-bottom:1px solid #dcebed;justify-content:space-between;align-items:center;height:96px;padding:22px 28px;display:flex}.order-pane header span{color:#6c8891;font-size:13px}.order-pane header h1{margin:2px 0 0;font-size:24px}.connection{color:#4e746f;align-items:center;gap:7px;font-size:12px;display:flex}.connection i{background:#27b99e;border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 5px #27b99e1f}.connection.bad i{background:#e69a44}.order-content{min-height:0;padding:18px 26px;overflow-y:auto}.order-pane>footer{padding:22px 28px calc(22px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #dcebed;justify-content:space-between;align-items:center;display:flex}.order-pane>footer div{flex-direction:column;display:flex}.order-pane>footer span{font-size:18px;font-weight:700}.order-pane>footer small{color:#789199}.order-pane>footer strong{color:#07596a;font-size:34px}.cart-list{gap:10px;display:grid}.cart-list article{border-bottom:1px solid #e0ecee;grid-template-columns:36px 1fr auto;align-items:start;gap:12px;padding:14px 0;display:grid}.cart-list article>b{color:#096271;background:#e0f4f3;border-radius:11px;place-content:center;width:34px;height:34px;display:grid}.cart-list article div{flex-direction:column;min-width:0;display:flex}.cart-list article strong{font-size:17px;line-height:1.3}.cart-list article small{color:#7a9299;margin-top:3px}.cart-list article>span{font-size:17px;font-weight:700}.empty-cart{text-align:center;color:#789199;place-content:center;height:100%;display:grid}.empty-cart div{filter:grayscale(.2);font-size:66px}.empty-cart h2{color:#31535e;margin:12px 0 0}.empty-cart p{margin:4px 0}.member-panel,.status-panel{flex-direction:column;justify-content:center;min-height:100%;display:flex}.step{letter-spacing:.02em;font-weight:700;color:#0e857e!important}.member-panel h2,.status-panel h2{margin:8px 0;font-size:30px;line-height:1.2}.member-panel p,.status-panel p{color:#708990;margin:0 0 22px;line-height:1.5}.member-panel input{background:#fff;border:2px solid #cce3e5;border-radius:16px;outline:none;width:100%;padding:18px;font-size:24px}.member-panel input:focus{border-color:#1ba895;box-shadow:0 0 0 5px #1ba89519}.phone-wrap{position:relative}.phone-wrap span{color:#8ba0a5;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.member-actions{grid-template-columns:1fr 1.3fr;gap:10px;margin-top:14px;display:grid}.member-actions button{color:#315760;background:#e6eff0;border:0;border-radius:14px;padding:14px;font-weight:700}.member-actions button.primary{color:#fff;background:#075c6b}.member-actions button:disabled{opacity:.45}.status-panel{text-align:center;align-items:center}.status-icon{color:#17a477;background:#dff6ee;border-radius:50%;place-content:center;width:76px;height:76px;margin-bottom:18px;font-size:42px;font-weight:700;display:grid}.status-panel>span{color:#789199}.status-panel>h2{font-size:38px}.status-panel strong{color:#0a6a72;font-size:22px}.payment-qr{aspect-ratio:1;background:#fff;border-radius:20px;width:min(280px,70%);margin:10px 0 14px;padding:12px;box-shadow:0 14px 42px #12303c1f}.qr-placeholder{aspect-ratio:1;color:#789199;background:#e8f1f2;border-radius:20px;place-content:center;width:230px;margin:12px;display:grid}.countdown{color:#42716f;background:#e8f4f3;border-radius:50px;padding:8px 15px;font-weight:600}.queue{background:#e6f7f3;border-radius:20px;flex-direction:column;margin:14px 0 20px;padding:15px 32px;display:flex}.queue small{color:#688c8a}.queue strong{color:#075d68;font-size:48px;line-height:1.1}.status-panel.error .status-icon{color:#e47739;background:#fff0e6}.pair-screen,.splash{text-align:center;color:#143d48;background:radial-gradient(circle at 50% 40%,#f9ffff,#d9f0f1);place-content:center;height:100%;display:grid}.pair-screen section{background:#fff;border-radius:36px;padding:50px 70px;box-shadow:0 30px 90px #0b53611c}.eyebrow{color:#168d84;letter-spacing:.12em;font-weight:700}.pair-screen h1{margin:15px 0 0;font-size:42px}.pair-screen p{color:#738d94;font-size:20px}.pair-code{letter-spacing:.18em;color:#075e6d;margin:22px 0;font-size:78px;display:block}.pair-screen small{color:#859ba1}.offline{color:#a85c23;background:#fff1e5;border-radius:40px;padding:10px 20px;font-weight:700;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.splash .logo{margin:auto}.splash h1{font-size:24px}@media (width<=900px){.display-shell{grid-template-columns:55fr 45fr}.order-pane>header{padding:18px}.order-content{padding:14px 18px}.media-brand{left:24px}.order-pane>footer{padding:18px}.status-panel h2{font-size:30px}.payment-qr{width:min(220px,70%)}}