*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(circle at top,#eef4ff,#f8fbff 55%,#eef2ff 100%);
  color:#0f172a
}
.shell{max-width:1320px;margin:24px auto;padding:24px}
.hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:22px 24px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(148,163,184,.25);
  backdrop-filter:blur(10px);
  border-radius:24px;
  box-shadow:0 18px 50px rgba(15,23,42,.1);
  margin-bottom:16px
}
h1{margin:0;font-size:2.15rem}
p{margin:8px 0 0;color:#475569}
.badge{
  padding:10px 14px;
  border-radius:999px;
  background:#dbeafe;
  color:#1d4ed8;
  font-weight:700
}
.panel{
  background:rgba(255,255,255,.88);
  border:1px solid #e2e8f0;
  border-radius:22px;
  padding:18px 20px;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
  margin-bottom:16px
}
.controls{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px;
  align-items:end
}
.controls label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:.92rem;
  color:#334155
}
input,select,button{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid #cbd5e1;
  font-size:14px;
  background:#fff
}
input:focus,select:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,.12)
}
button{
  border:none;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 10px 20px rgba(37,99,235,.22)
}
button.secondary{
  background:#fff;
  color:#1d4ed8;
  border:1px solid #bfdbfe;
  box-shadow:none
}
button:hover{transform:translateY(-1px)}
.status{
  min-height:24px;
  margin:10px 4px 14px;
  color:#334155
}
.summary{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px
}
.pill{
  padding:8px 12px;
  border-radius:999px;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#1e3a8a;
  font-size:.9rem
}
.grid2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:16px
}
.chart-wrap{
  position:relative;
  height:380px;
  width:100%;
  overflow:hidden
}
.chart-wrap.tall{height:470px}
.chart-wrap canvas{
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:100%
}
.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px
}
.energy{color:#1d4ed8;font-weight:700}
h2{margin:0;font-size:1.06rem}