:root {
    color-scheme: dark;
    font-family: "Segoe UI", Arial, sans-serif;
    background: #080d10;
    color: #eef4f5;
    font-synthesis: none;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { overflow: hidden; background: #080d10; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }

/* RenderTreeBuilder fields do not receive the page's scoped CSS attribute. */
.field-label { display: grid; gap: 4px; margin-bottom: 9px; color: #93a8af; font-size: 11px; }
.field-label input { width: 100%; min-width: 0; height: 30px; border: 1px solid #30444c; border-radius: 3px; padding: 4px 7px; color: #eef4f5; background: #070d10; }
.field-label input:focus { outline: 1px solid #32d8e6; border-color: #32d8e6; }

.loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto; margin: 0 auto; }
.loading-progress circle { fill: none; stroke: #20323a; stroke-width: .55rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: #32d8e6; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; transition: stroke-dasharray .05s ease-in-out; }
.loading-progress-text { position: absolute; inset: calc(20vh + 3.25rem) 0 auto; text-align: center; font-weight: 700; }
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Loading"); }

#blazor-error-ui { display: none; position: fixed; z-index: 1000; inset: auto 0 0; padding: .8rem 1rem; background: #6e2428; color: white; }
#blazor-error-ui .reload { color: white; margin-left: 1rem; }
#blazor-error-ui .dismiss { float: right; border: 0; background: transparent; color: white; }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(2, 7, 9, .82); backdrop-filter: blur(3px); }
.modal-window { width: min(96vw, 1580px); height: min(94vh, 980px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid #36515a; border-radius: 6px; background: #091216; box-shadow: 0 24px 80px rgba(0, 0, 0, .65); }
.modal-window.compact-modal { width: min(720px, 94vw); height: auto; max-height: 90vh; }
.modal-header, .modal-footer { display: flex; align-items: center; gap: 9px; padding: 12px 16px; background: #101d22; }
.modal-header { justify-content: space-between; border-bottom: 1px solid #2a4149; }
.modal-header h2 { margin: 1px 0 0; font-size: 20px; }
.modal-header-actions { display: flex; align-items: center; gap: 12px; }
.modal-close { width: 34px; height: 34px; border: 1px solid #3b5159; border-radius: 4px; color: #d9e7e9; background: #17262c; font-size: 18px; }
.modal-content { min-height: 0; overflow: auto; padding: 14px; }
.modal-footer { justify-content: flex-end; border-top: 1px solid #2a4149; }
.footer-note { margin-right: auto; color: #8ca1a8; font-size: 11px; }
.command.danger { background: #782d31; border-color: #a94046; }
.section-toolbar { min-height: 54px; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid #2a4048; }
.section-toolbar > div:first-child { min-width: 0; margin-right: auto; }
.section-toolbar h3 { margin: 0; font-size: 15px; }
.section-toolbar span { color: #8da1a8; font-size: 10px; }
.config-section { min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #293e46; background: #0c171c; }
.tool-config-content { overflow: hidden; }
.tool-config-split { height: 100%; display: grid; grid-template-columns: minmax(560px, 1.15fr) minmax(460px, .85fr); gap: 12px; }
.tool-config-split > .config-section { display: grid; grid-template-rows: auto minmax(150px, 1fr) auto; }
.tool-config-split > .material-section { grid-template-rows: auto auto minmax(0, 1fr); }
.dense-table { min-width: 0; overflow: auto; background: #070d10; }
.dense-row { display: grid; min-width: max-content; border-bottom: 1px solid #263940; }
.dense-row > * { min-width: 0; min-height: 30px; padding: 5px 7px; border: 0; border-right: 1px solid #263940; color: #dce8ea; background: transparent; font-size: 11px; text-align: left; }
.dense-row > *:last-child { border-right: 0; }
.tool-library-head, .tool-library-row { grid-template-columns: 74px 120px 54px minmax(170px, 1fr) 92px 92px; width: 100%; }
.tool-library-head > *, .offset-head > * { display: flex; align-items: center; color: #a9bbc0; background: #16262c; font-weight: 700; }
button.tool-library-row { cursor: pointer; }
.tool-library-row:hover > * { background: #122229; }
.tool-library-row.selected > * { color: white; background: #1d5360; }
.editor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 11px; border-top: 1px solid #293e46; }
.editor-grid label { min-width: 0; display: grid; gap: 4px; color: #8fa5ac; font-size: 10px; }
.editor-grid label.wide { grid-column: span 2; }
.editor-grid input, .editor-grid select, .dense-row input, .dense-row select { width: 100%; min-width: 0; height: 29px; border: 1px solid #30464e; border-radius: 3px; padding: 4px 6px; color: #edf4f5; background: #070d10; }
.editor-grid .toggle-field { display: flex; align-items: center; gap: 7px; min-height: 29px; padding-top: 14px; }
.editor-grid .toggle-field input { width: 16px; height: 16px; }
.setting-tabs { min-height: 45px; display: flex; align-items: center; gap: 3px; overflow-x: auto; padding: 8px; border-bottom: 1px solid #293e46; }
.setting-tabs button { min-width: max-content; border: 1px solid #30464e; border-radius: 3px; padding: 6px 9px; color: #9bb0b6; background: #111e23; }
.setting-tabs button.active { color: white; background: #246e7d; }
.setting-editor { align-content: start; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: auto; border-top: 0; }
.offset-editor-section { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.offset-head, .offset-row { grid-template-columns: 58px 58px 190px 70px 90px 90px 76px 76px 76px 180px; }
.offset-row .fixed-cell { display: grid; place-items: center; color: #f0cc64; background: #101d22; }
.offset-row input:disabled { color: #829399; background: #11191d; }
.alarm-list { display: grid; gap: 8px; padding: 18px; }
.alarm-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; border: 1px solid #2a4048; border-radius: 4px; background: #0d191e; }
.alarm-row input { width: 17px; height: 17px; margin-top: 2px; accent-color: #2fd4e1; }
.alarm-row span { display: grid; gap: 3px; }
.alarm-row strong { font-size: 13px; }
.alarm-row small { color: #8fa3aa; line-height: 1.35; }

.profile-modal { width: min(820px, 94vw); }
.profile-content { display: grid; gap: 13px; }
.profile-create-row, .profile-selected-actions { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 9px; align-items: end; }
.profile-create-row label, .profile-selected-actions label { min-width: 0; display: grid; gap: 5px; color: #91a6ad; font-size: 11px; }
.profile-create-row input, .profile-selected-actions input { width: 100%; min-width: 0; height: 36px; border: 1px solid #344c55; border-radius: 3px; padding: 6px 9px; color: #edf5f6; background: #070d10; }
.profile-message { padding: 9px 11px; border-left: 3px solid #35d587; color: #cfead9; background: #10251b; font-size: 11px; }
.profile-message.error { border-left-color: #ef5d58; color: #f1c5c3; background: #291416; }
.profile-list { max-height: 380px; overflow: auto; border: 1px solid #2b4149; background: #070d10; }
.profile-row { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-bottom: 1px solid #273b42; padding: 9px 11px; color: #e7f0f1; background: #0c171c; text-align: left; }
.profile-row:last-child { border-bottom: 0; }
.profile-row:hover { background: #12262d; }
.profile-row.selected { background: #1b5360; }
.profile-row span { min-width: 0; display: grid; gap: 3px; }
.profile-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-row small { color: #8fa4aa; font-size: 10px; }
.profile-row code { color: #e8c55e; font-size: 10px; }
.profile-selected-actions { grid-template-columns: minmax(180px, 1fr) auto auto auto; padding-top: 2px; }

.setup-modal { width: min(96vw, 1080px); height: min(82vh, 760px); }
.offset-setup-modal { width: min(96vw, 1160px); }
.setup-screen { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 0; overflow: hidden; padding: 0; }
.setup-form { min-width: 0; overflow: auto; padding: 24px; }
.setup-section-heading { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid #2a4048; }
.setup-section-heading h3 { margin: 3px 0 0; font-size: 18px; }
.setup-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 680px; }
.setup-field { min-width: 0; display: grid; gap: 5px; color: #94a8ae; font-size: 11px; }
.setup-field input { width: 100%; min-width: 0; height: 38px; border: 1px solid #344b54; border-radius: 3px; padding: 6px 9px; color: #f1f6f7; background: #070d10; }
.setup-field input:focus, .work-offset-row input:focus { outline: 1px solid #32d8e6; border-color: #32d8e6; }
.setup-readout { min-width: 0; overflow: auto; padding: 24px; border-left: 1px solid #2a4048; background: #0d191e; }
.stock-profile-preview { position: relative; height: 150px; margin: 22px 0 26px; overflow: hidden; border-left: 22px solid #aeb7b8; border-right: 10px solid #505c60; background: #071014; }
.stock-bar-preview { position: absolute; inset: 47px -1px; border: 2px solid #f0cf69; background: #b4872f; }
.stock-centerline { position: absolute; inset: 50% 0 auto; border-top: 1px dashed #71858b; }
.setup-readout dl { margin: 0; }
.setup-readout dl div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid #283c44; }
.setup-readout dt { color: #8fa4aa; font-size: 11px; }
.setup-readout dd { margin: 0; color: #f0ca62; font-weight: 700; }
.work-offset-table { overflow: auto; border: 1px solid #2b4149; }
.work-offset-row { min-width: 610px; display: grid; grid-template-columns: 80px repeat(3, minmax(130px, 1fr)); border-bottom: 1px solid #2b4149; }
.work-offset-row:last-child { border-bottom: 0; }
.work-offset-row > * { min-width: 0; min-height: 42px; display: flex; align-items: center; padding: 6px 9px; border: 0; border-right: 1px solid #2b4149; color: #e6eff0; background: #081014; }
.work-offset-row > *:last-child { border-right: 0; }
.work-offset-row strong { justify-content: center; color: #35d9e5; background: #111f24; }
.work-offset-row input { width: 100%; }
.work-offset-head > * { min-height: 35px; color: #9aadb3; background: #16262c; font-size: 10px; font-weight: 700; }
.machine-coordinate-row output { color: #94a7ad; background: #0b1519; }
.coordinate-position-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.coordinate-position-grid div { min-width: 0; display: grid; gap: 4px; padding: 12px; border-left: 3px solid #2ecbd7; background: #101e23; }
.coordinate-position-grid span { color: #859ba2; font-size: 10px; }
.coordinate-position-grid strong { overflow: hidden; color: #e6eef0; font: 12px Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.jog-panel { display: grid; align-content: start; gap: 20px; }
.jog-axis-selector { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #344b54; border-radius: 4px; overflow: hidden; }
.jog-axis-selector button { height: 42px; border: 0; border-right: 1px solid #344b54; color: #9eb0b5; background: #111e23; font-weight: 700; }
.jog-axis-selector button:last-child { border-right: 0; }
.jog-axis-selector button.active { color: #071014; background: #38d8e3; }
.jog-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.jog-command { height: 70px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #3a535c; border-radius: 4px; color: #f1f6f7; background: #17272d; }
.jog-command:hover { border-color: #5e7a84; background: #20343b; }
.jog-command span { color: #39d9e4; font-size: 26px; }
.jog-command strong { font-size: 17px; }
.axis-travel-readout { display: flex; justify-content: space-between; gap: 10px; padding-top: 16px; border-top: 1px solid #2a4048; color: #8fa4aa; font-size: 11px; }
.axis-travel-readout strong { color: #eef4f5; }

.vps-modal { width: min(98vw, 1880px); height: min(96vh, 1080px); }
.vps-content { display: grid; grid-template-columns: minmax(300px, 340px) minmax(560px, 1fr) minmax(390px, 480px); gap: 10px; overflow: hidden; padding: 10px; }
.vps-status { display: flex; align-items: center; gap: 8px; color: #93a7ad; font-size: 11px; }
.vps-status strong { color: #efc75c; }
.vps-status span { width: 1px; height: 15px; background: #36505a; }
.vps-inputs, .vps-workspace, .vps-code-pane { min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #293f47; background: #0b161a; }
.vps-inputs { overflow-y: auto; }
.section-heading { min-height: 53px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-bottom: 1px solid #293f47; background: #101e23; }
.section-heading h3 { margin: 0; font-size: 14px; }
.sticky-heading { position: sticky; z-index: 2; top: 0; border-top: 1px solid #293f47; }
.mini-command, .icon-danger { display: grid; place-items: center; border: 1px solid #3c5660; border-radius: 3px; color: white; background: #1c3037; }
.mini-command { width: 28px; height: 28px; font-size: 18px; }
.icon-danger { width: 28px; height: 28px; background: #6e292e; border-color: #9b3b41; }
.vps-fields { display: grid; gap: 7px; padding: 9px; }
.vps-fields.two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vps-fields label, .operation-parameters label, .operation-core label { min-width: 0; display: grid; gap: 3px; color: #8fa4aa; font-size: 10px; }
.vps-fields input, .vps-fields select, .shaft-section-row input, .operation-editor input, .operation-editor select { width: 100%; min-width: 0; height: 29px; border: 1px solid #304750; border-radius: 3px; padding: 4px 6px; color: #ecf4f5; background: #070d10; }
.shaft-section-list { display: grid; gap: 5px; padding: 8px; }
.shaft-section-row { display: grid; grid-template-columns: 24px 1fr 1fr 28px; gap: 6px; align-items: end; padding: 7px; border: 1px solid #293e46; background: #0e1b20; }
.shaft-section-row > span { align-self: center; color: #efca62; text-align: center; }
.shaft-section-row label { min-width: 0; display: grid; gap: 2px; }
.shaft-section-row small { color: #84989f; font-size: 9px; }
.empty-state { margin: 8px 0; padding: 14px; color: #82979e; text-align: center; }
.empty-state.large { margin: 20px; border: 1px dashed #334a53; }
.vps-workspace { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.vps-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #293f47; }
.vps-tabs button { min-height: 44px; border: 0; border-right: 1px solid #293f47; color: #9aadb3; background: #101d22; }
.vps-tabs button.active { color: #36dae6; background: #15262d; box-shadow: inset 0 -2px #36dae6; }
.vps-tabs b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; border-radius: 9px; color: #081014; background: #e9c45e; font-size: 10px; }
.vps-preview-pane { overflow: auto; padding: 20px; }
.vps-preview-scale { display: flex; justify-content: space-between; color: #89a0a7; font-size: 10px; }
.vps-shaft-preview { height: 210px; display: flex; align-items: center; margin: 10px 0 18px; padding: 0 12px; border: 1px solid #263b43; background: #071014; }
.shaft-preview-section { min-width: 30px; height: 100%; display: flex; position: relative; align-items: center; }
.shaft-preview-section > div { width: 100%; min-height: 16px; border-top: 2px solid #f0ce68; border-bottom: 2px solid #f0ce68; background: linear-gradient(#e5c45f, #8a631f 48%, #d8ad48 55%, #f0cd65); }
.shaft-preview-section + .shaft-preview-section > div { border-left: 1px solid #e7bd55; }
.shaft-preview-section span { position: absolute; inset: auto 3px 14px; overflow: hidden; color: #091014; font: 9px Consolas, monospace; text-align: center; white-space: nowrap; }
.segment-strip { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 7px; }
.segment-strip > div { min-width: 92px; display: grid; gap: 3px; padding: 8px; border: 1px solid #3a5058; border-left-width: 4px; background: #111e23; }
.segment-strip .supported { border-left-color: #38d580; }
.segment-strip .unsupported { border-left-color: #e1aa37; }
.segment-strip span { color: #91a5ab; font-size: 10px; }
.vps-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0 0; border: 1px solid #293f47; }
.vps-metrics div { padding: 9px; border-right: 1px solid #293f47; }
.vps-metrics div:last-child { border-right: 0; }
.vps-metrics dt { color: #81979e; font-size: 9px; }
.vps-metrics dd { margin: 4px 0 0; color: #eef4f5; font-weight: 700; }
.vps-notes { margin-top: 15px; padding: 12px; border-left: 3px solid #2bcad6; background: #101e23; }
.vps-notes p { margin: 5px 0 0; color: #9eb0b5; font-size: 11px; line-height: 1.5; }
.operation-editor { min-height: 0; overflow: auto; padding-bottom: 18px; }
.operation-intro { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-bottom: 1px solid #293f47; background: #0e1b20; }
.operation-intro h3 { margin: 0; font-size: 15px; }
.operation-intro p { margin: 3px 0 0; color: #8fa3aa; font-size: 10px; }
.end-operation-grid { display: grid; grid-template-columns: 48px 34px 62px minmax(118px, 1fr) minmax(140px, 1.2fr) 82px 82px 88px; min-width: 820px; }
.end-operation-grid > * { min-width: 0; min-height: 34px; display: flex; align-items: center; padding: 4px 6px; border-right: 1px solid #293f47; border-bottom: 1px solid #293f47; }
.operation-head > * { color: #9db0b6; background: #16262c; font-size: 10px; font-weight: 700; }
.operation-row strong { color: #efc65d; }
.operation-row > input[type="checkbox"] { width: 16px; height: 16px; margin: auto; }
.axial-operation { margin: 10px; border: 1px solid #304750; background: #0d191e; }
.operation-core { display: grid; grid-template-columns: 28px minmax(120px, 1fr) minmax(120px, 1fr) minmax(140px, 1.2fr) minmax(120px, .9fr) 28px; gap: 7px; align-items: end; padding: 9px; border-bottom: 1px solid #293f47; }
.operation-core > input[type="checkbox"] { width: 17px; height: 17px; margin-bottom: 6px; }
.operation-core .support-toggle { display: flex; align-items: center; gap: 5px; min-height: 29px; padding-bottom: 3px; }
.operation-core .support-toggle input { width: 15px; height: 15px; }
.operation-parameters { display: flex; flex-wrap: wrap; gap: 8px; padding: 9px; }
.operation-parameters label { flex: 1 1 96px; max-width: 145px; }
.validation-panel { position: absolute; z-index: 5; inset: auto 10px 10px; max-height: 145px; display: grid; gap: 3px; overflow: auto; padding: 10px; border: 1px solid #a53c43; background: rgba(74, 20, 24, .96); }
.validation-panel span { font-size: 10px; }
.vps-code-pane { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.vps-code-pane textarea { min-width: 0; min-height: 0; resize: none; border: 0; outline: 0; padding: 10px; color: #d9e8ea; background: #060c0f; font: 11px/1.5 Consolas, monospace; }
.vps-code-status { min-height: 38px; padding: 9px 11px; border-top: 1px solid #293f47; color: #8ea4aa; font-size: 10px; }
.vps-footer { min-height: 58px; }

@media (max-width: 1350px) {
    .vps-content { grid-template-columns: 300px minmax(520px, 1fr); overflow: auto; }
    .vps-code-pane { grid-column: 1 / -1; min-height: 500px; }
}

@media (max-width: 850px) {
    .vps-status { display: none; }
    .vps-content { display: grid; grid-template-columns: 1fr; overflow: auto; }
    .vps-inputs, .vps-workspace, .vps-code-pane { min-height: 620px; }
    .vps-fields.two-column { grid-template-columns: 1fr; }
    .vps-metrics { grid-template-columns: repeat(2, 1fr); }
    .operation-core { grid-template-columns: 28px 1fr; }
    .operation-core label, .operation-core .support-toggle { grid-column: 2; }
}

@media (max-width: 1050px) {
    .modal-backdrop { align-items: start; overflow: auto; padding: 8px; }
    .modal-window { width: 100%; height: auto; min-height: calc(100vh - 16px); }
    .tool-config-content { overflow: auto; }
    .tool-config-split { height: auto; grid-template-columns: 1fr; }
    .tool-config-split > .config-section { min-height: 560px; }
    .setup-screen { grid-template-columns: 1fr; overflow: auto; }
    .setup-readout { border-top: 1px solid #2a4048; border-left: 0; }
}

@media (max-width: 680px) {
    .profile-create-row, .profile-selected-actions { grid-template-columns: 1fr; }
    .profile-create-row .command, .profile-selected-actions .command { width: 100%; }
}

@media (max-width: 620px) {
    .modal-header { align-items: flex-start; }
    .modal-header-actions { align-items: flex-end; flex-direction: column-reverse; }
    .modal-footer { flex-wrap: wrap; }
    .footer-note { width: 100%; }
    .editor-grid { grid-template-columns: 1fr; }
    .editor-grid label.wide { grid-column: span 1; }
    .setup-form, .setup-readout { padding: 16px; }
    .setup-field-grid, .coordinate-position-grid { grid-template-columns: 1fr; }
}