:root{
  --bg:#0B0F14;
  --bg-grid-line: rgba(255,255,255,0.03);
  --surface:#131920;
  --surface-2:#1A222B;
  --border: rgba(255,255,255,0.07);
  --text:#E8EDF2;
  --text-muted:#7C8894;
  --text-dim:#4C5560;

  --solar:#F5A524;
  --solar-dim: rgba(245,165,36,0.14);
  --evn:#4C9FEA;
  --evn-dim: rgba(76,159,234,0.14);
  --charge:#3DDC84;
  --charge-dim: rgba(61,220,132,0.14);
  --discharge:#FF6B6B;
  --discharge-dim: rgba(255,107,107,0.14);
  --batsub:#B98CF2;
  --batsub-dim: rgba(185,140,242,0.14);

  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Inter', -apple-system, sans-serif;

  --radius: 14px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  padding-bottom:48px;
}

.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--bg-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
}

header.topbar{
  position:relative; z-index:1;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:28px 20px 18px;
  max-width:920px; margin:0 auto;
}
.topbar-title .eyebrow{
  display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:2px;
}
.topbar-title h1{
  margin:0; font-size:28px; font-weight:700; letter-spacing:-0.01em;
}
.spark{ color:var(--solar); }
.topbar-meta{ display:flex; align-items:center; gap:8px; }
.clock{ font-family:var(--mono); font-size:13px; color:var(--text-muted); }
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--charge);
  box-shadow:0 0 8px var(--charge);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
.live-label{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; }

main{ position:relative; z-index:1; max-width:920px; margin:0 auto; padding:0 20px; }

/* FLOW DIAGRAM — cross layout converging at center hub */
.flow-diagram{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  margin-bottom:28px;
  padding-bottom: 62%;
  overflow:hidden;
}
.flow-svg{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.flow-path{
  fill:none;
  stroke: var(--border);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray: 5 7;
  transition: stroke .4s ease, opacity .4s ease;
}
.flow-path.active{
  animation: dashflow 0.9s linear infinite;
}
.flow-path.reverse.active{
  animation-direction: reverse;
}
@keyframes dashflow{
  to{ stroke-dashoffset: -24; }
}
.flow-hub{ fill: var(--text-dim); }

.flow-path.c-solar{ stroke: var(--solar); }
.flow-path.c-evn{ stroke: var(--evn); }
.flow-path.c-charge{ stroke: var(--charge); }
.flow-path.c-discharge{ stroke: var(--discharge); }
.flow-path.c-batsub-charge{ stroke: var(--batsub); }
.flow-path.c-batsub-discharge{ stroke: var(--discharge); }

.flow-node{
  position:absolute;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  transform: translate(-50%, -50%);
  width:100px;
  text-align:center;
}
.fn-nlmt{ top:11%; left:50%; }
.fn-grid{ top:50%; left:12%; }
.fn-home{ top:50%; left:88%; }
.fn-bms{ top:88%; left:31%; }
.fn-batsub{ top:88%; left:69%; }

.flow-icon{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  background:var(--surface-2);
  border:1px solid var(--border);
  transition: all .4s ease;
}
.flow-value{
  font-family:var(--mono); font-size:13px; font-weight:600;
  color:var(--text-muted);
  transition: color .4s ease;
}
.flow-label{
  font-size:10.5px; color:var(--text-dim);
  display:flex; flex-direction:column; gap:0;
}
.flow-est{ font-size:9px; color:var(--text-dim); opacity:.7; }

.flow-node.active .flow-icon{ box-shadow:0 0 16px -4px currentColor; }

.fn-nlmt.active .flow-icon{ background:var(--solar-dim); border-color:var(--solar); color:var(--solar); }
.fn-nlmt.active .flow-value{ color:var(--solar); }

.fn-grid.active .flow-icon{ background:var(--evn-dim); border-color:var(--evn); color:var(--evn); }
.fn-grid.active .flow-value{ color:var(--evn); }

.fn-home .flow-icon{ background:var(--surface-2); border-color:var(--border); }
.fn-home.active .flow-icon{ border-color:var(--text-muted); color:var(--text); }
.fn-home.active .flow-value{ color:var(--text); }

.fn-bms.charging .flow-icon{ background:var(--charge-dim); border-color:var(--charge); color:var(--charge); }
.fn-bms.charging .flow-value{ color:var(--charge); }
.fn-bms.discharging .flow-icon{ background:var(--discharge-dim); border-color:var(--discharge); color:var(--discharge); }
.fn-bms.discharging .flow-value{ color:var(--discharge); }

.fn-batsub.charging .flow-icon{ background:var(--batsub-dim); border-color:var(--batsub); color:var(--batsub); }
.fn-batsub.charging .flow-value{ color:var(--batsub); }
.fn-batsub.discharging .flow-icon{ background:var(--discharge-dim); border-color:var(--discharge); color:var(--discharge); }
.fn-batsub.discharging .flow-value{ color:var(--discharge); }

/* BLOCKS */
.block{ margin-bottom:26px; }
.block-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:12px; padding:0 2px;
}
.block-head h2{
  font-size:17px; font-weight:600; margin:0;
}
.block-sub{
  font-size:12px; font-weight:400; color:var(--text-dim); margin-left:8px;
}
.badge{
  font-family:var(--mono); font-size:11px; padding:4px 10px;
  border-radius:20px; background:var(--surface-2); color:var(--text-muted);
  border:1px solid var(--border);
}
.badge.on{ color:var(--charge); border-color:var(--charge); background:var(--charge-dim); }
.badge.off{ color:var(--text-dim); }
.badge.discharge{ color:var(--discharge); border-color:var(--discharge); background:var(--discharge-dim); }

