*{
    box-sizing:border-box;
  }

  :root{
    --text:#ffffff;
    --muted:rgba(255,255,255,.72);
    --soft:rgba(255,255,255,.52);
    --stroke:rgba(255,255,255,.26);
    --safe:#9af17a;
    --warn:#ffd84d;
    --danger:#ff7666;
    --solar:#ffd84d;
    --battery:#64e857;
    --grid:#b68cff;
    --home:#60a5fa;
  }
  
  html{
    min-height:100%;
    background:#06111f;
  }
  
  body{
    margin:0;
    min-height:100vh;
    font-family:"Noto Sans Thai",-apple-system,BlinkMacSystemFont,sans-serif;
    color:var(--text);
    overflow-x:hidden;
    background:transparent;
  }
  
  button,
  input{
    font-family:"Noto Sans Thai",sans-serif;
  }
  
  /* =========================
     WEATHER BACKGROUND
  ========================= */
  
  .weather-bg{
    position:fixed;
    inset:0;
    z-index:0;
    overflow:hidden;
    isolation:isolate;
    background:
      linear-gradient(180deg,rgba(40,140,210,.05),rgba(4,12,24,.35)),
      radial-gradient(circle at 82% 12%,rgba(255,255,255,.95),rgba(255,220,130,.78) 7%,rgba(255,200,90,.22) 19%,transparent 36%),
      linear-gradient(180deg,#248fd4 0%,#63b8e8 44%,#1f4c69 100%);
  }
  
  .weather-bg::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:5;
    background:
      linear-gradient(180deg,rgba(255,255,255,.05),rgba(3,7,18,.42)),
      radial-gradient(circle at 50% 115%,rgba(6,95,70,.6),transparent 42%);
  }

  .sky-aura{
    position:absolute;
    inset:-18%;
    z-index:1;
    pointer-events:none;
    background:
      radial-gradient(circle at 16% 14%,rgba(255,255,255,.18),transparent 24%),
      radial-gradient(circle at 82% 18%,rgba(255,219,117,.32),transparent 26%),
      radial-gradient(circle at 36% 78%,rgba(20,184,166,.18),transparent 34%),
      conic-gradient(from 210deg at 50% 50%,rgba(96,165,250,.18),rgba(45,212,191,.12),rgba(255,216,77,.14),rgba(96,165,250,.18));
    filter:blur(18px) saturate(1.05);
    opacity:.9;
    transform:translate3d(0,0,0);
    animation:skyAuraShift 32s ease-in-out infinite alternate;
  }

  .horizon-glow{
    position:absolute;
    left:-10%;
    right:-10%;
    bottom:-12%;
    z-index:3;
    height:45vh;
    pointer-events:none;
    background:
      radial-gradient(ellipse at 50% 100%,rgba(20,184,166,.38),transparent 58%),
      radial-gradient(ellipse at 72% 92%,rgba(59,130,246,.28),transparent 46%),
      linear-gradient(180deg,transparent,rgba(3,12,24,.42));
    filter:blur(8px);
    opacity:.86;
  }

  .home-silhouette{
    position:absolute;
    right:max(4vw,36px);
    bottom:2vh;
    z-index:2;
    width:min(58vw,760px);
    height:min(48vh,430px);
    opacity:.22;
    filter:blur(.15px);
    transform:translate3d(0,0,0);
    pointer-events:none;
  }

  .home-silhouette::before{
    content:"";
    position:absolute;
    left:11%;
    top:18%;
    width:62%;
    height:42%;
    background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.08));
    clip-path:polygon(0 46%,48% 0,100% 48%,88% 48%,88% 100%,12% 100%,12% 48%);
    border-radius:8px;
  }

  .home-silhouette::after{
    content:"";
    position:absolute;
    right:1%;
    top:31%;
    width:38%;
    height:52%;
    background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.06));
    clip-path:polygon(0 36%,50% 0,100% 36%,90% 36%,90% 100%,10% 100%,10% 36%);
  }

  .home-shape{
    position:absolute;
    background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.045));
    border:1px solid rgba(255,255,255,.12);
  }

  .home-main{
    left:18%;
    bottom:10%;
    width:46%;
    height:46%;
    border-radius:10px 10px 4px 4px;
  }

  .home-side{
    right:5%;
    bottom:8%;
    width:29%;
    height:34%;
    border-radius:8px 8px 4px 4px;
  }

  .home-window{
    position:absolute;
    z-index:2;
    border-radius:4px;
    background:rgba(5,14,28,.34);
    border:1px solid rgba(255,255,255,.11);
    box-shadow:inset 0 0 18px rgba(147,197,253,.08);
  }

  .window-a{
    left:31%;
    bottom:30%;
    width:14%;
    height:16%;
  }

  .window-b{
    right:14%;
    bottom:23%;
    width:14%;
    height:18%;
  }

  .roof-panel{
    position:absolute;
    z-index:3;
    height:6px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    box-shadow:0 0 18px rgba(255,216,77,.08);
  }

  .panel-a{
    left:22%;
    top:36%;
    width:28%;
    transform:rotate(-17deg);
  }

  .panel-b{
    left:36%;
    top:32%;
    width:24%;
    transform:rotate(18deg);
  }
  
  .sun-glow{
    position:absolute;
    z-index:4;
    right:7%;
    top:7%;
    width:340px;
    height:340px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,222,139,.55) 24%,transparent 62%);
    filter:blur(10px);
    opacity:.8;
  }
  
  .cloud{
    position:absolute;
    z-index:4;
    width:420px;
    height:160px;
    border-radius:999px;
    background:rgba(255,255,255,.48);
    filter:blur(26px);
    opacity:.72;
  }
  
  .cloud-a{
    left:-90px;
    top:18%;
  }
  
  .cloud-b{
    right:-110px;
    top:27%;
  }
  
  .cloud-c{
    left:18%;
    bottom:4%;
    transform:scale(1.25);
    opacity:.38;
  }
  
  body.weather-cloudy .weather-bg{
    background:
      linear-gradient(180deg,rgba(226,232,240,.12),rgba(15,23,42,.64)),
      radial-gradient(circle at 70% 18%,rgba(226,232,240,.5),transparent 34%),
      radial-gradient(circle at 24% 26%,rgba(125,211,252,.18),transparent 28%),
      linear-gradient(180deg,#7c94ad 0%,#52677e 48%,#172033 100%);
  }
  
  body.weather-rainy .weather-bg{
    background:
      linear-gradient(180deg,rgba(30,41,59,.35),rgba(2,6,23,.78)),
      radial-gradient(circle at 72% 15%,rgba(148,163,184,.42),transparent 30%),
      radial-gradient(circle at 18% 22%,rgba(59,130,246,.14),transparent 30%),
      linear-gradient(180deg,#29384f 0%,#172033 50%,#020617 100%);
  }
  
  body.weather-night .weather-bg{
    background:
      radial-gradient(circle at 78% 12%,rgba(191,219,254,.42),rgba(96,165,250,.18) 12%,transparent 24%),
      radial-gradient(circle at 24% 22%,rgba(59,130,246,.28),transparent 30%),
      radial-gradient(circle at 58% 94%,rgba(20,184,166,.16),transparent 34%),
      linear-gradient(180deg,#061327 0%,#07111f 52%,#020617 100%);
  }
  
  body.weather-night .sun-glow{
    opacity:0;
  }

  .weather-bg::before{
    content:"";
    position:absolute;
    inset:-20%;
    opacity:0;
    pointer-events:none;
    background:
      repeating-linear-gradient(105deg,transparent 0 22px,rgba(191,219,254,.16) 23px 24px);
    transform:translate3d(0,0,0);
  }

  body.weather-rainy .weather-bg::before{
    opacity:.24;
  }

  body.weather-cloudy .sky-aura{
    opacity:.58;
    filter:blur(24px) saturate(.72);
  }

  body.weather-rainy .sky-aura{
    opacity:.36;
    filter:blur(26px) saturate(.58);
  }

  body.weather-night .sky-aura{
    background:
      radial-gradient(circle at 78% 10%,rgba(191,219,254,.38),transparent 18%),
      radial-gradient(circle at 24% 24%,rgba(99,102,241,.22),transparent 28%),
      radial-gradient(circle at 55% 72%,rgba(45,212,191,.12),transparent 34%);
    opacity:.78;
    animation-duration:44s;
  }

  body.weather-night .home-silhouette{
    opacity:.3;
  }

  body.mode-solar .weather-bg::after,
  body.mode-battery .weather-bg::after{
    background:
      radial-gradient(circle at 22% 24%,rgba(255,216,77,.24),transparent 30%),
      linear-gradient(180deg,rgba(255,255,255,.05),rgba(3,7,18,.42)),
      radial-gradient(circle at 50% 115%,rgba(6,95,70,.55),transparent 42%);
  }

  body.mode-solar .sky-aura{
    background:
      radial-gradient(circle at 18% 16%,rgba(255,245,178,.32),transparent 26%),
      radial-gradient(circle at 82% 18%,rgba(255,216,77,.38),transparent 28%),
      radial-gradient(circle at 38% 78%,rgba(34,197,94,.18),transparent 34%);
  }

  body.mode-heavy .weather-bg::after,
  body.mode-grid .weather-bg::after{
    background:
      radial-gradient(circle at 74% 18%,rgba(168,85,247,.2),transparent 28%),
      radial-gradient(circle at 20% 8%,rgba(248,113,113,.16),transparent 30%),
      linear-gradient(180deg,rgba(255,255,255,.04),rgba(3,7,18,.48));
  }

  body.mode-heavy .sky-aura,
  body.mode-grid .sky-aura{
    background:
      radial-gradient(circle at 72% 18%,rgba(168,85,247,.28),transparent 28%),
      radial-gradient(circle at 18% 12%,rgba(248,113,113,.16),transparent 28%),
      radial-gradient(circle at 42% 80%,rgba(59,130,246,.13),transparent 34%);
  }

  @keyframes skyAuraShift{
    from{
      transform:translate3d(-1.5%,0,0) scale(1);
    }
    to{
      transform:translate3d(1.5%,1%,0) scale(1.03);
    }
  }

  /* =========================
     BASE LAYOUT
  ========================= */
  
  .app{
    position:relative;
    z-index:1;
    min-height:100vh;
    padding:54px 24px 34px;
  }
  
  .shell{
    width:min(1120px,100%);
    margin:auto;
  }
  
  .topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:24px;
  }
  
  .brand-pill,
  .live-pill,
  .overview-status{
    border:1px solid rgba(255,255,255,.28);
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(24px) saturate(160%);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
    border-radius:999px;
    padding:11px 18px;
    box-shadow:
      0 12px 36px rgba(0,0,0,.16),
      inset 0 1px 0 rgba(255,255,255,.35);
    white-space:nowrap;
  }

  body.mode-solar .overview-card{
    border-color:rgba(255,216,77,.36);
    box-shadow:
      0 24px 70px rgba(0,0,0,.24),
      0 0 42px rgba(255,216,77,.08),
      inset 0 1px 0 rgba(255,255,255,.28);
  }

  body.mode-heavy .overview-card,
  body.mode-grid .overview-card{
    border-color:rgba(196,181,253,.34);
    box-shadow:
      0 24px 70px rgba(0,0,0,.26),
      0 0 46px rgba(168,85,247,.1),
      inset 0 1px 0 rgba(255,255,255,.28);
  }
  
  .brand-pill{
    font-size:15px;
    font-weight:850;
  }
  
  .live-pill{
    font-size:14px;
    font-weight:750;
    color:rgba(255,255,255,.86);
    max-width:58%;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  
  .live-pill::before{
    content:"";
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#7ee75f;
    margin-right:8px;
    box-shadow:0 0 16px rgba(126,231,95,.85);
  }
  
  .hero{
    margin-bottom:26px;
  }
  
  h1{
    margin:0;
    font-size:clamp(48px,7vw,76px);
    line-height:.98;
    letter-spacing:0;
    font-weight:950;
    white-space:nowrap;
    text-shadow:0 8px 28px rgba(0,0,0,.24);
  }
  
  .hero p{
    margin:18px 0 0;
    color:rgba(255,255,255,.9);
    font-size:21px;
    font-weight:560;
  }
  
  /* =========================
     GLASS CARD BASE
  ========================= */
  
  .overview-card,
  .graph-card,
  .ai-card,
  .insight-card,
  .ring-card,
  .recommend-card,
  .info-card,
  .settings-panel,
  .timeline-card{
    border:1px solid rgba(255,255,255,.26);
    background:linear-gradient(135deg,rgba(20,45,70,.58),rgba(18,34,55,.42));
    backdrop-filter:blur(28px) saturate(170%);
    -webkit-backdrop-filter:blur(28px) saturate(170%);
    box-shadow:
      0 24px 70px rgba(0,0,0,.26),
      inset 0 1px 0 rgba(255,255,255,.28);
    transition:background .45s ease,border-color .45s ease,box-shadow .45s ease,transform .45s ease;
  }
  
  /* =========================
     OVERVIEW SUMMARY
  ========================= */
  
  .overview-card{
    border-radius:34px;
    padding:30px;
    margin-bottom:20px;
  }
  
  .overview-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    margin-bottom:24px;
  }
  
  .section-title{
    font-size:22px;
    font-weight:900;
    color:rgba(255,255,255,.94);
    margin-bottom:8px;
  }
  
  .overview-subtitle{
    color:rgba(255,255,255,.68);
    font-size:15px;
    font-weight:700;
  }
  
  .overview-status{
    font-size:13px;
    font-weight:850;
    color:rgba(255,255,255,.86);
    padding:10px 15px;
  }
  
  .overview-main{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-bottom:24px;
  }
  
  .overview-main-3{
    grid-template-columns:1fr 1fr 1fr;
  }

  .overview-main-4{
    grid-template-columns:repeat(4,1fr);
  }

  .overview-main-5{
    grid-template-columns:repeat(5,1fr);
  }
  
  .overview-battery,
  .overview-runtime{
    border-radius:28px;
    padding:24px;
    background:rgba(255,255,255,.11);
    border:1px solid rgba(255,255,255,.18);
    min-height:150px;
  }
  
  .solar-today-card{
    background:
      radial-gradient(circle at top left,rgba(255,196,0,.2),transparent 42%),
      rgba(255,255,255,.09);
    border-color:rgba(255,220,120,.28);
  }

  .grid-cost-card{
    background:
      radial-gradient(circle at top left,rgba(125,211,252,.2),transparent 42%),
      rgba(255,255,255,.09);
    border-color:rgba(125,211,252,.28);
  }

  .bill-cycle-card{
    background:
      radial-gradient(circle at top left,rgba(196,181,253,.22),transparent 42%),
      rgba(255,255,255,.09);
    border-color:rgba(196,181,253,.3);
  }

  .bill-cycle-detail{
    margin-top:10px;
    color:rgba(255,255,255,.72);
    font-size:12px;
    font-weight:850;
    line-height:1.35;
  }
  
  .overview-label{
    font-size:15px;
    font-weight:850;
    color:rgba(255,255,255,.74);
  }
  
  .overview-soc,
  .overview-runtime-value{
    margin-top:10px;
    font-size:56px;
    line-height:1;
    font-weight:950;
    letter-spacing:0;
  }

  .metric-number,
  .metric-unit{
    display:inline;
  }

  .metric-unit{
    margin-left:.14em;
  }
  
  .overview-sub{
    margin-top:10px;
    color:rgba(255,255,255,.78);
    font-size:16px;
    font-weight:650;
  }
  
  /* =========================
     LIVE ENERGY FLOW
  ========================= */
  
  .live-flow-new{
    position:relative;
    display:grid;
    grid-template-columns:340px minmax(360px,1fr) 310px;
    gap:0;
    align-items:center;
    margin-top:26px;
    min-height:360px;
  }
  
  .flow-left{
    display:grid;
    gap:14px;
    z-index:3;
  }
  
  .flow-card-mini,
  .home-flow-card{
    position:relative;
    min-height:104px;
    border-radius:22px;
    padding:18px;
    display:flex;
    align-items:center;
    gap:18px;
    background:
      radial-gradient(circle at 12% 35%,var(--flow-glow,rgba(255,255,255,.12)),transparent 34%),
      linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
    border:1px solid var(--flow-border,rgba(255,255,255,.22));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.25),
      0 18px 44px rgba(0,0,0,.18);
    overflow:hidden;
  }
  
  .solar-flow{
    --flow-border:rgba(255,216,77,.42);
    --flow-glow:rgba(255,216,77,.18);
  }
  
  .battery-flow{
    --flow-border:rgba(118,240,109,.34);
    --flow-glow:rgba(118,240,109,.17);
  }
  
  .grid-flow{
    --flow-border:rgba(196,181,253,.34);
    --flow-glow:rgba(196,181,253,.18);
  }
  
  .flow-icon,
  .home-icon-big{
    width:54px;
    height:54px;
    border-radius:18px;
    display:grid;
    place-items:center;
    font-size:27px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    flex:0 0 auto;
  }
  
  .flow-name{
    font-size:16px;
    font-weight:900;
    color:rgba(255,255,255,.92);
  }
  
  .flow-value{
    margin-top:3px;
    font-size:36px;
    line-height:1;
    font-weight:950;
    letter-spacing:0;
  }
  
  .flow-sub{
    margin-top:7px;
    font-size:14px;
    font-weight:750;
    color:rgba(255,255,255,.68);
  }
  
  .flow-center-new{
    position:relative;
    height:330px;
    display:grid;
    place-items:center;
    z-index:2;
  }

  .mobile-flow-diagram{
    display:none;
  }
  
  .flow-lines{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    pointer-events:none;
  }
  
  .flow-line-new{
    fill:none;
    stroke-width:5.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.72;
    vector-effect:non-scaling-stroke;
  }
  
  .flow-runner{
    fill:none;
    stroke-width:10;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:.01 99.99;
    stroke-dashoffset:100;
    animation:flowDash 2.8s linear infinite;
    opacity:.95;
    vector-effect:non-scaling-stroke;
  }
  
  .solar-line,
  .solar-runner{
    stroke:var(--solar);
    filter:drop-shadow(0 0 10px rgba(255,216,77,.72));
  }
  
  .battery-line,
  .battery-runner{
    stroke:var(--battery);
    filter:drop-shadow(0 0 10px rgba(100,232,87,.66));
  }
  
  .grid-line,
  .grid-runner{
    stroke:var(--grid);
    filter:drop-shadow(0 0 10px rgba(182,140,255,.68));
  }
  
  .home-line,
  .home-runner{
    stroke:var(--home);
    filter:drop-shadow(0 0 10px rgba(96,165,250,.72));
  }
  
  .solar-runner{
    animation-delay:0s;
  }
  
  .battery-runner{
    animation-delay:.2s;
  }

  body.energy-battery-charge .battery-runner,
  .live-flow-new.energy-battery-charge .battery-runner{
    animation-name:flowDashReverse;
    stroke:var(--battery);
    filter:drop-shadow(0 0 10px rgba(125,248,110,.7));
  }

  body.energy-battery-discharge .battery-runner,
  .live-flow-new.energy-battery-discharge .battery-runner{
    animation-name:flowDash;
    stroke:var(--battery);
  }

  body.energy-battery-standby .battery-runner,
  .live-flow-new.energy-battery-standby .battery-runner{
    opacity:.18;
    animation-play-state:paused;
  }
  
  .grid-runner{
    animation-delay:.4s;
  }
  
  .home-runner{
    animation-delay:.1s;
  }
  
  @keyframes flowDash{
    from{
      stroke-dashoffset:100;
      opacity:.15;
    }
    25%{
      opacity:1;
    }
    70%{
      opacity:1;
    }
    to{
      stroke-dashoffset:0;
      opacity:.15;
    }
  }

  @keyframes flowDashReverse{
    from{
      stroke-dashoffset:0;
      opacity:.15;
    }
    25%{
      opacity:1;
    }
    70%{
      opacity:1;
    }
    to{
      stroke-dashoffset:100;
      opacity:.15;
    }
  }
  
  .flow-inv{
    position:relative;
    z-index:4;
    width:126px;
    height:126px;
    border-radius:30px;
    background:
      radial-gradient(circle at 35% 22%,rgba(255,255,255,.35),transparent 34%),
      linear-gradient(135deg,#3b82f6,#075985);
    border:1px solid rgba(147,197,253,.85);
    box-shadow:
      0 0 34px rgba(59,130,246,.45),
      0 22px 60px rgba(0,0,0,.32),
      inset 0 1px 0 rgba(255,255,255,.42);
    display:grid;
    place-items:center;
    align-content:center;
  }
  
  .inv-title{
    font-size:42px;
    line-height:1;
    font-weight:950;
    letter-spacing:0;
  }
  
  .inv-sub{
    margin-top:10px;
    font-size:13px;
    color:rgba(255,255,255,.75);
    font-weight:800;
  }
  
  .home-flow-card{
    min-height:300px;
    justify-content:center;
    border-radius:30px;
    background:
      radial-gradient(circle at 22% 50%,rgba(96,165,250,.18),transparent 36%),
      rgba(255,255,255,.07);
    border-color:rgba(147,197,253,.32);
    z-index:3;
  }
  
  .home-flow-card .flow-value{
    font-size:42px;
  }

  .home-flow-card.home-from-solar,
  .overview-card.home-from-solar{
    border-color:rgba(255,216,77,.42);
    box-shadow:0 0 38px rgba(255,216,77,.12), inset 0 1px 0 rgba(255,255,255,.26);
  }

  .home-flow-card.home-from-battery,
  .overview-card.home-from-battery{
    border-color:rgba(100,232,87,.38);
    box-shadow:0 0 38px rgba(100,232,87,.12), inset 0 1px 0 rgba(255,255,255,.26);
  }

  .home-flow-card.home-from-grid,
  .overview-card.home-from-grid{
    border-color:rgba(96,165,250,.4);
    box-shadow:0 0 38px rgba(96,165,250,.13), inset 0 1px 0 rgba(255,255,255,.26);
  }

  .home-flow-card.home-heavy-load,
  .overview-card.home-heavy-load{
    border-color:rgba(255,118,102,.46);
    animation:homeWarningGlow 3.8s ease-in-out infinite;
  }

  @keyframes homeWarningGlow{
    0%,100%{ box-shadow:0 0 28px rgba(255,118,102,.08), inset 0 1px 0 rgba(255,255,255,.24); }
    50%{ box-shadow:0 0 46px rgba(255,118,102,.18), inset 0 1px 0 rgba(255,255,255,.3); }
  }
  
  /* hide old flow structure if still exists */
  .overview-flow,
  .flow-source,
  .flow-target,
  .overview-inverter{
    display:none !important;
  }
  
  .mobile-overview-grid{
    display:none;
  }

  .mobile-data-cache{
    display:none !important;
  }
  
  /* =========================
     AI
  ========================= */
  
  .ai-dashboard-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
    margin-bottom:20px;
  }

  .ai-card{
    min-height:190px;
    padding:22px;
    border-radius:26px;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.18);
    background:
      radial-gradient(circle at 88% 12%,rgba(125,211,252,.18),transparent 34%),
      linear-gradient(135deg,rgba(80,115,170,.34),rgba(20,45,70,.46));
    box-shadow:
      0 20px 54px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.18);
  }

  .ai-card::after{
    content:"";
    position:absolute;
    inset:auto -20% -55% 18%;
    height:130px;
    background:radial-gradient(circle,rgba(96,165,250,.16),transparent 62%);
    pointer-events:none;
  }

  .ai-card-head{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
  }

  .ai-kicker{
    font-size:12px;
    line-height:1;
    font-weight:950;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:rgba(255,255,255,.58);
  }

  .ai-title{
    margin-top:7px;
    font-size:20px;
    line-height:1.2;
    font-weight:950;
  }

  .ai-text{
    position:relative;
    z-index:1;
    margin-top:13px;
    font-size:17px;
    font-weight:780;
    line-height:1.6;
    color:rgba(255,255,255,.94);
  }

  .ai-action{
    position:relative;
    z-index:1;
    margin-top:14px;
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:8px 12px;
    background:rgba(255,255,255,.12);
    color:rgba(255,255,255,.82);
    font-size:13px;
    font-weight:850;
  }

  .speech-btn{
    position:relative;
    z-index:1;
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px;
    padding:9px 14px;
    color:#fff;
    background:rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
    font-size:13px;
    font-weight:900;
    cursor:pointer;
  }

  .speech-btn:hover{
    background:rgba(255,255,255,.2);
  }

  .speech-btn.is-speaking{
    color:#05101e;
    background:linear-gradient(135deg,#8eea73,#d6f96b);
  }

  .ai-state-safe{
    border-color:rgba(154,241,122,.26);
    background:
      radial-gradient(circle at 88% 12%,rgba(154,241,122,.18),transparent 34%),
      linear-gradient(135deg,rgba(44,120,68,.42),rgba(18,44,62,.44));
  }

  .ai-state-warn{
    border-color:rgba(255,216,77,.3);
    background:
      radial-gradient(circle at 88% 12%,rgba(255,216,77,.2),transparent 34%),
      linear-gradient(135deg,rgba(145,112,35,.45),rgba(18,44,62,.44));
  }

  .ai-state-danger{
    border-color:rgba(255,118,102,.34);
    background:
      radial-gradient(circle at 88% 12%,rgba(255,118,102,.18),transparent 34%),
      linear-gradient(135deg,rgba(151,55,52,.48),rgba(18,44,62,.44));
  }

  /* =========================
     INTELLIGENCE LAYER
  ========================= */

  .insight-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-bottom:20px;
  }

  .insight-card{
    border-radius:24px;
    padding:22px;
    position:relative;
    overflow:hidden;
  }

  .survival-card{
    grid-column:auto;
  }

  .insight-card::after{
    content:"";
    position:absolute;
    inset:auto -20% -55% 18%;
    height:120px;
    background:radial-gradient(circle,rgba(125,211,252,.16),transparent 60%);
    pointer-events:none;
  }

  .insight-label{
    font-size:13px;
    font-weight:900;
    color:rgba(255,255,255,.68);
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  .insight-value{
    margin-top:10px;
    font-size:38px;
    line-height:1;
    font-weight:950;
    letter-spacing:0;
  }

  .insight-value.compact{
    font-size:25px;
    line-height:1.25;
    letter-spacing:0;
  }

  .insight-sub,
  .insight-note{
    margin-top:9px;
    font-size:14px;
    line-height:1.45;
    color:rgba(255,255,255,.72);
    font-weight:750;
  }

  .insight-note{
    color:rgba(255,255,255,.9);
  }

  .insight-detail{
    position:relative;
    z-index:1;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.14);
    color:rgba(255,255,255,.78);
    font-size:13px;
    line-height:1.45;
    font-weight:780;
  }

  .insight-safe{
    border-color:rgba(154,241,122,.32);
    background:linear-gradient(135deg,rgba(44,120,68,.46),rgba(18,34,55,.38));
  }

  .insight-warn{
    border-color:rgba(255,216,77,.34);
    background:linear-gradient(135deg,rgba(145,112,35,.5),rgba(18,34,55,.38));
  }

  .insight-danger{
    border-color:rgba(255,118,102,.36);
    background:linear-gradient(135deg,rgba(151,55,52,.54),rgba(18,34,55,.38));
  }

  
  /* =========================
     RING + RECOMMEND
  ========================= */
  
  .main-row{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
    margin-bottom:20px;
  }
  
  .ring-card,
  .recommend-card{
    border-radius:30px;
    padding:28px;
  }
  
  .ring-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
  }
  
  .ring{
    width:280px;
    height:280px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:conic-gradient(from -90deg,#72df63 0deg,#72df63 230deg,#ffd84d 230deg,#ffd84d 280deg,#ff7666 280deg,#ff7666 315deg,rgba(255,255,255,.18) 315deg);
    box-shadow:
      0 28px 70px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.25);
  }
  
  .ring-inner{
    width:174px;
    height:174px;
    border-radius:50%;
    background:rgba(12,28,45,.72);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    backdrop-filter:blur(20px);
  }
  
  .ring-main{
    font-size:56px;
    line-height:1;
    font-weight:950;
    letter-spacing:0;
  }
  
  .ring-sub{
    margin-top:10px;
    font-size:15px;
    color:rgba(255,255,255,.82);
  }
  
  .recommend-card{
    min-height:auto;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }
  
  .recommend-card.risk-safe{
    background:linear-gradient(135deg,rgba(55,142,74,.62),rgba(18,48,56,.5));
  }
  
  .recommend-card.risk-warn{
    background:linear-gradient(135deg,rgba(190,145,35,.62),rgba(62,49,22,.48));
  }
  
  .recommend-card.risk-danger{
    background:linear-gradient(135deg,rgba(185,67,58,.66),rgba(68,28,36,.5));
  }
  
  .risk-badge{
    align-self:flex-start;
    padding:8px 12px;
    border-radius:999px;
    font-size:16px;
    font-weight:950;
    line-height:1;
    margin:14px 0 12px;
    background:rgba(255,255,255,.18);
  }
  
  .recommend-card p{
    margin:0;
    font-size:16px;
    line-height:1.55;
    color:rgba(255,255,255,.94);
  }
  
  .recommend-extra{
    margin-top:12px;
    font-size:13px;
    color:rgba(255,255,255,.9);
  }
  
  /* =========================
     INFO GRID
  ========================= */
  
  .info-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:20px;
  }
  
  .info-card{
    border-radius:24px;
    padding:22px;
    min-height:126px;
  }
  
  .info-label{
    font-size:15px;
    color:rgba(255,255,255,.82);
    font-weight:750;
  }
  
  .info-value{
    margin-top:6px;
    font-size:30px;
    line-height:1.15;
    font-weight:950;
    letter-spacing:0;
  }
  
  .info-sub{
    margin-top:6px;
    font-size:14px;
    color:rgba(255,255,255,.68);
  }
  
  .safe{ color:var(--safe); }
  .warn{ color:var(--warn); }
  .danger{ color:#ffaaa0; }
  
  /* =========================
     SETTINGS
  ========================= */
  
  .settings-panel{
    border-radius:26px;
    padding:22px;
    margin-bottom:20px;
  }
  
  .settings-panel summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:20px;
    font-weight:850;
  }
  
  .settings-panel summary::-webkit-details-marker{
    display:none;
  }
  
  .settings-grid{
    margin-top:20px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;
  }

  .lean-settings{
    grid-template-columns:minmax(220px,360px);
    justify-content:center;
  }

  .field-hidden{
    display:none;
  }
  
  .field span{
    display:block;
    font-size:14px;
    color:rgba(255,255,255,.84);
    margin-bottom:7px;
    font-weight:680;
  }
  
  input{
    width:100%;
    border:1px solid rgba(255,255,255,.18);
    outline:none;
    border-radius:10px;
    padding:10px 12px;
    background:rgba(14,39,58,.45);
    color:white;
    font-size:17px;
    font-weight:700;
  }
  
  .actions{
    display:grid;
    grid-template-columns:minmax(180px,280px);
    gap:14px;
    max-width:280px;
    margin:24px auto 0;
  }

  .actions button:not(.primary){
    display:none;
  }
  
  button{
    border:none;
    border-radius:12px;
    padding:14px 18px;
    color:white;
    font-size:17px;
    font-weight:850;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.22);
    cursor:pointer;
  }
  
  button.primary{
    background:linear-gradient(135deg,#2f7df4,#2c5ef0);
  }
  
  /* =========================
     TIMELINE
  ========================= */
  
  .timeline-card{
    border-radius:24px;
    padding:18px 20px;
  }

  .timeline-card summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    font-size:18px;
    font-weight:900;
  }

  .timeline-card summary::-webkit-details-marker{
    display:none;
  }

  .timeline-card .timeline{
    margin-top:14px;
  }
  
  .timeline{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
  }
  
  .timeline-row{
    min-height:96px;
    border-radius:14px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.14);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    font-weight:800;
    padding:12px;
  }
  
  .timeline-row span:first-child{
    color:rgba(255,255,255,.84);
    font-size:15px;
  }
  
  .timeline-row span:last-child{
    margin-top:4px;
    color:#9af17a;
    font-size:18px;
    text-align:center;
    line-height:1.25;
  }

  .timeline-row small{
    margin-top:6px;
    color:rgba(255,255,255,.58);
    font-size:11px;
    line-height:1.25;
    text-align:center;
    font-weight:850;
  }

  .timeline-row.timeline-warn span:last-child{
    color:#ffd84d;
  }

  .timeline-row.timeline-danger span:last-child{
    color:#ffaaa0;
  }

  body.load-spike .overview-card,
  body.load-spike .live-flow-new{
    animation:loadPulse 2.8s ease-in-out infinite;
  }

  @keyframes loadPulse{
    0%,100%{
      box-shadow:
        0 24px 70px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.28);
    }
    50%{
      box-shadow:
        0 24px 90px rgba(255,118,102,.28),
        0 0 38px rgba(255,118,102,.22),
        inset 0 1px 0 rgba(255,255,255,.32);
    }
  }

  body.tv-ambient .flow-runner,
  body.tv-ambient .cloud{
    animation-duration:6.4s;
  }

  body.tv-ambient .sky-aura{
    animation-duration:72s;
    opacity:.68;
  }

  body.tv-ambient .home-silhouette{
    opacity:.18;
  }

  body.tv-ambient .app{
    animation:ambientDrift 90s ease-in-out infinite alternate;
  }

  body.tv-night{
    filter:brightness(.82) saturate(.92);
  }

  @keyframes ambientDrift{
    from{ transform:translate3d(0,0,0); }
    to{ transform:translate3d(0,-8px,0); }
  }

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

  @media(max-width:640px){
    .sky-aura{
      inset:-34%;
      opacity:.58;
      filter:blur(22px) saturate(.92);
      animation-duration:48s;
    }

    .home-silhouette{
      right:-18vw;
      bottom:6vh;
      width:112vw;
      height:34vh;
      opacity:.13;
      transform:scale(.96);
    }

    .horizon-glow{
      height:34vh;
      opacity:.62;
    }

    .sun-glow{
      width:220px;
      height:220px;
      right:-22px;
      top:24px;
      opacity:.52;
    }

    .cloud{
      filter:blur(30px);
      opacity:.42;
    }
  }
  
  footer{
    text-align:center;
    margin-top:20px;
    color:rgba(255,255,255,.68);
    font-size:14px;
  }
  
  .dynamic-island{
    display:none !important;
  }
  
  /* =========================
     RESPONSIVE
  ========================= */
  
  @media(max-width:980px){
    .overview-card{
      overflow:hidden;
    }
  
    .main-row{
      grid-template-columns:1fr;
    }

    .insight-grid{
      grid-template-columns:1fr 1fr;
    }

    .device-grid{
      grid-template-columns:1fr 1fr;
    }
  
    .info-grid{
      grid-template-columns:1fr 1fr;
    }
  
    .settings-grid{
      grid-template-columns:minmax(220px,360px);
      justify-content:center;
    }
  
    h1{
      white-space:normal;
    }
  
    .overview-main-3,
    .overview-main-4,
    .overview-main-5{
      grid-template-columns:1fr 1fr;
    }
  
    .solar-today-card,
    .grid-cost-card,
    .bill-cycle-card{
      grid-column:1 / -1 !important;
    }
  
    .live-flow-new{
      grid-template-columns:minmax(0,42%) minmax(92px,22%) minmax(0,36%);
      min-width:0;
      width:100%;
      min-height:264px;
      margin-top:20px;
      padding-bottom:4px;
    }
  
    .flow-left{
      gap:10px;
    }
  
    .flow-card-mini{
      min-height:82px;
      border-radius:18px;
      padding:13px;
      gap:11px;
    }
  
    .flow-icon,
    .home-icon-big{
      width:44px;
      height:44px;
      border-radius:15px;
      font-size:22px;
    }
  
    .flow-name{
      font-size:13px;
    }
  
    .flow-value{
      font-size:26px;
    }
  
    .flow-sub{
      font-size:12px;
      margin-top:5px;
    }
  
    .flow-center-new{
      height:246px;
    }
  
    .flow-inv{
      width:88px;
      height:88px;
      border-radius:23px;
    }
  
    .inv-title{
      font-size:29px;
    }
  
    .inv-sub{
      margin-top:7px;
      font-size:11px;
    }
  
    .home-flow-card{
      min-height:220px;
      border-radius:24px;
      padding:15px;
      gap:11px;
    }
  
    .home-flow-card .flow-value{
      font-size:29px;
    }
  
    .mobile-overview-grid{
      display:none;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
  
    .mobile-energy-card{
      min-height:132px;
      padding:18px;
      border-radius:24px;
      background:rgba(255,255,255,.1);
      border:1px solid rgba(255,255,255,.18);
      backdrop-filter:blur(24px);
    }
  
    .mobile-label{
      font-size:14px;
      font-weight:850;
      opacity:.9;
    }
  
    .mobile-value{
      margin-top:12px;
      font-size:30px;
      font-weight:950;
    }
  
    .mobile-sub{
      margin-top:8px;
      font-size:13px;
      opacity:.72;
    }
  }
  
  @media(max-width:640px){
    .app{
      padding:20px 12px 28px;
    }
  
    .shell{
      width:100%;
    }
  
    .topbar{
      margin-bottom:18px;
    }
  
    .brand-pill{
      font-size:13px;
      padding:10px 14px;
    }
  
    .live-pill{
      font-size:12px;
      padding:10px 12px;
      max-width:56%;
    }
  
    h1{
      font-size:42px;
      line-height:1;
      letter-spacing:0;
    }
  
    .hero p{
      font-size:15px;
      line-height:1.55;
    }
  
    .overview-card{
      padding:18px;
      border-radius:26px;
    }
  
    .live-flow-new{
      grid-template-columns:37% 26% 37%;
      grid-template-areas:"sources inverter home";
      min-height:258px;
      margin-top:16px;
      padding:12px;
      border-radius:28px;
      background:
        radial-gradient(circle at 50% 48%,rgba(59,130,246,.15),transparent 36%),
        linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
      border:1px solid rgba(255,255,255,.12);
    }

    .mobile-flow-lines{
      display:block;
      position:absolute;
      inset:12px;
      width:calc(100% - 24px);
      height:calc(100% - 24px);
      overflow:visible;
      pointer-events:none;
      z-index:1;
    }

    .flow-lines{
      display:none;
    }

    .flow-left{
      grid-area:sources;
      align-self:stretch;
      display:grid;
      grid-template-rows:1fr 1fr 1fr;
      gap:10px;
      z-index:3;
    }
  
    .flow-card-mini{
      min-height:0;
      border-radius:18px;
      padding:9px 8px;
      gap:7px;
      flex-direction:column;
      align-items:flex-start;
      justify-content:center;
    }
  
    .flow-icon,
    .home-icon-big{
      width:34px;
      height:34px;
      border-radius:12px;
      font-size:18px;
    }
  
    .flow-name{
      font-size:11px;
    }
  
    .flow-value{
      font-size:18px;
      letter-spacing:0;
    }
  
    .flow-sub{
      font-size:9px;
      line-height:1.25;
      margin-top:4px;
    }
  
    .flow-center-new{
      grid-area:inverter;
      height:100%;
      z-index:3;
    }
  
    .flow-line-new{
      stroke-width:4.5;
    }
  
    .flow-runner{
      stroke-width:5.5;
    }
  
    .flow-inv{
      width:70px;
      height:70px;
      border-radius:17px;
    }
  
    .inv-title{
      font-size:21px;
    }
  
    .inv-sub{
      margin-top:4px;
      font-size:8px;
    }
  
    .home-flow-card{
      grid-area:home;
      min-height:0;
      height:100%;
      border-radius:20px;
      padding:10px 9px;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:8px;
      text-align:center;
      z-index:3;
    }
  
    .home-flow-card .flow-value{
      font-size:20px;
    }
  
    .overview-head{
      flex-direction:column;
      margin-bottom:18px;
    }
  
    .section-title{
      font-size:21px;
    }
  
    .overview-subtitle{
      font-size:13px;
    }
  
    .overview-main,
    .overview-main-3,
    .overview-main-4,
    .overview-main-5{
      grid-template-columns:1fr 1fr;
      gap:9px;
      margin-bottom:14px;
    }
  
    .overview-battery,
    .overview-runtime{
      padding:16px 14px;
      border-radius:22px;
      min-height:118px;
    }
  
    .solar-today-card,
    .grid-cost-card,
    .bill-cycle-card{
      grid-column:1 / -1 !important;
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(104px,max-content);
      column-gap:12px;
      row-gap:5px;
      align-items:start;
      min-height:auto;
      padding:14px 16px;
      border-radius:19px;
    }

    .bill-cycle-card{
      grid-column:1 / -1;
    }

    .solar-today-card .overview-label,
    .bill-cycle-card .overview-label{
      grid-column:1;
      margin:0;
      font-size:14px;
      line-height:1.25;
      align-self:end;
      overflow-wrap:normal;
    }

    .solar-today-card .overview-soc,
    .bill-cycle-card .overview-soc{
      grid-column:2;
      grid-row:1 / span 2;
      align-self:center;
      justify-self:end;
      margin:0;
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:1px;
      text-align:right;
      white-space:normal;
      overflow-wrap:anywhere;
    }

    .solar-today-card .overview-soc{
      font-size:35px;
      max-width:122px;
    }

    .bill-cycle-card .overview-soc{
      font-size:30px;
      line-height:.96;
      max-width:130px;
    }

    .solar-today-card .metric-number,
    .bill-cycle-card .metric-number{
      line-height:.9;
    }

    .solar-today-card .metric-unit,
    .bill-cycle-card .metric-unit{
      font-size:.55em;
      line-height:.95;
    }

    .solar-today-card .overview-sub,
    .bill-cycle-card .overview-sub{
      grid-column:1;
      margin:0;
      font-size:11px;
      line-height:1.35;
    }

    .bill-cycle-card .bill-cycle-detail{
      grid-column:1 / -1;
      margin-top:3px;
      font-size:11px;
      line-height:1.38;
      color:rgba(255,255,255,.7);
    }
  
    .overview-label{
      font-size:11px;
      line-height:1.35;
    }
  
    .overview-soc,
    .overview-runtime-value{
      margin-top:8px;
      font-size:34px;
      letter-spacing:0;
    }
  
    .overview-sub{
      margin-top:8px;
      font-size:11px;
      line-height:1.35;
    }
  
    .graph-card,
    .ai-card,
    .insight-card,
    .device-card{
      padding:16px;
      border-radius:20px;
    }

    .insight-grid{
      grid-template-columns:1fr;
      gap:10px;
    }

    .survival-card{
      grid-column:auto;
    }

    .insight-value{
      font-size:31px;
    }

    .insight-value.compact{
      font-size:21px;
    }

    .device-grid{
      grid-template-columns:1fr 1fr;
      gap:8px;
    }

    .device-item{
      padding:12px;
      border-radius:15px;
    }
  
    .graph-head{
      flex-direction:column;
      align-items:flex-start;
      gap:8px;
    }
  
    #energyGraph{
      height:160px;
    }
  
    .ring-card,
    .recommend-card{
      padding:18px;
      border-radius:22px;
      min-height:auto;
    }
  
    .ring{
      width:210px;
      height:210px;
    }
  
    .ring-inner{
      width:132px;
      height:132px;
    }
  
    .ring-main{
      font-size:38px;
    }
  
    .recommend-card p{
      font-size:15px;
      line-height:1.55;
    }
  
    .risk-badge{
      font-size:24px;
      padding:9px 14px;
    }
  
    .info-grid{
      grid-template-columns:1fr;
      gap:10px;
    }
  
    .info-card{
      min-height:auto;
      padding:16px;
      border-radius:18px;
    }
  
    .info-label{
      font-size:13px;
    }
  
    .info-value{
      font-size:25px;
    }
  
    .info-sub{
      font-size:12px;
    }
  
    .settings-panel,
    .timeline-card{
      padding:16px;
      border-radius:20px;
    }
  
    .settings-grid{
      grid-template-columns:1fr;
    }
  
    .timeline{
      grid-template-columns:1fr 1fr;
    }
  
    footer{
      font-size:11px;
      line-height:1.5;
    }
  }

  @media(max-width:640px){
    .ai-dashboard-grid{
      grid-template-columns:1fr;
      gap:10px;
      margin-bottom:14px;
    }

    .ai-card{
      min-height:auto;
    }

    .ai-card-head{
      gap:10px;
    }

    .ai-title{
      font-size:18px;
    }

    .ai-text{
      font-size:15px;
      line-height:1.55;
    }

    .ai-action{
      font-size:12px;
      line-height:1.4;
      border-radius:16px;
    }

    .speech-btn{
      flex:0 0 auto;
      padding:8px 11px;
      font-size:12px;
    }

    .live-flow-new{
      display:none;
    }

    .mobile-flow-diagram{
      position:relative;
      display:block;
      height:360px;
      margin:16px 0 4px;
      border-radius:30px;
      overflow:hidden;
      background:
        radial-gradient(circle at 50% 47%,rgba(96,165,250,.19),transparent 24%),
        radial-gradient(circle at 18% 18%,rgba(255,216,77,.12),transparent 25%),
        radial-gradient(circle at 82% 18%,rgba(182,140,255,.13),transparent 24%),
        linear-gradient(180deg,rgba(13,31,52,.9),rgba(4,17,31,.88));
      border:1px solid rgba(255,255,255,.16);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 20px 46px rgba(0,0,0,.2);
    }

    .mobile-flow-bg{
      position:absolute;
      inset:18%;
      border-radius:44px;
      background:
        radial-gradient(circle at 50% 30%,rgba(255,255,255,.08),transparent 32%),
        linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
      filter:blur(8px);
      opacity:.9;
    }

    .mobile-deye-lines{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      overflow:visible;
      z-index:1;
    }

    .mobile-deye-line{
      fill:none;
      stroke:rgba(255,255,255,.42);
      stroke-width:1.4;
      stroke-linecap:round;
      stroke-linejoin:round;
      vector-effect:non-scaling-stroke;
      opacity:.5;
    }

    .mobile-flow-dot{
      filter:drop-shadow(0 0 8px currentColor);
    }

    .solar-dot{ fill:#ffd84d; color:#ffd84d; }
    .grid-import-dot,
    .grid-export-dot{ fill:#b68cff; color:#b68cff; }
    .battery-discharge-dot{ fill:#64e857; color:#64e857; }
    .battery-charge-dot{ fill:#7df86e; color:#7df86e; }
    .home-dot{ fill:#60a5fa; color:#60a5fa; }

    .mobile-flow-diagram.has-solar .solar-dot,
    .mobile-flow-diagram.grid-import .grid-import-dot,
    .mobile-flow-diagram.grid-export .grid-export-dot,
    .mobile-flow-diagram.battery-discharge .battery-discharge-dot,
    .mobile-flow-diagram.battery-charge .battery-charge-dot,
    .mobile-flow-diagram.has-home .home-dot{
      display:block;
    }

    .mobile-flow-diagram.battery-standby .battery-path{
      opacity:.18;
    }

    .mobile-flow-diagram.energy-battery-charge .battery-path{
      stroke:#7df86e !important;
      opacity:.68 !important;
    }

    .mobile-flow-diagram.energy-battery-discharge .battery-path{
      stroke:var(--battery) !important;
      opacity:.68 !important;
    }

    .mobile-flow-node,
    .mobile-flow-inverter{
      position:absolute;
      z-index:3;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      color:white;
    }

    .mobile-flow-node{
      width:104px;
      min-height:92px;
      border-radius:24px;
      padding:10px 8px;
      background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
      border:1px solid rgba(255,255,255,.17);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.2),
        0 14px 30px rgba(0,0,0,.18);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
    }

    .mobile-flow-solar{ left:18px; top:18px; }
    .mobile-flow-grid{ right:18px; top:18px; }
    .mobile-flow-battery{ left:18px; bottom:18px; }
    .mobile-flow-home{ right:18px; bottom:18px; }

    .mobile-flow-inverter{
      left:50%;
      top:50%;
      width:92px;
      height:92px;
      transform:translate(-50%,-50%);
      border-radius:26px;
      background:
        radial-gradient(circle at 34% 22%,rgba(255,255,255,.32),transparent 30%),
        linear-gradient(135deg,#3b82f6,#075985);
      border:1px solid rgba(147,197,253,.85);
      box-shadow:
        0 0 34px rgba(59,130,246,.45),
        0 16px 38px rgba(0,0,0,.3),
        inset 0 1px 0 rgba(255,255,255,.42);
    }

    .mobile-flow-inverter strong{
      font-size:28px;
      line-height:1;
      font-weight:950;
    }

    .mobile-flow-inverter span{
      margin-top:5px;
      font-size:10px;
      font-weight:850;
      color:rgba(255,255,255,.76);
    }

    .mobile-node-icon{
      width:34px;
      height:34px;
      border-radius:13px;
      display:grid;
      place-items:center;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.16);
      font-size:18px;
    }

    .mobile-node-label{
      margin-top:7px;
      font-size:11px;
      font-weight:900;
      color:rgba(255,255,255,.75);
    }

    .mobile-flow-node strong{
      margin-top:3px;
      font-size:17px;
      line-height:1;
      font-weight:950;
      letter-spacing:0;
    }

    .mobile-flow-node small{
      margin-top:5px;
      font-size:9px;
      line-height:1.25;
      color:rgba(255,255,255,.68);
      font-weight:800;
    }
  }

  @media(max-width:640px){
    .mobile-flow-diagram{
      height:clamp(318px,86vw,352px);
      margin:14px 0 8px;
      border-radius:26px;
      background:
        radial-gradient(circle at 50% 47%,rgba(96,165,250,.16),transparent 25%),
        radial-gradient(circle at 18% 18%,rgba(255,216,77,.09),transparent 24%),
        radial-gradient(circle at 82% 18%,rgba(182,140,255,.1),transparent 24%),
        linear-gradient(180deg,rgba(13,31,52,.86),rgba(4,17,31,.9));
    }

    .mobile-flow-bg{
      inset:20%;
      border-radius:34px;
      filter:blur(10px);
      opacity:.72;
    }

    .mobile-deye-line{
      stroke-width:1.15;
      opacity:.38;
    }

    .mobile-flow-dot{
      filter:drop-shadow(0 0 6px currentColor);
    }

    .mobile-flow-node{
      width:clamp(86px,26vw,100px);
      min-height:clamp(82px,24vw,92px);
      padding:9px 7px;
      border-radius:22px;
      background:linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.045));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 12px 26px rgba(0,0,0,.16);
    }

    .mobile-flow-solar{ left:clamp(14px,4vw,18px); top:clamp(14px,4vw,18px); }
    .mobile-flow-grid{ right:clamp(14px,4vw,18px); top:clamp(14px,4vw,18px); }
    .mobile-flow-battery{ left:clamp(14px,4vw,18px); bottom:clamp(14px,4vw,18px); }
    .mobile-flow-home{ right:clamp(14px,4vw,18px); bottom:clamp(14px,4vw,18px); }

    .mobile-flow-inverter{
      width:clamp(78px,23vw,88px);
      height:clamp(78px,23vw,88px);
      border-radius:24px;
      box-shadow:
        0 0 28px rgba(59,130,246,.38),
        0 14px 30px rgba(0,0,0,.27),
        inset 0 1px 0 rgba(255,255,255,.34);
    }

    .mobile-flow-inverter strong{
      font-size:clamp(24px,7vw,28px);
    }

    .mobile-flow-inverter span{
      font-size:10px;
    }

    .mobile-node-icon{
      width:30px;
      height:30px;
      border-radius:12px;
      font-size:16px;
    }

    .mobile-node-label{
      margin-top:6px;
      font-size:10px;
    }

    .mobile-flow-node strong{
      font-size:clamp(15px,4.3vw,17px);
      letter-spacing:0;
      max-width:100%;
      white-space:nowrap;
    }

    .mobile-flow-node small{
      max-width:100%;
      font-size:8.5px;
    }

    .settings-panel{
      padding:18px 16px 16px;
      margin:18px 0 16px;
      border-radius:26px;
      background:
        radial-gradient(circle at 50% 0%,rgba(255,255,255,.065),transparent 34%),
        linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
    }

    .settings-panel summary{
      font-size:clamp(24px,7vw,30px);
      line-height:1.15;
      align-items:flex-start;
      gap:12px;
    }

    .settings-panel summary .chevron{
      font-size:24px;
      line-height:1;
      padding-top:4px;
    }

    .settings-grid.lean-settings{
      display:grid;
      grid-template-columns:minmax(0,1fr);
      justify-content:stretch;
      gap:0;
      margin-top:22px;
    }

    .field span{
      font-size:clamp(17px,4.8vw,20px);
      margin-bottom:12px;
      color:rgba(255,255,255,.78);
    }

    input{
      height:54px;
      border-radius:16px;
      padding:10px 14px;
      font-size:20px;
      text-align:center;
    }

    .actions{
      max-width:none;
      width:100%;
      margin:20px 0 0;
    }

    button{
      min-height:56px;
      border-radius:16px;
      font-size:20px;
      line-height:1.1;
      padding:14px 16px;
    }
  }

  @media(max-width:640px){
    .mobile-flow-diagram{
      height:300px !important;
      margin:12px 0 10px !important;
      border-radius:24px !important;
      border-color:rgba(255,255,255,.13) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 34px rgba(0,0,0,.18) !important;
    }

    .mobile-flow-node{
      width:78px !important;
      min-height:76px !important;
      padding:7px 5px !important;
      border-radius:18px !important;
      background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.038)) !important;
      border-color:rgba(255,255,255,.14) !important;
    }

    .mobile-flow-solar{ left:16px !important; top:16px !important; }
    .mobile-flow-grid{ right:16px !important; top:16px !important; }
    .mobile-flow-battery{ left:16px !important; bottom:16px !important; }
    .mobile-flow-home{ right:16px !important; bottom:16px !important; }

    .mobile-flow-inverter{
      width:74px !important;
      height:74px !important;
      border-radius:20px !important;
    }

    .mobile-flow-inverter strong{
      font-size:24px !important;
    }

    .mobile-flow-inverter span{
      margin-top:4px !important;
      font-size:9px !important;
    }

    .mobile-node-icon{
      width:26px !important;
      height:26px !important;
      border-radius:10px !important;
      font-size:14px !important;
    }

    .mobile-node-label{
      margin-top:5px !important;
      font-size:9px !important;
    }

    .mobile-flow-node strong{
      margin-top:2px !important;
      font-size:14px !important;
      line-height:1.05 !important;
      white-space:nowrap !important;
    }

    .mobile-flow-node small{
      margin-top:4px !important;
      font-size:8px !important;
      line-height:1.18 !important;
    }

    .mobile-deye-line{
      stroke-width:1 !important;
      opacity:.32 !important;
    }

    .mobile-flow-dot{
      filter:drop-shadow(0 0 5px currentColor) !important;
    }

    .settings-panel{
      overflow:hidden !important;
      padding:16px !important;
      margin:16px 0 !important;
      border-radius:24px !important;
    }

    .settings-panel summary{
      font-size:26px !important;
      line-height:1.15 !important;
      align-items:center !important;
    }

    .settings-grid.lean-settings{
      width:100% !important;
      max-width:100% !important;
      grid-template-columns:1fr !important;
      margin-top:20px !important;
    }

    .field{
      display:block !important;
      min-width:0 !important;
      width:100% !important;
    }

    .field span{
      font-size:17px !important;
      line-height:1.25 !important;
      margin-bottom:10px !important;
    }

    input{
      display:block !important;
      width:100% !important;
      max-width:100% !important;
      min-width:0 !important;
      height:50px !important;
      border-radius:14px !important;
      font-size:19px !important;
      -webkit-appearance:none;
      appearance:none;
    }

    .actions{
      display:grid !important;
      grid-template-columns:1fr !important;
      width:100% !important;
      max-width:100% !important;
      margin-top:16px !important;
    }

    .actions .primary{
      width:100% !important;
      min-height:52px !important;
      border-radius:14px !important;
      font-size:18px !important;
    }
  }

  @media(max-width:640px){
    .mobile-flow-diagram{
      height:330px !important;
      margin:12px 0 10px !important;
      border-radius:24px !important;
      background:
        radial-gradient(circle at 50% 50%,rgba(59,130,246,.14),transparent 30%),
        linear-gradient(180deg,rgba(8,23,39,.9),rgba(3,12,22,.93)) !important;
    }

    .mobile-flow-bg{
      inset:10% !important;
      border-radius:24px !important;
      background:
        linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),
        radial-gradient(circle at 48% 45%,rgba(255,255,255,.06),transparent 34%) !important;
      filter:none !important;
      opacity:.45 !important;
    }

    .mobile-flow-node{
      width:112px !important;
      height:124px !important;
      min-height:124px !important;
      padding:10px 8px !important;
      border-radius:24px !important;
      gap:0 !important;
      justify-content:center !important;
    }

    .mobile-flow-solar{ left:18px !important; top:18px !important; }
    .mobile-flow-grid{ right:18px !important; top:18px !important; }
    .mobile-flow-battery{ left:18px !important; bottom:18px !important; }
    .mobile-flow-home{ right:18px !important; bottom:18px !important; }

    .mobile-flow-inverter{
      width:78px !important;
      height:78px !important;
      border-radius:22px !important;
    }

    .mobile-flow-inverter strong{
      font-size:26px !important;
    }

    .mobile-node-icon{
      width:40px !important;
      height:40px !important;
      border-radius:16px !important;
      font-size:20px !important;
      margin-bottom:7px !important;
    }

    .mobile-node-label{
      margin-top:0 !important;
      font-size:13px !important;
      line-height:1.05 !important;
      color:rgba(255,255,255,.56) !important;
      font-weight:780 !important;
    }

    .mobile-flow-node strong{
      margin-top:8px !important;
      font-size:22px !important;
      line-height:1 !important;
      letter-spacing:0 !important;
      white-space:nowrap !important;
    }

    .mobile-flow-node small{
      margin-top:0 !important;
      margin-bottom:7px !important;
      font-size:13px !important;
      line-height:1 !important;
      color:#64e857 !important;
      font-weight:900 !important;
      order:-2;
    }

    .mobile-flow-grid small{
      color:#64e857 !important;
      font-size:12px !important;
      margin-bottom:8px !important;
    }

    .mobile-flow-grid .mobile-node-icon,
    .mobile-flow-battery .mobile-node-icon{
      margin-bottom:7px !important;
    }

    .mobile-flow-battery small{
      color:rgba(255,255,255,.92) !important;
      font-size:13px !important;
      margin-bottom:6px !important;
    }

    .mobile-flow-battery .mobile-node-icon{
      order:-1;
    }

    .mobile-flow-battery .mobile-node-label{
      order:2;
    }

    .mobile-flow-battery strong{
      order:1;
    }

    .mobile-deye-line{
      stroke:rgba(255,255,255,.62) !important;
      stroke-width:1.35 !important;
      opacity:.58 !important;
    }

    .mobile-flow-diagram.home-from-solar .home-path,
    .mobile-flow-diagram.home-from-solar .mobile-flow-home{
      border-color:rgba(255,216,77,.4) !important;
      box-shadow:0 0 24px rgba(255,216,77,.1), inset 0 1px 0 rgba(255,255,255,.18) !important;
    }

    .mobile-flow-diagram.home-from-battery .home-path,
    .mobile-flow-diagram.home-from-battery .mobile-flow-home{
      border-color:rgba(100,232,87,.38) !important;
      box-shadow:0 0 24px rgba(100,232,87,.1), inset 0 1px 0 rgba(255,255,255,.18) !important;
    }

    .mobile-flow-diagram.home-from-grid .home-path,
    .mobile-flow-diagram.home-from-grid .mobile-flow-home{
      border-color:rgba(96,165,250,.42) !important;
      box-shadow:0 0 24px rgba(96,165,250,.12), inset 0 1px 0 rgba(255,255,255,.18) !important;
    }

    .mobile-flow-diagram.home-heavy-load .mobile-flow-home{
      border-color:rgba(255,118,102,.5) !important;
      animation:homeWarningGlow 3.8s ease-in-out infinite;
    }
  }

  /* =========================
     DYNAMIC ENERGY STATES
  ========================= */

  body.solar-low{ --solar:#f8dc72; }
  body.solar-normal{ --solar:#ffd84d; }
  body.solar-high{ --solar:#ffbd3d; }
  body.solar-peak{ --solar:#f59e0b; }

  body.battery-charging{ --battery:#7df86e; }
  body.battery-discharging{ --battery:#22c7a8; }
  body.battery-standby{ --battery:#78c989; }

  body.grid-importing{ --grid:#b68cff; }
  body.grid-exporting{ --grid:#7c8cff; }
  body.grid-idle{ --grid:#8d7bb7; }

  body.home-normal-load{ --home:#67b7ff; }
  body.home-high-load{ --home:#2f7df4; }
  body.home-very-high-load{ --home:#6366f1; }

  .flow-card-mini,
  .home-flow-card,
  .overview-battery,
  .overview-runtime{
    transition:
      background .55s ease,
      border-color .55s ease,
      box-shadow .55s ease,
      color .35s ease,
      transform .35s ease;
  }

  .flow-card-mini:hover,
  .home-flow-card:hover{
    transform:translateY(-1px);
  }

  .solar-flow.solar-low,
  .solar-flow.solar-normal{
    --flow-border:rgba(255,216,77,.46);
    --flow-glow:rgba(255,216,77,.38);
    background:
      radial-gradient(circle at 12% 35%,rgba(255,241,150,.72),transparent 38%),
      linear-gradient(135deg,rgba(255,232,112,.86),rgba(255,194,65,.48)) !important;
    color:#1f1603;
    box-shadow:
      0 18px 44px rgba(255,191,0,.16),
      inset 0 1px 0 rgba(255,255,255,.5);
  }

  .solar-flow.solar-high{
    --flow-border:rgba(251,191,36,.58);
    background:
      radial-gradient(circle at 12% 35%,rgba(255,226,96,.8),transparent 38%),
      linear-gradient(135deg,rgba(255,218,80,.9),rgba(245,158,11,.58)) !important;
    color:#211303;
    box-shadow:
      0 20px 50px rgba(245,158,11,.2),
      inset 0 1px 0 rgba(255,255,255,.46);
  }

  .solar-flow.solar-peak{
    --flow-border:rgba(245,158,11,.7);
    background:
      radial-gradient(circle at 12% 35%,rgba(255,214,102,.82),transparent 38%),
      linear-gradient(135deg,rgba(255,202,54,.92),rgba(234,88,12,.66)) !important;
    color:#241000;
    box-shadow:
      0 22px 58px rgba(234,88,12,.24),
      inset 0 1px 0 rgba(255,255,255,.44);
  }

  .solar-flow.solar-low .flow-name,
  .solar-flow.solar-low .flow-value,
  .solar-flow.solar-low .flow-sub,
  .solar-flow.solar-normal .flow-name,
  .solar-flow.solar-normal .flow-value,
  .solar-flow.solar-normal .flow-sub,
  .solar-flow.solar-high .flow-name,
  .solar-flow.solar-high .flow-value,
  .solar-flow.solar-high .flow-sub,
  .solar-flow.solar-peak .flow-name,
  .solar-flow.solar-peak .flow-value,
  .solar-flow.solar-peak .flow-sub{
    color:#1b1302;
    text-shadow:none;
  }

  .solar-flow[class*="solar-"] .flow-icon{
    background:rgba(255,255,255,.42);
    border-color:rgba(92,55,0,.18);
  }

  .battery-flow.battery-charging{
    --flow-border:rgba(125,248,110,.48);
    background:
      radial-gradient(circle at 12% 35%,rgba(125,248,110,.32),transparent 38%),
      linear-gradient(135deg,rgba(38,86,66,.72),rgba(18,64,43,.52)) !important;
    box-shadow:0 20px 52px rgba(125,248,110,.12), inset 0 1px 0 rgba(255,255,255,.24);
  }

  .battery-flow.battery-discharging{
    --flow-border:rgba(34,199,168,.42);
    background:
      radial-gradient(circle at 12% 35%,rgba(34,199,168,.25),transparent 38%),
      linear-gradient(135deg,rgba(22,72,68,.7),rgba(11,46,50,.54)) !important;
    box-shadow:0 20px 52px rgba(34,199,168,.11), inset 0 1px 0 rgba(255,255,255,.22);
  }

  .battery-flow.battery-standby{
    --flow-border:rgba(120,201,137,.28);
    background:
      radial-gradient(circle at 12% 35%,rgba(120,201,137,.15),transparent 38%),
      linear-gradient(135deg,rgba(33,66,55,.58),rgba(20,44,42,.42)) !important;
  }

  .grid-flow.grid-importing{
    --flow-border:rgba(182,140,255,.48);
    background:
      radial-gradient(circle at 12% 35%,rgba(182,140,255,.3),transparent 38%),
      linear-gradient(135deg,rgba(58,45,92,.72),rgba(34,35,75,.48)) !important;
    box-shadow:0 20px 52px rgba(182,140,255,.13), inset 0 1px 0 rgba(255,255,255,.23);
  }

  .grid-flow.grid-exporting{
    --flow-border:rgba(124,140,255,.46);
    background:
      radial-gradient(circle at 12% 35%,rgba(124,140,255,.28),transparent 38%),
      linear-gradient(135deg,rgba(43,58,112,.7),rgba(29,43,91,.48)) !important;
    box-shadow:0 20px 52px rgba(124,140,255,.12), inset 0 1px 0 rgba(255,255,255,.23);
  }

  .grid-flow.grid-idle{
    --flow-border:rgba(141,123,183,.26);
    background:
      radial-gradient(circle at 12% 35%,rgba(141,123,183,.16),transparent 38%),
      linear-gradient(135deg,rgba(48,43,69,.55),rgba(30,36,58,.42)) !important;
  }

  .home-flow-card.home-normal-load{
    background:
      radial-gradient(circle at 22% 50%,rgba(103,183,255,.24),transparent 38%),
      linear-gradient(135deg,rgba(27,63,98,.62),rgba(17,40,70,.5)) !important;
    border-color:rgba(103,183,255,.34);
  }

  .home-flow-card.home-high-load{
    background:
      radial-gradient(circle at 22% 50%,rgba(47,125,244,.32),transparent 40%),
      linear-gradient(135deg,rgba(19,52,103,.75),rgba(9,31,64,.62)) !important;
    border-color:rgba(47,125,244,.52);
    box-shadow:0 24px 62px rgba(47,125,244,.16), inset 0 1px 0 rgba(255,255,255,.24);
  }

  .home-flow-card.home-very-high-load{
    background:
      radial-gradient(circle at 22% 50%,rgba(99,102,241,.34),transparent 40%),
      linear-gradient(135deg,rgba(37,42,111,.78),rgba(15,26,70,.66)) !important;
    border-color:rgba(129,140,248,.62);
    box-shadow:0 26px 68px rgba(99,102,241,.2), inset 0 1px 0 rgba(255,255,255,.25);
  }

  .battery-flow.battery-charging,
  .battery-flow.battery-discharging{
    background:
      radial-gradient(circle at 13% 35%,rgba(112,255,124,.52),transparent 40%),
      linear-gradient(135deg,rgba(28,129,77,.82),rgba(5,68,57,.66)) !important;
    border-color:rgba(120,255,142,.62);
    box-shadow:
      0 22px 58px rgba(74,222,128,.2),
      inset 0 1px 0 rgba(255,255,255,.3);
  }

  .battery-flow.battery-discharging{
    background:
      radial-gradient(circle at 13% 35%,rgba(45,212,191,.46),transparent 40%),
      linear-gradient(135deg,rgba(13,118,111,.82),rgba(5,60,72,.66)) !important;
    border-color:rgba(45,212,191,.58);
  }

  .grid-flow.grid-importing,
  .grid-flow.grid-exporting{
    background:
      radial-gradient(circle at 13% 35%,rgba(196,181,253,.5),transparent 40%),
      linear-gradient(135deg,rgba(99,69,177,.84),rgba(45,48,122,.66)) !important;
    border-color:rgba(196,181,253,.62);
    box-shadow:
      0 22px 58px rgba(168,85,247,.2),
      inset 0 1px 0 rgba(255,255,255,.29);
  }

  .grid-flow.grid-exporting{
    background:
      radial-gradient(circle at 13% 35%,rgba(129,140,248,.48),transparent 40%),
      linear-gradient(135deg,rgba(70,82,190,.84),rgba(35,54,123,.66)) !important;
  }

  .home-flow-card.home-normal-load,
  .home-flow-card.home-high-load,
  .home-flow-card.home-very-high-load{
    background:
      radial-gradient(circle at 22% 50%,rgba(96,165,250,.45),transparent 42%),
      linear-gradient(135deg,rgba(19,86,151,.84),rgba(8,49,102,.68)) !important;
    border-color:rgba(96,165,250,.58);
    box-shadow:
      0 24px 64px rgba(59,130,246,.2),
      inset 0 1px 0 rgba(255,255,255,.29);
  }

  body.home-normal-load .battery-flow,
  body.home-normal-load .grid-flow,
  body.home-normal-load .home-flow-card{
    filter:saturate(.92) brightness(1.06);
  }

  body.home-high-load .flow-card-mini,
  body.home-high-load .home-flow-card{
    filter:saturate(1.08) brightness(.94);
  }

  body.home-very-high-load .flow-card-mini,
  body.home-very-high-load .home-flow-card{
    filter:saturate(1.16) brightness(.86);
  }

  body.solar-high .solar-line,
  body.solar-high .solar-runner{
    stroke:#ffbd3d;
    filter:drop-shadow(0 0 12px rgba(255,189,61,.72));
  }

  body.solar-peak .solar-line,
  body.solar-peak .solar-runner{
    stroke:#f59e0b;
    filter:drop-shadow(0 0 13px rgba(245,158,11,.78));
  }

  body.home-high-load .home-line,
  body.home-high-load .home-runner{
    stroke:#2f7df4;
    filter:drop-shadow(0 0 12px rgba(47,125,244,.76));
  }

  body.home-very-high-load .home-line,
  body.home-very-high-load .home-runner{
    stroke:#6366f1;
    filter:drop-shadow(0 0 13px rgba(99,102,241,.78));
  }

  body.grid-exporting .grid-line,
  body.grid-exporting .grid-runner{
    stroke:#7c8cff;
    filter:drop-shadow(0 0 11px rgba(124,140,255,.68));
  }

  body.grid-idle .grid-runner{
    opacity:.28;
  }

  body.battery-charging .battery-line,
  body.battery-charging .battery-runner{
    stroke:#7df86e;
    filter:drop-shadow(0 0 12px rgba(125,248,110,.68));
  }

  body.battery-discharging .battery-line,
  body.battery-discharging .battery-runner{
    stroke:#22c7a8;
    filter:drop-shadow(0 0 11px rgba(34,199,168,.64));
  }

  .flow-runner{
    animation-duration:2.6s !important;
    animation-timing-function:linear !important;
  }

  .battery-runner{
    animation-duration:2.6s !important;
  }

  @media(max-width:640px){
    .mobile-flow-diagram.solar-low .mobile-flow-solar,
    .mobile-flow-diagram.solar-normal .mobile-flow-solar,
    .mobile-flow-diagram.solar-high .mobile-flow-solar,
    .mobile-flow-diagram.solar-peak .mobile-flow-solar{
      color:#1b1302;
      border-color:rgba(255,216,77,.4) !important;
      background:linear-gradient(135deg,rgba(255,232,112,.86),rgba(255,194,65,.48)) !important;
    }

    .mobile-flow-diagram.solar-peak .mobile-flow-solar{
      background:linear-gradient(135deg,rgba(255,202,54,.92),rgba(234,88,12,.66)) !important;
    }

    .mobile-flow-diagram.battery-charging .mobile-flow-battery{
      border-color:rgba(120,255,142,.62) !important;
      background:
        radial-gradient(circle at 35% 24%,rgba(112,255,124,.42),transparent 38%),
        linear-gradient(135deg,rgba(28,129,77,.82),rgba(5,68,57,.66)) !important;
    }

    .mobile-flow-diagram.battery-charging .battery-path{
      stroke:#7df86e !important;
    }

    .mobile-flow-diagram.battery-charging .battery-charge-dot{
      fill:#7df86e !important;
      color:#7df86e !important;
    }

    .mobile-flow-diagram.battery-discharging .mobile-flow-battery{
      border-color:rgba(45,212,191,.58) !important;
      background:
        radial-gradient(circle at 35% 24%,rgba(45,212,191,.38),transparent 38%),
        linear-gradient(135deg,rgba(13,118,111,.82),rgba(5,60,72,.66)) !important;
    }

    .mobile-flow-diagram.battery-discharging .battery-path{
      stroke:#22c7a8 !important;
    }

    .mobile-flow-diagram.grid-importing .mobile-flow-grid{
      border-color:rgba(196,181,253,.62) !important;
      background:
        radial-gradient(circle at 35% 24%,rgba(196,181,253,.42),transparent 38%),
        linear-gradient(135deg,rgba(99,69,177,.84),rgba(45,48,122,.66)) !important;
    }

    .mobile-flow-diagram.grid-exporting .mobile-flow-grid{
      border-color:rgba(129,140,248,.58) !important;
      background:
        radial-gradient(circle at 35% 24%,rgba(129,140,248,.4),transparent 38%),
        linear-gradient(135deg,rgba(70,82,190,.84),rgba(35,54,123,.66)) !important;
    }

    .mobile-flow-diagram.home-normal-load .mobile-flow-home{
      border-color:rgba(96,165,250,.58) !important;
      background:
        radial-gradient(circle at 35% 24%,rgba(96,165,250,.38),transparent 38%),
        linear-gradient(135deg,rgba(19,86,151,.84),rgba(8,49,102,.68)) !important;
    }

    .mobile-flow-diagram.home-high-load .mobile-flow-home{
      border-color:rgba(47,125,244,.62) !important;
      background:
        radial-gradient(circle at 35% 24%,rgba(47,125,244,.42),transparent 38%),
        linear-gradient(135deg,rgba(19,52,103,.86),rgba(9,31,64,.72)) !important;
    }

    .mobile-flow-diagram.home-very-high-load .mobile-flow-home{
      border-color:rgba(129,140,248,.56) !important;
      background:linear-gradient(135deg,rgba(37,42,111,.78),rgba(15,26,70,.66)) !important;
    }

    .mobile-flow-diagram.home-normal-load .mobile-flow-battery,
    .mobile-flow-diagram.home-normal-load .mobile-flow-grid,
    .mobile-flow-diagram.home-normal-load .mobile-flow-home{
      filter:saturate(.92) brightness(1.06);
    }

    .mobile-flow-diagram.home-high-load .mobile-flow-node{
      filter:saturate(1.08) brightness(.94);
    }

    .mobile-flow-diagram.home-very-high-load .mobile-flow-node{
      filter:saturate(1.16) brightness(.86);
    }
  }

  /* =========================
     PREMIUM POLISH PASS
  ========================= */

  :root{
    --glass-bg:linear-gradient(145deg,rgba(20,45,70,.54),rgba(12,28,47,.38));
    --glass-bg-strong:linear-gradient(145deg,rgba(27,55,83,.66),rgba(12,29,49,.48));
    --glass-line:rgba(210,230,255,.22);
    --glass-line-soft:rgba(210,230,255,.14);
    --panel-shadow:0 26px 78px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.2);
  }

  body{
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
  }

  .weather-bg{
    filter:saturate(.96) contrast(1.02);
  }

  .weather-bg::after{
    backdrop-filter:blur(.2px);
  }

  .app{
    padding-top:clamp(38px,5vw,58px);
  }

  .shell{
    width:min(1160px,100%);
  }

  .topbar{
    position:sticky;
    top:14px;
    z-index:10;
  }

  .brand-pill,
  .live-pill,
  .overview-status{
    border-color:rgba(230,242,255,.22);
    background:rgba(8,20,34,.26);
    box-shadow:
      0 10px 30px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.22);
  }

  .live-pill{
    max-width:min(62vw,560px);
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .hero{
    margin-bottom:18px;
  }

  .hero h1{
    letter-spacing:0;
    text-shadow:0 10px 34px rgba(0,0,0,.22);
  }

  .hero p,
  .overview-subtitle,
  .overview-sub,
  .flow-sub,
  .insight-sub,
  .info-sub{
    color:rgba(238,246,255,.72);
  }

  .overview-card,
  .ai-card,
  .ring-card,
  .recommend-card,
  .insight-card,
  .info-card,
  .settings-panel,
  .timeline-card{
    background:var(--glass-bg);
    border-color:var(--glass-line);
    box-shadow:var(--panel-shadow);
  }

  .overview-card{
    padding:clamp(22px,3vw,32px);
    border-radius:32px;
  }

  .overview-head{
    align-items:center;
  }

  .section-title{
    letter-spacing:0;
    line-height:1.15;
  }

  .overview-battery,
  .overview-runtime,
  .flow-card-mini,
  .home-flow-card,
  .mobile-flow-node,
  .mobile-flow-inverter{
    border-color:var(--glass-line-soft);
    backdrop-filter:blur(26px) saturate(150%);
    -webkit-backdrop-filter:blur(26px) saturate(150%);
  }

  .overview-battery,
  .overview-runtime{
    background:
      radial-gradient(circle at 18% 10%,rgba(255,255,255,.08),transparent 35%),
      rgba(255,255,255,.075);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.17);
  }

  .overview-label,
  .flow-name,
  .mobile-node-label,
  .info-label,
  .insight-label{
    color:rgba(245,249,255,.78);
    letter-spacing:0;
  }

  .overview-soc,
  .overview-runtime-value,
  .flow-value,
  .insight-value,
  .info-value{
    letter-spacing:0;
    text-shadow:0 10px 28px rgba(0,0,0,.18);
  }

  .live-flow-new{
    margin-top:22px;
  }

  .flow-card-mini{
    min-height:98px;
    border-radius:20px;
  }

  .flow-icon,
  .home-icon-big,
  .mobile-node-icon{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
  }

  .flow-line-new{
    opacity:.58;
  }

  .flow-runner{
    stroke-linecap:round;
    filter:drop-shadow(0 0 9px currentColor);
  }

  .flow-inv,
  .mobile-flow-inverter{
    background:
      radial-gradient(circle at 35% 20%,rgba(255,255,255,.34),transparent 32%),
      linear-gradient(145deg,#4d91ff,#096190);
    box-shadow:
      0 0 34px rgba(78,148,255,.34),
      0 22px 54px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.42);
  }

  .home-flow-card{
    border-radius:28px;
  }

  .insight-grid,
  .info-grid{
    gap:14px;
  }

  .insight-card,
  .info-card{
    min-height:auto;
  }

  .timeline{
    gap:10px;
  }

  .timeline-item{
    border-color:rgba(255,255,255,.13);
    background:rgba(255,255,255,.06);
  }

  button,
  input{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  }

  button.primary{
    background:linear-gradient(145deg,#3d8bff,#2458ee);
    box-shadow:
      0 14px 34px rgba(47,125,244,.25),
      inset 0 1px 0 rgba(255,255,255,.26);
  }

  input:focus{
    border-color:rgba(125,211,252,.5);
    box-shadow:
      0 0 0 3px rgba(125,211,252,.12),
      inset 0 1px 0 rgba(255,255,255,.16);
  }

  .dynamic-island{
    background:rgba(3,12,22,.48);
    border-color:rgba(125,211,252,.28);
    box-shadow:
      0 18px 50px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.18);
  }

  @media(min-width:900px){
    .overview-main-4{
      grid-template-columns:1fr 1fr 1.35fr 1.35fr;
    }

    .overview-main-5{
      grid-template-columns:.95fr .95fr 1.18fr 1.18fr 1.28fr;
    }

    .overview-battery,
    .overview-runtime{
      min-height:142px;
    }
  }

  @media(max-width:640px){
    .app{
      padding:18px 10px 24px;
    }

    .topbar{
      top:8px;
      margin-bottom:14px;
      display:grid;
      grid-template-columns:auto minmax(0,1fr);
    }

    .brand-pill,
    .live-pill{
      padding:9px 12px;
      font-size:12px;
    }

    .live-pill{
      max-width:none;
      min-width:0;
    }

    .hero{
      margin-bottom:14px;
    }

    .hero h1{
      font-size:38px;
      line-height:.98;
    }

    .hero p{
      font-size:14px;
    }

    .overview-card{
      padding:16px;
      border-radius:26px;
    }

    .overview-head{
      gap:10px;
      margin-bottom:16px;
    }

    .section-title{
      font-size:20px;
    }

    .overview-status{
      max-width:45%;
      overflow:hidden;
      text-overflow:ellipsis;
      padding:8px 10px;
      font-size:11px;
    }

    .overview-main,
    .overview-main-3,
    .overview-main-4,
    .overview-main-5{
      gap:9px;
    }

    .overview-battery,
    .overview-runtime{
      border-radius:18px;
      padding:14px 12px;
      min-height:108px;
    }

    .overview-soc,
    .overview-runtime-value{
      font-size:31px;
    }

    .mobile-flow-diagram{
      border-radius:24px !important;
      margin-top:10px !important;
      box-shadow:
        0 18px 48px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
    }

    .mobile-flow-node{
      box-shadow:
        0 12px 30px rgba(0,0,0,.2),
        inset 0 1px 0 rgba(255,255,255,.16) !important;
    }

    .mobile-flow-inverter strong{
      letter-spacing:0 !important;
    }

    .ai-card,
    .ring-card,
    .recommend-card,
    .insight-card,
    .info-card,
    .settings-panel,
    .timeline-card{
      border-radius:22px;
      padding:16px;
    }

    .insight-grid,
    .info-grid{
      gap:10px;
    }

    .dynamic-island{
      bottom:10px;
      font-size:13px;
      padding:8px 14px;
    }

    .settings-panel .field-hidden{
      display:none !important;
    }

    .settings-panel .lean-settings{
      grid-template-columns:minmax(0,1fr) !important;
      margin-top:18px !important;
    }

    .settings-panel .field:not(.field-hidden){
      display:block !important;
      width:100% !important;
    }

    .settings-panel .field:not(.field-hidden) span{
      font-size:17px !important;
      margin-bottom:10px !important;
    }

    .settings-panel .field:not(.field-hidden) input{
      height:52px !important;
      font-size:20px !important;
      border-radius:16px !important;
    }
  }

  /* final cascade: reference-style dark dashboard */
  body{
    background:
      radial-gradient(circle at 84% 16%,rgba(22,104,176,.28),transparent 34%),
      radial-gradient(circle at 14% 0%,rgba(38,165,220,.14),transparent 31%),
      linear-gradient(180deg,#06101d 0%,#040b15 54%,#020711 100%) !important;
  }

  .weather-bg{
    opacity:.78 !important;
    background:
      radial-gradient(circle at 84% 10%,rgba(139,190,255,.28),transparent 9%),
      radial-gradient(circle at 78% 24%,rgba(0,132,255,.18),transparent 28%),
      linear-gradient(120deg,rgba(3,9,19,.92),rgba(4,20,38,.72) 48%,rgba(5,12,24,.96)) !important;
  }

  .premium-hero{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:24px;
    margin-bottom:22px !important;
  }

  .hero-weather-card{
    display:grid;
    grid-template-columns:76px 1px auto;
    align-items:center;
    gap:16px;
    min-width:280px;
    color:#eaf5ff;
  }

  .moon-visual{
    width:76px;
    aspect-ratio:1;
    border-radius:50%;
    background:
      radial-gradient(circle at 30% 28%,rgba(255,255,255,.92),transparent 8%),
      radial-gradient(circle at 64% 58%,rgba(13,43,70,.46),transparent 18%),
      linear-gradient(135deg,#d9efff,#4f7ea7 58%,#172c48);
    box-shadow:0 0 38px rgba(127,190,255,.42), inset -14px -10px 24px rgba(2,10,20,.42), inset 8px 8px 18px rgba(255,255,255,.28);
  }

  .moon-visual::before,
  .moon-visual::after{
    content:"";
    position:absolute;
  }

  .weather-visual-sun.moon-visual{
    position:relative;
    background:radial-gradient(circle,#ffe56b 0 26%,#f6b51d 28% 48%,rgba(246,181,29,.08) 50%);
    box-shadow:0 0 42px rgba(255,210,70,.52), inset 0 0 18px rgba(255,255,255,.28);
  }

  .weather-visual-sun.moon-visual::before{
    inset:5px;
    border-radius:50%;
    background:repeating-conic-gradient(from 0deg,rgba(255,226,91,.95) 0 8deg,transparent 8deg 22deg);
    transform:scale(1.28);
    z-index:-1;
  }

  .weather-visual-cloud.moon-visual,
  .weather-visual-storm.moon-visual{
    position:relative;
    border-radius:22px;
    background:linear-gradient(145deg,#d8e9f7,#7894aa 70%,#496276);
    box-shadow:0 0 36px rgba(180,214,246,.35), inset -10px -8px 20px rgba(20,42,61,.32);
  }

  .weather-visual-cloud.moon-visual::before,
  .weather-visual-storm.moon-visual::before{
    width:42px;
    height:42px;
    left:9px;
    top:-13px;
    border-radius:50%;
    background:#dcecf8;
    box-shadow:28px 8px 0 -4px #b8cfdf;
  }

  .weather-visual-storm.moon-visual::after{
    content:"⚡";
    left:27px;
    top:28px;
    color:#ffd84d;
    font-size:29px;
    text-shadow:0 0 18px rgba(255,216,77,.8);
  }

  .weather-divider{
    width:1px;
    height:78px;
    background:linear-gradient(180deg,transparent,rgba(172,211,255,.28),transparent);
  }

  .hero-weather-temp{
    font-size:36px;
    line-height:1;
    font-weight:950;
  }

  .hero-weather-text{
    margin-top:6px;
    font-size:13px;
    font-weight:900;
  }

  .hero-weather-sub,
  .hero-air{
    margin-top:3px;
    font-size:12px;
    font-weight:760;
    color:rgba(226,240,255,.7);
  }

  .overview-card{
    border-radius:20px !important;
    padding:20px !important;
    background:
      linear-gradient(180deg,rgba(8,28,49,.74),rgba(3,13,25,.74)),
      radial-gradient(circle at 84% 24%,rgba(36,132,255,.12),transparent 28%) !important;
    border-color:rgba(126,184,235,.26) !important;
    box-shadow:0 26px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12) !important;
  }

  .overview-main-4{
    grid-template-columns:1fr 1fr 1.05fr 1.42fr !important;
    gap:12px !important;
  }

  .overview-battery,
  .overview-runtime{
    min-height:132px !important;
    border-radius:18px !important;
    padding:20px 20px 18px 88px !important;
    position:relative;
    background:
      radial-gradient(circle at 20% 22%,rgba(79,164,255,.12),transparent 38%),
      linear-gradient(145deg,rgba(15,38,62,.82),rgba(5,17,31,.72)) !important;
    border-color:rgba(126,184,235,.24) !important;
  }

  .overview-icon{
    position:absolute;
    left:22px;
    top:36px;
    width:48px;
    height:48px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:24px;
    font-weight:950;
    color:#fff;
  }

  .battery-icon{ background:linear-gradient(145deg,#34c56f,#0a6b46); box-shadow:0 0 30px rgba(52,197,111,.42); }
  .runtime-icon{ background:linear-gradient(145deg,#1aa4ff,#0b4c91); box-shadow:0 0 30px rgba(26,164,255,.42); }
  .solar-icon{ background:linear-gradient(145deg,#f8dd54,#816a08); box-shadow:0 0 30px rgba(248,221,84,.42); }
  .grid-icon{ background:linear-gradient(145deg,#985dff,#3a1a8a); box-shadow:0 0 30px rgba(152,93,255,.42); }

  .overview-soc,
  .overview-runtime-value{
    font-size:38px !important;
  }

  .bill-cycle-card .overview-soc{
    font-size:31px !important;
  }

  .live-flow-new{
    min-height:330px !important;
    margin-top:16px !important;
    padding:18px !important;
    border:1px solid rgba(126,184,235,.22);
    border-radius:18px;
    background:
      radial-gradient(circle at 83% 48%,rgba(33,129,255,.16),transparent 24%),
      linear-gradient(180deg,rgba(4,18,32,.78),rgba(3,11,22,.78));
  }

  .flow-card-mini{
    min-height:96px !important;
    border-radius:17px !important;
  }

  .home-flow-card{
    min-height:158px !important;
    border-radius:18px !important;
    overflow:hidden;
  }

  .home-flow-card::after{
    content:none !important;
  }

  .home-flow-card > *{
    position:relative;
    z-index:1;
  }

  .ai-card{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 330px;
    gap:26px;
    min-height:168px !important;
    border-radius:20px !important;
    padding:22px 24px !important;
    background:
      radial-gradient(circle at 88% 34%,rgba(34,158,255,.14),transparent 24%),
      linear-gradient(145deg,rgba(7,30,53,.82),rgba(4,14,27,.8)) !important;
    border-color:rgba(126,184,235,.25) !important;
  }

  .ai-main{
    min-width:0;
  }

  .ai-key-panel{
    position:relative;
    display:grid;
    align-content:center;
    gap:12px;
    padding-left:24px;
    border-left:1px solid rgba(126,184,235,.18);
  }

  .key-title{
    font-size:13px;
    color:rgba(230,242,255,.72);
    font-weight:850;
  }

  .key-row{
    display:flex;
    align-items:center;
    gap:10px;
    color:rgba(235,248,255,.9);
    font-size:14px;
  }

  .key-row span{
    width:17px;
    height:17px;
    border-radius:50%;
    background:linear-gradient(145deg,#8bea79,#2d8d4c);
  }

  .key-row span::after{
    content:"✓";
    display:grid;
    place-items:center;
    color:#06210f;
    font-size:11px;
    font-weight:950;
  }

  .ai-orb{
    position:absolute;
    right:50%;
    bottom:12px;
    transform:translateX(50%);
    width:78px;
    height:78px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:23px;
    font-weight:950;
    color:#aee9ff;
    border:1px solid rgba(77,183,255,.72);
    background:radial-gradient(circle,rgba(29,153,255,.28),rgba(6,35,74,.78));
    box-shadow:0 0 36px rgba(31,144,255,.46), inset 0 0 22px rgba(86,207,255,.2);
    opacity:.86;
  }

  .insight-card,
  .recommend-card{
    border-radius:18px !important;
    background:
      radial-gradient(circle at 82% 18%,rgba(29,153,255,.11),transparent 28%),
      linear-gradient(145deg,rgba(7,30,53,.82),rgba(4,14,27,.82)) !important;
    border-color:rgba(126,184,235,.24) !important;
  }

  .battery-reserve-track{
    margin-top:12px;
  }

  .reserve-track-labels{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-size:12px;
    font-weight:850;
    color:rgba(226,240,255,.68);
  }

  .reserve-track-labels strong{
    color:#7df86e;
  }

  .reserve-track{
    height:10px;
    margin-top:8px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(126,184,235,.14);
  }

  .reserve-track span{
    display:block;
    height:100%;
    width:0;
    border-radius:999px;
    background:linear-gradient(90deg,#7df86e,#38c86a);
    box-shadow:0 0 18px rgba(125,248,110,.45);
    transition:width .45s ease;
  }

  .consumption-head,
  .recommend-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
  }

  .recommend-head .risk-badge{
    margin:0;
  }

  .consumption-card{
    overflow:hidden;
    background:
      radial-gradient(circle at 18% 18%, rgba(104,157,247,.28), transparent 34%),
      radial-gradient(circle at 86% 72%, rgba(0,78,237,.16), transparent 38%),
      linear-gradient(135deg, rgba(104,157,247,.26), rgba(0,78,237,.16)),
      linear-gradient(180deg, rgba(8,33,59,.78), rgba(2,15,30,.86)) !important;
    border-color:rgba(104,157,247,.34) !important;
  }

  .consumption-card::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(110deg, transparent 0 42%, rgba(255,255,255,.08) 48%, transparent 54%),
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(16deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size:100% 100%, 54px 54px, 72px 72px;
    opacity:.34;
  }

  .consumption-head{
    position:relative;
    z-index:1;
    align-items:center;
  }

  .consumption-card-icon{
    flex:0 0 clamp(58px,6vw,84px);
    width:clamp(58px,6vw,84px);
    height:clamp(58px,6vw,84px);
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(104,157,247,.12);
    border:1px solid rgba(140,190,255,.24);
  }

  .consumption-card-icon .energy-icon-img{
    width:78%;
    height:78%;
    object-fit:contain;
    filter:none;
  }

  .consumption-meter{
    position:relative;
    z-index:1;
    margin-top:14px;
  }

  .consumption-value-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:12px;
  }

  .consumption-value-grid div{
    min-width:0;
    padding:9px 10px;
    border-radius:14px;
    color:rgba(235,246,255,.9);
    font-size:clamp(11px,.95vw,14px);
    font-weight:850;
    line-height:1.22;
    background:rgba(104,157,247,.1);
    border:1px solid rgba(140,190,255,.14);
  }

  .consumption-meter-track{
    height:9px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(126,184,235,.14);
    border:1px solid rgba(255,255,255,.08);
  }

  .consumption-meter-track span{
    display:block;
    height:100%;
    width:0;
    border-radius:inherit;
    background:linear-gradient(90deg,#689df7,#004eed);
    box-shadow:0 0 14px rgba(104,157,247,.28);
    transition:width .45s ease;
  }

  .consumption-meter-labels{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:8px;
    color:rgba(226,240,255,.58);
    font-size:12px;
    font-weight:850;
  }

  .recommend-title{
    margin-top:18px;
    font-size:22px;
    line-height:1.15;
    font-weight:950;
  }

  .load-reduction-list{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-top:18px;
  }

  .load-item{
    display:grid;
    justify-items:center;
    gap:6px;
    text-align:center;
    color:rgba(232,243,255,.68);
    font-size:11px;
    font-weight:800;
  }

  .load-item span{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid rgba(226,240,255,.18);
    background:rgba(226,240,255,.07);
    color:rgba(232,243,255,.86);
    font-size:20px;
  }

  .load-item strong{
    font-size:10px;
    line-height:1.2;
  }

  .load-item em{
    font-style:normal;
    color:#ff7666;
    font-size:12px;
  }

  .load-item.is-recommended span{
    border-color:rgba(255,118,102,.4);
    box-shadow:0 0 22px rgba(255,118,102,.18);
  }

  .recommend-card.risk-safe{
    background:
      radial-gradient(circle at 86% 16%,rgba(125,248,110,.13),transparent 28%),
      linear-gradient(145deg,rgba(14,55,40,.84),rgba(4,14,27,.82)) !important;
    border-color:rgba(125,248,110,.34) !important;
  }

  .recommend-card.risk-warn{
    background:
      radial-gradient(circle at 86% 16%,rgba(255,216,77,.16),transparent 28%),
      linear-gradient(145deg,rgba(69,51,18,.86),rgba(4,14,27,.82)) !important;
    border-color:rgba(255,216,77,.36) !important;
  }

  .recommend-card.risk-danger{
    background:
      radial-gradient(circle at 86% 16%,rgba(255,118,102,.16),transparent 28%),
      linear-gradient(145deg,rgba(66,23,34,.88),rgba(4,14,27,.82)) !important;
    border-color:rgba(255,118,102,.4) !important;
  }

  .scheduler-card{
    border-radius:18px !important;
    padding:18px 20px !important;
    margin-bottom:10px;
  }

  .scheduler-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    font-size:17px;
    font-weight:950;
    margin-bottom:14px;
  }

  .scheduler-status{
    color:rgba(226,240,255,.62);
    font-size:13px;
    font-weight:800;
  }

  .scheduler-card .lean-settings{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:10px;
  }

  .scheduler-card .scheduler-field{
    display:block !important;
  }

  .scheduler-card .field-hidden{
    display:none !important;
  }

  .scheduler-card .actions{
    margin-top:14px;
  }

  @media(max-width:980px){
    .premium-hero{
      grid-template-columns:1fr !important;
    }

    .hero-weather-card{
      display:none;
    }

    .ai-card{
      grid-template-columns:1fr !important;
    }

    .ai-key-panel{
      display:none;
    }
  }

  @media(max-width:640px){
    .topbar{
      display:none !important;
    }

    .premium-hero{
      grid-template-columns:auto minmax(0,1fr) !important;
      align-items:center;
      gap:12px;
      margin-top:8px;
    }

    .hero-copy{
      grid-column:1 / -1;
    }

    .hero-weather-card{
      grid-column:1 / -1;
      display:grid;
      grid-template-columns:48px minmax(0,1fr);
      min-width:0;
      gap:10px;
      margin-top:4px;
    }

    .hero-weather-card .weather-divider{
      display:none;
    }

    .moon-visual{
      width:48px;
    }

    .hero-weather-temp{
      font-size:24px;
    }

    .overview-status{
      width:52px;
      height:52px;
      padding:0 !important;
      border-radius:50%;
      font-size:0 !important;
      display:grid;
      place-items:center;
      justify-self:center;
      margin:auto;
    }

    .overview-status::before{
      content:"☀";
      font-size:27px;
    }

    body.weather-visual-cloud .overview-status::before{ content:"☁"; }
    body.weather-visual-storm .overview-status::before{ content:"⛈"; }
    body.weather-visual-moon .overview-status::before{ content:"☾"; }

    .overview-main-4{
      grid-template-columns:1fr 1fr !important;
    }

    .overview-battery,
    .overview-runtime{
      min-height:112px !important;
      padding:14px 12px !important;
    }

    .overview-icon{
      display:none;
    }

    .solar-today-card,
    .bill-cycle-card{
      grid-column:1 / -1 !important;
      padding:14px 16px !important;
    }

    .live-flow-new{
      display:none !important;
    }

    .mobile-flow-diagram{
      display:grid !important;
    }

    .mobile-flow-home::after{
      content:"";
      position:absolute;
      right:8px;
      bottom:8px;
      width:64px;
      height:42px;
      opacity:.18;
      background:linear-gradient(180deg,rgba(130,195,255,.85),rgba(16,72,132,.65));
      clip-path:polygon(5% 50%,50% 8%,95% 50%,86% 50%,86% 96%,14% 96%,14% 50%);
      pointer-events:none;
    }

    .load-reduction-list{
      grid-template-columns:repeat(2,1fr);
    }

    .scheduler-card .lean-settings{
      grid-template-columns:1fr 1fr !important;
    }

    .scheduler-card .field:not(.field-hidden){
      display:block !important;
    }
  }

  @media(min-width:981px){
    .overview-battery,
    .overview-runtime{
      min-height:150px !important;
    }

    .bill-cycle-card .overview-soc{
      font-size:30px !important;
    }

    .bill-cycle-card .metric-unit{
      margin-left:.2em;
    }
  }

  /* Final polish: lean scheduler and weather icons without emoji glyphs. */
  .scheduler-card{
    display:grid;
    grid-template-columns:auto minmax(240px,360px);
    align-items:center;
    gap:18px 28px;
  }

  .scheduler-card .scheduler-head{
    margin:0 !important;
  }

  .scheduler-card .lean-settings{
    display:block !important;
  }

  .scheduler-card .target-only-field{
    display:grid !important;
    gap:9px;
  }

  .scheduler-card .target-only-field span{
    color:rgba(224,238,255,.82);
    font-size:15px;
    font-weight:900;
  }

  .scheduler-card .target-only-field input{
    min-height:52px;
    text-align:center;
    font-size:24px;
    font-weight:950;
    letter-spacing:0;
  }

  .scheduler-actions-hidden,
  .scheduler-card .field-hidden{
    display:none !important;
  }

  .moon-visual,
  .overview-status{
    position:relative;
    overflow:visible;
  }

  .moon-visual::before,
  .moon-visual::after,
  .overview-status::before,
  .overview-status::after{
    content:"" !important;
    position:absolute;
    display:block;
  }

  .weather-visual-sun.moon-visual{
    background:
      radial-gradient(circle at 50% 50%,#fff59c 0 22%,#ffd33d 23% 38%,rgba(255,202,41,.12) 39% 64%,transparent 65%) !important;
    box-shadow:0 0 34px rgba(255,210,66,.5), inset 0 0 18px rgba(255,255,255,.34) !important;
  }

  .weather-visual-sun.moon-visual::before{
    inset:6px;
    border-radius:50%;
    background:repeating-conic-gradient(from 0deg,rgba(255,220,80,.95) 0 8deg,transparent 8deg 22deg);
    transform:scale(1.34);
    z-index:-1;
    filter:drop-shadow(0 0 12px rgba(255,213,69,.42));
  }

  .weather-visual-sun.moon-visual::after{
    inset:22%;
    border-radius:50%;
    background:radial-gradient(circle at 36% 32%,#fffbd0 0 12%,#ffd248 42%,#f4a51c 100%);
    box-shadow:inset -7px -7px 14px rgba(188,105,16,.18);
  }

  .weather-visual-moon.moon-visual{
    background:
      radial-gradient(circle at 32% 25%,rgba(255,255,255,.9),transparent 7%),
      linear-gradient(135deg,#d9efff,#719dc2 56%,#233c5e) !important;
    box-shadow:0 0 34px rgba(137,196,255,.38), inset -14px -10px 24px rgba(3,14,30,.42), inset 8px 8px 18px rgba(255,255,255,.25) !important;
  }

  .weather-visual-moon.moon-visual::before{
    inset:0;
    border-radius:50%;
    background:radial-gradient(circle at 68% 44%,rgba(14,37,61,.58) 0 22%,transparent 23%);
  }

  .weather-visual-moon.moon-visual::after{
    width:18%;
    height:18%;
    left:24%;
    top:24%;
    border-radius:50%;
    background:rgba(255,255,255,.52);
    box-shadow:24px 22px 0 -5px rgba(255,255,255,.2), 33px 8px 0 -7px rgba(255,255,255,.22);
  }

  .weather-visual-cloud.moon-visual,
  .weather-visual-storm.moon-visual{
    border-radius:24px !important;
    background:linear-gradient(145deg,#d8eaf8 0%,#91abc0 58%,#496478 100%) !important;
    box-shadow:0 0 34px rgba(180,214,246,.28), inset -12px -10px 22px rgba(20,42,61,.34), inset 7px 9px 20px rgba(255,255,255,.24) !important;
  }

  .weather-visual-cloud.moon-visual::before,
  .weather-visual-storm.moon-visual::before{
    width:46%;
    aspect-ratio:1;
    left:13%;
    top:-16%;
    border-radius:50%;
    background:#e3f0fa;
    box-shadow:
      28px 8px 0 -5px #bfd3e3,
      10px 22px 0 12px rgba(213,230,242,.96),
      37px 27px 0 7px rgba(154,178,196,.92);
    filter:drop-shadow(0 10px 12px rgba(4,18,32,.18));
  }

  .weather-visual-cloud.moon-visual::after{
    left:17%;
    right:13%;
    bottom:17%;
    height:16%;
    border-radius:999px;
    background:rgba(233,243,250,.45);
    box-shadow:0 0 16px rgba(255,255,255,.22);
  }

  .weather-visual-storm.moon-visual::after{
    width:20%;
    height:35%;
    left:42%;
    top:45%;
    background:linear-gradient(180deg,#fff279,#ffc629);
    clip-path:polygon(52% 0,22% 42%,48% 42%,34% 100%,82% 32%,56% 32%);
    filter:drop-shadow(0 0 10px rgba(255,213,67,.7));
  }

  @media(max-width:640px){
    .scheduler-card{
      grid-template-columns:1fr;
      padding:18px !important;
      gap:14px;
    }

    .scheduler-card .scheduler-head{
      justify-content:center;
      text-align:center;
    }

    .scheduler-card .target-only-field{
      max-width:320px;
      width:100%;
      margin:0 auto;
    }

    .scheduler-card .target-only-field span{
      text-align:center;
    }

    .overview-status{
      background:linear-gradient(145deg,rgba(59,88,115,.95),rgba(19,42,64,.95)) !important;
      box-shadow:inset 0 0 0 1px rgba(178,216,255,.24), 0 12px 28px rgba(0,0,0,.22);
    }

    .overview-status::before{
      width:44%;
      height:44%;
      left:28%;
      top:28%;
      border-radius:50%;
      background:radial-gradient(circle,#fff6a6 0 24%,#ffd43c 25% 62%,#f2a71f 100%);
      box-shadow:0 0 18px rgba(255,213,62,.54);
      z-index:1;
    }

    .overview-status::after{
      width:64%;
      height:64%;
      left:18%;
      top:18%;
      border-radius:50%;
      background:repeating-conic-gradient(from 0deg,rgba(255,219,70,.92) 0 8deg,transparent 8deg 24deg);
      transform:scale(1.15);
      z-index:0;
    }

    body.weather-visual-cloud .overview-status::before,
    body.weather-visual-storm .overview-status::before{
      width:42%;
      height:34%;
      left:29%;
      top:40%;
      border-radius:16px;
      background:linear-gradient(145deg,#e1eef8,#8faabe);
      box-shadow:-12px -8px 0 1px #d7e8f4, 12px -5px 0 -2px #b9cedf;
    }

    body.weather-visual-cloud .overview-status::after{
      display:none;
    }

    body.weather-visual-storm .overview-status::after{
      width:17%;
      height:32%;
      left:43%;
      top:48%;
      border-radius:0;
      background:linear-gradient(180deg,#fff279,#ffc629);
      clip-path:polygon(52% 0,22% 42%,48% 42%,34% 100%,82% 32%,56% 32%);
      transform:none;
    }

    body.weather-visual-moon .overview-status::before{
      width:54%;
      height:54%;
      left:23%;
      top:22%;
      border-radius:50%;
      background:linear-gradient(135deg,#dff2ff,#7ba8ce 62%,#26415f);
      box-shadow:inset -8px -6px 13px rgba(4,16,33,.44), 0 0 18px rgba(137,196,255,.35);
    }

    body.weather-visual-moon .overview-status::after{
      width:34%;
      height:34%;
      left:43%;
      top:25%;
      border-radius:50%;
      background:rgba(20,43,66,.68);
      transform:none;
    }
  }

  /* Asset weather icons and leaner mobile overview. */
  .moon-visual{
    width:88px !important;
    aspect-ratio:1 !important;
    border-radius:0 !important;
    background-color:transparent !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:contain !important;
    box-shadow:none !important;
    filter:drop-shadow(0 18px 24px rgba(0,0,0,.28)) drop-shadow(0 0 22px rgba(107,181,255,.16));
    animation:weatherFloat 5.8s ease-in-out infinite;
  }

  .moon-visual::before,
  .moon-visual::after{
    display:none !important;
  }

  .weather-visual-sun.moon-visual{
    background-image:url("assets/weather-icons/sunny.webp") !important;
    animation-name:weatherSunFloat;
  }

  .weather-visual-cloud.moon-visual{
    background-image:url("assets/weather-icons/cloudy.webp") !important;
  }

  .weather-visual-partly.moon-visual{
    background-image:url("assets/weather-icons/partly-cloudy.webp") !important;
  }

  .weather-visual-rain.moon-visual{
    background-image:url("assets/weather-icons/rain.webp") !important;
    animation-name:weatherRainFloat;
  }

  .weather-visual-storm.moon-visual{
    background-image:url("assets/weather-icons/storm.webp") !important;
    animation-name:weatherStormPulse;
  }

  .weather-visual-moon.moon-visual{
    background-image:url("assets/weather-icons/night.webp") !important;
    animation-name:weatherMoonFloat;
  }

  @keyframes weatherFloat{
    0%,100%{ transform:translate3d(0,0,0) scale(1); }
    50%{ transform:translate3d(0,-7px,0) scale(1.03); }
  }

  @keyframes weatherSunFloat{
    0%,100%{ transform:translate3d(0,0,0) scale(1); filter:drop-shadow(0 18px 24px rgba(0,0,0,.24)) drop-shadow(0 0 20px rgba(255,211,60,.24)); }
    50%{ transform:translate3d(0,-7px,0) scale(1.04); filter:drop-shadow(0 18px 24px rgba(0,0,0,.24)) drop-shadow(0 0 30px rgba(255,211,60,.34)); }
  }

  @keyframes weatherRainFloat{
    0%,100%{ transform:translate3d(0,0,0); }
    50%{ transform:translate3d(0,-5px,0); }
  }

  @keyframes weatherStormPulse{
    0%,100%{ transform:translate3d(0,0,0) scale(1); filter:drop-shadow(0 18px 24px rgba(0,0,0,.28)) drop-shadow(0 0 18px rgba(255,210,54,.16)); }
    45%{ transform:translate3d(0,-5px,0) scale(1.025); filter:drop-shadow(0 18px 24px rgba(0,0,0,.28)) drop-shadow(0 0 30px rgba(255,210,54,.36)); }
    55%{ transform:translate3d(0,-5px,0) scale(1.025); }
  }

  @keyframes weatherMoonFloat{
    0%,100%{ transform:translate3d(0,0,0) rotate(-2deg); }
    50%{ transform:translate3d(0,-6px,0) rotate(2deg); }
  }

  .ai-key-panel{
    position:relative;
  }

  .ai-orb{
    top:20px !important;
    right:20px !important;
    bottom:auto !important;
    width:auto !important;
    min-width:54px !important;
    height:32px !important;
    border-radius:999px !important;
    transform:none !important;
    padding:0 15px !important;
    display:inline-grid !important;
    place-items:center !important;
    background:rgba(31,93,143,.42) !important;
    border:1px solid rgba(84,178,255,.48) !important;
    box-shadow:inset 0 0 20px rgba(77,178,255,.18), 0 10px 28px rgba(0,0,0,.18) !important;
    color:#b9e1ff !important;
    font-size:15px !important;
    font-weight:950 !important;
    letter-spacing:.04em !important;
  }

  .recommend-card.risk-safe{
    background:
      radial-gradient(circle at 86% 16%,rgba(63,215,133,.12),transparent 28%),
      linear-gradient(145deg,rgba(9,55,37,.8),rgba(4,20,28,.8)) !important;
  }

  .recommend-card.risk-warn{
    background:
      radial-gradient(circle at 86% 16%,rgba(255,202,58,.13),transparent 28%),
      linear-gradient(145deg,rgba(63,50,20,.8),rgba(5,19,30,.8)) !important;
  }

  .recommend-card.risk-danger{
    background:
      radial-gradient(circle at 86% 16%,rgba(255,118,102,.14),transparent 28%),
      linear-gradient(145deg,rgba(66,23,34,.8),rgba(4,14,27,.8)) !important;
  }

  @media(max-width:640px){
    .overview-card .overview-head{
      display:none !important;
    }

    .overview-card{
      padding-top:18px !important;
    }

    .hero-weather-card{
      grid-template-columns:58px minmax(0,1fr) !important;
      align-items:center;
    }

    .moon-visual{
      width:62px !important;
    }

    .overview-status{
      background-color:transparent !important;
      background-repeat:no-repeat !important;
      background-position:center !important;
      background-size:92% auto !important;
      box-shadow:none !important;
      filter:drop-shadow(0 12px 18px rgba(0,0,0,.24));
    }

    .overview-status::before,
    .overview-status::after{
      display:none !important;
    }

    body.weather-visual-sun .overview-status{
      background-image:url("assets/weather-icons/sunny.webp") !important;
    }

    body.weather-visual-cloud .overview-status{
      background-image:url("assets/weather-icons/cloudy.webp") !important;
    }

    body.weather-visual-partly .overview-status{
      background-image:url("assets/weather-icons/partly-cloudy.webp") !important;
    }

    body.weather-visual-rain .overview-status{
      background-image:url("assets/weather-icons/rain.webp") !important;
    }

    body.weather-visual-storm .overview-status{
      background-image:url("assets/weather-icons/storm.webp") !important;
    }

    body.weather-visual-moon .overview-status{
      background-image:url("assets/weather-icons/night.webp") !important;
    }
  }

  /* Scheduler: centered control layout matching the compact reference. */
  .scheduler-card{
    display:block !important;
    padding:26px 24px 22px !important;
    border-radius:28px !important;
    background:#020406 !important;
    border:1px solid rgba(255,255,255,.08) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 18px 46px rgba(0,0,0,.22) !important;
    text-align:center;
  }

  .scheduler-card .scheduler-head{
    display:block !important;
    margin:0 0 8px !important;
    text-align:center !important;
  }

  .scheduler-card .scheduler-head span{
    display:block;
    color:#fff;
    font-size:clamp(30px,4.2vw,48px);
    line-height:1.04;
    font-weight:950;
    letter-spacing:0;
  }

  .scheduler-card .lean-settings{
    display:block !important;
    width:100% !important;
    max-width:none !important;
  }

  .scheduler-card .target-only-field{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .scheduler-card .target-only-field span{
    display:block;
    margin:0 0 14px;
    color:#fff !important;
    text-align:center !important;
    font-size:clamp(20px,2.8vw,30px) !important;
    line-height:1.1;
    font-weight:650 !important;
    opacity:.94;
  }

  .scheduler-card .target-only-field input{
    width:100% !important;
    min-height:82px !important;
    border-radius:16px !important;
    border:2px solid rgba(255,255,255,.92) !important;
    background:#020406 !important;
    color:#fff !important;
    text-align:center !important;
    font-size:clamp(34px,4.4vw,52px) !important;
    line-height:1 !important;
    font-weight:500 !important;
    box-shadow:none !important;
    padding:0 18px !important;
  }

  .scheduler-card .target-only-field input::-webkit-calendar-picker-indicator{
    opacity:0;
    width:0;
    padding:0;
    margin:0;
  }

  @media(max-width:640px){
    .scheduler-card{
      padding:24px 20px 20px !important;
      border-radius:24px !important;
    }

    .scheduler-card .scheduler-head{
      margin-bottom:8px !important;
    }

    .scheduler-card .target-only-field span{
      margin-bottom:12px;
    }

    .scheduler-card .target-only-field input{
      min-height:64px !important;
      border-radius:14px !important;
      font-size:36px !important;
    }
  }

  /* Mobile weather strip: separate tiles for icon, temp, status, humidity, and air. */
  @media(max-width:640px){
    .premium-hero{
      display:block !important;
      margin-top:8px !important;
    }

    .hero-weather-card{
      display:flex !important;
      align-items:center !important;
      gap:10px !important;
      width:calc(100vw - 32px) !important;
      max-width:none !important;
      min-width:0 !important;
      margin:16px 0 0 !important;
      padding:0 2px 5px !important;
      overflow-x:auto;
      overflow-y:hidden;
      scroll-snap-type:x proximity;
      -webkit-overflow-scrolling:touch;
    }

    .hero-weather-card::-webkit-scrollbar{
      display:none;
    }

    .hero-weather-metrics{
      display:contents;
    }

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

    .hero-weather-card .moon-visual,
    .hero-weather-card .hero-weather-temp,
    .hero-weather-card .hero-weather-text,
    .hero-weather-card .hero-weather-sub,
    .hero-weather-card .hero-air{
      flex:0 0 auto;
      min-height:58px;
      display:grid !important;
      place-items:center;
      border-radius:0 !important;
      background-color:rgba(24,52,74,.72) !important;
      background-image:linear-gradient(135deg,rgba(45,84,112,.72),rgba(15,39,61,.68)) !important;
      border:0 !important;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
      color:#e8f5ff !important;
      scroll-snap-align:start;
      white-space:nowrap;
    }

    .hero-weather-card .moon-visual{
      width:96px !important;
      height:58px !important;
      padding:0 !important;
      background-repeat:no-repeat !important;
      background-position:center !important;
      background-size:84% auto !important;
      filter:drop-shadow(0 10px 16px rgba(0,0,0,.2));
      animation:weatherFloat 5.8s ease-in-out infinite;
    }

    .hero-weather-card .hero-weather-temp{
      min-width:116px;
      padding:0 18px;
      font-size:43px !important;
      line-height:1 !important;
      font-weight:950 !important;
      letter-spacing:0;
    }

    .hero-weather-card .hero-weather-text{
      min-width:74px;
      padding:0 12px;
      font-size:25px !important;
      line-height:1 !important;
      font-weight:950 !important;
    }

    .hero-weather-card .hero-weather-sub{
      min-width:146px;
      padding:0 14px;
      font-size:21px !important;
      line-height:1 !important;
      font-weight:900 !important;
      opacity:.9 !important;
    }

    .hero-weather-card .hero-air{
      min-width:126px;
      padding:0 14px;
      font-size:21px !important;
      line-height:1 !important;
      font-weight:900 !important;
      opacity:.9 !important;
    }
  }

  /* Scheduler visual reset: keep the centered layout, return to the glass dashboard style. */
  .scheduler-card{
    display:block !important;
    padding:22px 24px 24px !important;
    border-radius:22px !important;
    background:
      radial-gradient(circle at 22% 18%,rgba(85,139,184,.16),transparent 32%),
      linear-gradient(145deg,rgba(12,48,74,.88),rgba(5,24,41,.92)) !important;
    border:1px solid rgba(95,148,190,.5) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 18px 38px rgba(0,0,0,.18) !important;
    text-align:center;
  }

  .scheduler-card .scheduler-head{
    display:block !important;
    margin:0 0 8px !important;
    text-align:center !important;
  }

  .scheduler-card .scheduler-head span{
    display:block;
    color:#f5fbff;
    font-size:clamp(26px,3.2vw,38px);
    line-height:1.08;
    font-weight:950;
    letter-spacing:0;
    text-shadow:0 8px 28px rgba(0,0,0,.24);
  }

  .scheduler-card .target-only-field span{
    display:block;
    margin:0 0 12px;
    color:rgba(230,242,255,.86) !important;
    text-align:center !important;
    font-size:clamp(18px,2.2vw,25px) !important;
    line-height:1.1;
    font-weight:850 !important;
  }

  .scheduler-card .target-only-field input{
    width:100% !important;
    min-height:68px !important;
    border-radius:14px !important;
    border:1px solid rgba(171,213,246,.68) !important;
    background:rgba(4,25,42,.72) !important;
    color:#fff !important;
    text-align:center !important;
    font-size:clamp(32px,3.5vw,44px) !important;
    line-height:1 !important;
    font-weight:650 !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.14) !important;
    padding:0 18px !important;
  }

  @media(max-width:640px){
    .scheduler-card{
      padding:22px 20px 20px !important;
      border-radius:22px !important;
    }

    .scheduler-card .scheduler-head span{
      font-size:34px;
    }

    .scheduler-card .target-only-field span{
      font-size:21px !important;
      margin-bottom:10px;
    }

    .scheduler-card .target-only-field input{
      min-height:56px !important;
      font-size:34px !important;
      border-radius:12px !important;
    }
  }

  /* Mobile weather correction: keep the original glass look and fit all data in one row. */
  @media(max-width:640px){
    .dynamic-island{
      display:none !important;
    }

    .app{
      padding-top:18px !important;
    }

    .premium-hero{
      display:block !important;
      margin:0 0 18px !important;
    }

    .hero-copy h1{
      font-size:clamp(44px,12.4vw,56px) !important;
      line-height:.96 !important;
      margin:0 0 14px !important;
      letter-spacing:0 !important;
    }

    .hero-copy p{
      font-size:clamp(17px,4.1vw,21px) !important;
      line-height:1.35 !important;
      margin:0 !important;
    }

    .hero-weather-card{
      display:grid !important;
      grid-template-columns:58px minmax(58px,.72fr) minmax(42px,.5fr) minmax(88px,.92fr) minmax(74px,.72fr) !important;
      align-items:center !important;
      gap:7px !important;
      width:100% !important;
      max-width:100% !important;
      margin:18px 0 0 !important;
      padding:8px !important;
      overflow:visible !important;
      border-radius:22px !important;
      background:
        radial-gradient(circle at 12% 10%,rgba(91,151,195,.2),transparent 34%),
        linear-gradient(145deg,rgba(13,48,73,.72),rgba(7,30,49,.66)) !important;
      border:1px solid rgba(98,154,199,.34) !important;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 14px 34px rgba(0,0,0,.18) !important;
    }

    .hero-weather-metrics{
      display:contents !important;
    }

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

    .hero-weather-card .moon-visual,
    .hero-weather-card .hero-weather-temp,
    .hero-weather-card .hero-weather-text,
    .hero-weather-card .hero-weather-sub,
    .hero-weather-card .hero-air{
      min-width:0 !important;
      min-height:44px !important;
      width:auto !important;
      padding:0 8px !important;
      display:grid !important;
      place-items:center !important;
      border-radius:15px !important;
      background-color:rgba(31,67,94,.62) !important;
      background-image:linear-gradient(145deg,rgba(55,99,129,.52),rgba(15,43,67,.48)) !important;
      border:1px solid rgba(146,197,237,.1) !important;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 8px 18px rgba(0,0,0,.1) !important;
      color:#e8f5ff !important;
      white-space:nowrap !important;
      overflow:hidden !important;
      text-overflow:ellipsis !important;
    }

    .hero-weather-card .moon-visual{
      height:52px !important;
      padding:0 !important;
      border-radius:16px !important;
      background-repeat:no-repeat !important;
      background-position:center !important;
      background-size:78% auto !important;
      filter:drop-shadow(0 8px 12px rgba(0,0,0,.18));
      animation:weatherFloat 5.8s ease-in-out infinite;
    }

    body.weather-visual-sun .hero-weather-card .moon-visual{
      background-image:url("assets/weather-icons/sunny.webp"), linear-gradient(145deg,rgba(55,99,129,.52),rgba(15,43,67,.48)) !important;
    }

    body.weather-visual-partly .hero-weather-card .moon-visual{
      background-image:url("assets/weather-icons/partly-cloudy.webp"), linear-gradient(145deg,rgba(55,99,129,.52),rgba(15,43,67,.48)) !important;
    }

    body.weather-visual-cloud .hero-weather-card .moon-visual{
      background-image:url("assets/weather-icons/cloudy.webp"), linear-gradient(145deg,rgba(55,99,129,.52),rgba(15,43,67,.48)) !important;
    }

    body.weather-visual-rain .hero-weather-card .moon-visual{
      background-image:url("assets/weather-icons/rain.webp"), linear-gradient(145deg,rgba(55,99,129,.52),rgba(15,43,67,.48)) !important;
    }

    body.weather-visual-storm .hero-weather-card .moon-visual{
      background-image:url("assets/weather-icons/storm.webp"), linear-gradient(145deg,rgba(55,99,129,.52),rgba(15,43,67,.48)) !important;
    }

    body.weather-visual-moon .hero-weather-card .moon-visual{
      background-image:url("assets/weather-icons/night.webp"), linear-gradient(145deg,rgba(55,99,129,.52),rgba(15,43,67,.48)) !important;
    }

    .hero-weather-card .hero-weather-temp{
      font-size:clamp(25px,8vw,34px) !important;
      line-height:1 !important;
      font-weight:950 !important;
      letter-spacing:0 !important;
    }

    .hero-weather-card .hero-weather-text{
      font-size:clamp(17px,5vw,22px) !important;
      line-height:1 !important;
      font-weight:950 !important;
    }

    .hero-weather-card .hero-weather-sub,
    .hero-weather-card .hero-air{
      font-size:clamp(12px,3.35vw,15px) !important;
      line-height:1 !important;
      font-weight:850 !important;
      opacity:.86 !important;
      padding-inline:6px !important;
    }
  }

  /* Responsive typography and layout polish pass. */
  *, *::before, *::after{
    min-width:0;
  }

  html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  .hero h1,
  .hero-copy h1{
    font-size:clamp(46px,6.2vw,74px) !important;
    line-height:.98 !important;
    letter-spacing:0 !important;
  }

  .hero p,
  .hero-copy p{
    font-size:clamp(15px,1.55vw,20px) !important;
    line-height:1.45 !important;
  }

  .section-title,
  .scheduler-card .scheduler-head span{
    font-size:clamp(24px,2.5vw,34px) !important;
    line-height:1.12 !important;
  }

  .overview-label,
  .flow-name,
  .ai-kicker,
  .insight-kicker{
    font-size:clamp(13px,1.25vw,16px) !important;
    line-height:1.25 !important;
  }

  .overview-sub,
  .bill-cycle-detail,
  .flow-sub,
  .insight-card p{
    font-size:clamp(12px,1.1vw,15px) !important;
    line-height:1.38 !important;
  }

  .overview-soc,
  .overview-runtime-value{
    font-size:clamp(34px,3.8vw,50px) !important;
    line-height:.98 !important;
    letter-spacing:0 !important;
  }

  .overview-runtime .overview-runtime-value{
    font-size:clamp(36px,3.6vw,48px) !important;
  }

  .overview-runtime .overview-sub{
    color:rgba(225,239,255,.72) !important;
    font-weight:850;
  }

  .bill-cycle-card .overview-soc{
    font-size:clamp(28px,3vw,38px) !important;
    line-height:.98 !important;
  }

  .scheduler-card{
    padding:20px 24px 22px !important;
  }

  .scheduler-card .scheduler-head{
    margin-bottom:6px !important;
  }

  .scheduler-card .target-only-field span{
    margin-bottom:10px !important;
    font-size:clamp(17px,1.7vw,23px) !important;
    line-height:1.2 !important;
  }

  .scheduler-card .target-only-field input{
    min-height:58px !important;
    font-size:clamp(30px,3vw,40px) !important;
    line-height:1 !important;
  }

  @media(max-width:640px){
    .app{
      padding:16px 10px 24px !important;
      overflow-x:hidden;
    }

    .shell{
      gap:12px !important;
    }

    .premium-hero{
      margin-bottom:14px !important;
    }

    .hero-copy h1{
      font-size:clamp(40px,11vw,48px) !important;
      line-height:1 !important;
      margin-bottom:10px !important;
    }

    .hero-copy p{
      font-size:clamp(15px,4vw,18px) !important;
      line-height:1.35 !important;
    }

    .hero-weather-card{
      grid-template-columns:44px minmax(48px,.58fr) minmax(48px,.58fr) minmax(78px,.9fr) minmax(66px,.74fr) !important;
      gap:5px !important;
      margin-top:12px !important;
      padding:6px !important;
      border-radius:18px !important;
      overflow:hidden !important;
      background:
        radial-gradient(circle at 14% 12%,rgba(91,151,195,.2),transparent 34%),
        linear-gradient(145deg,rgba(13,48,73,.64),rgba(7,30,49,.58)) !important;
    }

    .hero-weather-card .moon-visual,
    .hero-weather-card .hero-weather-temp,
    .hero-weather-card .hero-weather-text,
    .hero-weather-card .hero-weather-sub,
    .hero-weather-card .hero-air{
      min-height:40px !important;
      padding:0 5px !important;
      border-radius:13px !important;
      background-color:rgba(32,69,97,.5) !important;
      background-image:linear-gradient(145deg,rgba(64,108,138,.4),rgba(17,45,69,.42)) !important;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
    }

    .hero-weather-card .moon-visual{
      height:42px !important;
      background-size:82% auto !important;
    }

    .hero-weather-card .hero-weather-temp{
      font-size:clamp(22px,6.4vw,27px) !important;
      font-weight:950 !important;
    }

    .hero-weather-card .hero-weather-text{
      font-size:clamp(14px,4vw,17px) !important;
      font-weight:950 !important;
    }

    .hero-weather-card .hero-weather-sub,
    .hero-weather-card .hero-air{
      font-size:clamp(10px,2.8vw,12px) !important;
      font-weight:850 !important;
      letter-spacing:0 !important;
    }

    body.weather-visual-sun .hero-weather-card .moon-visual{
      background-image:url("assets/weather-icons/sunny.webp"), linear-gradient(145deg,rgba(64,108,138,.4),rgba(17,45,69,.42)) !important;
    }

    body.weather-visual-partly .hero-weather-card .moon-visual{
      background-image:url("assets/weather-icons/partly-cloudy.webp"), linear-gradient(145deg,rgba(64,108,138,.4),rgba(17,45,69,.42)) !important;
    }

    body.weather-visual-cloud .hero-weather-card .moon-visual{
      background-image:url("assets/weather-icons/cloudy.webp"), linear-gradient(145deg,rgba(64,108,138,.4),rgba(17,45,69,.42)) !important;
    }

    body.weather-visual-rain .hero-weather-card .moon-visual{
      background-image:url("assets/weather-icons/rain.webp"), linear-gradient(145deg,rgba(64,108,138,.4),rgba(17,45,69,.42)) !important;
    }

    body.weather-visual-storm .hero-weather-card .moon-visual{
      background-image:url("assets/weather-icons/storm.webp"), linear-gradient(145deg,rgba(64,108,138,.4),rgba(17,45,69,.42)) !important;
    }

    body.weather-visual-moon .hero-weather-card .moon-visual{
      background-image:url("assets/weather-icons/night.webp"), linear-gradient(145deg,rgba(64,108,138,.4),rgba(17,45,69,.42)) !important;
    }

    .overview-card{
      padding:14px !important;
      border-radius:24px !important;
    }

    .overview-main-4{
      gap:10px !important;
    }

    .overview-battery,
    .overview-runtime{
      padding:14px 12px !important;
      min-height:116px !important;
      border-radius:20px !important;
    }

    .overview-label{
      font-size:clamp(13px,3.7vw,16px) !important;
    }

    .overview-soc,
    .overview-runtime-value{
      font-size:clamp(34px,10vw,44px) !important;
      margin-top:8px !important;
    }

    .overview-sub{
      font-size:clamp(12px,3.2vw,14px) !important;
      margin-top:8px !important;
    }

    .bill-cycle-card{
      display:grid !important;
      grid-template-columns:minmax(0,1fr) clamp(88px,28vw,118px) !important;
      column-gap:12px !important;
      row-gap:7px !important;
      align-items:center !important;
      padding:16px 16px !important;
      min-height:150px !important;
    }

    .bill-cycle-card .overview-icon{
      display:none !important;
    }

    .bill-cycle-card .overview-label,
    .bill-cycle-card .overview-sub,
    .bill-cycle-card .bill-cycle-detail{
      grid-column:1 !important;
      margin:0 !important;
      text-align:left !important;
    }

    .bill-cycle-card .overview-label{
      align-self:end;
      font-size:clamp(18px,4.8vw,22px) !important;
    }

    .bill-cycle-card .overview-sub{
      font-size:clamp(12px,3.2vw,14px) !important;
      color:rgba(225,239,255,.72) !important;
    }

    .bill-cycle-card .bill-cycle-detail{
      font-size:clamp(11px,3vw,13px) !important;
      line-height:1.45 !important;
      color:rgba(225,239,255,.68) !important;
    }

    .bill-cycle-card .overview-soc{
      grid-column:2 !important;
      grid-row:1 / span 4 !important;
      align-self:center !important;
      justify-self:end !important;
      max-width:118px !important;
      margin:0 !important;
      text-align:right !important;
      display:flex !important;
      flex-direction:column !important;
      align-items:flex-end !important;
      gap:2px !important;
      font-size:clamp(25px,7.5vw,32px) !important;
      white-space:normal !important;
    }

    .bill-cycle-card .metric-number{
      display:block !important;
      line-height:.95 !important;
    }

    .bill-cycle-card .metric-unit{
      display:block !important;
      margin-left:0 !important;
      font-size:.52em !important;
      line-height:1 !important;
    }

    .scheduler-card{
      padding:18px 16px !important;
      border-radius:20px !important;
    }

    .scheduler-card .scheduler-head span{
      font-size:clamp(24px,7vw,30px) !important;
    }

    .scheduler-card .target-only-field span{
      font-size:clamp(15px,4.1vw,18px) !important;
      margin-bottom:8px !important;
    }

    .scheduler-card .target-only-field input{
      min-height:50px !important;
      font-size:clamp(27px,8vw,34px) !important;
      border-radius:12px !important;
    }
  }

  @media(max-width:360px){
    .hero-weather-card{
      grid-template-columns:40px 46px 46px 74px 58px !important;
      gap:4px !important;
      padding:5px !important;
    }

    .hero-weather-card .hero-weather-sub,
    .hero-weather-card .hero-air{
      font-size:10px !important;
    }
  }

  @media(min-width:1400px){
    .overview-soc,
    .overview-runtime-value{
      font-size:clamp(42px,2.8vw,56px) !important;
    }

    .scheduler-card .target-only-field input{
      max-width:100%;
    }
  }

  /* Weather icon hardening: keep asset visible on desktop and mobile after later glass overrides. */
  .hero-weather-card .moon-visual{
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:contain !important;
  }

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

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

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

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

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

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

  /* Final responsive cleanup: weather strip, scheduler scale, bill card balance. */
  .overview-runtime .overview-label{
    color:rgba(233,245,255,.78) !important;
  }

  .overview-runtime .overview-runtime-value{
    font-size:clamp(34px,3.2vw,46px) !important;
  }

  .overview-runtime .overview-sub{
    font-size:clamp(12px,1.05vw,14px) !important;
  }

  .scheduler-card{
    padding:18px 22px 20px !important;
  }

  .scheduler-card .scheduler-head span{
    font-size:clamp(22px,2vw,28px) !important;
    line-height:1.18 !important;
    font-weight:900 !important;
  }

  .scheduler-card .target-only-field span{
    font-size:clamp(14px,1.25vw,17px) !important;
    line-height:1.25 !important;
    margin-bottom:8px !important;
    font-weight:780 !important;
  }

  .scheduler-card .target-only-field input{
    min-height:52px !important;
    max-width:100% !important;
    font-size:clamp(26px,2.35vw,34px) !important;
    line-height:1 !important;
    font-weight:760 !important;
    padding:0 14px !important;
    box-sizing:border-box !important;
  }

  @media(max-width:640px){
    .hero-weather-card{
      display:flex !important;
      flex-wrap:wrap !important;
      align-items:center !important;
      gap:8px 12px !important;
      width:100% !important;
      max-width:100% !important;
      margin:12px 0 0 !important;
      padding:10px 12px !important;
      border-radius:22px !important;
      overflow:visible !important;
      background:
        radial-gradient(circle at 12% 10%,rgba(109,175,222,.18),transparent 34%),
        linear-gradient(145deg,rgba(13,48,73,.66),rgba(7,30,49,.58)) !important;
      border:1px solid rgba(113,174,219,.34) !important;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.18) !important;
    }

    .hero-weather-metrics{
      display:contents !important;
    }

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

    .hero-weather-card .moon-visual,
    .hero-weather-card .hero-weather-temp,
    .hero-weather-card .hero-weather-text,
    .hero-weather-card .hero-weather-sub,
    .hero-weather-card .hero-air{
      width:auto !important;
      min-width:0 !important;
      min-height:0 !important;
      height:auto !important;
      padding:0 !important;
      border:0 !important;
      border-radius:0 !important;
      background-color:transparent !important;
      background-image:none !important;
      box-shadow:none !important;
      overflow:visible !important;
      text-overflow:clip !important;
      white-space:normal !important;
      display:flex !important;
      align-items:center !important;
      justify-content:flex-start !important;
      color:#edf8ff !important;
    }

    .hero-weather-card .moon-visual{
      flex:0 0 clamp(38px,11vw,48px) !important;
      width:clamp(38px,11vw,48px) !important;
      height:clamp(38px,11vw,48px) !important;
      background-image:url("assets/weather-icons/night.webp") !important;
      background-repeat:no-repeat !important;
      background-position:center !important;
      background-size:contain !important;
      filter:drop-shadow(0 8px 12px rgba(0,0,0,.22)) !important;
    }

    .hero-weather-card .hero-weather-temp,
    .hero-weather-card .hero-weather-text,
    .hero-weather-card .hero-weather-sub,
    .hero-weather-card .hero-air{
      background-image:none !important;
    }

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

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

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

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

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

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

    .hero-weather-card .hero-weather-temp{
      flex:0 0 auto !important;
      font-size:clamp(29px,8.4vw,38px) !important;
      line-height:1 !important;
      font-weight:950 !important;
      letter-spacing:0 !important;
    }

    .hero-weather-card .hero-weather-text{
      flex:1 1 86px !important;
      font-size:clamp(15px,4.2vw,19px) !important;
      line-height:1.2 !important;
      font-weight:900 !important;
    }

    .hero-weather-card .hero-weather-sub,
    .hero-weather-card .hero-air{
      flex:1 1 98px !important;
      font-size:clamp(12px,3.25vw,14px) !important;
      line-height:1.25 !important;
      font-weight:820 !important;
      color:rgba(232,245,255,.82) !important;
    }

    .overview-runtime{
      display:flex !important;
      flex-direction:column !important;
      justify-content:center !important;
      min-height:112px !important;
    }

    .overview-runtime .overview-runtime-value{
      font-size:clamp(30px,8.6vw,38px) !important;
      margin-top:7px !important;
      word-break:keep-all !important;
    }

    .overview-runtime .overview-sub{
      font-size:clamp(11px,3vw,13px) !important;
      margin-top:7px !important;
    }

    .bill-cycle-card{
      grid-template-columns:minmax(0,1fr) minmax(96px,34vw,138px) !important;
      column-gap:14px !important;
      row-gap:5px !important;
      align-items:center !important;
      padding:16px !important;
      min-height:142px !important;
      overflow:visible !important;
    }

    .bill-cycle-card .overview-label{
      font-size:clamp(17px,4.7vw,21px) !important;
      line-height:1.2 !important;
      align-self:end !important;
    }

    .bill-cycle-card .overview-sub,
    .bill-cycle-card .bill-cycle-detail{
      max-width:100% !important;
      overflow:visible !important;
      white-space:normal !important;
      word-break:normal !important;
    }

    .bill-cycle-card .overview-sub{
      font-size:clamp(11px,3.1vw,13px) !important;
      line-height:1.35 !important;
    }

    .bill-cycle-card .bill-cycle-detail{
      font-size:clamp(10.5px,2.9vw,12.5px) !important;
      line-height:1.35 !important;
    }

    .bill-cycle-card .overview-soc{
      grid-row:1 / span 4 !important;
      align-self:center !important;
      justify-self:end !important;
      max-width:100% !important;
      font-size:clamp(25px,7.2vw,32px) !important;
      line-height:.98 !important;
    }

    .scheduler-card{
      padding:16px !important;
      border-radius:18px !important;
      overflow:hidden !important;
    }

    .scheduler-card .scheduler-head{
      margin-bottom:6px !important;
    }

    .scheduler-card .scheduler-head span{
      font-size:clamp(20px,5.8vw,25px) !important;
      line-height:1.2 !important;
    }

    .scheduler-card .target-only-field span{
      font-size:clamp(13px,3.7vw,16px) !important;
      margin-bottom:7px !important;
    }

    .scheduler-card .target-only-field input{
      min-height:48px !important;
      font-size:clamp(24px,7vw,30px) !important;
      border-radius:12px !important;
      padding:0 12px !important;
    }
  }

  @media(max-width:360px){
    .hero-weather-card{
      gap:7px 10px !important;
      padding:9px 10px !important;
    }

    .hero-weather-card .hero-weather-text,
    .hero-weather-card .hero-weather-sub,
    .hero-weather-card .hero-air{
      flex-basis:82px !important;
    }

    .bill-cycle-card{
      grid-template-columns:minmax(0,1fr) minmax(86px,32vw,112px) !important;
      column-gap:10px !important;
      padding:14px !important;
    }
  }

  /* Commercial cockpit polish: cinematic, calm, and TV-safe. */
  :root{
    --ui-radius-lg:24px;
    --ui-radius-md:18px;
    --ui-gap:clamp(12px,1.4vw,18px);
    --ui-copy:clamp(13px,1.05vw,15px);
    --ui-small:clamp(11px,.9vw,13px);
    --ui-heading:clamp(21px,2vw,30px);
    --cockpit-line:rgba(178,218,255,.24);
    --cockpit-line-strong:rgba(178,218,255,.36);
    --cockpit-surface:linear-gradient(145deg,rgba(10,34,58,.78),rgba(4,17,31,.82));
  }

  body{
    transition:background 1.2s ease, filter 1.2s ease;
  }

  body::before{
    content:"";
    position:fixed;
    inset:-8vh -8vw;
    z-index:-2;
    pointer-events:none;
    opacity:.48;
    background:
      radial-gradient(circle at 18% 18%,rgba(66,153,225,.18),transparent 28%),
      radial-gradient(circle at 82% 22%,rgba(94,234,212,.1),transparent 26%),
      radial-gradient(circle at 50% 86%,rgba(125,211,252,.08),transparent 32%);
    animation:cockpitAmbientDrift 42s ease-in-out infinite;
  }

  body.tv-ambient .weather-bg{
    animation:tvSkyBreath 34s ease-in-out infinite;
    transform-origin:center;
    transition:opacity 1.4s ease, filter 1.4s ease, background 1.4s ease;
  }

  body.tv-night{
    filter:none;
  }

  body.tv-night .weather-bg{
    opacity:.56 !important;
    filter:brightness(.78) saturate(.86) !important;
  }

  body.tv-ambient .shell{
    animation:burnInFloat 96s ease-in-out infinite;
  }

  body.tv-ambient .app{
    animation:none !important;
  }

  .overview-card,
  .ai-card,
  .insight-card,
  .recommend-card,
  .scheduler-card,
  .timeline-card{
    transition:
      transform .45s ease,
      border-color .6s ease,
      box-shadow .6s ease,
      background .8s ease;
  }

  @media(hover:hover){
    .overview-battery:hover,
    .overview-runtime:hover,
    .ai-card:hover,
    .insight-card:hover,
    .recommend-card:hover,
    .timeline-card:hover{
      transform:translateY(-2px);
      border-color:var(--cockpit-line-strong) !important;
      box-shadow:0 30px 86px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.18) !important;
    }

    button:hover{
      transform:translateY(-1px);
      filter:brightness(1.06);
    }
  }

  button{
    transition:transform .25s ease, filter .25s ease, box-shadow .35s ease;
  }

  button:active{
    transform:translateY(0) scale(.98);
  }

  .section-title,
  .ai-title,
  .recommend-title,
  .insight-value,
  .overview-soc,
  .overview-runtime-value{
    text-wrap:balance;
    color:rgba(247,251,255,.94) !important;
  }

  .hero h1,
  .hero-copy h1{
    color:rgba(247,251,255,.96) !important;
  }

  .overview-label,
  .overview-sub,
  .bill-cycle-detail,
  .ai-text,
  .ai-action,
  .insight-sub,
  .insight-note,
  .insight-detail,
  .recommend-card p,
  .recommend-extra{
    overflow-wrap:anywhere;
  }

  .ai-card{
    min-height:156px !important;
  }

  .ai-card-head{
    align-items:flex-start;
  }

  .ai-title{
    font-size:clamp(19px,1.8vw,25px) !important;
    line-height:1.18 !important;
  }

  .ai-text{
    max-width:72ch;
    margin-top:14px;
    font-size:var(--ui-copy) !important;
    line-height:1.5 !important;
    color:rgba(241,247,255,.86) !important;
  }

  .ai-action,
  .recommend-extra{
    width:max-content;
    max-width:100%;
    border-radius:999px !important;
    padding:9px 13px !important;
    color:rgba(235,248,255,.9) !important;
    background:rgba(215,236,255,.09) !important;
    border:1px solid rgba(215,236,255,.13);
    font-size:var(--ui-small) !important;
    line-height:1.3 !important;
    font-weight:850 !important;
  }

  .recommend-extra{
    margin-top:10px;
  }

  .ai-state-safe .ai-action,
  .risk-safe .recommend-extra{
    border-color:rgba(87,225,137,.26);
    background:rgba(87,225,137,.1) !important;
  }

  .ai-state-warn .ai-action,
  .risk-warn .recommend-extra{
    border-color:rgba(255,214,90,.28);
    background:rgba(255,214,90,.1) !important;
  }

  .ai-state-danger .ai-action,
  .risk-danger .recommend-extra{
    border-color:rgba(255,118,102,.3);
    background:rgba(255,118,102,.11) !important;
  }

  .risk-badge{
    min-width:72px;
    text-align:center;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  }

  .recommend-card.risk-safe .risk-badge{
    color:#06351d;
    background:linear-gradient(145deg,#98f6aa,#47cc78);
  }

  .recommend-card.risk-warn .risk-badge{
    color:#3b2700;
    background:linear-gradient(145deg,#ffe38a,#ffc03f);
  }

  .recommend-card.risk-danger .risk-badge{
    color:#3b0600;
    background:linear-gradient(145deg,#ffb1a6,#ff7666);
  }

  .load-reduction-list{
    gap:8px !important;
  }

  .load-item{
    border-radius:16px;
    padding:10px 8px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
  }

  .load-item.is-recommended{
    background:rgba(255,118,102,.09);
    border-color:rgba(255,118,102,.24);
  }

  @media(max-width:640px){
    .mobile-flow-diagram{
      display:block !important;
      height:clamp(374px,106vw,420px) !important;
      margin:14px 0 12px !important;
      border-radius:30px !important;
      overflow:hidden !important;
      background:
        radial-gradient(circle at 50% 50%,rgba(92,170,255,.2),transparent 20%),
        radial-gradient(circle at 17% 18%,rgba(255,216,77,.16),transparent 22%),
        radial-gradient(circle at 83% 18%,rgba(182,140,255,.14),transparent 22%),
        radial-gradient(circle at 18% 84%,rgba(70,232,142,.14),transparent 24%),
        radial-gradient(circle at 84% 84%,rgba(96,165,250,.14),transparent 24%),
        linear-gradient(180deg,rgba(9,28,49,.94),rgba(3,12,24,.96)) !important;
      border:1px solid rgba(160,210,255,.25) !important;
      box-shadow:
        0 22px 58px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 0 80px rgba(60,145,255,.08) !important;
    }

    .mobile-flow-bg{
      inset:12% !important;
      border-radius:50% !important;
      opacity:.72 !important;
      filter:blur(18px) !important;
      background:
        radial-gradient(circle at 50% 50%,rgba(74,155,255,.2),transparent 34%),
        radial-gradient(circle at 50% 50%,rgba(255,255,255,.08),transparent 56%) !important;
      animation:mobileCoreBreath 9s ease-in-out infinite;
    }

    .mobile-deye-lines{
      inset:0 !important;
      z-index:1 !important;
      transform:translateZ(0);
    }

    .mobile-deye-line{
      stroke:rgba(196,224,255,.34) !important;
      stroke-width:2 !important;
      opacity:.5 !important;
      stroke-linecap:round !important;
      stroke-linejoin:round !important;
      vector-effect:non-scaling-stroke;
      filter:drop-shadow(0 0 8px rgba(110,181,255,.2));
    }

    .mobile-flow-diagram.has-solar .solar-path{
      stroke:rgba(255,216,77,.82) !important;
      opacity:.78 !important;
      filter:drop-shadow(0 0 11px rgba(255,216,77,.42));
    }

    .mobile-flow-diagram.grid-import .grid-path,
    .mobile-flow-diagram.grid-export .grid-path{
      stroke:rgba(180,148,255,.78) !important;
      opacity:.76 !important;
      filter:drop-shadow(0 0 10px rgba(180,148,255,.38));
    }

    .mobile-flow-diagram.battery-charge .battery-path,
    .mobile-flow-diagram.battery-discharge .battery-path{
      stroke:rgba(94,234,142,.78) !important;
      opacity:.78 !important;
      filter:drop-shadow(0 0 10px rgba(94,234,142,.38));
    }

    .mobile-flow-diagram.has-home .home-path{
      stroke:rgba(96,165,250,.82) !important;
      opacity:.8 !important;
      filter:drop-shadow(0 0 10px rgba(96,165,250,.4));
    }

    .mobile-flow-dot{
      r:4.6px;
      filter:drop-shadow(0 0 10px currentColor) drop-shadow(0 0 18px currentColor);
    }

    .mobile-flow-diagram.has-solar .solar-dot,
    .mobile-flow-diagram.grid-import .grid-import-dot,
    .mobile-flow-diagram.grid-export .grid-export-dot,
    .mobile-flow-diagram.battery-discharge .battery-discharge-dot,
    .mobile-flow-diagram.battery-charge .battery-charge-dot,
    .mobile-flow-diagram.has-home .home-dot{
      display:block !important;
    }

    .mobile-flow-dot animateMotion{
      animation-timing-function:linear;
    }

    .mobile-flow-node{
      width:clamp(106px,30vw,124px) !important;
      min-height:clamp(96px,27vw,112px) !important;
      height:auto !important;
      padding:12px 10px !important;
      border-radius:24px !important;
      gap:0 !important;
      background:
        radial-gradient(circle at 32% 20%,rgba(255,255,255,.14),transparent 36%),
        linear-gradient(155deg,rgba(18,48,76,.78),rgba(5,21,38,.72)) !important;
      border:1px solid rgba(191,225,255,.18) !important;
      box-shadow:
        0 18px 40px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.16) !important;
      backdrop-filter:blur(22px) saturate(145%) !important;
      -webkit-backdrop-filter:blur(22px) saturate(145%) !important;
    }

    .mobile-flow-solar{ left:clamp(16px,4.8vw,24px) !important; top:clamp(16px,4.8vw,24px) !important; }
    .mobile-flow-grid{ right:clamp(16px,4.8vw,24px) !important; top:clamp(16px,4.8vw,24px) !important; }
    .mobile-flow-battery{ left:clamp(16px,4.8vw,24px) !important; bottom:clamp(16px,4.8vw,24px) !important; }
    .mobile-flow-home{ right:clamp(16px,4.8vw,24px) !important; bottom:clamp(16px,4.8vw,24px) !important; }

    .mobile-flow-inverter{
      left:50% !important;
      top:50% !important;
      width:clamp(84px,23vw,96px) !important;
      height:clamp(84px,23vw,96px) !important;
      border-radius:28px !important;
      transform:translate(-50%,-50%) !important;
      background:
        radial-gradient(circle at 35% 22%,rgba(255,255,255,.35),transparent 32%),
        linear-gradient(145deg,#4f94ff,#086b9e 58%,#064160) !important;
      border:1px solid rgba(151,205,255,.72) !important;
      box-shadow:
        0 0 42px rgba(76,150,255,.32),
        0 22px 52px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.38) !important;
      animation:inverterBreath 5.8s ease-in-out infinite;
    }

    .mobile-flow-inverter strong{
      font-size:clamp(24px,7vw,30px) !important;
      line-height:1 !important;
    }

    .mobile-flow-inverter span{
      margin-top:5px !important;
      font-size:10px !important;
      color:rgba(238,247,255,.72) !important;
    }

    .mobile-node-icon{
      width:34px !important;
      height:34px !important;
      margin:0 0 7px !important;
      border-radius:14px !important;
      font-size:17px !important;
      background:rgba(255,255,255,.1) !important;
      border:1px solid rgba(255,255,255,.15) !important;
    }

    .mobile-node-label{
      margin:0 !important;
      font-size:clamp(10px,2.8vw,12px) !important;
      line-height:1.15 !important;
      font-weight:850 !important;
      color:rgba(232,244,255,.68) !important;
    }

    .mobile-flow-node strong{
      width:100%;
      max-width:100%;
      margin-top:5px !important;
      font-size:clamp(16px,4.5vw,20px) !important;
      line-height:1.08 !important;
      white-space:normal !important;
      overflow:visible !important;
      text-overflow:clip !important;
    }

    .mobile-flow-node small{
      order:initial !important;
      margin:4px 0 0 !important;
      font-size:clamp(10px,2.7vw,12px) !important;
      line-height:1.15 !important;
      color:rgba(232,244,255,.76) !important;
    }

    .mobile-flow-diagram.solar-low .mobile-flow-solar,
    .mobile-flow-diagram.solar-normal .mobile-flow-solar,
    .mobile-flow-diagram.solar-high .mobile-flow-solar,
    .mobile-flow-diagram.solar-peak .mobile-flow-solar{
      color:#241703 !important;
      background:
        radial-gradient(circle at 30% 16%,rgba(255,255,255,.45),transparent 32%),
        linear-gradient(145deg,rgba(255,232,112,.94),rgba(246,177,48,.72)) !important;
      border-color:rgba(255,231,138,.56) !important;
    }

    .mobile-flow-diagram.solar-low .mobile-flow-solar .mobile-node-label,
    .mobile-flow-diagram.solar-normal .mobile-flow-solar .mobile-node-label,
    .mobile-flow-diagram.solar-high .mobile-flow-solar .mobile-node-label,
    .mobile-flow-diagram.solar-peak .mobile-flow-solar .mobile-node-label{
      color:rgba(36,23,3,.62) !important;
    }

    .mobile-flow-home::after{
      opacity:.12 !important;
    }

    .ai-card,
    .insight-card,
    .recommend-card{
      padding:17px !important;
      border-radius:24px !important;
    }

    .ai-text{
      margin-top:12px !important;
      font-size:14px !important;
      line-height:1.48 !important;
    }

    .ai-action,
    .recommend-extra{
      width:100%;
      font-size:12px !important;
      white-space:normal;
    }

    .recommend-title{
      margin-top:12px !important;
      font-size:clamp(20px,5.6vw,24px) !important;
    }

    .recommend-card p{
      margin-top:6px;
      font-size:14px !important;
      line-height:1.45 !important;
    }

    .load-reduction-list{
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      margin-top:14px !important;
    }

    .load-item{
      min-height:92px;
    }
  }

  @media(max-width:360px){
    .mobile-flow-diagram{
      height:372px !important;
    }

    .mobile-flow-node{
      width:96px !important;
      min-height:92px !important;
      padding:10px 8px !important;
    }

    .mobile-flow-inverter{
      width:78px !important;
      height:78px !important;
      border-radius:24px !important;
    }

    .mobile-flow-node strong{
      font-size:15px !important;
    }
  }

  @keyframes cockpitAmbientDrift{
    0%,100%{ transform:translate3d(0,0,0) scale(1); opacity:.42; }
    50%{ transform:translate3d(1.2vw,-1vh,0) scale(1.03); opacity:.58; }
  }

  @keyframes tvSkyBreath{
    0%,100%{ transform:scale(1); filter:saturate(.94) brightness(.96); }
    50%{ transform:scale(1.018); filter:saturate(1.04) brightness(1.03); }
  }

  @keyframes burnInFloat{
    0%,100%{ transform:translate3d(0,0,0); }
    25%{ transform:translate3d(3px,-2px,0); }
    50%{ transform:translate3d(-2px,3px,0); }
    75%{ transform:translate3d(2px,2px,0); }
  }

  @keyframes mobileCoreBreath{
    0%,100%{ transform:scale(.96); opacity:.56; }
    50%{ transform:scale(1.04); opacity:.8; }
  }

  @keyframes inverterBreath{
    0%,100%{ box-shadow:0 0 34px rgba(76,150,255,.28),0 22px 52px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.38); }
    50%{ box-shadow:0 0 52px rgba(76,150,255,.42),0 24px 56px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.42); }
  }

  @media(prefers-reduced-motion:reduce){
    body::before,
    body.tv-ambient .weather-bg,
    body.tv-ambient .shell,
    .mobile-flow-bg,
    .mobile-flow-inverter{
      animation:none !important;
    }

    .overview-card,
    .ai-card,
    .insight-card,
    .recommend-card,
    .scheduler-card,
    .timeline-card,
    button{
      transition:none !important;
    }
  }

  /* AI summary header alignment: keep action pills on the same visual rail. */
  .ai-summary-card{
    --ai-pill-height:34px;
    --ai-pill-radius:999px;
    --ai-pill-padding:0 14px;
    --ai-pill-font:13px;
  }

  .ai-summary-card .ai-card-head{
    align-items:flex-start !important;
  }

  .ai-summary-card .speech-btn,
  .ai-summary-card .ai-orb{
    min-width:0 !important;
    height:var(--ai-pill-height) !important;
    min-height:var(--ai-pill-height) !important;
    padding:var(--ai-pill-padding) !important;
    border-radius:var(--ai-pill-radius) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:var(--ai-pill-font) !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    border:1px solid rgba(166,213,255,.26) !important;
    background:rgba(18,50,78,.46) !important;
    color:rgba(235,248,255,.9) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      0 10px 24px rgba(0,0,0,.16) !important;
  }

  .ai-summary-card .speech-btn{
    flex:0 0 auto;
    margin-top:0 !important;
  }

  .ai-summary-card .ai-key-panel{
    position:static !important;
    align-content:start !important;
    padding-top:0 !important;
  }

  .ai-summary-card .ai-orb{
    position:absolute !important;
    top:22px !important;
    right:24px !important;
    bottom:auto !important;
    transform:none !important;
    width:auto !important;
    z-index:2 !important;
  }

  .ai-summary-card.ai-state-safe .speech-btn,
  .ai-summary-card.ai-state-safe .ai-orb{
    border-color:rgba(92,226,139,.28) !important;
    background:rgba(71,199,119,.13) !important;
  }

  .ai-summary-card.ai-state-warn .speech-btn,
  .ai-summary-card.ai-state-warn .ai-orb{
    border-color:rgba(255,214,90,.3) !important;
    background:rgba(255,214,90,.12) !important;
  }

  .ai-summary-card.ai-state-danger .speech-btn,
  .ai-summary-card.ai-state-danger .ai-orb{
    border-color:rgba(255,118,102,.3) !important;
    background:rgba(255,118,102,.12) !important;
  }

  .ai-summary-card .key-title{
    padding-right:72px;
    min-height:var(--ai-pill-height);
    display:flex;
    align-items:center;
  }

  @media(min-width:981px){
    .ai-summary-card .ai-main{
      padding-right:8px;
    }
  }

  @media(max-width:980px){
    .ai-summary-card .ai-card-head{
      align-items:flex-start !important;
      gap:12px !important;
    }

    .ai-summary-card .speech-btn{
      height:32px !important;
      min-height:32px !important;
      padding:0 12px !important;
      font-size:12px !important;
    }
  }

  /* Weather and scheduler corrections: no square weather asset, no clipped time text. */
  .hero-weather-card .moon-visual{
    position:relative !important;
    width:88px !important;
    height:88px !important;
    aspect-ratio:auto !important;
    border-radius:0 !important;
    background:none !important;
    background-image:none !important;
    box-shadow:none !important;
    overflow:visible !important;
    filter:drop-shadow(0 14px 22px rgba(0,0,0,.28)) drop-shadow(0 0 18px rgba(134,199,255,.18)) !important;
    animation:weatherFloat 6.4s ease-in-out infinite;
  }

  .hero-weather-card .moon-visual::before,
  .hero-weather-card .moon-visual::after{
    content:"" !important;
    position:absolute !important;
    display:block !important;
    pointer-events:none;
  }

  .hero-weather-card .moon-visual::before{
    width:46px;
    height:46px;
    right:5px;
    top:4px;
    border-radius:50%;
    background:radial-gradient(circle at 36% 32%,#fff7a9 0 14%,#fff064 38%,#f2c100 100%);
    box-shadow:0 0 22px rgba(255,220,64,.34);
  }

  .hero-weather-card .moon-visual::after{
    left:2px;
    right:2px;
    bottom:8px;
    height:42px;
    border-radius:999px;
    background:
      radial-gradient(circle at 18% 60%,#eaf7ff 0 18%,transparent 19%),
      radial-gradient(circle at 34% 36%,#f5fbff 0 28%,transparent 29%),
      radial-gradient(circle at 55% 38%,#eaf7ff 0 31%,transparent 32%),
      radial-gradient(circle at 76% 58%,#d4e7f4 0 20%,transparent 21%),
      linear-gradient(180deg,#f2f9ff 0%,#c7ddec 100%);
    box-shadow:inset -8px -9px 16px rgba(84,116,140,.18), inset 8px 8px 18px rgba(255,255,255,.38);
  }

  .hero-weather-card .moon-visual.weather-visual-moon::before,
  body.weather-visual-moon .hero-weather-card .moon-visual::before,
  .hero-weather-card .moon-visual.weather-visual-partly::before,
  body.weather-visual-partly .hero-weather-card .moon-visual::before{
    clip-path:circle(50% at 50% 50%);
  }

  .hero-weather-card .moon-visual.weather-visual-moon::before,
  body.weather-visual-moon .hero-weather-card .moon-visual::before{
    background:
      radial-gradient(circle at 68% 38%,rgba(10,34,58,.96) 0 36%,transparent 37%),
      radial-gradient(circle at 42% 45%,#fff7a9 0 14%,#fff064 40%,#f2c100 100%) !important;
  }

  .hero-weather-card .moon-visual.weather-visual-sun::before,
  body.weather-visual-sun .hero-weather-card .moon-visual::before{
    left:20px;
    right:auto;
    top:8px;
    background:radial-gradient(circle,#fff8b8 0 22%,#ffd84d 23% 58%,#f59e0b 100%);
    box-shadow:0 0 32px rgba(255,216,77,.42);
  }

  .hero-weather-card .moon-visual.weather-visual-sun::after,
  body.weather-visual-sun .hero-weather-card .moon-visual::after{
    display:none !important;
  }

  .hero-weather-card .moon-visual.weather-visual-cloud::before,
  body.weather-visual-cloud .hero-weather-card .moon-visual::before,
  .hero-weather-card .moon-visual.weather-visual-rain::before,
  body.weather-visual-rain .hero-weather-card .moon-visual::before,
  .hero-weather-card .moon-visual.weather-visual-storm::before,
  body.weather-visual-storm .hero-weather-card .moon-visual::before{
    display:none !important;
  }

  .hero-weather-card .moon-visual.weather-visual-rain::after,
  body.weather-visual-rain .hero-weather-card .moon-visual::after{
    box-shadow:inset -8px -9px 16px rgba(84,116,140,.2), 0 12px 0 -8px rgba(125,211,252,.75), 18px 16px 0 -9px rgba(125,211,252,.58), 42px 14px 0 -9px rgba(125,211,252,.64);
  }

  .hero-weather-card .moon-visual.weather-visual-storm::after,
  body.weather-visual-storm .hero-weather-card .moon-visual::after{
    box-shadow:inset -8px -9px 16px rgba(84,116,140,.2), 28px 30px 0 -14px #ffd84d;
  }

  .scheduler-card .target-only-field input[type="time"]{
    display:block !important;
    height:52px !important;
    min-height:52px !important;
    line-height:52px !important;
    padding:0 14px !important;
    text-align:center !important;
    appearance:none;
    -webkit-appearance:none;
  }

  .scheduler-card .target-only-field input[type="time"]::-webkit-date-and-time-value{
    min-height:52px;
    line-height:52px;
    text-align:center;
  }

  @media(max-width:640px){
    .hero-weather-card{
      display:grid !important;
      grid-template-columns:auto auto minmax(0,1fr) !important;
      align-items:center !important;
      gap:10px 18px !important;
      padding:12px 16px !important;
      min-height:88px !important;
    }

    .hero-weather-card .moon-visual{
      width:clamp(64px,18vw,78px) !important;
      height:clamp(52px,15vw,64px) !important;
      flex:0 0 auto !important;
    }

    .hero-weather-card .moon-visual::before{
      width:clamp(30px,8.5vw,38px);
      height:clamp(30px,8.5vw,38px);
      right:2px;
      top:0;
    }

    .hero-weather-card .moon-visual::after{
      height:clamp(30px,8vw,38px);
      bottom:3px;
    }

    .hero-weather-card .hero-weather-temp,
    .hero-weather-card .hero-weather-text,
    .hero-weather-card .hero-weather-sub{
      flex:initial !important;
      background:none !important;
      background-image:none !important;
      min-width:0 !important;
      white-space:normal !important;
      overflow:visible !important;
      text-overflow:clip !important;
      justify-content:flex-start !important;
    }

    .hero-weather-card .hero-weather-temp{
      font-size:clamp(42px,12vw,58px) !important;
      grid-column:2;
      grid-row:1;
    }

    .hero-weather-card .hero-weather-text{
      font-size:clamp(25px,7vw,34px) !important;
      grid-column:3;
      grid-row:1;
      justify-self:start;
    }

    .hero-weather-card .hero-weather-sub{
      grid-column:2 / 4;
      grid-row:2;
      font-size:clamp(16px,4.6vw,22px) !important;
      color:rgba(232,245,255,.78) !important;
      justify-self:start;
    }

    .scheduler-card .target-only-field input[type="time"]{
      height:50px !important;
      min-height:50px !important;
      line-height:50px !important;
      padding:0 12px !important;
      font-size:clamp(24px,7vw,30px) !important;
    }

    .scheduler-card .target-only-field input[type="time"]::-webkit-date-and-time-value{
      min-height:50px;
      line-height:50px;
      text-align:center;
    }
  }

  /* Final asset weather pass: use Korn's PNG icon set directly. */
  .hero-weather-card .moon-visual{
    width:clamp(76px,6.6vw,96px) !important;
    height:clamp(62px,5.8vw,82px) !important;
    border-radius:0 !important;
    background-color:transparent !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:contain !important;
    box-shadow:none !important;
    overflow:visible !important;
    filter:drop-shadow(0 14px 22px rgba(0,0,0,.28)) drop-shadow(0 0 16px rgba(134,199,255,.18)) !important;
    animation:none !important;
  }

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

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

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

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

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

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

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

  .solar-today-card #todaySolar{
    font-size:clamp(34px,3vw,44px) !important;
    line-height:.95 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    max-width:100% !important;
  }

  .solar-today-card #todaySolar .metric-unit{
    font-size:.68em !important;
    margin-left:.08em !important;
  }

  @media(max-width:640px){
    .hero-weather-card .moon-visual{
      width:clamp(68px,19vw,82px) !important;
      height:clamp(54px,15vw,68px) !important;
    }

    .solar-today-card #todaySolar{
      font-size:clamp(28px,8.5vw,34px) !important;
    }
  }

  /* Mobile typography rebalance: calmer Apple-style scale without changing layout. */
  @media(max-width:640px){
    :root{
      --m-hero-title:clamp(44px,12.8vw,58px);
      --m-hero-sub:clamp(16px,4.35vw,19px);
      --m-weather-temp:clamp(40px,11.5vw,54px);
      --m-weather-condition:clamp(22px,6vw,30px);
      --m-weather-sub:clamp(15px,4vw,19px);
      --m-card-label:clamp(17px,4.8vw,22px);
      --m-card-value:clamp(42px,11.4vw,56px);
      --m-card-sub:clamp(14px,3.9vw,18px);
      --m-wide-value:clamp(36px,10vw,48px);
      --m-bill-value:clamp(34px,9vw,46px);
      --m-flow-label:clamp(12px,3.2vw,14px);
      --m-flow-value:clamp(19px,5.35vw,25px);
      --m-flow-pill:clamp(9px,2.45vw,11px);
      --m-inv-title:clamp(22px,6vw,28px);
    }

    .app{
      padding-left:clamp(16px,4.2vw,20px) !important;
      padding-right:clamp(16px,4.2vw,20px) !important;
    }

    .premium-hero{
      padding-top:4px !important;
      margin-bottom:16px !important;
    }

    .hero-copy{
      max-width:min(360px,92vw);
    }

    .hero-copy h1{
      max-width:min(360px,92vw) !important;
      font-size:var(--m-hero-title) !important;
      line-height:.93 !important;
      font-weight:900 !important;
      letter-spacing:0 !important;
      white-space:normal !important;
      overflow-wrap:normal;
      text-wrap:balance;
    }

    .hero-copy p{
      max-width:min(338px,88vw) !important;
      margin-top:12px !important;
      font-size:var(--m-hero-sub) !important;
      line-height:1.34 !important;
      font-weight:560 !important;
      color:rgba(222,236,249,.72) !important;
      text-wrap:balance;
    }

    .hero-weather-card{
      min-height:clamp(116px,31vw,136px) !important;
      margin-top:18px !important;
      padding:16px clamp(14px,4vw,18px) !important;
      grid-template-columns:minmax(78px,22vw) auto minmax(0,1fr) 20px !important;
      gap:6px clamp(10px,3vw,14px) !important;
      border-radius:28px !important;
    }

    .hero-weather-card::before{
      width:clamp(76px,22vw,98px) !important;
      left:clamp(11px,3.6vw,16px) !important;
    }

    .hero-weather-card .moon-visual{
      width:clamp(66px,19vw,84px) !important;
      height:clamp(58px,16.5vw,76px) !important;
    }

    .hero-weather-card .hero-weather-temp{
      font-size:var(--m-weather-temp) !important;
      line-height:.94 !important;
      font-weight:900 !important;
    }

    .hero-weather-card .hero-weather-text{
      font-size:var(--m-weather-condition) !important;
      line-height:1.02 !important;
      font-weight:820 !important;
    }

    .hero-weather-card .hero-weather-sub{
      margin-top:5px !important;
      padding-top:8px !important;
      font-size:var(--m-weather-sub) !important;
      line-height:1.16 !important;
      font-weight:720 !important;
    }

    .hero-weather-chevron{
      width:20px !important;
      height:46px !important;
      font-size:34px !important;
    }

    .overview-card{
      padding:16px 15px 18px !important;
      border-radius:31px !important;
      margin-bottom:18px !important;
    }

    .overview-main{
      gap:12px !important;
      margin-bottom:18px !important;
    }

    .overview-battery,
    .overview-runtime{
      min-height:112px !important;
      padding:15px 14px !important;
      border-radius:22px !important;
    }

    .overview-label{
      font-size:var(--m-card-label) !important;
      line-height:1.18 !important;
      font-weight:780 !important;
      margin-bottom:7px !important;
    }

    .overview-soc,
    .overview-runtime-value{
      margin-top:5px !important;
      font-size:var(--m-card-value) !important;
      line-height:.96 !important;
      font-weight:900 !important;
    }

    .overview-sub{
      margin-top:9px !important;
      font-size:var(--m-card-sub) !important;
      line-height:1.22 !important;
      font-weight:620 !important;
    }

    .solar-today-card,
    .bill-cycle-card{
      padding:16px 18px !important;
      border-radius:24px !important;
      row-gap:6px !important;
    }

    .solar-today-card .overview-label,
    .bill-cycle-card .overview-label{
      font-size:clamp(18px,5vw,23px) !important;
      line-height:1.16 !important;
    }

    .solar-today-card #todaySolar{
      font-size:var(--m-wide-value) !important;
      line-height:.94 !important;
      max-width:132px !important;
    }

    .solar-today-card #todaySolar .metric-unit{
      font-size:.72em !important;
      line-height:.92 !important;
    }

    .bill-cycle-card .overview-soc{
      font-size:var(--m-bill-value) !important;
      line-height:.98 !important;
      max-width:150px !important;
    }

    .bill-cycle-card .metric-number{
      font-size:1em !important;
      line-height:.98 !important;
    }

    .bill-cycle-card .metric-unit{
      font-size:.46em !important;
      line-height:1 !important;
    }

    .bill-cycle-card .overview-sub,
    .bill-cycle-card .bill-cycle-detail{
      font-size:clamp(13px,3.55vw,16px) !important;
      line-height:1.28 !important;
      font-weight:620 !important;
    }

    .mobile-flow-diagram{
      height:clamp(472px,121vw,512px) !important;
      margin-top:18px !important;
      border-radius:34px !important;
    }

    .mobile-flow-title{
      top:17px !important;
      font-size:clamp(14px,3.75vw,17px) !important;
      font-weight:800 !important;
    }

    .mobile-flow-node{
      width:clamp(124px,35vw,144px) !important;
      min-height:clamp(104px,28vw,120px) !important;
      grid-template-columns:38px minmax(0,1fr) !important;
      column-gap:9px !important;
      row-gap:3px !important;
      padding:12px 11px 11px !important;
      border-radius:27px !important;
    }

    .mobile-flow-solar,
    .mobile-flow-grid{
      top:clamp(58px,14vw,68px) !important;
    }

    .mobile-flow-battery,
    .mobile-flow-home{
      bottom:clamp(58px,14vw,68px) !important;
    }

    .mobile-node-icon{
      width:38px !important;
      height:38px !important;
      font-size:17px !important;
    }

    .mobile-node-label{
      font-size:var(--m-flow-label) !important;
      line-height:1.1 !important;
      font-weight:700 !important;
    }

    .mobile-flow-node strong{
      margin-top:2px !important;
      font-size:var(--m-flow-value) !important;
      line-height:1 !important;
      font-weight:850 !important;
    }

    .mobile-node-status{
      margin-top:5px !important;
      padding:3px 8px !important;
      font-size:var(--m-flow-pill) !important;
      line-height:1.05 !important;
      font-weight:680 !important;
    }

    .mobile-flow-inverter{
      width:clamp(84px,23vw,100px) !important;
      height:clamp(84px,23vw,100px) !important;
      border-radius:30px !important;
      gap:1px !important;
    }

    .mobile-inverter-symbol{
      width:29px !important;
      height:29px !important;
      font-size:23px !important;
    }

    .mobile-flow-inverter strong{
      font-size:var(--m-inv-title) !important;
      line-height:.96 !important;
      font-weight:850 !important;
    }

    .mobile-flow-inverter span:not(.mobile-inverter-symbol){
      font-size:clamp(9px,2.45vw,11px) !important;
      font-weight:620 !important;
    }

    .mobile-flow-status-pill{
      bottom:14px !important;
      padding:8px 14px !important;
      font-size:clamp(11px,3vw,13px) !important;
      font-weight:760 !important;
    }

    .mobile-flow-status-pill span{
      width:20px !important;
      height:20px !important;
    }
  }

  @media(max-width:370px){
    .hero-copy h1{
      font-size:clamp(41px,12vw,50px) !important;
    }

    .hero-copy p{
      max-width:320px !important;
      font-size:15px !important;
    }

    .hero-weather-card{
      grid-template-columns:72px auto minmax(0,1fr) 18px !important;
      padding:14px 12px !important;
    }

    .overview-soc,
    .overview-runtime-value{
      font-size:38px !important;
    }

    .mobile-flow-diagram{
      height:486px !important;
    }

    .mobile-flow-node{
      width:118px !important;
      min-height:102px !important;
    }

    .mobile-flow-node strong{
      font-size:18px !important;
    }
  }

  /* Mobile flow value polish: consistent W/kW units and no overflow. */
  @media(max-width:640px){
    .mobile-flow-node{
      grid-template-columns:36px minmax(0,1fr) !important;
      column-gap:8px !important;
    }

    .mobile-node-icon{
      width:36px !important;
      height:36px !important;
      font-size:16px !important;
    }

    .mobile-flow-node strong{
      display:flex !important;
      align-items:baseline !important;
      gap:.16em !important;
      min-width:0 !important;
      max-width:100% !important;
      overflow:visible !important;
      white-space:nowrap !important;
      font-size:clamp(17px,4.8vw,23px) !important;
      line-height:1 !important;
      letter-spacing:0 !important;
      text-wrap:nowrap;
    }

    .mobile-power-number{
      display:inline-block;
      min-width:0;
      font-size:1em;
      line-height:1;
    }

    .mobile-power-unit{
      display:inline-block;
      flex:0 0 auto;
      font-size:.62em;
      line-height:1;
      font-weight:800;
      color:rgba(255,255,255,.9);
      letter-spacing:0;
    }

    .mobile-flow-home .mobile-power-number,
    .mobile-flow-solar .mobile-power-number,
    .mobile-flow-battery .mobile-power-number{
      font-size:.95em;
    }

    .mobile-node-label{
      font-size:clamp(11px,3.05vw,13px) !important;
      font-weight:680 !important;
    }

    .mobile-node-status{
      font-size:clamp(9px,2.35vw,10.5px) !important;
      padding:3px 7px !important;
      font-weight:650 !important;
    }
  }

  @media(max-width:370px){
    .mobile-flow-node{
      grid-template-columns:32px minmax(0,1fr) !important;
      column-gap:7px !important;
      padding:10px 9px !important;
    }

    .mobile-node-icon{
      width:32px !important;
      height:32px !important;
      font-size:15px !important;
    }

    .mobile-flow-node strong{
      font-size:clamp(15px,4.35vw,18px) !important;
      gap:.12em !important;
    }

    .mobile-power-unit{
      font-size:.58em;
    }
  }

  /* Mobile bill card: keep baht amount on one line, unit below. */
  @media(max-width:640px){
    .bill-cycle-card{
      grid-template-columns:minmax(0,1fr) clamp(116px,32vw,144px) !important;
      column-gap:clamp(10px,3vw,16px) !important;
    }

    .bill-cycle-card .overview-soc{
      max-width:144px !important;
      width:100% !important;
      font-size:clamp(30px,7.8vw,38px) !important;
      line-height:.95 !important;
      align-items:flex-end !important;
      justify-content:center !important;
      gap:6px !important;
      white-space:normal !important;
      overflow:visible !important;
    }

    .bill-cycle-card .metric-number{
      display:block !important;
      width:max-content !important;
      max-width:100% !important;
      white-space:nowrap !important;
      overflow:visible !important;
      font-size:1em !important;
      line-height:.9 !important;
      letter-spacing:0 !important;
    }

    .bill-cycle-card .metric-unit{
      display:block !important;
      width:100% !important;
      margin:0 !important;
      text-align:right !important;
      font-size:clamp(17px,4.6vw,22px) !important;
      line-height:1 !important;
      font-weight:850 !important;
    }
  }

  @media(max-width:370px){
    .bill-cycle-card{
      grid-template-columns:minmax(0,1fr) 108px !important;
    }

    .bill-cycle-card .overview-soc{
      max-width:108px !important;
      font-size:clamp(27px,7.4vw,32px) !important;
    }

    .bill-cycle-card .metric-unit{
      font-size:16px !important;
    }
  }

  /* Desktop hero title stays on one line; mobile keeps the stacked title. */
  @media(min-width:641px){
    .hero-copy h1{
      display:flex !important;
      align-items:baseline;
      gap:.22em;
      white-space:nowrap !important;
    }

    .hero-copy h1 span{
      display:inline-block !important;
    }

    .hero-title-energy{
      margin-top:0 !important;
      padding-bottom:.04em !important;
    }
  }

  /* Native mobile finish: calmer iPhone rhythm, safe areas, softer weather/flow motion. */
  @media(max-width:640px){
    :root{
      --m-safe-x:clamp(16px,4.5vw,21px);
      --m-safe-top-extra:clamp(16px,4.4vw,22px);
      --m-safe-bottom-extra:clamp(22px,6vw,34px);
      --m-title:clamp(40px,11.2vw,52px);
      --m-subtitle:clamp(15px,4.05vw,18px);
      --m-weather-number:clamp(39px,10.9vw,50px);
      --m-weather-word:clamp(20px,5.3vw,26px);
      --m-weather-meta:clamp(14px,3.75vw,17px);
      --m-stat-label:clamp(17px,4.55vw,20px);
      --m-stat-value:clamp(38px,10.2vw,49px);
      --m-stat-sub:clamp(13px,3.45vw,16px);
      --m-flow-title:clamp(13px,3.45vw,15px);
      --m-flow-label-final:clamp(11px,2.95vw,13px);
      --m-flow-value-final:clamp(16px,4.45vw,21px);
      --m-flow-pill-final:clamp(8.5px,2.25vw,10px);
    }

    html{
      min-height:100%;
      background:#061522;
    }

    body{
      min-height:100dvh;
      overflow-x:hidden;
    }

    .app{
      padding-top:calc(env(safe-area-inset-top, 0px) + var(--m-safe-top-extra)) !important;
      padding-bottom:calc(env(safe-area-inset-bottom, 0px) + var(--m-safe-bottom-extra)) !important;
      padding-left:max(var(--m-safe-x), env(safe-area-inset-left, 0px)) !important;
      padding-right:max(var(--m-safe-x), env(safe-area-inset-right, 0px)) !important;
    }

    .dynamic-island{
      top:calc(env(safe-area-inset-top, 0px) + 8px) !important;
    }

    .topbar{
      margin-bottom:clamp(18px,5vw,26px) !important;
    }

    .premium-hero{
      margin-bottom:clamp(14px,4vw,18px) !important;
      padding-top:0 !important;
    }

    .hero-copy{
      max-width:min(350px,90vw) !important;
    }

    .hero-copy h1{
      max-width:min(350px,90vw) !important;
      font-size:var(--m-title) !important;
      line-height:1.01 !important;
      padding-bottom:6px !important;
      text-shadow:0 9px 25px rgba(0,0,0,.2) !important;
      animation-duration:14s !important;
    }

    .hero-title-energy{
      margin-top:-.08em !important;
      padding-bottom:.16em !important;
      filter:drop-shadow(0 6px 16px rgba(37,115,255,.2)) !important;
    }

    .hero-copy p{
      max-width:min(312px,82vw) !important;
      margin-top:clamp(7px,2.3vw,10px) !important;
      font-size:var(--m-subtitle) !important;
      line-height:1.38 !important;
      letter-spacing:0 !important;
      color:rgba(226,238,250,.7) !important;
    }

    .hero-weather-card{
      min-height:clamp(108px,29vw,126px) !important;
      margin-top:clamp(16px,4.4vw,20px) !important;
      padding:clamp(13px,3.6vw,16px) clamp(13px,3.8vw,18px) !important;
      grid-template-columns:minmax(70px,20.5vw) auto minmax(0,1fr) 18px !important;
      gap:5px clamp(9px,2.8vw,13px) !important;
      border-radius:27px !important;
      border-color:rgba(118,184,255,.22) !important;
      box-shadow:
        0 20px 54px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 0 72px rgba(62,145,255,.06) !important;
    }

    .hero-weather-card::before{
      width:clamp(70px,20.5vw,90px) !important;
      left:clamp(10px,3.2vw,15px) !important;
      border-color:rgba(98,166,255,.34) !important;
      background:
        radial-gradient(circle at 45% 42%,rgba(120,190,255,.19),rgba(56,126,222,.08) 56%,transparent 72%) !important;
      box-shadow:
        inset 0 0 28px rgba(95,168,255,.17),
        0 0 26px rgba(76,150,255,.12) !important;
      animation:none !important;
    }

    .hero-weather-card .moon-visual{
      width:clamp(60px,17vw,76px) !important;
      height:clamp(54px,15vw,68px) !important;
      filter:drop-shadow(0 10px 16px rgba(0,0,0,.28)) drop-shadow(0 0 13px rgba(120,190,255,.18)) !important;
      animation-duration:8.5s !important;
    }

    .hero-weather-card .hero-weather-temp{
      font-size:var(--m-weather-number) !important;
      line-height:.94 !important;
      font-weight:890 !important;
    }

    .hero-weather-card .hero-weather-text{
      font-size:var(--m-weather-word) !important;
      line-height:1.04 !important;
      font-weight:760 !important;
    }

    .hero-weather-card .hero-weather-sub{
      margin-top:4px !important;
      padding-top:7px !important;
      font-size:var(--m-weather-meta) !important;
      line-height:1.15 !important;
      font-weight:680 !important;
      color:rgba(166,205,255,.78) !important;
    }

    .hero-weather-chevron{
      width:18px !important;
      height:42px !important;
      font-size:30px !important;
      opacity:.8;
    }

    .overview-card{
      padding:clamp(14px,3.8vw,17px) clamp(13px,3.8vw,16px) clamp(16px,4.4vw,20px) !important;
      border-radius:30px !important;
      margin-bottom:clamp(16px,4.4vw,20px) !important;
    }

    .overview-main{
      gap:clamp(10px,3.2vw,13px) !important;
      margin-bottom:clamp(15px,4vw,18px) !important;
    }

    .overview-battery,
    .overview-runtime{
      min-height:clamp(102px,27.5vw,116px) !important;
      padding:clamp(13px,3.6vw,15px) clamp(12px,3.4vw,14px) !important;
      border-radius:22px !important;
    }

    .overview-label{
      margin-bottom:6px !important;
      font-size:var(--m-stat-label) !important;
      line-height:1.16 !important;
      font-weight:720 !important;
    }

    .overview-soc,
    .overview-runtime-value{
      margin-top:4px !important;
      font-size:var(--m-stat-value) !important;
      line-height:.98 !important;
      font-weight:860 !important;
    }

    .overview-sub{
      margin-top:8px !important;
      font-size:var(--m-stat-sub) !important;
      line-height:1.25 !important;
      font-weight:580 !important;
    }

    .solar-today-card,
    .bill-cycle-card{
      padding:clamp(14px,3.8vw,17px) clamp(16px,4.4vw,19px) !important;
      border-radius:23px !important;
    }

    .solar-today-card #todaySolar{
      font-size:clamp(32px,8.6vw,42px) !important;
      max-width:128px !important;
    }

    .bill-cycle-card{
      grid-template-columns:minmax(0,1fr) clamp(106px,29vw,132px) !important;
      column-gap:clamp(10px,3.4vw,16px) !important;
    }

    .bill-cycle-card .overview-soc{
      max-width:132px !important;
      font-size:clamp(28px,7.35vw,36px) !important;
      line-height:.96 !important;
    }

    .bill-cycle-card .metric-unit{
      margin-top:2px !important;
      font-size:clamp(15px,4vw,19px) !important;
    }

    .bill-cycle-card .overview-sub,
    .bill-cycle-card .bill-cycle-detail{
      font-size:clamp(12px,3.3vw,15px) !important;
      line-height:1.3 !important;
    }

    .mobile-flow-diagram{
      height:clamp(414px,105vw,444px) !important;
      max-width:calc(100vw - max(32px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px) + 24px)) !important;
      margin:clamp(14px,3.8vw,18px) auto clamp(14px,4vw,18px) !important;
      border-radius:31px !important;
      box-shadow:
        0 24px 68px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 0 84px rgba(61,141,255,.055) !important;
    }

    .mobile-flow-diagram::before{
      inset:2px !important;
      border-radius:29px !important;
      border-color:rgba(123,190,255,.08) !important;
    }

    .mobile-flow-diagram::after,
    .mobile-flow-atmosphere{
      animation-duration:24s !important;
      opacity:.58 !important;
    }

    .mobile-radial-stage{
      inset:-2px 2px 0 !important;
    }

    .mobile-flow-title{
      top:clamp(13px,3.4vw,16px) !important;
      font-size:var(--m-flow-title) !important;
      line-height:1.15 !important;
      font-weight:720 !important;
      color:rgba(219,236,255,.72) !important;
    }

    .mobile-flow-title::before,
    .mobile-flow-title::after{
      max-width:58px !important;
      opacity:.72;
    }

    .mobile-deye-lines{
      inset:22px 5px 28px !important;
      width:calc(100% - 10px) !important;
    }

    .mobile-deye-line{
      stroke-width:2.05 !important;
      opacity:.58 !important;
      stroke-dasharray:none !important;
      animation-duration:8.5s !important;
      filter:drop-shadow(0 0 5px currentColor) !important;
    }

    .mobile-flow-dot{
      r:4.2px;
      filter:drop-shadow(0 0 7px currentColor) drop-shadow(0 0 14px currentColor) !important;
    }

    .mobile-flow-node{
      width:clamp(122px,34.5vw,141px) !important;
      min-height:clamp(100px,27vw,114px) !important;
      padding:11px 10px !important;
      border-radius:25px !important;
      grid-template-columns:34px minmax(0,1fr) !important;
      column-gap:8px !important;
      row-gap:2px !important;
    }

    .mobile-flow-solar,
    .mobile-flow-grid{
      top:clamp(48px,12.2vw,58px) !important;
    }

    .mobile-flow-battery,
    .mobile-flow-home{
      bottom:clamp(34px,8.5vw,42px) !important;
    }

    .mobile-node-icon{
      width:34px !important;
      height:34px !important;
      font-size:15px !important;
      opacity:.92;
    }

    .mobile-node-label{
      font-size:var(--m-flow-label-final) !important;
      line-height:1.08 !important;
      font-weight:640 !important;
    }

    .mobile-flow-node strong{
      margin-top:2px !important;
      font-size:var(--m-flow-value-final) !important;
      line-height:1 !important;
      font-weight:820 !important;
      gap:.14em !important;
    }

    .mobile-power-unit{
      font-size:.58em !important;
      font-weight:760 !important;
    }

    .mobile-node-status{
      margin-top:4px !important;
      padding:3px 7px !important;
      font-size:var(--m-flow-pill-final) !important;
      line-height:1.05 !important;
      font-weight:620 !important;
    }

    .mobile-flow-inverter{
      width:clamp(82px,22vw,96px) !important;
      height:clamp(82px,22vw,96px) !important;
      border-radius:29px !important;
      gap:1px !important;
      animation-duration:9s !important;
    }

    .mobile-flow-inverter::before{
      inset:-8px !important;
      border-radius:34px !important;
      opacity:.42 !important;
      box-shadow:0 0 22px rgba(78,162,255,.16),inset 0 0 16px rgba(78,162,255,.07) !important;
    }

    .mobile-flow-inverter::after{
      inset:-24px !important;
      opacity:.3 !important;
      filter:blur(13px) !important;
    }

    .mobile-inverter-symbol{
      width:27px !important;
      height:27px !important;
      font-size:20px !important;
      opacity:.78;
    }

    .mobile-flow-inverter strong{
      font-size:clamp(21px,5.8vw,27px) !important;
      line-height:.96 !important;
      font-weight:820 !important;
    }

    .mobile-flow-inverter span:not(.mobile-inverter-symbol){
      font-size:clamp(8.5px,2.3vw,10.5px) !important;
      line-height:1.1 !important;
      font-weight:560 !important;
    }
  }

  @media(max-width:370px){
    :root{
      --m-title:clamp(38px,11vw,46px);
      --m-stat-value:36px;
      --m-flow-value-final:clamp(15px,4.2vw,18px);
    }

    .app{
      padding-left:max(14px, env(safe-area-inset-left, 0px)) !important;
      padding-right:max(14px, env(safe-area-inset-right, 0px)) !important;
    }

    .hero-copy p{
      max-width:286px !important;
    }

    .hero-weather-card{
      grid-template-columns:66px auto minmax(0,1fr) 16px !important;
      min-height:104px !important;
    }

    .mobile-flow-diagram{
      height:412px !important;
      max-width:calc(100vw - 26px) !important;
    }

    .mobile-flow-node{
      width:116px !important;
      min-height:98px !important;
      grid-template-columns:30px minmax(0,1fr) !important;
      padding:10px 8px !important;
    }

    .mobile-node-icon{
      width:30px !important;
      height:30px !important;
      font-size:14px !important;
    }

    .mobile-flow-inverter{
      width:78px !important;
      height:78px !important;
      border-radius:26px !important;
    }
  }

  @media(max-width:640px) and (display-mode:standalone){
    .app{
      padding-top:calc(env(safe-area-inset-top, 0px) + clamp(18px,5vw,26px)) !important;
      padding-bottom:calc(env(safe-area-inset-bottom, 0px) + clamp(26px,7vw,40px)) !important;
    }
  }

  /* iPhone flow performance pass: cleaner paths and fewer always-on effects. */
  @media(max-width:640px){
    .weather-bg::before,
    .weather-bg::after,
    .premium-hero::before,
    .shell::before,
    .mobile-flow-diagram::after,
    .mobile-flow-atmosphere,
    .hero-copy h1{
      animation:none !important;
    }

    .mobile-flow-diagram::after{
      opacity:.28 !important;
      filter:blur(10px) !important;
    }

    .mobile-flow-atmosphere{
      opacity:.52 !important;
      background:
        radial-gradient(ellipse at 50% 50%,rgba(88,172,255,.13),transparent 30%),
        radial-gradient(ellipse at 50% 110%,rgba(0,0,0,.38),transparent 54%),
        linear-gradient(90deg,rgba(0,0,0,.16),transparent 32% 68%,rgba(0,0,0,.16)) !important;
    }

    .mobile-flow-node{
      backdrop-filter:blur(14px) saturate(128%) !important;
      -webkit-backdrop-filter:blur(14px) saturate(128%) !important;
      transform:none !important;
    }

    .mobile-flow-node::after{
      inset:-10px !important;
      opacity:.26 !important;
      filter:blur(10px) !important;
    }

    .mobile-deye-lines{
      inset:28px 6px 32px !important;
      filter:none !important;
    }

    .mobile-deye-line{
      stroke-width:2.2 !important;
      opacity:.5 !important;
      filter:none !important;
    }

    .mobile-flow-diagram.has-solar .solar-path,
    .mobile-flow-diagram.grid-import .grid-path,
    .mobile-flow-diagram.grid-export .grid-path,
    .mobile-flow-diagram.battery-charge .battery-path,
    .mobile-flow-diagram.battery-discharge .battery-path,
    .mobile-flow-diagram.has-home .home-path{
      opacity:.72 !important;
      filter:drop-shadow(0 0 4px currentColor) !important;
    }

    .mobile-flow-dot{
      display:none;
      r:4px;
      filter:drop-shadow(0 0 6px currentColor) !important;
    }

    .mobile-flow-diagram.has-solar .solar-dot,
    .mobile-flow-diagram.grid-import .grid-import-dot,
    .mobile-flow-diagram.grid-export .grid-export-dot,
    .mobile-flow-diagram.battery-discharge .battery-discharge-dot,
    .mobile-flow-diagram.battery-charge .battery-charge-dot,
    .mobile-flow-diagram.has-home .home-dot{
      display:block;
    }

    .mobile-flow-inverter{
      animation:none !important;
      box-shadow:
        0 0 34px rgba(78,162,255,.36),
        0 0 68px rgba(78,162,255,.14),
        0 20px 48px rgba(0,0,0,.36),
        inset 0 1px 0 rgba(255,255,255,.32) !important;
    }

    .mobile-flow-inverter::before{
      animation:none !important;
      inset:-7px !important;
      opacity:.32 !important;
      box-shadow:0 0 18px rgba(78,162,255,.14),inset 0 0 14px rgba(78,162,255,.06) !important;
    }

    .mobile-flow-inverter::after{
      animation:none !important;
      inset:-18px !important;
      opacity:.2 !important;
      filter:blur(9px) !important;
    }

    .hero-weather-card::before,
    .hero-weather-card .moon-visual{
      animation:none !important;
    }
  }

  /* Premium stats system: Battery / Solar Today / Grid Cost composition. */
  :root{
    --battery-fill:0%;
    --battery-reserve:20%;
    --runtime-fill:0%;
  }

  .overview-main-4{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:clamp(16px,2vw,22px) !important;
    align-items:stretch;
  }

  .overview-main-4 > .overview-battery,
  .overview-main-4 > .overview-runtime{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border-radius:clamp(26px,2.6vw,34px) !important;
    border:1px solid rgba(165,220,255,.17) !important;
    background:
      radial-gradient(circle at 18% 18%,rgba(255,255,255,.1),transparent 28%),
      linear-gradient(145deg,rgba(13,44,70,.5),rgba(4,16,31,.3)) !important;
    box-shadow:
      0 24px 70px rgba(0,0,0,.3),
      inset 0 1px 0 rgba(255,255,255,.14),
      inset 0 0 64px rgba(76,150,255,.04) !important;
    transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
  }

  .overview-main-4 > .overview-battery:hover,
  .overview-main-4 > .overview-runtime:hover{
    transform:translateY(-2px);
    border-color:rgba(170,220,255,.25) !important;
    box-shadow:
      0 30px 82px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 0 72px rgba(76,150,255,.055) !important;
  }

  .overview-main-4 > .overview-battery::before,
  .overview-main-4 > .overview-runtime::before{
    content:"";
    position:absolute;
    inset:-35% -24%;
    z-index:-2;
    pointer-events:none;
    background:linear-gradient(105deg,transparent 22%,rgba(255,255,255,.08) 47%,transparent 68%);
    opacity:.38;
    transform:translateX(-22%);
    animation:statsLightSweep 14s ease-in-out infinite;
  }

  .overview-main-4 > .overview-battery::after,
  .overview-main-4 > .overview-runtime::after{
    content:"";
    position:absolute;
    z-index:-1;
    pointer-events:none;
    border-radius:inherit;
  }

  .battery-current-card,
  .battery-runtime-card{
    min-height:clamp(168px,14vw,210px) !important;
    padding:clamp(24px,2.4vw,32px) !important;
  }

  .battery-current-card{
    border-color:rgba(114,255,184,.23) !important;
    background:
      radial-gradient(circle at 18% 18%,rgba(101,255,190,.16),transparent 34%),
      radial-gradient(circle at 90% 90%,rgba(72,255,178,.08),transparent 32%),
      linear-gradient(145deg,rgba(10,52,48,.58),rgba(3,18,30,.42)) !important;
  }

  .battery-runtime-card{
    border-color:rgba(100,178,255,.26) !important;
    background:
      radial-gradient(circle at 18% 18%,rgba(102,180,255,.18),transparent 34%),
      radial-gradient(circle at 92% 90%,rgba(78,136,255,.1),transparent 32%),
      linear-gradient(145deg,rgba(8,35,72,.6),rgba(4,15,36,.42)) !important;
  }

  .battery-current-card::after,
  .battery-runtime-card::after{
    left:clamp(24px,2.4vw,32px);
    right:clamp(24px,2.4vw,32px);
    bottom:clamp(22px,2vw,28px);
    height:12px;
    border-radius:999px;
    background:
      linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.05)),
      rgba(255,255,255,.05);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  }

  .battery-current-card .overview-sub::after,
  .battery-runtime-card .overview-sub::after{
    content:"";
    position:absolute;
    left:clamp(24px,2.4vw,32px);
    bottom:clamp(22px,2vw,28px);
    z-index:3;
    width:var(--battery-fill);
    max-width:calc(100% - clamp(48px,4.8vw,64px));
    height:12px;
    border-radius:999px;
    background:linear-gradient(90deg,#65f0ad,#8affd0);
    box-shadow:0 0 18px rgba(101,240,173,.42);
    transform-origin:left center;
    animation:statsBarGlow 3.8s ease-in-out infinite;
  }

  .battery-runtime-card .overview-sub::after{
    width:var(--runtime-fill);
    background:linear-gradient(90deg,#5fa8ff,#78d5ff);
    box-shadow:0 0 18px rgba(95,168,255,.42);
  }

  .battery-current-card .overview-sub::before{
    content:"";
    position:absolute;
    left:calc(clamp(24px,2.4vw,32px) + var(--battery-reserve));
    bottom:clamp(19px,1.8vw,25px);
    z-index:4;
    width:1px;
    height:18px;
    background:rgba(255,255,255,.24);
    opacity:.55;
  }

  .overview-main-4 .overview-icon{
    display:grid !important;
    place-items:center;
    width:clamp(42px,4vw,56px);
    height:clamp(42px,4vw,56px);
    margin:0 0 clamp(12px,1.2vw,16px) !important;
    border-radius:50%;
    font-size:clamp(20px,2vw,27px);
    line-height:1;
    color:rgba(255,255,255,.92);
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.13);
    box-shadow:inset 0 0 22px rgba(255,255,255,.07),0 0 28px rgba(90,170,255,.08);
  }

  .battery-current-card .overview-icon{
    color:#7cffbf;
    box-shadow:inset 0 0 22px rgba(255,255,255,.07),0 0 30px rgba(101,240,173,.18);
  }

  .battery-runtime-card .overview-icon{
    color:#70b8ff;
    box-shadow:inset 0 0 22px rgba(255,255,255,.07),0 0 30px rgba(95,168,255,.18);
  }

  .overview-main-4 .overview-label{
    margin:0 !important;
    font-size:clamp(17px,1.55vw,24px) !important;
    line-height:1.16 !important;
    font-weight:780 !important;
    color:rgba(232,244,255,.82) !important;
  }

  .battery-current-card .overview-soc,
  .battery-runtime-card .overview-runtime-value{
    margin:clamp(8px,1vw,12px) 0 0 !important;
    font-size:clamp(44px,5.3vw,76px) !important;
    line-height:.94 !important;
    font-weight:900 !important;
    letter-spacing:0 !important;
    text-shadow:0 18px 38px rgba(0,0,0,.24);
  }

  .battery-current-card .overview-soc{
    color:#7dffc0 !important;
  }

  .battery-runtime-card .overview-runtime-value{
    color:#69adff !important;
  }

  .battery-current-card .overview-sub,
  .battery-runtime-card .overview-sub{
    position:static !important;
    margin-top:clamp(10px,1.1vw,14px) !important;
    padding-bottom:clamp(28px,2.5vw,34px);
    font-size:clamp(15px,1.35vw,20px) !important;
    line-height:1.25 !important;
    font-weight:650 !important;
    color:rgba(228,241,255,.72) !important;
  }

  .solar-today-card,
  .bill-cycle-card{
    grid-column:1 / -1;
    min-height:clamp(154px,13vw,196px) !important;
    padding:clamp(24px,2.6vw,34px) clamp(24px,3vw,38px) !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:clamp(18px,2.3vw,30px);
    row-gap:6px;
  }

  .solar-today-card{
    border-color:rgba(255,214,103,.24) !important;
    background:
      radial-gradient(circle at 84% 25%,rgba(255,220,112,.28),transparent 15%),
      radial-gradient(circle at 10% 50%,rgba(255,198,72,.12),transparent 22%),
      linear-gradient(115deg,rgba(11,42,70,.64),rgba(7,22,42,.5)) !important;
  }

  .solar-today-card::after{
    inset:0;
    background:
      linear-gradient(120deg,transparent 0 48%,rgba(255,224,120,.14) 49%,transparent 51% 100%),
      repeating-linear-gradient(158deg,rgba(145,200,255,.1) 0 1px,transparent 1px 26px),
      repeating-linear-gradient(88deg,rgba(145,200,255,.06) 0 1px,transparent 1px 34px);
    mask-image:linear-gradient(90deg,transparent 24%,#000 58%,#000 100%);
    opacity:.68;
  }

  .solar-today-card .overview-icon{
    grid-column:1;
    grid-row:1 / 3;
    width:clamp(62px,5.2vw,82px);
    height:clamp(62px,5.2vw,82px);
    margin:0 !important;
    color:#ffe16a;
    background:radial-gradient(circle,rgba(255,217,96,.28),rgba(255,217,96,.07));
    border-color:rgba(255,222,118,.25);
    box-shadow:0 0 36px rgba(255,216,77,.2),inset 0 0 26px rgba(255,255,255,.08);
  }

  .solar-today-card .overview-label,
  .solar-today-card .overview-sub{
    grid-column:2;
    position:relative;
    z-index:1;
  }

  .solar-today-card .overview-soc{
    grid-column:3;
    grid-row:1 / 3;
    position:relative;
    z-index:1;
    margin:0 !important;
    justify-self:end;
    text-align:right;
    max-width:none !important;
    color:rgba(255,255,255,.96) !important;
    font-size:clamp(44px,5.2vw,72px) !important;
    line-height:.9 !important;
    font-weight:900 !important;
  }

  .solar-today-card .metric-unit{
    display:block;
    margin:.06em 0 0 !important;
    font-size:.42em !important;
    line-height:1 !important;
    font-weight:850;
  }

  .bill-cycle-card{
    border-color:rgba(188,132,255,.25) !important;
    background:
      radial-gradient(circle at 8% 20%,rgba(204,126,255,.16),transparent 24%),
      radial-gradient(circle at 92% 50%,rgba(255,101,196,.11),transparent 28%),
      linear-gradient(135deg,rgba(22,20,70,.72),rgba(5,18,42,.5)) !important;
  }

  .bill-cycle-card::after{
    inset:0;
    background:
      radial-gradient(circle at 8% 25%,rgba(188,132,255,.18),transparent 20%),
      linear-gradient(105deg,transparent 20%,rgba(255,255,255,.055),transparent 68%);
    opacity:.78;
  }

  .bill-cycle-card .overview-icon{
    grid-column:1;
    grid-row:1 / 5;
    align-self:start;
    width:clamp(42px,3.9vw,54px);
    height:clamp(42px,3.9vw,54px);
    margin:0 !important;
    color:#c79aff;
    background:radial-gradient(circle,rgba(190,125,255,.25),rgba(190,125,255,.06));
    border-color:rgba(200,150,255,.24);
    box-shadow:0 0 32px rgba(190,125,255,.18),inset 0 0 22px rgba(255,255,255,.07);
  }

  .bill-cycle-card .overview-label,
  .bill-cycle-card .overview-sub,
  .bill-cycle-card .bill-cycle-detail{
    grid-column:2;
    position:relative;
    z-index:1;
    margin:0 !important;
    text-align:left !important;
  }

  .bill-cycle-card .overview-soc{
    grid-column:3;
    grid-row:1 / 5;
    position:relative;
    z-index:1;
    align-self:center;
    justify-self:end;
    max-width:clamp(150px,20vw,260px) !important;
    margin:0 !important;
    text-align:right;
    color:rgba(255,255,255,.96) !important;
    font-size:clamp(40px,5vw,70px) !important;
    line-height:.9 !important;
    font-weight:900 !important;
  }

  .bill-cycle-card .metric-number,
  .bill-cycle-card .metric-unit{
    display:block !important;
  }

  .bill-cycle-card .metric-unit{
    margin:.08em 0 0 !important;
    font-size:.36em !important;
    line-height:1 !important;
    font-weight:850;
  }

  .bill-cycle-card .overview-sub,
  .bill-cycle-card .bill-cycle-detail{
    max-width:48ch;
    font-size:clamp(13px,1.15vw,17px) !important;
    line-height:1.42 !important;
    font-weight:620 !important;
    color:rgba(226,238,252,.68) !important;
  }

  @media(max-width:640px){
    .overview-main-4{
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      gap:clamp(10px,3.2vw,14px) !important;
    }

    .battery-current-card,
    .battery-runtime-card{
      min-height:clamp(128px,34vw,148px) !important;
      padding:clamp(16px,4.4vw,20px) !important;
      border-radius:clamp(22px,6vw,27px) !important;
    }

    .overview-main-4 .overview-icon{
      width:clamp(32px,8.8vw,40px);
      height:clamp(32px,8.8vw,40px);
      margin-bottom:9px !important;
      font-size:clamp(16px,4.5vw,20px);
    }

    .overview-main-4 .overview-label{
      font-size:clamp(15px,4.15vw,18px) !important;
      line-height:1.12 !important;
    }

    .battery-current-card .overview-soc,
    .battery-runtime-card .overview-runtime-value{
      font-size:clamp(34px,9.4vw,44px) !important;
      margin-top:7px !important;
    }

    .battery-current-card .overview-sub,
    .battery-runtime-card .overview-sub{
      margin-top:7px !important;
      padding-bottom:24px;
      font-size:clamp(12px,3.35vw,15px) !important;
      line-height:1.2 !important;
    }

    .battery-current-card::after,
    .battery-runtime-card::after{
      left:clamp(16px,4.4vw,20px);
      right:clamp(16px,4.4vw,20px);
      bottom:15px;
      height:8px;
    }

    .battery-current-card .overview-sub::after,
    .battery-runtime-card .overview-sub::after{
      left:clamp(16px,4.4vw,20px);
      bottom:15px;
      height:8px;
      max-width:calc(100% - clamp(32px,8.8vw,40px));
    }

    .battery-current-card .overview-sub::before{
      display:none;
    }

    .solar-today-card,
    .bill-cycle-card{
      min-height:clamp(124px,32vw,148px) !important;
      padding:clamp(17px,4.7vw,22px) clamp(18px,5vw,23px) !important;
      border-radius:clamp(23px,6.2vw,29px) !important;
      column-gap:clamp(12px,3.4vw,16px);
    }

    .solar-today-card{
      grid-template-columns:clamp(50px,14vw,62px) minmax(0,1fr) auto !important;
    }

    .solar-today-card .overview-icon{
      width:clamp(48px,13vw,58px);
      height:clamp(48px,13vw,58px);
    }

    .solar-today-card .overview-label,
    .bill-cycle-card .overview-label{
      font-size:clamp(18px,4.8vw,22px) !important;
    }

    .solar-today-card .overview-sub{
      font-size:clamp(12px,3.35vw,15px) !important;
      line-height:1.24 !important;
    }

    .solar-today-card .overview-soc{
      font-size:clamp(34px,9.4vw,45px) !important;
      min-width:86px;
    }

    .bill-cycle-card{
      grid-template-columns:minmax(0,1fr) clamp(102px,29vw,128px) !important;
      row-gap:5px;
    }

    .bill-cycle-card .overview-icon{
      display:none !important;
    }

    .bill-cycle-card .overview-label,
    .bill-cycle-card .overview-sub,
    .bill-cycle-card .bill-cycle-detail{
      grid-column:1 !important;
    }

    .bill-cycle-card .overview-soc{
      grid-column:2 !important;
      grid-row:1 / 5 !important;
      max-width:128px !important;
      font-size:clamp(29px,7.8vw,38px) !important;
    }

    .bill-cycle-card .overview-sub,
    .bill-cycle-card .bill-cycle-detail{
      font-size:clamp(11.5px,3.2vw,14px) !important;
      line-height:1.34 !important;
    }
  }

  @media(max-width:370px){
    .battery-current-card,
    .battery-runtime-card{
      min-height:122px !important;
      padding:14px !important;
    }

    .battery-current-card .overview-soc,
    .battery-runtime-card .overview-runtime-value{
      font-size:32px !important;
    }

    .solar-today-card{
      grid-template-columns:44px minmax(0,1fr) auto !important;
    }

    .solar-today-card .overview-soc{
      font-size:31px !important;
      min-width:76px;
    }

    .bill-cycle-card{
      grid-template-columns:minmax(0,1fr) 98px !important;
    }

    .bill-cycle-card .overview-soc{
      font-size:27px !important;
      max-width:98px !important;
    }
  }

  @media(max-width:640px){
    .overview-main-4 > .overview-battery:hover,
    .overview-main-4 > .overview-runtime:hover{
      transform:none;
    }
  }

  @keyframes statsLightSweep{
    0%,100%{ transform:translateX(-28%); opacity:.22; }
    50%{ transform:translateX(28%); opacity:.45; }
  }

  @keyframes statsBarGlow{
    0%,100%{ opacity:.82; }
    50%{ opacity:1; }
  }

  @media(prefers-reduced-motion:reduce){
    .overview-main-4 > .overview-battery::before,
    .overview-main-4 > .overview-runtime::before,
    .battery-current-card .overview-sub::after,
    .battery-runtime-card .overview-sub::after{
      animation:none !important;
    }
  }

  /* Stats icon/layout correction after legacy absolute icon rules. */
  .overview-main-4 .overview-icon{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    flex:0 0 auto;
  }

  .battery-current-card,
  .battery-runtime-card{
    display:block !important;
  }

  .solar-today-card .overview-label,
  .solar-today-card .overview-sub,
  .bill-cycle-card .overview-label,
  .bill-cycle-card .overview-sub,
  .bill-cycle-card .bill-cycle-detail{
    text-align:left !important;
  }

  @media(max-width:640px){
    .bill-cycle-card{
      grid-template-columns:clamp(34px,9.5vw,42px) minmax(0,1fr) clamp(96px,27vw,120px) !important;
      column-gap:clamp(10px,3vw,14px) !important;
    }

    .bill-cycle-card .overview-icon{
      display:grid !important;
      grid-column:1 !important;
      grid-row:1 / 5 !important;
      align-self:start !important;
      width:clamp(34px,9.5vw,42px) !important;
      height:clamp(34px,9.5vw,42px) !important;
      font-size:clamp(16px,4.2vw,20px) !important;
    }

    .bill-cycle-card .overview-label,
    .bill-cycle-card .overview-sub,
    .bill-cycle-card .bill-cycle-detail{
      grid-column:2 !important;
    }

    .bill-cycle-card .overview-soc{
      grid-column:3 !important;
      max-width:120px !important;
    }
  }

  @media(max-width:370px){
    .bill-cycle-card{
      grid-template-columns:32px minmax(0,1fr) 92px !important;
    }

    .bill-cycle-card .overview-icon{
      width:32px !important;
      height:32px !important;
    }

    .bill-cycle-card .overview-soc{
      max-width:92px !important;
    }
  }

  /* Energy icon pack + compact premium stats sizing. */
  .energy-icon-img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    pointer-events:none;
    user-select:none;
  }

  .overview-main-4 .overview-icon,
  .flow-icon,
  .home-icon-big,
  .mobile-node-icon,
  .consumption-card-icon{
    overflow:hidden;
  }

  .overview-main-4 .overview-icon .energy-icon-img,
  .flow-icon .energy-icon-img,
  .home-icon-big .energy-icon-img,
  .mobile-node-icon .energy-icon-img,
  .consumption-card-icon .energy-icon-img{
    transform:scale(1.18);
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.18));
  }

  .inline-energy-icon{
    width:1.2em;
    height:1.2em;
    object-fit:contain;
    vertical-align:-.22em;
    margin-right:.28em;
  }

  .battery-icon .energy-icon-img,
  .grid-icon .energy-icon-img,
  .runtime-icon .energy-icon-img{
    transform:scale(1.08);
  }

  .solar-today-card .solar-icon .energy-icon-img{
    transform:scale(.98);
  }

  .bill-cycle-card .grid-icon .energy-icon-img{
    transform:scale(1.16);
  }

  @media(min-width:641px){
    .overview-main-4{
      gap:18px !important;
    }

    .battery-current-card,
    .battery-runtime-card{
      min-height:150px !important;
      padding:22px 28px 26px !important;
    }

    .overview-main-4 .overview-icon{
      width:46px !important;
      height:46px !important;
      margin-bottom:10px !important;
    }

    .overview-main-4 .overview-label{
      font-size:clamp(16px,1.28vw,21px) !important;
    }

    .battery-current-card .overview-soc,
    .battery-runtime-card .overview-runtime-value{
      font-size:clamp(42px,4.4vw,64px) !important;
      margin-top:8px !important;
    }

    .battery-current-card .overview-sub,
    .battery-runtime-card .overview-sub{
      margin-top:8px !important;
      padding-bottom:26px !important;
      font-size:clamp(13px,1.08vw,17px) !important;
    }

    .battery-current-card::after,
    .battery-runtime-card::after{
      left:28px !important;
      right:28px !important;
      bottom:22px !important;
      height:10px !important;
    }

    .battery-current-card .overview-sub::after,
    .battery-runtime-card .overview-sub::after{
      left:28px !important;
      bottom:22px !important;
      height:10px !important;
      max-width:calc(100% - 56px) !important;
    }

    .solar-today-card,
    .bill-cycle-card{
      min-height:132px !important;
      padding:22px 28px !important;
      grid-template-columns:54px minmax(0,1fr) auto !important;
      column-gap:20px !important;
      border-radius:28px !important;
    }

    .solar-today-card .overview-icon,
    .bill-cycle-card .overview-icon{
      grid-column:1 !important;
      grid-row:1 / 4 !important;
      align-self:center !important;
      width:54px !important;
      height:54px !important;
      margin:0 !important;
    }

    .solar-today-card .overview-label,
    .solar-today-card .overview-sub,
    .bill-cycle-card .overview-label,
    .bill-cycle-card .overview-sub,
    .bill-cycle-card .bill-cycle-detail{
      grid-column:2 !important;
      justify-self:start !important;
      text-align:left !important;
      margin-left:0 !important;
    }

    .solar-today-card .overview-label,
    .bill-cycle-card .overview-label{
      font-size:clamp(18px,1.45vw,24px) !important;
      line-height:1.1 !important;
    }

    .solar-today-card .overview-sub,
    .bill-cycle-card .overview-sub,
    .bill-cycle-card .bill-cycle-detail{
      font-size:clamp(12px,1vw,15px) !important;
      line-height:1.32 !important;
    }

    .solar-today-card .overview-soc{
      font-size:clamp(38px,4vw,58px) !important;
    }

    .bill-cycle-card .overview-soc{
      grid-column:3 !important;
      font-size:clamp(36px,4vw,58px) !important;
      max-width:220px !important;
    }
  }

  @media(max-width:640px){
    .overview-main-4 .overview-icon{
      width:clamp(38px,10.4vw,46px) !important;
      height:clamp(38px,10.4vw,46px) !important;
    }

    .battery-current-card .overview-icon,
    .battery-runtime-card .overview-icon{
      width:clamp(34px,9.5vw,40px) !important;
      height:clamp(34px,9.5vw,40px) !important;
    }

    .solar-today-card,
    .bill-cycle-card{
      grid-template-columns:clamp(48px,13vw,58px) minmax(0,1fr) auto !important;
      column-gap:clamp(12px,3.4vw,16px) !important;
    }

    .solar-today-card .overview-icon,
    .bill-cycle-card .overview-icon{
      display:grid !important;
      grid-column:1 !important;
      grid-row:1 / 5 !important;
      align-self:center !important;
      width:clamp(48px,13vw,58px) !important;
      height:clamp(48px,13vw,58px) !important;
      margin:0 !important;
    }

    .solar-today-card .overview-label,
    .solar-today-card .overview-sub,
    .bill-cycle-card .overview-label,
    .bill-cycle-card .overview-sub,
    .bill-cycle-card .bill-cycle-detail{
      grid-column:2 !important;
      justify-self:start !important;
      text-align:left !important;
    }

    .solar-today-card .overview-soc,
    .bill-cycle-card .overview-soc{
      grid-column:3 !important;
    }

    .solar-today-card .overview-soc{
      font-size:clamp(31px,8.6vw,41px) !important;
      min-width:78px !important;
    }

    .bill-cycle-card .overview-soc{
      max-width:112px !important;
      font-size:clamp(27px,7.2vw,35px) !important;
    }

    .bill-cycle-card .overview-sub,
    .bill-cycle-card .bill-cycle-detail{
      font-size:clamp(11px,3vw,13px) !important;
      line-height:1.32 !important;
    }
  }

  @media(max-width:370px){
    .solar-today-card,
    .bill-cycle-card{
      grid-template-columns:42px minmax(0,1fr) 86px !important;
    }

    .solar-today-card .overview-icon,
    .bill-cycle-card .overview-icon{
      width:42px !important;
      height:42px !important;
    }
  }

  /* Requested energy palette pass: warm Energy title and power-aware glass flow cards. */
  .hero-title-energy{
    background:linear-gradient(180deg,#fff774 0%,#ffd936 42%,#ffc606 100%) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    filter:drop-shadow(0 8px 22px rgba(255,198,6,.2)) !important;
  }

  :root{
    --flow-low-opacity:.62;
    --flow-normal-opacity:.84;
    --flow-high-opacity:1;
  }

  .flow-card-mini,
  .home-flow-card,
  .mobile-flow-node{
    --flow-card-opacity:var(--flow-normal-opacity);
    --flow-card-border:rgba(255,255,255,.18);
    --flow-card-glow:rgba(255,255,255,.12);
    opacity:var(--flow-card-opacity);
    color:#fff !important;
  }

  .solar-flow,
  .mobile-flow-solar{
    --flow-card-opacity:var(--flow-normal-opacity);
    --flow-card-border:rgba(255,219,97,.34);
    --flow-card-glow:rgba(255,148,8,.22);
    background:
      radial-gradient(circle at 18% 18%,rgba(255,255,255,.22),transparent 34%),
      linear-gradient(145deg,rgba(255,219,97,.9),rgba(255,148,8,.72)) !important;
    border-color:var(--flow-card-border) !important;
    box-shadow:
      0 18px 52px rgba(0,0,0,.26),
      0 0 34px var(--flow-card-glow),
      inset 0 1px 0 rgba(255,255,255,.24),
      inset 0 0 46px rgba(255,255,255,.08) !important;
  }

  .battery-flow,
  .mobile-flow-battery{
    --flow-card-border:rgba(140,191,182,.34);
    --flow-card-glow:rgba(1,132,110,.22);
    background:
      radial-gradient(circle at 18% 18%,rgba(255,255,255,.18),transparent 34%),
      linear-gradient(145deg,rgba(140,191,182,.82),rgba(1,132,110,.74)) !important;
    border-color:var(--flow-card-border) !important;
    box-shadow:
      0 18px 52px rgba(0,0,0,.26),
      0 0 34px var(--flow-card-glow),
      inset 0 1px 0 rgba(255,255,255,.2),
      inset 0 0 46px rgba(255,255,255,.07) !important;
  }

  .grid-flow,
  .mobile-flow-grid{
    --flow-card-border:rgba(176,137,226,.36);
    --flow-card-glow:rgba(123,59,206,.24);
    background:
      radial-gradient(circle at 18% 18%,rgba(255,255,255,.18),transparent 34%),
      linear-gradient(145deg,rgba(176,137,226,.84),rgba(123,59,206,.74)) !important;
    border-color:var(--flow-card-border) !important;
    box-shadow:
      0 18px 52px rgba(0,0,0,.26),
      0 0 34px var(--flow-card-glow),
      inset 0 1px 0 rgba(255,255,255,.2),
      inset 0 0 46px rgba(255,255,255,.07) !important;
  }

  .home-flow-card,
  .mobile-flow-home{
    --flow-card-border:rgba(104,157,247,.34);
    --flow-card-glow:rgba(0,78,237,.24);
    background:
      radial-gradient(circle at 18% 18%,rgba(255,255,255,.18),transparent 34%),
      linear-gradient(145deg,rgba(104,157,247,.84),rgba(0,78,237,.74)) !important;
    border-color:var(--flow-card-border) !important;
    box-shadow:
      0 18px 52px rgba(0,0,0,.26),
      0 0 34px var(--flow-card-glow),
      inset 0 1px 0 rgba(255,255,255,.2),
      inset 0 0 46px rgba(255,255,255,.07) !important;
  }

  .solar-flow::before,
  .battery-flow::before,
  .grid-flow::before,
  .home-flow-card::before,
  .mobile-flow-node::before{
    background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.025)) !important;
    border-color:var(--flow-card-border) !important;
  }

  .solar-flow .flow-name,
  .solar-flow .flow-value,
  .solar-flow .flow-sub,
  .battery-flow .flow-name,
  .battery-flow .flow-value,
  .battery-flow .flow-sub,
  .grid-flow .flow-name,
  .grid-flow .flow-value,
  .grid-flow .flow-sub,
  .home-flow-card .flow-name,
  .home-flow-card .flow-value,
  .home-flow-card .flow-sub,
  .mobile-flow-node .mobile-node-label,
  .mobile-flow-node strong,
  .mobile-flow-node small{
    color:#fff !important;
    text-shadow:0 8px 18px rgba(0,0,0,.24);
  }

  .solar-flow .flow-value,
  .mobile-flow-solar strong{
    color:#fff !important;
  }

  .solar-power-low,
  .battery-power-low,
  .grid-power-low,
  .home-power-low{
    --flow-card-opacity:var(--flow-low-opacity);
  }

  .solar-power-normal,
  .battery-power-normal,
  .grid-power-normal,
  .home-power-normal{
    --flow-card-opacity:var(--flow-normal-opacity);
  }

  .solar-power-high,
  .battery-power-high,
  .grid-power-high,
  .home-power-high{
    --flow-card-opacity:var(--flow-high-opacity);
    filter:saturate(1.12) contrast(1.04);
  }

  .mobile-flow-diagram.solar-power-low .mobile-flow-solar,
  .mobile-flow-diagram.battery-power-low .mobile-flow-battery,
  .mobile-flow-diagram.grid-power-low .mobile-flow-grid,
  .mobile-flow-diagram.home-power-low .mobile-flow-home{
    --flow-card-opacity:var(--flow-low-opacity);
  }

  .mobile-flow-diagram.solar-power-normal .mobile-flow-solar,
  .mobile-flow-diagram.battery-power-normal .mobile-flow-battery,
  .mobile-flow-diagram.grid-power-normal .mobile-flow-grid,
  .mobile-flow-diagram.home-power-normal .mobile-flow-home{
    --flow-card-opacity:var(--flow-normal-opacity);
  }

  .mobile-flow-diagram.solar-power-high .mobile-flow-solar,
  .mobile-flow-diagram.battery-power-high .mobile-flow-battery,
  .mobile-flow-diagram.grid-power-high .mobile-flow-grid,
  .mobile-flow-diagram.home-power-high .mobile-flow-home{
    --flow-card-opacity:var(--flow-high-opacity);
    filter:saturate(1.12) contrast(1.04);
  }

  .solar-line,
  .solar-runner,
  .solar-path,
  .solar-dot{ color:#ffc606 !important; stroke:#ffc606 !important; fill:#ffc606 !important; }
  .battery-line,
  .battery-runner,
  .battery-path,
  .battery-discharge-dot,
  .battery-charge-dot{ color:#01846e !important; stroke:#01846e !important; fill:#01846e !important; }
  .grid-line,
  .grid-runner,
  .grid-path,
  .grid-import-dot,
  .grid-export-dot{ color:#7b3bce !important; stroke:#7b3bce !important; fill:#7b3bce !important; }
  .home-line,
  .home-runner,
  .home-path,
  .home-dot{ color:#004eed !important; stroke:#004eed !important; fill:#004eed !important; }

  /* Compact stats and dot-only desktop flow runners. */
  @media(min-width:641px){
    .battery-current-card,
    .battery-runtime-card{
      min-height:118px !important;
      padding:16px 24px 22px !important;
      border-radius:24px !important;
    }

    .overview-main-4 .overview-icon{
      width:36px !important;
      height:36px !important;
      margin-bottom:7px !important;
    }

    .battery-current-card .overview-soc,
    .battery-runtime-card .overview-runtime-value{
      font-size:clamp(34px,3.6vw,52px) !important;
      margin-top:4px !important;
    }

    .battery-current-card .overview-sub,
    .battery-runtime-card .overview-sub{
      margin-top:5px !important;
      padding-bottom:20px !important;
      font-size:clamp(12px,.95vw,15px) !important;
    }

    .battery-current-card::after,
    .battery-runtime-card::after{
      left:24px !important;
      right:24px !important;
      bottom:14px !important;
      height:8px !important;
    }

    .battery-current-card .overview-sub::after,
    .battery-runtime-card .overview-sub::after{
      left:24px !important;
      bottom:14px !important;
      height:8px !important;
      max-width:calc(100% - 48px) !important;
    }
  }

  .desktop-flow-dot{
    display:none;
    opacity:.92;
    filter:drop-shadow(0 0 7px currentColor) drop-shadow(0 0 14px currentColor);
    transform-box:fill-box;
    transform-origin:center;
    transform:scaleX(1.08);
  }

  body.solar-low .desktop-solar-dot,
  body.solar-normal .desktop-solar-dot,
  body.solar-high .desktop-solar-dot,
  body.solar-peak .desktop-solar-dot,
  body.grid-importing .desktop-grid-import-dot,
  body.grid-exporting .desktop-grid-export-dot,
  body.battery-discharging .desktop-battery-dot,
  body.battery-charging .desktop-battery-charge-dot,
  body.home-normal-load .desktop-home-dot,
  body.home-high-load .desktop-home-dot,
  body.home-very-high-load .desktop-home-dot{
    display:block;
  }

  body.battery-standby .desktop-battery-dot,
  body.grid-idle .desktop-grid-import-dot,
  body.grid-idle .desktop-grid-export-dot{
    display:none;
  }

  .desktop-solar-dot{ color:#ffc606; fill:#ffc606; }
  .desktop-battery-dot,
  .desktop-battery-charge-dot{ color:#01846e; fill:#01846e; }
  .desktop-grid-import-dot,
  .desktop-grid-export-dot{ color:#7b3bce; fill:#7b3bce; }
  .desktop-home-dot{ color:#004eed; fill:#004eed; }

  @media(min-width:641px){
    .battery-current-card,
    .battery-runtime-card{
      display:grid !important;
      grid-template-columns:40px minmax(0,1fr);
      grid-template-rows:auto auto auto;
      column-gap:14px;
      align-content:center;
      min-height:136px !important;
      padding:15px 22px 24px !important;
    }

    .battery-current-card .overview-icon,
    .battery-runtime-card .overview-icon{
      grid-row:1 / span 2;
      grid-column:1;
      width:38px !important;
      height:38px !important;
      margin:0 !important;
      align-self:start;
    }

    .battery-current-card .overview-label,
    .battery-runtime-card .overview-label{
      grid-column:2;
      font-size:clamp(14px,1vw,18px) !important;
      line-height:1.12 !important;
      align-self:end;
    }

    .battery-current-card .overview-soc,
    .battery-runtime-card .overview-runtime-value{
      grid-column:2;
      font-size:clamp(32px,3.2vw,48px) !important;
      line-height:.94 !important;
      margin-top:2px !important;
      align-self:start;
    }

    .battery-current-card .overview-sub,
    .battery-runtime-card .overview-sub{
      grid-column:1 / -1;
      margin-top:6px !important;
      padding-bottom:16px !important;
      font-size:clamp(11px,.86vw,14px) !important;
      line-height:1.18 !important;
    }

    .battery-current-card::after,
    .battery-runtime-card::after{
      left:22px !important;
      right:22px !important;
      bottom:14px !important;
      height:7px !important;
    }

    .battery-current-card .overview-sub::after,
    .battery-runtime-card .overview-sub::after{
      left:22px !important;
      bottom:14px !important;
      height:7px !important;
      max-width:calc(100% - 44px) !important;
    }

    .battery-current-card .overview-sub::before{
      bottom:11px !important;
      height:13px !important;
    }
  }

  /* UX polish and performance trim: compact insights, real dot flow, lighter glow. */
  .insight-grid{
    gap:clamp(12px,1.35vw,16px) !important;
  }

  .insight-card,
  .recommend-card{
    padding:clamp(16px,1.55vw,20px) !important;
    border-radius:20px !important;
    box-shadow:
      0 18px 48px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.1),
      inset 0 0 36px rgba(67,145,255,.025) !important;
  }

  .insight-card::after{
    height:78px !important;
    opacity:.45 !important;
    filter:none !important;
  }

  .insight-label{
    font-size:clamp(11px,.9vw,13px) !important;
    line-height:1.2 !important;
    letter-spacing:.02em;
  }

  .insight-value{
    font-size:clamp(28px,3.1vw,44px) !important;
    line-height:.96 !important;
  }

  .insight-value.compact{
    font-size:clamp(22px,2.2vw,32px) !important;
  }

  .insight-sub,
  .insight-note,
  .insight-detail,
  .recommend-card p,
  .recommend-extra{
    font-size:clamp(11px,.92vw,14px) !important;
    line-height:1.36 !important;
  }

  .consumption-head{
    align-items:flex-start !important;
    min-height:0;
  }

  .consumption-card-icon{
    flex:0 0 clamp(58px,6vw,84px) !important;
    width:clamp(58px,6vw,84px) !important;
    height:clamp(58px,6vw,84px) !important;
    display:grid;
    place-items:center;
    overflow:visible !important;
    filter:drop-shadow(0 8px 18px rgba(104,157,247,.14)) !important;
  }

  .consumption-card-icon .energy-icon-img{
    width:78% !important;
    height:78% !important;
    transform:scale(1.02) !important;
    filter:none !important;
  }

  .recommend-title{
    margin-top:12px !important;
    font-size:clamp(18px,1.55vw,22px) !important;
  }

  .load-reduction-list{
    gap:8px !important;
    margin-top:12px !important;
  }

  .load-item{
    padding:9px 8px !important;
  }

  .flow-line-new{
    fill:none !important;
    stroke-width:3 !important;
    opacity:.48 !important;
    filter:none !important;
  }

  .flow-line-new.solar-line,
  .flow-line-new.battery-line,
  .flow-line-new.grid-line,
  .flow-line-new.home-line{
    fill:none !important;
  }

  .desktop-flow-dot{
    r:4px;
    opacity:.86 !important;
    filter:drop-shadow(0 0 5px currentColor) !important;
  }

  .flow-center-new::before{
    width:220px !important;
    filter:blur(7px) !important;
    opacity:.5 !important;
    animation:none !important;
  }

  .flow-inv::before{
    box-shadow:0 0 18px rgba(77,166,255,.14),inset 0 0 16px rgba(77,166,255,.07) !important;
    animation:none !important;
  }

  .flow-inv::after{
    opacity:.22 !important;
    filter:blur(7px) !important;
    animation:none !important;
  }

  @media(max-width:640px){
    :root{
      --mobile-surface-blur:8px;
      --mobile-card-shadow:0 12px 28px rgba(0,0,0,.22);
    }

    .weather-bg::before,
    .weather-bg::after,
    .premium-hero::before,
    .shell::before,
    .hero-weather-card::before,
    .consumption-card::before,
    .mobile-flow-diagram::before,
    .mobile-flow-diagram::after,
    .mobile-flow-atmosphere,
    .mobile-flow-title::before,
    .mobile-flow-title::after,
    .mobile-flow-inverter::before,
    .mobile-flow-inverter::after{
      animation:none !important;
    }

    .insight-grid{
      grid-template-columns:1fr !important;
      gap:12px !important;
    }

    .insight-card,
    .recommend-card{
      padding:16px !important;
      border-radius:18px !important;
      box-shadow:
        0 14px 34px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.09) !important;
      backdrop-filter:blur(10px) saturate(120%) !important;
      -webkit-backdrop-filter:blur(10px) saturate(120%) !important;
    }

    .consumption-card-icon{
      flex-basis:56px !important;
      width:56px !important;
      height:56px !important;
    }

    .consumption-value-grid{
      grid-template-columns:1fr !important;
      gap:7px !important;
      margin-top:10px !important;
    }

    .consumption-value-grid div{
      padding:8px 9px !important;
      font-size:clamp(11px,3vw,12px) !important;
    }

    .flow-line-new,
    .mobile-deye-line{
      filter:none !important;
    }

    .desktop-flow-dot,
    .mobile-flow-dot{
      filter:drop-shadow(0 0 4px currentColor) !important;
    }

    .overview-card,
    .ai-card,
    .settings-panel,
    .timeline-card{
      box-shadow:
        var(--mobile-card-shadow),
        inset 0 1px 0 rgba(255,255,255,.1) !important;
      backdrop-filter:blur(var(--mobile-surface-blur)) saturate(116%) !important;
      -webkit-backdrop-filter:blur(var(--mobile-surface-blur)) saturate(116%) !important;
    }

    .solar-today-card{
      min-height:clamp(98px,25vw,116px) !important;
      padding:clamp(14px,3.8vw,17px) clamp(16px,4.4vw,20px) !important;
      grid-template-columns:clamp(42px,11vw,50px) minmax(0,1fr) minmax(74px,auto) !important;
      column-gap:clamp(10px,3vw,14px) !important;
      row-gap:2px !important;
      border-radius:clamp(22px,6vw,28px) !important;
    }

    .solar-today-card .overview-icon{
      width:clamp(42px,11vw,50px) !important;
      height:clamp(42px,11vw,50px) !important;
    }

    .solar-today-card .overview-label{
      font-size:clamp(16px,4.4vw,20px) !important;
      line-height:1.1 !important;
    }

    .solar-today-card .overview-sub{
      margin-top:5px !important;
      font-size:clamp(11px,3vw,13px) !important;
      line-height:1.18 !important;
    }

    .solar-today-card .overview-soc{
      font-size:clamp(30px,8.2vw,38px) !important;
      line-height:.9 !important;
      min-width:74px !important;
    }

    .solar-today-card .metric-unit{
      font-size:.48em !important;
      margin-top:.02em !important;
    }

    .solar-today-card::after{
      opacity:.42 !important;
      mask-image:linear-gradient(90deg,transparent 18%,#000 52%,#000 100%) !important;
    }

    .mobile-flow-diagram{
      contain:layout paint style;
      transform:translateZ(0);
      box-shadow:
        0 18px 44px rgba(0,0,0,.3),
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 0 58px rgba(66,150,255,.045) !important;
    }

    .mobile-radial-stage{
      overflow:hidden;
      border-radius:inherit;
      isolation:isolate;
    }

    .mobile-deye-lines{
      inset:44px 12px 46px !important;
      width:calc(100% - 24px) !important;
      height:calc(100% - 90px) !important;
      overflow:hidden !important;
      z-index:1 !important;
      filter:none !important;
    }

    .mobile-deye-line{
      stroke-width:2.4 !important;
      opacity:.5 !important;
      filter:none !important;
    }

    .mobile-flow-diagram.has-solar .solar-path,
    .mobile-flow-diagram.grid-import .grid-path,
    .mobile-flow-diagram.grid-export .grid-path,
    .mobile-flow-diagram.battery-charge .battery-path,
    .mobile-flow-diagram.battery-discharge .battery-path,
    .mobile-flow-diagram.has-home .home-path{
      opacity:.7 !important;
      filter:none !important;
    }

    .mobile-flow-dot{
      r:4.2px;
      filter:drop-shadow(0 0 3px currentColor) !important;
    }

    .mobile-flow-node{
      z-index:4 !important;
      overflow:hidden !important;
      backdrop-filter:blur(var(--mobile-surface-blur)) saturate(116%) !important;
      -webkit-backdrop-filter:blur(var(--mobile-surface-blur)) saturate(116%) !important;
    }

    .mobile-flow-node::before{
      box-shadow:inset 0 1px 0 rgba(255,255,255,.12),var(--mobile-card-shadow) !important;
    }

    .mobile-flow-node::after{
      opacity:.22 !important;
      filter:blur(8px) !important;
    }

    .mobile-flow-inverter{
      z-index:5 !important;
      animation:none !important;
      box-shadow:
        0 0 28px rgba(78,162,255,.3),
        0 18px 42px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
    }

    .mobile-flow-inverter::before{
      opacity:.28 !important;
      box-shadow:0 0 16px rgba(78,162,255,.12),inset 0 0 14px rgba(78,162,255,.06) !important;
    }

    .mobile-flow-inverter::after{
      opacity:.16 !important;
      filter:blur(7px) !important;
    }

    .mobile-deye-lines{
      inset:0 !important;
      width:100% !important;
      height:100% !important;
      overflow:hidden !important;
      z-index:2 !important;
      filter:none !important;
    }

    .mobile-deye-line{
      stroke-width:3px !important;
      opacity:.58 !important;
      filter:none !important;
    }

    .mobile-flow-diagram.has-solar .solar-path,
    .mobile-flow-diagram.grid-import .grid-path,
    .mobile-flow-diagram.grid-export .grid-path,
    .mobile-flow-diagram.battery-charge .battery-path,
    .mobile-flow-diagram.battery-discharge .battery-path,
    .mobile-flow-diagram.has-home .home-path{
      opacity:.9 !important;
      filter:none !important;
    }

    .mobile-flow-dot{
      r:4.8px;
      filter:drop-shadow(0 0 4px currentColor) !important;
    }

    .mobile-flow-node{
      z-index:4 !important;
    }

    .mobile-flow-inverter{
      z-index:5 !important;
    }
  }

/* Final scoped mobile flow replacement: keep this after legacy mobile-flow rules. */
@media(max-width:700px){
  #mobileFlowDiagram.mobile-flow-diagram{
    position:relative !important;
    display:block !important;
    left:50% !important;
    width:min(calc(100% + 34px),calc(100vw - 20px)) !important;
    min-height:clamp(490px,124vw,565px) !important;
    margin:clamp(18px,5vw,26px) auto 0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:clamp(32px,9vw,44px) !important;
    background:
      radial-gradient(circle at 50% 48%,rgba(43,138,255,.13),transparent 24%),
      radial-gradient(circle at 20% 28%,rgba(255,204,70,.07),transparent 24%),
      radial-gradient(circle at 80% 30%,rgba(148,96,255,.08),transparent 22%),
      radial-gradient(circle at 20% 78%,rgba(53,225,148,.08),transparent 24%),
      linear-gradient(180deg,rgba(7,22,41,.98),rgba(1,10,21,.99)) !important;
    border:1px solid rgba(93,158,224,.22) !important;
    box-shadow:
      0 14px 32px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 0 0 1px rgba(104,170,255,.05) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    contain:layout paint style !important;
    transform:translateX(-50%) translateZ(0);
  }

  #mobileFlowDiagram.mobile-flow-diagram::before,
  #mobileFlowDiagram.mobile-flow-diagram::after{
    content:none !important;
    animation:none !important;
    filter:none !important;
  }

  #mobileFlowDiagram .mobile-flow-atmosphere{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:radial-gradient(circle at 50% 50%,rgba(64,156,255,.1),transparent 30%) !important;
    opacity:.72 !important;
    filter:none !important;
    animation:none !important;
  }

  #mobileFlowDiagram .mobile-circuit-stage{
    position:relative !important;
    inset:auto !important;
    z-index:3 !important;
    width:min(100%,430px) !important;
    height:clamp(490px,124vw,565px) !important;
    margin:0 auto !important;
    overflow:visible !important;
    border-radius:inherit !important;
    isolation:isolate !important;
  }

  #mobileFlowDiagram .mobile-circuit-lines{
    position:absolute !important;
    inset:0 !important;
    z-index:2 !important;
    width:100% !important;
    height:100% !important;
    overflow:visible !important;
    pointer-events:none !important;
    filter:none !important;
    transform:none !important;
  }

  #mobileFlowDiagram .mobile-deye-line{
    fill:none !important;
    stroke-width:1.55px !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
    opacity:.3 !important;
    vector-effect:non-scaling-stroke;
    filter:none !important;
    animation:none !important;
  }

  #mobileFlowDiagram.has-solar .solar-path,
  #mobileFlowDiagram.grid-import .grid-path,
  #mobileFlowDiagram.grid-export .grid-path,
  #mobileFlowDiagram.battery-charge .battery-path,
  #mobileFlowDiagram.battery-discharge .battery-path,
  #mobileFlowDiagram.has-home .home-path{
    opacity:.7 !important;
  }

  #mobileFlowDiagram .mobile-flow-dot{
    r:.62px !important;
    filter:none !important;
    transform-box:fill-box !important;
    transform-origin:center !important;
    transform:scaleX(1.16) !important;
  }

  #mobileFlowDiagram.has-solar .solar-dot,
  #mobileFlowDiagram.grid-import .grid-import-dot,
  #mobileFlowDiagram.grid-export .grid-export-dot,
  #mobileFlowDiagram.battery-discharge .battery-discharge-dot,
  #mobileFlowDiagram.battery-charge .battery-charge-dot,
  #mobileFlowDiagram.has-home .home-dot{
    display:block !important;
  }

  #mobileFlowDiagram .mobile-flow-node{
    position:absolute !important;
    z-index:5 !important;
    width:42.6% !important;
    height:22.7% !important;
    min-height:0 !important;
    padding:clamp(12px,3.1vw,16px) clamp(13px,3.5vw,17px) !important;
    display:grid !important;
    grid-template-columns:clamp(42px,11.2vw,52px) minmax(0,1fr) !important;
    align-items:center !important;
    gap:clamp(8px,2.4vw,11px) !important;
    overflow:hidden !important;
    border-radius:clamp(22px,6.2vw,28px) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    box-shadow:
      0 10px 22px rgba(0,0,0,.2),
      inset 0 1px 0 rgba(255,255,255,.12) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transform:none !important;
  }

  #mobileFlowDiagram .mobile-flow-solar{
    left:4% !important;
    top:14.2% !important;
  }

  #mobileFlowDiagram .mobile-flow-grid{
    right:4% !important;
    top:14.2% !important;
  }

  #mobileFlowDiagram .mobile-flow-battery{
    left:4% !important;
    bottom:8.5% !important;
  }

  #mobileFlowDiagram .mobile-flow-home{
    right:4% !important;
    bottom:8.5% !important;
  }

  #mobileFlowDiagram .mobile-flow-inverter{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    z-index:6 !important;
    width:clamp(101px,27vw,118px) !important;
    height:clamp(101px,27vw,118px) !important;
    min-height:0 !important;
    transform:translate(-50%,-50%) !important;
    border-radius:clamp(25px,6.4vw,31px) !important;
    animation:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

@media(max-width:700px){
  #mobileFlowDiagram .mobile-flow-title{
    position:absolute !important;
    top:clamp(20px,5.4vw,28px) !important;
    left:50% !important;
    right:auto !important;
    width:max-content !important;
    max-width:82% !important;
    transform:translateX(-50%) !important;
    z-index:8 !important;
    margin:0 !important;
    color:rgba(229,240,255,.88) !important;
    font-size:clamp(18px,5.1vw,23px) !important;
    font-weight:850 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    text-align:center !important;
    white-space:nowrap !important;
    text-shadow:0 1px 8px rgba(79,161,255,.22) !important;
  }

  #mobileFlowDiagram .mobile-flow-title::before,
  #mobileFlowDiagram .mobile-flow-title::after{
    content:"" !important;
    position:absolute !important;
    top:50% !important;
    width:clamp(44px,14vw,62px) !important;
    height:1px !important;
    background:linear-gradient(90deg,transparent,rgba(74,159,255,.68),transparent) !important;
    opacity:.8 !important;
    animation:none !important;
  }

  #mobileFlowDiagram .mobile-flow-title::before{ right:calc(100% + 14px) !important; }
  #mobileFlowDiagram .mobile-flow-title::after{ left:calc(100% + 14px) !important; }

  #mobileFlowDiagram .mobile-flow-solar{
    background:linear-gradient(135deg,rgba(255,219,97,.58),rgba(255,148,8,.2) 72%,rgba(27,21,6,.42)) !important;
    border-color:rgba(255,216,79,.68) !important;
  }

  #mobileFlowDiagram .mobile-flow-grid{
    background:linear-gradient(135deg,rgba(176,137,226,.5),rgba(123,59,206,.28) 66%,rgba(23,14,52,.44)) !important;
    border-color:rgba(178,106,255,.66) !important;
  }

  #mobileFlowDiagram .mobile-flow-battery{
    background:linear-gradient(135deg,rgba(140,191,182,.56),rgba(1,132,110,.32) 64%,rgba(3,42,34,.5)) !important;
    border-color:rgba(97,238,158,.58) !important;
  }

  #mobileFlowDiagram .mobile-flow-home{
    background:linear-gradient(135deg,rgba(104,157,247,.52),rgba(0,78,237,.3) 68%,rgba(5,29,72,.5)) !important;
    border-color:rgba(86,168,255,.6) !important;
  }

  #mobileFlowDiagram .mobile-flow-solar::before{
    background:
      radial-gradient(circle at 22% 26%,rgba(255,255,255,.12),transparent 21%),
      linear-gradient(135deg,rgba(255,238,170,.045),transparent 44%) !important;
  }

  #mobileFlowDiagram .mobile-flow-grid::before{
    background:
      radial-gradient(circle at 22% 26%,rgba(255,255,255,.11),transparent 21%),
      linear-gradient(135deg,rgba(221,196,255,.045),transparent 44%) !important;
  }

  #mobileFlowDiagram .mobile-flow-battery::before{
    background:
      radial-gradient(circle at 22% 26%,rgba(255,255,255,.11),transparent 21%),
      linear-gradient(135deg,rgba(189,255,219,.045),transparent 44%) !important;
  }

  #mobileFlowDiagram .mobile-flow-home::before{
    background:
      radial-gradient(circle at 22% 26%,rgba(255,255,255,.11),transparent 21%),
      linear-gradient(135deg,rgba(200,225,255,.045),transparent 44%) !important;
  }

  #mobileFlowDiagram .mobile-flow-node{
    opacity:1 !important;
  }

  #mobileFlowDiagram .mobile-flow-node::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    border-radius:inherit !important;
    background:
      radial-gradient(circle at 20% 20%,rgba(255,255,255,.12),transparent 22%),
      linear-gradient(135deg,rgba(255,255,255,.055),transparent 42%) !important;
    box-shadow:none !important;
    pointer-events:none !important;
  }

  #mobileFlowDiagram .mobile-flow-node::after{
    content:none !important;
    position:absolute !important;
    inset:auto 12% -16px 12% !important;
    height:30px !important;
    z-index:0 !important;
    border-radius:999px !important;
    opacity:.22 !important;
    filter:none !important;
    pointer-events:none !important;
  }

  #mobileFlowDiagram .mobile-flow-solar::after{ background:#ffd84f !important; }
  #mobileFlowDiagram .mobile-flow-grid::after{ background:#b26aff !important; }
  #mobileFlowDiagram .mobile-flow-battery::after{ background:#61ee9e !important; }
  #mobileFlowDiagram .mobile-flow-home::after{ background:#56a8ff !important; }

  #mobileFlowDiagram .mobile-node-icon{
    position:relative !important;
    z-index:1 !important;
    width:clamp(42px,11.2vw,52px) !important;
    height:clamp(42px,11.2vw,52px) !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.12) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18) !important;
    margin:0 !important;
    order:initial !important;
  }

  #mobileFlowDiagram .mobile-node-icon img{
    width:72% !important;
    height:72% !important;
    object-fit:contain !important;
    filter:none !important;
  }

  #mobileFlowDiagram .mobile-node-copy{
    position:relative !important;
    z-index:1 !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:clamp(5px,1.55vw,7px) !important;
    order:initial !important;
  }

  #mobileFlowDiagram .mobile-node-label{
    display:block !important;
    font-size:clamp(15px,4.1vw,18px) !important;
    font-weight:800 !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    order:initial !important;
    margin:0 !important;
  }

  #mobileFlowDiagram .mobile-flow-solar .mobile-node-label{ color:rgba(255,238,170,.92) !important; }
  #mobileFlowDiagram .mobile-flow-grid .mobile-node-label{ color:rgba(221,196,255,.9) !important; }
  #mobileFlowDiagram .mobile-flow-battery .mobile-node-label{ color:rgba(189,255,219,.9) !important; }
  #mobileFlowDiagram .mobile-flow-home .mobile-node-label{ color:rgba(200,225,255,.9) !important; }

  #mobileFlowDiagram .mobile-flow-node strong{
    display:flex !important;
    align-items:baseline !important;
    gap:.14em !important;
    max-width:100% !important;
    color:#fff !important;
    font-size:clamp(25px,6.8vw,34px) !important;
    font-weight:900 !important;
    line-height:.9 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    order:initial !important;
    margin:0 !important;
  }

  #mobileFlowDiagram .mobile-flow-node .mobile-power-unit{
    font-size:.48em !important;
    font-weight:850 !important;
    opacity:.84 !important;
  }

  #mobileFlowDiagram .mobile-flow-node .mobile-power-number{
    min-width:0 !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  #mobileFlowDiagram .mobile-flow-home strong,
  #mobileFlowDiagram .mobile-flow-solar strong,
  #mobileFlowDiagram .mobile-flow-battery strong{
    font-size:clamp(24px,6.3vw,32px) !important;
  }

  #mobileFlowDiagram .mobile-node-status{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:clamp(22px,6vw,28px) !important;
    padding:0 clamp(10px,2.9vw,13px) !important;
    border-radius:999px !important;
    color:rgba(255,255,255,.82) !important;
    background:rgba(255,255,255,.09) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    font-size:clamp(12px,3.2vw,14px) !important;
    font-weight:780 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    order:initial !important;
    margin:0 !important;
  }

  #mobileFlowDiagram .mobile-flow-inverter{
    display:grid !important;
    place-items:center !important;
    align-content:center !important;
    gap:clamp(3px,.8vw,5px) !important;
    color:#fff !important;
    background:
      radial-gradient(circle at 36% 18%,rgba(255,255,255,.28),transparent 22%),
      linear-gradient(145deg,rgba(97,176,255,.98),rgba(0,117,192,.95) 72%) !important;
    border:1px solid rgba(132,205,255,.78) !important;
    box-shadow:
      0 0 18px rgba(72,159,255,.28),
      0 12px 26px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.36) !important;
  }

  #mobileFlowDiagram .mobile-flow-inverter::before{
    content:"" !important;
    position:absolute !important;
    inset:-16px !important;
    z-index:-1 !important;
    border-radius:inherit !important;
    border:1px solid rgba(92,171,255,.16) !important;
    background:radial-gradient(circle,rgba(74,157,255,.08),transparent 64%) !important;
    box-shadow:none !important;
    opacity:1 !important;
    filter:none !important;
    animation:none !important;
  }

  #mobileFlowDiagram .mobile-flow-inverter::after{
    content:none !important;
    position:absolute !important;
    inset:-34px !important;
    z-index:-2 !important;
    border-radius:50% !important;
    background:radial-gradient(circle,rgba(67,160,255,.18),transparent 64%) !important;
    opacity:.85 !important;
    filter:none !important;
    animation:none !important;
  }

  #mobileFlowDiagram .mobile-inverter-symbol{
    width:clamp(31px,8vw,38px) !important;
    height:clamp(31px,8vw,38px) !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.12) !important;
    border:1px solid rgba(255,255,255,.24) !important;
    color:rgba(226,244,255,.86) !important;
    font-size:clamp(17px,4.6vw,22px) !important;
    line-height:1 !important;
  }

  #mobileFlowDiagram .mobile-flow-inverter strong{
    font-size:clamp(32px,8.7vw,41px) !important;
    font-weight:950 !important;
    line-height:.86 !important;
    color:#fff !important;
    letter-spacing:.01em !important;
  }

  #mobileFlowDiagram .mobile-flow-inverter span:not(.mobile-inverter-symbol){
    color:rgba(219,238,255,.8) !important;
    font-size:clamp(12px,3.2vw,15px) !important;
    font-weight:760 !important;
    line-height:1 !important;
  }
}

