*{box-sizing:border-box}body{margin:0;min-width:320px;background:#eef2f1;color:#17231f;font-family:Sarabun,system-ui,sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;padding:20px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1440px;margin:0 auto 18px}.topbar h1{margin:0;font-size:28px;line-height:1.2}.topbar p{margin:5px 0 0;color:#58706a}.topbar-actions,.preview-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.workspace{display:grid;grid-template-columns:minmax(390px,520px) minmax(420px,1fr);gap:20px;max-width:1440px;margin:0 auto;align-items:start}.control-panel,.preview-area{background:#fff;border:1px solid #dce5e2;border-radius:8px;box-shadow:0 18px 55px #0d242014}.control-panel{overflow:hidden}.tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #dce5e2;background:#f7faf9}.tabs button{display:flex;gap:8px;align-items:center;justify-content:center;min-height:52px;border:0;border-right:1px solid #dce5e2;background:transparent;color:#48625c;font-weight:700}.tabs button:last-child{border-right:0}.tabs button.active{background:#fff;color:#0f766e}.panel-content{padding:18px}.section-title{margin:4px 0 12px;color:#14221f;font-size:15px;font-weight:800}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field{display:grid;gap:6px;margin-bottom:12px}.field span,.check-row{color:#60746f;font-size:12px;font-weight:700}.field input,.field textarea,.field select{width:100%;border:1px solid #cad8d4;border-radius:8px;background:#fff;color:#17231f;outline:0;padding:10px 11px}.field textarea{resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{border-color:#0f766e;box-shadow:0 0 0 3px #0f766e1f}.search-input{display:grid;grid-template-columns:22px 1fr;align-items:center;border:1px solid #cad8d4;border-radius:8px;background:#fff;color:#60746f;padding:0 10px}.search-input input{border:0;box-shadow:none;padding-left:4px}.search-input input:focus{box-shadow:none}.logo-preview-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-2px 0 14px;padding:10px;border:1px solid #dce5e2;border-radius:8px;background:#fbfdfc}.logo-preview-row img{max-width:96px;max-height:64px;object-fit:contain}.backup-actions{display:flex;flex-wrap:wrap;gap:10px}.customer-book{margin:-2px 0 12px;padding:10px;border:1px solid #dce5e2;border-radius:8px;background:#fbfdfc}.customer-book-title{margin-bottom:8px;color:#60746f;font-size:12px;font-weight:800}.customer-memory{display:flex;flex-wrap:wrap;gap:8px}.customer-pill{display:inline-flex;align-items:center;overflow:hidden;border:1px solid #cad8d4;border-radius:999px;background:#f4faf8}.customer-pill button{display:inline-flex;align-items:center;gap:6px;min-height:30px;border:0;background:transparent;color:#0f766e;padding:0 10px;font-size:12px;font-weight:800}.customer-pill .customer-delete{width:30px;padding:0;border-left:1px solid #dce5e2;color:#b42318}.items-header,.payment-row{display:flex;align-items:end;justify-content:space-between;gap:12px}.item-list{display:grid;gap:10px}.item-editor{display:grid;grid-template-columns:28px minmax(140px,1fr) 116px 36px;gap:8px;align-items:end;padding:10px;border:1px solid #dce5e2;border-radius:8px;background:#fbfdfc}.item-editor .field{margin-bottom:0}.product-field{grid-column:2}.qty-field{grid-column:3}.price-field{grid-column:2}.discount-field{grid-column:3}.line-total{grid-column:2 / 4}.item-editor .icon-button{grid-column:4;grid-row:1}.item-number{display:grid;place-items:center;height:38px;border-radius:999px;background:#e7f4f1;color:#0f766e;font-weight:800}.line-total{display:flex;align-items:center;justify-content:flex-end;height:38px;color:#17231f;font-weight:800}.qty-stepper{display:grid;grid-template-columns:32px minmax(44px,1fr) 32px;align-items:center;border:1px solid #cad8d4;border-radius:8px;overflow:hidden;background:#fff}.qty-stepper button{display:grid;place-items:center;height:38px;border:0;background:#eef7f5;color:#0f766e}.qty-stepper input{height:38px;border:0;border-left:1px solid #dce5e2;border-right:1px solid #dce5e2;border-radius:0;text-align:center;padding:0 4px}.qty-stepper input:focus{box-shadow:none}.primary-button,.ghost-button,.small-button,.save-button,.icon-button,.paper-toggle button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border-radius:8px;border:1px solid transparent;padding:0 14px;font-weight:800}.primary-button{background:#0f766e;color:#fff}.ghost-button{background:#fff;border-color:#cad8d4;color:#21403a}.small-button{min-height:36px;background:#e7f4f1;color:#0f766e}.save-button{width:100%;margin-top:14px;background:#17231f;color:#fff}.icon-button{width:36px;min-height:36px;padding:0;background:#fff;border-color:#dce5e2;color:#4c625d}.icon-button.danger{color:#b42318}.summary-box{display:grid;grid-template-columns:1fr;gap:10px;margin-top:6px}.summary-box div{display:grid;gap:5px;padding:13px;border-radius:8px;background:#f2f7f5}.summary-box span{color:#60746f;font-size:12px;font-weight:700}.summary-box strong{color:#0f766e;font-size:20px}.check-row{display:flex;gap:10px;align-items:center;margin:4px 0 14px}.history-list{display:grid;gap:10px}.history-card{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:10px;border:1px solid #dce5e2;border-radius:8px}.history-card>button:first-child{display:grid;gap:3px;text-align:left;border:0;background:transparent;color:inherit}.history-card span,.empty-text{color:#60746f;font-size:13px}.history-actions{display:flex;gap:6px}.preview-area{min-height:calc(100vh - 120px);padding:18px;background:#dfe8e5;overflow:auto}.preview-toolbar{justify-content:space-between;margin-bottom:16px}.paper-toggle{display:inline-flex;padding:3px;border-radius:8px;background:#eef5f3;border:1px solid #cad8d4}.paper-toggle button{min-height:34px;background:transparent;color:#48625c;padding:0 12px}.paper-toggle button.active{background:#fff;color:#0f766e;box-shadow:0 4px 14px #0d242014}.receipt-paper{margin:0 auto;background:#fff;color:#101816;border-top:6px solid #0f766e;box-sizing:border-box;box-shadow:0 22px 80px #0d24202e}.receipt-paper.slip{width:320px}.receipt-paper.a4{width:210mm;min-height:297mm;max-width:100%}.receipt-inner{padding:22px}.receipt-paper.a4 .receipt-inner{min-height:calc(297mm - 6px);padding:16mm 18mm}.receipt-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;border-bottom:2px solid #17231f;padding-bottom:16px}.receipt-header h2{margin:0 0 5px;font-size:22px}.receipt-brand img{display:block;max-width:76px;max-height:58px;object-fit:contain;margin-bottom:8px}.receipt-header h3{margin:2px 0 0;font-size:18px}.receipt-title-card{min-width:148px;border:1px solid #b8cac5;border-radius:8px;background:#f3faf8;padding:10px 12px;text-align:center}.receipt-title-card span{color:#0f766e;font-size:11px;font-weight:800;text-transform:uppercase}.receipt-header p,.receipt-footer p,.baht-text{margin:3px 0;color:#4d5f5a;font-size:13px}.receipt-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:14px 0;border-bottom:1px solid #dce5e2}.receipt-meta div,.receipt-summary div{display:flex;justify-content:space-between;gap:14px}.receipt-meta span,.receipt-summary span{color:#4d5f5a}.customer-block,.received-from{display:grid;gap:5px;padding:12px 0;border-bottom:1px solid #dce5e2;font-size:13px}.received-from div{display:grid;gap:2px}.received-from span,.receipt-purpose span{color:#4d5f5a;font-size:12px;font-weight:700}.received-from strong{font-size:15px}.received-from p{margin:0;color:#4d5f5a}.receipt-purpose{margin-top:4px;padding:9px 10px;border-radius:8px;background:#f6f9f8}.receipt-table{width:100%;border-collapse:collapse;margin:12px 0}.receipt-table th,.receipt-table td{padding:7px 4px;border-bottom:1px solid #e3e8e6;text-align:right;vertical-align:top;font-size:13px}.receipt-table th:first-child,.receipt-table td:first-child{text-align:left}.receipt-table td:first-child span{display:block;margin-top:2px;color:#b42318;font-size:11px}.receipt-summary{display:grid;gap:6px;padding-top:4px}.grand-total{margin-top:6px;padding-top:9px;border-top:2px solid #17231f;font-size:19px}.baht-text{text-align:left;border:1px solid #dce5e2;border-radius:8px;padding:8px 10px;background:#f8fbfa}.receipt-footer{margin-top:20px;padding-top:16px;border-top:1px solid #dce5e2;text-align:center}.signature-grid{display:grid;grid-template-columns:minmax(180px,260px);justify-content:center;gap:16px;margin-bottom:12px}.signature-grid>div{min-height:76px}.signature-line{display:block;width:100%;height:48px;border-bottom:1px solid #17231f;margin-bottom:6px}.signature-grid strong{display:block;min-height:18px;font-size:12px}.signature-grid p{margin:2px 0 0}.payment-mark{display:inline-flex;align-items:center;gap:6px;margin-top:8px;color:#0f766e;font-weight:800}.signature-pad-card{display:grid;gap:10px;margin:2px 0 16px;padding:12px;border:1px solid #dce5e2;border-radius:8px;background:#fbfdfc}.signature-pad-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.signature-pad-header>div{display:grid;gap:3px}.signature-pad-header strong{font-size:13px}.signature-pad-header span{color:#60746f;font-size:11px}.signature-pad{display:block;width:100%;height:150px;border:1px dashed #9fb4ae;border-radius:8px;background:#fff;cursor:crosshair;touch-action:none}.small-button:disabled{cursor:not-allowed;opacity:.45}.signature-line{display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.signature-line img{display:block;width:100%;height:100%;object-fit:contain}@media(max-width:1040px){.workspace{grid-template-columns:1fr}.preview-area{min-height:auto}}@media(max-width:720px){.signature-pad-header{align-items:stretch;flex-direction:column}.app-shell{padding:12px}.topbar,.topbar-actions,.items-header,.payment-row{align-items:stretch;flex-direction:column}.workspace{gap:12px}.field-grid,.summary-box{grid-template-columns:1fr}.item-editor{grid-template-columns:28px 1fr 42px}.item-editor .field,.line-total{grid-column:1 / -1}.item-editor .icon-button{grid-column:3;grid-row:1}.receipt-paper.slip,.receipt-paper.a4{width:100%;min-height:auto}.receipt-paper.a4 .receipt-inner{min-height:auto;padding:22px}.history-card{grid-template-columns:1fr}.history-actions{justify-content:flex-end}}@media(max-width:480px){.receipt-header,.receipt-meta,.signature-grid{grid-template-columns:1fr}.receipt-header{display:grid;text-align:center}}@media print{@page{size:A4 portrait;margin:0}html,body{background:#fff;width:210mm;min-height:297mm;margin:0}body *{visibility:hidden}#receipt-paper,#receipt-paper *{visibility:visible}#receipt-paper{position:absolute;left:0;top:0;width:80mm;max-width:none;border-top:0;box-shadow:none}#receipt-paper.a4{width:210mm;min-height:297mm;page-break-after:always}.receipt-inner{padding:8mm}.receipt-paper.a4 .receipt-inner{min-height:297mm;padding:14mm 16mm}}