/* Mobile source of truth. Keep this file small and loaded after style.css. */
@media (max-width: 640px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html body .designer-mode-toggle,
  html body .designer-mode-panel,
  html body .designer-target::after {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html body .premium-hero .hero-copy,
  html body .premium-hero .hero-copy h1,
  html body .premium-hero .hero-copy h1 span,
  html body .premium-hero .hero-weather-card,
  html body .overview-main-4 > *,
  html body #mobileFlowDiagram,
  html body #mobileFlowDiagram * {
    min-width: 0 !important;
  }

  html body .premium-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(154px, 39vw, 184px) !important;
    column-gap: clamp(12px, 3vw, 18px) !important;
    align-items: center !important;
    min-height: clamp(130px, 34vw, 170px) !important;
    padding: 0 !important;
  }

  html body .premium-hero .hero-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
  }

  html body .premium-hero .hero-copy h1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    font-size: clamp(28px, 7.8vw, 36px) !important;
    line-height: .92 !important;
    letter-spacing: 0 !important;
  }

  html body .premium-hero .hero-copy h1 span {
    display: block !important;
    max-width: 100% !important;
    line-height: .92 !important;
  }

  html body .premium-hero .hero-title-energy {
    margin-top: clamp(4px, 1.3vw, 7px) !important;
  }

  html body .premium-hero .hero-copy p {
    margin-top: clamp(14px, 3.4vw, 18px) !important;
    font-size: clamp(13px, 3.4vw, 17px) !important;
    line-height: 1.28 !important;
  }

  html body .premium-hero .hero-weather-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    width: clamp(154px, 39vw, 184px) !important;
    max-width: clamp(154px, 39vw, 184px) !important;
    min-height: clamp(64px, 17vw, 84px) !important;
    grid-template-columns: clamp(58px, 14vw, 76px) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: clamp(8px, 2vw, 12px) !important;
    row-gap: 0 !important;
    padding: 0 !important;
    align-content: center !important;
    justify-self: end !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body .premium-hero .hero-weather-card::before,
  html body .premium-hero .hero-weather-card::after,
  html body .premium-hero .hero-weather-card .moon-visual::before,
  html body .premium-hero .hero-weather-card .moon-visual::after {
    display: none !important;
    content: none !important;
  }

  html body .premium-hero .hero-weather-card .hero-weather-metrics {
    display: contents !important;
  }

  html body .premium-hero .hero-weather-card .moon-visual {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;
    width: clamp(62px, 15vw, 78px) !important;
    height: clamp(54px, 13vw, 68px) !important;
    margin: 0 !important;
    transform: translateY(0) !important;
    align-self: center !important;
    justify-self: center !important;
    background-color: transparent !important;
    background-image: url("assets/weather-icons/cloudy.webp") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 6px 10px rgba(7, 14, 28, .28)) !important;
  }

  html body.weather-visual-sun .premium-hero .hero-weather-card .moon-visual,
  html body .premium-hero .hero-weather-card .moon-visual.weather-visual-sun {
    background-image: url("assets/weather-icons/sunny.webp") !important;
  }

  html body.weather-visual-partly .premium-hero .hero-weather-card .moon-visual,
  html body .premium-hero .hero-weather-card .moon-visual.weather-visual-partly {
    background-image: url("assets/weather-icons/partly-cloudy.webp") !important;
  }

  html body.weather-visual-cloud .premium-hero .hero-weather-card .moon-visual,
  html body .premium-hero .hero-weather-card .moon-visual.weather-visual-cloud {
    background-image: url("assets/weather-icons/cloudy.webp") !important;
  }

  html body.weather-visual-rain .premium-hero .hero-weather-card .moon-visual,
  html body .premium-hero .hero-weather-card .moon-visual.weather-visual-rain {
    background-image: url("assets/weather-icons/rain.webp") !important;
  }

  html body.weather-visual-storm .premium-hero .hero-weather-card .moon-visual,
  html body .premium-hero .hero-weather-card .moon-visual.weather-visual-storm {
    background-image: url("assets/weather-icons/storm.webp") !important;
  }

  html body.weather-visual-moon .premium-hero .hero-weather-card .moon-visual,
  html body .premium-hero .hero-weather-card .moon-visual.weather-visual-moon {
    background-image: url("assets/weather-icons/night.webp") !important;
  }

  html body .premium-hero .hero-weather-card .hero-weather-temp,
  html body .premium-hero .hero-weather-card .hero-weather-text {
    grid-column: 2 !important;
    justify-self: start !important;
    width: auto !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-align: left !important;
  }

  html body .premium-hero .hero-weather-card .hero-weather-temp {
    grid-row: 1 !important;
    align-self: end !important;
    min-height: 0 !important;
    padding-block: 0 !important;
    font-size: clamp(28px, 7.1vw, 38px) !important;
    line-height: .95 !important;
  }

  html body .premium-hero .hero-weather-card .hero-weather-text {
    grid-row: 2 !important;
    align-self: start !important;
    font-size: clamp(9.5px, 2.65vw, 13px) !important;
    line-height: 1.12 !important;
    font-weight: 850 !important;
  }

  html body .premium-hero .hero-weather-card .weather-divider {
    display: none !important;
  }

  html body .premium-hero .hero-weather-card .hero-weather-sub {
    grid-column: 2 !important;
    grid-row: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-align: left !important;
    color: rgba(224, 235, 255, .74) !important;
    font-size: clamp(8.5px, 2.45vw, 11px) !important;
    font-weight: 760 !important;
    line-height: 1.08 !important;
  }

  html body .premium-hero .hero-weather-card .hero-weather-sub::before {
    display: none !important;
    content: none !important;
  }

  html body .premium-hero .hero-weather-chevron {
    display: none !important;
  }

  html body .overview-main-4 > .overview-battery.battery-current-card,
  html body .overview-main-4 > .overview-runtime.battery-runtime-card {
    min-height: clamp(246px, 66vw, 270px) !important;
    overflow: visible !important;
    text-align: center !important;
  }

  html body .overview-main-4 > .overview-battery.battery-current-card .overview-label,
  html body .overview-main-4 > .overview-runtime.battery-runtime-card .overview-label {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    top: clamp(20px, 5.2vw, 28px) !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: clamp(15px, 4.05vw, 20px) !important;
    line-height: 1.08 !important;
  }

  html body .overview-main-4 > .overview-battery.battery-current-card .overview-icon,
  html body .overview-main-4 > .overview-runtime.battery-runtime-card .overview-icon {
    left: 50% !important;
    top: clamp(100px, 25vw, 116px) !important;
    width: clamp(46px, 10.8vw, 58px) !important;
    height: clamp(46px, 10.8vw, 58px) !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    overflow: visible !important;
    z-index: 3 !important;
  }

  html body .overview-main-4 > .overview-battery.battery-current-card::after,
  html body .overview-main-4 > .overview-runtime.battery-runtime-card::after,
  html body .overview-main-4 > .overview-battery.battery-current-card .overview-sub::after,
  html body .overview-main-4 > .overview-runtime.battery-runtime-card .overview-sub::after,
  html body .overview-main-4 > .overview-battery.battery-current-card .overview-sub::before {
    display: none !important;
    content: none !important;
  }

  html body .overview-main-4 > .overview-battery.battery-current-card .overview-icon::before,
  html body .overview-main-4 > .overview-runtime.battery-runtime-card .overview-icon::before,
  html body .overview-main-4 > .overview-battery.battery-current-card .overview-icon::after,
  html body .overview-main-4 > .overview-runtime.battery-runtime-card .overview-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: clamp(86px, 22vw, 98px) !important;
    height: clamp(86px, 22vw, 98px) !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
  }

  html body .overview-main-4 > .overview-battery.battery-current-card .overview-icon::before {
    background: rgba(83, 255, 183, .12) !important;
    box-shadow: inset 0 0 0 8px rgba(103, 255, 190, .18), 0 0 16px rgba(96, 255, 183, .12) !important;
  }

  html body .overview-main-4 > .overview-runtime.battery-runtime-card .overview-icon::before {
    background: rgba(91, 169, 255, .12) !important;
    box-shadow: inset 0 0 0 8px rgba(105, 178, 255, .18), 0 0 16px rgba(93, 170, 255, .12) !important;
  }

  html body .overview-main-4 > .overview-battery.battery-current-card .overview-icon::after {
    background: conic-gradient(#70ffc2 var(--battery-fill, 99%), rgba(103, 255, 190, .15) 0) !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)) !important;
    filter: drop-shadow(0 0 9px rgba(112, 255, 194, .32)) !important;
  }

  html body .overview-main-4 > .overview-runtime.battery-runtime-card .overview-icon::after {
    background: conic-gradient(#73b7ff var(--runtime-fill, 82%), rgba(105, 178, 255, .15) 0) !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)) !important;
    filter: drop-shadow(0 0 9px rgba(112, 184, 255, .32)) !important;
  }

  html body .overview-main-4 > .overview-battery.battery-current-card .overview-icon .energy-icon-img,
  html body .overview-main-4 > .overview-runtime.battery-runtime-card .overview-icon .energy-icon-img {
    position: relative !important;
    z-index: 2 !important;
  }

  html body .overview-main-4 > .overview-battery.battery-current-card .overview-soc,
  html body .overview-main-4 > .overview-runtime.battery-runtime-card .overview-runtime-value {
    position: absolute !important;
    top: auto !important;
    bottom: clamp(34px, 8.4vw, 46px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100% - 24px) !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 2px 0 4px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: clamp(30px, 7.1vw, 42px) !important;
    line-height: 1.08 !important;
    transform: none !important;
  }

  html body .overview-main-4 > .overview-runtime.battery-runtime-card .overview-runtime-value {
    font-size: clamp(30px, 7vw, 42px) !important;
  }

  html body .overview-main-4 > .overview-battery.battery-current-card .overview-sub,
  html body .overview-main-4 > .overview-runtime.battery-runtime-card .overview-sub {
    position: absolute !important;
    top: auto !important;
    bottom: clamp(12px, 3.2vw, 18px) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: calc(100% - 20px) !important;
    min-height: 18px !important;
    padding: 2px 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-align: center !important;
    font-size: clamp(10.5px, 2.65vw, 14px) !important;
    line-height: 1.12 !important;
    transform: none !important;
  }

  html body .overview-main-4 > .overview-battery.solar-today-card,
  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card,
  html body .overview-main-4 > .solar-today-card,
  html body .overview-main-4 > .bill-cycle-card {
    grid-column: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    min-height: clamp(150px, 40vw, 170px) !important;
    max-height: clamp(150px, 40vw, 170px) !important;
    padding: clamp(13px, 3.4vw, 18px) !important;
    overflow: hidden !important;
  }

  html body .overview-main-4 > .overview-battery.solar-today-card {
    border-color: rgba(255, 216, 79, .55) !important;
    background:
      radial-gradient(circle at 16% 20%, rgba(255, 232, 130, .23), transparent 26%),
      radial-gradient(circle at 88% 22%, rgba(255, 204, 55, .18), transparent 24%),
      linear-gradient(135deg, rgba(74, 60, 16, .7), rgba(11, 34, 55, .72)) !important;
  }

  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card {
    border-color: rgba(178, 106, 255, .5) !important;
    background:
      radial-gradient(circle at 18% 20%, rgba(205, 148, 255, .22), transparent 26%),
      radial-gradient(circle at 88% 30%, rgba(116, 70, 214, .2), transparent 28%),
      linear-gradient(135deg, rgba(58, 35, 92, .72), rgba(8, 26, 53, .72)) !important;
  }

  html body .overview-main-4 > .overview-battery.solar-today-card .overview-icon,
  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .overview-icon {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: clamp(38px, 10vw, 48px) !important;
    height: clamp(38px, 10vw, 48px) !important;
    margin: 0 0 2px !important;
    transform: none !important;
    flex: 0 0 auto !important;
  }

  html body .overview-main-4 > .overview-battery.solar-today-card .overview-label,
  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .overview-label {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: clamp(16px, 4.1vw, 20px) !important;
    line-height: 1.1 !important;
  }

  html body .overview-main-4 > .overview-battery.solar-today-card .overview-soc,
  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .overview-soc {
    position: static !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: .1em !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body .overview-main-4 > .overview-battery.solar-today-card .overview-soc,
  html body .overview-main-4 > .overview-battery.solar-today-card .overview-sub,
  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .overview-soc,
  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .overview-sub,
  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .bill-cycle-detail {
    align-self: stretch !important;
  }

  html body .overview-main-4 > .overview-battery.solar-today-card #todaySolar {
    font-size: clamp(28px, 7vw, 38px) !important;
  }

  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .overview-soc {
    font-size: clamp(28px, 6.9vw, 38px) !important;
  }

  html body .overview-main-4 > .overview-battery.solar-today-card .overview-soc .metric-unit,
  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .overview-soc .metric-unit {
    display: inline-block !important;
    flex: 0 0 auto !important;
    color: #83d8ff !important;
    font-size: clamp(13px, 3vw, 18px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-shadow: 0 0 12px rgba(84, 193, 255, .28) !important;
  }

  html body .overview-main-4 > .overview-battery.solar-today-card .overview-sub,
  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .overview-sub,
  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .bill-cycle-detail {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: clamp(10px, 2.65vw, 12px) !important;
    line-height: 1.2 !important;
  }

  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card #billCycleDetail {
    display: none !important;
  }

  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card #billCycleSub {
    white-space: nowrap !important;
    font-size: clamp(8.8px, 2.1vw, 9.8px) !important;
    letter-spacing: 0 !important;
  }

  html body #mobileFlowDiagram {
    margin-bottom: 34px !important;
  }

  html body #mobileFlowDiagram .mobile-circuit-lines {
    z-index: 2 !important;
    overflow: visible !important;
    inset: 42px 8px 42px !important;
    width: calc(100% - 16px) !important;
    height: calc(100% - 84px) !important;
  }

  html body #mobileFlowDiagram .mobile-flow-node {
    z-index: 4 !important;
  }

  html body #mobileFlowDiagram .mobile-flow-inverter {
    z-index: 5 !important;
    top: 53.4% !important;
  }

  html body #mobileFlowDiagram .mobile-deye-line,
  html body #mobileFlowDiagram .mobile-circuit-lines use {
    marker: none !important;
    marker-start: none !important;
    marker-mid: none !important;
    marker-end: none !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    stroke-width: 3.2px !important;
    fill: none !important;
  }

  html body #mobileFlowDiagram .home-path {
    color: #78d5ff !important;
    stroke: #78d5ff !important;
    fill: none !important;
  }

  html body #mobileFlowDiagram .desktop-home-dot,
  html body #mobileFlowDiagram .home-dot {
    color: #78d5ff !important;
    stroke: #78d5ff !important;
    fill: #78d5ff !important;
  }

  html body #mobileFlowDiagram marker,
  html body #mobileFlowDiagram [class*="arrow"],
  html body #mobileFlowDiagram .mobile-flow-arrow,
  html body #mobileFlowDiagram .flow-arrow {
    display: none !important;
    opacity: 0 !important;
  }

  html body #mobileFlowDiagram .mobile-flow-solar,
  html body #mobileFlowDiagram .mobile-flow-grid {
    top: calc(14.2% + 3px) !important;
  }

  html body #mobileFlowDiagram .mobile-flow-dot {
    r: 6px !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    stroke-width: .45px !important;
    paint-order: stroke fill !important;
    filter: drop-shadow(0 0 4px currentColor) !important;
    transform: none !important;
    display: none !important;
    visibility: visible !important;
  }

  html body #mobileFlowDiagram:not(.has-solar):not(.has-home):not(.grid-import):not(.grid-export):not(.battery-charge):not(.battery-discharge) .solar-dot,
  html body #mobileFlowDiagram:not(.has-solar):not(.has-home):not(.grid-import):not(.grid-export):not(.battery-charge):not(.battery-discharge) .grid-import-dot,
  html body #mobileFlowDiagram:not(.has-solar):not(.has-home):not(.grid-import):not(.grid-export):not(.battery-charge):not(.battery-discharge) .battery-discharge-dot,
  html body #mobileFlowDiagram:not(.has-solar):not(.has-home):not(.grid-import):not(.grid-export):not(.battery-charge):not(.battery-discharge) .home-dot,
  html body #mobileFlowDiagram.has-solar .solar-dot,
  html body #mobileFlowDiagram.solar-low .solar-dot,
  html body #mobileFlowDiagram.solar-normal .solar-dot,
  html body #mobileFlowDiagram.solar-high .solar-dot,
  html body #mobileFlowDiagram.solar-peak .solar-dot,
  html body #mobileFlowDiagram.solar-power-low .solar-dot,
  html body #mobileFlowDiagram.solar-power-normal .solar-dot,
  html body #mobileFlowDiagram.solar-power-high .solar-dot,
  html body #mobileFlowDiagram.grid-import .grid-import-dot,
  html body #mobileFlowDiagram.grid-importing .grid-import-dot,
  html body #mobileFlowDiagram.grid-export .grid-export-dot,
  html body #mobileFlowDiagram.grid-exporting .grid-export-dot,
  html body #mobileFlowDiagram.battery-discharge .battery-discharge-dot,
  html body #mobileFlowDiagram.battery-charge .battery-charge-dot,
  html body #mobileFlowDiagram.energy-battery-discharge .battery-discharge-dot,
  html body #mobileFlowDiagram.energy-battery-charge .battery-charge-dot,
  html body #mobileFlowDiagram.has-home .home-dot,
  html body #mobileFlowDiagram.home-power-low .home-dot,
  html body #mobileFlowDiagram.home-power-normal .home-dot,
  html body #mobileFlowDiagram.home-power-high .home-dot {
    display: block !important;
    visibility: visible !important;
  }

  html body #aiDailySummary {
    margin-top: 18px !important;
  }
}