@media(max-width:380px){
  #mobileFlowDiagram.mobile-flow-diagram{
    min-height:500px !important;
  }

  #mobileFlowDiagram .mobile-circuit-stage{
    height:500px !important;
  }

  #mobileFlowDiagram .mobile-flow-node{
    width:43% !important;
    height:23.5% !important;
    padding:12px !important;
    gap:8px !important;
  }

  #mobileFlowDiagram .mobile-flow-node strong{
    font-size:clamp(23px,6.8vw,32px) !important;
  }
}

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

/* Static time-of-day background + clean mobile grid-cost card. */
body{
  --time-bg:none;
  --time-sky-a:rgba(0,147,229,.42);
  --time-sky-b:rgba(66,195,255,.2);
  --time-sky-c:rgba(0,8,24,.78);
  --time-light-x:82%;
  --time-light-y:14%;
  --time-light:rgba(185,243,255,.3);
  background:#06111f;
}

body.time-morning{
  --time-bg:url("assets/backgrounds/desktop-sunrise.webp");
  --time-sky-a:rgba(63,157,222,.5);
  --time-sky-b:rgba(255,211,107,.28);
  --time-sky-c:rgba(3,22,42,.78);
  --time-light-x:78%;
  --time-light-y:18%;
  --time-light:rgba(255,241,189,.34);
}

