:root {
  --ink: #f4f7f2;
  --panel: #ffffff;
  --panel-2: #f8faf7;
  --line: rgba(43, 64, 50, 0.14);
  --muted: #69766e;
  --text: #17231b;
  --sun: #d49b08;
  --sun-soft: #ffe08a;
  --green: #16845f;
  --blue: #256db1;
  --orange: #bb642c;
  --red: #bd443b;
  --series-house: #2f3a33;
}

html[data-theme="dark"] {
  --ink: #101512;
  --panel: #181e1a;
  --panel-2: #1d241f;
  --line: rgba(238, 242, 232, 0.1);
  --muted: #969f98;
  --text: #f2f3eb;
  --sun: #f4c84a;
  --sun-soft: #ffe99b;
  --green: #76d6ad;
  --blue: #6ba9ff;
  --orange: #ef9a61;
  --red: #ed786c;
  --series-house: #f5f2e8;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--ink); color-scheme: light; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 76% -20%, rgba(226, 173, 35, 0.18), transparent 32rem),
    linear-gradient(180deg, #f8faf6 0%, #eef3ed 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; }

.dashboard-shell {
  width: min(1480px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0 40px;
}

.topbar {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}

.brand-lockup, .topbar-meta, .metric-topline, .battery-value-row, .metric-foot,
.section-heading, .chart-legend, .live-indicator { display: flex; align-items: center; }

.brand-lockup { gap: 14px; }
.home-link { color:inherit; text-decoration:none; border-radius:10px; }
.home-link:hover h1 { color:var(--green); }
.home-link:focus-visible { outline:2px solid var(--sun); outline-offset:5px; }
.brand-lockup h1 { margin: 2px 0 0; font-size: 21px; letter-spacing: -0.02em; font-weight: 650; }

.brand-mark {
  width: 52px; height: 52px; position: relative; display: grid; place-items: center;
}
.brand-mark img { display:block; width:100%; height:100%; object-fit:contain; }
.brand-kicker { margin:0; color:#65736a; font:500 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.10em; }
.brand-kicker strong { color:var(--text); font-weight:800; }

.eyebrow {
  margin: 0; color: #65736a; font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .18em; text-transform: uppercase;
}

.topbar-meta { gap: 18px; color: var(--muted); font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.live-indicator { gap: 8px; color: #167653; }
.live-indicator > span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(118,214,173,.75); }
.live-indicator.warning { color: #a95220; }
.live-indicator.warning > span { background: var(--orange); box-shadow: none; }

.panel {
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(247, 250, 247, .98));
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(42, 65, 49, .09);
}

.meter-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:10px; overflow:hidden; border-radius:14px; }
.meter-strip > div { padding:13px 17px; border-right:1px solid var(--line); }
.meter-strip > div:last-child { border-right:0; }
.meter-strip span,.meter-strip small { display:block; color:var(--muted); font-size:9px; }
.meter-strip strong { display:block; margin:4px 0 2px; font-size:18px; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.dashboard-tabs { position:sticky; top:8px; z-index:20; display:flex; align-items:center; justify-content:flex-start; gap:10px; margin:10px 0; padding:7px; border-color:rgba(22,132,95,.18); border-bottom-color:rgba(22,132,95,.42); border-radius:12px; background:rgba(255,255,255,.86); box-shadow:0 7px 18px rgba(42,65,49,.08); backdrop-filter:blur(14px); }
html[data-theme="dark"] .dashboard-tabs { border-color:rgba(118,214,173,.15); border-bottom-color:rgba(118,214,173,.35); background:rgba(24,30,26,.90); }
.dashboard-tabs > div { display:grid; grid-template-columns:repeat(4,94px); min-width:0; gap:0; padding:2px; border:1px solid var(--line); border-radius:9px; background:rgba(22,132,95,.045); }
.dashboard-tabs button { padding:8px 10px; border:1px solid transparent; border-radius:7px; color:var(--muted); background:transparent; cursor:pointer; font-size:11.5px; font-weight:700; text-align:center; white-space:nowrap; }
.dashboard-tabs button:hover { color:var(--text); background:rgba(22,132,95,.07); }
.dashboard-tabs [role="tab"] + [role="tab"] { box-shadow:none; }
.dashboard-tabs [role="tab"].active { color:var(--green); border-color:rgba(22,132,95,.18); background:var(--panel); box-shadow:inset 0 -2px var(--green),0 3px 9px rgba(42,65,49,.09); }
.dashboard-tabs [role="tab"].active::before { content:""; display:inline-block; width:5px; height:5px; margin:0 6px 1px 0; border-radius:50%; background:var(--green); }
.dashboard-tabs .all-sections-toggle { display:flex; align-items:center; gap:8px; margin-left:auto; border-color:transparent; color:var(--muted); background:transparent; }
html[data-theme="dark"] .dashboard-tabs .all-sections-toggle { background:transparent; }
.all-sections-icon { width:3px; height:3px; border-radius:1px; background:currentColor; box-shadow:5px 0 currentColor,0 5px currentColor,5px 5px currentColor; opacity:.65; }
.dashboard-tabs.all-mode .all-sections-toggle { border-color:rgba(212,155,8,.28); color:var(--text); background:rgba(212,155,8,.10); box-shadow:inset 0 -2px var(--sun); }
[data-dashboard-section][hidden] { display:none !important; }
.battery-facts { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin-top:9px; padding-top:9px; border-top:1px solid var(--line); }
.ac-output { margin-top:8px; padding:7px 9px; border-radius:8px; background:rgba(22,132,95,.07); }
.ac-output span { font-size:9px; }
.ac-output strong { color:var(--green); font-size:13px; }
.battery-facts span { display:block; color:var(--muted); font-size:9px; }
.battery-facts strong { display:block; margin-top:2px; font-size:12px; font-variant-numeric:tabular-nums; }
.statistics-panel { margin-top:10px; padding:18px 20px; border-radius:14px; }
.today-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; margin-top:14px; overflow:hidden; border:1px solid var(--line); border-radius:11px; background:var(--line); }
.today-grid > div { padding:13px; background:var(--panel); }
.today-grid span { display:block; color:var(--muted); font-size:9px; }
.today-grid strong { display:block; margin-top:5px; font-size:17px; font-variant-numeric:tabular-nums; }
.daily-table { margin-top:12px; overflow-x:auto; }
.daily-row { display:grid; grid-template-columns:1.15fr repeat(6,1fr); gap:12px; min-width:780px; padding:10px 4px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
.daily-row span:not(:first-child) { text-align:right; font-variant-numeric:tabular-nums; }
.daily-row strong { color:var(--text); }
.daily-head { border:0; padding-top:2px; font:650 8px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
.battery-analysis { margin-top:10px; padding:18px 20px; border-radius:14px; border-color:rgba(22,132,95,.22); }
.battery-summary { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px; margin-top:14px; overflow:hidden; border:1px solid var(--line); border-radius:11px; background:var(--line); }
.battery-summary > div { padding:13px; background:var(--panel); }
.battery-summary span { display:block; color:var(--muted); font-size:9px; }
.battery-summary strong { display:block; margin-top:5px; font-size:17px; font-variant-numeric:tabular-nums; }
.battery-table { margin-top:12px; overflow-x:auto; }
.battery-row { display:grid; grid-template-columns:1.15fr repeat(6,1fr); gap:12px; min-width:780px; padding:10px 4px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
.battery-row span:not(:first-child) { text-align:right; font-variant-numeric:tabular-nums; }
.battery-row strong { color:var(--text); }
.battery-head { border:0; padding-top:2px; font:650 8px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
.temperature-panel { margin-top:10px; padding:18px 20px; border-radius:14px; border-color:rgba(22,132,95,.22); }
.temperature-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-top:14px; overflow:hidden; border:1px solid var(--line); border-radius:11px; background:var(--line); }
.temperature-summary > div { padding:12px 13px; background:var(--panel); }
.temperature-summary span,.temperature-summary small { display:block; color:var(--muted); font-size:9px; }
.temperature-summary strong { display:block; margin:4px 0 2px; font-size:18px; font-variant-numeric:tabular-nums; }
.temperature-panel.elevated { border-color:rgba(212,155,8,.55); }
.temperature-panel.warning { border-color:rgba(189,68,59,.7); box-shadow:0 14px 34px rgba(189,68,59,.12); }
.temperature-panel.elevated #temperature-status { color:var(--sun); }
.temperature-panel.warning #temperature-status { color:var(--red); font-weight:700; }
.temperature-canvas { display:block; width:100%; height:220px; margin-top:8px; }
.legend-temperature-battery { background:var(--green); }
.legend-temperature-one { background:var(--orange); }
.temperature-threshold-note { margin-left:auto; color:var(--muted); }
.economics-panel { margin-top:10px; padding:18px 20px; border-radius:14px; border-color:rgba(212,155,8,.25); }
.tariff-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.tariff-control { display:grid; grid-template-columns:minmax(210px,.9fr) minmax(180px,1.6fr) auto; gap:14px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:11px; background:var(--panel-2); }
.export-tariff-control { border-color:rgba(189,68,59,.18); }
.tariff-control span,.tariff-control small { display:block; color:var(--muted); font-size:9px; }
.tariff-control strong { display:block; margin:3px 0; font-size:20px; font-variant-numeric:tabular-nums; }
.tariff-control input { width:100%; accent-color:var(--sun); }
.tariff-control button { padding:8px 12px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--panel); cursor:pointer; font-size:10px; }
.tariff-control button:hover { border-color:var(--sun); }
.economics-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:10px; }
.economics-group { padding:13px; border:1px solid var(--line); border-radius:11px; background:var(--panel); }
.economics-group h3 { margin:0 0 10px; font-size:11px; }
.economics-grid { display:grid; gap:1px; overflow:hidden; border-radius:8px; background:var(--line); }
.economics-grid > div { padding:10px 11px; background:var(--panel-2); }
.economics-grid span,.economics-grid small { display:block; color:var(--muted); font-size:8px; line-height:1.4; }
.economics-grid strong { display:block; margin:3px 0 1px; font-size:16px; font-variant-numeric:tabular-nums; }
.amortization-block { margin-top:10px; padding:14px; border:1px solid rgba(22,132,95,.22); border-radius:11px; background:var(--panel-2); }
.amortization-heading { display:flex; justify-content:space-between; gap:16px; align-items:end; }
.amortization-heading h3 { margin:3px 0 0; font-size:17px; }
.amortization-heading > span { color:var(--muted); font-size:10px; }
.amortization-heading > span strong { color:var(--text); font-size:14px; }
.amortization-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-top:12px; overflow:hidden; border-radius:8px; background:var(--line); }
.amortization-grid > div { padding:11px; background:var(--panel); }
.amortization-grid span,.amortization-grid small { display:block; color:var(--muted); font-size:8px; line-height:1.4; }
.amortization-grid strong { display:block; margin:4px 0 2px; font-size:17px; font-variant-numeric:tabular-nums; }
.amortization-progress { overflow:hidden; height:6px; margin-top:12px; border-radius:20px; background:rgba(43,64,50,.10); }
.amortization-progress span { display:block; height:100%; background:linear-gradient(90deg,var(--green),#bde9d4); }
.analysis-note { margin:10px 0 0; color:var(--muted); font-size:9px; line-height:1.5; }
.solar-profile-panel { margin-top:10px; padding:18px 20px; border-radius:14px; }
.profile-heatmaps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.profile-heatmaps > div { min-width:0; padding:12px; border:1px solid var(--line); border-radius:11px; background:var(--panel); }
.profile-heatmaps h3 { margin:0 0 7px; font-size:11px; font-weight:700; }
.profile-heatmaps canvas { display:block; width:100%; height:230px; }
.profile-table { margin-top:12px; overflow-x:auto; }
.profile-row { display:grid; grid-template-columns:1.1fr repeat(7,1fr); gap:10px; min-width:850px; padding:10px 4px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
.profile-row span:not(:first-child) { text-align:right; font-variant-numeric:tabular-nums; }
.profile-row strong { color:var(--text); }
.profile-head { border:0; padding-top:2px; font:650 8px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }

.hero-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hero-card { position: relative; min-height: 224px; padding: 24px; border-radius: 16px; overflow: hidden; }
.hero-card::after {
  content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; right: -70px; top: -70px;
  background: rgba(255,255,255,.32); border: 1px solid rgba(43,64,50,.07); pointer-events: none;
}
.solar-card { border-color: rgba(212, 155, 8, .32); background: linear-gradient(145deg, #fff8dc, #fffdf4); }
.house-card { border-color:rgba(70,139,205,.24); background:linear-gradient(145deg,#edf6ff,#fbfdff); }
.battery-card { border-color:rgba(22,132,95,.24); background:linear-gradient(145deg,#ecf9f2,#fbfdfc); }
.grid-card { border-color:rgba(189,68,59,.22); background:linear-gradient(145deg,#fff0ed,#fffafa); }
.export-card { border-color:rgba(189,68,59,.22); background:linear-gradient(145deg,#fff0ed,#fffafa); }
.metric-topline { gap: 9px; color: #526158; font-size: 12px; font-weight: 650; }

.metric-icon { width: 18px; height: 18px; display: inline-block; position: relative; color: currentColor; }
.sun-icon { border: 1.5px solid var(--sun); border-radius: 50%; transform: scale(.62); box-shadow: 0 0 0 6px rgba(244,200,74,.07); }
.sun-icon::before, .sun-icon::after { content:""; position:absolute; inset:-7px 7px; border-top:2px solid var(--sun); border-bottom:2px solid var(--sun); }
.sun-icon::after { transform:rotate(90deg); }
.home-icon::before { content:""; position:absolute; width:12px; height:10px; bottom:1px; left:3px; border:1.5px solid #526158; border-top:0; }
.home-icon::after { content:""; position:absolute; width:10px; height:10px; transform:rotate(45deg); top:1px; left:4px; border-left:1.5px solid #526158; border-top:1.5px solid #526158; }
.grid-icon::before { content:""; position:absolute; left:5px; top:1px; width:8px; height:15px; border-left:1.5px solid var(--blue); border-right:1.5px solid var(--blue); transform:skew(-11deg); }
.grid-icon::after { content:""; position:absolute; left:2px; top:6px; width:14px; border-top:1.5px solid var(--blue); box-shadow:0 5px 0 var(--blue); }
.battery-icon { border:1.5px solid var(--green); border-radius:3px; width:16px; height:10px; margin-left:1px; }
.battery-icon::after { content:""; position:absolute; right:-4px; top:2px; width:2px; height:4px; background:var(--green); border-radius:0 2px 2px 0; }

.hero-value { margin: 19px 0 5px; font-size: clamp(36px, 3.4vw, 54px); font-weight: 680; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.metric-caption { margin: 0; min-height: 34px; max-width: 300px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.metric-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
.metric-split div { min-width: 0; }
.metric-split span, .metric-foot span { display: block; color: var(--muted); font-size: 10px; }
.metric-split strong, .metric-foot strong { display: block; margin-top: 4px; font-size: 13px; font-variant-numeric: tabular-nums; }
.metric-foot { justify-content: space-between; margin-top: 12px; }
.metric-foot strong { margin: 0; }
.metric-money { display:flex; justify-content:space-between; gap:10px; margin-top:9px; padding-top:8px; border-top:1px solid var(--line); color:var(--muted); font-size:9px; }
.metric-money strong { color:var(--text); white-space:nowrap; font-size:11px; font-variant-numeric:tabular-nums; }
.mini-progress, .battery-gauge { overflow: hidden; height: 4px; margin-top: 20px; border-radius: 20px; background: rgba(43,64,50,.10); }
.mini-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--green), #bde9d4); }
.battery-gauge { height: 7px; margin-top: 12px; }
.battery-gauge span { display:block; height:100%; min-width: 2px; background: linear-gradient(90deg, #4cc695, #b2e5ca); box-shadow: 0 0 16px rgba(118,214,173,.35); }
.battery-value-row { justify-content: space-between; }
.battery-value-row > span { align-self: flex-end; margin-bottom: 14px; color: var(--green); font-size: 11px; }
.compact-split { margin-top: 16px; }

.flow-panel { margin-top: 14px; padding: 25px 26px 29px; border-radius: 18px; }
.section-heading { justify-content: space-between; gap: 20px; }
.section-heading h2, .section-heading h3 { margin: 6px 0 0; letter-spacing: -.035em; font-weight: 640; }
.section-heading h2 { font-size: 22px; }
.section-heading h3 { font-size: 18px; }
.section-note { margin: 0; color: var(--muted); font-size: 11px; }
.section-heading.compact { margin-bottom: 20px; }

.flow-stage {
  position: relative; min-height: 410px; max-width: 1030px; margin: 12px auto 0;
  display: grid; grid-template-columns: 240px 1fr 240px; grid-template-rows: 120px 140px 120px;
  align-items: center; justify-items: center;
}
.flow-node {
  z-index: 3; width: 200px; min-height: 90px; border: 1px solid var(--line); border-radius: 14px;
  background: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 12px 26px rgba(42,65,49,.11); text-align: center;
}
.flow-node strong { margin-top: 4px; font-size: 24px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.flow-node small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.node-kicker { color: #526158; font-size: 10px; font-weight: 650; }
.pv-node { grid-column: 2; grid-row: 1; border-color: rgba(212,155,8,.34); background:linear-gradient(145deg,#fff8dc,#fffdf5); }
.home-node { grid-column: 2; grid-row: 2; width: 154px; min-height: 154px; border-radius: 50%; border-color: rgba(70,139,205,.32); background:linear-gradient(145deg,#edf6ff,#f8fbff); box-shadow: 0 0 0 10px rgba(70,139,205,.055), 0 15px 32px rgba(42,65,49,.13); }
.battery-node { grid-column: 1; grid-row: 3; border-color: rgba(22,132,95,.28); background:linear-gradient(145deg,#ecf9f2,#f8fcfa); }
.grid-node { grid-column: 3; grid-row: 3; border-color: rgba(189,68,59,.25); background:linear-gradient(145deg,#fff0ed,#fffafa); }
.home-ring { position:relative; width:24px; height:22px; margin-bottom:5px; }
.home-ring::before { content:""; position:absolute; width:18px; height:13px; left:3px; bottom:0; border:1.5px solid var(--sun); border-top:0; }
.home-ring::after { content:""; position:absolute; width:15px; height:15px; left:4px; top:0; transform:rotate(45deg); border-left:1.5px solid var(--sun); border-top:1.5px solid var(--sun); }

.flow-line { position: absolute; z-index: 1; }
.flow-track { position:absolute; display:block; overflow:hidden; border-radius: 10px; background: rgba(43,64,50,.10); }
.flow-track::after { content:""; position:absolute; inset:0; opacity:.6; }
.flow-dot { position:absolute; width:7px; height:7px; opacity:0; background:transparent !important; border-top:2px solid currentColor; border-right:2px solid currentColor; border-radius:1px; transform:rotate(45deg); }
.flow-line.active .flow-dot { opacity:1; animation: travel 2.2s linear infinite; }
.flow-line.active .dot-two { animation-delay: -1.1s; }
.flow-line.reverse .flow-dot { animation-name:travel-reverse; }
.flow-line.reverse:not(.pv-flow) .flow-dot { transform:rotate(225deg); }
.flow-value { position:absolute; color:#59675e; font: 600 10px ui-monospace, SFMono-Regular, Menlo, monospace; white-space:nowrap; }
.pv-flow { left:50%; top:116px; width:1px; height:64px; }
.pv-flow .flow-track { width:2px; height:64px; left:-1px; }
.pv-flow .flow-track::after { background:linear-gradient(var(--sun), transparent); }
.pv-flow .flow-dot { left:-4px; top:-7px; color:var(--sun); transform:rotate(135deg); filter:drop-shadow(0 0 4px var(--sun)); }
.pv-flow .flow-value { left:11px; top:25px; }
.battery-flow { left:240px; bottom:90px; width:295px; height:2px; transform:rotate(-24deg); transform-origin:right center; }
.battery-flow .flow-track, .grid-flow .flow-track { width:100%; height:2px; }
.battery-flow .flow-track::after { background:linear-gradient(90deg,var(--green),transparent); }
.battery-flow .flow-dot { left:-7px; top:-4px; color:var(--green); filter:drop-shadow(0 0 4px var(--green)); }
.battery-flow .flow-value { left:108px; top:-19px; transform:rotate(24deg); }
.grid-flow { right:240px; bottom:90px; width:295px; height:2px; transform:rotate(24deg); transform-origin:left center; }
.grid-flow .flow-track::after { background:linear-gradient(90deg,transparent,var(--blue)); }
.grid-flow .flow-dot { left:-7px; top:-4px; color:var(--blue); filter:drop-shadow(0 0 4px var(--blue)); }
.grid-flow .flow-value { right:108px; top:-19px; transform:rotate(-24deg); }
.flow-line.idle .flow-value { opacity:.45; }

@keyframes travel {
  from { transform:translateX(0) rotate(45deg); }
  to { transform:translateX(295px) rotate(45deg); }
}
@keyframes travel-reverse { from { transform:translateX(295px) rotate(225deg); } to { transform:translateX(0) rotate(225deg); } }
.pv-flow .flow-dot { animation-name: travel-vertical !important; }
@keyframes travel-vertical { from { transform:translateY(0) rotate(135deg); } to { transform:translateY(70px) rotate(135deg); } }

.history-panel { margin-top:14px; padding:25px 26px 20px; border-radius:18px; }
.history-heading { align-items: flex-start; }
.range-tabs { display:flex; gap:3px; padding:3px; border-radius:10px; background:rgba(43,64,50,.06); border:1px solid rgba(43,64,50,.08); }
.range-tabs button { border:0; padding:7px 10px; border-radius:7px; color:var(--muted); background:transparent; cursor:pointer; font-size:10px; transition:.2s ease; }
.range-tabs button:hover { color:var(--text); }
.range-tabs button.active { color:#171b16; background:var(--sun-soft); }
.chart-legend { gap:18px; margin:18px 0 2px; color:var(--muted); font-size:10px; }
.chart-legend span { display:flex; align-items:center; gap:7px; }
.chart-legend i { width:14px; height:2px; border-radius:10px; }
.history-canvas { display:block; width:100%; height:310px; }

.source-strip { margin-top:14px; padding:24px 26px; border-radius:18px; }
.device-status-panel { margin-top:14px; padding:24px 26px; border-radius:18px; }
.device-status-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; }
.device-status-grid article { display:grid; grid-template-columns:1fr auto; gap:5px 12px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); }
.device-status-grid article div span { display:block; color:var(--muted); font-size:9px; }
.device-status-grid article div strong { display:block; margin-top:3px; font-size:16px; }
.device-status-grid article p { grid-column:1/-1; margin:8px 0 0; font-size:11px; }
.device-status-grid article small { grid-column:1/-1; color:var(--muted); font-size:9px; }
.device-state-badge { align-self:start; padding:5px 8px; border-radius:20px; font:700 8px ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; letter-spacing:.06em; }
.device-state-badge.normal { color:#116849; background:rgba(22,132,95,.10); }
.device-state-badge.warning { color:#9b2f28; background:rgba(189,68,59,.11); }
.device-state-badge.inactive { color:#805f08; background:rgba(212,155,8,.12); }
.device-events { margin-top:14px; overflow-x:auto; }
.device-event-row { display:grid; grid-template-columns:145px 130px minmax(220px,1fr) minmax(190px,.8fr); gap:12px; min-width:760px; padding:10px 4px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
.device-event-row span:nth-child(2) { color:var(--text); font-weight:650; }
.device-event-head { border:0; color:var(--muted); font:650 8px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
.source-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--line); }
.source-grid > div { display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; align-items:center; padding:17px; background:#ffffff; }
.source-grid strong { font-size:12px; }
.source-grid small { grid-row:2; color:var(--muted); margin-top:4px; font-size:9px; }
.status-pill { grid-column:2; grid-row:1/3; display:inline-flex; align-items:center; gap:6px; padding:5px 7px; border-radius:20px; font:650 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.status-dot { width:6px; height:6px; border-radius:50%; }
.status-pill.online { background:rgba(22,132,95,.10); color:#116849; }
.status-pill.online .status-dot { background:var(--green); }
.status-pill.expected { background:rgba(212,155,8,.12); color:#8d6500; }
.status-pill.expected .status-dot { background:var(--sun); }
.status-pill.offline { background:rgba(189,68,59,.10); color:#a23831; }
.status-pill.offline .status-dot { background:var(--red); }

.details-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(215px,.9fr) minmax(250px,1.2fr) minmax(230px,1.05fr); gap:10px; margin-top:10px; align-items:stretch; }
.detail-card { padding:17px 18px; border-radius:14px; min-width:0; }
.details-grid .section-heading.compact { margin-bottom:13px; }
.details-grid .section-heading h3 { font-size:16px; }
.channel-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.solakon-card { display:flex; flex-direction:column; }
.solakon-card .channel-grid { flex:1; grid-auto-rows:1fr; }
.solakon-card .channel-mini { align-content:center; }
.channel-mini { display:grid; grid-template-columns:1fr auto; gap:3px 8px; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); }
.channel-mini > span { color:var(--muted); font-size:10px; }
.channel-mini strong { font-size:15px; font-variant-numeric:tabular-nums; }
.channel-mini small { grid-column:1/-1; color:var(--muted); font-size:9px; white-space:nowrap; }
.ez1-card { display:flex; flex-direction:column; }
.ez1-card .channel-grid { flex:1; grid-template-columns:1fr; grid-auto-rows:1fr; }
.ez1-card .channel-mini { align-content:center; }
.detail-table { overflow-x:auto; }
.detail-row { display:grid; grid-template-columns:1.2fr repeat(3,1fr); gap:12px; align-items:center; min-width:470px; padding:12px 0; border-top:1px solid rgba(43,64,50,.10); font-size:11px; color:#526158; }
.detail-row strong { color:var(--text); }
.detail-row span:not(:first-child) { text-align:right; font-variant-numeric:tabular-nums; }
.detail-head { padding-top:0; border:0; color:#738078; font:650 9px ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; letter-spacing:.08em; }
.ez1-card .detail-table { overflow:visible; }
.ez1-row { width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; min-width:0; padding:12px 0; border-top:1px solid rgba(43,64,50,.10); color:#526158; font-size:11px; }
.ez1-row strong { color:var(--text); }
.ez1-row span:last-child { text-align:right; font-variant-numeric:tabular-nums; }
html[data-theme="dark"] .ez1-row { color:#bbc2bc; border-top-color:rgba(255,255,255,.065); }
.empty-row { padding:16px 0 4px; color:var(--muted); font-size:11px; }
.phase-list { display:grid; gap:0; }
.phase-row { display:grid; grid-template-columns:28px 1fr; gap:2px 8px; align-items:center; padding:9px 0; border-top:1px solid rgba(43,64,50,.10); color:#526158; font-size:11px; }
.phase-row strong { color:var(--text); font-size:13px; font-variant-numeric:tabular-nums; }
.phase-row small { grid-column:2; color:var(--muted); font-size:8px; white-space:nowrap; }
.phase-badge { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace; }
.phase-a { color:#f5cc65; background:rgba(245,204,101,.1); }
.phase-b { color:#78b4ff; background:rgba(120,180,255,.1); }
.phase-c { color:#e28178; background:rgba(226,129,120,.1); }
.comparison-list { display:grid; gap:0; }
.comparison-list div { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:10px 0; border-top:1px solid var(--line); font-size:9px; color:var(--muted); }
.comparison-list strong { color:var(--text); font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.diagnostic-note { margin:10px 0 0; color:#69766e; font-size:8px; line-height:1.45; }

footer { display:flex; align-items:center; gap:18px; padding:22px 4px 0; color:#65736a; font:600 9px ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; letter-spacing:.08em; }
footer time { margin-left:auto; }

.loading-shell { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px; }
.loading-shell h1 { margin:12px 0 8px; letter-spacing:-.04em; font-size:32px; }
.loading-shell > p:last-of-type { max-width:520px; color:var(--muted); line-height:1.6; }
.loading-mark { width:58px; height:58px; border:1px solid rgba(244,200,74,.25); border-radius:50%; display:grid; place-items:center; margin-bottom:20px; animation:pulse 2s ease-in-out infinite; }
.loading-mark span { width:12px; height:12px; border-radius:50%; background:var(--sun); box-shadow:0 0 24px rgba(244,200,74,.7); }
@keyframes pulse { 50% { transform:scale(1.05); border-color:rgba(244,200,74,.5); } }
.primary-button { margin-top:18px; padding:10px 16px; border:0; border-radius:8px; background:var(--sun-soft); color:#161a14; cursor:pointer; font-weight:700; }

/* Kompakte Uebersicht */
.dashboard-shell { padding:14px 0 18px; }
.topbar { min-height:54px; padding:0 2px 10px; margin-bottom:10px; }
.topbar-meta { gap:14px; font-size:11px; }
.theme-toggle { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border:1px solid var(--line); border-radius:20px; color:var(--text); background:var(--panel); cursor:pointer; font-size:10px; }
.theme-toggle:hover { border-color:var(--sun); }
.hero-grid { gap:10px; }
.hero-card { min-height:168px; padding:16px; border-radius:14px; }
.hero-value { margin:11px 0 3px; font-size:clamp(32px,3vw,46px); }
.metric-caption { min-height:28px; font-size:10px; line-height:1.4; }
.metric-split { gap:8px; margin-top:9px; padding-top:9px; }
.mini-progress, .battery-gauge { margin-top:10px; }
.battery-value-row > span { margin-bottom:9px; font-size:10px; }
.compact-split { margin-top:8px; }
.history-panel { margin-top:10px; padding:14px 16px 10px; border-radius:14px; }
.section-heading h2 { font-size:18px; }
.chart-legend { gap:16px; margin:10px 0 0; font-size:9px; }
.legend-pv { background:var(--sun); }
.legend-house { background:#347fba; }
.legend-grid { background:var(--red); }
.legend-battery { background:var(--green); }
html[data-theme="dark"] .legend-house { background:#78b4ff; }
html[data-theme="dark"] .legend-grid { background:#ed786c; }
.history-canvas { height:205px; }
.source-strip { margin-top:10px; padding:13px 16px; border-radius:14px; }
.source-strip .section-heading.compact { margin-bottom:9px; }
.source-grid > div { padding:10px 12px; }
.storage-status { display:grid; grid-template-columns:auto repeat(4,minmax(100px,1fr)) auto; gap:18px; align-items:center; margin-top:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; color:var(--muted); }
.storage-status > span { min-width:0; }
.storage-status strong, .storage-status small { display:block; }
.storage-status strong { color:var(--text); font-size:12px; font-variant-numeric:tabular-nums; }
.storage-status small { margin-top:2px; font-size:8px; }
.storage-title { color:var(--text); font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; text-transform:uppercase; }
.storage-policy { text-align:right; font-size:8px; }
footer { gap:16px; padding:10px 4px 0; font-size:8px; }

html[data-theme="dark"] body { background:radial-gradient(circle at 76% -20%,rgba(244,200,74,.1),transparent 30rem),linear-gradient(180deg,#111612 0%,#0d120f 100%); }
html[data-theme="dark"] .panel { background:linear-gradient(145deg,rgba(29,36,31,.96),rgba(21,27,23,.98)); box-shadow:0 18px 45px rgba(0,0,0,.18); }
html[data-theme="dark"] .solar-card { background:linear-gradient(145deg,rgba(53,48,25,.74),rgba(25,29,22,.98)); }
html[data-theme="dark"] .house-card { background:linear-gradient(145deg,rgba(25,48,69,.78),rgba(21,27,30,.98)); }
html[data-theme="dark"] .battery-card { background:linear-gradient(145deg,rgba(22,61,46,.78),rgba(20,29,24,.98)); }
html[data-theme="dark"] .grid-card, html[data-theme="dark"] .export-card { background:linear-gradient(145deg,rgba(66,31,29,.78),rgba(29,23,22,.98)); }
html[data-theme="dark"] .source-grid > div { background:#151b17; }
html[data-theme="dark"] .today-grid > div { background:#151b17; }
html[data-theme="dark"] .flow-node { background:#151b17; }
html[data-theme="dark"] .pv-node { background:linear-gradient(145deg,rgba(77,64,25,.82),rgba(29,29,21,.98)); }
html[data-theme="dark"] .home-node { background:linear-gradient(145deg,rgba(25,48,69,.9),rgba(21,27,30,.98)); }
html[data-theme="dark"] .battery-node { background:linear-gradient(145deg,rgba(22,61,46,.9),rgba(20,29,24,.98)); }
html[data-theme="dark"] .grid-node { background:linear-gradient(145deg,rgba(66,31,29,.9),rgba(29,23,22,.98)); }
html[data-theme="dark"] .node-kicker, html[data-theme="dark"] .flow-value { color:#aeb6af; }
html[data-theme="dark"] .detail-row, html[data-theme="dark"] .phase-row { color:#bbc2bc; border-top-color:rgba(255,255,255,.065); }
html[data-theme="dark"] .comparison-list div { border-top-color:rgba(255,255,255,.065); }
html[data-theme="dark"] .eyebrow, html[data-theme="dark"] .metric-topline { color:#aab3ab; }
html[data-theme="dark"] .home-icon::before { border-color:#d6ddd6; border-top:0; }
html[data-theme="dark"] .home-icon::after { border-left-color:#d6ddd6; border-top-color:#d6ddd6; }
html[data-theme="dark"] .live-indicator { color:#a8dcca; }
html[data-theme="dark"] .range-tabs { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.05); }
html[data-theme="dark"] .theme-toggle { background:#151b17; }
html[data-theme="dark"] .status-pill.online { background:rgba(118,214,173,.08); color:#9de0c3; }
html[data-theme="dark"] .status-pill.expected { background:rgba(244,200,74,.07); color:#ddc987; }
html[data-theme="dark"] .status-pill.offline { background:rgba(237,120,108,.08); color:#e79a91; }

/* Energiefluss: Erzeuger und Speicher links, Verbraucher in der Mitte, Netz rechts. */
.flow-stage {
  min-height:235px;
  max-width:1100px;
  grid-template-columns:230px 1fr 230px;
  grid-template-rows:117px 117px;
}
.pv-node { grid-column:1; grid-row:1; }
.battery-node { grid-column:1; grid-row:2; }
.home-node { grid-column:2; grid-row:1/3; }
.grid-node { grid-column:3; grid-row:1/3; }
.flow-line .flow-track { height:4px; box-shadow:0 0 8px rgba(43,64,50,.09); }
.flow-dot { width:9px; height:9px; border-top-width:3px; border-right-width:3px; }
.pv-flow { left:205px; top:72px; width:270px; height:4px; transform:rotate(10deg); transform-origin:left center; }
.pv-flow .flow-track { left:0; width:100%; height:4px; }
.pv-flow .flow-dot { left:-9px; top:-4px; color:var(--sun); transform:rotate(45deg); animation-name:travel !important; }
.pv-flow .flow-value { left:112px; top:-21px; transform:rotate(-10deg); }
.battery-flow { left:205px; top:181px; bottom:auto; width:270px; height:4px; transform:rotate(-10deg); transform-origin:left center; }
.battery-flow .flow-track, .grid-flow .flow-track { width:100%; height:4px; }
.battery-flow .flow-dot, .grid-flow .flow-dot { top:-4px; }
.battery-flow .flow-value { left:112px; top:-21px; transform:rotate(10deg); }
.grid-flow { left:625px; right:auto; top:117px; bottom:auto; width:270px; height:4px; transform:none; transform-origin:left center; }
.grid-flow .flow-value { right:112px; top:-21px; transform:none; }
@keyframes travel { from { transform:translateX(0) rotate(45deg); } to { transform:translateX(270px) rotate(45deg); } }
@keyframes travel-reverse { from { transform:translateX(270px) rotate(225deg); } to { transform:translateX(0) rotate(225deg); } }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .source-grid { grid-template-columns:repeat(2,1fr); }
  .flow-stage { min-height:300px; max-width:680px; grid-template-columns:220px 240px 220px; grid-template-rows:110px 190px; transform:none; margin:10px auto 0; }
  .pv-node { grid-column:2; grid-row:1; }
  .battery-node { grid-column:1; grid-row:2; }
  .home-node { grid-column:2; grid-row:2; }
  .grid-node { grid-column:3; grid-row:2; }
  .pv-flow { left:50%; top:99px; width:2px; height:30px; transform:none; }
  .pv-flow .flow-track { width:2px; height:30px; left:-1px; }
  .pv-flow .flow-dot { left:-4px; top:-7px; transform:rotate(135deg); animation-name:travel-tablet-pv !important; }
  .pv-flow .flow-value { left:11px; top:8px; transform:none; }
  .battery-flow { left:210px; top:205px; width:53px; height:2px; transform:none; }
  .grid-flow { left:417px; top:205px; width:53px; height:2px; transform:none; }
  .battery-flow .flow-track, .grid-flow .flow-track { height:2px; }
  .battery-flow .flow-value { left:13px; top:-19px; transform:none; }
  .grid-flow .flow-value { right:13px; top:-19px; }
  @keyframes travel { from { transform:translateX(0) rotate(45deg); } to { transform:translateX(53px) rotate(45deg); } }
  @keyframes travel-reverse { from { transform:translateX(53px) rotate(225deg); } to { transform:translateX(0) rotate(225deg); } }
  @keyframes travel-tablet-pv { from { transform:translateY(0) rotate(135deg); } to { transform:translateY(32px) rotate(135deg); } }
  .storage-status { grid-template-columns:repeat(2,1fr); }
  .details-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .today-grid { grid-template-columns:repeat(3,1fr); }
  .temperature-summary { grid-template-columns:repeat(2,1fr); }
  .economics-groups { grid-template-columns:1fr; }
  .amortization-grid { grid-template-columns:repeat(2,1fr); }
  .tariff-controls { grid-template-columns:1fr; }
  .storage-title, .storage-policy { grid-column:1/-1; text-align:left; }
}

@media (max-width: 760px) {
  .dashboard-shell { width:min(100% - 24px, 640px); padding-top:14px; }
  .topbar { align-items:flex-start; gap:18px; }
  .topbar-meta { flex-direction:column; align-items:flex-end; gap:5px; }
  .hero-grid, .details-grid, .source-grid { grid-template-columns:1fr; }
  .device-status-grid { grid-template-columns:1fr; }
  .meter-strip { grid-template-columns:repeat(2,1fr); }
  .meter-strip > div:nth-child(2) { border-right:0; }
  .meter-strip > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .dashboard-tabs { top:4px; align-items:stretch; flex-wrap:wrap; overflow:visible; }
  .dashboard-tabs > div { grid-template-columns:repeat(4,minmax(0,1fr)); flex:1 0 100%; width:100%; }
  .dashboard-tabs button { flex:1; padding:8px 10px; }
  .dashboard-tabs .all-sections-toggle { margin-left:auto; padding:6px 9px; }
  [data-dashboard-section] { scroll-margin-top:62px; }
  .today-grid { grid-template-columns:repeat(2,1fr); background:transparent; }
  .temperature-summary { grid-template-columns:1fr; }
  .temperature-threshold-note { width:100%; margin-left:0; }
  .tariff-control { grid-template-columns:1fr; gap:10px; }
  .amortization-grid { grid-template-columns:1fr; }
  .amortization-heading { align-items:flex-start; flex-direction:column; }
  .battery-summary { grid-template-columns:repeat(2,1fr); }
  .profile-heatmaps { grid-template-columns:1fr; }
  .hero-card { min-height:210px; }
  .section-heading, .history-heading { align-items:flex-start; flex-direction:column; }
  .section-note { line-height:1.5; }
  .flow-panel { overflow:hidden; }
  .flow-stage { min-height:420px; transform:none; margin:10px auto 0; grid-template-columns:1fr 1fr; grid-template-rows:100px 175px 140px; }
  .pv-node { grid-column:1/3; grid-row:1; }
  .home-node { grid-column:1/3; grid-row:2; }
  .battery-node { grid-column:1; grid-row:3; width:min(140px,calc(100% - 8px)); }
  .grid-node { grid-column:2; grid-row:3; width:min(140px,calc(100% - 8px)); }
  .battery-node strong, .grid-node strong { font-size:21px; }
  .flow-line { display:block; right:auto; bottom:auto; height:2px; transform-origin:left center; }
  .flow-line .flow-track { left:0; width:100%; height:2px; }
  .flow-line .flow-value { top:-19px; font-size:9px; }
  .pv-flow { left:50%; top:91px; width:2px; height:28px; transform:none; }
  .pv-flow .flow-track { left:-1px; width:2px; height:100%; }
  .pv-flow .flow-value { left:12px; right:auto; top:7px; transform:none; }
  .pv-flow .flow-dot { left:-4px; top:-7px; animation-name:travel-mobile-pv !important; }
  .battery-flow { left:calc(25% - 1px); top:300px; width:64px; transform:rotate(-55deg); }
  .battery-flow .flow-value { left:20px; transform:rotate(55deg); }
  .grid-flow { left:calc(50% + 42px); top:248px; width:64px; transform:rotate(55deg); }
  .grid-flow .flow-value { left:20px; right:auto; transform:rotate(-55deg); }
  .battery-flow .flow-dot, .grid-flow .flow-dot { left:-7px; top:-4px; animation-name:travel-mobile-forward !important; }
  .battery-flow.reverse .flow-dot, .grid-flow.reverse .flow-dot { animation-name:travel-mobile-reverse !important; }
  @keyframes travel-mobile-pv { from { transform:translateY(0) rotate(135deg); } to { transform:translateY(30px) rotate(135deg); } }
  @keyframes travel-mobile-forward { from { transform:translateX(0) rotate(45deg); } to { transform:translateX(64px) rotate(45deg); } }
  @keyframes travel-mobile-reverse { from { transform:translateX(64px) rotate(225deg); } to { transform:translateX(0) rotate(225deg); } }
  .range-tabs { width:100%; overflow-x:auto; }
  .range-tabs button { flex:1; white-space:nowrap; }
  .chart-legend { flex-wrap:wrap; }
  .history-canvas { height:250px; }
  .phase-row { grid-template-columns:32px 1fr 1fr; }
  .phase-row span:nth-last-child(-n+2) { display:none; }
  footer { flex-wrap:wrap; }
  footer time { width:100%; margin-left:0; }
}

/* Detaillierter ONE-/EZ1-Energiefluss */
.flow-stage-detailed {
  min-height:290px; max-width:1100px; grid-template-columns:230px 1fr 230px; grid-template-rows:145px 145px;
}
.one-pv-node { grid-column:1; grid-row:1; transform:translate(60px,-30px); border-color:rgba(212,155,8,.34); background:linear-gradient(145deg,#fff8dc,#fffdf5); }
.flow-battery-node { grid-column:1; grid-row:2; transform:translateX(60px); border-color:rgba(22,132,95,.28); background:linear-gradient(145deg,#ecf9f2,#f8fcfa); }
.ez1-flow-node { grid-column:2; grid-row:1; transform:translateY(-30px); border-color:rgba(212,155,8,.30); background:linear-gradient(145deg,#fffaf0,#fffdf8); }
.flow-home-node { grid-column:2; grid-row:2; width:154px; min-height:154px; border-radius:50%; border-color:rgba(70,139,205,.32); background:linear-gradient(145deg,#edf6ff,#f8fbff); box-shadow:0 0 0 10px rgba(70,139,205,.055),0 15px 32px rgba(42,65,49,.13); }
.flow-grid-node { grid-column:3; grid-row:2; border-color:rgba(189,68,59,.25); background:linear-gradient(145deg,#fff0ed,#fffafa); }
.flow-stage-detailed .flow-track { height:4px; box-shadow:0 0 8px rgba(43,64,50,.10); }
.flow-stage-detailed .flow-dot { width:9px; height:9px; top:-3px; border-top-width:3px; border-right-width:3px; }
.dc-charge-flow { left:174px; top:88px; width:4px; height:84px; }
.dc-charge-flow .flow-track { width:4px; height:84px; }
.dc-charge-flow .flow-dot { left:-3px; top:-9px; color:var(--green); transform:rotate(135deg); filter:drop-shadow(0 0 4px var(--green)); animation-name:flow-detailed-dc !important; }
.dc-charge-flow .flow-value { left:13px; top:32px; }
.one-ac-flow { left:275px; top:217px; width:202px; height:4px; }
.one-ac-flow .flow-track { width:202px; height:4px; overflow:hidden; background:rgba(43,64,50,.10); }
.one-ac-flow .flow-track::after { display:block; background:linear-gradient(90deg,var(--green),transparent); }
.one-ac-flow .flow-dot { left:-9px; top:-3px; color:var(--green); filter:drop-shadow(0 0 4px var(--green)); offset-path:none; offset-rotate:0deg; animation-name:flow-detailed-one-ac !important; }
.one-ac-flow.reverse .flow-dot { animation-name:flow-detailed-one-ac-reverse !important; }
.one-ac-flow .flow-value { left:75px; top:-20px; }
.house-grid-flow .flow-track { width:100%; height:4px; }
.ez1-ac-flow { left:50%; top:88px; width:4px; height:54px; }
.ez1-ac-flow .flow-track { width:4px; height:54px; }
.ez1-ac-flow .flow-track::after { background:linear-gradient(var(--sun),transparent); }
.ez1-ac-flow .flow-dot { left:-3px; top:-9px; color:var(--sun); transform:rotate(135deg); filter:drop-shadow(0 0 4px var(--sun)); animation-name:flow-detailed-vertical !important; }
.ez1-ac-flow .flow-value { left:13px; top:1px; }
.house-grid-flow { left:625px; top:217px; width:265px; height:4px; }
.house-grid-flow .flow-track::after { background:linear-gradient(90deg,transparent,var(--blue)); }
.house-grid-flow .flow-dot { left:-9px; color:var(--blue); filter:drop-shadow(0 0 4px var(--blue)); animation-name:flow-detailed-horizontal !important; }
.house-grid-flow.reverse .flow-dot { animation-name:flow-detailed-horizontal-reverse !important; }
.house-grid-flow .flow-value { right:105px; top:-20px; }
@keyframes flow-detailed-horizontal { from { transform:translateX(0) rotate(45deg); } to { transform:translateX(265px) rotate(45deg); } }
@keyframes flow-detailed-horizontal-reverse { from { transform:translateX(265px) rotate(225deg); } to { transform:translateX(0) rotate(225deg); } }
@keyframes flow-detailed-one-ac { from { transform:translateX(0) rotate(45deg); } to { transform:translateX(202px) rotate(45deg); } }
@keyframes flow-detailed-one-ac-reverse { from { transform:translateX(202px) rotate(225deg); } to { transform:translateX(0) rotate(225deg); } }
@keyframes flow-detailed-dc { from { transform:translateY(0) rotate(135deg); } to { transform:translateY(84px) rotate(135deg); } }
@keyframes flow-detailed-vertical { from { transform:translateY(0) rotate(135deg); } to { transform:translateY(54px) rotate(135deg); } }

@media (max-width:1100px) and (min-width:761px) {
  .flow-stage-detailed { max-width:680px; grid-template-columns:200px 280px 200px; }
  .one-ac-flow { left:190px; width:155px; }
  .house-grid-flow { left:435px; width:155px; }
  .dc-charge-flow { left:99px; }
  @keyframes flow-detailed-horizontal { from { transform:translateX(0) rotate(45deg); } to { transform:translateX(155px) rotate(45deg); } }
  @keyframes flow-detailed-horizontal-reverse { from { transform:translateX(155px) rotate(225deg); } to { transform:translateX(0) rotate(225deg); } }
}

@media (max-width:760px) {
  .flow-stage-detailed { min-height:500px; grid-template-columns:1fr 1fr; grid-template-rows:100px 100px 170px 120px; }
  .one-pv-node { grid-column:1; grid-row:1; width:min(145px,calc(100% - 8px)); }
  .flow-battery-node { grid-column:1; grid-row:2; width:min(145px,calc(100% - 8px)); }
  .ez1-flow-node { grid-column:2; grid-row:1; width:min(145px,calc(100% - 8px)); }
  .one-pv-node, .flow-battery-node, .ez1-flow-node { transform:none; }
  .flow-home-node { grid-column:1/3; grid-row:3; }
  .flow-grid-node { grid-column:1/3; grid-row:4; width:min(200px,calc(100% - 8px)); }
  .flow-stage-detailed .flow-line { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}