:root { color-scheme: dark; --bg:#07110e; --panel:#101c18; --panel-2:#14231e; --line:rgba(220,255,235,.09); --text:#eff8f3; --muted:#8ca39a; --lime:#b7f34a; --mint:#4ad9a5; --amber:#ffbd54; --blue:#65a9ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.45; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,black,transparent 75%); }
.ambient { position:fixed; border-radius:50%; filter:blur(100px); opacity:.12; pointer-events:none; }
.ambient-one { width:520px; height:520px; background:var(--lime); right:-250px; top:-200px; }
.ambient-two { width:420px; height:420px; background:var(--mint); left:-260px; top:45%; }
.topbar { position:sticky; top:0; z-index:10; min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:0 max(28px,calc((100vw - 1320px)/2)); border-bottom:1px solid var(--line); background:rgba(7,17,14,.84); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:38px; aspect-ratio:1; border-radius:12px; color:#0a140e; font:800 19px/1 Georgia,serif; background:var(--lime); box-shadow:0 0 30px rgba(183,243,74,.18); }
.brand strong,.brand small { display:block; }.brand strong { font-size:14px; letter-spacing:.01em; }.brand small { margin-top:2px; color:var(--muted); font-size:11px; }
nav { display:flex; align-self:stretch; gap:30px; } nav a { position:relative; display:grid; place-items:center; color:var(--muted); text-decoration:none; font-size:13px; } nav a:hover,nav a.active { color:var(--text); } nav a.active::after { content:""; position:absolute; height:2px; left:0; right:0; bottom:0; background:var(--lime); }
.status-pill { display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:12px; }.status-pill i { width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px rgba(255,189,84,.1); }.status-pill.online i { background:var(--mint); box-shadow:0 0 0 4px rgba(74,217,165,.1); }
main { width:min(1320px,calc(100% - 56px)); margin:0 auto; padding:58px 0 80px; }
.intro { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:34px; }.intro-copy { max-width:760px; }.eyebrow,.section-kicker { margin:0 0 9px; color:var(--lime); font-size:10px; font-weight:750; letter-spacing:.18em; text-transform:uppercase; }.intro h1 { margin:0; max-width:760px; font:500 clamp(38px,5.5vw,72px)/.98 Georgia,"Times New Roman",serif; letter-spacing:-.045em; }.intro h1 em { color:var(--lime); font-weight:400; }.updated { min-width:180px; padding-bottom:5px; text-align:right; }.updated span,.updated strong { display:block; }.updated span { color:var(--muted); font-size:11px; }.updated strong { margin-top:4px; font-size:13px; }
.panel { border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg,rgba(19,34,29,.96),rgba(12,25,21,.94)); box-shadow:0 24px 70px rgba(0,0,0,.16); }
.flow-card { padding:27px 30px 32px; }.flow-heading,.section-head { display:flex; align-items:center; justify-content:space-between; gap:20px; }.flow-heading h2,.section-head h2 { margin:0; font:500 22px/1.1 Georgia,serif; }.mode { padding:7px 11px; border-radius:8px; color:var(--mint); background:rgba(74,217,165,.08); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.energy-flow { position:relative; display:grid; grid-template-columns:1fr 1.2fr 1fr; grid-template-rows:150px 122px; align-items:center; max-width:940px; margin:20px auto 0; }.flow-node { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; width:150px; min-height:118px; justify-self:center; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,#10231c,#0d1c17); }.flow-node small { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.12em; }.flow-node strong { margin-top:4px; font-size:17px; }.flow-node strong b { font-size:24px; }.flow-node > span:last-child { margin-top:2px; color:var(--muted); font-size:11px; }.node-icon-generated { display:block; width:55px; height:55px; margin-bottom:1px; object-fit:contain; }.inverter-icon-generated { width:70px; height:70px; margin-bottom:0; }.inverter-node { grid-column:2; grid-row:1 / 3; width:178px; min-height:174px; border-color:rgba(183,243,74,.24); box-shadow:0 0 50px rgba(183,243,74,.06); }.solar-node { grid-column:1; grid-row:1; }.grid-node { grid-column:3; grid-row:1; }.home-node { grid-column:3; grid-row:2; }.battery-node { grid-column:1; grid-row:2; }
.flow-line { --flow-color:var(--lime); position:absolute; z-index:1; height:2px; overflow:visible; opacity:.13; background:color-mix(in srgb,var(--flow-color) 45%,transparent); transform-origin:left center; transition:opacity .35s ease,filter .35s ease; }.flow-line i { position:absolute; display:none; width:9px; height:9px; top:-4px; border-top:2px solid var(--flow-color); border-right:2px solid var(--flow-color); transform:rotate(45deg); filter:drop-shadow(0 0 5px var(--flow-color)); }.flow-line.active { opacity:1; filter:drop-shadow(0 0 5px color-mix(in srgb,var(--flow-color) 35%,transparent)); }.flow-line.active i { display:block; animation:travel 2.2s linear infinite; }.flow-line.reverse i { animation-direction:reverse; transform:rotate(225deg); }.line-solar { --flow-color:var(--amber); width:28%; left:21%; top:30%; }.line-grid { --flow-color:var(--blue); width:28%; left:51%; top:30%; }.line-home { --flow-color:var(--mint); width:29%; left:51%; top:68%; transform:rotate(14deg); }.line-battery { --flow-color:var(--lime); width:29%; left:21%; top:68%; transform:rotate(-14deg); }.line-battery i { animation-delay:-1.2s!important; }.line-home i { animation-delay:-.6s!important; }.flow-node { transition:opacity .35s ease,border-color .35s ease; }.flow-node.idle { opacity:.48; }.inverter-node.idle { opacity:1; } @keyframes travel { from { left:0; } to { left:calc(100% - 9px); } }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px; }.metric { min-height:148px; padding:22px; }.metric > span,.metric strong,.metric small { display:block; }.metric > span { color:var(--muted); font-size:11px; }.metric strong { margin:18px 0 7px; font-size:18px; }.metric strong b { font:500 32px/1 Georgia,serif; }.metric small { color:#678077; font-size:10px; }.metric.accent-lime { background:linear-gradient(145deg,#b7f34a,#8fdd3b); color:#10200f; }.metric.accent-lime > span,.metric.accent-lime small { color:rgba(16,32,15,.66); }
.chart-panel { margin-top:14px; padding:28px 30px 25px; }.range-picker { display:flex; padding:3px; border:1px solid var(--line); border-radius:10px; background:rgba(0,0,0,.12); }.range-picker button { border:0; padding:7px 11px; border-radius:7px; color:var(--muted); background:transparent; cursor:pointer; font:inherit; font-size:10px; }.range-picker button.active { color:#0e1a13; background:var(--lime); }.chart-wrap { position:relative; height:310px; margin-top:26px; }.chart-wrap canvas { width:100%; height:100%; }.legend { display:flex; flex-wrap:wrap; gap:20px; margin-top:14px; color:var(--muted); font-size:10px; }.legend span { display:flex; align-items:center; gap:7px; }.legend i { width:18px; height:2px; }.legend-solar { background:var(--lime); }.legend-load { background:var(--mint); }.legend-grid { background:var(--blue); }
.lower-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,.72fr); gap:14px; margin-top:14px; }.report-card,.insight-card { padding:28px 30px; }.export-link { color:var(--lime); font-size:11px; text-decoration:none; }.table-scroll { overflow-x:auto; } table { width:100%; margin-top:24px; border-collapse:collapse; font-size:11px; } th { color:#6e887e; font-weight:600; text-align:left; } th,td { padding:13px 10px; border-bottom:1px solid var(--line); white-space:nowrap; } td { color:#cbd9d3; } td:last-child { color:var(--lime); }.insight-card { position:relative; overflow:hidden; }.insight-art { position:relative; width:138px; aspect-ratio:1; margin:19px 0 21px; overflow:hidden; border:1px solid rgba(255,189,84,.18); border-radius:28px; background:#06100d; box-shadow:0 18px 48px rgba(0,0,0,.28),0 0 40px rgba(255,189,84,.08); }.insight-art::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 30px rgba(5,15,12,.25); }.insight-art img { width:100%; height:100%; object-fit:cover; display:block; }.insight-card h2 { margin:0 0 10px; font:500 24px/1.1 Georgia,serif; }.insight-card p { min-height:66px; margin:0; color:var(--muted); font-size:12px; }.quality { display:flex; justify-content:space-between; margin-top:23px; padding-top:15px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }.quality strong { color:var(--text); }
footer { display:flex; justify-content:space-between; gap:24px; width:min(1320px,calc(100% - 56px)); margin:0 auto; padding:26px 0 38px; border-top:1px solid var(--line); color:#60756d; font-size:10px; }
@media (max-width:900px) { nav { display:none; }.metrics { grid-template-columns:repeat(2,1fr); }.lower-grid { grid-template-columns:1fr; }.energy-flow { transform:scale(.9); margin-inline:-5%; }.chart-wrap { height:270px; } }
@media (max-width:620px) { .topbar { padding:0 18px; }.status-pill span { display:none; }.intro { align-items:start; flex-direction:column; }.updated { align-self:stretch; text-align:left; }.intro h1 { font-size:43px; } main { width:calc(100% - 28px); padding-top:38px; }.flow-card,.chart-panel,.report-card,.insight-card { padding:22px 18px; }.flow-heading { align-items:start; }.energy-flow { grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,140px); transform:none; margin:20px 0 0; }.inverter-node { grid-column:1 / 3; grid-row:2; width:150px; min-height:118px; }.solar-node { grid-column:1; grid-row:1; }.grid-node { grid-column:2; grid-row:1; }.battery-node { grid-column:1; grid-row:3; }.home-node { grid-column:2; grid-row:3; }.flow-node { width:120px; min-height:104px; }.flow-line { display:block; z-index:3; width:25%; height:3px; }.flow-line i { width:12px; height:12px; top:-5px; border-width:3px; }.line-solar { left:25%; top:29.5%; transform:rotate(20deg); }.line-grid { left:50%; top:34.5%; transform:rotate(-20deg); }.line-battery { left:25%; top:70.5%; transform:rotate(-20deg); }.line-home { left:50%; top:65.5%; transform:rotate(20deg); }.flow-line.active i { animation-duration:1.55s; }.metrics { grid-template-columns:1fr 1fr; }.metric { min-height:132px; padding:18px 15px; }.metric strong b { font-size:27px; }.section-head { align-items:flex-start; flex-direction:column; }.range-picker { width:100%; }.range-picker button { flex:1; padding-inline:4px; }.chart-wrap { height:230px; }.legend { gap:11px; } footer { width:calc(100% - 28px); flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation:none!important; } }