.dcs-electricity {
  --portal-blue: #1f5fe0;
  --portal-blue-dark: #0d2f68;
  --portal-blue-soft: #edf4ff;
  --portal-cyan: #38a8ff;
  --portal-ink: #10213d;
  --portal-muted: #687894;
  --portal-danger: #e34242;
  --portal-warning: #f19a25;
}

.dcs-sen-card {
  position: relative;
  border: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(20, 50, 105, .12);
}

.dcs-sen-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--portal-blue), var(--portal-cyan));
}

.dcs-sen-card > header {
  padding: 24px 30px;
  border-bottom: 1px solid #e8eef8;
  background: linear-gradient(120deg, #f7faff 0%, #fff 60%);
}

.dcs-bolt {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--portal-blue-dark), var(--portal-blue));
  box-shadow: 0 9px 20px rgba(31, 95, 224, .22);
  color: #fff;
  font-size: 29px;
}

.dcs-sen-card h2 {
  color: var(--portal-ink);
  font-size: 1.3rem;
}

.dcs-sen-card header p {
  color: var(--portal-muted);
  font-size: .92rem;
}

.dcs-sen-status {
  border: 1px solid #cad9f5;
  background: var(--portal-blue-soft);
  color: var(--portal-blue-dark);
  letter-spacing: .08em;
}

.dcs-sen-main {
  grid-template-columns: minmax(210px, .72fr) minmax(360px, 1.28fr);
  padding: 34px 30px 25px;
}

.dcs-gauge {
  position: relative;
  width: 210px;
  background: conic-gradient(var(--portal-blue) var(--coverage), #e8eef8 0);
  box-shadow: inset 0 0 0 1px rgba(31, 95, 224, .08);
}

.dcs-gauge::before {
  width: 68%;
  border: 0;
  background: #fff;
  box-shadow: 0 7px 25px rgba(14, 48, 105, .10);
}

.dcs-gauge strong {
  color: var(--portal-blue-dark);
  font-size: 2.65rem;
}

.dcs-gauge span {
  display: block;
  max-width: 115px;
  margin: 7px auto 0;
  color: var(--portal-muted);
  font-size: .61rem;
  line-height: 1.25;
  letter-spacing: .07em;
}

.dcs-sen-main dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dcs-sen-main dl div {
  display: block;
  min-height: 102px;
  padding: 17px 18px;
  border: 1px solid #e0e8f5;
  border-radius: 16px;
  background: #f8faff;
}

.dcs-sen-main dl div:nth-child(1) {
  background: linear-gradient(145deg, #102f67, #1d5bd0);
  border-color: transparent;
}

.dcs-sen-main dl div:nth-child(1) dt,
.dcs-sen-main dl div:nth-child(1) dd {
  color: #fff;
}

.dcs-sen-main dl div:nth-child(2) {
  border-color: #cfe0ff;
  background: var(--portal-blue-soft);
}

.dcs-sen-main dl div:nth-child(3) {
  border-color: #ffe0b7;
  background: #fff8ed;
}

.dcs-sen-main dl div:nth-child(4) {
  border-color: #ffd5d5;
  background: #fff4f4;
}

.dcs-sen-main dt {
  margin-bottom: 7px;
  color: var(--portal-muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.dcs-sen-main dd {
  color: var(--portal-ink);
  font-size: 1.55rem;
}

.dcs-sen-main dl div:nth-child(3) dd { color: #a85d00; }
.dcs-sen-main dl div:nth-child(4) dd { color: #bd3030; }

.dcs-impact {
  margin: 0 30px 22px;
  padding: 19px 23px;
  border: 0;
  border-left: 5px solid var(--portal-danger);
  background: linear-gradient(100deg, #fff5f5, #fff);
  box-shadow: inset 0 0 0 1px #ffe1e1;
}

.dcs-impact strong {
  color: #a72c2c;
  font-size: .78rem;
  letter-spacing: .08em;
}

.dcs-impact span { color: var(--portal-muted); }

.dcs-impact b {
  color: var(--portal-danger);
  font-size: clamp(1.9rem, 4vw, 2.65rem);
}

.dcs-bars {
  margin: 0 30px 25px;
  border: 0;
  background: #f6f9fe;
  box-shadow: inset 0 0 0 1px #e2eaf6;
}

.dcs-bars i {
  height: 9px;
  background: #dde6f3;
}

.dcs-bars em {
  background: linear-gradient(90deg, var(--portal-blue-dark), var(--portal-blue));
}

.dcs-bars em.available {
  background: linear-gradient(90deg, var(--portal-blue), var(--portal-cyan));
}

.dcs-sen-card footer {
  border-top-color: #e8eef8;
  background: #fbfcff;
  color: var(--portal-muted);
  font-size: .88rem;
}

.dcs-chart-legend .demand::before { background: var(--portal-blue-dark); }
.dcs-chart-legend .available::before { background: var(--portal-blue); }
.dcs-chart-legend .affected::before { background: var(--portal-danger); }
.dcs-chart-tooltip i.demand { background: var(--portal-blue-dark); }
.dcs-chart-tooltip i.available { background: var(--portal-blue); }
.dcs-chart-tooltip i.affected { background: var(--portal-danger); }

@media (max-width: 720px) {
  .dcs-sen-card > header { padding: 18px; }
  .dcs-bolt { width: 42px; height: 42px; border-radius: 12px; }
  .dcs-sen-main { grid-template-columns: 1fr; padding: 25px 17px 18px; }
  .dcs-gauge { width: min(190px, 65vw); }
  .dcs-sen-main dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .dcs-sen-main dl div { min-height: 91px; padding: 13px; }
  .dcs-sen-main dt { font-size: .66rem; }
  .dcs-sen-main dd { font-size: 1.18rem; white-space: nowrap; }
  .dcs-impact { margin: 0 17px 17px; }
  .dcs-impact b { display: block; margin-top: 7px; }
  .dcs-bars { margin: 0 17px 20px; }
}