.page-app {
  display: grid;
  gap: 18px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.page-header h2 {
  margin: 0 0 8px;
  font-size: 24px;
}

.page-desc {
  color: var(--text-sub);
}

.panel-card.compact {
  padding: 18px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}

.form-item {
  display: grid;
  gap: 8px;
}

.form-item.full {
  grid-column: 1 / -1;
}

.input-field,
.select-field {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line-color);
  border-radius: 8px;
  color: var(--text-main);
  background: var(--panel-bg);
}

.helper-list {
  display: grid;
  gap: 10px;
  color: var(--text-sub);
}

.helper-list li {
  position: relative;
  padding-left: 18px;
}

.helper-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2f8cff;
}

.page-actions,
.filter-row,
.table-actions,
.status-pills,
.command-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.page-actions {
  justify-content: flex-end;
}

.secondary-btn,
.pager-btn,
.ghost-btn {
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--line-color);
  background: var(--panel-bg);
  color: var(--text-main);
}

.pager-shell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 18px;
}

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

.pager-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 15, 28, 0.42);
  backdrop-filter: blur(4px);
}

.modal-card {
  width: min(760px, calc(100vw - 48px));
  max-height: calc(100vh - 60px);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--line-color);
  border-radius: 14px;
  background: var(--panel-bg);
  box-shadow: var(--shadow-main);
}

.device-detail-modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 94vw;
  height: 94vh;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px rgba(20, 40, 70, 0.28);
}

.device-detail-modal-card.is-maximized {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
}

.device-detail-modal-mask {
  position: fixed;
  z-index: 7000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 15, 28, 0.5);
  backdrop-filter: blur(4px);
}

.device-detail-modal-mask.is-maximized {
  padding: 0;
}

.device-detail-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 8px 14px 8px 18px;
  border-bottom: 1px solid var(--line-color);
  background: var(--panel-bg);
}

.device-detail-modal-head h2 {
  margin: 0;
  color: var(--text-main);
  font-size: 16px;
}

.device-detail-modal-actions {
  display: inline-flex;
  gap: 8px;
}

.device-detail-modal-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line-color);
  border-radius: 5px;
  background: var(--page-bg);
  color: var(--text-sub);
  cursor: pointer;
}

.device-detail-modal-icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.device-detail-modal-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}

.device-detail-entry {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}

.device-detail-entry:hover {
  border-color: rgba(47, 121, 255, 0.34);
  background: rgba(47, 121, 255, 0.06);
}

.device-detail-entry .device-name-cell,
.device-detail-entry .upgrade-log-device-row {
  margin: 0;
}

.device-detail-entry-action {
  display: inline-flex;
  margin-top: 5px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

.merchant-edit-modal {
  width: min(520px, calc(100vw - 40px));
  padding: 24px;
  border-radius: 12px;
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.modal-head h3 {
  margin: 0;
  font-size: 18px;
}

.close-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line-color);
  background: var(--panel-bg);
}

.merchant-edit-form {
  grid-template-columns: 1fr;
  gap: 18px;
}

.merchant-edit-form label {
  font-size: 13px;
  color: var(--text-sub);
}

.merchant-edit-form .input-field[disabled] {
  color: var(--text-sub);
  background: rgba(148, 163, 184, 0.08);
  cursor: not-allowed;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.empty-box {
  padding: 44px 0;
  color: var(--text-sub);
  text-align: center;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
}

.status-tag.success {
  color: #0e8d64;
  background: rgba(22, 180, 127, 0.14);
}

.status-tag.warn {
  color: #c97710;
  background: rgba(255, 159, 67, 0.16);
}

.status-tag.danger {
  color: #d9485f;
  background: rgba(239, 83, 80, 0.14);
}

.status-tag.accent {
  color: #6f55e1;
  background: rgba(122, 92, 255, 0.14);
}

.alert-page-input {
  width: 88px;
  height: 40px;
}

.pager-jump-btn {
  min-width: 72px;
}

.home-page {
  min-height: 100%;
  padding: 28px;
  background:
    linear-gradient(135deg, rgba(47, 140, 255, 0.06), transparent 38%),
    var(--bg-color);
}

.home-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 176px;
  padding: 30px 34px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(118deg, #102e50 0%, #145e99 58%, #138a9a 100%);
  border-radius: 8px;
}

.home-hero::before,
.home-hero::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.16);
  transform: rotate(-24deg);
}

.home-hero::before {
  right: 8%;
  bottom: -128px;
  width: 380px;
  height: 260px;
}

.home-hero::after {
  right: -40px;
  top: -110px;
  width: 270px;
  height: 270px;
}

.home-hero-copy,
.home-hero-status {
  position: relative;
  z-index: 1;
}

.home-kicker,
.home-section-tag {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
}

.home-kicker {
  color: rgba(207, 240, 255, 0.86);
}

.home-hero h1 {
  margin: 10px 0 8px;
  font-size: 30px;
  line-height: 1.2;
}

.home-hero p {
  max-width: 560px;
  margin: 0;
  color: rgba(234, 248, 255, 0.82);
  font-size: 14px;
}

.home-hero-status {
  display: grid;
  gap: 6px;
  min-width: 128px;
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.home-hero-status span {
  color: rgba(234, 248, 255, 0.72);
  font-size: 12px;
}

.home-hero-status strong {
  font-size: 16px;
}

.home-map-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 120px;
  height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.home-map-button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.home-map-button-icon {
  font-size: 20px;
  line-height: 1;
}

.home-map-mask {
  position: fixed;
  z-index: 7000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 14, 25, 0.6);
}

.home-map-mask.is-maximized {
  padding: 0;
}

.home-map-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1240px, calc(100vw - 48px));
  height: min(760px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid #294362;
  border-radius: 10px;
  background: #101c2b;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.home-map-modal.is-maximized {
  width: 100vw;
  height: 100vh;
  border: 0;
  border-radius: 0;
}

.home-map-modal-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  min-height: 62px;
  padding: 10px 16px;
  border-bottom: 1px solid #294362;
  background: #132235;
}

.home-map-modal-head h2 {
  margin: 2px 0 0;
  color: #f2f7ff;
  font-size: 17px;
}

.home-map-clock {
  color: #dbeaff;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.home-map-eyebrow,
.home-map-selected-label {
  color: #6eb5ff;
  font-size: 10px;
  font-weight: 600;
}

.home-map-modal-actions {
  display: inline-flex;
  gap: 8px;
  justify-self: end;
}

.home-map-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #395575;
  border-radius: 5px;
  background: #192c43;
  color: #d9ebff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.home-map-icon-btn:hover {
  border-color: #58a8ff;
  color: #fff;
}

.home-map-modal-body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 320px;
  min-height: 0;
}

.home-map-stage {
  position: relative;
  min-height: 0;
  background: #dce7ef;
}

.home-tencent-map {
  position: absolute;
  inset: 0;
}

.home-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dbeaff;
  background: #132235;
  font-size: 13px;
}

.home-map-hud {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(27, 94, 160, 0.28);
  border-radius: 5px;
  background: rgba(13, 31, 51, 0.88);
  color: #dcecff;
  font-size: 12px;
}

.home-map-hud strong { color: #73c0ff; }

.home-map-hud-dot,
.home-map-device-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38d996;
  box-shadow: 0 0 0 3px rgba(56, 217, 150, 0.16);
}

.home-map-aside {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  border-left: 1px solid #294362;
  background: #132235;
}

.home-map-left {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  border-right: 1px solid #294362;
  background: #132235;
}

.home-map-side-panel {
  min-width: 0;
  border-bottom: 1px solid #294362;
}

.home-map-summary-head {
  min-height: 36px;
  padding: 10px 14px 7px;
  color: #9ab4d0;
  font-size: 11px;
  font-weight: 600;
}

.home-map-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 0 12px 12px;
}

.home-map-summary-item {
  position: relative;
  min-width: 0;
  padding: 8px 7px 7px;
  border: 1px solid #294362;
  border-radius: 4px;
  background: #172943;
}

.home-map-summary-item::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  margin-bottom: 5px;
  border-radius: 50%;
  background: var(--home-map-stat-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--home-map-stat-color) 16%, transparent);
}

.home-map-summary-item span,
.home-map-summary-item strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-map-summary-item span {
  color: #829bb8;
  font-size: 10px;
}

