body {
    margin: 0;
    font-family: "Segoe UI", "PingFang SC", sans-serif;
    background: #eef1f4;
    color: #172033;
    --el-color-primary: #0f766e;
    --el-color-primary-light-3: #32a399;
    --el-color-primary-light-5: #7bc7bf;
    --el-color-primary-light-7: #bde5df;
    --el-color-primary-light-9: #e7f7f4;
    --el-color-primary-dark-2: #0b5f58;
    --console-border: #d6dde6;
    --console-border-strong: #b8c2cf;
    --console-panel: #ffffff;
    --console-soft: #f7f9fb;
    --console-muted: #647084;
    --console-text: #172033;
    --console-accent: #0f766e;
    --console-warning: #b45309;
}

#app {
    min-height: 100vh;
}

.page {
    width: min(100%, 1720px);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 16px 18px 24px;
}

.auth-shell {
    min-height: calc(100vh - 40px);
    display: grid;
    place-items: center;
}

.auth-panel {
    width: min(100%, 460px);
    border: 1px solid var(--console-border);
    border-radius: 8px;
    background: var(--console-panel);
    box-shadow: 0 10px 30px rgba(20, 32, 48, 0.12);
    padding: 26px;
}

.auth-brand {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.auth-mark {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--console-accent);
    color: #ffffff;
    font-weight: 700;
    font-size: 20px;
}

.auth-brand h1 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.25;
    color: #111827;
}

.auth-brand p {
    margin: 0;
    color: var(--console-muted);
    line-height: 1.55;
    font-size: 13px;
}

.auth-form {
    display: grid;
    gap: 12px;
}

.auth-form .el-button {
    width: 100%;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.hero-card,
.panel-card {
    border: 1px solid var(--console-border);
    border-radius: 8px;
    background: var(--console-panel);
    box-shadow: 0 1px 2px rgba(20, 32, 48, 0.06);
    backdrop-filter: none;
}

.hero-card {
    padding: 16px 18px;
}

.hero-card h1 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.25;
    color: #111827;
}

.hero-card p {
    margin: 0;
    line-height: 1.55;
    color: var(--console-muted);
    font-size: 13px;
}

.console-headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.hero-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 360px;
}

.meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
}

.meta-item {
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-left: 3px solid var(--console-accent);
    border-radius: 6px;
    padding: 10px 12px;
    background: var(--console-soft);
}

.meta-item span {
    display: block;
    font-size: 12px;
    color: var(--console-muted);
}

.meta-item strong {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: #1f2937;
    word-break: break-all;
}

.publish-workflow {
    border: 1px solid var(--console-border);
    border-radius: 8px;
    background: #ffffff;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(20, 32, 48, 0.05);
}

.workflow-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.workflow-head h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #111827;
}

.workflow-head p {
    margin: 4px 0 0;
    color: var(--console-muted);
    font-size: 13px;
    line-height: 1.5;
}

.workflow-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.workflow-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    min-height: 118px;
    border: 1px solid var(--console-border);
    border-radius: 8px;
    background: var(--console-soft);
    padding: 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.workflow-step:hover,
.workflow-step:focus {
    border-color: var(--console-accent);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.12);
    outline: none;
}

.workflow-step.is-done {
    border-color: #8ac8b8;
    background: #f1fbf8;
}

.workflow-step.is-active {
    border-color: var(--console-accent);
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--console-accent), 0 6px 16px rgba(15, 118, 110, 0.12);
}

.workflow-step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #dbe4ee;
    color: #334155;
    font-weight: 700;
}

.workflow-step.is-done .workflow-step-no {
    background: var(--console-accent);
    color: #ffffff;
}

.workflow-step.is-active .workflow-step-no {
    background: #111827;
    color: #ffffff;
}

.workflow-step-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.workflow-step-body strong {
    color: #111827;
    font-size: 15px;
    line-height: 1.35;
}

.workflow-step-body span {
    color: var(--console-muted);
    font-size: 12px;
    line-height: 1.45;
}

.workflow-step-body em {
    color: #0f766e;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    word-break: break-all;
}

.workflow-step-action {
    grid-column: 2;
    align-self: end;
    color: var(--console-accent);
    font-size: 12px;
    font-weight: 600;
}

