:root{--navy:#0d2942;--navy2:#143d5c;--cyan:#00b8d9;--cyan-dark:#008fa9;--pale:#eaf8fb;--ink:#172a3a;--muted:#617485;--line:#d9e4ec;--soft:#f4f8fb;--white:#fff;--shadow:0 18px 45px rgba(13,41,66,.1)}
*{box-sizing:border-box}html{font-family:"Noto Sans Thai",sans-serif;color:var(--ink);background:#eef4f8}body{margin:0;min-height:100vh}button,input,select{font:inherit}.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 3vw;position:sticky;top:0;z-index:10}.brand{font-size:1.65rem;font-weight:700;color:var(--cyan);text-decoration:none;letter-spacing:-.04em}.brand span{color:var(--navy)}.top-actions{display:flex;align-items:center;gap:12px}.demo-pill{background:var(--pale);color:var(--cyan-dark);font-weight:700;padding:6px 12px;border-radius:99px;font-size:.82rem}.ghost,.preview-toolbar button,.add-button{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:10px;padding:9px 13px;cursor:pointer;font-weight:600}.ghost span{background:var(--navy);color:#fff;border-radius:99px;padding:1px 7px;margin-left:5px}.workspace{display:grid;grid-template-columns:minmax(430px,46%) minmax(520px,54%);min-height:calc(100vh - 72px)}.editor{padding:34px clamp(22px,3vw,48px) 60px;background:#fff;border-right:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}.eyebrow{color:var(--cyan-dark);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin:0 0 4px}.section-heading h1{font-size:clamp(1.45rem,2vw,2rem);line-height:1.25;margin:0;color:var(--navy)}.quote-number{font-size:.85rem;border:1px solid var(--line);padding:7px 10px;border-radius:8px;color:var(--muted);white-space:nowrap}.card{border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:16px;background:#fff}.card-title{display:flex;align-items:center;gap:10px;margin-bottom:16px}.card-title>span,.card-title>div>span{width:26px;height:26px;border-radius:8px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:.82rem;font-weight:700}.card-title h2{font-size:1rem;margin:0;color:var(--navy)}.card-title.split{justify-content:space-between}.card-title.split>div{display:flex;align-items:center;gap:10px}.add-button{color:var(--cyan-dark);border-color:#b9e7ef}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:.84rem}.field input,.field select,.item-row input{width:100%;border:1px solid var(--line);background:var(--soft);border-radius:9px;padding:10px 11px;color:var(--ink);outline:none}.field input:focus,.field select:focus,.item-row input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,184,217,.12)}.item-list{display:flex;flex-direction:column;gap:10px}.item-row{display:grid;grid-template-columns:minmax(150px,1fr) 68px 108px 34px;gap:8px;align-items:center}.remove-item{border:0;background:transparent;color:#9aadb9;font-size:1.35rem;cursor:pointer}.settings-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:18px;align-items:end}.switch-row{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:10px;padding:9px 11px}.switch-row span{display:flex;flex-direction:column}.switch-row small{color:var(--muted)}.switch-row input{position:absolute;opacity:0}.switch-row i{width:42px;height:24px;border-radius:99px;background:#afbec8;position:relative;transition:.2s}.switch-row i:after{content:"";position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;left:3px;top:3px;transition:.2s}.switch-row input:checked+i{background:var(--cyan)}.switch-row input:checked+i:after{transform:translateX(18px)}.primary{width:100%;border:0;background:var(--navy);color:#fff;border-radius:12px;padding:14px;font-weight:700;cursor:pointer;box-shadow:0 9px 22px rgba(13,41,66,.18)}.primary:hover{background:var(--navy2)}.local-note{text-align:center;color:var(--muted);font-size:.78rem;margin:10px 0}.mobile-total{display:none}.preview-wrap{padding:28px clamp(20px,3vw,45px) 60px;min-width:0}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:.84rem;margin-bottom:12px}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#18a66a;margin-right:6px}.quote-preview{background:#fff;box-shadow:var(--shadow);border-radius:8px;padding:clamp(26px,3vw,46px);max-width:780px;margin:auto;aspect-ratio:1/1.35}.quote-head{display:flex;justify-content:space-between;gap:20px}.quote-logo{font-size:1.7rem;font-weight:700;color:var(--cyan);letter-spacing:-.05em}.quote-logo span{color:var(--navy)}.quote-head p{color:var(--muted);font-size:.72rem;line-height:1.6}.quote-title{text-align:right}.quote-title h2{font-size:1.45rem;color:var(--navy);margin:0}.quote-title span{font-size:.72rem;color:var(--cyan-dark);font-weight:700}.quote-meta{display:grid;grid-template-columns:1.2fr .8fr;background:var(--pale);border-radius:8px;margin:18px 0;padding:13px 16px;gap:20px}.quote-meta>div{display:flex;flex-direction:column}.quote-meta small{font-size:.62rem;color:var(--muted)}.quote-meta strong{font-size:.84rem;color:var(--navy)}.quote-meta span{font-size:.68rem;color:var(--muted)}.quote-preview table{width:100%;border-collapse:collapse;font-size:.7rem}.quote-preview th{background:var(--navy);color:#fff;padding:9px 7px;text-align:right}.quote-preview th:nth-child(2){text-align:left}.quote-preview th:first-child{text-align:center}.quote-preview td{border-bottom:1px solid var(--line);padding:10px 7px;text-align:right;vertical-align:top}.quote-preview td:nth-child(2){text-align:left}.quote-preview td:first-child{text-align:center}.totals{width:min(330px,65%);margin:16px 0 0 auto}.totals>div{display:flex;justify-content:space-between;padding:5px 0;font-size:.7rem;color:var(--muted)}.totals .grand{border-top:1px solid var(--navy);border-bottom:1px solid var(--navy);color:var(--navy);font-size:.82rem;margin:4px 0}.totals em{font-style:normal;color:var(--cyan-dark)}.terms{border-top:1px solid var(--line);margin-top:15px;padding-top:10px;font-size:.66rem;color:var(--muted)}.terms strong{color:var(--navy)}.terms p{margin:4px 0}.signatures{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:22px;color:var(--muted);font-size:.64rem}.signatures>div{border-top:1px solid #aab8c2;padding-top:6px}.signatures span{float:right}.after-create{max-width:780px;margin:12px auto 0;background:var(--navy);color:#fff;padding:12px 14px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow)}.after-create[hidden]{display:none}.after-create>div{display:flex;flex-direction:column}.after-create span{font-size:.78rem;color:#c7d9e7}.after-create button{background:var(--cyan);border:0;color:#062233;padding:9px 12px;border-radius:8px;font-weight:700;cursor:pointer}dialog{border:0;border-radius:18px;padding:0;width:min(560px,calc(100% - 30px));box-shadow:0 30px 80px rgba(13,41,66,.3)}dialog::backdrop{background:rgba(8,26,40,.55)}.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:22px;border-bottom:1px solid var(--line)}.dialog-head h2{margin:0;color:var(--navy)}.dialog-head button{border:0;background:transparent;font-size:1.8rem;color:var(--muted);cursor:pointer}.history-list{padding:12px 22px 24px;max-height:55vh;overflow:auto}.history-item{display:flex;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid var(--line)}.history-item div{display:flex;flex-direction:column}.history-item span{font-size:.8rem;color:var(--muted)}.history-item b{color:var(--navy)}.empty{text-align:center;color:var(--muted);padding:30px}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--navy);color:#fff;padding:10px 15px;border-radius:10px;transition:.2s;z-index:30}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.workspace{grid-template-columns:1fr}.editor{border-right:0}.preview-wrap{border-top:1px solid var(--line)}.quote-preview{aspect-ratio:auto}.mobile-total{display:flex;justify-content:space-between;background:var(--pale);color:var(--navy);padding:12px 14px;border-radius:10px;margin-bottom:10px}.topbar{padding:0 18px}.demo-pill{display:none}}
@media(max-width:560px){.topbar{height:64px}.ghost{font-size:.78rem;padding:8px}.workspace{min-height:calc(100vh - 64px)}.editor{padding:24px 16px 45px}.section-heading{flex-direction:column;gap:8px}.form-grid,.settings-grid{grid-template-columns:1fr}.item-row{grid-template-columns:1fr 58px 92px 28px}.card{padding:16px}.preview-wrap{padding:24px 12px 45px}.quote-preview{padding:22px 16px}.quote-head p{display:none}.quote-meta{grid-template-columns:1fr;gap:8px}.quote-preview table{font-size:.62rem}.quote-preview th,.quote-preview td{padding:7px 4px}.totals{width:78%}.signatures span{float:none;display:block}.preview-toolbar{padding:0 4px}}
@media print{body{background:#fff}.topbar,.editor,.preview-toolbar,.after-create{display:none!important}.workspace{display:block}.preview-wrap{padding:0}.quote-preview{box-shadow:none;max-width:none;border-radius:0;aspect-ratio:auto;padding:20px}.quote-preview table{font-size:10px}}

.feedback-top{border:1px solid var(--navy);background:var(--navy);color:#fff;border-radius:10px;padding:9px 13px;cursor:pointer;font-weight:600}.demo-warning{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff7dc;border-bottom:1px solid #f1d77d;color:#6b5411;padding:9px 42px;font-size:.84rem;position:relative}.demo-warning strong{white-space:nowrap}.demo-warning button{position:absolute;right:18px;border:0;background:transparent;color:#7f691f;font-size:1.25rem;cursor:pointer}.feedback-dialog{width:min(600px,calc(100% - 30px))}.feedback-body{padding:20px 22px 24px}.feedback-body fieldset{border:0;padding:0;margin:0 0 18px}.feedback-body legend{font-weight:600;color:var(--navy);margin-bottom:9px}.rating{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.rating input{position:absolute;opacity:0}.rating span{min-height:54px;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--navy);font-weight:700;cursor:pointer}.rating small{font-size:.62rem;color:var(--muted);font-weight:500}.rating input:checked+span{border-color:var(--cyan);background:var(--pale);box-shadow:0 0 0 2px rgba(0,184,217,.15)}.feedback-body textarea{resize:vertical;width:100%;border:1px solid var(--line);background:var(--soft);border-radius:9px;padding:10px 11px;color:var(--ink);font:inherit}.feedback-body>.field{margin-bottom:14px}.feedback-note{font-size:.76rem;color:var(--muted);line-height:1.55}
@media(max-width:560px){.ghost{display:none}.feedback-top{font-size:.75rem;padding:7px 9px}.demo-warning{align-items:flex-start;padding:8px 38px 8px 15px;font-size:.75rem}.demo-warning strong{display:none}}
.quote-number{display:none}.quote-number-field{display:flex;flex-direction:column;gap:3px;font-size:.7rem;color:var(--muted);min-width:155px}.quote-number-field input{font-size:.82rem;border:1px solid var(--line);padding:7px 9px;border-radius:8px;color:var(--navy);background:var(--soft);width:100%;outline:none}.quote-number-field input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,184,217,.12)}.company-logo-field input{padding:7px;background:#fff}.quote-branding{height:54px;display:flex;align-items:center}.quote-branding img{display:block;max-width:170px;max-height:54px;object-fit:contain;object-position:left center}.quote-branding img[hidden]{display:none}
.logo-controls{display:flex;align-items:center;gap:8px}.logo-controls input{min-width:0}.logo-controls button{border:1px solid #efc4c4;background:#fff7f7;color:#9d3232;border-radius:9px;padding:9px 11px;white-space:nowrap;cursor:pointer}.terms-card textarea{width:100%;border:1px solid var(--line);background:var(--soft);border-radius:9px;padding:10px 11px;color:var(--ink);font:inherit;resize:vertical;outline:none}.terms-card textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,184,217,.12)}.terms p{white-space:pre-line}
.quote-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pdf-button{width:100%;border:0;background:var(--cyan);color:#062233;border-radius:12px;padding:14px;font-weight:700;cursor:pointer;box-shadow:0 9px 22px rgba(0,184,217,.18)}.pdf-button:hover{background:#18c6e3}@media(max-width:560px){.quote-actions{grid-template-columns:1fr}}