.home-map-summary-item strong {
  margin-top: 4px;
  color: #eef6ff;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.home-map-summary-item.total { --home-map-stat-color: #73c0ff; }
.home-map-summary-item.activated,
.home-map-summary-item.normal { --home-map-stat-color: #38d996; }
.home-map-summary-item.inactive { --home-map-stat-color: #829bb8; }
.home-map-summary-item.maintenance { --home-map-stat-color: #f9b94e; }
.home-map-summary-item.expired { --home-map-stat-color: #ff7373; }

.home-map-device-chart {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 0 14px 14px;
}

.home-map-device-donut {
  position: relative;
  display: grid;
  place-content: center;
  width: 104px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#38d996 0deg var(--home-map-active-end), #829bb8 var(--home-map-active-end) var(--home-map-inactive-end), #315b84 var(--home-map-inactive-end) 360deg);
  text-align: center;
}

.home-map-device-donut::after {
  content: "";
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  background: #132235;
}

.home-map-device-donut strong,
.home-map-device-donut span {
  position: relative;
  z-index: 1;
}

.home-map-device-donut strong {
  color: #eef6ff;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.home-map-device-donut span {
  margin-top: 2px;
  color: #829bb8;
  font-size: 10px;
}

.home-map-device-legend {
  display: grid;
  gap: 8px;
}

.home-map-device-legend div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(57, 85, 117, 0.64);
}

.home-map-device-legend div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.home-map-device-legend span {
  overflow: hidden;
  color: #9ab4d0;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-map-device-legend span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--home-map-legend-color);
}

.home-map-device-legend strong {
  flex: 0 0 auto;
  color: #eef6ff;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.home-map-device-legend .activated { --home-map-legend-color: #38d996; }
.home-map-device-legend .inactive { --home-map-legend-color: #829bb8; }

.home-map-business-summary .home-map-summary-grid {
  grid-template-columns: 1fr;
  gap: 5px;
}

.home-map-business-summary .home-map-summary-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
}

.home-map-business-summary .home-map-summary-item::before {
  width: 6px;
  height: 6px;
  margin: 0;
}

.home-map-business-summary .home-map-summary-item strong {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  font-size: 15px;
}

.home-map-business-chart {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  height: 146px;
  padding: 0 14px 13px;
}

.home-map-business-bar {
  display: grid;
  grid-template-rows: auto 82px auto;
  justify-items: center;
  min-width: 0;
  gap: 5px;
}

.home-map-business-bar strong {
  color: #eef6ff;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.home-map-business-bar-track {
  display: flex;
  align-items: end;
  width: 100%;
  height: 82px;
  padding: 3px;
  border: 1px solid #294362;
  border-radius: 3px 3px 0 0;
  background: #172943;
}

.home-map-business-bar-track i {
  display: block;
  width: 100%;
  min-height: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--home-map-business-color);
  box-shadow: 0 -3px 10px color-mix(in srgb, var(--home-map-business-color) 36%, transparent);
}

.home-map-business-bar span {
  overflow: hidden;
  max-width: 100%;
  color: #9ab4d0;
  font-size: 10px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-map-business-bar.maintenance { --home-map-business-color: #f9b94e; }
.home-map-business-bar.normal { --home-map-business-color: #38d996; }
.home-map-business-bar.expired { --home-map-business-color: #ff7373; }

.home-map-alert-section {
  display: grid;
  min-height: 0;
}

.home-map-alert-section {
  grid-template-rows: auto minmax(0, 1fr);
}

.home-map-alert-panel {
  overflow: hidden;
}

.home-map-aside-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(57, 85, 117, 0.7);
  color: #9ab4d0;
  font-size: 11px;
  font-weight: 600;
}

.home-map-aside-head strong {
  min-width: 48px;
  color: #73c0ff;
  font-size: 10px;
  text-align: right;
  white-space: nowrap;
}

.home-map-aside-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-map-selected {
  display: grid;
  gap: 5px;
  padding: 15px;
  border-bottom: 1px solid #294362;
}

.home-map-selected strong {
  color: #f2f7ff;
  font-size: 15px;
}

.home-map-selected > span:not(.home-map-selected-label) {
  color: #93aeca;
  font-size: 11px;
}

.home-map-selected div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.home-map-selected b {
  color: #93aeca;
  font-size: 11px;
  font-weight: 500;
}

.home-map-selected em,
.home-map-device-soc {
  font-style: normal;
  font-weight: 700;
}

.home-map-selected em.high,
.home-map-device-soc.high { color: #38d996; }
.home-map-selected em.medium,
.home-map-device-soc.medium { color: #f9b94e; }
.home-map-selected em.low,
.home-map-device-soc.low { color: #ff7373; }
.home-map-device-status.medium { background: #f9b94e; box-shadow: 0 0 0 3px rgba(249, 185, 78, 0.16); }
.home-map-device-status.low { background: #ff7373; box-shadow: 0 0 0 3px rgba(255, 115, 115, 0.16); }
.home-map-device-status.offline { background: #71839a; box-shadow: 0 0 0 3px rgba(113, 131, 154, 0.16); }

.home-map-list {
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
}

.home-map-device {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #dcecff;
  text-align: left;
  cursor: pointer;
}

.home-map-device:hover,
.home-map-device.active {
  border-color: #315b84;
  background: #192c43;
}

.home-map-device-info {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.home-map-device-info strong {
  overflow: hidden;
  color: #f2f7ff;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-map-device-info small {
  color: #829bb8;
  font-size: 10px;
}

.home-map-device-soc { font-size: 12px; }

.home-map-device-voltage {
  color: #9ab4d0;
  font-size: 11px;
  white-space: nowrap;
}

.home-map-marker-tooltip {
  display: grid;
  min-width: 238px;
  gap: 5px;
  padding: 4px 2px;
  color: #34465c;
  font-size: 12px;
  line-height: 1.4;
}

.home-map-marker-tooltip strong {
  color: #172a42;
  font-size: 13px;
}

.home-map-marker-tooltip span {
  color: #58708c;
  font-size: 11px;
}

.home-map-marker-tooltip div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  margin-top: 2px;
}

.home-map-marker-tooltip b {
  color: #6d7f95;
  font-weight: 500;
}

.home-map-marker-tooltip em {
  color: #1f344c;
  font-style: normal;
  font-weight: 600;
}

.home-map-marker-tooltip em.online { color: #159a6e; }
.home-map-marker-tooltip em.offline { color: #73849a; }

.home-map-alert-list {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 0;
  overflow: hidden;
  padding: 8px;
}

.home-map-alert-track {
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: home-map-alert-marquee var(--home-map-alert-scroll-duration) linear infinite;
}

.home-map-alert-list:hover .home-map-alert-track {
  animation-play-state: paused;
}

.home-map-alert-sequence {
  display: grid;
  gap: 6px;
}

.home-map-alert {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid #294362;
  border-left-width: 3px;
  border-radius: 5px;
  background: #172943;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  animation: home-map-alert-enter 280ms ease-out;
}

.home-map-alert:hover,
.home-map-alert:focus-visible {
  border-color: #5c9fd8;
  border-left-color: #73c0ff;
  outline: 0;
  background: #1d3552;
  box-shadow: inset 0 0 0 1px rgba(115, 192, 255, 0.18), 0 8px 16px rgba(4, 12, 22, 0.22);
}

.home-map-alert-protection { border-left-color: #f9b94e; }
.home-map-alert-warning { border-left-color: #ff8b5d; }
.home-map-alert-fault { border-left-color: #ff7373; }

.home-map-alert-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.home-map-alert-device {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.home-map-alert-device strong {
  overflow: hidden;
  color: #eef6ff;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-map-alert-device span,
.home-map-alert time {
  color: #829bb8;
  font-size: 10px;
}

.home-map-alert-type {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(115, 192, 255, 0.12);
  color: #9dd1ff;
  font-size: 10px;
  white-space: nowrap;
}

.home-map-alert p {
  overflow: hidden;
  margin: 6px 0 4px;
  color: #c2d3e5;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-map-alert time {
  display: block;
}

.home-map-alert-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 78px;
  color: #829bb8;
  font-size: 12px;
}

@keyframes home-map-alert-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes home-map-alert-marquee {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-50% - 3px)); }
}

@media (max-width: 760px) {
  .home-map-mask { padding: 0; }
  .home-map-modal { width: 100vw; height: 100vh; border: 0; border-radius: 0; }
  .home-map-modal-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(360px, 1fr) 360px; overflow-y: auto; }
  .home-map-left { border-right: 0; border-bottom: 1px solid #294362; }
  .home-map-aside { border-top: 1px solid #294362; border-left: 0; }
  .home-map-clock { font-size: 11px; }
}

.home-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.home-metric {
  min-height: 146px;
  padding: 20px;
  border: 1px solid var(--line-color);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: var(--shadow-main);
}

.home-metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-sub);
  font-size: 13px;
}

.home-metric-top i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--metric-color);
  box-shadow: 0 0 0 5px var(--metric-ring);
}

.home-metric strong {
  display: block;
  margin-top: 18px;
  color: var(--text-main);
  font-size: 32px;
  line-height: 1;
}

.home-metric small {
  display: block;
  margin-top: 14px;
  color: var(--text-sub);
  font-size: 12px;
}

.home-metric-device { --metric-color: #2f8cff; --metric-ring: rgba(47, 140, 255, 0.14); }
.home-metric-active { --metric-color: #16b47f; --metric-ring: rgba(22, 180, 127, 0.14); }
.home-metric-inactive { --metric-color: #6c788c; --metric-ring: rgba(108, 120, 140, 0.14); }
.home-metric-maintenance { --metric-color: #ff9f43; --metric-ring: rgba(255, 159, 67, 0.16); }
.home-metric-warranty { --metric-color: #27a7c7; --metric-ring: rgba(39, 167, 199, 0.14); }
.home-metric-expired { --metric-color: #ef5b5b; --metric-ring: rgba(239, 91, 91, 0.14); }

.home-overview {
  margin-top: 18px;
  padding: 24px;
  border: 1px solid var(--line-color);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: var(--shadow-main);
}

.home-overview-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.home-section-tag {
  color: #2f8cff;
}

.home-overview h2 {
  margin: 6px 0 0;
  font-size: 18px;
}

.home-overview-date {
  color: var(--text-sub);
  font-size: 12px;
}

.home-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.home-overview-item {
  min-width: 0;
  padding-right: 16px;
  border-right: 1px solid var(--line-color);
}

.home-overview-item:last-child {
  padding-right: 0;
  border-right: 0;
}

.home-overview-item span,
.home-overview-item strong {
  display: block;
}

.home-overview-item span {
  overflow: hidden;
  color: var(--text-sub);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-overview-item strong {
  margin: 12px 0 16px;
  font-size: 26px;
}

.home-line {
  display: block;
  width: 100%;
  height: 4px;
  background: var(--line-accent);
}

.home-line-blue { --line-accent: #2f8cff; }
.home-line-green { --line-accent: #16b47f; }
.home-line-red { --line-accent: #ef5b5b; }
.home-line-amber { --line-accent: #ff9f43; }

@media (max-width: 900px) {
  .home-page { padding: 18px; }
  .home-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-overview-item:nth-child(2) { border-right: 0; padding-right: 0; }
  .home-overview-item:nth-child(-n + 2) { padding-bottom: 16px; border-bottom: 1px solid var(--line-color); }
  .home-overview-item:nth-child(n + 3) { padding-top: 16px; }
}

@media (max-width: 620px) {
  .home-hero { align-items: flex-start; flex-direction: column; min-height: 200px; padding: 24px; }
  .home-hero-status { padding-left: 0; border-left: 0; }
  .home-metric-grid { grid-template-columns: 1fr; }
  .home-overview-grid { grid-template-columns: 1fr; gap: 0; }
  .home-overview-item,
  .home-overview-item:nth-child(2) { padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--line-color); }
  .home-overview-item:first-child { padding-top: 0; }
  .home-overview-item:last-child { padding-bottom: 0; border-bottom: 0; }
}

.status-tag.danger {
  color: #cf4e4e;
  background: rgba(239, 91, 91, 0.16);
}

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

.device-filter-panel {
  display: grid;
  gap: 12px;
}

.device-filter-grid-fixed {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  justify-content: stretch;
  align-items: center;
}

.device-filter-control {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  font-size: 14px;
}

.device-filter-actions-fixed {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.list-filter-panel {
  display: grid;
  gap: 12px;
}

.list-filter-grid {
  display: grid;
  gap: 12px;
  align-items: center;
}

.list-filter-grid-account {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.list-filter-grid-merchant {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.list-filter-control {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  font-size: 14px;
}

.list-filter-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.business-filter-panel {
  gap: 12px;
  margin-bottom: 16px;
}

.business-filter-grid {
  grid-template-columns: repeat(4, minmax(140px, 1fr)) auto;
  align-items: center;
  flex-wrap: nowrap;
}

.scheme-log-filter-grid {
  grid-template-columns: repeat(4, minmax(160px, 1fr)) auto;
}

.device-instruct-filter-grid {
  grid-template-columns: minmax(160px, 1fr) minmax(200px, 1.4fr) auto;
}

.devd-search-select {
  position: relative;
  min-width: 0;
}

.devd-search-select-input {
  width: 100%;
}

.devd-search-select-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow: auto;
  padding: 4px;
  border: 1px solid var(--line-color);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: 0 12px 28px rgba(60, 92, 144, 0.18);
  display: none;
}

.devd-search-select-list.open {
  display: block;
}

.devd-search-select-option {
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text-main);
  font-size: 13px;
  cursor: pointer;
}

.devd-search-select-option:hover {
  background: rgba(47, 140, 255, 0.08);
}

.business-filter-actions {
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.business-filter-actions .primary-btn,
.business-filter-actions .secondary-btn {
  min-width: 88px;
}

.operation-filter-panel {
  overflow-x: auto;
}

.operation-filter-panel .business-filter-grid {
  grid-template-columns: repeat(4, minmax(140px, 1fr)) max-content;
}

.operation-filter-panel .business-filter-actions {
  flex-direction: row;
  flex-wrap: nowrap;
}

.operation-filter-panel .business-filter-actions > button {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
}

.ota-log-filter-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ota-log-filter-grid .list-filter-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.upgrade-log-device-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.upgrade-log-device-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-height: 20px;
  line-height: 20px;
  white-space: nowrap;
}

.upgrade-log-device-row .device-name-label {
  flex: 0 0 auto;
}

.upgrade-log-table {
  min-width: 1120px;
  table-layout: fixed;
}

.upgrade-log-table th:nth-child(1),
.upgrade-log-table td:nth-child(1) {
  width: 240px;
}

.upgrade-log-table th:nth-child(2),
.upgrade-log-table td:nth-child(2) {
  width: 280px;
}

.upgrade-log-table th:nth-child(3),
.upgrade-log-table td:nth-child(3) {
  width: 220px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 20px;
}

.upgrade-log-table th:nth-child(4),
.upgrade-log-table td:nth-child(4) {
  width: 88px;
  white-space: nowrap;
}

.upgrade-log-firmware-cell {
  max-width: 220px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 20px;
}

.upgrade-log-table th:last-child,
.upgrade-log-table td:last-child,
.upgrade-log-action-cell {
  width: 100px;
  white-space: nowrap;
}

.upgrade-log-action-cell .secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: 56px;
  white-space: nowrap;
}

.business-table-wrap {
  overflow-x: auto;
}

.business-data-table {
  min-width: 1420px;
  table-layout: auto;
}

.business-data-table th,
.business-data-table td {
  vertical-align: middle;
  white-space: nowrap;
  word-break: keep-all;
}

.business-data-table th:nth-child(1),
.business-data-table td:nth-child(1) {
  width: 130px;
}

.business-data-table th:nth-child(2),
.business-data-table td:nth-child(2) {
  width: 130px;
}

.business-data-table th:nth-child(3),
.business-data-table td:nth-child(3) {
  width: 120px;
}

.business-data-table th:nth-child(4),
.business-data-table td:nth-child(4) {
  width: 130px;
}

.business-data-table th:nth-child(5),
.business-data-table td:nth-child(5) {
  width: 180px;
}

.business-data-table th:nth-child(6),
.business-data-table td:nth-child(6) {
  width: 130px;
}

.business-data-table th:nth-child(7),
.business-data-table td:nth-child(7) {
  width: 100px;
}

.business-data-table th:nth-child(8),
.business-data-table td:nth-child(8),
.business-data-table th:nth-child(9),
.business-data-table td:nth-child(9) {
  width: 150px;
}

.business-data-table th:nth-child(10),
.business-data-table td:nth-child(10) {
  width: 190px;
}

.business-data-table th:nth-child(11),
.business-data-table td:nth-child(11) {
  width: 120px;
}

.business-data-table .business-action-cell {
  overflow: visible;
}

.business-stop-btn {
  min-width: 92px;
  white-space: nowrap;
}

.business-period {
  display: grid;
  gap: 5px;
  min-width: 154px;
  color: var(--text-sub);
  font-size: 12px;
  line-height: 1.5;
}

.business-order-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: max-content;
  padding: 3px 0;
  border-bottom: 1px dashed var(--line-color);
  color: var(--text-sub);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}

.business-order-row:last-child {
  border-bottom: 0;
}

.business-order-row .status-tag {
  min-width: auto;
  height: 18px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.merchant-filter-panel {
  gap: 0;
}

.merchant-filter-grid {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
  align-items: center;
}

.merchant-filter-actions {
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.merchant-filter-actions .primary-btn,
.merchant-filter-actions .secondary-btn {
  min-width: 88px;
}

.account-filter-panel {
  gap: 0;
}

.account-filter-grid {
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr) auto;
  align-items: center;
}

.account-update-info {
  display: grid;
  gap: 2px;
  line-height: 1.5;
}

.account-filter-actions {
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.account-filter-actions .primary-btn,
.account-filter-actions .secondary-btn {
  min-width: 88px;
}

.device-filter-panel-inline {
  gap: 0;
}

.device-filter-grid-inline {
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) auto;
}

.alert-filter-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
}

.alert-filter-row > .input-field {
  min-width: 160px;
}

.upgrade-log-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
}

.upgrade-log-filter-row > .select-field,
.upgrade-log-filter-row > .input-field {
  flex: 1 1 0;
  min-width: 0;
}

.upgrade-log-filter-row > .select-field {
  min-width: 140px;
}

.upgrade-log-filter-row .primary-btn,
.upgrade-log-filter-row .secondary-btn {
  flex: 0 0 auto;
  min-width: 88px;
}

.detail-upgrade-log-table-space {
  margin-top: 16px;
}

.detail-alert-table-space {
  margin-top: 16px;
}

.event-filter-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
}

.event-filter-row > .select-field {
  min-width: 160px;
}

.detail-event-table-space {
  margin-top: 16px;
}

.device-filter-actions-inline {
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.device-filter-actions-inline .primary-btn,
.device-filter-actions-inline .secondary-btn {
  min-width: 88px;
}

.device-filter-actions-inline .firmware-import-btn {
  min-width: 112px;
}

.firmware-excel-input {
  display: none;
}

.firmware-upgrade-page .device-filter-actions-inline {
  grid-column: 1 / -1;
  flex-wrap: wrap;
}

.firmware-import-error {
  margin-top: 16px;
  color: var(--danger-color);
  overflow-wrap: anywhere;
  line-height: 1.6;
}

.device-name-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.device-name-text {
  min-width: 0;
}

.device-qr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line-color);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--text-sub);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.device-qr-btn:hover {
  color: #2f8cff;
  border-color: rgba(47, 140, 255, 0.35);
  background: rgba(47, 140, 255, 0.06);
}

.device-qr-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.device-qr-modal {
  width: min(360px, calc(100vw - 32px));
  padding: 20px;
  border-radius: 12px;
}

.device-qr-body {
  display: grid;
  gap: 14px;
}

.device-qr-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 1px solid var(--line-color);
  border-radius: 12px;
  background: #fff;
}

.device-qr-image {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
}

.device-qr-meta {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
}

.device-qr-meta span {
  color: var(--text-sub);
  font-size: 13px;
}

.device-qr-meta strong {
  font-size: 16px;
  font-weight: 600;
  word-break: break-all;
}

.role-manage-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.role-sidebar-card {
  min-height: calc(100vh - 120px);
}

.role-sidebar-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.role-sidebar-head,
.role-section-head,
.role-permission-group-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.role-sidebar-head h3,
.role-section-head h4 {
  margin: 0 0 6px;
}

.role-list-wrap {
  display: grid;
  gap: 2px;
  max-height: calc(100vh - 240px);
  overflow: auto;
  align-content: start;
}

.role-list-item {
  position: relative;
  display: grid;
  grid-template-rows: 20px 19px;
  gap: 1px;
  width: 100%;
  height: 52px;
  padding: 5px 14px;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.72);
  text-align: left;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.role-list-item + .role-list-item {
  margin-top: 0;
}

.role-list-item:hover {
  border-color: rgba(47, 140, 255, 0.24);
  background: rgba(255, 255, 255, 0.94);
}

.role-list-item.active {
  border-color: #2f8cff;
  background: rgba(47, 140, 255, 0.05);
  box-shadow: 0 8px 18px rgba(47, 140, 255, 0.10);
}

.role-list-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  align-items: center;
  column-gap: 8px;
  height: 20px;
  min-width: 0;
}

.role-list-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.role-list-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 20px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-list-badge {
  height: 22px;
  padding: 0 8px;
  font-size: 12px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.role-list-desc,
.role-meta-item span {
  color: var(--text-sub);
  font-size: 11px;
}

.role-list-desc {
  line-height: 19px;
  height: 19px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-list-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  width: 48px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.role-list-item:hover .role-list-actions,
.role-list-item.active .role-list-actions {
  opacity: 1;
  pointer-events: auto;
}

.role-list-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #516072;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.role-list-action:hover {
  border-color: rgba(47, 140, 255, 0.24);
  background: rgba(47, 140, 255, 0.10);
  color: #2f8cff;
  box-shadow: 0 8px 18px rgba(47, 140, 255, 0.14);
}

.role-content-wrap {
  min-width: 0;
}

.role-detail-card {
  display: grid;
  gap: 12px;
}

.role-tab-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.role-tab {
  min-width: 132px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line-color);
  border-radius: 10px;
  background: var(--panel-bg);
  color: var(--text-sub);
}

.role-tab.active {
  border-color: #2f8cff;
  color: #2f8cff;
  background: rgba(47, 140, 255, 0.08);
}

.role-tab:disabled,
.role-tab:disabled.active {
  border-color: var(--line-color);
  color: var(--text-sub);
  background: rgba(148, 163, 184, 0.12);
  opacity: 0.6;
  cursor: not-allowed;
}

.role-tab-panel,
.role-permission-groups,
.role-ignore-groups {
  display: grid;
  gap: 12px;
}

.role-section-head-compact {
  justify-content: flex-end;
}

.role-permission-group {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line-color);
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.06);
}

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

.role-check-grid-mobile {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.role-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid var(--line-color);
  border-radius: 10px;
  background: var(--panel-bg);
  color: var(--text-main);
}

.role-check-item-inline {
  min-height: 36px;
  padding: 8px 12px;
}

.role-check-item input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.role-textarea {
  width: 100%;
  min-height: 108px;
  padding: 12px 14px;
  border: 1px solid var(--line-color);
  border-radius: 8px;
  color: var(--text-main);
  background: var(--panel-bg);
  resize: vertical;
}

.role-switch-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.role-switch-field label:first-child {
  margin: 0;
}

.role-edit-modal {
  width: min(560px, calc(100vw - 40px));
}

.device-list-table-wrap {
  overflow-x: auto;
}

.device-list-table {
  min-width: 1100px;
}

.device-list-table .ghost-btn {
  min-width: 68px;
  white-space: nowrap;
}

.device-col-status,
.device-col-type,
.device-col-action {
  white-space: nowrap;
}

.device-col-sn,
.device-col-time {
  white-space: nowrap;
}

.device-col-time {
  min-width: 168px;
}

.device-col-sn-combined {
  white-space: nowrap;
}

.device-col-sn-combined .device-name-label {
  color: var(--text-sub);
  margin-right: 4px;
}

.device-col-sn-combined .device-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.device-col-sn-combined .device-name-cell:last-child {
  margin-bottom: 0;
}

.device-col-version .device-version-row {
  white-space: nowrap;
  line-height: 1.7;
}

.device-col-version .device-version-empty {
  color: var(--text-sub);
}

.device-detail-page {
  gap: 16px;
}

.device-detail-hero {
  background: linear-gradient(180deg, rgba(47, 140, 255, 0.08), rgba(47, 140, 255, 0.02));
}

.device-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.device-detail-title {
  margin: 0 0 6px;
  font-size: 24px;
}

.device-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.device-overview-item {
  display: grid;
  gap: 10px;
  min-height: 104px;
  padding: 16px;
  border: 1px solid rgba(47, 140, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
}

.device-overview-item strong {
  font-size: 18px;
  line-height: 1.4;
  word-break: break-all;
}

.device-detail-sections .panel-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.device-legacy-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100vh;
  padding: 12px 10px 12px;
  color: #2f3b52;
  overflow: hidden;
  box-sizing: border-box;
}

.device-legacy-toolbar {
  display: grid;
  gap: 12px;
  flex: none;
}

.device-legacy-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid #d7e3f3;
  background: #fff;
  overflow: hidden;
}

.devd-tab-bar {
  flex: none;
}

.devd-panel-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 14px 18px;
}

.devd-info-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--line-color);
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.06);
}

.devd-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.devd-info-label {
  color: var(--text-sub);
  white-space: nowrap;
}

.devd-info-value {
  color: var(--text-main);
  font-weight: 600;
  word-break: break-all;
}

.devd-refresh-btn {
  margin-left: auto;
}

.devd-alert-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.devd-alert-card-title {
  color: var(--text-main);
  font-size: 15px;
  font-weight: 600;
}

.devd-alert-count {
  min-width: 34px;
  padding: 2px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.devd-alert-count.fault {
  background: #c0392b;
}

.devd-alert-count.protection {
  background: #c0392b;
}

.devd-alert-count.warning {
  background: #e08a00;
}

.devd-alert-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.devd-alert-chip {
  display: block;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 13px;
  word-break: break-all;
}

.devd-alert-chip.fault {
  color: #c0392b;
  background: rgba(192, 57, 43, 0.12);
}

.devd-alert-chip.protection {
  color: #c0392b;
  background: rgba(192, 57, 43, 0.12);
}

.devd-alert-chip.warning {
  color: #b7791f;
  background: rgba(224, 138, 0, 0.14);
}

.devd-alert-none {
  color: var(--success-color);
  font-size: 13px;
}

.device-legacy-toolbar {
  display: grid;
  gap: 12px;
}

.device-top-meta {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.device-top-meta-item {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid #dce6f4;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #f6faff);
  box-shadow: 0 10px 24px rgba(60, 92, 144, 0.08);
  overflow: hidden;
}

.device-top-meta-item::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #2f8cff, #18c0ff);
}

.device-top-meta-item:nth-child(2)::before {
  background: linear-gradient(90deg, #5b8cff, #7a5cff);
}

.device-top-meta-item:nth-child(3)::before {
  background: linear-gradient(90deg, #18b875, #39d7a1);
}

.device-top-meta-item:nth-child(4)::before {
  background: linear-gradient(90deg, #ff9f43, #ffca62);
}

.device-top-meta-item:nth-child(5)::before {
  background: linear-gradient(90deg, #5b8cff, #a577ff);
}

.device-top-meta-item:nth-child(6)::before {
  background: linear-gradient(90deg, #16b47f, #18c0ff);
}

.device-top-meta-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #4f6f98;
  font-size: 12px;
  background: rgba(47, 140, 255, 0.08);
}

.device-top-meta-value {
  color: #213654;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  word-break: break-all;
}

.device-legacy-tabs-mini,
.device-legacy-actions,
.legacy-header-tabs,
.device-state-tabs,
.temperature-head,
.legacy-card-head,
.chart-legend,
.right-meta,
.battery-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.mini-tab,
.legacy-head-tab,
.state-tab {
  height: 32px;
  padding: 0 16px;
  border: 1px solid #d7e3f3;
  background: #fff;
  color: #5c6f8f;
}

.mini-tab.active,
.legacy-head-tab.active,
.state-tab.active {
  color: #2f8cff;
  background: #f2f7ff;
  border-color: #b9d6ff;
}

.mini-close {
  margin-left: 6px;
}

.legacy-back-btn,
.legacy-read-btn,
.legacy-select {
  height: 34px;
}

.legacy-select {
  width: 180px;
}

.actions-right-only {
  justify-content: flex-end;
  order: 0;
}

.device-legacy-panel {
  border: 1px solid #d7e3f3;
  background: #fff;
}

.legacy-header-tabs {
  padding: 0 16px;
  border-bottom: 1px solid #d7e3f3;
  background: #f7f9fc;
}

.legacy-head-tab {
  border-top: 0;
  border-bottom: 0;
  white-space: nowrap;
}

.legacy-info-board {
  padding: 16px;
}

.legacy-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  padding: 18px;
  border: 1px solid #e4ebf5;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(60, 92, 144, 0.06);
}

.legacy-info-item {
  display: grid;
  gap: 6px;
  min-width: 0;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid #e9eff8;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0, #f9fbff 100%);
  font-size: 14px;
}

.legacy-label {
  color: #23324c;
  font-size: 13px;
}

.legacy-value {
  min-width: 0;
  color: #576b8a;
  word-break: break-all;
  line-height: 1.55;
}

.link-text {
  color: #2f8cff;
}

.success-text {
  color: #69b31a;
}

.danger-text {
  color: #ff5b5b;
}

.warning-text {
  color: #ff9800;
}

.muted-text {
  color: #7d8ea7;
}

.device-state-tabs {
  padding: 0 16px;
  border: 1px solid #d7e3f3;
  border-bottom: 0;
  background: #f7f9fc;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.state-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: #23324c;
  white-space: nowrap;
}

.state-tab.active {
  background: #fff;
  box-shadow: inset 0 2px 0 #2f8cff;
}

.state-tab-alert.has-alert {
  color: #ef5350;
}

.state-tab-alert-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ef5350;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.legacy-top-grid,
.legacy-middle-grid,
.legacy-bottom-grid {
  display: grid;
  gap: 16px;
}

.legacy-battery-layout > *,
.legacy-battery-main > *,
.legacy-top-grid > *,
.legacy-middle-grid > *,
.legacy-bottom-grid > *,
.history-only > * {
  min-width: 0;
}

.legacy-battery-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(320px, 0.95fr);
  gap: 16px;
  align-items: stretch;
}

.legacy-battery-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.legacy-top-grid {
  grid-template-columns: 1.05fr 1.1fr;
}

.legacy-top-grid.single-card {
  grid-template-columns: minmax(0, 1fr);
}

.legacy-middle-grid,
.legacy-bottom-grid {
  grid-template-columns: 1.55fr 0.95fr;
}

.history-chart-only {
  grid-template-columns: minmax(0, 1fr);
}

.history-chart-only .chart-card {
  width: 100%;
}

.history-chart-span {
  grid-column: 1 / -1;
}

.legacy-card {
  border: 1px solid #e4ebf5;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(60, 92, 144, 0.06);
}

.battery-card,
.temperature-card,
.map-placeholder-card,
.summary-card,
.chart-card,
.cell-monitor-card {
  padding: 16px 18px;
}

.battery-card,
.temperature-card {
  position: relative;
  overflow: hidden;
  border-color: #dbe6f6;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(43, 86, 150, 0.08);
}

.battery-card::before,
.temperature-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 68px;
  pointer-events: none;
}

.battery-card::before {
  background: linear-gradient(135deg, rgba(47, 140, 255, 0.1), rgba(86, 227, 178, 0.04));
}

.temperature-card::before {
  background: linear-gradient(135deg, rgba(255, 163, 71, 0.1), rgba(255, 212, 58, 0.04));
}

.device-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.device-card-title {
  color: #1f3658;
  font-size: 16px;
  font-weight: 600;
}

.device-card-subtitle {
  margin-top: 4px;
  color: #6a7e9f;
  font-size: 12px;
}

.device-card-badge {
  min-width: 54px;
  padding: 6px 10px;
  border: 1px solid rgba(47, 140, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #2f8cff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0;
}

.device-card-badge.warm {
  border-color: rgba(255, 163, 71, 0.22);
  color: #f08b22;
}

.battery-main-grid {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

.battery-metrics,
.mos-metrics,
.temp-meta-grid,
.summary-grid {
  display: grid;
  gap: 10px;
}

.mos-metrics,
.temperature-card .temp-meta-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.metric-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #e6edf8;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.88);
  font-size: 14px;
}

.metric-line span {
  color: #607494;
}

.metric-line strong,
.summary-value {
  font-weight: 500;
  color: #253a59;
}

.metric-line.right strong {
  min-width: 64px;
  text-align: left;
}

.soc-ring {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: conic-gradient(from -90deg, #4f74ff 0 var(--soc-progress, 0%), rgba(118, 140, 173, 0.18) var(--soc-progress, 0%) 100%);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.18), 0 10px 22px rgba(47, 140, 255, 0.16);
}

.soc-ring-inner {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  overflow: hidden;
  background: #203c6b;
  color: #fff;
  text-align: center;
}

.soc-ring-inner strong {
  font-size: 18px;
}

.soc-ring-inner span {
  margin-top: -6px;
  font-size: 12px;
}

.temp-title,
.legacy-card-head .left {
  color: #27539f;
  font-size: 15px;
}

.temp-summary,
.right-meta,
.battery-legend {
  color: #5a6e8f;
  font-size: 13px;
}

.temperature-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid #f6dfc8;
  border-radius: 6px;
  background: rgba(255, 252, 247, 0.92);
}

.thermo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 4px 0 12px;
  border-bottom: 1px solid #e7edf6;
}

.thermo-item {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.thermo-top {
  font-size: 12px;
}

.thermo-icon {
  font-size: 44px;
  line-height: 1;
}

.thermo-item.green .thermo-icon {
  color: #69df63;
}

.thermo-item.pink .thermo-icon {
  color: #ff55b2;
}

.thermo-item.yellow .thermo-icon {
  color: #ffd43a;
}

.map-placeholder-card {
  position: relative;
  overflow: hidden;
  min-height: 208px;
  background: #faf7ef;
}

.legacy-map-panel {
  position: relative;
  min-width: 0;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #e4ebf5;
  border-radius: 4px;
  background: #faf7ef;
  box-shadow: 0 2px 8px rgba(60, 92, 144, 0.06);
}

.legacy-business-panel {
  display: grid;
  gap: 14px;
  min-height: 100%;
  padding: 18px;
  border: 1px solid #dbe6f6;
  border-radius: 8px;
  background: linear-gradient(180deg, #f9fbff 0, #ffffff 72%);
  box-shadow: 0 10px 24px rgba(43, 86, 150, 0.08);
}

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

.business-card-title {
  color: #1f3658;
  font-size: 16px;
  font-weight: 600;
}

.business-card-subtitle {
  margin-top: 4px;
  color: #6a7e9f;
  font-size: 12px;
}

.device-card-badge.business {
  border-color: rgba(69, 104, 220, 0.18);
  color: #4568dc;
}

.business-info-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.business-info-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #e6edf8;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.96);
}

.business-info-label {
  color: #607494;
  font-size: 13px;
  line-height: 24px;
}

.business-info-value {
  color: #253a59;
  font-size: 14px;
  line-height: 24px;
  word-break: break-word;
}

.tencent-map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.map-placeholder-card.large {
  min-height: 300px;
}

.map-placeholder-grid {
  position: absolute;
  inset: 0;
  background: linear-gradient(28deg, transparent 0 49%, rgba(245, 212, 101, 0.78) 49% 53%, transparent 53% 100%), linear-gradient(120deg, transparent 0 44%, rgba(255, 255, 255, 0.95) 44% 56%, transparent 56% 100%), linear-gradient(35deg, rgba(255, 255, 255, 0.82) 8%, transparent 8% 100%), repeating-linear-gradient(120deg, rgba(210, 205, 192, 0.35) 0 2px, transparent 2px 72px), repeating-linear-gradient(30deg, rgba(210, 205, 192, 0.3) 0 2px, transparent 2px 88px), #f8f3e7;
}

.map-toolbar {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: grid;
}

.map-toolbar button {
  width: 22px;
  height: 22px;
  border: 1px solid #d7dfeb;
  background: #fff;
  cursor: pointer;
}

.map-scale {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 2;
  min-width: 58px;
  padding: 1px 8px;
  border: 1px solid #9ca8bd;
  background: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  text-align: center;
}

.legacy-card-head {
  justify-content: space-between;
  margin-bottom: 12px;
}

.blue-mark {
  color: #2f8cff;
}

.pink-text {
  color: #f05eb0;
}

.yellow-text {
  color: #e4c121;
}

.orange-text {
  color: #f0a028;
}

.battery-scale {
  display: flex;
  justify-content: space-between;
  width: 32px;
  height: 238px;
  padding: 6px 0 0;
  float: left;
  writing-mode: vertical-rl;
  color: #7f90aa;
}

.battery-bar-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  margin-left: 44px;
  align-items: end;
  padding-bottom: 28px;
  row-gap: 42px;
}

.battery-bar {
  position: relative;
  height: 160px;
  border: 2px solid #6fe261;
  border-top-width: 10px;
  background: linear-gradient(180deg, rgba(111, 226, 97, 0.9) 0 72%, #fff 72% 100%);
}

.battery-bar.warn {
  border-color: #f0d340;
  background: linear-gradient(180deg, rgba(240, 211, 64, 0.88) 0 70%, #fff 70% 100%);
}

.battery-bar.accent {
  border-color: #ef58b3;
  background: linear-gradient(180deg, rgba(239, 88, 179, 0.92) 0 70%, #fff 70% 100%);
}

.battery-index,
.battery-bolt,
.battery-value {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.ota-file-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.ota-upload-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px dashed #9db8dc;
  border-radius: 6px;
  color: #607494;
  background: #f8fbff;
}

.ota-upload-box input {
  max-width: 260px;
}

.ota-upload-name {
  margin-top: 8px;
  color: #253a59;
  font-size: 13px;
}

.ota-file-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #e1e9f5;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.ota-file-option:has(input:checked) {
  border-color: #2f8cff;
  background: rgba(47, 140, 255, 0.06);
}

.ota-file-option input {
  flex: 0 0 auto;
}

.ota-file-icon {
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  width: 34px;
  height: 40px;
  border: 1px solid #8ebcff;
  border-radius: 4px;
  color: #2f8cff;
  background: #eef6ff;
  font-size: 20px;
}

.ota-file-info {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.ota-file-info strong,
.ota-file-info small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ota-file-info strong {
  color: #253a59;
  font-size: 13px;
}

.ota-file-info small {
  color: #7f90aa;
  font-size: 12px;
}

.battery-index {
  top: 10px;
  font-weight: 600;
  color: #6a7891;
}

.battery-bolt {
  top: 72px;
  color: #ffb300;
  font-size: 15px;
}

.battery-value {
  bottom: -22px;
  color: #7f90aa;
  width: max-content;
  min-width: 100%;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  transform: translateX(-50%);
  transform-origin: center;
}

.chart-card {
  min-height: 300px;
}

.chart-legend {
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 6px;
  font-size: 14px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(129, 145, 168, 0.24);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.legend-item .legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.legend-item:not(.active) {
  opacity: 0.46;
  background: rgba(148, 163, 184, 0.08);
}

.legend-item.blue {
  color: #4f74ff;
}

.legend-item.orange {
  color: #ff9f43;
}

.legend-item.cyan {
  color: #17b4ff;
}

.history-chart-shell {
  position: relative;
}

.history-chart {
  width: 100%;
  height: 240px;
}

.chart-grid line {
  stroke: #dce5f1;
  stroke-width: 1;
}

.chart-axis {
  stroke: #4b5f7f;
  stroke-width: 1.2;
}

.chart-line {
  fill: none;
  stroke-width: 2.2;
  transition: opacity 0.16s ease;
}

.chart-line.hidden {
  opacity: 0;
}

.chart-hover-zone {
  fill: transparent;
  cursor: crosshair;
}

.chart-hover-zone:hover {
  fill: rgba(47, 140, 255, 0.06);
}

.chart-tooltip {
  position: absolute;
  z-index: 5;
  min-width: 152px;
  padding: 10px 12px;
  border: 1px solid rgba(28, 54, 96, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 28px rgba(30, 56, 100, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.chart-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.chart-tooltip-time {
  margin-bottom: 8px;
  color: #1f3658;
  font-size: 13px;
  font-weight: 700;
}

.chart-tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  line-height: 1.8;
  white-space: nowrap;
}

.chart-tooltip-row.muted {
  opacity: 0.4;
}

.chart-tooltip-row span {
  color: #6a7e9f;
  font-size: 12px;
}

.chart-tooltip-row strong {
  color: #253a59;
  font-size: 12px;
  font-weight: 600;
}

.chart-line.voltage,
.chart-dot.voltage {
  stroke: #4f74ff;
  fill: #4f74ff;
}

.chart-line.current,
.chart-dot.current {
  stroke: #ff9f43;
  fill: #ff9f43;
}

.chart-line.soc,
.chart-dot.soc {
  stroke: #17b4ff;
  fill: #17b4ff;
}

.chart-y-label,
.chart-x-label,
.chart-title {
  fill: #566b8d;
  font-size: 12px;
}

.chart-x-label {
  text-anchor: middle;
}

.chart-y-label {
  text-anchor: end;
}

.analysis-chart-shell {
  position: relative;
  padding: 4px 4px 0;
}

.analysis-chart-legend {
  padding-top: 0;
  margin-bottom: 4px;
}

.analysis-chart {
  display: block;
  width: 100%;
  height: auto;
}

.analysis-chart .chart-dot {
  transition: opacity 0.16s ease;
}

.analysis-chart .chart-dot.hidden {
  opacity: 0;
}

.analysis-field-picker {
  position: relative;
  flex: 1 1 360px;
  min-width: 300px;
}

.analysis-field-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line-color);
  border-radius: 6px;
  background: #fff;
  color: var(--text-main);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.analysis-field-count {
  color: var(--text-sub);
  white-space: nowrap;
}

.analysis-field-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: none;
  padding: 8px;
  border: 1px solid var(--line-color);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(60, 92, 144, 0.18);
}

.analysis-field-menu.open {
  display: block;
}

.analysis-field-search {
  width: 100%;
  height: 32px;
  margin-bottom: 6px;
  font-size: 12px;
}

.analysis-field-options {
  max-height: 220px;
  overflow-y: auto;
}

.analysis-field-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 5px 6px;
  border-radius: 5px;
  color: var(--text-main);
  font-size: 12px;
  cursor: pointer;
}

.analysis-field-option:hover {
  background: rgba(47, 140, 255, 0.08);
}

.analysis-field-option input {
  flex: 0 0 auto;
}

.analysis-field-option em {
  color: var(--text-sub);
  font-style: normal;
}

.analysis-field-empty,
.analysis-selected-empty {
  color: var(--text-sub);
  font-size: 12px;
}

.analysis-selected-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  margin-top: 6px;
}

.analysis-selected-chip {
  display: inline-flex;
  align-items: center;
  max-width: 150px;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(47, 140, 255, 0.2);
  border-radius: 12px;
  background: rgba(47, 140, 255, 0.08);
  color: #246bc5;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-tooltip-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: middle;
}

.summary-card {
  min-height: 300px;
}

.summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 34px;
  padding: 10px 8px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.legacy-tab-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.devd-tab-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 14px 14px;
  border-bottom: 1px solid var(--line-color);
  margin-bottom: 16px;
}

.devd-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-sub);
  font-size: 14px;
  white-space: nowrap;
}

.devd-tab:hover {
  color: var(--text-main);
}

.devd-tab.active {
  color: #2f8cff;
  font-weight: 600;
  background: rgba(47, 140, 255, 0.08);
}

.devd-tab-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--danger-color);
  color: #fff;
  font-size: 10px;
  line-height: 1;
}

.devd-battery-panel {
  gap: 0;
}

.devd-battery-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.98fr);
  gap: 16px;
  align-items: start;
}

.devd-left-col {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}

.devd-right-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.78fr);
  gap: 16px;
  align-items: stretch;
  min-width: 0;
}

.devd-card {
  border: 1px solid var(--line-color);
  border-radius: 10px;
  background: var(--panel-bg);
  padding: 16px;
  min-width: 0;
}

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

.devd-card-title {
  color: var(--text-main);
  font-size: 15px;
  font-weight: 600;
}

.devd-overview-main {
  display: flex;
  align-items: center;
  gap: 20px;
}

.devd-overview-info {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 10px;
}

.devd-overview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.devd-overview-row span {
  color: var(--text-sub);
}

.devd-overview-row strong {
  color: var(--text-main);
  font-size: 14px;
}

.devd-state-charging {
  color: var(--success-color);
}

.devd-state-discharging {
  color: var(--warning-color, #d98c00);
}

.devd-sub-title {
  margin: 16px 0 10px;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
}

.devd-state-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.devd-state-tag {
  padding: 4px 12px;
  border: 1px solid var(--line-color);
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.08);
  color: var(--text-sub);
  font-size: 12px;
}

.devd-state-tag.active {
  border-color: rgba(47, 140, 255, 0.4);
  background: rgba(47, 140, 255, 0.1);
  color: #2f8cff;
}

.devd-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

.devd-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 6px 0;
}

.devd-stat-label {
  color: var(--text-sub);
  font-size: 13px;
  white-space: nowrap;
}

.devd-stat-value {
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}

.devd-status-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-color);
}

.devd-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.08);
}