.workflow-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid #b8d9d2;
    border-left: 4px solid var(--console-accent);
    border-radius: 8px;
    background: #f3fbf8;
}

.workflow-action-bar strong {
    display: block;
    color: #102a28;
    font-size: 14px;
    line-height: 1.4;
}

.workflow-action-bar span {
    display: block;
    margin-top: 3px;
    color: #516173;
    font-size: 12px;
    line-height: 1.5;
}

.section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.section-header h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #111827;
}

.section-header .muted {
    max-width: 820px;
    margin-top: 6px;
    line-height: 1.55;
}

.toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.panel-card {
    padding: 16px;
}

.shell-layout {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.shell-nav {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow: auto;
}

.shell-nav-card {
    border: 1px solid #1f2933;
    border-radius: 8px;
    background: #20252b;
    box-shadow: 0 1px 3px rgba(20, 32, 48, 0.18);
    padding: 12px;
}

.shell-nav-title {
    font-size: 13px;
    color: #f3f4f6;
    margin-bottom: 12px;
    font-weight: 600;
    letter-spacing: 0;
}

.shell-nav-group {
    margin-top: 12px;
}

.shell-nav-group:first-of-type {
    margin-top: 0;
}

.shell-nav-group-title {
    font-size: 12px;
    color: #9aa4b2;
    margin: 10px 0 6px;
    padding: 0 8px;
    letter-spacing: 0;
}

.shell-nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    color: #cbd5e1;
    height: 38px;
    line-height: 38px;
    border-radius: 6px;
    margin: 4px 0;
    padding: 0 10px;
    font: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.shell-nav-item:hover {
    background: #2b323a;
    color: #ffffff;
}

.shell-nav-item.is-active {
    background: var(--console-accent);
    color: #ffffff;
    font-weight: 600;
}

.shell-nav-icon {
    width: 18px;
    display: inline-flex;
    justify-content: center;
    font-size: 14px;
}

.section-subtitle {
    margin-top: 5px;
    font-size: 13px;
    color: #44546a;
    font-weight: 600;
}

.shell-menu {
    border-right: 0;
    background: transparent;
}

.shell-menu .el-menu-item {
    height: 44px;
    line-height: 44px;
    border-radius: 12px;
    margin: 6px 0;
}

.shell-menu .el-menu-item.is-active {
    background: linear-gradient(135deg, rgba(36, 87, 196, 0.14), rgba(46, 160, 124, 0.12));
    color: #1f4ca4;
    font-weight: 600;
}

.shell-content {
    min-width: 0;
}

.panel-card .el-form-item {
    margin-bottom: 18px;
}

.panel-card .compact-form .el-form-item {
    margin-bottom: 16px;
}

.panel-card .compact-form .el-form-item__label {
    padding-bottom: 6px;
    line-height: 1.4;
}

.panel-card .el-input,
.panel-card .el-input-number,
.panel-card .el-select,
.panel-card .el-cascader,
.panel-card .el-date-editor {
    width: 100%;
    max-width: 100%;
}

.panel-card .el-input-number .el-input {
    width: 100%;
}

.panel-card .el-input-number {
    display: flex;
    min-width: 0;
    vertical-align: middle;
}

.panel-card .el-input-number .el-input__wrapper,
.panel-card .el-select .el-input__wrapper,
.panel-card .el-input .el-input__wrapper {
    width: 100%;
}

.panel-card .el-select .el-input,
.panel-card .el-date-editor.el-input,
.panel-card .el-date-editor.el-input__wrapper {
    width: 100%;
}

.page .el-input,
.page .el-select,
.page .el-input-number,
.page .el-button {
    vertical-align: middle;
}

.page .el-input-number {
    height: 32px;
    line-height: 32px;
}

.page .el-input-number .el-input {
    height: 32px;
}

.page .el-input-number .el-input__wrapper {
    min-height: 32px;
    padding-left: 42px;
    padding-right: 42px;
}

.page .el-input-number .el-input__inner {
    min-width: 54px;
    text-align: center;
}

.page .el-input-number.is-without-controls .el-input__wrapper {
    padding-left: 11px !important;
    padding-right: 11px !important;
}

.page .el-input-number.is-without-controls .el-input__inner {
    min-width: 0;
    text-align: left;
}

.page .el-input-number__decrease,
.page .el-input-number__increase {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    top: 1px;
    bottom: 1px;
    line-height: 30px;
}

.page .toolbar > .el-input,
.page .toolbar > .el-select,
.page .toolbar > .el-input-number,
.page .toolbar > .el-button,
.page .toolbar > .el-tag {
    flex: 0 0 auto;
}

.page .toolbar > .el-input-number {
    min-width: 132px;
}

.card-block {
    margin-top: 12px;
    border: 1px solid #e0e6ee;
    border-radius: 8px;
    padding: 14px;
    background: #fbfcfe;
}

.card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.card-title h3,
.card-title h4 {
    margin: 0;
    color: #172033;
}

.muted {
    color: var(--console-muted);
}

.ellipsis-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ems-curve-panel {
    display: grid;
    gap: 12px;
    margin: 8px 0 12px;
}

.ems-point-picker {
    display: grid;
    grid-template-columns: minmax(120px, 0.42fr) minmax(160px, 0.58fr);
    gap: 8px;
    width: 100%;
}

.ems-point-picker .el-select,
.ems-point-picker .el-select-v2 {
    width: 100%;
    max-width: 100%;
}

.ems-select-option {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ems-validation-panel {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.ems-validation-list {
    display: grid;
    gap: 8px;
}

.ems-validation-list > div {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 8px 10px;
    border: 1px solid #e0e6ee;
    border-radius: 8px;
    background: #fbfcfe;
}

.ems-validation-list strong {
    color: #172033;
    font-size: 13px;
    line-height: 24px;
}

.ems-validation-list span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #4b5563;
    font-size: 13px;
    line-height: 24px;
}

.ems-curve-track {
    border: 1px solid #dfe7f3;
    border-radius: 8px;
    padding: 12px;
    background: #fbfdff;
}

.ems-curve-track-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 13px;
}

.ems-curve-track-header span {
    display: flex;
    gap: 12px;
    align-items: center;
    color: #61718d;
}

.ems-curve-track-header b {
    font-weight: 600;
}

.ems-curve-area {
    position: relative;
    height: 420px;
    margin: 0 0 8px;
    background: #fff;
    touch-action: none;
    user-select: none;
}

.ems-curve-svg {
    width: 100%;
    height: 100%;
    display: block;
    background: #fff;
}

.ems-svg-plot {
    fill: #fff;
    stroke: #1f2937;
    stroke-width: 1.5;
}

.ems-svg-grid {
    stroke: #b8c0cc;
    stroke-width: 1;
    stroke-dasharray: 5 5;
}

.ems-svg-zero {
    stroke: #2f3b4f;
    stroke-width: 1.4;
}

.ems-svg-power-line {
    fill: none;
    stroke: #111827;
    stroke-width: 2.4;
    stroke-linejoin: miter;
    stroke-linecap: square;
}

.ems-svg-soc-line {
    fill: none;
    stroke: #d11f2f;
    stroke-width: 2.2;
    stroke-dasharray: 7 5;
}

.ems-svg-power-point {
    fill: #fff;
    stroke: #111827;
    stroke-width: 2;
}

.ems-svg-soc-point {
    fill: #fff;
    stroke: #d11f2f;
    stroke-width: 2;
}

.ems-svg-drag-point {
    cursor: grab;
    pointer-events: all;
}

.ems-svg-drag-point:active {
    cursor: grabbing;
}

.ems-svg-label {
    fill: #111827;
    font-size: 13px;
}

.ems-svg-axis-title {
    fill: #111827;
    font-size: 15px;
    font-weight: 600;
}

.ems-svg-legend text {
    fill: #111827;
    font-size: 15px;
}

.ems-curve-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(96, 119, 150, 0.14) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(96, 119, 150, 0.14) 1px, transparent 1px);
    background-size: calc(100% / 23) 100%, 100% 25%;
    pointer-events: none;
}

