:root {
  color-scheme: light;
  font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  color: #1f2933;
  background: #f5f7fb;
}

* {
  box-sizing: border-box;
}

html,
body,
#app,
.admin-shell {
  min-height: 100vh;
}

body {
  margin: 0;
  background: #f5f7fb;
}

.admin-aside {
  background: #12232e;
  color: #e8f0f2;
  border-right: 1px solid #0b1720;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #2a8c7f;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0;
}

.brand-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.brand-subtitle {
  margin-top: 2px;
  color: #9fb2bc;
  font-size: 12px;
}

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

.admin-menu.el-menu {
  border-right: 0;
}

.admin-menu .el-menu-item,
.admin-menu .el-submenu__title {
  height: 42px;
  line-height: 42px;
}

.admin-menu .el-menu-item.is-active {
  background: #183844;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
  border-bottom: 1px solid #e4e9f0;
}

.admin-header h1 {
  margin: 0;
  color: #17212b;
  font-size: 19px;
  line-height: 1.3;
}

.admin-header p {
  margin: 3px 0 0;
  color: #697986;
  font-size: 13px;
}

.admin-main {
  min-width: 0;
  padding: 18px;
}

.page-stack {
  display: grid;
  gap: 14px;
}

.toolbar,
.sub-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.sub-toolbar {
  justify-content: space-between;
}

.detail-form {
  max-width: 960px;
}

.inline-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  max-width: 620px;
}

.inline-control .el-select {
  width: 100%;
}

.upload-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.fix-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  max-width: 920px;
}

.work-plan-collapse {
  max-width: 860px;
  border: 1px solid #e4e9f0;
  border-radius: 8px;
  overflow: hidden;
}

.collapse-title {
  color: #17212b;
  font-weight: 600;
}

.work-plan-section-title {
  display: inline-flex;
  align-items: center;
  min-height: 100%;
}

.work-plan-section-title .el-checkbox {
  margin-right: 0;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 18px;
  padding: 6px 0;
}

.option-grid .el-checkbox {
  margin-right: 0;
  white-space: normal;
}

.drink-selector {
  display: grid;
  gap: 10px;
  max-width: 920px;
}

.drink-selector-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(160px, 0.8fr) auto;
  gap: 10px;
  align-items: center;
}

.drink-selector-row .el-select {
  width: 100%;
}

.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-user {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 260px;
  padding: 8px 10px;
  color: #334e5b;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mes-drink-selector {
  gap: 14px;
}

.mes-drink-count {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mes-check-item-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.mes-dialog-alert {
  margin-bottom: 18px;
}

.mes-check-item-dialog-toolbar {
  margin-bottom: 10px;
}

.el-dialog .el-form .el-select {
  width: 100%;
}

.danger-text-button {
  color: #f56c6c;
}

.drink-cup-groups,
.drink-grid {
  max-height: 280px;
  overflow: auto;
}

.drink-cup-group {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 8px 16px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid #edf1f5;
}

.cup-option-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.cup-option-grid .el-checkbox {
  margin-right: 0;
}

.machine-default-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  max-width: 1060px;
}

.machine-default-grid .el-select,
.machine-default-grid .el-date-editor,
.machine-default-grid .el-input {
  width: 100%;
}

.quality-overview-stack {
  display: grid;
  gap: 14px;
}

.quality-standard-table .cell,
.quality-result-table .cell {
  word-break: break-word;
}

.quality-standard-tip {
  margin-bottom: 12px;
}

.quality-standard-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.quality-input-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.quality-input-pair .el-input-number {
  width: 100%;
}

.quality-trend-panel {
  position: relative;
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.quality-trend-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.quality-trend-toolbar .el-select {
  width: 220px;
}

.quality-trend-toolbar .quality-trend-date-range {
  width: 292px;
}

.quality-trend-toolbar-note {
  line-height: 1.5;
}

.quality-trend-alert {
  margin-bottom: 0;
}

.quality-trend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-height: 280px;
}

.quality-trend-chart {
  position: relative;
  min-width: 0;
  min-height: 300px;
  padding: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #dce7f2;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(45, 85, 130, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.quality-trend-chart:hover {
  border-color: #c3d7ee;
  box-shadow: 0 10px 24px rgba(45, 85, 130, 0.1);
  transform: translateY(-1px);
}

.quality-trend-chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
}

.quality-trend-chart-header strong {
  display: block;
  margin-bottom: 3px;
  color: #17212b;
  font-size: 14px;
}

.quality-trend-count {
  flex: 0 0 auto;
  color: #697986;
  font-size: 12px;
  white-space: nowrap;
}

.quality-trend-statistics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.quality-trend-statistic {
  min-width: 0;
  padding: 8px 10px;
  background: rgba(242, 247, 253, 0.88);
  border: 1px solid #e1eaf3;
  border-radius: 8px;
}