.devd-status-name {
  color: var(--text-main);
  font-size: 13px;
}

.devd-status-tag {
  font-size: 12px;
  font-weight: 600;
}

.devd-status-tag.normal {
  color: var(--success-color);
}

.devd-status-tag.alert {
  color: var(--danger-color);
}

.devd-analysis-card {
  min-height: 260px;
  display: flex;
  flex-direction: column;
}

.devd-analysis-card .devd-empty {
  flex: 1;
  justify-content: center;
}

.devd-date-range {
  color: var(--text-sub);
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--line-color);
  border-radius: 6px;
}

.devd-card-head-filter {
  align-items: flex-start;
  flex-wrap: wrap;
}

.devd-date-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 34px;
  flex-wrap: nowrap;
}

.devd-date-filter .devd-date-input {
  width: 140px;
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  font-size: 12px;
}

.devd-date-filter .devd-date-sep {
  color: var(--text-sub);
  font-size: 12px;
}

.devd-date-filter .devd-date-btn {
  min-width: 64px;
  height: 34px;
  padding: 0 14px;
  font-size: 12px;
}

.devd-date-range-control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

.devd-date-shortcuts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.devd-date-shortcut {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line-color);
  border-radius: 5px;
  background: var(--panel-bg);
  color: var(--text-sub);
  font-size: 11px;
  cursor: pointer;
}

