:root {
  --bg: #151820;
  --surface: #1E2230;
  --surface-solid: #1E2230;
  --surface-soft: #171B24;
  --ink: #F0F2F5;
  --muted: #8B95A8;
  --line: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.12);
  --charcoal: #0C0E12;
  --charcoal-soft: #121520;
  --accent: #A0C814;
  --accent-dark: #8DB012;
  --brand: #A0C814;
  --brand-strong: #8DB012;
  --info: #5B8DEF;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --input-bg: #0C0E12;
  --input-focus-bg: #151820;
  --code-bg: #11151D;
  --code-gutter-bg: #171B24;
  --code-text: #E8ECF2;
  --code-g: #9FC477;
  --code-m: #FFB454;
  --code-t: #D6A7FF;
  --code-s: #77DB91;
  --shadow: 0 24px 56px rgba(0, 0, 0, 0.40), 0 8px 20px rgba(0, 0, 0, 0.20);
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.20), 0 1px 4px rgba(0, 0, 0, 0.10);
  --shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.30), 0 2px 8px rgba(0, 0, 0, 0.15);
  --radius: 6px;
  --radius-lg: 10px;
  --transition-fast: 120ms ease;
  --transition: 180ms ease;
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* V3.1.0 recruitment applications under after-sales management. */
.recruitment-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

.recruitment-table th,
.recruitment-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  text-align: left;
}

.recruitment-table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.recruitment-table td {
  color: var(--ink);
  font-size: 12px;
}

.recruitment-table td strong,
.recruitment-table td small {
  display: block;
}

.recruitment-table td small {
  max-width: 250px;
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recruitment-status {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.recruitment-status.status-new {
  border-color: rgba(224, 173, 91, 0.28);
  background: rgba(245, 158, 11, 0.10);
  color: var(--warning);
}

.recruitment-status.status-contacted,
.recruitment-status.status-interviewing {
  border-color: rgba(114, 200, 208, 0.25);
  background: rgba(91, 141, 239, 0.10);
  color: var(--info);
}

.recruitment-status.status-offered,
.recruitment-status.status-hired {
  border-color: rgba(114, 201, 157, 0.28);
  background: rgba(16, 185, 129, 0.10);
  color: var(--success);
}

.recruitment-status.status-rejected {
  border-color: rgba(235, 116, 122, 0.26);
  background: rgba(239, 68, 68, 0.10);
  color: var(--danger);
}

.recruitment-dialog {
  width: min(940px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 32px));
}

.recruitment-dialog-body {
  display: grid;
  gap: 24px;
}

.recruitment-detail-section + .recruitment-detail-section {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.recruitment-detail-grid {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.recruitment-detail-grid > div {
  min-width: 0;
  padding: 13px 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.recruitment-detail-grid dt {
  color: var(--muted);
  font-size: 11px;
}

.recruitment-detail-grid dd {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

.recruitment-introduction {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.recruitment-introduction > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.recruitment-introduction p {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-wrap;
}

.nav-notification-badge {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 5px;
  place-items: center;
  border: 1px solid rgba(255, 159, 159, 0.42);
  border-radius: 10px;
  background: #d8464f;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 3px rgba(216, 70, 79, 0.10), 0 6px 16px rgba(216, 70, 79, 0.22);
}

.nav-notification-badge[hidden] {
  display: none;
}

.runtime-log-page .runtime-log-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.runtime-log-metrics > div {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.runtime-log-metrics span { display:block; color:var(--muted); font-size:12px; overflow-wrap: anywhere; }
.runtime-log-metrics strong { display:block; margin-top:6px; font-size:24px; color:var(--ink); }
.runtime-log-metrics .is-normal strong { color: var(--accent-dark); }
.runtime-log-metrics .is-warning strong { color: var(--warning); }
.runtime-log-metrics .is-error strong, .runtime-log-metrics .is-fatal strong { color: var(--danger); }
.runtime-log-metrics .is-fatal { border-color: var(--danger); }
.runtime-log-metrics .is-recovery strong { color: var(--success); }
.runtime-log-metrics .is-unresolved {
  border-color: color-mix(in srgb, var(--danger) 52%, var(--line));
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}
.runtime-log-metrics .is-unresolved strong { color: var(--danger); }
.runtime-log-diagnosis {
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--success);
  border-radius: 6px;
  background: var(--surface-soft);
}
.runtime-log-diagnosis[hidden] { display: none; }
.runtime-log-diagnosis strong { flex: 0 1 300px; color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.runtime-log-diagnosis span { min-width: 0; color: var(--muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.runtime-log-toolbar .toolbar-controls { flex-wrap: wrap; }
.runtime-log-toolbar .toolbar-controls select { max-width: 360px; min-width: 0; }
.runtime-log-filterbar select { min-width: 0; }
.runtime-log-diagnosis.is-warning { border-left-color: var(--warning); }
.runtime-log-diagnosis.is-error { border-left-color: var(--danger); }
.runtime-log-diagnosis.is-recovery { border-left-color: var(--success); }
.runtime-log-filterbar { display:flex; align-items:center; gap:10px; margin: 12px 0; }
.runtime-log-filterbar > span {
  flex: 0 0 auto;
  min-width: 168px;
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}
.runtime-log-table-panel { overflow:hidden; }
.runtime-log-table-panel table { min-width: 1420px; table-layout: auto; }
.runtime-log-table-panel th:nth-child(4),
.runtime-log-table-panel th:nth-child(5) { min-width: 260px; }
.runtime-log-table-panel td { vertical-align: top; }
.runtime-log-table-panel td strong,
.runtime-log-table-panel td small { display: block; }
.runtime-log-table-panel td small { margin-top: 4px; color: var(--muted); line-height: 1.5; }
.runtime-log-explanation,
.runtime-log-action { max-width: 360px; line-height: 1.65; white-space: normal; }
.runtime-log-status {
  display: inline-flex;
  min-width: 78px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 11px;
  font-weight: 750;
}
.runtime-log-status.is-normal { border-color: color-mix(in srgb, var(--accent) 42%, transparent); color: var(--accent-dark); }
.runtime-log-status.is-warning { border-color: rgba(245, 158, 11, 0.34); color: var(--warning); }
.runtime-log-status.is-error,
.runtime-log-status.is-fatal,
.runtime-log-status.is-abnormal,
.runtime-log-status.is-unresolved { border-color: rgba(239, 68, 68, 0.34); color: var(--danger); }
.runtime-log-status.is-recovery,
.runtime-log-status.is-recovered { border-color: rgba(16, 185, 129, 0.34); color: var(--success); }
.runtime-log-row.runtime-log-error,
.runtime-log-row.runtime-log-fatal,
.runtime-log-row.runtime-log-abnormal,
.runtime-log-row.runtime-log-unresolved { box-shadow: inset 3px 0 var(--danger); }
.runtime-log-row.runtime-log-warning { box-shadow: inset 3px 0 var(--warning); }
.runtime-log-row.runtime-log-recovery,
.runtime-log-row.runtime-log-recovered { box-shadow: inset 3px 0 var(--success); }
@media (max-width: 1080px) {
  .runtime-log-page .runtime-log-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .runtime-log-filterbar { flex-wrap: wrap; }
  .runtime-log-filterbar > span {
    flex-basis: 100%;
    min-width: 0;
    margin-left: 0;
    text-align: left;
  }
}
@media (max-width: 720px) {
  .runtime-log-page .runtime-log-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .runtime-log-filterbar { flex-wrap: wrap; }
  .runtime-log-diagnosis { align-items: flex-start; flex-direction: column; gap: 4px; }
  .runtime-log-diagnosis strong { flex-basis: auto; }
}

.nav-button.has-service-alert > svg {
  color: #ff8e95;
}

.after-sales-new-customer-row {
  background: linear-gradient(90deg, rgba(216, 70, 79, 0.10), rgba(216, 70, 79, 0.025) 54%, transparent);
  box-shadow: inset 3px 0 #d8464f;
}

.after-sales-new-customer-badge {
  display: inline-flex !important;
  width: max-content;
  min-height: 20px;
  margin-top: 6px;
  align-items: center;
  padding: 0 7px;
  border: 1px solid rgba(255, 159, 159, 0.36);
  border-radius: 6px;
  background: rgba(216, 70, 79, 0.14);
  color: #ff9ba1;
  font-size: 10px;
  font-weight: 800;
}

.toast.warning {
  border-left-color: #f0b84b;
}

.toast.warning svg {
  color: #f0b84b;
}

@media (max-width: 720px) {
  .recruitment-detail-grid {
    grid-template-columns: 1fr;
  }

  .recruitment-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }
}

/* CNC device monitoring */
.cnc-device-page {
  display: grid;
  gap: 16px;
}

.cnc-device-page[hidden] {
  display: none;
}

.cnc-device-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.cnc-device-metrics > div {
  min-height: 98px;
  padding: 16px 18px;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.cnc-device-metrics span,
.cnc-device-metrics small {
  color: var(--muted);
  font-size: 11px;
}

.cnc-device-metrics strong {
  color: var(--ink);
  font-size: 26px;
  line-height: 1.05;
}

.cnc-device-metrics .is-alarm strong {
  color: var(--danger);
}

.cnc-device-filterbar {
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(4, minmax(130px, 175px));
  gap: 9px;
}

.cnc-device-filterbar .search-input,
.cnc-device-filterbar select {
  width: 100%;
  min-width: 0;
}

.cnc-device-table-panel table {
  min-width: 1360px;
}

.cnc-device-identity {
  min-width: 160px;
  display: grid;
  gap: 5px;
}

.cnc-device-identity strong {
  max-width: 210px;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-device-identity code {
  color: var(--muted);
  font: 10px/1.4 "Cascadia Mono", Consolas, monospace;
}

.cnc-state-pill {
  width: max-content;
  min-height: 24px;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.cnc-state-pill i,
.cnc-device-detail-status i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 13%, transparent);
}

.cnc-state-running {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 32%, transparent);
  background: color-mix(in srgb, var(--success) 9%, transparent);
}

.cnc-state-idle {
  color: var(--info);
  border-color: color-mix(in srgb, var(--info) 32%, transparent);
  background: color-mix(in srgb, var(--info) 9%, transparent);
}

.cnc-state-paused {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 34%, transparent);
  background: color-mix(in srgb, var(--warning) 9%, transparent);
}

.cnc-state-alarm {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 36%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.cnc-state-offline,
.cnc-state-unknown {
  color: var(--muted);
}

.cnc-state-downloading,
.cnc-state-update-waiting,
.cnc-state-installing,
.cnc-state-update-downloaded,
.cnc-state-update-verified,
.cnc-state-update-installed {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 34%, transparent);
  background: color-mix(in srgb, var(--warning) 9%, transparent);
  white-space: normal;
  max-width: 100%;
}

.cnc-alarm-value {
  color: var(--muted);
  font-weight: 650;
}

.cnc-alarm-value.is-active {
  color: var(--danger);
}

.cnc-category-label,
.cnc-board-category {
  width: max-content;
  max-width: 130px;
  padding: 3px 7px;
  overflow: hidden;
  border: 1px solid rgba(160, 200, 20, 0.2);
  border-radius: 4px;
  color: var(--accent);
  background: rgba(160, 200, 20, 0.06);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-device-dialog {
  width: min(760px, calc(100vw - 32px));
}

.cnc-component-life-settings {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.cnc-component-life-settings .field-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cnc-component-life-settings .field-heading strong {
  color: var(--text);
  font-size: 13px;
}

.cnc-component-life-settings .field-heading small {
  color: var(--muted);
  font-size: 11px;
}

.cnc-device-detail-dialog {
  width: min(1200px, calc(100vw - 40px));
}

#cncDeviceDetailDialog { padding: 20px; }
#cncDeviceDetailDialog .cnc-device-detail-dialog {
  width: min(1200px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#cncDeviceDetailDialog .dialog-header,
#cncDeviceDetailDialog .dialog-actions { flex: 0 0 auto; }
#cncDeviceDetailDialog .cnc-device-detail-body {
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

#cncDeviceDetailDialog .cnc-device-detail-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#cncDeviceDetailDialog .cnc-device-detail-facts > div {
  min-width: 0;
  border-left: 0;
  overflow-wrap: anywhere;
}
#cncDeviceDetailDialog .cnc-device-detail-facts > div:not(:nth-child(3n + 1)) {
  border-left: 1px solid var(--line);
}
#cncDeviceDetailDialog .cnc-device-detail-body table { min-width: 0; width: 100%; }

.cnc-device-native-alarms { min-width: 0; margin: 8px 0 22px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cnc-device-native-alarms .cnc-device-history-heading { margin: 0; gap: 12px; flex-wrap: wrap; }
.cnc-device-native-alarms .button { min-height: 36px; }
.cnc-device-alarm-hint, .cnc-device-alarm-status { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 8px 0; }
.cnc-device-alarm-status.is-error { color: var(--danger, #e86b73); }
.cnc-device-alarm-table-scroll { max-height: 350px; overflow: auto; scrollbar-gutter: stable; border: 1px solid var(--line); border-radius: 6px; }
.cnc-device-alarm-table-scroll:focus-visible { outline: 2px solid var(--accent, #87ad32); outline-offset: 2px; }
#cncDeviceDetailDialog .cnc-device-alarm-table-scroll table { table-layout: fixed; min-width: 640px; }
.cnc-device-alarm-table-scroll th { position: sticky; top: 0; background: var(--surface, #18242c); z-index: 1; }
.cnc-device-alarm-table-scroll th:nth-child(1) { width: 150px; }
.cnc-device-alarm-table-scroll th:nth-child(2) { width: 90px; }
.cnc-device-alarm-table-scroll th:nth-child(3) { width: 160px; }
#cncDeviceDetailDialog .cnc-device-alarm-table-scroll td { vertical-align: top; font-size: 14px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.cnc-device-alarm-table-scroll td:nth-child(3) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cnc-native-alarm-content { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 700px) {
  #cncDeviceDetailDialog { padding: 12px; }
  #cncDeviceDetailDialog .cnc-device-detail-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  #cncDeviceDetailDialog .cnc-device-detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #cncDeviceDetailDialog .cnc-device-detail-facts > div:not(:nth-child(3n + 1)) { border-left: 0; }
  #cncDeviceDetailDialog .cnc-device-detail-facts > div:nth-child(even) { border-left: 1px solid var(--line); }
}

/* Final board preset cascade: this file contains legacy board rules earlier
   in the stylesheet, so keep the user-selected palette authoritative. */
#cncDeviceBoard[data-board-theme="site"] {
  --monitor-bg: var(--bg);
  --monitor-surface: var(--surface);
  --monitor-surface-strong: var(--surface-solid);
  --monitor-border: var(--line);
  --monitor-border-strong: var(--line-strong);
  --monitor-ink: var(--ink);
  --monitor-muted: var(--muted);
  --monitor-faint: color-mix(in srgb, var(--muted) 72%, var(--surface));
  --monitor-accent: var(--accent);
  --monitor-success: var(--success);
  --monitor-info: var(--info);
  --monitor-warning: var(--warning);
  --monitor-danger: var(--danger);
  --monitor-cyan: var(--info);
  --board-surface: var(--surface);
  --board-surface-strong: var(--surface-solid);
  --board-line: var(--line);
  background: var(--monitor-bg);
}

html[data-theme="light"] #cncDeviceBoard[data-board-theme="site"] {
  --monitor-bg: var(--bg);
  --monitor-surface: var(--surface);
  --monitor-surface-strong: var(--surface-solid);
  --monitor-border: var(--line);
  --monitor-border-strong: var(--line-strong);
  --monitor-ink: var(--ink);
  --monitor-muted: var(--muted);
  --monitor-faint: color-mix(in srgb, var(--muted) 72%, var(--surface));
  --monitor-accent: var(--accent);
  --monitor-success: var(--success);
  --monitor-info: var(--info);
  --monitor-warning: var(--warning);
  --monitor-danger: var(--danger);
  --monitor-cyan: var(--info);
  --board-surface: var(--surface);
  --board-surface-strong: var(--surface-solid);
  --board-line: var(--line);
  background: var(--monitor-bg);
}

/* Two-row mode shows the same data fields as one-row mode, arranged compactly. */
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device code,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-category,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > footer {
  display: block;
}
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid > .cnc-board-device,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid > .cnc-board-device.is-compact {
  grid-template-rows: 58px minmax(0, 1fr) 20px;
}
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header { height: 58px; }
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device.is-compact .cnc-board-device-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  overflow: hidden;
}
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device.is-compact .cnc-board-device-metrics > div,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device.is-compact .cnc-board-device-metrics > div[data-priority="primary"] {
  display: grid;
  min-width: 0;
  height: auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: 2px 5px;
  gap: 2px 4px;
}
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device.is-compact .cnc-board-device-metrics > div > span,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device.is-compact .cnc-board-device-metrics > div > small { grid-column: 1; }
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device.is-compact .cnc-board-device-metrics > div > strong {
  grid-column: 1;
  grid-row: 2;
}

/* Two horizontal rows need the same minimum height as their cards. Let the
   outer board scroll vertically when the viewport cannot contain both rows. */
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid {
  grid-template-columns: none !important;
  grid-template-rows: repeat(2, minmax(292px, 1fr)) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(360px, 1fr) !important;
  min-height: min-content !important;
  height: auto !important;
  align-items: stretch !important;
  align-content: stretch !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-monitor-board-body {
  grid-template-rows: minmax(min-content, 1fr);
  overflow-x: hidden;
  overflow-y: auto;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-monitor-stage {
  min-height: min-content;
  grid-template-rows: auto minmax(min-content, 1fr) !important;
}

@media (max-width: 1180px) {
  #cncDeviceBoard[data-card-rows="2"] .cnc-monitor-board-body {
    grid-template-rows: minmax(min-content, 1fr) auto;
  }
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid > .cnc-board-device,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid > .cnc-board-device.is-compact {
  min-height: 292px !important;
  height: auto !important;
  padding: 11px 12px 9px !important;
  gap: 8px !important;
  grid-template-rows: 62px minmax(0, 1fr) 21px !important;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header {
  height: 62px !important;
  align-items: start !important;
  gap: 8px !important;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div {
  width: min(100%, 100%);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 7px;
  row-gap: 2px;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > .cnc-state-pill {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > h3 {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  line-height: 1.1;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > code,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > .cnc-board-category {
  min-width: 0;
  margin: 0;
  line-height: 1.2;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > code {
  grid-column: 1;
  grid-row: 3;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > .cnc-board-category {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-board-device-metrics {
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  overflow: visible !important;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-board-device.is-compact .cnc-board-device-metrics > div,
#cncDeviceBoard[data-card-rows="2"] .cnc-board-device.is-compact .cnc-board-device-metrics > div[data-priority="primary"] {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 5px 7px !important;
  gap: 2px 5px !important;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-board-device-metrics > div > span,
#cncDeviceBoard[data-card-rows="2"] .cnc-board-device-metrics > div > small {
  grid-column: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-board-device-metrics > div > strong {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  align-self: center;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-board-device-metrics > div > small {
  display: block !important;
  grid-column: 1;
  grid-row: 3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-board-device > footer {
  min-height: 21px;
  padding-top: 6px;
}

/* In two-row cards, keep the identity block compact: status at left, name
   and serial stacked beside it, with the category immediately before mode. */
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  grid-template-rows: 28px 20px !important;
  column-gap: 8px;
  row-gap: 2px;
  align-items: center !important;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div {
  display: contents !important;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > .cnc-state-pill {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > h3 {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  align-self: center;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > code {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  align-self: start;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > .cnc-board-category {
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: center;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > .cnc-board-mode {
  grid-column: 4;
  grid-row: 1 / span 2;
  align-self: center;
}

/* Final identity arrangement for two-row cards. */
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header {
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  grid-template-rows: 28px 20px !important;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > .cnc-state-pill {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > h3 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > code {
  grid-column: 1 / 3 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  align-self: start !important;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > .cnc-board-category {
  grid-column: 3 !important;
  grid-row: 1 / 3 !important;
  justify-self: end !important;
  align-self: center !important;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > .cnc-board-mode {
  grid-column: 4 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
}

/* Final two-row layout override. Keep this block at the end because the
   compiled stylesheet contains older board presets earlier in the file. */
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: minmax(292px, auto);
  align-content: start;
  overflow-x: hidden;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid > .cnc-board-device,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid > .cnc-board-device.is-compact {
  min-height: 292px;
  height: auto;
  padding: 11px 12px 9px;
  gap: 8px;
  grid-template-rows: 62px minmax(0, 1fr) 18px 21px;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header {
  height: 62px;
  align-items: start;
  gap: 8px;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div {
  width: min(100%, 100%);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 7px;
  row-gap: 2px;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > .cnc-state-pill {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > h3 {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  line-height: 1.1;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > code,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > .cnc-board-category {
  min-width: 0;
  margin: 0;
  line-height: 1.2;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > code {
  grid-column: 1;
  grid-row: 3;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > .cnc-board-category {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-board-device-metrics {
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px;
  overflow: visible;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-board-device.is-compact .cnc-board-device-metrics > div,
#cncDeviceBoard[data-card-rows="2"] .cnc-board-device.is-compact .cnc-board-device-metrics > div[data-priority="primary"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 0;
  padding: 5px 7px;
  gap: 2px 5px;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-board-device-metrics > div > span,
#cncDeviceBoard[data-card-rows="2"] .cnc-board-device-metrics > div > small {
  grid-column: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-board-device-metrics > div > strong {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  align-self: center;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-board-device > footer {
  min-height: 21px;
  padding-top: 6px;
}

/* Two-row board layout: give each card a real content floor instead of
   squeezing the header and metrics into the single-row height. */
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: minmax(292px, auto);
  align-content: start;
  overflow-x: hidden;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid > .cnc-board-device,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid > .cnc-board-device.is-compact {
  min-height: 292px;
  height: auto;
  padding: 11px 12px 9px;
  gap: 8px;
  grid-template-rows: 62px minmax(0, 1fr) 18px 21px;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header {
  height: 62px;
  align-items: start;
  gap: 8px;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div {
  width: min(100%, 100%);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 7px;
  row-gap: 2px;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > .cnc-state-pill {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > h3 {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  line-height: 1.1;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > code,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > .cnc-board-category {
  min-width: 0;
  margin: 0;
  line-height: 1.2;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > code {
  grid-column: 1;
  grid-row: 3;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div > .cnc-board-category {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device-metrics {
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px;
  overflow: visible;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device.is-compact .cnc-board-device-metrics > div,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device.is-compact .cnc-board-device-metrics > div[data-priority="primary"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 0;
  padding: 5px 7px;
  gap: 2px 5px;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device-metrics > div > span,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device-metrics > div > small {
  grid-column: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device-metrics > div > strong {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  align-self: center;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > footer {
  min-height: 21px;
  padding-top: 6px;
}

/* Keep the optional blue preset authoritative over the CNC-specific legacy
   token block that appears earlier in this compiled stylesheet. */
#cncDeviceBoard[data-board-theme="blue"] {
  --monitor-bg: #090f17;
  --monitor-surface: rgba(17, 25, 37, 0.91);
  --monitor-surface-strong: #151e2b;
  --monitor-border: rgba(197, 213, 238, 0.12);
  --monitor-border-strong: rgba(197, 213, 238, 0.20);
  --monitor-ink: #edf2f8;
  --monitor-muted: #8997ab;
  --monitor-faint: #68778c;
  --monitor-accent: #6688ff;
  --monitor-success: #4fc596;
  --monitor-info: #72c6d5;
  --monitor-warning: #dca54b;
  --monitor-danger: #ed6b72;
  --monitor-cyan: #72c6d5;
  --board-surface: var(--monitor-surface-strong);
  --board-surface-strong: #192331;
  --board-line: var(--monitor-border);
  background: var(--monitor-bg);
}

html[data-theme="light"] #cncDeviceBoard[data-board-theme="blue"] {
  --monitor-bg: #e9eef4;
  --monitor-surface: #f8fafc;
  --monitor-surface-strong: #e7edf3;
  --monitor-border: rgba(55, 76, 98, .18);
  --monitor-border-strong: rgba(55, 76, 98, .30);
  --monitor-ink: #1d2833;
  --monitor-muted: #596b7c;
  --monitor-faint: #6d7f90;
  --monitor-accent: #416be8;
  --monitor-success: #176f4e;
  --monitor-info: #356ca8;
  --monitor-warning: #91630b;
  --monitor-danger: #b93648;
  --monitor-cyan: #5b8ed8;
  --board-surface: #f8fafc;
  --board-surface-strong: #e7edf3;
  --board-line: var(--monitor-border);
  background: var(--monitor-bg);
}

@media (max-width: 420px) {
  #cncDeviceDetailDialog .cnc-device-detail-facts { grid-template-columns: minmax(0, 1fr); }
  #cncDeviceDetailDialog .cnc-device-detail-facts > div:nth-child(even) { border-left: 0; }
}

.cnc-device-detail-body {
  padding: 20px 24px 8px;
}

.cnc-device-detail-status {
  min-height: 58px;
  padding: 0 4px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.cnc-device-detail-status > span {
  display: flex;
  align-items: center;
  gap: 9px;
}

.cnc-device-detail-status strong {
  color: currentColor;
  font-size: 16px;
}

.cnc-device-detail-status small {
  color: var(--muted);
  font-size: 11px;
}

.cnc-device-detail-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cnc-device-detail-facts > div {
  min-height: 92px;
  padding: 16px 14px;
  border-bottom: 1px solid var(--line);
}

.cnc-device-detail-facts > div:not(:nth-child(4n + 1)) {
  border-left: 1px solid var(--line);
}

.cnc-device-detail-facts dt,
.cnc-device-detail-facts small {
  color: var(--muted);
  font-size: 10px;
}

.cnc-device-detail-facts dd {
  margin: 8px 0 5px;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}

.cnc-device-history-heading {
  padding: 20px 4px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cnc-device-history-heading strong {
  color: var(--ink);
  font-size: 12px;
}

.cnc-device-history-heading span,
.cnc-device-event-empty {
  color: var(--muted);
  font-size: 10px;
}

.cnc-device-event-list {
  max-height: 220px;
  padding-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  overflow-y: auto;
}

.cnc-device-event {
  min-height: 48px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

.cnc-device-event > i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--muted);
}

.cnc-device-event > i.cnc-event-running { background: var(--success); }
.cnc-device-event > i.cnc-event-idle { background: var(--info); }
.cnc-device-event > i.cnc-event-paused { background: var(--warning); }
.cnc-device-event > i.cnc-event-alarm { background: var(--danger); }

.cnc-device-event span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.cnc-device-event strong {
  color: var(--ink);
  font-size: 11px;
}

.cnc-device-event small {
  color: var(--muted);
  font-size: 10px;
}

.cnc-device-event-empty {
  grid-column: 1 / -1;
  padding: 24px 8px;
  text-align: center;
}

/* CNC full-screen status board */
.cnc-device-board {
  position: fixed;
  inset: 0;
  z-index: 1500;
  min-width: 320px;
  min-height: 100vh;
  padding: 0 28px;
  display: grid;
  grid-template-rows: 86px auto minmax(0, 1fr) 42px;
  overflow: hidden;
  color: #F5F7FA;
  background: #0C0E12;
}

.cnc-device-board[hidden] {
  display: none;
}

.cnc-device-board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.cnc-device-board-brand,
.cnc-device-board-header-meta,
.cnc-device-board-actions,
.cnc-device-board-sync,
.cnc-device-board-sync > span {
  display: flex;
  align-items: center;
}

.cnc-device-board-brand {
  min-width: 0;
  gap: 13px;
}

.cnc-device-board-brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.cnc-device-board-brand > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cnc-device-board-brand span {
  color: #A0C814;
  font-size: 10px;
  font-weight: 700;
}

.cnc-device-board-brand h2 {
  margin: 0;
  overflow: hidden;
  color: #F5F7FA;
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-device-board-header-meta {
  flex: 0 0 auto;
  gap: 22px;
}

.cnc-device-board-sync {
  gap: 9px;
}

.cnc-device-board-sync > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.8);
}

.cnc-device-board-sync.is-error > i {
  background: #EF4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.75);
}

.cnc-device-board-sync > span,
.cnc-device-board-clock {
  display: grid;
  gap: 2px;
}

.cnc-device-board-sync strong,
.cnc-device-board-clock strong {
  color: #F5F7FA;
  font-size: 12px;
}

.cnc-device-board-sync small,
.cnc-device-board-clock small {
  color: #8B95A8;
  font-size: 9px;
}

.cnc-device-board-clock {
  min-width: 94px;
  text-align: right;
}

.cnc-device-board-clock strong {
  font: 18px/1.1 "Cascadia Mono", Consolas, monospace;
}

.cnc-device-board-actions {
  gap: 7px;
}

.cnc-device-board-icon-button {
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 5px;
  color: #C9CFD8;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.cnc-device-board-icon-button:hover {
  color: #F5F7FA;
  border-color: rgba(160, 200, 20, 0.5);
}

.cnc-device-board-icon-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cnc-device-board-exit-fullscreen-icon,
.cnc-device-board-icon-button.is-fullscreen .cnc-device-board-enter-fullscreen-icon {
  display: none;
}

.cnc-device-board-icon-button.is-fullscreen .cnc-device-board-exit-fullscreen-icon {
  display: block;
}

.cnc-device-board-summary {
  padding: 14px 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}

.cnc-device-board-summary > div {
  min-height: 72px;
  padding: 11px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-left: 2px solid rgba(160, 200, 20, 0.56);
  background: #171B24;
}

.cnc-device-board-summary span,
.cnc-device-board-summary small {
  color: #8B95A8;
  font-size: 10px;
}

.cnc-device-board-summary strong {
  margin-left: auto;
  color: #F5F7FA;
  font-size: 25px;
}

.cnc-device-board-summary small {
  margin-left: -8px;
  align-self: flex-end;
  padding-bottom: 9px;
}

.cnc-device-board-grid {
  min-height: 0;
  padding: 2px 0 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(224px, 1fr);
  align-content: start;
  gap: 12px;
  overflow-y: auto;
}

.cnc-board-device {
  min-width: 0;
  min-height: 224px;
  padding: 17px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 15px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 3px solid #667085;
  border-radius: 6px;
  background: #171B24;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.cnc-board-device.cnc-board-state-running { border-top-color: #10B981; }
.cnc-board-device.cnc-board-state-idle { border-top-color: #5B8DEF; }
.cnc-board-device.cnc-board-state-paused { border-top-color: #F59E0B; }
.cnc-board-device.cnc-board-state-alarm {
  border-color: rgba(239, 68, 68, 0.34);
  border-top-color: #EF4444;
}

.cnc-board-device > header,
.cnc-board-device > footer {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.cnc-board-device > header > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.cnc-board-device h3 {
  margin: 3px 0 0;
  overflow: hidden;
  color: #F5F7FA;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-board-device code,
.cnc-board-device > footer,
.cnc-board-device > footer time {
  color: #8B95A8;
  font: 9px/1.4 "Cascadia Mono", Consolas, monospace;
}

.cnc-board-mode {
  flex: 0 0 auto;
  color: #C9CFD8;
  font-size: 11px;
}

.cnc-board-category {
  margin-top: 2px;
  color: #A0C814;
}

.cnc-board-device-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cnc-board-device-metrics > div {
  min-width: 0;
  padding: 9px 10px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  background: #121520;
}

.cnc-board-device-metrics span,
.cnc-board-device-metrics small {
  color: #8B95A8;
  font-size: 9px;
}

.cnc-board-device-metrics strong {
  overflow: hidden;
  color: #F5F7FA;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-board-state-alarm .cnc-board-alarm {
  color: #EF4444;
}

.cnc-board-device > footer {
  align-items: center;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cnc-board-device > footer span,
.cnc-board-device > footer time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-device-board-empty {
  place-self: center;
  color: #8B95A8;
  font-size: 13px;
}

.cnc-device-board-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #8B95A8;
  font-size: 9px;
}

.cnc-device-board-footer > div {
  display: flex;
  align-items: center;
  gap: 18px;
}

.cnc-device-board-footer > div > span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cnc-device-board-footer i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #667085;
}

.cnc-device-board-footer i.is-running { background: #10B981; }
.cnc-device-board-footer i.is-idle { background: #5B8DEF; }
.cnc-device-board-footer i.is-paused { background: #F59E0B; }
.cnc-device-board-footer i.is-alarm { background: #EF4444; }

@media (max-width: 1500px) {
  .cnc-device-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cnc-device-board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .cnc-device-filterbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cnc-device-detail-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cnc-device-detail-facts > div:not(:nth-child(4n + 1)) {
    border-left: 0;
  }

  .cnc-device-detail-facts > div:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  .cnc-device-board {
    padding: 0 18px;
  }

  .cnc-device-board-header-meta {
    gap: 10px;
  }

  .cnc-device-board-sync {
    display: none;
  }

  .cnc-device-board-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .cnc-device-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .cnc-device-toolbar .toolbar-controls {
    width: 100%;
  }

  .cnc-device-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cnc-device-metrics > div {
    min-height: 86px;
    padding: 13px;
  }

  .cnc-device-metrics strong {
    font-size: 22px;
  }

  .cnc-device-filterbar,
  .cnc-device-detail-facts,
  .cnc-device-event-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .cnc-device-detail-facts > div:nth-child(even) {
    border-left: 0;
  }

  .cnc-device-history-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .cnc-device-board {
    padding: 0 12px;
    grid-template-rows: 76px auto minmax(0, 1fr) 38px;
  }

  .cnc-device-board-brand img,
  .cnc-device-board-clock,
  .cnc-device-board-actions > button:first-child {
    display: none;
  }

  .cnc-device-board-brand h2 {
    font-size: 15px;
  }

  .cnc-device-board-header-meta {
    margin-left: auto;
  }

  .cnc-device-board-summary {
    padding: 9px 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .cnc-device-board-summary > div {
    min-height: 54px;
    padding: 8px;
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .cnc-device-board-summary strong {
    margin-left: 0;
    font-size: 18px;
  }

  .cnc-device-board-summary small {
    display: none;
  }

  .cnc-device-board-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(220px, auto);
  }

  .cnc-device-board-footer > div {
    gap: 8px;
  }

  .cnc-device-board-footer > span {
    display: none;
  }
}

/* CNC program workspace */
.cnc-program-page {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.cnc-program-page[hidden] {
  display: none;
}

.cnc-program-workspace {
  min-height: 520px;
  height: var(--cnc-workspace-height, calc(100vh - 190px));
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(460px, 1fr) minmax(280px, 340px);
  gap: 12px;
}

.cnc-program-library,
.cnc-program-editor-panel,
.cnc-program-machine {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.cnc-program-library,
.cnc-program-machine {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cnc-program-pane-heading,
.cnc-program-machine-heading {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cnc-program-pane-heading > div,
.cnc-program-machine-heading > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cnc-program-pane-heading strong,
.cnc-program-machine-heading strong {
  font-size: 13px;
  line-height: 1.3;
}

.cnc-program-pane-heading small,
.cnc-program-machine-heading small {
  color: var(--muted);
  font-size: 11px;
}

.cnc-program-pane-heading .icon-button,
.cnc-program-machine-heading .icon-button {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

.cnc-program-list {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 5px;
  scrollbar-width: thin;
}

.cnc-program-draft-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 4px;
}

.cnc-program-draft-delete {
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  opacity: 0.68;
  transition: color var(--transition-fast), border-color var(--transition-fast),
    background var(--transition-fast), opacity var(--transition-fast);
}

.cnc-program-draft-delete svg {
  width: 14px;
  height: 14px;
}

.cnc-program-draft-delete:hover,
.cnc-program-draft-delete:focus-visible {
  border-color: color-mix(in srgb, var(--danger) 38%, transparent);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  opacity: 1;
  outline: 0;
}

.cnc-program-draft-delete:disabled {
  cursor: wait;
  opacity: 0.35;
}

.cnc-program-list-item {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.cnc-program-list-item:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.035);
}

.cnc-program-list-item.is-active {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.cnc-program-list-item.is-current span {
  color: var(--success);
  font-weight: 650;
}

.cnc-program-list-item strong {
  overflow: hidden;
  font: 600 12px/1.35 "Cascadia Mono", Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-program-list-item span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-program-list-item small {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.cnc-program-pane-empty {
  padding: 30px 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.cnc-program-pane-empty[hidden] {
  display: none;
}

.cnc-program-editor-panel {
  --cnc-editor-font-size: 13px;
  --cnc-editor-line-height: 21px;
  --cnc-editor-gutter-width: 54px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 38px 18px;
}

.cnc-program-editor-meta {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(125px, 165px) minmax(180px, 1fr) 36px;
  align-items: end;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

.cnc-program-editor-meta .field {
  margin: 0;
}

.cnc-program-editor-meta label,
.cnc-program-device-select > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.cnc-program-editor-meta input,
.cnc-program-device-select select {
  width: 100%;
  min-width: 0;
}

.cnc-program-delete {
  width: 36px;
  height: 36px;
  margin-bottom: 1px;
  color: var(--danger);
}

.cnc-code-editor {
  min-height: 0;
  display: grid;
  grid-template-columns: var(--cnc-editor-gutter-width) minmax(0, 1fr);
  overflow: hidden;
  background: var(--code-bg);
}

.cnc-code-lines,
.cnc-code-highlight,
.cnc-code-editor textarea {
  height: 100%;
  margin: 0;
  padding-top: 15px;
  padding-bottom: 28px;
  border: 0;
  border-radius: 0;
  outline: 0;
  font-family: "Cascadia Mono", "Microsoft YaHei UI", Consolas, monospace;
  font-size: var(--cnc-editor-font-size);
  line-height: var(--cnc-editor-line-height);
  letter-spacing: 0;
  tab-size: 2;
}

.cnc-code-lines {
  padding-left: 8px;
  padding-right: 12px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  color: #657086;
  background: var(--code-gutter-bg);
  text-align: right;
  user-select: none;
}

.cnc-code-input-layer {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.cnc-code-highlight,
.cnc-code-input-layer textarea {
  position: absolute;
  inset: 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding-left: 15px;
  padding-right: 20px;
  white-space: pre;
}

.cnc-code-highlight {
  z-index: 1;
  overflow: hidden;
  color: var(--code-text);
  background: transparent;
  pointer-events: none;
}

.cnc-token-g { color: var(--code-g); }
.cnc-token-m { color: var(--code-m); }
.cnc-token-t { color: var(--code-t); }
.cnc-token-s { color: var(--code-s); }

.cnc-code-editor textarea {
  z-index: 2;
  resize: none;
  color: transparent;
  background: transparent;
  caret-color: var(--accent);
  -webkit-text-fill-color: transparent;
  white-space: pre;
  overflow: auto;
}

.cnc-code-editor textarea::selection {
  background: color-mix(in srgb, var(--info) 42%, transparent);
}

.cnc-editor-resize-handle {
  position: relative;
  width: 100%;
  min-height: 18px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface-soft);
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  transition: background var(--transition-fast);
}

.cnc-editor-resize-handle span {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 46px;
  height: 4px;
  border-radius: 3px;
  background: var(--line-strong);
  transform: translateX(-50%);
}

.cnc-editor-resize-handle:hover span,
.cnc-editor-resize-handle:focus-visible span,
.cnc-editor-resize-handle.is-dragging span {
  background: var(--accent);
}

.cnc-editor-resize-handle:hover,
.cnc-editor-resize-handle.is-dragging {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-soft));
}

body.is-resizing-cnc-editor {
  cursor: ns-resize;
  user-select: none;
}

.cnc-program-editor-footer {
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 10px;
  white-space: nowrap;
}

.cnc-editor-font-controls {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.cnc-editor-font-controls button {
  display: inline-grid;
  width: 30px;
  height: 26px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font: 700 10px/1 -apple-system, "Segoe UI", "Microsoft YaHei UI", sans-serif;
}

.cnc-editor-font-controls button:hover,
.cnc-editor-font-controls button:focus-visible {
  border-color: var(--line-strong);
  color: var(--ink);
  background: var(--surface);
}

.cnc-editor-font-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.cnc-editor-font-controls .cnc-editor-font-value {
  width: 32px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

#cncProgramEditState {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

#cncProgramEditState i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}

#cncProgramEditState.is-dirty i {
  background: var(--warning);
}

#cncProgramEditState.is-saved i {
  background: var(--success);
}

.cnc-program-device-select {
  display: block;
}

.cnc-program-device-facts {
  min-height: 64px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-soft);
}

.cnc-program-device-facts span,
.cnc-program-device-facts small {
  color: var(--muted);
  font-size: 10px;
}

.cnc-program-device-facts strong {
  color: var(--muted);
  font-size: 11px;
}

.cnc-program-device-facts small {
  grid-column: 1 / -1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-program-device-facts.is-online strong {
  color: var(--success);
}

.cnc-program-machine-heading {
  padding-top: 2px;
  border-top: 1px solid var(--line);
}

.cnc-program-remote-list {
  flex-basis: 190px;
}

.cnc-program-remote-item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 4px;
  align-items: stretch;
}

.cnc-program-remote-delete {
  width: 30px;
  min-height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast),
    background var(--transition-fast), opacity var(--transition-fast);
}

.cnc-program-remote-delete svg {
  width: 14px;
  height: 14px;
}

.cnc-program-remote-delete:hover:not(:disabled),
.cnc-program-remote-delete:focus-visible {
  border-color: color-mix(in srgb, var(--danger) 38%, transparent);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  outline: 0;
}

.cnc-program-remote-delete:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.cnc-program-machine-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cnc-program-machine-actions .button {
  min-width: 0;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 11px;
}

.cnc-program-transfer {
  padding: 11px 12px;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface-soft);
}

.cnc-program-transfer[hidden] {
  display: none;
}

.cnc-program-transfer > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}

.cnc-program-transfer small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-program-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
}

.cnc-program-progress i {
  width: 0;
  height: 100%;
  display: block;
  background: var(--info);
  transition: width 180ms ease;
}

.cnc-program-transfer.is-complete .cnc-program-progress i {
  background: var(--success);
}

.cnc-program-transfer.is-error .cnc-program-progress i {
  background: var(--danger);
}

.cnc-parameter-page {
  --cnc-parameter-font-size: 12px;
  display: grid;
  gap: 14px;
}

.cnc-parameter-page[hidden],
.cnc-parameter-transfer[hidden] {
  display: none;
}

.cnc-parameter-top-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  gap: 14px;
}

.cnc-parameter-device-panel,
.cnc-parameter-permission-panel,
.cnc-boot-image-panel {
  min-height: 300px;
  padding: 18px;
  display: grid;
  align-content: start;
  gap: 14px;
}

.cnc-parameter-device-select {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.cnc-parameter-device-select select,
.cnc-parameter-filterbar select {
  min-width: 0;
  height: 38px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--ink);
  background: var(--input-bg);
}

.cnc-parameter-device-panel > .button,
.cnc-boot-image-panel > .button {
  justify-self: start;
}

.cnc-parameter-permission-panel .section-heading {
  min-height: 32px;
  align-items: center;
}

.cnc-parameter-permission-panel .section-heading .icon-button {
  width: 32px;
  height: 32px;
}

.cnc-parameter-permission-current {
  min-height: 58px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-soft);
}

.cnc-parameter-permission-current span,
.cnc-parameter-permission-current small,
.cnc-parameter-permission-actions small {
  color: var(--muted);
  font-size: 10px;
}

.cnc-parameter-permission-current strong {
  color: var(--ink);
  font-size: 15px;
  text-align: right;
}

.cnc-parameter-permission-current small {
  grid-column: 1 / -1;
  text-align: right;
}

.cnc-parameter-permission-current small.is-on,
.cnc-parameter-permission-actions small.is-ready {
  color: var(--success);
}

.cnc-parameter-permission-current small.is-off,
.cnc-parameter-permission-actions small.is-error {
  color: var(--danger);
}

.cnc-parameter-permission-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.cnc-parameter-permission-fields label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
}

.cnc-parameter-permission-fields select,
.cnc-parameter-permission-fields input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--ink);
  background: var(--input-bg);
}

.cnc-parameter-permission-fields select {
  padding-right: 30px;
}

.cnc-parameter-permission-actions {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.cnc-parameter-permission-actions small {
  min-width: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cnc-boot-image-warning {
  min-height: 34px;
  margin: 0;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 4px;
  color: var(--warning);
  background: rgba(245, 158, 11, 0.07);
  font-size: 10px;
  line-height: 1.4;
}

.cnc-boot-image-warning svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.cnc-boot-file-row {
  min-height: 64px;
  padding: 10px;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-soft);
}

.cnc-boot-file-row > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.cnc-boot-file-row strong,
.cnc-boot-file-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-boot-file-row strong { font-size: 12px; }
.cnc-boot-file-row small { color: var(--muted); font-size: 10px; }

.cnc-parameter-transfer {
  padding: 14px 16px;
  display: grid;
  gap: 9px;
  border-left: 3px solid var(--info);
}

.cnc-parameter-transfer > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.cnc-parameter-transfer small { color: var(--muted); font-size: 11px; }
.cnc-parameter-transfer.is-complete { border-left-color: var(--success); }
.cnc-parameter-transfer.is-complete .cnc-program-progress i { background: var(--success); }
.cnc-parameter-transfer.is-error { border-left-color: var(--danger); }
.cnc-parameter-transfer.is-error .cnc-program-progress i { background: var(--danger); }

.cnc-parameter-table-panel { overflow: hidden; }

.cnc-parameter-filterbar {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}

.cnc-parameter-filterbar .section-heading { margin: 0; }
.cnc-parameter-filterbar .toolbar-controls {
  flex: 1 1 720px;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cnc-parameter-filterbar .search-input {
  width: auto;
  min-width: 220px;
  flex: 1 1 280px;
}
.cnc-parameter-filterbar select {
  width: 140px;
  min-width: 128px;
  flex: 0 1 140px;
}
.cnc-parameter-filterbar .cnc-parameter-font-controls {
  flex: 0 0 114px;
}

.cnc-parameter-batchbar {
  min-height: 58px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.cnc-parameter-batchbar > div:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.cnc-parameter-batchbar > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.cnc-parameter-batchbar strong { color: var(--ink); font-size: 12px; }
.cnc-parameter-batchbar span { color: var(--muted); font-size: 10px; }

.cnc-parameter-font-controls {
  height: 38px;
  display: inline-grid;
  grid-template-columns: 32px 50px 32px;
  align-items: center;
  flex: 0 0 114px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--input-bg);
}

.cnc-parameter-font-controls .icon-button {
  width: 32px;
  height: 36px;
  border: 0;
  border-radius: 0;
}

.cnc-parameter-font-controls output {
  height: 22px;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
  color: var(--ink);
  font: 700 10px/1 Consolas, monospace;
  white-space: nowrap;
}

.cnc-parameter-groups {
  min-height: 474px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
  background: #253047;
}

.cnc-parameter-column {
  min-width: 0;
  display: block;
}

.cnc-parameter-machine-pane {
  overflow: hidden;
  border: 1px solid #71809a;
  background: #e8ecf2;
  color: #172033;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) inset;
}

.cnc-parameter-machine-header,
.cnc-parameter-machine-row {
  min-width: 0;
  display: grid;
  grid-template-columns: clamp(70px, calc(var(--cnc-parameter-font-size) * 5), 96px) minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid #aeb8c8;
}

.cnc-parameter-machine-header {
  min-height: 38px;
  color: #15213a;
  background: #c7d0de;
  font-size: var(--cnc-parameter-font-size);
  font-weight: 700;
}

.cnc-parameter-machine-header span,
.cnc-parameter-machine-header strong,
.cnc-parameter-machine-row > span:first-child {
  height: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #98a5b9;
}

.cnc-parameter-machine-header strong {
  padding: 0 8px;
}

.cnc-parameter-machine-row:last-child {
  border-bottom: 0;
}

.cnc-parameter-machine-row.is-heading {
  min-height: 38px;
  background: #aebcd0;
}

.cnc-parameter-machine-row.is-heading > strong {
  min-width: 0;
  padding: 0 8px;
  overflow: hidden;
  color: #111b2d;
  font-size: var(--cnc-parameter-font-size);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-parameter-machine-serial {
  color: #24344f;
  font: 700 var(--cnc-parameter-font-size)/1 Consolas, monospace;
}

.cnc-parameter-machine-row.is-value:nth-child(odd),
.cnc-parameter-machine-row.is-empty:nth-child(odd) {
  background: #f0efe3;
}

.cnc-parameter-machine-row.is-value:nth-child(even),
.cnc-parameter-machine-row.is-empty:nth-child(even) {
  background: #e8edf3;
}

.cnc-parameter-machine-axis {
  color: #26344b;
  font: 700 var(--cnc-parameter-font-size)/1.2 Consolas, monospace;
  overflow-wrap: anywhere;
  text-align: center;
}

.cnc-parameter-machine-row.is-parameter {
  min-height: max(78px, calc(var(--cnc-parameter-font-size) * 5.2));
  align-items: stretch;
}

.cnc-parameter-machine-row.is-changed {
  box-shadow: 3px 0 0 #d38a17 inset;
}

.cnc-parameter-machine-row.is-writing {
  box-shadow: 3px 0 0 #416dc4 inset;
}

.cnc-parameter-machine-row.is-success {
  box-shadow: 3px 0 0 #16835f inset;
}

.cnc-parameter-machine-row.is-failed {
  box-shadow: 3px 0 0 #bd3f35 inset;
}

.cnc-parameter-machine-editor {
  min-width: 0;
  padding: 8px 10px;
  display: grid;
  align-content: center;
  gap: 6px;
  color: #162138;
}

.cnc-parameter-machine-annotation {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cnc-parameter-machine-annotation strong {
  min-width: 0;
  color: #162138;
  font-size: var(--cnc-parameter-font-size);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.cnc-parameter-machine-annotation small {
  color: #59677c;
  font-size: max(10px, calc(var(--cnc-parameter-font-size) - 2px));
  line-height: 1.2;
}

.cnc-parameter-machine-control {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.cnc-parameter-change-meta {
  min-width: 118px;
  display: grid;
  gap: 2px;
  color: #59677c;
  font-size: max(10px, calc(var(--cnc-parameter-font-size) - 2px));
  line-height: 1.2;
}

.cnc-parameter-change-meta strong {
  color: #71470d;
  font: 700 max(10px, calc(var(--cnc-parameter-font-size) - 1px))/1.2 Consolas, monospace;
}

.cnc-parameter-change-state {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  padding: 3px 6px;
  border: 1px solid rgba(211, 138, 23, 0.35);
  border-radius: 3px;
  color: #71470d;
  background: rgba(211, 138, 23, 0.1);
  font-size: max(9px, calc(var(--cnc-parameter-font-size) - 3px));
  font-weight: 700;
}

.cnc-parameter-change-state.is-writing {
  border-color: rgba(65, 109, 196, 0.36);
  color: #244f9f;
  background: rgba(65, 109, 196, 0.11);
}

.cnc-parameter-change-state.is-success {
  border-color: rgba(22, 131, 95, 0.34);
  color: #12674c;
  background: rgba(22, 131, 95, 0.1);
}

.cnc-parameter-change-state.is-failed {
  border-color: rgba(189, 63, 53, 0.36);
  color: #9f3129;
  background: rgba(189, 63, 53, 0.1);
}

.cnc-parameter-number-input {
  width: min(190px, 48%);
  min-width: 92px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #8d9bb0;
  border-radius: 3px;
  outline: 0;
  color: #111b2d;
  background: #ffffff;
  font: 600 var(--cnc-parameter-font-size)/1 Consolas, monospace;
  text-align: right;
}

.cnc-parameter-number-input:focus {
  border-color: #416dc4;
  box-shadow: 0 0 0 2px rgba(65, 109, 196, 0.16);
}

.cnc-parameter-number-input:disabled {
  color: #69768a;
  background: #d9dee6;
  cursor: not-allowed;
}

.cnc-parameter-bit-toggle {
  width: 76px;
  height: 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
  overflow: hidden;
  border: 1px solid #8d9bb0;
  border-radius: 3px;
  background: #d9dee6;
  cursor: pointer;
}

.cnc-parameter-bit-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cnc-parameter-bit-toggle span {
  display: grid;
  place-items: center;
  color: #59677c;
  font: 700 var(--cnc-parameter-font-size)/1 Consolas, monospace;
}

.cnc-parameter-bit-toggle input:not(:checked) ~ span:first-of-type,
.cnc-parameter-bit-toggle input:checked ~ span:last-of-type {
  color: #ffffff;
  background: #416dc4;
}

.cnc-parameter-bit-toggle:has(input:focus-visible) {
  box-shadow: 0 0 0 2px rgba(65, 109, 196, 0.2);
}

.cnc-parameter-bit-toggle:has(input:disabled) {
  opacity: 0.58;
  cursor: not-allowed;
}

.cnc-parameter-write-button {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-color: #8d9bb0;
  color: #263b64;
  background: rgba(255, 255, 255, 0.58);
}

.cnc-parameter-write-button:hover:not(:disabled),
.cnc-parameter-write-button:focus-visible:not(:disabled) {
  color: #173f8d;
  background: #ffffff;
}

.cnc-parameter-edit-reason {
  min-width: 0;
  color: #7d4b18;
  font-size: max(10px, calc(var(--cnc-parameter-font-size) - 2px));
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.cnc-parameter-edit-reason.is-permission {
  color: #a33a31;
  font-weight: 700;
}

.cnc-parameter-machine-row.is-empty { color: transparent; }

.cnc-parameter-machine-row.is-empty {
  min-height: max(78px, calc(var(--cnc-parameter-font-size) * 5.2));
}

.cnc-parameter-machine-header + .cnc-parameter-machine-row {
  border-top: 0;
}

.cnc-parameter-pagination {
  min-height: 54px;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-top: 1px solid var(--line);
}

.cnc-parameter-pagination span {
  min-width: 96px;
  color: var(--muted);
  text-align: center;
  font: 600 11px/1 Consolas, monospace;
}

.cnc-parameter-type {
  display: inline-flex;
  min-width: 42px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(91, 141, 239, 0.28);
  border-radius: 3px;
  color: var(--info);
  background: rgba(91, 141, 239, 0.08);
  font-size: 10px;
}

.cnc-parameter-type.is-bit {
  border-color: rgba(160, 200, 20, 0.28);
  color: var(--accent);
  background: rgba(160, 200, 20, 0.07);
}

.activation-remote-row {
  margin-top: 18px;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
}

.activation-remote-row > div { display: grid; gap: 4px; }
.activation-remote-row strong { font-size: 12px; }
.activation-remote-row small { color: var(--muted); font-size: 10px; }
.activation-remote-row small.is-online { color: var(--success); }
.activation-remote-row small.is-error { color: var(--danger); }

@media (max-width: 1260px) {
  .cnc-parameter-top-grid {
    grid-template-columns: repeat(2, minmax(320px, 1fr));
  }

  .cnc-program-workspace {
    grid-template-columns: 220px minmax(420px, 1fr) 280px;
  }
}

@media (max-width: 1180px) {
  .cnc-parameter-groups { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .cnc-parameter-top-grid { grid-template-columns: 1fr; }
  .cnc-parameter-filterbar { align-items: stretch; flex-direction: column; }
  .cnc-parameter-filterbar .toolbar-controls { width: 100%; flex-wrap: wrap; }
  .cnc-parameter-filterbar .search-input { width: 100%; }
  .cnc-parameter-filterbar select { flex: 1 1 150px; }
  .cnc-parameter-batchbar { align-items: stretch; flex-direction: column; }
  .cnc-parameter-batchbar > div:last-child { justify-content: flex-start; }
  .cnc-program-workspace {
    height: var(--cnc-workspace-height, auto);
    min-height: 0;
    grid-template-columns: minmax(210px, 0.7fr) minmax(420px, 1.3fr);
  }

  .cnc-program-machine {
    min-height: 420px;
    grid-column: 1 / -1;
  }

  .cnc-program-remote-list {
    min-height: 180px;
  }
}

.theme-toggle {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  background: var(--surface-soft);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.theme-toggle:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.theme-toggle svg {
  width: 17px;
  height: 17px;
}

.login-theme-toggle {
  position: absolute;
  top: 24px;
  left: 184px;
  z-index: 12;
  width: 48px;
  height: 28px;
  color: #C8CDD6;
  background: rgba(12, 14, 18, 0.72);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] {
  --bg: #E7ECEF;
  --surface: #F3F6F7;
  --surface-solid: #F7F9F9;
  --surface-soft: #E8EDEF;
  --ink: #19242C;
  --muted: #596A76;
  --line: rgba(34, 52, 63, 0.12);
  --line-strong: rgba(34, 52, 63, 0.21);
  --charcoal: #EDF1F2;
  --charcoal-soft: #E4EAEC;
  --accent: #8DAE18;
  --accent-dark: #60790B;
  --brand: #86A715;
  --brand-strong: #687F0E;
  --input-bg: #EDF1F2;
  --input-focus-bg: #F7F9F9;
  --code-bg: #EEF2F3;
  --code-gutter-bg: #E2E8EA;
  --code-text: #25343D;
  --code-g: #5D7F4F;
  --code-m: #B85C00;
  --code-t: #7B3FB0;
  --code-s: #167C3B;
  --shadow: 0 18px 42px rgba(36, 51, 61, 0.14), 0 5px 15px rgba(36, 51, 61, 0.07);
  --shadow-soft: 0 2px 8px rgba(36, 51, 61, 0.07), 0 1px 2px rgba(36, 51, 61, 0.05);
  --shadow-hover: 0 7px 20px rgba(36, 51, 61, 0.12), 0 2px 6px rgba(36, 51, 61, 0.07);
  color-scheme: light;
}

html[data-theme="light"] body,
html[data-theme="light"] .app-view,
html[data-theme="light"] .login-right {
  background: var(--bg);
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .code-block,
html[data-theme="light"] .machine-code-preview {
  color: var(--ink);
  background: var(--input-bg);
}

html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
  background: var(--input-focus-bg);
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #9099A8;
}

html[data-theme="light"] input:disabled {
  color: #8A93A2;
  background: #ECEFF3;
}

html[data-theme="light"] .sidebar {
  color: var(--ink);
  background: #FFFFFF;
  border-right-color: var(--line);
  box-shadow: 4px 0 20px rgba(31, 40, 54, 0.08);
}

html[data-theme="light"] .sidebar::after,
html[data-theme="light"] .main-shell::before,
html[data-theme="light"] .login-right::after {
  opacity: 0.25;
}

html[data-theme="light"] .sidebar-brand,
html[data-theme="light"] .sidebar-account-wrap,
html[data-theme="light"] .nav-subnav {
  border-color: var(--line);
}

html[data-theme="light"] .sidebar-brand span,
html[data-theme="light"] .nav-section-label,
html[data-theme="light"] .nav-sub-button,
html[data-theme="light"] .nav-button,
html[data-theme="light"] .account-copy span,
html[data-theme="light"] .account-chevron,
html[data-theme="light"] .server-release-card small,
html[data-theme="light"] .server-release-card b {
  color: var(--muted);
}

html[data-theme="light"] .nav-button:hover,
html[data-theme="light"] .nav-button.active,
html[data-theme="light"] .nav-sub-button:hover,
html[data-theme="light"] .nav-sub-button.active,
html[data-theme="light"] .user-menu-item {
  color: var(--ink);
}

html[data-theme="light"] .server-release-card,
html[data-theme="light"] .sidebar-account:hover,
html[data-theme="light"] .sidebar-account[aria-expanded="true"] {
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="light"] .avatar {
  color: var(--accent-dark);
  border-color: var(--line);
  background: #EEF2E2;
}

html[data-theme="light"] .user-menu,
html[data-theme="light"] .dialog {
  color: var(--ink);
  background: #FFFFFF;
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

html[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .cnc-code-editor textarea {
  color: transparent;
  background: transparent;
  -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .cnc-program-list-item:hover,
html[data-theme="light"] .cnc-state-pill {
  background: rgba(20, 28, 40, 0.035);
}

@media (max-width: 680px) {
  .login-theme-toggle {
    top: 20px;
    left: auto;
    right: 20px;
  }

  .cnc-program-workspace {
    --cnc-workspace-height: auto;
  }

  .cnc-program-editor-panel {
    height: var(--cnc-mobile-editor-height, 570px);
  }
}

@media (max-width: 680px) {
  .cnc-program-toolbar {
    align-items: stretch;
  }

  .cnc-program-toolbar .toolbar-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .cnc-program-workspace {
    display: flex;
    flex-direction: column;
  }

  .cnc-program-library {
    min-height: 270px;
  }

  .cnc-program-editor-panel {
    min-height: 420px;
  }

  .cnc-program-editor-meta {
    grid-template-columns: minmax(120px, 0.75fr) minmax(160px, 1.25fr) 36px;
  }

  .cnc-program-machine {
    min-height: 460px;
  }

  .cnc-code-editor {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .cnc-program-editor-footer {
    gap: 10px;
  }

  #cncProgramCursor {
    display: none;
  }
}

/* Visitor registration management */
.visitor-overview-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.visitor-panel {
  display: grid;
  gap: 14px;
}

.visitor-panel[hidden] {
  display: none;
}

.visitor-filter-controls {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(132px, 0.7fr)) repeat(3, minmax(130px, 0.7fr)) 38px 38px;
  align-items: center;
  gap: 8px;
}

.page-toolbar.visitor-toolbar {
  align-items: stretch;
  flex-direction: column;
}

.visitor-toolbar .visitor-filter-controls {
  display: grid;
  width: 100%;
  flex: 0 0 auto;
  min-height: 0;
}

.visitor-filter-controls input[type="date"] {
  min-width: 132px;
}

.visitor-privacy-note,
.visitor-qr-guidance {
  min-height: 48px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.visitor-privacy-note svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visitor-record-table {
  min-width: 1120px;
}

.visitor-record-table td small,
.visitor-qr-table td small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.visitor-record-table td strong,
.visitor-qr-table td strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}

.visitor-status-registered {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 32%, transparent);
  background: color-mix(in srgb, var(--success) 10%, transparent);
}

.visitor-status-voided {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
}

.visitor-qr-guidance {
  justify-content: space-between;
}

.visitor-qr-guidance > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.visitor-qr-guidance strong {
  color: var(--ink);
  font-size: 12px;
}

.visitor-qr-guidance span {
  color: var(--muted);
  font-size: 11px;
}

.visitor-qr-guidance > span {
  flex: 0 0 auto;
  color: var(--accent);
}

.visitor-qr-table {
  min-width: 1000px;
}

.visitor-qr-link {
  max-width: 270px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font: 11px/1.5 "Cascadia Mono", Consolas, monospace;
}

.visitor-detail-dialog {
  width: min(760px, calc(100vw - 32px));
}

.visitor-detail-body {
  padding: 22px 24px 6px;
}

.visitor-detail-hero {
  min-height: 70px;
  padding-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}

.visitor-detail-hero > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.visitor-detail-hero > div > span:last-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.visitor-detail-hero strong {
  overflow-wrap: anywhere;
  font-size: 18px;
}

.visitor-detail-hero small {
  color: var(--muted);
  font-size: 11px;
}

.visitor-detail-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.visitor-detail-grid > div {
  min-height: 64px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
}

.visitor-detail-grid > div:nth-child(odd) {
  padding-right: 18px;
}

.visitor-detail-grid > div:nth-child(even) {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.visitor-detail-grid dt {
  color: var(--muted);
  font-size: 10px;
}

.visitor-detail-grid dd {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 12px;
}

.visitor-detail-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 18px 4px;
}

.visitor-detail-notes strong,
.visitor-void-info strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.visitor-detail-notes p,
.visitor-void-info p,
.visitor-void-info span {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.visitor-void-info {
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--danger) 6%, transparent);
}

.visitor-qr-dialog {
  width: min(900px, calc(100vw - 32px));
}

.visitor-qr-dialog-body {
  padding: 22px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 24px;
}

.visitor-qr-form-fields {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 16px;
}

.visitor-qr-preview {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft);
}

.visitor-qr-canvas-wrap {
  width: min(100%, 260px);
  aspect-ratio: 1;
  padding: 10px;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #ffffff;
}

.visitor-qr-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

.visitor-qr-canvas-wrap span {
  position: absolute;
  inset: 10px;
  display: grid;
  place-items: center;
  color: #65717c;
  background: #f2f4f5;
  font-size: 12px;
}

.visitor-qr-preview > strong {
  max-width: 100%;
  margin-top: 14px;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.visitor-qr-preview code {
  width: 100%;
  margin-top: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.visitor-qr-preview .button {
  margin-top: 15px;
}

@media (max-width: 1480px) {
  .visitor-filter-controls {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .visitor-filter-controls .search-input {
    width: 100%;
    grid-column: 1 / 5;
    grid-row: 1;
    min-width: 0;
  }

  .visitor-filter-controls #visitorDateFrom {
    grid-column: 5 / 9;
    grid-row: 1;
  }

  .visitor-filter-controls #visitorDateTo {
    grid-column: 9 / 13;
    grid-row: 1;
  }

  .visitor-filter-controls input[type="date"],
  .visitor-filter-controls input[data-i18n-date-input="true"],
  .visitor-filter-controls select {
    width: 100%;
    min-width: 0;
  }

  #visitorEntranceFilter {
    grid-column: 1 / 4;
    grid-row: 2;
  }

  #visitorPurposeFilter {
    grid-column: 4 / 7;
    grid-row: 2;
  }

  #visitorStatusFilter {
    grid-column: 7 / 10;
    grid-row: 2;
  }

  #exportVisitorsButton {
    grid-column: 11 / 12;
    grid-row: 2;
  }

  #refreshVisitorsButton {
    grid-column: 12 / 13;
    grid-row: 2;
  }

  #exportVisitorsButton,
  #refreshVisitorsButton {
    width: 42px;
    min-width: 42px;
    justify-self: end;
  }
}

@media (max-width: 980px) {
  .visitor-overview-bar {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    overflow-x: auto;
  }

  .visitor-toolbar .visitor-filter-controls {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    width: 100%;
  }

  .visitor-filter-controls .search-input {
    width: 100%;
    flex: 1 0 100%;
  }

  .visitor-filter-controls input[type="date"],
  .visitor-filter-controls input[data-i18n-date-input="true"] {
    min-width: calc(50% - 4px);
    flex: 1 1 calc(50% - 4px);
  }

  .visitor-filter-controls select {
    min-width: 132px;
    flex: 1 1 132px;
  }

  #exportVisitorsButton,
  #refreshVisitorsButton {
    flex: 0 0 40px;
  }

  .visitor-qr-dialog-body {
    grid-template-columns: 1fr;
  }

  .visitor-qr-preview {
    order: -1;
  }
}

@media (max-width: 640px) {
  .visitor-overview-bar {
    grid-template-columns: repeat(3, minmax(136px, 1fr));
  }

  .visitor-toolbar .visitor-filter-controls {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
  }

  .visitor-filter-controls .search-input {
    width: 100%;
    flex: 1 0 100%;
  }

  .visitor-filter-controls input[type="date"],
  .visitor-filter-controls select {
    min-width: calc(50% - 4px);
    flex: 1 1 calc(50% - 4px);
  }

  .visitor-privacy-note,
  .visitor-qr-guidance {
    align-items: flex-start;
  }

  .visitor-qr-guidance {
    flex-direction: column;
  }

  .visitor-detail-dialog,
  .visitor-qr-dialog {
    width: calc(100vw - 16px);
  }

  .visitor-detail-body,
  .visitor-qr-dialog-body {
    padding: 18px 16px;
  }

  .visitor-detail-grid {
    grid-template-columns: 1fr;
  }

  .visitor-detail-grid > div:nth-child(odd),
  .visitor-detail-grid > div:nth-child(even) {
    padding-right: 4px;
    padding-left: 4px;
    border-left: 0;
  }

  .visitor-detail-notes {
    grid-template-columns: 1fr;
  }
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

html,
body {
  width: 100%;
  min-width: 320px;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

body {
  height: 100%;
  min-height: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

button {
  color: inherit;
}

[hidden] {
  display: none !important;
}

.icon-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

/* ══ LOGIN SPLIT LAYOUT ══ */
.login-view {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.login-container {
  display: flex;
  height: 100%;
}

/* ── Left Panel ── */
.login-left {
  flex: 0 0 58%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #0a1018 0%, #141e28 35%, #0e1620 70%, #0a0e14 100%);
}

.login-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 35% 45%, rgba(160,200,20,0.06) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 65% 65%, rgba(107,123,141,0.05) 0%, transparent 55%);
  z-index: 2;
}

.login-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(160,200,20,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160,200,20,0.02) 1px, transparent 1px);
  background-size: 70px 70px;
  z-index: 2;
}

.login-deco-lines {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
}

.login-deco-lines::before {
  content: '';
  position: absolute;
  top: 18%;
  left: -10%;
  width: 120%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160,200,20,0.12), rgba(160,200,20,0.25), rgba(160,200,20,0.12), transparent);
  transform: rotate(-12deg);
}

.login-deco-lines::after {
  content: '';
  position: absolute;
  top: 55%;
  left: -10%;
  width: 120%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(107,123,141,0.10), rgba(107,123,141,0.18), rgba(107,123,141,0.10), transparent);
  transform: rotate(-12deg);
}

.login-corner-deco {
  position: absolute;
  width: 90px;
  height: 90px;
  z-index: 4;
}

.login-corner-tl {
  top: 30px;
  left: 30px;
  border-top: 1px solid rgba(160,200,20,0.12);
  border-left: 1px solid rgba(160,200,20,0.12);
}

.login-corner-br {
  bottom: 30px;
  right: 30px;
  border-bottom: 1px solid rgba(107,123,141,0.12);
  border-right: 1px solid rgba(107,123,141,0.12);
}

.login-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.language-switcher {
  display: inline-grid;
  grid-template-columns: repeat(2, 38px);
  height: 30px;
  padding: 3px;
  border: 1px solid rgba(160, 200, 20, 0.18);
  border-radius: 5px;
  background: rgba(12, 14, 18, 0.72);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
}

.language-switcher button {
  display: grid;
  width: 38px;
  min-width: 38px;
  height: 22px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.language-switcher button:hover {
  color: var(--ink);
}

.language-switcher button.active {
  background: var(--accent);
  color: #0c0e12;
}

.login-language-switcher {
  position: absolute;
  top: 24px;
  left: 30px;
  z-index: 12;
}

.sidebar-language-switcher {
  margin-left: auto;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, 32px);
}

.sidebar-language-switcher button {
  width: 32px;
  min-width: 32px;
}

.topbar-language-switcher {
  display: none;
  margin-left: auto;
  flex: 0 0 auto;
}

.login-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(160,200,20,0.45);
  border-radius: 50%;
  animation: login-float-up linear infinite;
}

.login-particle.gray {
  background: rgba(107,123,141,0.35);
}

@keyframes login-float-up {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

.login-hex-deco {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0.03;
}

.login-left-content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px;
}

.login-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(160,200,20,0.08);
  border: 1px solid rgba(160,200,20,0.18);
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 40px;
  width: fit-content;
  font-weight: 600;
}

.login-brand-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: login-pulse-dot 2s ease-in-out infinite;
}

@keyframes login-pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(160,200,20,0.4); }
  50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(160,200,20,0); }
}

.login-left-title {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #F0F2F5 0%, #C0C8D4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.login-left-subtitle {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.8;
  max-width: 460px;
  margin-bottom: 50px;
}

.login-left-subtitle strong {
  color: var(--accent);
  font-weight: 600;
}

.login-stats-row {
  display: flex;
  gap: 48px;
}

.login-stat-item {
  position: relative;
}

.login-stat-number {
  font-size: 38px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
}

.login-stat-number span {
  font-size: 20px;
  color: var(--accent);
  margin-left: 2px;
}

.login-stat-label {
  font-size: 13px;
  color: var(--muted);
}

.login-stat-item + .login-stat-item::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.06);
}

/* ── Right Panel ── */
.login-right {
  flex: 0 0 42%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-left: 1px solid var(--line);
}

.login-right::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), rgba(160,200,20,0.3), transparent);
}

.login-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.004) 2px, rgba(255,255,255,0.004) 4px);
  pointer-events: none;
}

.login-form-wrapper {
  width: 380px;
  position: relative;
  z-index: 1;
}

.login-form-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 50px;
}

.login-form-logo .login-logo-img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  object-fit: contain;
}

.login-logo-text-group {
  display: flex;
  flex-direction: column;
}

.login-logo-cn {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 2px;
}

.login-logo-en {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 2px;
}

.login-form-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 8px;
}

.login-form-desc {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 36px;
}

.login-form {
  display: grid;
  gap: 20px;
}

.login-field-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 500;
}

.login-input-wrapper {
  position: relative;
}

.login-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  width: 18px;
  height: 18px;
}

.login-input {
  width: 100%;
  height: 48px;
  background: var(--charcoal);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 16px 0 44px;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: all 0.2s;
}

.login-input::placeholder {
  color: var(--muted);
}

.login-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(160,200,20,0.20);
}

.login-remember-device {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-top: 0;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}

.login-remember-device input {
  appearance: none;
  display: grid;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--charcoal);
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease,
    box-shadow 150ms ease;
}

.login-remember-device input::after {
  display: block;
  width: 9px;
  height: 5px;
  margin-top: -2px;
  border: solid #172326;
  border-width: 0 0 2px 2px;
  content: "";
  opacity: 0;
  transform: rotate(-45deg) scale(0.75);
  transition: opacity 120ms ease, transform 120ms ease;
}

.login-remember-device input:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.login-remember-device input:checked::after {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

.login-remember-device:hover input {
  border-color: var(--accent);
}

.login-remember-device input:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(160, 200, 20, 0.20);
}

.login-remember-device strong,
.login-remember-device small {
  display: block;
}

.login-remember-device > span {
  min-width: 0;
}

.login-remember-device strong {
  font-size: 13px;
  line-height: 1.35;
}

.login-remember-device small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.login-view .login-button {
  height: 50px;
  border-radius: 8px;
  letter-spacing: 3px;
  font-size: 15px;
  position: relative;
  overflow: hidden;
}

.login-view .login-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s;
}

.login-view .login-button:hover::after {
  left: 100%;
}

.login-view .login-footer {
  margin-top: 44px;
  text-align: center;
}

.login-view .login-footer .version-label {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
  background: rgba(255,255,255,0.03);
  padding: 3px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
}

/* ══ LOGIN RESPONSIVE ══ */
@media (max-width: 960px) {
  .login-view { overflow-y: auto; }
  .login-container { flex-direction: column; min-height: 100%; height: auto; }
  .login-left { flex: none; min-height: auto; }
  .login-language-switcher { top: 20px; left: 28px; }
  .login-left-content { padding: 72px 28px 28px; }
  .login-left-title { font-size: 28px; margin-bottom: 12px; }
  .login-left-subtitle { font-size: 14px; line-height: 1.6; margin-bottom: 24px; }
  .login-brand-badge { margin-bottom: 20px; font-size: 10px; padding: 5px 14px; }
  .login-stats-row { gap: 20px; }
  .login-stat-number { font-size: 24px; }
  .login-stat-number span { font-size: 14px; }
  .login-stat-label { font-size: 11px; }
  .login-stat-item + .login-stat-item::before { left: -10px; height: 28px; }
  .login-hex-deco { display: none; }
  .login-corner-deco { display: none; }
  .login-right { flex: none; padding: 32px 0; }
  .login-form-wrapper { width: calc(100% - 56px); max-width: 380px; margin: 0 auto; }
  .login-form-logo { margin-bottom: 28px; }
  .login-form-logo .login-logo-img { width: 40px; height: 40px; }
  .login-logo-cn { font-size: 18px; }
  .login-form-title { font-size: 22px; }
  .login-form-desc { margin-bottom: 24px; }
  .login-view .login-footer { margin-top: 28px; }
}

@media (max-width: 480px) {
  .login-language-switcher { top: 16px; left: 20px; }
  .login-left-content { padding: 64px 20px 20px; }
  .login-left-title { font-size: 24px; }
  .login-left-subtitle { font-size: 13px; }
  .login-stats-row { gap: 16px; }
  .login-stat-number { font-size: 20px; }
  .login-stat-item + .login-stat-item::before { left: -8px; height: 24px; }
  .login-right { padding: 24px 0; }
  .login-form-wrapper { width: calc(100% - 40px); }
  .login-input { height: 44px; font-size: 13px; }
  .login-view .login-button { height: 46px; font-size: 14px; letter-spacing: 2px; }
}

.field {
  display: grid;
  min-width: 0;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
}

.field label,
.field legend {
  color: #C8CDD6;
  font-size: 13px;
  font-weight: 650;
}

.field label span {
  color: var(--muted);
  font-weight: 400;
}

input,
select,
textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  outline: none;
  background: #0C0E12;
  color: var(--ink);
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

input:hover,
select:hover,
textarea:hover {
  border-color: rgba(160, 200, 20, 0.30);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  background: #151820;
  box-shadow: 0 0 0 3px rgba(160, 200, 20, 0.12), 0 1px 3px rgba(0, 0, 0, 0.20);
}

input::placeholder,
textarea::placeholder {
  color: #5A6478;
  opacity: 1;
}

input:disabled {
  cursor: not-allowed;
  background: #0C0E12;
  color: #5A6478;
}

textarea {
  min-height: 112px;
  resize: vertical;
  line-height: 1.55;
}

.password-input {
  position: relative;
}

.password-input input {
  padding-right: 44px;
}

.password-input input::-ms-clear,
.password-input input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

.password-input input::-webkit-contacts-auto-fill-button,
.password-input input::-webkit-credentials-auto-fill-button {
  position: absolute;
  right: 0;
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

.password-input .password-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
}

.form-error {
  min-height: 20px;
  margin: -2px 0 -4px;
  color: var(--danger);
  font-size: 13px;
}

.button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 650;
  transition: all var(--transition);
}

.button:hover:not(:disabled) {
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

.button:active:not(:disabled) {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
  transform: translateY(0);
}

.button:focus-visible,
.icon-button:focus-visible,
.nav-button:focus-visible,
.table-action:focus-visible,
.dialog-close:focus-visible {
  outline: 3px solid rgba(160, 200, 20, 0.18);
  outline-offset: 2px;
}

.button:disabled,
.icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.button-primary {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #0C0E12;
  box-shadow: 0 2px 8px rgba(160, 200, 20, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.button-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #B3D62F 0%, var(--accent-dark) 100%);
  box-shadow: 0 6px 18px rgba(160, 200, 20, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.button-secondary {
  border-color: var(--line-strong);
  background: #0C0E12;
  color: #C8CDD6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
}

.button-secondary:hover:not(:disabled) {
  border-color: rgba(160, 200, 20, 0.25);
  background: #151820;
}

.button-danger {
  background: var(--danger);
  color: #ffffff;
}

.button-danger:hover:not(:disabled) {
  background: #DC2626;
}

.login-button {
  width: 100%;
  min-height: 42px;
}

.button[aria-busy="true"] {
  position: relative;
  color: transparent;
}

.button[aria-busy="true"]::after {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(160, 200, 20, 0.30);
  border-top-color: var(--brand);
  border-radius: 50%;
  content: "";
  animation: spin 700ms linear infinite;
}

.button-secondary[aria-busy="true"]::after {
  border-color: rgba(160, 200, 20, 0.15);
  border-top-color: var(--accent);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.login-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

.server-state {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}

.version-label {
  color: #6B7B8D;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.server-state span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.server-state strong {
  font-weight: 500;
}

.server-state.offline {
  color: var(--danger);
}

.server-state.offline span {
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.app-view {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-columns: 252px minmax(0, 1fr);
  overflow: hidden;
  background: var(--bg);
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  padding: 18px 14px 16px;
  overflow-x: hidden;
  background: linear-gradient(180deg, #0C0E12 0%, var(--charcoal) 100%);
  color: #E8EBF0;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.40);
  border-right: 1px solid rgba(255,255,255,0.05);
}

.sidebar::before {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--brand) 0%, #8DB012 100%);
  z-index: 10;
}

.sidebar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.003) 3px, rgba(255,255,255,0.003) 6px);
  pointer-events: none;
  z-index: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 76px;
  padding: 0 7px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-brand img,
.sidebar-logo-img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: contain;
  border-radius: 3px;
}

.sidebar-brand strong,
.sidebar-brand span {
  display: block;
}

.sidebar-brand strong {
  font-size: 15px;
}

.sidebar-brand span {
  margin-top: 1px;
  color: #6B7B8D;
  font-size: 11px;
}

.main-nav {
  display: grid;
  min-height: 0;
  align-content: start;
  flex: 1 1 auto;
  gap: 5px;
  padding-top: 16px;
  overflow-x: hidden;
  overflow-y: auto;
}

.nav-section-label {
  margin: 2px 11px 5px;
  color: #5A6478;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.8px;
}

.nav-section-system {
  margin-top: 12px;
}

.nav-group {
  position: relative;
  display: grid;
  gap: 4px;
}

.nav-chevron {
  margin-left: auto;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform 150ms ease;
}

.nav-button[aria-expanded="true"] .nav-chevron {
  transform: rotate(-90deg);
}

.nav-subnav {
  display: grid;
  gap: 2px;
  margin: 0 0 3px 20px;
  padding: 2px 0 2px 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-sub-button {
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
  color: #8B95A8;
  font-size: 12px;
  text-align: left;
}

.nav-sub-button:hover,
.nav-sub-button.active {
  background: rgba(160, 200, 20, 0.08);
  color: #D9E5BC;
}

.nav-sub-button.active {
  box-shadow: inset 2px 0 var(--brand);
  color: #D9E5BC;
}

.nav-button {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 43px;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  background: transparent;
  color: #9BA8B8;
  text-align: left;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition), transform var(--transition-fast);
}

.nav-button:hover {
  background: rgba(160, 200, 20, 0.08);
  color: #D9E5BC;
  transform: translateX(2px);
}

.nav-button.active {
  border-color: rgba(160, 200, 20, 0.06);
  background: rgba(160, 200, 20, 0.08);
  color: #F0F2F5;
}

.nav-button.active::before {
  z-index: 2;
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: -1px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  content: "";
  background: var(--brand);
  box-shadow: 0 0 8px rgba(160, 200, 20, 0.25);
}

.nav-button svg {
  width: 19px;
  height: 19px;
}

.nav-button.active svg {
  color: var(--brand);
}

.server-release-card {
  display: grid;
  width: 100%;
  min-height: 52px;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  margin: 10px 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  cursor: pointer;
  background: rgba(160, 200, 20, 0.05);
  color: #E8EBF0;
  text-align: left;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.server-release-card:hover {
  border-color: rgba(160, 200, 20, 0.25);
  background: rgba(160, 200, 20, 0.08);
}

.server-release-card svg {
  width: 19px;
  height: 19px;
  color: var(--brand);
}

.server-release-card strong,
.server-release-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-release-card strong {
  font-size: 12px;
}

.server-release-card small {
  margin-top: 2px;
  color: #6B7B8D;
  font-size: 10px;
}

.server-release-card b {
  color: #6B7B8D;
  font-size: 20px;
  font-weight: 400;
}

.sidebar-account-wrap {
  position: relative;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-account {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  grid-template-columns: 36px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  color: inherit;
  text-align: left;
}

.sidebar-account:hover,
.sidebar-account[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(160, 200, 20, 0.06);
}

.avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: #272C3A;
  color: var(--brand);
  font-weight: 750;
}

.account-copy {
  min-width: 0;
}

.account-copy strong,
.account-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-chevron {
  color: #6B7B8D;
  font-size: 19px;
  text-align: center;
}

.user-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  left: 0;
  z-index: 30;
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: #1E2230;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.50);
}

.user-menu-item {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
  color: #D9E5BC;
  text-align: left;
}

.user-menu-item:hover {
  background: rgba(160, 200, 20, 0.08);
}

.user-menu-item.danger:hover {
  color: #FFA5A5;
}

.user-menu-item svg {
  width: 17px;
  height: 17px;
}

.mobile-only-menu-item {
  display: none;
}

.mobile-subnav-host {
  display: none;
}

.account-copy strong {
  font-size: 13px;
}

.account-copy span {
  color: #6B7B8D;
  font-size: 11px;
}

.icon-button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  color: inherit;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.icon-button:hover:not(:disabled) {
  border-color: var(--line);
  background: var(--surface-soft);
}

.logout-button {
  color: #6B7B8D;
}

.logout-button:hover {
  background: rgba(160, 200, 20, 0.08);
  color: #D9E5BC;
}

.main-shell {
  display: grid;
  min-height: 0;
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  position: relative;
}

.main-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}

.main-shell > * {
  position: relative;
  z-index: 1;
}

.topbar {
  position: relative;
  z-index: 10;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 11px 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(21, 24, 32, 0.88);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

.topbar p,
.topbar h2 {
  margin: 0;
}

.topbar p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.topbar h2 {
  margin-top: 2px;
  font-size: 20px;
  line-height: 1.3;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.notification-button {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  background: var(--surface-soft);
  color: var(--muted);
}

.notification-button:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.notification-button svg {
  width: 18px;
  height: 18px;
}

.notification-button > span {
  position: absolute;
  top: -6px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid #151820;
  border-radius: 9px;
  background: #D9574F;
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.quota-display {
  display: flex;
  min-width: 154px;
  align-items: baseline;
  justify-content: flex-end;
  gap: 9px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--muted);
}

.quota-display span {
  font-size: 11px;
}

.quota-display strong {
  color: var(--ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.page-container {
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 24px 28px 36px;
  overflow-x: clip;
  overflow-y: auto;
}

.page {
  animation: page-in 220ms ease-out;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.surface {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--transition);
}

.activation-grid {
  display: grid;
  grid-template-columns: minmax(390px, 0.82fr) minmax(460px, 1.18fr);
  gap: 16px;
  align-items: stretch;
}

.activation-form,
.result-surface {
  min-height: 520px;
  padding: 24px;
}

.activation-form {
  display: flex;
  flex-direction: column;
  gap: 19px;
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
}

.section-heading,
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.section-heading {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.section-heading h3,
.page-toolbar h3,
.dialog-header h3 {
  margin: 0;
  font-size: 16px;
}

.section-heading span,
.page-toolbar p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.code-input,
.activation-code {
  font-family: Consolas, "Cascadia Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.code-input {
  min-height: 46px;
  font-size: 17px;
  font-weight: 650;
}

.field-meta {
  display: flex;
  min-height: 16px;
  justify-content: flex-end;
  color: var(--muted);
  font-size: 11px;
}

.segmented-control {
  display: grid;
  width: 100%;
  padding: 3px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0C0E12;
}

.segmented-control label {
  min-width: 0;
  cursor: pointer;
}

.segmented-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.segmented-control span {
  display: grid;
  min-height: 38px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--muted);
  transition: all var(--transition);
}

.segmented-control input:checked + span {
  border-color: rgba(160, 200, 20, 0.10);
  background: var(--surface-solid);
  box-shadow: 0 2px 8px rgba(160, 200, 20, 0.10);
  color: var(--accent-dark);
  font-weight: 600;
}

.segmented-control input:focus-visible + span {
  outline: 3px solid rgba(160, 200, 20, 0.15);
}

.compact-field {
  max-width: 220px;
}

.number-input {
  position: relative;
}

.number-input input {
  padding-right: 44px;
}

.number-input span {
  position: absolute;
  top: 50%;
  right: 13px;
  color: var(--muted);
  transform: translateY(-50%);
}

.activation-form > .button {
  width: 160px;
  margin-top: auto;
}

.result-surface {
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--brand);
}

.empty-state {
  display: flex;
  height: 100%;
  min-height: 388px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--muted);
  text-align: center;
}

.empty-state strong {
  margin-top: 14px;
  color: #C8CDD6;
  font-size: 16px;
}

.empty-state span {
  margin-top: 3px;
  font-size: 12px;
}

.empty-icon {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--surface-soft) 0%, #1A1F2C 100%);
  color: var(--accent);
}

.empty-icon svg {
  width: 25px;
  height: 25px;
}

.result-status {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--success);
  font-weight: 650;
}

.result-status svg {
  width: 19px;
  height: 19px;
  padding: 2px;
  border: 1px solid rgba(16, 185, 129, 0.26);
  border-radius: 50%;
}

.result-label {
  margin: 40px 0 8px;
  color: var(--muted);
  font-size: 12px;
}

.activation-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(160, 200, 20, 0.15);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #1A1F2C 0%, #151820 100%);
}

.activation-code {
  overflow-wrap: anywhere;
  color: var(--accent-dark);
  font-size: 22px;
  font-weight: 750;
}

.copy-code-button {
  width: 38px;
  height: 38px;
  border-color: rgba(160, 200, 20, 0.20);
  background: var(--surface-solid);
  color: var(--accent-dark);
}

.copy-code-button:hover {
  background: #272C3A;
}

.result-details {
  display: grid;
  margin: 32px 0 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.result-details div {
  min-width: 0;
  padding: 15px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.result-details dt {
  color: var(--muted);
  font-size: 11px;
}

.result-details dd {
  min-width: 0;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-weight: 650;
}

.page-toolbar {
  min-height: 50px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.page-toolbar > div:first-child {
  min-width: 170px;
}

.dashboard-heading,
.dashboard-panel-heading,
.dashboard-quick-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.dashboard-heading {
  margin-bottom: 14px;
}

.dashboard-heading-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dashboard-heading h3,
.dashboard-heading p,
.dashboard-panel-heading h3,
.dashboard-panel-heading p {
  margin: 0;
}

.dashboard-heading h3 {
  font-size: 18px;
}

.dashboard-heading p,
.dashboard-panel-heading p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.dashboard-metric {
  display: flex;
  min-width: 0;
  min-height: 104px;
  align-items: center;
  gap: 13px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-lg);
  background: #1C2030;
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
}

.dashboard-metric:hover {
  background: #222838;
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.08);
}

.dashboard-metric::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.dashboard-metric:nth-child(2)::before {
  background: linear-gradient(90deg, var(--success), transparent);
}

.dashboard-metric:nth-child(3)::before {
  background: linear-gradient(90deg, var(--warning), transparent);
}

.dashboard-metric:nth-child(4)::before {
  background: linear-gradient(90deg, var(--danger), transparent);
}

.dashboard-metric > div {
  min-width: 0;
}

.dashboard-metric > div > span,
.dashboard-metric > div > strong,
.dashboard-metric > div > small {
  display: block;
}

.dashboard-metric > .metric-icon {
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 0;
  line-height: 0;
}

.dashboard-metric > .metric-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
}

.dashboard-metric > div > span {
  color: var(--muted);
  font-size: 11px;
}

.dashboard-metric > div > strong {
  margin-top: 2px;
  font-size: 23px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.dashboard-metric small {
  margin-top: 4px;
  overflow: hidden;
  color: #5A6478;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-metric .metric-danger {
  color: var(--danger);
}

.dashboard-runtime {
  margin-top: 12px;
  overflow: hidden;
  background: #1C2030;
}

.dashboard-runtime-heading {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.dashboard-runtime-heading > div > strong,
.dashboard-runtime-heading > div > span {
  display: block;
}

.dashboard-runtime-heading > div > strong {
  font-size: 13px;
}

.dashboard-runtime-heading > div > span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.runtime-overall {
  display: inline-flex;
  min-height: 28px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-size: 10px;
}

.runtime-overall i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(120,128,145,0.12);
}

.runtime-overall b {
  font-weight: 700;
}

.runtime-overall.is-success { color: var(--success); }
.runtime-overall.is-warning { color: var(--warning); }
.runtime-overall.is-danger { color: var(--danger); }
.runtime-overall.is-syncing { color: var(--info); }

.runtime-overall.is-syncing i {
  animation: runtime-pulse 1.2s ease-in-out infinite;
}

@keyframes runtime-pulse {
  50% { opacity: 0.35; transform: scale(0.8); }
}

.dashboard-runtime-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.runtime-item {
  display: grid;
  min-width: 0;
  min-height: 78px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
}

.runtime-item + .runtime-item {
  border-left: 1px solid rgba(255,255,255,0.05);
}

.runtime-item-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 4px;
  background: rgba(120,128,145,0.10);
  color: var(--muted);
}

.runtime-item-icon svg {
  width: 16px;
  height: 16px;
}

.runtime-item-copy {
  min-width: 0;
}

.runtime-item-copy small,
.runtime-item-copy strong,
.runtime-item-copy b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-item-copy small {
  color: var(--muted);
  font-size: 9px;
}

.runtime-item-copy strong {
  margin-top: 1px;
  font-size: 12px;
}

.runtime-item-copy b {
  margin-top: 2px;
  color: #5A6478;
  font-size: 9px;
  font-weight: 500;
}

.runtime-item.is-success .runtime-item-icon { background: rgba(16,185,129,0.10); color: var(--success); }
.runtime-item.is-warning .runtime-item-icon { background: rgba(245,158,11,0.10); color: var(--warning); }
.runtime-item.is-danger .runtime-item-icon { background: rgba(239,68,68,0.10); color: var(--danger); }
.runtime-item.is-syncing .runtime-item-icon { background: rgba(91,141,239,0.10); color: var(--info); }

.dashboard-quick-actions {
  margin-top: 12px;
  padding: 13px 16px;
}

.dashboard-quick-actions > div:first-child strong,
.dashboard-quick-actions > div:first-child span {
  display: block;
}

.dashboard-quick-actions > div:first-child strong {
  font-size: 13px;
}

.dashboard-quick-actions > div:first-child span {
  color: var(--muted);
  font-size: 10px;
}

.quick-action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.quick-action-buttons .button {
  min-height: 36px;
}

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

.dashboard-grid.single-panel {
  grid-template-columns: minmax(0, 1fr);
}

.dashboard-panel {
  min-width: 0;
  padding: 17px;
  background: #1C2030;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  overflow: hidden;
}

.dashboard-panel-heading {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.dashboard-panel-heading h3 {
  font-size: 14px;
  font-weight: 600;
}

.text-action {
  min-height: 32px;
  padding: 4px 7px;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
}

.text-action:hover {
  color: var(--accent);
}

.dashboard-alert-list,
.dashboard-document-list {
  display: grid;
}

.dashboard-list-row {
  display: grid;
  width: 100%;
  min-height: 58px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: default;
  background: transparent;
  color: inherit;
  text-align: left;
}

button.dashboard-list-row {
  cursor: pointer;
}

button.dashboard-list-row:hover {
  background: var(--surface-soft);
}

.dashboard-list-row:last-child {
  border-bottom: 0;
}

.dashboard-row-main,
.dashboard-row-value {
  min-width: 0;
}

.dashboard-row-main strong,
.dashboard-row-main small,
.dashboard-row-value strong,
.dashboard-row-value small {
  display: block;
}

.dashboard-row-main strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-row-main small,
.dashboard-row-value small {
  color: var(--muted);
  font-size: 10px;
}

.dashboard-row-value {
  color: var(--accent-dark);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.dashboard-cnc-panel {
  grid-column: 1 / -1;
}

.dashboard-cnc-summary {
  display: grid;
  margin-top: 12px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.dashboard-cnc-summary > span {
  min-width: 0;
  padding: 12px 10px;
  text-align: center;
}

.dashboard-cnc-summary > span + span {
  border-left: 1px solid var(--line);
}

.dashboard-cnc-summary strong,
.dashboard-cnc-summary small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-cnc-summary strong {
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.dashboard-cnc-summary strong.metric-danger {
  color: var(--danger);
}

.dashboard-cnc-summary small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.dashboard-cnc-device-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-cnc-device-row {
  min-height: 62px;
  padding-right: 10px;
  padding-left: 10px;
}

.dashboard-cnc-device-row:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.dashboard-cnc-device-row .cnc-state-pill {
  min-width: 58px;
  justify-content: center;
}

.dashboard-processing-panel {
  grid-column: 1 / -1;
}

.dashboard-processing-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 4px;
}

.dashboard-processing-summary span {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-soft);
}

.dashboard-processing-summary strong,
.dashboard-processing-summary small {
  display: block;
}

.dashboard-processing-summary strong {
  color: var(--ink);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.dashboard-processing-summary small {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.dashboard-processing-table {
  display: grid;
}

.dashboard-processing-row {
  display: grid;
  min-height: 52px;
  grid-template-columns: minmax(100px, .8fr) minmax(140px, 1.4fr) minmax(100px, .8fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 2px;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
}

.dashboard-processing-row:hover {
  background: var(--surface-soft);
}

.dashboard-processing-row:last-child {
  border-bottom: 0;
}

.dashboard-processing-row strong,
.dashboard-processing-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-processing-row strong {
  font-size: 11px;
}

.dashboard-processing-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.dashboard-processing-row .processing-progress {
  min-width: 118px;
}

.dashboard-processing-row .status-pill {
  justify-self: end;
  white-space: nowrap;
}

.alert-marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--info);
  box-shadow: 0 0 0 4px rgba(91, 141, 239, 0.10);
}

.alert-marker.badge-danger { background: var(--danger); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10); }
.alert-marker.badge-warning { background: var(--warning); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.10); }

.movement-direction {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.10);
  color: var(--success);
  font-size: 11px;
  font-weight: 800;
}

.movement-direction.out {
  background: rgba(91, 141, 239, 0.10);
  color: var(--info);
}

.dashboard-empty {
  padding: 44px 10px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 1100px) {
  .dashboard-cnc-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-cnc-summary > span:nth-child(4) {
    border-left: 0;
  }

  .dashboard-cnc-summary > span:nth-child(n + 4) {
    border-top: 1px solid var(--line);
  }

  .dashboard-cnc-device-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-cnc-device-row:nth-child(odd) {
    border-right: 0;
  }
}

@media (max-width: 640px) {
  .dashboard-cnc-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-cnc-summary > span:nth-child(odd) {
    border-left: 0;
  }

  .dashboard-cnc-summary > span:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  .dashboard-cnc-summary > span:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .dashboard-cnc-device-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .dashboard-cnc-device-row .cnc-state-pill {
    display: none;
  }
}

.table-surface {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
  scrollbar-color: #3A4050 #1E2230;
  scrollbar-width: thin;
}

table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  table-layout: auto;
}

.after-sales-table {
  min-width: 1040px;
}

.warehouse-overview-bar,
.expense-overview-bar,
.after-sales-overview-bar {
  display: grid;
  margin-bottom: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.warehouse-overview-bar > div,
.expense-overview-bar > div,
.after-sales-overview-bar > div,
.visitor-overview-bar > div {
  min-width: 0;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform var(--transition), box-shadow var(--transition);
}

.warehouse-overview-bar > div:hover,
.expense-overview-bar > div:hover,
.after-sales-overview-bar > div:hover,
.visitor-overview-bar > div:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.warehouse-overview-bar > div + div,
.expense-overview-bar > div + div,
.after-sales-overview-bar > div + div,
.visitor-overview-bar > div + div {
  border-left: 1px solid var(--line);
}

.warehouse-metric {
  display: flex;
  align-items: center;
  gap: 12px;
}

.metric-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: none;
  border-radius: 10px;
  background: rgba(160,200,20,0.10);
  color: var(--accent);
}

.metric-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.metric-icon-warning {
  background: rgba(245,158,11,0.10);
  color: var(--warning);
}

.metric-icon-success {
  background: rgba(16,185,129,0.10);
  color: var(--success);
}

.metric-icon-danger {
  background: rgba(239,68,68,0.10);
  color: var(--danger);
}

.metric-copy {
  min-width: 0;
}

.warehouse-overview-bar .metric-copy > span,
.warehouse-overview-bar .metric-copy > strong,
.expense-overview-bar .metric-copy > span,
.expense-overview-bar .metric-copy > strong,
.after-sales-overview-bar .metric-copy > span,
.after-sales-overview-bar .metric-copy > strong {
  display: block;
}

.warehouse-overview-bar .metric-copy > span,
.expense-overview-bar .metric-copy > span,
.after-sales-overview-bar .metric-copy > span {
  color: var(--muted);
  font-size: 11px;
}

.warehouse-overview-bar .metric-copy > strong,
.expense-overview-bar .metric-copy > strong,
.after-sales-overview-bar .metric-copy > strong {
  margin-top: 1px;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.warehouse-overview-bar .metric-danger {
  color: var(--danger);
}

.warehouse-panel,
.expense-panel {
  animation: page-in 160ms ease-out;
}

.inventory-table,
.materials-table,
.supplier-table,
.inventory-alert-table,
.inventory-movement-table,
.stocktake-table,
.approval-table {
  min-width: 1180px;
}

.inventory-movement-table {
  min-width: 1320px;
}

.specification-cell {
  min-width: 128px;
  white-space: nowrap;
}

.materials-table {
  min-width: 1320px;
}

.supplier-table {
  min-width: 1220px;
}

.approval-table {
  min-width: 1380px;
}

.expense-table {
  min-width: 1260px;
}

.expense-review-table {
  min-width: 1180px;
}

.expense-purpose-cell {
  min-width: 220px;
  max-width: 360px;
  white-space: normal;
}

.batch-cell,
.document-no-cell {
  font-family: Consolas, "Cascadia Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.quantity-cell,
.available-stock-cell {
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.badge-warning {
  border-color: rgba(245, 158, 11, 0.16);
  background: rgba(245, 158, 11, 0.08);
  color: var(--warning);
}

.badge-danger {
  border-color: rgba(239, 68, 68, 0.16);
  background: rgba(239, 68, 68, 0.08);
  color: var(--danger);
}

.badge-stale {
  border-color: rgba(91, 141, 239, 0.16);
  background: rgba(91, 141, 239, 0.08);
  color: var(--info);
}

.table-subtext {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}

.movement-change.positive {
  color: var(--success);
}

.movement-change.negative {
  color: var(--danger);
}

.progress-text {
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.stock-document-form {
  padding: 22px;
  border-top: 3px solid var(--accent);
}

.stock-header-grid {
  display: grid;
  margin-top: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.stock-in-header-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stock-out-header-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stock-header-grid .field-disabled {
  opacity: 0.48;
}

.stock-header-grid .field-disabled select {
  cursor: not-allowed;
}

.stock-scan-row {
  display: grid;
  margin-top: 18px;
  grid-template-columns: minmax(260px, 480px) auto;
  align-items: center;
  gap: 10px;
}

.scan-input {
  position: relative;
}

.scan-input > svg {
  position: absolute;
  top: 11px;
  left: 12px;
  z-index: 1;
  color: var(--accent);
}

.scan-input input {
  padding-right: 46px;
  padding-left: 40px;
}

.camera-scan-button {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
  color: var(--accent-dark);
}

.camera-scan-button:hover {
  background: #272C3A;
}

.camera-scan-button:focus-visible {
  outline: 3px solid rgba(160, 200, 20, 0.15);
  outline-offset: 1px;
}

.camera-scan-button svg {
  width: 19px;
  height: 19px;
}

.barcode-scanner-dialog {
  width: min(520px, 100%);
  overflow: hidden;
}

.barcode-scanner-view {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #000000;
}

.barcode-scanner-reader,
.barcode-scanner-reader > div {
  width: 100%;
  height: 100%;
}

.barcode-scanner-reader video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.barcode-scanner-fallback-reader {
  position: fixed;
  top: 0;
  left: -10000px;
  width: 640px;
  height: 480px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.barcode-scanner-footer {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
}

.barcode-scanner-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.barcode-scanner-actions .button {
  min-height: 38px;
  padding: 8px 12px;
}

.native-photo-picker {
  position: relative;
  overflow: hidden;
}

.native-photo-picker input[type="file"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  opacity: 0;
}

.native-photo-picker:focus-within {
  outline: 3px solid rgba(160, 200, 20, 0.18);
  outline-offset: 2px;
}

.barcode-scanner-status {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-lines-scroll {
  margin-top: 15px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.stock-lines-table {
  min-width: 920px;
}

.stock-lines-table th,
.stock-lines-table td {
  padding: 9px 10px;
}

.stock-lines-table select,
.stock-lines-table input {
  min-height: 34px;
  padding: 6px 9px;
}

.stock-material-select {
  min-width: 280px;
}

.stock-material-input {
  min-width: 280px;
}

.stock-material-input[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--danger) 72%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 32%, transparent);
}

.stock-line-input {
  min-width: 150px;
}

.stock-expiry-input {
  min-width: 145px;
}

.stock-quality-select {
  min-width: 100px;
}

.stock-quantity-input {
  min-width: 120px;
}

.stock-lines-empty {
  padding: 21px 12px;
  color: var(--muted);
  text-align: center;
}

.stock-form-actions {
  display: flex;
  min-height: 58px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.stock-form-actions span {
  color: var(--muted);
  font-size: 12px;
}

.warehouse-config-grid {
  display: grid;
  gap: 14px;
}

.warehouse-config-section {
  overflow: hidden;
}

.config-heading {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.config-heading h3,
.config-heading p {
  margin: 0;
}

.config-heading h3 {
  font-size: 16px;
}

.config-heading p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.warehouse-list-table {
  min-width: 720px;
}

.location-list-table {
  min-width: 920px;
}

.warehouse-dialog {
  width: min(680px, 100%);
}

.dialog.material-barcode-dialog {
  width: min(640px, 100%);
  overflow: hidden;
}

.material-barcode-preview {
  padding: 18px;
  background: #0C0E12;
}

.material-barcode-preview img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: var(--surface-solid);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.40);
}

.barcode-label-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line);
}

.standalone-toggle {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-soft);
}

.compact-dialog-actions {
  grid-template-columns: 1fr auto auto;
}

.issue-cell {
  width: 34%;
  max-width: 420px;
}

.issue-cell span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.money-cell {
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

th,
td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #171B24;
  color: #8B95A8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

td {
  color: #C8CDD6;
  font-size: 12.5px;
}

tbody tr {
  transition: background-color var(--transition-fast);
}

tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

tbody tr:hover {
  background: rgba(160, 200, 20, 0.04);
}

tbody tr:last-child td {
  border-bottom: 0;
}

.actions-column {
  width: 106px;
  text-align: right;
}

td.actions-column {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

/* A flex td shrinks independently from its row, misaligning the bottom rule. */
.cnc-device-table-panel td.actions-column {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
}
.cnc-device-table-panel td.actions-column .table-action + .table-action {
  margin-left: 4px;
}

.table-action {
  display: inline-grid;
  width: 31px;
  height: 31px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
  color: #6B7B8D;
}

.table-action:hover {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--accent-dark);
}

.table-action.danger:hover {
  color: var(--danger);
}

.table-action svg {
  width: 16px;
  height: 16px;
}

.table-empty {
  padding: 48px 20px;
  color: var(--muted);
  text-align: center;
}

.badge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.badge-admin,
.badge-permanent {
  border-color: rgba(160, 200, 20, 0.18);
  background: rgba(160, 200, 20, 0.08);
  color: var(--accent-dark);
}

.badge-owner {
  border-color: rgba(160, 200, 20, 0.28);
  background: rgba(160, 200, 20, 0.10);
  color: #B3D62F;
}

.badge-user {
  border-color: rgba(139, 149, 168, 0.16);
  background: rgba(139, 149, 168, 0.08);
  color: #9BA8B8;
}

.badge-enabled {
  border-color: rgba(16, 185, 129, 0.18);
  background: rgba(16, 185, 129, 0.08);
  color: var(--success);
}

.badge-disabled {
  border-color: rgba(239, 68, 68, 0.16);
  background: rgba(239, 68, 68, 0.08);
  color: var(--danger);
}

.badge-trial {
  border-color: rgba(245, 158, 11, 0.16);
  background: rgba(245, 158, 11, 0.08);
  color: var(--warning);
}

.account-permission-cell {
  display: flex;
  min-width: 210px;
  align-items: center;
  gap: 8px;
}

.permission-tags {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 4px;
}

.permission-tags span {
  padding: 2px 5px;
  border-radius: 3px;
  background: #272C3A;
  color: #8B95A8;
  font-size: 10px;
  white-space: nowrap;
}

.protected-account {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.machine-code-cell,
.activation-code-cell {
  font-family: Consolas, "Cascadia Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.activation-code-cell {
  color: var(--accent-dark);
  font-size: 12px;
}

.toolbar-controls {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.search-input {
  width: 250px;
}

.toolbar-controls select {
  width: 116px;
}

.toolbar-icon-button {
  width: 40px;
  height: 40px;
  border-color: var(--line-strong);
  background: var(--surface-solid);
  color: #6B7B8D;
}

.password-form {
  width: min(520px, 100%);
  padding: 24px;
  border-top: 3px solid var(--accent);
}

.account-security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 520px)); gap: 24px; align-items: start; }
.account-security-grid .password-form { width: 100%; }
#page-password .password-input .password-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); }
.account-security-wechat { padding: 24px; min-width: 0; }
.account-security-wechat > p, .account-wechat-status { line-height: 1.7; color: var(--text-secondary); overflow-wrap: anywhere; }
.account-security-wechat > p { margin: 18px 0; }
.account-wechat-qr { width: min(300px, 100%); margin: 20px auto 0; overflow: hidden; }
.account-wechat-qr iframe { border: 0; transform-origin: top left; color-scheme: dark; }
:root[data-theme="light"] .account-wechat-qr iframe { color-scheme: light; }
#accountWeChatFlow .button { margin-top: 16px; }
#accountWeChatConfirmForm .field { margin-top: 16px; }
@media (max-width: 1050px) { .account-security-grid { grid-template-columns: minmax(0, 620px); } }

.password-form .field {
  margin-top: 18px;
}

.password-form > .button {
  min-width: 130px;
  margin-top: 24px;
}

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.60);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  animation: backdrop-in 200ms ease-out;
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.dialog {
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border: 1px solid rgba(160, 200, 20, 0.10);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-lg);
  background: #1E2230;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.50), 0 8px 24px rgba(0, 0, 0, 0.30);
  animation: dialog-in 250ms ease-out;
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.after-sales-dialog {
  width: min(660px, 100%);
}

.account-dialog {
  width: min(980px, calc(100vw - 28px));
}

.account-remark-cell {
  min-width: 140px;
  max-width: 240px;
  white-space: normal;
  overflow-wrap: anywhere;
}

#accountUsernameHint {
  display: block;
  min-height: 20px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.account-quota-field {
  padding-bottom: 2px;
}

.quota-add-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 8px;
}

.quota-add-fixed,
.quota-add-custom .button {
  min-height: 40px;
  padding: 8px 12px;
}

.quota-add-fixed {
  width: 100%;
}

.quota-add-custom {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: 8px;
}

.quota-add-custom input {
  min-width: 0;
}

.quota-field-meta {
  justify-content: space-between;
  gap: 12px;
}

.quota-field-meta strong {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.release-notes-dialog {
  width: min(610px, 100%);
}

.announcement-dialog {
  width: min(900px, 100%);
  overflow: hidden;
}

.announcement-layout {
  display: grid;
  min-height: 500px;
  grid-template-columns: 300px minmax(0, 1fr);
}

.announcement-sidebar {
  display: grid;
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr);
  border-right: 1px solid var(--line);
  background: rgba(12, 15, 21, 0.28);
}

.announcement-sidebar-heading {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.announcement-sidebar-heading .button {
  min-height: 32px;
  padding: 6px 10px;
}

.announcement-list {
  min-height: 0;
  overflow-y: auto;
}

.announcement-list-item {
  position: relative;
  display: grid;
  width: 100%;
  gap: 5px;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.announcement-list-item:hover,
.announcement-list-item.active {
  background: rgba(160, 200, 20, 0.07);
}

.announcement-list-item.active {
  box-shadow: inset 2px 0 var(--brand);
}

.announcement-list-item.unread::after {
  position: absolute;
  top: 18px;
  right: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  content: "";
  background: #D9574F;
}

.announcement-list-item strong {
  overflow: hidden;
  padding-right: 16px;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.announcement-list-item span,
.announcement-list-item time {
  color: var(--muted);
  font-size: 10px;
}

.announcement-empty,
.announcement-placeholder {
  color: var(--muted);
}

.announcement-empty {
  display: grid;
  min-height: 180px;
  place-items: center;
  font-size: 12px;
}

.announcement-main {
  min-width: 0;
  min-height: 0;
}

.announcement-placeholder {
  display: grid;
  min-height: 500px;
  place-content: center;
  justify-items: center;
  gap: 7px;
}

.announcement-placeholder svg {
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
  color: var(--brand);
}

.announcement-placeholder strong {
  color: var(--ink);
  font-size: 14px;
}

.announcement-placeholder span {
  font-size: 11px;
}

.announcement-detail,
.announcement-form {
  min-height: 500px;
  padding: 24px;
}

.announcement-detail {
  display: flex;
  flex-direction: column;
}

.announcement-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.announcement-detail-heading h4 {
  margin: 10px 0 0;
  font-size: 19px;
  line-height: 1.45;
}

.announcement-detail-heading time,
.announcement-meta {
  color: var(--muted);
  font-size: 10px;
}

.announcement-status-published {
  border-color: rgba(64, 180, 116, 0.24);
  background: rgba(64, 180, 116, 0.12);
  color: #72D39D;
}

.announcement-status-draft {
  border-color: rgba(222, 169, 71, 0.24);
  background: rgba(222, 169, 71, 0.12);
  color: #E5BB6D;
}

.announcement-status-withdrawn {
  border-color: rgba(217, 87, 79, 0.24);
  background: rgba(217, 87, 79, 0.12);
  color: #E6817B;
}

.announcement-meta {
  margin: 12px 0 0;
}

.announcement-content {
  flex: 1;
  padding: 22px 0;
  color: #D6DBE4;
  font-size: 13px;
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.announcement-manage-actions,
.announcement-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.announcement-form {
  display: grid;
  align-content: start;
  gap: 18px;
}

.announcement-form textarea {
  min-height: 240px;
  resize: vertical;
}

.announcement-form .field small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.stocktake-detail-dialog {
  width: min(1120px, 100%);
  overflow: hidden;
}

.approval-detail-dialog {
  width: min(1040px, 100%);
  overflow: hidden;
}

.expense-dialog {
  width: min(1100px, 100%);
}

.expense-dialog-meta {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.expense-dialog-meta .status-pill {
  margin-left: auto;
}

.expense-dialog-body {
  gap: 13px;
}

.expense-time-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.expense-items-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 2px;
}

.expense-items-heading strong,
.expense-items-heading span {
  display: block;
}

.expense-items-heading strong {
  font-size: 13px;
}

.expense-items-heading span {
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
}

.expense-items-table {
  max-height: 300px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
}

.expense-items-table table {
  min-width: 850px;
}

.expense-items-table input,
.expense-items-table select {
  min-width: 138px;
  min-height: 34px;
  padding: 6px 9px;
}

.expense-items-table .expense-amount-input {
  width: 130px;
  min-width: 130px;
  text-align: right;
}

.expense-total-row {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding: 8px 12px;
  border: 1px solid rgba(160, 200, 20, 0.14);
  border-radius: var(--radius);
  background: rgba(160, 200, 20, 0.05);
}

.expense-total-row span {
  color: var(--muted);
  font-size: 11px;
}

.expense-total-row strong {
  min-width: 120px;
  color: var(--accent);
  font-size: 20px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.expense-review-history {
  padding: 10px 12px;
  border: 1px solid rgba(91, 141, 239, 0.14);
  border-radius: var(--radius);
  background: rgba(91, 141, 239, 0.06);
  color: #9AA9B9;
  font-size: 11px;
  white-space: pre-line;
}

.expense-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.expense-dialog-actions > span {
  flex: 1 1 20px;
}

.after-sales-table {
  min-width: 1320px;
}

.after-sales-ticket-cell strong,
.after-sales-ticket-cell small,
.after-sales-product-cell strong,
.after-sales-product-cell small,
.after-sales-handler-cell strong,
.after-sales-handler-cell small {
  display: block;
}

.after-sales-ticket-cell strong {
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.after-sales-ticket-cell small,
.after-sales-product-cell small,
.after-sales-handler-cell small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.after-sales-issue-cell {
  min-width: 210px;
  max-width: 330px;
  white-space: normal;
}

.after-sales-status {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid rgba(91, 141, 239, 0.18);
  border-radius: 4px;
  background: rgba(91, 141, 239, 0.09);
  color: #83A9D6;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.after-sales-status.status-submitted,
.after-sales-status.status-accepted {
  border-color: rgba(91, 141, 239, 0.18);
  background: rgba(91, 141, 239, 0.09);
  color: #83A9D6;
}

.after-sales-status.status-waiting-return,
.after-sales-status.status-waiting-shipment,
.after-sales-status.status-waiting-pickup,
.after-sales-status.status-overdue {
  border-color: rgba(245, 158, 11, 0.20);
  background: rgba(245, 158, 11, 0.09);
  color: #D5A84F;
}

.after-sales-status.status-received,
.after-sales-status.status-diagnosing,
.after-sales-status.status-processing,
.after-sales-status.status-shipped {
  border-color: rgba(160, 200, 20, 0.20);
  background: rgba(160, 200, 20, 0.08);
  color: var(--accent);
}

.after-sales-status.status-completed {
  border-color: rgba(16, 185, 129, 0.20);
  background: rgba(16, 185, 129, 0.08);
  color: #63C49A;
}

.after-sales-status.status-cancelled {
  border-color: rgba(120, 128, 145, 0.18);
  background: rgba(120, 128, 145, 0.08);
  color: #8D96A7;
}

.after-sales-overdue-note {
  display: block;
  margin-top: 5px;
  color: var(--danger);
  font-size: 9px;
  font-weight: 700;
}

.text-danger {
  color: var(--danger) !important;
}

.after-sales-dialog {
  display: flex;
  width: min(1180px, 100%);
  flex-direction: column;
  overflow: hidden;
}

.after-sales-dialog-meta {
  display: flex;
  min-height: 48px;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.after-sales-dialog > .dialog-header {
  flex: 0 0 auto;
}

.after-sales-dialog-meta > span:nth-child(2) {
  margin-left: auto;
}

.after-sales-dialog-meta strong {
  margin-left: 5px;
  color: var(--ink);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 13px;
  letter-spacing: 0;
}

.after-sales-dialog-meta .table-action {
  width: 30px;
  height: 30px;
}

.after-sales-dialog-body {
  display: block;
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  padding: 0;
  overflow-y: auto;
}

.after-sales-form-section {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.after-sales-section-heading {
  display: flex;
  min-height: 32px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.after-sales-section-heading strong,
.after-sales-section-heading span {
  display: block;
}

.after-sales-section-heading strong {
  color: var(--ink);
  font-size: 13px;
}

.after-sales-section-heading span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.after-sales-field-grid,
.after-sales-return-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.after-sales-field-grid.four-column {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.after-sales-field-grid.three-column {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.after-sales-schedule-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.after-sales-schedule-grid.has-onsite-time {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.after-sales-field-grid.compact-last {
  grid-template-columns: minmax(180px, 260px) 1fr 1fr;
}

.after-sales-return-grid {
  grid-template-columns: minmax(160px, 1fr) minmax(140px, .8fr) minmax(140px, .8fr) minmax(260px, 2fr);
  margin-bottom: 0;
}

.after-sales-feedback {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(228, 168, 63, 0.16);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius);
  background: rgba(228, 168, 63, 0.045);
}

.after-sales-feedback-copy,
.after-sales-feedback-score {
  min-width: 0;
}

.after-sales-feedback-copy span,
.after-sales-feedback-copy strong,
.after-sales-feedback-score time {
  display: block;
}

.after-sales-feedback-copy span {
  color: var(--muted);
  font-size: 9px;
}

.after-sales-feedback-copy strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 12px;
}

.after-sales-feedback-copy p {
  margin: 5px 0 0;
  color: #AEB8C5;
  font-size: 10px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.after-sales-feedback-score {
  flex: 0 0 auto;
  text-align: right;
}

.after-sales-feedback-stars {
  display: flex;
  justify-content: flex-end;
  gap: 3px;
  color: #566171;
  font-size: 17px;
  line-height: 1;
}

.after-sales-feedback-stars .active {
  color: var(--warning);
}

.after-sales-feedback-score time {
  margin-top: 6px;
  color: var(--muted);
  font: 9px Consolas, "Cascadia Mono", monospace;
}

.after-sales-workflow {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}

.after-sales-workflow-column {
  min-width: 0;
  padding: 18px 20px 22px;
}

.after-sales-workflow-column + .after-sales-workflow-column {
  border-left: 1px solid var(--line);
}

.after-sales-progress-list,
.after-sales-logistics-list {
  display: grid;
  max-height: 360px;
  gap: 8px;
  overflow-y: auto;
}

.after-sales-progress-empty,
.after-sales-logistics-empty {
  padding: 22px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.after-sales-progress-item {
  position: relative;
  display: grid;
  padding: 10px 12px 10px 28px;
  border-left: 1px solid var(--line-strong);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
}

.after-sales-progress-item::before {
  content: "";
  position: absolute;
  top: 14px;
  left: -5px;
  width: 9px;
  height: 9px;
  border: 2px solid #1E2230;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(160, 200, 20, 0.10);
}

.after-sales-progress-item strong {
  color: var(--ink);
  font-size: 11px;
}

.after-sales-progress-item time,
.after-sales-progress-item small {
  color: var(--muted);
  font-size: 9px;
}

.after-sales-progress-item p {
  margin: 0;
  grid-column: 1 / -1;
  color: #AEB8C5;
  font-size: 11px;
  line-height: 1.55;
}

.after-sales-inline-editor {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(160, 200, 20, 0.14);
  border-radius: var(--radius);
  background: rgba(160, 200, 20, 0.035);
}

.progress-editor-grid {
  grid-template-columns: minmax(135px, .7fr) minmax(0, 2.3fr) !important;
}

.event-editor-grid {
  grid-template-columns: minmax(170px, .8fr) minmax(0, 2fr) minmax(130px, .7fr) !important;
}

.after-sales-inline-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.after-sales-inline-actions.right {
  justify-content: flex-end;
}

.compact-checkbox {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
}

.compact-checkbox input {
  width: 15px;
  height: 15px;
  min-height: 0;
  accent-color: var(--accent);
}

.after-sales-logistics-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.after-sales-logistics-heading,
.after-sales-logistics-meta,
.after-sales-logistics-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.after-sales-logistics-heading {
  justify-content: space-between;
}

.after-sales-logistics-heading strong {
  color: var(--ink);
  font-size: 11px;
}

.after-sales-logistics-heading span {
  color: var(--accent);
  font-size: 10px;
}

.after-sales-logistics-meta {
  flex-wrap: wrap;
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
}

.after-sales-logistics-actions {
  margin-top: 9px;
  justify-content: flex-end;
}

.after-sales-logistics-events {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.after-sales-logistics-event {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  color: #9FAAB8;
  font-size: 9px;
}

.after-sales-logistics-event time {
  color: var(--muted);
  font-family: Consolas, "Cascadia Mono", monospace;
}

.after-sales-dialog-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
}

.after-sales-dialog-actions > span {
  flex: 1 1 20px;
}

.service-request-link-dialog {
  width: min(820px, calc(100vw - 32px));
}

.service-request-link-body {
  display: grid;
  padding: 24px;
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: center;
  gap: 26px;
}

.service-request-qr-wrap {
  display: grid;
  width: 320px;
  height: 320px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 7px;
  background: #fff;
}

.service-request-qr-wrap canvas {
  display: block;
  width: 320px;
  height: 320px;
}

.service-request-link-copy > span,
.service-request-link-copy > strong {
  display: block;
}

.service-request-link-copy > span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 750;
}

.service-request-link-copy > strong {
  margin-top: 5px;
  color: var(--ink);
  font-size: 16px;
}

.service-request-link-copy code {
  display: block;
  margin-top: 16px;
  padding: 11px 12px;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: #b8c3d0;
  font: 11px/1.55 Consolas, "Cascadia Mono", monospace;
}

.service-request-link-copy p {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
}

.service-request-link-copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.stocktake-blind-note {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(91, 141, 239, 0.14);
  border-radius: var(--radius);
  background: rgba(91, 141, 239, 0.06);
  color: #7BA5D3;
  font-size: 11px;
}

.stocktake-blind-note svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--info);
}

.stocktake-detail-meta {
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.approval-detail-meta {
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.approval-detail-meta > span:first-child {
  color: var(--ink);
  font-weight: 700;
}

.approval-detail-meta .status-pill {
  margin-left: auto;
}

.approval-detail-grid {
  display: grid;
  margin: 0;
  padding: 14px 20px 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.approval-detail-grid > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.approval-detail-grid dt {
  color: var(--muted);
  font-size: 10px;
}

.approval-detail-grid dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}

.approval-detail-table {
  width: auto;
  max-height: min(42vh, 420px);
  margin: 14px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
}

.approval-detail-table table {
  min-width: 760px;
}

.approval-review-note {
  margin: 0 20px 14px;
}

.approval-review-history {
  margin: 0 20px 14px;
  padding: 10px 12px;
  border: 1px solid rgba(91, 141, 239, 0.14);
  border-radius: var(--radius);
  background: rgba(91, 141, 239, 0.06);
  color: #9AA9B9;
  font-size: 11px;
}

.approval-detail-actions {
  grid-template-columns: 1fr auto auto auto;
}

.stocktake-detail-meta > span:first-child {
  color: var(--ink);
  font-weight: 700;
}

.stocktake-detail-meta .status-pill {
  margin-left: auto;
}

.status-pill {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.stocktake-review-message {
  margin: 12px 20px 0;
  padding: 9px 11px;
  border: 1px solid rgba(245, 158, 11, 0.14);
  border-radius: var(--radius);
  background: rgba(245, 158, 11, 0.06);
  color: #C99D42;
  font-size: 11px;
}

.stocktake-detail-table {
  width: auto;
  max-height: min(52vh, 520px);
  margin: 14px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
}

.stocktake-detail-table table {
  min-width: 900px;
}

.stocktake-count-input {
  width: 116px;
  min-width: 116px;
  text-align: right;
}

.stocktake-review-note {
  margin: 0 20px 14px;
}

.stocktake-detail-actions {
  grid-template-columns: auto 1fr auto auto auto auto;
}

.dialog-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.cnc-production-export-dialog {
  width: min(560px, calc(100vw - 32px));
}

.cnc-daily-production-dialog {
  width: min(1200px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  color: var(--ink);
  background: var(--surface-solid);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius, 8px);
}
.cnc-daily-production-dialog::backdrop { background: color-mix(in srgb, var(--charcoal) 72%, transparent); }
.cnc-daily-production-dialog .dialog-header h3 { margin: 0; font-size: 20px; }
.cnc-daily-production-dialog .dialog-close { width: 44px; height: 44px; }
.cnc-daily-production-content { padding: 18px 20px; }
.cnc-daily-production-filters { display: grid; grid-template-columns: 1fr 1.6fr 1fr 1fr; gap: 12px; }
.cnc-daily-production-filters .field { min-width: 0; margin: 0; }
.cnc-daily-production-filters input, .cnc-daily-production-filters select { width: 100%; min-width: 0; min-height: 44px; }
.cnc-daily-production-hint { margin: 12px 0 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.cnc-daily-production-summary { display: flex; align-items: center; gap: 24px; padding: 14px 16px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius, 6px); }
.cnc-daily-production-summary > div { flex: 0 0 auto; display: flex; align-items: baseline; gap: 14px; }
.cnc-daily-production-summary span, .cnc-daily-production-summary p { color: var(--muted); font-size: 13px; }
.cnc-daily-production-summary strong { font-size: 28px; font-variant-numeric: tabular-nums; }
.cnc-daily-production-summary p { margin: 0; line-height: 1.6; }
.cnc-daily-production-tables { display: grid; grid-template-columns: minmax(310px, 0.9fr) minmax(0, 1.7fr); gap: 18px; margin-top: 18px; }
.cnc-daily-production-tables section { min-width: 0; }
.cnc-daily-production-tables h4 { margin: 0 0 10px; color: var(--ink); font-size: 15px; }
.cnc-daily-production-scroll { overflow: auto; max-height: min(42dvh, 460px); border: 1px solid var(--line-strong); border-radius: var(--radius, 6px); scrollbar-gutter: stable; }
.cnc-daily-production-scroll table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cnc-daily-production-scroll th { position: sticky; top: 0; z-index: 1; background: var(--surface-soft); color: var(--muted); font-weight: 600; }
.cnc-daily-production-scroll th, .cnc-daily-production-scroll td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.cnc-daily-production-scroll th:last-child, .cnc-daily-production-scroll td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.cnc-daily-production-tables > section:first-child table { min-width: 0; width: 100%; table-layout: fixed; }
.cnc-daily-production-tables > section:first-child th,
.cnc-daily-production-tables > section:first-child td { min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.cnc-daily-production-tables > section:first-child :is(th, td):nth-child(1) { width: 110px; }
.cnc-daily-production-tables > section:first-child :is(th, td):nth-child(2) { width: 75px; text-align: left; }
.cnc-daily-production-tables > section:first-child td:nth-child(3) { padding-left: 36px; }
.cnc-daily-production-device-table { min-width: 580px; }
.cnc-daily-production-device-table td:first-child, .cnc-daily-production-device-table td:nth-child(3) { min-width: 100px; max-width: 260px; overflow-wrap: anywhere; }
.cnc-daily-production-device-table code { white-space: nowrap; color: var(--muted); font-size: 12px; }
.cnc-daily-production-scroll .is-selected { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.cnc-daily-production-date { padding: 5px 0; min-height: 32px; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: inherit; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.cnc-daily-production-date:hover, .cnc-daily-production-date[aria-pressed="true"] { color: var(--accent-dark); text-decoration-color: currentColor; }
.cnc-daily-production-dialog :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cnc-daily-production-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.cnc-daily-production-pagination span { color: var(--muted); font-size: 12px; }
.cnc-daily-production-pagination .button { min-height: 36px; }
.cnc-daily-production-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px 20px; padding: 14px 20px; border-top: 1px solid var(--line); }
.cnc-daily-production-actions > span { margin-right: auto; color: var(--muted); font-size: 13px; }
@media (max-width: 760px) {
  .cnc-daily-production-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cnc-daily-production-tables { grid-template-columns: minmax(0, 1fr); }
  .cnc-daily-production-summary { align-items: flex-start; flex-direction: column; gap: 6px; }
  .cnc-daily-production-scroll { max-height: 300px; }
  .cnc-daily-production-filters input, .cnc-daily-production-filters select { font-size: 16px; }
  .cnc-daily-production-date, .cnc-daily-production-pagination .button { min-height: 44px; }
}

.cnc-production-export-dialog .field-hint {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.cnc-production-export-error {
  color: var(--danger, #ea7777);
  font-size: 14px;
  line-height: 1.5;
}

#cncProductionExportStart,
#cncProductionExportEnd {
  width: 100%;
  min-width: 0;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line);
}

.dialog-header p {
  margin: 0 0 1px;
  color: var(--muted);
  font-size: 11px;
}

.dialog-close {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
}

.dialog-close:hover {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink);
}

.dialog-body {
  display: grid;
  gap: 15px;
  padding: 20px;
}

.toggle-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-soft);
}

.permission-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.permission-heading strong {
  font-size: 13px;
}

.permission-heading small {
  color: var(--muted);
  font-size: 11px;
}

.account-permission-heading > span,
.account-permission-heading > span > strong,
.account-permission-heading > span > small {
  display: block;
}

.account-permission-heading > span > small {
  margin-top: 3px;
  line-height: 1.5;
}

.account-permission-heading .text-action {
  flex: 0 0 auto;
}

.permission-categories {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.permission-category + .permission-category {
  border-top: 1px solid var(--line-strong);
}

.permission-category[hidden] {
  display: none;
}

.permission-category-header {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 15px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

.permission-category.is-selected .permission-category-header,
.permission-category.is-partial .permission-category-header {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.permission-category-header > span,
.permission-category-header > span > strong,
.permission-category-header > span > small {
  display: block;
}

.permission-category-header > span > strong {
  color: var(--ink);
  font-size: 14px;
}

.permission-category-header > span > small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.permission-category-toggle {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  padding: 5px 7px 5px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
  background: var(--surface-soft);
}

.permission-category-toggle > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.permission-category-toggle b {
  color: var(--ink);
  font-size: 10px;
  font-weight: 750;
}

.permission-category-toggle input,
.permission-item input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.permission-category-toggle i {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--input-bg);
}

.permission-category-toggle input:checked + i {
  border-color: var(--accent);
  background: var(--accent);
}

.permission-category-toggle input:checked + i::after {
  position: absolute;
  top: 4px;
  left: 7px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--charcoal);
  border-bottom: 2px solid var(--charcoal);
  content: "";
  transform: rotate(45deg);
}

.permission-category-toggle input:indeterminate + i {
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 22%, var(--input-bg));
}

.permission-category-toggle input:indeterminate + i::after {
  position: absolute;
  top: 9px;
  left: 4px;
  width: 12px;
  height: 2px;
  content: "";
  background: var(--warning);
}

.permission-category-toggle input:focus-visible + i,
.permission-item input:focus-visible + i {
  outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
  outline-offset: 2px;
}

.permission-category-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.permission-item,
.permission-select-item,
.permission-note-item {
  min-width: 0;
  min-height: 72px;
  padding: 11px 15px;
}

.permission-item,
.permission-select-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.permission-item {
  cursor: pointer;
}

.permission-category-items > :nth-child(even) {
  border-left: 1px solid var(--line);
}

.permission-category-items > :nth-child(n + 3) {
  border-top: 1px solid var(--line);
}

.permission-item > span,
.permission-item strong,
.permission-item small,
.permission-select-item > span,
.permission-select-item strong,
.permission-select-item small {
  display: block;
}

.permission-item strong,
.permission-select-item strong,
.permission-note-item strong {
  color: var(--ink);
  font-size: 13px;
}

.permission-item small,
.permission-select-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.permission-item i {
  position: relative;
  display: block;
  width: 40px;
  height: 23px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: #3A4050;
  transition: background-color 150ms ease;
}

.permission-item i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  content: "";
  background: #E8EBF0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.30);
  transition: transform 150ms ease;
}

.permission-item input:checked + i {
  background: var(--accent);
}

.permission-item input:checked + i::after {
  transform: translateX(17px);
}

.permission-item input:disabled + i {
  cursor: not-allowed;
  opacity: 0.45;
}

.permission-select-item select {
  width: min(250px, 36vw);
  min-width: 190px;
}

.permission-note-item {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.permission-note-item strong {
  flex: 0 0 auto;
  color: var(--warning);
}

.permission-toggle-grid {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-soft);
}

.permission-toggle-grid .toggle-row {
  min-height: 72px;
}

.permission-toggle-grid .toggle-row + .toggle-row {
  border-top: 0;
}

.permission-toggle-grid .toggle-row:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.permission-toggle-grid .toggle-row:nth-child(n + 3) {
  border-top: 1px solid var(--line);
}

.toggle-row {
  display: grid;
  min-height: 62px;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 14px;
  padding: 10px 13px;
  cursor: pointer;
}

.toggle-row + .toggle-row {
  border-top: 1px solid var(--line);
}

.toggle-row strong,
.toggle-row small {
  display: block;
}

.toggle-row strong {
  font-size: 13px;
}

.toggle-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.toggle-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.toggle-row i {
  position: relative;
  display: block;
  width: 40px;
  height: 23px;
  border-radius: 12px;
  background: #3A4050;
  transition: background-color 150ms ease;
}

.toggle-row i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  content: "";
  background: #E8EBF0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.30);
  transition: transform 150ms ease;
}

.toggle-row input:checked + i {
  background: var(--accent);
}

.toggle-row input:checked + i::after {
  transform: translateX(17px);
}

.toggle-row input:focus-visible + i {
  outline: 3px solid rgba(160, 200, 20, 0.15);
  outline-offset: 2px;
}

.dialog-actions {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 9px;
  padding: 14px 20px 17px;
  border-top: 1px solid var(--line);
}

.cnc-program-template-dialog {
  width: min(720px, calc(100vw - 28px));
}

.cnc-program-template-content {
  min-height: 300px;
  resize: vertical;
  font-family: "Cascadia Mono", "Consolas", monospace;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre;
}

.release-notes-body {
  display: grid;
  gap: 0;
  padding: 4px 22px;
}

.release-entry {
  position: relative;
  padding: 20px 0 20px 22px;
  border-bottom: 1px solid var(--line);
}

.release-entry:last-child {
  border-bottom: 0;
}

.release-entry::before {
  position: absolute;
  top: 25px;
  left: 2px;
  width: 8px;
  height: 8px;
  border: 2px solid #5A6478;
  border-radius: 50%;
  content: "";
  background: var(--surface-solid);
}

.release-entry.current::before {
  border-color: var(--accent);
  background: var(--accent);
}

.release-entry-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.release-entry-heading strong {
  color: var(--accent-dark);
  font-size: 14px;
}

.release-entry-heading time {
  color: var(--muted);
  font-size: 11px;
}

.release-entry ul {
  display: grid;
  gap: 7px;
  margin: 11px 0 0;
  padding-left: 18px;
  color: #8B95A8;
  font-size: 12px;
  line-height: 1.65;
}

.release-notes-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.release-notes-footer strong {
  color: var(--accent-dark);
  font-size: 13px;
}

.quality-table,
.audit-table {
  min-width: 1040px;
}

.quality-notice,
.audit-notice,
.approval-notice,
.expense-approval-notice {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 13px;
  border-left: 3px solid var(--info);
  color: #9AA9B9;
  font-size: 11.5px;
}

.quality-notice svg,
.audit-notice svg,
.approval-notice svg,
.expense-approval-notice svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--info);
}

.quality-status-select {
  width: 112px;
  min-height: 34px;
  padding: 6px 28px 6px 9px;
}

.metric-icon-info {
  background: rgba(91, 141, 239, 0.10);
  color: var(--info);
}

.report-kpi-grid {
  display: grid;
  margin-bottom: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.report-kpi {
  display: flex;
  min-width: 0;
  min-height: 92px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
  box-shadow: var(--shadow-soft);
}

.report-kpi > div {
  min-width: 0;
}

.report-kpi > div > span,
.report-kpi > div > strong,
.report-kpi > div > small {
  display: block;
}

.report-kpi > div > span,
.report-kpi > div > small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-kpi > div > strong {
  margin: 1px 0;
  color: var(--ink);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.report-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(520px, 1.15fr);
  align-items: start;
  gap: 14px;
}

.report-panel {
  min-width: 0;
  overflow: hidden;
}

.panel-heading {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}

.panel-heading h3,
.panel-heading p {
  margin: 0;
}

.panel-heading h3 {
  font-size: 15px;
}

.panel-heading p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.report-bars {
  display: grid;
  gap: 14px;
  padding: 18px 16px 22px;
}

.report-bar-row > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.report-bar-row strong {
  overflow: hidden;
  color: #D1D6DE;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-bar-row span {
  color: var(--accent);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.report-bar-track {
  height: 7px;
  overflow: hidden;
  border-radius: 4px;
  background: #131720;
}

.report-bar-track i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(160, 200, 20, 0.22);
}

.report-table {
  min-width: 800px;
}

.trace-search-panel {
  display: grid;
  grid-template-columns: minmax(210px, 0.7fr) minmax(300px, 1.4fr) auto;
  align-items: end;
  gap: 12px;
  padding: 18px;
}

.trace-search-panel .field {
  margin: 0;
}

.trace-search-panel .button {
  min-width: 124px;
}

.trace-result {
  margin-top: 14px;
  overflow: hidden;
}

.trace-result > .panel-heading .badge {
  flex: 0 0 auto;
}

.trace-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.trace-metrics > div {
  min-width: 0;
  padding: 13px 16px;
}

.trace-metrics > div + div {
  border-left: 1px solid var(--line);
}

.trace-metrics span,
.trace-metrics strong {
  display: block;
}

.trace-metrics span {
  color: var(--muted);
  font-size: 10.5px;
}

.trace-metrics strong {
  margin-top: 2px;
  color: var(--accent);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

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

.trace-flow-grid > section {
  min-width: 0;
  overflow: hidden;
}

.trace-flow-grid > section + section {
  border-left: 1px solid var(--line);
}

.trace-section-heading {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.trace-section-heading strong {
  font-size: 12px;
}

.trace-section-heading span {
  color: var(--muted);
  font-size: 10.5px;
}

.trace-flow-grid table,
.trace-batch-table table {
  min-width: 760px;
}

.trace-flow-empty {
  padding: 42px 18px;
  color: var(--muted);
  text-align: center;
}

.audit-detail-cell {
  min-width: 300px;
  max-width: 560px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.audit-stock-toggle {
  display: inline-flex;
  min-height: 36px;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface-solid);
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  white-space: nowrap;
}

.audit-stock-toggle:hover {
  border-color: rgba(160,200,20,0.25);
  color: var(--ink);
}

.audit-stock-toggle input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
}

.entity-id-text {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast-region {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 200;
  display: grid;
  width: min(380px, calc(100vw - 44px));
  gap: 9px;
}

.toast {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(160, 200, 20, 0.10);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: rgba(20, 24, 36, 0.94);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.20);
  color: #D9E5BC;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  animation: toast-in 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.success { border-left-color: var(--brand); }
.toast.error { border-left-color: #FF7F7F; }
.toast svg { margin-top: 1px; color: var(--brand); }
.toast.error svg { color: #FF9999; }
.toast p { margin: 0; overflow-wrap: anywhere; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1280px) {
  .report-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .after-sales-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .after-sales-toolbar .toolbar-controls {
    width: 100%;
  }

  .after-sales-toolbar .toolbar-controls .button {
    white-space: nowrap;
  }

  .after-sales-toolbar #afterSalesSearch {
    min-width: 180px;
    flex: 1 1 260px;
  }
}

@media (max-width: 980px) {
  .app-view {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    width: 100%;
    height: 72px;
    min-height: 72px;
    max-height: 72px;
    grid-template-columns: 190px minmax(0, 1fr) 190px;
    align-items: center;
    align-self: start;
    gap: 12px;
    padding: 12px 16px;
    overflow: visible;
  }

  .sidebar-brand {
    padding: 0;
    border: 0;
  }

  .sidebar-brand img {
    width: 36px;
    height: 48px;
  }

  .main-nav {
    display: flex;
    min-width: 0;
    justify-content: center;
    gap: 4px;
    padding: 0;
    overflow: visible;
  }

  .nav-group {
    display: block;
  }

  .nav-chevron {
    display: none;
  }

  .nav-subnav {
    position: absolute;
    top: 46px;
    left: 50%;
    z-index: 40;
    width: min(164px, calc(100vw - 24px));
    margin: 0;
    padding: 6px;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    background: #1E2230;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.50);
    max-height: calc(100vh - 92px);
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
  }

  .nav-section-label {
    display: none;
  }

  #authorizationSubnav {
    left: 0;
    transform: none;
  }

  #warehouseSubnav {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .nav-sub-button {
    width: 100%;
    min-height: 42px;
    padding: 9px 10px;
  }

  .nav-button {
    width: auto;
    min-width: 42px;
    min-height: 42px;
    padding: 9px 10px;
  }

  .nav-button.active::before {
    inset: auto 10px -1px;
    width: auto;
    height: 3px;
  }

  .nav-button span {
    display: none;
  }

  .sidebar-account {
    grid-template-columns: 32px minmax(0, 1fr) 34px;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .sidebar-account-wrap {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .server-release-card {
    display: none;
  }

  .mobile-only-menu-item {
    display: flex;
  }

  .user-menu {
    top: calc(100% + 10px);
    right: 0;
    bottom: auto;
    left: auto;
    width: 190px;
  }

  .user-menu-item {
    min-height: 44px;
  }

  .avatar {
    width: 32px;
    height: 32px;
  }

  .topbar {
    position: static;
  }

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

  .activation-form,
  .result-surface {
    min-height: 0;
  }

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

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

  .runtime-item + .runtime-item {
    border-left: 0;
  }

  .runtime-item:nth-child(even) {
    border-left: 1px solid rgba(255,255,255,0.05);
  }

  .runtime-item:nth-child(n + 3) {
    border-top: 1px solid rgba(255,255,255,0.05);
  }

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

  .dashboard-quick-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .quick-action-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  }

  .quick-action-buttons .button {
    width: 100%;
  }

  .empty-state {
    min-height: 300px;
  }

  .stock-header-grid,
  .stock-out-header-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .after-sales-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .after-sales-toolbar .toolbar-controls {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(160px, 1fr) 128px 148px 44px 44px;
  }

  .after-sales-toolbar .toolbar-controls .button {
    width: 100%;
    white-space: nowrap;
  }

  .after-sales-toolbar #afterSalesSearch {
    width: 100%;
    grid-row: 1;
    grid-column: 1 / 4;
  }

  .after-sales-toolbar #exportAfterSalesButton {
    grid-row: 1;
    grid-column: 4;
  }

  .after-sales-toolbar #refreshAfterSalesButton {
    grid-row: 1;
    grid-column: 5;
  }

  .after-sales-toolbar #afterSalesStatusFilter {
    grid-row: 2;
    grid-column: 1;
  }

  .after-sales-toolbar #afterSalesTypeFilter {
    grid-row: 2;
    grid-column: 2;
  }

  .after-sales-toolbar #openServiceQueryButton {
    grid-row: 2;
    grid-column: 3;
  }

  .after-sales-toolbar #newAfterSalesButton {
    grid-row: 2;
    grid-column: 4 / 6;
  }

  .after-sales-field-grid.four-column,
  .after-sales-schedule-grid,
  .after-sales-return-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .after-sales-workflow {
    grid-template-columns: 1fr;
  }

  .after-sales-workflow-column + .after-sales-workflow-column {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 680px) {
  .login-view {
    padding: 16px;
  }

  .login-panel {
    padding: 26px 22px 22px;
  }

  .login-brand {
    align-items: flex-start;
  }

  .login-brand img {
    width: 66px;
    height: 88px;
    flex-basis: 66px;
  }

  .login-brand h1 {
    font-size: 18px;
  }

  .sidebar {
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
    padding: 10px 12px;
  }

  .sidebar-brand div,
  .account-copy,
  .avatar {
    display: none;
  }

  .sidebar-brand {
    display: none;
  }

  .main-nav {
    justify-content: flex-start;
    gap: 2px;
    padding-right: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav::-webkit-scrollbar {
    display: none;
  }

  .main-nav > .nav-button,
  .main-nav > .nav-group {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  #dashboardNav {
    order: -2;
  }

  #siteAnalyticsNav {
    order: -1;
  }

  .mobile-subnav-host {
    --mobile-subnav-left: 12px;
    position: fixed;
    top: 64px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: block;
    pointer-events: none;
  }

  .mobile-subnav-host:empty {
    display: none;
  }

  .mobile-subnav-host .nav-subnav {
    top: 8px;
    right: auto;
    left: var(--mobile-subnav-left);
    width: min(196px, calc(100vw - 24px));
    transform: none;
    pointer-events: auto;
  }

  .sidebar-account {
    display: block;
  }

  .topbar {
    min-height: 68px;
    gap: 8px;
    padding: 10px 14px;
  }

  .topbar > div:first-child {
    min-width: 0;
  }

  .topbar p {
    display: none;
  }

  .topbar-actions {
    gap: 6px;
  }

  .notification-button {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .topbar-language-switcher {
    display: inline-grid;
  }

  .topbar h2 {
    font-size: 18px;
  }

  .quota-display {
    min-width: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    padding: 6px 8px;
  }

  .quota-display span,
  .quota-display strong {
    font-size: 11px;
  }

  .announcement-dialog {
    overflow-y: auto;
  }

  .announcement-layout {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .announcement-sidebar {
    max-height: 230px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .announcement-placeholder {
    min-height: 260px;
  }

  .announcement-detail,
  .announcement-form {
    min-height: 350px;
    padding: 18px;
  }

  .announcement-detail-heading {
    flex-direction: column;
    gap: 8px;
  }

  .announcement-manage-actions,
  .announcement-form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .announcement-manage-actions .button,
  .announcement-form-actions .button {
    width: 100%;
  }

  .page-container {
    padding: 16px 12px 26px;
  }

  .permission-toggle-grid {
    grid-template-columns: 1fr;
  }

  .permission-category-items {
    grid-template-columns: 1fr;
  }

  .permission-category-items > :nth-child(even) {
    border-left: 0;
  }

  .permission-category-items > :nth-child(n + 2) {
    border-top: 1px solid var(--line);
  }

  .permission-category-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .permission-category-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .permission-select-item {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .permission-select-item select {
    width: 100%;
    min-width: 0;
  }

  .permission-toggle-grid .toggle-row:nth-child(odd) {
    border-right: 0;
  }

  .permission-toggle-grid .toggle-row + .toggle-row,
  .permission-toggle-grid .toggle-row:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .permission-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .warehouse-overview-bar,
  .expense-overview-bar,
  .after-sales-overview-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-metric {
    min-height: 88px;
    padding: 13px;
  }

  .dashboard-metric > div > strong {
    font-size: 19px;
  }

  .dashboard-quick-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .quick-action-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-action-buttons .button {
    width: 100%;
  }

  .warehouse-overview-bar > div:nth-child(3),
  .expense-overview-bar > div:nth-child(3),
  .after-sales-overview-bar > div:nth-child(3) {
    border-left: 1px solid var(--line);
  }

  .warehouse-overview-bar > div:nth-child(n+3),
  .expense-overview-bar > div:nth-child(n+3),
  .after-sales-overview-bar > div:nth-child(n+3) {
    border-top: 1px solid var(--line);
  }

  .warehouse-overview-bar > div,
  .expense-overview-bar > div,
  .after-sales-overview-bar > div {
    min-height: 68px;
    padding: 10px 11px;
  }

  .activation-form,
  .result-surface,
  .password-form {
    padding: 19px;
  }

  .activation-form > .button {
    width: 100%;
  }

  .activation-code-row {
    padding: 12px;
  }

  .activation-code {
    font-size: 17px;
  }

  .result-details {
    grid-template-columns: 1fr;
  }

  .page-toolbar,
  .history-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 108px 44px;
  }

  .after-sales-toolbar .toolbar-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
  }

  .after-sales-toolbar .toolbar-controls .search-input {
    grid-row: 1;
    grid-column: 1 / -1;
  }

  .after-sales-toolbar .toolbar-controls .button {
    width: 100%;
  }

  .after-sales-toolbar #openServiceQueryButton {
    grid-row: 3;
    grid-column: 1;
  }

  .after-sales-toolbar #openAfterSalesBoardButton {
    grid-row: 3;
    grid-column: 2;
  }

  .after-sales-toolbar #exportAfterSalesButton {
    grid-row: 3;
    grid-column: 3;
  }

  .after-sales-toolbar #refreshAfterSalesButton {
    grid-row: 2;
    grid-column: 3;
  }

  .after-sales-toolbar #newAfterSalesButton {
    grid-row: 4;
    grid-column: 1 / -1;
  }

  .after-sales-toolbar #afterSalesStatusFilter {
    grid-row: 2;
    grid-column: 1;
  }

  .after-sales-toolbar #afterSalesTypeFilter {
    grid-row: 2;
    grid-column: 2;
  }

  .warehouse-filter-controls {
    grid-template-columns: minmax(0, 1fr) 110px 44px;
  }

  .expense-filter-controls {
    grid-template-columns: minmax(0, 1fr) 112px;
  }

  .expense-filter-controls .search-input,
  .expense-filter-controls .button {
    grid-column: 1 / -1;
  }

  .expense-filter-controls .button {
    width: 100%;
  }

  .warehouse-filter-controls .search-input {
    grid-column: 1 / -1;
  }

  .quality-filter-controls {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .report-filter-controls {
    grid-template-columns: minmax(0, 1fr) minmax(132px, auto);
  }

  .audit-filter-controls {
    grid-template-columns: minmax(0, 1fr) minmax(132px, auto);
  }

  .audit-stock-toggle,
  .audit-filter-controls .button {
    grid-column: 1 / -1;
  }

  .approval-filter-controls {
    grid-template-columns: minmax(0, 1fr) minmax(132px, auto);
  }

  .report-filter-controls .button,
  .audit-filter-controls .button {
    width: 100%;
  }

  .trace-search-panel {
    grid-template-columns: 1fr;
  }

  .trace-search-panel .button {
    width: 100%;
  }

  .trace-flow-grid {
    grid-template-columns: 1fr;
  }

  .trace-flow-grid > section + section {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .stock-document-form {
    padding: 18px;
  }

  .stock-header-grid,
  .stock-out-header-grid {
    grid-template-columns: 1fr;
  }

  .stock-scan-row {
    grid-template-columns: 1fr;
  }

  .stock-scan-row .button {
    width: 100%;
  }

  .stock-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .stock-form-actions .button {
    width: 100%;
  }

  .search-input,
  .toolbar-controls select {
    width: 100%;
  }

  .page-toolbar > .button {
    align-self: flex-start;
  }

  .dialog-backdrop {
    padding: 10px;
  }

.dialog {
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
  }

  .dialog-actions {
    grid-template-columns: 1fr 1fr;
  }

  .dialog-actions > span {
    display: none;
  }

  .dialog-actions .button-danger {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .stocktake-detail-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stocktake-detail-actions .button {
    width: 100%;
  }

  .stocktake-detail-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .stocktake-detail-meta .status-pill {
    margin-left: 0;
  }

  .approval-detail-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .approval-detail-meta .status-pill {
    margin-left: 0;
  }

  .approval-detail-grid {
    grid-template-columns: 1fr 1fr;
  }

  .approval-detail-actions {
    grid-template-columns: 1fr 1fr;
  }

  .approval-detail-actions .button {
    width: 100%;
  }

  .approval-detail-actions #cancelApprovalDetailButton {
    grid-column: 1 / -1;
  }

  .dialog-field-grid {
    grid-template-columns: 1fr;
  }

  .approval-detail-grid {
    grid-template-columns: 1fr;
  }

  .expense-time-grid {
    grid-template-columns: 1fr;
  }

  .expense-items-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .expense-items-heading .button {
    width: 100%;
  }

  .expense-dialog-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .expense-dialog-meta .status-pill {
    margin-left: 0;
  }

  .expense-dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .expense-dialog-actions > span {
    display: none;
  }

  .expense-dialog-actions .button {
    width: 100%;
  }

  .expense-dialog-actions #deleteExpenseButton,
  .expense-dialog-actions #cancelExpenseButton {
    grid-column: 1 / -1;
  }

  .after-sales-dialog-meta {
    flex-wrap: wrap;
    align-items: center;
  }

  .after-sales-dialog-meta > span:nth-child(2) {
    margin-left: 0;
  }

  .after-sales-dialog-meta #copyAfterSalesLinkButton {
    width: 100%;
  }

  .after-sales-field-grid.four-column,
  .after-sales-field-grid.three-column,
  .after-sales-schedule-grid,
  .after-sales-field-grid.compact-last,
  .after-sales-return-grid,
  .progress-editor-grid,
  .event-editor-grid {
    grid-template-columns: 1fr !important;
  }

  .after-sales-workflow {
    grid-template-columns: 1fr;
  }

  .after-sales-workflow-column + .after-sales-workflow-column {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .after-sales-inline-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .after-sales-inline-actions .button {
    width: 100%;
  }

  .after-sales-feedback {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .after-sales-feedback-score {
    text-align: left;
  }

  .after-sales-feedback-stars {
    justify-content: flex-start;
  }

  .after-sales-dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .after-sales-dialog-actions > span {
    display: none;
  }

  .after-sales-dialog-actions .button {
    width: 100%;
  }

  .after-sales-dialog-actions #deleteAfterSalesButton {
    grid-column: 1 / -1;
  }

  .service-request-link-body {
    grid-template-columns: 1fr;
  }

  .service-request-qr-wrap {
    justify-self: center;
  }

  .barcode-scanner-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .barcode-scanner-actions {
    width: 100%;
  }

  .barcode-scanner-actions .button {
    flex: 1 1 0;
  }

  .quota-add-row {
    grid-template-columns: 1fr;
  }

  .quota-field-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .table-action {
    width: 40px;
    height: 40px;
  }

  .toolbar-icon-button,
  .camera-scan-button {
    min-width: 44px;
    min-height: 44px;
  }
}

.processing-overview-bar {
  display: grid;
  margin-bottom: 16px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.processing-overview-bar > div {
  min-width: 0;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform var(--transition), box-shadow var(--transition);
}

.processing-overview-bar > div:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.processing-overview-bar .metric-copy > span,
.processing-overview-bar .metric-copy > strong {
  display: block;
}

.processing-overview-bar .metric-copy > span {
  color: var(--muted);
  font-size: 11px;
}

.processing-overview-bar .metric-copy > strong {
  margin-top: 1px;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.processing-panel {
  animation: page-in 160ms ease-out;
}

.processing-task-table,
.process-template-table,
.processing-exception-table,
.processing-quality-table {
  min-width: 1180px;
}

.table-cell-note {
  display: block;
  max-width: 280px;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-progress {
  display: grid;
  min-width: 128px;
  grid-template-columns: minmax(72px, 1fr) 42px;
  align-items: center;
  gap: 8px;
}

.processing-progress > progress {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 3px;
  background: rgba(139, 149, 168, 0.13);
  accent-color: var(--accent);
}

.processing-progress > progress::-webkit-progress-bar {
  border-radius: inherit;
  background: rgba(139, 149, 168, 0.13);
}

.processing-progress > progress::-webkit-progress-value,
.processing-progress > progress::-moz-progress-bar {
  border-radius: inherit;
  background: var(--accent);
}

.processing-progress > strong {
  color: var(--ink);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.processing-risk,
.processing-severity {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}

.risk-normal {
  border-color: rgba(16, 185, 129, 0.16);
  background: rgba(16, 185, 129, 0.07);
  color: var(--success);
}

.risk-warning,
.severity-general,
.severity-notice {
  border-color: rgba(245, 158, 11, 0.18);
  background: rgba(245, 158, 11, 0.08);
  color: var(--warning);
}

.risk-overdue,
.risk-blocked,
.severity-serious,
.severity-stop {
  border-color: rgba(239, 68, 68, 0.20);
  background: rgba(239, 68, 68, 0.08);
  color: var(--danger);
}

.status-pill.status-approved {
  border-color: rgba(16, 185, 129, 0.18);
  background: rgba(16, 185, 129, 0.08);
  color: var(--success);
}

.status-pill.status-processing {
  border-color: rgba(160, 200, 20, 0.18);
  background: rgba(160, 200, 20, 0.08);
  color: var(--accent-dark);
}

.status-pill.status-pending {
  border-color: rgba(245, 158, 11, 0.18);
  background: rgba(245, 158, 11, 0.08);
  color: var(--warning);
}

.status-pill.status-rejected {
  border-color: rgba(239, 68, 68, 0.18);
  background: rgba(239, 68, 68, 0.08);
  color: var(--danger);
}

.status-pill.status-draft {
  border-color: rgba(139, 149, 168, 0.16);
  background: rgba(139, 149, 168, 0.08);
  color: #9BA8B8;
}

.processing-mine-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.processing-work-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.processing-work-card-heading,
.processing-work-step,
.processing-work-meta,
.processing-work-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.processing-work-card-heading > div,
.processing-work-card-heading small,
.processing-work-card-heading strong {
  display: block;
  min-width: 0;
}

.processing-work-card-heading small {
  color: var(--muted);
  font-size: 10px;
}

.processing-work-card-heading strong {
  margin-top: 2px;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-work-step {
  margin-top: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.processing-work-step b {
  font-variant-numeric: tabular-nums;
}

.processing-work-meta {
  align-items: flex-start;
  margin-top: 12px;
  color: var(--muted);
  font-size: 10px;
}

.processing-work-meta span,
.processing-work-meta strong {
  display: block;
}

.processing-work-meta strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 11px;
}

.processing-work-actions {
  margin-top: 16px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.processing-work-actions .button,
.processing-step-actions .button {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 10px;
}

.processing-task-dialog,
.process-template-dialog,
.processing-detail-dialog,
.processing-team-dialog {
  width: min(1120px, 100%);
}

.processing-team-dialog {
  width: min(820px, 100%);
}

.processing-action-dialog {
  width: min(620px, 100%);
}

.processing-dialog-body {
  gap: 16px;
}

.processing-team-members-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.processing-team-members-heading label {
  margin: 0;
}

.processing-team-members-heading small,
.field-hint {
  color: var(--muted);
  font-size: 10px;
}

.processing-team-members {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.processing-team-member {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  background: var(--surface);
}

.processing-team-member:has(input:checked) {
  border-color: rgba(160, 200, 20, 0.46);
  background: rgba(160, 200, 20, 0.08);
}

.processing-team-member input {
  width: 15px;
  height: 15px;
  min-height: 0;
  flex: 0 0 15px;
  accent-color: var(--accent);
}

.processing-team-member span,
.processing-team-member strong,
.processing-team-member small {
  display: block;
  min-width: 0;
}

.processing-team-member strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-team-member small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.dialog-field-grid.three-column {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dialog-field-grid.four-column {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.processing-step-editor-heading,
.processing-step-editor-heading > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.processing-step-editor-heading > div {
  justify-content: flex-start;
}

.processing-step-editor-heading span {
  color: var(--success);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.processing-step-editor-heading span.invalid {
  color: var(--danger);
}

.processing-step-editor {
  max-height: 340px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.processing-step-editor table {
  min-width: 1220px;
}

.processing-step-editor input[type="text"],
.processing-step-editor input[type="number"] {
  min-height: 34px;
  padding: 6px 8px;
  font-size: 11px;
}

.processing-step-small {
  width: 72px;
}

.processing-step-predecessor {
  width: 96px;
}

.processing-detail-body {
  gap: 18px;
}

.processing-detail-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.processing-detail-summary > div {
  min-width: 0;
  padding: 12px 14px;
}

.processing-detail-summary > div + div {
  border-left: 1px solid var(--line);
}

.processing-detail-summary span,
.processing-detail-summary strong {
  display: block;
}

.processing-detail-summary span {
  color: var(--muted);
  font-size: 10px;
}

.processing-detail-summary strong {
  margin-top: 3px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-detail-heading {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.processing-detail-heading > span {
  color: var(--muted);
  font-size: 10px;
}

.processing-step-list {
  display: grid;
  gap: 8px;
}

.processing-step-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.processing-step-sequence {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(160, 200, 20, 0.20);
  border-radius: 4px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

.processing-step-copy {
  min-width: 0;
}

.processing-step-copy > div,
.processing-step-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.processing-step-copy p,
.processing-step-copy small {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.processing-step-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.processing-detail-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.processing-record-list,
.processing-timeline {
  border-top: 1px solid var(--line);
}

.processing-record-row {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.processing-record-row.static {
  cursor: default;
}

.processing-record-row span,
.processing-record-row strong,
.processing-record-row small {
  display: block;
  min-width: 0;
}

.processing-record-row small,
.processing-record-row time {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.processing-record-empty {
  margin: 0;
  padding: 18px 0;
  color: var(--muted);
  font-size: 11px;
}

.processing-timeline-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.processing-timeline-row > i {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.processing-timeline-row strong,
.processing-timeline-row small {
  display: block;
}

.processing-timeline-row small,
.processing-timeline-row p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 10px;
}

@media (max-width: 1180px) {
  .processing-overview-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .processing-mine-grid {
    grid-template-columns: 1fr;
  }

  .processing-detail-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .processing-detail-summary > div:nth-child(4) {
    border-left: 0;
  }

  .processing-detail-summary > div:nth-child(n + 4) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 760px) {
  .processing-team-members {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-processing-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .dashboard-processing-row .processing-progress {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .dashboard-processing-row .status-pill {
    grid-column: 2;
    grid-row: 1;
  }

  .processing-overview-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .processing-overview-bar > div:last-child {
    grid-column: 1 / -1;
  }

  .processing-filter-controls {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .processing-filter-controls .search-input {
    width: 100%;
    grid-column: 1 / -1;
  }

  .processing-filter-controls .button {
    width: 100%;
  }

  .dialog-field-grid.three-column,
  .dialog-field-grid.four-column,
  .processing-detail-columns {
    grid-template-columns: 1fr;
  }

  .processing-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .processing-detail-summary > div:nth-child(odd) {
    border-left: 0;
  }

  .processing-detail-summary > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .processing-step-item {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .processing-step-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-left: 44px;
  }
}

@media (max-width: 480px) {
  .processing-team-members {
    grid-template-columns: 1fr;
  }

  .processing-overview-bar > div {
    min-height: 66px;
    padding: 11px 12px;
  }

  .processing-work-card {
    padding: 14px;
  }

  .processing-work-meta {
    flex-direction: column;
  }

  .processing-work-actions {
    justify-content: stretch;
  }

  .processing-work-actions .button {
    flex: 1 1 calc(50% - 6px);
  }

  .processing-detail-summary {
    grid-template-columns: 1fr;
  }

  .processing-detail-summary > div,
  .processing-detail-summary > div:nth-child(odd) {
    border-left: 0;
  }

  .processing-detail-summary > div + div {
    border-top: 1px solid var(--line);
  }

  .processing-step-actions {
    padding-left: 0;
  }

  .processing-step-actions .button {
    flex: 1 1 calc(50% - 4px);
  }
}

.dashboard-module-dialog {
  width: min(560px, 100%);
}

.dashboard-module-dialog-body {
  gap: 12px;
}

.dashboard-module-hint {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 440px) {
  .dashboard-runtime-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .dashboard-runtime-grid {
    grid-template-columns: 1fr;
  }

  .runtime-item:nth-child(even) {
    border-left: 0;
  }

  .runtime-item + .runtime-item,
  .runtime-item:nth-child(n + 3) {
    border-top: 1px solid rgba(255,255,255,0.05);
  }

  .dashboard-heading-actions .toolbar-icon-button {
    width: 36px;
    min-width: 36px;
  }
}

/* Site-owner analytics */
.analytics-toolbar {
  margin-bottom: 16px;
}

.analytics-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.analytics-metric {
  position: relative;
  min-width: 0;
  min-height: 104px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #1C2030;
  box-shadow: var(--shadow-soft);
}

.analytics-metric::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  content: "";
  background: var(--accent);
}

.analytics-metric:nth-child(2)::before {
  background: var(--info);
}

.analytics-metric:nth-child(3)::before {
  background: var(--warning);
}

.analytics-metric:nth-child(4)::before {
  background: var(--success);
}

.analytics-metric-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(160, 200, 20, 0.18);
  border-radius: 8px;
  color: var(--accent);
  background: rgba(160, 200, 20, 0.08);
}

.analytics-metric:nth-child(2) .analytics-metric-icon {
  border-color: rgba(91, 141, 239, 0.2);
  color: var(--info);
  background: rgba(91, 141, 239, 0.08);
}

.analytics-metric:nth-child(3) .analytics-metric-icon {
  border-color: rgba(245, 158, 11, 0.2);
  color: var(--warning);
  background: rgba(245, 158, 11, 0.08);
}

.analytics-metric:nth-child(4) .analytics-metric-icon {
  border-color: rgba(16, 185, 129, 0.2);
  color: var(--success);
  background: rgba(16, 185, 129, 0.08);
}

.analytics-metric-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.analytics-metric > div {
  min-width: 0;
}

.analytics-metric span,
.analytics-metric strong,
.analytics-metric small {
  display: block;
}

.analytics-metric > div > span {
  color: var(--muted);
  font-size: 11px;
}

.analytics-metric strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.1;
  font-weight: 720;
}

.analytics-metric small {
  margin-top: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
  overflow: hidden;
}

.analytics-summary-strip > div {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
}

.analytics-summary-strip > div + div {
  border-left: 1px solid var(--line);
}

.analytics-summary-strip span {
  color: var(--muted);
  font-size: 11px;
}

.analytics-summary-strip strong {
  font-size: 17px;
  font-weight: 680;
}

.analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.8fr);
  gap: 14px;
  margin-bottom: 14px;
}

.analytics-trend-panel,
.analytics-online-panel {
  min-width: 0;
  padding: 18px;
}

.analytics-trend-panel {
  overflow-x: auto;
}

.analytics-panel-heading {
  min-width: 0;
  min-height: 34px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.analytics-panel-heading strong,
.analytics-panel-heading span {
  display: block;
}

.analytics-panel-heading strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 680;
}

.analytics-panel-heading > div > span,
.analytics-panel-heading > small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}

.analytics-legend {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}

.analytics-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
}

.analytics-legend i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
}

.analytics-legend i.views {
  background: var(--info);
}

.analytics-trend {
  width: 100%;
  min-width: 660px;
  height: 218px;
  display: grid;
  grid-template-columns: repeat(14, minmax(32px, 1fr));
  align-items: stretch;
  gap: 7px;
  padding: 18px 2px 0;
  border-bottom: 1px solid var(--line-strong);
  background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 100% 25%;
}

.analytics-trend-day {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 24px;
  gap: 7px;
}

.analytics-trend-bars {
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}

.analytics-trend-bars > i {
  position: relative;
  width: min(12px, 42%);
  min-height: 0;
  border-radius: 3px 3px 1px 1px;
  background: var(--accent);
  transition: height 220ms ease;
}

.analytics-trend-bars > i.views {
  background: var(--info);
}

.analytics-trend-bars > i > span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
  line-height: 1;
  transform: translateX(-50%);
}

.analytics-trend-day > small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-live-label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  color: var(--success);
  font-size: 10px;
}

.analytics-live-label i,
.analytics-online-row span > i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.analytics-online-list {
  display: grid;
}

.analytics-online-row {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
}

.analytics-online-row span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.analytics-online-row strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-online-row b {
  min-width: 28px;
  color: var(--success);
  font-size: 12px;
  text-align: right;
}

.analytics-empty {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
}

.analytics-pages-panel {
  padding-top: 0;
}

.analytics-table-heading {
  padding: 16px 18px 0;
}

.analytics-pages-table {
  min-width: 720px;
}

.analytics-pages-table td strong,
.analytics-pages-table td small {
  display: block;
}

.analytics-pages-table td strong {
  color: var(--ink);
  font-size: 11px;
}

.analytics-pages-table td small {
  margin-top: 3px;
  color: var(--muted);
  font: 9px/1.4 "Cascadia Mono", Consolas, monospace;
}

.analytics-heat {
  width: min(240px, 100%);
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
}

.analytics-heat i {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: var(--accent);
}

@media (max-width: 1120px) {
  .analytics-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 620px) {
  .analytics-metrics {
    grid-template-columns: 1fr;
  }

  .analytics-metric {
    min-height: 86px;
    padding: 14px 16px;
  }

  .analytics-summary-strip {
    grid-template-columns: 1fr;
  }

  .analytics-summary-strip > div {
    min-height: 52px;
  }

  .analytics-summary-strip > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .analytics-trend-panel,
  .analytics-online-panel {
    padding: 14px;
  }

  .analytics-panel-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .analytics-legend {
    align-self: flex-start;
  }
}

/* After-sales progress board */
.after-sales-board-launch svg {
  color: var(--accent);
}

.after-sales-board {
  --board-surface: #151922;
  --board-surface-strong: #1B202B;
  --board-line: rgba(230, 236, 244, 0.10);
  --after-sales-board-font-size: 18px;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  min-width: 320px;
  min-height: 520px;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: 18px 24px 12px;
  overflow: hidden;
  background: #0C0F14;
  color: #F1F4F7;
  isolation: isolate;
}

.after-sales-board-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 2px 14px;
  border-bottom: 1px solid var(--board-line);
}

.after-sales-board-brand,
.after-sales-board-header-meta,
.after-sales-board-sync,
.after-sales-board-actions,
.after-sales-board-summary,
.after-sales-board-page-summary,
.after-sales-board-legend,
.after-sales-board-card-heading,
.after-sales-board-product-row,
.after-sales-board-progress-heading,
.after-sales-board-card-footer {
  display: flex;
  align-items: center;
}

.after-sales-board-brand {
  min-width: 0;
  gap: 12px;
}

.after-sales-board-brand img {
  width: 42px;
  height: 50px;
  flex: 0 0 auto;
  object-fit: contain;
}

.after-sales-board-brand span,
.after-sales-board-brand h2,
.after-sales-board-sync strong,
.after-sales-board-sync small,
.after-sales-board-clock strong,
.after-sales-board-clock small,
.after-sales-board-card span,
.after-sales-board-card strong,
.after-sales-board-card small,
.after-sales-board-card em {
  display: block;
}

.after-sales-board-brand span {
  color: #8F9AAA;
  font-size: 11px;
  font-weight: 600;
}

.after-sales-board-brand h2 {
  margin: 1px 0 0;
  font-size: 23px;
  font-weight: 720;
  line-height: 1.2;
}

.after-sales-board-header-meta {
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 18px;
}

.after-sales-board-sync {
  min-width: 150px;
  gap: 9px;
}

.after-sales-board-sync > i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #55C78C;
  box-shadow: 0 0 0 4px rgba(85, 199, 140, 0.11);
  animation: after-sales-board-live 2s ease-in-out infinite;
}

.after-sales-board-sync strong {
  color: #DCE3EA;
  font-size: 12px;
  line-height: 1.25;
}

.after-sales-board-sync small {
  margin-top: 2px;
  color: #758195;
  font-size: 9px;
  line-height: 1.25;
}

.after-sales-board-sync[data-state="syncing"] > i {
  background: #E4B04A;
  box-shadow: 0 0 0 4px rgba(228, 176, 74, 0.11);
}

.after-sales-board-sync[data-state="error"] > i {
  background: #F06464;
  box-shadow: 0 0 0 4px rgba(240, 100, 100, 0.12);
  animation: none;
}

.after-sales-board-clock {
  min-width: 164px;
  padding-left: 18px;
  border-left: 1px solid var(--board-line);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.after-sales-board-clock strong {
  font: 650 24px/1 "Cascadia Mono", Consolas, monospace;
}

.after-sales-board-clock small {
  margin-top: 5px;
  color: #7F8B9D;
  font-size: 9px;
}

.after-sales-board-actions {
  gap: 7px;
  padding-left: 4px;
}

.after-sales-board-icon-button {
  width: 40px;
  height: 40px;
  display: grid;
  flex: 0 0 40px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--board-line);
  border-radius: 6px;
  background: #151922;
  color: #A9B3C0;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.after-sales-board-icon-button:hover,
.after-sales-board-icon-button:focus-visible {
  border-color: rgba(160, 200, 20, 0.42);
  background: #1C222B;
  color: #C6DD58;
  outline: none;
}

.after-sales-board-icon-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.after-sales-board-exit-fullscreen-icon {
  display: none;
}

.after-sales-board:fullscreen .after-sales-board-enter-fullscreen-icon,
.after-sales-board:-webkit-full-screen .after-sales-board-enter-fullscreen-icon {
  display: none;
}

.after-sales-board:fullscreen .after-sales-board-exit-fullscreen-icon,
.after-sales-board:-webkit-full-screen .after-sales-board-exit-fullscreen-icon {
  display: block;
}

.after-sales-board-summary {
  min-height: 58px;
  gap: 0;
  border-bottom: 1px solid var(--board-line);
}

.after-sales-board-summary > div {
  min-width: 146px;
  min-height: 34px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 0 22px;
  border-left: 1px solid var(--board-line);
}

.after-sales-board-summary > div:first-child {
  padding-left: 2px;
  border-left: 0;
}

.after-sales-board-summary > div[hidden] {
  display: none;
}

.after-sales-board-summary span {
  color: #8490A1;
  font-size: 10px;
  white-space: nowrap;
}

.after-sales-board-summary strong {
  color: #E9EDF2;
  font: 700 22px/1 "Cascadia Mono", Consolas, monospace;
}

.after-sales-board-summary > div:nth-child(2) strong {
  color: #F07575;
}

.after-sales-board-summary > div:nth-child(3) strong {
  color: #63C49A;
}

.after-sales-board-summary .after-sales-board-page-summary {
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
  padding-right: 2px;
}

.after-sales-board-page-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.after-sales-board-page-dots i {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: rgba(221, 228, 236, 0.16);
}

.after-sales-board-page-dots i.active {
  background: var(--accent);
}

.after-sales-board-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-content: stretch;
  gap: 11px;
  padding: 13px 0;
  overflow: hidden;
}

.after-sales-board-grid[data-count="0"] {
  grid-template: 1fr / 1fr;
}

.after-sales-board-grid[data-count="1"] {
  grid-template: minmax(260px, 0.68fr) / minmax(0, 920px);
  place-content: center;
}

.after-sales-board-grid[data-count="2"] {
  grid-template-rows: minmax(260px, 0.72fr);
  align-content: center;
}

.after-sales-board-grid[data-count="3"],
.after-sales-board-grid[data-count="4"] {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.after-sales-board-card {
  --board-card-state: #A0C814;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: space-between;
  gap: 8px;
  padding: 14px 17px 13px;
  overflow: hidden;
  border: 1px solid var(--board-line);
  border-radius: 8px;
  background: var(--board-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
  animation: after-sales-board-card-in 220ms ease-out both;
}

.after-sales-board-card.is-due-soon {
  --board-card-state: #E4B04A;
  border-color: rgba(228, 176, 74, 0.25);
}

.after-sales-board-card.is-overdue {
  --board-card-state: #F06464;
  border-color: rgba(240, 100, 100, 0.29);
}

.after-sales-board-card.is-completed {
  --board-card-state: #55C78C;
  border-color: rgba(85, 199, 140, 0.23);
}

.after-sales-board-card-heading {
  min-width: 0;
  justify-content: space-between;
  gap: 14px;
}

.after-sales-board-ticket {
  min-width: 0;
}

.after-sales-board-ticket span,
.after-sales-board-model span,
.after-sales-board-card-footer span {
  color: #748094;
  font-size: 9px;
  font-weight: 560;
}

.after-sales-board-ticket strong {
  margin-top: 1px;
  overflow: hidden;
  color: #F0F3F6;
  font: 650 15px/1.25 "Cascadia Mono", Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.after-sales-board-status {
  min-height: 27px;
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: rgba(160, 200, 20, 0.07);
  color: var(--board-card-state);
  font-size: 11px;
  font-weight: 720;
  line-height: 1;
}

.after-sales-board-card.is-due-soon .after-sales-board-status {
  background: rgba(228, 176, 74, 0.07);
}

.after-sales-board-card.is-overdue .after-sales-board-status {
  background: rgba(240, 100, 100, 0.07);
}

.after-sales-board-card.is-completed .after-sales-board-status {
  background: rgba(85, 199, 140, 0.07);
}

.after-sales-board-product-row {
  min-width: 0;
  justify-content: space-between;
  gap: 18px;
}

.after-sales-board-model {
  min-width: 0;
}

.after-sales-board-model strong {
  max-width: 100%;
  margin-top: 1px;
  overflow: hidden;
  color: #E8EDF2;
  font-size: 21px;
  font-weight: 680;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.after-sales-board-model small {
  margin-top: 2px;
  color: #8793A4;
  font-size: 9px;
}

.after-sales-board-percent {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  color: var(--board-card-state);
  font-variant-numeric: tabular-nums;
}

.after-sales-board-percent strong {
  font: 720 31px/1 "Cascadia Mono", Consolas, monospace;
}

.after-sales-board-percent span {
  margin-left: 2px;
  font-size: 13px;
  font-weight: 700;
}

.after-sales-board-progress-block {
  min-width: 0;
}

.after-sales-board-progress-heading {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.after-sales-board-progress-heading span {
  color: #758195;
  font-size: 9px;
}

.after-sales-board-progress-heading strong {
  overflow: hidden;
  color: #C9D1DA;
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.after-sales-board-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(231, 237, 244, 0.07);
}

.after-sales-board-progress i {
  display: block;
  height: 100%;
  min-width: 7px;
  border-radius: inherit;
  background: var(--board-card-state);
  transition: width 260ms ease;
}

.after-sales-board-card-footer {
  min-width: 0;
  justify-content: space-between;
  gap: 18px;
  padding-top: 8px;
  border-top: 1px solid rgba(230, 236, 244, 0.07);
}

.after-sales-board-card-footer > div {
  min-width: 0;
}

.after-sales-board-card-footer > div:last-child {
  flex: 0 0 auto;
  text-align: right;
}

.after-sales-board-card-footer strong {
  margin-top: 1px;
  color: #DDE3E9;
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.after-sales-board-card-footer em {
  margin-top: 1px;
  color: var(--board-card-state);
  font-size: 9px;
  font-style: normal;
  font-weight: 650;
  white-space: nowrap;
}

.after-sales-board-empty {
  min-height: 0;
  display: grid;
  place-items: center;
  text-align: center;
}

.after-sales-board-empty svg {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  color: #687487;
  stroke-width: 1.5;
}

.after-sales-board-empty strong {
  color: #D8DEE6;
  font-size: 20px;
}

.after-sales-board-empty span {
  margin-top: 5px;
  color: #727F92;
  font-size: 11px;
}

.after-sales-board-footer {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--board-line);
  color: #768295;
  font-size: 9px;
}

.after-sales-board-legend {
  gap: 16px;
}

.after-sales-board-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.after-sales-board-legend i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.after-sales-board-legend .is-warning { background: #E4B04A; }
.after-sales-board-legend .is-overdue { background: #F06464; }
.after-sales-board-legend .is-completed { background: #55C78C; }

.after-sales-board-font-control {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #9DA9BA;
  font-size: 12px;
}

.after-sales-board-font-control input {
  width: 92px;
  accent-color: #5B8DEF;
}

.after-sales-board-settings {
  position: absolute;
  z-index: 4;
  top: 82px;
  right: 24px;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 104px);
  padding: 16px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  color: #F1F4F7;
  background: #171B24;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}

.after-sales-board-settings[hidden] { display: none; }

.after-sales-board-settings > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.after-sales-board-settings > div > button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  color: #C9CFD8;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
}

.after-sales-board-settings fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.after-sales-board-settings legend {
  padding: 0 6px;
  color: #8B95A8;
  font-size: 11px;
}

.after-sales-board-settings label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  color: #C9CFD8;
  font-size: 12px;
}

.after-sales-board-settings input {
  width: 16px;
  height: 16px;
  accent-color: #A0C814;
}

.after-sales-board-summary span {
  font-size: clamp(10px, calc(var(--after-sales-board-font-size) * 0.66), 26px);
}

.after-sales-board-summary strong {
  font-size: clamp(22px, calc(var(--after-sales-board-font-size) * 1.25), 50px);
}

.after-sales-board-ticket span,
.after-sales-board-model span,
.after-sales-board-card-footer span,
.after-sales-board-model small,
.after-sales-board-card-footer em,
.after-sales-board-progress-heading span {
  font-size: clamp(9px, calc(var(--after-sales-board-font-size) * 0.58), 23px);
}

.after-sales-board-ticket strong,
.after-sales-board-status,
.after-sales-board-progress-heading strong,
.after-sales-board-card-footer strong {
  font-size: clamp(11px, calc(var(--after-sales-board-font-size) * 0.72), 29px);
}

.after-sales-board-model strong {
  font-size: clamp(21px, calc(var(--after-sales-board-font-size) * 1.18), 47px);
}

.after-sales-board-percent strong {
  font-size: clamp(31px, calc(var(--after-sales-board-font-size) * 1.72), 68px);
}

.after-sales-board-percent span,
.after-sales-board-footer {
  font-size: clamp(9px, calc(var(--after-sales-board-font-size) * 0.62), 25px);
}

@keyframes after-sales-board-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.58; transform: scale(0.82); }
}

@keyframes after-sales-board-card-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-height: 900px) and (min-width: 1200px) {
  .after-sales-board {
    padding: 24px 30px 16px;
  }

  .after-sales-board-header {
    min-height: 82px;
  }

  .after-sales-board-brand h2 {
    font-size: 26px;
  }

  .after-sales-board-summary {
    min-height: 66px;
  }

  .after-sales-board-grid {
    gap: 14px;
    padding: 16px 0;
  }

  .after-sales-board-card {
    gap: 11px;
    padding: 18px 21px 16px;
  }

  .after-sales-board-ticket strong {
    font-size: clamp(12px, calc(var(--after-sales-board-font-size) * 0.944), 29px);
  }

  .after-sales-board-model strong {
    font-size: clamp(16px, calc(var(--after-sales-board-font-size) * 1.333), 47px);
  }

  .after-sales-board-percent strong {
    font-size: clamp(24px, calc(var(--after-sales-board-font-size) * 1.944), 68px);
  }

  .after-sales-board-progress {
    height: 8px;
  }

  .after-sales-board-card-footer strong {
    font-size: clamp(10px, calc(var(--after-sales-board-font-size) * 0.722), 29px);
  }
}

@media (max-height: 720px) and (min-width: 901px) {
  .after-sales-board {
    min-height: 480px;
    padding-top: 10px;
  }

  .after-sales-board-header {
    min-height: 58px;
    padding-bottom: 8px;
  }

  .after-sales-board-brand img {
    width: 34px;
    height: 40px;
  }

  .after-sales-board-brand h2 {
    font-size: 19px;
  }

  .after-sales-board-clock strong {
    font-size: 20px;
  }

  .after-sales-board-summary {
    min-height: 48px;
  }

  .after-sales-board-grid {
    gap: 8px;
    padding: 9px 0;
  }

  .after-sales-board-card {
    gap: 5px;
    padding: 10px 14px 9px;
  }

  .after-sales-board-model strong {
    font-size: clamp(13px, calc(var(--after-sales-board-font-size) * 0.944), 29px);
  }

  .after-sales-board-model small {
    display: none;
  }

  .after-sales-board-percent strong {
    font-size: clamp(20px, calc(var(--after-sales-board-font-size) * 1.389), 47px);
  }

  .after-sales-board-card-footer {
    padding-top: 5px;
  }
}

@media (max-width: 900px) {
  .after-sales-board {
    display: block;
    min-height: 100%;
    padding: 12px;
    overflow-y: auto;
  }

  .after-sales-board-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 12px;
  }

  .after-sales-board-header-meta {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }

  .after-sales-board-sync {
    min-width: 0;
  }

  .after-sales-board-clock {
    min-width: 0;
    margin-left: auto;
    padding-left: 12px;
  }

  .after-sales-board-clock strong {
    font-size: 19px;
  }

  .after-sales-board-clock small {
    display: none;
  }

  .after-sales-board-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 10px 0;
  }

  .after-sales-board-summary > div,
  .after-sales-board-summary > div:first-child {
    min-width: 0;
    min-height: 38px;
    justify-content: center;
    padding: 0 8px;
  }

  .after-sales-board-summary .after-sales-board-page-summary {
    min-height: 30px;
    grid-column: 1 / -1;
    justify-content: center;
    padding: 8px 0 0;
    border-top: 1px solid var(--board-line);
    border-left: 0;
  }

  .after-sales-board-grid,
  .after-sales-board-grid[data-count="0"],
  .after-sales-board-grid[data-count="1"],
  .after-sales-board-grid[data-count="2"],
  .after-sales-board-grid[data-count="3"],
  .after-sales-board-grid[data-count="4"] {
    display: grid;
    grid-template: none / 1fr;
    gap: 10px;
    padding: 12px 0;
    overflow: visible;
  }

  .after-sales-board-card {
    min-height: 218px;
  }

  .after-sales-board-footer {
    min-height: 44px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }
}

@media (max-width: 560px) {
  .after-sales-board-brand img {
    width: 34px;
    height: 42px;
  }

  .after-sales-board-brand h2 {
    font-size: 20px;
  }

  .after-sales-board-sync small,
  .after-sales-board-clock {
    display: none;
  }

  .after-sales-board-header-meta {
    justify-content: flex-end;
  }

  .after-sales-board-sync {
    margin-right: auto;
  }

  .after-sales-board-icon-button {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .after-sales-board-summary span {
    font-size: clamp(8px, calc(var(--after-sales-board-font-size) * 0.444), 18px);
  }

  .after-sales-board-summary strong {
    font-size: clamp(16px, var(--after-sales-board-font-size), 40px);
  }

  .after-sales-board-legend {
    flex-wrap: wrap;
    gap: 5px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* CNC firmware management */
.ladder-policy-form {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
}
.ladder-policy-form[hidden] { display: none; }
.ladder-policy-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.ladder-policy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ladder-policy-grid input { width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.ladder-policy-hint, .ladder-policy-status { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 12px 0; }
.ladder-policy-actions { display: flex; justify-content: flex-end; }
.ladder-policy-status:empty { display: none; }
.ladder-policy-status.is-error { color: var(--danger); }
.ladder-policy-status.is-success { color: var(--success); }
@media (max-width: 480px) {
  .ladder-policy-grid { grid-template-columns: minmax(0, 1fr); }
}
.firmware-page {
  display: grid;
  gap: 14px;
}

.firmware-page[hidden] {
  display: none;
}

.firmware-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
  gap: 14px;
}

.firmware-upload-panel,
.firmware-status-panel {
  padding: 20px;
}

.firmware-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.firmware-file-field,
.firmware-notes-field {
  grid-column: 1 / -1;
}

.localized-file-control {
  display: grid;
  min-height: 42px;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--input-bg);
  transition: border-color 160ms ease, background-color 160ms ease,
    box-shadow 160ms ease;
}

.localized-file-control.is-dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--input-bg));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.localized-file-picker {
  min-height: 30px;
  padding: 6px 10px;
  cursor: pointer;
}

.localized-file-picker svg {
  width: 15px;
  height: 15px;
}

.localized-file-selection {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.firmware-file-field small {
  color: var(--muted);
  font-size: 11px;
}

.firmware-publish-actions {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.firmware-publish-toggle {
  flex: 1 1 auto;
  margin: 0;
}

.firmware-metrics {
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.firmware-metrics div {
  min-height: 78px;
  padding: 13px 15px;
  display: grid;
  align-content: center;
  gap: 5px;
  background: var(--surface-soft);
}

.firmware-metrics div:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.firmware-metrics div:nth-child(-n + 2) {
  border-bottom: 1px solid var(--line);
}

.firmware-metrics dt {
  color: var(--muted);
  font-size: 11px;
}

.firmware-metrics dd {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  font-weight: 700;
}

.firmware-service-hint {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.firmware-table-panel table {
  min-width: 1210px;
}

.firmware-connection-badge {
  min-width: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.firmware-connection-badge::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.firmware-table-heading {
  min-height: 62px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.firmware-table-heading h3,
.firmware-table-heading p {
  margin: 0;
}

.firmware-table-heading h3 {
  font-size: 15px;
}

.firmware-table-heading p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.firmware-hash {
  display: block;
  max-width: 150px;
  overflow: hidden;
  color: var(--muted);
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.firmware-progress-cell {
  min-width: 170px;
}

.firmware-progress-track {
  width: 150px;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}

.firmware-progress-track i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 180ms ease;
}

.firmware-progress-cell small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}

.activation-model-dialog {
  width: min(500px, calc(100vw - 32px));
}

.model-edit-warning {
  margin: 0;
  padding: 11px 12px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
  border-radius: var(--radius);
  color: var(--muted);
  background: color-mix(in srgb, var(--warning) 7%, transparent);
  font-size: 12px;
  line-height: 1.55;
}

.model-edit-warning svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--warning);
  stroke-width: 1.8;
}

@media (max-width: 980px) {
  .firmware-top-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .firmware-upload-panel,
  .firmware-status-panel {
    padding: 16px;
  }

  .firmware-form-grid {
    grid-template-columns: 1fr;
  }

  .firmware-publish-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .firmware-publish-actions .button {
    width: 100%;
  }
}

/* Light theme overrides are kept last so legacy dark component colors cannot win. */
html[data-theme="light"] .button-secondary,
html[data-theme="light"] .segmented-control,
html[data-theme="light"] .material-barcode-preview,
html[data-theme="light"] .report-bar-track {
  color: var(--ink);
  background: var(--surface-soft);
  border-color: var(--line-strong);
}

html[data-theme="light"] .button-secondary:hover:not(:disabled),
html[data-theme="light"] .copy-code-button:hover,
html[data-theme="light"] .camera-scan-button:hover {
  color: var(--ink);
  background: #EEF1F4;
}

html[data-theme="light"] .dashboard-metric,
html[data-theme="light"] .dashboard-runtime,
html[data-theme="light"] .dashboard-panel,
html[data-theme="light"] .analytics-metric {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

html[data-theme="light"] .dashboard-metric:hover {
  background: #FAFBFC;
  border-color: var(--line-strong);
}

html[data-theme="light"] thead th {
  color: var(--muted);
  background: #F1F3F6;
}

html[data-theme="light"] .permission-tags span {
  color: var(--muted);
  background: #E9EDF2;
}

html[data-theme="light"] .cnc-device-board {
  color: var(--ink);
  background: #F0F3F6;
}

html[data-theme="light"] .cnc-device-board-header {
  border-color: var(--line-strong);
}

html[data-theme="light"] .cnc-device-board-brand h2,
html[data-theme="light"] .cnc-device-board-sync strong,
html[data-theme="light"] .cnc-device-board-clock strong,
html[data-theme="light"] .cnc-device-board-summary strong {
  color: var(--ink);
}

html[data-theme="light"] .cnc-device-board-summary > div,
html[data-theme="light"] .cnc-board-device {
  color: var(--ink);
  background: #FFFFFF;
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}

html[data-theme="light"] .cnc-device-board-icon-button {
  color: var(--muted);
  background: #FFFFFF;
  border-color: var(--line-strong);
}

html[data-theme="light"] .after-sales-board {
  --board-surface: #FFFFFF;
  --board-surface-strong: #F4F6F8;
  --board-line: rgba(20, 28, 40, 0.12);
  color: var(--ink);
  background: #F0F3F6;
}

html[data-theme="light"] .after-sales-board-icon-button {
  color: var(--muted);
  background: #FFFFFF;
}

html[data-theme="light"] .after-sales-board-icon-button:hover,
html[data-theme="light"] .after-sales-board-icon-button:focus-visible {
  color: var(--accent-dark);
  background: #F4F6F8;
}

html[data-theme="light"] .cnc-parameter-groups {
  background: #DCE3E8;
}

.cnc-code-editor textarea,
.cnc-code-editor textarea:hover,
.cnc-code-editor textarea:focus,
html[data-theme="light"] .cnc-code-editor textarea,
html[data-theme="light"] .cnc-code-editor textarea:hover,
html[data-theme="light"] .cnc-code-editor textarea:focus {
  color: transparent;
  background: transparent;
  box-shadow: none;
  -webkit-text-fill-color: transparent;
}

/* V3.0.54 light theme: low-glare surfaces with explicit contrast. */
html[data-theme="light"] .main-shell::before {
  opacity: 0.28;
  background-image: radial-gradient(rgba(42, 61, 72, 0.08) 0.7px, transparent 0.7px);
}

html[data-theme="light"] .sidebar {
  color: var(--ink);
  background: #EDF1F2;
  border-right-color: rgba(34, 52, 63, 0.14);
  box-shadow: 3px 0 16px rgba(35, 52, 62, 0.09);
}

html[data-theme="light"] .sidebar::after {
  opacity: 0.08;
}

html[data-theme="light"] .sidebar-brand strong,
html[data-theme="light"] .account-copy strong {
  color: #18242C;
}

html[data-theme="light"] .sidebar-brand span,
html[data-theme="light"] .account-copy span,
html[data-theme="light"] .account-chevron,
html[data-theme="light"] .server-release-card small,
html[data-theme="light"] .server-release-card b {
  color: #596B77;
}

html[data-theme="light"] .nav-section-label {
  color: #687985;
}

html[data-theme="light"] .nav-button,
html[data-theme="light"] .nav-sub-button {
  color: #52646F;
}

html[data-theme="light"] .nav-button:hover,
html[data-theme="light"] .nav-sub-button:hover {
  color: #22323B;
  background: rgba(134, 167, 21, 0.09);
}

html[data-theme="light"] .nav-button.active,
html[data-theme="light"] .nav-sub-button.active {
  color: #1B2931;
  background: #E4EAD8;
  border-color: rgba(104, 127, 14, 0.13);
}

html[data-theme="light"] .nav-button.active::before {
  box-shadow: none;
}

html[data-theme="light"] .server-release-card {
  color: #26353E;
  background: #E7ECDB;
  border-color: rgba(96, 121, 11, 0.14);
}

html[data-theme="light"] .sidebar-account:hover,
html[data-theme="light"] .sidebar-account[aria-expanded="true"] {
  background: #E3E9EA;
  border-color: rgba(34, 52, 63, 0.13);
}

html[data-theme="light"] .avatar {
  color: #51670A;
  background: #E1E8D3;
  border-color: rgba(96, 121, 11, 0.18);
}

html[data-theme="light"] .user-menu,
html[data-theme="light"] .dialog {
  color: var(--ink);
  background: #F1F4F5;
  border-color: rgba(34, 52, 63, 0.19);
}

html[data-theme="light"] .user-menu-item {
  color: #31424C;
}

html[data-theme="light"] .user-menu-item:hover {
  background: #E3E9EA;
}

html[data-theme="light"] .sidebar-language-switcher,
html[data-theme="light"] .topbar-language-switcher {
  border-color: rgba(34, 52, 63, 0.18);
  background: #DCE4E6;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px 2px rgba(34, 52, 63, 0.08);
}

html[data-theme="light"] .sidebar-language-switcher button,
html[data-theme="light"] .topbar-language-switcher button {
  color: #596B77;
}

html[data-theme="light"] .sidebar-language-switcher button:hover,
html[data-theme="light"] .topbar-language-switcher button:hover {
  color: #1B2931;
}

html[data-theme="light"] .sidebar-language-switcher button.active,
html[data-theme="light"] .topbar-language-switcher button.active {
  color: #F2F5F5;
  background: #33464E;
  box-shadow: inset 0 -2px var(--accent);
}

html[data-theme="light"] .topbar {
  background: rgba(238, 242, 243, 0.94);
  border-bottom-color: rgba(34, 52, 63, 0.14);
  box-shadow: 0 1px 8px rgba(34, 52, 63, 0.06);
}

html[data-theme="light"] .topbar p {
  color: #5C6D78;
}

html[data-theme="light"] .notification-button,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .quota-display,
html[data-theme="light"] .toolbar-icon-button {
  color: #526672;
  background: #E3E9EB;
  border-color: rgba(34, 52, 63, 0.14);
}

html[data-theme="light"] .notification-button:hover,
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .toolbar-icon-button:hover {
  color: #1C2A32;
  background: #DCE4E6;
  border-color: rgba(34, 52, 63, 0.24);
}

html[data-theme="light"] .notification-button > span {
  border-color: #EEF2F3;
}

html[data-theme="light"] .surface,
html[data-theme="light"] .dashboard-metric,
html[data-theme="light"] .dashboard-runtime,
html[data-theme="light"] .dashboard-panel,
html[data-theme="light"] .analytics-metric {
  color: var(--ink);
  background: var(--surface);
  border-color: rgba(34, 52, 63, 0.12);
}

html[data-theme="light"] .dashboard-metric:hover {
  background: #EEF2F3;
  border-color: rgba(34, 52, 63, 0.20);
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .code-block,
html[data-theme="light"] .machine-code-preview {
  color: #22313A;
  background: var(--input-bg);
  border-color: rgba(34, 52, 63, 0.19);
}

html[data-theme="light"] input:hover,
html[data-theme="light"] select:hover,
html[data-theme="light"] textarea:hover {
  border-color: rgba(96, 121, 11, 0.42);
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #72818B;
}

html[data-theme="light"] .field label,
html[data-theme="light"] .field legend {
  color: #40515C;
}

html[data-theme="light"] .button-secondary,
html[data-theme="light"] .segmented-control {
  color: #2B3B44;
  background: #E3E9EA;
  border-color: rgba(34, 52, 63, 0.18);
}

html[data-theme="light"] .button-secondary:hover:not(:disabled),
html[data-theme="light"] .copy-code-button:hover,
html[data-theme="light"] .camera-scan-button:hover {
  color: #18252D;
  background: #DCE4E6;
}

html[data-theme="light"] .table-surface {
  background: #F2F5F6;
  border-color: rgba(34, 52, 63, 0.14);
}

html[data-theme="light"] thead th {
  color: #435660;
  background: #DEE5E7;
  border-bottom-color: rgba(34, 52, 63, 0.16);
}

html[data-theme="light"] td {
  color: #34454F;
  border-bottom-color: rgba(34, 52, 63, 0.10);
}

html[data-theme="light"] td strong,
html[data-theme="light"] .empty-state strong,
html[data-theme="light"] .report-bar-row strong {
  color: #1C2A32;
}

html[data-theme="light"] tbody tr:nth-child(even) {
  background: rgba(47, 66, 77, 0.025);
}

html[data-theme="light"] tbody tr:hover {
  background: #E9EEDC;
}

html[data-theme="light"] .table-action {
  color: #5A6D79;
}

html[data-theme="light"] .table-action:hover {
  color: #506509;
  background: #DFE6E8;
  border-color: rgba(34, 52, 63, 0.14);
}

html[data-theme="light"] .activation-code-cell,
html[data-theme="light"] .quantity-cell,
html[data-theme="light"] .available-stock-cell,
html[data-theme="light"] .money-cell {
  color: #5A7209;
}

html[data-theme="light"] .badge-owner,
html[data-theme="light"] .badge-admin,
html[data-theme="light"] .badge-permanent {
  color: #566D09;
}

html[data-theme="light"] .badge-user,
html[data-theme="light"] .status-pill.status-draft {
  color: #526570;
}

html[data-theme="light"] .permission-tags span {
  color: #4F606B;
  background: #DFE6E8;
}

html[data-theme="light"] .table-subtext,
html[data-theme="light"] .table-cell-note {
  color: #667681;
}

html[data-theme="light"] .empty-icon {
  background: #E4EAEC;
  border-color: rgba(34, 52, 63, 0.13);
}

html[data-theme="light"] .activation-code-row {
  background: #E7ECDE;
  border-color: rgba(96, 121, 11, 0.18);
}

html[data-theme="light"] .announcement-content,
html[data-theme="light"] .after-sales-feedback-copy p,
html[data-theme="light"] .after-sales-progress-item p {
  color: #40515C;
}

html[data-theme="light"] .cnc-editor-font-controls button:hover,
html[data-theme="light"] .cnc-editor-font-controls button:focus-visible {
  background: #DDE5E7;
}

html[data-theme="light"] .cnc-editor-resize-handle {
  background: #E1E7E9;
}

html[data-theme="light"] .cnc-editor-resize-handle span {
  background: #89979F;
}

html[data-theme="light"] .cnc-device-board {
  color: var(--ink);
  background: #E1E7E9;
}

html[data-theme="light"] .cnc-device-board-summary > div,
html[data-theme="light"] .cnc-board-device,
html[data-theme="light"] .cnc-device-board-icon-button {
  color: var(--ink);
  background: #F1F4F5;
  border-color: rgba(34, 52, 63, 0.18);
}

html[data-theme="light"] .after-sales-board {
  --board-surface: #F1F4F5;
  --board-surface-strong: #E4EAEC;
  --board-line: rgba(34, 52, 63, 0.15);
  color: var(--ink);
  background: #E1E7E9;
}

html[data-theme="light"] .after-sales-board-icon-button {
  color: #526570;
  background: #F1F4F5;
}

html[data-theme="light"] .after-sales-board-icon-button:hover,
html[data-theme="light"] .after-sales-board-icon-button:focus-visible {
  color: #526809;
  background: #DCE4E6;
}

/* CNC production intelligence */
.cnc-device-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-cnc-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cnc-device-board-summary {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.cnc-category-summary-panel {
  padding: 18px;
}

.cnc-category-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.cnc-category-summary article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--info);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.cnc-category-summary article > div,
.cnc-category-summary article > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cnc-category-summary article > span {
  justify-items: end;
}

.cnc-category-summary strong {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-category-summary article > span strong {
  color: var(--info);
  font-size: 22px;
}

.cnc-category-summary small,
.cnc-category-summary-empty {
  color: var(--muted);
  font-size: 12px;
}

.cnc-category-summary-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 20px;
  text-align: center;
}

.cnc-program-batch-picker {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.cnc-program-batch-picker summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 12px;
  color: var(--muted);
  cursor: pointer;
}

.cnc-program-batch-picker summary strong {
  color: var(--ink);
  font-size: 12px;
}

.cnc-program-batch-devices {
  display: grid;
  gap: 6px;
  max-height: 240px;
  padding: 8px;
  overflow: auto;
  border-top: 1px solid var(--line);
}

.cnc-batch-device {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

.cnc-batch-device:hover {
  border-color: var(--line-strong);
  background: rgba(91, 141, 239, 0.08);
}

.cnc-batch-device.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.cnc-batch-device input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--info);
}

.cnc-batch-device span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cnc-batch-device strong,
.cnc-batch-device small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-batch-device small {
  color: var(--muted);
  font-size: 11px;
}

.cnc-tool-page,
.cnc-diagnostics-page {
  display: grid;
  gap: 16px;
}

#cncDiagnosticsDevice {
  width: 190px;
  min-width: 190px;
  padding-right: 36px;
}

.cnc-diagnostics-toolbar .toolbar-controls {
  flex-wrap: nowrap;
}

.cnc-diagnostics-mode,
.cnc-diagnostics-tabs {
  display: inline-grid;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--input-bg);
}

.cnc-diagnostics-mode {
  min-height: 38px;
  grid-template-columns: repeat(2, minmax(76px, 1fr));
}

.cnc-diagnostics-mode button,
.cnc-diagnostics-tabs button {
  min-width: 0;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.cnc-diagnostics-mode button:last-child,
.cnc-diagnostics-tabs button:last-child { border-right: 0; }

.cnc-diagnostics-mode button:hover,
.cnc-diagnostics-mode button:focus-visible,
.cnc-diagnostics-tabs button:hover,
.cnc-diagnostics-tabs button:focus-visible {
  color: var(--ink);
  background: var(--surface-soft);
}

.cnc-diagnostics-mode button.is-active,
.cnc-diagnostics-tabs button.is-active {
  color: #fff;
  background: #2878d4;
}

.cnc-diagnostics-tabs {
  width: min(620px, 100%);
  min-height: 42px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-self: start;
}

.cnc-diagnostics-page [data-diagnostic-panel][hidden] { display: none; }

.cnc-diagnostics-page [data-diagnostic-panel="overview"] {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.cnc-io-diagnostic-panel,
.cnc-key-diagnostic-panel {
  min-width: 0;
  padding: 18px;
}

.cnc-io-diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.cnc-io-diagnostic-item {
  min-width: 0;
  min-height: 66px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-soft);
}

.cnc-io-diagnostic-led {
  width: 11px;
  height: 11px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface-solid);
  box-shadow: 0 0 0 3px rgba(120, 133, 151, 0.08);
}

.cnc-io-diagnostic-item.is-active .cnc-io-diagnostic-led {
  border-color: #0e7c58;
  background: #18a877;
  box-shadow: 0 0 0 3px rgba(24, 168, 119, 0.15);
}

.cnc-io-diagnostic-item > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.cnc-io-diagnostic-item strong,
.cnc-io-diagnostic-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-io-diagnostic-item strong { color: var(--ink); font-size: 12px; }
.cnc-io-diagnostic-item small { color: var(--muted); font-size: 10px; }
.cnc-io-diagnostic-item code { color: var(--info); font-size: 11px; }

.cnc-key-diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.cnc-key-diagnostic-legacy {
  margin: 12px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(217, 133, 8, 0.34);
  border-radius: 5px;
  color: #f0b75d;
  background: rgba(217, 133, 8, 0.09);
  font-size: 12px;
}

.cnc-key-diagnostic-grid.is-logical-layout {
  display: block;
  overflow-x: auto;
}

.cnc-key-logical-columns {
  min-width: 900px;
  display: grid;
  grid-template-columns: repeat(2, minmax(430px, 1fr));
  gap: 12px;
}

.cnc-key-logical-column {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.cnc-key-logical-group {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: repeat(2, 30px);
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  background: var(--surface-soft);
}

.cnc-key-logical-group > b {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-solid);
  font: 700 11px/1 Consolas, monospace;
}

.cnc-key-logical-definitions,
.cnc-key-logical-states {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.cnc-key-logical-definitions {
  border-bottom: 1px solid var(--line);
}

.cnc-key-logical-definitions span,
.cnc-key-logical-states span {
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 0 2px;
  border-right: 1px solid var(--line);
  overflow: hidden;
  color: var(--ink);
  font-size: 10px;
  text-align: center;
  white-space: nowrap;
}

.cnc-key-logical-definitions span:last-child,
.cnc-key-logical-states span:last-child { border-right: 0; }

.cnc-key-logical-states span {
  color: var(--muted);
  font: 700 11px/1 Consolas, monospace;
}

.cnc-key-logical-states span.is-active {
  color: #fff;
  background: #c9363f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.cnc-key-diagnostic-item {
  min-height: 54px;
  display: grid;
  place-items: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  background: var(--surface-soft);
}

.cnc-key-diagnostic-item strong { color: var(--ink); font: 700 12px/1 Consolas, monospace; }
.cnc-key-diagnostic-item small { font-size: 9px; }

.cnc-key-diagnostic-item.is-active {
  border-color: rgba(40, 120, 212, 0.55);
  color: #dbeafe;
  background: #245f9f;
  box-shadow: 0 0 0 2px rgba(40, 120, 212, 0.12);
}

.cnc-key-diagnostic-item.is-active strong { color: #fff; }

.cnc-control-page[hidden] { display: none; }

.cnc-control-toolbar .toolbar-controls {
  flex-wrap: wrap;
}

#cncControlDevice {
  width: min(290px, 100%);
  min-width: 230px;
}

.cnc-control-statusbar {
  min-height: 62px;
  padding: 11px 14px;
  display: grid;
  grid-template-columns: minmax(280px, 1.6fr) repeat(3, minmax(130px, 0.7fr));
  gap: 10px;
  align-items: stretch;
}

.cnc-control-statusbar > div {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  gap: 3px 8px;
  padding: 5px 10px;
  border-right: 1px solid var(--line);
}

.cnc-control-statusbar > div:last-child { border-right: 0; }
.cnc-control-statusbar span { color: var(--muted); font-size: 10px; }
.cnc-control-statusbar strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cnc-control-statusbar > div:first-child strong { font-size: 13px; }
.cnc-control-statusbar > div:first-child span { grid-column: 2; }

#cncControlStatusLight {
  grid-row: 1 / 3;
  width: 11px;
  height: 11px;
  align-self: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: #7f8a98;
  box-shadow: 0 0 0 4px rgba(127, 138, 152, 0.1);
}

#cncControlStatusLight.is-ready { border-color: #0e7c58; background: #18a877; box-shadow: 0 0 0 4px rgba(24, 168, 119, 0.13); }
#cncControlStatusLight.is-busy { border-color: #b96c00; background: #e59a22; box-shadow: 0 0 0 4px rgba(229, 154, 34, 0.13); }
#cncControlStatusLight.is-error { border-color: #a8242d; background: #d33d46; box-shadow: 0 0 0 4px rgba(211, 61, 70, 0.13); }

.cnc-control-stage-scroll {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  overscroll-behavior-inline: contain;
  padding-bottom: 6px;
}

.cnc-control-stage-fit {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 700px;
}

.cnc-control-console {
  --cnc-control-key-height: 48px;
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  min-width: 1180px;
  min-height: 760px;
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(500px, 1.32fr) minmax(140px, 0.34fr) minmax(400px, 1fr);
  grid-template-rows: auto auto;
  gap: 14px;
  border: 1px solid rgba(159, 176, 196, 0.18);
  border-radius: 7px;
  color: #e7ecf2;
  background: #171c23;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 12px 30px rgba(6, 10, 15, 0.18);
  transform-origin: left top;
}

.cnc-control-console > section {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(216, 226, 238, 0.11);
  border-radius: 6px;
  background: #20262f;
}

.cnc-control-console section > header {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  color: #dfe5ec;
}

.cnc-control-console section > header strong { font-size: 13px; }
.cnc-control-console section > header small { color: #8995a5; font-size: 10px; }

.cnc-control-screen-tools {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.cnc-control-screen-mode {
  height: 24px;
  padding: 2px;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(42px, 1fr));
  gap: 2px;
  border: 1px solid #46515e;
  border-radius: 4px;
  background: #171d24;
}

.cnc-control-screen-mode button {
  min-width: 0;
  padding: 0 7px;
  border: 0;
  border-radius: 2px;
  color: #8995a5;
  background: transparent;
  cursor: pointer;
  font: 600 9px/1 "Microsoft YaHei", sans-serif;
}

.cnc-control-screen-mode button.is-active {
  color: #101820;
  background: #a0c814;
}

.cnc-control-screen-mode button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.cnc-control-screen-bay {
  grid-column: 1;
  display: grid;
  grid-template-rows: auto auto 45px;
}

.cnc-control-screen-row {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  align-items: stretch;
  gap: 8px;
}

.cnc-control-screen-shell {
  position: relative;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 5px solid #0d1117;
  background: #080b0f;
  box-shadow: inset 0 0 0 1px rgba(226, 235, 245, 0.14);
}

#cncControlCanvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #080b0f;
  image-rendering: auto;
}

.cnc-control-screen-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: #697586;
  background: #0b0f14;
}

.cnc-control-screen-placeholder[hidden] { display: none; }
.cnc-control-screen-placeholder svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.cnc-control-screen-placeholder strong { font-size: 12px; }

.cnc-control-frame-loading {
  position: absolute;
  right: 10px;
  bottom: 9px;
  left: 10px;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border: 1px solid rgba(201, 216, 232, 0.22);
  border-radius: 3px;
  color: #eef3f7;
  background: rgba(10, 15, 21, 0.84);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.cnc-control-frame-loading[hidden] { display: none; }

.cnc-control-frame-loading > div {
  height: 5px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
}

.cnc-control-frame-loading i {
  display: block;
  width: 0;
  height: 100%;
  background: #78aeea;
  transition: width 100ms linear;
}

.cnc-control-frame-loading span {
  min-width: 92px;
  font-size: 9px;
  text-align: right;
  white-space: nowrap;
}

.cnc-control-softkeys {
  display: grid;
  gap: 5px;
}

.cnc-control-softkeys-side { grid-template-rows: repeat(8, minmax(0, 1fr)); }
.cnc-control-softkeys-bottom { grid-template-columns: repeat(8, minmax(0, 1fr)); margin-top: 8px; }

.cnc-control-softkeys button {
  min-width: 0;
  border: 1px solid #4d5662;
  border-radius: 3px;
  color: #788392;
  background: #2c333d;
  cursor: pointer;
  font: 700 9px/1 Consolas, monospace;
  touch-action: none;
  user-select: none;
}

.cnc-control-softkeys button:disabled { opacity: 0.52; cursor: not-allowed; }

.cnc-control-softkeys button.is-pressed {
  transform: translateY(1px);
  border-color: #ab232d;
  color: #fff;
  background: #ca343e;
  box-shadow: inset 0 2px 4px rgba(73, 4, 9, 0.35);
}

.cnc-control-page-bay {
  grid-column: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.cnc-control-page-keys {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 9px 7px;
}

.cnc-control-page-keys .cnc-control-key {
  width: 100%;
  height: 100%;
  min-height: 66px;
  display: grid;
  place-content: center;
  gap: 7px;
  background: #d5d9dc;
}

.cnc-control-page-keys .cnc-control-key strong {
  color: inherit;
  font-size: 13px;
}

.cnc-control-page-keys .cnc-control-key small {
  color: #56616b;
  font: 700 10px/1 Consolas, monospace;
}

.cnc-control-page-keys .cnc-control-key.is-pressed small { color: #fff; }

.cnc-control-editor-bay {
  grid-column: 3;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.cnc-control-key-stack {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.cnc-control-key-row {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(var(--cnc-key-columns, 7), minmax(0, 1fr));
  gap: 7px;
}

.cnc-control-key {
  min-width: 0;
  height: var(--cnc-control-key-height);
  padding: 3px 4px;
  border: 1px solid #697380;
  border-bottom-color: #303740;
  border-radius: 5px;
  overflow: hidden;
  color: #17202a;
  background: #cbd1d5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 0 #10151a;
  cursor: pointer;
  font: 700 11px/1.1 "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
  touch-action: none;
  user-select: none;
}

.cnc-control-key:hover:not(:disabled),
.cnc-control-key:focus-visible:not(:disabled) {
  border-color: #9fbd31;
  outline: 2px solid rgba(159, 200, 20, 0.28);
  outline-offset: 1px;
}

.cnc-control-key:disabled {
  color: #727b84;
  background: #9aa1a7;
  cursor: not-allowed;
  opacity: 0.54;
}

.cnc-control-key.is-pressed {
  transform: translateY(2px);
  border-color: #ab232d;
  color: #fff;
  background: #ca343e;
  box-shadow: inset 0 2px 5px rgba(73, 4, 9, 0.35);
}

.cnc-control-key.is-mode { background: #b8c0c5; }
.cnc-control-key.is-function { color: #27321b; background: #bbc88d; }
.cnc-control-key.is-danger { color: #fff; background: #9c3a42; border-color: #bd5961; }
.cnc-control-key.is-stop { color: #fff; background: #b23840; border-color: #d35b63; }
.cnc-control-key.is-start { color: #102815; background: #63b96c; border-color: #83d18b; }
.cnc-control-key.is-hold { color: #30210a; background: #d7a94c; border-color: #ecc66f; }

.cnc-control-editor-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(190px, 1fr);
  gap: 10px;
  margin-top: 9px;
}

.cnc-control-navigation-keys .cnc-control-key-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cnc-control-mode-bay,
.cnc-control-motion-bay { align-self: stretch; }

.cnc-control-mode-bay { grid-column: 1; }
.cnc-control-motion-bay { grid-column: 2 / 4; }

.cnc-control-mode-bay .cnc-control-key-stack + .cnc-control-key-stack { margin-top: 8px; }

.cnc-control-motion-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(210px, 1fr);
  gap: 10px;
}

.cnc-control-axis-stack .cnc-control-key-row { --cnc-key-columns: 6; }
.cnc-control-override-stack .cnc-control-key-row { --cnc-key-columns: 4; }

html[data-theme="light"] .cnc-control-console {
  color: #1b2932;
  border-color: rgba(37, 58, 70, 0.22);
  background: #d8dfe3;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 10px 24px rgba(39, 59, 70, 0.12);
}

html[data-theme="light"] .cnc-control-console > section {
  border-color: rgba(37, 58, 70, 0.2);
  background: #edf1f3;
}

html[data-theme="light"] .cnc-control-console section > header { color: #253640; }
html[data-theme="light"] .cnc-control-console section > header small { color: #657783; }
html[data-theme="light"] .cnc-control-screen-mode { border-color: #a7b1b8; background: #d3dade; }
html[data-theme="light"] .cnc-control-screen-mode button { color: #60717c; }
html[data-theme="light"] .cnc-control-screen-mode button.is-active { color: #15200d; background: #a0c814; }
html[data-theme="light"] .cnc-control-frame-loading { color: #1f303a; border-color: rgba(37, 58, 70, 0.2); background: rgba(244, 247, 248, 0.9); }
html[data-theme="light"] .cnc-control-frame-loading > div { background: rgba(37, 58, 70, 0.16); }
html[data-theme="light"] .cnc-control-softkeys button { border-color: #9ca8b0; color: #687780; background: #cdd4d8; }
html[data-theme="light"] .cnc-control-key { border-color: #89949b; border-bottom-color: #69747b; color: #17242c; background: #f0f2f2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 0 #7b858b; }
html[data-theme="light"] .cnc-control-page-keys .cnc-control-key small { color: #566873; }
html[data-theme="light"] .cnc-control-key.is-mode { background: #dce2e4; }
html[data-theme="light"] .cnc-control-key.is-function { background: #d8e0bc; }
html[data-theme="light"] .cnc-control-key.is-danger { color: #fff; background: #a63a43; }
html[data-theme="light"] .cnc-control-key.is-stop { color: #fff; background: #bc3942; }
html[data-theme="light"] .cnc-control-key.is-start { color: #102815; background: #73c57c; }
html[data-theme="light"] .cnc-control-key.is-hold { color: #30210a; background: #e0b45b; }

.cnc-tool-page[hidden],
.cnc-diagnostics-page[hidden] {
  display: none;
}

.cnc-remote-update-page[hidden] { display: none; }

.cnc-update-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.cnc-update-metrics > div {
  min-height: 92px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.cnc-update-metrics span,
.cnc-update-metrics small { color: var(--muted); }
.cnc-update-metrics strong { margin: 8px 6px 0 0; font-size: 28px; }

.cnc-update-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
}

.cnc-update-actions > div { display: flex; gap: 10px; margin-left: auto; }
.cnc-update-actions > span { color: var(--muted); }
.cnc-update-select-all { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; }
.cnc-update-select-all input,
.cnc-update-row-select { width: 17px; height: 17px; accent-color: var(--accent); }
.cnc-update-check-column { width: 44px; }
.cnc-update-device strong,
.cnc-update-device small { display: block; }
.cnc-update-device small,
.cnc-update-notes { color: var(--muted); }
.cnc-update-notes { max-width: 260px; white-space: pre-line; }
.cnc-update-state { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cnc-update-error { margin: 8px 0 0; max-width: 360px; min-width: 220px; white-space: normal; overflow-wrap: anywhere; color: var(--danger); font-size: 13px; line-height: 1.5; }
.cnc-update-retry-button { width: 28px; height: 28px; min-height: 28px; padding: 0; }
.cnc-update-retry-button svg { width: 13px; height: 13px; }
.cnc-update-progress { min-width: 150px; }
.cnc-update-progress progress {
  display: block;
  width: 100%;
  height: 9px;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(116, 137, 164, 0.42);
  border-radius: 3px;
  background-color: #111927;
  accent-color: #2f80ed;
  box-shadow: inset 0 1px 2px rgba(2, 8, 18, 0.5);
}
.cnc-update-progress progress::-webkit-progress-bar {
  background-color: #111927;
}
.cnc-update-progress progress::-webkit-progress-value {
  background-color: #2f80ed;
  box-shadow: 0 0 8px rgba(47, 128, 237, 0.4);
  transition: inline-size 180ms ease, background-color 180ms ease;
}
.cnc-update-progress progress::-moz-progress-bar {
  background-color: #2f80ed;
  box-shadow: 0 0 8px rgba(47, 128, 237, 0.4);
  transition: inline-size 180ms ease, background-color 180ms ease;
}
.cnc-update-progress.is-waiting progress { accent-color: #d99a2b; }
.cnc-update-progress.is-complete progress { accent-color: #22a06b; }
.cnc-update-progress.is-error progress { accent-color: var(--danger); }
.cnc-update-progress.is-waiting progress::-webkit-progress-value { background-color: #d99a2b; }
.cnc-update-progress.is-waiting progress::-moz-progress-bar { background-color: #d99a2b; }
.cnc-update-progress.is-complete progress::-webkit-progress-value { background-color: #22a06b; }
.cnc-update-progress.is-complete progress::-moz-progress-bar { background-color: #22a06b; }
.cnc-update-progress.is-error progress::-webkit-progress-value { background-color: var(--danger); }
.cnc-update-progress.is-error progress::-moz-progress-bar { background-color: var(--danger); }
.cnc-update-progress small { display: block; margin-top: 5px; color: var(--muted); }

html[data-theme="light"] .cnc-update-progress progress {
  border-color: #b7c5d5;
  background-color: #dce5ef;
  box-shadow: inset 0 1px 2px rgba(61, 79, 101, 0.16);
}
html[data-theme="light"] .cnc-update-progress progress::-webkit-progress-bar {
  border-color: #b7c5d5;
  background-color: #dce5ef;
  box-shadow: inset 0 1px 2px rgba(61, 79, 101, 0.16);
}

@media (max-width: 900px) {
  .cnc-update-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cnc-update-actions { align-items: stretch; flex-direction: column; }
  .cnc-update-actions > div { margin-left: 0; flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .cnc-update-metrics { grid-template-columns: 1fr; }
  .cnc-update-actions > div .button { flex: 1 1 100%; }
}

.cnc-tool-metrics,
.cnc-diagnostics-live {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.cnc-tool-metrics > div,
.cnc-diagnostics-live > div {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 92px;
  padding: 15px 17px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.cnc-tool-metrics > div::before,
.cnc-diagnostics-live > div::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--info);
  content: "";
}

.cnc-tool-metrics .is-warning::before {
  background: var(--warning);
}

.cnc-tool-metrics span,
.cnc-diagnostics-live span,
.cnc-diagnostics-live small {
  color: var(--muted);
  font-size: 12px;
}

.cnc-tool-metrics strong,
.cnc-diagnostics-live strong {
  margin-top: 5px;
  color: var(--ink);
  font-size: 25px;
  line-height: 1.1;
}

.cnc-diagnostics-live {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.cnc-diagnostics-live > div {
  min-height: 86px;
}

.cnc-diagnostics-live small {
  position: absolute;
  right: 14px;
  bottom: 13px;
}

.cnc-tool-filterbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 260px) minmax(180px, 240px);
  gap: 10px;
  padding: 13px;
}

.cnc-tool-filterbar select {
  min-width: 0;
}

.cnc-tool-row.is-due {
  background: rgba(239, 68, 68, 0.045);
}

.cnc-tool-life {
  display: inline-flex;
  min-width: 66px;
  justify-content: center;
  padding: 5px 8px;
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.08);
}

.cnc-tool-life.is-due {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.34);
  background: rgba(239, 68, 68, 0.09);
}

.dialog-overlay {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 7, 12, 0.72);
  backdrop-filter: blur(5px);
}

.dialog-overlay[hidden] {
  display: none;
}

.dialog-card {
  width: min(760px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.cnc-tool-dialog-card .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.cnc-tool-dialog-card .field-full {
  grid-column: 1 / -1;
}

.cnc-tool-copy-field {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.cnc-tool-copy-field legend,
.cnc-tool-copy-empty {
  color: var(--muted);
  font-size: 12px;
}

.cnc-diagnostics-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(460px, 1.4fr);
  gap: 16px;
}

.cnc-predictive-panel,
.cnc-trajectory-panel,
.cnc-alarm-log-panel {
  min-width: 0;
  padding: 18px;
}

.cnc-predictive-cards {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.cnc-risk-card {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.cnc-risk-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cnc-risk-card span {
  color: var(--muted);
  font-size: 12px;
}

.cnc-risk-card strong {
  color: var(--success);
  font-size: 13px;
}

.cnc-risk-card.is-medium strong { color: var(--warning); }
.cnc-risk-card.is-high strong { color: var(--danger); }
.cnc-risk-card.no-sensor strong { color: var(--muted); }

.cnc-risk-card > i {
  display: block;
  height: 5px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--line-strong);
}

.cnc-risk-card > small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.cnc-risk-card > i b {
  display: block;
  height: 100%;
  background: var(--success);
}

.cnc-risk-card.is-medium > i b { background: var(--warning); }
.cnc-risk-card.is-high > i b { background: var(--danger); }

.cnc-predictive-note {
  margin: 12px 0 0;
}

.cnc-predictive-panel > p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.cnc-trajectory-panel canvas {
  display: block;
  width: 100%;
  height: 320px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.cnc-alarm-log-panel .table-scroll {
  margin-top: 12px;
}

.cnc-board-font-control {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #9DA9BA;
  font-size: 12px;
}

.cnc-board-font-control input {
  width: 92px;
  accent-color: #5B8DEF;
}

.cnc-device-board {
  --cnc-board-font-size: 18px;
  --cnc-board-summary-columns: 8;
}

.cnc-device-board-summary {
  grid-template-columns: repeat(var(--cnc-board-summary-columns), minmax(0, 1fr));
}

.cnc-device-board-summary > div[hidden] {
  display: none;
}

.cnc-device-board-summary span,
.cnc-device-board-summary small {
  font-size: clamp(10px, calc(var(--cnc-board-font-size) * 0.66), 26px);
}

.cnc-device-board-summary strong {
  font-size: clamp(20px, calc(var(--cnc-board-font-size) * 1.65), 60px);
}

#cncDeviceBoardAlarm {
  color: #EF4444;
}

.cnc-board-device h3 {
  font-size: clamp(16px, calc(var(--cnc-board-font-size) * 1.05), 42px);
}

.cnc-board-device-metrics strong {
  font-size: clamp(15px, var(--cnc-board-font-size), 44px);
}

.cnc-board-device-metrics span,
.cnc-board-device-metrics small,
.cnc-board-mode,
.cnc-board-category,
.cnc-board-device code,
.cnc-board-device > footer,
.cnc-board-device > footer time {
  font-size: clamp(9px, calc(var(--cnc-board-font-size) * 0.62), 25px);
}

.cnc-board-device .cnc-state-pill {
  font-size: clamp(10px, calc(var(--cnc-board-font-size) * 0.64), 25px);
}

.cnc-board-device-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cnc-device-board-grid {
  /* Keep cards inside the stage when the board is zoomed. The previous 600px
     minimum made a 3-card row wider than the viewport and clipped its edges. */
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
}

.cnc-device-board-settings {
  position: absolute;
  z-index: 4;
  top: 76px;
  right: 28px;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 100px);
  padding: 16px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  color: #F5F7FA;
  background: #171B24;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}

.cnc-device-board-settings[hidden] {
  display: none;
}

.cnc-device-board-settings > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.cnc-device-board-settings > div > button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  color: #C9CFD8;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
}

.cnc-device-board-settings fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.cnc-device-board-settings legend {
  padding: 0 6px;
  color: #8B95A8;
  font-size: 11px;
}

.cnc-device-board-settings label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  color: #C9CFD8;
  font-size: 12px;
}

.cnc-device-board-settings input {
  width: 16px;
  height: 16px;
  accent-color: #A0C814;
}

.cnc-alarm-content {
  min-width: 320px;
  white-space: normal;
}

html[data-theme="light"] .cnc-category-summary article,
html[data-theme="light"] .cnc-program-batch-picker,
html[data-theme="light"] .cnc-risk-card,
html[data-theme="light"] .cnc-trajectory-panel canvas {
  background: #E9EEF0;
}

html[data-theme="light"] .dialog-overlay {
  background: rgba(27, 38, 44, 0.42);
}

/* Keep the CNC status board readable as an operational light-theme display. */
html[data-theme="light"] .cnc-device-board {
  color: #1B2932;
  background: #E7ECEF;
}

html[data-theme="light"] .cnc-device-board-header,
html[data-theme="light"] .cnc-device-board-footer {
  border-color: rgba(37, 58, 70, 0.16);
}

html[data-theme="light"] .cnc-device-board-brand h2,
html[data-theme="light"] .cnc-device-board-sync strong,
html[data-theme="light"] .cnc-device-board-clock strong {
  color: #17252E;
}

html[data-theme="light"] .cnc-device-board-sync small,
html[data-theme="light"] .cnc-device-board-clock small,
html[data-theme="light"] .cnc-device-board-footer {
  color: #60727E;
}

html[data-theme="light"] .cnc-device-board-summary > div {
  color: #1B2932;
  background: #F6F8F9;
  border-color: rgba(126, 158, 18, 0.72);
  box-shadow: 0 3px 10px rgba(39, 59, 70, 0.10);
}

html[data-theme="light"] .cnc-device-board-summary span,
html[data-theme="light"] .cnc-device-board-summary small {
  color: #60727E;
}

html[data-theme="light"] .cnc-device-board-summary strong {
  color: #17252E;
}

html[data-theme="light"] .cnc-board-device {
  color: #1B2932;
  background: #F8FAFA;
  border-color: rgba(37, 58, 70, 0.16);
  border-top-color: #70808A;
  box-shadow: 0 7px 20px rgba(39, 59, 70, 0.12);
}

html[data-theme="light"] .cnc-board-device.cnc-board-state-running {
  background: #F3F9F6;
  border-top-color: #0B9E70;
}

html[data-theme="light"] .cnc-board-device.cnc-board-state-idle {
  background: #F3F7FC;
  border-top-color: #3978D5;
}

html[data-theme="light"] .cnc-board-device.cnc-board-state-paused {
  background: #FCF7ED;
  border-top-color: #D98508;
}

html[data-theme="light"] .cnc-board-device.cnc-board-state-alarm {
  background: #FFF5F5;
  border-color: rgba(216, 47, 55, 0.28);
  border-top-color: #D82F37;
}

html[data-theme="light"] .cnc-board-device h3,
html[data-theme="light"] .cnc-board-device-metrics strong {
  color: #17252E;
}

html[data-theme="light"] .cnc-board-device code,
html[data-theme="light"] .cnc-board-mode,
html[data-theme="light"] .cnc-board-device > footer,
html[data-theme="light"] .cnc-board-device > footer time {
  color: #526975;
}

html[data-theme="light"] .cnc-board-category {
  color: #69830E;
}

html[data-theme="light"] .cnc-board-device-metrics > div {
  background: rgba(248, 250, 251, 0.88);
  border-color: rgba(37, 58, 70, 0.13);
}

html[data-theme="light"] .cnc-board-device-metrics span,
html[data-theme="light"] .cnc-board-device-metrics small {
  color: #60727E;
}

html[data-theme="light"] .cnc-board-device > footer {
  border-color: rgba(37, 58, 70, 0.13);
}

html[data-theme="light"] .cnc-board-device.cnc-board-state-alarm .cnc-board-alarm {
  color: #D82F37;
}

html[data-theme="light"] .cnc-device-board-icon-button {
  color: #526975;
  background: #F6F8F9;
  border-color: rgba(37, 58, 70, 0.18);
}

html[data-theme="light"] .cnc-device-board-icon-button:hover,
html[data-theme="light"] .cnc-device-board-icon-button:focus-visible {
  color: #536A08;
  background: #EEF3F4;
  border-color: rgba(126, 158, 18, 0.52);
}

html[data-theme="light"] .cnc-board-font-control {
  color: #60727E;
}

html[data-theme="light"] .cnc-device-board-settings {
  color: #1B2932;
  background: #F6F8F9;
  border-color: rgba(37, 58, 70, 0.18);
  box-shadow: 0 16px 42px rgba(39, 59, 70, 0.20);
}

html[data-theme="light"] .cnc-device-board-settings > div > button,
html[data-theme="light"] .cnc-device-board-settings label {
  color: #344B57;
}

html[data-theme="light"] .cnc-device-board-settings fieldset {
  border-color: rgba(37, 58, 70, 0.14);
}

html[data-theme="light"] .cnc-device-board-settings legend {
  color: #60727E;
}

@media (max-width: 1180px) {
  .cnc-device-metrics,
  .cnc-device-board-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dashboard-cnc-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cnc-diagnostics-live { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cnc-diagnostics-grid { grid-template-columns: 1fr; }
  .cnc-tool-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cnc-board-device-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cnc-control-statusbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cnc-control-statusbar > div:nth-child(2) { border-right: 0; }
}

@media (max-width: 680px) {
  .cnc-device-metrics,
  .cnc-device-board-summary,
  .dashboard-cnc-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cnc-tool-filterbar,
  .cnc-diagnostics-live,
  .cnc-tool-dialog-card .form-grid {
    grid-template-columns: 1fr;
  }
  .cnc-tool-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cnc-diagnostics-grid { grid-template-columns: minmax(0, 1fr); }
  .cnc-diagnostics-page .toolbar-controls {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  #cncDiagnosticsDevice {
    width: 100%;
    min-width: 0;
  }
  .cnc-diagnostics-mode { grid-column: 1 / -1; }
  .cnc-diagnostics-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cnc-diagnostics-tabs button:nth-child(2) { border-right: 0; }
  .cnc-diagnostics-tabs button:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .cnc-io-diagnostic-grid { grid-template-columns: minmax(0, 1fr); }
  .cnc-key-logical-columns {
    min-width: 430px;
    grid-template-columns: minmax(430px, 1fr);
  }
  .cnc-control-toolbar .toolbar-controls {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(2, auto);
  }
  #cncControlDevice { width: 100%; min-width: 0; }
  .cnc-control-stage-scroll { overflow-x: auto; }
  .cnc-control-statusbar { grid-template-columns: minmax(0, 1fr); }
  .cnc-control-statusbar > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .cnc-control-statusbar > div:last-child { border-bottom: 0; }
  .cnc-trajectory-panel canvas { height: 250px; }
  .cnc-board-font-control span { display: none; }
  .cnc-board-font-control input { width: 64px; }
}

/* CNC ladder engineering workspace */
.cnc-ladder-page {
  --cnc-ladder-cell-width: 112px;
  --cnc-ladder-grid-width: 896px;
  --cnc-ladder-row-height: 58px;
  --cnc-ladder-font-size: 12px;
  --cnc-ladder-line-width: 58px;
  --cnc-ladder-comment-width: 230px;
  --cnc-ladder-canvas: #10141C;
  --cnc-ladder-rail: #AEB7C4;
  --cnc-ladder-address: #63D7FF;
  --cnc-ladder-note: #F281D3;
  --cnc-ladder-workbench-height: clamp(700px, calc(100vh - 190px), 1180px);
  --cnc-ladder-tree-width: clamp(360px, 20vw, 400px);
  min-width: 0;
  display: grid;
  gap: 10px;
}

.cnc-ladder-page[hidden],
.cnc-ladder-operation[hidden],
.cnc-ladder-validation[hidden] {
  display: none;
}

.cnc-ladder-commandbar {
  min-width: 0;
  padding: 8px 10px;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.cnc-ladder-file-actions,
.cnc-ladder-edit-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cnc-ladder-edit-actions {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.cnc-ladder-commandbar .button {
  min-height: 34px;
  padding: 0 11px;
  flex: 0 0 auto;
  font-size: 12px;
}

.cnc-ladder-commandbar .button svg,
.cnc-ladder-selection-actions button svg {
  width: 15px;
  height: 15px;
}

.cnc-ladder-commandbar .icon-button {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

.cnc-ladder-device-field {
  min-width: 270px;
  height: 34px;
  padding-left: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--input-bg);
}

.cnc-ladder-device-field > span,
.cnc-ladder-search-field > span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
}

.cnc-ladder-device-field select {
  min-width: 160px;
  height: 32px;
  padding: 0 28px 0 0;
  flex: 1 1 auto;
  border: 0;
  color: var(--ink);
  background: transparent;
}

html:not([data-theme="light"]) .cnc-ladder-device-field,
html:not([data-theme="light"]) #cncLadderDevice {
  color-scheme: dark;
}

html:not([data-theme="light"]) #cncLadderDevice {
  color: #F0F2F5;
  background-color: #0C0E12;
}

html:not([data-theme="light"]) #cncLadderDevice option {
  color: #F0F2F5;
  background-color: #171B24;
}

html[data-theme="light"] .cnc-ladder-device-field,
html[data-theme="light"] #cncLadderDevice {
  color-scheme: light;
}

html[data-theme="light"] #cncLadderDevice {
  color: var(--ink);
  background-color: var(--input-bg);
}

html[data-theme="light"] #cncLadderDevice option {
  color: #1F2937;
  background-color: #FFFFFF;
}

.cnc-ladder-device-field select:focus {
  outline: 0;
}

.cnc-ladder-note-source {
  margin: 0 0 8px;
  padding: 7px 9px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-soft);
  font-size: 10px;
  line-height: 1.45;
}

.cnc-ladder-note-source.is-missing {
  color: #FBBF24;
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.08);
}

html[data-theme="light"] .cnc-ladder-note-source.is-missing {
  color: #92400E;
  border-color: rgba(180, 83, 9, 0.24);
  background: #FFF7ED;
}

.cnc-ladder-history-controls,
.cnc-ladder-search-controls,
.cnc-ladder-zoom-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cnc-ladder-zoom-controls {
  margin-left: auto;
}

.cnc-ladder-search-field {
  min-width: 260px;
  height: 34px;
  padding: 0 8px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--input-bg);
}

.cnc-ladder-search-field input {
  min-width: 100px;
  height: 30px;
  padding: 0;
  flex: 1 1 auto;
  border: 0;
  background: transparent;
}

.cnc-ladder-search-field input:focus {
  outline: 0;
}

.cnc-ladder-search-field output,
.cnc-ladder-zoom-controls output {
  min-width: 45px;
  color: var(--muted);
  font: 10px/1.2 "Cascadia Mono", Consolas, monospace;
  text-align: center;
}

.cnc-ladder-operation {
  padding: 8px 12px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 2fr) minmax(180px, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(91, 141, 239, 0.28);
  border-radius: 5px;
  background: rgba(91, 141, 239, 0.08);
}

.cnc-ladder-operation > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cnc-ladder-operation strong {
  color: var(--ink);
  font-size: 12px;
}

.cnc-ladder-operation span,
.cnc-ladder-operation small {
  color: var(--muted);
  font-size: 10px;
}

.cnc-ladder-operation-track {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
}

.cnc-ladder-operation-track i {
  width: 0;
  height: 100%;
  display: block;
  background: var(--info);
  transition: width 160ms ease;
}

.cnc-ladder-operation.is-complete {
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(16, 185, 129, 0.08);
}

.cnc-ladder-operation.is-complete .cnc-ladder-operation-track i {
  background: var(--success);
}

.cnc-ladder-operation.is-error {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.08);
}

.cnc-ladder-operation.is-error .cnc-ladder-operation-track i {
  background: var(--danger);
}

.cnc-ladder-projectbar {
  min-width: 0;
  min-height: 56px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-soft);
}

.cnc-ladder-project-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cnc-ladder-project-identity > i {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 4px rgba(139, 149, 168, 0.1);
}

.cnc-ladder-project-identity > i.is-dirty {
  background: var(--warning);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12);
}

.cnc-ladder-project-identity > i.is-saved {
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

.cnc-ladder-project-identity > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cnc-ladder-project-identity strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-ladder-project-identity span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-ladder-project-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(64px, auto));
  align-items: center;
}

.cnc-ladder-project-facts > div {
  min-width: 64px;
  padding: 0 12px;
  display: grid;
  gap: 2px;
  border-left: 1px solid var(--line);
}

.cnc-ladder-project-facts dt {
  color: var(--muted);
  font-size: 9px;
}

.cnc-ladder-project-facts dd {
  margin: 0;
  max-width: 130px;
  overflow: hidden;
  color: var(--ink);
  font: 10px/1.35 "Cascadia Mono", Consolas, "Microsoft YaHei UI", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-ladder-validation {
  padding: 9px 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: 5px;
  background: rgba(245, 158, 11, 0.08);
}

.cnc-ladder-validation > svg {
  width: 18px;
  height: 18px;
  color: var(--warning);
}

.cnc-ladder-validation > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.cnc-ladder-validation strong {
  color: var(--ink);
  font-size: 11px;
}

.cnc-ladder-validation ul {
  margin: 0;
  padding-left: 17px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.cnc-ladder-validation.is-success {
  border-color: rgba(16, 185, 129, 0.32);
  background: rgba(16, 185, 129, 0.08);
}

.cnc-ladder-validation.is-success > svg {
  color: var(--success);
}

.cnc-ladder-validation.is-error {
  border-color: rgba(239, 68, 68, 0.32);
  background: rgba(239, 68, 68, 0.08);
}

.cnc-ladder-validation.is-error > svg {
  color: var(--danger);
}

.cnc-ladder-workbench {
  min-width: 0;
  height: var(--cnc-ladder-workbench-height);
  display: grid;
  grid-template-columns: var(--cnc-ladder-tree-width) 10px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 18px;
  grid-template-areas:
    "tree column-resize editor"
    "height-resize height-resize height-resize";
  gap: 0;
}

.cnc-ladder-column-resize-handle,
.cnc-ladder-height-resize-handle {
  position: relative;
  z-index: 3;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  touch-action: none;
  user-select: none;
}

.cnc-ladder-column-resize-handle {
  grid-area: column-resize;
  cursor: ew-resize;
}

.cnc-ladder-column-resize-handle span {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 4px;
  height: 48px;
  border-radius: 3px;
  background: var(--line-strong);
  transform: translateY(-50%);
}

.cnc-ladder-height-resize-handle {
  grid-area: height-resize;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  background: var(--surface-soft);
  cursor: ns-resize;
}

.cnc-ladder-height-resize-handle span {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 46px;
  height: 4px;
  border-radius: 3px;
  background: var(--line-strong);
  transform: translateX(-50%);
}

.cnc-ladder-column-resize-handle:hover span,
.cnc-ladder-column-resize-handle:focus-visible span,
.cnc-ladder-column-resize-handle.is-dragging span,
.cnc-ladder-height-resize-handle:hover span,
.cnc-ladder-height-resize-handle:focus-visible span,
.cnc-ladder-height-resize-handle.is-dragging span {
  background: var(--accent);
}

.cnc-ladder-column-resize-handle:focus-visible,
.cnc-ladder-height-resize-handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.cnc-ladder-height-resize-handle:hover,
.cnc-ladder-height-resize-handle.is-dragging {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-soft));
}

body.is-resizing-cnc-ladder-column {
  cursor: ew-resize;
  user-select: none;
}

body.is-resizing-cnc-ladder-height {
  cursor: ns-resize;
  user-select: none;
}

.cnc-ladder-tree-panel,
.cnc-ladder-editor-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.cnc-ladder-tree-panel {
  grid-area: tree;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.cnc-ladder-pane-heading {
  min-height: 52px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.cnc-ladder-pane-heading > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cnc-ladder-pane-heading strong {
  color: var(--ink);
  font-size: 12px;
}

.cnc-ladder-pane-heading small {
  color: var(--muted);
  font-size: 10px;
}

.cnc-ladder-tree-modes {
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  border-bottom: 1px solid var(--line);
}

.cnc-ladder-tree-modes button:last-child {
  grid-column: 1 / -1;
}

.cnc-ladder-tree-modes button,
.cnc-ladder-tree-content button {
  width: 100%;
  min-height: 31px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cnc-ladder-tree-modes button:hover,
.cnc-ladder-tree-content button:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
}

.cnc-ladder-tree-modes button.is-active {
  color: var(--ink);
  border-color: rgba(160, 200, 20, 0.28);
  background: rgba(160, 200, 20, 0.09);
}

.cnc-ladder-tree-modes button span {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-ladder-tree-modes button b {
  min-width: 22px;
  color: var(--muted);
  font: 9px/1.3 "Cascadia Mono", Consolas, monospace;
  text-align: right;
}

.cnc-ladder-tree-content {
  min-height: 0;
  padding: 6px;
  flex: 1 1 auto;
  overflow: auto;
  scrollbar-width: thin;
}

.cnc-ladder-tree-content button {
  align-items: flex-start;
}

.cnc-ladder-tree-content button > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cnc-ladder-tree-content button strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font: 10px/1.3 "Cascadia Mono", Consolas, "Microsoft YaHei UI", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-ladder-tree-content button small,
.cnc-ladder-tree-empty {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.cnc-ladder-tree-content button > b {
  color: var(--cnc-ladder-address);
  font: 9px/1.4 "Cascadia Mono", Consolas, monospace;
}

.cnc-ladder-tree-empty {
  padding: 12px 8px;
  text-align: center;
}

.cnc-ladder-tree-pagination {
  min-height: 38px;
  margin: 6px -1px -1px;
  padding: 5px 6px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  position: sticky;
  bottom: -6px;
  z-index: 4;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.cnc-ladder-tree-content .cnc-ladder-tree-pagination button {
  width: 100%;
  min-height: 27px;
  padding: 0 7px;
  justify-content: center;
  border-color: var(--line);
  background: var(--surface-soft);
  font-size: 9px;
  text-align: center;
}

.cnc-ladder-tree-content .cnc-ladder-tree-pagination button:disabled {
  color: var(--muted);
  cursor: default;
  opacity: 0.42;
}

.cnc-ladder-tree-pagination span {
  min-width: 48px;
  color: var(--muted);
  font: 9px/1 "Cascadia Mono", Consolas, monospace;
  text-align: center;
}

.cnc-ladder-tree-filter {
  margin: -1px -1px 6px;
  padding: 6px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  position: sticky;
  top: -6px;
  z-index: 4;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.cnc-ladder-tree-filter span {
  color: var(--muted);
  font-size: 9px;
}

.cnc-ladder-tree-filter select {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 7px;
  border-radius: 3px;
  font-size: 10px;
}

.cnc-ladder-note-list {
  display: grid;
  gap: 3px;
}

.cnc-ladder-note-item {
  min-width: 0;
  padding: 7px 8px;
  display: grid;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--surface-soft);
}

.cnc-ladder-note-item:focus-within {
  border-color: rgba(91, 141, 239, 0.42);
  background: rgba(91, 141, 239, 0.07);
}

.cnc-ladder-note-item b {
  color: var(--cnc-ladder-address);
  font: 10px/1.2 "Cascadia Mono", Consolas, monospace;
}

.cnc-ladder-note-item input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  border-radius: 3px;
  font-size: 11px;
}

.cnc-ladder-note-item.is-empty input::placeholder {
  color: var(--muted);
  opacity: 0.72;
}

.cnc-ladder-usage-view {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.cnc-ladder-usage-families {
  width: 100%;
  min-height: 34px;
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}

.cnc-ladder-tree-content .cnc-ladder-usage-families button {
  width: auto;
  min-width: 38px;
  min-height: 32px;
  flex: 0 0 auto;
  padding: 0 9px;
  justify-content: center;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  color: var(--muted);
  background: var(--surface-soft);
  font: 11px/1 "Cascadia Mono", Consolas, monospace;
  text-align: center;
}

.cnc-ladder-tree-content .cnc-ladder-usage-families button:hover,
.cnc-ladder-tree-content .cnc-ladder-usage-families button.is-active {
  color: var(--ink);
  background: rgba(91, 141, 239, 0.12);
}

.cnc-ladder-tree-content .cnc-ladder-usage-families button.is-active {
  box-shadow: inset 0 -2px 0 var(--cnc-ladder-address);
}

.cnc-ladder-usage-scroll {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  scrollbar-width: thin;
}

.cnc-ladder-usage-matrix {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  color: var(--ink);
  font: 10px/1.2 "Cascadia Mono", Consolas, monospace;
  table-layout: fixed;
}

.cnc-ladder-usage-matrix th,
.cnc-ladder-usage-matrix td {
  width: 30px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  text-align: center;
}

.cnc-ladder-usage-matrix th:first-child {
  width: 62px;
  padding: 0 5px;
  position: sticky;
  left: 0;
  z-index: 2;
  color: var(--ink);
  background: var(--surface);
  text-align: left;
  white-space: nowrap;
}

.cnc-ladder-usage-matrix tbody th:first-child small {
  margin-left: 3px;
  color: var(--muted);
  font-size: 8px;
}

.cnc-ladder-usage-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  color: var(--muted);
  background: var(--surface-soft);
  text-align: center;
}

.cnc-ladder-usage-matrix thead th:first-child {
  z-index: 5;
}

.cnc-ladder-tree-content .cnc-ladder-usage-matrix button {
  width: 100%;
  min-height: 27px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: var(--cnc-ladder-address);
  background: transparent;
  font: 10px/1 "Cascadia Mono", Consolas, monospace;
  text-align: center;
}

.cnc-ladder-tree-content .cnc-ladder-usage-matrix button:hover {
  color: var(--ink);
  background: rgba(91, 141, 239, 0.14);
}

.cnc-ladder-usage-matrix td > span {
  color: var(--muted);
  opacity: 0.72;
}

.cnc-ladder-usage-matrix tr.is-empty td {
  height: 56px;
  color: var(--muted);
  text-align: center;
}

.cnc-ladder-editor-panel {
  grid-area: editor;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.cnc-ladder-elementbar {
  min-width: 0;
  border-bottom: 1px solid var(--line);
}

.cnc-ladder-element-palette,
.cnc-ladder-selection-actions {
  min-width: 0;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: thin;
}

.cnc-ladder-element-palette {
  min-height: 52px;
  padding: 6px 8px;
  gap: 4px;
  background: var(--surface-soft);
}

.cnc-ladder-element-palette button {
  min-width: 72px;
  padding: 4px 7px;
  display: grid;
  place-items: center;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
}

.cnc-ladder-element-palette button:hover,
.cnc-ladder-element-palette button.is-active {
  border-color: rgba(91, 141, 239, 0.5);
  background: rgba(91, 141, 239, 0.1);
}

.cnc-ladder-element-palette button span {
  color: var(--cnc-ladder-address);
  font: 13px/1.1 "Cascadia Mono", Consolas, monospace;
  white-space: nowrap;
}

.cnc-ladder-element-palette button small {
  color: var(--muted);
  font-size: 8px;
}

.cnc-ladder-function-picker {
  min-width: 126px;
  padding: 4px 6px;
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
}

.cnc-ladder-function-picker > span {
  color: var(--cnc-ladder-address);
  font: 10px/1 "Cascadia Mono", Consolas, monospace;
  text-align: center;
}

.cnc-ladder-function-picker select {
  width: 100%;
  min-width: 0;
  height: 23px;
  padding: 0 5px;
  border-radius: 2px;
  font-size: 8px;
}

.cnc-ladder-selection-actions {
  min-height: 36px;
  padding: 3px 8px;
  gap: 3px;
  border-top: 1px solid var(--line);
}

.cnc-ladder-selection-actions > span {
  min-width: 132px;
  padding: 0 8px 0 2px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font: 9px/1.2 "Cascadia Mono", Consolas, "Microsoft YaHei UI", sans-serif;
  white-space: nowrap;
}

.cnc-ladder-selection-actions button {
  min-width: max-content;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 9px;
  line-height: 1.2;
  cursor: pointer;
}

.cnc-ladder-selection-actions button:hover:not(:disabled) {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.04);
}

.cnc-ladder-selection-actions button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.cnc-ladder-node-inspector {
  min-width: 0;
  min-height: 58px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 60px minmax(140px, 190px) minmax(130px, 180px) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 7px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.cnc-ladder-node-inspector > label:not(.cnc-ladder-branch-toggle) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.cnc-ladder-node-inspector label > span {
  color: var(--muted);
  font-size: 8px;
}

.cnc-ladder-node-inspector input[type="text"],
.cnc-ladder-node-inspector select {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border-radius: 3px;
  font-size: 10px;
}

.cnc-ladder-selected-symbol {
  height: 30px;
  display: grid;
  place-items: center;
  align-self: end;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--cnc-ladder-address);
  background: var(--surface-soft);
  font: 12px/1 "Cascadia Mono", Consolas, monospace;
}

.cnc-ladder-branch-toggle {
  height: 30px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: end;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.cnc-ladder-branch-toggle input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--info);
}

.cnc-ladder-viewport {
  min-width: 0;
  min-height: 260px;
  flex: 1 1 auto;
  overflow: auto;
  color: #D7DEE8;
  background: var(--cnc-ladder-canvas);
  outline: 0;
  scrollbar-width: thin;
}

.cnc-ladder-viewport:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(91, 141, 239, 0.5);
}

.cnc-ladder-canvas {
  width: max-content;
  min-width: calc(var(--cnc-ladder-line-width) + var(--cnc-ladder-grid-width) + var(--cnc-ladder-comment-width));
  min-height: 100%;
  background-color: var(--cnc-ladder-canvas);
  background-image: linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 100% var(--cnc-ladder-row-height);
  font-size: var(--cnc-ladder-font-size);
}

.cnc-ladder-rows {
  overflow-anchor: none;
}

.cnc-ladder-grid-header,
.cnc-ladder-row {
  display: grid;
  grid-template-columns: var(--cnc-ladder-line-width) var(--cnc-ladder-grid-width) var(--cnc-ladder-comment-width);
}

.cnc-ladder-grid-header {
  min-height: 30px;
  position: sticky;
  top: 0;
  z-index: 8;
  color: #8F9AAA;
  background: #171C26;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

.cnc-ladder-grid-header > span,
.cnc-ladder-column-headings span {
  min-height: 30px;
  display: grid;
  place-items: center;
  font: 9px/1 "Cascadia Mono", Consolas, "Microsoft YaHei UI", sans-serif;
}

.cnc-ladder-column-headings {
  display: grid;
  grid-template-columns: repeat(8, var(--cnc-ladder-cell-width));
  border-left: 2px solid var(--cnc-ladder-rail);
  border-right: 2px solid var(--cnc-ladder-rail);
}

.cnc-ladder-column-headings span {
  border-right: 1px solid rgba(255, 255, 255, 0.035);
}

.cnc-ladder-comment-heading {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.cnc-ladder-row {
  height: var(--cnc-ladder-row-height);
  contain: layout style;
}

.cnc-ladder-row-number {
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  color: #AEB7C4;
  background: #131822;
  font: calc(var(--cnc-ladder-font-size) + 2px)/1 "Cascadia Mono", Consolas, monospace;
  cursor: pointer;
  user-select: none;
}

.cnc-ladder-row.is-selected > .cnc-ladder-row-number {
  color: #DDE8FF;
  background: rgba(91, 141, 239, 0.18);
}

.cnc-ladder-node-grid {
  height: var(--cnc-ladder-row-height);
  display: grid;
  grid-template-columns: repeat(8, var(--cnc-ladder-cell-width));
  position: relative;
  border-left: 2px solid var(--cnc-ladder-rail);
  border-right: 2px solid var(--cnc-ladder-rail);
}

.cnc-ladder-node {
  width: var(--cnc-ladder-cell-width);
  height: var(--cnc-ladder-row-height);
  padding: 0 3px;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  place-items: center;
  position: relative;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.025);
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: cell;
  user-select: none;
}

.cnc-ladder-node::before {
  height: 1px;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  z-index: 0;
  content: "";
  background: var(--cnc-ladder-rail);
}

.cnc-ladder-node.has-down-link::after {
  width: 1px;
  position: absolute;
  top: 50%;
  right: -1px;
  bottom: calc(var(--cnc-ladder-row-height) * -0.5);
  z-index: 3;
  content: "";
  background: var(--cnc-ladder-rail);
  box-shadow: 0 0 0 1px rgba(174, 183, 196, 0.08);
}

.cnc-ladder-node:hover {
  background: rgba(91, 141, 239, 0.08);
}

.cnc-ladder-node.is-range-selected {
  background: rgba(91, 141, 239, 0.12);
}

.cnc-ladder-node.is-selected {
  z-index: 4;
  background: rgba(91, 141, 239, 0.18);
  box-shadow: inset 0 0 0 2px #5B8DEF;
}

.cnc-ladder-node.is-search-match:not(.is-selected) {
  background: rgba(245, 158, 11, 0.12);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.72);
}

.cnc-ladder-node-address,
.cnc-ladder-node-name,
.cnc-ladder-node-symbol {
  max-width: calc(var(--cnc-ladder-cell-width) - 7px);
  overflow: hidden;
  position: relative;
  z-index: 2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-ladder-node-address {
  align-self: end;
  color: var(--cnc-ladder-address);
  font: 0.86em/1.1 "Cascadia Mono", Consolas, monospace;
}

.cnc-ladder-node-symbol {
  min-width: 20px;
  padding: 0 3px;
  color: #E4EAF2;
  background: var(--cnc-ladder-canvas);
  font: 1em/1 "Cascadia Mono", Consolas, monospace;
  text-align: center;
}

.cnc-ladder-node-name {
  align-self: start;
  color: #7F8998;
  font: 0.72em/1.15 "Cascadia Mono", Consolas, monospace;
}

.cnc-ladder-node.type-empty .cnc-ladder-node-symbol,
.cnc-ladder-node.type-empty .cnc-ladder-node-address,
.cnc-ladder-node.type-empty .cnc-ladder-node-name,
.cnc-ladder-node.type-horizontal .cnc-ladder-node-address,
.cnc-ladder-node.type-horizontal .cnc-ladder-node-name {
  visibility: hidden;
}

.cnc-ladder-node.type-function .cnc-ladder-node-symbol,
.cnc-ladder-node.type-call .cnc-ladder-node-symbol,
.cnc-ladder-node.type-timer .cnc-ladder-node-symbol,
.cnc-ladder-node.type-counter .cnc-ladder-node-symbol {
  min-width: 54px;
  padding: 2px 5px;
  border: 1px solid var(--cnc-ladder-rail);
  color: var(--cnc-ladder-address);
}

.cnc-ladder-row-comment {
  min-width: 0;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  background: rgba(255, 255, 255, 0.012);
}

.cnc-ladder-row-comment.is-search-match {
  background: rgba(245, 158, 11, 0.1);
}

.cnc-ladder-row-comment input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 6px;
  border: 1px solid transparent;
  color: #DCE2EA;
  background: transparent;
  font-size: calc(var(--cnc-ladder-font-size) - 1px);
  text-overflow: ellipsis;
}

.cnc-ladder-row-comment input:hover,
.cnc-ladder-row-comment input:focus {
  border-color: rgba(91, 141, 239, 0.38);
  background: rgba(91, 141, 239, 0.06);
}

.cnc-ladder-editor-status {
  min-height: 28px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 9px;
}

.cnc-ladder-editor-status span:last-child {
  flex: 0 0 auto;
  color: var(--cnc-ladder-address);
  font-family: "Cascadia Mono", Consolas, monospace;
}

html[data-theme="light"] .cnc-ladder-page {
  --cnc-ladder-canvas: #F7F9FA;
  --cnc-ladder-rail: #344754;
  --cnc-ladder-address: #1D63C6;
  --cnc-ladder-note: #B21D83;
}

html[data-theme="light"] .cnc-ladder-commandbar,
html[data-theme="light"] .cnc-ladder-projectbar,
html[data-theme="light"] .cnc-ladder-tree-panel,
html[data-theme="light"] .cnc-ladder-editor-panel {
  border-color: rgba(37, 58, 70, 0.14);
  box-shadow: 0 4px 16px rgba(39, 59, 70, 0.08);
}

html[data-theme="light"] .cnc-ladder-element-palette,
html[data-theme="light"] .cnc-ladder-editor-status,
html[data-theme="light"] .cnc-ladder-projectbar {
  background: #E9EEF0;
}

html[data-theme="light"] .cnc-ladder-grid-header {
  color: #5A6C77;
  background: #E4E9EC;
  border-color: rgba(37, 58, 70, 0.18);
  box-shadow: 0 2px 7px rgba(39, 59, 70, 0.12);
}

html[data-theme="light"] .cnc-ladder-column-headings span,
html[data-theme="light"] .cnc-ladder-row-number,
html[data-theme="light"] .cnc-ladder-row-comment,
html[data-theme="light"] .cnc-ladder-node {
  border-color: rgba(37, 58, 70, 0.08);
}

html[data-theme="light"] .cnc-ladder-row-number {
  color: #425763;
  background: #EDF1F3;
}

html[data-theme="light"] .cnc-ladder-row.is-selected > .cnc-ladder-row-number {
  color: #174A8E;
  background: rgba(29, 99, 198, 0.14);
}

html[data-theme="light"] .cnc-ladder-node-symbol {
  color: #243640;
}

html[data-theme="light"] .cnc-ladder-row-comment input {
  color: #263A45;
}

html[data-theme="light"] .cnc-ladder-node-name {
  color: #566A76;
}

html[data-theme="light"] .cnc-ladder-tree-modes button:hover,
html[data-theme="light"] .cnc-ladder-tree-content button:hover,
html[data-theme="light"] .cnc-ladder-selection-actions button:hover:not(:disabled) {
  background: rgba(37, 58, 70, 0.05);
}

html[data-theme="light"] .cnc-ladder-element-palette button {
  background: #F7F9FA;
  border-color: rgba(37, 58, 70, 0.14);
}

html[data-theme="light"] .cnc-ladder-node.is-selected {
  background: rgba(29, 99, 198, 0.13);
  box-shadow: inset 0 0 0 2px #1D63C6;
}

html[data-theme="light"] .cnc-ladder-node.is-range-selected {
  background: rgba(29, 99, 198, 0.08);
}

html[data-theme="light"] .cnc-ladder-node.is-search-match:not(.is-selected),
html[data-theme="light"] .cnc-ladder-row-comment.is-search-match {
  background: rgba(217, 133, 8, 0.12);
}

@media (max-width: 1480px) {
  .cnc-ladder-file-actions,
  .cnc-ladder-edit-actions {
    flex-wrap: wrap;
  }

  .cnc-ladder-projectbar {
    grid-template-columns: minmax(200px, 1fr);
  }

  .cnc-ladder-project-facts {
    border-top: 1px solid var(--line);
  }

  .cnc-ladder-project-facts > div:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .cnc-ladder-workbench {
    height: var(--cnc-ladder-workbench-height);
  }
}

@media (max-width: 980px) {
  .cnc-ladder-operation {
    grid-template-columns: minmax(160px, 1fr) minmax(200px, 2fr);
  }

  .cnc-ladder-operation > small {
    grid-column: 1 / -1;
  }

  .cnc-ladder-project-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cnc-ladder-project-facts > div:nth-child(4) {
    border-left: 0;
  }

  .cnc-ladder-workbench {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "tree"
      "editor";
    gap: 10px;
  }

  .cnc-ladder-column-resize-handle,
  .cnc-ladder-height-resize-handle {
    display: none;
  }

  .cnc-ladder-tree-panel {
    height: 210px;
  }

  .cnc-ladder-tree-modes {
    grid-template-columns: repeat(5, minmax(112px, 1fr));
    overflow-x: auto;
  }

  .cnc-ladder-tree-modes button:last-child {
    grid-column: auto;
  }

  .cnc-ladder-tree-content {
    display: flex;
    align-items: flex-start;
    gap: 4px;
  }

  .cnc-ladder-tree-content button {
    width: 210px;
    flex: 0 0 210px;
  }

  .cnc-ladder-editor-panel {
    height: 680px;
  }

  .cnc-ladder-node-inspector {
    grid-template-columns: 52px minmax(140px, 1fr) minmax(120px, 1fr) minmax(180px, 2fr);
  }

  .cnc-ladder-branch-toggle {
    grid-column: 2 / -1;
    justify-self: start;
  }
}

@media (max-width: 680px) {
  .cnc-ladder-commandbar {
    padding: 7px;
  }

  .cnc-ladder-file-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cnc-ladder-device-field {
    min-width: 0;
    grid-column: 1 / -1;
  }

  .cnc-ladder-file-actions > .icon-button {
    position: absolute;
    top: -9999px;
  }

  .cnc-ladder-commandbar .button {
    min-width: 0;
    justify-content: center;
  }

  .cnc-ladder-edit-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .cnc-ladder-search-field {
    min-width: 0;
  }

  .cnc-ladder-search-controls {
    display: none;
  }

  .cnc-ladder-zoom-controls {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .cnc-ladder-operation {
    grid-template-columns: minmax(0, 1fr);
  }

  .cnc-ladder-operation > small {
    grid-column: auto;
  }

  .cnc-ladder-project-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cnc-ladder-project-facts > div:nth-child(odd) {
    border-left: 0;
  }

  .cnc-ladder-validation {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .cnc-ladder-tree-panel {
    height: 190px;
  }

  .cnc-ladder-editor-panel {
    height: 720px;
  }

  .cnc-ladder-element-palette button {
    min-width: 66px;
  }

  .cnc-ladder-node-inspector {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .cnc-ladder-node-inspector > label:nth-of-type(2),
  .cnc-ladder-node-inspector > label:nth-of-type(3),
  .cnc-ladder-branch-toggle {
    grid-column: 1 / -1;
  }

  .cnc-ladder-branch-toggle {
    justify-self: stretch;
  }

  .cnc-ladder-editor-status span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* V3.0.95.3 management console redesign.
   The existing selectors remain the source of truth for business behavior.
   This layer only establishes the visual system and responsive composition. */
:root {
  --bg: #0b0e14;
  --surface: #141923;
  --surface-solid: #141923;
  --surface-soft: #0f141c;
  --surface-raised: #1a202c;
  --ink: #f1f4f8;
  --muted: #a6b0bf;
  --faint: #758195;
  --line: rgba(205, 218, 236, 0.10);
  --line-strong: rgba(205, 218, 236, 0.18);
  --charcoal: #090c11;
  --charcoal-soft: #10141c;
  --accent: #6688ff;
  --accent-dark: #4d6fe8;
  --brand: #6688ff;
  --brand-strong: #4d6fe8;
  --info: #78a6ff;
  --success: #4fc596;
  --warning: #e5ad5c;
  --danger: #ee6f78;
  --input-bg: #0c1118;
  --input-focus-bg: #121925;
  --shadow: 0 24px 58px rgba(1, 4, 10, 0.46), 0 5px 16px rgba(1, 4, 10, 0.24);
  --shadow-soft: 0 10px 28px rgba(1, 4, 10, 0.22), 0 1px 4px rgba(1, 4, 10, 0.20);
  --shadow-hover: 0 18px 36px rgba(1, 4, 10, 0.34), 0 4px 10px rgba(1, 4, 10, 0.20);
  --radius: 6px;
  --radius-lg: 8px;
  --transition-fast: 120ms ease;
  --transition: 180ms ease;
}

html,
body {
  background: var(--bg);
}

body {
  color: var(--ink);
  font-size: 14px;
}

button,
input,
select,
textarea {
  outline-color: var(--accent);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid rgba(102, 136, 255, 0.78);
  outline-offset: 2px;
}

/* Login: quiet technical entry surface with a clear action hierarchy. */
.login-container {
  background: #0b0e14;
}

.login-left {
  overflow: hidden;
  background: #0d1118;
}

.login-left::before,
.login-left::after,
.login-right::after,
.main-shell::before,
.sidebar::after {
  display: none;
}

.login-left::after {
  position: absolute;
  inset: 11% 0 11% auto;
  z-index: 2;
  display: block;
  width: 1px;
  background: rgba(205, 218, 236, 0.11);
  content: "";
  pointer-events: none;
}

.login-left-content {
  max-width: 680px;
  padding: clamp(40px, 7vw, 88px);
}

.login-brand-badge {
  margin-bottom: 30px;
  border-radius: 4px;
  border-color: rgba(102, 136, 255, 0.32);
  background: rgba(102, 136, 255, 0.08);
  color: var(--accent);
  letter-spacing: 0;
}

.login-left-title {
  max-width: 560px;
  margin-bottom: 18px;
  color: var(--ink);
  background: none;
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 720;
  line-height: 1.12;
  letter-spacing: 0;
  -webkit-text-fill-color: currentColor;
}

.login-left-subtitle {
  max-width: 480px;
  margin-bottom: 0;
  color: var(--faint);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
}

.login-right {
  background: #10151d;
  border-left-color: var(--line);
}

.login-right::before,
.login-right::after {
  display: none;
}

.login-form-wrapper {
  width: min(420px, calc(100% - 40px));
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #151a24;
  box-shadow: var(--shadow);
}

.login-form-logo {
  margin-bottom: 34px;
}

.login-form-title {
  font-size: 26px;
  letter-spacing: 0;
}

.login-form-desc {
  margin-bottom: 28px;
  color: var(--muted);
}

.login-input {
  height: 44px;
  border-radius: 5px;
  border-color: var(--line);
  background: var(--input-bg);
}

.login-input:focus {
  border-color: rgba(102, 136, 255, 0.74);
  box-shadow: 0 0 0 3px rgba(102, 136, 255, 0.12);
}

.login-button {
  min-height: 44px;
  border-radius: 5px;
}

/* Application shell. */
.app-view {
  grid-template-columns: 244px minmax(0, 1fr);
  background: var(--bg);
}

.sidebar {
  position: relative;
  z-index: 20;
  padding: 16px 12px 13px;
  border-right-color: var(--line);
  background: #0c1017;
  box-shadow: 12px 0 34px rgba(1, 4, 10, 0.24);
}

.sidebar::before {
  height: 1px;
  background: rgba(102, 136, 255, 0.62);
  box-shadow: none;
}

.sidebar-brand {
  min-height: 70px;
  padding: 0 6px 14px;
  border-bottom-color: var(--line);
}

.sidebar-brand img,
.sidebar-logo-img {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border-radius: 5px;
}

.sidebar-brand strong {
  color: var(--ink);
  font-size: 14px;
}

.sidebar-brand span,
.account-copy span,
.server-release-card small,
.server-release-card b {
  color: var(--faint);
}

.main-nav {
  gap: 3px;
  padding-top: 15px;
}

.nav-section-label {
  margin: 10px 10px 5px;
  color: #657187;
  font-size: 10px;
  letter-spacing: 0;
}

.nav-button {
  position: relative;
  min-height: 40px;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 5px;
  color: #98a4b5;
  isolation: isolate;
}

.nav-button:hover {
  color: var(--ink);
  background: rgba(102, 136, 255, 0.07);
  transform: translateX(1px);
}

.nav-button.active {
  border-color: rgba(102, 136, 255, 0.20);
  color: var(--ink);
  background: rgba(102, 136, 255, 0.055);
  box-shadow: inset 0 0 24px rgba(102, 136, 255, 0.025);
}

.nav-button.active::before {
  top: 7px;
  bottom: 7px;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(102, 136, 255, 0.62);
}

.nav-button::after {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 5px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(102, 136, 255, 0.42);
  content: "";
  filter: blur(15px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.72);
  transition: opacity 180ms ease, transform 180ms ease;
}

.nav-button.active::after {
  opacity: 0.96;
  transform: translateY(-50%) scale(1);
}

.nav-button > svg,
.nav-button > span,
.nav-button > b {
  position: relative;
  z-index: 1;
}

.nav-button.active > svg {
  filter: drop-shadow(0 0 6px rgba(102, 136, 255, 0.72));
}

.nav-button.active svg,
.nav-sub-button.active {
  color: var(--accent);
}

.nav-subnav {
  margin-left: 18px;
  padding-left: 14px;
  border-left-color: rgba(102, 136, 255, 0.20);
}

.nav-sub-button {
  min-height: 31px;
  padding: 6px 9px;
  border-radius: 4px;
  color: #829498;
}

.nav-sub-button:hover,
.nav-sub-button.active {
  color: var(--accent);
  background: rgba(102, 136, 255, 0.07);
}

.nav-sub-button.active {
  box-shadow: inset 2px 0 var(--accent);
}

.server-release-card {
  min-height: 49px;
  margin: 9px 0;
  padding: 8px 9px;
  border-color: var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.025);
}

.server-release-card:hover {
  border-color: rgba(102, 136, 255, 0.30);
  background: rgba(102, 136, 255, 0.08);
}

.server-release-card svg {
  color: var(--accent);
}

.sidebar-account-wrap {
  padding-top: 12px;
  border-top-color: var(--line);
}

.sidebar-account {
  min-height: 46px;
  border-radius: 5px;
}

.sidebar-account:hover,
.sidebar-account[aria-expanded="true"] {
  border-color: var(--line);
  background: rgba(102, 136, 255, 0.07);
}

.avatar {
  width: 34px;
  height: 34px;
  border-color: rgba(102, 136, 255, 0.30);
  border-radius: 5px;
  background: rgba(102, 136, 255, 0.13);
  color: var(--accent);
}

.user-menu {
  border-color: var(--line-strong);
  border-radius: 6px;
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}

.user-menu-item {
  border-radius: 4px;
  color: var(--ink);
}

.user-menu-item:hover {
  background: rgba(102, 136, 255, 0.08);
}

.main-shell {
  background: var(--bg);
}

.topbar {
  min-height: 70px;
  padding: 11px 30px;
  border-bottom-color: var(--line);
  background: rgba(11, 14, 20, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.topbar p {
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0;
}

.topbar h2 {
  font-size: 19px;
  font-weight: 700;
}

.topbar-actions {
  gap: 8px;
}

.notification-button,
.theme-toggle,
.toolbar-icon-button {
  width: 36px;
  height: 36px;
  border-color: var(--line);
  border-radius: 5px;
  background: var(--surface-soft);
  color: var(--muted);
  transition: transform var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.notification-button:hover,
.theme-toggle:hover,
.toolbar-icon-button:hover,
.notification-button:focus-visible,
.theme-toggle:focus-visible,
.toolbar-icon-button:focus-visible {
  border-color: rgba(102, 136, 255, 0.38);
  color: var(--accent);
  background: var(--surface-raised);
  transform: translateY(-1px);
}

.notification-button > span {
  border-color: var(--bg);
  background: var(--danger);
}

.quota-display {
  min-width: 142px;
  padding: 7px 11px;
  border-color: var(--line);
  border-radius: 5px;
  background: var(--surface-soft);
}

.quota-display strong {
  color: var(--accent);
}

.page-container {
  width: 100%;
  max-width: none;
  padding: 28px 32px 42px;
}

.page {
  animation: console-page-in 260ms ease-out both;
}

@keyframes console-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.surface {
  border-color: var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.surface:hover {
  border-color: rgba(205, 218, 236, 0.16);
}

.page-toolbar,
.dashboard-heading {
  min-height: 50px;
  margin-bottom: 18px;
}

.page-toolbar h3,
.dashboard-heading h3 {
  font-size: 24px;
  line-height: 1.2;
}

.page-toolbar p,
.dashboard-heading p {
  color: var(--muted);
  font-size: 11px;
}

.section-heading,
.panel-heading,
.dashboard-panel-heading,
.dashboard-runtime-heading {
  border-bottom-color: var(--line);
}

.section-heading h3,
.panel-heading h3,
.dashboard-panel-heading h3 {
  color: var(--ink);
  font-size: 14px;
}

.section-heading span,
.panel-heading p,
.dashboard-panel-heading p {
  color: var(--muted);
  font-size: 11px;
}

/* Shared controls and forms. */
input,
select,
textarea {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--input-bg);
  color: var(--ink);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--line-strong);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(102, 136, 255, 0.72);
  background: var(--input-focus-bg);
  box-shadow: 0 0 0 3px rgba(102, 136, 255, 0.10);
}

input::placeholder,
textarea::placeholder {
  color: #68797e;
}

.field label,
.field legend {
  margin-bottom: 6px;
  color: #b9c2cf;
  font-size: 11px;
  font-weight: 650;
}

.field-meta,
.field-hint {
  color: var(--faint);
  font-size: 10px;
}

.button {
  min-height: 36px;
  padding: 8px 13px;
  border-radius: 5px;
  border-color: transparent;
  font-size: 12px;
  font-weight: 700;
  transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.button:active:not(:disabled) {
  transform: translateY(0);
}

.button-primary {
  color: #f8faff;
  background: var(--accent);
  box-shadow: 0 5px 14px rgba(102, 136, 255, 0.22);
}

.button-primary:hover:not(:disabled) {
  background: #7997ff;
  box-shadow: 0 8px 20px rgba(102, 136, 255, 0.28);
}

.button-secondary {
  border-color: var(--line-strong);
  color: var(--ink);
  background: var(--surface-raised);
}

.button-secondary:hover:not(:disabled) {
  border-color: rgba(110, 168, 255, 0.45);
  color: #c9dcff;
  background: rgba(110, 168, 255, 0.1);
}

.button-danger {
  background: var(--danger);
}

.search-input {
  min-width: 180px;
  min-height: 36px;
  border-radius: 5px;
}

.toolbar-controls {
  gap: 8px;
}

.table-surface {
  border-color: var(--line);
  border-radius: 8px;
  background: var(--surface);
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

thead th {
  padding: 11px 13px;
  border-bottom-color: var(--line-strong);
  color: #aeb8c7;
  background: #161c26;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
}

tbody td {
  padding: 12px 13px;
  border-bottom-color: var(--line);
  color: #d3d9e2;
  font-size: 12px;
}

tbody tr {
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

tbody tr:hover {
  background: rgba(102, 136, 255, 0.055);
}

.table-action {
  border-radius: 4px;
  color: var(--info);
}

.table-action:hover {
  color: var(--accent);
  background: rgba(102, 136, 255, 0.09);
}

.badge,
.status-pill,
.cnc-state-pill {
  border-radius: 999px;
}

.dialog-backdrop {
  background: rgba(3, 5, 10, 0.80);
}

.dialog,
.dialog-card {
  border-color: var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
}

.dialog-header {
  min-height: 62px;
  padding: 15px 19px;
  border-bottom-color: var(--line);
  background: #161c26;
}

.dialog-header h3 {
  font-size: 16px;
}

.dialog-header p {
  color: var(--accent);
}

.dialog-body {
  padding: 20px;
}

.dialog-actions {
  padding: 14px 20px;
  border-top-color: var(--line);
  background: var(--surface-soft);
}

/* Workbench composition: headline, KPIs, then balanced primary/secondary columns. */
#page-dashboard {
  display: grid;
  gap: 18px;
}

#page-dashboard[hidden] {
  display: none;
}

#page-dashboard .dashboard-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 2px;
}

.dashboard-heading-actions {
  display: flex;
  gap: 6px;
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-metric {
  position: relative;
  min-height: 118px;
  padding: 20px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  animation: metric-enter 330ms ease both;
  transition: border-color var(--transition), background-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.dashboard-metric:nth-child(2) { animation-delay: 35ms; }
.dashboard-metric:nth-child(3) { animation-delay: 70ms; }
.dashboard-metric:nth-child(4) { animation-delay: 105ms; }

@keyframes metric-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

.dashboard-metric::after {
  display: none;
}

.dashboard-metric::before,
.dashboard-metric:nth-child(2)::before,
.dashboard-metric:nth-child(3)::before,
.dashboard-metric:nth-child(4)::before {
  position: absolute;
  inset: 0 0 auto;
  display: block;
  width: 100%;
  height: 2px;
  content: "";
  background: var(--metric-color, var(--accent));
  opacity: 0.68;
  transform: scaleX(0.28);
  transform-origin: left center;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0.72, 0.25, 1);
}

.dashboard-metric:hover {
  border-color: rgba(102, 136, 255, 0.30);
  background: var(--surface-raised);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.dashboard-metric:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

.dashboard-metric:nth-child(2) { --metric-color: var(--warning); }
.dashboard-metric:nth-child(3) { --metric-color: #72c6d5; }
.dashboard-metric:nth-child(4) { --metric-color: var(--success); }

.dashboard-metric .metric-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(102, 136, 255, 0.32);
  border-radius: 6px;
  color: var(--metric-color, var(--accent));
  background: rgba(102, 136, 255, 0.10);
}

.dashboard-metric:nth-child(2) .metric-icon { border-color: rgba(229, 173, 92, 0.34); background: rgba(229, 173, 92, 0.10); }
.dashboard-metric:nth-child(3) .metric-icon { border-color: rgba(114, 198, 213, 0.34); background: rgba(114, 198, 213, 0.10); }
.dashboard-metric:nth-child(4) .metric-icon { border-color: rgba(79, 197, 150, 0.34); background: rgba(79, 197, 150, 0.10); }

.dashboard-metric .metric-icon svg {
  width: 18px;
  height: 18px;
}

.dashboard-metric > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dashboard-metric > div > span {
  color: var(--muted);
  font-size: 12px;
}

.dashboard-metric strong {
  color: var(--ink);
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.dashboard-metric small {
  overflow: visible;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}

.dashboard-runtime {
  padding: 0;
  overflow: hidden;
}

.dashboard-runtime-heading {
  min-height: 62px;
  padding: 14px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.dashboard-runtime-heading > div {
  display: grid;
  gap: 2px;
}

.dashboard-runtime-heading strong {
  font-size: 14px;
}

.dashboard-runtime-heading span {
  color: var(--muted);
  font-size: 10px;
}

.runtime-overall {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid rgba(79, 197, 150, 0.28);
  border-radius: 999px;
  color: var(--accent);
  background: rgba(79, 197, 150, 0.08);
  font-size: 10px;
  white-space: nowrap;
}

.runtime-overall i,
.runtime-item-icon::after {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.runtime-overall i {
  animation: status-beat 1.8s ease-in-out infinite;
}

@keyframes status-beat {
  0%, 100% { opacity: 0.65; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.2); }
}

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

.runtime-item {
  min-width: 0;
  min-height: 92px;
  padding: 15px 16px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--transition), transform var(--transition);
}

.runtime-item:nth-child(even) { border-right: 0; }
.runtime-item:nth-last-child(-n + 2) { border-bottom: 0; }
.runtime-item:hover { background: rgba(110, 168, 255, 0.05); transform: translateY(-1px); }

.runtime-item-icon {
  position: relative;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(110, 168, 255, 0.24);
  border-radius: 5px;
  color: var(--info);
  background: rgba(110, 168, 255, 0.08);
}

.runtime-item-icon svg { width: 15px; height: 15px; }
.runtime-item-copy { min-width: 0; display: grid; gap: 2px; }
.runtime-item-copy small { color: var(--muted); font-size: 11px; }
.runtime-item-copy strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.runtime-item-copy b { overflow: hidden; color: var(--faint); font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.runtime-item-copy b { line-height: 1.35; text-overflow: clip; white-space: normal; }

.dashboard-quick-actions {
  min-height: 132px;
  padding: 16px;
  display: grid;
  align-items: start;
  gap: 13px;
  border-color: rgba(102, 136, 255, 0.20);
  background: #151b26;
}

.dashboard-quick-actions > div:first-child { display: grid; gap: 2px; }
.dashboard-quick-actions strong { font-size: 14px; }
.dashboard-quick-actions > div:first-child span { color: var(--muted); font-size: 10px; }
.quick-action-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quick-action-buttons .button { min-height: 38px; justify-content: flex-start; padding: 8px 11px; }
.quick-action-buttons .button:last-child:nth-child(odd) { grid-column: 1 / -1; }

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.78fr);
  gap: 16px;
  align-items: start;
}

.dashboard-column {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 16px;
}

.dashboard-column[hidden] {
  display: none;
}

.dashboard-grid.single-panel {
  grid-template-columns: minmax(0, 1fr);
}

.dashboard-panel {
  min-width: 0;
  min-height: 260px;
  padding: 18px;
  overflow: hidden;
}

#dashboardCncModule { min-height: 396px; }
#dashboardAlertsModule,
#dashboardDocumentsModule { min-height: 272px; }
#dashboardProcessingModule { min-height: 280px; }

.dashboard-panel-heading {
  min-height: 42px;
  margin-bottom: 14px;
  padding-bottom: 11px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.dashboard-panel-heading > div { min-width: 0; display: grid; gap: 3px; }
.dashboard-panel-heading h3 { margin: 0; }
.dashboard-panel-heading p { margin: 0; line-height: 1.4; }
.text-action { min-height: 30px; padding: 5px 8px; border: 1px solid transparent; border-radius: 4px; color: var(--info); background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; white-space: nowrap; }
.text-action:hover { border-color: rgba(110, 168, 255, 0.25); background: rgba(110, 168, 255, 0.08); }

.dashboard-cnc-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.dashboard-cnc-summary > span,
.dashboard-processing-summary > span {
  min-width: 0;
  min-height: 68px;
  padding: 10px 11px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-left: 2px solid rgba(102, 136, 255, 0.66);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.022);
}

.dashboard-cnc-summary > span:nth-child(2) { border-left-color: var(--success); }
.dashboard-cnc-summary > span:nth-child(5) { border-left-color: var(--danger); }
.dashboard-cnc-summary > span:nth-child(9) { border-left-color: var(--warning); }
.dashboard-cnc-summary strong,
.dashboard-processing-summary strong { color: var(--ink); font-size: 21px; font-variant-numeric: tabular-nums; line-height: 1; }
.dashboard-cnc-summary small,
.dashboard-processing-summary small {
  overflow: visible;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

html[lang="en"] .dashboard-cnc-summary > span {
  min-height: 88px;
}

.dashboard-cnc-device-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
}

.dashboard-cnc-device-list > * {
  min-width: 0;
  border-color: var(--line);
  border-radius: 5px;
  background: #171d28;
  transition: transform var(--transition), border-color var(--transition), background-color var(--transition);
}

.dashboard-cnc-device-list > *:hover { border-color: rgba(102, 136, 255, 0.30); background: #1b2230; transform: translateY(-2px); }

.dashboard-alert-list,
.dashboard-document-list,
.dashboard-processing-table { display: grid; gap: 6px; }

.dashboard-alert-list > *,
.dashboard-document-list > *,
.dashboard-processing-table > * {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.025);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.dashboard-alert-list > *:hover,
.dashboard-document-list > *:hover,
.dashboard-processing-table > *:hover { border-color: var(--line); background: rgba(110, 168, 255, 0.06); transform: translateX(2px); }

.dashboard-processing-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 12px;
}

.dashboard-processing-summary > span:nth-child(2) { border-left-color: var(--danger); }
.dashboard-processing-summary > span:nth-child(3) { border-left-color: var(--warning); }

.dashboard-empty,
.table-empty,
.empty-state {
  min-height: 100px;
  padding: 28px 14px;
  display: grid;
  place-items: center;
  color: var(--faint);
  font-size: 11px;
  text-align: center;
}

/* All operational pages share the same information frame. */
.warehouse-metrics,
.after-sales-overview-bar,
.processing-metrics,
.cnc-device-metrics,
.report-kpis,
.analytics-metrics {
  gap: 9px;
}

.warehouse-metric,
.analytics-metric,
.report-kpi {
  min-height: 86px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition), border-color var(--transition), background-color var(--transition);
}

.warehouse-metric:hover,
.analytics-metric:hover,
.report-kpi:hover { border-color: rgba(102, 136, 255, 0.28); background: var(--surface-raised); transform: translateY(-2px); }

.metric-icon {
  border-radius: 6px;
  background: rgba(102, 136, 255, 0.10);
  color: var(--accent);
}

.metric-icon-info { color: var(--info); background: rgba(110, 168, 255, 0.09); }
.metric-icon-warning { color: var(--warning); background: rgba(232, 183, 96, 0.1); }
.metric-icon-danger { color: var(--danger); background: rgba(240, 118, 114, 0.1); }
.metric-icon-success { color: var(--success); background: rgba(79, 197, 150, 0.10); }

.page-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.page-toolbar > div:first-child { min-width: 180px; }
.page-toolbar .toolbar-controls { flex: 1 1 520px; justify-content: flex-end; }

#appView .visitor-toolbar .visitor-filter-controls {
  flex: 0 0 auto;
  min-height: 0;
}

/* CNC work areas use stronger separation for code, controls and telemetry. */
.cnc-device-page,
.cnc-program-page,
.cnc-parameters-page,
.cnc-ladder-page,
.cnc-diagnostics-page,
.cnc-control-page,
.cnc-updates-page { gap: 12px; }

.cnc-program-workspace { gap: 10px; }
.cnc-program-library,
.cnc-program-editor-panel,
.cnc-program-machine { border-radius: 8px; background: var(--surface); }
.cnc-program-library,
.cnc-program-machine { padding: 13px; }
.cnc-code-editor { background: #0a1114; }
.cnc-code-lines { background: #101a1e; border-right-color: var(--line); }
.cnc-code-editor textarea { caret-color: var(--accent); }
.cnc-device-metrics > div { border-radius: 7px; background: var(--surface); }
.cnc-device-filterbar { border-radius: 8px; background: var(--surface); }

.cnc-control-console,
.cnc-ladder-commandbar,
.cnc-ladder-projectbar,
.cnc-ladder-workbench > .surface,
.cnc-parameter-groups,
.cnc-diagnostic-panel,
.cnc-control-frame,
.cnc-update-card { border-color: var(--line); border-radius: 8px; }

.cnc-ladder-elementbar,
.cnc-ladder-editor-status,
.cnc-ladder-projectbar { background: #111b20; }

/* After-sales workflow. */
.after-sales-toolbar { align-items: end; }
.after-sales-toolbar .toolbar-controls { flex-basis: 620px; }
.after-sales-overview-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.after-sales-table { min-width: 1060px; }
.after-sales-table td.actions-column {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
  white-space: nowrap;
}
.after-sales-table td.actions-column .table-action + .table-action { margin-left: 4px; }
.after-sales-dialog { width: min(920px, calc(100vw - 32px)); }
.after-sales-dialog-body { display: grid; gap: 18px; }
.after-sales-form-section,
.after-sales-workflow-column { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255, 255, 255, 0.018); }
.after-sales-section-heading { min-height: 34px; margin-bottom: 14px; padding-bottom: 9px; display: flex; align-items: start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.after-sales-section-heading > div { display: grid; gap: 3px; }
.after-sales-section-heading strong { font-size: 13px; }
.after-sales-section-heading span { color: var(--muted); font-size: 10px; }
.after-sales-location-panel { display: grid; gap: 10px; }
.after-sales-location-meta { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; }
.after-sales-location-meta code { overflow: hidden; color: var(--info); font: 10px/1.4 "Cascadia Mono", Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.after-sales-location-actions,
.after-sales-media-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.after-sales-location-actions .button,
.after-sales-media-actions .button { min-height: 32px; padding: 6px 10px; }
.after-sales-location-actions .button:first-child { color: #f8faff; background: var(--accent); }
.after-sales-location-actions .button:first-child:hover { background: #7997ff; }
.after-sales-media-panel { display: grid; gap: 14px; }
.after-sales-media-actions small { margin-left: auto; color: var(--faint); font-size: 10px; }
.after-sales-media-group { display: grid; gap: 8px; }
.after-sales-media-group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.after-sales-media-group-heading strong { font-size: 11px; }
.after-sales-media-group-heading span { color: var(--faint); font-size: 10px; }
.after-sales-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.after-sales-media-card { position: relative; min-width: 0; min-height: 90px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-soft); }
.after-sales-media-card button { width: 100%; min-height: 90px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.after-sales-media-card img { display: block; width: 100%; height: 90px; object-fit: cover; transition: transform 180ms ease, opacity 180ms ease; }
.after-sales-media-card:hover img { opacity: 0.86; transform: scale(1.03); }
.after-sales-media-card > .after-sales-media-delete { position: absolute; top: 5px; right: 5px; width: 25px; min-height: 25px; display: grid; place-items: center; border: 1px solid rgba(240, 118, 114, 0.4); border-radius: 4px; color: var(--danger); background: rgba(10, 16, 19, 0.85); }
.after-sales-media-card > .after-sales-media-delete svg { width: 13px; height: 13px; }
.after-sales-media-viewer { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(4, 9, 11, 0.88); }
.after-sales-media-viewer[hidden] { display: none; }
.after-sales-media-viewer-dialog { width: min(920px, 100%); max-height: min(760px, calc(100vh - 48px)); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.after-sales-media-viewer-header { min-height: 52px; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.after-sales-media-viewer-body { padding: 14px; display: grid; gap: 10px; place-items: center; }
.after-sales-media-viewer-body img { display: block; max-width: 100%; max-height: calc(100vh - 190px); object-fit: contain; }
.after-sales-media-viewer-meta { color: var(--muted); font-size: 10px; }
.after-sales-workflow { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr); gap: 12px; }
.after-sales-progress-list,
.after-sales-logistics-list { display: grid; gap: 7px; }
.after-sales-progress-item,
.after-sales-logistics-item { padding: 10px 11px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-soft); }
.after-sales-feedback { border-color: var(--line); border-radius: 6px; background: var(--surface-soft); }

/* Low-cost motion: feedback and state visibility only. */
.dashboard-metric strong,
.warehouse-metric strong,
.analytics-metric strong,
.report-kpi strong { animation: value-arrive 420ms ease both; }

@keyframes value-arrive {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.button svg,
.icon-button svg,
.notification-button svg { transition: transform var(--transition-fast); }
.button:hover svg { transform: translateX(1px); }
.icon-button:hover svg,
.notification-button:hover svg { transform: scale(1.06); }

@media (max-width: 1180px) {
  .app-view { grid-template-columns: 216px minmax(0, 1fr); }
  .page-container { padding-right: 22px; padding-left: 22px; }
  .dashboard-cnc-summary { grid-template-columns: repeat(5, minmax(80px, 1fr)); }
}

@media (max-width: 900px) {
  .app-view { display: grid; min-height: 100vh; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); overflow: auto; }
  .sidebar { position: sticky; inset: auto; top: 0; width: 100%; transform: none; transition: none; }
  body.sidebar-open .sidebar { transform: none; }
  .main-shell { min-height: 0; overflow: visible; }
  .topbar { padding-right: 18px; padding-left: 18px; }
  .page-container { padding: 20px 18px 28px; overflow: visible; }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-runtime-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .runtime-item:nth-child(2) { border-right: 0; }
  .runtime-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-column { display: contents; }
  .dashboard-column[hidden] { display: none; }
  #dashboardRuntimeModule { order: 1; }
  #dashboardActionsModule { order: 2; }
  #dashboardCncModule { order: 3; }
  #dashboardProcessingModule { order: 4; }
  #dashboardAlertsModule { order: 5; }
  #dashboardDocumentsModule { order: 6; }
  .dashboard-cnc-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .after-sales-workflow { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .topbar { min-height: 62px; gap: 8px; padding: 9px 12px; }
  .topbar p { display: none; }
  .topbar h2 { font-size: 16px; }
  .topbar-actions { gap: 5px; }
  .topbar-language-switcher { display: inline-grid; }
  .quota-display { min-width: 0; padding: 7px; }
  .quota-display span { display: none; }
  .page-container { padding: 16px 12px 24px; }
  #page-dashboard .dashboard-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .dashboard-heading-actions { grid-column: 2; grid-row: 1; align-self: center; margin-top: 0; }
  .dashboard-metrics { gap: 7px; }
  .dashboard-metric { min-height: 112px; padding: 12px; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; }
  .dashboard-metric .metric-icon { width: 30px; height: 30px; }
  .dashboard-metric strong { font-size: 22px; }
  .dashboard-runtime-heading { align-items: start; flex-direction: column; }
  .dashboard-runtime-grid { grid-template-columns: 1fr; }
  .runtime-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .runtime-item:last-child { border-bottom: 0; }
  .dashboard-quick-actions { align-items: stretch; flex-direction: column; gap: 10px; }
  .quick-action-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
  .quick-action-buttons .button { justify-content: center; }
  .dashboard-panel { padding: 13px; }
  .dashboard-cnc-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-toolbar { align-items: stretch; flex-direction: column; }
  .page-toolbar .toolbar-controls { flex-basis: auto; display: grid; grid-template-columns: 1fr; }
  .after-sales-overview-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .after-sales-dialog { width: calc(100vw - 20px); }
  .dialog-body { padding: 13px; }
  .after-sales-form-section { padding: 12px; }
  .after-sales-location-meta { align-items: start; flex-direction: column; }
  .after-sales-media-actions { align-items: stretch; }
  .after-sales-media-actions small { width: 100%; margin-left: 0; }
  .after-sales-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .after-sales-media-viewer { padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Light theme keeps the same hierarchy without the dark shell. */
html[data-theme="light"] {
  --bg: #f1f4f8;
  --surface: #fbfcfe;
  --surface-solid: #fbfcfe;
  --surface-soft: #edf1f6;
  --surface-raised: #ffffff;
  --ink: #182231;
  --muted: #5e6b7c;
  --faint: #7e8998;
  --line: rgba(37, 51, 70, 0.11);
  --line-strong: rgba(37, 51, 70, 0.19);
  --input-bg: #f5f7fa;
  --input-focus-bg: #ffffff;
  --shadow-soft: 0 8px 22px rgba(31, 44, 64, 0.08), 0 1px 3px rgba(31, 44, 64, 0.05);
  --shadow-hover: 0 14px 30px rgba(31, 44, 64, 0.13), 0 2px 7px rgba(31, 44, 64, 0.07);
}

html[data-theme="light"] .login-left { background: #edf2f7; }
html[data-theme="light"] .login-right { background: #f1f4f8; }
html[data-theme="light"] .login-form-wrapper { background: #ffffff; }
html[data-theme="light"] .sidebar {
  color: #2b394c;
  background: linear-gradient(180deg, #eef3f8 0%, #e6edf5 100%);
  border-right-color: rgba(47, 65, 88, 0.14);
  box-shadow: 10px 0 30px rgba(38, 54, 76, 0.10);
}
html[data-theme="light"] .sidebar::after {
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(43, 57, 76, 0.012) 3px, rgba(43, 57, 76, 0.012) 6px);
}
html[data-theme="light"] .sidebar-brand,
html[data-theme="light"] .sidebar-account-wrap { border-color: rgba(47, 65, 88, 0.12); }
html[data-theme="light"] .sidebar-brand strong,
html[data-theme="light"] .account-copy strong { color: #223148; }
html[data-theme="light"] .sidebar-brand span,
html[data-theme="light"] .account-copy span,
html[data-theme="light"] .account-chevron,
html[data-theme="light"] .server-release-card small,
html[data-theme="light"] .server-release-card b { color: #748196; }
html[data-theme="light"] .nav-section-label { color: #738096; }
html[data-theme="light"] .nav-button,
html[data-theme="light"] .nav-sub-button { color: #536278; }
html[data-theme="light"] .nav-button:hover,
html[data-theme="light"] .nav-sub-button:hover { color: #253550; background: rgba(72, 105, 183, 0.09); }
html[data-theme="light"] .nav-button.active,
html[data-theme="light"] .nav-sub-button.active { color: #2c56b2; background: rgba(72, 105, 183, 0.12); }
html[data-theme="light"] .nav-button.active {
  color: #20314d;
  background: rgba(72, 105, 183, 0.12);
  border-color: rgba(72, 105, 183, 0.18);
  box-shadow: inset 0 0 24px rgba(72, 105, 183, 0.05), 0 4px 12px rgba(52, 75, 122, 0.06);
}
html[data-theme="light"] .nav-button.active::before { background: #456ed1; box-shadow: 0 0 14px rgba(69, 110, 209, 0.48); }
html[data-theme="light"] .nav-button.active::after { background: rgba(69, 110, 209, 0.24); opacity: 0.72; }
html[data-theme="light"] .nav-button.active > svg,
html[data-theme="light"] .nav-sub-button.active { color: #365fb9; }
html[data-theme="light"] .nav-button.active > svg { filter: drop-shadow(0 0 5px rgba(69, 110, 209, 0.38)); }
html[data-theme="light"] .nav-subnav { border-left-color: rgba(72, 105, 183, 0.22); }
html[data-theme="light"] .server-release-card {
  color: #2a394e;
  background: rgba(250, 252, 255, 0.78);
  border-color: rgba(47, 65, 88, 0.13);
  box-shadow: 0 3px 10px rgba(38, 54, 76, 0.045);
}
html[data-theme="light"] .server-release-card:hover { background: #f8fbff; border-color: rgba(69, 110, 209, 0.30); }
html[data-theme="light"] .server-release-card svg { color: #456ed1; }
html[data-theme="light"] .sidebar-account:hover,
html[data-theme="light"] .sidebar-account[aria-expanded="true"] { background: rgba(72, 105, 183, 0.09); border-color: rgba(72, 105, 183, 0.15); }
html[data-theme="light"] .avatar { color: #365fb9; background: rgba(69, 110, 209, 0.12); border-color: rgba(69, 110, 209, 0.24); }
html[data-theme="light"] .sidebar-language-switcher button.active,
html[data-theme="light"] .topbar-language-switcher button.active { color: #ffffff; background: var(--accent); box-shadow: none; }
html[data-theme="light"] .main-shell { background: var(--bg); }
html[data-theme="light"] .topbar { background: rgba(241, 244, 248, 0.92); }
html[data-theme="light"] .quota-display strong { color: var(--accent); }
html[data-theme="light"] .dashboard-quick-actions { background: #fbfcfe; }
html[data-theme="light"] .dashboard-runtime-heading,
html[data-theme="light"] thead th,
html[data-theme="light"] .dialog-header { background: #f0f3f7; }
html[data-theme="light"] .dashboard-cnc-device-list > *,
html[data-theme="light"] .dashboard-alert-list > *,
html[data-theme="light"] .dashboard-document-list > *,
html[data-theme="light"] .dashboard-processing-table > *,
html[data-theme="light"] .after-sales-form-section,
html[data-theme="light"] .after-sales-progress-item,
html[data-theme="light"] .after-sales-logistics-item { background: rgba(24, 39, 42, 0.025); }
html[data-theme="light"] .cnc-code-editor { background: #f7f9fc; }
html[data-theme="light"] .cnc-code-lines { background: #e9eef5; }
html[data-theme="light"] .after-sales-media-viewer { background: rgba(24, 34, 49, 0.60); }

/* Existing business values draw in without animating layout dimensions. */
.cnc-program-progress i,
.report-bar-track i,
.after-sales-board-progress i,
.firmware-progress-track i,
.cnc-ladder-operation-track i {
  transform-origin: left center;
  animation: data-fill-in 520ms cubic-bezier(0.2, 0.72, 0.25, 1) both;
}

@keyframes data-fill-in {
  from { opacity: 0.55; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

.button:active:not(:disabled),
.icon-button:active:not(:disabled),
.nav-button:active,
.notification-button:active,
.theme-toggle:active {
  transform: scale(0.97);
}

/* V3.0.95 premium login and operational monitor boards. */
.login-view {
  min-height: 100dvh;
}

.login-container {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(440px, 0.88fr);
  background: #0b1017;
  isolation: isolate;
}

.login-left,
.login-right {
  min-width: 0;
  flex: none;
}

.login-left {
  --monitor-accent: #6688ff;
  --monitor-success: #4fc596;
  --monitor-cyan: #72c6d5;
  position: relative;
  overflow: hidden;
  border-right: 1px solid rgba(206, 217, 235, 0.10);
  background: #0b1017;
  isolation: isolate;
}

.login-motion-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.82;
  pointer-events: none;
}

.login-left::before {
  position: absolute;
  inset: 10% 8%;
  z-index: 1;
  display: block;
  border: 1px solid rgba(130, 157, 209, 0.10);
  content: "";
  opacity: 0.7;
  pointer-events: none;
  animation: login-frame-breathe 6s ease-in-out infinite;
}

.login-left::after {
  position: absolute;
  inset: 9% 0 9% auto;
  z-index: 2;
  display: block;
  width: 1px;
  background: rgba(205, 218, 236, 0.12);
  content: "";
  pointer-events: none;
}

.login-language-switcher,
.login-theme-toggle {
  z-index: 5;
}

.login-left-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 760px;
  height: 100%;
  padding: clamp(54px, 7vw, 110px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.login-left-identity {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.login-left-identity img {
  width: 58px;
  height: 70px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(2, 7, 16, 0.28));
}

.login-brand-badge {
  margin: 0;
  border-color: rgba(102, 136, 255, 0.34);
  border-radius: 4px;
  background: rgba(102, 136, 255, 0.09);
  color: #91a9ff;
  box-shadow: inset 0 0 20px rgba(102, 136, 255, 0.04);
}

.login-brand-badge::before {
  background: var(--monitor-success);
  box-shadow: 0 0 10px rgba(79, 197, 150, 0.65);
}

.login-left-title {
  max-width: 620px;
  margin-bottom: 20px;
  color: #f0f4fb;
  background: none;
  font-size: clamp(42px, 4.4vw, 66px);
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: 0;
  text-shadow: 0 16px 44px rgba(0, 0, 0, 0.26);
  -webkit-text-fill-color: currentColor;
}

.login-left-subtitle {
  max-width: 480px;
  margin: 0;
  color: #91a0b6;
  font-size: 14px;
  font-weight: 620;
}

.login-right {
  position: relative;
  min-height: 100dvh;
  padding: clamp(32px, 4vw, 72px);
  display: grid;
  place-items: center;
  border-left: 0;
  background: #101720;
}

.login-right::before,
.login-right::after {
  display: none;
}

.login-form-wrapper {
  position: relative;
  z-index: 2;
  width: min(440px, 100%);
  padding: 36px;
  overflow: hidden;
  border: 1px solid rgba(196, 211, 234, 0.13);
  border-radius: 8px;
  background: #151d29;
  box-shadow: 0 30px 70px rgba(1, 5, 13, 0.34), 0 2px 8px rgba(1, 5, 13, 0.22);
}

.login-form-wrapper::before {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: #6688ff;
  content: "";
  opacity: 0.76;
  transform: scaleX(0.46);
  transform-origin: left center;
  animation: login-line-expand 4.8s ease-in-out infinite;
}

.login-form-logo {
  margin-bottom: 34px;
}

.login-form-title {
  color: #f1f4fa;
  font-size: 28px;
}

.login-form-desc,
.login-field-label,
.login-view .login-footer,
.login-view .server-state strong {
  color: #8997aa;
}

.login-input {
  height: 46px;
  border-color: rgba(196, 211, 234, 0.13);
  background: #0e141d;
  color: #edf2fa;
}

.login-input:hover {
  border-color: rgba(102, 136, 255, 0.36);
}

.login-input:focus {
  border-color: rgba(102, 136, 255, 0.78);
  background: #101823;
  box-shadow: 0 0 0 3px rgba(102, 136, 255, 0.13);
}

.login-input::placeholder,
.login-input-icon {
  color: #718096;
}

.login-remember-device strong {
  color: #dce3ed;
}

.login-remember-device small {
  color: #77869b;
}

.login-view .login-button {
  min-height: 48px;
  border-color: #6688ff;
  border-radius: 5px;
  background: #6688ff;
  color: #f8faff;
  box-shadow: 0 12px 28px rgba(62, 93, 196, 0.25);
}

.login-view .login-button:hover:not(:disabled) {
  border-color: #7897ff;
  background: #7897ff;
  box-shadow: 0 16px 34px rgba(62, 93, 196, 0.32);
}

.login-view .login-footer {
  margin-top: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
}

.login-view .login-footer .version-label {
  margin: 0;
}

@keyframes login-frame-breathe {
  0%, 100% { opacity: 0.42; transform: scale(0.985); }
  50% { opacity: 0.78; transform: scale(1); }
}

@keyframes login-line-expand {
  0%, 100% { opacity: 0.54; transform: scaleX(0.32); }
  50% { opacity: 0.92; transform: scaleX(1); }
}

html[data-theme="light"] .login-container {
  background: #edf2f7;
}

html[data-theme="light"] .login-left {
  --monitor-accent: #416be8;
  --monitor-success: #218a67;
  --monitor-cyan: #3b8fa8;
  border-right-color: rgba(45, 64, 93, 0.13);
  background: #edf2f7;
}

html[data-theme="light"] .login-motion-canvas {
  opacity: 0.76;
}

html[data-theme="light"] .login-left::before {
  border-color: rgba(49, 78, 128, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.54);
}

html[data-theme="light"] .login-left::after {
  background: rgba(38, 56, 84, 0.15);
}

html[data-theme="light"] .login-left-title {
  color: #142238;
  text-shadow: none;
}

html[data-theme="light"] .login-left-subtitle {
  color: #53647d;
}

html[data-theme="light"] .login-brand-badge {
  border-color: rgba(65, 107, 232, 0.26);
  background: rgba(65, 107, 232, 0.08);
  color: #345ccf;
}

html[data-theme="light"] .login-right {
  background: #edf2f7;
}

html[data-theme="light"] .login-form-wrapper {
  border-color: rgba(44, 62, 91, 0.15);
  background: rgba(250, 252, 255, 0.96);
  box-shadow: 0 28px 64px rgba(31, 45, 68, 0.13), 0 2px 8px rgba(31, 45, 68, 0.06);
}

html[data-theme="light"] .login-form-wrapper::before {
  background: #416be8;
}

html[data-theme="light"] .login-form-title,
html[data-theme="light"] .login-remember-device strong {
  color: #192436;
}

html[data-theme="light"] .login-form-desc,
html[data-theme="light"] .login-field-label,
html[data-theme="light"] .login-view .login-footer,
html[data-theme="light"] .login-view .server-state strong,
html[data-theme="light"] .login-remember-device small {
  color: #657288;
}

html[data-theme="light"] .login-input {
  border-color: rgba(44, 62, 91, 0.14);
  background: #f1f4f8;
  color: #1c2739;
}

html[data-theme="light"] .login-input:hover {
  border-color: rgba(65, 107, 232, 0.36);
}

html[data-theme="light"] .login-input:focus {
  border-color: rgba(65, 107, 232, 0.72);
  background: #ffffff;
}

html[data-theme="light"] .login-input::placeholder,
html[data-theme="light"] .login-input-icon {
  color: #78869a;
}

/* Shared data-monitoring language for both full-screen boards. */
.monitor-board {
  --monitor-bg: #090f17;
  --monitor-surface: rgba(17, 25, 37, 0.91);
  --monitor-surface-strong: #151e2b;
  --monitor-border: rgba(197, 213, 238, 0.12);
  --monitor-border-strong: rgba(197, 213, 238, 0.20);
  --monitor-ink: #edf2f8;
  --monitor-muted: #8997ab;
  --monitor-faint: #68778c;
  --monitor-accent: #6688ff;
  --monitor-success: #4fc596;
  --monitor-warning: #dca54b;
  --monitor-danger: #ed6b72;
  --monitor-cyan: #72c6d5;
  --board-surface: var(--monitor-surface-strong);
  --board-surface-strong: #192331;
  --board-line: var(--monitor-border);
  position: fixed;
  inset: 0;
  z-index: 1500;
  min-width: 320px;
  min-height: 100dvh;
  padding: 0 clamp(16px, 1.6vw, 30px);
  display: grid;
  grid-template-rows: 76px auto minmax(0, 1fr) 34px;
  overflow: hidden;
  color: var(--monitor-ink);
  background: var(--monitor-bg);
  isolation: isolate;
}

.monitor-board[hidden] {
  display: none;
}

.monitor-board-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.43;
  pointer-events: none;
}

.monitor-board > :not(.monitor-board-canvas) {
  position: relative;
  z-index: 1;
}

.monitor-board-header,
.cnc-device-board-header,
.after-sales-board-header {
  min-height: 76px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--monitor-border);
  background: transparent;
}

.monitor-board-brand,
.cnc-device-board-brand,
.after-sales-board-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.monitor-board-brand img,
.cnc-device-board-brand img,
.after-sales-board-brand img {
  width: 40px;
  height: 48px;
  flex: 0 0 auto;
  object-fit: contain;
}

.monitor-board-brand > div,
.cnc-device-board-brand > div,
.after-sales-board-brand > div {
  min-width: 0;
}

.monitor-board-brand span,
.cnc-device-board-brand span,
.after-sales-board-brand span {
  color: var(--monitor-accent);
  font-size: 10px;
  font-weight: 720;
}

.monitor-board-brand h2,
.cnc-device-board-brand h2,
.after-sales-board-brand h2 {
  margin: 2px 0 0;
  overflow: visible;
  color: var(--monitor-ink);
  font-size: 21px;
  font-weight: 720;
  line-height: 1.2;
  text-overflow: clip;
  white-space: nowrap;
}

.monitor-board-header-meta,
.cnc-device-board-header-meta,
.after-sales-board-header-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.monitor-board-sync,
.cnc-device-board-sync,
.after-sales-board-sync {
  min-width: 132px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.monitor-board-sync > i,
.cnc-device-board-sync > i,
.after-sales-board-sync > i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--monitor-success);
  box-shadow: 0 0 0 4px rgba(79, 197, 150, 0.12), 0 0 15px rgba(79, 197, 150, 0.32);
  animation: monitor-status-pulse 2.2s ease-in-out infinite;
}

.cnc-device-board-sync.is-error > i,
.after-sales-board-sync[data-state="error"] > i {
  background: var(--monitor-danger);
  box-shadow: 0 0 0 4px rgba(237, 107, 114, 0.12);
  animation: none;
}

.after-sales-board-sync[data-state="syncing"] > i {
  background: var(--monitor-warning);
  box-shadow: 0 0 0 4px rgba(220, 165, 75, 0.12);
}

.monitor-board-sync > span,
.cnc-device-board-sync > span,
.after-sales-board-sync > span,
.monitor-board-clock,
.cnc-device-board-clock,
.after-sales-board-clock {
  display: grid;
  gap: 2px;
}

.monitor-board-sync strong,
.cnc-device-board-sync strong,
.after-sales-board-sync strong {
  color: var(--monitor-ink);
  font-size: 12px;
}

.monitor-board-sync small,
.cnc-device-board-sync small,
.after-sales-board-sync small,
.monitor-board-clock small,
.cnc-device-board-clock small,
.after-sales-board-clock small {
  color: var(--monitor-faint);
  font-size: 9px;
}

.monitor-board-clock,
.cnc-device-board-clock,
.after-sales-board-clock {
  min-width: 132px;
  padding-left: 18px;
  border-left: 1px solid var(--monitor-border);
  text-align: right;
}

.monitor-board-clock strong,
.cnc-device-board-clock strong,
.after-sales-board-clock strong {
  color: var(--monitor-ink);
  font: 650 22px/1 "Cascadia Mono", Consolas, monospace;
}

.monitor-board-actions,
.cnc-device-board-actions,
.after-sales-board-actions {
  min-width: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.cnc-device-board-icon-button,
.after-sales-board-icon-button {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--monitor-border);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--monitor-muted);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.cnc-device-board-icon-button:hover,
.cnc-device-board-icon-button:focus-visible,
.after-sales-board-icon-button:hover,
.after-sales-board-icon-button:focus-visible {
  border-color: rgba(102, 136, 255, 0.48);
  background: rgba(102, 136, 255, 0.09);
  color: #a9bbff;
  outline: none;
  transform: translateY(-1px);
}

.cnc-board-font-control,
.after-sales-board-font-control {
  min-width: 132px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--monitor-muted);
  font-size: 11px;
}

.cnc-board-font-control input,
.after-sales-board-font-control input {
  width: 84px;
  accent-color: var(--monitor-accent);
}

.monitor-board-summary,
.cnc-device-board-summary,
.after-sales-board-summary {
  min-height: 0;
  padding: 10px 0;
  display: grid;
  align-items: stretch;
  gap: 8px;
  border: 0;
}

.monitor-board-cnc .monitor-board-summary {
  grid-template-columns: repeat(8, minmax(96px, 1fr));
}

.monitor-board-service .monitor-board-summary {
  grid-template-columns: repeat(6, minmax(112px, 1fr));
}

.monitor-board .monitor-board-summary > div {
  position: relative;
  min-width: 0;
  min-height: 64px;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--monitor-border);
  border-radius: 5px;
  background: var(--monitor-surface);
  overflow: hidden;
}

.monitor-board .monitor-board-summary > div:first-child {
  padding-left: 13px;
  border-left: 1px solid var(--monitor-border);
}

.monitor-board .monitor-board-summary > div::before {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--monitor-accent);
  content: "";
  opacity: 0.82;
}

.monitor-board .monitor-board-summary > div[data-tone="success"]::before { background: var(--monitor-success); }
.monitor-board .monitor-board-summary > div[data-tone="warning"]::before { background: var(--monitor-warning); }
.monitor-board .monitor-board-summary > div[data-tone="danger"]::before { background: var(--monitor-danger); }

.monitor-board .monitor-board-summary > div[hidden] {
  display: none;
}

.monitor-board .monitor-board-summary span,
.monitor-board .monitor-board-summary small {
  min-width: 0;
  color: var(--monitor-muted);
  font-size: clamp(10px, calc(var(--cnc-board-font-size, var(--after-sales-board-font-size, 18px)) * 0.60), 18px);
  line-height: 1.3;
  white-space: normal;
}

.monitor-board .monitor-board-summary strong {
  margin: 0;
  color: var(--monitor-ink);
  font: 700 clamp(22px, calc(var(--cnc-board-font-size, var(--after-sales-board-font-size, 18px)) * 1.28), 42px)/1 "Cascadia Mono", Consolas, monospace;
}

.monitor-board .monitor-board-summary small {
  margin: 0;
  align-self: end;
  padding: 0 0 2px;
}

.monitor-board .monitor-board-summary strong.is-changing,
.monitor-panel-meta.is-changing,
.monitor-trend-summary strong.is-changing {
  animation: monitor-value-change 360ms ease both;
}

.monitor-board-body {
  min-width: 0;
  min-height: 0;
  padding: 0 0 10px;
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(340px, 0.8fr);
  grid-template-rows: minmax(0, 1fr) minmax(170px, 0.42fr);
  gap: 10px;
}

/* CNC uses the full-height left stage while trend and alarms share the right rail. */
.monitor-board-cnc .monitor-board-body {
  grid-template-rows: minmax(0, 1fr);
}

.monitor-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.monitor-board .cnc-monitor-stage,
.monitor-board .after-sales-monitor-stage {
  min-height: 0;
  overflow: hidden;
}

.cnc-monitor-stage,
.after-sales-monitor-stage {
  grid-column: 1;
  grid-row: 1;
}

.cnc-monitor-trend,
.after-sales-monitor-trend {
  grid-column: 1;
  grid-row: 2;
}

.cnc-monitor-side,
.after-sales-monitor-side {
  min-width: 0;
  min-height: 0;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-rows: minmax(250px, 0.9fr) minmax(220px, 1.1fr);
  gap: 10px;
}

/* The CNC trend lives in the right rail above the alarm feed. */
.cnc-monitor-side > .cnc-monitor-trend {
  grid-column: auto;
  grid-row: auto;
  min-height: 0;
}

.cnc-monitor-side > .monitor-distribution-panel[hidden] {
  display: none;
}

.cnc-monitor-side > .monitor-activity-panel {
  min-height: 0;
}

#cncDeviceBoard .cnc-monitor-side {
  grid-template-rows: minmax(250px, 0.8fr) minmax(240px, 1fr) minmax(190px, 1fr);
}

#cncDeviceBoard .cnc-group-production-list {
  min-height: 0;
  display: grid;
  align-content: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin-right: 0;
  padding-right: 10px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

#cncDeviceBoard .cnc-monitor-group-production {
  display: grid;
  grid-template-rows: 40px minmax(0, 1fr);
  gap: 8px;
}

#cncDeviceBoard .cnc-monitor-group-production > .monitor-panel-heading {
  min-height: 0;
  margin: 0;
}

#cncDeviceBoard .cnc-group-production-row {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#cncDeviceBoard .cnc-group-production-row > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

#cncDeviceBoard .cnc-group-production-row span,
#cncDeviceBoard .cnc-group-production-row strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#cncDeviceBoard .cnc-group-production-row span {
  font-size: clamp(11px, calc(var(--monitor-board-font-size) * 0.52), 14px);
}

#cncDeviceBoard .cnc-group-production-row strong {
  flex: 0 0 auto;
  font-size: clamp(12px, calc(var(--monitor-board-font-size) * 0.58), 16px);
}

#cncDeviceBoard .cnc-group-production-row > i {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(136, 155, 183, 0.12);
}

#cncDeviceBoard .cnc-group-production-row > i > b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--monitor-accent);
  transform-origin: left center;
}

.monitor-panel {
  min-width: 0;
  min-height: 0;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--monitor-border);
  border-radius: 6px;
  background: var(--monitor-surface);
  box-shadow: 0 15px 38px rgba(0, 4, 12, 0.18);
}

.monitor-panel-heading {
  min-width: 0;
  min-height: 40px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.monitor-panel-heading > div:first-child {
  min-width: 0;
}

.monitor-panel-heading span,
.monitor-panel-heading h3,
.monitor-panel-heading h4 {
  margin: 0;
}

.monitor-panel-heading > div:first-child > span {
  display: block;
  margin-bottom: 2px;
  color: var(--monitor-accent);
  font: 680 9px/1.2 "Cascadia Mono", Consolas, monospace;
}

.monitor-panel-heading h3 {
  color: var(--monitor-ink);
  font-size: 14px;
  font-weight: 690;
  line-height: 1.35;
}

.monitor-panel-meta {
  flex: 0 0 auto;
  color: var(--monitor-muted);
  font: 650 11px/1.4 "Cascadia Mono", Consolas, monospace;
}

.monitor-panel-meta.is-danger {
  color: var(--monitor-danger);
}

.cnc-monitor-stage .cnc-device-board-grid,
.cnc-monitor-stage .cnc-device-board-empty,
.after-sales-monitor-stage .after-sales-board-grid {
  min-width: 0;
  min-height: 0;
  grid-column: 1;
  grid-row: 2;
}

.monitor-board .cnc-device-board-grid {
  min-height: 0;
  height: 100%;
  padding: 0 2px 2px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  grid-auto-rows: minmax(210px, auto);
  align-content: start;
  gap: 9px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.monitor-board .cnc-board-device {
  min-height: 210px;
  padding: 14px;
  gap: 11px;
  border-color: var(--monitor-border);
  border-top-width: 2px;
  border-radius: 5px;
  background: var(--monitor-surface-strong);
  box-shadow: none;
}

.monitor-board .cnc-board-device h3,
.monitor-board .cnc-board-device-metrics strong,
.monitor-board .cnc-board-device > footer strong {
  color: var(--monitor-ink);
}

.monitor-board .cnc-board-device code,
.monitor-board .cnc-board-device > footer,
.monitor-board .cnc-board-device > footer time,
.monitor-board .cnc-board-device-metrics span {
  color: var(--monitor-muted);
}

.monitor-board .cnc-board-category {
  color: var(--monitor-accent);
}

.cnc-device-board-empty {
  height: 100%;
  padding: 24px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--monitor-muted);
  text-align: center;
}

.cnc-device-board-empty[hidden] {
  display: none;
}

.cnc-device-board-empty > strong {
  color: var(--monitor-ink);
  font-size: 16px;
}

.cnc-device-board-empty > span {
  font-size: 11px;
}

.monitor-empty-visual {
  position: relative;
  width: 88px;
  height: 70px;
  margin-bottom: 10px;
  display: grid;
  place-items: center;
  border: 1px solid var(--monitor-border-strong);
  color: var(--monitor-accent);
}

.monitor-empty-visual svg {
  width: 30px;
  height: 30px;
}

.monitor-empty-visual i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--monitor-success);
  animation: monitor-status-pulse 2.2s ease-in-out infinite;
}

.monitor-empty-visual i:nth-of-type(1) { top: 9px; left: 11px; }
.monitor-empty-visual i:nth-of-type(2) { right: 11px; bottom: 9px; animation-delay: 0.4s; }
.monitor-empty-visual i:nth-of-type(3) { right: 14px; top: 12px; animation-delay: 0.8s; }

.monitor-board .after-sales-board-grid {
  min-height: 0;
  height: 100%;
  padding: 0 2px 2px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: minmax(176px, auto);
  align-content: start;
  gap: 9px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.monitor-board .after-sales-board-grid[data-count="0"] {
  grid-template: minmax(210px, 1fr) / 1fr;
}

.monitor-board .after-sales-board-grid[data-count="1"] {
  grid-template: minmax(210px, 1fr) / minmax(0, 1fr);
  place-content: stretch;
}

.monitor-board .after-sales-board-grid[data-count="2"],
.monitor-board .after-sales-board-grid[data-count="3"],
.monitor-board .after-sales-board-grid[data-count="4"] {
  grid-template-rows: none;
  grid-auto-rows: minmax(190px, auto);
}

.monitor-board .cnc-board-device-metrics {
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}

.monitor-board .after-sales-board-card {
  min-height: 176px;
  padding: 12px 14px;
  gap: 7px;
  border-color: var(--monitor-border);
  border-radius: 5px;
  background: var(--monitor-surface-strong);
  box-shadow: none;
}

.monitor-board .after-sales-board-ticket strong,
.monitor-board .after-sales-board-model strong,
.monitor-board .after-sales-board-card-footer strong {
  color: var(--monitor-ink);
}

.monitor-board .after-sales-board-ticket span,
.monitor-board .after-sales-board-model span,
.monitor-board .after-sales-board-card-footer span,
.monitor-board .after-sales-board-model small,
.monitor-board .after-sales-board-progress-heading span {
  color: var(--monitor-muted);
}

.monitor-board .after-sales-board-progress-heading strong {
  color: #cbd5e3;
}

.monitor-board .after-sales-board-card-footer {
  border-top-color: var(--monitor-border);
}

.monitor-board .after-sales-board-empty {
  height: 100%;
}

.monitor-trend-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.after-sales-monitor-trend {
  grid-template-rows: auto minmax(0, 1fr);
}

.monitor-chart-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--monitor-muted);
  font-size: 9px;
}

.monitor-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.monitor-chart-legend i {
  width: 7px;
  height: 7px;
  display: block;
  border-radius: 2px;
  background: var(--monitor-accent);
}

.monitor-chart-legend i.is-success { background: var(--monitor-success); }

.monitor-trend-summary {
  min-width: 0;
  margin: -3px 0 4px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.monitor-trend-summary > span {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.monitor-trend-summary small,
.monitor-trend-summary em {
  color: var(--monitor-faint);
  font-size: 9px;
  font-style: normal;
}

.monitor-trend-summary strong {
  color: var(--monitor-ink);
  font: 680 13px/1.2 "Cascadia Mono", Consolas, monospace;
}

.monitor-trend-summary em {
  margin-left: auto;
}

.monitor-column-chart {
  --monitor-chart-columns: 1;
  position: relative;
  min-width: 0;
  min-height: 94px;
  padding: 16px 4px 0;
  display: grid;
  grid-template-columns: repeat(var(--monitor-chart-columns), minmax(0, 1fr));
  align-items: stretch;
  gap: 5px;
  border-bottom: 1px solid var(--monitor-border);
}

.monitor-column-chart::before {
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--monitor-border);
  content: "";
  opacity: 0.55;
}

.monitor-chart-group {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 15px;
  align-items: end;
  gap: 4px;
}

.monitor-chart-bars {
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}

.monitor-chart-bars > i {
  position: relative;
  width: min(14px, 42%);
  max-width: 16px;
  min-width: 3px;
  display: block;
  border-radius: 2px 2px 0 0;
  background: var(--monitor-accent);
  transform-origin: bottom center;
  animation: monitor-bar-rise 520ms cubic-bezier(0.2, 0.72, 0.25, 1) both;
  animation-delay: var(--monitor-bar-delay, 0ms);
}

.monitor-chart-bars > i.is-success { background: var(--monitor-success); }
.monitor-chart-bars > i.is-zero { opacity: 0.24; }
/* Keep a non-zero value visible even when the chart row has an auto height.
   The board can start with an auto-sized grid row; without a pixel floor a
   value such as 1 gets a percentage height against a zero-pixel row. */
.monitor-chart-bars > i.is-positive { min-height: 5px; }

.monitor-chart-bars > i > span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  z-index: 2;
  padding: 2px 4px;
  border: 1px solid var(--monitor-border);
  border-radius: 3px;
  background: var(--monitor-surface-strong);
  color: var(--monitor-ink);
  font: 8px/1.2 "Cascadia Mono", Consolas, monospace;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 3px);
  transition: opacity 140ms ease, transform 140ms ease;
  white-space: nowrap;
}

.monitor-chart-bars > i:hover > span {
  opacity: 1;
  transform: translate(-50%, 0);
}

.monitor-chart-group > small {
  overflow: hidden;
  color: var(--monitor-faint);
  font: 8px/15px "Cascadia Mono", Consolas, monospace;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

.monitor-state-overview {
  min-height: 0;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.monitor-state-ring {
  --monitor-ring-value: 0%;
  width: 120px;
  aspect-ratio: 1;
  padding: 9px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--monitor-success) var(--monitor-ring-value), rgba(133, 153, 181, 0.15) 0);
  box-shadow: 0 0 28px rgba(79, 197, 150, 0.09);
}

.monitor-state-ring > div {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--monitor-surface-strong);
  text-align: center;
}

.monitor-state-ring strong {
  color: var(--monitor-ink);
  font: 720 27px/1 "Cascadia Mono", Consolas, monospace;
}

.monitor-state-ring span {
  margin-top: 5px;
  color: var(--monitor-muted);
  font-size: 9px;
}

.monitor-breakdown-list,
.monitor-activity-list,
.monitor-load-list {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
}

.monitor-breakdown-list {
  display: grid;
  align-content: start;
  gap: 8px;
}

.monitor-breakdown-row {
  display: grid;
  gap: 4px;
}

.monitor-breakdown-row > div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.monitor-breakdown-row span {
  color: var(--monitor-muted);
  font-size: 9px;
}

.monitor-breakdown-row strong {
  color: var(--monitor-ink);
  font: 650 10px/1.2 "Cascadia Mono", Consolas, monospace;
}

.monitor-breakdown-row > i {
  height: 4px;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(136, 155, 183, 0.12);
}

.monitor-breakdown-row > i > b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--monitor-accent);
  transform-origin: left center;
  animation: monitor-track-fill 520ms ease both;
}

.monitor-breakdown-row[data-tone="success"] > i > b { background: var(--monitor-success); }
.monitor-breakdown-row[data-tone="warning"] > i > b { background: var(--monitor-warning); }
.monitor-breakdown-row[data-tone="danger"] > i > b { background: var(--monitor-danger); }
.monitor-breakdown-row[data-tone="muted"] > i > b { background: #66758b; }

.monitor-activity-panel,
.monitor-load-panel,
.monitor-distribution-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.monitor-activity-list {
  display: grid;
  align-content: start;
  gap: 7px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.monitor-activity-row {
  min-width: 0;
  padding: 9px 0;
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--monitor-border);
}

.monitor-activity-row > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--monitor-danger);
  box-shadow: 0 0 10px rgba(237, 107, 114, 0.4);
}

.monitor-activity-row > div {
  min-width: 0;
}

.monitor-activity-row strong,
.monitor-activity-row span,
.monitor-activity-row time,
.monitor-activity-row small {
  display: block;
}

.monitor-activity-row strong {
  overflow: hidden;
  color: var(--monitor-ink);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-activity-row span,
.monitor-activity-row small {
  margin-top: 2px;
  color: var(--monitor-muted);
  font-size: 8px;
}

.monitor-activity-row time {
  color: var(--monitor-danger);
  font: 9px/1.35 "Cascadia Mono", Consolas, monospace;
  text-align: right;
}

.monitor-distribution-groups {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.monitor-distribution-groups > div {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
}

.monitor-distribution-groups h4 {
  margin: 0;
  color: var(--monitor-muted);
  font-size: 10px;
}

.monitor-load-list {
  display: grid;
  align-content: start;
  gap: 8px;
}

.monitor-load-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
}

.monitor-load-row > span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.monitor-load-row > span > i {
  color: var(--monitor-accent);
  font: 9px/1.2 "Cascadia Mono", Consolas, monospace;
  font-style: normal;
}

.monitor-load-row strong {
  overflow: hidden;
  color: var(--monitor-ink);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-load-row > em {
  color: var(--monitor-muted);
  font: 9px/1.2 "Cascadia Mono", Consolas, monospace;
  font-style: normal;
}

.monitor-load-row > b {
  height: 4px;
  grid-column: 1 / -1;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(136, 155, 183, 0.12);
}

.monitor-load-row > b > i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--monitor-cyan);
  transform-origin: left center;
  animation: monitor-track-fill 520ms ease both;
}

.monitor-inline-empty {
  min-height: 100%;
  padding: 20px;
  display: grid;
  place-content: center;
  gap: 5px;
  color: var(--monitor-muted);
  text-align: center;
}

.monitor-inline-empty strong {
  color: var(--monitor-ink);
  font-size: 12px;
}

.monitor-inline-empty span {
  font-size: 9px;
}

.monitor-inline-empty.is-success strong {
  color: var(--monitor-success);
}

.cnc-device-board-footer,
.after-sales-board-footer {
  min-height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--monitor-border);
  color: var(--monitor-faint);
  background: transparent;
  font-size: 9px;
}

.cnc-device-board-footer > div,
.after-sales-board-legend {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cnc-device-board-footer > div > span,
.after-sales-board-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cnc-device-board-settings,
.after-sales-board-settings {
  z-index: 5;
  top: 72px;
  right: 22px;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 94px);
  padding: 16px;
  overflow: auto;
  border: 1px solid var(--monitor-border-strong);
  border-radius: 6px;
  background: #151e2b;
  color: var(--monitor-ink);
  box-shadow: 0 24px 58px rgba(0, 4, 12, 0.42);
}

/* Settings are direct children of the board and must stay an overlay. */
.monitor-board > .cnc-device-board-settings,
.monitor-board > .after-sales-board-settings {
  position: absolute;
  min-height: 0;
  max-height: calc(100dvh - 94px);
}

.cnc-device-board-settings fieldset,
.after-sales-board-settings fieldset {
  border-color: var(--monitor-border);
}

.cnc-device-board-settings legend,
.after-sales-board-settings legend,
.cnc-device-board-settings label,
.after-sales-board-settings label {
  color: var(--monitor-muted);
}

.cnc-device-board-settings input,
.after-sales-board-settings input {
  accent-color: var(--monitor-accent);
}

@keyframes monitor-status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.54; transform: scale(0.78); }
}

@keyframes monitor-value-change {
  0% { opacity: 0.4; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes monitor-bar-rise {
  from { opacity: 0.25; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes monitor-track-fill {
  from { opacity: 0.35; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

html[data-theme="light"] .monitor-board {
  --monitor-bg: #e9eef4;
  --monitor-surface: rgba(249, 251, 254, 0.94);
  --monitor-surface-strong: #f7f9fc;
  --monitor-border: rgba(37, 55, 82, 0.13);
  --monitor-border-strong: rgba(37, 55, 82, 0.22);
  --monitor-ink: #172234;
  --monitor-muted: #617087;
  --monitor-faint: #8490a2;
  --monitor-accent: #416be8;
  --monitor-success: #29936e;
  --monitor-warning: #b97925;
  --monitor-danger: #cc4e57;
  --monitor-cyan: #3a8ca5;
  --board-surface: var(--monitor-surface-strong);
  --board-surface-strong: #eef2f7;
  color: var(--monitor-ink);
  background: var(--monitor-bg);
}

html[data-theme="light"] .monitor-board-canvas {
  opacity: 0.30;
}

html[data-theme="light"] .cnc-device-board-icon-button,
html[data-theme="light"] .after-sales-board-icon-button {
  background: rgba(255, 255, 255, 0.56);
}

html[data-theme="light"] .monitor-board .after-sales-board-progress-heading strong {
  color: #3f4e63;
}

html[data-theme="light"] .cnc-device-board-settings,
html[data-theme="light"] .after-sales-board-settings {
  background: #f9fbfd;
  color: var(--monitor-ink);
  box-shadow: 0 24px 58px rgba(39, 52, 74, 0.20);
}

@media (max-width: 1180px) {
  .monitor-board {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  .monitor-board-header,
  .cnc-device-board-header,
  .after-sales-board-header {
    min-height: 70px;
  }

  .monitor-board-cnc .monitor-board-summary {
    grid-template-columns: repeat(4, minmax(105px, 1fr));
  }

  .monitor-board-service .monitor-board-summary {
    grid-template-columns: repeat(3, minmax(118px, 1fr));
  }

  .monitor-board-body {
    overflow-y: auto;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(360px, 1fr) minmax(190px, 0.5fr) auto;
    align-content: start;
  }

  .cnc-monitor-stage,
  .after-sales-monitor-stage { grid-column: 1; grid-row: 1; }
  .cnc-monitor-trend,
  .after-sales-monitor-trend { grid-column: 1; grid-row: 2; }

  .cnc-monitor-side > .cnc-monitor-trend {
    grid-column: auto;
    grid-row: auto;
  }

  .cnc-monitor-side,
  .after-sales-monitor-side {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(240px, auto);
  }

  .cnc-monitor-side {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, 1fr) minmax(220px, 1fr);
  }
}

@media (max-width: 900px) {
  .login-container {
    position: relative;
    min-height: 100dvh;
    display: block;
    overflow: hidden;
  }

  .login-left {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-right: 0;
  }

  .login-left::after {
    display: none;
  }

  .login-left-content {
    display: none;
  }

  .login-right {
    position: relative;
    z-index: 2;
    min-height: 100dvh;
    padding: 70px 20px 28px;
    background: transparent;
  }

  html[data-theme="light"] .login-right {
    background: transparent;
  }

  .login-motion-canvas {
    opacity: 0.48;
  }

  html[data-theme="light"] .login-motion-canvas {
    opacity: 0.38;
  }

  .monitor-board-header-meta,
  .cnc-device-board-header-meta,
  .after-sales-board-header-meta {
    gap: 9px;
  }

  .monitor-board-sync,
  .cnc-device-board-sync,
  .after-sales-board-sync,
  .monitor-board-clock,
  .cnc-device-board-clock,
  .after-sales-board-clock {
    min-width: 0;
  }

  .cnc-board-font-control,
  .after-sales-board-font-control {
    display: none;
  }
}

@media (max-width: 700px) {
  .login-form-wrapper {
    width: min(430px, 100%);
    padding: 26px 22px;
  }

  .login-form-logo {
    margin-bottom: 24px;
  }

  .login-form-desc {
    margin-bottom: 22px;
  }

  .login-form {
    gap: 16px;
  }

  .login-view .login-footer {
    margin-top: 25px;
  }

  .monitor-board {
    min-height: 100dvh;
    padding: 0 10px;
    overflow-y: auto;
    grid-template-rows: auto auto auto auto;
  }

  .monitor-board-header,
  .cnc-device-board-header,
  .after-sales-board-header {
    min-height: 64px;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 9px 0;
  }

  .monitor-board-header-meta,
  .cnc-device-board-header-meta,
  .after-sales-board-header-meta {
    width: 100%;
    justify-content: space-between;
  }

  .monitor-board-sync,
  .cnc-device-board-sync,
  .after-sales-board-sync {
    display: none;
  }

  .monitor-board-actions,
  .cnc-device-board-actions,
  .after-sales-board-actions {
    margin-left: auto;
  }

  .monitor-board-cnc .monitor-board-summary,
  .monitor-board-service .monitor-board-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitor-board-body {
    overflow: visible;
    grid-template-rows: minmax(360px, auto) minmax(190px, auto) auto;
  }

  .monitor-board .cnc-device-board-grid,
  .monitor-board .after-sales-board-grid {
    grid-template-columns: 1fr;
  }

  .cnc-monitor-side,
  .after-sales-monitor-side {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(230px, auto));
  }

  .monitor-distribution-groups {
    grid-template-columns: 1fr;
  }

  .cnc-device-board-footer,
  .after-sales-board-footer {
    min-height: 44px;
    align-items: flex-start;
    flex-direction: column;
    padding: 8px 0;
  }
}

@media (max-height: 720px) and (min-width: 901px) {
  .login-form-wrapper {
    padding: 26px 30px;
  }

  .login-form-logo {
    margin-bottom: 24px;
  }

  .login-form-desc {
    margin-bottom: 20px;
  }

  .login-form {
    gap: 15px;
  }

  .login-view .login-footer {
    margin-top: 24px;
  }

  .monitor-board {
    grid-template-rows: 66px auto minmax(0, 1fr) 28px;
  }

  .monitor-board-header,
  .cnc-device-board-header,
  .after-sales-board-header {
    min-height: 66px;
  }

  .monitor-board .monitor-board-summary > div {
    min-height: 54px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .monitor-board-body {
    grid-template-rows: minmax(0, 1fr) minmax(140px, 0.36fr);
  }
}

/* CNC ladder sections and PLC data views */
.cnc-ladder-section-tabs {
  min-width: 0;
  min-height: 46px;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.cnc-ladder-section-tabs button {
  min-width: 0;
  min-height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  position: relative;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  background: transparent;
  font: 600 12px/1 "Microsoft YaHei UI", sans-serif;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.cnc-ladder-section-tabs button::after {
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 2px;
  border-radius: 2px;
  content: "";
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0.45);
  transition: opacity 150ms ease, transform 150ms ease;
}

.cnc-ladder-section-tabs button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.cnc-ladder-section-tabs button:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.cnc-ladder-section-tabs button.is-active,
.cnc-ladder-section-tabs button[aria-selected="true"] {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-soft));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), 0 5px 16px color-mix(in srgb, var(--accent) 9%, transparent);
}

.cnc-ladder-section-tabs button.is-active::after,
.cnc-ladder-section-tabs button[aria-selected="true"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.cnc-ladder-section-tabs button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.cnc-ladder-device-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cnc-ladder-section-view {
  min-width: 0;
  max-width: 100%;
}

.cnc-ladder-editor-view {
  display: grid;
  gap: 10px;
}

.cnc-ladder-section-view[hidden],
.cnc-plc-empty[hidden] {
  display: none !important;
}

.cnc-ladder-page.is-plc-view [data-ladder-editor-command],
.cnc-ladder-page[data-cnc-ladder-active-section="parameters"] [data-ladder-editor-command],
.cnc-ladder-page[data-cnc-ladder-active-section="diagnostics"] [data-ladder-editor-command] {
  display: none !important;
}

.cnc-ladder-plc-view {
  min-height: clamp(540px, calc(100vh - 270px), 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.cnc-plc-view-toolbar {
  min-width: 0;
  min-height: 58px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.cnc-plc-view-navigation,
.cnc-plc-toolbar-actions,
.cnc-plc-diagnostic-navigation {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cnc-plc-diagnostic-navigation {
  flex-wrap: wrap;
}

.cnc-plc-toolbar-actions {
  justify-content: flex-end;
}

.cnc-plc-family-tabs,
.cnc-plc-mode-switch {
  min-width: 0;
  padding: 3px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.cnc-plc-family-tabs button,
.cnc-plc-mode-switch button {
  min-width: 62px;
  height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.cnc-plc-family-tabs button strong {
  color: inherit;
  font: 600 11px/1 "Cascadia Mono", Consolas, monospace;
}

.cnc-plc-family-tabs button span {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--muted);
  background: var(--surface);
  font: 9px/1 "Cascadia Mono", Consolas, monospace;
}

.cnc-plc-family-tabs button:hover,
.cnc-plc-mode-switch button:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.cnc-plc-family-tabs button.is-active,
.cnc-plc-family-tabs button[aria-selected="true"],
.cnc-plc-mode-switch button.is-active,
.cnc-plc-mode-switch button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14), inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

.cnc-plc-family-tabs button.is-active span,
.cnc-plc-family-tabs button[aria-selected="true"] span {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.cnc-plc-family-tabs button:focus-visible,
.cnc-plc-mode-switch button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.cnc-plc-signal-tabs button {
  min-width: 34px;
  padding: 0 9px;
  color: var(--ink-soft, var(--muted));
  font: 600 11px/1 "Cascadia Mono", Consolas, monospace;
}

.cnc-plc-mode-switch button {
  min-width: 72px;
}

.cnc-plc-search-field {
  min-width: 230px;
  height: 36px;
  padding: 0 9px 0 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--input-bg);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.cnc-plc-search-field:focus-within {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.cnc-plc-search-field > span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
}

.cnc-plc-search-field input {
  min-width: 0;
  width: 100%;
  height: 32px;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-size: 11px;
}

.cnc-plc-search-field input:focus {
  outline: 0;
}

.cnc-plc-toolbar-actions > .button {
  min-height: 36px;
  padding: 0 13px;
  flex: 0 0 auto;
  font-size: 11px;
}

.cnc-plc-toolbar-actions > .button svg {
  width: 15px;
  height: 15px;
}

.cnc-plc-summary-strip {
  min-width: 0;
  min-height: 58px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.cnc-plc-summary-primary {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.cnc-plc-summary-primary > span {
  color: var(--muted);
  font-size: 10px;
}

.cnc-plc-summary-primary > strong {
  color: var(--ink);
  font: 650 20px/1 "Cascadia Mono", Consolas, monospace;
}

.cnc-plc-summary-primary > small {
  color: var(--muted);
  font-size: 10px;
}

.cnc-plc-summary-meta {
  min-width: 132px;
  padding-left: 16px;
  display: grid;
  gap: 3px;
  border-left: 1px solid var(--line);
}

.cnc-plc-summary-meta > span {
  color: var(--muted);
  font-size: 9px;
}

.cnc-plc-summary-meta > time {
  color: var(--ink);
  font: 10px/1.25 "Cascadia Mono", Consolas, monospace;
  white-space: nowrap;
}

.cnc-plc-data-region {
  min-width: 0;
  min-height: 390px;
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  background: var(--surface);
}

.cnc-plc-table-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.cnc-plc-table-scroll:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: -2px;
}

.cnc-plc-data-table {
  width: 100%;
  min-width: 980px;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  color: var(--ink);
  font-size: 11px;
}

.cnc-plc-data-table th,
.cnc-plc-data-table td {
  height: 38px;
  padding: 0 8px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnc-plc-data-table th {
  height: 36px;
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--muted);
  background: var(--surface-soft);
  box-shadow: 0 1px 0 var(--line);
  font-size: 10px;
  font-weight: 600;
}

.cnc-plc-data-table th:first-child,
.cnc-plc-data-table td:first-child {
  width: 112px;
  position: sticky;
  left: 0;
  z-index: 1;
  color: var(--ink);
  background: var(--surface);
  font: 600 11px/1 "Cascadia Mono", Consolas, monospace;
  text-align: left;
}

.cnc-plc-data-table th:first-child {
  z-index: 3;
  color: var(--muted);
  background: var(--surface-soft);
}

.cnc-plc-data-table th:nth-child(n + 2):nth-child(-n + 9),
.cnc-plc-data-table td:nth-child(n + 2):nth-child(-n + 9) {
  width: 58px;
  font-family: "Cascadia Mono", Consolas, monospace;
}

.cnc-plc-data-table th:last-child,
.cnc-plc-data-table td:last-child {
  width: 240px;
  border-right: 0;
  text-align: left;
}

.cnc-plc-data-table tbody tr:hover td {
  background-color: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.cnc-plc-data-table tbody tr:hover td:first-child {
  background-color: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.cnc-plc-data-table tbody th[scope="row"] {
  color: var(--ink);
  background: var(--surface);
  text-align: left;
}

.cnc-plc-data-table tbody tr:hover th[scope="row"] {
  background-color: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.cnc-plc-data-table .cnc-plc-number {
  color: var(--ink);
  font: 600 11px/1 "Cascadia Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.cnc-plc-data-table .cnc-plc-comment {
  color: var(--muted);
  text-align: left;
}

.cnc-plc-data-table td.is-active,
.cnc-plc-data-table .cnc-plc-bit.is-active {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 11%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 24%, transparent);
  font-weight: 700;
}

.cnc-plc-data-table tr.is-selected td {
  background-color: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.cnc-plc-data-table tr.is-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

.cnc-plc-data-table tr.is-selected th[scope="row"] {
  background-color: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}

.cnc-plc-empty {
  position: absolute;
  inset: 36px 0 0;
  z-index: 1;
  min-height: 250px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  color: var(--muted);
  background: var(--surface);
  text-align: center;
  pointer-events: none;
}

.cnc-plc-empty svg {
  width: 24px;
  height: 24px;
  margin-bottom: 3px;
  color: color-mix(in srgb, var(--accent) 70%, var(--muted));
}

.cnc-plc-empty strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.cnc-plc-empty span {
  font: 10px/1.2 "Cascadia Mono", Consolas, monospace;
}

.cnc-plc-pagination {
  min-height: 46px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

.cnc-plc-pagination .icon-button {
  width: 30px;
  height: 30px;
}

.cnc-plc-pagination output {
  min-width: 92px;
  color: var(--muted);
  font: 10px/1.2 "Cascadia Mono", Consolas, monospace;
  text-align: center;
}

html[data-theme="light"] .cnc-ladder-section-tabs button.is-active,
html[data-theme="light"] .cnc-ladder-section-tabs button[aria-selected="true"],
html[data-theme="light"] .cnc-plc-family-tabs button.is-active,
html[data-theme="light"] .cnc-plc-family-tabs button[aria-selected="true"],
html[data-theme="light"] .cnc-plc-mode-switch button.is-active,
html[data-theme="light"] .cnc-plc-mode-switch button[aria-pressed="true"] {
  box-shadow: 0 2px 6px rgba(31, 50, 64, 0.08), inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}

html[data-theme="light"] .cnc-plc-data-table tbody tr:hover td,
html[data-theme="light"] .cnc-plc-data-table tbody tr:hover td:first-child {
  background-color: color-mix(in srgb, var(--accent) 5%, #F7F9FA);
}

@media (max-width: 1180px) {
  .cnc-plc-view-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .cnc-plc-toolbar-actions {
    justify-content: flex-start;
  }

  .cnc-plc-search-field {
    flex: 1 1 260px;
  }
}

@media (max-width: 680px) {
  .cnc-ladder-section-tabs {
    min-height: 44px;
    padding: 3px;
  }

  .cnc-ladder-section-tabs button {
    min-height: 36px;
    padding: 0 6px;
    gap: 5px;
    font-size: 11px;
  }

  .cnc-ladder-section-tabs button::after {
    right: 8px;
    left: 8px;
  }

  .cnc-ladder-section-tabs button svg {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
  }

  .cnc-ladder-file-actions > .cnc-ladder-device-actions {
    grid-column: 1 / -1;
  }

  .cnc-ladder-device-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
  }

  .cnc-ladder-device-actions .cnc-ladder-device-field {
    width: 100%;
    min-width: 0;
    grid-column: auto;
  }

  .cnc-ladder-device-actions .cnc-ladder-device-field select {
    min-width: 0;
  }

  .cnc-ladder-plc-view {
    min-height: 540px;
  }

  .cnc-plc-view-toolbar {
    padding: 9px;
    gap: 9px;
  }

  .cnc-plc-view-navigation,
  .cnc-plc-diagnostic-navigation {
    width: 100%;
    overflow-x: auto;
    align-items: flex-start;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
  }

  .cnc-plc-diagnostic-navigation {
    overflow: visible;
    flex-direction: column;
    align-items: stretch;
  }

  .cnc-plc-diagnostic-navigation .cnc-plc-mode-switch {
    align-self: flex-start;
  }

  .cnc-plc-diagnostic-navigation .cnc-plc-signal-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .cnc-plc-diagnostic-navigation .cnc-plc-signal-tabs button {
    width: 100%;
    min-width: 0;
  }

  .cnc-plc-family-tabs,
  .cnc-plc-mode-switch {
    flex: 0 0 auto;
  }

  .cnc-plc-toolbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .cnc-plc-search-field {
    width: 100%;
    min-width: 0;
  }

  .cnc-plc-toolbar-actions > .button {
    width: 100%;
    justify-content: center;
  }

  .cnc-plc-summary-strip {
    min-height: 54px;
    padding: 0 10px;
    gap: 10px;
  }

  .cnc-plc-summary-primary {
    gap: 6px;
  }

  .cnc-plc-summary-primary > strong {
    font-size: 18px;
  }

  .cnc-plc-summary-meta {
    min-width: 104px;
    padding-left: 10px;
  }

  .cnc-plc-data-region {
    min-height: 330px;
  }

  .cnc-plc-data-table {
    min-width: 930px;
  }
}

@media (max-width: 440px) {
  .cnc-ladder-section-tabs button svg {
    display: none;
  }

  .cnc-plc-family-tabs button {
    min-width: 58px;
    padding: 0 8px;
  }

  .cnc-plc-summary-primary > span {
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cnc-plc-summary-meta {
    min-width: 94px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cnc-ladder-section-tabs button,
  .cnc-ladder-section-tabs button::after,
  .cnc-plc-family-tabs button,
  .cnc-plc-mode-switch button,
  .cnc-plc-search-field {
    transition: none;
  }
}

/* ============================================================
   V7 光影登录皮肤 · 与 设计案例-登录页-新版UI-V7.html 逐项对齐
   类名统一 lv- 前缀，绕开 4 处遗留 .login-* 样式块的特异性
   ============================================================ */
#loginView{
  --lv-void:#07080A;
  --lv-line:rgba(255,255,255,.075);
  --lv-line-2:rgba(255,255,255,.045);
  --lv-text:#EDF1F3;
  --lv-text-2:#9AA4AD;
  --lv-text-3:#6B747D;
  --lv-lime:#B4D95C;
  --lv-lime-hi:#CBE97E;
  --lv-lime-lo:#8FBB33;
  --lv-mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Consolas,monospace;
  --lv-cjk:"PingFang SC","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",system-ui,sans-serif;
}
#loginView[hidden]{display:none}
.lv-view{
  /* The app root does not scroll. Give the login its own bounded vertical
     viewport, including when the phone keyboard reduces the visible height. */
  position:relative;width:100%;max-width:100%;min-width:0;
  height:100%;height:100dvh;min-height:0;overflow-x:hidden;overflow-y:auto;
  font-family:var(--lv-cjk);background:var(--lv-void);color:var(--lv-text-2);
  -webkit-font-smoothing:antialiased;
}
.lv-view *{box-sizing:border-box;margin:0;padding:0}

/* ── 布光层 ───────────────────────────────── */
.lv-atmos{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.lv-bloom{
  position:absolute;top:-34vh;left:56%;
  width:104vw;height:96vh;transform:translateX(-50%);
  background:
    radial-gradient(34% 31% at 50% 34%,rgba(196,232,110,.30),transparent 60%),
    radial-gradient(58% 48% at 50% 40%,rgba(150,196,86,.075),transparent 68%);
  filter:blur(22px);
  animation:lv-breathe 11s ease-in-out infinite;
}
.lv-bloom-cool{
  position:absolute;top:-30vh;left:-12vw;
  width:76vw;height:88vh;
  background:radial-gradient(50% 50% at 50% 50%,rgba(96,142,190,.085),transparent 70%);
  filter:blur(30px);
  animation:lv-breathe-2 14s ease-in-out infinite reverse;
}
.lv-shaft{
  position:absolute;top:-24vh;left:50%;
  width:23vw;height:126vh;
  transform:translateX(-64%) rotate(15deg);
  background:linear-gradient(180deg,rgba(213,240,150,.13),rgba(180,217,92,.03) 30%,transparent 74%);
  filter:blur(34px);
  animation:lv-sway 17s ease-in-out infinite;
}
.lv-shaft.b{
  width:15vw;transform:translateX(112%) rotate(-11deg);
  background:linear-gradient(180deg,rgba(210,232,255,.085),transparent 66%);
  animation-duration:21s;
}
.lv-motes{position:absolute;inset:0;width:100%;height:100%;opacity:1}
.lv-grain{
  position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lv-vig{
  position:absolute;inset:0;
  background:radial-gradient(118% 100% at 52% 32%,transparent 34%,rgba(4,5,7,.5) 72%,rgba(3,4,5,.86) 100%);
}
@keyframes lv-breathe{
  0%,100%{opacity:.82;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.05)}
}
@keyframes lv-breathe-2{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes lv-sway{0%,100%{opacity:.62}50%{opacity:1}}

/* ── 顶栏 ─────────────────────────────────── */
.lv-nav{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 44px;gap:20px;
}
.lv-mark{display:flex;align-items:center;gap:11px}
.lv-mark img{width:30px;height:30px;display:block}
.lv-mark b{font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--lv-text)}
.lv-mark s{width:1px;height:15px;background:var(--lv-line);display:block}
.lv-mark span{
  font-family:var(--lv-mono);font-size:9.5px;letter-spacing:.22em;
  color:var(--lv-text-3);text-transform:uppercase;
}
.lv-tools{display:flex;align-items:center;gap:9px}
.lv-seg{
  display:flex;gap:2px;padding:3px;border-radius:999px;
  border:1px solid var(--lv-line-2);background:rgba(255,255,255,.03);
}
.lv-seg button{
  font-family:var(--lv-mono);font-size:10px;letter-spacing:.1em;
  padding:5px 12px;border:0;border-radius:999px;
  background:transparent;color:var(--lv-text-3);cursor:pointer;transition:.2s;
}
.lv-seg button.active,
.lv-seg button[aria-pressed="true"]{background:rgba(255,255,255,.085);color:var(--lv-text)}
.lv-ghost{
  width:31px;height:31px;border-radius:999px;display:grid;place-items:center;
  border:1px solid var(--lv-line-2);background:rgba(255,255,255,.03);
  color:var(--lv-text-3);cursor:pointer;transition:.2s;
}
.lv-ghost:hover,.lv-seg button:hover{color:var(--lv-text)}
.lv-ghost svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}

/* ── 版面 ─────────────────────────────────── */
.lv-stage{
  position:relative;z-index:2;
  width:100%;max-width:1560px;min-width:0;margin:0 auto;
  min-height:calc(100dvh - 83px);
  display:grid;grid-template-columns:minmax(0,1fr) 436px;
  align-items:center;gap:76px;
  padding:0 44px 46px;
}
.lv-hero{max-width:600px;min-width:0;padding-left:22px}
.lv-tag{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 14px 6px 11px;border-radius:999px;
  border:1px solid rgba(180,217,92,.22);
  background:rgba(180,217,92,.055);
  font-family:var(--lv-mono);font-size:9.5px;letter-spacing:.18em;
  color:#C6DE93;text-transform:uppercase;
}
.lv-tag i{
  width:5px;height:5px;border-radius:999px;background:var(--lv-lime);
  box-shadow:0 0 0 3px rgba(180,217,92,.16),0 0 11px rgba(180,217,92,.85);
  animation:lv-pulse 2.6s ease-in-out infinite;
}
@keyframes lv-pulse{0%,100%{opacity:1}50%{opacity:.42}}
.lv-h1{
  margin-top:26px;
  font-size:66px;line-height:1.16;font-weight:800;
  letter-spacing:-.015em;
  background:linear-gradient(168deg,rgba(237,241,243,.46) 6%,rgba(237,241,243,.9) 46%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lv-h1 em{
  display:block;font-style:normal;
  background:linear-gradient(102deg,#FFFFFF 12%,#E4EDD0 52%,#B4D95C 108%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lv-lede{margin-top:24px;font-size:14.5px;line-height:1.95;color:var(--lv-text-2)}
.lv-lede span{display:block}
.lv-facts{
  margin-top:38px;display:flex;align-items:center;gap:12px;list-style:none;
  font-family:var(--lv-mono);font-size:9.5px;letter-spacing:.16em;color:var(--lv-text-3);
}
.lv-facts b{
  padding:7px 13px;border-radius:999px;font-weight:400;
  border:1px solid var(--lv-line-2);background:rgba(255,255,255,.028);
  color:#A7B0B8;
}

/* ── 玻璃卡片 ─────────────────────────────── */
.lv-panel{position:relative;min-width:0}
.lv-halo{
  position:absolute;z-index:-1;
  top:-26%;left:-30%;right:-30%;bottom:-26%;
  background:
    radial-gradient(46% 34% at 50% 20%,rgba(207,238,131,.088),transparent 62%),
    radial-gradient(70% 56% at 50% 32%,rgba(158,198,94,.04),transparent 72%),
    radial-gradient(96% 84% at 50% 48%,rgba(112,158,66,.02),transparent 78%);
  filter:blur(30px);pointer-events:none;
  animation:lv-breathe-3 11s ease-in-out infinite;
}
@keyframes lv-breathe-3{0%,100%{opacity:.86}50%{opacity:1}}
.lv-card{
  position:relative;overflow:hidden;
  border-radius:26px;padding:38px 34px 30px;
  border:1px solid transparent;
  background:
    radial-gradient(124% 82% at 14% -10%,rgba(255,255,255,.085),transparent 54%),
    linear-gradient(180deg,transparent 30%,rgba(9,11,13,.34) 74%,rgba(8,10,12,.5) 100%),
    radial-gradient(96% 74% at 92% 108%,rgba(0,0,0,.22),transparent 62%),
    linear-gradient(168deg,rgba(255,255,255,.05),rgba(255,255,255,.014) 62%);
  backdrop-filter:blur(28px) saturate(1.02);
  -webkit-backdrop-filter:blur(28px) saturate(1.02);
  box-shadow:
    0 .5px 0 rgba(255,255,255,.05) inset,
    0 -20px 34px -28px rgba(0,0,0,.5) inset,
    0 1px 2px rgba(0,0,0,.28),
    0 4px 9px -2px rgba(0,0,0,.26),
    0 13px 26px -8px rgba(0,0,0,.32),
    0 34px 66px -20px rgba(0,0,0,.52),
    0 64px 116px -42px rgba(0,0,0,.58),
    0 0 74px -36px rgba(180,217,92,.22);
}
/* 渐变描边：最亮点落在上缘偏左，对齐顶部光晕的方位 */
.lv-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;pointer-events:none;
  background:
    radial-gradient(58% 42% at 31% -4%,rgba(233,249,193,.72),rgba(233,249,193,.2) 42%,transparent 74%),
    linear-gradient(148deg,
    rgba(228,247,182,.2) 0%,
    rgba(255,255,255,.12) 15%,
    rgba(255,255,255,.05) 37%,
    rgba(255,255,255,.018) 63%,
    rgba(255,255,255,.052) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
}
.lv-card::after{
  content:"";position:absolute;top:-70%;left:-52%;width:34%;height:240%;
  background:linear-gradient(96deg,transparent,rgba(255,255,255,.03) 44%,rgba(255,255,255,.042) 52%,transparent);
  filter:blur(7px);
  transform:rotate(13deg);
  animation:lv-sweep 13s cubic-bezier(.42,0,.5,1) infinite;
  pointer-events:none;
}
@keyframes lv-sweep{
  0%,56%{transform:translateX(0) rotate(13deg);opacity:0}
  7%{opacity:.9}
  44%{transform:translateX(430%) rotate(13deg);opacity:0}
  100%{transform:translateX(430%) rotate(13deg);opacity:0}
}
.lv-title{
  position:relative;font-size:23px;font-weight:650;letter-spacing:.005em;
  color:#fff;line-height:1.45;
}
.lv-hint{position:relative;margin-top:8px;font-size:12.5px;color:var(--lv-text-3)}

/* ── 表单 ─────────────────────────────────── */
.lv-f{position:relative;margin-top:24px}
.lv-f label{
  display:block;font-size:11.5px;letter-spacing:.06em;
  color:var(--lv-text-2);margin-bottom:9px;
}
.lv-f label b{color:var(--lv-lime);font-weight:400;margin-left:4px}
.lv-wrap{position:relative;display:flex;align-items:center}
.lv-input{
  width:100%;padding:13px 15px;border-radius:13px;
  border:1px solid rgba(255,255,255,.05);
  border-top-color:rgba(255,255,255,.085);
  background:linear-gradient(180deg,rgba(255,255,255,.046),rgba(255,255,255,.02));
  color:#fff;font-size:14px;font-family:var(--lv-cjk);letter-spacing:.01em;
  box-shadow:
    0 1px 0 rgba(255,255,255,.028) inset,
    0 1px 2px rgba(0,0,0,.16);
  transition:border-color .2s,box-shadow .24s,background .24s;
}
.lv-input::placeholder{color:#5F686F}
#loginView .lv-input:focus,
#loginView .lv-input:focus-visible{
  outline:none;
  border-color:rgba(180,217,92,.4);
  border-top-color:rgba(180,217,92,.5);
  background:linear-gradient(180deg,rgba(180,217,92,.052),rgba(180,217,92,.02));
  box-shadow:
    0 0 0 1px rgba(180,217,92,.16),
    0 -1px 0 1px rgba(180,217,92,.07),
    0 -4px 13px -7px rgba(196,229,118,.55),
    0 5px 16px -9px rgba(180,217,92,.3),
    0 1px 0 rgba(233,249,193,.07) inset;
}
/* 浏览器自动填充不要打回蓝白底 */
#loginView .lv-input:-webkit-autofill,
#loginView .lv-input:-webkit-autofill:hover,
#loginView .lv-input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
  -webkit-box-shadow:0 0 0 60px #12160E inset,0 1px 0 rgba(255,255,255,.028) inset;
  transition:background-color 9999s ease-out 0s;
}
.lv-peek{
  position:absolute;right:11px;border:0;background:transparent;cursor:pointer;
  color:var(--lv-text-3);padding:5px;border-radius:8px;display:grid;place-items:center;
}
.lv-peek:hover{color:var(--lv-text)}
.lv-peek svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.lv-row{
  position:relative;margin-top:20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.lv-keep{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  font-size:12.5px;color:var(--lv-text-2);user-select:none;
}
.lv-keep input{position:absolute;opacity:0;width:0;height:0}
.lv-box{
  width:16px;height:16px;flex:none;border-radius:5px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  display:grid;place-items:center;transition:.18s;
}
.lv-box svg{width:9px;height:9px;fill:none;stroke:#131A06;stroke-width:3;opacity:0}
.lv-keep input:checked+.lv-box{
  background:linear-gradient(180deg,var(--lv-lime-hi),var(--lv-lime-lo));
  border-color:transparent;box-shadow:0 0 14px -3px rgba(180,217,92,.6);
}
.lv-keep input:checked+.lv-box svg{opacity:1}
.lv-keep input:focus-visible+.lv-box{outline:2px solid var(--lv-lime);outline-offset:2px}
.lv-link{font-size:12.5px;color:var(--lv-text-3);text-decoration:none;transition:.18s}
.lv-link:hover{color:#C6DE93}
.lv-error{
  position:relative;margin-top:14px;font-size:12.5px;line-height:1.6;color:#F0A9A0;
}
.lv-error:empty{display:none}
.lv-submit{
  position:relative;margin-top:26px;width:100%;
  padding:15px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(178deg,#C4E479 0%,#AFD35A 46%,#96BC3C 100%);
  color:#141C06;font-family:var(--lv-cjk);font-size:14.5px;font-weight:700;
  letter-spacing:.28em;text-indent:.28em;
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 -1px 0 rgba(60,86,14,.24) inset,
    0 1px 2px rgba(0,0,0,.3),
    0 5px 12px -4px rgba(0,0,0,.34),
    0 8px 22px -10px rgba(160,205,80,.4);
  transition:transform .18s,box-shadow .22s,filter .18s;
}
.lv-submit:hover:not(:disabled){
  transform:translateY(-1px);filter:brightness(1.04);
  box-shadow:
    0 1px 0 rgba(255,255,255,.36) inset,
    0 -1px 0 rgba(60,86,14,.2) inset,
    0 2px 3px rgba(0,0,0,.28),
    0 8px 18px -5px rgba(0,0,0,.32),
    0 14px 34px -12px rgba(160,205,80,.5);
}
.lv-submit:active{transform:translateY(0)}
.lv-submit:disabled{opacity:.62;cursor:not-allowed}
.lv-submit:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lv-foot{
  position:relative;margin-top:22px;padding-top:17px;
  border-top:1px solid var(--lv-line-2);
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--lv-mono);font-size:9.5px;letter-spacing:.14em;color:var(--lv-text-3);
}
.lv-server{display:flex;align-items:center;gap:7px}
.lv-server i{
  width:5px;height:5px;border-radius:999px;background:var(--lv-lime);
  box-shadow:0 0 9px rgba(180,217,92,.8);
}
.lv-server strong{font-weight:400;letter-spacing:inherit}
.lv-server.offline i{background:#E08C7E;box-shadow:0 0 9px rgba(224,140,126,.8)}

/* ── 载入编排 ─────────────────────────────── */
.lv-up{opacity:0;transform:translateY(14px);animation:lv-rise .8s cubic-bezier(.2,.7,.2,1) both}
.lv-d1{animation-delay:.1s}.lv-d2{animation-delay:.2s}.lv-d3{animation-delay:.3s}
.lv-d4{animation-delay:.42s}.lv-d5{animation-delay:.54s}
@keyframes lv-rise{to{opacity:1;transform:none}}

/* ── 响应式 ───────────────────────────────── */
@media (max-width:1180px){
  .lv-h1{font-size:54px}
  .lv-stage{grid-template-columns:minmax(0,1fr) 400px;gap:46px}
  .lv-hero{padding-left:0}
}
@media (max-width:900px){
  .lv-nav{padding:20px 22px}
  .lv-stage{
    min-height:0;grid-template-columns:minmax(0,1fr);gap:38px;
    padding:14px 22px 46px;
  }
  .lv-hero{max-width:none}
  /* Decorative negative insets must not enlarge the phone's scroll area. */
  .lv-halo{inset:0}
  .lv-hero,.lv-card{overflow-wrap:anywhere}
  .lv-h1{font-size:40px;margin-top:20px}
  .lv-lede{font-size:13.5px;margin-top:18px}
  .lv-lede span{display:inline}
  .lv-facts{margin-top:26px;flex-wrap:wrap;gap:8px}
  .lv-card{padding:30px 24px 24px;border-radius:22px}
  .lv-title{font-size:20px}
  /* Safari autozooms focused inputs below 16px. Keep user pinch zoom enabled. */
  .lv-input{min-width:0;font-size:16px}
  .lv-foot{flex-wrap:wrap;gap:8px 14px}
  .lv-shaft{opacity:.5}
}
@media (max-width:430px){
  .lv-mark span{display:none}
  .lv-mark s{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lv-view *{animation:none!important;transition:none!important}
  .lv-up{opacity:1;transform:none}
}

/* ── 主题护栏 ─────────────────────────────────
   V7 只有暗色一版。登录页在任何主题下都保持 V7 原貌，
   主题切换仍然生效，登录进入系统后可见。
   全局 html[data-theme="light"] input 的特异性高于 .lv-input，
   这里用 ID 级选择器把 V7 取值原样挡回来。
   ───────────────────────────────────────────── */
html[data-theme="light"] #loginView .lv-input{
  color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.046),rgba(255,255,255,.02));
}
html[data-theme="light"] #loginView .lv-input::placeholder{color:#5F686F}
html[data-theme="light"] #loginView .lv-input:focus,
html[data-theme="light"] #loginView .lv-input:focus-visible{
  background:linear-gradient(180deg,rgba(180,217,92,.052),rgba(180,217,92,.02));
}
html[data-theme="light"] #loginView .lv-input:disabled{
  color:#8A93A2;background:rgba(255,255,255,.03);
}

/* V3.0.96 application visual system.
   Business markup and behavior stay unchanged. The login view intentionally
   remains on its independent V7 dark treatment above. */
#appView,
body > .dialog-backdrop,
body > .dialog-overlay,
body > .cnc-daily-production-dialog,
body > .monitor-board {
  --bg: #070a0d;
  --surface: #15191c;
  --surface-solid: #15191c;
  --surface-soft: #0f1417;
  --surface-raised: #1b2023;
  --ink: #eef2f4;
  --muted: #98a29f;
  --faint: #68736f;
  --line: rgba(219, 232, 224, 0.10);
  --line-strong: rgba(210, 232, 190, 0.20);
  --charcoal: #080b0d;
  --charcoal-soft: #101518;
  --accent: #b9e45f;
  --accent-dark: #91bb39;
  --brand: #b9e45f;
  --brand-strong: #91bb39;
  --info: #91b775;
  --success: #72c99d;
  --warning: #e0ad5b;
  --danger: #eb747a;
  --input-bg: #0d1215;
  --input-focus-bg: #12191a;
  --shadow: 0 30px 70px rgba(0, 4, 3, 0.46), 0 6px 18px rgba(0, 4, 3, 0.24);
  --shadow-soft: 0 16px 40px rgba(0, 4, 3, 0.24), 0 2px 7px rgba(0, 4, 3, 0.22);
  --shadow-hover: 0 22px 48px rgba(0, 4, 3, 0.34), 0 6px 16px rgba(88, 116, 45, 0.10);
  --radius: 13px;
  --radius-lg: 19px;
  --transition-fast: 140ms ease;
  --transition: 200ms ease;
  color: var(--ink);
}

#appView.app-view {
  background: var(--bg);
}

@media (min-width: 1181px) {
  #appView.app-view {
    grid-template-columns: clamp(250px, 14.75vw, 302px) minmax(0, 1fr);
  }
}

#appView .sidebar {
  padding: 20px 16px 16px;
  border-right-color: rgba(191, 220, 194, 0.12);
  background:
    radial-gradient(115% 42% at 0% 0%, rgba(185, 228, 95, 0.075), transparent 58%),
    linear-gradient(180deg, #0c1510 0%, #0a1113 38%, #081015 100%);
  box-shadow: 16px 0 48px rgba(0, 4, 3, 0.16);
}

#appView .sidebar::before,
#appView .sidebar::after {
  display: none;
}

#appView .sidebar-brand {
  min-height: 86px;
  gap: 13px;
  padding: 0 8px 18px;
  border-bottom-color: var(--line);
}

#appView .sidebar-brand img,
#appView .sidebar-logo-img {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  border-radius: 11px;
}

#appView .sidebar-brand strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
}

#appView .sidebar-brand span {
  margin-top: 4px;
  color: #7c8982;
  font-size: 11px;
  line-height: 1.35;
}

#appView .language-switcher {
  height: 34px;
  padding: 3px;
  border-color: rgba(205, 230, 191, 0.12);
  border-radius: 9px;
  background: rgba(15, 21, 19, 0.90);
  box-shadow: inset 0 1px rgba(246, 250, 247, 0.035);
}

#appView .language-switcher button {
  height: 26px;
  border-radius: 7px;
  color: #7f8a84;
}

#appView .language-switcher button:hover {
  color: #dce5df;
  background: rgba(245, 249, 246, 0.045);
}

#appView .language-switcher button.active {
  color: #182207;
  background: linear-gradient(180deg, #c9ec76, #a7d249);
  box-shadow: 0 6px 16px rgba(151, 195, 62, 0.18), inset 0 1px rgba(255, 255, 255, 0.24);
}

#appView .main-nav {
  gap: 6px;
  padding-top: 24px;
  scrollbar-color: rgba(185, 228, 95, 0.18) transparent;
}

#appView .nav-section-label {
  margin: 10px 12px 7px;
  color: #66726d;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
}

#appView .nav-section-system {
  margin-top: 18px;
}

#appView .nav-button {
  min-height: 47px;
  gap: 13px;
  padding: 10px 13px;
  border-radius: 14px;
  color: #8d999f;
  transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition-fast), box-shadow var(--transition);
}

#appView .nav-button svg {
  width: 21px;
  height: 21px;
  color: #6e7a80;
}

#appView .nav-button:hover {
  color: #e1e7e4;
  background: rgba(243, 248, 244, 0.035);
  transform: translateX(2px);
}

#appView .nav-button.active {
  border-color: rgba(185, 228, 95, 0.22);
  color: #f0f4f1;
  background: linear-gradient(100deg, rgba(168, 211, 73, 0.19), rgba(168, 211, 73, 0.075) 72%, rgba(168, 211, 73, 0.025));
  box-shadow: 0 14px 34px rgba(92, 128, 39, 0.12), inset 0 1px rgba(231, 246, 199, 0.055);
}

#appView .nav-button.active::before {
  top: 10px;
  bottom: 10px;
  left: -1px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(185, 228, 95, 0.46);
}

#appView .nav-button::after {
  left: 5px;
  width: 48px;
  height: 48px;
  background: rgba(185, 228, 95, 0.23);
  filter: blur(18px);
}

#appView .nav-button.active::after {
  opacity: 0.72;
}

#appView .nav-button.active > svg {
  color: #d2ef7a;
  filter: drop-shadow(0 0 8px rgba(185, 228, 95, 0.38));
}

#appView .nav-subnav {
  margin-left: 24px;
  padding: 4px 0 4px 16px;
  border-left-color: rgba(185, 228, 95, 0.18);
}

#appView .nav-sub-button {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 9px;
  color: #7d8985;
}

#appView .nav-sub-button:hover,
#appView .nav-sub-button.active {
  color: #c8e86e;
  background: rgba(185, 228, 95, 0.075);
}

#appView .nav-sub-button.active {
  box-shadow: inset 2px 0 var(--accent);
}

#appView .server-release-card {
  min-height: 72px;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  gap: 11px;
  margin: 12px 0;
  padding: 11px 12px;
  overflow: hidden;
  border-color: rgba(185, 228, 95, 0.18);
  border-radius: 15px;
  color: var(--ink);
  background:
    radial-gradient(130% 180% at 0% 0%, rgba(185, 228, 95, 0.13), transparent 52%),
    linear-gradient(145deg, rgba(36, 47, 32, 0.86), rgba(17, 23, 19, 0.96));
  box-shadow: 0 18px 48px rgba(72, 102, 37, 0.12), inset 0 1px rgba(232, 247, 197, 0.055);
}

#appView .server-release-card:hover {
  border-color: rgba(185, 228, 95, 0.32);
  background:
    radial-gradient(145% 190% at 0% 0%, rgba(185, 228, 95, 0.19), transparent 55%),
    linear-gradient(145deg, rgba(42, 56, 36, 0.90), rgba(18, 25, 20, 0.98));
  box-shadow: 0 24px 62px rgba(89, 128, 39, 0.17), inset 0 1px rgba(236, 249, 204, 0.075);
  transform: translateY(-2px);
}

#appView .server-release-card svg {
  width: 24px;
  height: 24px;
  color: var(--accent);
  filter: drop-shadow(0 0 12px rgba(185, 228, 95, 0.20));
}

#appView .server-release-card strong {
  color: var(--ink);
  font-size: 12px;
}

#appView .server-release-card small,
#appView .server-release-card b {
  color: #7d8981;
}

#appView .sidebar-account-wrap {
  padding-top: 12px;
  border-top-color: var(--line);
}

#appView .sidebar-account {
  min-height: 56px;
  border-radius: 14px;
}

#appView .sidebar-account:hover,
#appView .sidebar-account[aria-expanded="true"] {
  border-color: rgba(185, 228, 95, 0.13);
  background: rgba(185, 228, 95, 0.065);
}

#appView .avatar {
  width: 38px;
  height: 38px;
  border-color: rgba(185, 228, 95, 0.24);
  border-radius: 11px;
  color: #1c270a;
  background: linear-gradient(180deg, #bde566, #94c337);
}

#appView .account-copy strong {
  color: var(--ink);
}

#appView .account-copy span,
#appView .account-chevron {
  color: #738078;
}

#appView .user-menu {
  border-color: var(--line-strong);
  border-radius: 14px;
  background: #171d1f;
  box-shadow: var(--shadow);
}

#appView .user-menu-item {
  border-radius: 10px;
}

#appView .user-menu-item:hover {
  background: rgba(185, 228, 95, 0.075);
}

#appView .main-shell {
  background:
    radial-gradient(58% 34% at 48% -12%, rgba(185, 228, 95, 0.025), transparent 76%),
    var(--bg);
}

#appView .topbar {
  min-height: 76px;
  padding: 12px clamp(24px, 2.4vw, 42px);
  border-bottom-color: var(--line);
  background: rgba(8, 11, 13, 0.93);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

#appView .topbar p {
  color: #68736f;
  font-size: 11px;
}

#appView .topbar h2 {
  color: var(--ink);
  font-size: 21px;
}

#appView .topbar-actions {
  gap: 10px;
}

#appView .notification-button,
#appView .theme-toggle,
#appView .toolbar-icon-button {
  width: 42px;
  height: 42px;
  border-color: var(--line);
  border-radius: 13px;
  color: #7e898e;
  background: linear-gradient(145deg, #14191c, #0d1114);
}

#appView .notification-button:hover,
#appView .theme-toggle:hover,
#appView .toolbar-icon-button:hover,
#appView .notification-button:focus-visible,
#appView .theme-toggle:focus-visible,
#appView .toolbar-icon-button:focus-visible {
  border-color: rgba(185, 228, 95, 0.24);
  color: var(--accent);
  background: #171d1f;
  box-shadow: 0 14px 34px rgba(109, 145, 48, 0.10), 0 0 28px rgba(185, 228, 95, 0.055);
}

#appView .quota-display {
  min-height: 42px;
  min-width: 146px;
  padding: 8px 13px;
  border-color: var(--line);
  border-radius: 13px;
  background: linear-gradient(145deg, #14191c, #0d1114);
}

#appView .quota-display strong {
  color: #c6e96f;
}

#appView .page-container {
  padding: clamp(24px, 2.2vw, 38px) clamp(22px, 3vw, 50px) 48px;
}

#appView .page {
  animation: app-page-enter 280ms cubic-bezier(0.2, 0.72, 0.25, 1) both;
}

@keyframes app-page-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

#appView .page-toolbar h3,
#appView .dashboard-heading h3 {
  color: var(--ink);
  font-size: 26px;
}

#appView .page-toolbar p,
#appView .dashboard-heading p,
#appView .section-heading span,
#appView .panel-heading p,
#appView .dashboard-panel-heading p {
  color: var(--faint);
}

#appView .surface,
body > .dialog-backdrop .dialog,
body > .dialog-overlay .dialog-card {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(105% 72% at 0% 0%, rgba(243, 248, 245, 0.035), transparent 48%),
    linear-gradient(148deg, #1a1e21 0%, #121619 46%, #0d1114 100%);
  box-shadow: var(--shadow-soft), inset 0 1px rgba(244, 248, 250, 0.052);
}

#appView .surface:hover {
  border-color: rgba(216, 232, 220, 0.16);
}

#appView input,
#appView select,
#appView textarea,
body > .dialog-backdrop input,
body > .dialog-backdrop select,
body > .dialog-backdrop textarea,
body > .cnc-daily-production-dialog input,
body > .cnc-daily-production-dialog select,
body > .dialog-overlay input,
body > .dialog-overlay select,
body > .dialog-overlay textarea {
  min-height: 40px;
  border-color: var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: var(--input-bg);
}

#appView input:hover,
#appView select:hover,
#appView textarea:hover,
body > .dialog-backdrop input:hover,
body > .dialog-backdrop select:hover,
body > .cnc-daily-production-dialog input:hover,
body > .cnc-daily-production-dialog select:hover,
body > .dialog-backdrop textarea:hover {
  border-color: var(--line-strong);
}

#appView input:focus,
#appView select:focus,
#appView textarea:focus,
body > .dialog-backdrop input:focus,
body > .dialog-backdrop select:focus,
body > .cnc-daily-production-dialog input:focus,
body > .cnc-daily-production-dialog select:focus,
body > .dialog-backdrop textarea:focus {
  border-color: rgba(185, 228, 95, 0.54);
  background: var(--input-focus-bg);
  box-shadow: 0 0 0 3px rgba(185, 228, 95, 0.10), 0 8px 24px rgba(72, 103, 35, 0.08);
}

#appView input::placeholder,
#appView textarea::placeholder {
  color: #65736b;
}

#appView button:focus-visible,
#appView input:focus-visible,
#appView select:focus-visible,
#appView textarea:focus-visible,
#appView summary:focus-visible,
body > .dialog-backdrop button:focus-visible,
body > .dialog-backdrop input:focus-visible,
body > .dialog-backdrop select:focus-visible,
body > .dialog-backdrop textarea:focus-visible,
body > .dialog-overlay button:focus-visible,
body > .dialog-overlay input:focus-visible,
body > .dialog-overlay select:focus-visible,
body > .dialog-overlay textarea:focus-visible,
.monitor-board button:focus-visible {
  outline: 2px solid rgba(185, 228, 95, 0.78);
  outline-offset: 2px;
}

#appView .button,
body > .dialog-backdrop .button,
body > .cnc-daily-production-dialog .button,
body > .dialog-overlay .button {
  min-height: 40px;
  padding: 9px 15px;
  border-radius: 12px;
}

#appView .button-primary,
body > .dialog-backdrop .button-primary,
body > .cnc-daily-production-dialog .button-primary,
body > .dialog-overlay .button-primary {
  border-color: rgba(211, 239, 145, 0.20);
  color: #172006;
  background: linear-gradient(180deg, #caec76, #a5d044);
  box-shadow: 0 9px 22px rgba(150, 195, 60, 0.20), inset 0 1px rgba(255, 255, 255, 0.24);
}

#appView .button-primary:hover:not(:disabled),
body > .dialog-backdrop .button-primary:hover:not(:disabled),
body > .cnc-daily-production-dialog .button-primary:hover:not(:disabled),
body > .dialog-overlay .button-primary:hover:not(:disabled) {
  color: #121a04;
  background: linear-gradient(180deg, #d4f386, #b0d951);
  box-shadow: 0 14px 30px rgba(150, 195, 60, 0.27), 0 0 28px rgba(185, 228, 95, 0.08);
}

#appView .button-secondary,
body > .dialog-backdrop .button-secondary,
body > .cnc-daily-production-dialog .button-secondary,
body > .dialog-overlay .button-secondary {
  border-color: var(--line-strong);
  color: #dce4df;
  background: linear-gradient(145deg, #1b2123, #121719);
}

#appView .button-secondary:hover:not(:disabled),
body > .dialog-backdrop .button-secondary:hover:not(:disabled),
body > .cnc-daily-production-dialog .button-secondary:hover:not(:disabled),
body > .dialog-overlay .button-secondary:hover:not(:disabled) {
  border-color: rgba(185, 228, 95, 0.34);
  color: #cae979;
  background: rgba(185, 228, 95, 0.09);
}

#appView .button-danger,
body > .dialog-backdrop .button-danger,
body > .dialog-overlay .button-danger {
  color: #fff5f4;
  background: linear-gradient(180deg, #ef7d81, #cf565f);
}

#appView .icon-button,
#appView .text-action,
#appView .table-action {
  border-radius: 11px;
}

#appView .text-action,
#appView .table-action {
  color: #bada68;
}

#appView .text-action:hover,
#appView .table-action:hover {
  border-color: rgba(185, 228, 95, 0.24);
  color: #d0ef7b;
  background: rgba(185, 228, 95, 0.08);
}

#appView .table-surface {
  overflow: hidden;
  border-color: var(--line);
  border-radius: var(--radius-lg);
  background: #121719;
  box-shadow: var(--shadow-soft);
}

#appView thead th,
body > .cnc-daily-production-dialog thead th {
  border-bottom-color: var(--line-strong);
  color: #aeb9b3;
  background: #171d1f;
}

#appView tbody td {
  border-bottom-color: var(--line);
  color: #d4dcd7;
}

#appView tbody tr:hover {
  background: rgba(185, 228, 95, 0.045);
}

#appView .badge,
#appView .status-pill,
#appView .cnc-state-pill {
  border-radius: 999px;
}

body > .dialog-backdrop,
body > .dialog-overlay {
  background: rgba(2, 6, 4, 0.80);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

body > .dialog-backdrop .dialog,
body > .dialog-overlay .dialog-card {
  border-color: var(--line-strong);
  border-radius: 20px;
  box-shadow: 0 34px 86px rgba(0, 4, 3, 0.52), inset 0 1px rgba(245, 249, 246, 0.05);
}

body > .dialog-backdrop .dialog-header,
body > .cnc-daily-production-dialog .dialog-header,
body > .dialog-overlay .dialog-header {
  border-bottom-color: var(--line);
  background: #171d1f;
}

body > .dialog-backdrop .dialog-actions,
body > .dialog-overlay .dialog-actions {
  border-top-color: var(--line);
  background: #101518;
}

#appView .segmented-control,
#appView .cnc-diagnostics-tabs,
#appView .cnc-ladder-section-tabs,
#appView .cnc-plc-family-tabs {
  border-color: var(--line);
  border-radius: 13px;
  background: #0e1316;
}

#appView .segmented-control label span,
#appView .cnc-diagnostics-tab,
#appView .cnc-ladder-section-tab,
#appView .cnc-plc-family-tab {
  border-radius: 10px;
}

#appView .segmented-control input:checked + span,
#appView .cnc-diagnostics-tab.active,
#appView .cnc-ladder-section-tab.active,
#appView .cnc-plc-family-tab.active {
  border-color: rgba(185, 228, 95, 0.22);
  color: #d1ed82;
  background: rgba(185, 228, 95, 0.11);
  box-shadow: 0 8px 24px rgba(98, 132, 42, 0.08);
}

/* Workbench cards keep the existing data and module arrangement. */
#appView .dashboard-metrics {
  gap: 16px;
}

#appView .dashboard-metric {
  min-height: 166px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  border-color: rgba(216, 230, 221, 0.12);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(80% 72% at 0% 0%, rgba(185, 228, 95, 0.055), transparent 58%),
    linear-gradient(148deg, #1b1f22 0%, #15191c 38%, #0e1215 100%);
  box-shadow: 0 22px 45px rgba(0, 4, 3, 0.24), inset 0 1px rgba(244, 248, 250, 0.06), inset 0 -28px 45px rgba(0, 0, 0, 0.12);
}

#appView .dashboard-metric::before {
  display: none;
}

#appView .dashboard-metric::after {
  position: absolute;
  top: -96px;
  left: -100px;
  display: block;
  width: 240px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(185, 228, 95, 0.10), rgba(185, 228, 95, 0.035) 44%, transparent 72%);
  content: "";
  filter: blur(10px);
  pointer-events: none;
}

#appView .dashboard-metric:hover {
  border-color: rgba(185, 228, 95, 0.20);
  background:
    radial-gradient(80% 72% at 0% 0%, rgba(185, 228, 95, 0.075), transparent 58%),
    linear-gradient(148deg, #1e2325 0%, #171c1e 38%, #101518 100%);
  box-shadow: var(--shadow-hover), inset 0 1px rgba(244, 248, 250, 0.065);
}

#appView .dashboard-metric .metric-icon,
#appView .dashboard-metric:nth-child(2) .metric-icon,
#appView .dashboard-metric:nth-child(3) .metric-icon,
#appView .dashboard-metric:nth-child(4) .metric-icon {
  position: relative;
  width: 48px;
  height: 46px;
  place-items: center start;
  border: 0;
  color: var(--accent);
  background: transparent;
  filter: drop-shadow(0 0 9px rgba(185, 228, 95, 0.42)) drop-shadow(0 0 26px rgba(185, 228, 95, 0.14));
}

#appView .dashboard-metric .metric-icon::before {
  position: absolute;
  top: -19px;
  left: -19px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185, 228, 95, 0.18), rgba(185, 228, 95, 0.07) 38%, transparent 74%);
  content: "";
  pointer-events: none;
}

#appView .dashboard-metric .metric-icon svg {
  position: relative;
  width: 28px;
  height: 28px;
}

#appView .dashboard-metric > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

#appView .dashboard-metric strong {
  order: 1;
  margin-top: 10px;
  color: var(--ink);
  font-size: 36px;
}

#appView .dashboard-metric > div > span {
  order: 2;
  margin-top: 13px;
  color: #929d97;
  font-size: 13px;
}

#appView .dashboard-metric small {
  order: 3;
  margin-top: 5px;
  color: #68736e;
}

#appView .dashboard-panel,
#appView .dashboard-runtime,
#appView .dashboard-quick-actions {
  border-radius: var(--radius-lg);
}

#appView .dashboard-runtime-heading,
#appView .dashboard-panel-heading {
  border-bottom-color: var(--line);
}

#appView .runtime-overall {
  border-color: rgba(114, 201, 157, 0.26);
  color: var(--success);
  background: rgba(114, 201, 157, 0.08);
}

#appView .runtime-item {
  border-color: var(--line);
}

#appView .runtime-item:hover {
  background: rgba(185, 228, 95, 0.045);
}

#appView .runtime-item-icon {
  border-color: rgba(185, 228, 95, 0.20);
  border-radius: 10px;
  color: var(--accent);
  background: rgba(185, 228, 95, 0.075);
}

#appView .dashboard-quick-actions {
  border-color: rgba(185, 228, 95, 0.17);
  background:
    radial-gradient(100% 150% at 0% 0%, rgba(185, 228, 95, 0.08), transparent 56%),
    linear-gradient(145deg, #192018, #101614);
}

#appView .dashboard-cnc-summary > span,
#appView .dashboard-processing-summary > span,
#appView .dashboard-cnc-device-list > *,
#appView .dashboard-alert-list > *,
#appView .dashboard-document-list > *,
#appView .dashboard-processing-table > * {
  border-color: rgba(218, 231, 223, 0.075);
  border-radius: 13px;
  background: rgba(24, 29, 30, 0.72);
}

#appView .dashboard-cnc-device-list > *:hover,
#appView .dashboard-processing-table > *:hover {
  border-color: rgba(185, 228, 95, 0.18);
  background: rgba(185, 228, 95, 0.045);
}

#appView .warehouse-metric,
#appView .report-kpi,
#appView .cnc-device-stat,
#appView .site-analytics-metric,
#appView .after-sales-summary-card,
#appView .visitor-summary-card,
#appView .expense-summary-card,
#appView .processing-summary-card {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(95% 80% at 0% 0%, rgba(185, 228, 95, 0.045), transparent 58%),
    linear-gradient(148deg, #1a1f21, #101518);
  box-shadow: var(--shadow-soft), inset 0 1px rgba(244, 248, 250, 0.045);
}

#appView .metric-icon,
#appView .report-kpi .metric-icon,
#appView .warehouse-metric .metric-icon {
  border-radius: 12px;
  color: var(--accent);
  background: rgba(185, 228, 95, 0.09);
}

#appView .cnc-code-editor,
#appView .cnc-parameter-editor,
#appView .cnc-ladder-canvas-wrap,
#appView .cnc-control-screen,
#appView .cnc-diagnostics-stage {
  border-color: var(--line);
  border-radius: 15px;
  background: #0d1215;
}

#appView .cnc-code-lines {
  border-right-color: var(--line);
  background: #11171a;
}

#appView :is(.button, .icon-button, .notification-button, .theme-toggle, .toolbar-icon-button, .server-release-card, .text-action, .table-action) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#appView :is(.button, .icon-button, .notification-button, .theme-toggle, .toolbar-icon-button, .server-release-card, .text-action, .table-action)::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(150px circle at var(--feedback-x, 50%) var(--feedback-y, 50%), rgba(225, 247, 166, 0.11), rgba(185, 228, 95, 0.035) 42%, transparent 72%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

#appView :is(.button, .icon-button, .notification-button, .theme-toggle, .toolbar-icon-button, .server-release-card, .text-action, .table-action) > * {
  position: relative;
  z-index: 1;
}

@media (hover: hover) {
  #appView :is(.button, .icon-button, .notification-button, .theme-toggle, .toolbar-icon-button, .server-release-card, .text-action, .table-action):hover::after {
    opacity: 1;
  }
}

#appView :is(.button, .icon-button, .notification-button, .theme-toggle, .toolbar-icon-button, .server-release-card, .text-action, .table-action):active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
  transition-duration: 60ms;
}

/* Full-screen monitor boards share the same graphite and lime language. */
.monitor-board {
  --monitor-bg: #070a0d;
  --monitor-surface: rgba(19, 25, 27, 0.94);
  --monitor-surface-strong: #151b1d;
  --monitor-border: rgba(219, 232, 224, 0.11);
  --monitor-border-strong: rgba(210, 232, 190, 0.20);
  --monitor-ink: #eef2f4;
  --monitor-muted: #98a29f;
  --monitor-faint: #68736f;
  --monitor-accent: #b9e45f;
  --monitor-success: #72c99d;
  --monitor-warning: #e0ad5b;
  --monitor-danger: #eb747a;
  --monitor-cyan: #91b775;
  --board-surface: var(--monitor-surface-strong);
  --board-surface-strong: #192022;
  --board-line: var(--monitor-border);
  background:
    radial-gradient(52% 34% at 48% -8%, rgba(185, 228, 95, 0.045), transparent 72%),
    var(--monitor-bg);
}

.monitor-board .monitor-board-summary > div,
.monitor-board .monitor-panel,
.monitor-board .cnc-device-board-card,
.monitor-board .after-sales-board-card {
  border-radius: 14px;
  background: linear-gradient(148deg, rgba(28, 34, 35, 0.96), rgba(15, 20, 22, 0.96));
  box-shadow: 0 16px 38px rgba(0, 4, 3, 0.20), inset 0 1px rgba(244, 248, 250, 0.04);
}

.monitor-board .monitor-board-summary > div::before {
  background: var(--monitor-accent);
}

.monitor-board :is(.cnc-device-board-icon-button, .after-sales-board-icon-button) {
  border-radius: 11px;
}

.monitor-board :is(.cnc-device-board-icon-button, .after-sales-board-icon-button):hover,
.monitor-board :is(.cnc-device-board-icon-button, .after-sales-board-icon-button):focus-visible {
  border-color: rgba(185, 228, 95, 0.34);
  color: #d2ef7a;
  background: rgba(185, 228, 95, 0.09);
}

/* Matching light application theme. The login page is intentionally excluded. */
html[data-theme="light"] #appView,
html[data-theme="light"] body > .dialog-backdrop,
html[data-theme="light"] body > .dialog-overlay,
html[data-theme="light"] body > .cnc-daily-production-dialog,
html[data-theme="light"] body > .monitor-board {
  --bg: #f2f5f3;
  --surface: #fbfdfb;
  --surface-solid: #fbfdfb;
  --surface-soft: #edf2ee;
  --surface-raised: #fdfefd;
  --ink: #18221d;
  --muted: #5e6b64;
  --faint: #7a8880;
  --line: rgba(34, 58, 43, 0.11);
  --line-strong: rgba(53, 84, 59, 0.18);
  --accent: #789d20;
  --accent-dark: #5a7912;
  --brand: #789d20;
  --brand-strong: #5a7912;
  --info: #5d7f4f;
  --success: #2c865e;
  --warning: #a56e16;
  --danger: #bc4d56;
  --input-bg: #f4f7f4;
  --input-focus-bg: #fdfefd;
  --shadow: 0 26px 64px rgba(32, 58, 40, 0.14), 0 5px 15px rgba(32, 58, 40, 0.07);
  --shadow-soft: 0 10px 28px rgba(32, 58, 40, 0.08), 0 1px 4px rgba(32, 58, 40, 0.05);
  --shadow-hover: 0 18px 38px rgba(32, 58, 40, 0.13), 0 4px 10px rgba(32, 58, 40, 0.06);
}

html[data-theme="light"] #appView.app-view,
html[data-theme="light"] #appView .main-shell {
  background:
    radial-gradient(60% 34% at 48% -12%, rgba(120, 157, 32, 0.055), transparent 74%),
    var(--bg);
}

html[data-theme="light"] #appView .sidebar {
  color: var(--ink);
  border-right-color: rgba(53, 84, 59, 0.13);
  background:
    radial-gradient(115% 42% at 0% 0%, rgba(148, 190, 63, 0.11), transparent 58%),
    linear-gradient(180deg, #edf3ec 0%, #e8eeea 42%, #e3ebe7 100%);
  box-shadow: 14px 0 42px rgba(34, 58, 43, 0.09);
}

html[data-theme="light"] #appView .sidebar-brand,
html[data-theme="light"] #appView .sidebar-account-wrap {
  border-color: rgba(53, 84, 59, 0.12);
}

html[data-theme="light"] #appView .sidebar-brand strong,
html[data-theme="light"] #appView .account-copy strong {
  color: #203027;
}

html[data-theme="light"] #appView .sidebar-brand span,
html[data-theme="light"] #appView .account-copy span,
html[data-theme="light"] #appView .account-chevron,
html[data-theme="light"] #appView .server-release-card small,
html[data-theme="light"] #appView .server-release-card b {
  color: #718078;
}

html[data-theme="light"] #appView .language-switcher {
  border-color: rgba(53, 84, 59, 0.14);
  background: rgba(248, 251, 248, 0.82);
}

html[data-theme="light"] #appView .language-switcher button {
  color: #67766e;
}

html[data-theme="light"] #appView .language-switcher button:hover {
  color: #25382c;
  background: rgba(74, 103, 80, 0.07);
}

html[data-theme="light"] #appView .language-switcher button.active {
  color: #f8fbf8;
  background: linear-gradient(180deg, #88aa32, #6f921d);
}

html[data-theme="light"] #appView .nav-section-label {
  color: #75827b;
}

html[data-theme="light"] #appView .nav-button,
html[data-theme="light"] #appView .nav-sub-button {
  color: #53645b;
}

html[data-theme="light"] #appView .nav-button svg {
  color: #718078;
}

html[data-theme="light"] #appView .nav-button:hover {
  color: #23372b;
  background: rgba(102, 137, 55, 0.08);
}

html[data-theme="light"] #appView .nav-button.active {
  border-color: rgba(120, 157, 32, 0.22);
  color: #23352a;
  background: linear-gradient(100deg, rgba(137, 178, 50, 0.18), rgba(137, 178, 50, 0.075) 72%, rgba(137, 178, 50, 0.025));
  box-shadow: 0 12px 28px rgba(83, 115, 40, 0.10), inset 0 1px rgba(253, 254, 253, 0.60);
}

html[data-theme="light"] #appView .nav-button.active::after {
  background: rgba(120, 157, 32, 0.20);
}

html[data-theme="light"] #appView .nav-button.active > svg,
html[data-theme="light"] #appView .nav-sub-button.active {
  color: #658710;
  filter: drop-shadow(0 0 6px rgba(120, 157, 32, 0.22));
}

html[data-theme="light"] #appView .nav-subnav {
  border-left-color: rgba(120, 157, 32, 0.22);
}

html[data-theme="light"] #appView .nav-sub-button:hover,
html[data-theme="light"] #appView .nav-sub-button.active {
  color: #5a7912;
  background: rgba(120, 157, 32, 0.09);
}

html[data-theme="light"] #appView .server-release-card {
  color: #243229;
  border-color: rgba(120, 157, 32, 0.19);
  background:
    radial-gradient(130% 180% at 0% 0%, rgba(146, 184, 62, 0.13), transparent 52%),
    linear-gradient(145deg, rgba(244, 248, 241, 0.96), rgba(233, 240, 232, 0.98));
  box-shadow: 0 14px 34px rgba(64, 94, 51, 0.09), inset 0 1px rgba(253, 254, 253, 0.80);
}

html[data-theme="light"] #appView .server-release-card:hover {
  border-color: rgba(120, 157, 32, 0.34);
  background: #f7faf5;
}

html[data-theme="light"] #appView .server-release-card strong {
  color: #243229;
}

html[data-theme="light"] #appView .avatar {
  border-color: rgba(120, 157, 32, 0.24);
  color: #f7faf6;
  background: linear-gradient(180deg, #89aa33, #6d901c);
}

html[data-theme="light"] #appView .sidebar-account:hover,
html[data-theme="light"] #appView .sidebar-account[aria-expanded="true"] {
  border-color: rgba(120, 157, 32, 0.14);
  background: rgba(120, 157, 32, 0.08);
}

html[data-theme="light"] #appView .user-menu {
  background: #f9fcf9;
}

html[data-theme="light"] #appView .topbar {
  border-bottom-color: var(--line);
  background: rgba(242, 245, 243, 0.91);
}

html[data-theme="light"] #appView .topbar h2 {
  color: var(--ink);
}

html[data-theme="light"] #appView .notification-button,
html[data-theme="light"] #appView .theme-toggle,
html[data-theme="light"] #appView .toolbar-icon-button,
html[data-theme="light"] #appView .quota-display {
  color: #64726a;
  border-color: var(--line);
  background: linear-gradient(145deg, #fdfefd, #edf2ee);
}

html[data-theme="light"] #appView .notification-button:hover,
html[data-theme="light"] #appView .theme-toggle:hover,
html[data-theme="light"] #appView .toolbar-icon-button:hover {
  color: #63850f;
  border-color: rgba(120, 157, 32, 0.27);
  background: #f9fcf8;
}

html[data-theme="light"] #appView .quota-display strong {
  color: #658710;
}

html[data-theme="light"] #appView .surface,
html[data-theme="light"] body > .dialog-backdrop .dialog,
html[data-theme="light"] body > .dialog-overlay .dialog-card {
  border-color: var(--line);
  background:
    radial-gradient(105% 72% at 0% 0%, rgba(126, 161, 58, 0.035), transparent 48%),
    linear-gradient(148deg, #fdfefd 0%, #f8fbf8 48%, #f0f4f1 100%);
  box-shadow: var(--shadow-soft), inset 0 1px rgba(253, 254, 253, 0.86);
}

html[data-theme="light"] #appView input,
html[data-theme="light"] #appView select,
html[data-theme="light"] #appView textarea,
html[data-theme="light"] body > .dialog-backdrop input,
html[data-theme="light"] body > .dialog-backdrop select,
html[data-theme="light"] body > .cnc-daily-production-dialog input,
html[data-theme="light"] body > .cnc-daily-production-dialog select,
html[data-theme="light"] body > .dialog-backdrop textarea {
  color: var(--ink);
  border-color: var(--line);
  background: var(--input-bg);
}

html[data-theme="light"] #appView input:focus,
html[data-theme="light"] #appView select:focus,
html[data-theme="light"] body > .cnc-daily-production-dialog input:focus,
html[data-theme="light"] body > .cnc-daily-production-dialog select:focus,
html[data-theme="light"] #appView textarea:focus {
  border-color: rgba(120, 157, 32, 0.52);
  background: var(--input-focus-bg);
  box-shadow: 0 0 0 3px rgba(120, 157, 32, 0.10);
}

html[data-theme="light"] #appView .button-primary,
html[data-theme="light"] body > .dialog-backdrop .button-primary,
html[data-theme="light"] body > .cnc-daily-production-dialog .button-primary,
html[data-theme="light"] body > .dialog-overlay .button-primary {
  color: #f8fbf7;
  border-color: #6c9018;
  background: linear-gradient(180deg, #87aa31, #6f921d);
  box-shadow: 0 8px 20px rgba(82, 116, 35, 0.18);
}

html[data-theme="light"] #appView .button-primary:hover:not(:disabled),
html[data-theme="light"] body > .cnc-daily-production-dialog .button-primary:hover:not(:disabled) {
  color: #f8fbf7;
  background: linear-gradient(180deg, #91b43b, #789b24);
}

html[data-theme="light"] #appView .button-secondary,
html[data-theme="light"] body > .dialog-backdrop .button-secondary,
html[data-theme="light"] body > .cnc-daily-production-dialog .button-secondary,
html[data-theme="light"] body > .dialog-overlay .button-secondary {
  color: #293a30;
  border-color: var(--line-strong);
  background: #f5f8f5;
}

html[data-theme="light"] #appView .button-secondary:hover:not(:disabled),
html[data-theme="light"] body > .cnc-daily-production-dialog .button-secondary:hover:not(:disabled) {
  color: #5c7d10;
  border-color: rgba(120, 157, 32, 0.32);
  background: rgba(120, 157, 32, 0.08);
}

html[data-theme="light"] #appView .table-surface {
  background: #fbfdfb;
}

html[data-theme="light"] #appView thead th,
html[data-theme="light"] body > .cnc-daily-production-dialog thead th,
html[data-theme="light"] body > .dialog-backdrop .dialog-header,
html[data-theme="light"] body > .cnc-daily-production-dialog .dialog-header,
html[data-theme="light"] body > .dialog-overlay .dialog-header {
  color: #59685f;
  background: #edf2ee;
}

html[data-theme="light"] #appView tbody td {
  color: #304037;
}

html[data-theme="light"] #appView tbody tr:hover {
  background: rgba(120, 157, 32, 0.055);
}

html[data-theme="light"] body > .dialog-backdrop,
html[data-theme="light"] body > .dialog-overlay {
  background: rgba(32, 48, 38, 0.36);
}

html[data-theme="light"] body > .dialog-backdrop .dialog-actions,
html[data-theme="light"] body > .dialog-overlay .dialog-actions {
  background: #eef3ef;
}

html[data-theme="light"] #appView .segmented-control,
html[data-theme="light"] #appView .cnc-diagnostics-tabs,
html[data-theme="light"] #appView .cnc-ladder-section-tabs,
html[data-theme="light"] #appView .cnc-plc-family-tabs {
  background: #edf2ee;
}

html[data-theme="light"] #appView .segmented-control input:checked + span,
html[data-theme="light"] #appView .cnc-diagnostics-tab.active,
html[data-theme="light"] #appView .cnc-ladder-section-tab.active,
html[data-theme="light"] #appView .cnc-plc-family-tab.active {
  color: #5b7b13;
  border-color: rgba(120, 157, 32, 0.22);
  background: rgba(120, 157, 32, 0.10);
}

html[data-theme="light"] #appView .dashboard-metric {
  border-color: rgba(53, 84, 59, 0.11);
  background:
    radial-gradient(80% 72% at 0% 0%, rgba(120, 157, 32, 0.07), transparent 58%),
    linear-gradient(148deg, #fdfefd 0%, #f8fbf8 44%, #eef3ef 100%);
  box-shadow: var(--shadow-soft), inset 0 1px rgba(253, 254, 253, 0.88);
}

html[data-theme="light"] #appView .dashboard-metric:hover {
  border-color: rgba(120, 157, 32, 0.22);
  background:
    radial-gradient(80% 72% at 0% 0%, rgba(120, 157, 32, 0.09), transparent 58%),
    linear-gradient(148deg, #fdfefd, #f1f6f1);
}

html[data-theme="light"] #appView .dashboard-metric strong {
  color: var(--ink);
}

html[data-theme="light"] #appView .dashboard-metric > div > span {
  color: #5e6d64;
}

html[data-theme="light"] #appView .dashboard-metric small {
  color: #7a8880;
}

html[data-theme="light"] #appView .dashboard-runtime-heading,
html[data-theme="light"] #appView .dashboard-panel-heading {
  background: transparent;
}

html[data-theme="light"] #appView .runtime-item:hover,
html[data-theme="light"] #appView .dashboard-cnc-device-list > *:hover,
html[data-theme="light"] #appView .dashboard-processing-table > *:hover {
  background: rgba(120, 157, 32, 0.055);
}

html[data-theme="light"] #appView .dashboard-quick-actions {
  border-color: rgba(120, 157, 32, 0.17);
  background:
    radial-gradient(100% 150% at 0% 0%, rgba(120, 157, 32, 0.08), transparent 56%),
    linear-gradient(145deg, #f8fbf7, #edf3ed);
}

html[data-theme="light"] #appView .dashboard-cnc-summary > span,
html[data-theme="light"] #appView .dashboard-processing-summary > span,
html[data-theme="light"] #appView .dashboard-cnc-device-list > *,
html[data-theme="light"] #appView .dashboard-alert-list > *,
html[data-theme="light"] #appView .dashboard-document-list > *,
html[data-theme="light"] #appView .dashboard-processing-table > * {
  border-color: rgba(53, 84, 59, 0.085);
  background: rgba(245, 249, 245, 0.82);
}

html[data-theme="light"] #appView .warehouse-metric,
html[data-theme="light"] #appView .report-kpi,
html[data-theme="light"] #appView .cnc-device-stat,
html[data-theme="light"] #appView .site-analytics-metric,
html[data-theme="light"] #appView .after-sales-summary-card,
html[data-theme="light"] #appView .visitor-summary-card,
html[data-theme="light"] #appView .expense-summary-card,
html[data-theme="light"] #appView .processing-summary-card {
  border-color: var(--line);
  background:
    radial-gradient(95% 80% at 0% 0%, rgba(120, 157, 32, 0.05), transparent 58%),
    linear-gradient(148deg, #fdfefd, #eef3ef);
}

html[data-theme="light"] #appView .cnc-code-editor,
html[data-theme="light"] #appView .cnc-parameter-editor,
html[data-theme="light"] #appView .cnc-ladder-canvas-wrap,
html[data-theme="light"] #appView .cnc-control-screen,
html[data-theme="light"] #appView .cnc-diagnostics-stage {
  background: #f5f8f5;
}

html[data-theme="light"] #appView .cnc-code-lines {
  background: #e9efea;
}

html[data-theme="light"] .monitor-board {
  --monitor-bg: #eef3ef;
  --monitor-surface: rgba(250, 252, 250, 0.95);
  --monitor-surface-strong: #f8fbf8;
  --monitor-border: rgba(53, 84, 59, 0.12);
  --monitor-border-strong: rgba(53, 84, 59, 0.20);
  --monitor-ink: #18221d;
  --monitor-muted: #5e6b64;
  --monitor-faint: #7a8880;
  --monitor-accent: #789d20;
  --monitor-success: #2c865e;
  --monitor-warning: #a56e16;
  --monitor-danger: #bc4d56;
  --monitor-cyan: #5d7f4f;
  --board-surface: #f8fbf8;
  --board-surface-strong: #edf2ee;
  background:
    radial-gradient(52% 34% at 48% -8%, rgba(120, 157, 32, 0.08), transparent 72%),
    var(--monitor-bg);
}

html[data-theme="light"] .monitor-board .monitor-board-summary > div,
html[data-theme="light"] .monitor-board .monitor-panel,
html[data-theme="light"] .monitor-board .cnc-device-board-card,
html[data-theme="light"] .monitor-board .after-sales-board-card {
  background: linear-gradient(148deg, #fdfefd, #eef3ef);
  box-shadow: 0 12px 30px rgba(32, 58, 40, 0.08), inset 0 1px rgba(253, 254, 253, 0.86);
}

@media (max-width: 1500px) and (min-width: 1181px) {
  #appView .sidebar {
    padding-inline: 13px;
  }

  #appView .nav-button {
    min-height: 44px;
  }

  #appView .dashboard-metric {
    min-height: 154px;
    padding: 19px;
  }
}

@media (max-height: 820px) and (min-width: 1181px) {
  #appView .sidebar-brand {
    min-height: 68px;
    padding-bottom: 12px;
  }

  #appView .sidebar-brand img,
  #appView .sidebar-logo-img {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  #appView .main-nav {
    gap: 3px;
    padding-top: 12px;
  }

  #appView .nav-button {
    min-height: 39px;
    padding-block: 7px;
  }

  #appView .nav-section-system {
    margin-top: 10px;
  }

  #appView .server-release-card {
    min-height: 58px;
    margin-block: 6px;
  }

  #appView .sidebar-account {
    min-height: 48px;
  }
}

@media (max-width: 900px) {
  #appView .page-container {
    padding: 22px 18px 34px;
  }

  #appView .dashboard-metric {
    min-height: 146px;
  }
}

@media (max-width: 620px) {
  #appView .topbar {
    min-height: 68px;
    padding-inline: 15px;
  }

  #appView .page-container {
    padding-inline: 14px;
  }

  #appView .page-toolbar h3,
  #appView .dashboard-heading h3 {
    font-size: 23px;
  }

  #appView .dashboard-metric {
    min-height: 142px;
    padding: 18px;
  }
}

/* V3.0.96 UI regression fixes: layered editor, ladder palette and phone header. */
#appView .cnc-code-editor textarea,
#appView .cnc-code-editor textarea:hover,
#appView .cnc-code-editor textarea:focus,
html[data-theme="light"] #appView .cnc-code-editor textarea,
html[data-theme="light"] #appView .cnc-code-editor textarea:hover,
html[data-theme="light"] #appView .cnc-code-editor textarea:focus {
  min-height: 0;
  border: 0;
  border-radius: 0;
  color: transparent;
  background: transparent;
  box-shadow: none;
  -webkit-text-fill-color: transparent;
}

#appView .cnc-code-editor textarea::selection {
  background: rgba(114, 200, 208, 0.18);
}

#appView .cnc-ladder-page {
  --cnc-ladder-rail: #87928e;
  --cnc-ladder-address: #accb70;
}

#appView .cnc-ladder-element-palette button:hover,
#appView .cnc-ladder-element-palette button.is-active {
  border-color: rgba(185, 228, 95, 0.42);
  background: rgba(185, 228, 95, 0.085);
}

#appView .metric-icon-info {
  color: var(--info);
  background: color-mix(in srgb, var(--info) 12%, transparent);
}

#appView .cnc-diagnostics-mode button.is-active,
#appView .cnc-diagnostics-tabs button.is-active {
  color: #182207;
  background: linear-gradient(180deg, #c6e975, #a5cf48);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.20);
}

html[data-theme="light"] #appView .cnc-diagnostics-mode button.is-active,
html[data-theme="light"] #appView .cnc-diagnostics-tabs button.is-active {
  color: #f8fbf7;
  background: linear-gradient(180deg, #7f9f2c, #68881b);
}

#appView .cnc-ladder-viewport:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(185, 228, 95, 0.48);
}

#appView .cnc-ladder-row.is-selected > .cnc-ladder-row-number,
#appView .cnc-ladder-node.is-selected {
  color: #eef3e5;
  background: rgba(185, 228, 95, 0.13);
}

#appView .cnc-ladder-node:hover {
  background: rgba(185, 228, 95, 0.055);
}

#appView .cnc-ladder-node.is-range-selected {
  background: rgba(185, 228, 95, 0.085);
}

#appView .cnc-ladder-node.is-selected {
  box-shadow: inset 0 0 0 2px rgba(185, 228, 95, 0.72);
}

#appView .cnc-ladder-row-comment input:hover,
#appView .cnc-ladder-row-comment input:focus {
  border-color: rgba(185, 228, 95, 0.30);
  background: rgba(185, 228, 95, 0.045);
}

#appView .cnc-ladder-branch-toggle input {
  accent-color: var(--accent);
}

html[data-theme="light"] #appView .cnc-ladder-page {
  --cnc-ladder-rail: #506057;
  --cnc-ladder-address: #638319;
}

html[data-theme="light"] #appView .cnc-ladder-elementbar {
  border-bottom-color: rgba(53, 84, 59, 0.13);
  background: #f3f6f3;
}

html[data-theme="light"] #appView .cnc-ladder-selection-actions {
  border-top-color: rgba(53, 84, 59, 0.11);
  background: #f8faf8;
}

html[data-theme="light"] #appView .cnc-ladder-selection-actions > span,
html[data-theme="light"] #appView .cnc-ladder-selection-actions button {
  color: #64736a;
}

html[data-theme="light"] #appView .cnc-ladder-selection-actions button:hover:not(:disabled) {
  color: #2f422f;
  border-color: rgba(120, 157, 32, 0.20);
  background: rgba(120, 157, 32, 0.07);
}

@media (max-width: 980px) {
  #appView .sidebar {
    width: 100%;
    height: 72px;
    min-height: 72px;
    max-height: 72px;
    grid-template-columns: 190px minmax(0, 1fr) 190px;
    gap: 12px;
    padding: 12px 16px;
    overflow: visible;
  }

  #appView .sidebar-brand {
    min-height: 0;
    padding: 0;
    border: 0;
  }

  #appView .main-nav {
    justify-content: center;
    gap: 4px;
    padding: 0;
    overflow: visible;
  }

  #appView .nav-button {
    width: auto;
    min-width: 42px;
    min-height: 42px;
    padding: 9px 10px;
  }

  #appView .nav-button span,
  #appView .nav-chevron {
    display: none;
  }

  #appView .sidebar-account-wrap,
  #appView .sidebar-account {
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
}

@media (max-width: 680px) {
  #appView .sidebar {
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
    padding: 10px 12px;
  }

  #appView .sidebar-brand,
  #appView .sidebar-brand div,
  #appView .account-copy,
  #appView .avatar {
    display: none;
  }

  #appView .main-nav {
    justify-content: flex-start;
    gap: 2px;
    padding-right: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  #appView .main-nav::-webkit-scrollbar {
    display: none;
  }

  #appView .main-nav > .nav-button,
  #appView .main-nav > .nav-group {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  #appView .sidebar-account {
    display: block;
  }
}

@media (max-width: 620px) {
  #appView .topbar > div:first-child {
    display: none;
  }

  #appView .topbar-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Keep the desktop sidebar intact between the compact-shell and mobile breakpoints. */
@media (min-width: 901px) and (max-width: 980px) {
  #appView .sidebar {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    flex-direction: column;
    grid-template-columns: none;
    align-items: stretch;
    align-self: auto;
    gap: 0;
    padding: 20px 16px 16px;
    overflow: hidden;
  }

  #appView .sidebar-brand {
    min-height: 86px;
    gap: 13px;
    padding: 0 8px 18px;
    border-bottom: 1px solid var(--line);
  }

  #appView .main-nav {
    display: grid;
    min-height: 0;
    align-content: start;
    flex: 1 1 auto;
    justify-content: stretch;
    gap: 6px;
    padding: 24px 0 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #appView .nav-button {
    width: 100%;
    min-width: 0;
    min-height: 47px;
    padding: 10px 13px;
  }

  #appView .nav-button span,
  #appView .nav-chevron,
  #appView .nav-section-label {
    display: block;
  }

  #appView .nav-subnav {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    width: auto;
    max-height: none;
    margin-left: 24px;
    padding: 4px 0 4px 16px;
    transform: none;
    overflow: visible;
    border: 0;
    border-left: 1px solid rgba(185, 228, 95, 0.18);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #appView .server-release-card {
    display: grid;
  }

  #appView .sidebar-account-wrap {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }

  #appView .sidebar-account {
    min-height: 56px;
    padding: 6px 8px;
    border: 1px solid transparent;
  }

  #appView .mobile-only-menu-item {
    display: none;
  }

  #appView .topbar {
    position: relative;
  }
}

@media (prefers-reduced-motion: reduce) {
  #appView *,
  #appView *::before,
  #appView *::after,
  .monitor-board *,
  .monitor-board *::before,
  .monitor-board *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Keep the board controls usable at every desktop breakpoint. */
.cnc-board-font-control input,
.after-sales-board-font-control input {
  --board-font-progress: 15.38%;
  --board-font-track: rgba(136, 155, 183, 0.22);
  width: 84px;
  height: 18px;
  margin: 0;
  padding: 0;
  display: block;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  overflow: visible;
}

.cnc-board-font-control input::-webkit-slider-runnable-track,
.after-sales-board-font-control input::-webkit-slider-runnable-track {
  width: calc(100% + 12px);
  height: 4px;
  margin-left: -6px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--monitor-accent) 0%,
    var(--monitor-accent) var(--board-font-progress),
    var(--board-font-track) var(--board-font-progress),
    var(--board-font-track) 100%
  );
}

.cnc-board-font-control input::-webkit-slider-thumb,
.after-sales-board-font-control input::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--monitor-bg);
  border-radius: 50%;
  background: var(--monitor-accent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 2px 8px rgba(0, 0, 0, 0.28);
}

.cnc-board-font-control input::-moz-range-track,
.after-sales-board-font-control input::-moz-range-track {
  width: calc(100% + 12px);
  height: 4px;
  margin-left: -6px;
  border: 0;
  border-radius: 999px;
  background: var(--board-font-track);
}

.cnc-board-font-control input::-moz-range-progress,
.after-sales-board-font-control input::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--monitor-accent);
}

.cnc-board-font-control input::-moz-range-thumb,
.after-sales-board-font-control input::-moz-range-thumb {
  width: 8px;
  height: 8px;
  border: 2px solid var(--monitor-bg);
  border-radius: 50%;
  background: var(--monitor-accent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 2px 8px rgba(0, 0, 0, 0.28);
}

.cnc-board-font-control input:focus-visible,
.after-sales-board-font-control input:focus-visible {
  outline: 2px solid var(--monitor-accent);
  outline-offset: 3px;
}

html[data-theme="light"] .cnc-board-font-control input,
html[data-theme="light"] .after-sales-board-font-control input {
  --board-font-track: rgba(37, 55, 82, 0.18);
}

/* Settings must cover the board content instead of participating in its grid. */
.monitor-board > .cnc-device-board-settings,
.monitor-board > .after-sales-board-settings {
  position: absolute;
  z-index: 20;
  min-height: 0;
  opacity: 1;
  isolation: isolate;
  mix-blend-mode: normal;
  background-color: #151e2b;
  background-image: none;
  pointer-events: auto;
}

html[data-theme="light"] .monitor-board > .cnc-device-board-settings,
html[data-theme="light"] .monitor-board > .after-sales-board-settings {
  background-color: #f8fbfd;
}

/* Keep every visible text layer on both monitor boards tied to its font slider. */
.monitor-board {
  --monitor-board-font-size: 18px;
  font-size: calc(var(--monitor-board-font-size) * 0.8889);
}

.monitor-board.cnc-device-board {
  --monitor-board-font-size: var(--cnc-board-font-size, 18px);
}

/* Keep the sync status readable beside the clock at large display sizes. */
.monitor-board.cnc-device-board .cnc-device-board-sync {
  flex: 0 0 224px;
  min-width: 224px;
}

.monitor-board.cnc-device-board .cnc-device-board-sync > span {
  min-width: 0;
}

.monitor-board.cnc-device-board .cnc-device-board-sync small {
  white-space: nowrap;
}

.monitor-board.after-sales-board {
  --monitor-board-font-size: var(--after-sales-board-font-size, 18px);
}

.monitor-board :where(.monitor-board-brand span,
  .cnc-device-board-brand span,
  .after-sales-board-brand span) {
  font-size: clamp(8px, calc(var(--monitor-board-font-size) * 0.56), 22px);
}

.monitor-board :where(.monitor-board-brand h2,
  .cnc-device-board-brand h2,
  .after-sales-board-brand h2) {
  font-size: clamp(16px, calc(var(--monitor-board-font-size) * 1.17), 42px);
}

.monitor-board :where(.monitor-board-sync strong,
  .cnc-device-board-sync strong,
  .after-sales-board-sync strong) {
  font-size: clamp(10px, calc(var(--monitor-board-font-size) * 0.67), 25px);
}

.monitor-board :where(.monitor-board-sync small,
  .cnc-device-board-sync small,
  .after-sales-board-sync small,
  .monitor-board-clock small,
  .cnc-device-board-clock small,
  .after-sales-board-clock small) {
  font-size: clamp(8px, calc(var(--monitor-board-font-size) * 0.50), 20px);
}

.monitor-board :where(.monitor-board-clock strong,
  .cnc-device-board-clock strong,
  .after-sales-board-clock strong) {
  font-size: clamp(16px, calc(var(--monitor-board-font-size) * 1.22), 42px);
}

.monitor-board :where(.cnc-board-font-control,
  .after-sales-board-font-control) {
  font-size: clamp(9px, calc(var(--monitor-board-font-size) * 0.61), 22px);
}

.monitor-board :where(.monitor-board-summary span,
  .monitor-board-summary small,
  .cnc-device-board-summary span,
  .cnc-device-board-summary small,
  .after-sales-board-summary span) {
  font-size: clamp(9px, calc(var(--monitor-board-font-size) * 0.56), 22px);
}

.monitor-board :where(.monitor-board-summary strong,
  .cnc-device-board-summary strong,
  .after-sales-board-summary strong) {
  font-size: clamp(18px, calc(var(--monitor-board-font-size) * 1.28), 52px);
}

.monitor-board :where(.monitor-panel-heading > div:first-child > span) {
  font-size: clamp(8px, calc(var(--monitor-board-font-size) * 0.50), 20px);
}

.monitor-board :where(.monitor-panel-heading h3) {
  font-size: clamp(12px, calc(var(--monitor-board-font-size) * 0.78), 34px);
}

.monitor-board :where(.monitor-panel-heading h4,
  .monitor-panel-meta,
  .after-sales-board-page-summary > span) {
  font-size: clamp(9px, calc(var(--monitor-board-font-size) * 0.61), 24px);
}

.monitor-board :where(.cnc-device-board-empty > strong,
  .after-sales-board-empty strong) {
  font-size: clamp(13px, calc(var(--monitor-board-font-size) * 0.89), 36px);
}

.monitor-board :where(.cnc-device-board-empty > span,
  .after-sales-board-empty span) {
  font-size: clamp(9px, calc(var(--monitor-board-font-size) * 0.61), 24px);
}

.monitor-board :where(.cnc-board-device h3) {
  font-size: clamp(14px, calc(var(--monitor-board-font-size) * 0.94), 38px);
}

.monitor-board :where(.cnc-board-device code,
  .cnc-board-device > footer,
  .cnc-board-device > footer time,
  .cnc-board-device-metrics span,
  .cnc-board-device-metrics small) {
  font-size: clamp(8px, calc(var(--monitor-board-font-size) * 0.50), 20px);
}

.monitor-board :where(.cnc-board-mode,
  .cnc-board-category,
  .cnc-board-device .cnc-state-pill) {
  font-size: clamp(9px, calc(var(--monitor-board-font-size) * 0.61), 24px);
}

.monitor-board :where(.cnc-board-device-metrics strong) {
  font-size: clamp(13px, calc(var(--monitor-board-font-size) * 0.83), 34px);
}

.monitor-board :where(.after-sales-board-ticket span,
  .after-sales-board-model span,
  .after-sales-board-card-footer span,
  .after-sales-board-model small,
  .after-sales-board-card-footer em,
  .after-sales-board-progress-heading span) {
  font-size: clamp(8px, calc(var(--monitor-board-font-size) * 0.50), 20px);
}

.monitor-board :where(.after-sales-board-ticket strong,
  .after-sales-board-progress-heading strong,
  .after-sales-board-card-footer strong,
  .after-sales-board-status) {
  font-size: clamp(10px, calc(var(--monitor-board-font-size) * 0.72), 29px);
}

.monitor-board :where(.after-sales-board-model strong) {
  font-size: clamp(16px, calc(var(--monitor-board-font-size) * 1.17), 47px);
}

.monitor-board :where(.after-sales-board-percent strong) {
  font-size: clamp(22px, calc(var(--monitor-board-font-size) * 1.72), 68px);
}

.monitor-board :where(.after-sales-board-percent span) {
  font-size: clamp(9px, calc(var(--monitor-board-font-size) * 0.72), 25px);
}

.monitor-board :where(.monitor-chart-legend,
  .monitor-chart-legend span) {
  font-size: clamp(8px, calc(var(--monitor-board-font-size) * 0.50), 20px);
}

.monitor-board :where(.monitor-trend-summary small,
  .monitor-trend-summary em) {
  font-size: clamp(8px, calc(var(--monitor-board-font-size) * 0.50), 20px);
}

.monitor-board :where(.monitor-trend-summary strong) {
  font-size: clamp(10px, calc(var(--monitor-board-font-size) * 0.72), 29px);
}

.monitor-board :where(.monitor-chart-bars > i > span,
  .monitor-chart-group > small) {
  font-size: clamp(7px, calc(var(--monitor-board-font-size) * 0.44), 18px);
}

.monitor-board :where(.monitor-state-ring strong) {
  font-size: clamp(20px, calc(var(--monitor-board-font-size) * 1.50), 48px);
}

.monitor-board :where(.monitor-state-ring span,
  .monitor-breakdown-row span,
  .monitor-breakdown-row strong) {
  font-size: clamp(8px, calc(var(--monitor-board-font-size) * 0.50), 20px);
}

.monitor-board :where(.monitor-activity-row strong) {
  font-size: clamp(9px, calc(var(--monitor-board-font-size) * 0.56), 23px);
}

.monitor-board :where(.monitor-activity-row span,
  .monitor-activity-row small) {
  font-size: clamp(7px, calc(var(--monitor-board-font-size) * 0.44), 18px);
}

.monitor-board :where(.monitor-activity-row time,
  .monitor-load-row > span > i,
  .monitor-load-row > em) {
  font-size: clamp(8px, calc(var(--monitor-board-font-size) * 0.50), 20px);
}

.monitor-board :where(.monitor-distribution-groups h4,
  .monitor-load-row strong) {
  font-size: clamp(9px, calc(var(--monitor-board-font-size) * 0.56), 23px);
}

.monitor-board :where(.monitor-inline-empty strong) {
  font-size: clamp(10px, calc(var(--monitor-board-font-size) * 0.67), 27px);
}

.monitor-board :where(.monitor-inline-empty span) {
  font-size: clamp(8px, calc(var(--monitor-board-font-size) * 0.50), 20px);
}

.monitor-board :where(.cnc-device-board-footer,
  .after-sales-board-footer,
  .cnc-device-board-footer > div > span,
  .after-sales-board-legend span) {
  font-size: clamp(8px, calc(var(--monitor-board-font-size) * 0.50), 20px);
}

.monitor-board > :where(.cnc-device-board-settings,
  .after-sales-board-settings) {
  font-size: clamp(10px, calc(var(--monitor-board-font-size) * 0.67), 27px);
}

.monitor-board > :where(.cnc-device-board-settings > div > strong,
  .after-sales-board-settings > div > strong,
  .cnc-device-board-settings legend,
  .after-sales-board-settings legend,
  .cnc-device-board-settings label,
  .after-sales-board-settings label) {
  font-size: clamp(9px, calc(var(--monitor-board-font-size) * 0.67), 27px);
}

.monitor-board > :where(.cnc-device-board-settings > div > button,
  .after-sales-board-settings > div > button) {
  font-size: clamp(18px, calc(var(--monitor-board-font-size) * 1.22), 42px);
}

/* V3.0.97 final font-scale audit: keep legacy board selectors from bypassing the slider. */
#cncDeviceBoard,
#afterSalesBoard {
  font-size: calc(var(--monitor-board-font-size) * 0.8889);
}

#cncDeviceBoard *,
#afterSalesBoard * {
  font-size: inherit;
}

#cncDeviceBoard .monitor-board-brand > div > span,
#afterSalesBoard .monitor-board-brand > div > span {
  font-size: calc(var(--monitor-board-font-size) * 0.56);
}

#cncDeviceBoard .monitor-board-brand h2,
#afterSalesBoard .monitor-board-brand h2 {
  font-size: calc(var(--monitor-board-font-size) * 1.17);
}

#cncDeviceBoard .monitor-board-sync strong,
#afterSalesBoard .monitor-board-sync strong {
  font-size: calc(var(--monitor-board-font-size) * 0.67);
}

#cncDeviceBoard .monitor-board-sync small,
#afterSalesBoard .monitor-board-sync small,
#cncDeviceBoard .monitor-board-clock small,
#afterSalesBoard .monitor-board-clock small {
  font-size: calc(var(--monitor-board-font-size) * 0.50);
}

#cncDeviceBoard .monitor-board-clock strong,
#afterSalesBoard .monitor-board-clock strong {
  font-size: calc(var(--monitor-board-font-size) * 1.22);
}

#cncDeviceBoard .cnc-board-font-control,
#afterSalesBoard .after-sales-board-font-control {
  font-size: calc(var(--monitor-board-font-size) * 0.61);
}

#cncDeviceBoard .monitor-board-summary span,
#cncDeviceBoard .monitor-board-summary small,
#afterSalesBoard .monitor-board-summary span,
#afterSalesBoard .monitor-board-summary small {
  font-size: calc(var(--monitor-board-font-size) * 0.56);
}

#cncDeviceBoard .monitor-board-summary strong,
#afterSalesBoard .monitor-board-summary strong {
  font-size: calc(var(--monitor-board-font-size) * 1.28);
}

#cncDeviceBoard .monitor-panel-heading > div:first-child > span,
#afterSalesBoard .monitor-panel-heading > div:first-child > span {
  font-size: calc(var(--monitor-board-font-size) * 0.50);
}

#cncDeviceBoard .monitor-panel-heading h3,
#afterSalesBoard .monitor-panel-heading h3 {
  font-size: calc(var(--monitor-board-font-size) * 0.78);
}

#cncDeviceBoard .monitor-panel-heading h4,
#afterSalesBoard .monitor-panel-heading h4,
#cncDeviceBoard .monitor-panel-meta,
#afterSalesBoard .monitor-panel-meta,
#afterSalesBoard .after-sales-board-page-summary > span {
  font-size: calc(var(--monitor-board-font-size) * 0.61);
}

#cncDeviceBoard .cnc-device-board-empty > strong,
#afterSalesBoard .after-sales-board-empty strong {
  font-size: calc(var(--monitor-board-font-size) * 0.89);
}

#cncDeviceBoard .cnc-device-board-empty > span,
#afterSalesBoard .after-sales-board-empty span {
  font-size: calc(var(--monitor-board-font-size) * 0.61);
}

#afterSalesBoard .after-sales-board-empty > div {
  display: grid;
  gap: 5px;
  justify-items: center;
}

#afterSalesBoard .after-sales-board-empty strong,
#afterSalesBoard .after-sales-board-empty span {
  display: block;
}

#cncDeviceBoard .cnc-board-device h3 {
  font-size: calc(var(--monitor-board-font-size) * 0.94);
}

#cncDeviceBoard .cnc-board-device .cnc-state-pill,
#cncDeviceBoard .cnc-board-mode,
#cncDeviceBoard .cnc-board-category {
  font-size: calc(var(--monitor-board-font-size) * 0.61);
}

#cncDeviceBoard .cnc-board-device-metrics span,
#cncDeviceBoard .cnc-board-device-metrics small,
#cncDeviceBoard .cnc-board-device code,
#cncDeviceBoard .cnc-board-device > footer,
#cncDeviceBoard .cnc-board-device > footer time {
  font-size: calc(var(--monitor-board-font-size) * 0.50);
}

#cncDeviceBoard .cnc-board-device-metrics strong {
  font-size: calc(var(--monitor-board-font-size) * 0.83);
}

/* Device cards form a horizontal track so large fleets remain readable. */
#cncDeviceBoard .cnc-device-board-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 9px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(165, 215, 53, .82) rgba(96, 119, 132, .16);
}

#cncDeviceBoard .cnc-device-board-grid::-webkit-scrollbar,
#cncDeviceBoard .cnc-group-production-list::-webkit-scrollbar,
#cncDeviceBoard .monitor-activity-list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#cncDeviceBoard .cnc-device-board-grid::-webkit-scrollbar-track,
#cncDeviceBoard .cnc-group-production-list::-webkit-scrollbar-track,
#cncDeviceBoard .monitor-activity-list::-webkit-scrollbar-track {
  background: rgba(96, 119, 132, .12);
  border-radius: 999px;
}

#cncDeviceBoard .cnc-device-board-grid::-webkit-scrollbar-thumb,
#cncDeviceBoard .cnc-group-production-list::-webkit-scrollbar-thumb,
#cncDeviceBoard .monitor-activity-list::-webkit-scrollbar-thumb {
  min-width: 42px;
  background: linear-gradient(90deg, rgba(139, 184, 42, .92), rgba(188, 228, 73, .96));
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

#cncDeviceBoard .cnc-device-board-grid::-webkit-scrollbar-thumb:hover,
#cncDeviceBoard .cnc-group-production-list::-webkit-scrollbar-thumb:hover,
#cncDeviceBoard .monitor-activity-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, rgba(167, 215, 52, 1), rgba(211, 241, 103, 1));
  background-clip: padding-box;
}

#cncDeviceBoard .cnc-board-device {
  flex: 0 0 min(360px, calc((100% - 18px) / 3));
  width: min(360px, calc((100% - 18px) / 3));
}

/* Main-stage visual hierarchy: clear frame, header rail and state-led cards. */
#cncDeviceBoard .cnc-monitor-stage {
  position: relative;
  padding: 18px;
  border: 1px solid rgba(139, 170, 191, 0.34);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(22, 31, 37, 0.98), rgba(16, 23, 29, 0.98)),
    var(--monitor-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 44px rgba(0, 0, 0, 0.16);
}

#cncDeviceBoard .cnc-monitor-stage > .monitor-panel-heading {
  min-height: 52px;
  margin: -2px 0 14px;
  padding: 0 2px 12px;
  align-items: end;
  border-bottom: 1px solid rgba(139, 170, 191, 0.24);
}

#cncDeviceBoard .cnc-monitor-stage > .monitor-panel-heading h3 {
  letter-spacing: 0.01em;
}

#cncDeviceBoard .cnc-monitor-stage > .monitor-panel-heading .monitor-panel-meta {
  padding: 5px 9px;
  border: 1px solid rgba(160, 200, 20, 0.28);
  border-radius: 999px;
  color: #c6df73;
  background: rgba(160, 200, 20, 0.08);
}

/* Keep category and row controls in the stage title rail instead of using a
   separate full-width row. */
#cncDeviceBoard .cnc-monitor-stage > .monitor-panel-heading {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  column-gap: 12px;
  align-items: center;
}

#cncDeviceBoard #cncDeviceBoardStageMeta {
  display: none !important;
}

#cncDeviceBoard .cnc-monitor-stage > .monitor-panel-heading > .cnc-board-stage-controls {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-content: space-between;
  gap: 8px;
}

#cncDeviceBoard .cnc-monitor-stage > .monitor-panel-heading .cnc-board-groups {
  flex: 1 1 auto;
  max-width: none;
}

#cncDeviceBoard .cnc-monitor-stage > .monitor-panel-heading .cnc-board-rows {
  position: static;
  align-self: center;
}

#cncDeviceBoard .cnc-monitor-stage > .monitor-panel-heading .cnc-board-rows button {
  min-width: 76px;
}

@media (max-width: 1180px) {
  #cncDeviceBoard .cnc-monitor-stage > .monitor-panel-heading {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto;
    row-gap: 8px;
  }
  #cncDeviceBoard .cnc-monitor-stage > .monitor-panel-heading > .cnc-board-stage-controls {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: space-between;
  }
  #cncDeviceBoard .cnc-monitor-stage > .monitor-panel-heading .cnc-board-rows {
    position: static;
  }
  #cncDeviceBoard .cnc-monitor-stage > .monitor-panel-heading .cnc-board-groups {
    max-width: none;
  }
}

/* Keep the main-stage title close to the frame so the device cards get the
   available vertical space. */
#cncDeviceBoard .cnc-monitor-stage {
  padding-top: 10px !important;
  padding-bottom: 8px !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

#cncDeviceBoard .cnc-monitor-stage > .cnc-device-board-grid {
  grid-row: 2 !important;
}

#cncDeviceBoard .cnc-monitor-stage > .monitor-panel-heading {
  min-height: 44px !important;
  height: auto !important;
  max-height: none !important;
  margin-top: -2px !important;
  margin-bottom: 10px !important;
  padding-bottom: 8px !important;
}

/* Fixed KPI slots: font scaling must not change card geometry. */
#cncDeviceBoard .cnc-device-board-summary {
  grid-template-columns: repeat(var(--cnc-board-summary-columns), minmax(0, 1fr));
  grid-auto-rows: 74px;
  align-items: stretch;
  gap: 10px;
  height: auto;
  min-height: 0;
  max-height: none;
  box-sizing: border-box;
  padding: 8px 0 10px;
}

#cncDeviceBoard .cnc-device-board-summary > div {
  height: 74px;
  min-height: 74px;
  max-height: 74px;
  box-sizing: border-box;
  padding: 6px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 24px 34px;
  align-items: center;
  gap: 1px;
  border-top: 2px solid rgba(160, 200, 20, 0.72);
  border-left: 1px solid rgba(139, 170, 191, 0.23);
  border-right: 1px solid rgba(139, 170, 191, 0.23);
  border-bottom: 1px solid rgba(139, 170, 191, 0.23);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(25, 34, 40, 0.98), rgba(18, 25, 31, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

#cncDeviceBoard .cnc-device-board-summary > div[data-tone="danger"] {
  border-top-color: #ef4444;
}

#cncDeviceBoard .cnc-device-board-summary > div[data-tone="warning"] {
  border-top-color: #f59e0b;
}

#cncDeviceBoard .cnc-device-board-summary > div > span {
  color: #a7b4bd;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(14px, var(--monitor-board-font-size), 20px);
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
}

#cncDeviceBoard .cnc-board-device .cnc-state-downloading,
#cncDeviceBoard .cnc-board-device .cnc-state-update-waiting,
#cncDeviceBoard .cnc-board-device .cnc-state-installing,
#cncDeviceBoard .cnc-board-device .cnc-state-update-downloaded,
#cncDeviceBoard .cnc-board-device .cnc-state-update-verified,
#cncDeviceBoard .cnc-board-device .cnc-state-update-installed {
  width: max-content;
  max-width: 150px;
  min-height: 16px;
  height: auto;
  line-height: 15px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}

#cncDeviceBoard .cnc-board-summary-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  width: 100%;
  height: 34px;
  overflow: hidden;
  font-size: clamp(24px, calc(var(--monitor-board-font-size) * 1.45), 32px);
  line-height: 34px;
  white-space: nowrap;
}

#cncDeviceBoard .cnc-board-summary-value strong {
  flex: 0 0 auto;
  overflow: visible;
  margin-left: 0;
  color: #f2f7f8;
  font-size: inherit;
  font-weight: 790;
  line-height: 34px;
  letter-spacing: 0;
  white-space: nowrap;
}

#cncDeviceBoard .cnc-board-summary-value small {
  flex: 0 0 auto;
  align-self: baseline;
  margin-left: 0;
  padding-bottom: 0;
  color: #a7b4bd;
  font-size: 0.44em;
  line-height: 1;
}

@media (max-width: 1180px) {
  #cncDeviceBoard .cnc-device-board-summary {
    grid-template-columns: repeat(min(4, var(--cnc-board-summary-columns)), minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  #cncDeviceBoard .cnc-device-board-summary {
    grid-template-columns: repeat(min(2, var(--cnc-board-summary-columns)), minmax(0, 1fr));
  }
}

#cncDeviceBoard .cnc-device-board-grid {
  padding: 2px 2px 12px;
  scrollbar-color: rgba(160, 200, 20, 0.55) rgba(255, 255, 255, 0.06);
}

@supports selector(::-webkit-scrollbar) {
  #cncDeviceBoard .cnc-device-board-grid,
  #cncDeviceBoard .cnc-group-production-list,
  #cncDeviceBoard .monitor-activity-list {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
  #cncDeviceBoard .cnc-device-board-grid::-webkit-scrollbar-button,
  #cncDeviceBoard .cnc-group-production-list::-webkit-scrollbar-button,
  #cncDeviceBoard .monitor-activity-list::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
}

#cncDeviceBoard .cnc-board-device {
  position: relative;
  min-height: 0;
  padding: 16px;
  border: 1px solid rgba(139, 170, 191, 0.27);
  border-top: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(29, 38, 44, 0.98), rgba(20, 28, 34, 0.98));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

#cncDeviceBoard .cnc-board-device::before {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 8px 8px 0 0;
  background: var(--cnc-status-rail, #768398);
  content: "";
  pointer-events: none;
}

#cncDeviceBoard .cnc-board-device.cnc-board-state-running { --cnc-status-rail: #10B981; }
#cncDeviceBoard .cnc-board-device.cnc-board-state-idle { --cnc-status-rail: #5B8DEF; }
#cncDeviceBoard .cnc-board-device.cnc-board-state-paused { --cnc-status-rail: #F59E0B; }
#cncDeviceBoard .cnc-board-device.cnc-board-state-alarm { --cnc-status-rail: #EF4444; }
#cncDeviceBoard .cnc-board-device.cnc-board-state-offline { --cnc-status-rail: #768398; }

/* The status light has a defined head and a fading trail; only its
   transform/opacity animate. Alarm/working states travel faster than standby.
   Offline/unknown states stay still. No layout or refresh timers are involved. */
#cncDeviceBoard .cnc-device-board-grid > .cnc-board-device {
  --cnc-rail-delay: 0s;
  --cnc-rail-period: 3.8s;
  overflow: hidden;
}

#cncDeviceBoard .cnc-device-board-grid > .cnc-board-device::before {
  height: 5px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--cnc-status-rail, #768398) 46%, #192128),
    var(--cnc-status-rail, #768398) 48%,
    color-mix(in srgb, var(--cnc-status-rail, #768398) 46%, #192128));
}

#cncDeviceBoard .cnc-device-board-grid > .cnc-board-device:nth-child(3n + 2) { --cnc-rail-delay: -1.6s; }
#cncDeviceBoard .cnc-device-board-grid > .cnc-board-device:nth-child(3n) { --cnc-rail-delay: -3.2s; }

#cncDeviceBoard .cnc-device-board-grid > .cnc-board-state-running::after,
#cncDeviceBoard .cnc-device-board-grid > .cnc-board-state-alarm::after,
#cncDeviceBoard .cnc-device-board-grid > .cnc-board-state-idle::after,
#cncDeviceBoard .cnc-device-board-grid > .cnc-board-state-paused::after {
  position: absolute;
  z-index: 2;
  inset: 0 auto auto -46%;
  width: 46%;
  height: 5px;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    var(--cnc-status-rail) 35%,
    color-mix(in srgb, var(--cnc-status-rail) 30%, #f4f8fa) 68%,
    #f4f8fa 76%,
    var(--cnc-status-rail) 84%,
    transparent);
  opacity: 0;
  animation: cnc-status-sheen var(--cnc-rail-period) linear var(--cnc-rail-delay) infinite;
}

#cncDeviceBoard .cnc-device-board-grid > .cnc-board-state-idle {
  --cnc-rail-period: 6.8s;
}

#cncDeviceBoard .cnc-device-board-grid > .cnc-board-state-paused {
  --cnc-rail-period: 5.6s;
}

#cncDeviceBoard .cnc-device-board-grid > .cnc-board-state-alarm {
  --cnc-rail-period: 2.8s;
}

#cncDeviceBoard .cnc-device-board-grid > .cnc-board-state-alarm::before {
  animation: cnc-status-breathe 3.6s ease-in-out var(--cnc-rail-delay) infinite;
}

@keyframes cnc-status-sheen {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateX(318%); opacity: 0; }
}

@keyframes cnc-status-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .75; }
}

@media (prefers-reduced-motion: reduce) {
  #cncDeviceBoard .cnc-device-board-grid > .cnc-board-device::before,
  #cncDeviceBoard .cnc-device-board-grid > .cnc-board-device::after {
    animation: none;
  }
  #cncDeviceBoard .cnc-device-board-grid > .cnc-board-device::after { content: none; }
}

#cncDeviceBoard .cnc-board-device:hover {
  border-color: rgba(160, 200, 20, 0.46);
  background: linear-gradient(180deg, rgba(34, 46, 51, 0.99), rgba(22, 31, 37, 0.99));
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(160, 200, 20, 0.08);
  transform: translateY(-2px);
}

#cncDeviceBoard .cnc-board-device > header {
  min-height: 86px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(139, 170, 191, 0.18);
}

#cncDeviceBoard .cnc-board-device > header > div {
  gap: 6px;
}

#cncDeviceBoard .cnc-board-device h3 {
  margin-top: 2px;
  color: #f4f8fa;
  font-weight: 760;
}

#cncDeviceBoard .cnc-board-device code {
  color: #a6b4bd;
  letter-spacing: 0.03em;
}

#cncDeviceBoard .cnc-board-category {
  width: fit-content;
  margin-top: 2px;
  padding: 3px 7px;
  border: 1px solid rgba(160, 200, 20, 0.24);
  border-radius: 4px;
  background: rgba(160, 200, 20, 0.09);
}

#cncDeviceBoard .cnc-board-mode {
  max-width: 42%;
  padding-top: 5px;
  color: #dbe5ea;
  font-weight: 680;
  text-align: right;
}

#cncDeviceBoard .cnc-board-device-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 2px;
}

#cncDeviceBoard .cnc-board-device-metrics > div {
  min-height: 84px;
  padding: 10px 11px;
  border: 1px solid rgba(139, 170, 191, 0.16);
  border-radius: 5px;
  background: rgba(10, 16, 22, 0.48);
}

#cncDeviceBoard .cnc-board-device-metrics > div:hover {
  border-color: rgba(139, 170, 191, 0.31);
  background: rgba(10, 16, 22, 0.66);
}

#cncDeviceBoard .cnc-board-device-metrics span,
#cncDeviceBoard .cnc-board-device-metrics small {
  color: #9baab4;
}

#cncDeviceBoard .cnc-board-device-metrics strong {
  color: #f0f5f7;
  font-weight: 760;
}

#cncDeviceBoard .cnc-board-device > footer {
  padding-top: 12px;
  border-top: 1px solid rgba(139, 170, 191, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  #cncDeviceBoard .cnc-board-device { transition: none; }
}

@media (max-width: 1180px) {
  #cncDeviceBoard .cnc-board-device {
    flex-basis: min(360px, calc((100% - 9px) / 2));
    width: min(360px, calc((100% - 9px) / 2));
  }
}

@media (max-width: 680px) {
  #cncDeviceBoard .cnc-board-device {
    flex-basis: min(330px, 88vw);
    width: min(330px, 88vw);
  }
}

#afterSalesBoard .after-sales-board-ticket span,
#afterSalesBoard .after-sales-board-model span,
#afterSalesBoard .after-sales-board-model small,
#afterSalesBoard .after-sales-board-progress-heading span,
#afterSalesBoard .after-sales-board-card-footer span,
#afterSalesBoard .after-sales-board-card-footer em {
  font-size: calc(var(--monitor-board-font-size) * 0.50);
}

#afterSalesBoard .after-sales-board-ticket strong,
#afterSalesBoard .after-sales-board-status,
#afterSalesBoard .after-sales-board-progress-heading strong,
#afterSalesBoard .after-sales-board-card-footer strong {
  font-size: calc(var(--monitor-board-font-size) * 0.72);
}

#afterSalesBoard .after-sales-board-model strong {
  font-size: calc(var(--monitor-board-font-size) * 1.17);
}

#afterSalesBoard .after-sales-board-percent strong {
  font-size: calc(var(--monitor-board-font-size) * 1.72);
}

#afterSalesBoard .after-sales-board-percent span {
  font-size: calc(var(--monitor-board-font-size) * 0.72);
}

#cncDeviceBoard .monitor-chart-legend,
#cncDeviceBoard .monitor-chart-legend span,
#afterSalesBoard .monitor-chart-legend,
#afterSalesBoard .monitor-chart-legend span {
  font-size: calc(var(--monitor-board-font-size) * 0.50);
}

#cncDeviceBoard .monitor-trend-summary small,
#cncDeviceBoard .monitor-trend-summary em,
#afterSalesBoard .monitor-trend-summary small,
#afterSalesBoard .monitor-trend-summary em {
  font-size: calc(var(--monitor-board-font-size) * 0.50);
}

#cncDeviceBoard .monitor-trend-summary strong,
#afterSalesBoard .monitor-trend-summary strong {
  font-size: calc(var(--monitor-board-font-size) * 0.72);
}

#cncDeviceBoard .monitor-chart-bars > i > span,
#afterSalesBoard .monitor-chart-bars > i > span {
  font-size: calc(var(--monitor-board-font-size) * 0.50);
}

#cncDeviceBoard .monitor-chart-group > small,
#afterSalesBoard .monitor-chart-group > small {
  font-size: calc(var(--monitor-board-font-size) * 0.44);
}

#cncDeviceBoard .monitor-state-ring strong,
#afterSalesBoard .monitor-state-ring strong {
  font-size: calc(var(--monitor-board-font-size) * 1.50);
}

#cncDeviceBoard .monitor-state-ring span,
#afterSalesBoard .monitor-state-ring span,
#cncDeviceBoard .monitor-breakdown-row span,
#afterSalesBoard .monitor-breakdown-row span {
  font-size: calc(var(--monitor-board-font-size) * 0.50);
}

#cncDeviceBoard .monitor-breakdown-row strong,
#afterSalesBoard .monitor-breakdown-row strong {
  font-size: calc(var(--monitor-board-font-size) * 0.56);
}

#cncDeviceBoard .monitor-activity-row strong,
#afterSalesBoard .monitor-activity-row strong {
  font-size: calc(var(--monitor-board-font-size) * 0.56);
}

#cncDeviceBoard .monitor-activity-row span,
#cncDeviceBoard .monitor-activity-row small,
#afterSalesBoard .monitor-activity-row span,
#afterSalesBoard .monitor-activity-row small {
  font-size: calc(var(--monitor-board-font-size) * 0.44);
}

#cncDeviceBoard .monitor-activity-row time,
#afterSalesBoard .monitor-activity-row time,
#cncDeviceBoard .monitor-load-row > span > i,
#afterSalesBoard .monitor-load-row > span > i,
#cncDeviceBoard .monitor-load-row > em,
#afterSalesBoard .monitor-load-row > em {
  font-size: calc(var(--monitor-board-font-size) * 0.50);
}

#cncDeviceBoard .monitor-load-row strong,
#afterSalesBoard .monitor-load-row strong {
  font-size: calc(var(--monitor-board-font-size) * 0.56);
}

#cncDeviceBoard .monitor-inline-empty strong,
#afterSalesBoard .monitor-inline-empty strong {
  font-size: calc(var(--monitor-board-font-size) * 0.67);
}

#cncDeviceBoard .monitor-inline-empty span,
#afterSalesBoard .monitor-inline-empty span {
  font-size: calc(var(--monitor-board-font-size) * 0.50);
}

#cncDeviceBoard .cnc-device-board-footer,
#cncDeviceBoard .cnc-device-board-footer > div > span,
#afterSalesBoard .after-sales-board-footer,
#afterSalesBoard .after-sales-board-legend span {
  font-size: calc(var(--monitor-board-font-size) * 0.50);
}

#cncDeviceBoard > .cnc-device-board-settings,
#afterSalesBoard > .after-sales-board-settings {
  font-size: calc(var(--monitor-board-font-size) * 0.67);
}

#cncDeviceBoard > .cnc-device-board-settings > div > strong,
#cncDeviceBoard > .cnc-device-board-settings legend,
#cncDeviceBoard > .cnc-device-board-settings label,
#afterSalesBoard > .after-sales-board-settings > div > strong,
#afterSalesBoard > .after-sales-board-settings legend,
#afterSalesBoard > .after-sales-board-settings label {
  font-size: calc(var(--monitor-board-font-size) * 0.67);
}

#cncDeviceBoard > .cnc-device-board-settings > div > button,
#afterSalesBoard > .after-sales-board-settings > div > button {
  font-size: calc(var(--monitor-board-font-size) * 1.22);
}

/* CNC font changes stay inside the existing panel and metric slots. */
#cncDeviceBoard .cnc-monitor-stage {
  grid-template-rows: 66px 46px minmax(0, 1fr);
}

#cncDeviceBoard .cnc-device-board-grid,
#cncDeviceBoard .cnc-device-board-empty {
  grid-row: 3;
}

#cncDeviceBoard .cnc-board-stage-controls {
  display: flex;
  min-width: 0;
  gap: 12px;
  align-items: start;
}

#cncDeviceBoard .cnc-board-groups {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

#cncDeviceBoard .cnc-board-rows { display: flex; flex: 0 0 auto; gap: 4px; }

#cncDeviceBoard .cnc-board-stage-controls button {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #43535e;
  border-radius: 5px;
  background: #18242c;
  color: #cad7dd;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

#cncDeviceBoard .cnc-board-stage-controls button[aria-pressed="true"] {
  border-color: #a0c814;
  color: #d8ef92;
  background: #2b391f;
}

#cncDeviceBoard .cnc-board-stage-controls button:focus-visible,
#cncDeviceBoard .cnc-board-detail-heading button:focus-visible {
  outline: 2px solid #b9e45f;
  outline-offset: -2px;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-columns: min(360px, calc((100% - 18px) / 3));
  align-content: stretch;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid > .cnc-board-device {
  width: auto;
  grid-template-rows: 40px minmax(0, 1fr) 18px;
  gap: 4px;
  padding: 8px;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header {
  min-height: 0;
  height: 40px;
  padding: 0;
  gap: 4px;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header > div {
  grid-template-rows: 26px;
  row-gap: 0;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device h3 {
  font-size: 16px;
  line-height: 22px;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-state-pill { padding: 0 5px; }
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device code,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-category,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > footer { display: none; }

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device.is-compact .cnc-board-device-metrics > div[data-priority="primary"] {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  padding: 2px 5px;
  gap: 4px;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device-metrics strong {
  font-size: 16px;
  line-height: 20px;
  text-align: right;
}

@media (max-width: 1180px) {
  #cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid {
    grid-auto-columns: min(360px, calc((100% - 9px) / 2));
  }
}

@media (max-width: 680px) {
  #cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid { grid-auto-columns: min(330px, 80vw); }
}

#cncDeviceBoard .cnc-board-device[role="button"] {
  cursor: pointer;
  grid-template-rows: 86px minmax(0, 1fr) 20px 38px;
  gap: 7px;
}

#cncDeviceBoard .cnc-board-device[role="button"].is-compact {
  grid-template-rows: 78px minmax(0, 1fr) 20px 24px;
}

#cncDeviceBoard .cnc-device-board-grid .cnc-board-device.is-compact > header {
  height: 78px;
  padding-bottom: 4px;
}

#cncDeviceBoard .cnc-device-board-grid .cnc-board-device.is-compact > header > div {
  row-gap: 1px;
}

#cncDeviceBoard .cnc-device-board-grid .cnc-board-device.is-compact > footer {
  height: 24px;
  padding-top: 3px;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid > .cnc-board-device.is-compact {
  grid-template-rows: 40px minmax(0, 1fr) 18px;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid > .cnc-board-device.is-compact > header {
  height: 40px;
  padding-bottom: 0;
}

#cncDeviceBoard .cnc-board-device[role="button"]:focus-visible {
  outline: 2px solid #b9e45f;
  outline-offset: -2px;
}

#cncDeviceBoard .cnc-board-detail-hint {
  color: #c6df73;
  font-size: 12px;
  line-height: 20px;
  text-align: right;
}

#cncDeviceBoard .cnc-board-device.is-compact .cnc-board-device-metrics {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
  overflow: hidden;
  gap: 5px;
  padding-top: 0;
}

#cncDeviceBoard .cnc-board-device.is-compact .cnc-board-device-metrics > div {
  display: none;
}

#cncDeviceBoard .cnc-board-device.is-compact .cnc-board-device-metrics > div[data-priority="primary"] {
  display: grid;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 3px 9px;
  grid-template-rows: 16px 22px;
  align-content: center;
  gap: 0;
}

#cncDeviceBoard .cnc-board-device.is-compact .cnc-board-device-metrics span {
  font-size: 13px;
  line-height: 16px;
}

#cncDeviceBoard .cnc-board-device.is-compact .cnc-board-device-metrics strong {
  font-size: clamp(17px, calc(var(--monitor-board-font-size) * 0.9), 21px);
  line-height: 22px;
}

#cncDeviceBoard .cnc-board-device.is-compact .cnc-board-device-metrics small {
  display: none;
}

#cncDeviceBoard .cnc-board-detail-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  width: min(860px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  border: 1px solid #50616d;
  border-radius: 12px;
  color: #edf2f8;
  background: #151e25;
  box-shadow: 0 24px 80px rgba(0, 5, 10, 0.55);
  overflow: hidden;
}

#cncDeviceBoard .cnc-board-detail-dialog[open] {
  display: flex;
  flex-direction: column;
}

#cncDeviceBoard .cnc-board-detail-dialog::backdrop {
  background: rgba(3, 9, 14, 0.8);
}

#cncDeviceBoard .cnc-board-detail-heading {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid #394953;
}

#cncDeviceBoard .cnc-board-detail-heading h2 {
  margin: 0;
  font-size: 22px;
}

#cncDeviceBoard .cnc-board-detail-heading button {
  width: 44px;
  height: 44px;
  border: 1px solid #50616d;
  border-radius: 6px;
  background: #22313a;
  color: #edf2f8;
  font-size: 28px;
  cursor: pointer;
}

#cncDeviceBoard .cnc-board-detail-content {
  overflow: auto;
  min-height: 0;
  padding: 18px;
}

#cncDeviceBoard .cnc-board-detail-content .cnc-board-device {
  width: 100%;
  grid-template-rows: 86px auto 38px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  transform: none;
}

#cncDeviceBoard .cnc-board-detail-content .cnc-board-device::before { display: none; }

#cncDeviceBoard .cnc-board-detail-content .cnc-board-device-metrics {
  grid-auto-rows: 112px;
  overflow: visible;
}

#cncDeviceBoard .cnc-board-detail-content .cnc-board-device-metrics > div {
  height: 112px;
  min-height: 112px;
  max-height: 112px;
  grid-template-rows: 22px 34px 22px;
  padding: 12px;
}

#cncDeviceBoard .cnc-board-detail-content .cnc-board-device-metrics span,
#cncDeviceBoard .cnc-board-detail-content .cnc-board-device-metrics small {
  font-size: 16px;
  line-height: 22px;
}

#cncDeviceBoard .cnc-board-detail-content .cnc-board-device-metrics strong {
  font-size: 28px;
  line-height: 34px;
}

#cncDeviceBoard .cnc-board-detail-content .cnc-board-device-metrics > .cnc-board-alarm-metric {
  grid-column: 1 / -1;
  grid-row: span 2;
  height: 232px;
  min-height: 232px;
  max-height: 232px;
  grid-template-rows: 22px 34px minmax(0, 1fr) 22px;
}

#cncDeviceBoard .cnc-board-alarm-message {
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #edf2f8;
  font-size: 18px;
  line-height: 1.5;
}

/* Current alarm and the latest native alarm records share the final detail row. */
#cncDeviceBoard #cncBoardDetailDialog { width: min(1100px, calc(100vw - 32px)); }
#cncDeviceBoard .cnc-board-detail-content .cnc-board-device-metrics {
  grid-template-rows: 112px 112px auto !important;
  grid-auto-rows: auto;
}
#cncDeviceBoard .cnc-board-detail-content .cnc-board-device-metrics > .cnc-board-alarm-metric,
#cncDeviceBoard .cnc-board-detail-content .cnc-board-device-metrics > .cnc-board-alarm-history {
  grid-column: auto;
  grid-row: auto;
  height: 292px;
  min-height: 292px;
  max-height: 292px;
  min-width: 0;
  padding: 12px;
}
#cncDeviceBoard .cnc-board-detail-content .cnc-board-device-metrics > .cnc-board-alarm-metric {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 22px 34px 22px minmax(0, 1fr);
  align-items: start;
}
#cncDeviceBoard .cnc-board-detail-content .cnc-board-alarm-metric > span { grid-row: 1; }
#cncDeviceBoard .cnc-board-detail-content .cnc-board-alarm-metric > strong { grid-row: 2; }
#cncDeviceBoard .cnc-board-detail-content .cnc-board-alarm-metric > small { grid-row: 3; }
#cncDeviceBoard .cnc-board-detail-content .cnc-board-alarm-message {
  grid-row: 4;
  align-self: stretch;
  color: var(--monitor-ink);
  font-size: 16px;
  padding-top: 8px;
}
#cncDeviceBoard .cnc-board-detail-content .cnc-board-device-metrics > .cnc-board-alarm-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 1px solid var(--monitor-border);
  overflow: hidden;
}
#cncDeviceBoard .cnc-board-alarm-history-heading {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
}
#cncDeviceBoard .cnc-board-alarm-history-heading h3 {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--monitor-ink);
}
#cncDeviceBoard .cnc-board-alarm-history button,
#cncDeviceBoard .cnc-board-alarm-dialog .cnc-board-alarm-actions button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 4px 12px;
  border: 1px solid var(--monitor-border-strong);
  border-radius: 5px;
  background: var(--monitor-surface-strong);
  color: var(--monitor-ink);
  font-size: 13px;
  line-height: 22px;
  cursor: pointer;
}
#cncDeviceBoard .cnc-board-alarm-history button:hover,
#cncDeviceBoard .cnc-board-alarm-dialog .cnc-board-alarm-actions button:hover {
  border-color: var(--monitor-accent);
}
#cncDeviceBoard .cnc-board-alarm-history button:focus-visible,
#cncDeviceBoard .cnc-board-alarm-dialog button:focus-visible {
  outline: 2px solid var(--monitor-accent);
  outline-offset: 2px;
}
#cncDeviceBoard .cnc-board-alarm-history-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--monitor-muted) transparent;
  padding-right: 10px;
}
#cncDeviceBoard .cnc-board-alarm-history-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--monitor-border);
}
#cncDeviceBoard .cnc-board-alarm-history-row:first-child { padding-top: 0; }
#cncDeviceBoard .cnc-board-alarm-history-row:last-child { border-bottom: 0; }
#cncDeviceBoard .cnc-board-detail-content .cnc-board-alarm-history-row code {
  margin: 0;
  color: var(--monitor-danger);
  font-size: 13px;
  line-height: 20px;
}
#cncDeviceBoard .cnc-board-alarm-history-row time {
  justify-self: end;
  color: var(--monitor-muted);
  font-size: 12px;
  line-height: 20px;
}
#cncDeviceBoard .cnc-board-alarm-history-row p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--monitor-ink);
  font-size: 13px;
  line-height: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#cncDeviceBoard .cnc-board-alarm-history-status {
  margin: 0;
  color: var(--monitor-muted);
  font-size: 12px;
  line-height: 18px;
  overflow-wrap: anywhere;
}
#cncDeviceBoard .cnc-board-alarm-history-status.is-error { color: var(--monitor-danger); }
#cncDeviceBoard .cnc-board-alarm-dialog {
  width: min(1100px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
}
#cncDeviceBoard .cnc-board-alarm-dialog > .cnc-board-alarm-history-status {
  padding: 8px 20px;
}
#cncDeviceBoard .cnc-board-alarm-actions p { margin: 0; font-size: 14px; }
#cncDeviceBoard .cnc-board-alarm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--monitor-border);
}
#cncDeviceBoard .cnc-board-alarm-table-scroll {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--monitor-muted) transparent;
  padding: 0 20px 16px;
}
#cncDeviceBoard .cnc-board-alarm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: var(--monitor-ink);
  font-size: 14px;
  line-height: 22px;
}
#cncDeviceBoard .cnc-board-alarm-table th,
#cncDeviceBoard .cnc-board-alarm-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--monitor-border);
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}
#cncDeviceBoard .cnc-board-alarm-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--monitor-surface);
  color: var(--monitor-muted);
  font-size: 13px;
}
#cncDeviceBoard .cnc-board-alarm-table th:nth-child(1) { width: 110px; }
#cncDeviceBoard .cnc-board-alarm-table th:nth-child(2) { width: 80px; }
#cncDeviceBoard .cnc-board-alarm-table th:nth-child(3) { width: 170px; }
#cncDeviceBoard .cnc-board-alarm-table td:nth-child(4) { white-space: pre-wrap; }
#cncDeviceBoard .cnc-board-alarm-table code { color: var(--monitor-danger); }
@media (max-width: 700px) {
  #cncDeviceBoard .cnc-board-detail-content .cnc-board-device-metrics > .cnc-board-alarm-metric,
  #cncDeviceBoard .cnc-board-detail-content .cnc-board-device-metrics > .cnc-board-alarm-history {
    grid-column: 1 / -1;
  }
  #cncDeviceBoard .cnc-board-detail-content .cnc-board-device-metrics > .cnc-board-alarm-history {
    border-left: 0;
  }
  #cncDeviceBoard .cnc-board-alarm-table { min-width: 650px; }
}

#cncDeviceBoard * {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
}

#cncDeviceBoard .cnc-monitor-trend {
  display: grid;
  grid-template-rows: 62px minmax(0, 1fr);
}

#cncDeviceBoard .cnc-monitor-trend > .monitor-panel-heading {
  display: grid;
  grid-template-rows: 30px 20px;
  gap: 6px;
  margin-bottom: 6px;
}

#cncDeviceBoard .cnc-minute-chart {
  min-width: 0;
  min-height: 170px;
  display: grid;
  grid-template-rows: 26px minmax(0, 1fr) 26px 34px;
  --minute-axis-space: 42px;
  font-variant-numeric: tabular-nums;
}

#cncDeviceBoard .cnc-minute-units {
  display: flex;
  justify-content: space-between;
  color: var(--monitor-muted);
  font-size: 12px;
  line-height: 20px;
}

#cncDeviceBoard .cnc-minute-units span { font-size: 12px; }

#cncDeviceBoard .cnc-minute-plot {
  position: relative;
  min-height: 0;
  margin: 5px var(--minute-axis-space) 0;
}

#cncDeviceBoard .cnc-minute-grid,
#cncDeviceBoard .cnc-minute-columns {
  position: absolute;
  inset: 0;
}

#cncDeviceBoard .cnc-minute-gridline {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid var(--monitor-border);
}

#cncDeviceBoard .cnc-minute-gridline span {
  position: absolute;
  top: -8px;
  width: 34px;
  font-size: 11px;
  line-height: 16px;
  color: var(--monitor-muted);
  white-space: nowrap;
}

#cncDeviceBoard .cnc-minute-axis-left { right: calc(100% + 6px); text-align: right; }
#cncDeviceBoard .cnc-minute-axis-right { left: calc(100% + 6px); text-align: left; }

#cncDeviceBoard .cnc-minute-columns,
#cncDeviceBoard .cnc-minute-times {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
}

#cncDeviceBoard .cnc-minute-column {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px 3px 0 0;
  background: transparent;
  cursor: pointer;
  outline-offset: 3px;
}

#cncDeviceBoard .cnc-minute-column.is-current { background: rgba(187, 224, 86, .05); }
#cncDeviceBoard .cnc-minute-column.is-selected { background: rgba(187, 224, 86, .10); }
#cncDeviceBoard .cnc-minute-column:focus-visible { outline: 2px solid var(--monitor-accent); }

#cncDeviceBoard .cnc-minute-column > i {
  position: absolute;
  bottom: 0;
  width: 34%;
  max-width: 18px;
  border-radius: 3px 3px 0 0;
  display: block;
  animation: none;
  transition: none;
  pointer-events: none;
}

#cncDeviceBoard .cnc-minute-production { left: 12%; background: var(--monitor-accent); }
#cncDeviceBoard .cnc-minute-utilization { right: 12%; background: var(--monitor-success); opacity: .85; }
#cncDeviceBoard .cnc-minute-column > i.is-zero { border-top: 2px solid var(--monitor-muted); background: transparent; }
#cncDeviceBoard .cnc-minute-column.is-empty { border-bottom: 2px dotted var(--monitor-faint); }
#cncDeviceBoard .cnc-minute-column.is-partial > i { opacity: .65; }

#cncDeviceBoard .cnc-minute-times {
  margin: 0 var(--minute-axis-space);
  align-items: center;
  overflow: visible;
}

#cncDeviceBoard .cnc-minute-times span {
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
}

#cncDeviceBoard .cnc-minute-times .is-current { color: var(--monitor-accent); }
#cncDeviceBoard .cnc-minute-detail {
  border-top: 1px solid var(--monitor-border);
  padding-top: 8px;
  color: var(--monitor-muted);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#cncDeviceBoard .cnc-minute-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  color: var(--monitor-muted);
  background: var(--monitor-surface);
  font-size: 13px;
  pointer-events: none;
}
#cncDeviceBoard .cnc-minute-empty[hidden] { display: none; }

@media (max-width: 1700px) {
  #cncDeviceBoard .cnc-minute-times span:nth-child(odd) { visibility: hidden; }
}

#cncDeviceBoard .monitor-chart-legend,
#cncDeviceBoard .monitor-chart-legend span {
  font-size: clamp(10px, calc(var(--monitor-board-font-size) * 0.5), 12px);
  line-height: 16px;
  white-space: nowrap;
}

#cncDeviceBoard .monitor-trend-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 65px;
  gap: 8px;
  margin: 0;
  height: 48px;
}

#cncDeviceBoard .monitor-trend-summary > span {
  display: grid;
  min-width: 0;
  grid-template-rows: 16px 26px;
  gap: 0;
}

#cncDeviceBoard .monitor-trend-summary small,
#cncDeviceBoard .monitor-trend-summary em {
  font-size: clamp(10px, calc(var(--monitor-board-font-size) * 0.5), 12px);
  line-height: 16px;
}

#cncDeviceBoard .monitor-trend-summary strong {
  font-size: clamp(16px, calc(var(--monitor-board-font-size) * 0.72), 22px);
  line-height: 26px;
  overflow: hidden;
  white-space: nowrap;
}

#cncDeviceBoard .monitor-chart-bars > i > span,
#cncDeviceBoard .monitor-chart-group > small {
  font-size: clamp(8px, calc(var(--monitor-board-font-size) * 0.44), 10px);
}

/* Live refresh must display the latest height without replaying the entrance. */
#cncDeviceBoardTrend .monitor-chart-bars > i,
#cncDeviceBoard .monitor-trend-summary strong {
  animation: none;
}

#cncDeviceBoard .monitor-activity-row {
  grid-template-columns: 7px minmax(0, 1fr) 130px;
}

#cncDeviceBoard .monitor-activity-row strong {
  font-size: clamp(12px, calc(var(--monitor-board-font-size) * 0.56), 18px);
  line-height: 22px;
}

#cncDeviceBoard .monitor-activity-row span,
#cncDeviceBoard .monitor-activity-row small,
#cncDeviceBoard .monitor-activity-row time {
  font-size: clamp(10px, calc(var(--monitor-board-font-size) * 0.44), 12px);
  line-height: 16px;
}

#cncDeviceBoard {
  grid-template-rows: 76px auto minmax(0, 1fr) 34px;
}

#cncDeviceBoard .monitor-board-header {
  min-height: 0;
  height: 76px;
}

#cncDeviceBoard .monitor-board-brand {
  flex: 1 1 0;
}

#cncDeviceBoard .monitor-board-brand h2 {
  overflow: hidden;
  white-space: nowrap;
  font-size: clamp(16px, calc(var(--monitor-board-font-size) * 1.17), 28px);
}

#cncDeviceBoard .monitor-board-brand > div > span {
  font-size: clamp(9px, calc(var(--monitor-board-font-size) * 0.56), 12px);
}

#cncDeviceBoard .monitor-board-sync {
  flex: 0 0 224px;
  min-width: 224px;
  overflow: visible;
}

#cncDeviceBoard .monitor-board-sync strong {
  font-size: clamp(11px, calc(var(--monitor-board-font-size) * 0.67), 18px);
}

#cncDeviceBoard .monitor-board-sync small,
#cncDeviceBoard .monitor-board-clock small {
  font-size: clamp(9px, calc(var(--monitor-board-font-size) * 0.50), 11px);
  white-space: nowrap;
}

#cncDeviceBoard .monitor-board-clock {
  flex: 0 0 170px;
  min-width: 170px;
}

#cncDeviceBoard .monitor-board-clock strong {
  font-size: clamp(20px, calc(var(--monitor-board-font-size) * 1.22), 26px);
}

#cncDeviceBoard .cnc-board-font-control {
  flex: 0 0 132px;
  font-size: 13px;
}

#cncDeviceBoard .cnc-monitor-stage > .monitor-panel-heading {
  height: 52px;
  min-height: 52px;
  max-height: 52px;
}

#cncDeviceBoard .monitor-panel-heading > div:first-child > span {
  font-size: clamp(9px, calc(var(--monitor-board-font-size) * 0.50), 10px);
  line-height: 12px;
}

#cncDeviceBoard .monitor-panel-heading h3 {
  font-size: clamp(14px, calc(var(--monitor-board-font-size) * 0.9), 22px);
  line-height: 26px;
  white-space: nowrap;
  overflow: hidden;
}

#cncDeviceBoard .monitor-panel-meta {
  font-size: clamp(11px, calc(var(--monitor-board-font-size) * 0.61), 16px);
  line-height: 20px;
}

#cncDeviceBoard .cnc-board-device {
  grid-template-rows: 86px minmax(0, 1fr) 38px;
}

#cncDeviceBoard .cnc-board-device > header {
  height: 86px;
  min-height: 0;
  padding-bottom: 10px;
  overflow: hidden;
}

#cncDeviceBoard .cnc-board-device > header > div {
  flex: 1 1 0;
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-rows: 26px 18px 22px;
  gap: 4px;
  column-gap: 16px;
}

#cncDeviceBoard .cnc-board-device > header > div > .cnc-state-pill {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

#cncDeviceBoard .cnc-board-device > header > div > h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#cncDeviceBoard .cnc-board-device > header > div > code {
  grid-column: 1 / -1;
  grid-row: 2;
}

#cncDeviceBoard .cnc-board-device > header > div > .cnc-board-category {
  grid-column: 1 / -1;
  grid-row: 3;
}

#cncDeviceBoard .cnc-board-device h3 {
  margin: 0;
  font-size: clamp(16px, calc(var(--monitor-board-font-size) * 0.94), 22px);
  line-height: 26px;
}

#cncDeviceBoard .cnc-board-device code {
  font-size: clamp(10px, calc(var(--monitor-board-font-size) * 0.50), 14px);
  line-height: 18px;
  overflow: hidden;
  white-space: nowrap;
}

#cncDeviceBoard .cnc-board-device .cnc-state-pill,
#cncDeviceBoard .cnc-board-category,
#cncDeviceBoard .cnc-board-mode {
  max-width: 100%;
  margin: 0;
  padding: 2px 6px;
  font-size: clamp(11px, calc(var(--monitor-board-font-size) * 0.61), 14px);
  line-height: 16px;
  overflow: hidden;
  white-space: nowrap;
}

#cncDeviceBoard .cnc-board-mode {
  flex: 0 0 64px;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 26px;
  padding-inline: 0;
  font-size: clamp(14px, calc(var(--monitor-board-font-size) * 0.89), 16px);
  line-height: 22px;
  position: relative;
  box-sizing: border-box;
  padding-left: 6px;
  letter-spacing: -0.08em;
  justify-content: flex-end;
}

#cncDeviceBoard .cnc-board-mode::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 2px;
  border-radius: 2px;
  background: var(--monitor-accent, #a5d735);
  opacity: .8;
}

#cncDeviceBoard .monitor-line-chart {
  display: block;
  min-height: 0;
  padding: 4px 0 0;
  overflow: hidden;
}

#cncDeviceBoard .monitor-line-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 170px;
  overflow: visible;
}

#cncDeviceBoard .monitor-line-grid,
#cncDeviceBoard .monitor-line-axis {
  stroke: rgba(158, 177, 191, .18);
  stroke-width: 1;
}

#cncDeviceBoard .monitor-line-series {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

#cncDeviceBoard .monitor-line-series.is-info { stroke: var(--monitor-info); }
#cncDeviceBoard .monitor-line-series.is-success { stroke: var(--monitor-success); }
#cncDeviceBoard .monitor-line-point { stroke-width: 2; vector-effect: non-scaling-stroke; }
#cncDeviceBoard .monitor-line-point.is-info { fill: var(--monitor-info); stroke: #17222a; }
#cncDeviceBoard .monitor-line-point.is-success { fill: var(--monitor-success); stroke: #17222a; }
#cncDeviceBoard .monitor-line-label {
  fill: var(--monitor-muted, #8ea2af);
  font-size: 10px;
  text-anchor: middle;
}

#cncDeviceBoard .cnc-board-device-metrics {
  min-height: 0;
  grid-auto-rows: 84px;
  align-content: start;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

#cncDeviceBoard .cnc-board-device-metrics > div {
  height: 84px;
  min-height: 84px;
  max-height: 84px;
  grid-template-rows: 18px 26px 16px;
  gap: 3px;
  padding: 8px;
  overflow: hidden;
}

#cncDeviceBoard .cnc-board-device-metrics span,
#cncDeviceBoard .cnc-board-device-metrics small {
  font-size: clamp(11px, calc(var(--monitor-board-font-size) * 0.50), 15px);
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
}

#cncDeviceBoard .cnc-board-device-metrics strong {
  font-size: clamp(16px, calc(var(--monitor-board-font-size) * 0.83), 24px);
  line-height: 26px;
}

#cncDeviceBoard .cnc-board-device-metrics small {
  font-size: clamp(10px, calc(var(--monitor-board-font-size) * 0.50), 13px);
  line-height: 16px;
}

#cncDeviceBoard .cnc-board-device > footer {
  min-height: 0;
  height: 38px;
  padding-top: 8px;
}

#cncDeviceBoard .cnc-board-device > footer,
#cncDeviceBoard .cnc-board-device > footer time,
#cncDeviceBoard .cnc-device-board-footer,
#cncDeviceBoard .cnc-device-board-footer > div > span {
  font-size: clamp(10px, calc(var(--monitor-board-font-size) * 0.50), 12px);
  line-height: 18px;
}

@media (max-width: 1180px) {
  #cncDeviceBoard .cnc-monitor-board-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(420px, auto) auto;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #cncDeviceBoard .cnc-monitor-stage,
  #cncDeviceBoard .cnc-monitor-side {
    grid-column: 1;
  }
  #cncDeviceBoard .cnc-monitor-stage {
    grid-row: 1;
  }
  #cncDeviceBoard .cnc-monitor-side {
    grid-row: 2;
  }
  #cncDeviceBoard .cnc-device-board-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  }
  #cncDeviceBoard .cnc-monitor-board-body {
    grid-template-rows: 580px auto;
  }
  #cncDeviceBoard .cnc-monitor-side {
    grid-row: 2;
  }
  #cncDeviceBoard .monitor-board-sync {
    display: none;
  }
}

@media (max-width: 900px) {
  #cncDeviceBoard .cnc-board-font-control {
    min-width: 0;
    flex-basis: 64px;
  }
}

@media (max-width: 700px) {
  #cncDeviceBoard {
    grid-template-rows: 110px auto auto 54px;
    max-width: 100vw;
    overflow: hidden;
  }
  #cncDeviceBoard .monitor-board-header {
    height: 110px;
  }
  #cncDeviceBoard .monitor-board-brand {
    flex: 0 0 48px;
    width: 100%;
  }
  #cncDeviceBoard .monitor-board-clock {
    flex-basis: 104px;
    padding-left: 0;
    border: 0;
  }
  #cncDeviceBoard .monitor-board-clock strong {
    font-size: 20px;
  }
  #cncDeviceBoard .cnc-monitor-board-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(360px, auto) auto;
  }
  #cncDeviceBoard .cnc-device-board-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(210px, auto);
  }
  #cncDeviceBoard .cnc-monitor-side {
    grid-template-rows: minmax(260px, auto) minmax(140px, auto) minmax(180px, auto);
  }
  #cncDeviceBoard .cnc-device-board-footer {
    position: relative;
    z-index: 3;
    padding-inline: 4px;
    background: #0C0E12;
  }
}

@media (max-width: 900px) {
  #cncDeviceBoard { --cnc-board-summary-columns: 4; }
}

@media (max-width: 560px) {
  #cncDeviceBoard { --cnc-board-summary-columns: 2; }
}

/* Keep the font sliders reachable when a board is opened in a narrow window. */
@media (max-width: 900px) {
  #cncDeviceBoard .cnc-board-font-control,
  #afterSalesBoard .after-sales-board-font-control {
    display: flex;
    flex: 0 0 auto;
  }

  #cncDeviceBoard .cnc-board-font-control > span,
  #afterSalesBoard .after-sales-board-font-control > span {
    display: none;
  }

  #cncDeviceBoard .cnc-board-font-control input,
  #afterSalesBoard .after-sales-board-font-control input {
    width: 64px;
  }
}

/* V3.1.2: icon-only desktop sidebar with a hidden navigation scrollbar. */
#appView.app-view {
  transition: grid-template-columns 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

#appView .sidebar-brand {
  position: static;
}

#appView .sidebar-brand-copy {
  min-width: 0;
}

#appView .main-nav {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#appView .main-nav::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

#appView .sidebar-collapse-button {
  position: absolute;
  top: 0;
  right: -6px;
  bottom: 0;
  z-index: 30;
  display: inline-grid;
  width: 12px;
  height: auto;
  padding: 0;
  place-items: center;
  border: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transform: none;
}

#appView .sidebar-collapse-button svg {
  width: 17px;
  height: 17px;
  box-sizing: content-box;
  padding: 8px 6px;
  border: 1px solid rgba(185, 228, 95, 0.22);
  border-radius: 8px;
  color: #c9e86e;
  background: #151d18;
  box-shadow: 0 8px 22px rgba(0, 5, 3, 0.28), inset 0 1px rgba(241, 250, 221, 0.06);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity 150ms ease, color 160ms ease, border-color 160ms ease,
    background 160ms ease, box-shadow 160ms ease, transform 180ms ease;
}

#appView .sidebar-collapse-button:hover svg,
#appView .sidebar-collapse-button:focus-visible svg {
  opacity: 1;
  transform: translateX(0);
}

#appView .sidebar-collapse-button:hover svg {
  border-color: rgba(185, 228, 95, 0.42);
  color: #e0f69c;
  background: #1b271c;
  box-shadow: 0 10px 26px rgba(72, 105, 35, 0.22), inset 0 1px rgba(241, 250, 221, 0.09);
}

#appView .sidebar-collapse-button:active svg {
  transform: scale(0.94);
}

#appView .sidebar-collapse-button:focus-visible {
  outline: none;
}

#appView .sidebar-collapse-button:focus-visible svg {
  outline: 2px solid rgba(185, 228, 95, 0.72);
  outline-offset: 2px;
}

/* Keep the selected-nav light inside its own rounded control. */
#appView .nav-button {
  overflow: hidden;
}

#appView .nav-button.active::before {
  left: 0;
}

#appView .nav-button.active {
  box-shadow: inset 0 1px rgba(231, 246, 199, 0.055);
}

html[data-theme="light"] #appView .nav-button.active {
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] #appView .sidebar-collapse-button svg {
  border-color: rgba(120, 157, 32, 0.26);
  color: #607f19;
  background: #f5f9f3;
  box-shadow: 0 7px 18px rgba(52, 79, 56, 0.13), inset 0 1px rgba(255, 255, 255, 0.82);
}

html[data-theme="light"] #appView .sidebar-collapse-button:hover svg {
  border-color: rgba(120, 157, 32, 0.46);
  color: #49680d;
  background: #fbfdf9;
}

@media (min-width: 901px) {
  #appView .sidebar {
    overflow: visible;
  }

  #appView.sidebar-collapsed {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  #appView.sidebar-collapsed .sidebar {
    padding: 20px 10px 16px;
    overflow: visible;
  }

  #appView.sidebar-collapsed .sidebar-brand {
    min-height: 86px;
    justify-content: center;
    gap: 0;
    padding: 0 0 18px;
  }

  #appView.sidebar-collapsed .sidebar-logo-img {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  #appView.sidebar-collapsed .sidebar-brand-copy,
  #appView.sidebar-collapsed .sidebar-language-switcher,
  #appView.sidebar-collapsed .nav-section-label,
  #appView.sidebar-collapsed .nav-button > span,
  #appView.sidebar-collapsed .nav-chevron,
  #appView.sidebar-collapsed .nav-subnav,
  #appView.sidebar-collapsed .server-release-card > span,
  #appView.sidebar-collapsed .server-release-card > b,
  #appView.sidebar-collapsed .account-copy,
  #appView.sidebar-collapsed .account-chevron {
    display: none !important;
  }

  #appView.sidebar-collapsed .main-nav {
    justify-items: center;
    gap: 6px;
    padding-top: 24px;
    overflow-x: visible;
    overflow-y: auto;
  }

  #appView.sidebar-collapsed .nav-group {
    width: 100%;
    justify-items: center;
  }

  #appView.sidebar-collapsed .nav-button {
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    height: 46px;
    min-height: 46px;
    justify-content: center;
    gap: 0;
    margin-inline: auto;
    padding: 0;
    text-align: center;
  }

  #appView.sidebar-collapsed .nav-button:hover {
    transform: none;
  }

  #appView.sidebar-collapsed .nav-button::after {
    left: 50%;
    transform: translateX(-50%);
  }

  #appView.sidebar-collapsed .nav-notification-badge:not([hidden]) {
    position: absolute;
    top: 7px;
    right: 7px;
    display: block;
    width: 8px;
    min-width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-width: 1px;
    border-radius: 50%;
    font-size: 0;
  }

  #appView.sidebar-collapsed .server-release-card {
    display: grid;
    width: 46px;
    height: 46px;
    min-height: 46px;
    grid-template-columns: 1fr;
    place-items: center;
    gap: 0;
    margin: 10px auto;
    padding: 0;
    border-radius: 13px;
  }

  #appView.sidebar-collapsed .server-release-card:hover {
    transform: translateY(-1px);
  }

  #appView.sidebar-collapsed .sidebar-account-wrap {
    width: 100%;
    padding-top: 12px;
  }

  #appView.sidebar-collapsed .sidebar-account {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    margin-inline: auto;
    padding: 4px;
  }

  #appView.sidebar-collapsed .avatar {
    width: 36px;
    height: 36px;
  }

  #appView.sidebar-collapsed .user-menu {
    right: auto;
    bottom: 0;
    left: calc(100% + 12px);
    width: 220px;
  }
}

@media (max-width: 900px) {
  #appView .sidebar-collapse-button {
    display: none;
  }
}

/* Keep the collapsed rail focused while its selected group opens beside it. */
@media (min-width: 901px) {
  #appView .sidebar-flyout-host {
    position: absolute;
    inset: 0;
    z-index: 65;
    pointer-events: none;
  }

  #appView.sidebar-collapsed .sidebar-flyout-host .nav-subnav.sidebar-flyout:not([hidden]) {
    position: absolute;
    top: var(--sidebar-flyout-top, 12px);
    left: calc(100% + 12px);
    display: grid !important;
    width: 236px;
    max-height: calc(100vh - 24px);
    margin: 0;
    padding: 10px;
    gap: 4px;
    overflow-y: auto;
    border: 1px solid rgba(185, 228, 95, 0.22);
    border-radius: 16px;
    background:
      radial-gradient(120% 100% at 0% 0%, rgba(185, 228, 95, 0.14), transparent 58%),
      linear-gradient(145deg, rgba(28, 42, 31, 0.98), rgba(12, 20, 16, 0.99));
    box-shadow: 0 20px 52px rgba(0, 5, 3, 0.42), inset 0 1px rgba(241, 250, 221, 0.08);
    pointer-events: auto;
    animation: sidebar-flyout-in 160ms ease-out both;
  }

  #appView.sidebar-collapsed .sidebar-flyout-host .nav-subnav.sidebar-flyout::before {
    position: absolute;
    top: 22px;
    left: -6px;
    width: 11px;
    height: 11px;
    border-left: 1px solid rgba(185, 228, 95, 0.22);
    border-bottom: 1px solid rgba(185, 228, 95, 0.22);
    border-radius: 0 0 0 3px;
    content: "";
    background: #1b2a1f;
    transform: rotate(45deg);
  }

  #appView.sidebar-collapsed .sidebar-flyout-host .nav-sub-button {
    min-height: 36px;
    padding: 8px 11px;
    border-radius: 10px;
    color: #a8b8ad;
    font-size: 12px;
  }

  #appView.sidebar-collapsed .sidebar-flyout-host .nav-sub-button:hover,
  #appView.sidebar-collapsed .sidebar-flyout-host .nav-sub-button.active {
    color: #e2f6b0;
    background: rgba(185, 228, 95, 0.12);
  }

  #appView.sidebar-collapsed .sidebar-flyout-host .nav-sub-button.active {
    box-shadow: inset 2px 0 #b9e45f, 0 0 18px rgba(185, 228, 95, 0.06);
  }

  html[data-theme="light"] #appView.sidebar-collapsed .sidebar-flyout-host .nav-subnav.sidebar-flyout {
    border-color: rgba(120, 157, 32, 0.24);
    background:
      radial-gradient(120% 100% at 0% 0%, rgba(137, 178, 50, 0.13), transparent 58%),
      linear-gradient(145deg, rgba(250, 253, 248, 0.99), rgba(239, 246, 237, 0.99));
    box-shadow: 0 18px 42px rgba(52, 79, 56, 0.18), inset 0 1px rgba(255, 255, 255, 0.86);
  }

  html[data-theme="light"] #appView.sidebar-collapsed .sidebar-flyout-host .nav-subnav.sidebar-flyout::before {
    border-color: rgba(120, 157, 32, 0.24);
    background: #f7fbf4;
  }

  html[data-theme="light"] #appView.sidebar-collapsed .sidebar-flyout-host .nav-sub-button {
    color: #607267;
  }

  html[data-theme="light"] #appView.sidebar-collapsed .sidebar-flyout-host .nav-sub-button:hover,
  html[data-theme="light"] #appView.sidebar-collapsed .sidebar-flyout-host .nav-sub-button.active {
    color: #4f6e12;
    background: rgba(120, 157, 32, 0.10);
  }

}

@keyframes sidebar-flyout-in {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}

/* V3.1.2 mobile shell regression fixes. */
@media (max-width: 900px) {
  #appView .sidebar-flyout-host {
    display: none;
  }
}

@media (max-width: 680px) {
  #appView .sidebar {
    grid-template-rows: 42px;
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  #appView .main-nav {
    grid-row: 1;
    grid-column: 1;
  }

  #appView .sidebar-account-wrap {
    z-index: 45;
    width: 42px;
    height: 42px;
    grid-row: 1;
    grid-column: 2;
  }

  #appView .sidebar-account {
    display: grid;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    place-items: center;
  }

  #appView .account-chevron {
    display: block;
    line-height: 1;
  }

  #appView .user-menu {
    top: calc(100% + 8px);
    right: 0;
    bottom: auto;
    left: auto;
    width: min(220px, calc(100vw - 24px));
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
  }

  #appView .mobile-subnav-host .nav-subnav {
    max-height: calc(100dvh - 84px);
    margin: 0;
    padding: 6px;
  }

  #appView .cnc-device-toolbar .toolbar-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 42px;
  }

  #appView .cnc-device-toolbar .toolbar-icon-button {
    width: 42px;
  }

  #appView .cnc-device-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #appView .cnc-device-metrics > div {
    min-height: 92px;
    padding: 13px 14px;
  }

  #appView .cnc-category-summary-panel {
    padding: 14px;
  }

  #appView .cnc-category-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 10px;
  }

  #appView .cnc-category-summary article {
    padding: 11px 12px;
  }

  #appView .cnc-device-filterbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  #appView .cnc-device-filterbar .search-input {
    grid-column: 1 / -1;
  }

  #appView .cnc-device-table-panel,
  #appView .cnc-device-table-panel .table-scroll {
    max-width: 100%;
  }
}

@media (max-width: 620px) {
  #appView .topbar {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  #appView .quota-display {
    min-width: 118px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 7px 9px;
  }

  #appView .quota-display span {
    display: inline;
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
  }

  #appView .quota-display strong {
    font-size: 11px;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  #appView .cnc-device-filterbar {
    grid-template-columns: minmax(0, 1fr);
  }

  #appView .cnc-device-filterbar .search-input {
    grid-column: 1;
  }
}

/* Experimental feature marker shared by the navigation and current page title. */
.lv-login-tabs { display: flex; gap: 20px; margin: 18px 0; border-bottom: 1px solid var(--lv-line-2); }
.lv-login-tabs button { flex: 1; min-width: 0; padding: 12px 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--lv-text-2); font: inherit; cursor: pointer; }
.lv-login-tabs button[aria-selected="true"] { color: var(--lv-lime); border-bottom-color: var(--lv-lime); }
.lv-login-tabs button:focus-visible { outline: 2px solid var(--lv-lime); outline-offset: 2px; }
.lv-binding-notice { padding: 10px 0; color: var(--lv-lime); font-size: 14px; line-height: 1.5; }
.lv-binding-cancel { background: transparent; color: var(--lv-text-2); border: 0; padding: 10px; cursor: pointer; }
.lv-wechat-panel { min-height: 400px; text-align: center; padding: 8px 0; }
.lv-wechat-qr { position: relative; width: 300px; max-width: 100%; min-height: 100px; margin: 0 auto; }
.lv-wechat-qr iframe { position: absolute; top: 0; left: 0; width: 300px; height: 400px; border: 0; transform-origin: 0 0; color-scheme: dark; }
html[data-theme="light"] .lv-wechat-qr iframe { color-scheme: light; }
.lv-wechat-panel p { color: var(--lv-text-2); font-size: 14px; line-height: 1.5; margin: 12px 0; }
.lv-wechat-panel > button { padding: 8px 16px; border: 1px solid var(--lv-line-2); border-radius: 6px; color: var(--lv-lime); background: transparent; cursor: pointer; }
#loginForm[hidden], #loginWeChatPanel[hidden], #loginWeChatBinding[hidden], #cancelWeChatBinding[hidden] { display: none; }

#latheCamSubnavButton,
.topbar-title-row {
  display: flex;
  align-items: center;
}

#latheCamSubnavButton {
  gap: 6px;
}

.topbar-title-row {
  min-width: 0;
  gap: 8px;
}

.feature-beta-badge {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid rgba(181, 228, 82, 0.38);
  border-radius: 3px;
  color: #C5EB72;
  background: rgba(156, 199, 55, 0.12);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

.feature-beta-badge-title {
  margin-top: 2px;
  padding: 3px 6px;
  font-size: 9px;
}

.feature-beta-badge[hidden] {
  display: none;
}

html[data-theme="light"] .feature-beta-badge {
  border-color: rgba(96, 124, 21, 0.28);
  color: #4F6812;
  background: rgba(132, 168, 38, 0.12);
}

/* V3.3.45: theme-owned board surfaces and fixed, readable equipment slots. */
#cncDeviceBoard {
  --monitor-bg: #121820;
  --monitor-surface: #1a232d;
  --monitor-surface-strong: #24313e;
  --monitor-border: rgba(188, 204, 220, .18);
  --monitor-border-strong: rgba(188, 204, 220, .32);
  --monitor-ink: #edf2f7;
  --monitor-muted: #aebac8;
  --monitor-faint: #91a0b0;
  --monitor-accent: #9db8d8;
  --monitor-success: #58c59c;
  --monitor-info: #81b4ed;
  --monitor-danger: #f08c96;
  --monitor-warning: #e9b865;
  background: var(--monitor-bg);
  color: var(--monitor-ink);
}

html[data-theme="light"] #cncDeviceBoard {
  --monitor-bg: #edf1f5;
  --monitor-surface: #f8fafc;
  --monitor-surface-strong: #e7edf3;
  --monitor-border: rgba(55, 76, 98, .18);
  --monitor-border-strong: rgba(55, 76, 98, .30);
  --monitor-ink: #1d2833;
  --monitor-muted: #596b7c;
  --monitor-faint: #6d7f90;
  --monitor-accent: #537aa3;
  --monitor-success: #176f4e;
  --monitor-info: #356ca8;
  --monitor-danger: #b93648;
  --monitor-warning: #91630b;
}

#cncDeviceBoard .monitor-board-canvas { display: none; }
#cncDeviceBoard .monitor-panel,
#cncDeviceBoard .cnc-monitor-stage,
html[data-theme="light"] #cncDeviceBoard .monitor-panel {
  background: var(--monitor-surface);
  border: 1px solid var(--monitor-border);
  border-radius: 6px;
  box-shadow: none;
}

#cncDeviceBoard .monitor-panel-heading {
  border-bottom: 1px solid var(--monitor-border);
  padding-bottom: 10px;
}
#cncDeviceBoard .monitor-panel-heading > div:first-child > span { display: none; }
#cncDeviceBoard .monitor-panel-heading h3 {
  color: var(--monitor-ink);
  font-size: clamp(18px, var(--monitor-board-font-size), 24px);
  letter-spacing: 0;
}
#cncDeviceBoard .cnc-monitor-stage > .monitor-panel-heading .monitor-panel-meta {
  color: var(--monitor-muted);
  background: transparent;
  border: 0;
}
#cncDeviceBoard .cnc-device-board-summary > div,
html[data-theme="light"] #cncDeviceBoard .cnc-device-board-summary > div {
  background: var(--monitor-surface);
  border-color: var(--monitor-border);
  border-top-color: var(--monitor-accent);
  box-shadow: none;
  border-radius: 6px;
}
#cncDeviceBoard .cnc-device-board-summary > div[data-tone="danger"] { border-top-color: var(--monitor-danger); }
#cncDeviceBoard .cnc-device-board-summary > div[data-tone="warning"] { border-top-color: var(--monitor-warning); }
#cncDeviceBoard .cnc-device-board-summary > div > span,
#cncDeviceBoard .cnc-board-summary-value small { color: var(--monitor-muted); }
#cncDeviceBoard .cnc-board-summary-value strong { color: var(--monitor-ink); }
#cncDeviceBoard .cnc-device-board-summary > div[data-tone="danger"] strong { color: var(--monitor-danger); }

#cncDeviceBoard .cnc-board-stage-controls button {
  color: var(--monitor-muted);
  background: var(--monitor-surface);
  border-color: var(--monitor-border-strong);
}
#cncDeviceBoard .cnc-board-stage-controls button[aria-pressed="true"] {
  color: var(--monitor-accent);
  background: var(--monitor-surface-strong);
  border-color: var(--monitor-accent);
}
#cncDeviceBoard .cnc-device-board-grid {
  align-items: start;
  gap: 12px;
  height: 100%;
  max-height: none;
  align-self: stretch;
}
#cncDeviceBoard .cnc-device-board-grid > .cnc-board-device {
  height: min(100%, 392px);
  box-sizing: border-box;
  grid-template-rows: 86px minmax(0, 1fr) 20px 38px;
  gap: 7px;
}
#cncDeviceBoard .cnc-board-device,
#cncDeviceBoard .cnc-board-device:hover {
  color: var(--monitor-ink);
  background: var(--monitor-surface-strong);
  border-color: var(--monitor-border-strong);
  box-shadow: none;
  transform: none;
  border-radius: 6px;
}
#cncDeviceBoard .cnc-board-device:hover,
#cncDeviceBoard .cnc-board-device:focus-visible { border-color: var(--monitor-accent); }

/* Emphasize the whole interactive card while keeping its geometry fixed. */
@media (hover: hover) and (pointer: fine) {
  #cncDeviceBoard .cnc-device-board-grid > .cnc-board-device:hover {
    background: color-mix(in srgb, var(--monitor-surface-strong) 92%, var(--monitor-ink));
    border-color: color-mix(in srgb, var(--monitor-accent) 72%, var(--monitor-ink));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--monitor-accent) 65%, transparent),
      0 6px 16px rgba(9, 17, 22, .2);
  }
}
#cncDeviceBoard .cnc-device-board-grid > .cnc-board-device:focus-visible {
  background: color-mix(in srgb, var(--monitor-surface-strong) 92%, var(--monitor-ink));
  outline: 2px solid var(--monitor-accent);
  outline-offset: -3px;
}
#cncDeviceBoard .cnc-board-device h3,
#cncDeviceBoard .cnc-board-mode,
#cncDeviceBoard .cnc-board-device-metrics strong { color: var(--monitor-ink); }
#cncDeviceBoard .cnc-board-device h3 { font-size: clamp(18px, var(--monitor-board-font-size), 24px); }
#cncDeviceBoard .cnc-board-device code,
#cncDeviceBoard .cnc-board-device-metrics span,
#cncDeviceBoard .cnc-board-device-metrics small,
#cncDeviceBoard .cnc-board-device > footer { color: var(--monitor-muted); }
#cncDeviceBoard .cnc-board-device code,
#cncDeviceBoard .cnc-board-mode { letter-spacing: 0; }
#cncDeviceBoard .cnc-board-mode { flex-basis: 78px; width: 78px; }
#cncDeviceBoard .cnc-board-device > header,
#cncDeviceBoard .cnc-board-device > footer { border-color: var(--monitor-border); }
#cncDeviceBoard .cnc-board-category {
  color: var(--monitor-accent);
  border-color: var(--monitor-border-strong);
  background: transparent;
}
#cncDeviceBoard .cnc-board-detail-hint { color: var(--monitor-accent); }
#cncDeviceBoard .cnc-board-device-metrics > div,
#cncDeviceBoard .cnc-board-device-metrics > div:hover {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--monitor-border);
  border-radius: 0;
}
#cncDeviceBoard .cnc-board-device-metrics span {
  font-size: clamp(13px, calc(var(--monitor-board-font-size) * .65), 17px);
}
#cncDeviceBoard .cnc-board-device-metrics strong {
  font-size: clamp(20px, var(--monitor-board-font-size), 26px);
}
#cncDeviceBoard .cnc-state-pill { flex-shrink: 0; }
#cncDeviceBoard .cnc-state-pill > i { flex: 0 0 7px; }
#cncDeviceBoard .cnc-state-running { color: var(--monitor-success); }
#cncDeviceBoard .cnc-state-idle { color: var(--monitor-info); }
#cncDeviceBoard .cnc-state-paused { color: var(--monitor-warning); }
#cncDeviceBoard .cnc-state-alarm { color: var(--monitor-danger); }
#cncDeviceBoard .cnc-state-offline { color: var(--monitor-muted); }
#cncDeviceBoard :is(.cnc-state-downloading, .cnc-state-update-waiting, .cnc-state-installing,
  .cnc-state-update-downloaded, .cnc-state-update-verified, .cnc-state-update-installed) {
  color: var(--monitor-warning);
}
#cncDeviceBoard :is(.cnc-board-state-downloading, .cnc-board-state-update-waiting, .cnc-board-state-installing,
  .cnc-board-state-update-downloaded, .cnc-board-state-update-verified, .cnc-board-state-update-installed) {
  --cnc-status-rail: var(--monitor-warning);
}
#cncDeviceBoard .cnc-device-board-footer { background: var(--monitor-bg); color: var(--monitor-muted); }
#cncDeviceBoard .cnc-board-detail-dialog {
  color: var(--monitor-ink);
  background: var(--monitor-surface);
  border-color: var(--monitor-border-strong);
  border-radius: 8px;
}
#cncDeviceBoard .cnc-board-detail-heading { border-color: var(--monitor-border); }
#cncDeviceBoard .cnc-board-detail-heading button {
  color: var(--monitor-ink);
  background: var(--monitor-surface-strong);
  border-color: var(--monitor-border-strong);
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid {
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-content: start;
  max-height: none;
}
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid > .cnc-board-device,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid > .cnc-board-device.is-compact {
  height: min(100%, 280px);
  grid-template-rows: 40px minmax(0, 1fr) 20px;
}
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device h3 { font-size: 18px; }
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device-metrics strong { font-size: 20px; }
#cncDeviceBoard .cnc-board-device.is-compact .cnc-board-device-metrics span {
  font-size: clamp(13px, calc(var(--monitor-board-font-size) * .55), 17px);
  line-height: 18px;
}

#appView .cnc-device-table-panel .table-scroll {
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: #7f9389 #232d28;
}
html[data-theme="light"] #appView .cnc-device-table-panel .table-scroll {
  color-scheme: light;
  scrollbar-color: #9aad9f #e6ede8;
}
#cncDeviceBoard :is(.cnc-device-board-grid, .cnc-group-production-list, .monitor-activity-list, .cnc-board-groups) {
  scrollbar-width: thin;
  scrollbar-color: var(--monitor-faint) var(--monitor-surface-strong);
}
#cncDeviceBoard :is(.cnc-device-board-grid, .cnc-group-production-list, .monitor-activity-list)::-webkit-scrollbar-thumb {
  background: var(--monitor-faint);
}
#cncDeviceBoard :is(.cnc-device-board-grid, .cnc-group-production-list, .monitor-activity-list)::-webkit-scrollbar-track {
  background: var(--monitor-surface-strong);
}

#page-accounts .account-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 260px));
  gap: 16px;
  margin-bottom: 16px;
}
#page-accounts table { min-width: 1200px; }
#page-accounts .account-category-cell { min-width: 118px; }
#page-accounts .account-space-cell { min-width: 168px; }
#page-accounts .account-space-cell strong,
#page-accounts .account-space-cell small { display: block; }
#page-accounts .account-space-cell small { margin-top: 5px; color: var(--muted); }

@media (max-width: 700px) {
  #cncDeviceBoard .cnc-monitor-board-body {
    min-height: 0;
    grid-template-rows: 580px auto;
    overflow-y: auto;
  }
  #cncDeviceBoard .cnc-monitor-stage { min-height: 580px; }
  #page-accounts .account-filters { grid-template-columns: minmax(0, 1fr); }
}

/* Board appearance presets. The default follows the site's own surfaces and
   semantic colors; blue is an opt-in board-only preset. */
.monitor-board:not([data-board-theme="blue"]),
.monitor-board[data-board-theme="site"],
#cncDeviceBoard[data-board-theme="site"] {
  --monitor-bg: var(--bg);
  --monitor-surface: var(--surface);
  --monitor-surface-strong: var(--surface-solid);
  --monitor-border: var(--line);
  --monitor-border-strong: var(--line-strong);
  --monitor-ink: var(--ink);
  --monitor-muted: var(--muted);
  --monitor-faint: color-mix(in srgb, var(--muted) 72%, var(--surface));
  --monitor-accent: var(--accent);
  --monitor-success: var(--success);
  --monitor-info: var(--info);
  --monitor-warning: var(--warning);
  --monitor-danger: var(--danger);
  --monitor-cyan: var(--info);
  --board-surface: var(--surface);
  --board-surface-strong: var(--surface-solid);
  --board-line: var(--line);
  background: var(--monitor-bg);
}

.monitor-board:not([data-board-theme="blue"]) .monitor-panel,
.monitor-board:not([data-board-theme="blue"]) .monitor-board-summary > div,
.monitor-board:not([data-board-theme="blue"]) .cnc-device-board-card,
.monitor-board:not([data-board-theme="blue"]) .after-sales-board-card {
  background: var(--monitor-surface);
  box-shadow: none;
}

.monitor-board:not([data-board-theme="blue"]) :is(.cnc-device-board-icon-button, .after-sales-board-icon-button):hover,
.monitor-board:not([data-board-theme="blue"]) :is(.cnc-device-board-icon-button, .after-sales-board-icon-button):focus-visible {
  border-color: color-mix(in srgb, var(--monitor-accent) 46%, transparent);
  color: var(--monitor-accent);
  background: color-mix(in srgb, var(--monitor-accent) 10%, transparent);
}

/* The optional blue preset keeps the existing blue-gray board appearance. */
.monitor-board[data-board-theme="blue"] {
  --monitor-bg: #090f17;
  --monitor-surface: rgba(17, 25, 37, 0.91);
  --monitor-surface-strong: #151e2b;
  --monitor-border: rgba(197, 213, 238, 0.12);
  --monitor-border-strong: rgba(197, 213, 238, 0.20);
  --monitor-ink: #edf2f8;
  --monitor-muted: #8997ab;
  --monitor-faint: #68778c;
  --monitor-accent: #6688ff;
  --monitor-success: #4fc596;
  --monitor-info: #72c6d5;
  --monitor-warning: #dca54b;
  --monitor-danger: #ed6b72;
  --monitor-cyan: #72c6d5;
  --board-surface: var(--monitor-surface-strong);
  --board-surface-strong: #192331;
  --board-line: var(--monitor-border);
  background: var(--monitor-bg);
}

html[data-theme="light"] .monitor-board:not([data-board-theme="blue"]),
html[data-theme="light"] .monitor-board[data-board-theme="site"],
html[data-theme="light"] #cncDeviceBoard[data-board-theme="site"] {
  --monitor-bg: var(--bg);
  --monitor-surface: var(--surface);
  --monitor-surface-strong: var(--surface-solid);
  --monitor-border: var(--line);
  --monitor-border-strong: var(--line-strong);
  --monitor-ink: var(--ink);
  --monitor-muted: var(--muted);
  --monitor-faint: color-mix(in srgb, var(--muted) 72%, var(--surface));
  --monitor-accent: var(--accent);
  --monitor-success: var(--success);
  --monitor-info: var(--info);
  --monitor-warning: var(--warning);
  --monitor-danger: var(--danger);
  --monitor-cyan: var(--info);
  --board-surface: var(--surface);
  --board-surface-strong: var(--surface-solid);
  --board-line: var(--line);
  background: var(--monitor-bg);
}

html[data-theme="light"] .monitor-board[data-board-theme="blue"] {
  --monitor-bg: #e9eef4;
  --monitor-surface: #f8fafc;
  --monitor-surface-strong: #e7edf3;
  --monitor-border: rgba(55, 76, 98, .18);
  --monitor-border-strong: rgba(55, 76, 98, .30);
  --monitor-ink: #1d2833;
  --monitor-muted: #596b7c;
  --monitor-faint: #6d7f90;
  --monitor-accent: #416be8;
  --monitor-success: #176f4e;
  --monitor-info: #356ca8;
  --monitor-warning: #91630b;
  --monitor-danger: #b93648;
  --monitor-cyan: #5b8ed8;
  --board-surface: #f8fafc;
  --board-surface-strong: #e7edf3;
  --board-line: var(--monitor-border);
  background: var(--monitor-bg);
}

/* Keep all card information visible in two-row mode. Cards stay compact, but
   the same identity, footer and metric fields as one-row mode remain present. */
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device code,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-category,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > footer {
  display: block;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid > .cnc-board-device,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid > .cnc-board-device.is-compact {
  grid-template-rows: 58px minmax(0, 1fr) 20px;
  height: min(100%, 280px);
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device > header {
  height: 58px;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device.is-compact .cnc-board-device-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  overflow: hidden;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device.is-compact .cnc-board-device-metrics > div,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device.is-compact .cnc-board-device-metrics > div[data-priority="primary"] {
  display: grid;
  min-width: 0;
  height: auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: 2px 5px;
  gap: 2px 4px;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device.is-compact .cnc-board-device-metrics > div > span,
#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device.is-compact .cnc-board-device-metrics > div > small {
  grid-column: 1;
  min-width: 0;
  justify-self: stretch;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device.is-compact .cnc-board-device-metrics > div > span {
  grid-row: 1;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device.is-compact .cnc-board-device-metrics > div > small {
  grid-row: 3;
}

#cncDeviceBoard[data-card-rows="2"] .cnc-device-board-grid .cnc-board-device.is-compact .cnc-board-device-metrics > div > strong {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  justify-self: stretch;
}

/* Detail-only controls keep both board card layouts unchanged. */
#cncDeviceBoard .cnc-board-detail-content .cnc-board-device > header > div > h3 {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 28px;
}
#cncDeviceBoard .cnc-board-detail-name {
  flex: 0 1 auto;
  max-width: 50%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#cncDeviceBoard .cnc-board-current-program {
  flex: 0 1 auto;
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid var(--monitor-border-strong);
  color: var(--monitor-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#cncDeviceBoard .cnc-board-detail-content [data-alarm-history-mode="click"] .cnc-board-device-metrics > .cnc-board-alarm-metric {
  height: 164px;
  min-height: 164px;
  max-height: 164px;
}
#cncDeviceBoard .cnc-board-detail-content [data-alarm-history-mode="click"] .cnc-board-device-metrics > .cnc-board-alarm-history {
  height: auto;
  min-height: 0;
  max-height: none;
  align-self: start;
  border-left: 0;
}
#cncDeviceBoard [data-alarm-history-mode="click"] .cnc-board-alarm-history-heading {
  justify-content: flex-end;
}
#cncDeviceBoard [data-alarm-history-mode="click"] .cnc-board-alarm-history button {
  min-height: 44px;
  font-size: 16px;
}
#cncDeviceBoard .cnc-board-alarm-history [hidden] { display: none !important; }
@media (max-width: 700px) {
  #cncDeviceBoard .cnc-board-detail-content .cnc-board-device > header > div > h3 { gap: 8px; }
  #cncDeviceBoard .cnc-board-current-program { padding-left: 8px; font-size: 14px; }
  #cncDeviceBoard [data-alarm-history-mode="click"] .cnc-board-alarm-history-heading { justify-content: flex-start; }
}