.ems-curve-segment {
    position: absolute;
    height: 2px;
    transform-origin: 0 50%;
    pointer-events: none;
}

.ems-curve-zero-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(40, 57, 83, 0.35);
    pointer-events: none;
}

.ems-curve-point {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    transform: translate(-50%, 50%);
    box-shadow: 0 2px 8px rgba(30, 49, 78, 0.22);
    cursor: grab;
    padding: 0;
}

.ems-curve-point:active {
    cursor: grabbing;
}

.ems-curve-axis {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -22px;
    display: flex;
    justify-content: space-between;
    color: #6d7d95;
    font-size: 12px;
    pointer-events: none;
}

.raw-json-block {
    margin-top: 16px;
}

.raw-json-block summary {
    cursor: pointer;
    color: #315a9f;
    font-weight: 600;
    margin-bottom: 10px;
}

.json-preview {
    margin-top: 20px;
    background: #10213a;
    color: #e7eefb;
    border-radius: 16px;
    padding: 18px;
    overflow: auto;
    max-height: 420px;
    font-size: 13px;
}

.el-table__body-wrapper {
    scrollbar-gutter: stable;
}

.el-scrollbar__bar.is-horizontal {
    height: 10px;
}

.el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
    background: rgba(42, 72, 116, 0.42);
}