.devd-date-shortcut:hover,
.devd-date-shortcut.active {
  border-color: #2f8cff;
  background: rgba(47, 140, 255, 0.1);
  color: #2f8cff;
}

@media (max-width: 900px) {
  .devd-date-range-control {
    width: 100%;
    margin-left: 0;
  }

  .devd-date-filter {
    flex: 1 1 auto;
  }
}

.devd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 12px;
  color: var(--text-sub);
  font-size: 13px;
}

.devd-empty.small {
  padding: 32px 12px;
}

.devd-empty-icon {
  font-size: 40px;
  line-height: 1;
  color: rgba(148, 163, 184, 0.5);
}

.devd-table {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-color);
  border-radius: 10px;
  background: var(--panel-bg);
  overflow-x: auto;
  overflow-y: hidden;
}

.devd-table-row {
  display: grid;
  grid-template-columns: 30px minmax(74px, 1fr) minmax(46px, 0.72fr) minmax(118px, 1.45fr) minmax(46px, 0.72fr) minmax(118px, 1.45fr);
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid rgba(219, 226, 238, 0.6);
  color: var(--text-main);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.devd-table-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.devd-table-row > span:nth-child(1) {
  color: var(--text-sub);
  text-align: center;
}

.devd-table-row > span:nth-child(3),
.devd-table-row > span:nth-child(5) {
  color: var(--text-main);
  font-weight: 600;
}

.devd-table-row > span:nth-child(4),
.devd-table-row > span:nth-child(6) {
  color: var(--text-sub);
}

.devd-table-row.devd-table-head {
  background: rgba(47, 140, 255, 0.06);
  border-top: 0;
  color: var(--text-sub);
  font-weight: 600;
  letter-spacing: 0.2px;
}

.devd-table-row.devd-table-head > span,
.devd-table-row.devd-table-head > span:nth-child(1),
.devd-table-row.devd-table-head > span:nth-child(3),
.devd-table-row.devd-table-head > span:nth-child(4),
.devd-table-row.devd-table-head > span:nth-child(5),
.devd-table-row.devd-table-head > span:nth-child(6) {
  color: var(--text-sub);
  font-weight: 600;
}

.devd-table-row:not(.devd-table-head):nth-child(even) {
  background: rgba(148, 163, 184, 0.06);
}

.devd-table-row:not(.devd-table-head):hover {
  background: rgba(47, 140, 255, 0.05);
}

.devd-table::-webkit-scrollbar {
  height: 6px;
}

.devd-table::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.45);
}

