:root{--ink:#1b3440;--muted:#6d7c83;--line:#e4e9e7;--paper:#f7f8f5;--white:#fff;--green:#a6d44b;--dark:#17313c;--orange:#e9aa62;--shadow:0 18px 50px rgba(24,49,60,.07)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,"Noto Sans Thai","Th Sarabun New",Tahoma,sans-serif;font-size:14px;line-height:1.6}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.app-shell{min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr)}
.sidebar{background:#19343e;color:#fff;display:flex;flex-direction:column;padding:28px 17px 19px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:11px;padding:4px 12px 44px;color:#fff}.brand strong{display:block;font-size:19px;letter-spacing:.05em;line-height:1.2}.brand-accent{color:var(--green)}.brand small{display:block;color:#adc0c5;font-size:10px;letter-spacing:.065em;margin-top:3px}.brand-mark{width:32px;height:32px;border:6px solid var(--green);border-radius:50%;display:grid;place-items:center;transform:rotate(-18deg);box-shadow:inset 0 0 0 3px #19343e,0 0 0 1px rgba(166,212,75,.6)}.brand-mark span{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 -10px 0 -2px var(--green),0 10px 0 -2px var(--green),10px 0 0 -2px var(--green),-10px 0 0 -2px var(--green)}.sidebar-section-label{font-size:10px;color:#7f9da3;letter-spacing:.14em;text-transform:uppercase;margin:0 12px 11px}.side-nav{display:grid;gap:5px}.side-link{width:100%;display:flex;align-items:center;gap:11px;color:#b5c7ca;border:0;background:transparent;border-radius:10px;padding:11px 13px;text-align:left;font-size:12px;font-weight:600}.side-link:hover,.side-link.active{background:#2d4c54;color:#fff}.side-link.active .nav-icon{color:var(--green)}.nav-icon{font-size:19px;line-height:1;width:22px;text-align:center}.nav-chevron{font-size:22px;margin-left:auto;color:#6c8a91;font-weight:300}.sidebar-bottom{margin-top:auto}.qr-panel{background:#25434a;border:1px solid #3d5b61;border-radius:15px;text-align:center;padding:19px 10px 13px}.qr-label{font-size:11px;font-weight:700}.qr-panel img{display:block;background:#fff;padding:6px;border-radius:8px;margin:12px auto 7px}.qr-panel p{color:#b6c9cb;font-size:10px;line-height:1.7;margin:0}.sidebar-note{color:#a8bec1;font-size:10px;margin:17px 12px 0}.pulse-dot{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:5px;box-shadow:0 0 0 4px rgba(166,212,75,.1)}
.main-content{min-width:0}.topbar{height:62px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#fff;padding:0 clamp(23px,4vw,58px)}.topbar-breadcrumb{display:flex;gap:13px;font-size:11px;color:#8a999d}.topbar-breadcrumb strong{color:#2d474f}.breadcrumb-divider{color:#c6cecd}.topbar-right{display:flex;align-items:center;gap:13px}.demo-chip{font-size:9px;letter-spacing:.11em;border:1px solid #deedc6;background:#f4f9e9;color:#678b28;padding:4px 8px;border-radius:5px;font-weight:800;white-space:nowrap}.topbar-avatar{width:29px;height:29px;display:grid;place-items:center;background:#dcebbf;border-radius:50%;font-size:10px;font-weight:800;color:#46622a}.content-wrap{max-width:1450px;margin:auto;padding:27px clamp(22px,4vw,58px) 70px}.demo-alert{display:flex;gap:10px;align-items:flex-start;background:#fff8ec;border:1px solid #f1dfbd;border-radius:8px;padding:9px 13px;margin-bottom:19px;color:#8a6734;font-size:11px}.demo-alert p{margin:0}.alert-icon{font-weight:800;border:1px solid #d8aa62;border-radius:50%;width:15px;height:15px;text-align:center;line-height:13px;flex:none;margin-top:1px}.view{display:none}.view.active{display:block}
.hero{position:relative;overflow:hidden;min-height:245px;background:#193640;border-radius:15px;color:#fff;display:grid;grid-template-columns:minmax(0,1fr) 300px;padding:29px 39px}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 50%,rgba(77,127,122,.44),transparent 45%),linear-gradient(115deg,rgba(15,42,50,.7),transparent 70%)}.hero-text,.hero-art{position:relative;z-index:1}.eyebrow{color:#a6d44b;font-size:9px;letter-spacing:.2em;font-weight:800;display:flex;align-items:center;gap:8px}.eyebrow-line{display:inline-block;background:#a6d44b;width:16px;height:1px}.hero h1{font-size:clamp(26px,3.3vw,42px);line-height:1.22;letter-spacing:-.03em;margin:14px 0 9px}.hero h1 em{font-style:normal;color:var(--green)}.hero p{max-width:440px;color:#bfd0cf;font-size:11px;margin:0 0 22px}.hero-points{display:flex;flex-wrap:wrap;gap:9px 17px;color:#d4e6e2;font-size:10px}.hero-points span::first-letter{color:var(--green)}.hero-art{min-height:185px}.hero-art-circle{border-radius:50%;display:grid;place-items:center}.hero-art-circle.outer{width:250px;height:250px;border:24px solid #101e21;position:absolute;right:21px;top:-25px;box-shadow:inset 0 0 0 4px #4a5e5f,0 0 0 2px #627979,18px 18px 40px rgba(0,0,0,.35)}.hero-art-circle.mid{width:198px;height:198px;background:repeating-conic-gradient(from 12deg,#48585a 0deg 7deg,#18292e 8deg 19deg,#788a86 20deg 25deg,#1a3034 26deg 45deg);border:9px solid #aab6af;box-shadow:inset 0 0 0 5px #24363a}.hero-art-circle.inner{width:83px;height:83px;background:#758781;border:8px solid #243b3d;box-shadow:0 0 0 10px #9dac9f}.wheel-center{width:36px;height:36px;border-radius:50%;background:#1b3338;border:7px solid #c1cdc1}.art-label{position:absolute;color:#b9ceca;font-size:9px;line-height:1.1;letter-spacing:.17em;font-weight:700}.art-label.top{right:0;top:19px}.art-label.bottom{right:4px;bottom:5px}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin:28px 0 16px}.section-kicker{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:#78a33a;font-weight:800}.section-heading h2,.data-panel-heading h2{font-size:21px;line-height:1.25;margin:5px 0 0;letter-spacing:-.02em}.section-heading p{font-size:10px;color:#859398;margin:0 0 2px}.wizard-layout{display:grid;grid-template-columns:minmax(0,1fr) 245px;align-items:start;gap:19px}.wizard-main{background:#fff;border:1px solid #e6ebe8;border-radius:13px;box-shadow:var(--shadow);overflow:hidden}.stepper{margin:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);padding:0;border-bottom:1px solid var(--line)}.step{position:relative;padding:16px 13px;display:flex;gap:8px;align-items:center;color:#a4b0b1;font-size:10px;white-space:nowrap}.step:not(:last-child):after{content:"";position:absolute;width:1px;height:21px;background:#e6ebe8;right:0;top:50%;transform:translateY(-50%)}.step span{font-size:10px;font-weight:800;width:22px;height:22px;display:grid;place-items:center;border:1px solid #dce5e2;border-radius:50%}.step strong{font-weight:600}.step.active{color:#2b5054}.step.active span,.step.complete span{background:#a6d44b;border-color:#a6d44b;color:#203c36}.step.complete{color:#64842d}.form-step{padding:29px 30px 25px}.form-heading{display:flex;align-items:flex-start;gap:13px;margin-bottom:25px}.heading-icon{width:35px;height:35px;background:#ecf4df;color:#648734;font-size:11px;font-weight:900;display:grid;place-items:center;border-radius:9px;flex:none}.form-heading span{font-size:9px;color:#79a241;letter-spacing:.09em;font-weight:800}.form-heading h3{font-size:19px;line-height:1.3;margin:1px 0 1px}.form-heading p{font-size:10px;color:#87969a;margin:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px}.field{display:flex;flex-direction:column;gap:6px;min-width:0}.field.full{grid-column:1/-1}.field>span{font-size:11px;font-weight:700;color:#405861}.field b{color:#e58d64}.field input,.field select{width:100%;min-height:40px;border:1px solid #dfe8e5;border-radius:7px;color:#26414a;background:#fff;padding:9px 11px;outline:none;font-size:12px}.field input:focus,.field select:focus{border-color:#86b844;box-shadow:0 0 0 3px rgba(166,212,75,.14)}.field input::placeholder{color:#b1bbbd}.field small{color:#9ca9aa;font-size:9px}.field.error input,.field.error select{border-color:#d97966}.form-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf0ee;margin-top:27px;padding-top:20px;gap:10px}.primary-button,.secondary-button{border-radius:7px;padding:10px 16px;font-size:11px;font-weight:800;min-height:39px;display:inline-flex;align-items:center;justify-content:center;gap:13px}.primary-button{background:#a6d44b;color:#1d3b31;border:1px solid #a6d44b}.primary-button:hover:not(:disabled){background:#b9e368}.secondary-button{background:#fff;border:1px solid #dce5e2;color:#4a646a}.secondary-button:hover{background:#f5f8f3}.text-button{border:0;background:transparent;color:#638f37;font-size:10px;font-weight:700;padding:8px 0}.text-button:hover{text-decoration:underline}.primary-button span{font-size:16px;line-height:1}
.summary-column{display:grid;gap:13px}.summary-card,.help-card{background:#fff;border:1px solid #e5ebe8;border-radius:12px;box-shadow:var(--shadow)}.summary-card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 17px;border-bottom:1px solid #edf0ef;font-size:11px;font-weight:800}.summary-dots{letter-spacing:2px;color:#9db4b6}.summary-empty{text-align:center;padding:31px 13px 27px}.summary-illustration{font-size:58px;line-height:1;color:#d9e4dd;margin-bottom:7px}.summary-empty strong{display:block;font-size:11px}.summary-empty p{font-size:9px;color:#9aa9a9;margin:4px 0 0}.summary-filled{padding:16px}.summary-row{display:flex;justify-content:space-between;gap:10px;font-size:10px;padding:6px 0}.summary-row span:first-child{color:#89999c}.summary-row strong{text-align:right;font-weight:700}.summary-total{border-top:1px solid #e8eeeb;margin-top:9px;padding-top:12px;display:flex;justify-content:space-between;align-items:baseline}.summary-total strong{font-size:20px;color:#27443b}.summary-caption{display:block;text-align:right;color:#96a4a5;font-size:9px}.help-card{display:flex;gap:10px;padding:15px}.help-icon{width:23px;height:23px;border-radius:50%;border:1px solid #9bc552;color:#729738;display:grid;place-items:center;font-size:13px;font-weight:800;flex:none}.help-card strong{font-size:10px}.help-card p{font-size:9px;line-height:1.6;color:#8b9a9e;margin:3px 0 0}.filter-bar{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:15px}.tire-list,.partner-list{display:grid;gap:9px}.option-card{width:100%;display:flex;align-items:center;gap:13px;text-align:left;background:#fff;border:1px solid #e1e8e4;border-radius:9px;padding:12px;transition:.18s}.option-card:hover{border-color:#a6ca68}.option-card.selected{border-color:#8cb941;background:#f8fbed;box-shadow:0 0 0 2px rgba(166,212,75,.13)}.option-radio{width:16px;height:16px;border:1.5px solid #b5c3c1;border-radius:50%;flex:none;display:grid;place-items:center}.selected .option-radio{border-color:#7bad34}.selected .option-radio:after{content:"";width:7px;height:7px;border-radius:50%;background:#7bad34}.tire-thumb{width:42px;height:42px;border-radius:8px;background:radial-gradient(circle,#5c7372 0 17%,#162f34 19% 34%,#6b817e 37% 45%,#1b2d30 47% 68%,#e8efea 70%);flex:none}.option-body{min-width:0;flex:1}.option-body strong{display:block;font-size:11px}.option-body small{display:block;color:#8c9b9d;font-size:9px}.option-price{font-size:11px;font-weight:800;white-space:nowrap}.quantity-row{display:flex;justify-content:space-between;align-items:center;background:#f7f9f6;border-radius:9px;padding:12px 14px;margin-top:15px}.quantity-row strong{display:block;font-size:11px}.quantity-row small{color:#92a0a0;font-size:9px}.quantity-control{display:flex;align-items:center;gap:9px}.quantity-control button{width:26px;height:26px;border:1px solid #d5e1d9;background:#fff;border-radius:6px;font-size:17px;line-height:1;color:#3d5b56}.quantity-control output{min-width:15px;text-align:center;font-weight:800}.subheading{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin:4px 0 11px}.subheading strong{font-size:11px}.subheading small{font-size:9px;color:#98a5a5}.installments-title{margin-top:23px}.installment-list{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.installment-option{position:relative;background:#fff;border:1px solid #e0e8e3;border-radius:9px;padding:13px 10px;text-align:left;color:#25424a}.installment-option.selected{border-color:#8cb941;background:#f8fbed}.installment-option strong{font-size:13px;display:block}.installment-option small{font-size:9px;color:#869798}.installment-option b{display:block;font-size:11px;margin-top:5px}.review-section{border:1px solid #e8eeeb;border-radius:9px;margin-bottom:12px;overflow:hidden}.review-section h4{background:#f8faf7;margin:0;padding:9px 13px;font-size:10px}.review-section dl{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:13px;margin:0}.review-section div{min-width:0}.review-section dt{color:#8e9d9e;font-size:9px}.review-section dd{margin:0;font-size:11px;font-weight:700;overflow-wrap:anywhere}.consent-row{display:flex;gap:9px;align-items:flex-start;font-size:10px;color:#586e71;margin-top:19px}.consent-row input{accent-color:#86b73d;margin-top:2px}.success-panel{text-align:center;padding:49px 28px}.success-icon{width:54px;height:54px;display:grid;place-items:center;margin:0 auto 17px;background:#eaf5d8;color:#78a333;border-radius:50%;font-size:28px;font-weight:700}.success-panel h3{font-size:22px;margin:7px 0}.success-panel p{color:#687f82;font-size:12px}.success-actions{display:flex;justify-content:center;gap:9px;margin:25px 0 15px}.success-panel>small{display:block;color:#9aaaab;font-size:9px}
.dashboard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:17px 0 21px}.dashboard-head h1{font-size:28px;margin:5px 0 4px}.dashboard-head p{font-size:11px;color:#849498;margin:0}.role-badge{background:#eaf3dc;color:#5f8031;padding:6px 11px;border-radius:5px;font-size:10px;font-weight:800;white-space:nowrap}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:18px}.stat-card{background:#fff;border:1px solid #e6ebe8;border-radius:11px;padding:18px 20px}.stat-card>span{display:block;color:#84969a;font-size:10px}.stat-card strong{display:block;font-size:30px;line-height:1.2;margin-top:10px}.stat-card small{font-size:9px;color:#9cadad}.stat-card.accent{background:#1b3943;color:#fff}.stat-card.accent>span,.stat-card.accent small{color:#b4cacb}.stat-card.accent strong{font-size:15px;margin-top:20px;color:#b9df65}.data-panel{background:#fff;border:1px solid #e5ebe8;border-radius:12px;overflow:hidden}.data-panel-heading{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid #edf1ee}.data-panel-heading h2{font-size:17px}.empty-state{text-align:center;padding:55px 20px;color:#94a3a6;font-size:11px}.empty-state strong{display:block;color:#3e5961;font-size:13px;margin:7px}.request-item{border-bottom:1px solid #edf1ee;padding:16px 22px}.request-item:last-child{border:0}.request-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.request-top strong{font-size:12px}.request-top small{color:#8da0a2;font-size:9px;display:block}.request-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:13px 0;color:#73878c;font-size:10px}.request-meta b{display:block;color:#2c4850;font-size:10px}.status-pill{border-radius:50px;padding:4px 9px;font-size:9px;font-weight:800;background:#fff3da;color:#93651c}.status-pill.approved{background:#ebf5dc;color:#568029}.status-pill.shipped{background:#e6f3f7;color:#367284}.status-pill.completed{background:#e9f1ed;color:#3b7152}.request-actions{display:flex;justify-content:flex-end;gap:8px}.request-actions button{padding:7px 11px;font-size:10px}.process-strip{background:#1b3943;color:#e6f1ea;border-radius:12px;display:flex;align-items:center;justify-content:space-around;gap:10px;padding:22px 18px;margin-bottom:18px}.process-strip div{display:flex;align-items:center;gap:8px}.process-strip span{background:#a6d44b;color:#1b3943;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:900}.process-strip strong{font-size:10px}.process-strip>b{color:#749394;font-weight:400}.toast{position:fixed;right:20px;bottom:20px;background:#1b3943;color:#fff;padding:10px 15px;border-radius:8px;box-shadow:0 12px 30px rgba(18,42,50,.25);font-size:11px;max-width:320px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;z-index:50}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1100px){.app-shell{grid-template-columns:200px minmax(0,1fr)}.sidebar{padding-left:10px;padding-right:10px}.wizard-layout{grid-template-columns:minmax(0,1fr)}.summary-column{grid-template-columns:1fr 1fr}.hero{grid-template-columns:1fr 220px}.hero-art-circle.outer{right:-14px}}@media(max-width:760px){.app-shell{display:block}.sidebar{position:relative;height:auto;padding:12px 16px;display:block}.brand{padding:3px 0 11px}.sidebar-section-label,.sidebar-bottom{display:none}.side-nav{display:flex;overflow-x:auto}.side-link{width:auto;white-space:nowrap;padding:8px 10px;font-size:10px}.nav-icon{font-size:15px;width:16px}.nav-chevron{display:none}.topbar{height:50px;padding:0 18px}.content-wrap{padding:16px 15px 50px}.demo-alert{font-size:10px}.hero{min-height:225px;padding:22px 22px;display:block}.hero h1{font-size:27px}.hero p{max-width:75%}.hero-art{position:absolute;inset:0;z-index:0;opacity:.4;pointer-events:none}.hero-art-circle.outer{right:-95px;top:15px}.hero-points{gap:5px 10px;font-size:9px;max-width:85%}.section-heading h2{font-size:18px}.stepper{overflow-x:auto}.step{min-width:99px;display:block;text-align:center;padding:10px 4px;font-size:9px}.step span{margin:0 auto 3px}.form-step{padding:22px 17px}.form-grid{gap:12px}.form-heading h3{font-size:17px}.summary-column{grid-template-columns:1fr}.summary-card{order:0}.help-card{order:1}.stats-grid{grid-template-columns:repeat(2,1fr)}.stat-card.accent{grid-column:1/-1}.request-meta{grid-template-columns:1fr 1fr}.process-strip{flex-wrap:wrap;padding:17px 11px}.process-strip strong{font-size:9px}}@media(max-width:470px){.form-grid,.filter-bar{grid-template-columns:1fr}.field.full{grid-column:auto}.installment-list{gap:5px}.installment-option{padding:10px 7px}.installment-option strong{font-size:11px}.option-price{font-size:10px}.tire-thumb{width:33px;height:33px}.review-section dl{grid-template-columns:1fr 1fr}.dashboard-head h1{font-size:22px}.role-badge{font-size:9px}.request-meta{grid-template-columns:1fr 1fr}.process-strip>b{display:none}}
@media print{.sidebar,.topbar,.demo-alert,.hero,.section-heading,.stepper,.summary-column,.form-foot,.success-actions,.dashboard-head,.stats-grid,.data-panel,.process-strip,.toast{display:none!important}.app-shell,.wizard-layout{display:block}.content-wrap{padding:0}.wizard-main{border:0;box-shadow:none}#request-form{display:none}#success-panel{display:none!important}#print-area{display:block!important;padding:24px;color:#000}#print-area h1{font-size:22px}#print-area table{width:100%;border-collapse:collapse}#print-area th,#print-area td{border:1px solid #bbb;text-align:left;padding:8px;font-size:12px}}
.setup-status{border:1px solid #e5eae5;background:#fff;border-radius:10px;padding:15px 18px;margin-bottom:18px;font-size:11px;color:#60747a}.setup-status strong{display:block;color:#28434a;font-size:12px}.setup-status p{margin:4px 0 0}.setup-status.ready{border-color:#cde7a7;background:#f8fceb}.admin-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;align-items:start;gap:16px}.admin-tire-row{padding:13px 19px;border-bottom:1px solid #edf1ee;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center}.admin-tire-row:last-child{border:0}.admin-tire-row strong{font-size:11px;display:block}.admin-tire-row small{font-size:9px;color:#8da0a0}.admin-price{display:flex;align-items:center;gap:7px}.admin-price input{width:95px;min-height:32px;border:1px solid #dfe7e2;border-radius:6px;padding:5px 7px;font-size:11px}.admin-price button,.admin-availability button{border:1px solid #dce5dd;background:#fff;color:#375b59;border-radius:6px;padding:6px 8px;font-size:9px;font-weight:800}.admin-availability{grid-column:1/-1;display:flex;justify-content:flex-end;gap:6px}.admin-availability .active-tag{font-size:9px;color:#5b8a32;background:#eff7e5;border-radius:5px;padding:5px 7px}.admin-availability .inactive-tag{font-size:9px;color:#a6724d;background:#fff0e2;border-radius:5px;padding:5px 7px}.admin-form{padding:18px;display:grid;gap:14px}.admin-form .primary-button{margin-top:5px}.admin-form-panel{position:sticky;top:15px}@media(max-width:900px){.admin-grid{grid-template-columns:1fr}.admin-form-panel{position:static}}
.my-requests{margin-top:22px}

button:disabled,input:disabled,select:disabled{opacity:.55;cursor:not-allowed}.topbar-right{flex-wrap:wrap}.topbar-right a{white-space:nowrap}@media(max-width:760px){.topbar{height:auto;min-height:56px;gap:8px;padding-top:8px;padding-bottom:8px;align-items:flex-start}.topbar-right{justify-content:flex-end;gap:10px}.topbar-breadcrumb{max-width:100px}.topbar-avatar{display:none}}