:root {
  --dash-header-h: clamp(54px, 8vh, 96px);
  --dash-card-gap: clamp(10px, 0.72vw, 16px);
  --dash-edge-x: var(--dash-card-gap);
  --dash-bottom-gap: var(--dash-card-gap);
  --dash-gap: var(--dash-card-gap);
  --dash-top-card-gap: var(--dash-card-gap);
  --dash-row-gap: var(--dash-card-gap);
  --dash-info-h: clamp(70px, 10vh, 112px);
  --dash-title-h: clamp(28px, 3.7vh, 42px);
  --dash-title-top: clamp(3px, 0.55vh, 8px);
  --dash-panel-top: calc(var(--dash-title-h) + clamp(8px, 1.05vh, 14px));
  --dash-table-head-h: clamp(32px, 4.1vh, 44px);
  --dash-table-row-h: clamp(32px, 4.15vh, 46px);
  --dash-table-pad-x: clamp(12px, 1.25vw, 28px);
  --dash-table-pad-bottom: clamp(10px, 1.6vh, 20px);
  --dash-table-font: clamp(12px, 0.72vw, 16px);
  --dash-table-head-font: clamp(12px, 0.78vw, 17px);
  --dash-status-h: clamp(24px, 3vh, 34px);
  --dash-device-subtitle-h: clamp(22px, 3vh, 32px);
  --dash-lang-option-w: clamp(34px, 2vw, 44px);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 18, 36, 0.15), rgba(4, 8, 18, 0.55)),
    radial-gradient(circle at 50% 15%, rgba(61, 214, 255, 0.16), transparent 35%);
  z-index: 0;
}

#header,
#data_content {
  position: relative;
  z-index: 1;
}

#data_content {
  height: calc(100vh - var(--dash-header-h));
  display: flex;
  flex-direction: column;
  gap: var(--dash-row-gap);
  padding-top: var(--dash-gap);
  box-sizing: border-box;
  overflow: hidden;
}

#header {
  height: var(--dash-header-h);
  background: transparent;
  box-shadow: none;
}

#header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(48, 227, 255, 0.8), transparent);
  box-shadow: 0 0 16px rgba(48, 227, 255, 0.55);
  pointer-events: none;
}

#header .header {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0 clamp(16px, 1.25vw, 28px);
  box-sizing: border-box;
  line-height: 1;
}

#header .header h1 {
  font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(58vw, 980px);
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1;
  z-index: 1;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

#header .header h1 {
  font-size: clamp(28px, 2.4vw, 54px);
}

.dashboard-status {
  position: static;
  transform: none;
  min-width: clamp(112px, 7vw, 156px);
  height: var(--dash-status-h);
  padding: 0 clamp(10px, 0.65vw, 16px);
  border: 1px solid rgba(79, 209, 255, 0.45);
  border-radius: 6px;
  color: #c9f3ff;
  font-size: clamp(12px, 0.68vw, 15px);
  line-height: var(--dash-status-h);
  text-align: center;
  background: rgba(4, 16, 31, 0.82);
  box-shadow: inset 0 0 16px rgba(79, 209, 255, 0.16);
  white-space: nowrap;
}

.dashboard-clock {
  position: absolute;
  left: clamp(16px, 1.25vw, 28px);
  top: 50%;
  z-index: 2;
  display: flex;
  min-width: clamp(250px, 17vw, 360px);
  transform: translateY(-50%);
  align-items: baseline;
  gap: clamp(8px, 0.65vw, 14px);
  color: #dff8ff;
  line-height: 1;
  text-align: left;
  text-shadow: 0 0 10px rgba(72, 244, 255, 0.42);
}

.dashboard-clock-date {
  color: rgba(223, 248, 255, 0.78);
  font-size: clamp(13px, 0.72vw, 16px);
  font-weight: 600;
}

.dashboard-clock-time {
  color: #48f4ff;
  font-family: yjsz, "Microsoft YaHei", sans-serif;
  font-size: clamp(20px, 1.25vw, 30px);
  letter-spacing: 0;
  text-shadow: 0 0 14px rgba(72, 244, 255, 0.72);
}