body.time-daytime{
  --time-bg:url("assets/backgrounds/desktop-sunny.webp");
  --time-sky-a:rgba(0,132,219,.58);
  --time-sky-b:rgba(58,185,255,.3);
  --time-sky-c:rgba(1,20,44,.78);
  --time-light-x:82%;
  --time-light-y:18%;
  --time-light:rgba(185,243,255,.32);
}

body.time-evening{
  --time-bg:url("assets/backgrounds/desktop-sunset.webp");
  --time-sky-a:rgba(19,34,96,.66);
  --time-sky-b:rgba(255,111,71,.26);
  --time-sky-c:rgba(4,7,28,.9);
  --time-light-x:78%;
  --time-light-y:26%;
  --time-light:rgba(255,159,122,.28);
}

body.time-night{
  --time-bg:url("assets/backgrounds/desktop-night.webp");
  --time-sky-a:rgba(1,16,38,.84);
  --time-sky-b:rgba(82,224,255,.18);
  --time-sky-c:rgba(0,4,16,.94);
  --time-light-x:78%;
  --time-light-y:20%;
  --time-light:rgba(82,224,255,.22);
}

body.time-late-night{
  --time-bg:url("assets/backgrounds/desktop-midnight.webp");
  --time-sky-a:rgba(0,7,18,.88);
  --time-sky-b:rgba(146,117,255,.14);
  --time-sky-c:rgba(0,3,12,.94);
  --time-light-x:78%;
  --time-light-y:20%;
  --time-light:rgba(146,117,255,.2);
}