@media (max-width: 390px) {
  html body .premium-hero {
    grid-template-columns: minmax(0, 172px) 154px !important;
    column-gap: 10px !important;
  }

  html body .premium-hero .hero-copy h1 {
    max-width: 172px !important;
    font-size: clamp(27px, 7.7vw, 30px) !important;
    line-height: .93 !important;
    letter-spacing: 0 !important;
    overflow: visible !important;
  }

  html body .premium-hero .hero-copy h1 span {
    max-width: 172px !important;
    line-height: .93 !important;
    overflow: visible !important;
  }

  html body .premium-hero .hero-title-energy {
    margin-top: 5px !important;
  }

  html body .premium-hero .hero-weather-card {
    width: 154px !important;
    max-width: 154px !important;
    min-height: 64px !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    padding: 0 !important;
  }

  html body .premium-hero .hero-weather-card .moon-visual {
    width: 58px !important;
    height: 52px !important;
  }

  html body .premium-hero .hero-weather-card .hero-weather-temp {
    min-height: 0 !important;
    font-size: 30px !important;
  }

  html body .premium-hero .hero-weather-card .hero-weather-text {
    font-size: 10px !important;
  }

  html body .premium-hero .hero-weather-card .hero-weather-sub {
    gap: 0 !important;
    font-size: 8.5px !important;
  }

  html body .overview-main-4 > .overview-battery.battery-current-card .overview-label,
  html body .overview-main-4 > .overview-runtime.battery-runtime-card .overview-label {
    top: 22px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    font-size: 14.5px !important;
  }

  html body .overview-main-4 > .overview-battery.battery-current-card .overview-soc,
  html body .overview-main-4 > .overview-runtime.battery-runtime-card .overview-runtime-value {
    bottom: 34px !important;
    font-size: 29px !important;
  }

  html body .overview-main-4 > .overview-battery.battery-current-card .overview-sub,
  html body .overview-main-4 > .overview-runtime.battery-runtime-card .overview-sub {
    bottom: 12px !important;
    font-size: 9.5px !important;
  }

  html body .overview-main-4 > .overview-battery.solar-today-card #todaySolar,
  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .overview-soc {
    font-size: 30px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #mobileFlowDiagram .mobile-flow-dot {
    display: none !important;
  }
}