.quality-trend-statistic span,
.quality-trend-statistic strong {
  display: block;
}

.quality-trend-statistic span {
  margin-bottom: 3px;
  color: #7b8994;
  font-size: 11px;
}

.quality-trend-statistic strong {
  overflow: hidden;
  color: #243342;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-trend-statistic.is-failure strong {
  color: #d9534f;
}

.quality-trend-statistic.is-success strong {
  color: #249770;
}

button.quality-trend-statistic {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
}

.quality-trend-statistic.is-clickable:not(:disabled) {
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.quality-trend-statistic.is-clickable:not(:disabled):hover,
.quality-trend-statistic.is-clickable:not(:disabled):focus-visible {
  background: #fff7f6;
  border-color: #efa5a1;
  box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.08);
  outline: none;
}

.quality-trend-statistic.is-clickable:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.quality-trend-statistics-scope {
  grid-column: 1 / -1;
  color: #8b98a3;
  font-size: 11px;
  line-height: 1.4;
}

.quality-failure-dialog-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-bottom: 14px;
}

.quality-failure-dialog-alert {
  margin-bottom: 14px;
}

.quality-failure-dialog-table .el-table__body-wrapper {
  overflow-y: auto;
}

.quality-failure-dialog-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.quality-trend-svg {
  display: block;
  width: 100%;
  height: 230px;
  margin-top: 6px;
  overflow: visible;
}

.quality-trend-axis {
  stroke: #cbd7e3;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.quality-trend-grid-line {
  stroke: #e8eff6;
  stroke-width: 1;
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
}

.quality-trend-axis-label {
  fill: #7b8994;
  font-size: 11px;
}

.quality-trend-standard-band {
  fill: rgba(36, 151, 112, 0.09);
}

.quality-trend-standard-line {
  stroke: #249770;
  stroke-width: 1.25;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}

.quality-trend-area {
  pointer-events: none;
}

.quality-trend-line {
  fill: none;
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 4px rgba(47, 111, 214, 0.18));
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.quality-trend-point {
  fill: #ffffff;
  stroke: #3f7ee8;
  stroke-width: 1.75;
  cursor: pointer;
  vector-effect: non-scaling-stroke;
  transition: opacity 0.15s ease, fill 0.15s ease;
}

.quality-trend-point.is-dense:not(.is-invalid) {
  fill: transparent;
  stroke: transparent;
}

.quality-trend-point:hover {
  fill: #3f7ee8;
  stroke: #ffffff;
  stroke-width: 2;
}

.quality-trend-point.is-invalid {
  fill: #ef4444;
  stroke: #b91c1c;
  stroke-width: 2;
}

.quality-trend-point.is-invalid:hover {
  fill: #b91c1c;
  stroke: #ffffff;
}

.quality-trend-invalid-count,
.quality-trend-invalid-text {
  color: #dc2626;
}

.quality-trend-empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  color: #9aa8b3;
  font-size: 13px;
  text-align: center;
  pointer-events: none;
}

.quality-trend-popover {
  position: absolute;
  z-index: 8;
  width: 288px;
  max-height: 320px;
  overflow: auto;
  padding: 10px;
  background: #ffffff;
  border: 1px solid #c9d7e3;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(23, 33, 43, 0.16);
}

.quality-trend-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.quality-trend-popover-head button {
  width: 24px;
  height: 24px;
  padding: 0;
  background: #f2f5f8;
  border: 1px solid #d7e1ec;
  border-radius: 6px;
  color: #43515f;
  cursor: pointer;
}

.quality-trend-source {
  display: grid;
  gap: 5px;
  padding: 8px 0;
  border-top: 1px solid #edf1f5;
}

.quality-trend-source:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.quality-trend-source div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.quality-trend-source span {
  color: #7b8994;
  font-size: 12px;
}

.quality-trend-source strong {
  min-width: 0;
  color: #17212b;
  font-size: 13px;
  word-break: break-word;
}

.quality-trend-remove-point {
  justify-self: end;
  margin-top: 4px;
}

.empty-state {
  padding: 18px;
  color: #7b8994;
  text-align: center;
  background: #fbfcfe;
  border: 1px dashed #d9e1e8;
  border-radius: 8px;
}

.machine-default-field {
  min-width: 0;
}

.machine-time-field {
  min-width: 0;
}

.machine-time-field .el-popover__reference-wrapper {
  display: block;
}

.field-tip {
  margin-top: 4px;
  color: #7b8994;
  font-size: 12px;
  line-height: 1.3;
}