.dashboard-header-actions {
  position: absolute;
  right: clamp(16px, 1.25vw, 28px);
  top: 50%;
  z-index: 2;
  display: flex;
  transform: translateY(-50%);
  align-items: center;
  gap: clamp(8px, 0.58vw, 14px);
}

.dashboard-language-switch {
  display: grid;
  grid-template-columns: repeat(3, var(--dash-lang-option-w));
  align-items: center;
  justify-content: center;
  height: var(--dash-status-h);
  padding: 2px;
  box-sizing: border-box;
  border: 1px solid rgba(79, 209, 255, 0.36);
  border-radius: 999px;
  background: rgba(4, 16, 31, 0.72);
  box-shadow: inset 0 0 14px rgba(79, 209, 255, 0.12);
  line-height: 1;
}

.dashboard-language-switch button {
  display: grid;
  place-items: center;
  width: var(--dash-lang-option-w);
  min-width: 0;
  height: 100%;
  padding: 0;
  appearance: none;
  border: 0;
  border-radius: 999px;
  color: rgba(223, 248, 255, 0.72);
  font-family: "Microsoft YaHei", Arial, sans-serif;
  font-size: clamp(11px, 0.62vw, 14px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  background: transparent;
  cursor: pointer;
}

.dashboard-language-switch button.is-active {
  color: #061524;
  background: linear-gradient(180deg, #5ff1ff, #37d5c8);
  box-shadow: 0 0 12px rgba(72, 244, 255, 0.45);
}

.dashboard-status-ok,
.dashboard-status-demo {
  border-color: rgba(66, 211, 146, 0.7);
  color: #bfffe4;
}

.dashboard-status-error {
  border-color: rgba(255, 111, 111, 0.78);
  color: #ffd1d1;
}

.dashboard-status-connecting {
  border-color: rgba(245, 200, 71, 0.75);
  color: #fff0ae;
}

#data_content .data_info {
  flex: 0 0 var(--dash-info-h);
  width: calc(100% - (var(--dash-edge-x) * 2));
  height: var(--dash-info-h);
  margin: 0 var(--dash-edge-x);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--dash-top-card-gap);
  align-items: stretch;
}

#data_content .data_info .info_1,
#data_content .data_info .info_3 {
  float: none;
  min-width: 0;
  height: 100%;
}

#data_content .data_info .info_1 {
  flex: 1.5 1 0;
  width: auto;
}

#data_content .data_info > .info_1:not(.dashboard-line-output-replacement) {
  display: none;
}

#data_content .data_info .info_2 {
  display: none;
}

#data_content .data_info .info_3 {
  flex: 1 1 0;
  width: auto;
}

#data_content .data_info .dashboard-line-output-replacement,
#data_content .data_info .info_3 {
  display: contents;
}

#data_content .data_info .info_1 .text_1,
#data_content .data_info .info_3 .text_2 {
  width: 100%;
}

#data_content .data_info .dashboard-line-output-replacement {
  flex: 1.55 1 0;
}

#data_content .data_info .dashboard-line-output-replacement .dashboard-line-output-groups {
  display: contents !important;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

#data_content .data_info .dashboard-line-output-replacement .dashboard-line-output-groups > div {
  width: auto;
  height: auto;
  position: static;
  box-sizing: border-box;
}

#data_content .data_info .dashboard-line-output-card,
#data_content .data_info .dashboard-week-output-card {
  min-width: 0;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  gap: clamp(7px, 0.72vh, 11px);
  padding: clamp(8px, 0.9vh, 14px) clamp(14px, 1.05vw, 22px);
  border: 1px solid rgba(79, 209, 255, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(15, 43, 72, 0.88), rgba(8, 18, 35, 0.92)),
    rgba(12, 22, 41, 0.88);
  box-shadow:
    inset 0 0 24px rgba(31, 149, 199, 0.16),
    0 10px 24px rgba(0, 0, 0, 0.22);
}

#data_content .data_info .info_1 .text_1 div.dashboard-line-output-card {
  width: auto;
  height: 100%;
  position: static;
}

#data_content .data_info .dashboard-card-assy-today {
  order: 1;
}

#data_content .data_info .dashboard-card-assy-week {
  order: 2;
}

#data_content .data_info .dashboard-card-test-today {
  order: 3;
}