.devd-table::-webkit-scrollbar-track {
  background: transparent;
}

.devd-cell-diff {
  color: var(--text-sub);
  font-size: 12px;
}

.devd-cell-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.devd-cell {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid rgba(37, 129, 80, 0.35);
  border-radius: 6px;
  background: rgba(37, 129, 80, 0.06);
  text-align: center;
}

.devd-cell.is-max {
  border-color: rgba(47, 140, 255, 0.6);
  background: rgba(47, 140, 255, 0.1);
}

.devd-cell.is-min {
  border-color: rgba(192, 57, 43, 0.5);
  background: rgba(192, 57, 43, 0.08);
}

.devd-cell-index {
  color: var(--text-sub);
  font-size: 11px;
}

.devd-cell-tag {
  color: var(--text-sub);
  font-size: 11px;
}

.devd-cell-tag.on {
  color: var(--success-color);
  font-weight: 600;
}

.devd-cell-value {
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
}

.devd-protect-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

.devd-protect-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  font-size: 13px;
}

.devd-protect-item span {
  color: var(--text-sub);
}

.devd-protect-item strong {
  color: var(--text-main);
}

.devd-location-address {
  margin-top: 4px;
  color: var(--text-sub);
  font-size: 13px;
}

.devd-location-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.devd-location-title {
  color: var(--text-main);
  font-size: 16px;
  font-weight: 600;
}

