.group-operations-hero {
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) minmax(190px, 0.78fr) minmax(420px, 1.65fr);
  gap: 20px;
  align-items: center;
  padding: 18px 20px;
  margin-bottom: 11px;
  background:
    radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--group-color) 12%, transparent), transparent 34%),
    linear-gradient(140deg, color-mix(in srgb, var(--group-color) 5%, white), #fff 52%);
  border: 1px solid color-mix(in srgb, var(--group-color) 20%, #e1e8f1);
  border-radius: 11px;
  box-shadow: var(--shadow);
}
.group-operations-identity small,
.group-operations-identity h2,
.group-operations-identity p,
.group-primary-load small,
.group-primary-load strong,
.group-primary-load p {
  display: block;
  margin: 0;
}
.group-operations-identity small {
  color: var(--group-color);
  font-size: 8px;
  font-weight: 700;
}
.group-operations-identity h2 {
  margin-top: 5px;
  color: #1f3552;
  font-size: 19px;
}
.group-operations-identity p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: #728198;
  font-size: 8px;
}
.group-operations-identity p > span {
  width: 7px;
  height: 7px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgb(16 185 129 / 10%);
}
.group-primary-load {
  padding-left: 20px;
  border-left: 1px solid #e7ecf3;
}
.group-primary-load > small {
  color: #8290a3;
  font-size: 8px;
}
.group-primary-load > strong {
  margin-top: 6px;
  color: #203a5e;
  font-family: Bahnschrift, "DIN Alternate", sans-serif;
  font-size: 22px;
}
.group-primary-load > div {
  height: 5px;
  margin-top: 10px;
  overflow: hidden;
  background: #e9eef5;
  border-radius: 6px;
}
.group-primary-load > div span {
  display: block;
  height: 100%;
  background: var(--group-color);
  border-radius: inherit;
}
.group-primary-load > p {
  margin-top: 6px;
  color: #7d8a9d;
  font-size: 7px;
}
.group-operation-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(86px, 1fr));
  gap: 8px;
}
.group-operation-metrics article {
  min-width: 0;
  padding: 10px;
  background: rgb(255 255 255 / 82%);
  border: 1px solid #e6ebf2;
  border-radius: 8px;
}
.group-operation-metrics small,
.group-operation-metrics strong,
.group-operation-metrics span {
  display: block;
}
.group-operation-metrics small {
  color: #8a96a8;
  font-size: 7px;
}
.group-operation-metrics strong {
  margin-top: 5px;
  overflow: hidden;
  color: #273d5b;
  font-family: Bahnschrift, "DIN Alternate", sans-serif;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-operation-metrics span {
  margin-top: 3px;
  color: #98a3b2;
  font-size: 7px;
}
.group-operation-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  gap: 16px;
  padding: 8px 14px;
  margin-bottom: 11px;
  border: 1px solid;
  border-radius: 9px;
}
.group-operation-alert.attention {
  background: #fffbf3;
  border-color: #f6d89d;
}
.group-operation-alert.stable {
  background: #f3fcf8;
  border-color: #c4efdc;
}
.group-operation-alert > div,
.group-operation-alert p {
  display: flex;
  align-items: center;
}
.group-operation-alert > div {
  gap: 10px;
}
.group-operation-alert > div > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  background: #f59e0b;
  border-radius: 7px;
}
.group-operation-alert.stable > div > span {
  background: #10b981;
}
.group-operation-alert p {
  gap: 9px;
  margin: 0;
}
.group-operation-alert p b {
  color: #384d69;
  font-size: 9px;
}
.group-operation-alert p em,
.group-operation-alert > a {
  font-size: 8px;
  font-style: normal;
}
.group-operation-alert p em {
  color: #78879b;
}
.group-operation-alert > a {
  color: #2368f5;
  font-weight: 650;
}
.group-monitor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}
.group-monitor-toolbar > div {
  display: flex;
  gap: 7px;
}
.group-monitor-toolbar a {
  display: flex;
  height: 30px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  color: #627187;
  font-size: 8px;
  background: #f7f9fc;
  border: 1px solid #e1e7ef;
  border-radius: 7px;
}
.group-monitor-toolbar a b {
  display: grid;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  place-items: center;
  color: #7f8b9d;
  font-size: 7px;
  background: #e9eef5;
  border-radius: 8px;
}
.group-monitor-toolbar a.active {
  color: #2368f5;
  background: #edf4ff;
  border-color: #b8d1ff;
}
.group-monitor-toolbar a.active b {
  color: #fff;
  background: #2368f5;
}
.group-monitor-toolbar > span {
  color: #929daf;
  font-size: 8px;
}
.group-device-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}
.group-device-card {
  --device-state: #10b981;
  display: block;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-top: 3px solid var(--device-state);
  border-radius: 10px;
  box-shadow: 0 7px 18px rgb(31 54 87 / 6%);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.group-device-card.alert { --device-state: #f59e0b; }
.group-device-card.offline { --device-state: #e06b67; }
.group-device-card:hover,
.group-device-card:focus-visible {
  border-color: color-mix(in srgb, var(--device-state) 46%, #dce4ee);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--device-state) 13%, transparent);
  outline: none;
  transform: translateY(-2px);
}
.group-device-card > header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px 9px;
  border-bottom: 1px solid #eef2f6;
}
.group-device-card > header > div {
  min-width: 0;
}
.group-device-mark {
  display: grid;
  flex: 0 0 30px;
  height: 30px;
  place-items: center;
  color: #2368f5;
  font-size: 10px;
  font-weight: 750;
  background: #edf4ff;
  border-radius: 8px;
}
.group-device-card header b,
.group-device-card header small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-device-card header b {
  color: #293e5b;
  font-size: 9px;
}
.group-device-card header small {
  margin-top: 3px;
  color: #8c98a9;
  font-size: 6px;
}
.group-device-card header .badge {
  flex: none;
  margin-left: auto;
}
.group-device-live {
  display: grid;
  grid-template-columns: minmax(105px, 0.85fr) minmax(105px, 1.15fr);
  gap: 10px;
  align-items: end;
  padding: 12px 12px 7px;
}
.group-device-live small,
.group-device-live strong,
.group-device-live span {
  display: block;
}
.group-device-live small {
  color: #8693a6;
  font-size: 7px;
}
.group-device-live strong {
  margin-top: 5px;
  color: #243b5b;
  font-family: Bahnschrift, "DIN Alternate", sans-serif;
  font-size: 19px;
}
.group-device-live strong em {
  color: #77869a;
  font-size: 7px;
  font-style: normal;
}
.group-device-live span {
  margin-top: 4px;
  color: #8f9bad;
  font-size: 7px;
}
.group-device-live svg {
  width: 100%;
  height: 58px;
  overflow: visible;
}
.group-device-live svg line {
  stroke: #e3e9f1;
  stroke-width: 1;
}
.group-device-live svg polyline {
  fill: none;
  stroke: var(--device-state);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.group-device-live svg circle {
  fill: #fff;
  stroke: var(--device-state);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.group-device-card.offline .group-device-live svg {
  opacity: 0.48;
}
.group-device-load {
  height: 4px;
  margin: 0 12px 10px;
  overflow: hidden;
  background: #edf1f6;
  border-radius: 5px;
}
.group-device-load span {
  display: block;
  height: 100%;
  background: var(--device-state);
  border-radius: inherit;
}
.group-device-stats {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.9fr;
  margin: 0 12px;
  background: #f7f9fc;
  border-radius: 7px;
}
.group-device-stats > div {
  min-width: 0;
  padding: 8px;
}
.group-device-stats > div + div {
  border-left: 1px solid #e5eaf1;
}
.group-device-stats small,
.group-device-stats b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-device-stats small {
  color: #929dae;
  font-size: 6px;
}
.group-device-stats b {
  margin-top: 3px;
  color: #445871;
  font-size: 7px;
}
.group-device-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px 10px;
  color: #77879b;
  font-size: 7px;
}
.group-device-card > footer span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-device-card > footer span i {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  background: var(--device-state);
  border-radius: 50%;
}
.group-device-card > footer > b {
  flex: none;
  color: #2368f5;
  font-size: 7px;
}
.group-monitor-empty {
  display: grid;
  min-height: 210px;
  grid-column: 1 / -1;
  place-content: center;
  gap: 6px;
  color: #8a96a8;
  text-align: center;
}
.group-monitor-empty b {
  color: #354a66;
  font-size: 11px;
}
.group-monitor-empty span {
  font-size: 8px;
}
@media (max-width: 1250px) {
  .group-operations-hero {
    grid-template-columns: minmax(175px, 0.8fr) minmax(175px, 0.72fr) minmax(390px, 1.6fr);
    gap: 14px;
  }
  .group-operation-metrics {
    gap: 6px;
  }
  .group-device-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}