/* Live energy management demonstration */
.monitor-demo{position:relative;overflow:hidden;color:#eafff8;background:linear-gradient(132deg,#062b42,#063d53 56%,#075564)}.monitor-demo::before{position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(151,240,228,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(151,240,228,.35) 1px,transparent 1px);background-size:54px 54px;content:''}.monitor-demo .container{position:relative}.monitor-heading h2{color:#f3fffc}.monitor-heading>p{color:#afcdd0}.monitor-heading .eyebrow{color:#97e1d7}.monitor-console{overflow:hidden;border:1px solid rgba(167,237,225,.34);border-radius:16px;background:rgba(4,35,52,.78);box-shadow:0 23px 54px rgba(1,21,34,.32);backdrop-filter:blur(12px)}.monitor-console-head,.monitor-console-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 20px;border-bottom:1px solid rgba(164,228,220,.2);font:500 9px var(--mono);letter-spacing:.08em}.monitor-console-head>div{display:flex;align-items:center;gap:8px;color:#a8ccc9}.monitor-console-head b{margin-left:8px;color:#effff9;font:700 10px var(--body);letter-spacing:0}.monitor-console-head p{margin:0;color:#abc5c9}.monitor-live-dot,.monitor-console-foot i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(216,245,118,.48);animation:monitor-pulse 1.9s infinite}
.monitor-layout{display:grid;grid-template-columns:270px minmax(0,1fr);min-height:413px}.monitor-summary{display:flex;flex-direction:column;padding:22px 19px;border-right:1px solid rgba(164,228,220,.2);background:rgba(4,27,43,.24)}.monitor-total{padding:0 0 18px;border-bottom:1px solid rgba(164,228,220,.16)}.monitor-total>span,.monitor-metric span{display:block;color:#9bbfc1;font:500 8px var(--mono);letter-spacing:.075em;text-transform:uppercase}.monitor-total strong{display:block;margin-top:4px;color:#f4fffb;font:700 32px/1 var(--body);letter-spacing:-.07em}.monitor-total strong i,.monitor-metric strong i{font-style:normal}.monitor-total small,.monitor-metric small{margin-left:3px;color:#a3cbd0;font:500 10px var(--mono);letter-spacing:0}.monitor-total p{margin:6px 0 0;color:#9bbabf;font-size:8px}.monitor-metrics{display:grid;gap:8px;margin-top:16px}.monitor-metric{position:relative;padding-left:12px}.monitor-metric::before{position:absolute;top:5px;left:0;width:5px;height:5px;border:1px solid #85babc;border-radius:50%;content:''}.monitor-metric-pv::before{border-color:var(--lime);background:var(--lime);box-shadow:0 0 9px rgba(216,245,118,.55)}.monitor-metric-export::before{border-color:#7ce3dd;background:#7ce3dd}.monitor-metric-charge::before{border-color:#aaf0b6;background:#aaf0b6}.monitor-metric strong{display:block;margin-top:1px;color:#effffc;font:700 18px/1.14 var(--body);letter-spacing:-.055em}.monitor-metric small{font-size:8px}.monitor-scenarios{display:flex;gap:6px;margin-top:auto;padding-top:17px}.monitor-scenarios button{flex:1;padding:8px 4px;border:1px solid rgba(166,230,221,.32);border-radius:5px;color:#b8d9d8;background:rgba(8,60,75,.48);font:700 8px/1.2 var(--body);transition:color .22s ease,border-color .22s ease,background .22s ease}.monitor-scenarios button:hover,.monitor-scenarios button.is-selected{border-color:var(--lime);color:#092d3d;background:var(--lime)}
.energy-flow-stage{position:relative;min-width:0;min-height:413px;overflow:hidden;background:radial-gradient(circle at 50% 47%,rgba(48,164,166,.15),transparent 37%)}.energy-flow-stage::before{position:absolute;inset:0;opacity:.24;background-image:radial-gradient(circle,rgba(154,234,224,.35) 1px,transparent 1.5px);background-size:16px 16px;mask-image:linear-gradient(90deg,transparent,black 14%,black 86%,transparent);content:''}.energy-flow-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.flow-line{fill:none;stroke:rgba(148,211,205,.24);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 11;transition:opacity .35s ease,stroke .35s ease}.flow-pv{stroke:#d8f576;stroke-dasharray:1 12;animation:flow-down 1.05s linear infinite}.flow-grid-in,.flow-battery-out{animation:flow-right 1.05s linear infinite}.flow-grid-out,.flow-battery-in{animation:flow-left 1.05s linear infinite}.flow-line:not(.is-active){animation-play-state:paused;opacity:.25;stroke:rgba(148,211,205,.28)}.energy-node{position:absolute;z-index:1;display:grid;justify-items:center;gap:4px;text-align:center}.energy-node b{color:#effffc;font:700 9px/1.1 var(--body);letter-spacing:.08em}.energy-node small{max-width:112px;color:#9dc6c6;font:500 8px/1.2 var(--mono)}.energy-node-icon{position:relative;display:grid;width:52px;height:52px;place-items:center;border:1px solid rgba(181,240,228,.64);border-radius:13px;color:#eafff6;background:linear-gradient(145deg,#0d5e72,#073a53);box-shadow:0 9px 19px rgba(1,26,40,.32)}.energy-node-pv{top:24px;left:50%;transform:translateX(-50%)}.sun-node{border-color:rgba(224,250,137,.85);color:var(--lime);font-size:32px;line-height:1;box-shadow:0 0 0 6px rgba(216,245,118,.08),0 10px 19px rgba(1,26,40,.32)}.energy-node-grid{top:176px;left:12%}.grid-node{overflow:hidden;padding-top:9px;align-content:start}.grid-node::before,.grid-node::after{position:absolute;left:50%;width:20px;height:2px;background:#b9eee5;transform:translateX(-50%);content:''}.grid-node::before{top:16px}.grid-node::after{top:28px}.grid-node i{position:absolute;left:50%;bottom:8px;width:2px;height:25px;background:#b9eee5;transform-origin:bottom}.grid-node i:nth-child(1){transform:translateX(-50%) rotate(-29deg)}.grid-node i:nth-child(2){transform:translateX(-50%)}.grid-node i:nth-child(3){transform:translateX(-50%) rotate(29deg)}
.energy-node-load{top:171px;left:50%;transform:translateX(-50%)}.load-node{gap:4px;align-content:center;padding:10px}.load-node::before{position:absolute;bottom:9px;left:9px;width:30px;height:2px;background:#b9eee5;content:''}.load-node i{align-self:end;width:6px;background:#b9eee5}.load-node i:nth-child(1){height:17px}.load-node i:nth-child(2){height:25px}.load-node i:nth-child(3){height:13px}.energy-node-battery{top:176px;right:12%}.battery-node{padding:9px}.battery-node::after{position:absolute;top:19px;right:-4px;width:3px;height:13px;border-radius:0 2px 2px 0;background:#b9eee5;content:''}.battery-node i{width:100%;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--lime) 0 68%,rgba(185,238,229,.16) 68%)}.flow-caption{position:absolute;color:rgba(183,226,222,.55);font:500 7px var(--mono);letter-spacing:.07em;text-transform:uppercase}.flow-caption-pv{top:134px;left:calc(50% + 17px)}.flow-caption-grid{top:260px;left:19%}.flow-caption-battery{top:260px;right:17%}.monitor-console-foot{min-height:41px;padding-block:12px;border-top:1px solid rgba(164,228,220,.2);border-bottom:0;color:#a5c9c8;font-size:8px}.monitor-console-foot span{display:flex;align-items:center;gap:7px}.monitor-console-foot span:last-child{color:#77a6ab;font-size:7px}.monitor-console-foot i{width:5px;height:5px;animation:none;box-shadow:none}@keyframes flow-down{to{stroke-dashoffset:-26}}@keyframes flow-right{to{stroke-dashoffset:-26}}@keyframes flow-left{to{stroke-dashoffset:26}}@keyframes monitor-pulse{70%{box-shadow:0 0 0 7px rgba(216,245,118,0)}100%{box-shadow:0 0 0 0 rgba(216,245,118,0)}}
@media(max-width:780px){.monitor-layout{grid-template-columns:1fr}.monitor-summary{border-right:0;border-bottom:1px solid rgba(164,228,220,.2)}.monitor-total{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px}.monitor-total>span{grid-column:1}.monitor-total strong{grid-column:1;margin-top:3px}.monitor-total p{grid-column:2;grid-row:1 / span 2;margin:0;max-width:150px}.monitor-metrics{grid-template-columns:repeat(3,1fr)}.monitor-scenarios{max-width:260px}.energy-flow-stage{min-height:390px}.energy-node-grid{left:8%}.energy-node-battery{right:8%}}
@media(max-width:500px){.monitor-demo{padding-block:72px}.monitor-console{border-radius:11px}.monitor-console-head{align-items:flex-start;padding:13px 14px}.monitor-console-head p{padding-top:1px;font-size:7px}.monitor-console-head b{display:block;margin:2px 0 0}.monitor-console-head>div{display:block}.monitor-live-dot{margin-right:6px}.monitor-summary{padding:17px 14px}.monitor-metrics{grid-template-columns:repeat(2,1fr);gap:12px 8px}.monitor-metric strong{font-size:16px}.monitor-scenarios{max-width:none}.energy-flow-stage{min-height:382px}.energy-node-icon{width:45px;height:45px;border-radius:11px}.sun-node{font-size:27px}.energy-node{gap:3px}.energy-node b{font-size:8px}.energy-node small{max-width:86px;font-size:7px}.energy-node-pv{top:23px}.energy-node-grid{top:174px;left:2%}.energy-node-load{top:169px}.energy-node-battery{top:174px;right:2%}.flow-caption{display:none}.monitor-console-foot{padding:10px 14px}.monitor-console-foot span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.monitor-live-dot,.flow-line{animation:none!important}.flow-line{stroke-dasharray:none}.monitor-scenarios button{transition:none}}

.energy-node-icon.energy-photo{width:78px;height:60px;overflow:hidden;padding:0;border-color:rgba(196,242,233,.72);background:#0a4459}.energy-node-icon.energy-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.08) brightness(.88)}.energy-node-icon.energy-photo::after{position:absolute;inset:0;border:1px solid rgba(216,245,118,.14);border-radius:inherit;box-shadow:inset 0 -20px 22px rgba(3,30,43,.28);content:''}@media(max-width:500px){.energy-node-icon.energy-photo{width:58px;height:48px}}

.energy-node-icon.energy-illustration{width:70px;height:70px;overflow:hidden;padding:8px;border:0;border-radius:10px;background:#f8f8f3;box-shadow:0 9px 19px rgba(1,26,40,.32)}.energy-node-icon.energy-illustration img{width:100%;height:100%;object-fit:contain;filter:none}.energy-node-icon.energy-illustration::after{display:none}@media(max-width:500px){.energy-node-icon.energy-illustration{width:58px;height:58px;padding:7px}}

.flow-direction{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid rgba(179,231,223,.25);border-radius:999px;color:#c8e6e1;background:rgba(4,39,56,.78);font:700 7px/1 var(--mono);letter-spacing:.08em;white-space:nowrap}.flow-direction::after{font-size:12px;line-height:.6}.flow-direction[data-direction="left"]::after{content:"\2190"}.flow-direction[data-direction="right"]::after{content:"\2192"}.flow-direction-grid{top:298px;left:15%}.flow-direction-battery{top:298px;right:13%}@media(max-width:500px){.flow-direction{padding:4px 6px;font-size:6px}.flow-direction-grid{top:296px;left:6%}.flow-direction-battery{top:296px;right:5%}}

.monitor-metric-pv strong{color:var(--lime)}.monitor-metric-import::before{border-color:#ffbe71;background:#ffbe71;box-shadow:0 0 9px rgba(255,190,113,.48)}.monitor-metric-import strong{color:#ffd39a}.monitor-metric-export strong{color:#8cedea}.monitor-metric-discharge::before{border-color:#c4a5ff;background:#c4a5ff;box-shadow:0 0 9px rgba(196,165,255,.45)}.monitor-metric-discharge strong{color:#d4c0ff}.monitor-metric-charge strong{color:#b7f5ae}.flow-line.is-active{stroke-width:3.5}.monitor-console[data-monitor-mode="solar"] .flow-grid-out.is-active{stroke:#78e6e0;filter:drop-shadow(0 0 4px rgba(120,230,224,.65))}.monitor-console[data-monitor-mode="solar"] .flow-battery-in.is-active{stroke:#b7f5ae;filter:drop-shadow(0 0 4px rgba(183,245,174,.55))}.monitor-console[data-monitor-mode="battery"] .flow-grid-in.is-active{stroke:#ffc473;filter:drop-shadow(0 0 4px rgba(255,196,115,.6))}.monitor-console[data-monitor-mode="battery"] .flow-battery-out.is-active{stroke:#c4a5ff;filter:drop-shadow(0 0 4px rgba(196,165,255,.6))}.flow-direction[data-tone="export"]{color:#8cece7;border-color:rgba(120,230,224,.54);background:rgba(7,91,103,.68)}.flow-direction[data-tone="import"]{color:#ffd49a;border-color:rgba(255,196,115,.56);background:rgba(111,70,23,.55)}.flow-direction[data-tone="charge"]{color:#c5f9b9;border-color:rgba(183,245,174,.52);background:rgba(35,91,56,.54)}.flow-direction[data-tone="discharge"]{color:#d9c8ff;border-color:rgba(196,165,255,.58);background:rgba(68,49,107,.6)}.flow-direction[data-tone]::after{animation:direction-nudge .85s ease-in-out infinite alternate}@keyframes direction-nudge{to{transform:translateX(var(--direction-shift,2px))}}.flow-direction[data-direction="left"]{--direction-shift:-2px}