:root{color-scheme:light;--canvas:#f3f6f8;--paper:#fff;--ink:#17324d;--muted:#526579;--blue:#0066cc;--border:#d9e2e8;--green:#126c46;--amber:#855000;font-family:'Noto Sans Thai',Tahoma,sans-serif;font-size:17px;color:var(--ink);background:var(--canvas)}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #009de0;outline-offset:3px}a{color:var(--blue)}h1,h2,p{margin:0}h1{font-size:30px;line-height:1.4;letter-spacing:-.5px}h2{font-size:20px}p{line-height:1.65}.muted,small{color:var(--muted)}small{font-size:14px}.topbar{background:white;border-bottom:1px solid var(--border)}.topbar-inner{max-width:1120px;margin:auto;padding:19px 28px;display:flex;justify-content:space-between;align-items:center;gap:18px}.brand{width:134px;height:auto}.account{display:flex;align-items:center;gap:12px}.account span{font-size:14px}.text-button{background:transparent;border:0;min-height:48px;color:var(--blue);padding:8px 12px}.preview-banner{text-align:center;background:#fff4cf;color:#624c10;padding:9px 20px;font-size:14px}main{max-width:1000px;margin:0 auto;padding:36px 28px 100px}.heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:25px;gap:20px}.shop{font-weight:600;color:var(--blue);margin-bottom:8px}.shop-select{max-width:280px;font-size:15px;min-height:48px;background:white}.actions{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:26px}.action{display:flex;align-items:center;gap:17px;text-align:left;min-height:118px;padding:24px;border-radius:14px;background:var(--paper);border:1px solid var(--border);color:var(--ink)}.action:first-child{border-color:#b4cfe9;background:#edf5ff}.action strong{display:block;font-size:22px}.action small{display:block;margin-top:4px}.icon{display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;border-radius:12px;background:#e5effa;color:var(--blue);font-size:27px;font-weight:400}.pending{display:flex;align-items:center;justify-content:space-between;background:#fff8e8;border:1px solid #e9d6aa;border-radius:10px;padding:16px 20px;margin-bottom:30px;color:#704600}.pending .text-button{color:#704600}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;gap:12px}.records{background:var(--paper);border:1px solid var(--border);border-radius:12px;overflow:hidden}.record{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--border);background:white;padding:18px 20px;color:var(--ink)}.record:last-child{border-bottom:0}.record:hover{background:#f8fbff}.record strong{display:block}.record small{display:block;margin-top:5px}.record .amount{text-align:right;font-variant-numeric:tabular-nums}.badge{display:inline-block;border-radius:5px;font-size:13px;line-height:1.6;padding:3px 8px;font-weight:500;background:#eef2f6;color:var(--muted);margin-top:6px}.badge.saved{background:#e5f4eb;color:var(--green)}.badge.pending,.badge.needs_fix{display:inline-block;background:#fff2cc;color:var(--amber);border:0;margin:6px 0 0;padding:3px 8px}.filters{display:flex;gap:8px;margin:15px 0}.filter{background:transparent;border:1px solid var(--border);border-radius:25px;min-height:44px;padding:7px 17px;color:var(--muted)}.filter[aria-pressed=true]{color:var(--blue);border-color:var(--blue);background:#edf5ff}.empty{padding:30px 20px;text-align:center;color:var(--muted)}.bottom-nav{display:none}.editor{max-width:650px;margin:0 auto}.back{margin:0 0 12px -12px}.panel{background:white;border:1px solid var(--border);border-radius:14px;padding:26px;margin-top:22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{display:flex;flex-direction:column;gap:8px;margin:0 0 19px}.field span{font-weight:500}.field small{font-weight:400}.field input,.field select,.field textarea,select{width:100%;min-height:52px;padding:11px 13px;border:1px solid #b9c9d5;border-radius:8px;color:var(--ink);background:white}.field input[inputmode=decimal]{font-size:22px;font-variant-numeric:tabular-nums}.field textarea{min-height:95px;resize:vertical}.sales-input{display:grid;grid-template-columns:1fr 150px;align-items:center;margin-bottom:16px}.sales-input input{text-align:right}.total{display:flex;justify-content:space-between;border-top:1px solid var(--border);padding-top:21px;margin-top:20px;align-items:center}.total strong{font-size:29px;color:var(--blue);font-variant-numeric:tabular-nums}.help{font-size:14px;color:var(--muted);margin:10px 0 18px}.notice{padding:13px 16px;background:#edf5ff;border-radius:8px;margin:18px 0;font-size:15px}.error{background:#fff0ef;color:#9d2222;padding:14px 18px;border-radius:8px;margin:16px 0;line-height:1.6}.success{background:#e5f4eb;color:var(--green);padding:14px 18px;border-radius:8px;margin:16px 0}.button{display:inline-flex;justify-content:center;align-items:center;gap:10px;min-height:52px;padding:12px 23px;border:1px solid var(--border);border-radius:8px;background:white;color:var(--ink);font-weight:600;text-decoration:none}.primary{background:var(--blue);border-color:var(--blue);color:white}.line-login{background:#06c755;color:white;border:0;width:100%;margin:20px 0}.footer-actions{display:flex;gap:13px;margin-top:20px}.footer-actions .primary{flex:1}.check{display:flex;gap:12px;align-items:flex-start;margin:20px 0;line-height:1.7}.check input{width:22px;height:22px;margin:3px 0;flex-shrink:0;accent-color:var(--blue)}details{margin:20px 0;border-top:1px solid var(--border);padding-top:17px}summary{cursor:pointer;min-height:36px;color:var(--blue)}.attachments{display:flex;flex-wrap:wrap;gap:10px;margin:15px 0}.attachments .button{font-size:14px}.upload{display:block;border:1px dashed #94adc3;border-radius:10px;padding:19px;text-align:center;cursor:pointer;background:#f8fbff;margin:0 0 18px}.upload input{display:block;max-width:100%;font-size:14px;margin:10px auto 0}.login{max-width:450px;margin:65px auto;padding:32px;background:white;border:1px solid var(--border);border-radius:16px}.login h1{font-size:27px;margin:24px 0 14px}.history{border-top:1px solid var(--border);padding:15px 0}.history p{font-size:15px}.date{font-size:14px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.modal{border:0;border-radius:12px;max-width:min(900px,95vw);padding:15px}.modal::backdrop{background:#17324db3}.modal img{max-width:100%;max-height:75vh;display:block}.offline{text-align:center;background:#ffebd4;color:#704600;padding:10px}.saved-summary{font-size:32px;font-weight:700;margin:15px 0}.info-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);gap:20px}.info-row span:last-child{text-align:right}.status-text{min-height:26px}.footer-help{text-align:center;margin-top:22px;font-size:14px;color:var(--muted)}
@media(max-width:650px){.topbar-inner{padding:12px 18px}.brand{width:115px}.account span{display:none}main{padding:25px 18px 100px}h1{font-size:25px}.heading{display:block}.shop-select{margin-top:14px;max-width:none}.actions{gap:12px;grid-template-columns:1fr}.action{padding:20px;min-height:96px}.action strong{font-size:22px}.pending{padding:12px 14px}.record{padding:16px 14px;gap:10px}.record strong{font-size:16px}.record .amount strong{font-size:18px}.panel{padding:20px 17px}.form-grid{grid-template-columns:1fr;gap:0}.sales-input{grid-template-columns:1fr 140px}.footer-actions{flex-direction:column-reverse}.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:white;border-top:1px solid var(--border);padding:6px 18px max(6px,env(safe-area-inset-bottom));justify-content:space-around;z-index:5}.bottom-nav button{width:45%;color:var(--muted);border:0;background:white;min-height:52px;font-size:15px}.bottom-nav button.active{color:var(--blue);font-weight:700}.login{margin:30px 0;padding:25px}.total strong{font-size:27px}.preview-banner{font-size:12px}.heading p{font-size:15px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media(max-width:650px){.filter{font-size:14px;padding:7px 12px;white-space:nowrap}.filters{gap:6px}}