.settings-toolbar {
  margin-bottom: 12px;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-alert {
  margin-bottom: 12px;
}

.settings-language-table .el-input-number {
  width: 100%;
}

.option-meta {
  float: right;
  color: #9aa8b3;
  font-size: 12px;
}

.muted {
  color: #7b8994;
  font-size: 13px;
}

.filter-bar {
  padding: 14px 14px 0;
  background: #fff;
  border: 1px solid #e4e9f0;
  border-radius: 8px;
}

.filter-bar .el-form-item {
  margin-bottom: 14px;
}

.metric {
  min-height: 90px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e4e9f0;
  border-radius: 8px;
}

.metric-title {
  color: #697986;
  font-size: 13px;
}

.metric-value {
  margin-top: 10px;
  color: #14212c;
  font-size: 26px;
  font-weight: 700;
}

.json-panel {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4e9f0;
  border-radius: 8px;
}

.json-panel h3 {
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid #e4e9f0;
  color: #17212b;
  font-size: 15px;
}

.json-panel pre,
.inline-json {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.55;
}

.json-panel pre {
  max-height: 540px;
  overflow: auto;
  padding: 14px;
  background: #fbfcfe;
}

.inline-json {
  max-width: 620px;
}

.report-preview {
  display: grid;
  gap: 14px;
}

.report-preview .el-table {
  margin-top: 2px;
}

.table-pagination {
  display: flex;
  justify-content: flex-end;
  padding-top: 14px;
}

.history-pagination {
  align-items: center;
  gap: 8px;
}

.history-page-size {
  width: 100px;
}

.history-page-button {
  min-width: 32px;
  padding-left: 10px;
  padding-right: 10px;
}

.refresh-alert {
  margin-bottom: 12px;
}

.machine-history-title {
  margin-left: 12px;
  margin-right: 10px;
  color: #17212b;
  font-size: 18px;
}

.machine-history-kicker {
  margin-left: 12px;
  color: #697986;
  font-size: 13px;
}

.history-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

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

.node-detail-heading,
.card-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-header-row {
  justify-content: space-between;
}

.clickable-table .el-table__row {
  cursor: pointer;
}

.runtime-log-table .cell {
  word-break: break-word;
}

.metric-value.compact {
  min-height: 32px;
  font-size: 18px;
  line-height: 1.4;
}

.machine-history-executions {
  border: 1px solid #e4e9f0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.machine-history-executions .el-collapse-item__header {
  height: auto;
  min-height: 54px;
  padding: 0 14px;
  line-height: 1.4;
}

.machine-history-executions .el-collapse-item__content {
  padding: 0 14px 14px;
  background: #fbfcfe;
}

.step-log-popover-body {
  min-height: 96px;
}

.execution-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  min-width: 0;
}

.execution-id {
  color: #17212b;
  font-weight: 700;
}

.history-section-stack {
  display: grid;
  gap: 14px;
  min-height: 72px;
}

.history-section {
  border: 1px solid #e4e9f0;
  border-radius: 8px;
  background: #fff;
}

.history-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 12px 14px;
  border-bottom: 1px solid #edf1f5;
}

.history-section-header h3 {
  margin: 0;
  color: #17212b;
  font-size: 16px;
  line-height: 1.35;
}

.item-run-list {
  display: grid;
}

.item-run-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) 110px 140px minmax(220px, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 70px;
  padding: 12px 14px;
  border-bottom: 1px solid #edf1f5;
}

.item-run-row--with-steps {
  grid-template-columns: minmax(320px, 1fr) 110px 84px;
  align-items: start;
  gap: 12px 16px;
  padding: 16px;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}

.item-run-row:last-child {
  border-bottom: 0;
}

.item-run-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #17212b;
  font-weight: 700;
}

.item-run-times {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 5px;
  color: #697986;
  font-size: 12px;
}

.item-run-duration span {
  display: block;
  color: #7b8994;
  font-size: 12px;
}

.item-run-duration strong {
  color: #17212b;
  font-size: 15px;
}

.item-run-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.item-run-summary {
  color: #43515f;
  font-size: 13px;
  line-height: 1.45;
}

.drink-test-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  margin-top: 2px;
  padding: 14px;
  background: #f7fafe;
  border: 1px solid #dfe8f2;
  border-radius: 8px;
}

.drink-test-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.drink-test-panel-header strong {
  color: #17212b;
  font-size: 14px;
}

.drink-test-panel-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: #697986;
  font-size: 12px;
}

.drink-test-measurements {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.drink-test-measurement {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid #ead9ae;
  border-radius: 6px;
  color: #7b5f13;
  font-size: 12px;
}

.drink-test-measurement strong {
  color: #17212b;
  font-size: 13px;
}

.drink-test-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}