.devd-location-modes {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.12);
}

.devd-location-tools,
.devd-location-date-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.devd-location-date-filter .devd-date-input {
  width: 140px;
  height: 34px;
  padding: 0 8px;
  font-size: 12px;
}

.devd-location-date-filter .devd-date-btn {
  height: 34px;
  min-width: 64px;
  padding: 0 14px;
  font-size: 12px;
}

.devd-loc-mode {
  height: 30px;
  padding: 0 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-sub);
  font-size: 13px;
}

.devd-loc-mode.active {
  background: #fff;
  color: #2f8cff;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(60, 92, 144, 0.16);
}

.devd-location-body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.7fr);
  gap: 16px;
  align-items: start;
}

.devd-location-body .legacy-map-panel {
  height: 460px;
  min-height: 460px;
}

.devd-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sub);
  font-size: 13px;
  pointer-events: none;
}

.devd-map-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: #faf7ef;
}

.devd-map-error strong {
  color: var(--danger-color);
  font-size: 15px;
}

.devd-map-error span {
  max-width: 460px;
  color: var(--text-sub);
  font-size: 12px;
  line-height: 1.7;
}

.devd-location-side {
  min-width: 0;
}

.devd-loc-realtime,
.devd-loc-track,
.devd-loc-mileage {
  display: grid;
  gap: 12px;
}

.devd-loc-tip {
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(217, 140, 0, 0.12);
  color: #b7791f;
  font-size: 12px;
}

.devd-loc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  font-size: 13px;
}

.devd-loc-row span {
  color: var(--text-sub);
}

.devd-loc-row strong {
  color: var(--text-main);
  word-break: break-all;
}

.devd-loc-track-controls {
  display: flex;
  gap: 10px;
}

.devd-loc-track-range {
  width: 100%;
}

.devd-loc-track-meta {
  display: grid;
  gap: 4px;
}

.devd-loc-mileage-table {
  display: grid;
  border: 1px solid var(--line-color);
  border-radius: 8px;
  overflow: hidden;
}

.devd-loc-mileage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-main);
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.devd-loc-mileage-row:last-child {
  border-bottom: none;
}

.devd-loc-mileage-row.head {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-sub);
  font-weight: 600;
}

.devd-loc-mileage-total {
  border-bottom: none;
}

@media (max-width: 1024px) {
  .devd-location-body {
    grid-template-columns: 1fr;
  }
}

.devd-empty-panel {
  min-height: 320px;
}

@media (max-width: 1400px) {
  .devd-battery-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .devd-right-wrap {
    grid-template-columns: 1fr;
  }
}

.simple-panel {
  padding: 18px;
  min-width: 0;
}

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

.panel-title-row h3 {
  margin: 0;
  font-size: 16px;
}

.command-list,
.alert-list-panel {
  display: grid;
  gap: 12px;
}

.command-row,
.alert-row {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #e7edf6;
  border-radius: 4px;
  background: #fbfdff;
}

.command-row {
  grid-template-columns: 1fr auto;
}

.command-config-row {
  grid-template-columns: minmax(160px, 220px) minmax(180px, 240px) minmax(260px, 1fr) auto;
  gap: 14px;
}

.command-config-label {
  color: #223654;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.command-config-origin {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  color: #6a7d98;
  font-size: 12px;
}

.command-config-origin em {
  font-style: normal;
  color: #8090a8;
}

.command-config-origin strong {
  color: #2b3f60;
  font-size: 13px;
  font-weight: 600;
}

.command-config-field .input-field,
.command-config-field .select-field {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  background: #fff;
}

.command-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.command-input-wrap .input-field,
.command-input-wrap .select-field {
  width: 100%;
  padding-right: 48px;
}

.command-input-unit {
  position: absolute;
  right: 12px;
  color: var(--text-sub);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}

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

.command-set-btn[disabled],
.command-read-btn[disabled] {
  border-color: #d6dde8;
  background: #e9eef5;
  color: #93a1b5;
  cursor: not-allowed;
  box-shadow: none;
}

.alert-panel {
  padding: 20px;
}

.alert-section-list {
  display: grid;
  gap: 18px;
}

.alert-section {
  padding: 16px;
  border: 1px solid #e6edf6;
  border-radius: 8px;
  background: linear-gradient(180deg, #fcfdff, #f8fbff);
}

.alert-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.alert-section-head h3 {
  margin: 0;
  font-size: 15px;
  color: #213654;
}

.alert-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #8ba1bd;
}

.alert-section.protection .alert-section-count {
  background: #ffb24d;
}

.alert-section.warning .alert-section-count {
  background: #ff7b72;
}

.alert-section.fault .alert-section-count {
  background: #7a5cff;
}

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

.alert-chip {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #e4ebf5;
  border-radius: 6px;
  background: #fff;
  color: #2a3f5f;
  font-size: 13px;
  line-height: 1.5;
}

.alert-chip.protection {
  border-color: #ffe0b0;
  background: #fff9f0;
}

.alert-chip.warning {
  border-color: #ffd3cf;
  background: #fff7f6;
}

.alert-chip.fault {
  border-color: #ddd8ff;
  background: #f8f6ff;
}

.empty-box.small {
  padding: 16px 0 8px;
}

.history-list-panel {
  position: relative;
  z-index: 0;
  margin-top: 16px;
  padding: 20px;
  min-width: 0;
  overflow: hidden;
}

.history-filter-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: nowrap;
}

.history-filter-row .devd-date-input {
  flex: 0 0 170px;
}

.history-filter-row .devd-date-btn {
  flex: 0 0 auto;
  min-width: 88px;
}

.history-table-space {
  margin-top: 16px;
}

.history-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.history-data-table {
  width: max-content;
  min-width: 100%;
  white-space: nowrap;
}

.history-data-table th,
.history-data-table td {
  vertical-align: middle;
}

.history-data-table th {
  position: static;
}

