:root{--navy:#101c31;--navy2:#182640;--accent:#ff8739;--accent2:#ffeadc;--ink:#14243b;--muted:#8190a3;--bg:#f4f7fb;--border:#e5eaf1;--white:#fff;--green:#16855b;--red:#d64c4c;--radius:17px}*{box-sizing:border-box}html{font-size:15px}body{margin:0;background:var(--bg);font-family:Kanit,"Noto Sans Thai",sans-serif;font-weight:400;color:var(--ink);line-height:1.55}button,input,select,textarea{font:inherit}a{text-decoration:none;color:inherit}h1,h2,h3,h4,p{margin:0}h1{font-size:1.75rem;font-weight:600;line-height:1.35}h2{font-size:1.14rem;font-weight:600}h3{font-size:1rem;font-weight:500}small{font-size:.83rem}b,strong{font-weight:600}.muted{color:var(--muted)}.tiny{font-size:.78rem}.eyebrow{font-size:.72rem;letter-spacing:2px;color:#fa7b26;font-weight:600}.app-shell{display:flex;min-height:100vh}.sidebar{position:fixed;top:0;bottom:0;left:0;width:258px;background:var(--navy);color:#abb8cb;z-index:20;display:flex;flex-direction:column;padding:28px 17px}.brand{display:flex;align-items:center;gap:12px;color:#fff;padding:0 8px 30px}.brand b{display:block;font-size:1.03rem;letter-spacing:1px}.brand small{display:block;color:#8d9bb1;font-size:.74rem}.brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;flex-shrink:0;background:linear-gradient(135deg,#ffad57,#ff722f);font-size:1.14rem;font-weight:700;box-shadow:0 7px 24px #ff873936;color:#fff}.nav-label{font-size:.72rem;letter-spacing:1.4px;font-weight:600;color:#657993;margin:22px 15px 12px}.side-nav{display:flex;flex-direction:column;gap:5px}.side-nav a{display:flex;align-items:center;gap:13px;min-height:47px;padding:11px 14px;border-radius:12px;font-size:.96rem;transition:.15s}.side-nav a span{font-family:system-ui;font-size:1.3rem;width:22px;text-align:center;color:#8395ae}.side-nav a:hover{background:#23344e;color:#fff}.side-nav a.selected{background:linear-gradient(90deg,#ff8534,#f77035);color:white;box-shadow:0 4px 16px #ff87393b}.side-nav a.selected span{color:#fff}.sidebar-foot{margin-top:auto;border-top:1px solid #293953;padding:21px 12px 0;display:flex;flex-direction:column;gap:10px;font-size:.85rem}.sidebar-foot a{color:#bac5d7}.userdot{color:#3fd1a0}.userdot span{color:white;padding-left:7px}.main-area{margin-left:258px;width:calc(100% - 258px);min-height:100vh;display:flex;flex-direction:column}.topbar{height:75px;background:white;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 36px}.topbar-name{font-weight:500;font-size:1rem}.topbar-right{font-size:.74rem;letter-spacing:1.2px;color:#9da9b8}.topbar-right b{color:var(--accent)}.page-container{padding:34px 36px 60px;max-width:1610px;width:100%;margin:0 auto;flex:1}.app-footer{padding:15px 25px;text-align:center;color:#9aa7b6;font-size:.75rem}.heading-row{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:27px}.heading-row p{margin-top:6px}.btn{appearance:none;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;padding:11px 18px;font-weight:500;font-size:.94rem;cursor:pointer;white-space:nowrap;transition:.15s}.btn:hover{filter:brightness(.96);transform:translateY(-1px)}.btn.primary{color:white;background:linear-gradient(120deg,#ff933e,#fa7231);box-shadow:0 6px 18px #ff873929}.btn.subtle{color:#374b63;background:#f3f6fa;border-color:#e2e8f1}.btn.block{width:100%}.btn-big{padding:14px}.card{background:white;border:1px solid #e8edf4;border-radius:var(--radius);box-shadow:0 6px 24px #1b2d5210;padding:25px;min-width:0}.card h2{margin-bottom:5px}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:19px;margin-bottom:22px}.stat-card{background:#fff;border:1px solid #e9edf4;padding:22px;border-radius:var(--radius);box-shadow:0 6px 24px #1b2d520b}.stat-card .muted{font-size:.83rem;margin-top:11px}.stat-card strong{display:block;font-size:1.72rem;line-height:1.5;margin-top:5px}.stat-card small{color:#a6b0be}.stat-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;font-size:1.3rem;font-family:system-ui}.stat-icon.orange{background:#fff0e4;color:#ec7c23}.stat-icon.blue{background:#e7f0ff;color:#3875d8}.stat-icon.green{background:#e5f8ed;color:#198d58}.stat-icon.purple{background:#f0ebff;color:#8664d2}.two-column{display:grid;grid-template-columns:1.4fr 1fr;align-items:start;gap:22px}.section-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}.section-top p{font-size:.84rem}.text-link,.link-button{color:#ed7c2f;font-size:.87rem;font-weight:500;white-space:nowrap}.text-link:hover,.link-button:hover{text-decoration:underline}.link-button{border:none;background:none;padding:0;cursor:pointer}.table-wrap{overflow-x:auto}.table-wrap table{border-collapse:collapse;width:100%;font-size:.86rem}th{text-align:left;color:#8390a2;font-weight:500;font-size:.78rem;white-space:nowrap;background:#f7f9fc}td,th{padding:13px 12px;border-bottom:1px solid #edf0f5}td{vertical-align:middle}td:last-child,th:last-child{padding-right:3px}tbody tr:last-child td{border-bottom:none}.nowrap{white-space:nowrap}.amount{font-weight:600;color:var(--ink)}.subline{display:block;color:#91a0b2;font-weight:400;font-size:.76rem;margin-top:2px}.small-tag{background:#f3f6fa;color:#5e7087;border-radius:7px;padding:3px 9px;font-weight:500;font-size:.74rem;white-space:nowrap}.steps{display:flex;flex-direction:column}.steps>a{display:flex;gap:15px;align-items:center;padding:17px 0;border-bottom:1px solid var(--border)}.steps>a:last-child{border:0}.steps>a>span:last-child{margin-left:auto;color:var(--accent)}.steps>a>span:nth-child(2){flex:1}.steps small{display:block;color:#95a1b0;margin-top:2px}.step-n{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;border:1px solid #ffe1ca;border-radius:10px;background:#fff6f0;color:var(--accent);font-weight:600}.hint{color:#97a2af;font-size:.78rem;line-height:1.55;margin-top:16px}.empty-state{text-align:center;padding:50px 16px;color:#8797a8}.empty-state a{color:#f08030}.form-layout{grid-template-columns:0.9fr 1.5fr}.stack-form{margin-top:18px}form label{font-size:.87rem;font-weight:500;display:block;color:#40516a;margin-bottom:15px}form label em{font-style:normal;color:#e65b49}input,select,textarea{width:100%;min-height:43px;border:1px solid #dfe6f0;border-radius:10px;padding:9px 12px;background:white;color:#172741;outline:none;margin-top:6px;transition:border-color .16s,box-shadow .16s}input:focus,select:focus,textarea:focus{border-color:#ffa264;box-shadow:0 0 0 3px #ff893722}input::placeholder{color:#b9c4d1}label small{display:block;color:#97a4b5;font-size:.73rem;font-weight:400;margin-top:5px}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.field-grid>.full{grid-column:1/-1}.mini-result{padding:14px;background:#f4f8fd;border:1px dashed #cfdbea;border-radius:10px;color:#506782;display:flex;justify-content:space-between;align-items:center}.mini-result strong{font-size:1.3rem;color:#ed7933}.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.stack-form .actions{margin-top:20px}.small-actions{display:flex;gap:11px;align-items:center}.inline-form{display:inline;margin:0}.status{display:inline-block;font-size:.75rem;border-radius:100px;padding:3px 10px;white-space:nowrap}.status.on{color:#108052;background:#e7f8ef}.status.off{color:#8b93a0;background:#f0f2f6}.settings-width{max-width:920px}.settings-width .card{margin-bottom:20px}.settings-width h2{margin-bottom:22px}.settings-width .info-box{margin-bottom:22px}.info-box{background:#f1f6fd;color:#58718e;border-radius:10px;padding:13px 17px;font-size:.85rem}.quote-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,0.92fr);align-items:start;gap:22px}.quote-form-col{display:flex;flex-direction:column;gap:20px}.quote-form-col .card{padding:25px}.card-heading{display:flex;align-items:center;gap:11px;margin-bottom:20px}.card-heading h2{margin:0}.circle-index{border-radius:50%;width:30px;height:30px;background:#fff0e5;color:#f18431;font-weight:600;display:grid;place-items:center}.source-cost-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:5px}.source-cost-grid>div{padding:12px;background:#f7f9fc;border:1px solid #f0f3f7;border-radius:10px;min-width:0}.source-cost-grid small{display:block;color:#8a98a9;font-size:.76rem}.source-cost-grid strong{display:block;font-size:1.04rem;white-space:nowrap}.source-cost-grid .highlight{background:#fff3e7;border-color:#ffe4cd}.source-cost-grid .highlight strong{color:#e87424}.result-col{position:sticky;top:20px}.result-card{padding:23px}.result-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:18px}.result-top h2{margin-top:4px}.price-hero{background:linear-gradient(125deg,#162841,#203b5d);color:white;border-radius:13px;padding:22px 22px;margin-bottom:23px}.price-hero>small{display:block;color:#aebdd0}.price-hero>div{display:flex;gap:9px;align-items:baseline}.price-hero strong{font-size:2.28rem;color:#ffad59;white-space:nowrap;line-height:1.55}.price-hero span{font-size:.95rem}.breakdown h3{font-size:.86rem;color:#a0aabd;font-weight:500;margin:20px 0 11px}.breakdown>div{display:flex;align-items:flex-start;justify-content:space-between;gap:9px;margin-bottom:10px;font-size:.85rem}.breakdown>div span{color:#63738a}.breakdown>div b{text-align:right;white-space:nowrap}.breakdown .sumline{border-top:1px dashed #d7e0e9;padding-top:13px;margin-top:12px}.breakdown .profit-line b{color:#118354}.result-card>.btn{margin-top:20px}.center-text{text-align:center;margin-top:9px}.danger-text{color:#d64c4c!important}.search-form{display:flex;align-items:center;gap:10px;margin-bottom:18px}.search-form input{margin:0;max-width:450px}.alert{border-radius:10px;padding:12px 16px;margin-bottom:20px;font-size:.88rem}.alert.success{background:#e6f7ee;border:1px solid #c0e9cf;color:#157c4a}.alert.error{background:#fff0ee;border:1px solid #ffd2cc;color:#c13d31}.alert a{text-decoration:underline}.sheet{background:white;max-width:1040px;margin:0 auto 24px;padding:42px 49px;border:1px solid #e3e9f0;border-radius:15px;box-shadow:0 8px 30px #1b2d520d}.sheet-head{display:flex;justify-content:space-between;gap:20px;border-bottom:3px solid #172943;padding-bottom:25px}.sheet-brand{font-size:1.3rem;font-weight:700;color:#f48131}.sheet-brand span{color:#19304d;font-size:1rem}.sheet-head h2{font-size:1.32rem;margin:2px 0}.sheet-head p{color:#75859a;font-size:.86rem}.sheet-title{text-align:right;font-size:.88rem}.sheet-title b{display:block;font-size:1.24rem}.sheet-title small{display:block;color:#f08330;letter-spacing:1px;margin-bottom:8px}.sheet-title div{color:#65738a}.sheet-title strong{color:#263956}.sheet-details{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:24px 0}.sheet-details small{display:block;color:#8392a3}.sheet-details strong{display:block;margin-top:4px}.sheet-details p{color:#66798f;font-size:.85rem;margin-top:3px}.sheet-section-title{margin-bottom:10px}.sheet-table th{background:#192c45;color:white;border:0}.sheet-table td{padding:18px 11px}.right{text-align:right}.sheet-bottom{display:grid;grid-template-columns:1fr 330px;gap:24px;margin-top:24px}.sheet-notes h4{font-size:.95rem}.sheet-notes p{margin-top:7px;white-space:normal;word-break:break-word}.sheet-notes small{display:block;color:#99a3b0;margin-top:20px}.sheet-totals>div{display:flex;justify-content:space-between;gap:16px;font-size:.88rem;padding:7px 0}.sheet-totals .grand{background:#fff1e5;color:#c95d16;border-radius:10px;padding:14px;margin-top:10px;font-size:1.03rem}.sheet-thanks{text-align:center;margin-top:44px;border-top:1px solid #edf0f5;padding-top:18px;color:#8090a0;font-size:.86rem}.internal-cost{max-width:1040px;margin:auto}.cost-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.cost-grid>div{background:#f7f9fc;padding:14px;border-radius:10px}.cost-grid small{display:block;color:#8494a7}.cost-grid strong{font-size:1.07rem}.profit-footer{display:flex;justify-content:space-between;margin-top:17px;padding:16px;background:#eaf9f0;border-radius:10px;color:#117c4b}.menu-btn{display:none}.sidebar-scrim{display:none}.auth-body{min-height:100vh;background:radial-gradient(ellipse at 10% 10%,#314767 0%,#16263f 48%,#0d182b 100%);display:flex;justify-content:center;align-items:center;padding:24px}.auth-card{width:100%;max-width:440px;background:#fff;border-radius:22px;padding:36px;box-shadow:0 20px 70px #07132377}.auth-card .brand{padding:0 0 24px}.auth-card .brand b{color:#182840}.auth-card .brand small{color:#8496aa}.auth-card h1{font-size:1.6rem}.auth-card p.muted{margin:5px 0 22px}.auth-card form label{margin-bottom:17px}.auth-card .btn{margin-top:13px}.auth-note{text-align:center;margin:25px 0 0;color:#a1b0c1;font-size:.77rem}.install-card{max-width:650px}.install-card h3{margin:20px 0 12px}.install-card .field-grid{gap:0 12px}
@media(max-width:1250px){.stats-grid{grid-template-columns:repeat(2,1fr)}.two-column{grid-template-columns:1fr}.form-layout{grid-template-columns:1fr}.quote-layout{grid-template-columns:minmax(0,1.3fr) minmax(285px,1fr)}.page-container{padding:25px}.topbar{padding:0 25px}}@media(max-width:950px){.sidebar{transform:translateX(-100%);transition:transform .18s}.sidebar.open{transform:translateX(0)}.sidebar-scrim.visible{display:block;position:fixed;inset:0;background:#07162985;z-index:15}.main-area{margin-left:0;width:100%}.menu-btn{display:block;background:none;border:0;font-size:1.5rem;color:#2b3f57;cursor:pointer;margin-right:15px}.topbar{justify-content:flex-start}.topbar-right{margin-left:auto}.quote-layout{grid-template-columns:1fr}.result-col{position:static}.result-card{max-width:none}.price-hero strong{font-size:2.3rem}}@media(max-width:600px){html{font-size:14px}.topbar{height:61px;padding:0 16px}.topbar-right{display:none}.page-container{padding:20px 12px 40px}.heading-row{align-items:flex-start;flex-direction:column;gap:14px}.heading-row .btn{width:100%}h1{font-size:1.52rem}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat-card{padding:15px}.stat-card strong{font-size:1.35rem}.card,.quote-form-col .card{padding:18px;border-radius:13px}.two-column{gap:13px}.field-grid{grid-template-columns:1fr}.source-cost-grid{grid-template-columns:1fr 1fr}.source-cost-grid>div:last-child{grid-column:1/-1}.source-cost-grid strong{font-size:1rem}.quote-form-col{gap:13px}.sheet{padding:22px 14px;border-radius:10px}.sheet-head{flex-direction:column}.sheet-title{text-align:left}.sheet-details{grid-template-columns:1fr}.sheet-bottom{grid-template-columns:1fr}.cost-grid{grid-template-columns:1fr 1fr;gap:9px}.cost-grid>div{padding:10px}.search-form{flex-wrap:wrap}.search-form input{max-width:none;flex:1 1 100%}.auth-card{padding:22px}.price-hero strong{font-size:2.1rem}}@page{size:A4;margin:13mm}@media print{body{background:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.sidebar,.sidebar-scrim,.topbar,.app-footer,.screen-only,.internal-cost{display:none!important}.main-area{margin:0;width:100%;display:block;min-height:0}.page-container{padding:0!important;max-width:none;margin:0}.app-shell{min-height:0;display:block}.sheet{border:0;box-shadow:none;border-radius:0;max-width:none;margin:0;padding:0}.sheet-head{page-break-inside:avoid}.sheet-table th{background:#192c45!important;color:#fff!important}.sheet-totals .grand{background:#fff1e5!important}.sheet-thanks{margin-top:30px}}

/* V2: filament comparison */
.compare-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.82fr);gap:20px;align-items:start}
.compare-form{display:flex;flex-direction:column;gap:18px;min-width:0}.compare-form .card{min-width:0}.compare-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.compare-option{border-top:4px solid #f9a76d}.compare-option:nth-child(2){border-top-color:#507eac}
.compare-option .field-grid{grid-template-columns:1fr 1fr}.compare-option .field-grid label:first-child{grid-column:1/-1}
.filament-mini{background:#f3f7fb;border:1px solid #e6edf6;border-radius:10px;padding:10px 12px;margin-bottom:17px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.78rem;color:#687a90}
.filament-mini b{color:#283a51}.compare-output{position:sticky;top:20px;min-width:0}
.compare-hero{background:linear-gradient(125deg,#142a46,#243c58);color:white;border-radius:13px;padding:18px 19px;display:flex;flex-direction:column;margin:15px 0}
.compare-hero small{color:#b1c0d0}.compare-hero strong{font-size:1.9rem;color:#ffae5d;line-height:1.45}.compare-hero span{font-size:.9rem}
.compare-totals>div{display:flex;justify-content:space-between;gap:12px;margin:10px 0}.compare-totals>div strong{text-align:right;white-space:nowrap}
.compare-bars{display:flex;flex-direction:column;gap:11px;margin:18px 0 24px}.bar-line{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:10px;color:#526780;font-size:.8rem}
.bar-line div{background:#eaf0f5;border-radius:16px;overflow:hidden;height:10px}.bar-line i{height:10px;display:block;background:#f29b54;border-radius:16px;transition:width .2s}
.bar-line:nth-child(2) i{background:#679ac6}.compare-verdict{background:#e9f8f1;border-radius:10px;padding:16px;color:#17744d;margin-top:16px}
.compare-saved .table-wrap{max-width:100%}.compare-saved td{overflow-wrap:anywhere}
@media(max-width:1320px){.compare-layout{grid-template-columns:1fr}.compare-output{position:static}}
@media(max-width:690px){.compare-pair{grid-template-columns:1fr}.compare-option .field-grid{grid-template-columns:1fr 1fr}.compare-hero strong{font-size:1.7rem}}
@media print{.compare-saved{margin:0!important;border:0!important;box-shadow:none!important}.compare-saved .section-top{page-break-inside:avoid}.compare-verdict{background:#e9f8f1!important}}