/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.relative{position:relative}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.grid{display:grid}.table{display:table}.resize{resize:both}}:root{--ink:#102d2d;--ink2:#294846;--green:#14715b;--green2:#0c5946;--lime:#d9ef5e;--paper:#f2f5f1;--line:#d7e2dc;--muted:#70817d;--white:#fff;--orange:#e89a48;--shadow:0 18px 50px #14372f17}*{box-sizing:border-box}html{background:var(--paper);color:var(--ink)}body{background:var(--paper);margin:0;font-family:Tahoma,Noto Sans Thai,Arial,sans-serif}button,input,select{font:inherit}button{color:inherit;cursor:pointer}.topbar{background:var(--ink);color:#fff;justify-content:space-between;align-items:center;height:72px;padding:0 3vw;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-cube{border:1px solid #ffffff4d;grid-template-columns:repeat(3,7px);place-content:center;gap:3px;width:38px;height:38px;display:grid;position:relative;transform:rotate(-8deg)}.brand-cube i{background:var(--lime);height:22px}.brand strong{letter-spacing:.18em;font-size:14px;display:block}.brand small{color:#aec0bc;text-transform:uppercase;letter-spacing:.08em;margin-top:2px;font-size:9px;display:block}.mode-badge{color:var(--lime);letter-spacing:.08em;border:1px solid #d9ef5e59;padding:7px 11px;font-size:9px}.top-actions{gap:7px;display:flex}.top-actions button{color:#fff;background:0 0;border:1px solid #ffffff40;border-radius:4px;padding:9px 13px;font-size:9px}.top-actions button.primary{background:var(--lime);border-color:var(--lime);color:var(--ink);font-weight:700}.app-shell{grid-template-columns:225px 1fr;align-items:start;max-width:1800px;margin:auto;display:grid}.building-sidebar{border-right:1px solid var(--line);background:#e9efea;min-height:100vh;padding:24px 15px 50px;position:sticky;top:0}.side-title{color:var(--muted);letter-spacing:.1em;justify-content:space-between;align-items:center;padding:0 7px 13px;font-size:9px;font-weight:700;display:flex}.side-title button{background:var(--ink);color:#fff;border:0;border-radius:50%;width:27px;height:27px}.building-list{gap:6px;display:grid}.building-list>button{text-align:left;background:0 0;border:1px solid #0000;border-radius:6px;grid-template-columns:29px 1fr;gap:9px;padding:11px 8px;display:grid}.building-list>button.active{background:#fff;border-color:#c9d8d1;box-shadow:0 8px 20px #16362f12}.building-list em{width:27px;height:27px;color:var(--green);background:#dce9e2;border-radius:50%;place-items:center;font-size:9px;font-style:normal;font-weight:700;display:grid}.building-list>button.active em{background:var(--green);color:#fff}.building-list b{font-size:11px;display:block}.building-list small{color:var(--muted);margin-top:4px;font-size:8px;display:block}.add-building{width:100%;color:var(--green);background:0 0;border:1px dashed #9db2aa;border-radius:5px;margin:12px 0 25px;padding:10px;font-size:9px;font-weight:700}.project-total{border-top:1px solid var(--line);padding:20px 7px 0}.project-total>span{color:var(--muted);font-size:8px}.project-total>strong{margin:5px 0 12px;font-size:19px;display:block}.project-total dl{gap:6px;margin:0;display:grid}.project-total dl div{justify-content:space-between;font-size:8px;display:flex}.project-total dt{color:var(--muted)}.project-total dd{margin:0;font-weight:700}.workspace{min-width:0;padding:34px clamp(20px,3vw,46px) 80px}.workspace-head{justify-content:space-between;align-items:flex-end;gap:20px;display:flex}.workspace-head>div>span,.section-head span{color:var(--green);letter-spacing:.14em;font-size:8px;font-weight:700}.workspace-head input{width:min(700px,65vw);color:var(--ink);letter-spacing:-.035em;background:0 0;border:0;border-bottom:1px solid #0000;outline:0;padding:3px 0;font-size:clamp(25px,3vw,38px);font-weight:700;display:block}.workspace-head input:focus{border-bottom-color:var(--green)}.workspace-head p{color:var(--muted);margin:5px 0 0;font-size:9px}.workspace-actions{gap:6px;display:flex}.workspace-actions button{border:1px solid var(--line);background:#fff;border-radius:4px;padding:8px 10px;font-size:8px}.workspace-actions button:disabled{opacity:.4}.source-bar{border:1px solid var(--line);background:#fff;grid-template-columns:repeat(3,1fr);margin:20px 0 13px;display:grid}.source{border-right:1px solid var(--line);grid-template-columns:25px 1fr;gap:8px;padding:11px 13px;display:grid;position:relative}.source:last-child{border-right:0}.source>span{width:24px;height:24px;color:var(--green);background:#e4eee8;border-radius:50%;grid-row:span 2;place-items:center;font-size:8px;font-weight:700;display:grid}.source b{font-size:10px}.source small{color:var(--muted);font-size:7px}.source.active{border-bottom:3px solid var(--green)}.source.active>span{background:var(--green);color:#fff}.source.locked{opacity:.55}.source.locked:after{content:"LOCKED";color:#8c9d98;letter-spacing:.08em;font-size:6px;position:absolute;top:7px;right:8px}.designer-grid{grid-template-columns:minmax(0,1fr) 335px;align-items:start;gap:13px;display:grid}.viewport-card,.inspector{border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}.viewport-toolbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:45px;padding:0 11px;display:flex}.viewport-toolbar>div{gap:4px;display:flex}.viewport-toolbar button{border:1px solid var(--line);background:#fff;padding:7px 10px;font-size:8px}.viewport-toolbar button.active{background:var(--green);border-color:var(--green);color:#fff}.viewport-toolbar>span{color:var(--muted);font-size:7px}.three-host{background:#dfe8e3;height:580px;position:relative;overflow:hidden}.three-host canvas{outline:0;width:100%;height:100%;display:block}.compass{z-index:2;width:42px;height:42px;color:var(--ink);background:#fffc;border:1px solid #102d2d38;border-radius:50%;place-items:center;font-size:8px;display:grid;position:absolute;top:16px;right:17px}.compass i{background:var(--green);width:2px;height:14px;position:absolute;top:3px}.scene-legend{background:#ffffffd1;gap:5px;padding:6px 8px;font-size:7px;display:flex;position:absolute;bottom:12px;left:13px}.scene-legend span{align-items:center;gap:4px;display:flex}.scene-legend i{width:9px;height:9px;display:block}.face-a{background:#6d8e84}.face-b{background:#94a59f}.panel-dot{background:#123b46}.viewport-footer{color:var(--muted);border-top:1px solid var(--line);justify-content:space-between;gap:12px;padding:9px 11px;font-size:7px;display:flex}.inspector{max-height:calc(100vh - 20px);padding:17px;position:sticky;top:10px;overflow:auto}.inspector-section{border-bottom:1px solid var(--line);margin-bottom:17px;padding-bottom:17px}.inspector-section:last-child{border-bottom:0;margin-bottom:0}.inspector-title{align-items:center;gap:8px;margin-bottom:12px;display:flex}.inspector-title>span{width:24px;height:24px;color:var(--green);background:#e3eee8;border-radius:50%;place-items:center;font-size:8px;font-weight:700;display:grid}.inspector-title b{font-size:11px}.field-grid{grid-template-columns:1fr 1fr;gap:7px;display:grid}.number-field{margin-bottom:9px;display:block}.number-field>span,.select-field>span,.toggle-field>span{color:var(--muted);margin-bottom:4px;font-size:7px;display:block}.number-field>div{border:1px solid var(--line);background:#fbfcfa;grid-template-columns:1fr auto;align-items:center;display:grid}.number-field input{background:0 0;border:0;outline:0;width:100%;min-width:0;padding:7px;font-size:9px;font-weight:700}.number-field em{color:var(--muted);padding:0 7px;font-size:7px;font-style:normal}.select-field{margin-bottom:10px;display:block}.select-field select{border:1px solid var(--line);background:#fff;width:100%;padding:7px;font-size:8px}.slider{margin:10px 0;display:block}.slider>span{color:var(--muted);justify-content:space-between;font-size:7px;display:flex}.slider b{color:var(--ink)}.slider input{width:100%;accent-color:var(--green)}.face-tabs{grid-template-columns:1fr 1fr;margin-bottom:9px;display:grid}.face-tabs button{border:1px solid var(--line);background:#fff;padding:8px;font-size:8px}.face-tabs button.active{background:var(--ink);border-color:var(--ink);color:#fff}.face-tabs button:disabled{opacity:.35}.capacity{border-left:3px solid var(--green);background:#edf4ef;margin-bottom:8px;padding:9px 10px}.capacity span,.capacity small{color:var(--muted);font-size:7px;display:block}.capacity strong{margin:3px 0;font-size:11px;display:block}.auto-fill{border:1px solid var(--green);width:100%;color:var(--green);background:#fff;margin-bottom:10px;padding:8px;font-size:8px;font-weight:700}.toggle-field{margin-bottom:10px;display:block}.toggle-field>div{grid-template-columns:1fr 1fr;display:grid}.toggle-field button{border:1px solid var(--line);background:#fff;padding:7px;font-size:8px}.toggle-field button.active{background:var(--green);border-color:var(--green);color:#fff}.overflow-warning{color:#8a531e;background:#fff3e5;border:1px solid #e9bc89;padding:8px 9px;font-size:7px;line-height:1.5}.plane-summary{border:1px solid var(--line);grid-template-columns:1fr 1fr;display:grid}.plane-summary div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:7px}.plane-summary div:nth-child(2n){border-right:0}.plane-summary div:nth-last-child(-n+2){border-bottom:0}.plane-summary span{color:var(--muted);font-size:6px;display:block}.plane-summary b{margin-top:2px;font-size:9px;display:block}.quantity-section,.standards{border-top:1px solid #cad7d1;margin-top:28px;padding-top:25px}.section-head{justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:13px;display:flex}.section-head h2{letter-spacing:-.025em;margin:4px 0 0;font-size:20px}.section-head p{color:var(--muted);margin:0;font-size:8px}.metrics{border:1px solid var(--line);background:#fff;grid-template-columns:repeat(6,1fr);margin-bottom:10px;display:grid}.metrics>div{border-right:1px solid var(--line);padding:11px}.metrics>div:last-child{border-right:0}.metrics span{color:var(--muted);font-size:7px;display:block}.metrics strong{margin-top:3px;font-size:12px;display:block}.table-wrap{border:1px solid var(--line);box-shadow:var(--shadow);background:#fff;overflow:auto}table{border-collapse:collapse;width:100%;font-size:8px}th{background:var(--ink);color:#fff;text-align:left;padding:9px;font-size:7px}td{border-bottom:1px solid var(--line);padding:9px}tbody tr{cursor:pointer}tbody tr:hover{background:#edf5f0}.right{text-align:right}.total td{background:var(--green);color:#fff;font-weight:700}.standard-grid{grid-template-columns:repeat(5,1fr);gap:7px;display:grid}.standard-grid .number-field{border:1px solid var(--line);background:#fff;margin:0;padding:10px}@media (width<=1150px){.app-shell{grid-template-columns:190px 1fr}.designer-grid{grid-template-columns:1fr}.inspector{max-height:none;position:static}.three-host{height:500px}.metrics,.standard-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=760px){.topbar{padding:0 14px}.mode-badge,.top-actions button:first-child{display:none}.app-shell{display:block}.building-sidebar{border-right:0;border-bottom:1px solid var(--line);min-height:0;padding:13px;position:static}.building-list{display:flex;overflow:auto}.building-list>button{min-width:205px}.project-total{display:none}.workspace{padding:24px 12px 55px}.workspace-head{flex-direction:column;align-items:flex-start}.workspace-head input{width:100%}.source-bar{grid-template-columns:1fr}.source{border-right:0;border-bottom:1px solid var(--line)}.three-host{height:400px}.viewport-toolbar>span{display:none}.viewport-footer{flex-wrap:wrap}.metrics,.standard-grid{grid-template-columns:1fr 1fr}.section-head{flex-direction:column;align-items:flex-start}}@media print{.topbar,.building-sidebar,.workspace-actions,.source-bar,.viewport-toolbar,.inspector,.standards{display:none!important}.app-shell{display:block}.workspace{padding:0}.designer-grid{display:block}.viewport-card,.table-wrap{box-shadow:none}.three-host{height:600px}.quantity-section{break-before:page}}.face-c{background:#65877d}.face-d{background:#9aaba5}.sub-gable-fields{background:#f2f7f4;border:1px solid #bfd0c8;margin:8px 0 12px;padding:10px}.sub-gable-note{justify-content:space-between;align-items:center;margin-bottom:9px;display:flex}.sub-gable-note b{color:var(--green);font-size:8px}.sub-gable-note span{color:var(--muted);font-size:7px}
.zone-bar{justify-content:space-between;align-items:center;margin:10px 0 6px;display:flex}
.zone-bar>span{color:var(--muted);letter-spacing:.08em;font-size:7px;font-weight:700}
.zone-add{border:1px solid var(--green);color:var(--green);background:#fff;border-radius:4px;padding:5px 9px;font-size:8px;font-weight:700}
.zone-list{gap:4px;margin-bottom:10px;display:grid}
.zone-chip{text-align:left;background:#fff;border:1px solid var(--line);border-radius:5px;grid-template-columns:22px 1fr;align-items:center;gap:8px;padding:7px 8px;display:grid}
.zone-chip em{width:20px;height:20px;color:var(--green);background:#e3eee8;border-radius:50%;place-items:center;font-size:8px;font-style:normal;font-weight:700;display:grid}
.zone-chip b{font-size:9px;display:block}
.zone-chip small{color:var(--muted);margin-top:2px;font-size:7px;display:block}
.zone-chip.active{border-color:var(--green);background:#edf4ef}
.zone-chip.active em{background:var(--green);color:#fff}
.zone-chip.warn{border-color:#e9bc89;background:#fff8f0}
.walk-hint{color:var(--muted);margin:-4px 0 9px;font-size:7px;line-height:1.6}
.zone-chip.walk em{color:#5d6b66;background:#e2e7e4}
.zone-chip.walk.active{border-color:#5d6b66;background:#eef1ef}
.zone-chip.walk.active em{background:#5d6b66;color:#fff}
.walkway-dot{background:#bfc6c2;border:1px solid #6b7370}
.rail-dot{background:#adbcd2}
.foot-dot{background:#7c7f7c}
.opt-dot{background:#3a45c4}
.zone-empty{color:var(--muted);border:1px dashed #9db2aa;border-radius:5px;margin:0 0 10px;padding:10px;font-size:7px;line-height:1.6}
.zone-head{align-items:center;gap:5px;margin-bottom:9px;display:flex}
.zone-head input{border:1px solid var(--line);background:#fbfcfa;flex:1;min-width:0;outline:0;padding:6px 7px;font-size:9px;font-weight:700}
.zone-head button{border:1px solid var(--line);background:#fff;border-radius:4px;padding:6px 7px;font-size:7px;white-space:nowrap}
.zone-head button.danger{color:#a1442a;border-color:#e0b3a6}
.device-note{color:var(--muted);background:#f2f7f4;border-left:3px solid var(--green);margin:0 0 10px;padding:7px 9px;font-size:7px;line-height:1.6}
.device-pick{align-items:end;gap:5px;margin-bottom:8px;display:flex}
.device-pick .select-field{flex:1;min-width:0;margin:0}
.device-add{border:1px dashed #9db2aa;color:var(--green);background:#fff;border-radius:4px;padding:7px 8px;font-size:7px;white-space:nowrap}
.device-card{border:1px solid var(--line);background:#fbfcfa;margin:0 0 10px;padding:9px}
.device-card-head{align-items:baseline;justify-content:space-between;gap:6px;margin-bottom:7px;display:flex}
.device-card-head b{font-size:9px}
.device-card-head small{color:var(--muted);font-size:6px;text-align:right;word-break:break-all}
.device-card .number-field>div{background:#fff}
.device-variants{flex-wrap:wrap;gap:4px;margin-top:6px;display:flex}
.device-variants span{border:1px solid var(--line);background:#fff;border-radius:3px;padding:3px 6px;font-size:7px}
.check-list{gap:4px;display:grid}
.check{border-left:3px solid var(--green);background:#edf4ef;padding:6px 8px}
.check.bad{border-left-color:#c8703f;background:#fff3e5}
.check b{font-size:8px;display:block}
.check span{color:var(--muted);margin-top:2px;font-size:7px;display:block}
.view-tabs{gap:4px;display:flex}
.view-tabs button{color:#cfdcd7;background:0 0;border:1px solid #ffffff30;border-radius:4px;padding:8px 13px;font-size:9px}
.view-tabs button.active{background:var(--lime);border-color:var(--lime);color:var(--ink);font-weight:700}
.db-page{max-width:1500px;margin:auto;padding:30px clamp(16px,3vw,46px) 80px}
.db-import{border:1px solid var(--line);background:#fff;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px;margin-bottom:14px;padding:14px;display:grid}
.db-import b{font-size:11px;display:block}
.db-import p{color:var(--muted);margin:5px 0;font-size:8px;line-height:1.6}
.db-import code{background:var(--ink);color:var(--lime);word-break:break-all;border-radius:4px;padding:8px 10px;font-size:8px;display:block}
.db-import-actions{flex-wrap:wrap;justify-content:flex-end;gap:5px;max-width:300px;display:flex}
.db-import-actions button,.db-file{border:1px solid var(--line);background:#fff;border-radius:4px;padding:8px 10px;font-size:8px;cursor:pointer}
.db-file{border-color:var(--green);color:var(--green);font-weight:700}
.db-file input{display:none}
.db-msg{color:var(--green);width:100%;text-align:right;font-size:8px}
.db-filter{justify-content:space-between;gap:10px;margin-bottom:12px;display:flex}
.db-filter>div{gap:4px;display:flex}
.db-filter button{border:1px solid var(--line);background:#fff;padding:7px 11px;font-size:8px}
.db-filter button.active{background:var(--ink);border-color:var(--ink);color:#fff}
.db-filter input{border:1px solid var(--line);background:#fff;width:min(320px,45vw);padding:7px 10px;font-size:8px}
.db-brand{margin-bottom:20px}
.db-brand h3{color:var(--green);letter-spacing:.1em;border-bottom:1px solid var(--line);align-items:baseline;gap:8px;margin:0 0 8px;padding-bottom:6px;font-size:10px;display:flex}
.db-brand h3 small{color:var(--muted);letter-spacing:0;font-size:7px;font-weight:400}
.db-card{border:1px solid var(--line);box-shadow:var(--shadow);background:#fff;margin-bottom:8px;padding:12px}
.db-card.in-use{border-color:var(--green);border-left-width:3px}
.db-card header{justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:9px;display:flex}
.db-card header b{font-size:11px;display:block}
.db-card header small{color:var(--muted);word-break:break-all;margin-top:3px;font-size:7px;display:block}
.db-badges{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px;display:flex}
.db-badge{border-radius:3px;padding:3px 7px;font-size:7px}
.db-badge.use{background:var(--green);color:#fff}
.db-badge.warn{color:#8a531e;background:#fff3e5;border:1px solid #e9bc89}
.db-badge.note{color:var(--muted);background:#f2f7f4;border:1px solid var(--line);max-width:420px;text-align:right;line-height:1.5}
.db-del{color:#a1442a;background:#fff;border:1px solid #e0b3a6;border-radius:3px;padding:3px 8px;font-size:7px}
.db-fields{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;display:grid}
.db-fields label>span{color:var(--muted);margin-bottom:3px;font-size:7px;display:block}
.db-fields label>div{border:1px solid var(--line);background:#fbfcfa;grid-template-columns:1fr auto;align-items:center;display:grid}
.db-fields input{background:0 0;border:0;outline:0;width:100%;min-width:0;padding:6px;font-size:9px;font-weight:700}
.db-fields em{color:var(--muted);padding:0 6px;font-size:7px;font-style:normal}
.db-bins{border-top:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:5px;margin-top:9px;padding-top:9px;display:flex}
.db-bins>span:first-child{color:var(--muted);font-size:7px}
.db-bins button{border:1px solid var(--line);background:#fff;border-radius:3px;padding:4px 8px;font-size:7px}
.db-bins button.active{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}
.db-variant{border:1px solid var(--line);background:#f6f9f7;border-radius:3px;padding:4px 8px;font-size:7px}
.db-sync{color:#8a531e;background:#fff3e5;border:1px solid #e9bc89;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding:8px 9px;font-size:7px;display:flex}
.db-sync button{border:1px solid #c8703f;color:#8a531e;background:#fff;border-radius:3px;padding:5px 9px;font-size:7px;font-weight:700;white-space:nowrap}
.el-block{border:1px solid var(--line);box-shadow:var(--shadow);background:#fff;margin-bottom:12px;padding:15px}
.el-block h3{color:var(--green);letter-spacing:.06em;border-bottom:1px solid var(--line);margin:0 0 11px;padding-bottom:7px;font-size:11px}
.el-metrics{border:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-bottom:10px;display:grid}
.el-metrics>div{border-right:1px solid var(--line);padding:9px 10px}
.el-metrics>div:last-child{border-right:0}
.el-metrics span{color:var(--muted);font-size:7px;display:block}
.el-metrics strong{margin-top:3px;font-size:11px;display:block}
.el-fields{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end;gap:8px;margin-bottom:10px;display:grid}
.el-fields .number-field,.el-fields .select-field{margin:0}
.el-toggle{margin-bottom:10px;display:block}
.el-toggle>div{grid-template-columns:repeat(3,1fr);display:grid}
.el-table-wrap{border:1px solid var(--line);margin-bottom:9px;overflow:auto}
.el-table-wrap table{font-size:8px}
.el-table-wrap select{border:1px solid var(--line);background:#fff;padding:4px 6px;font-size:8px}
.el-bad{color:#a1442a;font-weight:700}
.el-note{color:var(--muted);background:#f4f7f5;border-left:3px solid var(--line);margin:0;padding:9px 10px;font-size:7px;line-height:1.7}
@media (width<=760px){.db-import{grid-template-columns:1fr}.db-import-actions{max-width:none;justify-content:flex-start}.db-filter{flex-direction:column}}

/* ==========================================================================
   ART OF DARK — ธีมมืด + ขยายขนาดตัวอักษรทั้งระบบ
   โหลดหลัง index-BQTYoE7B.css จึงทับกฎเดิมด้วยลำดับ cascade
   ========================================================================== */
:root{
  --ink:#0d1117; --ink2:#161b22; --surface:#161b22; --surface2:#1c232d; --surface3:#222b36;
  --green:#35d39a; --green2:#2bb083; --lime:#d9ef5e;
  --paper:#0d1117; --line:#2a323d; --muted:#8b98a5; --text:#e6edf3;
  --white:#e6edf3; --orange:#e3a458; --danger:#ff7b72;
  --shadow:0 16px 44px #00000066;
  color-scheme:dark;
}
html,body{background:var(--paper);color:var(--text)}
*{scrollbar-color:#39414d transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#39414d;border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* ---- แถบหัวเว็บ ---- */
.topbar{background:linear-gradient(180deg,#161b22,#11161d);border-bottom:1px solid var(--line);height:78px}
.brand strong{font-size:17px;color:var(--text)}
.brand small{font-size:10px;color:#7d8b98}
.brand-cube{border-color:#3a434f}
.mode-badge{font-size:11px;padding:8px 13px;border-color:#3f4a2a;background:#1b1f14;color:var(--lime)}
.top-actions button{font-size:12px;padding:11px 16px;border-color:#39414d;color:var(--text);border-radius:8px}
.top-actions button:hover{background:#222b36;border-color:#4b5563}
.top-actions button.primary{background:var(--lime);border-color:var(--lime);color:#11161d;font-weight:700}
.view-tabs button{font-size:13px;padding:10px 18px;border-radius:8px;border-color:#39414d;color:#c2ccd6}
.view-tabs button:hover{background:#222b36;color:var(--text)}
.view-tabs button.active{background:var(--green);border-color:var(--green);color:#08130f;font-weight:700}

/* ---- แถบข้างอาคาร ---- */
.building-sidebar{background:#11161d;border-right-color:var(--line)}
.side-title{font-size:11px;color:var(--muted)}
.side-title button{background:var(--green);color:#08130f;width:30px;height:30px;font-size:16px;font-weight:700}
.building-list>button{border-radius:8px}
.building-list>button:hover{background:#1a2029}
.building-list>button.active{background:var(--surface2);border-color:var(--green);box-shadow:none}
.building-list em{background:#243040;color:var(--green);font-size:11px;width:30px;height:30px}
.building-list>button.active em{background:var(--green);color:#08130f}
.building-list b{font-size:13px;color:var(--text)}
.building-list small{font-size:11px;color:var(--muted)}
.add-building{font-size:12px;padding:12px;border-color:#3a434f;color:var(--green);border-radius:8px}
.project-total{border-top-color:var(--line)}
.project-total>span{font-size:11px;color:var(--muted)}
.project-total>strong{font-size:24px;color:var(--text)}
.project-total dl div{font-size:11px}
.project-total dd{color:var(--text)}

/* ---- พื้นที่ทำงาน ---- */
.workspace-head>div>span,.section-head span{font-size:11px;color:var(--green);letter-spacing:.16em}
.workspace-head input{color:var(--text)}
.workspace-head p{font-size:12px;color:var(--muted)}
.workspace-actions button{font-size:12px;padding:10px 14px;background:var(--surface2);border-color:#39414d;color:var(--text);border-radius:8px}
.workspace-actions button:hover:not(:disabled){background:#2a3440}
.source-bar{background:var(--surface);border-color:var(--line)}
.source{border-right-color:var(--line)}
.source>span{background:#243040;color:var(--green);font-size:11px;width:28px;height:28px}
.source b{font-size:13px;color:var(--text)}
.source small{font-size:10px;color:var(--muted)}
.source.active>span{background:var(--green);color:#08130f}
.source.locked:after{font-size:9px;color:#6b7684}

/* ---- วิว 3D ---- */
.viewport-card,.inspector{background:var(--surface);border-color:var(--line)}
.viewport-toolbar{border-bottom-color:var(--line);height:52px}
.viewport-toolbar button{font-size:12px;padding:9px 15px;background:var(--surface2);border-color:#39414d;color:var(--text);border-radius:8px}
.viewport-toolbar button:hover{background:#2a3440}
.viewport-toolbar button.active{background:var(--green);border-color:var(--green);color:#08130f;font-weight:700}
.viewport-toolbar>span{font-size:11px;color:var(--muted)}
.three-host{background:#0f1419}
.compass{background:#161b22e6;border-color:#3a434f;color:var(--text);font-size:11px;width:46px;height:46px}
.scene-legend{background:#11161de6;border:1px solid var(--line);border-radius:8px;font-size:11px;gap:10px;padding:8px 11px}
.scene-legend i{width:11px;height:11px;border-radius:2px}
.viewport-footer{font-size:11px;color:var(--muted);border-top-color:var(--line)}

/* ---- แผงตั้งค่าด้านขวา ---- */
.inspector-section{border-bottom-color:var(--line)}
.inspector-title>span{background:#243040;color:var(--green);font-size:11px;width:28px;height:28px}
.inspector-title b{font-size:14px;color:var(--text)}
.number-field>span,.select-field>span,.toggle-field>span{font-size:11px;color:var(--muted)}
.number-field>div{background:var(--surface2);border-color:#39414d;border-radius:8px}
.number-field>div:focus-within{border-color:var(--green)}
.number-field input{font-size:13px;padding:10px;color:var(--text)}
.number-field em{font-size:11px;color:var(--muted)}
.select-field select{background:var(--surface2);border-color:#39414d;color:var(--text);font-size:12px;padding:10px;border-radius:8px}
.slider>span{font-size:11px}
.slider b{color:var(--text);font-size:12px}
.face-tabs button{font-size:12px;padding:11px;background:var(--surface2);border-color:#39414d;color:var(--text)}
.face-tabs button:hover:not(:disabled){background:#2a3440}
.face-tabs button.active{background:var(--green);border-color:var(--green);color:#08130f;font-weight:700}
.capacity{background:#14201c;border-left-color:var(--green)}
.capacity span,.capacity small{font-size:11px;color:var(--muted)}
.capacity strong{font-size:15px;color:var(--text)}
.auto-fill{font-size:12px;padding:11px;background:var(--surface2);border-color:var(--green);color:var(--green);border-radius:8px}
.auto-fill:hover{background:#14201c}
.toggle-field button{font-size:12px;padding:10px;background:var(--surface2);border-color:#39414d;color:var(--text)}
.toggle-field button:hover{background:#2a3440}
.toggle-field button.active{background:var(--green);border-color:var(--green);color:#08130f;font-weight:700}
.overflow-warning{font-size:11px;background:#2a1d10;border-color:#6b4a22;color:#e8b477;border-radius:8px}
.plane-summary{border-color:var(--line);border-radius:8px;overflow:hidden}
.plane-summary div{border-color:var(--line)}
.plane-summary span{font-size:10px;color:var(--muted)}
.plane-summary b{font-size:13px;color:var(--text)}

/* ---- โซน / ทางเดิน ---- */
.zone-bar>span{font-size:11px;color:var(--muted)}
.zone-add{font-size:12px;padding:8px 13px;background:var(--surface2);border-color:var(--green);color:var(--green);border-radius:8px}
.zone-add:hover{background:#14201c}
.zone-chip{background:var(--surface2);border-color:#39414d;border-radius:10px;padding:10px 11px;grid-template-columns:26px 1fr}
.zone-chip:hover{background:#2a3440}
.zone-chip em{width:24px;height:24px;font-size:11px;background:#243040;color:var(--green)}
.zone-chip b{font-size:13px;color:var(--text)}
.zone-chip small{font-size:11px;color:var(--muted)}
.zone-chip.active{background:#14201c;border-color:var(--green)}
.zone-chip.active em{background:var(--green);color:#08130f}
.zone-chip.warn{background:#2a1d10;border-color:#6b4a22}
.zone-chip.walk em{background:#2b3440;color:#a8b5c2}
.zone-chip.walk.active{background:#1d242e;border-color:#6b7684}
.zone-chip.walk.active em{background:#8b98a5;color:#11161d}
.zone-empty{font-size:11px;color:var(--muted);border-color:#3a434f;border-radius:8px;padding:13px}
.zone-head input{background:var(--surface2);border-color:#39414d;color:var(--text);font-size:13px;padding:9px 10px;border-radius:8px}
.zone-head button{font-size:11px;padding:9px 11px;background:var(--surface2);border-color:#39414d;color:var(--text);border-radius:8px}
.zone-head button:hover{background:#2a3440}
.zone-head button.danger{color:var(--danger);border-color:#5c2b28}
.walk-hint{font-size:11px;color:var(--muted)}

/* ---- อุปกรณ์ ---- */
.device-note{font-size:11px;background:#14201c;border-left-color:var(--green);color:var(--muted);border-radius:0 8px 8px 0;padding:10px 12px}
.device-add{font-size:11px;padding:10px 12px;background:var(--surface2);border-color:#3a434f;color:var(--green);border-radius:8px}
.device-card{background:var(--surface2);border-color:var(--line);border-radius:10px;padding:13px}
.device-card-head b{font-size:13px;color:var(--text)}
.device-card-head small{font-size:10px;color:var(--muted)}
.device-card .number-field>div{background:var(--surface3)}
.device-variants span{font-size:11px;background:var(--surface3);border-color:#39414d;color:var(--text);border-radius:6px;padding:5px 9px}
.check{background:#14201c;border-left-color:var(--green);border-radius:0 8px 8px 0;padding:9px 11px}
.check.bad{background:#2a1d10;border-left-color:var(--orange)}
.check b{font-size:12px;color:var(--text)}
.check span{font-size:11px;color:var(--muted)}

/* ---- ตาราง / สรุปปริมาณ ---- */
.quantity-section,.standards{border-top-color:#232a34}
.section-head h2{font-size:24px;color:var(--text)}
.section-head p{font-size:12px;color:var(--muted)}
.metrics{background:var(--surface);border-color:var(--line);border-radius:10px;overflow:hidden}
.metrics>div{border-right-color:var(--line);padding:13px}
.metrics span{font-size:11px;color:var(--muted)}
.metrics strong{font-size:17px;color:var(--text)}
.table-wrap{background:var(--surface);border-color:var(--line);border-radius:10px}
table{font-size:12px}
th{background:#1c232d;color:var(--text);font-size:11px;padding:12px;letter-spacing:.04em}
td{border-bottom-color:var(--line);padding:12px;color:var(--text)}
tbody tr:hover{background:#1c232d}
.total td{background:var(--green);color:#08130f;font-weight:700}
.standard-grid .number-field{background:var(--surface2);border-color:var(--line);border-radius:10px;padding:12px}

/* ---- หน้าฐานข้อมูล ---- */
.db-import{background:var(--surface);border-color:var(--line);border-radius:10px;padding:16px}
.db-import b{font-size:14px;color:var(--text)}
.db-import p{font-size:11px;color:var(--muted)}
.db-import code{background:#0a0e13;color:var(--lime);font-size:11px;border:1px solid var(--line);padding:11px 13px}
.db-import-actions button,.db-file{font-size:12px;padding:10px 13px;background:var(--surface2);border-color:#39414d;color:var(--text);border-radius:8px}
.db-import-actions button:hover,.db-file:hover{background:#2a3440}
.db-file{border-color:var(--green);color:var(--green)}
.db-msg{font-size:12px;color:var(--green)}
.db-filter button{font-size:12px;padding:10px 15px;background:var(--surface2);border-color:#39414d;color:var(--text);border-radius:8px}
.db-filter button:hover{background:#2a3440}
.db-filter button.active{background:var(--green);border-color:var(--green);color:#08130f;font-weight:700}
.db-filter input{font-size:12px;padding:10px 13px;background:var(--surface2);border-color:#39414d;color:var(--text);border-radius:8px}
.db-brand h3{font-size:13px;color:var(--green);border-bottom-color:var(--line)}
.db-brand h3 small{font-size:11px;color:var(--muted)}
.db-card{background:var(--surface);border-color:var(--line);border-radius:10px;padding:14px}
.db-card.in-use{border-color:var(--green)}
.db-card header b{font-size:14px;color:var(--text)}
.db-card header small{font-size:10px;color:var(--muted)}
.db-badge{font-size:10px;padding:5px 9px;border-radius:6px}
.db-badge.use{background:var(--green);color:#08130f;font-weight:700}
.db-badge.warn{background:#2a1d10;border-color:#6b4a22;color:#e8b477}
.db-badge.note{background:var(--surface2);border-color:var(--line);color:var(--muted)}
.db-del{font-size:10px;padding:5px 10px;background:var(--surface2);border-color:#5c2b28;color:var(--danger);border-radius:6px}
.db-fields label>span{font-size:11px;color:var(--muted)}
.db-fields label>div{background:var(--surface2);border-color:#39414d;border-radius:8px}
.db-fields input{font-size:13px;padding:9px;color:var(--text)}
.db-fields em{font-size:11px;color:var(--muted)}
.db-bins{border-top-color:var(--line)}
.db-bins>span:first-child{font-size:11px;color:var(--muted)}
.db-bins button{font-size:11px;padding:6px 11px;background:var(--surface2);border-color:#39414d;color:var(--text);border-radius:6px}
.db-bins button.active{background:var(--green);border-color:var(--green);color:#08130f}
.db-variant{font-size:11px;background:var(--surface2);border-color:#39414d;color:var(--text);border-radius:6px;padding:6px 10px}
.db-sync{font-size:11px;background:#2a1d10;border-color:#6b4a22;color:#e8b477;border-radius:8px;padding:10px 12px}
.db-sync button{font-size:11px;padding:7px 12px;background:var(--surface2);border-color:#8a5a2e;color:#e8b477;border-radius:6px}

/* ---- หน้างานติดตั้ง & ไฟฟ้า ---- */
.el-block{background:var(--surface);border-color:var(--line);border-radius:10px;padding:17px}
.el-block h3{font-size:14px;color:var(--green);border-bottom-color:var(--line);padding-bottom:9px}
.el-metrics{border-color:var(--line);border-radius:10px;overflow:hidden}
.el-metrics>div{border-right-color:var(--line);padding:12px 13px}
.el-metrics span{font-size:11px;color:var(--muted)}
.el-metrics strong{font-size:16px;color:var(--text)}
.el-table-wrap{border-color:var(--line);border-radius:10px}
.el-table-wrap table{font-size:12px}
.el-table-wrap select{background:var(--surface2);border-color:#39414d;color:var(--text);font-size:12px;padding:7px 9px;border-radius:6px}
.el-bad{color:var(--danger)}
.el-note{font-size:11px;background:var(--surface2);border-left-color:var(--green);color:var(--muted);border-radius:0 8px 8px 0;padding:11px 13px}
.el-toggle>div button{font-size:12px}

@media print{
  :root{--paper:#fff;--text:#111;--surface:#fff;--line:#ccc;--muted:#555}
  html,body{background:#fff;color:#111}
  td,th{color:#111}
}
.zone-bar-actions{display:flex;gap:5px}
.zone-chip.rail em{background:#243a4a;color:#8fc6e8}
.zone-chip.rail.active{background:#14222c;border-color:#5aa0c8}
.zone-chip.rail.active em{background:#5aa0c8;color:#0d1117}
.check small{display:block;margin-top:3px;font-size:10px;color:#6b7684;line-height:1.5}
.mid-dot{background:#e1f0db}
.end-dot{background:#e5a648}
.conn-dot{background:#d9776c}
.scene-legend{flex-wrap:wrap;max-width:60%}
.str-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.str-faces{grid-template-columns:repeat(4,auto);display:grid;margin:0}
.str-actions{display:flex;gap:6px;flex-wrap:wrap}
.str-actions button{font-size:12px;padding:9px 13px;background:var(--surface2);border:1px solid #39414d;color:var(--text);border-radius:8px}
.str-actions button:hover{background:#2a3440}
.str-actions button.danger{color:var(--danger);border-color:#5c2b28}
.str-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.str-chip{display:flex;align-items:center;gap:7px;font-size:12px;padding:8px 12px;background:var(--surface2);border:1px solid #39414d;color:var(--text);border-radius:8px}
.str-chip i{width:12px;height:12px;border-radius:3px;background:var(--c)}
.str-chip.active{border-color:var(--c);background:#14201c;font-weight:700}
.str-plan{border:1px solid var(--line);border-radius:10px;background:#0f1419;padding:10px}
.str-plan svg{width:100%;height:auto;display:block}
.str-roof{fill:#18212b;stroke:#2a323d}
.str-panel{fill:#1c2732;stroke:#39414d;stroke-width:1;cursor:pointer}
.str-panel.free:hover{fill:#26333f}
.str-num{fill:#e6edf3;font-size:9px;text-anchor:middle;pointer-events:none}
.str-wire{fill:none;stroke-width:2.5;opacity:.9;pointer-events:none}
.str-drop{fill:#0d1117;stroke:#d9ef5e;stroke-width:2.5}
.str-drop-label{fill:#d9ef5e;font-size:10px;font-weight:700;text-anchor:middle}
.str-dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.source.clickable{cursor:pointer;opacity:1}
.source.clickable:hover{background:#1c232d}
.map-panel{border:1px solid var(--line);background:var(--surface);border-radius:10px;display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:13px;padding:13px}
.map-panel label{flex:1;min-width:220px}
.map-panel label>span{display:block;font-size:11px;color:var(--muted);margin-bottom:5px}
.map-panel input:not([type=range]){width:100%;background:var(--surface2);border:1px solid #39414d;color:var(--text);font-size:13px;padding:10px;border-radius:8px;outline:0}
.map-panel input:focus{border-color:var(--green)}
.map-panel .map-zoom{max-width:180px}
.map-panel input[type=range]{width:100%;accent-color:var(--green)}
.map-actions{display:flex;gap:6px}
.map-actions button{font-size:12px;padding:10px 15px;background:var(--surface2);border:1px solid #39414d;color:var(--text);border-radius:8px}
.map-actions button.primary{background:var(--green);border-color:var(--green);color:#08130f;font-weight:700}
.map-panel .walk-hint{flex-basis:100%;margin:0}
.compass{overflow:visible}
.compass-rose{position:absolute;inset:0;transition:transform .1s linear}
.compass-rose i{position:absolute;left:50%;top:4px;margin-left:-1.5px;width:3px;height:15px;background:linear-gradient(#ff7b72 50%,#e6edf3 50%)}
.compass-rose b{position:absolute;left:50%;top:18px;transform:translateX(-50%);font-size:10px;color:var(--text)}
.map-nudge{display:flex;gap:8px}
.map-nudge .number-field{margin:0;min-width:150px}
.map-nudge{display:flex;gap:14px;align-items:flex-start;flex-basis:100%}
.map-pad{display:grid;grid-template-columns:repeat(3,44px);grid-auto-rows:44px;gap:5px}
.map-pad button{font-size:17px;background:var(--surface2);border:1px solid #39414d;color:var(--text);border-radius:9px;cursor:pointer}
.map-pad button:hover{background:#2a3440;border-color:var(--green)}
.map-pad button:active{background:var(--green);color:#08130f}
.map-pad-center{color:var(--muted)!important;font-size:13px!important}
.map-nudge-side{display:flex;gap:8px;align-items:end;flex-wrap:wrap;flex:1}
.map-step span{display:block;font-size:11px;color:var(--muted);margin-bottom:5px}
.map-step>div{display:flex;gap:4px}
.map-step button{font-size:11px;padding:9px 10px;background:var(--surface2);border:1px solid #39414d;color:var(--text);border-radius:7px}
.map-step button.active{background:var(--green);border-color:var(--green);color:#08130f;font-weight:700}
.map-nudge-side .number-field{margin:0;min-width:140px}
.str-opt-pick{display:flex;align-items:center;gap:7px}
.str-opt-pick span{font-size:11px;color:var(--muted)}
.str-opt-pick select{background:var(--surface2);border:1px solid #39414d;color:var(--text);font-size:12px;padding:8px 10px;border-radius:8px}
.str-opt-link{stroke:#5560e8;stroke-width:5;opacity:.45;stroke-linecap:round}
.str-opt{fill:#28309a;stroke:#7d87ff;stroke-width:1}
.str-opt.odd{fill:#7a4a17;stroke:#e5a648}
.str-opt-label{fill:#dfe3ff;font-size:8px;font-weight:700;text-anchor:middle;pointer-events:none}
.str-drop-g{cursor:pointer}
.str-drop-g:hover .str-drop{stroke:#ff7b72}
.str-drop-g:hover .str-drop-label{fill:#ff7b72}
.str-sub{font-size:13px;color:var(--green);margin:14px 0 9px;border-top:1px solid var(--line);padding-top:12px}
.str-dim td{opacity:.55}
.en-chart{width:100%;height:auto;display:block;background:#0f1419;border:1px solid var(--line);border-radius:10px;padding:6px}
.en-val{fill:#e6edf3;font-size:11px;text-anchor:middle}
.en-ax{fill:#8b98a5;font-size:11px;text-anchor:middle}
.en-legend text{fill:#c2ccd6;font-size:12px}
.en-faces{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.en-hero strong{color:var(--green)}
.en-loss{display:grid;gap:3px}
.en-loss-row{display:grid;grid-template-columns:220px 1fr 90px;align-items:center;gap:10px;padding:4px 6px;border-radius:6px}
.en-loss-row.head{background:#1c232d}
.en-loss-bar{grid-column:1;height:14px;background:#141a22;border-radius:4px;overflow:hidden}
.en-loss-bar i{display:block;height:100%;background:linear-gradient(90deg,#2bb083,#35d39a);border-radius:4px}
.en-loss-label{grid-column:2;font-size:12px;color:var(--text)}
.en-loss-label b{font-weight:400}
.en-loss-label span{color:var(--green);margin-left:8px;font-weight:700}
.en-loss-row.head .en-loss-label b{font-weight:700}
.en-loss-pct{grid-column:3;text-align:right;font-size:12px;color:#e3a458}
.en-loss-pct.gain{color:var(--green)}
.en-params{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.mt-formula{background:#0a0e13;border:1px solid var(--line);border-radius:8px;color:#d9ef5e;font-size:12.5px;line-height:1.8;padding:13px 15px;margin:8px 0;overflow-x:auto;white-space:pre}
.mt-p{font-size:12.5px;color:var(--muted);line-height:1.8;margin:6px 0}
.sun-panel{border-top:1px solid var(--line);background:#11161d;padding:9px 11px;display:grid;gap:8px}
.sun-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sun-row button{font-size:12px;padding:8px 13px;background:var(--surface2);border:1px solid #39414d;color:var(--text);border-radius:8px}
.sun-row button:hover{background:#2a3440}
.sun-row button.active{background:var(--green);border-color:var(--green);color:#08130f;font-weight:700}
.sun-row button.rec{background:#a12a2a;border-color:#c74b4b;color:#fff;font-weight:700;animation:sunrec 1s infinite}
@keyframes sunrec{50%{opacity:.6}}
.sun-speed{display:flex;align-items:center;gap:6px}
.sun-speed span{font-size:11px;color:var(--muted)}
.sun-speed select{background:var(--surface2);border:1px solid #39414d;color:var(--text);font-size:12px;padding:7px 9px;border-radius:7px}
.sun-slider{flex:1;min-width:200px}
.sun-slider span{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
.sun-slider input{width:100%;accent-color:#f6c945}
.sun-readout{font-size:11px;color:#f6c945;white-space:nowrap}
.sun-date{display:flex;align-items:center;gap:6px}
.sun-date span{font-size:11px;color:var(--muted)}
.sun-date select{background:var(--surface2);border:1px solid #39414d;color:var(--text);font-size:12px;padding:8px 10px;border-radius:7px}
.viewport-card{position:relative}
.sun-hud{position:absolute;top:64px;left:14px;z-index:5;background:#11161de8;border:1px solid #f6c94555;border-radius:10px;padding:10px 14px;pointer-events:none;display:grid;gap:4px}
.sun-hud-time{font-size:13px;color:#f6c945;font-weight:700}
.sun-hud-big{font-size:18px;color:var(--text);font-weight:700}
.sun-hud-big small{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:1px}
.cd-draw{cursor:crosshair}
.cd-grid{stroke:#1c232d;stroke-width:1}
.cd-bldg{fill:#243040;stroke:#4b5563;stroke-width:1.5}
.cd-bldg.active{fill:#1d3a30;stroke:var(--green);stroke-width:2.5}
.cd-bldg-label{fill:#c2ccd6;font-size:11px;text-anchor:middle;pointer-events:none}
.cd-line{fill:none;stroke:#f6c945;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.cd-line.draft{stroke:#5ac8fa;stroke-dasharray:6 4}
.cd-node{fill:#0d1117;stroke:#f6c945;stroke-width:2}
.cd-node.draft{stroke:#5ac8fa}
.cd-run{cursor:pointer}
.cd-run.sel .cd-line{stroke:#35d39a;stroke-width:4.5}
.cd-len{fill:#e6edf3;font-size:10px;text-anchor:middle;pointer-events:none}
.cd-box{cursor:pointer}
.cd-box-label{fill:#8b98a5;font-size:9px;text-anchor:middle;pointer-events:none}
.cd-name{background:var(--surface2);border:1px solid #39414d;color:var(--text);font-size:12px;padding:6px 8px;border-radius:6px;width:110px;outline:0}
.cd-num{background:var(--surface2);border:1px solid #39414d;color:var(--text);font-size:12px;padding:6px;border-radius:6px;width:66px;text-align:right;outline:0}
.str-actions button.primary-ish{background:var(--green);border-color:var(--green);color:#08130f;font-weight:700}
.str-actions select{background:var(--surface2);border:1px solid #39414d;color:var(--text);font-size:12px;padding:8px 10px;border-radius:8px}
.cd-run.ww .cd-line{stroke:#c792ea;stroke-width:7;stroke-linecap:square;opacity:.9}
.cd-run.ww.sel .cd-line{stroke:#e0b3ff;stroke-width:9}
.cd-run.ww .cd-node{fill:#c792ea}
.cd-run.ww .cd-len{fill:#e0b3ff}

/* ท่อร้อยสาย / Wireway / กล่อง-ตู้ ในฉาก 3D */
.pipe-dot{background:#bac4cc}
.ww-dot{background:#c792ea}
.box-dot{background:#e3a458}

/* Ladder tray บนผังไซต์ — เส้นคู่แบบรางบันได */
.cd-run.ld .cd-line{stroke:#90b6d6;stroke-width:8;stroke-linecap:butt;stroke-dasharray:6 4;opacity:.95}
.cd-run.ld.sel .cd-line{stroke:#bcd9f2;stroke-width:10}
.ld-dot{background:#90b6d6}

/* แถบเดินท่อในฉาก 3D */
.route-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:10px 14px;
  background:#141b23;border:1px solid #24313d;border-radius:10px;margin:0 0 10px}
.route-bar>small{flex:1 1 100%;color:#7f93a5;font-size:12.5px;line-height:1.5}
.route-group{display:flex;align-items:center;gap:6px}
.route-group>b{color:#8fa6b8;font-size:12.5px;font-weight:600;margin-right:2px}
.route-group button{padding:6px 11px;font-size:13.5px;border-radius:7px;border:1px solid #2b3945;
  background:#1a232c;color:#cfe0ee;cursor:pointer}
.route-group button:hover:not(:disabled){border-color:#3d8f6e;color:#eaf6ff}
.route-group button.active{background:#2fd48f;border-color:#2fd48f;color:#08131a;font-weight:700}
.route-group button.primary{background:#2fd48f;border-color:#2fd48f;color:#08131a;font-weight:700}
.route-group button:disabled{opacity:.42;cursor:not-allowed}
.route-group select,.route-group input.cd-num{padding:5px 8px;font-size:13px;border-radius:7px;
  border:1px solid #2b3945;background:#101820;color:#dbe9f5}
.route-group input.cd-num{width:74px;text-align:right}

/* ── การ์ด 03 = ทางเข้าโหมดเดินท่อ 3D (ยุบปุ่มซ้ำในแถบเครื่องมือมารวมที่นี่) ── */
.source.clickable{position:relative}
.source-go{position:absolute;top:9px;right:10px;padding:4px 9px;font-size:10.5px;border-radius:6px;
  border:1px solid #2b3945;background:#141c25;color:#9fc4e0}
.source-go:hover{border-color:#3d8f6e;color:#eaf6ff}
.source.active .source-go{border-color:#2fd48f;color:#bff3dd}

/* โหมดลบ — ปุ่มเป็นสีเตือน ไม่ให้กดค้างไว้โดยไม่รู้ตัว */
.route-group button.active.danger{background:#ef5f5f;border-color:#ef5f5f;color:#1a0a0a}
.route-group>span{color:#8fa6b8;font-size:12.5px}

/* ป้ายเบอร์ท่อที่ควรใช้ในตารางเส้นทาง — กดแล้วเปลี่ยนเป็นเบอร์นั้นทันที */
.cd-size-cell{display:flex;align-items:center;gap:6px}
.cd-fit{padding:3px 7px;font-size:11px;border-radius:6px;border:1px solid #2b6f52;
  background:#12291f;color:#7fe3b4;white-space:nowrap}
.cd-fit.bad{border-color:#8a4a2a;background:#2a170f;color:#ffb27a;font-weight:700}
.cd-fit:hover{filter:brightness(1.25)}

/* ปุ่มลบ/รีเซ็ตเล็กในตาราง */
.str-del{margin-left:7px;padding:2px 8px;font-size:11.5px;border-radius:6px;
  border:1px solid #4a2b33;background:#251419;color:#ff9aa5}
.str-del:hover{border-color:#ef5f5f;color:#ffd0d5}

/* ── แถบขวาโหมดเดินท่อ 3D ────────────────────────────────────────────
   ซ่อนเมนูอาคาร/ระนาบ/อุปกรณ์ DC/ราง/ทางเดิน ที่ไม่เกี่ยวกับงานเดินท่อ
   เหลือรายการท่อ-สาย-ตู้ที่ปักลงไปในฉากอย่างเดียว                        */
.inspector.routing > .inspector-section{display:none}
.inspector.routing > .route-inspector{display:block}

.rt-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.rt-sum>div{background:#141c25;border:1px solid #22303c;border-radius:8px;padding:8px 9px}
.rt-sum span{display:block;color:#8fa6b8;font-size:10.5px}
.rt-sum b{display:block;margin-top:3px;font-size:14px;color:#eaf6ff}

.rt-add{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.rt-add button{padding:9px 8px;font-size:12.5px;border-radius:8px;border:1px solid #2b3945;
  background:#1a232c;color:#cfe0ee}
.rt-add button:hover{border-color:#3d8f6e;color:#eaf6ff}
.rt-add button.active{background:#2fd48f;border-color:#2fd48f;color:#08131a;font-weight:700}
.rt-add button:last-child{grid-column:1/-1}
.rt-add button.active.danger{background:#ef5f5f;border-color:#ef5f5f;color:#1a0a0a}

.rt-drawing{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:10px;padding:8px 10px;border-radius:8px;
  border:1px dashed #2fd48f;background:#11251d}
.rt-drawing b{font-size:12.5px;color:#7fe3b4}
.rt-drawing button{padding:5px 10px;font-size:12px;border-radius:6px;
  border:1px solid #2b3945;background:#101820;color:#cfe0ee}
.rt-drawing button:disabled{opacity:.42;cursor:not-allowed}

.rt-head{margin:14px 0 7px;font-size:11px;font-weight:700;letter-spacing:.06em;color:#8fa6b8}
.rt-empty{margin:0;padding:11px;border:1px dashed #2b3945;border-radius:8px;
  font-size:11.5px;line-height:1.6;color:#7d8fa0}
.rt-list{display:grid;gap:6px}

.rt-item{border:1px solid #22303c;border-radius:9px;background:#141c25;overflow:hidden}
.rt-item.open{border-color:#2fd48f}
.rt-row{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:9px;
  padding:9px 10px;cursor:pointer}
.rt-row:hover{background:#1a232d}
.rt-row>em{font-style:normal;font-size:10px;font-weight:700;text-align:center;
  padding:5px 0;border-radius:6px;background:#0f171f;border:1px solid #22303c}
.rt-row b{display:block;font-size:12.5px;color:#eaf6ff}
.rt-row small{display:block;margin-top:2px;font-size:10.5px;color:#8fa6b8;line-height:1.45}
.rt-del{padding:3px 9px;font-size:12px;border-radius:6px;
  border:1px solid #4a2b33;background:#251419;color:#ff9aa5}
.rt-del:hover{border-color:#ef5f5f;color:#ffd0d5}

.rt-edit{border-top:1px solid #22303c;padding:10px;background:#111922}
.rt-edit .select-field,.rt-edit .number-field{margin-bottom:8px}
.rt-edit .field-grid{align-items:end}
.rt-edit .cd-fit{width:100%;margin-bottom:8px;padding:6px;text-align:center}
.rt-name{width:100%;padding:7px 8px;font-size:12.5px;border-radius:7px;
  border:1px solid #2b3945;background:#101820;color:#dbe9f5}
.rt-note{margin:0 0 8px;font-size:10.5px;line-height:1.55;color:#7d8fa0}
.rt-snap{margin-bottom:9px;padding:9px 8px;font-size:12px;border-radius:8px;
  border:1px solid #2b3945;background:#1a232c;color:#cfe0ee}
.rt-snap.active{background:#2fd48f;border-color:#2fd48f;color:#08131a;font-weight:700}

/* ── รายการตัวนำในเส้นทาง (DC บวก-ลบ + สายดิน + AC ในท่อเดียวกัน) ── */
.rt-wire-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 6px}
.rt-wire-head span{font-size:11px;color:#8fa6b8}
.rt-wire-head button{padding:5px 9px;font-size:11.5px;border-radius:6px;
  border:1px solid #2b6f52;background:#12291f;color:#7fe3b4;white-space:nowrap}
.rt-wire-head button:hover{filter:brightness(1.3)}
.rt-wires{display:grid;gap:5px}
.rt-wire{display:grid;grid-template-columns:6px minmax(0,1fr) 68px 58px auto;align-items:center;gap:5px}
.rt-wire>i{width:6px;height:26px;border-radius:3px;display:block}
.rt-wire select,.rt-wire input{padding:5px 6px;font-size:11.5px;border-radius:6px;
  border:1px solid #2b3945;background:#101820;color:#dbe9f5;min-width:0;width:100%}
.rt-wire input{text-align:right}
.rt-wire .rt-del{padding:4px 7px}
.rt-wire-add{width:100%;margin:7px 0 9px;padding:7px;font-size:11.5px;border-radius:7px;
  border:1px dashed #2b3945;background:0 0;color:#8fa6b8}
.rt-wire-add:hover{border-color:#3d8f6e;color:#eaf6ff}

/* ชุดสายในตาราง BOQ — แสดงอย่างเดียว แก้ที่แถบขวา */
.cd-wireset{display:flex;flex-wrap:wrap;gap:4px 8px}
.cd-wireset span{font-size:10.5px;font-weight:700;white-space:nowrap}

/* ── เลือกผนัง A–D + ลูกศรขยับตู้บนผนัง (ห้องอุปกรณ์) ── */
.rt-wallpick{margin-bottom:9px}
.rt-wallpick>span{display:block;color:#8fa6b8;font-size:10.5px;margin-bottom:4px}
.rt-walls{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:6px}
.rt-walls button{padding:8px 0;font-size:13px;font-weight:700;border-radius:7px;
  border:1px solid #2b3945;background:#1a232c;color:#cfe0ee}
.rt-walls button:hover{border-color:#3d8f6e;color:#eaf6ff}
.rt-walls button.active{background:#2fd48f;border-color:#2fd48f;color:#08131a}
.rt-pad2{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.rt-pad2 button{width:34px;height:30px;font-size:13px;border-radius:7px;
  border:1px solid #2b3945;background:#101820;color:#cfe0ee}
.rt-pad2 button:hover{border-color:#3d8f6e;color:#eaf6ff}
.rt-pad2 small{color:#7d8fa0;font-size:10px;margin-left:2px}

/* ── หน้า "สรุปไซต์ & SLD" ── */
.sld-main{overflow-x:auto;padding:10px 4px;background:#0c141b;border:1px solid #22303c;border-radius:10px}
.sld-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.sld-card svg{width:100%;height:auto;display:block}

/* ── modal เลือกหัวข้อรายงานลูกค้า (แบบ PVsyst) ── */
.rep-overlay{position:fixed;inset:0;background:#000a;z-index:999;display:grid;place-items:center}
.rep-modal{width:min(560px,92vw);max-height:88vh;overflow:auto;background:#121a23;border:1px solid #2b3945;
  border-radius:14px;padding:20px 22px;box-shadow:0 24px 70px #000c}
.rep-modal h3{margin:0 0 4px;font-size:17px;color:#eaf6ff}
.rep-modal>p{margin:0 0 14px;font-size:12px;color:#8fa6b8}
.rep-list{display:grid;gap:7px}
.rep-item{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;padding:9px 11px;
  border:1px solid #22303c;border-radius:9px;cursor:pointer;background:#0f171f}
.rep-item:hover{border-color:#3d8f6e}
.rep-item.on{border-color:#2fd48f;background:#11251d}
.rep-item input{width:16px;height:16px;margin-top:2px;accent-color:#2fd48f}
.rep-item b{display:block;font-size:13px;color:#dbe9f5}
.rep-item small{display:block;margin-top:2px;font-size:10.5px;color:#7d8fa0;line-height:1.45}
.rep-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.rep-actions button{padding:9px 18px;font-size:13px;border-radius:8px;border:1px solid #2b3945;
  background:#1a232c;color:#cfe0ee;cursor:pointer}
.rep-actions button.primary{background:#2fd48f;border-color:#2fd48f;color:#08131a;font-weight:700}
.rep-actions button:disabled{opacity:.5;cursor:not-allowed}

/* ── คลังโปรเจกต์ (บันทึก / เปิด / ใหม่) ── */
.proj-btn{margin-left:14px;padding:7px 12px;font-size:12px;border-radius:8px;border:1px solid #2b3945;
  background:#141c25;color:#cfe0ee;cursor:pointer;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-btn:hover{border-color:#3d8f6e;color:#eaf6ff}
.proj-btn small{color:#7d8fa0;font-size:10.5px}
.proj-modal{width:min(640px,94vw)}
.proj-save{display:grid;grid-template-columns:1fr auto auto;gap:7px;margin-bottom:10px}
.proj-save input{padding:9px 11px;font-size:13px;border-radius:8px;border:1px solid #2b3945;background:#101820;color:#dbe9f5}
.proj-save button{padding:9px 13px;font-size:12.5px;border-radius:8px;border:1px solid #2b3945;background:#1a232c;color:#cfe0ee;cursor:pointer;white-space:nowrap}
.proj-save button.primary{background:#2fd48f;border-color:#2fd48f;color:#08131a;font-weight:700}
.proj-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.proj-tools small{color:#7d8fa0;font-size:10.5px}
.proj-list{display:grid;gap:6px;max-height:44vh;overflow:auto}
.proj-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:9px 11px;
  border:1px solid #22303c;border-radius:9px;background:#0f171f}
.proj-item.on{border-color:#2fd48f;background:#11251d}
.proj-info{cursor:pointer;min-width:0}
.proj-info b{display:block;font-size:13px;color:#dbe9f5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-info small{display:block;margin-top:2px;font-size:10.5px;color:#7d8fa0}
.proj-acts{display:flex;gap:5px}
.proj-acts button{padding:5px 10px;font-size:12px;border-radius:6px;border:1px solid #2b3945;background:#1a232c;color:#cfe0ee;cursor:pointer}
.proj-acts button:hover{border-color:#3d8f6e}
.proj-acts button.danger{border-color:#4a2b33;background:#251419;color:#ff9aa5}

/* ── สถานะเซฟ + สำรองบนดิสก์ + ประวัติย้อนหลัง ── */
.proj-btn small.save-saving{color:#e8b04a}
.proj-btn small.save-saved{color:#7fe3b4}
.proj-btn small.save-local{color:#ff9aa5}
.proj-disk,.proj-hist{margin-top:12px;padding-top:10px;border-top:1px dashed #2b3945}
.proj-disk h5,.proj-hist h5{margin:0 0 7px;font-size:11.5px;color:#8fa6b8;font-weight:600}
.proj-hist-list{display:flex;flex-wrap:wrap;gap:5px}
.proj-hist-list button{padding:5px 9px;font-size:11px;border-radius:6px;border:1px solid #2b3945;background:#101820;color:#cfe0ee;cursor:pointer}
.proj-hist-list button:hover{border-color:#3d8f6e;color:#eaf6ff}

/* ── Heatmap รังสี ── */
.sun-row button.heat.active{background:#e8913a;border-color:#e8913a;color:#1a0d05}
.heat-read{border-left:3px solid #e8913a;padding-left:8px}
.heat-legend{display:flex;align-items:center;gap:8px;margin:6px 0 4px;font-size:11px;color:#8fa6b8;flex-wrap:wrap}
.heat-legend i{display:block;height:12px;flex:1 1 220px;max-width:360px;border-radius:6px;border:1px solid #2b3945}
.heat-legend small{flex-basis:100%;font-size:10px;color:#7d8fa0}
.heat-table td.heat-cell{font-size:10.5px;font-weight:600;padding:5px 6px;text-align:right}
.heat-table th{white-space:nowrap}

/* ── แผนโซนตามรูปทรงหลังคา ── */
.zone-plan{margin:8px 0 10px;padding:9px 10px;border:1px dashed #2b6f52;border-radius:9px;background:#0f1a15}
.zone-plan-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.zone-plan-head b{font-size:12.5px;color:#7fe3b4}
.zone-plan-list{display:grid;gap:5px}
.zone-plan-item{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start;padding:6px 8px;border-radius:7px;
  border:1px solid #22303c;background:#0f171f;cursor:pointer}
.zone-plan-item:hover{border-color:#3d8f6e}
.zone-plan-item.on{border-color:#2fd48f}
.zone-plan-item em{font-style:normal;font-size:11px;font-weight:700;color:#08131a;background:#2fd48f;border-radius:50%;
  width:20px;height:20px;display:grid;place-items:center}
.zone-plan-item b{display:block;font-size:12px;color:#dbe9f5}
.zone-plan-item b small{font-weight:400;color:#8fa6b8;font-size:10.5px}
.zone-plan-item>div>small{display:block;margin-top:2px;font-size:10.5px;color:#8fa6b8;line-height:1.45}

/* ── หลังคาโค้ง: ตำแหน่งเส้นยอด ── */
.arc-apex{margin:6px 0 4px}
.arc-apex label{display:block;font-size:11.5px;color:#9fb3c4;margin-bottom:4px}
.arc-apex label b{color:#7fe3b4;font-weight:600}
.arc-apex-row{display:flex;align-items:center;gap:8px}
.arc-apex-row span{font-size:11px;font-weight:700;color:#dbe9f5;width:12px;text-align:center}
.arc-apex-row input[type=range]{flex:1;accent-color:#2fd48f}

/* Normalized production อ่านง่าย: การ์ด แสง → หาย → ได้จริง */
.np-cards{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin:6px 0 8px}
.np-card{flex:1 1 150px;min-width:150px;padding:9px 11px;border-radius:9px;border:1px solid #22303c;background:#0f171f}
.np-card small{display:block;font-size:11px;color:#8fa6b8;margin-bottom:3px}
.np-card b{display:block;font-size:15px;color:#e6edf3;line-height:1.2}
.np-card span{display:block;margin-top:4px;font-size:10.5px;color:#8fa6b8;line-height:1.4}
.np-card.in{border-color:#f2c94c66}.np-card.in b{color:#f2c94c}
.np-card.lc{border-color:#8b98a566}.np-card.lc b{color:#aeb9c4}
.np-card.ls{border-color:#e3a45866}.np-card.ls b{color:#e3a458}
.np-card.yf{border-color:#35d39a99;background:#0f1a15}.np-card.yf b{color:#35d39a}
.np-arrow{align-self:center;font-size:20px;color:#5b6b7a;padding:0 2px}
.en-in{fill:#06251a;font-size:11px;font-weight:700;text-anchor:middle}

/* เลือกขนาดวิดีโอในแผงดวงอาทิตย์ */
.sun-panel select.vid-size{font-size:11px;padding:3px 6px;border-radius:6px;background:#0f171f;color:#dbe9f5;border:1px solid #2b3a48}

/* แถบบันทึกคลิปหลังหยุดอัด */
.clip-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;padding:7px 9px;border-radius:8px;background:#0f1a15;border:1px solid #2fd48f55}
.clip-bar .clip-info{font-size:11.5px;color:#c2ccd6;margin-right:auto}
.clip-bar .clip-info b.warn{color:#ffb454}
.clip-bar button{font-size:11.5px;padding:4px 9px}

/* ซูมผังสตริง */
.str-zoom{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:11.5px;color:#9fb3c4}
.str-zoom button{padding:2px 9px;font-size:13px;line-height:1.2}
.str-zoom input[type=range]{width:140px;accent-color:#2fd48f}
.str-zoom b{color:#7fe3b4;min-width:36px}
.str-zoom small{color:#6f8394}
.str-plan.zoomed{overflow:auto;max-height:78vh;cursor:grab}
.str-plan.zoomed svg{height:auto;max-width:none}

/* ผังกางหลังคา (รวมทุกด้าน) */
.str-face-rect{fill:#131b24;stroke:#2b3a48;stroke-width:1;stroke-dasharray:4 3}
.str-ridge{stroke:#7fe3b4;stroke-width:1.6;stroke-dasharray:6 4}
.str-face-label{fill:#8fa6b8;font-size:10px}

/* การเงิน: โหมด TOU */
.fin-tou{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:4px 0 8px;padding:8px 10px;border-radius:8px;background:#0f171f;border:1px solid #22303c;font-size:11.5px;color:#c2ccd6}
.fin-tou input{accent-color:#2fd48f;margin-right:4px}
.fin-tou b{color:#7fe3b4;font-weight:600}

/* การเงิน: บิลค่าไฟย้อนหลัง */
.fin-bill{margin:6px 0 10px;padding:10px 12px;border-radius:9px;background:#0f171f;border:1px solid #2b6f5266}
.fin-bill-head label{display:block;font-size:12px;color:#dbe9f5;cursor:pointer}
.fin-bill-head label b{color:#7fe3b4}
.fin-bill-head input{accent-color:#2fd48f;margin-right:4px}
.fin-bill-head small{display:block;margin:4px 0 8px;font-size:10.5px;color:#8fa6b8;line-height:1.45}
.fin-bill-tb input{background:#0b1016;border:1px solid #2b3a48;color:#e6edf3;border-radius:5px;padding:4px 6px;font-size:12px;text-align:right}
.fin-bill-tb input[type=text]{text-align:left}
.fin-bill-tb td,.fin-bill-tb th{padding:5px 8px;font-size:11.5px}
.fin-bill-params{margin-top:8px}
.fin-bill-calc{margin-top:8px;padding:9px 12px;border-radius:8px;background:#0f1a15;border:1px solid #2fd48f55}
.fin-bill-calc h4{margin:0 0 6px;font-size:12px;color:#7fe3b4}
.fin-bill-calc ol{margin:0 0 8px 18px;padding:0;font-size:11.5px;color:#c2ccd6;line-height:1.7}
.fin-bill-calc ol b{color:#e6edf3}
.fin-bill-calc ol b.hl{color:#2fd48f;font-size:13px}
.fin-bill-mo td,.fin-bill-mo th{padding:4px 8px;font-size:11px}

/* การเงิน: เลือกโหมดข้อมูลค่าไฟ + สวิตช์ตาราง */
.fin-mode{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px;font-size:11.5px;color:#9fb3c4}
.fin-mode button{padding:5px 12px;border-radius:6px;border:1px solid #2b3a48;background:#0f171f;color:#c2ccd6;font-size:11.5px}
.fin-mode button.active{background:#2fd48f;border-color:#2fd48f;color:#08131a;font-weight:700}
.fin-mode small{color:#6f8394;flex-basis:100%}
.fin-tbl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fin-tbl-switch button{padding:4px 10px;font-size:11px;border-radius:6px;border:1px solid #2b3a48;background:#0f171f;color:#c2ccd6;margin-left:4px}
.fin-tbl-switch button.active{background:#2fd48f;border-color:#2fd48f;color:#08131a;font-weight:700}
.fin-work{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:6px 0 8px;font-size:11.5px;color:#c2ccd6}
.fin-work input{accent-color:#2fd48f;margin-right:4px}
.fin-work small{flex-basis:100%;color:#8fa6b8;font-size:10.5px}

/* กรอบ/ป้ายพื้นที่โซนในผังสตริง */
.str-zone-rect{fill:none;stroke:#e8c33a;stroke-width:1.3;stroke-dasharray:7 4;opacity:.85}
.str-zone-tag{fill:#e8c33a;opacity:.92}
.str-zone-label{fill:#100f0a;font-size:9.5px;font-weight:700}
.project-total .pt-sep{grid-column:1/-1;margin-top:8px;padding-top:7px;border-top:1px solid #22303c;font-size:9px;letter-spacing:.08em;color:#6f8394;font-weight:700}

/* แถบสรุปโครงการ: กันตัวหนังสือชนขอบ/เบียดกัน — ชื่อรุ่นยาวตัดขึ้นบรรทัดใหม่แบบมีช่องไฟ */
.project-total{padding:20px 12px 0}
.project-total dl{gap:8px}
.project-total dl div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:11px;line-height:1.45}
.project-total dt{flex:0 0 auto;color:#8fa6b8;white-space:nowrap}
.project-total dd{flex:1 1 auto;margin:0;text-align:right;word-break:break-word;overflow-wrap:anywhere;min-width:0}
.project-total>strong small{letter-spacing:0}

/* แถบซีนาริโอ */
.scen-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 4px;padding:9px 12px;border-radius:10px;background:#0f171f;border:1px solid #22303c}
.scen-title{font-size:11px;color:#8fa6b8;font-weight:700;letter-spacing:.04em;margin-right:2px}
.scen-chip{display:inline-flex;align-items:stretch;border:1px solid #2b3a48;border-radius:8px;overflow:hidden;background:#131c26}
.scen-chip.active{border-color:#2fd48f;box-shadow:0 0 0 1px #2fd48f55}
.scen-chip .scen-open{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:5px 10px;background:none;border:0;text-align:left}
.scen-chip b{font-size:11.5px;color:#dbe9f5;font-weight:600}
.scen-chip small{font-size:9.5px;color:#8fa6b8}
.scen-chip.active b{color:#7fe3b4}
.scen-x{background:none;border:0;border-left:1px solid #22303c;color:#6f8394;padding:0 8px;font-size:13px}
.scen-x:hover{color:#ff7b72}
.scen-act{font-size:11px;padding:6px 11px;border-radius:7px;border:1px solid #2b3a48;background:#131c26;color:#c2ccd6}
.scen-act.new{border-color:#2fd48f88;color:#7fe3b4}

/* ── กล่องตั้งค่าโซน (แทรกใต้การ์ดโซนที่เลือก) ──────────────────────────────
   grid item ค่าเริ่มต้นเป็น min-width:auto คือย่อต่ำกว่าความกว้างเนื้อหาไม่ได้
   ต้องปลดเป็น 0 ทุกชั้น ไม่งั้นกล่องดันตัวเองกว้างกว่าแผงขวา (335px) แล้วโดนตัดขวา */
.zone-list,.zone-list>*{min-width:0}
.zone-editor{min-width:0;border:1px solid var(--green);border-radius:2px 2px 10px 10px;background:#141c19;margin:0 0 6px;padding:11px 11px 5px}
.zone-editor .field-grid>*,.zone-editor .toggle-field>div{min-width:0}
.zone-chip.active:has(+.zone-editor){border-bottom-left-radius:2px;border-bottom-right-radius:2px}
/* หัวกล่อง: ชื่อโซนกินเต็มบรรทัดแรก ปุ่มไปเรียงบรรทัดถัดไปเสมอ — แคบแค่ไหนก็ไม่ล้น */
.zone-editor .zone-head{flex-wrap:wrap;gap:6px;margin-bottom:10px}
.zone-editor .zone-head>input:not(.dup-n){flex:1 1 100%;min-width:0}
.zone-editor .zone-head>button{flex:1 1 auto;min-width:0}
.zone-head input.dup-n{flex:0 0 46px;width:46px;min-width:46px;text-align:center;padding:9px 4px;font-size:12px;font-weight:600}

/* ── แถบบน: พับลงบรรทัดใหม่แทนที่จะดันทั้งหน้าให้กว้างเกินจอ ──────────────
   เดิม topbar เป็น flex ไม่ wrap + สูงตายตัว จอแคบกว่า ~1400px ทั้งหน้าเลยกว้าง
   เกินจอ ต้องเลื่อนซ้าย-ขวา แล้วแผงขวาโดนตัด (จอกว้างพอ ยังเรียงบรรทัดเดียวเหมือนเดิม) */
.topbar{flex-wrap:wrap;height:auto;min-height:78px;row-gap:8px;padding-top:10px;padding-bottom:10px}
.view-tabs,.top-actions{flex-wrap:wrap;min-width:0}

/* ── หัวพื้นที่ทำงาน: ชื่ออาคาร (เดิมกว้างตายตัว 65vw) + ปุ่มขวา รวมกันเกินคอลัมน์
   ช่วงจอ ~760–950px ทำให้ทั้งหน้าเลื่อนซ้าย-ขวา · ให้ชื่อย่อได้และพับบรรทัดแทน
   (จอ ≤760px ยังเป็นแบบเรียงลงเหมือนเดิม ไม่แตะ) */
@media (width>760px){
  .workspace-head{flex-wrap:wrap;min-width:0}
  .workspace-head input{flex:1 1 240px;width:auto;max-width:700px;min-width:0}
  .workspace-actions{flex-wrap:wrap;min-width:0}
}

/* ── บล็อกจับคู่สตริงขนานเข้า MPPT (หน้า "สตริง & สายไฟ") ── */
.mppt-pair{border:1px solid var(--line);border-radius:10px;background:var(--surface2);margin:10px 0;padding:13px 13px 3px}
.mppt-pair .el-metrics{background:var(--surface);margin-bottom:11px}
.mppt-pair .el-note{margin-bottom:10px}
.mppt-pair .el-note button{margin-left:6px}
.el-note.bad{border-left-color:#ff7b72;color:#ffb4ae;background:#2a1c1c}

/* ── หน้าโหลดหลังคา ── */
.el-table-scroll{overflow-x:auto}

/* ── หน้าผังการวางแผงในรายงาน ── */
.plan-wrap{border:1px solid #cdd9d2;border-radius:8px;overflow:hidden;background:#fff;margin-bottom:8px}
.plan-wrap svg{width:100%;height:auto;display:block}

/* ── บล็อกผลศึกษาทิศทาง/มุมเอียง (หน้าพลังงาน) ── */
.sun-study{display:block}
.sun-charts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.sun-ch{border:1px solid var(--line);border-radius:10px;background:var(--surface2);padding:8px}
.sun-ch svg{width:100%;height:auto;display:block}
.sun-ch svg text{fill:#c2ccd6}
.sun-ch svg line[stroke="#e3e9e5"]{stroke:#2b333d}
.sun-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px}
.sun-card{border:1px solid var(--line);border-radius:10px;background:var(--surface2);padding:11px 13px}
.sun-card b{display:block;font-size:13px;color:var(--text);margin-bottom:5px}
.sun-card span{font-size:11px;color:var(--muted);line-height:1.55}
.sun-card.warn{border-color:#e8912d66;background:#241c10}
.sun-card.warn b{color:#f0b429}
@media (width<=900px){.sun-charts,.sun-cards{grid-template-columns:1fr}}

/* ── โหมดพรีเซนต์ลูกค้า (?present=1) ─────────────────────────────────────
   ซ่อนเครื่องมือออกแบบทั้งหมด เหลือฉาก 3D เต็มจอ + แผงจำลองแสงอาทิตย์
   ลูกค้าเห็นเฉพาะภาพงานตัวเอง ไม่เห็น BOQ/ราคา/สเปกภายใน */
body.present-mode .topbar,
body.present-mode .building-sidebar,
body.present-mode .scen-bar,
body.present-mode .source-bar,
body.present-mode .inspector,
body.present-mode .quantity-section,
body.present-mode .standards,
body.present-mode .viewport-footer,
body.present-mode .rec-tool{display:none!important}
body.present-mode .app-shell{display:block;max-width:none}
body.present-mode .workspace{padding:10px 14px 14px}
body.present-mode .workspace-head{margin-bottom:8px}
body.present-mode .workspace-head input{font-size:clamp(20px,2.4vw,30px);pointer-events:none}
body.present-mode .workspace-actions{display:none}
body.present-mode .designer-grid{grid-template-columns:1fr;gap:0}
body.present-mode .viewport-card{border-radius:12px;overflow:hidden}
body.present-mode .three-host{height:calc(100vh - 250px);min-height:420px}
body.present-mode .pres-title{margin:0;padding:3px 0;font-size:clamp(22px,2.6vw,34px);font-weight:700;letter-spacing:-.03em;color:var(--text)}
.map-fallback{display:block;margin-top:5px;font-size:10px;color:#f0b429;line-height:1.5}
.pea-hint{display:block;margin-top:6px;font-size:10.5px;color:var(--muted);line-height:1.6}
.mppt-pick{background:var(--surface2);border:1px solid #39414d;color:var(--text);border-radius:6px;padding:3px 5px;font:inherit;font-size:11px;max-width:150px}
.mppt-pick.manual{border-color:var(--green);color:#7fe3b4}

/* ── แบบสำรวจหน้างาน & Requirement ลูกค้า ─────────────────────────────────── */
.sv-page .el-block h3{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.sv-cnt{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.sv-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;justify-content:space-between}
.sv-head>div:first-child{flex:1 1 340px;min-width:0}
.sv-head h3{border-bottom:0;padding-bottom:0;margin-bottom:8px}
.sv-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sv-actions button{font-size:12px;padding:9px 13px;background:var(--surface2);border:1px solid #39414d;color:var(--text);border-radius:8px}
.sv-actions button:hover{background:#2a3440}
.sv-actions button.primary{background:var(--green);border-color:var(--green);color:#0d1117;font-weight:700}
.sv-prog{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.sv-bar{width:110px;height:7px;border-radius:99px;background:var(--surface3);overflow:hidden}
.sv-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green2),var(--green));transition:width .25s}
.sv-prog b{color:var(--text);min-width:34px}
/* กริดยืดตามความกว้าง — ช่องข้อความยาว/ติ๊กหลายข้อ กินเต็มแถว จะได้ไม่ต้องเลื่อนซ้ายขวา */
.sv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:11px 16px;margin-top:11px}
.sv-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.sv-f.sv-a,.sv-f.sv-c{grid-column:1/-1}
.sv-lb{font-size:12px;font-weight:600;color:var(--text)}
.sv-f input[type=text],.sv-f input[type=number],.sv-f select,.sv-f textarea{
  width:100%;min-width:0;padding:8px 10px;border:1px solid #39414d;border-radius:7px;
  font:inherit;font-size:12px;color:var(--text);background:var(--surface2)}
.sv-f textarea{resize:vertical;line-height:1.5}
.sv-f input::placeholder{color:#5c6773}
.sv-f input:focus,.sv-f select:focus,.sv-f textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px #35d39a26}
.sv-num{display:flex;align-items:center;gap:7px}
.sv-num span{font-size:11px;color:var(--muted);white-space:nowrap}
.sv-hint{font-size:10.5px;color:var(--muted);line-height:1.45;opacity:.85}
.sv-pick{display:flex;flex-wrap:wrap;gap:6px}
.sv-pick button{padding:7px 12px;border:1px solid #39414d;border-radius:99px;background:var(--surface2);
  font:inherit;font-size:12px;color:var(--muted);cursor:pointer;transition:.15s}
.sv-pick button:hover{background:#2a3440;color:var(--text)}
.sv-pick button.active{border-color:var(--green);background:#14201c;color:var(--green);font-weight:700}
.sv-bpick{margin-bottom:11px}
/* ค่าที่โปรแกรมรู้แล้ว — อ่านอย่างเดียว ไว้เทียบกับของจริงหน้างาน */
.sv-known{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:1px 18px;
  margin:9px 0 4px;padding:11px 13px;border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:0 8px 8px 0;background:var(--surface2)}
.sv-known>div{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;padding:3px 0;min-width:0}
.sv-known span{color:var(--muted);white-space:nowrap}
.sv-known b{color:var(--text);text-align:right;word-break:break-word}
@media (width<640px){.sv-bar{width:76px}.sv-actions{width:100%}.sv-actions button{flex:1 1 auto}}

/* ── กล่องตั้งค่าการทำสำเนา (โซน/ราง/ทางเดิน) ── */
.zone-editor .dup-box{border:1px dashed #2f6f57;border-radius:9px;background:#101a17;margin:0 0 11px;padding:9px 9px 1px}
.zone-editor .dup-box .dup-box-title{display:block;margin-bottom:7px;font-size:11px;font-weight:700;color:#7fe3b4}
.zone-editor .dup-box .number-field{margin-bottom:7px}
.zone-editor .dup-box .walk-hint{margin:1px 0 8px}
.pat-box{border:1px solid #2f6f57;border-radius:10px;background:#101a17;margin:0 0 12px;padding:10px 10px 4px}
.pat-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:9px}
.pat-head b{font-size:12px;color:#7fe3b4}
.pat-steps{display:grid;gap:6px;margin:2px 0 8px}
.pat-row{display:flex;align-items:center;gap:5px;min-width:0;background:#0d1512;border:1px solid #24382f;border-radius:7px;padding:6px 7px}
.pat-row.walk{border-style:dashed;border-color:#4a3f27}
.pat-row>em{flex:0 0 42px;font-style:normal;font-size:10px;font-weight:700;color:#7fe3b4}
.pat-row.walk>em{color:#e0b877}
.pat-row select{flex:1 1 60px;min-width:0;background:#131c26;border:1px solid #2b3a48;border-radius:6px;color:#dbe4ea;padding:5px 3px;font-size:11px}
.pat-row input{flex:0 0 42px;width:42px;min-width:0;background:#131c26;border:1px solid #2b3a48;border-radius:6px;color:#dbe4ea;padding:5px 3px;font-size:11px;font-weight:700;text-align:center}
.pat-row input.pat-w{flex:0 0 58px;width:58px}
.pat-row>span{font-size:11px;color:#7b8c99}
.pat-row button{background:none;border:0;color:#7b8c99;padding:0 2px;font-size:13px;line-height:1}
.pat-row button:disabled{opacity:.25}
.pat-row .pat-x{color:#ff7b72;font-size:16px}
.pat-add{display:flex;gap:6px;margin-bottom:9px}
.pat-add button{flex:1 1 0;background:#131c26;border:1px dashed #2f6f57;border-radius:7px;color:#7fe3b4;padding:7px;font-size:11px;font-weight:700}
.pat-box .number-field{margin-bottom:6px}
.pat-box .toggle-field{margin-bottom:8px}
.pat-box .toggle-field>div{grid-template-columns:1fr 1fr;min-width:0}
.pat-box .toggle-field button{min-width:0}
.pat-box .walk-hint{margin:2px 0 9px}
.pat-actions{display:grid;gap:6px;margin-bottom:6px}
.pat-actions .auto-fill,.pat-actions .zone-add{width:100%;margin:0}
.pat-actions button:disabled{opacity:.4}

/* ── หน้าประตูผู้ออกแบบ / ลิงก์ลูกค้าใช้ไม่ได้ ── */
.gate-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:40px 22px;text-align:center;background:#0b1114;color:#dbe4ea}
.gate-screen .gate-brand{letter-spacing:.22em;font-size:10px;font-weight:700;color:#7fe3b4;margin-bottom:14px}
.gate-screen h1{font-size:clamp(22px,4vw,32px);font-weight:700;letter-spacing:-.02em;margin:0 0 8px}
.gate-screen p{font-size:13px;color:#9fb0bd;margin:0 0 4px;max-width:420px;line-height:1.7}
.gate-screen .gate-sub{font-size:11px;color:#6f8394;margin-top:18px}
.gate-screen .gate-err{color:#ff7b72;font-size:12px;margin-top:10px}
.gate-form{display:flex;gap:7px;margin-top:20px;width:100%;max-width:330px}
.gate-form input{flex:1 1 auto;min-width:0;background:#131c26;border:1px solid #2b3a48;border-radius:8px;color:#dbe4ea;padding:11px 13px;font-size:14px;outline:0}
.gate-form input:focus{border-color:#2fd48f}
.gate-form button{flex:0 0 auto;background:#2fd48f;border:0;border-radius:8px;color:#08201a;padding:11px 18px;font-size:13px;font-weight:700}

/* ── ช่องตัวเลขข้างสไลเดอร์ (พิมพ์ค่าเองได้) ── */
.slider b.slider-num{display:inline-flex;align-items:center;gap:3px}
.slider b.slider-num input{width:56px;min-width:0;background:var(--surface2,transparent);border:1px solid var(--line);border-radius:6px;color:inherit;font-size:12px;font-weight:700;text-align:right;padding:3px 6px;outline:0;appearance:textfield;-moz-appearance:textfield}
.slider b.slider-num input::-webkit-outer-spin-button,.slider b.slider-num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.slider b.slider-num input:focus{border-color:#2fd48f}
.str-opt-pick input.str-size-num{background:var(--surface2);border:1px solid #39414d;color:var(--text);font-size:12px;font-weight:700;padding:8px 6px;border-radius:8px;width:56px;text-align:center}
.str-opt-pick input.str-size-num:focus{border-color:#2fd48f;outline:0}

/* ── 05 ราวกันตก & Life-line · 06 บันไดขึ้นหลังคา ── */
.safety-sub{display:block;font-size:11px;color:var(--muted);margin:2px 0 5px}
.safety-edges{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:0 0 10px}
.safety-edges button{border:1px solid #39414d;background:var(--surface2);color:var(--text);border-radius:8px;padding:8px 6px;font-size:12px;min-width:0}
.safety-edges button.active{background:#e8b40c22;border-color:#e8b40c;color:#ffd166;font-weight:700}
.inspector-title .safety-add{margin-left:auto;font-size:12px;padding:6px 10px}
.ladder-card{border:1px solid #39414d;border-radius:10px;padding:10px 10px 4px;margin:0 0 10px;background:#121a22;min-width:0}
.ladder-head{display:flex;gap:6px;margin-bottom:9px;min-width:0}
.ladder-head input{flex:1 1 auto;min-width:0;background:var(--surface2);border:1px solid #39414d;border-radius:8px;color:var(--text);padding:8px 10px;font-weight:700}
.toggle-field>div.ladder-walls{grid-template-columns:repeat(4,1fr)}
.ladder-walls button{min-width:0;font-size:11px;padding:8px 2px}
.ladder-landing{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:end;min-width:0}
.ladder-landing button{margin-bottom:9px;white-space:nowrap}
.ladder-card .field-grid>*,.ladder-card .toggle-field>div{min-width:0}

/* ── ช่องเปิดราวกันตก (ทางขึ้นบันได) ── */
.rail-open{border:1px dashed #e8b40c66;border-radius:10px;padding:9px 9px 3px;margin:2px 0 10px;background:#1a170b55}
.rail-open-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.rail-open-head span{font-size:12px;font-weight:700;color:#ffd166}
.rail-open-card{border:1px solid #39414d;border-radius:8px;padding:8px 8px 2px;margin-bottom:8px;background:#121a22;min-width:0}
.rail-open-row{display:flex;align-items:center;gap:6px;margin-bottom:7px;min-width:0}
.rail-open-row span{font-size:11px;color:var(--muted);white-space:nowrap}
.rail-open-row select{flex:1 1 auto;min-width:0;background:var(--surface2);border:1px solid #39414d;border-radius:7px;color:var(--text);font-size:12px;padding:7px 6px}
.rail-open-row select:disabled{opacity:.6}
.rail-open-slide{display:block;margin-bottom:8px}
.rail-open-slide>span{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin-bottom:4px}
.rail-open-slide>span input{margin-left:auto;width:74px;background:var(--surface2);border:1px solid #39414d;border-radius:6px;color:var(--text);font-size:12px;font-weight:700;text-align:right;padding:4px 6px}
.rail-open-slide>input[type=range]{width:100%;accent-color:#e8b40c}
.rail-open-slide input:disabled{opacity:.55}
.ladder-gap-btn{width:100%;margin:0 0 9px;border-color:#e8b40c!important;color:#ffd166!important}
.ladder-gap-ok{color:#ffd166!important}

/* ── อินเวอร์เตอร์หลายรุ่น/หลายเครื่อง (หัวข้อ 04) ── */
.inv-list{margin:0 0 10px;min-width:0}
.inv-list-title{display:block;font-size:11px;color:var(--muted);margin-bottom:5px}
.inv-row{display:flex;gap:6px;align-items:center;margin-bottom:6px;min-width:0}
.inv-row select{flex:1 1 auto;min-width:0;background:var(--surface2);border:1px solid #39414d;border-radius:8px;color:var(--text);font-size:12px;padding:9px 8px}
.inv-qty{display:flex;align-items:center;flex:0 0 auto;border:1px solid #39414d;border-radius:8px;overflow:hidden;background:var(--surface2)}
.inv-qty button{background:none;border:0;color:#7fe3b4;font-size:15px;font-weight:700;width:26px;height:34px}
.inv-qty input{width:34px;background:none;border:0;border-left:1px solid #39414d;border-right:1px solid #39414d;color:var(--text);font-size:13px;font-weight:700;text-align:center;height:34px;-moz-appearance:textfield;appearance:textfield}
.inv-qty input::-webkit-outer-spin-button,.inv-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inv-del{flex:0 0 auto;background:none;border:1px solid #5c2b28;color:#ff7b72;border-radius:8px;width:30px;height:36px;font-size:16px}
.inv-del:disabled{opacity:.3}
.inv-actions{display:flex;gap:6px;margin:2px 0 4px}
.inv-actions .device-add{flex:1 1 0}
.inv-sum{color:#7fe3b4!important;margin-top:4px}

/* ── แถบรวมโครงการ: แยกตามจุดติดตั้ง (sub-array แบบ PVsyst) ── */
.pt-break{margin:10px 0 12px}
.ptb-bld{border-top:1px solid #232d38;padding:6px 0 4px}
.ptb-head{display:flex;justify-content:space-between;gap:6px;font-size:11.5px;margin-bottom:3px}
.ptb-head b{color:var(--text);font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptb-head span{color:#7fe3b4;font-weight:700;white-space:nowrap}
.ptb-face,.ptb-total,.ptb-inv{display:grid;grid-template-columns:1.3fr .8fr 1fr;gap:4px;font-size:10.5px;color:#9fb0bd;padding:1px 0 1px 8px}
.ptb-face span:nth-child(2),.ptb-face span:nth-child(3),.ptb-total span:nth-child(2),.ptb-total span:nth-child(3){text-align:right}
.ptb-face small{color:#6f8394;font-size:9.5px}
.ptb-inv{grid-template-columns:1fr auto;color:#7aa2f7;font-size:10px}
.ptb-inv span:last-child{text-align:right}
.ptb-total{border-top:1px dashed #3a4654;margin-top:4px;padding:5px 0 0;color:var(--text);font-weight:700;font-size:11px}
.ptb-total.ac{border-top:0;margin-top:0;padding-top:1px;color:#7aa2f7;font-weight:600}

/* ── Channel ลูกค้า ── */
.gate-form input.ch-pass{text-transform:uppercase;letter-spacing:.14em;font-weight:700;text-align:center}
.pres-bldgs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.pres-bldgs button{border:1px solid #39414d;background:var(--surface2);color:var(--text);border-radius:999px;padding:6px 14px;font-size:12px}
.pres-bldgs button.active{background:#2fd48f;border-color:#2fd48f;color:#08201a;font-weight:700}
.viewport-card:fullscreen{background:#0b1114;display:flex;flex-direction:column;border-radius:0;border:0}
.viewport-card:fullscreen .three-host{flex:1 1 auto;height:auto!important;min-height:0}
.ch-modal{max-width:680px;width:min(680px,94vw)}
.ch-cur{font-size:12.5px;color:#9fb0bd;margin:6px 0}
.ch-cur b{color:#7fe3b4}
.ch-list{display:grid;gap:6px;margin:10px 0;max-height:48vh;overflow:auto;padding-right:2px}
.ch-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid #2b3a48;border-radius:9px;padding:8px 10px;background:#121a22}
.ch-row.used{border-color:#3d5566}
.ch-row.mine{border-color:#2fd48f}
.ch-no{font-weight:800;color:#7fe3b4;font-size:12px;white-space:nowrap}
.ch-info{min-width:0}
.ch-info b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-info small{color:#8fa6b8;font-size:11px}
.ch-free{color:#6f8394;font-size:12px}
.ch-acts{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.ch-acts button{font-size:11.5px;padding:6px 10px;white-space:nowrap}
.ch-acts button:disabled{opacity:.45}
.ch-result{border:1px solid #2fd48f;background:#0f231b;border-radius:10px;padding:10px 12px;margin:8px 0;display:grid;gap:7px}
.ch-result b{color:#7fe3b4}
.ch-result small{color:#9fdcc2;font-size:11.5px}
.ch-result small.ch-warn{color:#ffb86b}
.ch-result .auto-fill{margin:0}
.ch-kv{display:flex;gap:8px;align-items:center;min-width:0}
.ch-kv>span{flex:0 0 34px;font-size:11px;color:#8fa6b8}
.ch-kv code{flex:1 1 auto;min-width:0;background:#0b1114;border:1px solid #2b3a48;border-radius:6px;padding:6px 8px;font-size:13px;color:#e6f7ef;overflow:auto;white-space:nowrap}
.ch-kv code.ch-pw{font-size:16px;font-weight:800;letter-spacing:.14em;color:#ffd166}