#data_content .data_info .dashboard-card-test-week {
  order: 4;
}

#data_content .data_info .dashboard-line-output-title {
  display: block !important;
  width: 100%;
  height: auto;
  position: static;
  color: rgba(226, 244, 255, 0.92);
  font-size: clamp(13px, 0.88vw, 18px);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(72, 244, 255, 0.34);
}

#data_content .data_info .dashboard-line-output-values {
  display: grid !important;
  width: 100%;
  height: auto;
  position: static;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  gap: clamp(8px, 1vw, 18px);
  align-items: center;
  padding: 0 clamp(10px, 1.3vw, 28px);
  box-sizing: border-box;
}

#data_content .data_info .dashboard-line-output-item {
  display: flex !important;
  width: 100%;
  min-width: 0;
  height: auto;
  position: static;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
}

#data_content .data_info .dashboard-line-output-item span {
  color: rgba(188, 229, 244, 0.76);
  font-size: clamp(10px, 0.62vw, 13px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}

#data_content .data_info .dashboard-line-output-item strong {
  color: #48f4ff;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: clamp(18px, 1.45vw, 32px);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 16px rgba(72, 244, 255, 0.68);
  white-space: nowrap;
  text-align: center;
}

#data_content .data_info .info_1 .text_1 div.dashboard-line-output-title {
  display: block !important;
  width: 100%;
  height: auto;
  position: static;
}

#data_content .data_info .info_1 .text_1 div.dashboard-line-output-values {
  display: grid !important;
  width: 100%;
  height: auto;
  position: static;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(8px, 1vw, 18px);
  padding: 0 clamp(10px, 1.3vw, 28px);
  box-sizing: border-box;
}

#data_content .data_info .info_1 .text_1 div.dashboard-line-output-values > div.dashboard-line-output-item {
  display: flex !important;
  width: 100%;
  height: auto;
  min-width: 0;
  position: static;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  box-sizing: border-box;
}

#data_content .data_info .info_3 > .text_2:not(.dashboard-week-output-groups) {
  display: none;
}

#data_content .data_info .info_3 .dashboard-week-output-groups {
  display: contents !important;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

#data_content .data_info .info_3 .dashboard-week-output-groups > div {
  width: auto;
  height: auto;
  position: static;
  box-sizing: border-box;
}

#data_content .data_info .dashboard-week-output-card {
  justify-content: center;
  gap: clamp(7px, 0.72vh, 11px);
  padding: clamp(8px, 0.9vh, 14px) clamp(14px, 1.05vw, 22px);
}

#data_content .data_info .info_3 .text_2 div.dashboard-week-output-card,
#data_content .data_info .info_3 .text_2 div.dashboard-week-output-head,
#data_content .data_info .info_3 .text_2 div.dashboard-week-output-head > div {
  width: auto;
  height: auto;
  position: static;
}

#data_content .data_info .dashboard-week-output-head {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 0.7vw, 14px);
  min-height: 0;
}

#data_content .data_info .dashboard-week-output-head > div {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

#data_content .data_info .dashboard-week-output-head span {
  color: rgba(226, 244, 255, 0.92);
  font-size: clamp(13px, 0.86vw, 18px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(72, 244, 255, 0.34);
}

#data_content .data_info .dashboard-week-output-head em {
  color: rgba(164, 211, 229, 0.70);
  font-size: clamp(10px, 0.58vw, 12px);
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

#data_content .data_info .dashboard-week-output-head strong {
  color: #48f4ff;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: clamp(19px, 1.45vw, 31px);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 16px rgba(72, 244, 255, 0.68);
  white-space: nowrap;
}

.dashboard-week-sparkline {
  width: 100%;
  height: clamp(22px, 2.75vh, 32px);
  min-height: 0;
  overflow: hidden;
}

.dashboard-week-sparkline-svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.dashboard-week-sparkline-svg polygon {
  fill: rgba(72, 244, 255, 0.08);
}

.dashboard-week-sparkline-svg polyline {
  fill: none;
  stroke: #48f4ff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(72, 244, 255, 0.70));
}

.dashboard-week-sparkline-svg circle {
  fill: #b9fbff;
  stroke: rgba(5, 24, 42, 0.88);
  stroke-width: 1.2;
}

