.sld-card{padding:20px}.sld{display:grid;grid-template-columns:1fr 120px 1fr 120px 1fr;align-items:center;gap:10px}.sld-node{min-height:150px;border-radius:18px;border:1px solid;padding:18px;text-align:center;display:grid;place-items:center;align-content:center;gap:7px}.sld-node .icon{font-size:36px}.sld-node .reading{font-size:21px;font-weight:900}.sld-node .sub{font-size:10px;opacity:.72}.node-pv{background:linear-gradient(145deg,rgba(251,191,36,.19),rgba(78,52,8,.25));border-color:#8b6c22;color:#ffe28b}.node-inverter{background:linear-gradient(145deg,rgba(139,92,246,.18),rgba(47,34,91,.26));border-color:#644ba4;color:#d6c4ff}.node-grid{background:linear-gradient(145deg,rgba(36,200,255,.18),rgba(8,61,86,.28));border-color:#2d7190;color:#9eeaff}.flowline{height:10px;border-radius:999px;background:#152740;position:relative;overflow:hidden}.flowline:before{content:"";position:absolute;inset:1px;width:55%;border-radius:999px;background:linear-gradient(90deg,var(--yellow),var(--green),var(--cyan));animation:flow 1.55s linear infinite}.flow2:before{background:linear-gradient(90deg,var(--purple),var(--blue),var(--cyan));animation-duration:1.25s}@keyframes flow{from{transform:translateX(-110%)}to{transform:translateX(210%)}}.chart-card{padding:17px}.chart-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.legend-chip{display:inline-flex;align-items:center;gap:7px;background:#091728;border:1px solid #293d58;border-radius:999px;padding:5px 8px;font-size:10px;color:#b8cae0}.legend-chip i{width:8px;height:8px;border-radius:50%}.chart{display:block;width:100%;height:320px;background:linear-gradient(180deg,#081426,#09182b);border:1px solid rgba(76,106,147,.27);border-radius:14px}.chart-small{height:285px}.param-card b{display:block;margin-bottom:8px}.all-data-table td:first-child{font-weight:750;color:#b7c8de}.all-data-table td:nth-child(2){color:#fff;font-weight:650}
/* V5 SCADA single-line diagram */
.sld-pro{--dc-flow-speed:1.5s;--ac-flow-speed:1.35s;overflow:hidden;background:radial-gradient(circle at 18% 0%,rgba(251,191,36,.09),transparent 28%),radial-gradient(circle at 78% 15%,rgba(36,200,255,.08),transparent 27%),linear-gradient(180deg,#09182b,#071321);border-color:rgba(82,116,160,.35)}
.sld-statusbar{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:12px 14px;margin-bottom:18px;border:1px solid rgba(94,129,173,.25);border-radius:14px;background:rgba(3,13,25,.54)}
.sld-statusbar>div:first-child{display:grid;grid-template-columns:12px auto;column-gap:8px;align-items:center}.sld-statusbar small{grid-column:2;color:var(--muted);font-size:10px;margin-top:2px}.status-light{width:10px;height:10px;border-radius:50%;background:#64748b;box-shadow:0 0 0 4px rgba(100,116,139,.13)}
.sld-statusbar.status-normal .status-light{background:var(--green);box-shadow:0 0 13px var(--green),0 0 0 4px rgba(50,213,131,.12)}.sld-statusbar.status-normal b{color:#a7f3d0}.sld-statusbar.status-warning .status-light{background:var(--yellow);box-shadow:0 0 13px var(--yellow),0 0 0 4px rgba(251,191,36,.12)}.sld-statusbar.status-warning b{color:#fde68a}.sld-statusbar.status-fault .status-light,.sld-statusbar.status-offline .status-light{background:var(--red);box-shadow:0 0 13px var(--red),0 0 0 4px rgba(239,68,68,.12)}.sld-statusbar.status-fault b,.sld-statusbar.status-offline b{color:#fca5a5}
.sld-status-metrics{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.sld-status-metrics span{padding:6px 9px;border-radius:999px;background:#0b1b30;border:1px solid #263d5d;color:#89a3c3;font-size:10px}.sld-status-metrics b{color:#fff;margin-left:4px}
.sld-pro-grid{display:grid;grid-template-columns:minmax(180px,1fr) 115px minmax(200px,1fr) 115px minmax(180px,1fr);align-items:center;gap:10px;position:relative}.energy-device{min-height:236px;padding:16px;border-radius:18px;border:1px solid rgba(96,130,172,.34);display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:14px;box-shadow:inset 0 1px rgba(255,255,255,.03),0 14px 32px rgba(0,0,0,.12)}.device-pv{background:linear-gradient(145deg,rgba(251,191,36,.15),rgba(54,43,8,.17))}.device-inverter{background:linear-gradient(145deg,rgba(139,92,246,.16),rgba(29,25,67,.18))}.device-grid{background:linear-gradient(145deg,rgba(36,200,255,.14),rgba(8,50,70,.2))}.device-visual{height:112px;display:grid;place-items:center;position:relative}.device-copy{min-width:0}.device-kicker{font-size:9px;letter-spacing:1.5px;color:#7f9aba;font-weight:900}.device-copy h3{margin:4px 0 9px;font-size:14px}.device-copy>strong{display:block;font-size:24px;line-height:1.1;color:#fff}.device-values{display:grid;gap:6px;margin-top:14px}.device-values span{display:flex;justify-content:space-between;gap:8px;color:#7f98b7;font-size:10px;border-top:1px dashed rgba(102,132,171,.22);padding-top:6px}.device-values b{color:#ddebfa;text-align:right}.sun-disc{position:absolute;top:-7px;right:0;font-size:26px;filter:drop-shadow(0 0 8px rgba(251,191,36,.6));animation:sunPulse 2.8s ease-in-out infinite}.solar-panel{width:82px;height:66px;transform:skewY(-6deg);display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:5px;border:3px solid #b8d8f4;border-radius:4px;background:#203b64;box-shadow:0 12px 22px rgba(0,0,0,.28)}.solar-panel i{background:linear-gradient(145deg,#2563eb,#0ea5e9 60%,#164e63);border:1px solid rgba(255,255,255,.25)}@keyframes sunPulse{50%{transform:scale(1.08);filter:drop-shadow(0 0 13px rgba(251,191,36,.8))}}
.inverter-box{width:82px;height:104px;border-radius:12px;background:linear-gradient(160deg,#f8fafc,#d9e2ef);color:#14243b;border:2px solid #fff;box-shadow:0 14px 28px rgba(0,0,0,.28);display:grid;grid-template-columns:1fr auto 1fr;align-content:center;align-items:center;padding:10px;gap:2px}.inverter-box span{grid-column:1/-1;text-align:center;font-size:9px;font-weight:900;color:#e11d48;margin-bottom:8px}.inverter-box i{font-style:normal;font-size:9px;font-weight:900;text-align:center;color:#334155}.inverter-box em{font-style:normal;color:#7c3aed;font-size:18px}.inverter-box b{grid-column:1/-1;text-align:center;color:#f59e0b;margin-top:9px;font-size:18px}
.grid-visual{overflow:hidden}.tower{font-size:62px;line-height:1;color:#9bdcff;filter:drop-shadow(0 0 8px rgba(36,200,255,.24));transform:scaleX(.72)}.grid-lines{position:absolute;inset:20px 0 auto;height:42px}.grid-lines i{position:absolute;left:8px;right:8px;height:1px;background:rgba(158,234,255,.52)}.grid-lines i:nth-child(1){top:8px}.grid-lines i:nth-child(2){top:20px}.grid-lines i:nth-child(3){top:32px}
.energy-link{display:grid;gap:9px;align-items:center;text-align:center}.energy-link>span{font-size:9px;font-weight:900;letter-spacing:1.2px;color:#7895b8}.flow-track{height:13px;border-radius:999px;background:#10243b;border:1px solid rgba(97,134,179,.24);position:relative;overflow:hidden;box-shadow:inset 0 0 8px rgba(0,0,0,.4)}.flow-track i{position:absolute;top:2px;width:24px;height:7px;border-radius:999px;left:-30px;animation:powerFlow var(--dc-flow-speed) linear infinite}.link-dc .flow-track i{background:linear-gradient(90deg,#fbbf24,#32d583)}.link-ac .flow-track i{background:linear-gradient(90deg,#8b5cf6,#24c8ff);animation-duration:var(--ac-flow-speed)}.flow-track i:nth-child(2){animation-delay:-.45s}.flow-track i:nth-child(3){animation-delay:-.9s}@keyframes powerFlow{to{left:110%}}.sld-pro.no-dc-flow .link-dc .flow-track i,.sld-pro.no-ac-flow .link-ac .flow-track i{animation-play-state:paused;opacity:.12}
.load-branch{grid-column:5;display:grid;justify-items:center;margin-top:3px}.branch-line{height:38px;width:4px;background:#163250;border-radius:999px;position:relative;overflow:hidden}.branch-line i{position:absolute;left:0;right:0;height:12px;background:linear-gradient(#24c8ff,#32d583);animation:branchFlow 1.2s linear infinite}@keyframes branchFlow{from{top:-13px}to{top:42px}}.load-card{width:100%;padding:10px 12px;border-radius:13px;background:rgba(10,34,53,.78);border:1px solid rgba(36,200,255,.22);display:flex;align-items:center;gap:10px}.building-icon{font-size:28px;color:#9eeaff}.load-card div:last-child{display:grid}.load-card span{font-size:9px;color:#7da0be;font-weight:900}.load-card b{font-size:11px}.load-card small{font-size:9px;color:#6f89a6;margin-top:2px}.sld-live-footer{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1px solid rgba(91,125,167,.2);font-size:9px;color:#7892b2}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.dc-dot{background:var(--green);box-shadow:0 0 8px var(--green)}.ac-dot{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
@media(max-width:1180px){.sld-pro-grid{grid-template-columns:1fr 70px 1fr 70px 1fr}.energy-device{grid-template-columns:1fr;text-align:center}.device-values span{text-align:left}.device-values b{text-align:right}.device-visual{height:100px}}
@media(max-width:820px){.sld-statusbar{align-items:flex-start;flex-direction:column}.sld-status-metrics{justify-content:flex-start}.sld-pro-grid{grid-template-columns:1fr}.energy-link{height:54px;justify-items:center}.flow-track{width:13px;height:45px}.flow-track i{left:2px;top:-24px;width:7px;height:24px;animation-name:powerFlowVertical}.link-ac .flow-track i{animation-name:powerFlowVertical}.flow-track i:nth-child(2){display:none}.flow-track i:nth-child(3){display:none}@keyframes powerFlowVertical{to{top:110%}}.load-branch{grid-column:1}.energy-device{grid-template-columns:90px 1fr;text-align:left}.device-visual{height:105px}}
/* V6: AC phase cards + MPPT detail */
.phase-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.phase-card{padding:16px;overflow:hidden;position:relative}.phase-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px}.phase-a:before{background:#3b82f6}.phase-b:before{background:#fbbf24}.phase-c:before{background:#ec4899}.phase-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.phase-head span{font-size:12px;font-weight:900;letter-spacing:1.2px}.phase-head b{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#0b1c31;border:1px solid #29415f;font-size:11px}.phase-readings{display:grid;grid-template-columns:1fr 1fr;gap:10px}.phase-readings div{padding:12px;border-radius:13px;background:rgba(7,20,37,.66);border:1px solid rgba(90,125,168,.22)}.phase-readings small,.mppt-values small{display:block;color:#7893b3;font-size:9px;margin-bottom:6px}.phase-readings strong{font-size:16px;color:#f8fbff}
.mppt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.mppt-card{padding:16px;position:relative;overflow:hidden}.mppt-card:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-35px;top:-35px;opacity:.15}.mppt-1:after{background:#24c8ff}.mppt-2:after{background:#32d583}.mppt-3:after{background:#fbbf24}.mppt-4:after{background:#ec4899}.mppt-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.mppt-title span{font-size:12px;font-weight:900;letter-spacing:1px}.mppt-title b{font-size:12px;color:#d9e9fb}.mppt-values{display:grid;grid-template-columns:1fr 1fr;gap:9px}.mppt-values div{padding:11px;border-radius:12px;background:#08172a;border:1px solid rgba(89,123,165,.24)}.mppt-values strong{font-size:15px}.mppt-charts{margin-top:14px}.sld-mppt-mini{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:10px}.sld-mppt-mini span{font-size:8px;color:#7f98b7;padding:5px 6px;border-radius:8px;background:rgba(5,18,32,.62);border:1px solid rgba(90,125,168,.18)}.sld-mppt-mini b{display:block;color:#dceafa;margin-top:2px;font-size:8px}
@media(max-width:1180px){.phase-grid,.mppt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:680px){.phase-grid,.mppt-grid{grid-template-columns:1fr}.phase-readings,.mppt-values{grid-template-columns:1fr 1fr}}
/* V7: Monthly Power Yield, electrical equipment symbols and digital phase gauges */
.kpi-monthly{background:linear-gradient(145deg,rgba(14,165,233,.18),rgba(8,47,73,.72));border-color:rgba(56,189,248,.34)}
.kpi-monthly:before{background:linear-gradient(90deg,#38bdf8,#a78bfa)}
.electrical-svg{width:100%;height:100%;max-width:108px;max-height:100px;overflow:visible;filter:drop-shadow(0 10px 14px rgba(0,0,0,.22))}
.electrical-svg rect,.electrical-svg path,.electrical-svg circle{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.electrical-svg text{fill:currentColor;font:800 8px 'Segoe UI',sans-serif;letter-spacing:.5px}
.pv-svg{color:#67e8f9}.pv-svg rect{fill:rgba(37,99,235,.30);stroke:#bae6fd}.pv-svg path{stroke:#7dd3fc;stroke-width:2}
.inverter-svg{color:#d8b4fe}.inverter-svg rect{fill:rgba(248,250,252,.92);stroke:#fff}.inverter-svg path,.inverter-svg circle{stroke:#7c3aed}.inverter-svg text{fill:#334155}.inverter-svg circle{fill:#fbbf24}
.grid-svg{color:#7dd3fc}.grid-svg path{stroke:#7dd3fc;stroke-width:2.4}
.load-svg{color:#86efac;width:42px;height:42px}.load-svg path{stroke:#86efac;stroke-width:3}
.building-icon{display:grid;place-items:center;min-width:44px}
.phase-gauges{display:grid;grid-template-columns:1fr 1fr;gap:12px}.digital-gauge{--gauge-pct:0%;--gauge-angle:-90deg;padding:10px 8px 12px;border-radius:14px;background:linear-gradient(180deg,rgba(8,23,42,.92),rgba(4,14,27,.86));border:1px solid rgba(94,132,178,.25);min-width:0}.gauge-arc{width:112px;height:58px;margin:0 auto 3px;position:relative;overflow:hidden}.gauge-arc:before{content:"";position:absolute;width:104px;height:104px;left:4px;top:4px;border-radius:50%;background:conic-gradient(from 270deg,#22c55e 0deg,#fbbf24 95deg,#ef4444 160deg,#243b55 160deg 360deg);-webkit-mask:radial-gradient(circle at center,transparent 0 37px,#000 38px 50px,transparent 51px);mask:radial-gradient(circle at center,transparent 0 37px,#000 38px 50px,transparent 51px);transform:rotate(-90deg)}.gauge-arc:after{content:"";position:absolute;width:84px;height:84px;left:14px;top:14px;border-radius:50%;background:radial-gradient(circle,#0d2139 0 48%,#071426 49%)}.gauge-needle{position:absolute;z-index:3;left:54px;bottom:1px;width:2px;height:43px;background:linear-gradient(#fff,#38bdf8);border-radius:99px;transform-origin:50% 100%;transform:rotate(var(--gauge-angle));transition:transform .45s ease;box-shadow:0 0 7px rgba(125,211,252,.85)}.gauge-center{position:absolute;z-index:4;left:49px;bottom:-4px;width:12px;height:12px;border-radius:50%;background:#e2e8f0;border:3px solid #0f2743;box-shadow:0 0 8px rgba(125,211,252,.55)}.gauge-value{text-align:center}.gauge-value small{display:block;color:#7d9aba;font-size:9px}.gauge-value strong{display:block;color:#f8fbff;font-size:18px;line-height:1.25;margin-top:3px}.gauge-value em{display:block;font-style:normal;color:#526d8e;font-size:8px;margin-top:2px}.phase-a .gauge-needle{background:linear-gradient(#fff,#3b82f6)}.phase-b .gauge-needle{background:linear-gradient(#fff,#fbbf24)}.phase-c .gauge-needle{background:linear-gradient(#fff,#ec4899)}
@media(max-width:1400px){.phase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.phase-grid{grid-template-columns:1fr}.phase-gauges{grid-template-columns:1fr 1fr}.gauge-arc{transform:scale(.92);transform-origin:center bottom}}
/* V8.4 - Electrical icons ONLY for Real-Time Inverter Overview */
.kpi-grid .kpi-electrical-icon{
width:52px;height:52px;min-width:52px;border-radius:16px;
display:inline-flex;align-items:center;justify-content:center;
margin-right:12px;vertical-align:middle;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.26);
box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px rgba(0,0,0,.12);
}
.kpi-grid .kpi-electrical-icon svg{
width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.4;
stroke-linecap:round;stroke-linejoin:round;
}
.kpi-grid .icon-ac_power{color:#e9fbff}
.kpi-grid .icon-dc_power{color:#effff3}
.kpi-grid .icon-daily{color:#fff8d8}
.kpi-grid .icon-monthly{color:#eaf1ff}
.kpi-grid .icon-total{color:#fff0df}
.kpi-grid .icon-efficiency{color:#f6eaff}
@media (max-width:720px){
.kpi-grid .kpi-electrical-icon{width:44px;height:44px;min-width:44px;border-radius:13px}
.kpi-grid .kpi-electrical-icon svg{width:29px;height:29px}
}
/* V8.11 environmental conditions */
.weather-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.weather-source-note{margin:-6px 0 18px;color:var(--muted,#7890ad);font-size:12px;text-align:right;}
@media(max-width:1100px){.weather-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.weather-kpi-grid{grid-template-columns:1fr}.weather-source-note{text-align:left}}
/* V8.12 — today's weather + UNPAM Viktor map (dashboard Environmental Conditions only) */
.environment-detail-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;margin:0 0 22px}
.today-weather-card,.viktor-map-card{overflow:hidden;min-width:0}
.today-weather-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.weather-symbol{width:72px;height:72px;display:grid;place-items:center;border-radius:20px;background:linear-gradient(145deg,rgba(36,200,255,.16),rgba(59,130,246,.07));border:1px solid rgba(36,200,255,.18);font-size:38px;box-shadow:inset 0 0 24px rgba(36,200,255,.06)}
.today-weather-head small,.map-card-head small{display:block;color:var(--muted,#7890ad);font-size:10px;letter-spacing:.13em;font-weight:800;margin-bottom:5px}
.today-weather-head h3,.map-card-head h3{margin:0;font-size:18px;line-height:1.25}
.today-weather-head p{margin:5px 0 0;color:var(--muted,#7890ad);font-size:12px}
.today-weather-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.today-weather-metrics>div{padding:11px 12px;border-radius:12px;background:rgba(8,24,43,.42);border:1px solid rgba(107,139,181,.12)}
.today-weather-metrics span{display:block;color:var(--muted,#7890ad);font-size:11px;margin-bottom:4px}
.today-weather-metrics b{font-size:14px;font-variant-numeric:tabular-nums}
.today-weather-foot{margin-top:13px;padding-top:11px;border-top:1px solid rgba(107,139,181,.14);color:var(--muted,#7890ad);font-size:10.5px;line-height:1.45}
.map-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:12px}
.map-card-head>span{white-space:nowrap;padding:6px 9px;border-radius:999px;background:rgba(50,213,131,.08);border:1px solid rgba(50,213,131,.16);color:#8be9b7;font-size:10.5px}
.map-frame-wrap{position:relative;width:100%;height:285px;border-radius:14px;overflow:hidden;border:1px solid rgba(107,139,181,.16);background:#0b1522}
.map-frame-wrap iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:1050px){.environment-detail-grid{grid-template-columns:1fr}.map-frame-wrap{height:320px}}
@media(max-width:640px){.today-weather-metrics{grid-template-columns:1fr 1fr}.map-card-head{display:block}.map-card-head>span{display:inline-block;margin-top:9px}.map-frame-wrap{height:260px}}
@media(max-width:420px){.today-weather-metrics{grid-template-columns:1fr}.weather-symbol{width:58px;height:58px;font-size:31px}.today-weather-head h3{font-size:16px}}
/* V8.14 — Weather source attribution spacing and clickable source */
.weather-source,
.weather-source-note,
.weather-source-link {
margin-top: 12px;
}
.weather-source-link {
display: inline-block;
text-decoration: none;
line-height: 1.45;
cursor: pointer;
}
.weather-source-link:hover,
.weather-source-link:focus {
text-decoration: underline;
}
/* V8.15 — Research Analytics environmental/inverter correlation */
.research-chart-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
margin-bottom:14px;
}
.research-scatter-card{
padding:18px 18px 14px;
min-width:0;
}
.research-scatter-card:nth-child(3){
grid-column:1 / -1;
}
.research-chart-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:14px;
margin-bottom:10px;
}
.research-chart-head h3{
margin:0 0 5px;
font-size:16px;
}
.research-chart-head p{
margin:0;
color:var(--muted,#7890ad);
font-size:12px;
line-height:1.45;
}
.research-badge{
white-space:nowrap;
border:1px solid rgba(107,139,181,.22);
border-radius:999px;
padding:5px 9px;
font-size:11px;
color:var(--muted,#7890ad);
}
.research-scatter{
display:block;
width:100%;
height:310px;
}
.research-chart-note{
margin:4px 2px 22px;
font-size:12px;
line-height:1.55;
color:var(--muted,#7890ad);
}
.research-chart-note a{
color:inherit;
text-decoration:underline;
text-underline-offset:2px;
}
.weather-source-link{
position:relative;
z-index:2;
pointer-events:auto;
}
@media(max-width:900px){
.research-chart-grid{grid-template-columns:1fr}
.research-scatter-card:nth-child(3){grid-column:auto}
}
/* V8.16 — Public Live SLD landing page + modal login */
.public-sld-page{
min-height:100vh;
margin:0;
background:var(--bg,#07111f);
color:var(--text,#e8f0fb);
}
.public-sld-header{
position:sticky;
top:0;
z-index:40;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:12px clamp(18px,3vw,44px);
background:rgba(7,17,31,.92);
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(107,139,181,.16);
}
.public-brand{display:flex;align-items:center;gap:12px;min-width:0}
.public-brand img{
width:48px;height:48px;object-fit:contain;background:#fff;border-radius:10px;padding:4px;
}
.public-brand div{display:grid;gap:2px;min-width:0}
.public-brand small{font-size:10px;letter-spacing:.13em;color:#7f99b8}
.public-brand strong{font-size:15px;white-space:nowrap}
.public-login-trigger{
border:1px solid rgba(36,200,255,.42);
border-radius:10px;
padding:10px 14px;
background:rgba(36,200,255,.09);
color:#dff8ff;
font:inherit;
font-weight:700;
cursor:pointer;
transition:.18s ease;
}
.public-login-trigger span{font-weight:500;color:#8fb1cc;margin-left:5px}
.public-login-trigger:hover{transform:translateY(-1px);background:rgba(36,200,255,.16);border-color:rgba(36,200,255,.7)}
.public-sld-main{
width:min(1500px,calc(100% - 36px));
margin:0 auto;
padding:22px 0 36px;
}
.public-sld-intro{
display:flex;align-items:center;justify-content:space-between;gap:20px;
margin:0 2px 16px;color:#8ea6c2;font-size:12px;
}
.public-sld-intro>div{font-weight:800;letter-spacing:.1em;color:#cfefff;white-space:nowrap}
.public-sld-intro p{margin:0;text-align:right}
.public-live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#32d583;box-shadow:0 0 12px rgba(50,213,131,.75);margin-right:7px}
.public-sld-page .section-title{margin-top:0}
.public-sld-page .sld-card{margin-bottom:0}
.login-modal{
position:fixed;inset:0;z-index:1000;
display:flex;align-items:center;justify-content:center;
padding:20px;
background:rgba(3,9,18,.72);
backdrop-filter:blur(9px);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .18s ease,visibility .18s ease;
}
.login-modal.show{opacity:1;visibility:visible;pointer-events:auto}
.login-modal-card{
position:relative;
width:min(440px,100%);
max-height:calc(100vh - 34px);
overflow:auto;
padding:28px;
border-radius:18px;
background:linear-gradient(180deg,rgba(14,29,48,.99),rgba(9,20,35,.99));
border:1px solid rgba(110,149,190,.25);
box-shadow:0 30px 80px rgba(0,0,0,.48);
transform:translateY(14px) scale(.985);
transition:transform .18s ease;
}
.login-modal.show .login-modal-card{transform:none}
.login-modal-close{
position:absolute;right:14px;top:12px;
width:34px;height:34px;border:0;border-radius:9px;
background:rgba(125,151,184,.10);color:#c7d7ea;
font-size:24px;line-height:1;cursor:pointer;
}
.login-modal-card .nr-auth-head{margin-bottom:12px}
.login-modal-card .nr-auth-subtitle{margin-bottom:18px}
.login-modal-card .nr-form{margin-top:14px}
.login-modal-card .nr-auth-footer{margin-top:18px}
@media(max-width:720px){
.public-sld-header{padding:10px 14px}
.public-brand small{display:none}
.public-brand strong{font-size:13px}
.public-brand img{width:40px;height:40px}
.public-login-trigger span{display:none}
.public-sld-main{width:min(100% - 20px,1500px);padding-top:14px}
.public-sld-intro{display:block}
.public-sld-intro p{text-align:left;margin-top:8px}
.login-modal{padding:10px}
.login-modal-card{padding:22px 18px}
}
/* V8.17 — Public SLD landing page must fit exactly in one desktop viewport */
@media (min-width: 901px) {
html:has(body.public-sld-page),
body.public-sld-page {
width:100%;
height:100%;
min-height:100%;
overflow:hidden !important;
}
.public-sld-page {
height:100vh;
min-height:100vh;
display:flex;
flex-direction:column;
}
.public-sld-header {
position:relative;
flex:0 0 66px;
height:66px;
box-sizing:border-box;
padding:8px clamp(18px,3vw,44px);
}
.public-sld-header .public-brand img {
width:44px;
height:44px;
}
.public-sld-main {
flex:1 1 auto;
min-height:0;
width:min(1500px,calc(100% - 30px));
margin:0 auto;
padding:10px 0 12px;
box-sizing:border-box;
display:flex;
flex-direction:column;
overflow:hidden;
}
.public-sld-intro {
flex:0 0 auto;
margin:0 2px 7px;
line-height:1.25;
}
.public-sld-page .section-title {
flex:0 0 auto;
min-height:32px;
margin:0 0 6px;
}
.public-sld-page .section-title h2 {
margin:0;
font-size:clamp(16px,1.25vw,20px);
}
.public-sld-page .sld-card {
flex:1 1 auto;
min-height:0;
height:auto !important;
margin:0;
padding:clamp(10px,1.1vh,15px) clamp(12px,1.2vw,18px);
box-sizing:border-box;
overflow:hidden;
}
.public-sld-page .sld-statusbar {
min-height:48px;
padding:8px 12px;
margin-bottom:clamp(6px,1vh,10px);
}
.public-sld-page .sld-pro-grid {
min-height:0;
height:calc(100% - 102px);
align-items:center;
}
.public-sld-page .energy-device {
min-height:0;
padding:clamp(8px,1vh,12px);
}
.public-sld-page .device-visual {
transform:scale(.88);
transform-origin:center;
margin-block:-5px;
}
.public-sld-page .device-copy h3 {
margin-top:2px;
margin-bottom:3px;
}
.public-sld-page .device-values {
margin-top:5px;
gap:4px;
}
.public-sld-page .sld-mppt-mini {
margin-top:5px;
gap:3px;
}
.public-sld-page .load-branch {
margin-top:2px;
}
.public-sld-page .sld-live-footer {
min-height:30px;
padding-top:5px;
margin-top:4px;
}
}
/* Short desktop/laptop screens: compact further without changing dashboard SLD */
@media (min-width: 901px) and (max-height: 760px) {
.public-sld-header { flex-basis:58px; height:58px; }
.public-sld-header .public-brand img { width:38px; height:38px; }
.public-sld-main { padding:6px 0 7px; }
.public-sld-intro { margin-bottom:4px; font-size:11px; }
.public-sld-page .section-title { min-height:27px; margin-bottom:3px; }
.public-sld-page .sld-card { padding:7px 11px; }
.public-sld-page .sld-statusbar { min-height:40px; padding:5px 10px; margin-bottom:4px; }
.public-sld-page .sld-pro-grid { height:calc(100% - 82px); }
.public-sld-page .energy-device { padding:5px 8px; }
.public-sld-page .device-visual { transform:scale(.72); margin-block:-12px; }
.public-sld-page .device-copy { font-size:11px; }
.public-sld-page .device-copy h3 { font-size:13px; }
.public-sld-page .device-values,
.public-sld-page .sld-mppt-mini { margin-top:2px; gap:2px; }
.public-sld-page .sld-live-footer { min-height:24px; margin-top:1px; padding-top:2px; font-size:10px; }
}
/* V8.18 — Attribution above public SLD flow footer */
.public-sld-page .public-sld-created-by{
flex:0 0 auto;
margin:4px 0 2px;
padding-top:5px;
border-top:1px solid rgba(107,139,181,.14);
text-align:center;
font-size:11px;
font-weight:600;
letter-spacing:.025em;
color:var(--muted,#7890ad);
}
@media (min-width:901px) and (max-height:760px){
.public-sld-page .public-sld-created-by{
margin:1px 0 0;
padding-top:2px;
font-size:10px;
line-height:1.15;
}
}
/* V8.24 — Server-rendered SVG research charts */
.research-svg-chart{
display:block;
width:100%;
height:auto;
min-height:300px;
overflow:visible;
}
@media(max-width:700px){
.research-svg-chart{min-height:240px}
}
/* V8.25 — Digital speedometer gauges for PV DC / MPPT 1–4 */
.mppt-gauge-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}
.mppt-gauge-grid .mppt-card{
min-width:0;
padding:14px;
}
.mppt-gauge-pair{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-top:10px;
}
.mppt-digital-gauge{
min-width:0;
padding:8px 4px 4px;
}
.mppt-digital-gauge .gauge-arc{
width:92px;
height:50px;
margin:0 auto 4px;
}
.mppt-digital-gauge .gauge-value small{
font-size:10px;
}
.mppt-digital-gauge .gauge-value strong{
font-size:15px;
}
.mppt-digital-gauge .gauge-value em{
font-size:9px;
}
@media(max-width:1200px){
.mppt-gauge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
.mppt-gauge-grid{grid-template-columns:1fr}
.mppt-gauge-pair{grid-template-columns:1fr 1fr}
}
/* V8.28 — Full Screen button on public pre-login page */
.public-header-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:9px;
}
.public-fullscreen-trigger{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
min-height:40px;
padding:9px 13px;
border-radius:10px;
border:1px solid rgba(126,165,208,.38);
background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(36,200,255,.055));
color:#cfe3f7;
font:inherit;
font-size:12px;
font-weight:700;
cursor:pointer;
transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease;
}
.public-fullscreen-trigger:hover{
transform:translateY(-1px);
border-color:rgba(36,200,255,.62);
background:linear-gradient(145deg,rgba(36,200,255,.13),rgba(59,130,246,.09));
color:#fff;
}
.public-fullscreen-trigger.is-active{
border-color:rgba(50,213,131,.55);
background:rgba(50,213,131,.11);
color:#ddffec;
}
.public-fullscreen-icon{
font-size:16px;
line-height:1;
}
@media(max-width:720px){
.public-header-actions{gap:6px}
.public-fullscreen-text{display:none}
.public-fullscreen-trigger{
width:40px;
padding:0;
}
}