:root {
  --c-pv: #f59f00;
  --c-battery: #2f9e44;
  --c-load: #1c7ed6;
  --c-grid: #ae3ec9;
  --c-inv: #868e96;
}

body { font-variant-numeric: tabular-nums; }

.stat-label { font-size: .75rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .03em; }
.stat-value { font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.stat-value small { font-size: .8rem; font-weight: 400; color: var(--bs-secondary-color); }

.kv { display: flex; justify-content: space-between; padding: .2rem 0; border-bottom: 1px dashed var(--bs-border-color); font-size: .9rem; }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--bs-secondary-color); }

/* Sơ đồ dòng năng lượng */
.flow svg { width: 100%; height: auto; max-height: 360px; display: block; margin: 0 auto; }
.flow .line { fill: none; stroke: var(--bs-border-color); stroke-width: 3; }
.flow .line.active { stroke-dasharray: 8 8; animation: flow 1s linear infinite; }
.flow .line.active.rev { animation-direction: reverse; }
.flow .line.pv.active { stroke: var(--c-pv); }
.flow .line.battery.active { stroke: var(--c-battery); }
.flow .line.load.active { stroke: var(--c-load); }
.flow .line.grid.active { stroke: var(--c-grid); }
@keyframes flow { to { stroke-dashoffset: -16; } }
.flow .node circle { fill: var(--bs-body-bg); stroke-width: 3; }
.flow .node text { fill: var(--bs-body-color); text-anchor: middle; }
.flow .node .icon { font-size: 26px; dominant-baseline: central; }
.flow .node .name { font-size: 13px; fill: var(--bs-secondary-color); }
.flow .node .val { font-size: 16px; font-weight: 600; }
.flow .node .sub { font-size: 12px; fill: var(--bs-secondary-color); }

.energy-tile { border-radius: .5rem; padding: .6rem .75rem; background: var(--bs-tertiary-bg); height: 100%; }
.energy-tile .stat-value { font-size: 1.2rem; }

.bar-split { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--bs-tertiary-bg); }
.bar-split div { height: 100%; }

.soc-bar { height: 8px; }

.chart-box { position: relative; height: 300px; }

.event-list { max-height: 320px; overflow-y: auto; }
.event-list .ev { font-size: .875rem; padding: .35rem 0; border-bottom: 1px solid var(--bs-border-color); }
.event-list .ev time { color: var(--bs-secondary-color); font-size: .8rem; margin-right: .5rem; }

.stale { opacity: .55; }