.editor-layout.without-json { grid-template-columns: minmax(0,1fr); }
.topology-toolbar-actions { display: flex; align-items: center; gap: 12px; }
.topology-toolbar-actions>span { color: #7896a1; font-size: 9px; }
.location-node { height: 145px; padding: 10px 12px 8px; }
.node-title { margin-top: 7px; font-size: 15px; }
.topology-node-id { display: flex; align-items: center; gap: 3px; margin-top: 5px; }
.topology-node-id code { font-family: var(--mono); font-size: 9px; color: #7da99c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topology-node-id code b { font-weight: 400; color: #a8ccc0; }
.topology-node-id>button { display: grid; place-items: center; width: 14px; height: 14px; color: #75998d; padding: 0; margin-left: auto; }
.topology-node-id>button:hover { color: #b2e6c3; }
.topology-node-id .icon { width: 8px; height: 8px; }
.node-meta { margin-top: 6px; padding-top: 6px; }
.node-meta .card-metric b { font-size: 13px; }
.node-meta .card-metric>span { font-size: 6.5px; }
.node-quick-actions { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.node-quick-actions>button { flex: 1; display: flex; justify-content: center; align-items: center; gap: 4px; color: #a9d9c0; font-size: 9px; height: 23px; padding: 0 4px; border: 1px solid #466e5d; border-radius: 4px; background: #244538; }
.node-quick-actions>button:hover { color: #ddf5d8; background: #3b6346; border-color: #7eae7b; }
.node-quick-actions>button>.icon { width: 10px; height: 10px; }
.node-model-links { top: 159px; }
.node-model-links:before { top: -14px; height: 14px; }
.location-node[data-id="loc-bangkok"] .node-model-links,.location-node[data-has-children="true"] .node-model-links { top: 13px; }
.model-link-chip { min-height: 104px; }
.topology-model-id { display: block; font-family: var(--mono); font-size: 9px; color: #8d7da7; margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topology-model-id b { font-weight: 400; color: #b4a3d0; }
.model-node-values { padding-top: 8px; }
.more-metrics { bottom: -11px; font-size: 6px; }
.topology-panel-actions { padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 7px; border-bottom: 1px solid #2d4248; background: #172a2b; }
.topology-panel-actions>button { display: inline-flex; align-items: center; gap: 4px; padding: 0; color: #98bfac; font-size: 8px; }
.topology-panel-actions>button:hover { color: #bfe8c1; }
.topology-panel-actions .icon { width: 11px; height: 11px; }
#node-editor {
  width: min(1120px,calc(100vw - 48px));
  max-width: none;
  height: min(850px,calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1px solid #496557;
  border-radius: 12px;
  background: #14232b;
  color: #c9ddd5;
  box-shadow: 0 24px 110px #0008;
  overflow: hidden;
}
#node-editor[open] { display: flex; flex-direction: column; }
#node-editor::backdrop { background: #030c16a3; backdrop-filter: blur(3px); }
.node-editor-header { padding: 17px 21px 13px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #30443d; background: #182a2c; flex-shrink: 0; }
.node-editor-header>.entity-icon { height: 39px; width: 39px; }
.node-editor-header>div { min-width: 0; }
.node-editor-header .eyebrow { font-size: 7px; letter-spacing: 1px; color: #7ea995; margin-bottom: 5px; }
.node-editor-header h2 { font-size: 20px; font-weight: 550; letter-spacing: -.5px; color: #d8ebe1; }
.node-editor-header>.status-badge { margin-left: 5px; font-size: 9px; }
.node-editor-header .node-editor-details { margin-left: auto; }
.node-editor-header .node-editor-close { margin-left: 5px; }
.node-editor-id { display: flex; align-items: center; gap: 6px; color: #8ab29e; margin-top: 6px; }
.node-editor-id code { font-family: var(--mono); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-editor-id>.icon-button { width: 18px; height: 18px; color: #7fae92; }
.node-editor-id .icon { width: 10px; height: 10px; }
.node-editor-tabs { display: flex; align-items: stretch; gap: 25px; height: 44px; padding: 0 21px; border-bottom: 1px solid #2c443c; background: #16262b; flex-shrink: 0; }
.node-editor-tabs>button { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #8ea8a7; padding: 0; position: relative; white-space: nowrap; }
.node-editor-tabs>button>.icon { width: 13px; height: 13px; }
.node-editor-tabs>button.active { color: #a8dcb5; }
.node-editor-tabs>button.active:after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: #81c995; }
.node-editor-body { display: grid; grid-template-columns: minmax(0,1fr) 350px; flex: 1; min-height: 0; }
.node-editor-main { min-height: 0; min-width: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #3f5d51 transparent; background: #14242c; }
.node-editor-json { min-width: 0; min-height: 0; border-left: 1px solid #304940; overflow: auto; background: #10232a; }
.node-editor-json>.json-panel { border: 0; border-radius: 0; margin: 0; display: flex; flex-direction: column; height: 100%; min-height: 370px; }
.node-editor-json .json-toolbar,.node-editor-json .json-filebar,.node-editor-json .json-footer { flex-shrink: 0; }
.node-editor-json .json-code { height: auto; flex: 1; min-height: 150px; font-size: 10px; }
.node-editor-json .json-impact { max-height: 300px; overflow: auto; scrollbar-width: thin; scrollbar-color: #466357 transparent; flex-shrink: 0; }
.node-editor-json .json-filename { display: none; }
.node-editor-json .json-actions>[data-action="toggle-json"] { display: none; }
.node-editor-main>.display-form { border: 0; border-radius: 0; box-shadow: none; margin: 0; background: transparent; }
.node-editor-main .display-form-heading { display: none; }
.node-editor-main .display-preview { border-top: 0; padding: 16px 18px; }
.node-editor-main .preview-value-label { font-size: 11px; }
.node-editor-main .preview-value>strong { font-size: 25px; }
.node-editor-main .preview-origin { font-size: 9px; }
.node-editor-main .mapping-labels { padding: 15px 17px 8px; font-size: 9px; }
.node-editor-main .binding-row { padding: 11px 17px 8px; }
.node-editor-main .mapping-field .input { font-size: 11px; height: 35px; }
.node-editor-main .binding-trace { font-size: 9px; }
.node-editor-main .binding-trace>button:not(.icon-button):not(.binding-threshold-button),.node-editor-main .binding-trace code { font-size: 8px; }
.node-editor-main .binding-toggles label { font-size: 8px; }
.node-editor-main .display-form-footer { padding: 13px 17px; }
.node-editor-main .display-form-footer .button { font-size: 9px; height: 30px; }
.node-editor-main .display-form-footer>span { font-size: 8px; }
.node-editor-main>.view-heading { font-size: 12px; }
.node-editor-main>.section-description { font-size: 11px; }
.node-editor-main .view-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 10px; padding: 0 17px 17px; }
.node-editor-main .metric-select { font-size: 11px; }
.node-editor-main .metric-config { padding: 19px 21px; }
.node-editor-main .source-content>strong { font-size: 11px; }
.node-editor-main .source-content>small { font-size: 9px; }
.node-editor-main .source-option { padding: 12px; }
.node-editor-main .source-device { margin: 0 21px; padding: 14px 0; }
.node-editor-main .source-device strong { font-size: 11px; }
.node-editor-main .source-device small { font-size: 9px; }
.node-editor-main .source-device>.status-badge { margin-left: auto; }
.node-editor-main .field-label { font-size: 11px; }
.node-editor-main .input { font-size: 12px; height: 37px; }
.node-editor-main .result-preview strong { font-size: 15px; }
.node-editor-main .threshold-inputs .input { font-size: 13px; height: 36px; }
.node-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 20px; border-top: 1px solid #31483d; background: #172c27; flex-shrink: 0; }
.node-editor-footer>span { display: flex; align-items: center; gap: 6px; font-size: 9px; color: #89b397; }
.node-editor-footer>span>.icon { width: 12px; height: 12px; }
.node-editor-footer>.button { height: 32px; min-width: 80px; font-size: 11px; }
.node-changes-intro { padding: 21px; }
.node-changes-intro h3 { font-size: 16px; color: #bddbc6; font-weight: 500; }
.node-changes-intro p { color: #8db29d; font-size: 11px; line-height: 1.9; margin-top: 9px; }
.node-editor-main>.json-impact { border-top: 1px solid #30483c; padding: 17px 21px; }
.node-editor-main .definition-changes { max-height: 260px; }
.node-editor-main .affected-nodes { max-height: 280px; }
.node-editor-main .definition-change>button { font-size: 9px; }
.node-editor-main .definition-change>div { font-size: 10px; }
.node-editor-main .affected-nodes summary { font-size: 10px; }
.is-demo #node-editor[open] { position: fixed; z-index: 104; top: 28px; left: 50%; transform: translateX(-50%); margin: 0; height: calc(100dvh - 255px); max-height: calc(100dvh - 255px); }
.is-demo #node-editor::backdrop { background: transparent; backdrop-filter: none; }
#demo-spotlight { z-index: 110; }
.is-demo #tooltip { z-index: 112; }
.source-standard-legend { padding: 15px 17px; background: #192c2b; border-bottom: 1px solid #354b40; }
.source-standard-legend>strong { display: block; font-size: 10px; color: #b6d0be; font-weight: 500; }
.source-standard-legend>div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 11px; }
.source-standard-legend>div>span { display: grid; grid-template-columns: 15px 1fr; gap: 4px 5px; align-items: center; border: 1px solid #345043; background: #1a342a; border-radius: 5px; padding: 8px; }
.source-standard-legend>div>span.active { border-color: #729f72; background: #2c4830; }
.source-standard-legend .icon { width: 13px; height: 13px; color: #98bd9b; }
.source-standard-legend b { font-size: 9px; color: #b6d5af; font-weight: 500; }
.source-standard-legend small { grid-column: span 2; font-size: 7px; color: #84a98c; line-height: 1.7; }
.source-standard-legend>button { display: flex; align-items: center; gap: 5px; padding: 0; margin-top: 10px; color: #91b59d; font-size: 8px; }
.source-standard-legend>button .icon { height: 10px; width: 10px; }
.contract-selection-intro { padding: 20px 20px 15px; }
.contract-selection-intro .eyebrow { color: #8dac9a; font-size: 7px; }
.contract-selection-intro h3 { color: #c4ddc8; font-size: 17px; font-weight: 500; letter-spacing: -.3px; }
.contract-selection-intro p { color: #8faf9e; font-size: 11px; line-height: 1.9; margin-top: 8px; }
.contract-payload-block { margin: 0 20px; border: 1px solid #374a5a; border-radius: 7px; overflow: hidden; background: #10212b; }
.contract-payload-block>div { display: flex; align-items: center; gap: 7px; padding: 10px 12px; border-bottom: 1px solid #2e4551; background: #1a2c37; }
.contract-step-number { font-family: var(--mono); font-size: 8px; display: grid; place-items: center; border: 1px solid #4a6270; border-radius: 4px; width: 18px; height: 18px; color: #b5cbd9; }
.contract-payload-block strong { font-size: 10px; color: #b9d2d5; font-weight: 500; }
.contract-payload-block small { font-size: 7px; color: #7f9cac; margin-left: auto; }
.contract-payload-block pre { padding: 12px 14px; margin: 0; font-family: var(--mono); font-size: 10px; line-height: 1.9; color: #99bbcd; max-height: 210px; overflow: auto; scrollbar-width: thin; scrollbar-color: #3f6071 transparent; }
.contract-publish-arrow { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 13px; color: #819f85; font-size: 7px; letter-spacing: 1px; }
.contract-publish-arrow .icon { height: 13px; width: 13px; }
.contract-payload-block.standard { border-color: #466b4b; background: #142c24; }
.contract-payload-block.standard>div { background: #25412f; border-color: #3e6041; }
.contract-payload-block.standard pre { color: #b2d2ad; scrollbar-color: #4c6c4a transparent; }
.published-options-heading { margin: 20px 20px 11px; font-size: 10px; font-weight: 500; color: #a5c2a3; }
.published-options-scroll { margin: 0 20px; overflow: auto; border: 1px solid #344d42; border-radius: 5px; }
.published-options-table { border-collapse: collapse; width: 100%; font-size: 10px; text-align: left; white-space: nowrap; }
.published-options-table th { padding: 10px; font-size: 8px; font-weight: 400; color: #85a78e; background: #1a3027; border-bottom: 1px solid #34503d; }
.published-options-table td { padding: 10px; border-bottom: 1px solid #2c4638; color: #adc9ae; font-family: var(--mono); }
.published-options-table tr:last-child td { border: 0; }
.published-options-table td:first-child { font-family: var(--font); }
.published-options-table td strong { display: block; font-size: 10px; font-weight: 400; }
.published-options-table td code { display: block; font-size: 8px; color: #7da385; margin-top: 5px; }
.published-options-table td.warning { color: #dfba78; }
.published-options-table td.critical { color: #e2a193; }
.published-options-table .status-badge { font-size: 7px; }
.contract-format-note { margin: 15px 20px; padding: 11px; border: 1px solid #39503c; border-radius: 5px; background: #223629; color: #98b18c; font-size: 9px; line-height: 1.9; }
.contract-format-note>.icon { height: 11px; width: 11px; margin-right: 4px; }
.contract-format-note code { font-size: 8px; color: #c0d2a7; }
.contract-link-locations { padding: 0 20px 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.contract-model-card { margin: 0 17px 16px; border: 1px solid #3b5144; border-radius: 7px; overflow: hidden; background: #172b25; }
.contract-model-card>div:first-child { display: flex; gap: 9px; align-items: center; padding: 13px; border-bottom: 1px solid #2c4437; }
.contract-model-card>div:first-child>.icon { height: 21px; width: 21px; color: #9cbba1; }
.contract-model-card>div:first-child>span { flex: 1; min-width: 0; }
.contract-model-card small { display: block; font-size: 7px; color: #84a38a; margin-bottom: 5px; }
.contract-model-card strong { display: block; font-size: 12px; font-weight: 500; color: #bdd1b9; }
.contract-model-card code { display: block; font-size: 8px; font-family: var(--mono); color: #7b9b83; margin-top: 5px; }
.contract-model-card .published-options-scroll { margin: 0; border: 0; border-radius: 0; }
.contract-model-card .button { font-size: 8px; }
.contract-go-select { margin: 0 20px 20px; }
@media(max-width:650px) {
  .source-standard-legend { padding: 12px; }
  .source-standard-legend>strong { font-size: 9px; }
  .source-standard-legend>div { gap: 5px; }
  .source-standard-legend>div>span { padding: 7px 5px; grid-template-columns: 10px 1fr; gap: 4px; }
  .source-standard-legend b { font-size: 7px; }
  .source-standard-legend .icon { width: 10px; height: 10px; }
  .source-standard-legend small { font-size: 6px; }
  .contract-selection-intro { padding: 17px 13px; }
  .contract-selection-intro h3 { font-size: 16px; }
  .contract-selection-intro p { font-size: 10px; }
  .contract-payload-block { margin: 0 12px; }
  .contract-payload-block>div { flex-wrap: wrap; gap: 5px; }
  .contract-payload-block small { margin-left: 23px; flex-basis: 100%; }
  .contract-payload-block pre { font-size: 9px; padding: 11px; }
  .published-options-scroll { margin: 0 12px; }
  .published-options-heading { margin-left: 12px; }
  .published-options-table { font-size: 9px; }
  .published-options-table td,.published-options-table th { padding: 9px 7px; }
  .published-options-table td strong { font-size: 9px; }
  .published-options-table td code { font-size: 7px; }
  .contract-format-note { margin: 13px 12px; font-size: 8px; }
  .contract-model-card { margin: 0 12px 13px; }
  .contract-model-card>div:first-child { flex-wrap: wrap; }
  .contract-model-card .button { margin-left: 28px; }
}
@media(min-width:1201px) { .diagram-canvas { height: 650px; } }
@media(max-width:1100px) {
  #node-editor { width: calc(100vw - 32px); }
  .node-editor-body { grid-template-columns: minmax(0,1fr) 305px; }
  .node-editor-tabs { gap: 20px; }
  .node-editor-tabs>button { font-size: 9px; }
  .node-editor-main .mapping-labels { display: none; }
  .node-editor-main .mapping-controls { grid-template-columns: 23px minmax(0,1fr) minmax(0,1fr); }
  .node-editor-main .mapping-field:nth-of-type(3) { grid-column: 2; }
  .node-editor-main .binding-toggles { grid-column: 3; flex-direction: row; gap: 10px; }
  .node-editor-main .mobile-field-label { display: block; font-size: 8px; color: #7f9e9d; margin-bottom: 5px; }
  .node-editor-main .mapping-controls>.slot-badge { align-self: start; margin-top: 20px; }
  .node-editor-main .trace-formula { display: none; }
  .node-editor-main .preview-values { grid-template-columns: repeat(auto-fit,minmax(115px,1fr)); }
  .node-editor-main .preview-value { display: block; }
  .node-editor-main .preview-value>strong { margin-top: 7px; font-size: 23px; }
}
@media(max-width:800px) {
  .node-editor-body { grid-template-columns: minmax(0,1fr) 275px; }
  .node-editor-tabs { gap: 15px; padding: 0 15px; }
  .node-editor-tabs>button { font-size: 8px; }
  .node-editor-tabs>button>.icon { width: 11px; height: 11px; }
  .node-editor-main .view-list { grid-template-columns: 1fr; }
  .node-editor-main .mapping-field .input { font-size: 10px; }
  .node-editor-main .binding-row { padding: 12px 11px 8px; }
  .node-editor-main .preview-value-label { font-size: 10px; }
}
@media(max-width:650px) {
  .topology-toolbar-actions { gap: 0; }
  .topology-toolbar-actions>span { display: none; }
  .canvas-toolbar .add-root-location { font-size: 8px; }
  .diagram-canvas { height: 520px; }
  #node-editor { width: calc(100vw - 16px); height: calc(100dvh - 20px); max-height: calc(100dvh - 20px); border-radius: 9px; }
  .node-editor-header { padding: 13px 12px 10px; gap: 8px; }
  .node-editor-header>.entity-icon { width: 30px; height: 30px; }
  .node-editor-header>.entity-icon .icon { width: 16px; height: 16px; }
  .node-editor-header .eyebrow { font-size: 6px; margin-bottom: 4px; }
  .node-editor-header h2 { font-size: 16px; }
  .node-editor-id { margin-top: 5px; gap: 3px; }
  .node-editor-id code { font-size: 7px; max-width: 180px; }
  .node-editor-header>.status-badge { display: none; }
  .node-editor-header .node-editor-details { width: 21px; height: 23px; }
  .node-editor-header .node-editor-close { width: 22px; height: 23px; margin-left: 0; }
  .node-editor-header .icon-button>.icon { width: 13px; height: 13px; }
  .node-editor-tabs { padding: 0 12px; gap: 15px; height: 40px; overflow-x: auto; scrollbar-width: none; }
  .node-editor-tabs>button { font-size: 8px; gap: 4px; }
  .node-editor-tabs>button>.icon { width: 10px; height: 10px; }
  .node-editor-body { display: block; overflow: auto; scrollbar-width: thin; }
  .node-editor-main { overflow: visible; }
  .node-editor-json { border-left: 0; border-top: 1px solid #355243; overflow: visible; }
  .node-editor-json>.json-panel { height: 460px; min-height: 0; }
  .node-editor-main .preview-values { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
  .node-editor-main .preview-value-label { font-size: 9px; }
  .node-editor-main .preview-value>strong { font-size: 22px; }
  .node-editor-main .preview-origin { font-size: 7px; }
  .node-editor-main .binding-row { padding: 12px 11px 7px; }
  .node-editor-main .mapping-field .input { font-size: 10px; height: 35px; }
  .node-editor-main .binding-trace { font-size: 8px; }
  .node-editor-main .display-form-footer { padding: 13px 12px; }
  .node-editor-main .display-form-footer .button { font-size: 8px; height: 28px; }
  .node-editor-main .display-form-footer>span { font-size: 7px; }
  .node-editor-main .metric-config { padding: 17px 14px; }
  .node-editor-main .view-list { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0 12px 13px; gap: 5px; }
  .node-editor-main .metric-select { font-size: 9px; gap: 5px; }
  .node-editor-main .metric-value { font-size: 11px; margin-right: 2px; }
  .node-editor-footer { padding: 10px 12px; gap: 8px; }
  .node-editor-footer>span { font-size: 8px; }
  .node-editor-footer>.button { height: 30px; min-width: 65px; font-size: 10px; }
  .is-demo #node-editor[open] { top: 12px; height: calc(100dvh - 250px); max-height: calc(100dvh - 250px); }
}