/* -- HEADER ------------------------------------------------------------------- */
header{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.4rem;background:var(--card);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
header h1{font-size:1.15rem;font-weight:700;letter-spacing:.04em;background:linear-gradient(135deg,var(--solar),var(--bat-dis));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hdr-right{display:flex;align-items:center;gap:.85rem}
#clock{font-family:'Roboto Mono',monospace;font-size:.88rem;color:var(--txt2)}
#conn-badge{display:flex;align-items:center;gap:.38rem;font-size:.72rem;padding:.22rem .65rem;border-radius:999px;border:1px solid var(--border);background:var(--card)}
#conn-dot{width:8px;height:8px;border-radius:50%;background:var(--offline);transition:background .3s}
#conn-dot.on{background:#22c55e;box-shadow:0 0 6px #22c55e;animation:pulse 2s infinite}
.theme-btn{background:var(--card);border:1px solid var(--border);color:var(--txt);border-radius:8px;padding:.3rem .65rem;cursor:pointer;font-size:1rem;transition:all .2s}
.theme-btn:hover{border-color:var(--solar)}
/* -- LAYOUT ------------------------------------------------------------------- */
main{padding:.85rem 1rem 2rem;max-width:1500px;margin:0 auto}
/* -- STATS BAR ---------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem;margin-bottom:.85rem}
.stat{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.75rem .95rem;backdrop-filter:blur(8px);position:relative;overflow:hidden}
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--ac,var(--solar));border-radius:12px 12px 0 0}
.stat .lbl{font-size:.68rem;color:var(--txt2);text-transform:uppercase;letter-spacing:.08em}
.stat .val{font-family:'Roboto Mono',monospace;font-size:1.5rem;font-weight:600;margin:.15rem 0}
.stat .sub{font-size:.7rem;color:var(--txt2)}
/* -- BATTERY SECTION ---------------------------------------------------------- */
.bat-sec{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin-bottom:.85rem}
/* -- SOLAR SECTION ------------------------------------------------------------ */
.sol-sec{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin-bottom:.85rem}
/* -- CHART -------------------------------------------------------------------- */
.chart-sec{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.95rem;backdrop-filter:blur(8px)}
.chart-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7rem;flex-wrap:wrap;gap:.5rem}
.chart-ttl{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--txt2)}
.chart-leg{display:flex;gap:.7rem;flex-wrap:wrap}
.leg-item{display:flex;align-items:center;gap:.28rem;font-size:.68rem;color:var(--txt2)}
.leg-dot{width:9px;height:9px;border-radius:50%}
#hchart{display:block;width:100%;border-radius:6px}
/* -- LOGO --------------------------------------------------------------------- */
.logo-icon{display:inline-block;vertical-align:middle;margin-right:.45rem;flex-shrink:0;filter:drop-shadow(0 0 6px rgba(245,158,11,.45))}
/* -- RESPONSIVE --------------------------------------------------------------- */
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}.bat-sec,.sol-sec{grid-template-columns:1fr}}
@media(max-width:480px){.stats{grid-template-columns:1fr}header h1{font-size:.95rem}}