@media (max-width: 640px) {
  html body .overview-main-4 > .overview-battery.solar-today-card .overview-soc,
  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .overview-soc {
    gap: .12em !important;
  }

  html body .overview-main-4 > .overview-battery.solar-today-card .metric-unit,
  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .metric-unit {
    display: inline-block !important;
    margin: 0 0 0 .12em !important;
    font-size: clamp(13px, 3vw, 18px) !important;
    line-height: 1 !important;
  }

  html body .premium-hero {
    margin-bottom: clamp(12px, 3.4vw, 16px) !important;
  }

  html body .premium-hero .hero-copy p {
    margin-top: clamp(8px, 2.2vw, 11px) !important;
    line-height: 1.26 !important;
  }

  html body .premium-hero .hero-weather-card {
    transform: translateY(clamp(-8px, -1.7vw, -5px)) !important;
  }

  html body .overview-card {
    margin-bottom: clamp(18px, 4.8vw, 22px) !important;
  }

  html body .ai-dashboard-grid {
    margin-top: 2px !important;
  }

  html body .ai-dashboard-grid,
  html body .insight-grid,
  html body .forecast-combo {
    gap: clamp(18px, 4.8vw, 22px) !important;
  }

  html body .ai-dashboard-grid,
  html body .insight-grid {
    margin-bottom: clamp(18px, 4.8vw, 22px) !important;
  }

  html body .ai-card,
  html body .battery-plan-card,
  html body .consumption-card,
  html body .scheduler-card {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  html body .ai-dashboard-grid #aiDailySummary {
    margin-top: 0 !important;
  }

  html body .settings-panel.scheduler-card {
    margin-top: clamp(18px, 4.8vw, 22px) !important;
  }
}