.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.cards-bms{ grid-template-columns:repeat(4,1fr); }
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 16px 14px;
  display:flex; flex-direction:column; gap:6px;
  transition: border-color .3s ease;
}
.card-label{ font-size:11.5px; color:var(--text-muted); }
.card-value{
  font-family:var(--mono); font-size:19px; font-weight:600; color:var(--text);
  letter-spacing:-0.01em;
}
.card-value.big{ font-size:26px; }
.card-sub{
  font-family:var(--mono); font-size:11.5px; color:var(--text-dim);
  margin-top:-2px;
}
.card-hero{ grid-column: span 2; }
.accent-solar{ border-color: rgba(245,165,36,0.25); }
.accent-solar .card-value{ color:var(--solar); }
.accent-evn{ border-color: rgba(76,159,234,0.25); }
.accent-evn .card-value{ color:var(--evn); }
.accent-battery{ border-color: rgba(61,220,132,0.25); }
.accent-battery .card-value{ color:var(--charge); }

/* PIE / DONUT GAUGE for battery percent */
.battery-gauge-card{
  align-items:center;
  border-color: rgba(61,220,132,0.25);
}
.pie-wrap{
  position:relative;
  width:100%;
  max-width:108px;
  aspect-ratio: 1 / 1;
  margin:2px auto 0;
}
.pie-svg{
  width:100%; height:100%;
  transform: rotate(-90deg);
}
.pie-track, .pie-fill{
  fill:none;
  stroke-width:10;
}
.pie-track{ stroke: var(--surface-2); }
.pie-fill{
  stroke: var(--charge);
  stroke-linecap: round;
  stroke-dasharray: 326.7256;
  stroke-dashoffset: 326.7256;
  transition: stroke-dashoffset .7s ease, stroke .4s ease;
}
.pie-center{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.pie-value{
  font-family:var(--mono); font-size:20px; font-weight:700;
  color:var(--charge);
  transition: color .4s ease;
}

/* Battery percent color tiers — apply to both ring and number */
.battery-gauge-card.tier-green .pie-fill{ stroke:var(--charge); }
.battery-gauge-card.tier-green .pie-value{ color:var(--charge); }

.battery-gauge-card.tier-yellow .pie-fill{ stroke:#E8C34A; }
.battery-gauge-card.tier-yellow .pie-value{ color:#E8C34A; }

.battery-gauge-card.tier-orange .pie-fill{ stroke:#F0883E; }
.battery-gauge-card.tier-orange .pie-value{ color:#F0883E; }

.battery-gauge-card.tier-red .pie-fill{ stroke:var(--discharge); }
.battery-gauge-card.tier-red .pie-value{ color:var(--discharge); }
.battery-gauge-card.tier-red .pie-value{ animation: criticalPulse 1.5s ease-in-out infinite; }

@keyframes criticalPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.block.inactive .card{ opacity:.4; }
.block.inactive .card-value{ color:var(--text-dim) !important; }

.foot{
  text-align:center; margin-top:24px; padding-top:16px;
  border-top:1px solid var(--border);
}
.foot span{ font-family:var(--mono); font-size:11px; color:var(--text-dim); }

/* Responsive */
@media (max-width: 720px){
  .cards, .cards-bms{ grid-template-columns:repeat(2,1fr); }
  .card-hero{ grid-column: span 2; }
  .flow-label{ display:none; }
  .flow-strip{ padding:16px; }
}
@media (max-width: 420px){
  header.topbar{ padding:22px 16px 14px; }
  main{ padding:0 12px; }
  .topbar-title h1{ font-size:23px; }
  .pie-value{ font-size:18px; }
  .flow-node{ width:76px; }
  .flow-icon{ width:32px; height:32px; font-size:14px; }
  .flow-value{ font-size:11px; }
  .flow-label{ font-size:9.5px; }
  .flow-est{ font-size:8px; }
}