.dashboard-week-sparkline-svg text {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  text-anchor: middle;
}

.dashboard-week-sparkline-svg .dashboard-week-sparkline-value {
  fill: #eaffff;
  font-size: 7px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgba(4, 18, 34, 0.9);
  stroke-width: 2px;
  stroke-linejoin: round;
}

.dashboard-week-sparkline-svg .dashboard-week-sparkline-axis {
  fill: rgba(175, 225, 240, 0.68);
  font-size: 8px;
  font-weight: 600;
}

#data_content .data_info .conuts {
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: clamp(22px, 2.5vw, 46px);
}

#data_content .data_info .count p {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  font-style: normal;
}

#data_content .data_info .text_1,
#data_content .data_info .text_2 {
  border: 1px solid rgba(79, 209, 255, 0.25);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(15, 43, 72, 0.88), rgba(8, 18, 35, 0.92)),
    rgba(12, 22, 41, 0.88);
  box-shadow:
    inset 0 0 24px rgba(31, 149, 199, 0.16),
    0 10px 24px rgba(0, 0, 0, 0.22);
}

#data_content .data_info .count p:first-child {
  color: rgba(226, 244, 255, 0.88) !important;
  font-weight: 600;
  font-size: clamp(13px, 0.9vw, 20px);
}

#data_content .data_info .count p:last-child {
  color: #48f4ff !important;
  text-shadow: 0 0 18px rgba(72, 244, 255, 0.72);
}

.metric-icon {
  color: #5fe1ff !important;
  filter: drop-shadow(0 0 8px rgba(95, 225, 255, 0.55));
}

.public {
  border-color: rgba(74, 157, 213, 0.62) !important;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(8, 28, 51, 0.72), rgba(5, 14, 29, 0.84)),
    rgba(6, 18, 36, 0.76);
  box-shadow:
    inset 0 0 28px rgba(21, 117, 168, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.2);
}

.public::before,
.public::after,
.boxfoot::before,
.boxfoot::after {
  border-color: #2be7ff !important;
}

.public::before,
.public::after,
.boxfoot,
.boxfoot::before,
.boxfoot::after {
  display: none !important;
}

.min-title {
  height: var(--dash-title-h);
  top: var(--dash-title-top);
  min-width: auto;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.min-title span {
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--dash-title-h);
  font-size: clamp(12px, 0.78vw, 18px);
  top: 0;
  color: #dff8ff;
  text-shadow: 0 0 10px rgba(72, 244, 255, 0.45);
}

.dashboard-order-title {
  overflow: visible;
}

.dashboard-order-title > span {
  display: inline-block;
}

.dashboard-order-title-metrics {
  position: absolute;
  top: 50%;
  left: calc(50vw - var(--dash-edge-x) - var(--dash-table-pad-x));
  transform: translate(calc(-100% - 2px), -50%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(10px, 0.85vw, 16px);
  z-index: 3;
}

.dashboard-order-title-metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--dash-title-h);
  line-height: var(--dash-title-h);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(216, 244, 255, 0.84);
  box-shadow: none;
  white-space: nowrap;
}

.dashboard-order-title-metric span,
.dashboard-order-title-metric strong {
  display: inline-flex;
  align-items: center;
  height: var(--dash-title-h);
  line-height: var(--dash-title-h);
  letter-spacing: 0;
}

.dashboard-order-title-metric span {
  font-size: clamp(11px, 0.62vw, 13px);
  font-weight: 600;
  color: rgba(188, 229, 244, 0.72);
  text-shadow: none;
}

.dashboard-order-title-metric strong {
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: clamp(15px, 0.95vw, 20px);
  font-weight: 800;
  color: #48f4ff;
  text-shadow: 0 0 12px rgba(72, 244, 255, 0.55);
}

.gun {
  height: 30px;
  margin: 0 12px 4px;
  border-radius: 6px;
  background: rgba(30, 90, 131, 0.26);
}

.gun span {
  height: 30px;
  line-height: 30px;
  margin-bottom: 0;
  color: #8ee8ff;
}

#FontScroll {
  margin-top: 0;
}

