/* Schneider product studio. Load after studio.css and studio-theme.css.
   This sheet changes interface chrome only, never swatches or WebGL materials. */
:root {
  --blue:#11130f; --blue-2:#30342b; --green:#146846; --navy:#11130f;
  --ink:#11130f; --muted:#66695f; --paper:#f4f3ec; --white:#f4f3ec;
  --line:#d2d3c8; --soft:#e9e9df; --shadow:none;
  --font:'Inter','Noto Sans Thai',Arial,sans-serif;
}
body { color:#11130f; background:#f4f3ec; }
::selection { background:#146846; color:#fff; }
button,input { font-family:var(--font); }
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:2px solid #146846; outline-offset:3px;
}
.topbar { height:64px; padding:0 22px; background:#f4f3ec; color:#11130f; border-color:#c5c7bb; }
.brand { padding-right:24px; border-color:#c5c7bb; }
.brand-mark { width:34px; height:27px; font-size:8px; }
.brand-name { font-size:16px; font-weight:800; letter-spacing:-.055em; }
.studio-title { padding-left:24px; }
.studio-title b { font-weight:750; font-size:15px; letter-spacing:-.035em; }
.studio-title span { color:#66695f; font-size:9px; letter-spacing:.09em; }
.text-btn { font-size:12px; font-weight:600; }
.icon-btn,.text-btn,.lang-btn,.primary,.secondary,.primary.small { border-radius:0; box-shadow:none; }
.icon-btn:hover,.text-btn:hover { background:#e3e5d9; }
.lang-btn { background:transparent; color:#66695f; border-color:#c5c7bb; font-size:11px; }
.lang-btn b:first-child { color:#11130f; }
.primary { background:#11130f; border-color:#11130f; color:#f4f3ec; font-weight:700; }
.primary:hover { background:#34392f; border-color:#34392f; transform:none; }
.secondary { color:#11130f; background:transparent; border-color:#a6aa9b; font-weight:650; }
.secondary:hover { background:#e4e6da; border-color:#11130f; }
#quoteTop,#quoteBtn { background:#146846; border-color:#146846; color:#fff; }
#quoteTop:hover,#quoteBtn:hover { background:#0d5035; border-color:#0d5035; }
.app-shell { top:64px; height:calc(100dvh - 64px); grid-template-columns:minmax(0,1fr) 440px; }
.viewport { background:#11130f; }
.loading { background:#11130f; color:#f4f3ec; }
.loading b { font-size:20px; font-weight:700; letter-spacing:-.04em; }
.loading small { color:#bdc1b3; }
.load-mark i { background:#d7e0c9; }

/* Technical scene labels stay high contrast over every material option. */
.model-pill,.stage-tool,.view-tabs,.dimension-hud,.orbit-hint,.door-control,.fullscreen-btn {
  background:#f4f3ec; color:#11130f; border-color:#c5c7bb; border-radius:0;
  box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}
.model-pill { padding:10px 12px; }
.model-pill b { font-weight:750; letter-spacing:-.015em; }
.model-pill>span:last-child { color:#66695f; border-color:#c5c7bb; }
.status-dot { background:#146846; box-shadow:none; }
.stage-tool { font-size:11px; font-weight:650; }
.stage-tool:hover,.door-control:hover,.fullscreen-btn:hover { background:#dfe4d4; }
.view-tabs { padding:3px; gap:2px; }
.view-tabs button { color:#62675b; border-radius:0; font-size:11px; padding:8px 10px; }
.view-tabs button.active { color:#f4f3ec; background:#11130f; font-weight:650; box-shadow:none; }
.dimension-hud>span { padding:9px 12px; border-color:#d2d3c8; }
.dimension-hud small,.dimension-hud i { color:#66695f; }
.dimension-hud b { font-size:14px; font-weight:750; letter-spacing:-.035em; }
.orbit-hint { font-size:10px; color:#555b4d; }
.door-control { min-height:40px; font-weight:700; }
.door-icon { border-color:#66695f; }
.door-icon i { background:#11130f; }
.config-panel { background:#f4f3ec; border-color:#c5c7bb; }
.steps { height:64px; padding:0 14px; border-color:#c5c7bb; }
.steps button { color:#767b6d; font-size:10px; font-weight:500; }
.steps button:after { left:6px; right:6px; height:3px; }
.steps button.active { color:#11130f; font-weight:750; }
.steps button.active:after { background:#146846; }
.steps i { border:0; border-radius:0; font-size:11px; font-weight:700; }
.steps button.active i { color:#146846; background:transparent; border:0; }
.steps button.complete i { color:#146846; background:transparent; border:0; }
.panel-scroll { scrollbar-color:#a4ac96 transparent; }
.panel-scroll::-webkit-scrollbar-thumb { background:#a4ac96; border-color:#f4f3ec; }
.step-page { padding:27px 28px 32px; }
.step-head { margin-bottom:25px; }
.eyebrow { color:#146846; font-size:9px; font-weight:750; letter-spacing:.11em; }
.step-head h1 { max-width:11ch; margin-top:12px; font-size:39px; line-height:1.03; font-weight:800; letter-spacing:-.055em; }
body[data-lang="th"] .step-head h1 { max-width:none; font-size:35px; line-height:1.22; letter-spacing:-.045em; }
.step-head p { color:#66695f; font-size:14px; line-height:1.65; margin-top:14px; max-width:47ch; }
.field-group { margin-top:25px; }
.field-title { color:#42483b; font-size:14px; font-weight:750; letter-spacing:.025em; }
.field-title small { color:#66695f; font-size:12px; }
.field-title.split { gap:12px; }
.family-grid,.diagram-options,.choice-grid,.finish-grid,.collection-list { gap:7px; }
.family-card,.model-list,.diagram-card,.choice-card,.collection-card,.finish-card,.range-group,.project-field,.drawing-card {
  background:#f4f3ec; border-color:#c5c7bb; border-radius:0; box-shadow:none;
}
.family-card { padding:12px 10px; min-height:81px; }
.family-card:hover,.diagram-card:hover,.choice-card:hover,.finish-card:hover { border-color:#146846; transform:none; }
.family-card.active,.diagram-card.active,.choice-card.active,.collection-card.active,.finish-card.active {
  border-color:#146846; box-shadow:inset 0 0 0 1px #146846;
}
.family-card i { color:#146846; font-size:9px; font-weight:750; }
.family-card b { font-size:14px; font-weight:750; letter-spacing:-.025em; }
.family-card small { color:#66695f; font-size:12px; line-height:1.45; }
.model-option { background:transparent; padding:13px 12px; border-color:#c5c7bb; }
.model-option:hover { background:#e9ecdf; }
.model-option.active { background:#e2e8d8; }
.model-option b { font-size:14px; font-weight:750; }
.model-option small,.model-option>span:last-child { color:#62675b; font-size:12px; }
.model-option>span:last-child b { font-size:14px; }
.model-option>span,.family-card,.choice-card { min-width:0; }
.model-option b,.family-card b,.choice-card b { overflow-wrap:anywhere; }
.model-option .radio { border-color:#8c957e; }
.model-option.active .radio { border-color:#146846; }
.model-option.active .radio:after { background:#146846; }
.model-facts,.review-card { background:#11130f; color:#f4f3ec; padding:18px; }
.model-facts small,.review-title small,.review-specs small { color:#b9c0ac; }
.model-facts b { font-size:12px; }
.source-chip { color:#c5cbbb!important; }
.source-chip:before { background:#b8d8a6; }
.source-chip.preliminary:before { background:#d8bf89; }
.diagram-card b,.choice-card b,.collection-card b,.finish-card b { font-size:14px; font-weight:750; }
.diagram-card small,.choice-card small,.collection-card small,.finish-card small { color:#66695f; font-size:12px; line-height:1.45; }
.collection-card { padding-right:36px; }
.mini-plan { background:#e5e8dd; }
.mini-plan:before { background:#f4f3ec; border-color:#8c957e; }
.mini-plan i { background:#146846; }
.seg-options { background:#e8eade; border-color:#c5c7bb; padding:3px; }
.seg-options button { color:#565e4b; padding:10px 7px; font-size:14px; }
.seg-options button.active { background:#11130f; color:#f4f3ec; font-weight:700; }
.choice-card .choice-icon { background:#e5e8dd; color:#66695f; font-weight:750; }
.choice-card.active .choice-icon { background:#146846; color:#fff; }
.range-label output { background:#11130f; color:#f4f3ec; font-weight:750; }
.range-group input { accent-color:#146846; }
.range-scale { color:#66695f; }
.drawing-note { background:#e7ebde; border-color:#c5c7bb; }
.drawing-note svg { color:#146846; }
.drawing-note p { color:#565e4b; }
.collection-card.active:after { background:#146846; color:#fff; }
.finish-card { padding:8px; }
.finish-swatch { height:45px; }
.finish-card b { font-size:14px; margin-top:8px; }
.finish-card small { font-size:12px; }
.range-label label,.toggle-row b { font-size:14px; }
.toggle-row small { font-size:12px; line-height:1.45; }
.switch { background:#a7b09b; }
.switch.on { background:#146846; }
.switch i { background:#f4f3ec; }
.project-field input { color:#11130f; }
.review-id { color:#bdc6b1; border-color:#4f5746; }
.review-title h2 { font-weight:750; }
.review-specs,.review-specs>div { border-color:#343b2b; }
.drawing-preview,.drawing-modal>img { background:#f4f3ec; }
.drawing-preview:after { background:linear-gradient(transparent,#11130f16); }
.drawing-info { padding:17px; }
.drawing-info p { font-size:14px; line-height:1.6; }
.text-link { color:#146846; font-weight:700; }
.planning-warning { background:#e7e6d9; border-color:#8a8565; }
.planning-warning p { color:#575847; font-size:12px; line-height:1.5; }
.planning-warning b { font-size:12px; }
.panel-footer { height:70px; background:#f4f3ec; border-color:#c5c7bb; padding:11px 20px; }
.step-status { color:#62675b; }
.mobile-grab { background:#8a927d; }
.drawing-modal,.modal-bar { background:#f4f3ec; border-color:#c5c7bb; }
.drawing-modal::backdrop { background:#11130fe3; }
.modal-bar button { border-color:#8a927d; color:#11130f; }
.toast { background:#11130f; color:#f4f3ec; border-color:#4f5746; }
.plan-sheet { filter:drop-shadow(0 16px 26px #11130f22); }
.plan-sheet svg { background:#f4f3ec; }
.plan-sheet [fill="#071722"] { fill:#11130f; }
.plan-sheet [fill="#1373c8"],.plan-sheet [fill="#087ce5"] { fill:#146846; }
.plan-sheet [stroke="#1373c8"],.plan-sheet [stroke="#087ce5"] { stroke:#146846; }
.plan-sheet [fill="#62d4ad"] { fill:#b8d8a6; }
.plan-sheet [fill="#8fa6b5"] { fill:#bdc6b1; }
.plan-sheet [fill="#eef3f6"],.plan-sheet [fill="#f8fafb"] { fill:#f4f3ec; }

@media(max-width:1280px) and (min-width:781px) {
  .app-shell { grid-template-columns:minmax(0,1fr) 390px; }
  .step-page { padding:25px 24px 30px; }
  .step-head h1 { font-size:36px; }
  .studio-title span { display:none; }
  .view-tabs { top:auto; bottom:65px; }
  .model-pill>span:last-child { display:none; }
}
@media(max-width:780px) {
  body { background:#f4f3ec; }
  .topbar { height:56px; padding:0 12px; }
  .brand { gap:8px; padding-right:8px; }
  .brand-mark { width:29px; height:24px; }
  .brand-name { font-size:14px; }
  .topbar .text-btn:hover { background:#e3e5d9; }
  .topbar .lang-btn { background:transparent; padding:0 8px; }
  .app-shell { top:auto; height:auto; padding-top:56px; }
  .viewport { top:56px; height:55vh; min-height:410px; }
  .config-panel { border-top:1px solid #c5c7bb; margin-top:-12px; border-radius:0; background:#f4f3ec; }
  .steps { height:63px; padding:0 8px; }
  .steps button { font-size:9px; }
  .step-page { padding:27px 22px 34px; }
  .step-head h1 { font-size:39px; max-width:12ch; }
  body[data-lang="th"] .step-head h1 { font-size:35px; line-height:1.22; }
  .step-head p { font-size:14px; line-height:1.65; }
  .family-card { min-height:83px; }
  .family-card small { font-size:12px; }
  .model-option small,.choice-card small,.collection-card small,.toggle-row small { font-size:12px; line-height:1.5; }
  .view-tabs { bottom:86px; }
  .view-tabs button { min-width:55px; padding:9px 10px; }
  .model-pill { padding:9px 10px; }
  .dimension-hud { top:57px; }
  .stage-bottom { bottom:36px; }
  .panel-footer { padding:10px 14px; }
}
@media(max-width:360px) {
  .brand-name { font-size:13px; }
  .brand-mark { width:26px; height:21px; }
  .step-page { padding:25px 18px 30px; }
  .step-head h1 { font-size:35px; }
  body[data-lang="th"] .step-head h1 { font-size:32px; }
  .view-tabs button { min-width:50px; padding:9px 8px; font-size:10px; }
  .panel-footer { padding-inline:10px; grid-template-columns:76px 1fr 96px; }
}
@media(prefers-reduced-motion:reduce) {
  .step-page { animation:none; }
  .primary,.secondary,.family-card,.choice-card,.finish-card { transition:none; }
}

/* Realistic model viewer: preserve a useful canvas, even on narrow phones. */
.model-series-heading{padding:15px 13px 10px;background:#e5e8dd;color:#3c4934;font-size:13px;font-weight:750;line-height:1.5;letter-spacing:.025em;border-bottom:1px solid #c5c7bb}
.model-series-heading:not(:first-child){margin-top:12px;border-top:1px solid #c5c7bb}
.model-option>span:last-child{max-width:145px;overflow-wrap:anywhere;line-height:1.5}
.model-option>span:last-child b{font-size:13px;line-height:1.45}
.source-chip{font-size:12px!important;line-height:1.7;align-items:flex-start}
.source-chip::before{margin-top:7px;flex:none}
.review-source{grid-column:1/-1!important}
.review-source p{font-size:13px;line-height:1.75;color:#c5cbbb;margin-top:10px}
#pdfLink[hidden]{display:none!important}
#lightBtn svg{display:none}
.dimension-hud{opacity:1!important}
.view-tabs button{min-height:38px}
@media(max-width:780px){
  .viewport{height:65svh;min-height:510px;max-height:650px}
  .model-pill{padding:8px 10px}
  .model-pill b{font-size:12px}
  .stage-top{left:12px;right:12px;top:12px}
  .stage-tool{min-height:36px;padding:8px 11px}
  .dimension-hud{left:12px;top:57px;gap:0}
  .dimension-hud>span{padding:6px 9px}
  .dimension-hud b{font-size:13px}
  .dimension-hud small{font-size:9px}
  .dimension-hud i{font-size:9px}
  .stage-bottom{left:12px;right:12px;bottom:24px}
  .view-tabs{bottom:78px}
  .view-tabs button{font-size:12px;padding:9px 13px}
  .door-control{font-size:13px;padding:10px 14px;min-height:42px}
  .model-series-heading{font-size:14px}
}
@media(max-width:360px){.viewport{min-height:490px}.view-tabs button{font-size:11px;padding:9px 11px}.model-option>span:last-child{max-width:109px}}