.el-timeline {
    padding-left: 8px;
}

.page .el-tabs__header {
    margin-bottom: 12px;
}

.page .el-tabs__item {
    height: 36px;
    font-weight: 600;
    color: #526071;
}

.page .el-tabs__item.is-active {
    color: var(--console-accent);
}

.page .el-table {
    --el-table-border-color: #dfe5ed;
    --el-table-header-bg-color: #f3f6f9;
    --el-table-header-text-color: #263445;
    --el-table-row-hover-bg-color: #edf7f5;
    border-radius: 6px;
    overflow: hidden;
}

.page .el-table th.el-table__cell {
    font-weight: 600;
}

.page .el-table .cell {
    line-height: 1.45;
}

.page .el-input__wrapper,
.page .el-textarea__inner,
.page .el-select__wrapper {
    box-shadow: 0 0 0 1px #cfd8e3 inset;
}

.page .el-input__wrapper:hover,
.page .el-textarea__inner:hover,
.page .el-select__wrapper:hover {
    box-shadow: 0 0 0 1px #9fb0c3 inset;
}

.page .el-input__wrapper.is-focus,
.page .el-select__wrapper.is-focused {
    box-shadow: 0 0 0 1px var(--console-accent) inset;
}

.page .el-tag {
    border-radius: 4px;
}

.page .el-alert,
.page .el-collapse,
.page .el-collapse-item__header,
.page .el-collapse-item__wrap {
    border-color: #dfe5ed;
}

.page .el-collapse {
    border-radius: 8px;
    overflow: hidden;
}

.page .el-collapse-item__header {
    padding: 0 12px;
    background: #f7f9fb;
    font-weight: 600;
}

.page .el-collapse-item__content {
    padding: 14px 12px 16px;
}

.page .el-dialog {
    border-radius: 8px;
}

.page .el-dialog__header {
    margin-right: 0;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #e5e7eb;
}

.page .el-dialog__body {
    padding: 16px 18px;
}

.page .el-dialog__footer {
    padding: 12px 18px 16px;
    border-top: 1px solid #e5e7eb;
}

@media (max-width: 1100px) {
    .shell-layout {
        grid-template-columns: 1fr;
    }

    .shell-nav {
        position: static;
    }

    .hero {
        grid-template-columns: 1fr;
    }

    .console-headline {
        align-items: flex-start;
        flex-direction: column;
    }

    .hero-actions {
        justify-content: flex-start;
        min-width: 0;
        width: 100%;
    }

    .meta-grid {
        grid-template-columns: 1fr;
    }

    .workflow-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ems-point-picker {
        grid-template-columns: 1fr;
    }

    .page {
        padding: 16px;
    }
}

@media (max-width: 680px) {
    .workflow-steps {
        grid-template-columns: 1fr;
    }
}

.subnav-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.subnav-bar .el-segmented {
    max-width: 100%;
}

.subnav-bar .el-segmented__item {
    min-width: 96px;
}