#FontScroll ul li {
  border-bottom-color: rgba(91, 160, 201, 0.22);
  color: #eaf9ff;
}

#FontScroll ul li:nth-child(odd) {
  background: rgba(255, 255, 255, 0.025);
}

#FontScroll ul li:hover {
  background: rgba(47, 179, 220, 0.14);
}

#FontScroll ul li.empty-row {
  color: #7fb5cf;
  border-bottom: 0;
  box-shadow: none;
}

#FontScroll ul li.empty-row .fontInner span {
  width: 100%;
}

.fontInner span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.js-chart {
  min-height: 120px;
}

@media (max-width: 1360px) {
  :root {
    --dash-lang-option-w: 30px;
  }

  .dashboard-status {
    font-size: 12px;
  }

  #header .header h1 {
    width: min(48vw, 700px);
    font-size: clamp(24px, 2.15vw, 40px);
  }

  .dashboard-clock {
    min-width: 220px;
  }

  .metric-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
}

.data_content.dashboard-body {
  width: calc(100% - (var(--dash-edge-x) * 2));
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  margin: 0 var(--dash-edge-x) var(--dash-bottom-gap);
  display: grid;
  grid-template-rows: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--dash-row-gap);
  align-items: stretch;
}

.dashboard-order-panel,
.dashboard-quality-panel,
.dashboard-device-panel {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  padding-top: var(--dash-panel-top);
}

.dashboard-order-panel {
  flex: 2 1 0;
  min-height: 0;
}

.dashboard-chart-row {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  gap: var(--dash-gap);
}

.dashboard-quality-panel,
.dashboard-device-panel {
  flex: 1 1 0;
  min-width: 0;
}

.dashboard-device-panel {
  padding-top: clamp(8px, 1vh, 14px);
}