.weather-bg{
  background:
    radial-gradient(circle at var(--time-light-x) var(--time-light-y),var(--time-light),transparent 30%),
    radial-gradient(ellipse at 72% 22%,rgba(82,160,255,.13),transparent 34%),
    radial-gradient(ellipse at 20% 78%,rgba(5,210,180,.1),transparent 42%),
    linear-gradient(180deg,var(--time-sky-a),var(--time-sky-b) 42%,var(--time-sky-c)),
    var(--time-bg) center / cover no-repeat !important;
  filter:none !important;
  animation:none !important;
}

.weather-bg::before,
.weather-bg::after{
  animation:none !important;
  filter:none !important;
}

.weather-bg::before{
  content:"" !important;
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(104deg,rgba(255,255,255,.055) 0 1px,transparent 1px 38px),
    radial-gradient(ellipse at 50% 112%,rgba(0,0,0,.46),transparent 48%),
    linear-gradient(90deg,rgba(0,0,0,.2),transparent 28% 72%,rgba(0,0,0,.2)) !important;
  opacity:.62 !important;
}

.weather-bg::after{
  content:"" !important;
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.28)) !important;
  opacity:1 !important;
}

.weather-bg > *{
  display:none !important;
}

/* Mobile flow: remove the extra inner panel, keep only the section background. */
@media(max-width:640px){
  #mobileFlowDiagram.mobile-flow-diagram::before,
  #mobileFlowDiagram.mobile-flow-diagram::after,
  #mobileFlowDiagram .mobile-flow-atmosphere{
    content:none !important;
    display:none !important;
    background:none !important;
    box-shadow:none !important;
    filter:none !important;
    opacity:0 !important;
  }

  #mobileFlowDiagram .mobile-circuit-stage{
    background:transparent !important;
    box-shadow:none !important;
    border:none !important;
  }

  #mobileFlowDiagram.mobile-flow-diagram{
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
  }
}