.machine-scope-card {
    background: linear-gradient(135deg, rgba(36, 87, 196, 0.06), rgba(46, 160, 124, 0.08));
}

.machine-scope-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.machine-scope-summary .muted {
    margin: 0;
}

.machine-topic-hint {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7e6;
  border: 1px solid #f3d19e;
  color: #8a5a00;
  line-height: 1.6;
  font-size: 13px;
}

.topic-preview {
  margin-top: 6px;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-all;
}

.snapshot-diff-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.snapshot-diff-pane {
    min-width: 0;
}

.snapshot-diff-title {
    font-size: 13px;
    font-weight: 600;
    color: #44526a;
    margin-bottom: 8px;
}

.snapshot-diff-pane .json-preview {
    margin-top: 0;
    max-height: 360px;
}

.local-display-screen {
    --ld-bg: #101418;
    --ld-panel: #182129;
    --ld-line: #26323d;
    --ld-text: #e8f0f2;
    --ld-muted: #8fa4ad;
    --ld-ok: #16c784;
    --ld-bad: #ff5c5c;
    --ld-warn: #f5a623;
    --ld-accent: #56b6ff;
    overflow: hidden;
    border: 1px solid var(--ld-line);
    border-radius: 16px;
    background: linear-gradient(135deg, #0d141b, #17222c);
    color: var(--ld-text);
    font-family: "Segoe UI", "Noto Sans SC", sans-serif;
}

.local-display-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--ld-line);
}

.local-display-header h1 {
    margin: 0;
    font-size: 24px;
    letter-spacing: 0.04em;
}

.local-display-sub {
    color: var(--ld-muted);
    font-size: 13px;
}

.local-display-wrap {
    padding: 18px 24px;
}

.local-display-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.local-display-card {
    padding: 14px;
    border: 1px solid var(--ld-line);
    border-radius: 14px;
    background: rgba(24, 33, 41, 0.92);
}

.local-display-label {
    color: var(--ld-muted);
    font-size: 12px;
}

.local-display-num {
    margin-top: 6px;
    font-size: 28px;
}

.local-display-ok {
    color: var(--ld-ok);
}

.local-display-bad {
    color: var(--ld-bad);
}

.local-display-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 12px 0;
}

.local-display-toolbar select,
.local-display-toolbar input {
    padding: 8px 10px;
    border: 1px solid var(--ld-line);
    border-radius: 8px;
    background: #0f171e;
    color: var(--ld-text);
}

.local-display-table-wrap {
    overflow: auto;
    max-height: calc(100vh - 360px);
    min-height: 320px;
}

.local-display-screen table {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--ld-line);
    border-collapse: collapse;
    border-radius: 14px;
    background: rgba(24, 33, 41, 0.86);
}

.local-display-screen th,
.local-display-screen td {
    padding: 10px;
    border-bottom: 1px solid var(--ld-line);
    text-align: left;
    white-space: nowrap;
}

.local-display-screen th {
    background: #151d25;
    color: var(--ld-muted);
    font-weight: 500;
}

.local-display-screen tr.stale td {
    color: var(--ld-warn);
}

.local-display-screen tr.bad td {
    color: var(--ld-bad);
}

.local-display-iframe {
    width: 100%;
    min-height: 620px;
    border: 1px solid #26323d;
    border-radius: 16px;
    background: #101418;
}

.local-display-iframe-fullscreen {
    display: block;
    height: calc(100vh - 92px);
    min-height: 0;
    border-radius: 0;
}

.local-display-fullscreen-dialog.el-dialog,
.local-display-fullscreen-dialog .el-dialog {
    background: #0b1117;
}

.local-display-fullscreen-dialog .el-dialog__header {
    margin: 0;
    padding: 10px 16px;
    border-bottom: 1px solid #26323d;
    background: #111922;
}

.local-display-fullscreen-dialog .el-dialog__body {
    height: calc(100vh - 54px);
    padding: 0;
    overflow: hidden;
    background: #0b1117;
}

.local-display-fullscreen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #e8f0f2;
}

.local-display-fullscreen-header span {
    margin-left: 10px;
    color: #8fa4ad;
    font-size: 13px;
}

.local-display-fullscreen-body {
    height: 100%;
    overflow: hidden;
}

