:root{--navy:#0b1f33;--blue:#1363df;--cyan:#28c7d9;--mint:#35d0a0;--orange:#ffb04a;--red:#ef5b5b;--ink:#172333;--muted:#68788a;--line:#d9e4ee;--bg:#f3f7fb}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,Noto Sans Thai,Leelawadee UI,system-ui,sans-serif}button,input,select{font:inherit}.shell{min-height:100vh;display:grid;grid-template-columns:250px 1fr}.sidebar{background:var(--navy);color:#fff;padding:22px 16px;display:flex;flex-direction:column;gap:18px;position:-webkit-sticky;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px}.brandmark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center}.nav{display:grid;grid-gap:5px;gap:5px}.nav a{color:#cfe0f1;text-decoration:none;padding:10px 12px;border-radius:10px;font-size:14px}.nav a.active,.nav a:hover{background:#173a5b;color:#fff}.profile{margin-top:auto;padding:12px;background:#15324d;border-radius:12px;font-size:13px}.main{padding:24px 28px 44px;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.eyebrow{font-size:11px;letter-spacing:.12em;color:var(--blue);font-weight:800;text-transform:uppercase}.title{font-size:28px;margin:3px 0 0}.pill{padding:7px 11px;border:1px solid var(--line);background:#fff;border-radius:999px;color:var(--muted);font-size:12px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:14px;gap:14px}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px;box-shadow:0 5px 16px #0b1f3308}.metric strong{font-size:25px;display:block;margin:8px 0 2px}.metric span{font-size:12px;color:var(--muted)}.section{margin-top:18px}.section h2{font-size:17px;margin:0 0 12px}.table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line)}.table td,.table th{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);font-size:13px}.table th{background:var(--navy);color:#fff;font-size:12px}.table tr:last-child td{border-bottom:0}.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;background:#e8f1ff;color:var(--blue)}.badge.green{background:#e8fff6;color:#14835e}.badge.orange{background:#fff4e4;color:#9b5b00}.button{border:0;border-radius:10px;background:var(--blue);color:#fff;padding:10px 14px;font-weight:700;cursor:pointer}.button.secondary{background:#fff;color:var(--navy);border:1px solid var(--line)}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form{display:grid;grid-gap:12px;gap:12px}.field{display:grid;grid-gap:5px;gap:5px}.field label{font-size:12px;color:var(--muted);font-weight:700}.field input,.field select{padding:11px;border:1px solid var(--line);border-radius:10px;background:#fff}.login{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}.login-hero{background:var(--navy);color:#fff;padding:60px;display:flex;flex-direction:column;justify-content:center}.login-hero h1{font-size:48px;line-height:1.02;margin:10px 0 18px}.login-box{display:grid;place-items:center;padding:32px}.login-card{width:min(380px,100%)}.pos-layout{display:grid;grid-template-columns:1fr 360px;grid-gap:16px;gap:16px}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:10px;gap:10px}.product{background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px;cursor:pointer}.product strong{display:block}.product small{color:var(--muted)}.cart{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;position:-webkit-sticky;position:sticky;top:20px;height:max-content}.total{font-size:28px;font-weight:800;display:flex;justify-content:space-between;border-top:1px dashed var(--line);padding-top:14px;margin-top:14px}.offline{background:#fff5df;color:#8b5700;padding:9px 12px;border-radius:9px;font-size:12px}.notice{padding:11px 14px;border-radius:10px;margin-bottom:14px;font-size:13px}.notice.success{background:#e8fff6;color:#146b50;border:1px solid #b7ecd9}.notice.error{background:#fff0ef;color:#9a3029;border:1px solid #f3c3bf}button:disabled{opacity:.48;cursor:not-allowed}.two-col{display:grid;grid-template-columns:1fr 1fr;grid-gap:15px;gap:15px}@media(max-width:950px){.shell{grid-template-columns:80px 1fr}.profile,.sidebar .label{display:none}.brand{justify-content:center}.nav a{text-align:center;padding:10px 3px;font-size:11px}.grid{grid-template-columns:repeat(2,1fr)}.pos-layout{grid-template-columns:1fr}.cart{position:static}}@media(max-width:600px){.main{padding:16px}.grid,.two-col{grid-template-columns:1fr}.product-grid{grid-template-columns:repeat(2,1fr)}.login{grid-template-columns:1fr}.login-hero{display:none}}.cart-line{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line)}.cart-line small{display:block}.cart-line small,.muted{color:var(--muted)}.payment-actions{display:grid;grid-gap:9px;gap:9px;margin-top:14px}.bank-button{border:0;border-radius:12px;color:#fff;padding:11px 14px;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.bank-button span{font-size:16px;font-weight:800}.bank-button small{opacity:.86}.bank-button.scb{background:linear-gradient(135deg,#4f2382,#7b45ac)}.bank-button.kbank{background:linear-gradient(135deg,#087b42,#18a55e)}.payment-status{margin-top:13px;border:1px solid #c8d9f7;background:#edf4ff;border-radius:12px;padding:12px;display:flex;justify-content:space-between;align-items:center}.payment-status small{display:block;color:var(--muted);margin-top:3px}.payment-status.paid{background:#e8fff6;border-color:#a8e3cf}.status-dot{font-weight:900;color:var(--blue);font-size:20px}.customer-screen{min-height:100vh;background:radial-gradient(circle at 50% 0,#fff 0,#f4f8fc 48%,#e9f1f8 100%);display:flex;flex-direction:column;align-items:center;padding:clamp(18px,3vw,38px);text-align:center}.customer-screen header{width:100%;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-weight:700}.customer-screen header img{width:min(210px,34vw);height:80px;object-fit:contain;object-position:left}.qr-panel{margin:auto;background:#fff;border:1px solid #d9e4ee;border-radius:28px;padding:clamp(22px,4vw,42px);width:min(620px,94vw);box-shadow:0 24px 70px #0b1f3315}.bank-name{display:inline-block;padding:7px 13px;border-radius:999px;background:#eef4fb;color:#314861;font-weight:800}.qr-panel h1{font-size:clamp(24px,4vw,38px);margin:14px 0 0}.display-amount{font-size:clamp(44px,8vw,72px);font-weight:900;color:var(--navy);letter-spacing:-.04em}.payment-qr{display:block;height:min(360px,70vw);object-fit:contain;margin:6px auto;background:#fff}.payment-qr,.qr-loading{width:min(360px,70vw);border-radius:18px}.qr-loading{aspect-ratio:1;margin:12px auto;display:grid;place-items:center;background:#f2f5f8;color:var(--muted)}.waiting{display:inline-flex;align-items:center;gap:8px;color:#2b6b59;font-weight:700}.waiting i{width:9px;height:9px;border-radius:50%;background:#2ac28b;box-shadow:0 0 0 6px #2ac28b22}.customer-screen footer{width:100%;font-size:13px;color:var(--muted)}.display-idle{margin:auto}.idle-orb,.success-mark{width:120px;height:120px;border-radius:34px;background:linear-gradient(135deg,#1363df,#28c7d9);display:grid;place-items:center;margin:auto;color:#fff;font-size:42px;font-weight:900;box-shadow:0 20px 50px #1363df42}.display-idle h1,.payment-complete h1{font-size:clamp(38px,7vw,64px);margin:24px 0 8px}.payment-complete{justify-content:center;background:radial-gradient(circle,#f4fffb,#c9f4e5)}.payment-complete .success-mark{border-radius:50%;background:#20a86f}.pairing{display:grid;grid-template-columns:1fr 1fr;place-items:center}.pairing>img{width:min(420px,80%)}.pairing form{width:min(420px,90%);background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px;display:grid;grid-gap:12px;gap:12px;text-align:left;box-shadow:0 20px 60px #0b1f3314}.pairing button,.pairing input{padding:14px;border-radius:11px}.pairing input{border:1px solid var(--line)}.pairing button{border:0;background:var(--blue);color:#fff;font-weight:800}.pairing small{color:var(--red)}@media(max-width:700px){.pairing{grid-template-columns:1fr}.pairing>img{width:240px}.customer-screen header span{display:none}}