/* Mobile flow: make running dots read clearly against their paths. */
@media(max-width:640px){
  #mobileFlowDiagram .mobile-flow-dot{
    r:.74px !important;
    stroke:rgba(255,255,255,.82) !important;
    stroke-width:.18px !important;
    paint-order:stroke fill !important;
    filter:drop-shadow(0 0 4px currentColor) drop-shadow(0 0 2px rgba(255,255,255,.7)) !important;
    transform-box:fill-box !important;
    transform-origin:center !important;
    transform:scaleX(1.16) !important;
  }

  #mobileFlowDiagram.has-solar .solar-dot,
  #mobileFlowDiagram.grid-import .grid-import-dot,
  #mobileFlowDiagram.grid-export .grid-export-dot,
  #mobileFlowDiagram.battery-discharge .battery-discharge-dot,
  #mobileFlowDiagram.battery-charge .battery-charge-dot,
  #mobileFlowDiagram.has-home .home-dot{
    display:block !important;
  }
}

/* Mobile flow value sizing: keep long values like -1.34 kW inside node cards. */
@media(max-width:640px){
  #mobileFlowDiagram .mobile-flow-node strong{
    font-size:clamp(20px,5.45vw,26px) !important;
    gap:.2em !important;
    line-height:.92 !important;
    max-width:100% !important;
  }

  #mobileFlowDiagram .mobile-flow-node .mobile-power-number{
    flex:0 1 auto !important;
    min-width:0 !important;
    max-width:100% !important;
    font-variant-numeric:tabular-nums !important;
  }

  #mobileFlowDiagram .mobile-flow-node .mobile-power-unit{
    flex:0 0 auto !important;
    font-size:.42em !important;
    margin-left:.02em !important;
    opacity:.9 !important;
  }

  #mobileFlowDiagram .mobile-flow-battery strong{
    font-size:clamp(19px,5.05vw,24px) !important;
    gap:.18em !important;
  }
}