.history-sticky-col {
  position: sticky !important;
  z-index: 2;
  background: #fff;
}

.history-data-table thead .history-sticky-col {
  z-index: 3;
  background: rgba(47, 140, 255, 0.06);
}

.history-sticky-time {
  left: 0;
  min-width: 180px;
}

.history-sticky-sn {
  left: 180px;
  min-width: 160px;
}

.history-pager-shell {
  margin-top: 16px;
}

.alert-row {
  grid-template-columns: 80px 180px 1fr 90px;
}

.alert-level {
  color: #ef5350;
}

.alert-time,
.alert-status {
  color: #667892;
}

.alert-content {
  color: #263a58;
}

.history-only {
  grid-template-columns: minmax(0, 1fr);
}

.history-only.history-chart-only {
  grid-template-columns: minmax(0, 1fr);
}

.command-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
}

.command-nav {
  border: 1px solid var(--line-color);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel-bg);
}

.command-nav button {
  width: 100%;
  min-height: 50px;
  padding: 0 18px;
  border: 0;
  border-bottom: 1px solid var(--line-color);
  text-align: left;
  background: #fff;
}

.command-nav button.active {
  color: #2f8cff;
  background: rgba(47, 140, 255, 0.08);
}

.command-main {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 16px;
}

.command-param-grid {
  display: grid;
  gap: 12px;
}

.command-issue-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1fr);
  gap: 18px;
  align-items: start;
}

.command-issue-main,
.command-issue-side {
  min-width: 0;
}

.command-issue-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.command-issue-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
}

.command-issue-subtitle {
  margin-top: 6px;
  color: var(--text-sub);
  font-size: 13px;
}

.command-lock-tip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(47, 140, 255, 0.08);
  color: #2f8cff;
  font-size: 12px;
  white-space: nowrap;
}

.command-checkbox-col {
  width: 54px;
  text-align: center;
}

.command-checkbox-col input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.command-issue-table-wrap {
  overflow-x: auto;
}

.command-side-panel {
  position: sticky;
  top: 18px;
  display: flex;
  flex-direction: column;
  height: 980px;
  max-height: calc(100vh - 36px);
}

.command-side-head {
  flex: 0 0 auto;
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.command-side-body {
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.command-side-head h3 {
  margin: 0;
  font-size: 18px;
}

.command-target-meta {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line-color);
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.06);
}

.command-target-meta span {
  color: var(--text-sub);
  font-size: 12px;
}

.command-target-meta strong {
  color: var(--text-main);
  line-break: anywhere;
}

.scheme-tab-panel {
  margin-top: 14px;
}

.scheme-config-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.scheme-source-panel {
  align-self: start;
}

.scheme-source-body {
  min-height: 420px;
  max-height: 420px;
  overflow: auto;
}

.scheme-setting-body {
  min-height: 420px;
  max-height: 420px;
  overflow: auto;
  align-content: start;
}

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

.scheme-record-list {
  display: grid;
  gap: 8px;
}

.scheme-record-item {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 68px;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid var(--line-color);
  border-radius: 10px;
  background: var(--panel-bg);
}

.scheme-record-label {
  color: var(--text-main);
  line-height: 1.4;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scheme-record-body {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.scheme-record-body .input-field,
.scheme-record-body .select-field {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: 100%;
  height: 36px;
  padding: 0 10px;
}

.scheme-record-unit {
  flex: 0 0 auto;
  color: var(--text-sub);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.scheme-record-remove-btn {
  min-width: 68px;
  height: 36px;
  padding: 0 10px;
}

.scheme-log-table td {
  vertical-align: top;
}

.scheme-log-detail,
.scheme-log-info {
  display: grid;
  gap: 4px;
  min-width: 180px;
}

.scheme-log-detail-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.scheme-log-detail-label {
  color: var(--text-sub);
  font-size: 13px;
}

.scheme-log-detail-value {
  font-weight: 600;
}

.scheme-log-count {
  font-size: 12px;
  line-height: 1.6;
  padding: 1px 8px;
  border-radius: 8px;
  white-space: nowrap;
}

.scheme-log-count.success {
  color: var(--success-color);
  background: rgba(22, 180, 127, 0.12);
}

.scheme-log-count.fail {
  color: var(--danger-color);
  background: rgba(239, 91, 91, 0.12);
}

.scheme-log-info-row {
  font-size: 13px;
  line-height: 1.6;
}

.scheme-log-info-label {
  color: var(--text-sub);
}

.scheme-log-info-value {
  color: var(--text-main);
}

.scheme-log-detail-btn {
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
}

.scheme-log-detail-modal-body {
  display: grid;
  gap: 8px;
  max-height: 60vh;
  overflow: auto;
  padding: 4px 2px;
}

.scheme-log-detail-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line-color);
  border-radius: 10px;
  background: var(--panel-bg);
}

.scheme-log-detail-mark {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.scheme-log-detail-row.success .scheme-log-detail-mark {
  color: var(--success-color);
}

.scheme-log-detail-row.fail .scheme-log-detail-mark {
  color: var(--danger-color);
}

.scheme-log-detail-param {
  color: var(--text-main);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scheme-log-detail-value-text {
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.scheme-log-detail-unit {
  color: var(--text-sub);
  font-size: 12px;
  white-space: nowrap;
  min-width: 28px;
  text-align: left;
}

.scheme-result-group {
  display: grid;
  gap: 0;
  border: 1px solid var(--line-color);
  border-radius: 10px;
  overflow: hidden;
}

.scheme-result-group + .scheme-result-group {
  margin-top: 10px;
}

.scheme-result-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: rgba(148, 163, 184, 0.1);
  text-align: left;
}

.scheme-result-group-title {
  color: var(--text-main);
  font-size: 14px;
  font-weight: 600;
}

.scheme-result-group-count {
  min-width: 24px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  text-align: center;
}

.scheme-result-group-count.success {
  color: var(--success-color);
  background: rgba(37, 129, 80, 0.12);
}

.scheme-result-group-count.fail {
  color: var(--danger-color);
  background: rgba(192, 57, 43, 0.12);
}

.scheme-result-group-arrow {
  margin-left: auto;
  color: var(--text-sub);
  transition: transform 0.2s ease;
}

.scheme-result-group.collapsed .scheme-result-group-arrow {
  transform: rotate(-90deg);
}

.scheme-result-group.collapsed .scheme-result-group-body {
  display: none;
}

.scheme-result-group-body {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.scheme-result-device {
  border: 1px solid var(--line-color);
  border-radius: 8px;
  overflow: hidden;
}

.scheme-result-device-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: var(--panel-bg);
  text-align: left;
}

.scheme-result-device-name {
  flex: 1;
  min-width: 0;
  color: var(--text-main);
  font-size: 13px;
  word-break: break-all;
}

.scheme-result-device-tag {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.scheme-result-device-tag.success {
  color: var(--success-color);
  background: rgba(37, 129, 80, 0.12);
}

.scheme-result-device-tag.fail {
  color: var(--danger-color);
  background: rgba(192, 57, 43, 0.12);
}

.scheme-result-device-arrow {
  flex: none;
  color: var(--text-sub);
  transition: transform 0.2s ease;
}

.scheme-result-device:not(.collapsed) .scheme-result-device-arrow {
  transform: rotate(90deg);
}

.scheme-result-device.collapsed .scheme-result-device-body {
  display: none;
}

.scheme-result-device-body {
  display: grid;
  gap: 6px;
  padding: 8px 10px;
}

.scheme-result-field-group {
  display: grid;
  gap: 6px;
}

.scheme-result-field-group-title {
  margin-top: 4px;
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 600;
}

.command-side-panel .command-list {
  gap: 10px;
}

.command-issue-config-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  overflow: hidden;
}

.command-side-panel .command-config-label {
  white-space: normal;
  line-height: 1.5;
}

.command-issue-config-field {
  min-width: 0;
}

.command-issue-config-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.command-issue-config-field .input-field,
.command-issue-config-field .select-field {
  width: 100%;
  max-width: 100%;
}

.command-issue-config-actions {
  justify-content: flex-start;
  flex: 0 0 auto;
}

.command-side-panel .command-set-btn {
  min-width: 84px;
}

.firmware-list {
  gap: 10px;
  max-height: 460px;
  overflow-y: auto;
}

.firmware-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #e7edf6;
  border-radius: 6px;
  background: #fbfdff;
  cursor: pointer;
}

.firmware-option.active {
  border-color: #2f8cff;
  background: rgba(47, 140, 255, 0.06);
}

.firmware-option input[type="radio"] {
  flex: 0 0 auto;
  margin-top: 2px;
  width: 16px;
  height: 16px;
}

.firmware-option-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.firmware-option-name {
  color: #223654;
  font-size: 14px;
  font-weight: 600;
  word-break: break-all;
}

.firmware-option-bin {
  color: #6a7d98;
  font-size: 12px;
  word-break: break-all;
}

.firmware-pager-shell {
  margin-top: 12px;
}

.firmware-submit-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.detail-firmware-panel .command-side-head {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.5fr);
  align-items: start;
}

.detail-firmware-panel .firmware-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: none;
}

.protocol-list-head h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.protocol-list-head .page-desc {
  max-width: 760px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(71, 85, 105, 0.88);
}

.protocol-modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1760px, calc(100vw - 24px));
  height: calc(100vh - 24px);
  max-height: none;
  overflow: hidden;
  padding: 16px 16px 14px;
}

.protocol-head-actions {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 10px;
}

.protocol-collapse-btn {
  min-width: 98px;
}

.protocol-tab-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-color);
}

.protocol-tab {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-color);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--text-sub);
  font-size: 13px;
}

.protocol-tab.active {
  color: #2f8cff;
  border-color: rgba(47, 140, 255, 0.28);
  background: rgba(47, 140, 255, 0.08);
}

.protocol-editor-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 12px;
  padding-top: 12px;
  overflow: hidden;
}

.protocol-section-head {
  flex: 0 0 auto;
}

.protocol-modal-card .page-desc {
  margin-top: 4px;
  max-width: 720px;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(100, 116, 139, 0.92);
}

.protocol-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.protocol-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.protocol-section-head h4 {
  margin: 0;
  font-size: 14px;
}

.protocol-table-scroll {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: auto;
  border: 1px solid var(--line-color);
  border-radius: 10px;
}

.protocol-modal-card .modal-actions {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  padding-top: 12px;
  background: var(--panel-bg);
}

.protocol-config-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.protocol-fields-table {
  min-width: 1660px;
}

.protocol-module-table {
  width: 100%;
  table-layout: fixed;
  min-width: 780px;
}

.protocol-module-table-with-code {
  min-width: 900px;
}

.protocol-module-table th:nth-child(1),
.protocol-module-table td:nth-child(1) {
  width: 220px;
}

.protocol-module-table th:nth-child(2),
.protocol-module-table td:nth-child(2) {
  width: auto;
}