.dashboard-quality-panel .js-chart {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.dashboard-order-table {
  height: 100%;
  padding: 0 var(--dash-table-pad-x) var(--dash-table-pad-bottom);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.dashboard-order-header,
.dashboard-order-row {
  display: grid;
  grid-template-columns: 1.3fr 1.2fr 0.9fr 0.9fr 0.8fr 0.9fr;
  align-items: center;
  justify-items: center;
  column-gap: 10px;
  text-align: center;
}

.dashboard-order-header {
  flex: 0 0 var(--dash-table-head-h);
  height: var(--dash-table-head-h);
  padding: 0 clamp(10px, 0.9vw, 18px);
  border: 1px solid rgba(76, 209, 255, 0.24);
  border-radius: 6px;
  color: #86ebff;
  font-size: var(--dash-table-head-font);
  font-weight: 700;
  background: linear-gradient(90deg, rgba(10, 57, 89, 0.72), rgba(16, 86, 123, 0.54));
  box-shadow: inset 0 0 18px rgba(58, 214, 255, 0.12);
}

.dashboard-order-scroll {
  flex: 1 1 0;
  min-height: 0;
  margin-top: clamp(6px, 0.9vh, 10px);
  overflow: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

#FontScroll.dashboard-order-scroll {
  flex: 1 1 0;
  width: 100%;
  height: auto;
  min-height: 0;
  margin-top: clamp(6px, 0.9vh, 10px);
  overflow: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.dashboard-order-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.dashboard-order-scroll ul {
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateY(0);
}

.dashboard-order-scroll.is-scrollable ul {
  animation-name: dashboardOrderTranslate;
  animation-duration: var(--order-scroll-duration, 72s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.dashboard-order-scroll li {
  height: var(--dash-table-row-h);
  color: #eaf9ff;
  line-height: var(--dash-table-row-h);
  border-bottom: 1px solid rgba(91, 160, 201, 0.22);
}

#FontScroll.dashboard-order-scroll ul li {
  height: var(--dash-table-row-h);
  width: 100%;
  color: #eaf9ff;
  line-height: var(--dash-table-row-h);
  border-bottom: 1px solid rgba(91, 160, 201, 0.22);
  box-shadow: none;
}

#FontScroll.dashboard-order-scroll ul li:nth-child(1),
#FontScroll.dashboard-order-scroll ul li:hover {
  box-shadow: none;
}

.dashboard-order-scroll li:nth-child(odd) {
  background: rgba(255, 255, 255, 0.03);
}

.dashboard-order-scroll li:hover {
  background: rgba(47, 179, 220, 0.14);
}

.dashboard-order-row {
  height: var(--dash-table-row-h);
  padding: 0 clamp(10px, 0.9vw, 18px);
  font-size: var(--dash-table-font);
  text-align: center;
}

.dashboard-order-row span {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  justify-self: center;
}

.dashboard-order-header span {
  width: 100%;
  text-align: center;
  justify-self: center;
}

.dashboard-order-scroll .empty-row {
  height: 100%;
  border-bottom: 0;
  color: #7fb5cf;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard-order-scroll .empty-row .dashboard-order-row {
  display: block;
  height: auto;
  line-height: 1.4;
}

.order-status-badge {
  display: inline-flex;
  min-width: clamp(58px, 3.7vw, 82px);
  height: clamp(22px, 2.85vh, 30px);
  padding: 0 clamp(8px, 0.55vw, 12px);
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-style: normal;
  font-weight: 700;
  line-height: clamp(22px, 2.85vh, 30px);
}

.order-status-running {
  color: #bfffe4;
  border: 1px solid rgba(66, 211, 146, 0.7);
  background: rgba(36, 142, 97, 0.18);
}

.order-status-pending {
  color: #fff0ae;
  border: 1px solid rgba(245, 200, 71, 0.75);
  background: rgba(145, 111, 24, 0.18);
}

.order-status-closed {
  color: #d8e8ef;
  border: 1px solid rgba(137, 169, 185, 0.48);
  background: rgba(86, 105, 118, 0.18);
}

.dashboard-device-grid {
  height: 100%;
  padding: 0 clamp(10px, 0.95vw, 22px);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr);
  gap: var(--dash-gap);
}

.dashboard-device-chart {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dashboard-subtitle {
  flex: 0 0 var(--dash-device-subtitle-h);
  color: #8ee8ff;
  font-size: clamp(12px, 0.74vw, 16px);
  font-weight: 700;
  text-align: center;
  line-height: var(--dash-device-subtitle-h);
}

.dashboard-device-chart .js-chart {
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
}

.device-status-board {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: clamp(4px, 0.42vw, 8px);
}

.device-status-block {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 0.32vw, 6px);
  padding: 0 clamp(4px, 0.42vw, 8px);
  border: 1px solid rgba(79, 209, 255, 0.14);
  border-radius: 4px;
  box-sizing: border-box;
  color: #eaf9ff;
  font-size: clamp(10px, 0.62vw, 14px);
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
}

.device-status-running {
  border-color: rgba(66, 211, 146, 0.42);
  background: linear-gradient(180deg, rgba(66, 211, 146, 0.34), rgba(27, 109, 77, 0.34));
  box-shadow: inset 0 0 10px rgba(66, 211, 146, 0.12);
}

.device-status-fault {
  border-color: rgba(255, 92, 122, 0.48);
  background: linear-gradient(180deg, rgba(255, 92, 122, 0.38), rgba(125, 31, 54, 0.34));
  box-shadow: inset 0 0 10px rgba(255, 92, 122, 0.14);
}

.device-status-offline {
  border-color: rgba(120, 144, 166, 0.46);
  background: linear-gradient(180deg, rgba(89, 111, 132, 0.34), rgba(38, 52, 68, 0.38));
  box-shadow: inset 0 0 10px rgba(120, 144, 166, 0.12);
}

.device-status-standby {
  border-color: rgba(76, 201, 240, 0.42);
  background: linear-gradient(180deg, rgba(76, 201, 240, 0.30), rgba(21, 91, 124, 0.34));
  box-shadow: inset 0 0 10px rgba(76, 201, 240, 0.12);
}

.device-status-initializing {
  border-color: rgba(155, 135, 245, 0.44);
  background: linear-gradient(180deg, rgba(155, 135, 245, 0.32), rgba(66, 54, 130, 0.34));
  box-shadow: inset 0 0 10px rgba(155, 135, 245, 0.12);
}

.device-status-shortage {
  border-color: rgba(255, 210, 92, 0.52);
  background: linear-gradient(180deg, rgba(255, 210, 92, 0.40), rgba(128, 89, 24, 0.34));
  box-shadow: inset 0 0 10px rgba(255, 210, 92, 0.14);
}

.device-status-paused {
  border-color: rgba(250, 157, 84, 0.44);
  background: linear-gradient(180deg, rgba(250, 157, 84, 0.34), rgba(113, 62, 34, 0.34));
  box-shadow: inset 0 0 10px rgba(250, 157, 84, 0.12);
}

.device-status-unknown,
.device-status-unfinished {
  border-color: rgba(167, 196, 214, 0.36);
  background: linear-gradient(180deg, rgba(92, 126, 147, 0.26), rgba(37, 62, 79, 0.32));
  box-shadow: inset 0 0 10px rgba(167, 196, 214, 0.10);
}

.device-status-name,
.device-status-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-status-name {
  color: rgba(255, 255, 255, 0.92);
}

.device-status-text {
  color: #ffffff;
}

.device-status-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7fb5cf;
  font-size: clamp(12px, 0.74vw, 16px);
}

@keyframes dashboardOrderScroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

@keyframes dashboardOrderTranslate {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(var(--order-scroll-distance, 0px) * -1));
  }
}