@media (max-width: 640px) {
  html body .overview-main-4 > .overview-battery.battery-current-card .overview-icon::after {
    background: conic-gradient(var(--battery-status-color) var(--battery-fill, 99%), rgba(var(--battery-status-rgb), .16) 0) !important;
    filter: drop-shadow(0 0 9px rgba(var(--battery-status-rgb), .34)) !important;
  }

  html body .overview-main-4 > .overview-battery.battery-current-card .overview-icon {
    box-shadow: inset 0 0 22px rgba(255, 255, 255, .07), 0 0 28px rgba(var(--battery-status-rgb), .2) !important;
  }

  html body #mobileFlowDiagram .grid-import-dot,
  html body #mobileFlowDiagram .grid-export-dot {
    color: #bd7aff !important;
    fill: #bd7aff !important;
    stroke: #bd7aff !important;
  }

  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .overview-soc {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: .08em !important;
  }

  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .metric-number,
  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .metric-unit {
    display: inline-block !important;
  }

  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .metric-unit,
  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .overview-soc .metric-unit {
    margin: 0 0 0 .08em !important;
    font-size: clamp(20px, 5.2vw, 28px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    color: #83d8ff !important;
    text-shadow: 0 0 12px rgba(84, 193, 255, .3) !important;
  }
}

