/*
 * 设备工作台展示层，沿用 platform-design.css 的平台色板。
 * html 上的展示作用域不受权限脚本重建 body class 的影响。
 * 业务脚本继续负责显隐、可编辑性、状态颜色、数据与 iframe 高度。
 */

/* 1. 变量引用与基本排版。子页不设 viewport 高度，避免父壳测高循环。 */
html[data-device-ui] {
  font-family: var(--ui-font);
  letter-spacing: 0;
  color-scheme: light;
}
html[data-device-ui].dark-layout { color-scheme: dark; }
html[data-device-ui] body {
  color: var(--ui-ink);
  font-family: var(--ui-font);
  font-size: 15px;
  line-height: 1.55;
  background: var(--ui-canvas) !important;
}
html[data-device-ui] *,
html[data-device-ui] *::before,
html[data-device-ui] *::after { box-sizing: border-box; }
html[data-device-ui="page"] body { height: auto; margin: 0; }
html[data-device-ui="page"] .row.IframeHeight {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0 auto;
  /* 设备拓扑与曲线需要完整工作区，不沿用普通报表的1280px纸面上限。 */
  padding: 20px 16px 28px;
}
html[data-device-ui="page"] .IframeHeight > [class*="col-"] { min-width: 0; }
html[data-device-ui="page"] .IframeHeight > .col-12 { padding-left: 0; padding-right: 0; }
html[data-device-ui] h1,
html[data-device-ui] h2,
html[data-device-ui] h3,
html[data-device-ui] h4,
html[data-device-ui] h5,
html[data-device-ui] h6 { color: var(--ui-ink); font-family: var(--ui-font); }
html[data-device-ui="page"] .text-black { color: var(--ui-ink) !important; }
html[data-device-ui] ::selection { color: var(--ui-ink); background: var(--ui-tint); }
html[data-device-ui] :is(input,textarea) { caret-color: var(--ui-accent); }
html[data-device-ui] :is(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 3px;
}
html[data-device-ui] :is(.table-responsive,.table-responsive-xl,.schedule-slots) {
  scrollbar-color: var(--ui-field) var(--ui-soft);
  overscroll-behavior-x: contain;
}