.protocol-module-table:not(.protocol-module-table-with-code) th:nth-child(3),
.protocol-module-table:not(.protocol-module-table-with-code) td:nth-child(3) {
  width: 86px;
}

.protocol-module-table-with-code th:nth-child(1),
.protocol-module-table-with-code td:nth-child(1) {
  width: 220px;
}

.protocol-module-table-with-code th:nth-child(2),
.protocol-module-table-with-code td:nth-child(2) {
  width: 120px;
}

.protocol-module-table-with-code th:nth-child(3),
.protocol-module-table-with-code td:nth-child(3) {
  width: auto;
}

.protocol-module-table-with-code th:nth-child(4),
.protocol-module-table-with-code td:nth-child(4) {
  width: 86px;
}

.protocol-app-table th:nth-child(1),
.protocol-app-table td:nth-child(1) {
  width: 200px;
}

.protocol-app-table th:nth-child(2),
.protocol-app-table td:nth-child(2) {
  width: 260px;
}

.protocol-app-table th:nth-child(3),
.protocol-app-table td:nth-child(3) {
  width: auto;
}

.protocol-app-key,
.protocol-app-label {
  min-height: 34px;
  display: flex;
  align-items: center;
  line-height: 1.4;
  word-break: break-word;
}

.protocol-config-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--panel-bg);
  white-space: nowrap;
  padding: 10px 10px;
  font-size: 12px;
}

.protocol-config-table td {
  vertical-align: top;
  padding: 8px 10px;
}

.protocol-compact-input {
  min-width: 84px;
  height: 34px;
  padding: 0 8px;
  font-size: 12px;
}

.protocol-add-btn,
.protocol-json-btn {
  min-width: 72px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(47, 140, 255, 0.16);
  background: rgba(47, 140, 255, 0.08);
  color: #226fd8;
  font-size: 12px;
}

.protocol-add-btn:hover,
.protocol-json-btn:hover {
  border-color: rgba(47, 140, 255, 0.28);
  background: rgba(47, 140, 255, 0.14);
}

.protocol-locale-stack {
  display: grid;
  gap: 6px;
  min-width: 150px;
}

.protocol-locale-stack label {
  display: grid;
  gap: 4px;
}

.protocol-locale-stack input[readonly] {
  color: var(--text-main);
  background: rgba(148, 163, 184, 0.06);
  cursor: default;
}

.protocol-locale-stack span,
.protocol-label-preview span {
  font-size: 11px;
  color: var(--text-sub);
}

.protocol-label-preview {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.protocol-label-preview span {
  line-height: 1.35;
  word-break: break-word;
}

.protocol-sticky-col {
  position: sticky;
  background: var(--panel-bg);
  z-index: 2;
}

.protocol-config-table thead .protocol-sticky-col {
  z-index: 5;
}

.protocol-sticky-key {
  left: 0;
  min-width: 116px;
  box-shadow: 1px 0 0 var(--line-color);
}

.protocol-sticky-label {
  left: 116px;
  min-width: 180px;
  box-shadow: 1px 0 0 var(--line-color), 2px 0 6px rgba(15, 23, 42, 0.04);
}

.protocol-module-table tbody .protocol-sticky-col {
  position: static;
  box-shadow: none;
}

.protocol-module-scroll {
  overflow-x: auto;
}

.protocol-remove-btn {
  min-width: 58px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.08);
  color: #c24141;
  font-size: 11px;
}

.protocol-remove-btn:hover {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.26);
}

.protocol-search-select {
  position: relative;
}

.protocol-search-input {
  width: 100%;
}

.protocol-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 9;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--line-color);
  border-radius: 10px;
  background: var(--panel-bg);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

.protocol-search-option {
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  background: transparent;
  text-align: left;
  display: grid;
  gap: 2px;
}

.protocol-search-option:last-child {
  border-bottom: 0;
}

.protocol-search-option:hover,
.protocol-search-option.active {
  background: rgba(47, 140, 255, 0.08);
}

.protocol-search-option span {
  font-size: 12px;
  color: var(--text-main);
}

.protocol-search-option small,
.protocol-search-empty {
  font-size: 11px;
  color: var(--text-sub);
}

.protocol-search-empty {
  padding: 10px;
}

.protocol-json-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 15, 28, 0.32);
  backdrop-filter: blur(2px);
}

.protocol-json-dialog {
  width: min(980px, calc(100vw - 80px));
  padding: 18px;
  border: 1px solid var(--line-color);
  border-radius: 14px;
  background: var(--panel-bg);
  box-shadow: var(--shadow-main);
}

.protocol-json-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 320px;
  padding: 12px;
  border: 1px solid var(--line-color);
  border-radius: 12px;
  resize: vertical;
  font: 13px/1.7 Consolas, "Courier New", monospace;
  color: var(--text-main);
  background: rgba(148, 163, 184, 0.04);
}

.protocol-json-error {
  min-height: 20px;
  margin-top: 8px;
  color: #c24141;
  font-size: 12px;
}

.protocol-json-dialog .primary-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.protocol-modal-mask {
  align-items: flex-start;
  padding: 12px;
  overflow: auto;
}

.checkbox-cell input {
  width: 16px;
  height: 16px;
}

@media (max-width: 1440px) {
  .legacy-battery-layout,
  .legacy-top-grid,
  .legacy-middle-grid,
  .legacy-bottom-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .legacy-info-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    padding: 16px;
  }

  .business-info-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .command-config-row {
    grid-template-columns: minmax(140px, 180px) minmax(150px, 200px) minmax(200px, 1fr) auto;
  }

  .protocol-modal-card {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    padding: 14px;
  }

  .protocol-tab {
    padding: 0 10px;
    font-size: 12px;
  }

  .protocol-fields-table {
    min-width: 1520px;
  }
}

@media (max-width: 1024px) {
  .form-grid,
  .filter-grid,
  .detail-grid,
  .command-layout,
  .command-main,
  .command-issue-layout {
    grid-template-columns: 1fr;
  }

  .command-side-panel {
    position: static;
    height: auto;
    max-height: none;
  }

  .command-side-body {
    overflow: visible;
    padding-right: 0;
  }

  .detail-firmware-panel .command-side-head {
    grid-template-columns: 1fr;
  }

  .scheme-config-grid,
  .scheme-option-grid {
    grid-template-columns: 1fr;
  }

  .scheme-record-item {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .command-issue-head {
    flex-direction: column;
  }

  .legacy-info-grid,
  .legacy-battery-layout,
  .legacy-battery-main,
  .legacy-top-grid,
  .legacy-middle-grid,
  .legacy-bottom-grid {
    grid-template-columns: 1fr;
  }

  .protocol-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .protocol-section-actions,
  .protocol-head-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .modal-card {
    width: min(92vw, 760px);
    padding: 18px;
  }

  .protocol-modal-card {
    width: calc(100vw - 12px);
    height: calc(100vh - 12px);
    padding: 12px;
  }

  .role-manage-layout {
    grid-template-columns: 1fr;
  }

  .role-sidebar-card {
    min-height: auto;
  }

  .role-list-wrap {
    max-height: none;
  }

  .role-check-grid,
  .role-check-grid-mobile {
    grid-template-columns: 1fr;
  }

  .role-sidebar-head,
  .role-section-head,
  .role-permission-group-head {
    flex-direction: column;
  }

  .role-section-head-compact {
    align-items: stretch;
  }
}

@media (max-width: 768px) {
  .detail-firmware-panel .firmware-list {
    grid-template-columns: 1fr;
  }

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

  .list-filter-grid-merchant {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .business-filter-grid {
    grid-template-columns: 1fr;
  }

  .merchant-filter-grid {
    grid-template-columns: 1fr;
  }

  .account-filter-grid {
    grid-template-columns: 1fr;
  }

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

  .device-filter-actions-fixed {
    justify-content: stretch;
    align-items: stretch;
    flex-direction: column;
  }

  .device-filter-actions-fixed > * {
    width: 100%;
  }

  .list-filter-actions {
    justify-content: stretch;
    align-items: stretch;
    flex-direction: column;
  }

  .list-filter-actions > * {
    width: 100%;
  }

  .business-filter-actions {
    flex-direction: row;
    justify-content: stretch;
    flex-wrap: wrap;
  }

  .business-filter-actions > * {
    width: auto;
    flex: 1 1 0;
  }

  .merchant-filter-actions {
    flex-direction: row;
    justify-content: stretch;
    flex-wrap: wrap;
  }

  .merchant-filter-actions > * {
    width: auto;
    flex: 1 1 0;
  }

  .account-filter-actions {
    flex-direction: row;
    justify-content: stretch;
    flex-wrap: wrap;
  }

  .account-filter-actions > * {
    width: auto;
    flex: 1 1 0;
  }

  .device-filter-actions-inline {
    flex-direction: row;
    justify-content: stretch;
    flex-wrap: wrap;
  }

  .device-filter-actions-inline > * {
    width: auto;
    flex: 1 1 0;
  }

  .page-app {
    gap: 14px;
  }

  .device-filter-grid,
  .device-overview-grid,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .device-detail-head {
    flex-direction: column;
    align-items: stretch;
  }

  .device-legacy-actions {
    align-items: stretch;
  }

  .device-legacy-actions > * {
    width: 100%;
  }

  .thermo-grid,
  .summary-grid,
  .history-only {
    grid-template-columns: 1fr;
  }

  .battery-main-grid {
    grid-template-columns: 1fr;
    justify-items: flex-start;
  }

  .mos-metrics,
  .temperature-card .temp-meta-grid,
  .temperature-head {
    grid-template-columns: 1fr;
  }

  .device-card-head,
  .temperature-head,
  .business-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .business-info-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .battery-scale {
    display: none;
  }

  .battery-bar-grid {
    margin-left: 0;
    overflow-x: auto;
    padding-bottom: 50px;
  }

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

  .panel-card.compact,
  .table-card,
  .panel-card {
    padding: 14px;
  }

  .filter-row,
  .table-actions,
  .page-actions,
  .command-toolbar {
    align-items: stretch;
  }

  .filter-row > *,
  .table-actions > *,
  .page-actions > *,
  .command-toolbar > * {
    width: 100%;
  }

  .pager-shell {
    flex-direction: column;
    align-items: stretch;
  }

  .pager-actions {
    justify-content: space-between;
  }

  .command-nav button {
    min-height: 44px;
    padding: 0 14px;
  }

  .protocol-tab-bar {
    flex-wrap: nowrap;
    overflow: auto;
    padding-bottom: 12px;
  }
}

@media (max-width: 560px) {
  .device-filter-grid-fixed {
    grid-template-columns: 1fr;
  }

  .list-filter-grid-merchant {
    grid-template-columns: 1fr;
  }

  .list-filter-grid-account {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .input-field,
  .select-field,
  .primary-btn,
  .secondary-btn,
  .ghost-btn,
  .pager-btn {
    width: 100%;
    min-width: 0;
  }

  .modal-card {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    padding: 14px;
  }

  .modal-head {
    margin-bottom: 14px;
  }
}