.local-display-page-select,
.local-display-filter-input {
    min-width: 220px;
    padding: 8px 10px;
    border: 1px solid #c8d4e5;
    border-radius: 8px;
    background: #ffffff;
    color: #223047;
}

.local-layout-widget-table .el-input,
.local-layout-widget-table .el-input-number,
.local-layout-widget-table .el-select {
    width: 100% !important;
}

.local-layout-widget-table .el-input-number .el-input__wrapper,
.local-layout-widget-table .el-select .el-input__wrapper,
.local-layout-widget-table .el-input .el-input__wrapper {
    width: 100%;
}

.local-layout-widget-table .el-input-number__decrease,
.local-layout-widget-table .el-input-number__increase {
    display: flex !important;
}

.local-layout-widget-table .el-input-number .el-input__inner {
    min-width: 72px;
    text-align: left !important;
}

.local-layout-preview {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #26323d;
    border-radius: 16px;
    background: #101820;
    color: #e8f0f2;
}

.local-layout-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.local-layout-preview-header span {
    margin-left: 10px;
    color: #8fa4ad;
    font-size: 13px;
}

.local-layout-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(86px, auto);
    gap: 12px;
}

.local-layout-widget {
    min-width: 0;
    padding: 14px;
    border: 1px solid #26323d;
    border-radius: 14px;
    background: #182129;
    overflow: hidden;
}

.local-layout-widget.widget-groupTitle {
    display: flex;
    align-items: center;
    background: transparent;
    border-color: transparent;
    padding-left: 0;
}

.local-layout-widget.widget-groupTitle h3 {
    margin: 0;
    color: #e8f0f2;
    font-size: 22px;
}

.local-layout-widget-title {
    color: #8fa4ad;
    font-size: 13px;
    margin-bottom: 8px;
}

.local-layout-value {
    font-size: 30px;
    font-weight: 700;
    color: #e8f0f2;
}

.local-layout-value.ok {
    color: #16c784;
}

.local-layout-value.stale {
    color: #f5a623;
}

.local-layout-value.bad {
    color: #ff5c5c;
}

.local-layout-table-wrap {
    overflow: auto;
    max-height: 360px;
}

.local-layout-table-wrap table {
    width: 100%;
    border-collapse: collapse;
}

.local-layout-table-wrap th,
.local-layout-table-wrap td {
    padding: 8px;
    border-bottom: 1px solid #26323d;
    text-align: left;
    white-space: nowrap;
}

.local-layout-table-wrap th {
    color: #8fa4ad;
    font-weight: 500;
    background: #151d25;
}

.local-layout-table-wrap tr.stale td {
    color: #f5a623;
}

.local-layout-table-wrap tr.bad td {
    color: #ff5c5c;
}

.diff-preview {
    font-size: 12px;
    line-height: 1.5;
}

.diff-line {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
    padding: 1px 8px;
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: 6px;
}

.diff-line-no {
    color: #7f93b8;
    text-align: right;
    user-select: none;
}

.diff-line.same {
    background: transparent;
}

.diff-line.changed {
    background: rgba(245, 158, 11, 0.18);
}

.diff-line.added {
    background: rgba(34, 197, 94, 0.18);
}

.diff-line.removed {
    background: rgba(239, 68, 68, 0.18);
}

.diff-line-text {
    min-width: 0;
}

.point-grid-table .el-input,
.point-grid-table .el-input-number,
.point-grid-table .el-select {
    width: 100% !important;
}

.point-grid-table .el-input-number .el-input,
.point-grid-table .el-input-number .el-input__wrapper,
.point-grid-table .el-select .el-input,
.point-grid-table .el-select .el-input__wrapper,
.point-grid-table .el-input .el-input__wrapper {
    width: 100%;
}

.point-grid-table .el-input-number__decrease,
.point-grid-table .el-input-number__increase {
    display: flex !important;
}

.point-grid-table .el-input-number .el-input__wrapper {
    padding-left: 36px !important;
    padding-right: 36px !important;
}