/* 2. 设备外壳：保持原菜单状态、品牌显隐与测高逻辑。 */
/* Device shell: retain the existing menu states, brand visibility and iframe sizing. */
html[data-device-ui="shell"] body {
  --device-ui-header: 64px;
  --device-ui-sidebar: 216px;
  --device-ui-nav: #1b2e3d;
  --device-ui-nav-ink: #e5edf3;
  --device-ui-nav-muted: #b5c7d5;
  --device-ui-nav-selected: #155b5e;
  margin: 0;
  color: var(--ui-ink);
  background: var(--ui-canvas) !important;
  font: 14px/1.5 var(--ui-font);
  color-scheme: light;
}
html[data-device-ui="shell"].dark-layout body,
html[data-device-ui="shell"] body.dark-layout { color-scheme: dark; }
html[data-device-ui="shell"] :is(a, button, input):focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 3px;
}
html[data-device-ui="shell"] .header-navbar {
  position: fixed;
  inset: 0 0 auto;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: var(--device-ui-header);
  min-height: var(--device-ui-header);
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: var(--ui-paper) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  z-index: 1035;
}
html[data-device-ui="shell"] .header-navbar .navbar-container {
  width: 100%;
  height: 100%;
  /* 原容器兼用 content 类，不能继承侧栏折叠后的正文左边距。 */
  margin-left: 0 !important;
  padding: 0 24px 0 0;
  gap: 0;
  flex-wrap: nowrap;
}
html[data-device-ui="shell"] #neutral {
  flex: 0 0 var(--device-ui-sidebar);
  width: var(--device-ui-sidebar);
  height: 100%;
  padding: 12px 20px;
  border-right: 1px solid var(--ui-line);
  background: #fff;
}
html[data-device-ui="shell"] .Logo_Display {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 40px;
  object-fit: contain;
}
html[data-device-ui="shell"] #DevicePageTitle {
  position: absolute;
  left: 50%;
  top: 50%;
  flex: 0 0 auto;
  min-width: 0;
  max-width: calc(100% - 720px);
  padding: 0;
  transform: translate(-50%, -50%);
  color: var(--ui-ink);
  font: 600 15px/1.3 var(--ui-font);
  text-align: center;
}
html[data-device-ui="shell"] .device-ui-shell-tools {
  flex: 0 0 auto;
  flex-direction: row;
  gap: 8px;
  margin: 0 0 0 auto !important;
}
html[data-device-ui="shell"] .device-ui-shell-tools .nav-link {
  margin: 0;
  padding: 8px;
  color: var(--ui-muted);
}
html[data-device-ui="shell"] .device-ui-shell-tools .nav-link:hover {
  color: var(--ui-accent);
  background: var(--ui-tint);
  border-radius: 5px;
}
html[data-device-ui="shell"] .device-ui-shell-tools .nav-link-style,
html[data-device-ui="shell"] #bell_tour a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
html[data-device-ui="shell"] #connectsvg {
  min-width: 28px;
  padding: 0 2px;
}
html[data-device-ui="shell"] #connectsvg .wifi { width: 24px; height: 24px; }
html[data-device-ui="shell"] #bell_tour .badge-up {
  top: 1px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid var(--ui-paper);
  border-radius: 999px;
  font: 600 10px/14px var(--ui-font);
  transform: none;
}
html[data-device-ui="shell"] .badge-glow { box-shadow: none !important; }
html[data-device-ui="shell"] #dropdown-user {
  min-height: 44px;
  padding-left: 16px;
  border-left: 1px solid var(--ui-line);
  border-radius: 0;
  gap: 10px;
}
html[data-device-ui="shell"] #dropdown-user .user-nav { margin: 0; }
html[data-device-ui="shell"] #username {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ui-ink);
  font-size: 13px;
  font-weight: 600 !important;
}
html[data-device-ui="shell"] #dropdown-user :is(.avatar, .avatar-content) {
  color: var(--ui-accent);
  background: var(--ui-tint) !important;
  border-radius: 50%;
}
html[data-device-ui="shell"] .dropdown-menu {
  padding: 6px;
  color: var(--ui-ink);
  background: var(--ui-paper);
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  box-shadow: none;
}
html[data-device-ui="shell"] .dropdown-item {
  min-height: 44px;
  padding: 10px 12px;
  color: var(--ui-ink);
  font: 14px/1.5 var(--ui-font);
  border-radius: 4px;
}
html[data-device-ui="shell"] .dropdown-item:is(:hover, :focus) {
  color: var(--ui-accent);
  background: var(--ui-tint);
}
html[data-device-ui="shell"] .main-menu {
  display: flex;
  flex-direction: column;
  top: var(--device-ui-header);
  bottom: 0;
  width: var(--device-ui-sidebar) !important;
  height: calc(100% - var(--device-ui-header));
  background: var(--device-ui-nav) !important;
  border-right: 0;
  box-shadow: none !important;
  opacity: 1 !important;
}
html[data-device-ui="shell"] .main-menu .navbar-header {
  flex: 0 0 64px;
  width: 100%;
  height: 64px;
  padding: 10px 12px;
}
html[data-device-ui="shell"] .main-menu .navbar-header > .nav {
  align-items: center;
  flex-wrap: nowrap;
  height: 44px;
}
html[data-device-ui="shell"] .main-menu .navbar-brand { margin: 0; padding: 0; }
html[data-device-ui="shell"] .main-menu .navbar-brand button {
  min-height: 44px;
  margin: 0 !important;
  padding: 8px 10px;
  color: var(--device-ui-nav-ink);
  background: transparent;
  border: 1px solid #3b5060;
  border-radius: 5px;
  font: 600 14px/1.5 var(--ui-font);
}
html[data-device-ui="shell"] .main-menu .navbar-brand button:hover { background: #2a4151; }
html[data-device-ui="shell"] .main-menu .navbar-brand i { animation: none; }
html[data-device-ui="shell"] .main-menu .modern-nav-toggle { padding: 8px; }
html[data-device-ui="shell"] .main-menu .modern-nav-toggle .text-primary { color: var(--device-ui-nav-ink) !important; }
html[data-device-ui="shell"] .main-menu-content {
  flex: 1;
  min-height: 0;
  height: auto !important;
}
html[data-device-ui="shell"] .main-menu .navigation {
  margin: 0;
  padding: 4px 12px 16px;
  background: transparent !important;
  font-family: var(--ui-font);
}
html[data-device-ui="shell"] .main-menu .navigation > li { margin: 0 0 4px; }
html[data-device-ui="shell"] .main-menu .navigation li > a {
  min-height: 44px;
  margin: 0;
  padding: 11px 12px;
  color: var(--device-ui-nav-ink) !important;
  background: transparent;
  border: 0;
  border-radius: 5px;
  box-shadow: none !important;
  font: 400 14px/1.4 var(--ui-font);
}
html[data-device-ui="shell"] .main-menu .navigation li > a:is(:hover, :focus) {
  color: #fff !important;
  background: #2a4151 !important;
}
html[data-device-ui="shell"] .main-menu .navigation > li.open > a { background: #2a4151 !important; }
html[data-device-ui="shell"] .main-menu .navigation li.has-sub > a { padding-right: 32px; }
html[data-device-ui="shell"] .main-menu .navigation > li > a > :is(i, svg) {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  transform: none !important;
}
/* 216px侧栏保留44px触控行；名称与状态分列，避免状态徽标挤掉设备名称。 */
html[data-device-ui="shell"] #main-menu-navigation li > a {
  background-image: none !important;
  box-shadow: none !important;
}
html[data-device-ui="shell"] #main-menu-navigation :is(.menu-item, .menu-title) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
/* Vuexy对子菜单li本身绘制紫色渐变和光晕；仅清理a无法移除这一层。 */
html[data-device-ui="shell"] #main-menu-navigation li:is(.active, .sidebar-group-active) {
  background: transparent !important;
  box-shadow: none !important;
}
html[data-device-ui="shell"] #main-menu-navigation li:is(.active, .sidebar-group-active) > a {
  color: #f0fffc !important;
  background: var(--device-ui-nav-selected) !important;
  box-shadow: none !important;
  font-weight: 600;
}
html[data-device-ui="shell"] #main-menu-navigation > li.open > a { background: #2a4151 !important; }
html[data-device-ui="shell"] #main-menu-navigation .menu-content {
  background: transparent !important;
}
html[data-device-ui="shell"] #main-menu-navigation .menu-content > li {
  margin: 0;
}
/* 11px图标 + 可换行名称 + 自适应状态，适用于Device/Log/Advanced各组子菜单。 */
html[data-device-ui="shell"] #main-menu-navigation .menu-content > li > a {
  display: grid !important;
  grid-template-columns: 11px minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: 8px;
  min-height: 44px;
  padding: 10px 10px 10px 20px;
}
html[data-device-ui="shell"] #main-menu-navigation .menu-content > li > a > :is(i, svg) {
  grid-column: 1;
  width: 11px;
  height: 11px;
  margin: 0 !important;
}
html[data-device-ui="shell"] #main-menu-navigation .menu-content > li > a > .menu-item {
  grid-column: 2;
}
html[data-device-ui="shell"] #main-menu-navigation .menu-content > li > a > :is(.badge, .Alarm_Display) {
  grid-column: 3;
  justify-self: end;
}
/* Bootstrap的me-2带!important且占21px；行内状态不保留这一段空白。 */
html[data-device-ui="shell"] #main-menu-navigation :is(.badge, .Alarm_Display) {
  flex: 0 0 auto;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html[data-device-ui="shell"] #main-menu-navigation .badge {
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 1px 6px;
  color: #fff !important;
  font: 600 11px/16px var(--ui-font);
  white-space: nowrap;
  box-shadow: none !important;
}
/* 保留Online绿、Offline灰的状态含义，并提高紧凑徽标的文字对比度。 */
html[data-device-ui="shell"] #main-menu-navigation .badge.bg-success {
  background-color: #147d52 !important;
}
html[data-device-ui="shell"] #main-menu-navigation .badge.bg-secondary {
  background-color: #56645c !important;
}
/* 旧主题在hover时把所有直系子元素向右挪5px，状态列因此会再次靠近边缘。 */
html[data-device-ui="shell"] #main-menu-navigation li > a > * {
  transform: none !important;
}
@media (min-width: 1200px) {
  /* 仅在未hover展开的80px窄栏隐藏文字；.expanded自动恢复216px完整菜单。 */
  html[data-device-ui="shell"] body.menu-collapsed .main-menu:not(.expanded) #main-menu-navigation > li > a {
    justify-content: center;
    padding: 12px;
  }
  html[data-device-ui="shell"] body.menu-collapsed .main-menu:not(.expanded) #main-menu-navigation > li > a > :is(i, svg) {
    margin: 0;
  }
  html[data-device-ui="shell"] body.menu-collapsed .main-menu:not(.expanded) #main-menu-navigation > li > a > :is(.menu-item, .menu-title, .badge, .Alarm_Display),
  html[data-device-ui="shell"] body.menu-collapsed .main-menu:not(.expanded) #main-menu-navigation > li > a::after,
  html[data-device-ui="shell"] body.menu-collapsed .main-menu:not(.expanded) #main-menu-navigation > li > .menu-content {
    display: none !important;
  }
}
html[data-device-ui="shell"] .main-menu .navigation li.has-sub > a::after { filter: brightness(0) invert(1); }
html[data-device-ui="shell"] .main-menu a:focus-visible { outline-color: #91dcd3; }
html[data-device-ui="shell"] .main-menu .shadow-bottom { box-shadow: none; background: transparent; }
html[data-device-ui="shell"] .app-content {
  margin-left: var(--device-ui-sidebar) !important;
  padding: var(--device-ui-header) 0 0 !important;
  background: var(--ui-canvas) !important;
}
html[data-device-ui="shell"] .app-content .content-wrapper { padding: 0 !important; }
html[data-device-ui="shell"] .header-navbar-shadow { background: transparent; }
/* Restyle the existing password dialog without changing Bootstrap visibility or focus handling. */
html[data-device-ui="shell"] #ResetPassword .modal-content {
  color: var(--ui-ink);
  background: var(--ui-paper);
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  box-shadow: none;
}
html[data-device-ui="shell"] #ResetPassword :is(.modal-header, .modal-footer) {
  padding: 20px 24px;
  border-color: var(--ui-line);
}
html[data-device-ui="shell"] #ResetPassword .modal-title { color: var(--ui-ink); font: 600 23px/1.3 var(--ui-font); }
html[data-device-ui="shell"] #ResetPassword .modal-body { padding: 24px !important; }
html[data-device-ui="shell"] #ResetPassword .form-label { color: var(--ui-ink); font-size: 14px; }
html[data-device-ui="shell"] #ResetPassword :is(.form-control, .input-group-text) {
  min-height: 42px;
  color: var(--ui-ink);
  background: var(--ui-paper);
  border-color: var(--ui-field);
  font-family: var(--ui-font);
  box-shadow: none;
}
html[data-device-ui="shell"] #ResetPassword .modal-footer .btn {
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 5px;
  font: 600 14px/1.5 var(--ui-font);
  box-shadow: none !important;
}
html[data-device-ui="shell"] #ResetPassword .btn-primary {
  color: var(--ui-on-accent) !important;
  background: var(--ui-accent) !important;
  border-color: var(--ui-accent) !important;
}
html[data-device-ui="shell"] #ResetPassword .btn-primary:hover:not(:disabled) {
  background: var(--ui-accent-hover) !important;
  border-color: var(--ui-accent-hover) !important;
}
html[data-device-ui="shell"] #ResetPassword .btn-outline-secondary {
  color: var(--ui-ink) !important;
  background: var(--ui-paper) !important;
  border-color: var(--ui-field) !important;
}
html[data-device-ui="shell"] #ResetPassword .btn-outline-secondary:hover:not(:disabled) { background: var(--ui-tint) !important; }
html[data-device-ui="shell"] #ResetPassword .btn:disabled { opacity: .45; }
/* Vuexy owns collapse/hover and mobile open states; keep its original 80px and 1200px boundaries. */
@media (min-width: 1200px) {
  html[data-device-ui="shell"] body.menu-collapsed .main-menu:not(.expanded) { width: 80px !important; }
  html[data-device-ui="shell"] body.menu-collapsed .app-content { margin-left: 80px !important; }
  html[data-device-ui="shell"] body.menu-collapsed .main-menu:not(.expanded) .navbar-brand .language { display: none; }
  html[data-device-ui="shell"] body.menu-collapsed .main-menu:not(.expanded) .navigation { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 1199.98px) {
  html[data-device-ui="shell"] .app-content { margin-left: 0 !important; }
  html[data-device-ui="shell"] .main-menu { left: calc(-1 * var(--device-ui-sidebar)); transform: translate3d(0, 0, 0) !important; }
  html[data-device-ui="shell"] body.menu-open .main-menu { transform: translate3d(var(--device-ui-sidebar), 0, 0) !important; }
  html[data-device-ui="shell"] .header-navbar .bookmark-wrapper { flex: 0 0 44px; padding-left: 8px; }
  html[data-device-ui="shell"] #neutral { flex-basis: 172px; width: 172px; padding-left: 12px; }
  html[data-device-ui="shell"] .header-navbar .menu-toggle { padding: 8px; color: var(--ui-ink); }
  html[data-device-ui="shell"] #DevicePageTitle { padding: 0 16px; }
  html[data-device-ui="shell"] #username { max-width: 100px; }
}
/* The second mobile row keeps connection/alarm/user controls and long device names readable. */
@media (max-width: 767.98px) {
  html[data-device-ui="shell"] body { --device-ui-header: 112px; }
  html[data-device-ui="shell"] .header-navbar .navbar-container {
    display: grid !important;
    grid-template-columns: 44px minmax(100px, 132px) minmax(0, 1fr);
    grid-template-rows: 44px 44px;
    padding: 8px 12px;
    gap: 8px 0;
  }
  html[data-device-ui="shell"] .header-navbar .bookmark-wrapper { grid-row: 1; grid-column: 1; padding: 0; }
  /* 原脚本在手机宽度隐藏品牌区；首帧即采用同样布局，避免和居中设备名重叠。 */
  html[data-device-ui="shell"] #neutral { display: none !important; }
  html[data-device-ui="shell"] #neutral .Logo_Display { max-width: 116px; max-height: 32px; }
  html[data-device-ui="shell"] #DevicePageTitle { position: static; grid-row: 1; grid-column: 1 / -1; align-self: center; max-width: 100%; padding: 0 44px; transform: none; font-size: 13px; }
  html[data-device-ui="shell"] .device-ui-shell-tools { grid-row: 2; grid-column: 1 / -1; justify-content: flex-end; gap: 6px; }
  html[data-device-ui="shell"] #dropdown-user { padding-left: 10px; gap: 6px; }
}

/* 3. 通用组件。保留 Bootstrap 栅格及权限 fieldset 的原 display。 */
html[data-device-ui="page"] .card {
  color: var(--ui-ink);
  background: var(--ui-paper);
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  box-shadow: none;
  margin-bottom: 20px;
  opacity: 1;
}
html[data-device-ui="page"] .card-body { padding: 24px; }
html[data-device-ui="page"] .card > .row.card-body { margin: 0; }
html[data-device-ui="page"] .card-header {
  padding: 20px 24px 12px;
  background: var(--ui-paper);
  border-color: var(--ui-line);
}
html[data-device-ui="page"] :is(.card-title,.divider-text) {
  color: var(--ui-ink);
  font-size: var(--ui-section-size) !important;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}
/* 旧暗色主题的三级选择器会压过常规标题规则，只覆盖文字外观。 */
html[data-device-ui="page"] .card .card-title,
html[data-device-ui="page"] .divider .divider-text { color: var(--ui-ink); }
html[data-device-ui] .pace .pace-progress { background: var(--ui-accent); }
html[data-device-ui="page"] .divider { margin: 8px 0 24px; }
html[data-device-ui="page"] .divider .divider-text {
  background: var(--ui-paper);
  padding: 0 12px;
}
html[data-device-ui="page"] .divider .divider-text::before,
html[data-device-ui="page"] .divider .divider-text::after { border-color: var(--ui-line) !important; }
html[data-device-ui] :is(.form-control,.form-select) {
  min-width: 0;
  color: var(--ui-ink);
  background-color: var(--ui-paper);
  border: 1px solid var(--ui-field);
  border-color: var(--ui-field) !important;
  border-radius: 5px;
  box-shadow: none;
  font-family: var(--ui-font);
  font-size: 14px !important;
  line-height: 1.5;
}
html[data-device-ui] input.form-control:not([type="file"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
html[data-device-ui] select:is(.form-control,.form-select) {
  height: 42px;
  padding-top: 9px;
  padding-bottom: 9px;
}
html[data-device-ui] textarea.form-control { min-height: 96px; padding: 10px 12px; }
html[data-device-ui] :is(.form-control,.form-select):focus {
  color: var(--ui-ink);
  background-color: var(--ui-paper);
  border-color: var(--ui-focus) !important;
  box-shadow: none;
}
html[data-device-ui] .form-control::placeholder { color: var(--ui-muted); opacity: 1; }
html[data-device-ui] :is(.form-control,.form-select):disabled,
html[data-device-ui] .form-control[readonly] {
  color: var(--ui-muted);
  background-color: var(--ui-soft);
  border-color: var(--ui-line) !important;
}
html[data-device-ui] :is(.form-label,.col-form-label,.form-check-label) {
  color: var(--ui-ink);
  font-family: var(--ui-font);
  font-size: 14px !important;
  line-height: 1.5;
}
html[data-device-ui] .form-label { font-weight: 600; margin-bottom: 6px; }
html[data-device-ui] .input-group-text {
  color: var(--ui-muted);
  background: var(--ui-soft);
  border-color: var(--ui-field);
  border-radius: 5px;
}
html[data-device-ui] :is(input[type="checkbox"],input[type="radio"]) { accent-color: var(--ui-accent); }
html[data-device-ui] .form-check-input { border-color: var(--ui-field); background-color: var(--ui-paper); }
html[data-device-ui] .form-check-input:checked { border-color: var(--ui-accent); background-color: var(--ui-accent); }
html[data-device-ui] .btn {
  min-height: 42px;
  padding: 9px 19px;
  border-radius: 5px;
  box-shadow: none !important;
  font-family: var(--ui-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
}
html[data-device-ui] .btn-sm { min-height: 36px; padding: 7px 10px; font-size: 13px; }
html[data-device-ui] :is(.btn-primary,.btn-success) {
  color: var(--ui-on-accent) !important;
  background: var(--ui-accent) !important;
  border-color: var(--ui-accent) !important;
}
html[data-device-ui] :is(.btn-primary,.btn-success):hover {
  background: var(--ui-accent-hover) !important;
  border-color: var(--ui-accent-hover) !important;
}
html[data-device-ui] :is(.btn-secondary,.btn-info,.btn-outline-primary,.btn-outline-secondary,.btn-outline-info) {
  color: var(--ui-ink) !important;
  background: var(--ui-paper) !important;
  border-color: var(--ui-field) !important;
}
html[data-device-ui] :is(.btn-secondary,.btn-info,.btn-outline-primary,.btn-outline-secondary,.btn-outline-info):hover {
  color: var(--ui-accent-hover) !important;
  background: var(--ui-tint) !important;
  border-color: var(--ui-accent) !important;
}
html[data-device-ui] .btn-danger {
  color: var(--ui-paper) !important;
  background: var(--ui-danger) !important;
  border-color: var(--ui-danger) !important;
}
html[data-device-ui] .btn-danger:hover { background: var(--ui-danger-hover) !important; }
html[data-device-ui] .btn-outline-danger { color: var(--ui-danger) !important; border-color: var(--ui-danger) !important; background: transparent !important; }
html[data-device-ui] .btn-warning { color: var(--ui-warning) !important; border-color: var(--ui-warning) !important; background: var(--ui-paper) !important; }
html[data-device-ui] .btn:disabled,
html[data-device-ui] .btn.disabled { opacity: .55; box-shadow: none !important; }
html[data-device-ui="page"] :is(.table-responsive,.table-responsive-xl) { max-width: 100%; overflow-x: auto; }
/* Home 的 table 用于拓扑排版，不接入数据表规则。业务状态行仍保留红/黄等语义。 */
html[data-device-ui="page"]:not([data-device-view="home"]) .table {
  color: var(--ui-ink);
  border-color: var(--ui-line);
  margin-bottom: 0;
  font-variant-numeric: tabular-nums;
}
html[data-device-ui="page"]:not([data-device-view="home"]) .table > :not(caption) > * > * {
  color: inherit;
  border-color: var(--ui-line);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
}
html[data-device-ui="page"]:not([data-device-view="home"]) .table thead th {
  color: var(--ui-accent-hover) !important;
  background: var(--ui-tint) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
html[data-device-ui="page"] .table .table-success {
  --bs-table-bg: var(--ui-soft);
  --bs-table-striped-bg: var(--ui-soft);
  --bs-table-hover-bg: var(--ui-tint);
  color: var(--ui-ink);
  background: var(--ui-soft);
}
/* 表格状态仍按原 class 区分，底色随主题变浅或变深，不改变业务判定。 */
html[data-device-ui="page"] .table .table-info {
  --bs-table-bg: color-mix(in srgb, var(--ui-focus) 12%, var(--ui-paper));
  --bs-table-accent-bg: transparent;
  color: var(--ui-ink);
  background: var(--bs-table-bg);
}
html[data-device-ui="page"] .table .table-danger {
  --bs-table-bg: color-mix(in srgb, var(--ui-danger) 12%, var(--ui-paper));
  --bs-table-accent-bg: transparent;
  color: var(--ui-ink);
  background: var(--bs-table-bg);
}
html[data-device-ui="page"] .table .table-warning {
  --bs-table-bg: color-mix(in srgb, var(--ui-warning) 12%, var(--ui-paper));
  --bs-table-accent-bg: transparent;
  color: var(--ui-ink);
  background: var(--bs-table-bg);
}
html[data-device-ui="page"] .table-hover tbody tr:hover { --bs-table-accent-bg: var(--ui-tint); }
html[data-device-ui="page"] .pagination { flex-wrap: wrap; gap: 4px; margin: 16px 0; }
html[data-device-ui="page"] .pagination:empty { margin: 0; }
html[data-device-ui="page"] .page-link {
  min-width: 36px;
  min-height: 36px;
  padding: 8px 10px;
  color: var(--ui-muted);
  background: var(--ui-paper);
  border: 1px solid var(--ui-line);
  border-radius: 4px !important;
  box-shadow: none;
}
html[data-device-ui="page"] .page-item.active .page-link { color: var(--ui-on-accent); background: var(--ui-accent); border-color: var(--ui-accent); }
html[data-device-ui="page"] .page-item.disabled .page-link { color: var(--ui-muted); background: var(--ui-soft); opacity: .55; }
html[data-device-ui="page"] .nav-tabs { border-color: var(--ui-line); }
html[data-device-ui="page"] .nav-tabs .nav-link { min-height: 44px; padding: 12px 16px; border-radius: 0; color: var(--ui-muted); }
html[data-device-ui="page"] .nav-tabs .nav-link.active { color: var(--ui-accent); background: var(--ui-paper); box-shadow: inset 0 -2px var(--ui-accent); }
html[data-device-ui="page"] .nav-tabs .nav-link::after { background: var(--ui-accent) !important; }
html[data-device-ui] .modal-content { color: var(--ui-ink); background: var(--ui-paper); border: 1px solid var(--ui-line); border-radius: 8px; box-shadow: none; }
html[data-device-ui] :is(.modal-header,.modal-footer) { padding: 20px 24px; background: var(--ui-paper); border-color: var(--ui-line); }
html[data-device-ui] .modal-title { color: var(--ui-ink); font-size: 23px; font-weight: 600; }
html[data-device-ui] .modal-body { padding: 24px; }
html[data-device-ui] .dropdown-menu { color: var(--ui-ink); background: var(--ui-paper); border-color: var(--ui-line); box-shadow: 0 8px 24px rgba(16,36,25,.16); }
html[data-device-ui] .dropdown-item { color: var(--ui-ink); }
html[data-device-ui] .dropdown-item:hover { color: var(--ui-accent-hover); background: var(--ui-tint); }
html[data-device-ui] .text-muted { color: var(--ui-muted) !important; }
/* 告警数量仍以红色识别，沿平台危险色提高文字对比。 */
html[data-device-ui="shell"] .badge.bg-danger {
  color: var(--ui-paper) !important;
  background-color: var(--ui-danger) !important;
}
html[data-device-ui="shell"] .header-navbar :is(.user-name,.user-status) { font-family: var(--ui-font); }

/* 4. 七类页面的局部适配：监控表、拓扑表和动态表单分别处理。 */
/* 4. Page families. Keep telemetry, capability visibility and node order intact. */

/* Home 布局表保留节点、数据和状态，只统一各区域的显示尺寸。 */
html[data-device-ui="page"][data-device-view="home"] #HomeStatus {
  margin: 0 0 12px;
  padding: 10px 16px !important;
  font-size: 14px;
}
html[data-device-ui="page"][data-device-view="home"] .swiper-container {
  /* 浅绿灰图区承托白色指标卡，接线与状态颜色仍沿用原定义。 */
  background: color-mix(in srgb, var(--ui-accent) 9%, var(--ui-soft));
  border: 1px solid var(--ui-line);
  border-radius: 6px;
}
html[data-device-ui="page"][data-device-view="home"] .badge-glow { box-shadow: none !important; }
/* Swiper still owns width, transform and navigation. Only the active page
 * contributes height, so the summary page cannot leave space below topology.
 */
html[data-device-ui="page"][data-device-view="home"] .swiper-wrapper {
  height: auto;
  align-items: flex-start;
}
html[data-device-ui="page"][data-device-view="home"] .swiper-slide {
  height: 0;
  /* 保留图卡内边距；翻页按钮单独按父窗口可视区定位，不参与页面测高。 */
  padding: 18px 14px 64px;
  overflow: hidden;
}
html[data-device-ui="page"][data-device-view="home"] .swiper-slide-active {
  height: auto;
  overflow: visible;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-topology {
  /* 父壳传入独立于iframe内容的可用高度；图标、节点行和接线共用这一预算。 */
  --device-ui-stage-height: max(480px, calc(var(--device-main-height, 720px) - 84px));
  max-width: 100%;
  overflow-x: auto;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-topology > table {
  width: 100%;
  min-width: 1080px;
  margin: 0 !important;
  color: var(--ui-ink);
  font-size: 14px;
  line-height: 1.5;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-topology-wide > table {
  min-width: 1080px;
}
html[data-device-ui="page"][data-device-view="home"] :is(.device-ui-power-map,.device-ui-config-map) {
  --device-ui-node-width: clamp(112px, calc(var(--device-ui-stage-height) * .19), 176px);
  --device-ui-wire-color: #000;
  --device-ui-wire-width: 4px;
  border-collapse: collapse;
  border-spacing: 0;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-power-map {
  height: var(--device-ui-stage-height);
}
html[data-device-ui="page"][data-device-view="home"].dark-layout :is(.device-ui-power-map,.device-ui-config-map) {
  --device-ui-wire-color: var(--ui-muted);
}
/* Column roles are declared on the first row, which already controls this
 * fixed-layout table. A node fills its 96px column; wires meet the node edge.
 * The source/load columns reserve room for unchanged three-phase readings.
 */
html[data-device-ui="page"][data-device-view="home"] .device-ui-power-map .device-ui-map-node-column {
  width: var(--device-ui-node-width);
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-power-map :is(.device-ui-map-source-column,.device-ui-map-load-column) {
  width: 230px;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-power-map img {
  display: block;
  width: var(--device-ui-node-width);
  max-width: var(--device-ui-node-width);
  height: auto;
  margin-inline: auto;
}
/* Pure wire cells take their height from the real row. Their hidden/visible
 * variants keep the existing inline display states written by renderTopology.
 * No display declaration belongs on device-ui-wire-segment itself.
 */
html[data-device-ui="page"][data-device-view="home"] .device-ui-power-map .device-ui-wire-cell {
  position: relative;
  padding: 0;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-power-map .device-ui-wire-segment {
  position: absolute;
  inset: 0;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-power-map .device-ui-wire-segment > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-power-map .device-ui-wire-segment > br {
  display: none;
}
/* 过桥行随主显示区增高；绝对填充的SVG继续贴合单元格，保持接线连续。
 * 可选设备的显隐仍由原业务类控制。
 */
html[data-device-ui="page"][data-device-view="home"] .device-ui-power-map .device-ui-wire-spacer-row {
  height: clamp(32px, calc(var(--device-ui-stage-height) * .1), 120px);
}
/* Each existing reading group has two text rows above its wire and two below
 * (PV uses its existing final blank row). Remove the SVG baseline and the
 * redundant break immediately after a block wire; preserve every text/span.
 */
html[data-device-ui="page"][data-device-view="home"] .device-ui-power-map .device-ui-map-readout {
  white-space: nowrap;
  line-height: 21px;
  padding-left: 8px;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-power-map .device-ui-inline-wire {
  display: block;
  width: calc(100% + 8px);
  margin-left: -8px;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-power-map .device-ui-inline-wire + br {
  display: none;
}
/* A 24px status row and 24px label row balance around the converter image.
 * The hidden STS badge still reserves its original status row. Node geometry
 * and the centered SVG wire therefore share the same row center.
 */
html[data-device-ui="page"][data-device-view="home"] .device-ui-power-map .device-ui-node-stack > br {
  display: none;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-power-map .device-ui-node-stack > .badge {
  /* table布局不会把SVG放进span的内边距；用固定圆形flex居中保留原状态色。 */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 4px;
  margin: 0 auto;
  line-height: 16px;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-power-map .device-ui-node-stack > .badge > :is(svg,i) {
  display: block;
  width: 16px;
  height: 16px;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-power-map .device-ui-node-stack > span.font-medium-3 {
  display: block;
  line-height: 24px;
  white-space: nowrap;
}
/* 配置图的接线、图标和名称使用相同等宽轨道。设备隐藏后不保留空槽，
 * 不修改原能力DIV的display，也不改变设备顺序、数量或DOM祖先。 */
html[data-device-ui="page"][data-device-view="home"] .device-ui-topology-wide > table.device-ui-config-map {
  --device-ui-config-slot-width: max(144px, calc(var(--device-ui-node-width) + 32px));
  /* 云、ECS和设备三层等比图标，剩余高度均分给两段主干与设备支线。 */
  --device-ui-config-wire-height: max(32px, calc((var(--device-ui-stage-height) - var(--device-ui-node-width) * 3 - 64px) / 3));
  display: block;
  width: max-content;
  min-width: 100%;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-config-map > tbody {
  display: block;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-config-map > tbody > tr:not(.device-ui-config-row),
html[data-device-ui="page"][data-device-view="home"] .device-ui-config-map > tbody > tr:not(.device-ui-config-row) > td {
  display: block;
  width: 100%;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-config-map .device-ui-config-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--device-ui-config-slot-width);
  justify-content: center;
  width: 100%;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-config-map .device-ui-config-row > td {
  display: contents;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-config-map .device-ui-config-row > td.device-ui-config-spacer {
  display: none;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-config-map .device-ui-config-row > td > div {
  min-width: 0;
  width: 100%;
  text-align: center;
}
/* 每条可见竖支线带左右半段母线。隐藏首尾设备时，母线仍准确结束于
 * 首末可见支线；不再为被隐藏的设备绘制悬空线头。 */
html[data-device-ui="page"][data-device-view="home"] .device-ui-config-map .device-ui-config-branch {
  position: relative;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-config-map .device-ui-config-branch::before,
html[data-device-ui="page"][data-device-view="home"] .device-ui-config-map .device-ui-config-branch::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: var(--device-ui-wire-width);
  background: var(--device-ui-wire-color);
  pointer-events: none;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-config-map .device-ui-config-branch::before { left: 0; }
html[data-device-ui="page"][data-device-view="home"] .device-ui-config-map .device-ui-config-branch::after { right: 0; }
/* 覆盖HTML原有与jQuery hide()的两种内联序列化；无display:none即保留原显示。 */
html[data-device-ui="page"][data-device-view="home"] .device-ui-config-bus > :nth-child(1 of :not(.device-ui-config-spacer):has(> .device-ui-config-branch:not([style*="display: none"], [style*="display:none"]))) > .device-ui-config-branch::before {
  content: none;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-config-bus > :nth-last-child(1 of :not(.device-ui-config-spacer):has(> .device-ui-config-branch:not([style*="display: none"], [style*="display:none"]))) > .device-ui-config-branch::after {
  content: none;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-config-map .device-ui-config-branch > svg {
  display: block;
  width: 100%;
  height: var(--device-ui-config-wire-height);
  overflow: visible;
}
/* 保留原SVG竖支线，横线由上述连续半段绘制。 */
html[data-device-ui="page"][data-device-view="home"] .device-ui-config-map .device-ui-config-branch > svg > line:first-child {
  display: none;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-config-map img {
  display: block;
  margin-inline: auto;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-config-map .device-ui-config-backbone > br {
  display: none;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-config-map .device-ui-config-backbone > svg {
  display: block;
  width: 100%;
  height: var(--device-ui-config-wire-height);
  overflow: visible;
}

html[data-device-ui="page"][data-device-view="home"] .device-ui-topology td > .m-2 { margin: 0 !important; }
html[data-device-ui="page"][data-device-view="home"] .device-ui-topology img {
  width: var(--device-ui-node-width);
  max-width: var(--device-ui-node-width);
  height: auto;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-topology .font-medium-3 {
  font-size: 14px !important;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-topology td {
  /* SVG线段按单元格边缘衔接，不能给拓扑单元格加表单式内边距。 */
  padding: 0;
  vertical-align: middle;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-topology .font-large-3 {
  font-size: 23px !important;
  font-weight: 700;
}
/* 实时曲线需要比右侧统计更多横向空间；按实际工作区宽度分配，
 * 避免等宽卡片挤压曲线绘图区。窄屏继续以单列呈现。
 */
html[data-device-ui="page"][data-device-view="home"] #card-drag-area {
  container: device-summary / inline-size;
}
html[data-device-ui="page"][data-device-view="home"] #card-drag-area > .col-md-6 {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
@container device-summary (min-width: 1100px) {
  html[data-device-ui="page"][data-device-view="home"] #card-drag-area > .col-md-6 {
    flex-basis: 38%;
    width: 38%;
    max-width: 38%;
  }
  html[data-device-ui="page"][data-device-view="home"] #card-drag-area > .col-md-6:first-child {
    flex-basis: 62%;
    width: 62%;
    max-width: 62%;
  }
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card {
  height: auto !important;
  min-height: 220px;
  margin-bottom: 18px;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card > .card-body {
  container: device-card / inline-size;
  row-gap: 10px;
  padding: 18px !important;
  overflow-x: auto;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card .card-subtitle {
  width: 100%;
  margin: 0;
  padding: 9px 10px;
  color: var(--ui-ink) !important;
  background: color-mix(in srgb, var(--ui-accent) 16%, var(--ui-paper)) !important;
  border-bottom: 1px solid var(--ui-line);
  font-size: 14px;
  font-weight: 600;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card table {
  color: var(--ui-ink);
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 13px;
  line-height: 1.45;
}
/* The six telemetry cards share icon/energy/chart columns. Fixed layout keeps
 * generated chart SVG widths from taking space away from translated labels.
 * Savings colgroups and the load-allocation table keep their existing columns.
 */
html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card table:has(.imgsvg) {
  min-width: 480px;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card table:has(.imgsvg) > tbody > tr:first-child > td:first-child {
  width: 148px;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card table:has(.imgsvg) > tbody > tr:first-child > td:nth-child(2) {
  width: 28%;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card .imgsvg {
  /* 电池没有viewBox，需保留128x120画布，不能只缩窄width而保留120px高度。 */
  width: 128px !important;
  max-width: 128px;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card img.imgsvg {
  height: auto;
}
/* Do not set svg.imgsvg height:auto: the battery has no viewBox and its SOC
 * text/rectangles intentionally share the original 120px coordinate height.
 * Every small Home chart keeps the 170px/110px height from its markup.
 */
html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card [id$="chart"] {
  width: 100%;
  max-width: 100%;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card td.h3 {
  color: var(--ui-ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
/* 节能统计的图标列不能随百分比缩到图标本身以内。 */
html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card table:has(td.h1) col:first-child { width: 54px !important; }
html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card table:has(td.h1) col:nth-child(2) { width: auto !important; }
html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card table:has(td.h1) col:last-child { width: 150px !important; }
html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card td.h1 {
  color: var(--ui-ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card td.h1 > span:not(:first-child) {
  font-size: 14px;
  font-weight: 400;
}
html[data-device-ui="page"][data-device-view="home"] #SOCtext {
  /* 百分比对齐电池主体，不把右侧接线端计入中心。原SVG坐标保持不变。 */
  position: absolute !important;
  left: 2%;
  top: 20px !important;
  width: 80%;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  color: #18251f !important;
  font-size: 20px !important;
  line-height: 24px;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-battery-gauge {
  position: relative;
  width: 128px;
  margin-inline: auto;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-battery-gauge > svg {
  display: block;
  height: 120px;
}
/* 累计分配保留完整数字；饼图只使用图标和数值之外的余量。 */
html[data-device-ui="page"][data-device-view="home"] table:has(#Loadelectricitychart) tr:first-child > td:nth-child(2) {
  width: 64px;
}
html[data-device-ui="page"][data-device-view="home"] table:has(#Loadelectricitychart) tr:first-child > td:last-child {
  width: 112px;
}
html[data-device-ui="page"][data-device-view="home"] table:has(#Loadelectricitychart) td[rowspan="3"]:last-child {
  white-space: nowrap;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card td {
  padding: 3px 5px;
  vertical-align: middle;
}
html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card td > span[id] {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
html[data-device-ui="page"][data-device-view="home"] .swiper-button-next,
html[data-device-ui="page"][data-device-view="home"] .swiper-button-prev {
  /* iframe 会随长摘要撑高，不能用整页的 50%；父壳传入当前可见区域的中点。 */
  position: absolute;
  top: var(--device-home-navigation-top, 50%);
  bottom: auto;
  width: 44px;
  height: 44px;
  margin-top: 0;
  transform: translateY(-50%);
  z-index: 20;
  color: var(--ui-accent);
}
html[data-device-ui="page"][data-device-view="home"] .swiper-button-prev { left: 14px; }
html[data-device-ui="page"][data-device-view="home"] .swiper-button-next { right: 14px; }
html[data-device-ui="page"][data-device-view="home"] .swiper-pagination-bullet-active {
  background: var(--ui-accent);
}
/* 图表的轴、网格和提示属于展示外观；曲线数据、轴范围和状态色仍由原脚本管理。 */
html[data-device-ui="page"][data-device-view="home"] :is(.highcharts-axis-labels,.highcharts-axis-title,.highcharts-legend-item) text,
html[data-device-ui="page"][data-device-view="home"] .highcharts-axis-title {
  fill: var(--ui-muted) !important;
  color: var(--ui-muted) !important;
}
html[data-device-ui="page"][data-device-view="home"] .highcharts-grid-line { stroke: var(--ui-line); }
html[data-device-ui="page"][data-device-view="home"] :is(.highcharts-axis-line,.highcharts-tick) { stroke: var(--ui-field); }
/* 放大图未设画布底色，须和所在弹窗同步主题；数据及系列颜色不变。 */
html[data-device-ui="page"][data-device-view="home"] #AllChartBig .highcharts-background { fill: var(--ui-paper); }
html[data-device-ui="page"][data-device-view="home"] #AllChartBig :is(.highcharts-title,.highcharts-subtitle) { fill: var(--ui-ink) !important; }
html[data-device-ui="page"][data-device-view="home"] #AllChartBig .highcharts-grid-line { stroke: var(--ui-line) !important; }
html[data-device-ui="page"][data-device-view="home"] #AllChartBig .highcharts-button-box { fill: var(--ui-paper); stroke: var(--ui-line); }
html[data-device-ui="page"][data-device-view="home"] #AllChartBig .highcharts-button-symbol { stroke: var(--ui-muted); }
html[data-device-ui="page"][data-device-view="home"] #AllChartBig .highcharts-tooltip-box { fill: var(--ui-paper); }
html[data-device-ui="page"][data-device-view="home"] #AllChartBig .highcharts-tooltip text { fill: var(--ui-ink); }
/* 旧图标和黑色静态连线需要在暗底上可读，不反色绿/红设备状态。 */
html[data-device-ui="page"][data-device-view="home"].dark-layout :is(.device-ui-summary-card,.device-ui-topology) img {
  background: #f7f9f8;
  border-radius: 5px;
}
html[data-device-ui="page"][data-device-view="home"].dark-layout .device-ui-topology line:is([stroke="#000000"],[stroke="black"]) { stroke: var(--ui-muted); }
/* Highcharts的第二条默认中性深灰曲线，仅在暗色中换成可读的中性浅灰。 */
html[data-device-ui="page"][data-device-view="home"].dark-layout :is(.highcharts-series,.highcharts-legend-item) [stroke="#434348"] { stroke: #c6d0d5; }
html[data-device-ui="page"][data-device-view="home"].dark-layout :is(.highcharts-series,.highcharts-legend-item) [fill="#434348"] { fill: #c6d0d5; }
/* 按卡片本身的空间改排，桌面右栏也可能不足480px，不能只按视口判断。 */
@container device-card (max-width: 479.98px) {
  html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card table:has(.imgsvg) {
    display: block;
    min-width: 0;
  }
  html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card table:has(.imgsvg) > tbody {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    align-items: center;
    row-gap: 4px;
  }
  html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card table:has(.imgsvg) > tbody > tr {
    display: contents;
  }
  html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card table:has(.imgsvg) td {
    width: auto !important;
    min-width: 0;
    font-size: 12px;
  }
  html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card table:has(.imgsvg) tr > td:not([rowspan]) {
    grid-column: 2;
  }
  /* 各卡片的空白行和标签/数值起始行并不相同，按原DOM顺序纵排，
   * 不能用统一奇偶行把数值配到错误的标签旁边。 */
  html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card table:has(.imgsvg) tr:first-child > td:first-child {
    grid-column: 1;
    grid-row: 1 / span 8;
  }
  html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card table:has(.imgsvg) tr:first-child > td:last-child {
    grid-column: 1 / -1;
    grid-row: auto;
    order: 1;
    padding-top: 12px;
  }
  html[data-device-ui="page"][data-device-view="home"] #Load_Card table:has(.imgsvg) tr:first-child > td:first-child {
    grid-row: 1 / span 10;
  }
  html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card table:has(td.h1) col:first-child { width: 44px !important; }
  html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card table:has(td.h1) col:last-child { width: 116px !important; }
  html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card td.h1 { font-size: 18px; }
  html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card td.h3 { font-size: 12px; }
  html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card td.h1 > span:not(:first-child) { font-size: 11px; }
  html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card table:has(td.h1) img { width: 34px; height: 34px; }
}

/* Ordinary read-only monitoring remains dense; Rack cells keep every original index. */
html[data-device-ui="page"][data-device-view="monitor"] .table {
  font-size: 13px;
}
html[data-device-ui="page"][data-device-view="monitor"] .table td[id],
html[data-device-ui="page"][data-device-view="monitor"] .table .AnalogDis {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
html[data-device-ui="page"][data-device-view="monitor"] .font-medium-2,
html[data-device-ui="page"][data-device-view="monitor"] .font-medium-3 {
  font-size: 14px !important;
}
html[data-device-ui="page"][data-device-view="monitor"] .table label {
  margin: 0;
  font-weight: 400;
}
html[data-device-ui="page"][data-device-view="monitor"] .device-ui-cell-matrix {
  min-width: 1280px;
  font-size: 12px;
}
html[data-device-ui="page"][data-device-view="monitor"] .device-ui-cell-matrix th,
html[data-device-ui="page"][data-device-view="monitor"] .device-ui-cell-matrix td {
  padding: 7px 6px;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
html[data-device-ui="page"][data-device-view="monitor"] .device-ui-cell-matrix td:first-child {
  color: var(--ui-muted);
  background: var(--ui-soft);
}

/* History retains its filter groups, radio names, date visibility and pagination. */
html[data-device-ui="page"][data-device-view="history"] .device-ui-query-panel {
  row-gap: 8px;
}
html[data-device-ui="page"][data-device-view="history"] .device-ui-query-panel .mb-2.row {
  align-items: center;
  margin-bottom: 18px !important;
}
html[data-device-ui="page"][data-device-view="history"] .device-ui-query-panel > .mb-2.row {
  max-width: 660px;
}
html[data-device-ui="page"][data-device-view="history"] .device-ui-query-panel .demo-inline-spacing {
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
html[data-device-ui="page"][data-device-view="history"] .device-ui-query-panel .demo-inline-spacing > * {
  margin-top: 0;
  margin-right: 0;
}
html[data-device-ui="page"][data-device-view="history"] .device-ui-query-panel .demo-inline-spacing .form-select {
  min-width: 90px;
}
html[data-device-ui="page"][data-device-view="history"] .device-ui-query-panel .font-medium-2 {
  font-size: 14px !important;
}
html[data-device-ui="page"][data-device-view="history"] .table {
  min-width: 640px;
}
html[data-device-ui="page"][data-device-view="history"] .table td:not(:nth-child(2)) {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Configuration keeps Bootstrap ancestors used by closest() and permission gates. */
html[data-device-ui="page"][data-device-view="config"] .col-form-label.font-medium-2,
html[data-device-ui="page"][data-device-view="config"] .form-control.font-medium-2,
html[data-device-ui="page"][data-device-view="config"] .form-select.font-medium-2 {
  font-size: 14px !important;
}
html[data-device-ui="page"][data-device-view="config"] .mb-2.row,
html[data-device-ui="page"][data-device-view="config"] .mb-3.row {
  align-items: center;
  row-gap: 6px;
  margin-bottom: 18px !important;
}
html[data-device-ui="page"][data-device-view="config"] .col-form-label {
  padding-top: 7px;
  padding-bottom: 7px;
  line-height: 1.5;
  overflow-wrap: break-word;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-settings .d-grid,
html[data-device-ui="page"][data-device-view="config"] .device-ui-about .d-grid {
  align-content: start;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-control .btn-lg {
  min-height: 48px;
  padding: 11px 14px;
  font-size: 14px !important;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-control .btn-group > .btn {
  white-space: normal;
}
/* 旁路保持原禁用/授权状态。完整外框由组容器绘制，避免Vuexy分组按钮
 * 的透明左右边覆盖边框；图标与文字使用相同的居中基线。 */
html[data-device-ui="page"][data-device-view="config"] .device-ui-control :is(#BypassCol,#BypassDis) .btn-group {
  border: 1px solid var(--ui-field);
  border-radius: 5px;
  overflow: hidden;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-control :is(#BypassCol,#BypassDis) .btn-group > .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-control :is(#BypassCol,#BypassDis) .btn-group > .btn + .btn {
  border-left: 1px solid var(--ui-field) !important;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-control :is(#BypassCol,#BypassDis) .btn:disabled {
  color: var(--ui-muted) !important;
  background: var(--ui-soft) !important;
  opacity: 1;
}
/* 只在主操作表单中分配父壳传入的剩余高度，保持正常控件尺寸。
 * 隐藏字段不参与 flex 排版；不覆盖权限/能力脚本设置的 display。 */
html[data-device-ui="page"][data-device-view="config"] .device-ui-control .card-body {
  padding: 24px;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-control > .col-12 > .card > .row.card-body {
  /* 超高窗口不再继续拉散字段，常用窗口仍随可用高度展开。 */
  min-height: min(var(--device-main-height, 0px), 920px);
  align-content: space-between;
  align-items: center;
  row-gap: 12px;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-control .divider {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: center;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  white-space: normal;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-control .divider::before,
html[data-device-ui="page"][data-device-view="config"] .device-ui-control .divider::after {
  content: "";
  flex: 1 1 0;
  min-width: 16px;
  border-top: 1px solid var(--ui-line);
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-control .divider-text {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% - 56px);
  margin: 0 !important;
  padding: 0;
  font-size: 20px !important;
  white-space: normal;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-control .divider-text::before,
html[data-device-ui="page"][data-device-view="config"] .device-ui-control .divider-text::after {
  display: none;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-control .col-form-label {
  display: inline;
  padding: 0;
  margin-right: 4px;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-control :is(.btn,.btn-group).mb-3 {
  margin-bottom: 16px !important;
}
@media (min-width: 576px) {
  html[data-device-ui="page"][data-device-view="config"] .device-ui-control .mb-3.row > .col-sm-4 {
    width: 46%;
  }
  html[data-device-ui="page"][data-device-view="config"] .device-ui-control .mb-3.row > .col-sm-8 {
    width: 54%;
  }
}
@media (min-width: 992px) {
  /* 旧机型隐藏充电开机后，两项剩余操作均分原行，不保留空的第三列。 */
  html[data-device-ui="page"][data-device-view="config"] .device-ui-control .card-body:has(> #ChargePowerOnCol[style*="display: none"]) > :is(#SystemOnCol,#SystemOffCol) {
    width: 50%;
  }
}
/* 分区名保留原来的居中分隔线；两侧等宽，长标题可在窄屏换行。 */
html[data-device-ui="page"] .device-ui-settings .divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 0;
  text-align: center;
  white-space: normal;
  border: 0;
}
html[data-device-ui="page"] .device-ui-settings .divider::before,
html[data-device-ui="page"] .device-ui-settings .divider::after {
  content: "";
  flex: 1 1 0;
  min-width: 16px;
  border-top: 1px solid var(--ui-line);
}
html[data-device-ui="page"] .device-ui-settings .divider .divider-text {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% - 56px);
  padding: 0;
  color: var(--ui-ink);
  font-size: 18px !important;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}
html[data-device-ui="page"] .device-ui-settings .divider .divider-text::before,
html[data-device-ui="page"] .device-ui-settings .divider .divider-text::after {
  display: none;
}
html[data-device-ui="page"] .device-ui-settings .card > .divider {
  margin-bottom: 0;
  padding: 18px 24px 10px;
}
html[data-device-ui="page"] .device-ui-settings .card > .divider + .card-body {
  padding-top: 16px;
}
html[data-device-ui="page"] .device-ui-settings .divider-text[data-i18n="Monitor"] {
  font-size: 20px !important;
}
html[data-device-ui="page"] .device-ui-settings .divider-danger::before,
html[data-device-ui="page"] .device-ui-settings .divider-danger::after { border-top-color: var(--ui-danger); }
html[data-device-ui="page"] .device-ui-settings .divider-danger .divider-text {
  color: var(--ui-danger);
}

/* Existing checked state stays intact; the dark theme needs a dark check mark. */
html[data-device-ui="page"] .device-ui-settings .form-check-input[type="checkbox"]:not(:checked):not(:indeterminate):not(.is-invalid) {
  /* 旧暗色控件的紫灰底和浅色细边过弱，未选中框也需清晰可见。 */
  background-color: var(--ui-paper);
  border-color: var(--ui-field);
}
html[data-device-ui="page"].dark-layout .device-ui-settings .form-check-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.5 7.5'%3E%3Cpolyline points='0.75 4.35 4.18 6.75 8.75 0.75' fill='none' stroke='%23112b1d' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* Native single selects keep their behavior; SVG colors mirror ui-muted tokens. */
html[data-device-ui="page"][data-device-view="config"] :is(.device-ui-control,.device-ui-settings) select.form-select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356645c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
html[data-device-ui="page"][data-device-view="config"].dark-layout :is(.device-ui-control,.device-ui-settings) select.form-select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b6c0c5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Keep the original three columns and business row; only their widths change. */
html[data-device-ui="page"] .device-ui-settings #GENRuntimeRange > .mb-2.row > .col-sm-4 {
  flex: 0 0 50%;
  width: 50%;
  max-width: 50%;
  min-width: 0;
}
html[data-device-ui="page"] .device-ui-settings #GENRuntimeRange > .mb-2.row > .col-sm-4:first-child {
  flex-basis: 100%;
  width: 100%;
  max-width: 100%;
}

/* Pickatime's generated nodes stay in place; replace only legacy theme colors. */
html[data-device-ui="page"] .device-ui-settings .picker--time .picker__holder,
html[data-device-ui="page"] .device-ui-settings .picker--time .picker__frame,
html[data-device-ui="page"] .device-ui-settings .picker--time .picker__holder .picker__list {
  color: var(--ui-ink);
  background-color: var(--ui-paper);
  border-color: var(--ui-line);
}
html[data-device-ui="page"] .device-ui-settings .picker--time .picker__holder .picker__list .picker__list-item {
  color: var(--ui-ink);
  background-color: var(--ui-paper);
  border-color: var(--ui-line);
}
html[data-device-ui="page"] .device-ui-settings .picker--time .picker__holder .picker__list .picker__list-item:not(.picker__list-item--disabled):hover,
html[data-device-ui="page"] .device-ui-settings .picker--time .picker__holder .picker__list .picker__list-item--highlighted:not(.picker__list-item--disabled) {
  color: var(--ui-ink);
  background-color: var(--ui-tint);
  border-color: var(--ui-focus);
}
html[data-device-ui="page"] .device-ui-settings .picker--time .picker__holder .picker__list .picker__list-item--selected,
html[data-device-ui="page"] .device-ui-settings .picker--time .picker__holder .picker__list .picker__list-item--selected:not(.picker__list-item--disabled):hover {
  color: var(--ui-on-accent);
  background-color: var(--ui-accent);
}
html[data-device-ui="page"] .device-ui-settings .picker--time .picker__holder .picker__list .picker__list-item.picker__list-item--disabled {
  color: var(--ui-muted);
  background-color: var(--ui-soft);
}
html[data-device-ui="page"] .device-ui-settings .picker--time .picker__holder .picker__list .picker__button--clear {
  color: var(--ui-ink);
  background-color: var(--ui-paper);
  border-color: var(--ui-line);
}
html[data-device-ui="page"] .device-ui-settings .picker--time .picker__holder .picker__list .picker__button--clear:hover {
  background-color: var(--ui-tint);
}
html[data-device-ui="page"] .device-ui-settings .picker--time .picker__button--clear::before {
  border-top-color: var(--ui-danger);
}

@media (max-width: 700px) {
  html[data-device-ui="page"] .device-ui-settings .card > .divider {
    padding: 16px 18px 10px;
  }
}
@media (max-width: 575.98px) {
  html[data-device-ui="page"] .device-ui-settings #GENRuntimeRange > .mb-2.row > .col-sm-4 {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* Dynamic schedules use their existing rendering and three-row height calculation. */
html[data-device-ui="page"][data-device-view="config"] .power-schedule {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--ui-line);
}
html[data-device-ui="page"][data-device-view="config"] .power-schedule .schedule-heading {
  margin-bottom: 16px;
  font-size: 20px !important;
  line-height: 1.3;
}
html[data-device-ui="page"][data-device-view="config"] .power-schedule .schedule-slot {
  gap: 10px;
  border-color: var(--ui-line);
}
html[data-device-ui="page"][data-device-view="config"] .power-schedule .schedule-slot-number,
html[data-device-ui="page"][data-device-view="config"] .power-schedule .schedule-hint {
  color: var(--ui-muted);
  font-size: 13px;
}
html[data-device-ui="page"][data-device-view="config"] .power-schedule [aria-invalid="true"] {
  border-color: var(--ui-danger) !important;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-engineering .table {
  min-width: 760px;
  font-size: 13px;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-engineering .table th,
html[data-device-ui="page"][data-device-view="config"] .device-ui-engineering .table td {
  padding: 8px 10px;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-engineering .btn-group {
  flex-wrap: wrap;
  gap: 6px;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-engineering .btn-group > .btn {
  min-width: 64px;
  margin-left: 0;
  border-radius: 5px !important;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-engineering textarea {
  min-height: 160px;
  font-size: 13px;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-update .file-input {
  max-width: 100%;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-update .file-preview,
html[data-device-ui="page"][data-device-view="config"] .device-ui-update .file-drop-zone {
  border-color: var(--ui-line);
  border-radius: 6px;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-update .file-caption-name,
html[data-device-ui="page"][data-device-view="config"] .device-ui-update .file-upload-indicator {
  font-size: 14px;
}
html[data-device-ui="page"][data-device-view="config"] .device-ui-update .file-error-message {
  color: var(--ui-danger);
  background: var(--ui-paper);
  border: 1px solid var(--ui-danger);
}

/* Chart series and explicit chart heights are owned by the existing chart code. */
html[data-device-ui="page"][data-device-view="charts"] .device-ui-chart {
  max-width: 100%;
  background: var(--ui-paper);
  border: 1px solid var(--ui-line);
  border-radius: 6px;
}
html[data-device-ui="page"][data-device-view="charts"] .device-ui-chart-frame {
  max-width: 100%;
  overflow-x: auto;
}
html[data-device-ui="page"][data-device-view="charts"] .nav-tabs.bg-light-secondary {
  padding: 0 0 16px;
  margin-bottom: 18px;
  background: var(--ui-paper) !important;
  border-bottom: 1px solid var(--ui-line);
}
html[data-device-ui="page"][data-device-view="charts"] .m-2.row {
  margin: 12px 0 !important;
  align-items: center;
  row-gap: 6px;
}
html[data-device-ui="page"][data-device-view="charts"] .col-form-label.font-medium-2,
html[data-device-ui="page"][data-device-view="charts"] .form-select.font-medium-2 {
  font-size: 14px !important;
}
html[data-device-ui="page"][data-device-view="charts"] .device-ui-time-lists > .column {
  overflow-x: auto;
}
html[data-device-ui="page"][data-device-view="charts"] .device-ui-time-lists .table {
  min-width: 166px;
}
html[data-device-ui="page"][data-device-view="charts"] .device-ui-time-lists .table td {
  padding: 3px 4px;
}
html[data-device-ui="page"][data-device-view="charts"] .device-ui-time-lists button[name="Time"] {
  width: 100%;
  min-height: 36px;
  padding: 7px 6px;
  font-size: 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Auth fits the iframe without a viewport-height feedback loop. */
html[data-device-ui="page"][data-device-view="auth"] .auth-wrapper.auth-basic {
  min-height: 0;
  padding: 32px 0 !important;
}
html[data-device-ui="page"][data-device-view="auth"] .auth-inner {
  width: 100%;
  max-width: 460px;
  margin: 16px auto !important;
}
html[data-device-ui="page"][data-device-view="auth"] .card-body {
  padding: 32px !important;
}
html[data-device-ui="page"][data-device-view="auth"] .card-title {
  font-size: 26px;
  line-height: 1.3;
}
html[data-device-ui="page"][data-device-view="auth"] .form-control,
html[data-device-ui="page"][data-device-view="auth"] .input-group-text,
html[data-device-ui="page"][data-device-view="auth"] .btn {
  min-height: 48px;
}
html[data-device-ui="page"][data-device-view="auth"] #loginerror,
html[data-device-ui="page"][data-device-view="auth"] #loginsuccess {
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid var(--ui-line);
  border-radius: 5px;
}
html[data-device-ui="page"][data-device-view="auth"] #loginerror {
  color: var(--ui-danger);
  border-color: var(--ui-danger);
}

/* Existing empty pages keep their content and polling; no new empty-state action. */
html[data-device-ui="page"][data-device-view="empty"] .card {
  min-height: 120px;
}

/* Responsive overrides affect visual wrapping only, never field or Time order. */
@media (max-width: 1199.98px) {
  html[data-device-ui="page"][data-device-view="charts"] .device-ui-time-lists > .col-md-2 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}
@media (max-width: 767.98px) {
  html[data-device-ui="page"][data-device-view="charts"] .device-ui-time-lists > .col-md-2 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 575.98px) {
  html[data-device-ui="page"][data-device-view="home"] .swiper-slide {
    padding: 12px 8px 64px;
  }
  html[data-device-ui="page"][data-device-view="home"] .device-ui-summary-card > .card-body {
    padding: 12px !important;
  }
  html[data-device-ui="page"][data-device-view="config"] .mb-2.row,
  html[data-device-ui="page"][data-device-view="config"] .mb-3.row {
    margin-bottom: 18px !important;
  }
  html[data-device-ui="page"][data-device-view="charts"] .device-ui-time-lists > .col-md-2 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  html[data-device-ui="page"][data-device-view="auth"] .card-body {
    padding: 24px 20px !important;
  }
  html[data-device-ui="page"][data-device-view="auth"] .card-title {
    font-size: 23px;
  }
}

/* 5. 明暗采用既有变量；响应宽度取 iframe 实际宽度，不改变菜单脚本断点。 */
@media (max-width: 700px) {
  html[data-device-ui="page"] .IframeHeight > [class*="col-"] { padding-left: 0; padding-right: 0; }
  html[data-device-ui="page"] .card-body { padding: 18px; }
  html[data-device-ui="page"] .card-header { padding: 18px 18px 10px; }
  html[data-device-ui] :is(.modal-header,.modal-footer) { padding: 16px 18px; }
  html[data-device-ui] .modal-body { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-device-ui] .btn { transition: none; }
}