@media(max-width:390px){
  #mobileFlowDiagram .mobile-flow-node strong{
    font-size:clamp(18px,5vw,22px) !important;
  }

  #mobileFlowDiagram .mobile-flow-battery strong{
    font-size:clamp(17px,4.75vw,21px) !important;
  }
}

html body .insight-card.battery-plan-card::after{
  content:none !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  inset:auto !important;
}

.forecast-combo{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(14px,1.5vw,22px);
}

/* Battery Plan rebuilt component */
.forecast-combo .battery-plan-card{
  grid-column:1 / -1;
}

html body .battery-plan-card{
  --plan-accent:#7cf66d;
  --plan-accent-strong:#68ed57;
  --plan-accent-soft:rgba(124,246,109,.16);
  --plan-accent-faint:rgba(124,246,109,.07);
  --plan-border:rgba(124,246,109,.32);
  --plan-text:#83f56f;
  --plan-chip-bg:linear-gradient(145deg,rgba(114,238,91,.85),rgba(45,148,50,.82));
  --plan-progress:0%;
  position:relative;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-width:0;
  display:grid;
  gap:clamp(18px,1.8vw,28px);
  padding:clamp(24px,2.8vw,42px) !important;
  overflow:hidden !important;
  border-radius:clamp(28px,2.7vw,42px) !important;
  border:1px solid rgba(126,184,235,.24) !important;
  background:
    radial-gradient(circle at 78% 14%,var(--plan-accent-faint),transparent 32%),
    radial-gradient(circle at 12% 18%,rgba(86,160,255,.1),transparent 34%),
    linear-gradient(145deg,rgba(4,25,45,.95),rgba(1,10,22,.96)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 22px 58px rgba(0,0,0,.24) !important;
}

html body .battery-plan-card::after{
  display:none !important;
}

html body .battery-plan-card.plan-yellow{
  --plan-accent:#ffd84d;
  --plan-accent-strong:#ffcc36;
  --plan-accent-soft:rgba(255,216,77,.16);
  --plan-accent-faint:rgba(255,216,77,.08);
  --plan-border:rgba(255,216,77,.38);
  --plan-text:#ffe27a;
  --plan-chip-bg:linear-gradient(145deg,rgba(255,221,86,.88),rgba(178,126,25,.82));
}

html body .battery-plan-card.plan-red{
  --plan-accent:#ff7a6c;
  --plan-accent-strong:#ff6655;
  --plan-accent-soft:rgba(255,122,108,.16);
  --plan-accent-faint:rgba(255,122,108,.08);
  --plan-border:rgba(255,122,108,.42);
  --plan-text:#ffb1a6;
  --plan-chip-bg:linear-gradient(145deg,rgba(255,139,123,.88),rgba(166,56,50,.82));
}

html body .battery-plan-header{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:clamp(14px,2vw,26px);
}

html body .battery-plan-heading{
  min-width:0;
  display:grid;
  gap:clamp(12px,1vw,16px);
}

html body .battery-plan-label{
  margin:0 !important;
  color:rgba(190,219,255,.84) !important;
  font-size:clamp(11px,.95vw,15px) !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase;
}

html body .battery-plan-title{
  margin:0 !important;
  color:var(--plan-text) !important;
  font-size:clamp(36px,4.4vw,62px) !important;
  line-height:.96 !important;
  font-weight:950 !important;
  letter-spacing:0 !important;
  text-shadow:0 0 24px var(--plan-accent-soft) !important;
}

html body .battery-plan-subtitle{
  max-width:56ch;
  margin:0 !important;
  color:rgba(226,240,255,.76) !important;
  font-size:clamp(18px,1.85vw,30px) !important;
  line-height:1.22 !important;
  font-weight:850 !important;
}

html body .battery-plan-chip{
  min-width:0;
  margin:0 !important;
  padding:clamp(7px,.8vw,11px) clamp(15px,1.5vw,24px) !important;
  border-radius:999px !important;
  color:#fff !important;
  background:var(--plan-chip-bg) !important;
  border:1px solid var(--plan-border) !important;
  box-shadow:0 0 20px var(--plan-accent-soft), inset 0 1px 0 rgba(255,255,255,.25) !important;
  font-size:clamp(12px,1.15vw,18px) !important;
  font-weight:900 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

html body .battery-plan-progress,
html body .battery-plan-recommend,
html body .battery-plan-solar-row,
html body .battery-plan-metrics{
  width:100%;
  box-sizing:border-box;
  border-radius:clamp(18px,1.9vw,28px) !important;
  border:1px solid rgba(126,184,235,.18) !important;
  background:rgba(2,17,34,.52) !important;
}

html body .battery-plan-progress{
  display:grid;
  gap:clamp(12px,1.1vw,18px);
  margin-top:clamp(2px,.6vw,8px);
  padding:clamp(14px,1.55vw,22px) clamp(16px,1.9vw,28px) !important;
}

html body .battery-plan-progress-labels{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.6vw,24px);
  align-items:center;
  color:rgba(226,240,255,.72);
  font-size:clamp(13px,1.22vw,19px);
  line-height:1.15;
  font-weight:900;
  white-space:nowrap;
}

html body .battery-plan-progress-labels span:nth-child(2){
  text-align:center;
}

html body .battery-plan-progress-labels span:nth-child(3){
  text-align:right;
}

html body .battery-plan-progress-labels strong{
  color:var(--plan-accent);
  font-size:1.14em;
  font-weight:950;
}

html body .battery-plan-bar{
  position:relative;
  height:clamp(10px,1vw,14px);
  margin:0 !important;
  overflow:hidden;
  border-radius:999px;
  background:rgba(126,184,235,.13) !important;
  border:0 !important;
}

html body .battery-plan-bar span{
  display:block;
  width:var(--plan-progress) !important;
  min-width:4%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,color-mix(in srgb,var(--plan-accent) 78%,white),var(--plan-accent-strong)) !important;
  box-shadow:0 0 16px var(--plan-accent-soft) !important;
}