.point-grid-table .el-input-number.is-without-controls .el-input__wrapper {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.point-grid-table .el-input-number .el-input__inner {
    min-width: 54px;
    text-align: center !important;
}

.point-grid-table .el-input-number.is-without-controls .el-input__inner {
    min-width: 0;
    text-align: left !important;
}

.point-grid-table .el-table__cell {
    padding: 6px 0;
}

.point-grid-table .toolbar {
    gap: 6px;
    flex-wrap: nowrap;
}

.batch-point-toolbar {
    justify-content: space-between;
    align-items: center;
    margin: 8px 0 10px;
}

.batch-point-toolbar .el-pagination {
    flex: 0 1 auto;
}

.point-editor-dialog {
    max-width: calc(100vw - 32px);
}

.point-editor-dialog .el-dialog__body {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

.point-editor-dialog .point-editor-form .el-form-item {
    margin-bottom: 16px;
}

.point-editor-dialog .point-editor-form .el-form-item__label {
    padding-bottom: 6px;
    line-height: 1.35;
    white-space: nowrap;
}

.point-editor-dialog .el-input,
.point-editor-dialog .el-input-number,
.point-editor-dialog .el-select,
.point-editor-dialog .el-cascader,
.point-editor-dialog .el-date-editor {
    width: 100% !important;
    max-width: 100%;
}

.point-editor-dialog .el-input-number {
    display: inline-flex !important;
}

.point-editor-dialog .el-input-number .el-input,
.point-editor-dialog .el-input-number .el-input__wrapper,
.point-editor-dialog .el-select .el-input,
.point-editor-dialog .el-select .el-input__wrapper,
.point-editor-dialog .el-input .el-input__wrapper {
    width: 100%;
}

.point-editor-dialog .el-input-number .el-input__inner {
    min-width: 54px;
    text-align: center !important;
}

.point-editor-form .el-input,
.point-editor-form .el-input-number,
.point-editor-form .el-select,
.point-editor-form .el-cascader,
.point-editor-form .el-date-editor {
    width: 100% !important;
    max-width: 100%;
}

.point-editor-dialog .el-input-number__decrease,
.point-editor-dialog .el-input-number__increase,
.point-editor-form .el-input-number__decrease,
.point-editor-form .el-input-number__increase {
    display: flex !important;
}

.point-editor-dialog .el-input-number .el-input__wrapper,
.point-editor-form .el-input-number .el-input__wrapper {
    padding-left: 42px !important;
    padding-right: 42px !important;
    width: 100%;
}

.point-editor-dialog .el-input-number.is-without-controls .el-input__wrapper,
.point-editor-form .el-input-number.is-without-controls .el-input__wrapper {
    padding-left: 11px !important;
    padding-right: 11px !important;
}

.point-editor-form .el-input-number .el-input__inner {
    min-width: 54px;
    text-align: center !important;
}

.point-editor-dialog .el-input-number.is-without-controls .el-input__inner,
.point-editor-form .el-input-number.is-without-controls .el-input__inner {
    min-width: 0;
    text-align: left !important;
}

.point-editor-dialog .el-col-6,
.point-editor-form .el-col-6 {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
}

@media (max-width: 900px) {
    .point-editor-dialog .el-col-6,
    .point-editor-dialog .el-col-8,
    .point-editor-dialog .el-col-12,
    .point-editor-form .el-col-6,
    .point-editor-form .el-col-8,
    .point-editor-form .el-col-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .local-display-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .local-display-wrap {
        padding: 12px;
    }

    .local-display-header {
        padding: 14px;
    }
}

@media (max-width: 1100px) {
    .snapshot-diff-grid {
        grid-template-columns: 1fr;
    }
}

/* Keep buttons recognizable without overriding Element Plus component states. */
.page .el-button:not(.is-text):not(.is-link) {
    border: 1px solid #9aa9ba !important;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(20, 32, 48, 0.08);
}

.page .el-button:not(.is-text):not(.is-link):hover,
.page .el-button:not(.is-text):not(.is-link):focus {
    border-color: var(--console-accent) !important;
}

.page .el-button--primary:not(.is-plain),
.page .el-button--success:not(.is-plain),
.page .el-button--warning:not(.is-plain),
.page .el-button--danger:not(.is-plain) {
    box-shadow: 0 2px 5px rgba(20, 32, 48, 0.14);
}