:root{--bg:#071523;--panel:#0d2033;--line:#233d55;--text:#f3f7fc;--muted:#9bb0c7;--green:#22d8b0;--blue:#4fbdff;--red:#ff7783;--yellow:#ffc05a;--gold:#ffbd4b}
body{background:radial-gradient(ellipse at 55% 0,#112941 0,#081827 48%,#071421 100%);font-family:Inter,"Segoe UI",system-ui,sans-serif;line-height:1.5}
button,.btn{background:linear-gradient(145deg,#ffd079,#ffb739);color:#172132;border:1px solid #e5a640;border-radius:11px;padding:11px 17px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:filter .15s}
button:hover,.btn:hover{filter:brightness(1.08)}button.secondary,.btn.secondary{background:#122b40;border-color:#2c465f;color:#deebf8}.linkbtn{border:0;background:none;color:#66caff;padding:0;display:inline}.linkbtn:hover{filter:none;color:#b5e9ff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
input,select,textarea{background:#081a2a;border-color:#29465f;color:#edf5ff;padding:12px;border-radius:9px}input:focus,textarea:focus,select:focus{border-color:var(--gold)}input::placeholder,textarea::placeholder{color:#7d95ae}label{color:#c7d7e9}small{line-height:1.45}
.ui-icon{height:23px;width:23px;flex-shrink:0;vertical-align:middle}.brand{display:flex;align-items:center;gap:13px;color:#f6f8ff}.brand b{font-size:23px;font-weight:740;letter-spacing:-.04em;line-height:1.2}.brand b>span{color:var(--gold);background:none;display:inline;width:auto;height:auto;font-weight:inherit;border-radius:0}.brand-mark{display:flex!important;align-items:center;justify-content:center;width:72px!important;height:56px!important;background:#f7fafc!important;border-radius:12px!important;overflow:hidden;flex-shrink:0}.brand-mark img{display:block;object-fit:cover;width:72px;height:56px}
.app-shell{display:flex;min-height:100vh}.sidebar{width:224px;flex-shrink:0;position:fixed;inset:0 auto 0 0;border-right:1px solid #20364b;background:linear-gradient(165deg,#10263b,#091a2b 65%,#081523);padding:28px 17px 22px;display:flex;flex-direction:column;z-index:4}.sidebar>.brand{flex-direction:column;gap:13px;margin:0 0 35px}.sidebar .brand b{font-size:22px;letter-spacing:-.055em}.sidebar nav{display:flex;flex-direction:column;gap:9px;font-size:14px}.sidebar nav a{display:flex;gap:14px;align-items:center;min-height:48px;padding:11px 16px;border:1px solid transparent;border-radius:10px;color:#aec2d9}.sidebar nav a:hover{background:#143047;color:#f4f8ff}.sidebar nav a.active{background:linear-gradient(100deg,#163d56,#112d43);border-color:#29546f;box-shadow:inset 3px 0 var(--blue);color:#6fdfff}.sidebar-foot{margin-top:auto;padding:24px 13px 0;color:#6e8aa7;font-size:14px}.sidebar-foot p{line-height:1.8;letter-spacing:.02em}.sidebar-foot form{margin-top:24px}.logout-btn{background:none;border:0;color:#a5bbd2;padding:0;font-size:13px}
.workspace{margin-left:224px;min-width:0;flex:1;display:flex;flex-direction:column}.app-topbar{min-height:65px;padding:12px 34px;border-bottom:1px solid #20364b;display:flex;align-items:center;justify-content:space-between;color:#9eb3c9;font-size:13px;background:#0a1c2dbb}.app-topbar>div{display:flex;gap:22px;align-items:center}.user-label{display:inline-flex;gap:9px;align-items:center;color:#c2d6e9}.user-label svg{width:18px;color:var(--green)}.test-tag{font-size:11px;color:#c1a875;letter-spacing:.02em}
.wrap{width:100%;max-width:1600px;padding:32px 34px 42px;flex:1}.head{margin-bottom:23px;align-items:center}.head h1{font-size:clamp(27px,2.5vw,38px);line-height:1.2;letter-spacing:-.04em;margin:7px 0 9px;font-weight:760}.head p{margin:4px 0;font-size:13px}.eyebrow{color:#e9b958;font-size:10px;letter-spacing:.15em}.muted{color:var(--muted)}.panel{border:1px solid #27435d;border-radius:14px;background:linear-gradient(130deg,#10273bdf,#0a1d2fe8);box-shadow:0 10px 32px #020b1518;min-width:0}.panelhead{padding:18px 20px;border-bottom:1px solid #233c53;align-items:center;gap:12px}.panelhead h2{font-size:18px;letter-spacing:-.025em;line-height:1.35}.panelhead a{font-size:12px}.formpanel{padding:26px}.formpanel+.formpanel{margin-top:22px}.panel>p.muted{padding:0 20px}.kpis{gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:24px}.kpi{min-width:0;min-height:112px;padding:20px;border:1px solid #26435d;border-radius:12px;background:linear-gradient(120deg,#10283ec9,#0c1e30);gap:17px;box-shadow:none}.kpi>span{width:48px;height:48px;border-radius:13px;background:#0d3b3b;color:var(--green);flex-shrink:0}.kpi>div{display:flex;flex-direction:column;min-width:0}.kpi small{order:2;margin:3px 0 0;font-size:13px;color:#b7c9de}.kpi strong{order:1;line-height:1.15;font-size:29px;letter-spacing:-.04em}.tone-blue>span{color:#4bb9ff;background:#0c3551}.tone-gold>span{color:#ffc35a;background:#3c3323}.tone-red>span{color:#ff7b88;background:#372839}.tone-gold strong{color:#ffc35a}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(250px,1fr);gap:22px;margin-bottom:22px}.dashboard-bottom{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;margin-bottom:22px}.dashboard-bottom .timeline{min-width:420px;margin-top:8px;max-height:300px}.dashboard-bottom .panel{overflow:auto}.chart-body{padding:6px 16px 12px}.chart-body>.muted,.chart-body>p{font-size:11px}.flow-card .panelhead{border:0;padding-bottom:4px}.flow-card .panelhead h2{font-size:18px}.data-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:6px}.data-dot.stale{background:#b3a37b}.flow-status{padding:0 20px;font-size:11px;color:#a3b8cf}.flow-stage{position:relative;height:300px;background:#0b1b30;border-radius:0 0 14px 14px;overflow:hidden}.flow-stage>img{position:absolute;inset:0;object-fit:cover;object-position:center 64%;width:100%;height:100%;opacity:.86}.flow-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.flow-node{position:absolute;z-index:1;padding:10px 12px;border:1px solid #244158b0;background:#0a1a2be6;backdrop-filter:blur(6px);border-radius:10px;display:flex;gap:10px;min-width:145px;align-items:center;box-shadow:0 4px 15px #0002}.flow-node .ui-icon{width:27px;height:27px}.flow-node small{display:block;font-size:11px;color:#b7cbdf}.flow-node strong{font-size:20px;letter-spacing:-.025em}.flow-node em{display:block;font-style:normal;font-size:11px;color:var(--green)}.flow-solar{top:21px;left:20px;color:var(--gold)}.flow-load{bottom:19px;left:20px;color:#dce8ff}.flow-battery{top:21px;right:20px;color:var(--green)}.flow-grid{bottom:19px;right:20px;color:var(--blue)}.flow-node strong{color:#f4f8fd}.empty-flow{padding:40px 28px;min-height:300px;background:linear-gradient(0deg,#0b1b30aa,#0b1b3055),url(solar-house.png) center/cover}.empty-flow h2{font-size:26px;max-width:350px}.empty-flow p{max-width:390px;color:#b4c8da}.attention-card{padding:22px;display:flex;flex-direction:column;gap:14px}.attention-heading{display:flex;justify-content:space-between;align-items:center}.attention-heading h2{font-size:20px;margin:0;letter-spacing:-.03em}.attention-heading svg{color:var(--gold)}.attention-number{font-size:46px;line-height:1;letter-spacing:-.05em;font-weight:750;color:var(--gold)}.attention-card>p{color:#adbed2;font-size:13px;margin:0}.attention-card .btn{align-self:start}.attention-card ul{padding:0;margin:4px 0;list-style:none}.attention-card li{font-size:12px;border-top:1px solid #23394e;padding:10px 0;color:#b7c8da}.attention-card li a{color:#f0f5fb}
.status{padding:5px 9px;text-transform:none;font-size:11px;letter-spacing:0;font-weight:650;white-space:nowrap}.status.online,.status.connected,.status.success,.status.reachable{background:#073b36;color:#35e0be}.status.offline{background:#383224;color:#ffd079}.status.error{background:#412833;color:#ff94a0}.status.unknown{background:#27394a;color:#bed0e2}.status.demo{background:#3d3423;color:#ffd079}.status.standby,.status.needs_attention,.status.needs_config{background:#3e3320;color:#ffcf78}.notice{background:#10372f;border-color:#276452;color:#b4f5da}.alert{background:#3c2530;border-color:#744052;color:#ffb5be}.demo-note{font-size:11px;color:#f1c46d}.table-scroll{overflow:auto}th{font-size:10px;letter-spacing:.035em;text-transform:none;font-weight:600;color:#a2b9d2;background:#0a1b2caa}th,td{padding:14px 18px;border-color:#213b52}td{font-size:12px}td small{font-size:10px;margin-top:5px;color:#8fa9c2}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#16314955}.table-name{display:flex;align-items:center;gap:11px}.plant-thumb{display:flex;align-items:center;justify-content:center;width:40px;height:38px;border-radius:7px;background:#18374c;color:#6fc7fa;flex-shrink:0}.coverage{font-size:11px;padding:14px 20px;color:#8fa8c1}.filter-form{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:22px}.filter-form label{flex:1;min-width:200px}.filter-form input{margin:0}.inline{gap:12px}.formpanel form{gap:16px}.formpanel form.inline{display:flex}.grid{gap:18px}details{border:1px solid #29445c;border-radius:10px;padding:13px;margin:16px 0}summary{color:#bfd3e7;font-size:13px}details .grid{margin-top:18px}.copyright{border:0;text-align:left;padding:18px 34px 24px;font-size:11px;color:#91a9c3;margin-top:auto}
.auth-body{min-height:100vh;background:radial-gradient(ellipse at 20% 30%,#17365155,transparent 55%),linear-gradient(130deg,#071725,#0a1e31 65%,#0a1727)}.login{width:min(1280px,100%);min-height:calc(100vh - 62px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(35px,6vw,90px);padding:48px 46px;align-items:center}.auth-intro{min-width:0;position:relative}.auth-intro>.brand{margin-bottom:46px}.auth-intro .brand b{font-size:28px}.auth-intro h1{font-size:clamp(38px,4.4vw,61px);font-weight:750;line-height:1.08;letter-spacing:-.055em;margin:19px 0 22px}.auth-intro>p{color:#a9c0d6;font-size:16px;line-height:1.75}.auth-landscape{height:255px;margin:5px -15px 0;background:url(solar-house.png) center 60%/cover;border-radius:15px;mask-image:linear-gradient(0deg,transparent,#000 18%,#000 84%,transparent)}.auth-benefits{display:flex;gap:13px;flex-wrap:wrap;color:#9db7cf;font-size:11px;padding-top:13px}.auth-benefits span{display:inline-flex;gap:6px;align-items:center}.auth-benefits svg{width:17px;height:17px;color:#e5b354}.card{width:100%;background:linear-gradient(145deg,#10283cfa,#0b1d30);border:1px solid #2c4760;border-radius:20px;padding:33px;box-shadow:0 24px 70px #0003}.auth-card{max-width:500px;justify-self:end}.auth-card-brand{display:flex;gap:12px;align-items:center;margin-bottom:29px}.auth-card-brand b{font-size:24px;font-weight:730;letter-spacing:-.045em;color:white;line-height:1.2}.auth-card-brand b>span{color:var(--gold)}.auth-card-brand .brand-mark{width:57px!important;height:45px!important;border-radius:9px!important}.auth-card-brand img{width:57px;height:45px}.auth-card h2{font-size:29px;line-height:1.25;letter-spacing:-.04em;margin:8px 0 12px}.auth-card h1{font-size:28px;line-height:1.25;letter-spacing:-.04em}.auth-card>p:not(.eyebrow){font-size:13px;color:#a5bdd3;line-height:1.65}.auth-card form{margin-top:24px;gap:19px}.auth-card label{font-weight:550;font-size:12px}.auth-card input{height:47px}.auth-card button{min-height:46px}.auth-card .check{font-size:11px;font-weight:400;align-items:flex-start}.auth-card .check input{height:18px;width:18px;margin:0;flex-shrink:0}.auth-card form+form{margin-top:12px}.auth-card form+form button{width:100%}.auth-card .eyebrow{font-size:10px;margin-top:0}.auth-card .codebox{font-size:13px;line-height:1.8;background:#061624;border-color:#344b5c;color:#f7d497}.auth-card details{padding:11px;font-size:12px}#authenticator-qr{display:flex;justify-content:center;max-width:100%;width:max-content;padding:12px;border-radius:12px;background:white;margin:18px auto 10px}#authenticator-qr svg{width:248px;max-width:100%;height:auto}.auth-body>.copyright{text-align:center;padding:14px 24px 20px;font-size:11px}.setup-page .login{grid-template-columns:minmax(0,780px);max-width:850px;justify-content:center;gap:0}.setup-page .install-card{width:100%}.setup-page .copyright{text-align:center}.req{background:#102a3e;font-size:12px;border:1px solid #294157}.requirements{gap:9px}.timeline{max-height:330px}.chart-grid{stroke:#28445b}.chart-label{fill:#a8c1d8}.chart-pv{stroke:#20d9b1}.chart-load{stroke:#37b8ff}
@media(min-width:1750px){.wrap{padding-left:44px;padding-right:44px}.flow-stage{height:350px}}
@media(max-width:1180px){.sidebar{width:195px;padding-left:12px;padding-right:12px}.sidebar .brand b{font-size:20px}.workspace{margin-left:195px}.wrap{padding:25px 22px 34px}.app-topbar{padding-left:22px;padding-right:22px}.kpi{padding:16px;gap:10px}.kpi>span{width:39px;height:43px}.kpi strong{font-size:25px}.dashboard-grid{grid-template-columns:minmax(0,1.7fr) minmax(230px,1fr)}.dashboard-bottom{grid-template-columns:minmax(0,1fr)}.login{padding:35px;gap:38px}.auth-intro>.brand{margin-bottom:32px}.auth-card{padding:27px}.flow-node{min-width:125px;padding:9px}.flow-node strong{font-size:17px}}
@media(max-width:900px){.sidebar{position:static;width:auto;inset:auto;padding:15px 18px 10px;border-right:0;border-bottom:1px solid var(--line)}.app-shell{display:block}.sidebar>.brand{flex-direction:row;justify-content:flex-start;margin:0 0 15px;gap:12px}.sidebar>.brand .brand-mark{width:49px!important;height:38px!important}.sidebar>.brand img{width:49px;height:38px}.sidebar>.brand b{font-size:23px}.sidebar nav{flex-direction:row;overflow:auto;gap:4px}.sidebar nav a{padding:8px 11px;min-height:39px;gap:7px;white-space:nowrap;font-size:12px}.sidebar nav svg{width:18px;height:18px}.sidebar-foot{display:none}.workspace{margin:0}.app-topbar{min-height:49px}.app-topbar .user-label{font-size:11px}.app-topbar .user-label svg{display:none}.dashboard-grid{grid-template-columns:minmax(0,1.8fr) minmax(220px,1fr)}.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.copyright{padding-left:22px}.login{grid-template-columns:minmax(0,1fr);max-width:570px;padding:35px 24px;gap:30px}.auth-intro>.brand{margin-bottom:0}.auth-intro>h1,.auth-intro>.eyebrow,.auth-intro>p,.auth-intro>.auth-landscape,.auth-benefits{display:none}.auth-intro>.brand{justify-content:center}.auth-card{justify-self:center;max-width:none}.auth-card-brand{display:none}.auth-card form{margin-top:22px}.setup-page .login{padding:28px 20px}.panel{overflow:hidden}}
@media(max-width:650px){.wrap{padding:24px 15px 30px}.app-topbar{padding:10px 15px}.app-topbar>span{display:none}.app-topbar>div{justify-content:space-between;width:100%;gap:8px}.head{align-items:flex-start}.head h1{font-size:29px}.head>form{width:100%}.head>form button{width:100%}.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.kpi{min-height:94px;padding:15px}.kpi strong{font-size:27px}.kpi small{font-size:11px}.dashboard-grid{grid-template-columns:minmax(0,1fr);gap:17px}.dashboard-bottom{gap:17px}.flow-stage{height:305px}.flow-node{min-width:126px;padding:8px;gap:7px}.flow-node svg{width:22px;height:22px}.flow-solar,.flow-load{left:11px}.flow-grid,.flow-battery{right:11px}.attention-card{gap:12px}.attention-number{font-size:35px}.formpanel{padding:20px}.panelhead{padding:16px}.panelhead h2{font-size:17px}.copyright{padding-left:15px}.sidebar nav a{font-size:11px;padding:8px}.sidebar nav a svg{display:none}.auth-card{padding:25px 23px}.auth-intro .brand b{font-size:25px}.login{padding:29px 17px}.auth-card h2{font-size:28px}.requirements{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.span2{grid-column:auto}}
.portfolio-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-kpis .kpi{padding:14px;gap:10px}.portfolio-kpis .kpi strong{font-size:23px}.portfolio-kpis .kpi>span{width:34px;height:38px}.portfolio-kpis .kpi small{font-size:11px}.kpi>span:empty{display:none}.flow-card .panelhead .flow-name{font-size:inherit;color:#edf6ff}.auth-card .auth-card-brand .brand-mark{background:#f7fafc}.mobile-logout{display:none;margin:0}@media(max-width:900px){.mobile-logout{display:inline-flex}.mobile-logout .logout-btn{padding:5px}.mobile-logout .ui-icon{width:20px;height:20px}}
.portfolio-card .formpanel p{font-size:12px;line-height:1.65}.portfolio-kpis .kpi{min-height:90px}.dashboard-bottom .chart-label{font-size:15px}@media(max-width:900px){.auth-body .login{align-content:center}}@media(max-width:650px){.portfolio-kpis .kpi>span{display:none}.portfolio-kpis .kpi strong{white-space:nowrap;font-size:22px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.flow-stage{height:340px;isolation:isolate;background:#081b2c}.flow-stage>img{opacity:.48;object-position:center 64%;z-index:-1}.flow-lines{z-index:0}.flow-node{width:27%;min-width:0;min-height:78px;box-sizing:border-box;justify-content:center;transform:translateY(-50%);border-color:#35546b;background:#0a1b2cf2}.flow-solar,.flow-load{left:3%;right:auto}.flow-battery,.flow-grid{right:3%;left:auto}.flow-solar,.flow-battery{top:22%;bottom:auto}.flow-load,.flow-grid{top:78%;bottom:auto}.flow-node>div{min-width:0}.flow-node strong{display:block;white-space:nowrap;font-size:clamp(16px,1.5vw,23px)}.flow-node small{line-height:1.35}.flow-node em{margin-top:3px}.flow-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:16%;min-width:64px;max-width:100px;aspect-ratio:1;border-radius:50%;background:#102d40;border:2px solid #688ba0;box-shadow:0 0 0 7px #0a1b2c99,0 0 28px #58b9df20;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:2;color:#e5f2ff}.flow-hub>.ui-icon{width:24px;height:24px;margin-bottom:3px}.flow-hub strong{font-size:12px}.flow-hub small{font-size:9px;color:#9eb8cc}.flow-branch{--flow-color:#607789}.branch-solar{--flow-color:#ffc05a}.branch-load{--flow-color:#b8d9f6}.branch-battery{--flow-color:#22d8b0}.branch-grid{--flow-color:#47baff}.flow-track,.flow-current,.flow-chevron{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}.flow-track{stroke:#38546b;stroke-width:2;stroke-dasharray:3 6}.is-active .flow-track{stroke:var(--flow-color);stroke-width:3;stroke-dasharray:none;opacity:.35}.flow-current{stroke:var(--flow-color);stroke-width:3;stroke-dasharray:9 15;animation:flow-travel 2s linear infinite}.is-reverse .flow-current{animation-direction:reverse}.flow-chevron{stroke:var(--flow-color);stroke-width:3}.flow-caption{margin:0;padding:10px 20px 14px;font-size:10px;color:#93adc3;line-height:1.5;border-top:1px solid #203c50}@keyframes flow-travel{to{stroke-dashoffset:-48}}@media(max-width:1180px){.flow-node{padding:9px 7px;gap:7px}.flow-node>.ui-icon{width:21px;height:21px}.flow-node strong{font-size:17px}}@media(max-width:650px){.flow-stage{height:330px}.flow-node{padding:9px 4px;gap:5px;flex-direction:column;min-height:88px;text-align:center}.flow-node>.ui-icon{width:21px;height:21px}.flow-node strong{font-size:17px}.flow-node small{font-size:10px}.flow-node em{font-size:9px}.flow-hub>.ui-icon{width:19px;height:19px}.flow-hub strong{font-size:10px}.flow-hub small{font-size:8px}.flow-caption{padding:10px 14px}}

.plant-flow{margin-bottom:22px}.plant-flow .flow-stage{height:360px}.plant-flow .flow-node strong{font-size:23px}@media(max-width:650px){.plant-flow .flow-stage{height:330px}.plant-flow .flow-node strong{font-size:17px}}