:root {
  color-scheme: dark;
  --bg: #0c121b;
  --paper: #131c29;
  --ink: #dce5f0;
  --muted: #8493a7;
  --line: #253143;
  --teal: #59dbb9;
  --teal-dark: #36b894;
  --teal-light: #16392f;
  --green: #69d4a5;
  --amber: #e7b56d;
  --red: #ed9790;
  --purple: #b9a0ed;
  --blue: #84b4ed;
}
body { background: var(--bg); color: var(--ink); }
::selection { background: #235a4b; color: #e2fff4; }
.sidebar { background: #0f1722; border-color: #253044; }
.brand { color: #e3edf7; }
.brand-mark { background: #194d40; color: #76e5c3; box-shadow: 0 0 0 1px #2b6957; }
.brand-lab { color: #62bca8; }
.brand small { color: #71889b; }
.workspace-switch { background: #151f2c; border-color: #2a3749; }
.workspace-switch strong { color: #d2ddea; }
.workspace-switch small, .sample-badge { color: #8294a8; }
.sample-badge { border-color: #344252; }
.workspace-icon { background: #21362f; border-color: #345147; color: #84baa4; }
.nav-label, .explorer-title { color: #71869a; }
.nav-item { color: #8c9db1; }
.nav-item.active { background: #18382f; color: #76dfbe; }
.nav-item:hover { background: #182c2a; color: #7ce2c1; }
.nav-count { color: #9bacc3; border-color: #364557; }
.nav-active-dot { background: #6ce2bd; }
.tree-row, .tree-label { color: #94a6b9; }
.tree-row.selected { background: #193229; color: #8ce0bc; }
.tree-row:hover, .tree-model:hover { background: #1b2937; }
.tree-row.selected:before { background: #5bc299; }
.tree-label>.icon { color: #849e95; }
.tree-model { color: #97a2bb; }
.tree-model .icon { color: #b1a1ce; }
.tree-model.selected { background: #2c2440; color: #cab4e7; }
.tree-add-model { width: 19px; height: 23px; display: grid; place-items: center; color: #789389; flex-shrink: 0; padding: 0; }
.tree-add-model .icon { width: 11px; height: 11px; }
.tree-add-model:hover { background: #274c3f; color: #9ee8c6; border-radius: 4px; }
.location-tree { scrollbar-color: #3b4b5c transparent; }
.help-card { background: #14251f; border-color: #2a4237; }
.help-card-icon, .help-card strong { color: #a4ccae; }
.help-card p { color: #86a38d; }
.help-card button { color: #8cd5ae; }
.workspace-footer { border-color: #293444; }
.workspace-footer strong { color: #bbccda; }
.workspace-footer small { color: #7891a2; }
.avatar { background: #243930; border-color: #14231d; color: #b0d2b6; box-shadow: 0 0 0 1px #3a5143; }
.topbar { background: #101925; border-color: #273345; }
.breadcrumb, .breadcrumb>.icon { color: #758ca1; }
.breadcrumb strong { color: #bdcbdc; }
.save-state, .save-state .icon { color: #7fbd9b; }
.guide-button { color: #92a5ba; }
.guide-button:hover { color: #9cdec4; }
.version { color: #8da7a0; background: #1c2c27; border-color: #30463d; }
.page-heading h1 { color: #e1eaf5; font-size: 28px; }
.page-heading p { color: #8497ab; }
.eyebrow { color: #829ba9; }
.button.primary { background: #47cda6; border-color: #47cda6; color: #09261d; box-shadow: 0 2px 8px #0002; font-weight: 650; }
.button.primary:hover { background: #77e5c3; border-color: #77e5c3; }
.button.secondary { background: #192433; border-color: #324254; color: #b4c4d4; box-shadow: none; }
.button.secondary:hover { background: #223c35; border-color: #4f8974; color: #a6e7cb; }
.icon-button { color: #849ab0; }
.icon-button:hover { background: #253a3a; color: #8bdec2; }
.stat-card { background: #131d2a; border-color: #263346; box-shadow: none; }
.stat-label { color: #91a4b8; font-size: 11px; }
.stat-number { color: #e2ecf7; }
.stat-number>span { color: #8095a8; font-size: 9px; }
.teal { color: #65cbae; background: #193c33; }
.purple { color: #ba9fe4; background: #302741; }
.blue { color: #8cb6e7; background: #1e3048; }
.amber { color: #e6b973; background: #3a3021; }
.green { color: #76d6ab; background: #1b3a2c; }
.red { color: #eea09b; background: #3d282c; }
.workspace-toolbar { border-color: #2b384a; }
.workspace-tab { color: #889db4; font-size: 11px; }
.workspace-tab.active, .workspace-tab:hover { color: #7cdbb8; }
.workspace-tab.active:after { background: #65d6ae; }
.sample-indicator { color: #8ab29b; }
.button.json-active { color: #82e1bd; background: #193b31; border-color: #315a48; }
.key-hint { border-color: #3b6854; color: #8dc6a7; }
.surface { background: #131c29; border-color: #2a374a; box-shadow: 0 5px 18px #0000000c; }
.canvas-toolbar { background: #172230; border-color: #2a394d; height: 48px; }
.canvas-title { color: #c2d2e2; font-size: 12px; }
.canvas-title>.icon { color: #81a998; }
.count-badge { color: #88b09a; background: #1c3028; border-color: #304b3c; font-size: 8px; }
.canvas-note { color: #849b90; font-size: 10px; }
.canvas-note strong { color: #adc6b7; }
.page-footer, .page-footer>span:first-child { color: #667e8e; font-size: 8px; }
.show-json-bar { background: #162b24; border-color: #304e3d; color: #91b59c; font-size: 10px; }
.diagram-canvas { height: 620px; background-color: #101a23; background-image: radial-gradient(#2a4148 .8px,transparent .8px); }
.canvas-kicker { color: #77948f; }
.canvas-hint { color: #7e9d93; }
.legend-line { background: #537c69; }
.legend-dash { border-color: #816597; }
.connection { stroke: #3c6352; stroke-width: 1.6; }
.connection.active { stroke: #74b594; }
.connection-port { fill: #1a3128; stroke: #4c7c5d; }
.connection-port.active { fill: #32563b; stroke: #9ccc9e; }
.location-node { width: 208px; height: 110px; background: #172c2b; border-color: #38584b; box-shadow: 0 4px 12px #0002; padding: 11px 12px; }
.location-node:hover { border-color: #6aab8c; box-shadow: 0 4px 16px #0003; }
.location-node.is-selected { background: #1b3831; border-color: #81cba5; box-shadow: 0 0 0 3px #4e9d6a24; }
.location-node.is-selected:after { background: #264e38; border-color: #8fcfa6; }
.node-type { font-size: 9px; color: #8fb6a6; }
.node-type-icon, .node-type-icon.country, .node-type-icon.building, .node-type-icon.room { color: #9abbb1; }
.node-title { font-size: 16px; color: #deeee7; margin-top: 9px; }
.node-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 9px; gap: 7px; border-top: 1px solid #304e43; padding-top: 7px; }
.node-meta .card-metric, .node-meta .card-metric:last-child { display: flex; flex-direction: column; align-items: flex-start; margin: 0; gap: 4px; overflow: hidden; }
.node-meta .card-metric b { font-family: var(--mono); font-size: 14px; font-weight: 500; }
.node-meta .card-metric>span { font-size: 7px; color: #91b3a2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.node-meta .card-metric i { font-style: normal; color: #bdcc9c; margin-right: 3px; }
.node-meta .card-metric.healthy { color: #8bd5b0; }
.node-meta .card-metric.warning { color: #ecc47d; }
.node-meta .card-metric.critical { color: #eea393; }
.more-metrics { position: absolute; bottom: -11px; right: 1px; color: #b1caa7; font-size: 7px; }
.node-model-links { top: 124px; }
.node-model-links:before { border-color: #9474ae; top: -14px; height: 14px; }
.location-node[data-id="loc-bangkok"] .node-model-links, .location-node[data-has-children="true"] .node-model-links { left: calc(100% + 25px); top: 8px; width: 208px; right: auto; }
.location-node[data-has-children="true"] .node-model-links:before { left: -25px; top: 35px; width: 25px; height: 0; border: 0; border-top: 1px dashed #9474ae; }
.model-link-chip { display: block; background: #26243a; border-color: #72618e; color: #c6b5dd; min-height: 88px; padding: 9px 10px; border-style: dashed; font-size: 9px; }
.model-link-chip:hover, .model-link-chip.is-selected { background: #352c48; border-color: #bd9ed8; color: #e5cff8; }
.model-node-heading { display: flex; align-items: center; gap: 5px; }
.model-node-heading .icon { width: 12px; height: 12px; }
.model-node-heading strong { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.model-node-heading .status-dot { margin-left: auto; width: 4px; height: 4px; }
.model-node-values { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding-top: 10px; }
.model-node-values>span { display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; }
.model-node-values b { font-size: 14px; font-family: var(--mono); font-weight: 500; color: #d3c2ea; }
.model-node-values small { color: #9e90b8; font-size: 6.5px; margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.model-node-footer { display: flex; justify-content: space-between; margin-top: 8px; font-size: 5.5px; letter-spacing: 1px; color: #9980b2; }
.model-node-footer .icon { height: 8px; width: 8px; }
.canvas-legend { background: #14211f; border-color: #2c4136; color: #8aa697; }
.legend-right { color: #819c8b; }
.zoom-controls { background: #1b3028; border-color: #3b5542; color: #a0b49d; }
.zoom-controls button:hover { background: #35533c; color: #c5e1b7; }
.zoom-controls>i { background: #3b5241; }
.status-dot.healthy { background: #74c69c; }
.status-dot.warning { background: #e7ba74; }
.status-dot.critical { background: #e69b8a; }
.status-dot.unknown { background: #768c9a; }
.status-badge { font-size: 9px; padding: 4px 6px; }
.status-badge.healthy { color: #96d4aa; background: #203c2d; }
.status-badge.warning { color: #e4be7b; background: #3c3423; }
.status-badge.critical { color: #e9a594; background: #432d2d; }
.status-badge.unknown { color: #a2b3c0; background: #293643; }
.healthy { color: #92d4b1; }
.warning, .metric-value.warning { color: #e8ba73; }
.critical, .metric-value.critical { color: #ee9b91; }
.unknown, .metric-value.unknown { color: #8ba0b4; }
.input { background: #0e1824; border-color: #33445a; color: #c8d6e6; font-size: 11px; height: 34px; }
.input::placeholder { color: #637d94; }
.input:focus, input:focus, select:focus { border-color: #6cd5ae; outline-color: #3d896e; }
select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='m2 4 3 3 3-3' stroke='%239fb7ce' fill='none' stroke-width='1.3'/%3E%3C/svg%3E"); }
option, optgroup { background: #15212f; color: #c3d3e4; }
input[type="checkbox"] { accent-color: #54cda3; cursor: pointer; }
.field-label { color: #a6b9cb; font-size: 11px; }
.field-label-row>span { color: #7e99af; font-size: 9px; }
.inspector { top: 16px; max-height: calc(100dvh - 32px); scrollbar-color: #3a4c60 transparent; }
.inspector-label { color: #839aaf; font-size: 9px; }
.inspector-label>span { color: #76b592; }
.inspector-header h2 { color: #dce9f6; font-size: 18px; }
.entity-kind, .entity-description { color: #8da2b8; }
.entity-description { font-size: 11px; }
.entity-id code { color: #7f9cb0; font-size: 9px; }
.inspector-tabs { border-color: #2a3b4c; padding: 0 16px; gap: 21px; }
.inspector-tabs button { color: #879eb4; font-size: 10px; }
.inspector-tabs button.active { color: #82dfb7; }
.inspector-tabs button.active:after { background: #76d3a6; }
.view-heading { color: #c1d2df; }
.view-heading>span { color: #829caf; }
.section-description { color: #8ba1b3; font-size: 10px; }
.metric-row { min-height: 35px; }
.metric-row.active { background: #21392e; border-color: #3c6348; }
.metric-row:hover { background: #1c302c; }
.metric-select { color: #b5c8d8; font-size: 11px; }
.metric-value { color: #a5cfab; font-size: 12px; }
.metric-config { border-color: #2b3d4b; }
.config-title { color: #87a78e; font-size: 8px; }
.metric-id { background: #20342a; color: #8caf8c; border-color: #3c5440; }
.source-option { background: #17271f; border-color: #2e4636; }
.source-option:hover { background: #223a29; }
.source-options { border-color: #364d3b; }
.source-content>strong { color: #bad0b4; font-size: 10px; }
.source-content>small { color: #8ca881; font-size: 8px; }
.source-content>strong .icon { color: #9cba8e; }
.source-value { color: #d1c68e; font-size: 12px; }
.source-note { color: #8da97e; font-size: 8px; }
.source-field { background: #19291e; border-color: #3a5035; }
.source-field code { color: #b6cd9b; font-size: 9px; }
.source-field>span { color: #8da579; font-size: 8px; }
.threshold-inputs>label>span { color: #a7ba96; font-size: 10px; }
.result-preview { background: #223323; border-color: #425c39; color: #afd19d; }
.result-preview.warning { background: #3b3223; border-color: #6b5830; color: #e7c57d; }
.result-preview.critical { background: #3c2a2b; border-color: #725046; color: #edb099; }
.result-preview.unknown { background: #28323c; border-color: #46535c; color: #a8bac5; }
.result-preview>div>span { font-size: 8px; }
.result-preview strong { font-size: 12px; }
.result-preview strong small { font-size: 8px; }
.configure-display-link { display: flex; align-items: center; gap: 7px; margin-top: 15px; color: #91bf91; padding: 0; font-size: 9px; line-height: 1.8; }
.configure-display-link .icon { width: 11px; height: 11px; }
.configure-display-link .icon:last-child { margin-left: auto; }
.inspector-footer { background: #18241d; border-color: #30432f; color: #8ba77e; font-size: 8px; }
.json-panel { background: #0d1920; border-color: #2b4350; }
.json-toolbar { background: #182b34; border-color: #2b4350; }
.json-title strong { color: #c9e2e7; font-size: 11px; }
.json-braces { color: #80b7b1; }
.json-live { background: #233e35; color: #9aca9f; }
.json-actions>.icon-button { color: #8bafb5; }
.json-actions>.icon-button:hover { color: #c0dfc8; background: #314e43; }
.json-filebar { background: #14262e; border-color: #284049; }
.json-scope-tabs>button { color: #7f9da1; font-size: 9px; }
.json-scope-tabs>button.active { color: #9dd8bd; }
.json-filename { color: #779fa5; font-size: 8px; }
.json-code { color: #9db7b7; font-size: 11px; scrollbar-color: #3b5d59 transparent; }
.json-key { color: #a9d3d2; }
.json-string { color: #bdce94; }
.json-number { color: #e5b67e; }
.json-literal { color: #c4a6e1; }
.json-ref { color: #87cddc; border-color: #4b7884; }
.json-ref:hover { color: #c2ecfa; background: #254d55; }
.code-line:hover { background: #1e3339; }
.line-number { color: #526f7d; font-size: 9px; }
.json-footer { background: #142a2b; border-color: #2b4545; color: #719f9b; font-size: 8px; }
.inspector .json-code { height: 430px; font-size: 10px; }
.node-tooltip { background: #172a30; border-color: #3b5657; color: #d1e2dc; box-shadow: 0 10px 40px #0006; width: 290px; }
.tooltip-heading { border-color: #30494a; }
.tooltip-heading>strong { font-size: 12px; }
.tooltip-heading>.icon { color: #8eb6a3; }
.tooltip-subtitle { color: #86a99a; font-size: 8px; }
.tooltip-metric { color: #aac4b1; padding: 8px 0; }
.tooltip-metric>span { min-width: 0; padding-right: 8px; }
.tooltip-metric b { display: block; font-weight: 500; font-size: 11px; }
.tooltip-metric small { display: block; color: #7fa194; font-size: 8px; margin-top: 4px; overflow-wrap: anywhere; }
.tooltip-metric>strong { color: #9fceaa; font-size: 13px; }
.tooltip-metric>strong.warning { color: #e3bd7c; }
.tooltip-metric>strong.critical { color: #e6a68e; }
.tooltip-footer { color: #83aa91; border-color: #304a42; font-size: 9px; }
.forms-intro { padding: 23px 21px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.forms-intro .eyebrow { font-size: 8px; color: #719f99; margin-bottom: 7px; }
.forms-intro h3 { font-size: 22px; font-weight: 500; letter-spacing: -.6px; color: #d5e9e8; }
.forms-intro p { margin-top: 8px; font-size: 11px; line-height: 1.9; color: #8ea7af; }
.form-live-badge { padding: 6px 8px; font-size: 7px; letter-spacing: 1px; color: #92bda4; background: #1b352a; border: 1px solid #2f5440; border-radius: 4px; display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.form-live-badge i { width: 4px; height: 4px; border-radius: 50%; background: #8cc99e; }
.display-forms { display: flex; flex-direction: column; gap: 20px; padding: 0 17px 20px; }
.display-form { border: 1px solid #304354; border-radius: 8px; background: #15212e; overflow: hidden; scroll-margin-top: 18px; }
.display-form.is-active { border-color: #457968; box-shadow: 0 0 0 1px #42735a30; }
.display-form-heading { padding: 14px 14px 13px; display: flex; gap: 10px; align-items: center; }
.form-number { color: #92c5a8; background: #243e31; border: 1px solid #3c5944; font-family: var(--mono); font-size: 10px; height: 29px; width: 29px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; }
.form-category { font-size: 9px; color: #88a6b3; display: block; margin-bottom: 5px; }
.owner-select-label { display: flex; gap: 6px; align-items: center; color: #c4ddd4; }
.owner-select-label>.icon { width: 13px; height: 13px; color: #8fb6a5; }
.owner-select-label>.icon:last-child { width: 10px; height: 10px; }
.owner-select-label>select { background: transparent; color: #d7e8e3; font-size: 13px; font-weight: 550; border: 0; appearance: none; padding: 0; max-width: 260px; cursor: pointer; }
.form-json-button { margin-left: auto; display: flex; align-items: center; gap: 4px; border: 1px solid #355044; border-radius: 4px; padding: 5px 7px; font-size: 8px; color: #9cc9b0; }
.form-json-button .icon { width: 11px; height: 11px; }
.form-json-button:hover { background: #264c39; }
.display-preview { background: #112327; border-top: 1px solid #2c4448; border-bottom: 1px solid #2b4447; padding: 10px 14px 13px; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; color: #769c9f; font-size: 7px; letter-spacing: .7px; }
.preview-heading>span { display: flex; align-items: center; gap: 4px; }
.preview-heading .icon { width: 10px; height: 10px; }
.preview-heading>span:last-child { font-size: 8px; letter-spacing: 0; }
.preview-values { display: grid; grid-template-columns: repeat(auto-fit,minmax(125px,1fr)); gap: 14px 18px; margin-top: 12px; }
.preview-value { min-width: 0; }
.preview-value-label { font-size: 10px; color: #a5c3bd; display: flex; align-items: center; gap: 5px; line-height: 1.5; }
.preview-value-label i { font-family: var(--mono); font-style: normal; color: #8fb590; font-size: 8px; border: 1px solid #335148; padding: 0 3px; border-radius: 3px; }
.preview-value>strong { display: flex; align-items: baseline; gap: 5px; font-size: 23px; font-family: var(--mono); font-weight: 500; letter-spacing: -.7px; margin-top: 7px; color: #b0e1ca; }
.preview-value>strong.warning { color: #efc77e; }
.preview-value>strong.critical { color: #f0a79d; }
.preview-value>strong small { font-size: 8px; color: #7eaaa0; font-family: var(--font); font-weight: 400; letter-spacing: 0; }
.preview-origin { display: flex; align-items: center; gap: 4px; color: #7fa79d; font-size: 8px; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-origin .icon { width: 9px; height: 9px; }
.preview-empty { font-size: 10px; color: #7fa89d; padding: 10px 0; }
.mapping-labels, .mapping-controls { display: grid; grid-template-columns: 23px minmax(0,1.15fr) minmax(0,1fr) minmax(0,.85fr) 70px; gap: 8px; align-items: center; }
.mapping-labels { color: #718fa6; font-size: 8px; padding: 13px 13px 7px; }
.binding-row { padding: 9px 13px 6px; border-bottom: 1px solid #263c4c; }
.binding-row:last-child { border-bottom: 0; }
.slot-badge { height: 23px; width: 23px; background: #263b37; border: 1px solid #46604f; border-radius: 5px; font-family: var(--mono); color: #b3d3ac; font-size: 10px; display: grid; place-items: center; }
.mapping-field { min-width: 0; }
.mapping-field .input { height: 33px; font-size: 10px; padding-left: 7px; }
.mobile-field-label { display: none; }
.binding-toggles { display: flex; flex-direction: column; gap: 5px; }
.binding-toggles label { display: flex; align-items: center; gap: 4px; cursor: pointer; color: #9ab2b2; font-size: 7.5px; }
.binding-toggles input { width: 10px; height: 10px; margin: 0; }
.binding-toggles .icon { width: 9px; height: 9px; color: #7d9d9c; }
.binding-trace { display: flex; align-items: center; gap: 5px; margin: 8px 0 0 31px; color: #6f94a6; font-size: 8px; min-height: 21px; flex-wrap: wrap; }
.trace-label { font-family: var(--mono); color: #a7c0a3; }
.binding-trace>button:not(.icon-button):not(.binding-threshold-button) { padding: 0; color: #a3c4d4; font-size: 8px; border-bottom: 1px dotted #3c667a; }
.trace-separator { color: #516d7c; }
.binding-trace code { font-family: var(--mono); color: #87c2bc; font-size: 8px; }
.trace-formula { color: #7a91a4; font-family: var(--mono); font-size: 7px; margin-left: 2px; }
.binding-trace>strong { font-family: var(--mono); font-size: 10px; font-weight: 500; }
.binding-threshold-button { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font-size: 7px; color: #a7a9cc; padding: 3px 5px; border: 1px solid #3d405c; border-radius: 4px; background: #25283d; }
.binding-threshold-button:hover { background: #37394f; color: #d7c9e9; }
.binding-threshold-button .icon { width: 9px; height: 9px; }
.remove-binding.icon-button { width: 19px; height: 19px; }
.remove-binding .icon { width: 10px; height: 10px; }
.binding-details { margin-left: 31px; color: #7f9eab; }
.binding-details>summary { display: flex; align-items: center; gap: 4px; list-style: none; cursor: pointer; font-size: 7px; width: fit-content; padding: 5px 0; }
.binding-details>summary::-webkit-details-marker { display: none; }
.binding-details>summary .icon { height: 9px; width: 9px; }
.binding-details>summary .icon:last-child { width: 8px; height: 8px; }
.binding-details[open]>summary .icon:last-child { transform: rotate(180deg); }
.binding-details>div { padding: 8px 10px; border: 1px solid #2c4650; background: #102028; border-radius: 5px; margin: 2px 0 7px; }
.origin-path { display: flex; flex-direction: column; gap: 5px; padding: 7px 0; border-bottom: 1px solid #27404a; }
.origin-path>span { font-size: 7px; color: #6f97a4; }
.origin-path>button { display: flex; align-items: center; gap: 4px; color: #b3c4db; padding: 0; font-size: 9px; width: fit-content; }
.origin-path .icon { width: 11px; height: 11px; }
.origin-path code { font-size: 8px; color: #83b8bc; }
.binding-rule-summary { font-size: 7px; color: #a6b7a3; margin-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.binding-rule-summary button { display: flex; align-items: center; gap: 3px; font-size: 7px; padding: 0; color: #c0c19f; }
.binding-rule-summary .icon { height: 9px; width: 9px; }
.display-form-footer { border-top: 1px solid #2b3f4e; padding: 11px 13px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; background: #172532; }
.display-form-footer .button { font-size: 8px; height: 26px; padding: 0 7px; }
.display-form-footer .button .icon { width: 11px; height: 11px; }
.display-form-footer>span { font-size: 7px; color: #7993a1; margin-left: auto; }
.inspector-display-preview { background: #142628; padding: 12px 16px; border-top: 1px solid #2c4243; border-bottom: 1px solid #2c4243; }
.inspector-display-preview .preview-heading>button { color: #90b99a; font-size: 8px; padding: 0; }
.inspector-display-preview .preview-heading>button>.icon { margin-left: 3px; }
.inspector-display-value { display: flex; align-items: center; gap: 7px; padding-top: 11px; }
.inspector-display-value>i { font-family: var(--mono); font-size: 8px; font-style: normal; color: #b5ca9d; background: #263b2f; border: 1px solid #3d5740; border-radius: 3px; width: 17px; height: 17px; display: grid; place-items: center; flex-shrink: 0; }
.inspector-display-value>span:nth-child(2) { flex: 1; min-width: 0; }
.inspector-display-value strong { font-size: 10px; font-weight: 400; color: #bfd3c6; display: block; }
.inspector-display-value small { display: block; font-size: 7px; color: #789e8a; margin-top: 4px; overflow-wrap: anywhere; }
.inspector-display-value>b { font-size: 12px; font-weight: 500; font-family: var(--mono); color: #b4d7b2; }
.inspector-display-value>b.warning { color: #e2c17a; }
.inspector-display-value>b.critical { color: #e5ab98; }
.display-channels { display: flex; gap: 4px; color: #719c7e; min-width: 22px; }
.display-channels>.icon { width: 9px; height: 9px; }
.links-section .info-callout, .info-callout { background: #1c2d21; border-color: #3b5035; color: #a4bd93; }
.source-device, .linked-model, .linked-location, .hierarchy-detail { border-color: #2c4039; }
.source-device { cursor: pointer; }
.source-device>input { margin: 0; width: 12px; height: 12px; }
.source-device>span { flex: 1; }
.source-device strong, .linked-model strong, .linked-location { color: #b8ceb1; }
.source-device small, .linked-model small { color: #8fa982; }
.source-device>.icon { color: #90ad81; }
.hierarchy-detail { color: #90a980; }
.hierarchy-detail strong, .hierarchy-detail>button { color: #b5d29d; }
.table-filters { border-color: #2e4146; }
.search-field>input { background: #14222b; border-color: #334c50; color: #b1cbca; font-size: 10px; }
.search-field>input::placeholder { color: #708e93; }
.device-table th { background: #152b2b; border-color: #304b44; color: #98b99e; font-size: 8px; }
.device-table td { border-color: #2c4240; color: #b1c8ac; }
.device-table tbody tr:hover { background: #1b302a; }
.device-name strong { color: #b9cfb2; font-size: 10px; }
.device-name small { color: #809f82; font-size: 8px; }
.type-tag { color: #9fbc97; background: #23392a; border-color: #3c5540; font-size: 8px; }
.util-cell { color: #a0c78b; font-size: 9px; }
.util-cell>div { background: #2b4431; }
.util-cell.high { color: #e0b777; }
.table-footer { border-color: #304b3e; color: #91ae92; font-size: 8px; }
.library-intro h3, .schema-content h3 { color: #c8deba; }
.library-intro p, .schema-content .schema-lead { color: #93af8d; }
.library-intro .eyebrow, .schema-content .eyebrow { color: #7da47e; }
.model-card { background: #192820; border-color: #3b513d; }
.model-card:hover, .model-card.selected { background: #24382a; border-color: #7fa574; box-shadow: 0 0 0 2px #668e4b16; }
.model-card h3 { color: #c3dcb2; font-size: 13px; }
.model-card-type { color: #8dad77; }
.model-card p { color: #91b17e; font-size: 9px; }
.model-card-values { gap: 14px; flex-wrap: wrap; }
.model-card-values>span { color: #9ab982; font-size: 8px; }
.model-card-values strong { color: #d0e9b9; font-size: 19px; }
.model-card-footer { border-color: #3e5638; color: #85a36c; }
.model-card-footer>span:last-child { color: #b2cf91; }
.contract-box { background: #1c3020; border-color: #405d36; }
.contract-box>span { color: #bfdba5; }
.contract-box>code { color: #a5c28a; }
.contract-box>small { color: #789c62; }
.contract-junction { background: #332e21; border-color: #6a5b35; }
.contract-junction>span { color: #d3bf88; }
.contract-junction>code, .contract-junction>small { color: #aa9a70; }
.contract-box.purple-border { background: #30263a; border-color: #665178; }
.contract-box.purple-border>span { color: #d2b9e4; }
.contract-box.purple-border>code, .contract-box.purple-border>small { color: #ac93c2; }
.contract-arrow { color: #9fbb7e; }
.schema-principles { border-color: #344b32; }
.schema-principles strong { color: #b9d39d; }
.schema-principles p { color: #95b27f; }
.schema-principles>div>span { color: #6f9356; }
.dictionary-table, .dictionary-table td { color: #b0c995; border-color: #425835; }
.dictionary-table th { color: #95b477; background: #23351e; border-color: #425835; }
.schema-metric-title { color: #88a96b; }
dialog { background: #17232d; border-color: #3c5457; box-shadow: 0 25px 100px #0007; color: #d8e5e8; }
dialog::backdrop { background: #050c16b0; }
.modal-header h2 { color: #d8e8e2; }
.modal-subtitle { color: #93b1a4; }
.modal-footer { background: #142b27; border-color: #354b41; }
.modal-content .input { background: #102027; border-color: #3a5553; color: #c3ddd2; }
.form-field { color: #a5c3ae; }
.guide-steps>div>span { background: #263d28; border-color: #415c36; color: #a2c78b; }
.guide-steps p { color: #a0be8c; }
.guide-steps strong { color: #c1dca9; }
.guide-note { background: #23351f; border-color: #425a32; color: #9eb97f; }
.guide-note strong { color: #c5daab; }
.aggregation-guide p { color: #a5c38f; }
.aggregation-guide strong { color: #c0dc9f; }
.add-choices>button { border-color: #3f5944; color: #b4d1b6; }
.add-choices>button:hover { background: #243d2b; border-color: #84a77c; }
.add-choices strong { color: #c4debb; }
.add-choices small { color: #90b68a; }
.empty-state, .empty-source { color: #91a8ad; }
#toast { background: #244d3b; border: 1px solid #4b7d58; color: #d3f3cf; box-shadow: 0 5px 25px #0005; }
.impact-banner { display: flex; align-items: center; gap: 8px; background: #172d2c; border: 1px solid #31514b; border-radius: 6px; padding: 9px 12px; margin: -1px 0 15px; color: #8fbaa9; font-size: 9px; }
.impact-banner>.icon { width: 14px; height: 14px; color: #8ed2ae; }
.impact-banner>span:first-of-type { display: flex; align-items: center; gap: 10px; }
.impact-banner strong { font-weight: 500; color: #bddbc8; }
.impact-banner code { color: #83b6b5; font-family: var(--mono); font-size: 8px; }
.impact-banner-count { margin-left: auto; font-size: 8px; color: #89a99b; }
.impact-banner>button { display: flex; align-items: center; gap: 5px; padding: 0; font-size: 9px; color: #b3d2a2; }
.impact-banner>button>.icon { width: 11px; height: 11px; }
.json-impact { padding: 12px; background: #17262a; border-bottom: 1px solid #324a4b; }
.json-impact-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 8px; }
.json-impact-heading>strong { display: flex; align-items: center; gap: 5px; color: #b5d1b3; font-size: 8px; letter-spacing: .5px; font-weight: 500; }
.json-impact-heading .icon { width: 12px; height: 12px; }
.json-impact-heading>span { color: #84a29b; font-family: var(--mono); font-size: 7px; }
.changed-sections { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.changed-sections>span { font-family: var(--mono); font-size: 8px; color: #a9d2c7; border: 1px solid #3b5a50; background: #20392e; padding: 3px 6px; border-radius: 4px; }
.definition-changes { max-height: 150px; overflow: auto; margin-top: 9px; scrollbar-width: thin; scrollbar-color: #3c5b52 transparent; }
.definition-change { border-top: 1px solid #2d4446; padding: 8px 0; }
.definition-change>button { display: block; padding: 0; text-align: left; color: #a5cacf; font-family: var(--mono); font-size: 7px; overflow-wrap: anywhere; line-height: 1.9; }
.definition-change>button:hover { color: #d5eee5; text-decoration: underline; }
.definition-change>div { display: flex; align-items: flex-start; gap: 6px; font-family: var(--mono); font-size: 8px; margin-top: 5px; overflow-wrap: anywhere; line-height: 1.8; }
.definition-change del { color: #d0948b; background: #452e2b; border-radius: 3px; padding: 0 4px; text-decoration-color: #b8756a; max-width: 45%; }
.definition-change ins { color: #a4d4aa; background: #263f2b; border-radius: 3px; padding: 0 4px; text-decoration: none; max-width: 45%; }
.definition-change>div>span { color: #789c91; }
.affected-heading { display: flex; justify-content: space-between; align-items: center; gap: 6px; border-top: 1px solid #354b44; padding-top: 10px; margin-top: 4px; color: #99b39b; font-size: 8px; }
.affected-heading>span { color: #7e9a86; font-size: 7px; }
.affected-nodes { margin-top: 6px; max-height: 150px; overflow: auto; scrollbar-width: thin; scrollbar-color: #425b4c transparent; }
.affected-nodes details { border-bottom: 1px solid #2b423c; }
.affected-nodes summary { display: flex; align-items: center; gap: 5px; cursor: pointer; padding: 6px 0; color: #b2ccbd; font-size: 8px; list-style: none; }
.affected-nodes summary::-webkit-details-marker { display: none; }
.affected-nodes summary>span { display: flex; align-items: center; gap: 4px; margin-left: auto; font-size: 6px; color: #7e9c87; }
.affected-nodes summary .icon { width: 8px; height: 8px; }
.affected-nodes details>div { background: #10221e; border: 1px solid #2d463a; border-radius: 4px; padding: 6px; margin-bottom: 5px; }
.affected-nodes details>div>div { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 5px 0; font-size: 7px; color: #9cbd9f; }
.affected-nodes details>div>div>span:first-child { flex: 1; min-width: 85px; }
.affected-nodes small { display: block; font-size: 6px; color: #648f73; margin-top: 3px; }
.affected-nodes code { color: #b8d6b2; font-size: 7px; font-family: var(--mono); }
.affected-nodes>p { color: #819e8e; font-size: 8px; line-height: 1.9; margin-top: 7px; }
.code-line.json-changed { background: #32402a; border-left: 2px solid #c8bf70; }
.code-line.json-changed .line-number { color: #d5ca85; margin-left: -2px; }
.code-line.json-changed code { color: #d1d5a3; }
.inspector .json-impact+.json-filebar+.json-code { height: 290px; }
@media(max-width:650px) { .impact-banner { flex-wrap: wrap; font-size: 9px; padding: 10px; } .impact-banner-count { margin-left: 21px; font-size: 8px; } .impact-banner>button { margin-left: auto; font-size: 9px; } .definition-change>button { font-size: 8px; } .definition-change>div { font-size: 9px; } .json-impact-heading>strong { font-size: 9px; } .affected-heading { font-size: 9px; } .affected-nodes summary { font-size: 9px; } }
@media(min-width:1201px) { .editor-layout { grid-template-columns: minmax(0,1fr) 338px; } }
@media(min-width:1600px) { .editor-layout { grid-template-columns: minmax(0,1fr) 370px; } .display-forms { padding: 0 23px 23px; } .mapping-field .input { font-size: 11px; } .mapping-labels { font-size: 9px; } .forms-intro { padding: 25px; } }
@media(max-width:1200px) { .editor-layout { grid-template-columns: minmax(0,1fr) 290px; } .display-forms { padding: 0 11px 14px; gap: 16px; } .forms-intro { padding: 19px 14px; } .mapping-labels { display: none; } .mapping-controls { grid-template-columns: 23px minmax(0,1fr) minmax(0,1fr); gap: 7px; } .mapping-field:nth-of-type(3) { grid-column: 2; } .binding-toggles { grid-column: 3; flex-direction: row; gap: 12px; } .binding-trace { margin-left: 30px; gap: 5px; } .trace-formula { display: none; } .binding-details { margin-left: 30px; } .binding-row { padding: 12px 11px 8px; } .forms-intro h3 { font-size: 19px; } .forms-intro p { font-size: 10px; } .form-live-badge { display: none; } .mobile-field-label { display: block; color: #7799a8; font-size: 7px; margin-bottom: 5px; } .mapping-controls>.slot-badge { align-self: start; margin-top: 20px; } .mapping-field .input { font-size: 10px; } .preview-values { gap: 13px 10px; grid-template-columns: repeat(auto-fit,minmax(95px,1fr)); } .preview-value-label { font-size: 8px; } .preview-origin { font-size: 7px; } .preview-value>strong { font-size: 21px; } .display-form-footer>span { margin-left: 0; flex-basis: 100%; margin-top: 2px; } .owner-select-label>select { font-size: 12px; max-width: 180px; } .display-form-heading { padding: 13px 11px; gap: 8px; } .form-category { font-size: 8px; } .form-number { width: 25px; height: 25px; font-size: 9px; } .inspector-tabs { gap: 15px; } .inspector-tabs button { font-size: 9px; } .inspector-display-preview { padding: 11px 13px; } .inspector-display-value strong { font-size: 9px; } .inspector-display-value small { font-size: 7px; } .inspector-display-value>b { font-size: 11px; } .inspector-header h2 { font-size: 16px; } .inspector-label { font-size: 8px; } .stat-number>span { font-size: 7px; } .stat-label { font-size: 10px; } .diagram-canvas { height: 560px; } }
@media(max-width:1020px) { .editor-layout { grid-template-columns: minmax(0,1fr) 265px; } .preview-values { grid-template-columns: 1fr; gap: 12px; } .preview-value { display: grid; grid-template-columns: 1fr auto; align-items: center; } .preview-value>strong { grid-row: span 2; margin: 0; font-size: 20px; } .preview-origin { grid-row: 2; margin-top: 3px; } .mapping-field .input { font-size: 9px; } .forms-intro h3 { font-size: 17px; } .forms-intro p { font-size: 9px; } .stat-label { font-size: 9px; } .stat-number>span { font-size: 7px; } .workspace-tabs { gap: 15px; } .workspace-tab { font-size: 9px; } .display-form-heading { flex-wrap: wrap; } .form-json-button { padding: 4px 5px; font-size: 7px; } .owner-select-label>select { max-width: 150px; font-size: 11px; } .display-form-footer .button { font-size: 7px; padding: 0 6px; } .binding-trace { font-size: 7px; } .binding-trace>button:not(.icon-button):not(.binding-threshold-button) { font-size: 7px; } .binding-trace code { font-size: 7px; } .binding-threshold-button { font-size: 6px; } .preview-value-label { font-size: 10px; } .inspector-tabs button { font-size: 8px; } .inspector-tabs { gap: 13px; } .inspector-display-value strong { font-size: 8px; } .inspector-display-value small { font-size: 6px; } }
@media(max-width:800px) { .editor-layout { grid-template-columns: minmax(0,1fr) 280px; } .stat-number>span { font-size: 7px; } .canvas-title { font-size: 10px; } .canvas-title>.count-badge { display: none; } .workspace-tabs { gap: 16px; } .workspace-tab { font-size: 9px; } }
@media(max-width:650px) { .editor-layout { grid-template-columns: 1fr; } .page-heading h1 { font-size: 27px; } .stat-label { font-size: 10px; } .stat-number>span { font-size: 7px; } .stat-number { font-size: 25px; } .workspace-tabs { gap: 13px; } .workspace-tab { font-size: 9px; gap: 4px; } .workspace-tab .icon { width: 11px; height: 11px; } .button.json-active { font-size: 9px; } .forms-intro { padding: 20px 15px; } .forms-intro h3 { font-size: 21px; } .forms-intro p { font-size: 10px; } .display-forms { padding: 0 11px 15px; gap: 17px; } .display-form-heading { flex-wrap: nowrap; } .form-number { width: 28px; height: 28px; font-size: 10px; } .form-category { font-size: 9px; } .owner-select-label>select { max-width: 165px; font-size: 12px; } .form-json-button { font-size: 8px; padding: 5px 6px; } .preview-values { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; } .preview-value { display: block; } .preview-value-label { font-size: 8px; gap: 3px; } .preview-value-label i { font-size: 7px; padding: 0 2px; } .preview-value>strong { font-size: 20px; margin-top: 7px; display: block; } .preview-value>strong small { display: block; font-size: 7px; margin-top: 2px; } .preview-origin { font-size: 7px; margin-top: 6px; display: block; white-space: normal; overflow-wrap: anywhere; line-height: 1.6; } .preview-origin .icon { margin-right: 2px; } .preview-heading { font-size: 6px; } .preview-heading>span:last-child { font-size: 7px; } .display-preview { padding-left: 11px; padding-right: 11px; } .mapping-field .input { font-size: 10px; height: 35px; } .mobile-field-label { font-size: 8px; } .mapping-controls { grid-template-columns: 22px minmax(0,1fr) minmax(0,1fr); gap: 8px; } .binding-toggles { gap: 10px; flex-wrap: wrap; } .binding-toggles label { font-size: 8px; } .binding-toggles input { width: 12px; height: 12px; } .binding-toggles .icon { width: 10px; height: 10px; } .binding-trace { margin-left: 30px; gap: 5px; font-size: 8px; } .binding-trace>button:not(.icon-button):not(.binding-threshold-button) { font-size: 8px; } .binding-trace code { font-size: 8px; } .binding-trace>strong { font-size: 10px; } .binding-threshold-button { margin-left: 0; font-size: 7px; } .binding-details>summary { font-size: 8px; padding: 7px 0; } .binding-rule-summary { font-size: 8px; line-height: 1.8; } .origin-path>span { font-size: 8px; } .origin-path>button { font-size: 10px; } .origin-path code { font-size: 8px; } .display-form-footer .button { font-size: 8px; height: 28px; } .display-form-footer>span { font-size: 8px; } .inspector { position: static; max-height: none; } .inspector-header h2 { font-size: 20px; } .entity-description { font-size: 11px; } .inspector-tabs { gap: 24px; height: 45px; } .inspector-tabs button { font-size: 11px; } .inspector-display-preview { padding: 15px 18px; } .inspector-display-value { padding-top: 14px; gap: 9px; } .inspector-display-value strong { font-size: 12px; } .inspector-display-value small { font-size: 9px; } .inspector-display-value>b { font-size: 14px; } .inspector-display-value>i { width: 21px; height: 21px; font-size: 10px; } .display-channels>.icon { width: 11px; height: 11px; } .inspector .json-code { font-size: 10px; height: 470px; } .metric-select { font-size: 12px; } .metric-value { font-size: 13px; } .field-label { font-size: 11px; } .input { font-size: 12px; height: 38px; } .source-content>strong { font-size: 11px; } .source-content>small { font-size: 9px; } .source-device strong { font-size: 11px; } .source-device small { font-size: 9px; } .source-device>input { height: 14px; width: 14px; } .source-field code { font-size: 10px; } .threshold-inputs>label>span { font-size: 11px; } .result-preview strong { font-size: 14px; } .configure-display-link { font-size: 10px; } .diagram-canvas { height: 480px; } .canvas-legend { font-size: 8px; } .canvas-hint { font-size: 8px; } .canvas-kicker { font-size: 7px; } .canvas-note { font-size: 9px; } .table-footer { font-size: 7px; } .device-table th { font-size: 7px; } .device-name strong { font-size: 9px; } .device-name small { font-size: 7px; } }