@media (max-width: 1360px) {
  .dashboard-order-header,
  .dashboard-order-row {
    grid-template-columns: 1.25fr 1fr 0.8fr 0.8fr 0.72fr 0.78fr;
    column-gap: 6px;
    font-size: clamp(11px, 0.9vw, 12px);
  }

  .dashboard-device-grid {
    gap: clamp(6px, 0.6vw, 8px);
    padding-left: clamp(8px, 0.9vw, 12px);
    padding-right: clamp(8px, 0.9vw, 12px);
    grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr);
  }
}

@media (max-height: 820px) {
  :root {
    --dash-header-h: clamp(48px, 8vh, 58px);
    --dash-card-gap: clamp(5px, 1vh, 8px);
    --dash-info-h: clamp(64px, 10vh, 82px);
    --dash-title-h: clamp(24px, 3.7vh, 30px);
    --dash-panel-top: calc(var(--dash-title-h) + 6px);
    --dash-table-head-h: clamp(28px, 4.1vh, 34px);
    --dash-table-row-h: clamp(28px, 4.15vh, 34px);
    --dash-table-pad-bottom: 6px;
    --dash-device-subtitle-h: clamp(18px, 3vh, 24px);
  }

  .data_content.dashboard-body {
    grid-template-rows: minmax(0, 1.05fr) minmax(0, 1fr);
  }

  #data_content .data_info .dashboard-line-output-card,
  #data_content .data_info .dashboard-week-output-card {
    gap: 4px;
    padding: 5px clamp(10px, 1vw, 16px);
  }

  .dashboard-week-sparkline {
    height: clamp(16px, 2.75vh, 22px);
  }

  .dashboard-order-scroll,
  #FontScroll.dashboard-order-scroll {
    margin-top: 4px;
  }

  .dashboard-device-panel {
    padding-top: 4px;
  }

  .dashboard-device-grid {
    padding-right: clamp(6px, 0.8vw, 12px);
    padding-left: clamp(6px, 0.8vw, 12px);
  }
}

