@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap");
:root {
  --bg: #f6f7f3;
  --card: #fff;
  --ink: #25382d;
  --muted: #8b948c;
  --line: #e9ece5;
  --accent: #78966a;
  --soft: #eff3e8;
  --green: #6b8f5b;
  --purple: #a197b6;
  --shadow: 0 5px 25px #25382d03;
  --sidebar: #fafbf8;
  color-scheme: light;
}
:root[data-theme="midnight"] {
  --bg: #101817;
  --card: #192321;
  --ink: #ecf0e5;
  --muted: #98aaa0;
  --line: #2c3932;
  --accent: #b5cf89;
  --soft: #27382a;
  --green: #b0cf83;
  --purple: #b7a9d0;
  --shadow: 0 8px 25px #0002;
  --sidebar: #131d19;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font:
    14px "DM Sans",
    system-ui,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
button,
a {
  touch-action: manipulation;
}
button {
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
button {
  border: 0;
  background: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: "Manrope", system-ui, sans-serif;
}
h1 {
  font-size: 36px;
  letter-spacing: -1.6px;
  font-weight: 650;
  line-height: 1.3;
}
h2 {
  font-size: 19px;
  letter-spacing: -0.5px;
  font-weight: 650;
}
h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
p {
  color: var(--muted);
  line-height: 1.7;
}
.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
}
.sidebar {
  width: 230px;
  position: fixed;
  inset: 0 auto 0 0;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  padding: 36px 22px 20px;
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 750 29px "Manrope";
  letter-spacing: -1.6px;
  padding-left: 10px;
}
.brand > .icon {
  height: 31px;
  width: 31px;
  color: var(--accent);
  stroke-width: 1.8;
}
.brand-light {
  font-weight: 450;
}
.brand-dot {
  color: var(--accent);
}
.site-name {
  margin: 42px 10px 30px;
  font-weight: 550;
  font-size: 13px;
}
.site-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 7px;
}
.site-label {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: var(--muted);
  margin-top: 10px;
}
.nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 13px;
  margin: 5px 0;
  border-radius: 8px;
  text-align: left;
  color: var(--muted);
  font-size: 13px;
  position: relative;
}
.nav-item.active {
  background: var(--soft);
  color: var(--ink);
  font-weight: 650;
}
.nav-item:hover {
  background: var(--soft);
  color: var(--ink);
}
.nav-item i {
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  margin-left: auto;
}
.sidebar-bottom {
  margin-top: auto;
}
.sidebar-note {
  border-top: 1px solid var(--line);
  padding: 25px 13px 24px;
  font: 500 15px/1.65 "Manrope";
  color: var(--muted);
  position: relative;
}
.sun-art {
  margin-top: 22px;
  color: var(--accent);
  opacity: 0.65;
}
.sun-art .icon {
  width: 40px;
  height: 40px;
}
.theme-toggle {
  display: flex;
  border: 1px solid var(--line);
  padding: 4px;
  border-radius: 8px;
  margin: 18px 0 20px;
}
.theme-toggle button {
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 8px;
  border-radius: 5px;
  flex: 1;
  justify-content: center;
  color: var(--muted);
}
.theme-toggle .icon {
  width: 14px;
  height: 14px;
}
.theme-toggle .selected {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 4px #0001;
}
.device-signature {
  font-size: 9px;
  color: var(--muted);
  padding: 0 8px;
}
main {
  margin-left: 230px;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--ink) 3%, transparent);
  height: 83px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 42px;
}
.breadcrumb {
  font-size: 11px;
  color: var(--muted);
}
.breadcrumb span {
  padding: 0 13px;
  color: var(--line);
}
.breadcrumb strong {
  color: var(--ink);
  font-weight: 500;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 25px;
}
.status {
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #81a76c;
  box-shadow: 0 0 0 4px #81a76c13;
}
.status.offline i {
  background: #cc9961;
  box-shadow: 0 0 0 4px #cc996113;
}
.status.demo i {
  background: #b69bc5;
}
.icon-button {
  padding: 8px;
  color: var(--muted);
}
.content {
  max-width: 1510px;
  margin: auto;
  padding: 37px 42px 25px;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 31px;
  gap: 20px;
}
.eyebrow {
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 1.8px;
  color: var(--muted);
  margin-bottom: 9px;
}
.page-heading p {
  margin-top: 10px;
  font-size: 12px;
}
.date-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--line);
  padding: 10px 13px;
  border-radius: 6px;
  white-space: nowrap;
}
.date-chip .icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(230px, 1fr);
  gap: 20px;
}
.flow-card,
.today-card,
.metric-card,
.chart-card,
.insight-card,
.table-card,
.comparison-card,
.settings-card,
.method-card,
.setup-empty,
.roadmap {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.flow-card {
  overflow: hidden;
  position: relative;
}
.section-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 26px 0;
}
.section-top p {
  font-size: 11px;
  margin-top: 6px;
}
.subtle-pill {
  font-size: 9px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 6px 9px;
  white-space: nowrap;
}
.energy-scene {
  position: relative;
  height: 345px;
  background: radial-gradient(ellipse at 50% 60%, var(--soft), transparent 63%);
}
.house-scene {
  width: 100%;
  height: 100%;
}
.flow-node {
  position: absolute;
  min-width: 87px;
}
.flow-node > span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--muted);
}
.flow-node .icon {
  width: 15px;
  height: 15px;
}
.flow-node strong {
  font-family: "Manrope";
  font-size: 25px;
  letter-spacing: -0.8px;
  font-weight: 650;
  display: block;
  margin-top: 6px;
  line-height: 1.15;
}
.flow-node small {
  font: 450 11px "DM Sans";
  letter-spacing: 0;
  margin-left: 3px;
}
.flow-node em {
  font-style: normal;
  font-size: 8px;
  color: var(--muted);
  display: block;
  margin-top: 6px;
}
.solar-node {
  left: 7%;
  top: 16%;
}
.solar-node .icon {
  color: var(--accent);
}
.home-node {
  right: 6%;
  top: 22%;
}
.battery-node {
  left: 7%;
  bottom: 13%;
}
.battery-node .icon {
  color: var(--purple);
}
.grid-node {
  right: 6%;
  bottom: 13%;
}
.flow-bottom {
  padding: 17px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  font-size: 9px;
  color: var(--muted);
}
.legend-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
}
.green {
  background: var(--green);
}
.purple {
  background: var(--purple);
}
.text-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 550;
  color: var(--ink);
  padding: 4px 0;
}
.text-button .icon {
  width: 15px;
  height: 15px;
}
.text-button:hover {
  color: var(--accent);
}
.today-card {
  padding: 26px;
  background: linear-gradient(145deg, var(--soft), var(--card));
  position: relative;
  overflow: hidden;
}
.today-card h2 {
  font-size: 20px;
}
.orbit-sun {
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line);
  margin: 25px 0 19px;
  color: var(--accent);
}
.orbit-sun .icon {
  width: 40px;
  height: 40px;
  stroke-width: 1;
}
.today-total {
  font: 600 48px/1 "Manrope";
  letter-spacing: -2px;
}
.today-total small {
  font: 400 13px "DM Sans";
  letter-spacing: 0;
  margin-left: 9px;
}
.today-card > p {
  font-size: 10px;
  margin-top: 10px;
}
.today-divider {
  height: 1px;
  background: var(--line);
  margin: 23px 0 15px;
}
.today-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  margin: 14px 0;
  color: var(--muted);
  gap: 10px;
}
.today-row strong {
  color: var(--ink);
  font-weight: 500;
}
.today-row small {
  font-size: 10px;
}
.today-note {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  font-size: 9px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 20px;
}
.today-note .icon {
  width: 13px;
  height: 13px;
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 22px 0;
}
.metric-card {
  padding: 20px;
}
.metric-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  gap: 8px;
}
.metric-icon {
  background: var(--soft);
  color: var(--accent);
  padding: 6px;
  border-radius: 7px;
}
.metric-icon.purple {
  background: #a197b615;
  color: var(--purple);
}
.metric-icon.amber {
  background: #c6ac6812;
  color: #b7a06b;
}
.metric-icon.blue {
  background: #7799a515;
  color: #7799a5;
}
.metric-icon .icon {
  width: 16px;
  height: 16px;
}
.metric-value {
  font: 600 30px "Manrope";
  letter-spacing: -1px;
  margin: 14px 0 8px;
}
.metric-value small {
  font: 400 11px "DM Sans";
  letter-spacing: 0;
  margin-left: 7px;
}
.metric-detail {
  font-size: 9px;
  color: var(--muted);
  line-height: 1.5;
}
.chart-card {
  margin-bottom: 22px;
  overflow: hidden;
}
.segmented {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 3px;
  border-radius: 7px;
}
.segmented button {
  padding: 7px 12px;
  font-size: 10px;
  color: var(--muted);
  border-radius: 4px;
  white-space: nowrap;
}
.segmented .selected {
  background: var(--card);
  box-shadow: 0 1px 4px #0001;
  color: var(--ink);
}
.chart-wrap {
  padding: 18px 23px 0;
}
.chart-wrap svg {
  width: 100%;
  display: block;
}
.chart-grid {
  stroke: var(--line);
  stroke-dasharray: 3 5;
  stroke-width: 1;
}
.axis {
  fill: var(--muted);
  font-size: 10px;
  font-family: "DM Sans";
}
.chart-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 26px 21px;
  font-size: 9px;
}
.chart-legend {
  display: flex;
  gap: 20px;
  color: var(--muted);
}
.insights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.insight-card {
  display: flex;
  gap: 20px;
  padding: 25px;
}
.insight-symbol {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--soft);
  color: var(--accent);
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.insight-symbol.purple {
  background: #a197b615;
  color: var(--purple);
}
.insight-card p {
  font-size: 11px;
  margin: 8px 0 12px;
}
.insight-card .eyebrow {
  font-size: 8px;
}
footer {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 9px;
  margin-top: 38px;
  gap: 20px;
}
.footer-dot {
  padding: 0 10px;
}
.energy-paths path {
  fill: none;
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
  opacity: 0.2;
  stroke: #92a78a;
}
.energy-paths path.energized {
  opacity: 0.7;
}
.energy-paths.moving path.energized {
  animation: energy 2.5s linear infinite;
}
.battery-path {
  stroke: #a197b6 !important;
}
.load-path {
  stroke: #8b9e81 !important;
}
@keyframes energy {
  to {
    stroke-dashoffset: -40;
  }
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--ink);
  color: var(--card);
  padding: 12px 17px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 550;
}
.button:hover {
  opacity: 0.85;
}
.button.secondary {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
}
.button .icon {
  width: 16px;
  height: 16px;
}
.demo-banner {
  border: 1px solid #c0acd330;
  background: #b9a3c811;
  color: var(--muted);
  padding: 12px 17px;
  border-radius: 7px;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 24px;
  align-items: center;
}
.demo-banner button {
  font-size: 10px;
  color: var(--ink);
}
.demo-banner .icon {
  width: 14px;
  height: 14px;
}
.empty-chart {
  min-height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: 12px;
  padding: 30px;
}
.empty-chart > .icon {
  width: 32px;
  height: 32px;
  color: var(--accent);
  opacity: 0.6;
}
.empty-chart h3 {
  font-size: 15px;
}
.empty-chart p {
  font-size: 11px;
}
.report-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
}
.muted {
  color: var(--muted);
  font-size: 11px;
}
.small {
  font-size: 10px;
}
.legend-inline {
  font-size: 10px;
  color: var(--muted);
}
.bar-chart {
  display: flex;
  gap: 16px;
  padding: 35px 35px 25px;
  overflow-x: auto;
  min-height: 265px;
}
.bar-column {
  flex: 1;
  min-width: 40px;
  max-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: center;
  padding: 0;
  justify-content: flex-end;
}
.bar-value {
  font-size: 10px;
  color: var(--ink);
}
.bar-track {
  height: 155px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.bar {
  width: 55%;
  max-width: 55px;
  background: var(--accent);
  border-radius: 5px 5px 0 0;
  transition: height 0.6s;
}
.bar.partial {
  background: linear-gradient(0deg, var(--accent), #adc69b);
}
.bar-column:hover .bar {
  opacity: 0.7;
}
.bar-label {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}
.report-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 10px;
  line-height: 1.65;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding: 15px 26px;
}
.report-notice .icon {
  width: 14px;
  height: 14px;
}
.reports-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: 20px;
  margin-bottom: 22px;
}
.table-scroll {
  overflow: auto;
  padding: 15px 26px 25px;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  white-space: nowrap;
  font-size: 10px;
}
th {
  color: var(--muted);
  font-weight: 450;
  padding: 12px 9px;
  border-bottom: 1px solid var(--line);
}
td {
  padding: 15px 9px;
  border-bottom: 1px solid var(--line);
}
td strong {
  font-weight: 550;
}
tbody tr:hover,
tbody tr.highlight {
  background: var(--soft);
}
tbody tr[data-day] {
  cursor: pointer;
}
.coverage {
  font-size: 9px;
  color: var(--green);
}
.coverage.partial {
  color: #b09b73;
}
.comparison-card {
  padding: 26px;
}
.comparison-card > p {
  font-size: 11px;
  margin-top: 9px;
}
.compare-selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}
.compare-selects label {
  font-size: 10px;
  color: var(--muted);
}
select,
input {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: var(--bg);
  min-height: 42px;
}
select {
  font-size: 11px;
}
.compare-total {
  font: 600 33px "Manrope";
  margin: 15px 0 5px;
}
.compare-total small {
  font: 400 11px "DM Sans";
  margin-left: 7px;
}
#comparison-result > p {
  font-size: 12px;
  margin-bottom: 20px;
}
#comparison-result .report-notice {
  padding: 15px 0;
}
.setup-empty {
  text-align: center;
  padding: 60px 30px;
}
.large-icon {
  display: grid;
  place-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--accent);
  margin: 0 auto 25px;
}
.large-icon .icon {
  width: 45px;
  height: 45px;
}
.setup-empty h2 {
  font-size: 28px;
}
.setup-empty p {
  max-width: 440px;
  margin: 15px auto 25px;
  font-size: 12px;
}
.setup-empty > small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 25px;
}
.forecast-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 30px 20px;
  gap: 10px;
}
.forecast-days article {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  border-right: 1px solid var(--line);
  padding: 0 10px;
}
.forecast-days article:last-child {
  border: 0;
}
.forecast-days article > span {
  font-size: 12px;
}
.forecast-days .icon {
  width: 29px;
  height: 29px;
  color: var(--accent);
}
.forecast-days strong {
  font: 550 24px "Manrope";
}
.forecast-days strong small {
  font: 400 9px "DM Sans";
  margin-left: 4px;
}
.forecast-days article > small,
.forecast-days article > div {
  font-size: 9px;
  color: var(--muted);
}
.forecast-caveat {
  margin-bottom: 22px;
}
.method-card {
  padding: 26px;
  margin: 22px 0;
}
.method-card p {
  font-size: 12px;
  max-width: 750px;
  margin: 12px 0;
}
.system-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  margin-bottom: 22px;
}
.system-status {
  display: flex;
  justify-content: space-between;
  padding: 25px 26px 10px;
  color: var(--muted);
  font-size: 10px;
}
.telemetry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px 26px 25px;
  gap: 25px;
}
.telemetry-grid span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 12px;
}
.telemetry-grid strong {
  font: 550 22px "Manrope";
}
.telemetry-grid small {
  font: 400 10px "DM Sans";
}
.temperatures {
  padding: 10px 26px 18px;
}
.temperatures > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 20px;
  gap: 10px;
  font-size: 11px;
}
.temperatures strong {
  text-align: right;
  font-weight: 500;
}
.temperature-track {
  grid-column: 1/-1;
  height: 4px;
  border-radius: 3px;
  background: var(--bg);
}
.temperature-track i {
  display: block;
  background: var(--accent);
  height: 100%;
  border-radius: 3px;
}
.system-layout .table-card > .small {
  padding: 0 26px 25px;
}
.alert-list {
  padding: 5px 26px 15px;
}
.alert {
  display: flex;
  gap: 15px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.alert:last-child {
  border: 0;
}
.alert > .icon {
  color: var(--accent);
  width: 18px;
  height: 18px;
}
.alert strong {
  font-size: 12px;
  font-weight: 550;
}
.alert p {
  font-size: 11px;
  margin-top: 6px;
}
.alert.warning > .icon {
  color: #c79b5d;
}
.raw-data {
  margin: 22px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  background: var(--card);
}
summary {
  cursor: pointer;
  font-size: 12px;
}
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
}
.settings-card {
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding: 30px;
  margin-bottom: 20px;
  gap: 50px;
}
.step-number {
  font-size: 10px;
  color: var(--accent);
  display: block;
  margin-bottom: 15px;
}
.settings-intro p {
  font-size: 11px;
  margin-top: 12px;
  max-width: 210px;
}
.settings-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px 20px;
}
.field {
  font-size: 11px;
  font-weight: 500;
}
.field small {
  display: block;
  font-size: 9px;
  color: var(--muted);
  font-weight: 400;
  margin-top: 7px;
  line-height: 1.5;
}
.settings-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 28px 0;
}
.settings-actions p {
  font-size: 10px;
}
.settings-actions > div {
  display: flex;
  gap: 10px;
}
.roadmap {
  padding: 30px;
  margin-top: 35px;
}
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  margin-top: 28px;
}
.roadmap-grid span {
  font-size: 9px;
  color: var(--accent);
  letter-spacing: 1px;
}
.roadmap-grid h3 {
  margin: 12px 0;
  font-size: 15px;
}
.roadmap-grid p {
  font-size: 11px;
}
#form-error {
  color: #bf7956;
  font-size: 12px;
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translate(-50%, 20px);
  padding: 15px 22px;
  background: var(--ink);
  color: var(--card);
  border-radius: 8px;
  font-size: 12px;
  box-shadow: 0 10px 40px #0002;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
  max-width: 90vw;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (min-width: 1600px) {
  .energy-scene {
    height: 410px;
  }
  .today-card {
    padding: 32px;
  }
  .orbit-sun {
    margin-top: 35px;
  }
  .today-total {
    margin-top: 30px;
  }
}
@media (max-width: 1200px) {
  .sidebar {
    width: 195px;
    padding: 30px 15px;
  }
  .brand {
    font-size: 26px;
  }
  main {
    margin-left: 195px;
  }
  .content {
    padding: 30px 25px;
  }
  .topbar {
    padding: 0 25px;
  }
  .hero-grid {
    grid-template-columns: 1.8fr 1fr;
    gap: 15px;
  }
  .section-top {
    padding: 22px 20px 0;
  }
  .today-card {
    padding: 22px;
  }
  .flow-node strong {
    font-size: 22px;
  }
  .metrics-grid {
    gap: 12px;
  }
  .metric-card {
    padding: 16px;
  }
  .metric-value {
    font-size: 27px;
  }
  .energy-scene {
    height: 345px;
  }
  .flow-bottom {
    padding: 17px 20px;
  }
  .flow-bottom > span {
    font-size: 8px;
  }
  .insight-card {
    padding: 20px;
    gap: 13px;
  }
  .today-row {
    font-size: 9px;
  }
}
@media (max-width: 1000px) {
  .sidebar {
    width: 175px;
    padding: 25px 10px;
  }
  .brand {
    font-size: 25px;
  }
  .brand > .icon {
    width: 25px;
  }
  .site-name {
    font-size: 11px;
  }
  .nav-item {
    font-size: 12px;
  }
  main {
    margin-left: 175px;
  }
  .content {
    padding: 25px 20px;
  }
  .topbar {
    height: 70px;
    padding: 0 20px;
  }
  h1 {
    font-size: 30px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .today-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 23px;
    column-gap: 25px;
  }
  .today-card .eyebrow,
  .today-card h2,
  .today-total,
  .today-card > p {
    grid-column: 1;
  }
  .orbit-sun {
    position: absolute;
    right: 28px;
    top: 5px;
    width: 55px;
    height: 55px;
    margin: 0;
  }
  .orbit-sun .icon {
    width: 30px;
    height: 30px;
  }
  .today-total {
    font-size: 40px;
    margin-top: 22px;
  }
  .today-divider {
    display: none;
  }
  .today-row {
    grid-column: 2;
    margin: 7px 0;
  }
  .today-row:nth-of-type(5) {
    grid-row: 3;
  }
  .today-row:nth-of-type(6) {
    grid-row: 4;
  }
  .today-row:nth-of-type(7) {
    grid-row: 5;
  }
  .today-note {
    grid-column: 1/-1;
    margin-top: 17px;
  }
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .reports-bottom,
  .system-layout {
    grid-template-columns: 1fr;
  }
  .settings-card {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .settings-intro p {
    max-width: none;
  }
  .forecast-days {
    overflow-x: auto;
    grid-template-columns: repeat(7, minmax(90px, 1fr));
  }
  .settings-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 700px) {
  .sidebar {
    inset: auto 0 0;
    width: 100%;
    height: 68px;
    padding: 0;
    background: var(--card);
    border-right: 0;
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(68px + env(safe-area-inset-bottom));
  }
  .sidebar > .brand,
  .site-name,
  .sidebar-bottom {
    display: none;
  }
  .sidebar nav {
    display: flex;
    justify-content: space-around;
    padding: 4px 8px;
  }
  .nav-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 12px;
    margin: 0;
    font-size: 9px;
    max-width: 85px;
    border-radius: 7px;
  }
  .nav-item .icon {
    width: 20px;
    height: 20px;
  }
  .nav-item i {
    display: none;
  }
  main {
    margin-left: 0;
  }
  .topbar {
    height: 64px;
    padding: 0 20px;
  }
  .breadcrumb {
    font-size: 10px;
  }
  .breadcrumb:before {
    content: "solarpi.";
    font: 700 20px "Manrope";
    color: var(--ink);
    margin-right: 15px;
    letter-spacing: -1px;
  }
  .breadcrumb {
    font-size: 0;
  }
  .breadcrumb > span,
  .breadcrumb > strong {
    display: none;
  }
  .topbar-right {
    gap: 10px;
  }
  .status {
    font-size: 9px;
  }
  .content {
    padding: 27px 17px 100px;
  }
  .page-heading {
    margin-bottom: 25px;
    align-items: flex-start;
  }
  .page-heading .date-chip {
    display: none;
  }
  .page-heading h1 {
    font-size: 28px;
    letter-spacing: -1.1px;
  }
  .eyebrow {
    font-size: 8px;
    letter-spacing: 1.4px;
  }
  .page-heading p {
    font-size: 11px;
    margin-top: 8px;
    max-width: 300px;
  }
  .page-heading > .button {
    padding: 8px 10px;
    font-size: 0;
  }
  .page-heading > .button .icon {
    width: 18px;
    height: 18px;
  }
  .flow-card,
  .today-card,
  .metric-card,
  .chart-card,
  .insight-card {
    border-radius: 10px;
  }
  .section-top {
    padding: 20px 18px 0;
    gap: 10px;
  }
  .section-top h2 {
    font-size: 16px;
  }
  .section-top .subtle-pill {
    font-size: 8px;
    padding: 5px 7px;
  }
  .energy-scene {
    height: 290px;
  }
  .house-scene {
    transform: scale(0.93);
    transform-origin: center center;
  }
  .flow-node strong {
    font-size: 22px;
  }
  .flow-node > span {
    font-size: 9px;
  }
  .flow-node em {
    font-size: 7px;
  }
  .solar-node {
    left: 5%;
    top: 15%;
  }
  .home-node {
    right: 2%;
    top: 19%;
    min-width: 75px;
  }
  .battery-node {
    left: 5%;
    bottom: 12%;
  }
  .grid-node {
    right: 2%;
    bottom: 12%;
    min-width: 75px;
  }
  .flow-bottom {
    padding: 14px 18px;
  }
  .flow-bottom > span {
    font-size: 8px;
  }
  .flow-bottom .text-button {
    font-size: 9px;
  }
  .today-card {
    padding: 22px;
  }
  .today-card h2 {
    font-size: 18px;
  }
  .today-total {
    font-size: 37px;
    margin-top: 20px;
  }
  .today-card > p {
    font-size: 9px;
  }
  .today-row {
    font-size: 9px;
  }
  .orbit-sun {
    display: none;
  }
  .today-note {
    font-size: 8px;
  }
  .metrics-grid {
    gap: 11px;
    margin: 16px 0;
  }
  .metric-card {
    padding: 15px;
  }
  .metric-label {
    font-size: 9px;
    line-height: 1.4;
  }
  .metric-value {
    font-size: 26px;
    margin: 13px 0 7px;
  }
  .metric-value small {
    font-size: 10px;
    margin-left: 5px;
  }
  .metric-detail {
    font-size: 8px;
  }
  .metric-icon {
    padding: 5px;
  }
  .metric-icon .icon {
    width: 14px;
    height: 14px;
  }
  .chart-card .section-top {
    flex-wrap: wrap;
  }
  .chart-card .section-top p {
    font-size: 10px;
  }
  .chart-card .segmented {
    margin-top: 8px;
  }
  .chart-wrap {
    padding: 20px 10px 0;
  }
  .chart-wrap svg {
    min-height: 180px;
  }
  .chart-footer {
    padding: 10px 18px 18px;
    gap: 15px;
  }
  .chart-legend {
    font-size: 8px;
    gap: 10px;
  }
  .chart-footer .text-button {
    font-size: 8px;
  }
  .insights-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .insight-card {
    padding: 20px;
  }
  .insight-card h3 {
    font-size: 16px;
  }
  .insight-card p {
    font-size: 10px;
  }
  .insight-symbol {
    width: 34px;
    height: 34px;
  }
  .report-controls {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
  }
  .bar-chart {
    gap: 9px;
    padding: 30px 18px 20px;
  }
  .bar-label {
    font-size: 8px;
  }
  .bar-value {
    font-size: 9px;
  }
  .report-notice {
    font-size: 9px;
    padding: 14px 18px;
  }
  .table-scroll {
    padding: 10px 10px 20px;
  }
  .table-card .section-top {
    padding-bottom: 10px;
  }
  td,
  th {
    font-size: 9px;
    padding: 13px 7px;
  }
  .comparison-card {
    padding: 22px;
  }
  .settings-card {
    padding: 22px;
  }
  .settings-fields {
    gap: 20px 14px;
  }
  .settings-actions > div {
    width: 100%;
  }
  .settings-actions .button {
    flex: 1;
    font-size: 10px;
    padding: 12px 9px;
  }
  .settings-actions p {
    font-size: 9px;
  }
  .field {
    font-size: 10px;
  }
  .field small {
    font-size: 8px;
  }
  input,
  select {
    font-size: 16px;
    padding: 11px 9px;
  }
  .roadmap {
    padding: 22px;
  }
  .roadmap-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .setup-empty {
    padding: 45px 25px;
  }
  .setup-empty h2 {
    font-size: 23px;
  }
  .setup-empty p {
    font-size: 11px;
  }
  .telemetry-grid {
    gap: 23px 15px;
    padding: 15px 20px 25px;
  }
  .telemetry-grid strong {
    font-size: 20px;
  }
  .system-status {
    padding: 15px 20px;
  }
  .alert-list {
    padding: 0 18px 10px;
  }
  .alert p {
    font-size: 10px;
  }
  .method-card {
    padding: 22px;
  }
  .method-card p {
    font-size: 11px;
  }
  footer {
    font-size: 8px;
    margin-top: 28px;
    flex-direction: column;
    gap: 10px;
  }
  .demo-banner {
    font-size: 9px;
    padding: 10px 12px;
  }
  .demo-banner button {
    font-size: 9px;
  }
  .empty-chart {
    min-height: 230px;
  }
  .empty-chart p {
    font-size: 10px;
  }
  .forecast-caveat {
    padding: 20px;
  }
  .forecast-days {
    padding: 25px 10px;
  }
  .forecast-days strong {
    font-size: 23px;
  }
  #toast {
    bottom: 90px;
    font-size: 11px;
    width: max-content;
    max-width: 90vw;
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.performance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  padding: 30px 26px;
}
.performance-grid strong {
  display: block;
  font: 600 32px "Manrope";
  margin: 14px 0 8px;
  letter-spacing: -1px;
}
.performance-grid strong small {
  font: 400 11px "DM Sans";
  margin-left: 6px;
}
.performance-grid p {
  font-size: 9px;
}
.health-observation {
  display: flex;
  gap: 15px;
  background: var(--soft);
  padding: 20px 25px;
  margin: 0 26px 10px;
  border-radius: 8px;
}
.health-observation > .icon {
  color: var(--accent);
  flex-shrink: 0;
}
.health-observation strong {
  font-size: 12px;
  font-weight: 550;
}
.health-observation p {
  font-size: 10px;
  margin-top: 7px;
}
.performance-table {
  padding-top: 0;
}
@media (max-width: 1000px) {
  .performance-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 700px) {
  .performance-grid {
    padding: 23px 18px;
    gap: 25px 15px;
  }
  .performance-grid > .muted {
    font-size: 10px;
  }
  .performance-grid strong {
    font-size: 28px;
  }
  .health-observation {
    margin: 0 18px 10px;
    padding: 17px;
  }
  .health-observation p {
    font-size: 9px;
  }
}
:root {
  --muted: #677368;
}
:root[data-theme="midnight"] {
  --muted: #a4b3a9;
}
.metric-label,
.today-row,
.text-button,
.chart-legend,
.metric-detail,
.flow-node > span,
.flow-node em {
  font-size: 11px;
}
.today-note,
.subtle-pill,
.metric-detail {
  font-size: 10px;
}
.chart-readout {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--muted);
  padding: 14px 4px 5px;
  min-height: 35px;
}
.chart-readout strong {
  font-weight: 500;
  color: var(--ink);
}
.interactive-chart {
  cursor: crosshair;
}
.energy-paths.moving path.reverse {
  animation-direction: reverse;
}
.forecast-chart-legend {
  padding: 15px 30px;
  display: flex;
  gap: 25px;
  font-size: 11px;
  color: var(--muted);
}
.amber-dot {
  background: #c5ab6f;
}
.flow-node {
  background: color-mix(in srgb, var(--card) 60%, transparent);
  border-radius: 7px;
  padding: 7px;
}
.flow-node em {
  line-height: 1.5;
  max-width: 125px;
}
.house-scene {
  pointer-events: none;
}
:root[data-theme="midnight"] .energy-scene {
  background: radial-gradient(ellipse at 50% 60%, #81b75a13, transparent 60%);
}
:root[data-theme="midnight"] .flow-card {
  border-color: #486040;
}
:root[data-theme="midnight"] .today-card {
  background: linear-gradient(150deg, #324426, #192321 75%);
}
:root[data-theme="midnight"] .house-scene {
  filter: brightness(0.88);
}
:root[data-theme="midnight"] .orbit-sun {
  background: #b5cf8910;
  border-color: #b5cf8920;
}
:root[data-theme="midnight"] .brand > .icon {
  filter: drop-shadow(0 0 10px #c1e79840);
}
@media (max-width: 700px) {
  .metric-label,
  .metric-detail,
  .today-row,
  .today-note,
  .flow-node > span,
  .flow-node em,
  .text-button,
  .chart-legend {
    font-size: 10px;
  }
  .flow-node {
    padding: 4px;
    min-width: 90px;
  }
  .flow-node em {
    font-size: 9px;
    max-width: 100px;
  }
  .home-node,
  .grid-node {
    right: 3%;
  }
  .solar-node,
  .battery-node {
    left: 3%;
  }
  .flow-bottom .text-button {
    font-size: 10px;
  }
  .flow-bottom > span {
    font-size: 9px;
  }
  .metric-label {
    line-height: 1.5;
  }
  .metric-detail {
    line-height: 1.6;
  }
  .chart-readout {
    flex-direction: column;
    font-size: 10px;
    gap: 7px;
    min-height: 55px;
    padding: 12px 5px;
  }
  .forecast-chart-legend {
    font-size: 10px;
    gap: 15px;
    padding: 15px 18px;
  }
  .today-card {
    display: block;
  }
  .today-card .orbit-sun {
    display: none;
  }
  .today-total {
    margin-top: 25px;
  }
  .today-divider {
    display: block;
    margin: 20px 0 15px;
  }
  .today-row {
    margin: 14px 0;
  }
  .today-card > p {
    font-size: 11px;
  }
  .today-note {
    margin-top: 20px;
  }
  .metric-value {
    margin-top: 16px;
  }
  .section-top p {
    font-size: 11px !important;
  }
  .page-heading p {
    font-size: 12px;
  }
  .alert p,
  .method-card p,
  .insight-card p {
    font-size: 12px;
  }
  .field {
    font-size: 12px;
  }
  .field small {
    font-size: 10px;
  }
  .coverage {
    font-size: 10px;
  }
  .table-scroll td,
  .table-scroll th {
    font-size: 11px;
  }
  .chart-footer .text-button {
    font-size: 10px;
  }
  .chart-legend {
    flex-direction: column;
    gap: 6px;
  }
  .flow-node strong {
    font-size: 23px;
  }
  .today-note .icon {
    width: 14px;
    height: 14px;
  }
}
.day-link {
  font: inherit;
  text-align: left;
  padding: 0;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
}
.day-link:hover {
  text-decoration-color: var(--accent);
}
/* Persistent controls sit outside the telemetry update surface. */
.scene-picker {display:flex;justify-content:center;gap:5px;padding:0 15px 16px;}
.scene-picker button {background:transparent;border:1px solid transparent;color:var(--muted);padding:6px 12px;border-radius:20px;font-size:10px;cursor:pointer;}
.scene-picker button.selected {background:var(--soft);color:var(--ink);border-color:var(--line);}
.energy-scene .home-node {top:auto;bottom:12%;}
.energy-scene .grid-node {bottom:auto;top:15%;}
.energy-scene .solar-node {top:15%;}
select {appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23808b80' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;}
.location-search {grid-column:1/-1;}
.search-row {display:flex;gap:10px;align-items:center;}
.search-row input {flex:1;min-width:0;}
.search-row button {margin-top:8px;}
.location-match {display:block;width:100%;text-align:left;background:var(--soft);border:1px solid var(--line);border-radius:6px;margin-top:7px;padding:12px;color:var(--ink);cursor:pointer;line-height:1.5;}
#location-results {font-size:12px;color:var(--muted);line-height:1.6;margin-top:12px;}
.array-advanced {grid-column:2;padding-top:15px;border-top:1px solid var(--line);margin-top:20px;}
.array-advanced summary {cursor:pointer;color:var(--ink);font-size:13px;padding:8px 0;}
.array-advanced summary span {color:var(--muted);margin-left:8px;font-size:11px;}
.array-advanced .settings-fields {padding-top:12px;}
.lab-period {width:fit-content;margin-bottom:22px;}
.raw-data pre {max-height:480px;overflow:auto;overscroll-behavior:contain;}
.raw-data>.button {margin-top:16px;}
@media(max-width:700px) {
 .topbar-right {gap:9px;}.scene-picker button{font-size:11px;padding:8px 12px;}
 .array-advanced {grid-column:1/-1;}.array-advanced summary span{display:block;margin-left:16px;margin-top:5px;}
 .energy-scene .home-node{bottom:12%;top:auto;}.energy-scene .grid-node{top:15%;bottom:auto;}
}
.topbar-right {gap:12px;}
.mobile-more,.mobile-menu,.menu-backdrop {display:none;}
.today-stats {display:flex;flex-direction:column;gap:14px;}
.today-stats .today-row {margin:0;}
.chart-wrap {position:relative;}
.chart-tooltip {position:absolute;top:30px;background:color-mix(in srgb,var(--card) 76%,transparent);color:var(--ink);border:1px solid var(--line);box-shadow:0 8px 25px #0002;border-radius:10px;padding:12px;font-size:11px;max-width:240px;pointer-events:none;z-index:4;line-height:1.7;}
.chart-tooltip strong,.chart-tooltip span {display:block;}
.chart-tooltip[hidden],.chart-cursor[hidden] {display:none;}
.chart-cursor {stroke:var(--muted);stroke-width:1;stroke-dasharray:3 4;opacity:.6;}
.bar-column {position:relative;}
.bar-tooltip {position:absolute;top:0;left:50%;transform:translate(-50%,-8px);min-width:130px;background:color-mix(in srgb,var(--card) 76%,transparent);border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow);border-radius:9px;padding:10px;font-size:11px;line-height:1.6;z-index:5;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s;}
.bar-column:hover .bar-tooltip,.bar-column:focus-visible .bar-tooltip {opacity:1;visibility:visible;}
.bar-column:first-child .bar-tooltip {left:0;transform:translate(0,-8px);}
.bar-column:last-child .bar-tooltip {left:auto;right:0;transform:translate(0,-8px);}
.diagnostic-entry {margin-top:22px;}
.diagnostic-entry-body {padding:0 26px 26px;color:var(--muted);font-size:12px;line-height:1.6;}
.diagnostic-entry-body p {margin-bottom:18px;}
.page-enter {animation:page-arrive .38s cubic-bezier(.2,.7,.3,1) both;}
.chart-wrap svg {animation:chart-arrive .7s cubic-bezier(.2,.7,.3,1) both;}
.bar {transform-origin:bottom;animation:bar-arrive .65s cubic-bezier(.2,.7,.3,1) both;}
@keyframes page-arrive {from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes chart-arrive {from{opacity:.15;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes bar-arrive {from{transform:scaleY(.02)}to{transform:scaleY(1)}}
@media(min-width:701px) and (max-width:1000px) {
 .today-stats {grid-column:2;grid-row:3/6;align-self:center;gap:14px;}
 .today-stats .today-row {grid-row:auto;grid-column:auto;}
}
@media(max-width:700px) {
 .topbar-right {gap:6px;}.sidebar .mobile-more {display:flex;}
 .sidebar .nav-item {padding:8px 7px;flex:1;}
 .mobile-menu:not([hidden]) {display:block;position:fixed;z-index:70;bottom:calc(78px + env(safe-area-inset-bottom));left:12px;right:12px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:0 18px 18px;box-shadow:0 20px 60px #0004;animation:page-arrive .2s both;}
 .mobile-menu .section-top {padding:20px 0 0;align-items:center;}
 .mobile-menu>p {color:var(--muted);font-size:12px;margin:12px 0;}
 .menu-link {width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:14px 8px;border:0;border-top:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;}
 .menu-link>.icon:last-child {margin-left:auto;}
 .menu-backdrop:not([hidden]) {display:block;position:fixed;inset:0;z-index:60;border:0;background:#0005;}
 .today-stats {gap:14px;margin-top:15px;}
 #export {display:flex;align-items:center;justify-content:center;margin:0;align-self:center;padding:12px 18px;min-width:140px;}
 .page-heading:has(#export) {flex-wrap:wrap;}
 .diagnostic-entry-body {padding:0 18px 22px;}
}
@media(prefers-reduced-motion:reduce) {.page-enter,.chart-wrap svg,.bar,.mobile-menu {animation:none!important;}.bar-tooltip{transition:none;}}
@media(max-width:700px) {#export {font-size:12px;gap:8px;} #export .icon {margin:0;}}

html {scroll-padding-top:95px;}
@media(max-width:700px) {html {scroll-padding-top:76px;}}
.array-setup {min-width:0;align-self:start;}
.array-setup .array-advanced {margin-top:12px;padding-top:8px;}
.settings-intro p a {display:inline-flex;align-items:center;gap:4px;color:var(--accent);margin-top:8px;}
.settings-intro p a .icon {width:13px;height:13px;}
.forecast-setting {grid-column:1/-1;border:1px solid var(--line);border-radius:12px;padding:15px;background:var(--soft);}
.forecast-switch {display:flex;align-items:center;gap:15px;cursor:pointer;position:relative;}
.forecast-switch>span {flex:1;}.forecast-switch strong{font-size:12px;}.forecast-switch small{display:block;font-size:10px;color:var(--muted);margin-top:5px;}
.forecast-switch input {position:absolute;right:0;width:40px;height:26px;min-height:0;margin:0;opacity:0;cursor:pointer;z-index:1;}
.forecast-switch>i {width:40px;height:24px;border-radius:20px;background:var(--muted);position:relative;transition:background .2s;flex-shrink:0;}
.forecast-switch>i:after {content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:var(--card);border-radius:50%;transition:transform .2s;}
.forecast-switch input:checked+i {background:var(--accent);}.forecast-switch input:checked+i:after{transform:translateX(16px);}.forecast-switch input:focus-visible+i{outline:2px solid var(--ink);outline-offset:3px;}
#forecast-setting-note {font-size:10px;margin:12px 0 0;line-height:1.6;}
@media(prefers-reduced-motion:reduce){.forecast-switch>i,.forecast-switch>i:after{transition:none;}}

/* A rolling week: measured history, today, and the outlook. */
.forecast-timeline .section-top{flex-wrap:wrap;gap:16px;}
.forecast-timeline .forecast-days{padding:24px 0;gap:0;position:relative;}
.forecast-timeline .forecast-days article{gap:10px;padding:16px 10px;min-width:0;}
.forecast-timeline .forecast-days .forecast-today{background:var(--soft);border-radius:14px;outline:1px solid var(--accent);outline-offset:-1px;}
.forecast-today>span{font-weight:700;color:var(--accent);}
.forecast-energy-label{font-size:10px!important;}
.forecast-comparison{margin:4px 0 0;width:100%;font-size:9px;line-height:1.6;text-align:center;}
.forecast-comparison>div+div{margin-top:8px;}
.forecast-comparison dt{color:var(--muted);}
.forecast-comparison dd{margin:0;font-size:11px;font-variant-numeric:tabular-nums;}
.forecast-ahead{min-height:119px;line-height:1.7;}
.forecast-ahead small{display:block;margin-top:8px;}
.forecast-timeline-note{font-size:11px;color:var(--muted);line-height:1.7;margin:0 0 6px;}
@media(max-width:1100px){.forecast-timeline .forecast-days{grid-template-columns:repeat(7,minmax(125px,1fr));overflow-x:auto;}}

.kpi-note{font-size:11px;line-height:1.7;color:var(--muted);margin:-12px 0 24px;}
.system-layout{grid-template-columns:1fr;}
.system-temperatures{margin-bottom:22px;}
.system-temperatures .temperatures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:0 26px 24px;}
.system-temperatures .temperatures>div{display:flex;flex-direction:column;gap:10px;margin-top:0;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--bg);}
.system-temperatures .temperatures strong{text-align:left;font-size:23px;}
.system-temperatures .temperatures small{color:var(--muted);font-size:10px;line-height:1.5;}
.system-temperatures>p{padding:0 26px 20px;}
.compare-visual{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(100px,1fr);gap:24px;align-items:center;padding:12px 0;}
.compare-bar-row{position:relative;outline-offset:5px;}
.compare-bar-row+.compare-bar-row{margin-top:22px;}
.compare-bar-row>div:first-of-type{display:flex;justify-content:space-between;gap:8px;font-size:11px;margin-bottom:9px;}
.compare-bar-row strong{font-weight:550;white-space:nowrap;}
.compare-bar-track{height:18px;background:var(--soft);border-radius:5px;overflow:hidden;}
.compare-bar{display:block;height:100%;background:var(--accent);border-radius:5px;transform-origin:left;animation:compare-grow .5s ease both;}
.compare-bar-1{background:var(--purple);}
.compare-bar-row:hover .bar-tooltip,.compare-bar-row:focus-visible .bar-tooltip{opacity:1;visibility:visible;}
.compare-delta .compare-total{font-size:28px;margin:8px 0;}
.compare-delta p{font-size:11px;line-height:1.7;margin:0;}
@keyframes compare-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:1000px){.system-temperatures .temperatures{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.compare-visual{gap:18px;}.compare-delta .compare-total{font-size:25px;}.system-temperatures .temperatures{padding:0 18px 18px;gap:10px;}.system-temperatures .temperatures>div{padding:14px;}}
@media(prefers-reduced-motion:reduce){.compare-bar{animation:none;}}

.energy-pairs .paired-bar-track{display:flex;align-items:flex-end;justify-content:center;gap:4px;}
.energy-pairs .bar{width:42%;max-width:28px;}
.energy-bar-load{background:var(--purple)!important;}
.energy-bar-solar{background:var(--accent)!important;}
.energy-pairs .bar-value{font-size:11px;white-space:nowrap;}
.load-bar-value{color:var(--purple);font-size:10px;}
.report-context{margin:0 26px 8px;padding:16px 18px;border-radius:12px;background:var(--soft);font-size:12px;line-height:1.7;}
.report-context p{margin:5px 0 0;color:var(--muted);}
.report-days-scroll{max-height:430px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;}
.report-days-scroll thead th{position:sticky;top:0;z-index:2;background:var(--card);box-shadow:0 1px 0 var(--line);}
.compare-series{display:flex;justify-content:space-between;gap:6px;font-size:10px;margin:7px 0 5px;color:var(--muted);}
.compare-series strong{font-size:10px;color:var(--ink);}
.compare-load-change{display:inline-block;margin-top:7px;color:var(--purple);}
@media(max-width:600px){.energy-pairs .bar-value{font-size:10px;}.load-bar-value{display:block;font-size:9px;}.report-context{margin:0 18px 8px;padding:14px;}.report-days-scroll{max-height:380px;}.compare-visual{grid-template-columns:minmax(0,1.2fr) minmax(95px,1fr);gap:16px;}}
.reports-bottom>.table-card,.reports-bottom>.comparison-card{min-width:0;}
.report-days-scroll{max-width:100%;}

.report-series-legend button{display:inline-flex;align-items:center;gap:7px;padding:9px 10px;border-radius:8px;font-size:11px;transition:opacity .15s,background .15s;}
.report-series-legend button:hover{background:var(--soft);}
.report-series-legend button[aria-pressed="false"]{opacity:.4;text-decoration:line-through;}
.report-series-legend button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.energy-pairs .series-hidden{display:none!important;}
.energy-pairs[data-visible-series="1"] .bar{width:70%;max-width:40px;}
.energy-pairs .bar-value{display:flex;align-items:center;justify-content:center;gap:5px;}
.solar-bar-value{color:var(--accent);}
.report-no-series{text-align:center;color:var(--muted);font-size:12px;margin:0 20px 20px;}