html body .battery-plan-recommend{
  display:block !important;
  margin:0 !important;
  padding:clamp(18px,1.9vw,28px) !important;
  border-color:var(--plan-border) !important;
  background:linear-gradient(135deg,var(--plan-accent-faint),rgba(2,18,35,.48)) !important;
  box-shadow:none !important;
}

html body .battery-plan-card .battery-plan-recommend.risk-safe,
html body .battery-plan-card .battery-plan-recommend.risk-warn,
html body .battery-plan-card .battery-plan-recommend.risk-danger{
  display:block !important;
  border-color:var(--plan-border) !important;
  background:linear-gradient(135deg,var(--plan-accent-faint),rgba(2,18,35,.48)) !important;
  box-shadow:none !important;
}

html body .battery-plan-recommend .recommend-title{
  margin:0 0 clamp(7px,.75vw,11px) !important;
  color:var(--plan-text) !important;
  font-size:clamp(24px,2.6vw,40px) !important;
  line-height:1.08 !important;
  font-weight:950 !important;
}

html body .battery-plan-recommend p{
  max-width:70ch;
  margin:0 !important;
  color:rgba(247,251,255,.9) !important;
  font-size:clamp(16px,1.65vw,26px) !important;
  line-height:1.42 !important;
  font-weight:650 !important;
}

html body .battery-plan-solar-row{
  display:block;
  margin:0 !important;
  padding:clamp(14px,1.45vw,22px) clamp(18px,1.9vw,28px) !important;
  border-color:var(--plan-border) !important;
  color:rgba(247,251,255,.92) !important;
  font-size:clamp(14px,1.25vw,20px) !important;
  line-height:1.18 !important;
  font-weight:900 !important;
}

html body .battery-plan-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  padding:clamp(16px,1.8vw,26px) !important;
}

html body .battery-plan-metrics div{
  min-width:0;
  display:grid;
  gap:clamp(6px,.65vw,9px);
  padding:0 clamp(10px,1.2vw,18px);
  border-right:1px solid rgba(126,184,235,.14);
}

html body .battery-plan-metrics div:last-child{
  border-right:0;
}

html body .battery-plan-metrics span{
  color:rgba(226,240,255,.62);
  font-size:clamp(12px,1.05vw,16px);
  line-height:1.2;
  font-weight:850;
}

html body .battery-plan-metrics strong{
  min-width:0;
  color:rgba(247,251,255,.96);
  font-size:clamp(22px,2.35vw,36px);
  line-height:1;
  font-weight:950;
  letter-spacing:0;
  overflow-wrap:anywhere;
}

@media(min-width:900px){
  .forecast-combo{
    align-items:start;
  }
}

@media(max-width:640px){
  html body .battery-plan-card{
    gap:16px;
    padding:22px 18px !important;
    border-radius:28px !important;
  }

  html body .battery-plan-header{
    grid-template-columns:minmax(0,1fr);
    gap:10px;
  }

  html body .battery-plan-heading{
    gap:12px;
  }

  html body .battery-plan-title{
    font-size:clamp(34px,9.8vw,48px) !important;
    line-height:.96 !important;
  }

  html body .battery-plan-subtitle{
    font-size:clamp(18px,5vw,25px) !important;
    line-height:1.18 !important;
  }

  html body .battery-plan-chip{
    justify-self:start;
    padding:7px 16px !important;
    font-size:clamp(13px,3.7vw,16px) !important;
  }

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

  html body .battery-plan-progress-labels{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    font-size:clamp(12px,3.35vw,14px);
  }

  html body .battery-plan-recommend{
    padding:18px 16px !important;
  }

  html body .battery-plan-recommend .recommend-title{
    font-size:clamp(26px,7.5vw,36px) !important;
  }

  html body .battery-plan-recommend p{
    font-size:clamp(16px,4.5vw,22px) !important;
  }

  html body .battery-plan-solar-row{
    padding:13px 16px !important;
    font-size:clamp(14px,4vw,17px) !important;
  }

  html body .battery-plan-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:16px !important;
    gap:0;
  }

  html body .battery-plan-metrics div{
    padding:0 14px 14px;
  }

  html body .battery-plan-metrics div:nth-child(2){
    border-right:0;
  }

  html body .battery-plan-metrics div:nth-child(n+3){
    padding-top:14px;
    padding-bottom:0;
    border-top:1px solid rgba(126,184,235,.14);
  }

  html body .battery-plan-metrics span{
    font-size:clamp(12px,3.5vw,15px);
  }

  html body .battery-plan-metrics strong{
    font-size:clamp(25px,7.4vw,34px);
  }
}

@media(max-width:390px){
  html body .battery-plan-card{
    padding:20px 16px !important;
  }

  html body .battery-plan-progress-labels{
    font-size:12px;
  }

  html body .battery-plan-metrics div{
    padding-inline:10px;
  }
}