@media (max-width: 768px) {
  :root {
    --dash-card-gap: 10px;
    --dash-edge-x: 10px;
    --dash-bottom-gap: 18px;
    --dash-title-h: 32px;
    --dash-title-top: 5px;
    --dash-panel-top: 42px;
    --dash-table-head-h: 38px;
    --dash-table-row-h: 40px;
    --dash-table-pad-x: 10px;
    --dash-table-pad-bottom: 10px;
    --dash-table-font: 12px;
    --dash-table-head-font: 12px;
    --dash-status-h: 28px;
    --dash-device-subtitle-h: 30px;
    --dash-lang-option-w: 32px;
  }

  html,
  body {
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-attachment: scroll;
  }

  body::before {
    background:
      linear-gradient(180deg, rgba(8, 18, 36, 0.12), rgba(4, 8, 18, 0.68)),
      radial-gradient(circle at 50% 4%, rgba(61, 214, 255, 0.2), transparent 22%);
  }

  #header {
    height: auto;
    min-height: 126px;
  }

  #header .header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 12px 10px;
    height: auto;
    min-height: 126px;
    padding: 14px 12px 13px;
  }

  #header .header h1 {
    position: static;
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    transform: none;
    font-size: clamp(24px, 7vw, 31px);
    line-height: 1.15;
  }

  .dashboard-clock {
    position: static;
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    transform: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .dashboard-clock-date {
    font-size: 11px;
  }

  .dashboard-clock-time {
    font-size: 19px;
  }

  .dashboard-header-actions {
    position: static;
    grid-column: 2;
    grid-row: 2;
    transform: none;
    align-items: flex-end;
    flex-direction: column;
    gap: 7px;
  }

  .dashboard-status {
    min-width: 132px;
    padding: 0 9px;
    font-size: 11px;
  }

  .dashboard-language-switch {
    align-self: flex-end;
  }

  #data_content {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 10px 10px 24px;
    overflow: visible;
  }

  #data_content .data_info {
    width: 100%;
    height: auto;
    margin: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #data_content .data_info .dashboard-line-output-card,
  #data_content .data_info .dashboard-week-output-card {
    min-height: 130px;
    gap: 9px;
    padding: 13px 9px;
    border-radius: 10px;
  }

  #data_content .data_info .dashboard-line-output-title {
    font-size: 14px;
  }

  #data_content .data_info .dashboard-line-output-values,
  #data_content .data_info .info_1 .text_1 div.dashboard-line-output-values {
    gap: 4px;
    padding: 0;
  }

  #data_content .data_info .dashboard-line-output-item span {
    min-height: 22px;
    font-size: 9px;
    line-height: 1.2;
    white-space: normal;
  }

  #data_content .data_info .dashboard-line-output-item strong {
    font-size: clamp(17px, 5vw, 22px);
  }

  #data_content .data_info .dashboard-week-output-head {
    gap: 7px;
  }

  #data_content .data_info .dashboard-week-output-head span {
    font-size: 14px;
  }

  #data_content .data_info .dashboard-week-output-head strong {
    font-size: 22px;
  }

  .dashboard-week-sparkline {
    height: 48px;
  }

  .data_content.dashboard-body {
    width: 100%;
    height: auto;
    margin: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .dashboard-order-panel {
    flex: none;
    width: 100%;
    height: 430px;
    min-height: 430px;
  }

  .dashboard-order-title-metrics {
    top: 50%;
    right: 14px;
    left: auto;
    transform: translateY(-50%);
  }

  .dashboard-order-title-metric span {
    display: none;
  }

  .dashboard-order-table {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(72, 244, 255, 0.36) transparent;
  }

  .dashboard-order-header,
  #FontScroll.dashboard-order-scroll {
    width: 680px;
    min-width: 680px;
  }

  .dashboard-order-header,
  .dashboard-order-row {
    grid-template-columns: 1.35fr 1fr 0.85fr 0.85fr 0.75fr 0.9fr;
    column-gap: 6px;
    font-size: 12px;
  }

  .dashboard-chart-row {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .dashboard-quality-panel,
  .dashboard-device-panel {
    flex: none;
    width: 100%;
    min-width: 0;
  }

  .dashboard-quality-panel {
    height: 360px;
  }

  .dashboard-device-panel {
    height: auto;
    padding: 10px 0 12px;
  }

  .dashboard-device-grid {
    height: auto;
    padding: 0 10px;
    grid-template-columns: 1fr;
    grid-template-rows: 280px 310px;
    gap: 12px;
  }

  .dashboard-device-chart {
    min-height: 0;
  }

  .device-status-board {
    gap: 6px;
  }

  .device-status-block {
    min-height: 38px;
    padding: 0 6px;
    font-size: 11px;
  }
}

@media (max-width: 420px) {
  #data_content .data_info {
    grid-template-columns: 1fr;
  }

  #data_content .data_info .dashboard-line-output-card,
  #data_content .data_info .dashboard-week-output-card {
    min-height: 126px;
  }

  .dashboard-quality-panel {
    height: 340px;
  }
}

@media (min-width: 2200px), (min-height: 1200px) {
  :root {
    --dash-card-gap: clamp(14px, 0.72vw, 22px);
  }
}