@font-face{font-family:CalculatorThai;src:url('/assets/logo-studio-thai.ttf') format('truetype');font-display:swap}
@media screen{
html body{--calm-bg:#f6f8f7;--calm-surface:#fff;--calm-soft:#eef7f0;--calm-ink:#183629;--calm-muted:#50685b;--calm-line:#d8e4dc;--calm-border:#c5d8cb;--calm-accent:#185c39;--ink:var(--calm-ink);--muted:var(--calm-muted);--line:var(--calm-line);--panel:var(--calm-surface);--bg:var(--calm-bg);--blue:#287a4e;--shadow:none;font:16px/1.65 CalculatorThai,system-ui,sans-serif!important;background:var(--calm-bg)!important;color:var(--calm-ink)}
html body.dark{--calm-bg:#11231b;--calm-surface:#192f25;--calm-soft:#244334;--calm-ink:#edf5ef;--calm-muted:#b6cbbd;--calm-line:#395746;--calm-border:#4f725e;--calm-accent:#a6d8b6}
html body :is(button,input,select,textarea){font-family:inherit;min-height:44px;max-width:100%}html body :is(input,select,textarea){color:var(--calm-ink)!important;background:var(--calm-surface)!important;border-color:var(--calm-border)!important;border-radius:10px!important}html body :is(input,select,textarea):focus{box-shadow:none!important}html body :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid #4b9766!important;outline-offset:3px}html body input[type=checkbox]{min-height:0;accent-color:#287a4e}html body :is(h1,h2,h3){letter-spacing:0;line-height:1.5;overflow-wrap:anywhere}html body label{color:var(--calm-ink)!important;gap:8px}html body :is(.muted,.section-title p,.block-heading p,.unit-input span,.metric span,.rate-row span){color:var(--calm-muted)!important}html body :is(.primary,button.primary){background:#287a4e!important;color:#fff!important;box-shadow:none!important;border-radius:10px!important;transform:none}html body .primary:hover{background:#185c39!important;transform:none;filter:none}html body :disabled{opacity:.55;cursor:not-allowed}html body :is(.outline,.icon-button){color:var(--calm-accent)!important;border:1px solid var(--calm-border)!important;background:var(--calm-surface)!important;box-shadow:none}
html body .login-screen{background:var(--calm-bg)!important;padding:32px 20px}html body .login-card{background:var(--calm-surface)!important;border:1px solid var(--calm-line);border-radius:20px!important;box-shadow:none!important;width:min(480px,100%);padding:32px}html body .login-logo{width:72px;height:56px;object-fit:contain;margin-bottom:20px}html body .login-card .eyebrow{display:none}html body .login-card h1{font-size:27px;margin-bottom:12px}html body .login-card>.muted{margin-bottom:24px}html body .login-card label+label{margin-top:20px}
html body .site-header{height:auto;min-height:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding:20px max(24px,calc((100vw - 1280px)/2));background:var(--calm-surface)!important;border-bottom:1px solid var(--calm-line);box-shadow:none!important;backdrop-filter:none;color:var(--calm-ink)}html body .site-header .brand{color:var(--calm-ink)!important;min-width:0}html body .site-header .brand small{color:var(--calm-muted)!important}html body .brand img{background:transparent;box-shadow:none}html body .header-center{display:none}html body .header-actions{gap:10px;flex-wrap:wrap;min-width:0}html body .header-actions>span{display:block;max-width:260px;color:var(--calm-muted)!important;overflow-wrap:anywhere}html body .header-actions :is(a,button){line-height:1.5;white-space:normal;min-height:44px}html body .hero{background:var(--calm-soft)!important;color:var(--calm-ink)!important;box-shadow:none!important;min-height:0;padding:28px max(24px,calc((100vw - 1280px)/2));gap:28px}html body .hero h1{font-size:30px;margin:0}html body .hero h1 br{display:none}html body .hero .eyebrow{display:none}html body .hero>p{color:var(--calm-muted)!important;margin:0;line-height:1.8}
html body .page-grid{width:min(1280px,calc(100% - 48px));gap:28px;margin:28px auto 44px;grid-template-columns:minmax(0,1.4fr) minmax(360px,1fr)}html body :is(.panel,.result-column){background:var(--calm-surface)!important;border-color:var(--calm-line)!important;box-shadow:none!important;border-radius:18px!important}html body .result-column{background:transparent!important;gap:24px;position:static}html body :is(.setup-panel,.layout-panel,.summary-panel){padding:28px}html body .section-title{gap:14px;margin-bottom:24px}html body .section-title>span{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:var(--calm-soft);color:var(--calm-accent)!important;margin:0;font-size:13px}html body .section-title h2{font-size:22px}html body .section-title p{line-height:1.7}html body .product-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:28px}html body :is(.product-tabs,.preset-grid,.choice-grid) button{background:var(--calm-surface)!important;color:var(--calm-ink)!important;border-color:var(--calm-border)!important;box-shadow:none;transform:none;border-radius:12px;overflow-wrap:anywhere}html body :is(.product-tabs,.preset-grid,.choice-grid) button.active{background:var(--calm-soft)!important;border-color:#4b9766!important;color:var(--calm-accent)!important;box-shadow:inset 3px 0 #4b9766!important}html body :is(.product-tabs,.preset-grid,.choice-grid) button:hover{transform:none;border-color:#4b9766!important}html body :is(.product-tabs,.preset-grid,.choice-grid) :is(small,span){color:var(--calm-muted)!important}html body :is(.product-tabs,.preset-grid,.choice-grid) button.active small{color:var(--calm-muted)!important}html body .choice-grid strong{color:var(--calm-accent)!important}html body .product-tabs button{min-height:92px;padding:16px;gap:6px}html body .preset-grid{gap:12px}html body .preset-grid button{flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;padding:14px}html body .choice-grid{gap:12px}html body .choice-grid button{padding:16px}html body .block-heading{margin:28px 0 14px}html body .block-heading h3{font-size:18px}html body .block-heading p{line-height:1.7}html body .input-grid{gap:18px;margin-top:20px}html body .unit-input{display:flex;align-items:center;border:1px solid var(--calm-border);background:var(--calm-surface);border-radius:10px;min-width:0}html body .unit-input input{min-width:0;flex:1;width:100%;border:0!important;padding:12px}html body .unit-input span{position:static;transform:none;flex-shrink:0;padding-right:12px;font-size:13px!important;max-width:50%;text-align:right}html body .metric{border-color:var(--calm-border);background:var(--calm-soft);gap:8px;padding:16px}html body .option-card{border-color:var(--calm-line);background:var(--calm-bg);padding:20px;border-radius:14px}html body .check-row{background:var(--calm-surface);border-color:var(--calm-border);padding:14px;gap:12px;min-width:0}html body .check-row small{color:var(--calm-muted)!important}html body .rate-row{background:var(--calm-soft)!important;color:var(--calm-ink);border-color:var(--calm-line);padding:12px 14px;gap:14px}html body .divider{border-color:var(--calm-line);margin-block:28px}html body .sheet-visual{background-color:var(--calm-bg);color:var(--calm-accent)!important;border-color:var(--calm-border);font-weight:500}html body .sheet-grid{background:var(--calm-surface)}html body .sheet-grid i{background:var(--calm-soft);border-color:#7fad8b}html body .layout-stats{gap:12px}html body .layout-stats>div{background:var(--calm-soft);border-color:var(--calm-line);min-width:0}html body .layout-stats b{color:var(--calm-accent)}html body .layout-stats :is(small,span){color:var(--calm-muted)}html body .summary-line{padding:14px 0;gap:18px}html body .summary-line span{color:var(--calm-muted)}html body .summary-line b{overflow-wrap:anywhere;min-width:0}html body .grand-total{background:#287a4e!important;color:#fff;padding:22px;border-radius:14px;gap:12px}html body .grand-total strong{font-size:32px;overflow-wrap:anywhere;min-width:0;line-height:1.3}html body .summary-actions{gap:12px;margin-top:24px}html body .summary-footnote{display:block;color:var(--calm-muted);line-height:1.8;margin-top:16px}html body .withholding-result{background:var(--calm-soft);color:var(--calm-accent);border-color:var(--calm-border)}html body footer{color:var(--calm-muted)!important}
html body #logo-studio-universal-hub-back{position:static!important;z-index:auto!important;transform:none!important;background:var(--calm-surface)!important;color:var(--calm-accent)!important;border:1px solid var(--calm-border);border-radius:10px;box-shadow:none!important;min-height:44px;padding:10px 12px;font:600 14px/1.5 CalculatorThai,system-ui}html body #logo-studio-universal-hub-back *{color:var(--calm-accent)!important}html body .login-card #logo-studio-universal-hub-back{display:flex;justify-content:center;margin-top:18px}
@media(max-width:1000px){html body .page-grid{grid-template-columns:minmax(0,1fr)}html body .header-actions>span{max-width:100%}html body .site-header{gap:16px}html body .hero{grid-template-columns:minmax(0,1fr);gap:12px}}
@media(max-width:760px){html body .site-header{padding:20px 16px;align-items:flex-start}html body .brand span{display:grid}html body .header-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:10px}html body .header-actions>span{grid-column:1/-1;text-align:left;max-width:none}html body .header-actions :is(button,a){width:100%;justify-content:center;text-align:center}html body .hero{padding:24px 16px}html body .hero h1{font-size:26px}html body .page-grid{width:calc(100% - 32px);margin-top:24px;gap:24px}html body :is(.setup-panel,.layout-panel,.summary-panel){padding:20px 16px}html body .section-title{gap:12px;flex-wrap:wrap}html body .section-title h2{font-size:21px}html body .product-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}html body .product-tabs button{padding:12px;min-height:92px}html body .product-tabs small{font-size:13px!important}html body .preset-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}html body .choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}html body .choice-grid button{padding:12px}html body .choice-grid strong{font-size:14px}html body .input-grid{gap:16px}html body .input-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}html body .input-grid.three .metric{grid-column:1/-1}html body .input-grid.two{grid-template-columns:minmax(0,1fr)}html body .option-card{padding:16px}html body .rate-row{flex-wrap:wrap;gap:8px}html body .layout-stats{grid-template-columns:minmax(0,1fr)}html body .summary-line{flex-wrap:wrap;gap:6px}html body .summary-line b{margin-left:auto}html body .grand-total{grid-template-columns:minmax(0,1fr) auto;padding:20px 16px}html body .grand-total>span{grid-column:1/-1}html body .grand-total strong{font-size:30px}html body .summary-actions{grid-template-columns:minmax(0,1fr)}html body .login-card{padding:24px}html body .login-card h1{font-size:25px}}
@media(max-width:760px){html body #product-tabs,html body #size-presets,html body #product-options .choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
html body.dark{--ink:var(--calm-ink);--muted:var(--calm-muted);--line:var(--calm-line);--panel:var(--calm-surface);--bg:var(--calm-bg);background:var(--calm-bg)!important;color:var(--calm-ink)}html body.dark :is(input,select,textarea,.outline,.icon-button){background:var(--calm-surface)!important;color:var(--calm-ink)!important;border-color:var(--calm-border)!important}html body.dark .site-header{background:var(--calm-surface)!important}html body.dark .site-header .brand{color:var(--calm-ink)!important}html body.dark .site-header .brand img{background:#fff;border-radius:10px}html body.dark :is(.site-header .brand small,.site-header .header-actions>span,label,.section-title p,.block-heading p,.unit-input span,.metric span,.rate-row span){color:var(--calm-muted)!important}html body.dark .section-title>span{color:var(--calm-accent)!important}html body.dark :is(.choice-grid strong,.sheet-visual){color:var(--calm-accent)!important}html body.dark :is(.rate-row,.inline-note){background:var(--calm-soft)!important;color:var(--calm-ink)}html body.dark .sheet-visual{background-color:var(--calm-bg)}html body.dark .sheet-grid{background:var(--calm-surface)}html body.dark :is(.product-tabs,.preset-grid,.choice-grid) button.active{color:var(--calm-accent)!important}html body.dark :is(.product-tabs,.preset-grid,.choice-grid) button.active small{color:var(--calm-muted)!important}
html body .login-card button.primary{background:#287a4e!important;color:#fff!important;box-shadow:none!important}html body .login-card button.primary:hover{background:#185c39!important}
@media(prefers-reduced-motion:reduce){html body *{scroll-behavior:auto!important;transition:none!important}}
}