:root{--bg-page:#f4f5f7;--bg-card:#fff;--bg-input:#fff;--bg-hover:#f0f2f5;--border-color:#dfe3e8;--text-primary:#1f2430;--text-secondary:#667085;--text-muted:#98a2b3;--accent-primary:#f5a623;--accent-primary-hover:#e0940f;--accent-primary-bg:#fffaf0;--accent-danger:#d92d20;--accent-danger-bg:#fef3f2;--accent-success:#12875a;--accent-success-bg:#eafaf2;--shadow-card:0 1px 3px #10182814;--radius:10px;--font-sans:"Sarabun", "Noto Sans Thai", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-sans);background:var(--bg-page);color:var(--text-primary);margin:0;font-size:15px}button,input,select,textarea{font-family:inherit;font-size:1rem}button{cursor:pointer}a{color:inherit}.page-loading{height:100vh;color:var(--text-secondary);justify-content:center;align-items:center;font-size:1.1rem;display:flex}.btn{border:1px solid #0000;border-radius:8px;align-items:center;gap:6px;padding:10px 18px;font-weight:600;transition:background .15s;display:inline-flex}.btn-primary{background:var(--accent-primary);color:#fff}.btn-primary:hover{background:var(--accent-primary-hover)}.btn-secondary{background:var(--bg-card);border-color:var(--border-color);color:var(--text-primary)}.btn-secondary:hover{background:var(--bg-hover)}.btn-danger{background:var(--accent-danger-bg);color:var(--accent-danger)}.btn:disabled{opacity:.5;cursor:not-allowed}.field{flex-direction:column;gap:6px;margin-bottom:14px;display:flex}.field label{color:var(--text-secondary);font-size:.85rem;font-weight:600}.field input,.field select,.field textarea{border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-primary);border-radius:8px;padding:10px 12px}.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent-primary);outline-offset:1px}.card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:20px}.badge{border-radius:999px;padding:3px 10px;font-size:.78rem;font-weight:600;display:inline-block}.badge-draft{color:var(--text-secondary);background:#f2f4f7}.badge-sent{color:#2f5ecc;background:#eff4ff}.badge-accepted{background:var(--accent-success-bg);color:var(--accent-success)}.badge-rejected{background:var(--accent-danger-bg);color:var(--accent-danger)}@media print{.no-print{display:none!important}}.app-shell{flex-direction:column;min-height:100%;display:flex}.app-header{background:var(--bg-card);border-bottom:1px solid var(--border-color);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 24px;display:flex}.app-header-left{flex-wrap:wrap;align-items:center;gap:24px;display:flex}.app-logo{color:var(--accent-primary-hover);font-size:1.1rem;font-weight:700}.app-header-left nav{gap:8px;display:flex}.app-header-left nav a{color:var(--text-secondary);border-radius:8px;align-items:center;gap:6px;padding:8px 14px;font-weight:600;text-decoration:none;display:inline-flex}.app-header-left nav a.active,.app-header-left nav a:hover{background:var(--bg-hover);color:var(--text-primary)}.app-header-right{align-items:center;gap:14px;display:flex}.app-user{color:var(--text-secondary);border-radius:8px;align-items:center;gap:6px;padding:6px 10px;font-weight:600;text-decoration:none;display:inline-flex}.app-user:hover{background:var(--bg-hover);color:var(--text-primary)}.app-main{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:24px}@media (width<=640px){.app-main{padding:14px}}.login-page{background:var(--bg-page);justify-content:center;align-items:center;min-height:100vh;padding:16px;display:flex}.login-card{width:100%;max-width:380px}.login-card h1{margin:0 0 4px;font-size:1.3rem}.login-subtitle{color:var(--text-secondary);margin:0 0 20px;font-size:.9rem}.login-error{background:var(--accent-danger-bg);color:var(--accent-danger);border-radius:8px;margin-bottom:14px;padding:10px 12px;font-size:.88rem}.login-submit{justify-content:center;width:100%;padding:12px}.badge-sample{background:var(--bg-hover);color:var(--text-secondary);vertical-align:middle;border-radius:999px;margin-left:8px;padding:2px 8px;font-size:.72rem;font-weight:700;display:inline-block}.owner-tabs{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.owner-tabs button{border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;border-radius:8px;padding:8px 14px;font-size:.85rem;font-weight:600}.owner-tabs button.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.search-bar{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;display:flex}.search-input{border:1px solid var(--border-color);min-width:220px;color:var(--text-secondary);border-radius:8px;flex:1;align-items:center;gap:8px;padding:8px 12px;display:flex}.search-input input{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1}.search-bar select{border:1px solid var(--border-color);background:var(--bg-input);border-radius:8px;padding:10px 12px}.qt-table a{color:var(--accent-primary-hover);font-weight:700;text-decoration:none}.qt-amount{font-weight:700}.qt-amount-hint{color:var(--text-secondary);white-space:nowrap;font-size:.72rem;font-weight:500;display:block}.pagination{color:var(--text-secondary);justify-content:center;align-items:center;gap:14px;margin-top:16px;display:flex}.editor .card{margin-bottom:16px}.editor h2{align-items:center;gap:8px;margin-top:0;font-size:1.05rem;display:flex}.header-actions{gap:10px;display:flex}.form-row-3{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}@media (width<=720px){.form-row-3{grid-template-columns:1fr}}.customer-search{position:relative}.customer-options{background:var(--bg-card);border:1px solid var(--border-color);box-shadow:var(--shadow-card);z-index:10;border-radius:8px;max-height:220px;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto}.customer-option{cursor:pointer;padding:10px 12px}.customer-option:hover{background:var(--bg-hover)}.customer-option-name{font-weight:600}.customer-option-meta{color:var(--text-secondary);font-size:.8rem}.ai-draft-card{border:1px solid var(--accent-primary);background:var(--accent-primary-bg)}.ai-hint{color:var(--text-secondary);margin-top:-6px;font-size:.85rem}.ai-box{align-items:flex-start;gap:10px;display:flex}.ai-box textarea{border:1px solid var(--border-color);background:var(--bg-input);border-radius:8px;flex:1;padding:10px 12px}.items-table{flex-direction:column;gap:4px;margin-bottom:12px;display:flex;overflow-x:auto}.items-row-group{border-bottom:1px solid var(--border-color);padding-bottom:8px}.items-row-group:last-child{border-bottom:none}.item-toggle-row{gap:12px;display:flex}.item-dates-toggle{color:var(--accent-primary-hover);cursor:pointer;background:0 0;border:none;padding:4px;font-size:.78rem;font-weight:600}.item-note-row{margin-top:4px}.item-note-row input{border:1px solid var(--border-color);background:var(--bg-input);border-radius:6px;width:100%;min-width:640px;padding:8px 10px}.item-dates-row{background:var(--bg-hover);border-radius:8px;grid-template-columns:repeat(4,1fr);gap:10px;min-width:640px;margin-top:4px;padding:10px 12px;display:grid}.item-dates-row .field{margin-bottom:0}.item-dates-row label{font-size:.75rem}.items-head,.items-row{grid-template-columns:2.4fr .6fr .7fr 1fr .8fr .6fr 1fr 40px;align-items:center;gap:8px;min-width:880px;display:grid}.items-head{color:var(--text-secondary);text-transform:uppercase;padding:0 4px;font-size:.78rem;font-weight:600}.items-row input{border:1px solid var(--border-color);background:var(--bg-input);border-radius:6px;width:100%;padding:8px 10px}.item-amount{text-align:right;padding-right:6px;font-weight:700}.item-remove{padding:8px}.totals{border-top:1px solid var(--border-color);flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:16px;padding-top:16px;display:flex}.totals-fields{flex-wrap:wrap;gap:16px;display:flex}.vat-field{max-width:200px;margin-bottom:0}.vat-field-hint{color:var(--text-muted);font-size:.75rem}.totals-lines{min-width:260px}.totals-lines>div{color:var(--text-secondary);justify-content:space-between;padding:4px 0;display:flex}.totals-grand{border-top:1px solid var(--border-color);margin-top:6px;font-size:1.15rem;font-weight:700;color:var(--text-primary)!important;padding-top:10px!important}.badge-sample-view{background:var(--bg-hover);color:var(--text-secondary);vertical-align:middle;border-radius:999px;margin-left:10px;padding:3px 10px;font-size:.7rem;font-weight:700;display:inline-block}.header-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.lang-toggle{border:1px solid var(--border-color);border-radius:8px;display:inline-flex;overflow:hidden}.lang-toggle button{background:var(--bg-card);color:var(--text-secondary);border:none;padding:8px 14px;font-weight:600}.lang-toggle button.active{background:var(--accent-primary);color:#fff}.status-select{border:1px solid var(--border-color);background:var(--bg-input);border-radius:8px;padding:9px 12px}.print-hint{color:var(--text-secondary);margin-top:-8px;margin-bottom:16px;font-size:.85rem}.qt-sheet{max-width:820px;margin:0 auto;font-size:.92rem}.qt-sheet-header{border-bottom:2px solid var(--qt-accent,var(--accent-primary));margin-bottom:16px;padding-bottom:16px}.qt-header-top{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:16px;display:flex}.qt-seller-logo{object-fit:contain;max-width:240px;max-height:72px;display:block}.qt-seller-meta{color:var(--text-secondary);flex-wrap:wrap;gap:14px;margin-top:6px;font-size:.85rem;display:flex}.qt-doc-info{background:var(--bg-hover);border-radius:8px;margin-left:auto;padding:10px 16px}.qt-doc-title{color:var(--text-primary);margin-bottom:14px;font-size:1.2rem;font-weight:700}.qt-doc-info td{color:var(--text-secondary);white-space:nowrap;padding:2px 4px}.qt-doc-info td:first-child{padding-right:16px}.qt-doc-info td:last-child{color:var(--text-primary);text-align:left;font-weight:600}.qt-parties{border:1px solid var(--qt-accent,var(--accent-primary));border-radius:10px;margin-bottom:20px;overflow:hidden}.qt-seller-box{background:color-mix(in srgb, var(--qt-accent,var(--accent-primary)) 12%, var(--bg-card));border-bottom:1px solid var(--qt-accent,var(--accent-primary));grid-template-columns:1.3fr 1fr;gap:16px;padding:14px 16px;display:grid}.qt-seller-col{grid-template-columns:max-content 1fr;gap:6px 10px;display:grid}.qt-seller-row{display:contents}.qt-seller-label{color:var(--text-primary);white-space:nowrap;font-weight:600}.qt-seller-value{color:var(--text-secondary)}@media (width<=640px){.qt-seller-box{grid-template-columns:1fr}}.qt-customer{background:color-mix(in srgb, var(--qt-accent,var(--accent-primary)) 12%, var(--bg-card));padding:14px 16px}.qt-customer-label{color:var(--text-secondary);margin-bottom:8px;font-size:.78rem;font-weight:600}.qt-customer-box{background:0 0;border-bottom:none;padding:0}.qt-items-frame{border:1px solid var(--border-color);border-radius:10px;margin-bottom:20px;overflow:hidden}.qt-items{border-collapse:collapse;width:100%}.qt-items tbody tr:last-child td{border-bottom:none}.qt-items th,.qt-items td{border-bottom:1px solid var(--border-color);text-align:left;padding:8px 10px;font-size:.88rem}.qt-items td:nth-child(2){white-space:pre-line}.qt-items th{background:var(--bg-hover);font-weight:600}.qt-items td:nth-child(n+3),.qt-items th:nth-child(n+3){text-align:right}.qt-totals{flex-wrap:wrap;justify-content:space-between;gap:20px;margin-bottom:30px;display:flex}.qt-totals-text{min-width:220px;color:var(--text-secondary);flex:1;font-size:.85rem}.qt-total-words{font-style:italic}.qt-note{margin-top:12px}.qt-note-label{color:var(--text-primary);font-weight:600}.qt-totals table{min-width:260px}.qt-totals td{padding:4px 8px}.qt-totals td:last-child{text-align:right;font-weight:600}.qt-grand-total td{border-top:2px solid var(--qt-accent,var(--accent-primary));padding-top:8px;font-size:1.1rem;font-weight:700}.qt-grand-total td:last-child{color:var(--qt-accent,var(--accent-primary-hover))}.qt-grand-total-muted td{color:var(--text-secondary);border-top-color:var(--border-color);font-size:.95rem;font-weight:600}.qt-grand-total-muted td:last-child{color:var(--text-secondary)}.qt-signatures{text-align:center;color:var(--text-secondary);grid-template-columns:repeat(4,1fr);gap:20px;font-size:.85rem;display:grid}.qt-sign-block{flex-direction:column;align-items:center;display:flex}.qt-sign-graphic{justify-content:center;align-items:flex-end;width:100%;height:90px;margin-bottom:8px;display:flex}.qt-stamp-box{border:1px dashed var(--border-color);border-radius:6px;width:90px;height:90px}.qt-stamp-image,.qt-signature-image{object-fit:contain;max-width:100%;max-height:90px}.qt-signature-image{max-height:50px}.qt-sign-line{border-bottom:1px solid var(--border-color);width:100%;height:50px}.qt-sign-caption{color:var(--text-primary);font-weight:600}.qt-sign-name{margin-top:4px;font-size:.8rem}@media (width<=640px){.qt-signatures{grid-template-columns:repeat(2,1fr);row-gap:24px}}@media print{body{background:#fff}.app-header{display:none}.qt-sheet{box-shadow:none;padding:0}*{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important}}.image-upload{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.image-upload-preview{border:1px solid var(--border-color);background:var(--bg-hover);border-radius:8px;justify-content:center;align-items:center;width:80px;height:80px;display:flex;position:relative;overflow:hidden}.image-upload-preview img{object-fit:contain;max-width:100%;max-height:100%}.image-upload-remove{background:var(--accent-danger);color:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;padding:0;display:flex;position:absolute;top:2px;right:2px}.image-upload-hint{color:var(--text-muted);margin-top:6px;font-size:.75rem;display:block}.image-upload-empty{border:1px dashed var(--border-color);width:80px;height:80px;color:var(--text-muted);text-align:center;border-radius:8px;justify-content:center;align-items:center;padding:4px;font-size:.72rem;display:flex}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;display:flex}.page-header h1{margin:0;font-size:1.4rem}.seller-form{margin-bottom:20px}.seller-form h2{margin-top:0;font-size:1.1rem}.form-row-2{grid-template-columns:1fr 1fr;gap:12px;display:grid}@media (width<=640px){.form-row,.form-row-2{grid-template-columns:1fr}}.seller-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;display:grid}.color-field-row{align-items:center;gap:10px;display:flex}.color-field-row input[type=color]{border:1px solid var(--border-color);background:var(--bg-input);border-radius:8px;width:44px;height:38px;padding:2px}.color-field-hex{max-width:140px}.seller-card-name{align-items:center;gap:8px;margin-bottom:6px;font-weight:700;display:flex}.seller-color-dot{border-radius:50%;flex-shrink:0;width:12px;height:12px;display:inline-block}.seller-card-name-en{color:var(--text-secondary);margin-bottom:6px;font-size:.85rem}.seller-card-address{color:var(--text-secondary);margin-bottom:8px;font-size:.88rem}.seller-card-meta{color:var(--text-secondary);flex-direction:column;gap:4px;margin-bottom:14px;font-size:.85rem;display:flex}.seller-card-actions{gap:8px;display:flex}.profile-card{max-width:480px}.profile-info{flex-direction:column;gap:12px;margin-bottom:4px;display:flex}.profile-label{color:var(--text-secondary);font-size:.8rem;font-weight:600}.profile-value{font-size:1rem}.profile-divider{border:none;border-top:1px solid var(--border-color);margin:20px 0}.user-form{margin-bottom:20px}.form-row{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}@media (width<=640px){.form-row{grid-template-columns:1fr}}.form-actions{justify-content:flex-end;gap:10px;margin-top:8px;display:flex}.table-card{padding:0;overflow-x:auto}.qt-table{border-collapse:collapse;width:100%;min-width:560px}.qt-table th,.qt-table td{text-align:left;border-bottom:1px solid var(--border-color);padding:12px 16px;font-size:.9rem}.qt-table th{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;font-size:.8rem;font-weight:600}.qt-table tbody tr:hover{background:var(--bg-hover)}.empty-state{text-align:center;color:var(--text-secondary);padding:40px}.user-actions{flex-wrap:wrap;gap:8px;display:flex}