@media (max-width: 640px) {
  html body .battery-plan-card {
    gap: clamp(12px, 3.4vw, 16px) !important;
    padding: clamp(18px, 4.8vw, 21px) clamp(15px, 4.2vw, 18px) !important;
  }

  html body .battery-plan-heading {
    gap: clamp(8px, 2.3vw, 11px) !important;
  }

  html body .battery-plan-title {
    font-size: clamp(30px, 8.2vw, 40px) !important;
    line-height: .94 !important;
  }

  html body .battery-plan-subtitle {
    font-size: clamp(15px, 4.1vw, 20px) !important;
    line-height: 1.16 !important;
  }

  html body .battery-plan-chip {
    padding: 6px 14px !important;
    font-size: clamp(12px, 3.3vw, 15px) !important;
  }

  html body .battery-plan-progress {
    padding: 13px 13px !important;
  }

  html body .battery-plan-recommend {
    padding: clamp(14px, 3.8vw, 16px) clamp(13px, 3.7vw, 16px) !important;
  }

  html body .battery-plan-recommend .recommend-title {
    margin-bottom: 6px !important;
    font-size: clamp(22px, 6.1vw, 29px) !important;
    line-height: 1.04 !important;
  }

  html body .battery-plan-recommend p {
    max-width: none !important;
    font-size: clamp(10.5px, 2.9vw, 13px) !important;
    line-height: 1.18 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  html body .battery-plan-solar-row {
    padding: 11px 14px !important;
  }

  html body .battery-plan-metrics {
    padding: 14px !important;
  }
}

@media (max-width: 640px) {
  html body .battery-plan-header {
    display: block !important;
    position: relative !important;
  }

  html body .battery-plan-heading {
    display: grid !important;
    gap: clamp(7px, 2vw, 9px) !important;
    padding-right: 0 !important;
  }

  html body .battery-plan-label {
    padding-right: clamp(104px, 28vw, 132px) !important;
  }

  html body .battery-plan-title {
    margin-top: clamp(9px, 2.6vw, 13px) !important;
  }

  html body .battery-plan-chip {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
    margin: 0 !important;
  }
}

@media (min-width: 641px) {
  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .overview-icon.grid-icon .energy-icon-img {
    transform: translateY(4px) scale(1.16) !important;
  }
}

@media (max-width: 640px) {
  html body .premium-hero {
    display: block !important;
    position: relative !important;
    min-height: clamp(138px, 36vw, 154px) !important;
    margin-bottom: clamp(7px, 2vw, 10px) !important;
    overflow: visible !important;
  }

  html body .premium-hero .hero-copy {
    transform: translateY(clamp(20px, 5.6vw, 24px)) !important;
  }

  html body .premium-hero .hero-copy p {
    max-width: clamp(166px, 46vw, 190px) !important;
    margin-top: 0 !important;
    font-size: clamp(10.5px, 2.75vw, 13.4px) !important;
    line-height: 1.18 !important;
    white-space: nowrap !important;
  }

  html body .premium-hero .hero-weather-card {
    position: absolute !important;
    top: clamp(0px, 1vw, 6px) !important;
    right: 0 !important;
    transform: none !important;
    width: clamp(170px, 44vw, 196px) !important;
    max-width: clamp(170px, 44vw, 196px) !important;
    min-height: clamp(98px, 25.5vw, 116px) !important;
    grid-template-columns: clamp(62px, 16.2vw, 74px) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    column-gap: clamp(6px, 1.8vw, 9px) !important;
    row-gap: 0 !important;
    padding: clamp(13px, 3.4vw, 17px) clamp(11px, 3.2vw, 15px) !important;
    overflow: hidden !important;
    border: 1px solid rgba(159, 224, 255, .44) !important;
    border-radius: clamp(22px, 6vw, 30px) !important;
    background:
      radial-gradient(circle at 18% 16%, rgba(255, 255, 255, .28), transparent 30%),
      radial-gradient(circle at 90% 88%, rgba(79, 188, 255, .22), transparent 38%),
      linear-gradient(135deg, rgba(24, 138, 218, .42), rgba(11, 83, 164, .25) 48%, rgba(147, 203, 255, .18)) !important;
    box-shadow:
      0 16px 34px rgba(3, 24, 48, .22),
      inset 0 1px 0 rgba(255, 255, 255, .32),
      inset 0 0 52px rgba(118, 201, 255, .16) !important;
    backdrop-filter: blur(14px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.18) !important;
  }

  html body .premium-hero .hero-weather-card::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .3), transparent 30%),
      linear-gradient(180deg, rgba(255, 255, 255, .13), transparent 58%) !important;
    opacity: .72 !important;
  }

  html body .premium-hero .hero-weather-card::before {
    display: none !important;
    content: none !important;
  }

  html body .premium-hero .hero-weather-card .moon-visual,
  html body .premium-hero .hero-weather-card .hero-weather-temp,
  html body .premium-hero .hero-weather-card .hero-weather-text,
  html body .premium-hero .hero-weather-card .hero-weather-sub {
    position: relative !important;
    z-index: 1 !important;
  }

  html body .premium-hero .hero-weather-card .moon-visual {
    width: clamp(68px, 17.5vw, 82px) !important;
    height: clamp(58px, 15.2vw, 70px) !important;
    justify-self: center !important;
    filter: drop-shadow(0 8px 12px rgba(0, 22, 48, .24)) drop-shadow(0 0 12px rgba(214, 239, 255, .22)) !important;
  }

  html body .premium-hero .hero-weather-card .hero-weather-temp {
    font-size: clamp(32px, 8vw, 38px) !important;
    line-height: .92 !important;
    font-weight: 950 !important;
  }

  html body .premium-hero .hero-weather-card .hero-weather-text {
    margin-top: 2px !important;
    font-size: clamp(12px, 3.35vw, 16px) !important;
    line-height: 1.06 !important;
    font-weight: 900 !important;
  }

  html body .premium-hero .hero-weather-card .hero-weather-sub {
    margin-top: clamp(4px, 1.2vw, 6px) !important;
    padding-top: clamp(4px, 1.2vw, 6px) !important;
    border-top: 1px solid rgba(218, 244, 255, .38) !important;
    font-size: clamp(8.8px, 2.45vw, 11px) !important;
    line-height: 1.1 !important;
    font-weight: 760 !important;
    color: rgba(234, 247, 255, .84) !important;
  }

  html body .consumption-card .bill-forecast-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(10px, 2.8vw, 14px) !important;
    margin-top: 0 !important;
    padding: clamp(9px, 2.5vw, 12px) clamp(12px, 3.4vw, 16px) !important;
    border: 1px solid rgba(116, 213, 255, .26) !important;
    border-radius: clamp(14px, 4vw, 18px) !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(120, 213, 255, .16), transparent 44%),
      rgba(6, 31, 66, .36) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11) !important;
  }

  html body .consumption-card .bill-forecast-card > div {
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  html body .consumption-card .bill-forecast-card span {
    color: rgba(222, 238, 255, .78) !important;
    font-size: clamp(10px, 2.8vw, 12px) !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }

  html body .consumption-card .bill-forecast-card strong {
    color: #78d5ff !important;
    font-size: clamp(14px, 4vw, 18px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
  }

  html body .consumption-card .bill-forecast-card p {
    display: none !important;
  }

  html body .consumption-card .consumption-value-grid {
    gap: clamp(10px, 2.8vw, 12px) !important;
  }

  html body .consumption-card .consumption-value-grid + .bill-forecast-card {
    margin-top: clamp(10px, 2.8vw, 12px) !important;
  }

  html body .settings-panel.scheduler-card + .timeline-card {
    margin-top: clamp(18px, 4.8vw, 22px) !important;
  }

  html body .consumption-card .consumption-value-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(12px, 3.2vw, 14px) !important;
    margin-top: clamp(14px, 3.8vw, 18px) !important;
  }

  html body .consumption-card .consumption-value-grid div,
  html body .consumption-card .bill-forecast-card {
    min-height: clamp(42px, 10.8vw, 48px) !important;
    box-sizing: border-box !important;
  }

  html body .consumption-card .consumption-value-grid + .bill-forecast-card {
    margin-top: clamp(12px, 3.2vw, 14px) !important;
  }

  html body .consumption-card .bill-forecast-mini + .bill-forecast-card {
    margin-top: clamp(12px, 3.2vw, 14px) !important;
  }

  html body .consumption-card .consumption-meter {
    margin-top: clamp(16px, 4.4vw, 20px) !important;
  }
}