.drink-test-step {
  --drink-step-accent: #7b8994;
  --drink-step-accent-soft: #eef2f6;
  --drink-step-border: #d7e1ec;
  --drink-step-bg: #fff;
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(76px, max-content);
  align-items: start;
  gap: 10px;
  min-height: 64px;
  padding: 12px 12px 12px 14px;
  background: var(--drink-step-bg);
  border: 1px solid var(--drink-step-border);
  border-top: 4px solid var(--drink-step-accent);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(23, 33, 43, 0.05);
  overflow: hidden;
}

.drink-test-step--robot {
  --drink-step-accent: #159a63;
  --drink-step-accent-soft: #daf4e7;
  --drink-step-border: #9edfc1;
  --drink-step-bg: #f2fbf6;
}

.drink-test-step--coffee {
  --drink-step-accent: #2f6fd6;
  --drink-step-accent-soft: #deebff;
  --drink-step-border: #a8c7f3;
  --drink-step-bg: #f2f7ff;
}

.drink-test-step--measure {
  --drink-step-accent: #b77900;
  --drink-step-accent-soft: #f7e3aa;
  --drink-step-border: #e8c46e;
  --drink-step-bg: #fff7df;
}

.drink-test-step--failed {
  --drink-step-accent: #d93025;
  --drink-step-accent-soft: #fde2df;
  --drink-step-border: #f09b94;
  --drink-step-bg: #fff3f1;
}

.drink-test-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--drink-step-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 0 0 4px var(--drink-step-accent-soft);
}

.drink-test-step--robot .drink-test-step-index {
  background: var(--drink-step-accent);
  color: #fff;
}

.drink-test-step--coffee .drink-test-step-index {
  background: var(--drink-step-accent);
  color: #fff;
}

.drink-test-step--measure .drink-test-step-index {
  background: var(--drink-step-accent);
  color: #fff;
}

.drink-test-step-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.drink-test-step-name {
  color: #17212b;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.drink-test-step-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.drink-test-step-type {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  background: var(--drink-step-accent);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}

.drink-test-step-meta {
  color: #7b8994;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.drink-test-step-side {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.drink-test-step-status,
.drink-test-step-value {
  max-width: 116px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #d7e1ec;
  border-radius: 999px;
  color: #17212b;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drink-test-step-status {
  background: #edf8f2;
  border-color: #b8e5cd;
  color: #13734d;
}

.drink-test-step--failed .drink-test-step-status {
  background: #ffe4e2;
  border-color: #f09b94;
  color: #b42318;
}

.item-run-steps {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.item-run-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
}

.item-run-step-value {
  color: #697986;
  font-size: 12px;
}

.node-status-tag {
  min-width: 58px;
  border-color: transparent;
  font-weight: 600;
  text-align: center;
}

.node-status-online {
  background: #e7f7ef !important;
  color: #13734d !important;
}

.node-status-offline {
  background: #eef2f6 !important;
  color: #5d6b78 !important;
}

.node-status-busy {
  background: #e8f1ff !important;
  color: #1f65c8 !important;
}

.node-status-faulted {
  background: #fde9e9 !important;
  color: #b42318 !important;
}

.node-status-maintenance {
  background: #fff4df !important;
  color: #9a5b00 !important;
}

.el-card {
  border-color: #e4e9f0;
  border-radius: 8px;
}

.el-card__header {
  padding: 13px 16px;
}

.el-table {
  border-radius: 8px;
}

.el-table .cell {
  word-break: break-word;
}

.el-tag {
  border-radius: 6px;
}

.el-descriptions {
  background: #fff;
}

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

.upload-progress-mask {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 35, 46, 0.42);
}

.upload-progress-panel {
  width: min(420px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(18, 35, 46, 0.22);
}

.upload-progress-title {
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 700;
  color: #1f2d3d;
}

.upload-progress-stage {
  margin-top: 12px;
  font-size: 13px;
  color: #657789;
}

.el-textarea__inner {
  font-family: Consolas, "Liberation Mono", monospace;
}

@media (max-width: 900px) {
  .admin-shell {
    display: block;
  }

  .admin-aside {
    width: 100% !important;
  }

  .admin-header {
    height: auto !important;
    align-items: flex-start;
    padding: 12px;
  }

  .admin-main {
    padding: 12px;
  }

  .toolbar,
  .sub-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .inline-control {
    grid-template-columns: 1fr;
  }

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

  .drink-selector-row {
    grid-template-columns: 1fr;
  }

  .quality-trend-grid {
    grid-template-columns: 1fr;
  }

  .quality-trend-toolbar .el-select {
    width: 100%;
  }

  .quality-trend-toolbar .quality-trend-date-range {
    width: 100%;
  }

  .quality-trend-statistics {
    grid-template-columns: 1fr;
  }

  .history-summary-grid,
  .node-detail-grid,
  .item-run-row {
    grid-template-columns: 1fr;
  }

  .item-run-row {
    align-items: start;
  }

  .table-pagination {
    justify-content: flex-start;
    overflow-x: auto;
  }
}