/* Production polish: keep designer controls fully hidden outside local tuning. */
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.designer-mode .designer-mode-toggle,
html body.designer-mode .designer-mode-panel,
html body.designer-mode .designer-target::after{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

@media(min-width:641px){
  html body .overview-main-4 > .overview-battery.solar-today-card{
    border-color:rgba(255,218,97,.42) !important;
    background:
      radial-gradient(circle at 9% 20%,rgba(255,224,98,.28),transparent 18%),
      radial-gradient(circle at 88% 32%,rgba(255,193,48,.22),transparent 24%),
      linear-gradient(118deg,rgba(35,64,73,.74),rgba(8,36,62,.68) 48%,rgba(4,22,43,.72)) !important;
    box-shadow:
      0 18px 52px rgba(0,0,0,.2),
      0 0 30px rgba(255,206,64,.08),
      inset 0 1px 0 rgba(255,255,255,.16) !important;
  }

  html body .overview-main-4 > .overview-battery.solar-today-card::after{
    background:
      linear-gradient(115deg,transparent 0 44%,rgba(255,231,128,.2) 47%,transparent 52% 100%),
      repeating-linear-gradient(156deg,rgba(255,232,143,.12) 0 1px,transparent 1px 28px),
      radial-gradient(circle at 92% 22%,rgba(255,232,143,.18),transparent 20%) !important;
    opacity:.78 !important;
  }

  html body .overview-main-4 > .overview-battery.solar-today-card .overview-label,
  html body .overview-main-4 > .overview-battery.solar-today-card .overview-sub{
    color:rgba(255,244,196,.9) !important;
  }

  html body .overview-main-4 > .overview-battery.solar-today-card .overview-soc,
  html body .overview-main-4 > .overview-battery.solar-today-card .metric-unit{
    color:rgba(255,255,255,.98) !important;
    text-shadow:0 0 20px rgba(255,214,75,.16) !important;
  }

  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card{
    border-color:rgba(143,177,255,.4) !important;
    background:
      radial-gradient(circle at 9% 22%,rgba(119,91,255,.26),transparent 22%),
      radial-gradient(circle at 92% 52%,rgba(54,175,255,.18),transparent 26%),
      linear-gradient(122deg,rgba(38,48,100,.76),rgba(11,35,74,.72) 52%,rgba(5,20,47,.76)) !important;
    box-shadow:
      0 18px 52px rgba(0,0,0,.22),
      0 0 32px rgba(80,158,255,.1),
      inset 0 1px 0 rgba(255,255,255,.16) !important;
  }

  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card::after{
    background:
      radial-gradient(circle at 8% 23%,rgba(178,132,255,.22),transparent 18%),
      linear-gradient(105deg,transparent 16%,rgba(133,197,255,.14),transparent 62%),
      repeating-linear-gradient(160deg,rgba(140,198,255,.07) 0 1px,transparent 1px 30px) !important;
    opacity:.8 !important;
  }

  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .overview-label,
  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{
    color:rgba(224,235,255,.82) !important;
  }

  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 .metric-unit{
    color:rgba(255,255,255,.98) !important;
    text-shadow:0 0 24px rgba(99,184,255,.14) !important;
  }
}

/* Desktop refinement: tighter overview cards, bento planning, stronger flow motion. */
@media(min-width:641px){
  html body .overview-main-4 > .overview-battery.solar-today-card,
  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card{
    min-height:clamp(116px,9vw,142px) !important;
    padding:clamp(18px,1.8vw,24px) clamp(20px,2.3vw,30px) !important;
    border-radius:clamp(20px,1.8vw,28px) !important;
  }

  html body .overview-main-4 > .overview-battery.solar-today-card .overview-icon{
    width:clamp(48px,4.2vw,62px) !important;
    height:clamp(48px,4.2vw,62px) !important;
  }

  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .overview-icon{
    width:clamp(38px,3.3vw,48px) !important;
    height:clamp(38px,3.3vw,48px) !important;
  }

  html body .overview-main-4 > .overview-battery.solar-today-card .overview-soc{
    font-size:clamp(34px,4.1vw,56px) !important;
  }

  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card .overview-soc{
    font-size:clamp(36px,4.4vw,60px) !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{
    color:#83d8ff !important;
    text-shadow:0 0 12px rgba(84,193,255,.3) !important;
  }

  html body .overview-main-4 > .overview-battery.grid-cost-card.bill-cycle-card #billCycleSub{
    white-space:nowrap !important;
    font-size:clamp(12px,1vw,15px) !important;
  }

  html body .flow-line-new{
    stroke-width:5.4px !important;
    opacity:.72 !important;
    filter:drop-shadow(0 0 5px currentColor) !important;
  }

  html body .desktop-flow-dot{
    r:6.4px !important;
    opacity:.96 !important;
    filter:drop-shadow(0 0 7px currentColor) drop-shadow(0 0 13px currentColor) !important;
    transform:scaleX(1.04) !important;
  }
}

@media(min-width:900px){
  html body .forecast-combo{
    grid-template-columns:minmax(0,1fr) !important;
    gap:clamp(18px,1.7vw,26px) !important;
    align-items:start !important;
  }

  html body .forecast-combo .battery-plan-card,
  html body .forecast-combo .consumption-card{
    grid-column:auto !important;
  }

  html body .forecast-combo .battery-plan-card{
    align-self:start !important;
  }

  html body .forecast-combo .consumption-card{
    align-self:start !important;
  }

  html body .battery-plan-card{
    grid-template-columns:minmax(300px,.82fr) minmax(360px,1fr) minmax(330px,.9fr) !important;
    grid-template-areas:
      "plan-head plan-head plan-head"
      "plan-recommend plan-recommend plan-solar"
      "plan-metrics plan-metrics plan-metrics" !important;
    align-items:start !important;
    gap:clamp(10px,.9vw,14px) !important;
    padding:clamp(16px,1.45vw,22px) !important;
    border-radius:clamp(20px,1.8vw,30px) !important;
  }

  html body .battery-plan-header{
    grid-area:plan-head;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:start !important;
  }

  html body .battery-plan-progress{
    grid-column:1 / -1;
    align-self:stretch;
  }

  html body .battery-plan-recommend{
    grid-area:plan-recommend;
  }

  html body .battery-plan-solar-row{
    grid-area:plan-solar;
    align-self:stretch;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }

  html body .battery-plan-metrics{
    grid-area:plan-metrics;
  }

  html body .battery-plan-heading{
    gap:clamp(6px,.55vw,9px) !important;
  }

  html body .battery-plan-label{
    font-size:clamp(10px,.82vw,13px) !important;
    line-height:1.1 !important;
  }

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

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

  html body .battery-plan-chip{
    justify-self:end !important;
    align-self:start !important;
    padding:6px 14px !important;
    font-size:clamp(11px,.86vw,14px) !important;
  }

  html body .battery-plan-progress{
    gap:8px !important;
    margin-top:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
  }

  html body .battery-plan-progress-labels{
    font-size:clamp(11px,.9vw,14px) !important;
  }

  html body .battery-plan-bar{
    height:10px !important;
  }

  html body .battery-plan-recommend,
  html body .battery-plan-card .battery-plan-recommend.risk-safe,
  html body .battery-plan-card .battery-plan-recommend.risk-warn,
  html body .battery-plan-card .battery-plan-recommend.risk-danger{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:baseline !important;
    row-gap:clamp(10px,.9vw,14px) !important;
    column-gap:clamp(14px,1.25vw,22px) !important;
    padding:clamp(12px,1vw,16px) clamp(16px,1.45vw,22px) !important;
    border-radius:18px !important;
  }

  html body .battery-plan-recommend .recommend-title{
    margin:0 !important;
    font-size:clamp(20px,1.7vw,27px) !important;
    line-height:1.05 !important;
  }

  html body .battery-plan-recommend p{
    font-size:clamp(13px,1.05vw,16px) !important;
    line-height:1.22 !important;
    white-space:normal !important;
  }

  html body .battery-plan-solar-row{
    padding:clamp(12px,1.05vw,16px) clamp(16px,1.35vw,20px) !important;
    font-size:clamp(18px,1.45vw,24px) !important;
    line-height:1.12 !important;
    border-radius:18px !important;
  }

  html body .battery-plan-metrics{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    padding:12px 14px !important;
    border-radius:18px !important;
  }

  html body .battery-plan-metrics div{
    padding:0 12px !important;
    border-right:1px solid rgba(126,184,235,.14) !important;
    border-top:0 !important;
  }

  html body .battery-plan-metrics div:last-child{
    border-right:0 !important;
  }

  html body .battery-plan-metrics div:nth-child(n+3){
    padding-top:0 !important;
    padding-bottom:0 !important;
    border-top:0 !important;
  }

  html body .battery-plan-metrics span{
    font-size:clamp(10px,.78vw,12px) !important;
    line-height:1.15 !important;
  }

  html body .battery-plan-metrics strong{
    font-size:clamp(19px,1.6vw,26px) !important;
  }

  html body .forecast-combo .consumption-card{
    min-height:0 !important;
    padding:clamp(18px,1.8vw,26px) !important;
    border-radius:clamp(22px,2vw,32px) !important;
  }
}

/* Inverter image replacement + desktop consumption bento chart. */
.inverter-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.28));
  pointer-events:none;
  user-select:none;
}

.consumption-chart,
.consumption-stat-grid,
.bill-forecast-mini,
.bill-forecast-card{
  display:none;
}

@media(min-width:641px){
  html body .flow-inv{
    width:clamp(148px,13vw,186px) !important;
    height:clamp(148px,13vw,186px) !important;
    border:0 !important;
    border-radius:0 !important;
    background:none !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  html body .flow-inv::before,
  html body .flow-inv::after{
    content:none !important;
    display:none !important;
  }

  html body .flow-inv .inverter-img{
    transform:scale(1.05);
  }

  html body .battery-current-card,
  html body .battery-runtime-card{
    grid-template-columns:clamp(50px,4.5vw,66px) minmax(0,1fr) !important;
    column-gap:clamp(16px,1.5vw,22px) !important;
    padding:clamp(16px,1.5vw,23px) clamp(24px,2.1vw,32px) 25px !important;
  }

  html body .battery-current-card .overview-icon,
  html body .battery-runtime-card .overview-icon{
    width:clamp(50px,4.5vw,66px) !important;
    height:clamp(50px,4.5vw,66px) !important;
    align-self:center !important;
  }

  html body .battery-current-card .overview-icon .energy-icon-img,
  html body .battery-runtime-card .overview-icon .energy-icon-img{
    transform:scale(1.2) !important;
  }

  html body .battery-current-card .overview-label,
  html body .battery-runtime-card .overview-label{
    align-self:end !important;
    transform:translateY(1px);
  }

  html body .battery-current-card .overview-soc,
  html body .battery-runtime-card .overview-runtime-value{
    margin-top:1px !important;
  }

  html body .battery-current-card .overview-sub,
  html body .battery-runtime-card .overview-sub{
    margin-top:8px !important;
  }

  html body .consumption-card{
    position:relative !important;
    display:grid !important;
    grid-template-columns:minmax(310px,.78fr) minmax(430px,1.15fr) minmax(320px,.82fr) !important;
    grid-template-areas:
      "cons-head cons-chart cons-forecast-mini"
      "cons-period cons-chart cons-forecast"
      "cons-avg cons-chart cons-forecast"
      "cons-values cons-stats cons-forecast"
      "cons-meter cons-stats cons-forecast" !important;
    align-items:start !important;
    align-content:start !important;
    column-gap:clamp(16px,1.7vw,24px) !important;
    row-gap:clamp(10px,1vw,15px) !important;
  }

  html body .consumption-head{
    grid-area:cons-head;
    position:static !important;
  }

  html body .consumption-card .insight-value{
    font-size:clamp(34px,2.9vw,46px) !important;
    line-height:.95 !important;
    white-space:nowrap !important;
  }

  html body .consumption-card .consumption-card-icon{
    position:absolute !important;
    top:clamp(18px,1.8vw,26px) !important;
    right:clamp(18px,1.8vw,26px) !important;
    z-index:2 !important;
    width:clamp(52px,4.45vw,66px) !important;
    height:clamp(52px,4.45vw,66px) !important;
    flex-basis:clamp(52px,4.45vw,66px) !important;
  }

  html body .consumption-card .insight-sub{
    margin:0 !important;
  }

  html body .consumption-card #homeConsumptionPeriod{
    grid-area:cons-period;
  }

  html body .consumption-card #homeConsumptionAvg{
    grid-area:cons-avg;
  }

  html body .consumption-card .consumption-value-grid{
    grid-area:cons-values;
    align-self:start;
    align-content:start;
    grid-template-columns:minmax(0,1fr) !important;
    gap:8px !important;
    margin-top:0 !important;
  }

  html body .consumption-card .consumption-value-grid div{
    padding:8px 10px !important;
    min-height:0 !important;
    overflow-wrap:anywhere;
  }

  html body .consumption-card .consumption-meter{
    grid-area:cons-meter;
    align-self:start;
    margin-top:0 !important;
  }

  html body .bill-forecast-mini{
    grid-area:cons-forecast-mini;
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:clamp(7px,.65vw,9px);
    align-self:start;
    min-width:0;
    padding-right:clamp(72px,5.2vw,92px);
  }

  html body .bill-forecast-mini div{
    min-width:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:baseline;
    column-gap:clamp(7px,.65vw,10px);
    padding:clamp(7px,.7vw,10px) clamp(10px,.95vw,14px);
    border:1px solid rgba(116,213,255,.18);
    border-radius:15px;
    background:rgba(6,31,66,.3);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  }

  html body .bill-forecast-mini strong{
    min-width:0;
    color:#78d5ff;
    font-size:clamp(13px,1.05vw,16px);
    line-height:1;
    font-weight:950;
    white-space:nowrap;
    text-shadow:0 0 14px rgba(120,213,255,.2);
  }

  html body .bill-forecast-mini span{
    min-width:0;
    color:rgba(216,235,255,.68);
    font-size:clamp(9px,.75vw,11px);
    line-height:1.08;
    font-weight:780;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  html body .bill-forecast-card{
    grid-area:cons-forecast;
    position:relative;
    z-index:1;
    display:grid;
    align-self:stretch;
    align-content:center;
    justify-items:stretch;
    gap:clamp(9px,.9vw,13px);
    margin-top:clamp(6px,.65vw,10px);
    padding:clamp(18px,1.7vw,25px) clamp(18px,1.7vw,26px);
    border:1px solid rgba(116,213,255,.24);
    border-radius:18px;
    background:
      radial-gradient(circle at 100% 0%,rgba(114,216,255,.2),transparent 42%),
      linear-gradient(135deg,rgba(14,87,158,.38),rgba(3,27,58,.32));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 26px rgba(0,0,0,.16);
  }

  html body .bill-forecast-card > div{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:clamp(8px,.75vw,11px);
    min-width:0;
  }

  html body .bill-forecast-card span,
  html body .bill-forecast-card p{
    margin:0;
    color:rgba(216,235,255,.74);
    font-size:clamp(12px,.98vw,15px);
    line-height:1.22;
    font-weight:780;
  }

  html body .bill-forecast-card span{
    order:2;
    color:rgba(230,242,255,.78);
    font-size:clamp(13px,1vw,16px);
    font-weight:900;
  }

  html body .bill-forecast-card strong{
    order:1;
    justify-self:end;
    max-width:100%;
    color:#78d5ff;
    font-size:clamp(34px,3.25vw,52px);
    line-height:.95;
    font-weight:950;
    white-space:nowrap;
    text-shadow:0 0 18px rgba(120,213,255,.26);
  }

  html body .bill-forecast-card p:first-of-type{
    color:rgba(244,249,255,.88);
    font-weight:900;
  }

  html body .consumption-chart{
    grid-area:cons-chart;
    position:relative;
    z-index:1;
    display:grid;
    gap:10px;
    margin-top:0;
  }

  html body .consumption-chart-title{
    color:rgba(246,250,255,.94);
    font-size:clamp(14px,1.18vw,18px);
    line-height:1.18;
    font-weight:900;
  }

  html body .consumption-bars{
    min-height:clamp(122px,10.5vw,150px);
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    align-items:end;
    gap:clamp(8px,.9vw,12px);
    padding:22px 6px 0;
    background:
      repeating-linear-gradient(0deg,rgba(156,199,255,.18) 0 1px,transparent 1px 32px);
    border-radius:12px;
  }

  html body .consumption-chart-empty{
    grid-column:1 / -1;
    align-self:center;
    justify-self:center;
    color:rgba(226,240,255,.62);
    font-size:13px;
    font-weight:800;
  }

  html body .consumption-bar-item{
    min-width:0;
    height:100%;
    display:grid;
    grid-template-rows:auto 1fr auto;
    align-items:end;
    justify-items:center;
    gap:6px;
    color:rgba(226,240,255,.84);
  }

  html body .consumption-bar-value{
    font-size:clamp(11px,.9vw,14px);
    line-height:1;
    font-weight:850;
    white-space:nowrap;
  }

  html body .consumption-bar{
    width:min(72%,34px);
    height:var(--bar-height);
    min-height:16px;
    border-radius:7px 7px 3px 3px;
    background:linear-gradient(180deg,#3aa0ff,#0067f2);
    box-shadow:0 0 14px rgba(43,143,255,.3), inset 0 1px 0 rgba(255,255,255,.24);
  }

  html body .consumption-bar-date{
    font-size:clamp(10px,.82vw,13px);
    line-height:1.05;
    font-weight:750;
    white-space:nowrap;
  }

  html body .consumption-stat-grid{
    grid-area:cons-stats;
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    border:1px solid rgba(140,190,255,.18);
    border-radius:20px;
    overflow:hidden;
    background:rgba(2,18,38,.28);
  }

  html body .consumption-stat-grid div{
    min-width:0;
    padding:clamp(11px,1.05vw,15px);
    display:grid;
    gap:6px;
    border-right:1px solid rgba(140,190,255,.15);
    border-bottom:1px solid rgba(140,190,255,.15);
  }

  html body .consumption-stat-grid div:nth-child(2n){
    border-right:0;
  }

  html body .consumption-stat-grid div:nth-child(n+3){
    border-bottom:0;
  }

  html body .consumption-stat-grid strong{
    color:rgba(247,251,255,.98);
    font-size:clamp(19px,1.65vw,28px);
    line-height:1;
    font-weight:950;
    white-space:nowrap;
  }

  html body .consumption-stat-grid span{
    color:rgba(226,240,255,.7);
    font-size:clamp(11px,.95vw,14px);
    line-height:1.16;
    font-weight:760;
  }

  html body .power-profile-card{
    grid-column:1 / -1;
    display:grid;
    gap:clamp(15px,1.35vw,20px);
    padding:clamp(20px,1.9vw,28px) !important;
    border:1px solid rgba(122,183,255,.2);
    background:
      radial-gradient(circle at 78% 4%,rgba(90,168,255,.12),transparent 36%),
      linear-gradient(135deg,rgba(7,24,43,.88),rgba(3,16,31,.9));
  }

  html body .power-profile-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
  }

  html body .power-profile-head h2{
    margin:3px 0 0;
    color:rgba(246,250,255,.98);
    font-size:clamp(24px,2.2vw,34px);
    line-height:1.06;
    font-weight:950;
  }

  html body .power-profile-time{
    color:#6da8ff;
    font-size:clamp(20px,1.85vw,30px);
    line-height:1;
    font-weight:900;
    white-space:nowrap;
  }

  html body .power-profile-time::first-letter{
    color:#3f8cff;
  }

  html body .power-profile-legend{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:clamp(10px,1vw,16px);
  }

  html body .power-profile-legend div{
    min-width:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"dot label" ". value";
    align-items:center;
    column-gap:9px;
    row-gap:3px;
    padding:clamp(8px,.85vw,12px) clamp(10px,.95vw,14px);
    border:1px solid rgba(132,187,255,.14);
    border-radius:15px;
    background:rgba(8,28,52,.42);
  }

  html body .legend-dot{
    grid-area:dot;
    width:10px;
    height:10px;
    border-radius:999px;
    box-shadow:0 0 10px currentColor;
  }

  html body .legend-dot.production{ color:#36dd82; background:#36dd82; }
  html body .legend-dot.consumption{ color:#ffc42f; background:#ffc42f; }
  html body .legend-dot.grid{ color:#8b72ff; background:#8b72ff; }
  html body .legend-dot.battery{ color:#66caff; background:#66caff; }
  html body .legend-dot.soc{ color:#377fff; background:#377fff; }
  html body .legend-dot.time{ color:#6da8ff; background:#6da8ff; }

  html body .power-profile-time-card{
    display:none !important;
  }

  html body .power-profile-legend span:not(.legend-dot){
    grid-area:label;
    min-width:0;
    color:rgba(226,240,255,.7);
    font-size:clamp(11px,.95vw,14px);
    line-height:1.08;
    font-weight:800;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  html body .power-profile-legend strong{
    grid-area:value;
    min-width:0;
    color:rgba(250,253,255,.96);
    font-size:clamp(15px,1.28vw,21px);
    line-height:1;
    font-weight:920;
    white-space:nowrap;
  }

  html body .power-profile-plot{
    min-height:clamp(260px,24vw,390px);
    border-radius:18px;
    background:
      linear-gradient(180deg,rgba(255,255,255,.035),transparent),
      rgba(0,10,22,.26);
    overflow:hidden;
  }

  html body .power-profile-svg{
    width:100%;
    height:auto;
    display:block;
  }

  html body .profile-grid line{
    stroke:rgba(208,228,255,.16);
    stroke-width:1;
    vector-effect:non-scaling-stroke;
  }

  html body .profile-axis text{
    fill:rgba(224,238,255,.64);
    font-size:20px;
    font-weight:760;
  }

  html body .profile-axis-left text{
    text-anchor:end;
  }

  html body .profile-axis-left .profile-axis-title-left{
    font-size:18px;
  }

  html body .profile-axis-right text{
    text-anchor:start;
  }

  html body .profile-axis-right .profile-axis-title-right{
    text-anchor:end;
    font-size:18px;
  }

  html body .profile-axis-bottom text{
    text-anchor:middle;
    font-size:19px;
  }

  html body .profile-area{
    fill:url(#profileConsumptionFill);
  }

  html body .profile-line{
    fill:none;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
  }

  html body .production-line{ stroke:#36dd82; }
  html body .consumption-line{ stroke:#ffc42f; }
  html body .grid-profile-line{ stroke:#8b72ff; }
  html body .battery-profile-line{ stroke:#66caff; }
  html body .soc-profile-line{ stroke:#377fff; stroke-width:1.6; }

  html body .profile-now-line{
    stroke:#317cff;
    stroke-width:2.2;
    stroke-dasharray:12 10;
    opacity:.72;
    vector-effect:non-scaling-stroke;
  }

  html body .profile-scrub-line{
    stroke:rgba(125,213,255,.82);
    stroke-width:1.35;
    stroke-dasharray:7 7;
    vector-effect:non-scaling-stroke;
  }

  html body .profile-scrub-dot{
    fill:#7dd5ff;
    stroke:rgba(255,255,255,.72);
    stroke-width:1.15;
    vector-effect:non-scaling-stroke;
  }

  html body .profile-scrub-hitbox{
    fill:transparent;
    cursor:crosshair;
    touch-action:none;
  }

  html body .power-profile-empty{
    min-height:260px;
    display:grid;
    place-items:center;
    color:rgba(225,240,255,.62);
    font-size:14px;
    font-weight:850;
  }
}

@media(max-width:640px){
  html body .power-profile-card{
    display:grid !important;
    gap:clamp(8px,2.5vw,12px) !important;
    width:100% !important;
    margin:0 auto !important;
    padding:clamp(14px,4vw,20px) clamp(16px,4.5vw,22px) clamp(15px,4.2vw,20px) !important;
    border:1px solid rgba(122,183,255,.2) !important;
    border-radius:clamp(24px,8vw,34px) !important;
    background:
      radial-gradient(circle at 84% 6%,rgba(90,168,255,.12),transparent 38%),
      linear-gradient(135deg,rgba(7,24,43,.9),rgba(3,16,31,.92)) !important;
  }

  html body .power-profile-head{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:10px;
  }

  html body .power-profile-head h2{
    margin:7px 0 0 !important;
    max-width:100%;
    font-size:clamp(22px,5.8vw,28px) !important;
    line-height:1.04 !important;
    font-weight:950 !important;
    white-space:nowrap !important;
    letter-spacing:0 !important;
  }

  html body .power-profile-time{
    display:none !important;
  }

  html body .power-profile-legend{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }

  html body .power-profile-legend div{
    min-width:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"dot label" ". value";
    align-items:center;
    column-gap:7px;
    row-gap:2px;
    padding:8px 10px;
    border:1px solid rgba(132,187,255,.14);
    border-radius:14px;
    background:rgba(8,28,52,.42);
  }

  html body .legend-dot{
    grid-area:dot;
    width:8px;
    height:8px;
    border-radius:999px;
    box-shadow:0 0 8px currentColor;
  }

  html body .legend-dot.production{ color:#36dd82; background:#36dd82; }
  html body .legend-dot.consumption{ color:#ffc42f; background:#ffc42f; }
  html body .legend-dot.grid{ color:#8b72ff; background:#8b72ff; }
  html body .legend-dot.battery{ color:#66caff; background:#66caff; }
  html body .legend-dot.soc{ color:#377fff; background:#377fff; }
  html body .legend-dot.time{ color:#6da8ff; background:#6da8ff; }

  html body .power-profile-time-card{
    display:grid !important;
  }

  html body .power-profile-legend span:not(.legend-dot){
    grid-area:label;
    min-width:0;
    color:rgba(226,240,255,.72);
    font-size:11px;
    line-height:1.05;
    font-weight:800;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  html body .power-profile-legend strong{
    grid-area:value;
    min-width:0;
    color:rgba(250,253,255,.96);
    font-size:clamp(14px,4.2vw,18px);
    line-height:1;
    font-weight:920;
    white-space:nowrap;
  }

  html body .power-profile-plot{
    height:auto !important;
    min-height:0 !important;
    border-radius:16px;
    background:rgba(0,10,22,.26);
    overflow:hidden;
  }

  html body .power-profile-svg{
    width:100%;
    height:auto !important;
    min-height:0 !important;
    display:block;
  }

  html body .profile-axis text{
    fill:rgba(224,238,255,.64);
    font-size:19px;
    font-weight:760;
  }

  html body .profile-axis-left text{
    text-anchor:end;
  }

  html body .profile-axis-right text{
    text-anchor:start;
  }

  html body .profile-axis-left .profile-axis-title-left,
  html body .profile-axis-right .profile-axis-title-right{
    font-size:17px;
  }

  html body .profile-axis-right .profile-axis-title-right{
    text-anchor:end;
  }

  html body .profile-axis-bottom text{
    text-anchor:middle;
    font-size:18px;
  }

  html body .profile-grid line{
    stroke:rgba(208,228,255,.16);
    stroke-width:1;
    vector-effect:non-scaling-stroke;
  }

  html body .profile-line{
    fill:none;
    stroke-width:1.55;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
  }

  html body .production-line{ stroke:#36dd82; }
  html body .consumption-line{ stroke:#ffc42f; }
  html body .grid-profile-line{ stroke:#8b72ff; }
  html body .battery-profile-line{ stroke:#66caff; }
  html body .soc-profile-line{ stroke:#377fff; stroke-width:1.45; }

  html body .profile-area{
    fill:url(#profileConsumptionFill);
  }

  html body .profile-now-line{
    stroke:#317cff;
    stroke-width:2.1;
    stroke-dasharray:12 10;
    opacity:.72;
    vector-effect:non-scaling-stroke;
  }

  html body .profile-scrub-line{
    stroke:rgba(125,213,255,.82);
    stroke-width:1.25;
    stroke-dasharray:7 7;
    vector-effect:non-scaling-stroke;
  }

  html body .profile-scrub-dot{
    fill:#7dd5ff;
    stroke:rgba(255,255,255,.72);
    stroke-width:1.1;
    vector-effect:non-scaling-stroke;
  }

  html body .profile-scrub-hitbox{
    fill:transparent;
    cursor:crosshair;
    touch-action:none;
  }

  html body .power-profile-empty{
    min-height:220px;
    display:grid;
    place-items:center;
    color:rgba(225,240,255,.62);
    font-size:13px;
    font-weight:850;
  }

  html body #mobileFlowDiagram .mobile-flow-inverter{
    width:clamp(124px,34vw,150px) !important;
    height:clamp(124px,34vw,150px) !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    overflow:visible !important;
  }

  html body #mobileFlowDiagram .mobile-flow-inverter::before,
  html body #mobileFlowDiagram .mobile-flow-inverter::after{
    content:none !important;
    display:none !important;
  }

  html body #mobileFlowDiagram .mobile-flow-inverter .inverter-img{
    width:100% !important;
    height:100% !important;
    transform:scale(1.03);
  }
}

html{
  --battery-status-color:#7dffc0;
  --battery-status-soft:#65f0ad;
  --battery-status-dark:#2fa77f;
  --battery-status-rgb:125,255,192;
}

html.battery-soc-mid{
  --battery-status-color:#ffe66d;
  --battery-status-soft:#ffd04f;
  --battery-status-dark:#b58d24;
  --battery-status-rgb:255,220,92;
}

html.battery-soc-low{
  --battery-status-color:#ff6b6b;
  --battery-status-soft:#ff8a7a;
  --battery-status-dark:#b83a3a;
  --battery-status-rgb:255,107,107;
}

html body .battery-current-card{
  border-color:rgba(var(--battery-status-rgb),.26) !important;
  background:
    radial-gradient(circle at 18% 18%,rgba(var(--battery-status-rgb),.16),transparent 34%),
    radial-gradient(circle at 90% 90%,rgba(var(--battery-status-rgb),.08),transparent 32%),
    linear-gradient(145deg,rgba(10,42,48,.58),rgba(3,18,30,.42)) !important;
}

html body .battery-current-card .overview-icon{
  color:var(--battery-status-color) !important;
  box-shadow:inset 0 0 22px rgba(255,255,255,.07),0 0 30px rgba(var(--battery-status-rgb),.18) !important;
}

html body .battery-current-card .overview-soc{
  color:var(--battery-status-color) !important;
}

html body .battery-current-card .overview-sub::after{
  background:linear-gradient(90deg,var(--battery-status-dark),var(--battery-status-color)) !important;
  box-shadow:0 0 18px rgba(var(--battery-status-rgb),.42) !important;
}

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

html body,
html body.home-normal-load,
html body.home-high-load,
html body.home-very-high-load{
  --home:#78d5ff;
}

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

html body .home-line,
html body .home-runner,
html body .home-path{
  filter:drop-shadow(0 0 8px rgba(120,213,255,.62)) !important;
}

html body .desktop-home-dot,
html body .home-dot{
  filter:drop-shadow(0 0 7px rgba(120,213,255,.76)) drop-shadow(0 0 13px rgba(120,213,255,.42)) !important;
}

html body .battery-line,
html body .battery-runner,
html body .battery-path,
html body .battery-discharge-dot,
html body .battery-charge-dot,
html body .desktop-battery-dot,
html body .desktop-battery-charge-dot{
  color:#72ffb6 !important;
  fill:#72ffb6 !important;
  stroke:#72ffb6 !important;
}

html body .battery-line,
html body .battery-runner,
html body .battery-path{
  filter:drop-shadow(0 0 8px rgba(114,255,182,.64)) !important;
}

html body .battery-discharge-dot,
html body .battery-charge-dot,
html body .desktop-battery-dot,
html body .desktop-battery-charge-dot{
  filter:drop-shadow(0 0 7px rgba(114,255,182,.78)) drop-shadow(0 0 13px rgba(114,255,182,.42)) !important;
}

/* Flow-only motion mode: keep SVG animateMotion dots, stop every CSS animation. */
html.flow-only-motion *,
html.flow-only-motion *::before,
html.flow-only-motion *::after{
  animation:none !important;
  transition:none !important;
  scroll-behavior:auto !important;
}

html.flow-only-motion .flow-runner,
html.flow-only-motion .home-runner,
html.flow-only-motion .battery-runner{
  display:none !important;
}

/* Default performance trim: keep layout and flow dots, reduce expensive paints. */
html.flow-only-motion body::before,
html.flow-only-motion .weather-bg::before,
html.flow-only-motion .weather-bg::after,
html.flow-only-motion .premium-hero::before,
html.flow-only-motion .overview-card::before,
html.flow-only-motion .consumption-card::before,
html.flow-only-motion .battery-plan-card::after{
  filter:none !important;
}

html.flow-only-motion .sky-aura,
html.flow-only-motion .horizon-glow,
html.flow-only-motion .home-silhouette{
  display:none !important;
}

html.flow-only-motion .weather-bg,
html.flow-only-motion .shell,
html.flow-only-motion .overview-card,
html.flow-only-motion .ai-card,
html.flow-only-motion .insight-card,
html.flow-only-motion .settings-panel,
html.flow-only-motion .timeline-card{
  transform:none !important;
  will-change:auto !important;
}

html.flow-only-motion .overview-card,
html.flow-only-motion .ai-card,
html.flow-only-motion .insight-card,
html.flow-only-motion .settings-panel,
html.flow-only-motion .timeline-card,
html.flow-only-motion .overview-battery,
html.flow-only-motion .overview-runtime,
html.flow-only-motion .battery-plan-card,
html.flow-only-motion .consumption-card,
html.flow-only-motion .bill-forecast-card,
html.flow-only-motion .forecast-combo,
html.flow-only-motion .hero-weather-card{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

@supports(content-visibility:auto){
  html.flow-only-motion .ai-dashboard-grid,
  html.flow-only-motion .insight-grid,
  html.flow-only-motion .settings-panel.scheduler-card,
  html.flow-only-motion .timeline-card,
  html.flow-only-motion footer{
    content-visibility:auto;
    contain-intrinsic-size:auto 520px;
  }
}

html.flow-only-motion .hero-weather-card .moon-visual,
html.flow-only-motion .hero-weather-card .weather-visual,
html.flow-only-motion .weather-visual,
html.flow-only-motion .energy-icon-img,
html.flow-only-motion .inverter-img,
html.flow-only-motion .consumption-card-icon{
  filter:none !important;
}

html.flow-only-motion .flow-line-new,
html.flow-only-motion .desktop-flow-dot,
html.flow-only-motion .mobile-deye-line,
html.flow-only-motion .mobile-flow-dot,
html.flow-only-motion .home-line,
html.flow-only-motion .battery-line,
html.flow-only-motion .solar-line,
html.flow-only-motion .grid-line,
html.flow-only-motion .home-path,
html.flow-only-motion .battery-path,
html.flow-only-motion .solar-path,
html.flow-only-motion .grid-path{
  filter:none !important;
}

/* LG webOS TV performance mode: keep layout/color, trim expensive paint work. */
html.tv-browser *,
html.tv-browser *::before,
html.tv-browser *::after{
  scroll-behavior:auto !important;
}

html.tv-browser body::before,
html.tv-browser .weather-bg::before,
html.tv-browser .weather-bg::after,
html.tv-browser .premium-hero::before,
html.tv-browser .overview-card::before,
html.tv-browser .consumption-card::before,
html.tv-browser .battery-plan-card::after{
  animation:none !important;
  filter:none !important;
}

html.tv-browser body.tv-ambient .weather-bg,
html.tv-browser body.tv-ambient .shell{
  animation:none !important;
  transform:none !important;
}

html.tv-browser .overview-card,
html.tv-browser .ai-card,
html.tv-browser .insight-card,
html.tv-browser .settings-panel,
html.tv-browser .timeline-card,
html.tv-browser .overview-battery,
html.tv-browser .overview-runtime,
html.tv-browser .battery-plan-card,
html.tv-browser .consumption-card,
html.tv-browser .bill-forecast-card,
html.tv-browser .forecast-combo,
html.tv-browser .flow-inverter-halo,
html.tv-browser #mobileFlowDiagram,
html.tv-browser .mobile-flow-node,
html.tv-browser .hero-weather-card{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  box-shadow:0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

html.tv-browser .energy-icon-img,
html.tv-browser .consumption-card-icon,
html.tv-browser .hero-weather-card .moon-visual,
html.tv-browser .hero-weather-card .weather-visual,
html.tv-browser .weather-visual,
html.tv-browser .flow-inv .inverter-img,
html.tv-browser .inverter-img{
  filter:none !important;
  animation:none !important;
}

html.tv-browser .flow-line-new,
html.tv-browser .desktop-flow-dot,
html.tv-browser .mobile-deye-line,
html.tv-browser .mobile-flow-dot,
html.tv-browser .home-line,
html.tv-browser .battery-line,
html.tv-browser .solar-line,
html.tv-browser .grid-line,
html.tv-browser .home-path,
html.tv-browser .battery-path,
html.tv-browser .solar-path,
html.tv-browser .grid-path,
html.tv-browser .home-runner,
html.tv-browser .battery-runner{
  filter:none !important;
}

html.tv-browser .desktop-flow-dot,
html.tv-browser .mobile-flow-dot{
  opacity:.92 !important;
}

html.tv-browser .flow-line-new{
  opacity:.78 !important;
}

html.tv-browser .weather-bg{
  background-attachment:scroll !important;
  transform:none !important;
}

/* Desktop section rhythm: keep primary sessions evenly spaced. */
@media(min-width:900px){
  html body .shell{
    --desktop-section-gap:clamp(20px,1.65vw,28px);
  }

  html body .shell > .premium-hero,
  html body .shell > .overview-card,
  html body .shell > .ai-dashboard-grid,
  html body .shell > .insight-grid,
  html body .shell > .settings-panel.scheduler-card{
    margin-top:0 !important;
    margin-bottom:var(--desktop-section-gap) !important;
  }

  html body .shell > .ai-dashboard-grid,
  html body .shell > .insight-grid{
    gap:var(--desktop-section-gap) !important;
  }

  html body .shell > .insight-grid > .forecast-combo{
    gap:var(--desktop-section-gap) !important;
  }

  html body .shell > .timeline-card{
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  html body .shell > footer{
    margin-top:var(--desktop-section-gap) !important;
  }

  html body .battery-plan-header{
    padding-top:clamp(4px,.55vw,8px) !important;
  }

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

  html body .battery-plan-label{
    line-height:1.2 !important;
  }

  html body .battery-plan-title{
    line-height:1.02 !important;
  }
}

/* Keep the time-of-day background image, but remove stray pointy/rectangular card artifacts. */
html body .home-silhouette,
html body .home-silhouette::before,
html body .home-silhouette::after{
  display:none !important;
  content:none !important;
  opacity:0 !important;
}

html body .overview-card,
html body .ai-card,
html body .battery-plan-card,
html body .consumption-card,
html body .settings-panel.scheduler-card,
html body .timeline-card{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 0 1px rgba(126,184,235,.05) !important;
}

/* Standalone-friendly page controls. Kept opaque to avoid costly live blur on TV browsers. */
.page-utilities{
  position:fixed;
  right:max(18px,env(safe-area-inset-right,0px));
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  z-index:120;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  pointer-events:none;
}

.page-utility-button{
  width:46px;
  height:46px;
  min-width:46px;
  min-height:46px;
  box-sizing:border-box;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(151,207,255,.42);
  border-radius:50%;
  color:#eef8ff;
  background:rgba(7,29,51,.94);
  box-shadow:0 8px 24px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.15);
  font:800 26px/1 system-ui,sans-serif;
  cursor:pointer;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.page-utility-button:focus-visible{
  outline:3px solid rgba(102,199,255,.78);
  outline-offset:3px;
}

.page-utility-button:active{
  background:rgba(17,61,96,.98);
  transform:translateY(1px);
}

.page-refresh-button:disabled{
  cursor:wait;
  opacity:.7;
}

.notification-button{
  font-size:22px;
}

.notification-button.is-active{
  color:#06243b;
  border-color:#7be8ac;
  background:#6ee7a5;
  box-shadow:0 8px 24px rgba(0,0,0,.24),0 0 18px rgba(110,231,165,.38);
}

.notification-button:disabled{
  cursor:wait;
  opacity:.72;
}

.back-to-top-button{
  display:none;
}

@media(max-width:640px){
  .page-utilities{
    right:max(14px,env(safe-area-inset-right,0px));
    bottom:calc(16px + env(safe-area-inset-bottom,0px));
  }

  .page-utility-button{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    font-size:24px;
  }

  .back-to-top-button{
    display:grid;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    pointer-events:none;
  }

  .back-to-top-button.is-visible{
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
  }
}

@media(prefers-reduced-motion:reduce){
  .back-to-top-button{
    transition:none !important;
  }
}

html body .battery-plan-card::after,
html body .consumption-card::after{
  display:none !important;
  content:none !important;
}