/* ============ LIGHT "ENERGY LAB" THEME ============ */
  :root{
    --bg:#0A2A20;            /* deepened base — crafted console */
    --card:#0E3527;          /* flat card surface */
    --ink:#FFFFFF;
    --muted:#8FE6C2;
    --line:rgba(143,230,194,.14);  /* hairline borders */
    --emerald:#10B981;       /* the ONE accent */
    --emerald-bright:#34D399;
    --emerald-soft:rgba(16,185,129,.10);
    --amber:#F59E0B;
    --amber-bright:#F59E0B;
    --amber-soft:rgba(245,158,11,.12);
    --red:#EF4444; --red-soft:rgba(239,68,68,.12);
    --sidebar:#0A2A20;
    --sidebar-ink:#9fc3ae;
    --radius:14px;
    --shadow:none;
  }
  ::selection{background:rgba(16,185,129,.32);}
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:#1c4a38;border-radius:8px;border:2px solid var(--bg);}
  ::-webkit-scrollbar-thumb:hover{background:#2a6a50;}
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:"Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    background:var(--bg); color:var(--ink); min-height:100vh;
  }
  .app{display:flex; min-height:100vh;}
  h1,h2,h3,.view-title,.brand h1{font-family:Cambria,Georgia,serif; letter-spacing:-0.01em;}
  .ic{width:18px;height:18px;flex-shrink:0;}
  /* micro-kickers: section eyebrows */
  .kicker{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;
    color:var(--muted);margin:2px 0 12px;}
  .hr{height:1px;background:rgba(143,230,194,.12);margin:24px 0;border:0;}
  .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 5px 0 10px;vertical-align:1px;}
  .dot:first-child{margin-left:0;}
  .hint-flow{font-size:11px; letter-spacing:1.2px; color:#8FE6C2; font-weight:700;}

  /* ============ SIDEBAR ============ */
  /* ============ LEFT ICON RAIL (v7: 3-column shell) ============ */
  .rail{
    width:76px; flex-shrink:0; position:fixed; left:0; top:0; bottom:0; z-index:50;
    background:#081F18; border-right:1px solid rgba(143,230,194,.14);
    display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:6px;
  }
  .rail-logo{
    width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
    border:1px solid rgba(16,185,129,.45); background:rgba(16,185,129,.07);
    color:#34D399; flex-shrink:0; margin-bottom:12px;
  }
  .rail-logo .ic{width:24px; height:24px;}
  .rail .nav-btn{
    position:relative; display:flex; align-items:center; justify-content:center;
    width:48px; min-width:48px; height:48px; min-height:48px; padding:0;
    background:transparent; border:0; color:#9fc3ae; border-radius:12px;
    cursor:pointer; transition:background .15s, color .15s; text-align:center;
  }
  .rail .nav-btn:hover{background:rgba(143,230,194,.06); color:#d7efe4;}
  .rail .nav-btn:active{transform:scale(.96);}
  .rail .nav-btn .ico{display:inline-flex; color:inherit; opacity:.85;}
  .rail .nav-btn .ico .ic{width:22px; height:22px;}
  .rail .nav-btn.active{background:rgba(16,185,129,.12); color:#34D399;}
  .rail .nav-btn.active .ico{opacity:1;}
  .rail .nav-btn.active::before{content:""; position:absolute; left:-14px; top:12px; bottom:12px;
    width:3px; border-radius:3px; background:var(--emerald);}
  .rail-sim{
    margin-top:auto; font-size:10px; font-weight:800; letter-spacing:1px;
    color:var(--amber-bright); border:1px dashed var(--amber-bright);
    border-radius:8px; padding:6px 5px;
  }

  /* ============ RIGHT INFO PANEL (v7: contextual per tab) ============ */
  .sidepanel{
    width:300px; flex-shrink:0; position:fixed; right:0; top:0; bottom:0; z-index:40; overflow-y:auto;
    background:#0C2F24; border-left:1px solid rgba(143,230,194,.14);
    padding:20px 16px 40px; scrollbar-width:thin; scrollbar-color:rgba(143,230,194,.25) transparent;
  }
  .sidepanel::-webkit-scrollbar{width:8px;}
  .sidepanel::-webkit-scrollbar-thumb{background:rgba(143,230,194,.18); border-radius:6px;}
  .sp-kicker{font-size:11px; text-transform:uppercase; letter-spacing:2px; color:var(--muted); margin:2px 2px 12px;}
  .sp-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:14px;}
  .sp-card h4{font-family:Cambria,Georgia,serif; color:#fff; font-size:17px; margin:0 0 10px;
    display:flex; align-items:center; gap:8px; letter-spacing:.01em;}
  .sp-card h4 .ic{width:18px; height:18px; color:var(--emerald-bright);}
  .sp-big{font-size:34px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; margin:2px 0 4px;}
  .sp-big small{font-size:14px; color:var(--muted); font-weight:600;}
  .sp-note{font-size:13px; color:var(--muted); line-height:1.55; margin:6px 0 0;}
  .sp-row{display:flex; justify-content:space-between; align-items:center; gap:8px;
    padding:8px 0; border-top:1px solid rgba(143,230,194,.10); font-size:13px; color:#d7efe4;
    font-variant-numeric:tabular-nums;}
  .sp-row:first-of-type{border-top:0;}
  .sp-row .ic{width:15px; height:15px; color:var(--muted); margin-right:8px; vertical-align:-2px;}
  .sp-row b{color:#fff; white-space:nowrap;}
  .sp-promo{background:#0B3B2C; border:1px solid rgba(16,185,129,.35); border-radius:var(--radius); padding:16px; margin-bottom:14px;}
  .sp-promo h4{font-family:Cambria,Georgia,serif; color:#fff; font-size:17px; margin:0 0 8px;
    display:flex; align-items:center; gap:8px;}
  .sp-promo h4 .ic{width:18px; height:18px; color:var(--emerald-bright);}
  .sp-list{list-style:none; margin:0; padding:0;}
  .sp-list li{display:flex; gap:9px; padding:8px 0; border-top:1px solid rgba(143,230,194,.10);
    font-size:13px; color:#d7efe4; line-height:1.5;}
  .sp-list li:first-child{border-top:0;}
  .sp-list li .ic{width:15px; height:15px; flex-shrink:0; margin-top:3px; color:var(--emerald-bright);}
  .sp-list li b{color:#8FE6C2; font-weight:700; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px;}
  .sp-bar{height:8px; border-radius:6px; background:rgba(255,255,255,.12); overflow:hidden; margin-top:10px;}
  .sp-bar i{display:block; height:100%; background:var(--emerald); border-radius:6px; transition:width .5s;}
  .sp-donut{width:150px; height:150px; display:block; margin:4px auto 10px;}
  .sp-donut-num{fill:#fff; font-size:24px; font-weight:800; font-variant-numeric:tabular-nums;}
  .sp-donut-sub{fill:#8FE6C2; font-size:11px; text-transform:uppercase; letter-spacing:1.5px;}
  .sp-pill{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.6px; color:var(--amber-bright);
    background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.4); border-radius:20px; padding:5px 12px;}

  /* KPI cards: icon chip + label + BIG tabular numeral (reference-dashboard look) */
  .kpi .k-label{display:flex; align-items:center; gap:10px;}
  .kpi .k-label .ic{background:rgba(16,185,129,.12); border-radius:10px; padding:7px;
    width:34px; height:34px; box-sizing:border-box; color:var(--emerald-bright); flex-shrink:0;}

  /* ============ MAIN + TOPBAR ============ */
  .main{flex:1; min-width:0; display:flex; flex-direction:column; margin-left:76px; margin-right:300px;}
  .topbar{
    position:sticky; top:0; z-index:40; background:#0A2A20;
    border-bottom:1px solid rgba(143,230,194,.14);
    display:flex; align-items:center; gap:16px; padding:12px 28px;
  }
  .live-pill{
    display:flex; align-items:center; gap:8px; font-weight:800; font-size:13px;
    letter-spacing:1px; color:var(--emerald); background:var(--emerald-soft);
    border-radius:999px; padding:7px 14px;
  }
  .live-dot{width:10px; height:10px; border-radius:50%; background:var(--emerald-bright);
    animation:pulse 1.4s ease-in-out infinite;}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.55);}50%{box-shadow:0 0 0 8px rgba(16,185,129,0);}}
  .clock{margin-left:auto; text-align:right;}
  .clock .sim{font-size:19px; font-weight:800; font-variant-numeric:tabular-nums;}
  .clock .real{font-size:11.5px; color:var(--muted);}
  .topbar .view-title{font-size:19px; font-weight:800;}
  .vt-ico .ic{width:19px; height:19px; color:var(--emerald-bright); vertical-align:-3px; margin-right:9px;}

  /* ============ SHOWCASE: demo mode, baseline toggle, splash, weather ============ */
  .topbar-actions{display:flex; align-items:center; gap:10px;}
  .btn-demo{white-space:nowrap;}
  .seg{display:flex; border:1px solid rgba(143,230,194,.25); border-radius:10px; overflow:hidden;}
  .seg-btn{background:transparent; border:0; color:var(--muted); font-weight:700; font-size:12.5px;
    padding:9px 13px; cursor:pointer; transition:background .12s, color .12s;}
  .seg-btn.active{background:#059669; color:#fff;}
  .seg-btn:not(.active):hover{color:#d7efe4;}
  .demo-caption{position:fixed; left:50%; transform:translateX(-50%); bottom:26px; z-index:150;
    background:#0C2F24; border:1px solid rgba(143,230,194,.25); border-radius:14px;
    padding:14px 18px; max-width:min(560px, calc(100vw - 32px)); box-shadow:0 8px 30px rgba(0,0,0,.5);
    display:none; align-items:center; gap:14px;}
  .demo-caption.show{display:flex;}
  .demo-caption .dc-kicker{font-size:11px; font-weight:800; letter-spacing:2px; color:var(--emerald-bright); white-space:nowrap;}
  .demo-caption .dc-text{font-size:14px; color:#eaf6ef; line-height:1.45;}
  .demo-caption .dc-dots{display:flex; gap:6px; margin-top:8px;}
  .demo-caption .dc-dots i{width:7px; height:7px; border-radius:50%; background:rgba(143,230,194,.25);}
  .demo-caption .dc-dots i.on{background:#34D399;}
  .demo-caption .btn{flex-shrink:0;}
  .baseline-banner{display:flex; align-items:center; gap:10px; background:rgba(245,158,11,.08);
    border:1px solid rgba(245,158,11,.4); color:#fcd9a0; border-radius:12px; padding:12px 16px;
    font-size:13.5px; margin-bottom:16px;}
  .baseline-banner .ic{width:17px; height:17px; color:#F59E0B; flex-shrink:0;}
  .baseline-banner[hidden]{display:none;}
  .wx-select{background:#0A2E23; color:#d7efe4; border:1px solid rgba(143,230,194,.25); border-radius:8px;
    font-size:12.5px; padding:6px 8px; margin-left:10px; cursor:pointer;}
  .wx-temp{font-size:12.5px; color:var(--muted); margin-left:8px; font-variant-numeric:tabular-nums;}
  .splash{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
    background:rgba(7,26,20,.97); transition:opacity .45s ease; cursor:pointer; padding:24px;}
  .splash.hide{opacity:0; pointer-events:none;}
  .splash-inner{max-width:640px; text-align:center;}
  .splash-kicker{font-size:12px; font-weight:800; letter-spacing:4px; color:#34D399; margin-bottom:18px;}
  .splash h1{font-family:Cambria,Georgia,serif; color:#fff; font-size:clamp(30px,5vw,52px);
    letter-spacing:-0.01em; line-height:1.15; margin:0 0 16px;}
  .splash p{color:#8FE6C2; font-size:17px; margin:0 0 30px;}
  .splash .btn{font-size:16px; padding:14px 30px;}
  .splash .btn .ic{width:18px; height:18px;}

  main{padding:24px 28px 60px; max-width:1240px; width:100%; margin:0 auto;}
  .view{display:none;}
  .view.active{display:block; animation:viewin .32s cubic-bezier(.2,.7,.25,1);}
  @keyframes viewin{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
  /* staggered cascade: direct children of the newly opened view drift in one after another */
  .view.active > *{animation:cardin .45s cubic-bezier(.2,.7,.25,1) backwards;}
  .view.active > *:nth-child(2){animation-delay:.05s;}
  .view.active > *:nth-child(3){animation-delay:.1s;}
  .view.active > *:nth-child(4){animation-delay:.15s;}
  .view.active > *:nth-child(5){animation-delay:.2s;}
  .view.active > *:nth-child(6){animation-delay:.25s;}
  .view.active > *:nth-child(n+7){animation-delay:.3s;}
  @keyframes cardin{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

  /* ============ CARDS / KPI ============ */
  .kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px;}
  .card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:18px 20px;}
  .kpi .k-label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted);}
  .kpi .k-value{font-size:36px; font-weight:800; margin:8px 0 2px; font-variant-numeric:tabular-nums; letter-spacing:-0.01em;}
  .kpi .k-sub{font-size:13px; color:var(--muted);}
  .kpi .k-value.green{color:var(--emerald);} .kpi .k-value.amber{color:var(--amber);}
  .kpi.flash{animation:cardflash .6s ease;}
  @keyframes cardflash{0%{background:rgba(255,255,255,.12);}30%{background:var(--emerald-soft);}100%{background:transparent;}}

  .section-title{font-size:16px; font-weight:800; margin:26px 0 12px; display:flex; align-items:center; gap:10px; letter-spacing:-0.01em;}
  .section-title .ic{width:18px; height:18px; color:var(--muted); flex-shrink:0;}
  .k-label .ic{width:14px; height:14px; vertical-align:-2px; margin-right:7px; color:var(--muted);}
  .info-strip .ic{width:17px; height:17px; vertical-align:-3px; margin-right:7px; color:var(--amber);}
  .alert-card .a-ico{display:inline-flex; color:var(--amber); margin-top:1px; flex-shrink:0;}
  .alert-card .a-ico .ic{width:17px; height:17px;}
  .tx .ic{width:15px; height:15px; color:var(--muted); vertical-align:-2px; margin-right:6px;}
  .bldg .row .ic{width:14px; height:14px; vertical-align:-2px; margin-right:7px; color:var(--muted);}
  .rec h4 .ic{width:16px; height:16px; vertical-align:-3px; margin-right:7px; color:var(--emerald-bright);}
  .wallet .ic{width:14px; height:14px; vertical-align:-2px; margin-right:7px; color:var(--muted);}
  #emg-solar .ic{width:16px; height:16px; color:var(--amber); vertical-align:-3px; margin-right:6px;}
  .section-title .tag{font-size:11px; font-weight:700; color:var(--muted); background:#13503F;
    padding:3px 10px; border-radius:999px; letter-spacing:.5px;}

  .grid6{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .bldg{transition:transform .12s;}
  .bldg.flash{animation:cardflash .7s ease;}
  .bldg h3{font-size:15.5px; font-weight:800; display:flex; justify-content:space-between; align-items:center; gap:8px;}
  .badge{font-size:10.5px; font-weight:800; letter-spacing:.8px; padding:4px 10px; border-radius:999px; white-space:nowrap;}
  .badge.surplus{background:var(--emerald-soft); color:#34D399;}
  .badge.deficit{background:var(--amber-soft); color:#FBBF24;}
  .bldg .row{display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; border-top:1px dashed var(--line);}
  .bldg .row:first-of-type{border-top:0;}
  .bldg .row b{font-variant-numeric:tabular-nums;}
  .bar{height:9px; background:rgba(255,255,255,.12); border-radius:99px; overflow:hidden; margin-top:6px;}
  .bar > div{height:100%; border-radius:99px; background:var(--emerald); transition:width .5s ease;}
  .bar.low > div{background:var(--amber);}

  /* ============ BUTTONS ============ */
  .btn{
    display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer;
    background:#059669; color:#fff;
    font-weight:700; font-size:14px; padding:11px 18px; border-radius:10px;
    transition:background .12s, transform .08s;
  }
  .btn:hover{background:#047857;}
  .btn:active{transform:scale(.96);}
  .btn .ic{width:16px; height:16px;}
  .btn.amber{background:#b45309;}
  .btn.amber:hover{background:#92400e;}
  .btn.ghost{background:transparent; color:#d7efe4; border:1px solid rgba(143,230,194,.25);}
  .btn.ghost:hover{border-color:rgba(143,230,194,.5); background:rgba(143,230,194,.05);}
  .btn.sm{padding:8px 14px; font-size:13px; border-radius:10px;}
  .btn:disabled{opacity:.45; cursor:not-allowed; transform:none;}
  .btn-row{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0;}

  /* ============ OPTIMIZER ============ */
  .savings-banner{
    display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:8px;
    background:#0E3527; color:#fff; border-radius:var(--radius);
    padding:22px 26px; border:1px solid rgba(143,230,194,.14); position:relative; overflow:hidden;
  }
  .savings-banner::after{content:none;}
  .savings-banner .s-label{font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:#9fd8b8;}
  .savings-banner .s-value{font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-0.01em;}
  .savings-banner .s-value.bump{animation:bump .4s ease;}
  @keyframes bump{0%{transform:scale(1);}40%{transform:scale(1.12); color:#fde68a;}100%{transform:scale(1);}}
  .info-strip{background:var(--amber-soft); border:1px solid #F59E0B; color:#fde68a; border-radius:12px;
    padding:12px 16px; font-size:13.5px; margin:14px 0; line-height:1.55;}
  table.rooms{width:100%; border-collapse:collapse; font-size:14px;}
  table.rooms th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:1px;
    color:var(--muted); padding:10px 12px; border-bottom:2px solid var(--line);}
  table.rooms td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
  table.rooms tr:last-child td{border-bottom:0;}
  table.rooms tr.rowflash td{animation:rowflash .7s ease;}
  @keyframes rowflash{0%{background:rgba(255,255,255,.10);}35%{background:rgba(245,158,11,.20);}100%{background:transparent;}}
  .pill{display:inline-block; font-size:11.5px; font-weight:800; padding:4px 11px; border-radius:999px; letter-spacing:.4px;}
  .pill.on{background:var(--emerald-soft); color:#34D399; border:1px solid rgba(16,185,129,.4);}
  .pill.off{background:#13503F; color:var(--muted);}
  .pill.occ{background:rgba(56,189,248,.16); color:#7dd3fc;}
  .stepper{display:inline-flex; align-items:center; gap:8px;}
  .stepper button{
    width:36px; height:36px; border-radius:10px; border:1px solid rgba(143,230,194,.25); background:transparent;
    font-size:17px; font-weight:800; cursor:pointer; line-height:1; color:#fff;
    transition:transform .08s, background .12s, border-color .12s;
  }
  .stepper button:hover{background:rgba(16,185,129,.10); border-color:rgba(143,230,194,.5);}
  .stepper button:active{transform:scale(.88);}
  .stepper .n{min-width:44px; text-align:center; font-weight:800; font-size:16px; font-variant-numeric:tabular-nums;}
  .toggle{position:relative; width:46px; height:26px; border-radius:99px; border:0; cursor:pointer;
    background:rgba(255,255,255,.18); transition:background .18s;}
  .toggle::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
    background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.25); transition:left .18s;}
  .toggle.on{background:#059669;}
  .toggle.on::after{left:23px;}
  .toggle:active{transform:scale(.93);}

  /* ============ MARKET ============ */
  .ticker{display:flex; align-items:center; gap:18px; background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 22px; margin-bottom:18px;}
  .ticker .t-label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted);}
  .ticker .t-price{font-size:36px; font-weight:800; font-variant-numeric:tabular-nums;}
  .ticker .t-dir{font-size:15px; font-weight:800;}
  .t-dir.up{color:var(--emerald);} .t-dir.down{color:var(--red);}
  .market-cols{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .offer{display:flex; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--line);
    border-radius:12px; margin-bottom:10px; background:var(--card); transition:transform .1s;}
  .offer.flash{animation:cardflash .7s ease;}
  .offer .o-main{flex:1;}
  .offer .o-main b{font-size:14px;} .offer .o-main small{display:block; color:var(--muted); font-size:12px;}
  .offer .o-price{font-weight:800; font-size:15px; color:var(--emerald); font-variant-numeric:tabular-nums;}
  .wallet-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:4px;}
  .wallet{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:13px;}
  .wallet b{display:block; font-size:14px; margin-bottom:4px;}
  .wallet .w-row{display:flex; justify-content:space-between; padding:2px 0; font-variant-numeric:tabular-nums;}
  .txlog{max-height:260px; overflow-y:auto;}
  .tx{display:flex; gap:10px; padding:9px 4px; border-bottom:1px dashed var(--line); font-size:13.5px; align-items:baseline;}
  .tx:last-child{border-bottom:0;}
  .tx.new{animation:rowflash 1s ease;}
  .tx .t-time{color:var(--muted); font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums;}
  .tx .t-amt{margin-left:auto; font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums;}
  .form-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin:12px 0;}
  .form-grid label{font-size:12px; font-weight:700; color:var(--muted); display:block; margin-bottom:5px;}
  .form-grid select, .form-grid input{
    width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:14px;
    background:#0A2E23; font-family:inherit; color:var(--ink);
  }
  .form-grid select:focus, .form-grid input:focus{outline:2px solid var(--emerald-bright); border-color:transparent;}

  /* ============ TOASTS ============ */
  #toast-wrap{position:fixed; right:22px; bottom:22px; z-index:100; display:flex; flex-direction:column; gap:10px;
    max-width:340px;}
  .toast{
    background:#0E3527; color:#fff; border:1px solid rgba(143,230,194,.16); border-radius:12px;
    padding:13px 16px; font-size:14px; font-weight:600;
    display:flex; gap:11px; align-items:flex-start;
    animation:toastin .28s cubic-bezier(.2,.9,.3,1.2); border-left:4px solid var(--emerald); line-height:1.45;
  }
  .t-ico{display:inline-flex; margin-top:1px; color:var(--emerald-bright); flex-shrink:0;}
  .t-ico .ic{width:18px; height:18px;}
  .toast.warn .t-ico{color:var(--amber);} .toast.bad .t-ico{color:#f87171;}
  .toast.warn{border-left-color:var(--amber-bright);}
  .toast.bad{border-left-color:#f87171;}
  .toast.out{animation:toastout .3s ease forwards;}
  @keyframes toastin{from{opacity:0; transform:translateX(70px) scale(.94);} to{opacity:1; transform:none;}}
  @keyframes toastout{to{opacity:0; transform:translateX(60px);}}

  .chart-card canvas{width:100%; height:260px; display:block;}
  .legend{display:flex; gap:18px; font-size:13px; color:var(--muted); margin-top:8px;}
  .legend .sw{display:inline-block; width:14px; height:4px; border-radius:2px; margin-right:6px; vertical-align:middle;}

  /* ============ CARBON STRIP (small emotional hook on dashboard) ============ */
  .carbon-strip{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    background:#0E3527; border:1px solid rgba(143,230,194,.14);
    border-radius:12px; padding:9px 16px; margin-bottom:20px; font-size:13.5px; color:#fff;
  }
  .carbon-strip .ic{width:17px; height:17px; color:var(--emerald-bright);}
  .carbon-strip b{font-variant-numeric:tabular-nums;}

  /* ============ FORECAST ============ */
  .rec-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px;}
  .rec{border-left:5px solid var(--emerald-bright);}
  .rec h4{font-size:14.5px; margin-bottom:6px;}
  .rec p{font-size:13.5px; color:var(--muted); line-height:1.55;}
  .rec .impact{font-weight:800; color:var(--emerald); margin-top:6px; font-size:13px;}

  /* ============ LEADERBOARD ============ */
  .lb-row{display:flex; align-items:center; gap:14px; padding:12px 6px; border-bottom:1px dashed var(--line);}
  .lb-row:last-child{border-bottom:0;}
  .lb-rank{width:36px; height:36px; border:1px solid rgba(143,230,194,.25); border-radius:10px;
    display:grid; place-items:center; font-size:14px; font-weight:800; color:var(--muted); flex-shrink:0;
    font-variant-numeric:tabular-nums;}
  .lb-rank.top{border-color:var(--emerald); color:#fff; background:rgba(16,185,129,.10);}
  .lb-rank.emg-ic{border-color:transparent; color:var(--emerald-bright);}
  .lb-rank.emg-ic .ic{width:20px; height:20px;}
  .lb-main{flex:1; min-width:0;}
  .lb-main b{font-size:15px;}
  .lb-main small{display:block; color:var(--muted); font-size:12px;}
  .lb-score{font-size:20px; font-weight:800; color:var(--emerald); font-variant-numeric:tabular-nums; white-space:nowrap;}
  .lb-bar{height:8px; background:rgba(255,255,255,.12); border-radius:99px; overflow:hidden; margin-top:6px; max-width:420px;}
  .lb-bar > div{height:100%; border-radius:99px; background:var(--emerald); transition:width .5s ease;}

  /* ============ MERGED SECTIONS (v5: 5-tab story) ============ */
  .rec-mini{grid-template-columns:repeat(2,1fr); margin-top:12px;}
  .rec-mini .rec p{font-size:13px;}
  .forecast-mini{margin-bottom:4px;}
  .forecast-mini canvas{height:220px;}
  .schneider-strip{margin-top:18px; background:#0E3527; color:#cfe3d6;
    border-radius:14px; padding:14px 18px; font-size:13.5px; line-height:1.6; border:1px solid rgba(143,230,194,.14);}
  .schneider-strip .ic{width:17px; height:17px; color:var(--emerald-bright); vertical-align:-3px; margin-right:6px;}
  .schneider-strip b{color:#fff;}
  .schneider-strip .tag{background:rgba(255,255,255,.12); color:#d9efe3; border:0; margin-left:8px;}

  /* ============ JUICE: motion & feel ============ */
  .kpi .k-value{letter-spacing:-0.01em;}
  /* cards lift on hover (desktop pointers only) */
  @media (hover:hover){
    .card{transition:border-color .18s ease;}
    .card:hover{border-color:rgba(143,230,194,.35);}
  }
  /* primary actions glow when pressed */
  .btn:active{transform:scale(.96);}
  .btn.amber:active{transform:scale(.96);}
  .btn.ghost:active{transform:scale(.96);}

  /* ============ BATTERY SCHEDULER ============ */
  .tariff-row{display:flex; gap:10px; flex-wrap:wrap; margin:12px 0;}
  .tariff{flex:1; min-width:150px; border-radius:12px; padding:12px 16px; border:1px solid var(--line); font-size:13.5px;}
  .tariff b{display:block; font-size:15px; margin-bottom:2px;}
  .tariff b .ic{width:15px; height:15px; vertical-align:-2px; margin-right:6px; color:var(--muted);}
  .tariff{border:1px solid rgba(143,230,194,.14);}
  .tariff.cheap{background:#0E3527;} .tariff.mid{background:#0E3527;} .tariff.peak{background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.35);}
  .sched24{display:grid; grid-template-columns:repeat(24,1fr); gap:3px; margin:10px 0 4px;}
  .sched24 .h{height:34px; border-radius:6px;}
  .sched24 .h.charge{background:#10b981;} .sched24 .h.discharge{background:#F59E0B;} .sched24 .h.idle{background:rgba(255,255,255,.12);}
  .sched-axis{display:grid; grid-template-columns:repeat(24,1fr); gap:3px; font-size:9px; color:var(--muted); text-align:center; margin-bottom:6px;}

  /* ============ INTEGRATIONS ============ */
  .integ-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .integ{border-top:5px solid var(--emerald);}
  .integ h4{font-size:15px; margin-bottom:8px;}
  .integ p, .integ li{font-size:13.5px; color:var(--muted); line-height:1.6;}
  .integ ul{padding-left:18px;}
  .flow{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0; font-size:13.5px; font-weight:700;}
  .flow .node{background:#13503F; border:1px solid var(--line); border-radius:10px; padding:8px 14px; box-shadow:var(--shadow);}
  .flow .arrow{color:var(--emerald); font-size:18px;}

  /* ============ REWARDS ============ */
  .reward{display:flex; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--line);
    border-radius:12px; margin-bottom:10px; background:var(--card);}
  .reward:last-child{margin-bottom:0;}
  .rw-ico{width:44px; display:flex; align-items:center; justify-content:center; color:#8FE6C2; flex-shrink:0;}
  .rw-ico .ic{width:28px; height:28px;}
  .reward .o-main{flex:1;}
  .reward .o-main b{font-size:14px;} .reward .o-main small{display:block; color:var(--muted); font-size:12px;}
  .qr{font-family:ui-monospace, Menlo, Consolas, monospace; font-weight:800; letter-spacing:1px;
    background:#0e241a; color:#a7f3d0; padding:4px 10px; border-radius:8px; font-size:13px; white-space:nowrap;}
  .badge.over{background:var(--red-soft); color:var(--red);}
  .bar.over > div{background:var(--red);}

  /* ============ EMERGENCY / ISLAND MODE ============ */
  .btn.danger{background:#b91c1c; color:#fff; font-size:16px; padding:14px 26px;}
  .btn.danger:hover{background:#991b1b;}
  .emg-banner{display:none; background:#7F1D1D; color:#fff;
    border-radius:var(--radius); padding:16px 22px; font-weight:800; font-size:16px;
    text-align:center; margin-bottom:16px; border:1px solid #EF4444;}
  .emg-banner.on{display:block;}
  .emg-banner .ic{width:20px; height:20px; vertical-align:-3px; margin-right:10px;}
  #view-emergency.emg-active{background:rgba(239,68,68,.05);
    border:1px solid rgba(239,68,68,.22); border-radius:var(--radius); padding:12px 12px 20px;}
  .emg-count{font-size:44px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--red);}
  .emg-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:4px;}
  .emg-step{background:#0F4A39; border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.5;}
  .emg-step b{display:block; margin-bottom:4px; font-size:13.5px;}
  @media (max-width:820px){ .emg-steps{grid-template-columns:1fr;} }
  .coinpop{display:inline-block; animation:coinpop .5s ease;}
  @keyframes coinpop{0%{transform:scale(1);}40%{transform:scale(1.28) rotate(-8deg);}100%{transform:scale(1);}}

  /* ============ v6: CAMPUS MAP (SVG hero) ============ */
  .map-card{padding:14px;}
  #campus-map{width:100%; height:auto; display:block;}
  .map-b .bbox{stroke-width:3; transition:fill .5s ease, stroke .5s ease;}
  .map-b.surplus .bbox{fill:rgba(16,185,129,.16); stroke:#10b981;}
  .map-b.deficit .bbox{fill:rgba(245,158,11,.16); stroke:#f59e0b;}
  .map-name{font-size:21px; font-weight:800; fill:#FFFFFF; text-anchor:middle;}
  .map-sub{font-size:15px; font-weight:700; fill:#8FE6C2; text-anchor:middle; font-variant-numeric:tabular-nums;}

  /* ============ v6: SCENARIO BAR ============ */
  #scenario-bar .btn{transition:transform .08s, box-shadow .15s, opacity .15s;}

  /* ============ v6: DECISION FEED ============ */
  .feed-item{display:flex; gap:11px; align-items:flex-start; padding:10px 4px;
    font-size:13.5px; line-height:1.5; border-bottom:1px solid rgba(143,230,194,.12);}
  .feed-item:last-child{border-bottom:0;}
  .feed-item .f-ico{display:inline-flex; color:var(--emerald-bright); margin-top:2px; flex-shrink:0;}
  .feed-item .f-ico .ic{width:15px; height:15px;}
  .feed-item.warn .f-ico{color:var(--amber);}
  .feed-item .f-time{color:var(--muted); font-size:11px; white-space:nowrap;
    font-family:ui-monospace,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; padding-top:2px;}
  #decision-feed{max-height:340px; overflow-y:auto;}

  /* ============ v6: ANOMALY ALERTS ============ */
  .alert-card{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
    background:var(--amber-soft); border:1px solid #F59E0B; color:#fde68a;
    border-radius:12px; padding:12px 14px; font-size:13.5px; margin-bottom:10px; line-height:1.5;}
  .alert-card:last-child{margin-bottom:0;}
  .alert-x{border:0; background:transparent; font-size:22px; font-weight:800; cursor:pointer;
    color:#fcd9a0; line-height:1; padding:0 2px; flex-shrink:0;}
  .alert-x:hover{color:#fde68a;}
  #alert-list{max-height:340px; overflow-y:auto;}

  @media (max-width:1080px){
    .kpis{grid-template-columns:repeat(2,1fr);}
    .grid6{grid-template-columns:repeat(2,1fr);}
    .market-cols{grid-template-columns:1fr;}
    .wallet-grid{grid-template-columns:repeat(2,1fr);}
    .rec-grid{grid-template-columns:1fr;}
    .integ-grid{grid-template-columns:1fr;}
  }
  /* hidden on desktop; the media query below turns it into a bottom tab bar on phones */
  .mobile-nav{display:none;}
  @media (max-width:1100px){
    .app{flex-wrap:wrap;}
    .main{margin-right:0;}
    .sidepanel{width:100%; flex:1 1 100%; height:auto; max-height:none; position:static; overflow:visible;
      border-left:0; border-top:1px solid rgba(143,230,194,.14); order:5;}
  }
  /* backup tab chips: hidden on desktop, shown by the media query below */
  .tab-chips{display:none;}
  @media (max-width:820px){
    .rail{display:none;}
    .main{margin-left:0;}
    .topbar{padding:12px 16px; gap:10px;}
    .topbar-actions .btn-demo .lbl{display:none;}
    .topbar-actions .btn-demo{padding:8px 10px;}
    .seg-btn{padding:8px 9px; font-size:11.5px;}
    .demo-caption{bottom:calc(84px + env(safe-area-inset-bottom));}
    .grid6{grid-template-columns:1fr;}
    .savings-banner{grid-template-columns:1fr;}
    main{padding:20px 16px 110px;}
    .topbar{padding:12px 16px;}
    /* bottom tab bar replaces the hidden sidebar on phones — scrolls sideways for 7 tabs */
    .mobile-nav{
      display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60;
      background:#0A2A20;
      border-top:1px solid rgba(143,230,194,.14);
      padding:8px 10px calc(10px + env(safe-area-inset-bottom));
      gap:8px; box-shadow:0 -6px 20px rgba(0,0,0,.25);
      overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    }
    .mobile-nav::-webkit-scrollbar{display:none;}
    .mobile-nav .nav-btn{
      flex:0 0 auto; min-width:78px; flex-direction:column; gap:4px; align-items:center; justify-content:center;
      font-size:11px; font-weight:700; padding:10px 6px; text-align:center;
      min-height:56px; /* fat-finger friendly */
    }
    .mobile-nav .nav-btn .ico{width:auto;}
    .mobile-nav .nav-btn .ico .ic{width:22px; height:22px;}
    .mobile-nav .nav-btn.active::before{display:none;}
    /* backup tab chips (in normal flow, visible only on phones) */
    .tab-chips{display:flex; gap:8px; overflow-x:auto; padding:12px 16px 2px; scrollbar-width:none;}
    .tab-chips::-webkit-scrollbar{display:none;}
    .tab-chips .nav-btn{flex:0 0 auto; display:inline-flex; align-items:center;
      font-size:12.5px; font-weight:700; color:var(--muted); background:var(--card);
      border:1px solid var(--line); border-radius:999px; padding:8px 14px; cursor:pointer; white-space:nowrap;}
    .tab-chips .nav-btn.active{color:#fff; background:#059669; border-color:#059669;}
  }

  /* ============ TIME MACHINE: 24h scrubber (centerpiece) ============ */
  .tm-bar{background:#0C2F24; border:1px solid rgba(143,230,194,.16); border-radius:14px;
    padding:14px 18px 12px; margin:0 0 18px;}
  .tm-kicker{display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:2.5px; color:var(--muted); margin-bottom:10px;}
  .tm-kicker .ic{width:15px; height:15px;}
  .tm-state{margin-left:auto; font-size:10.5px; letter-spacing:1.5px; padding:4px 11px; border-radius:999px;
    border:1px solid rgba(16,185,129,.5); color:#34D399; background:rgba(16,185,129,.08); font-weight:800;}
  .tm-state.held{border-color:rgba(245,158,11,.55); color:#FBBF24; background:rgba(245,158,11,.08);}
  .tm-row{display:flex; align-items:center; gap:16px;}
  .tm-playbtn{width:46px; height:46px; border-radius:50%; border:0; cursor:pointer; background:#059669; color:#fff;
    display:grid; place-items:center; flex-shrink:0; transition:background .12s, transform .08s; padding:0;}
  .tm-playbtn:hover{background:#047857;}
  .tm-playbtn:active{transform:scale(.94);}
  .tm-playbtn .ic{width:20px; height:20px;}
  .tm-clockwrap{display:flex; align-items:center; gap:10px; flex-shrink:0;}
  .tm-sky{color:#FBBF24; display:inline-flex;}
  .tm-sky .ic{width:24px; height:24px;}
  .tm-clock{font-family:Cambria,Georgia,serif; font-size:34px; font-weight:700; color:#fff;
    font-variant-numeric:tabular-nums; letter-spacing:-0.01em; line-height:1; min-width:96px;}
  .tm-mid{flex:1; min-width:0;}
  .tm-label{font-size:12.5px; color:var(--muted); margin-top:5px; font-variant-numeric:tabular-nums;}
  .tm-slider-wrap{position:relative; height:34px; display:flex; align-items:center;}
  .tm-track{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:6px;
    border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden;}
  .tm-fill{height:100%; width:37.5%; background:#10B981; border-radius:99px;}
  .tm-slider-wrap input[type=range]{position:relative; width:100%; -webkit-appearance:none; appearance:none;
    background:transparent; height:34px; margin:0; cursor:pointer; min-height:44px;}
  .tm-slider-wrap input[type=range]::-webkit-slider-runnable-track{background:transparent; height:34px;}
  .tm-slider-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:22px; height:22px;
    border-radius:50%; background:#34D399; border:3px solid #0A2A20;
    box-shadow:0 0 0 1px rgba(52,211,153,.6), 0 2px 10px rgba(0,0,0,.5); margin-top:6px; cursor:grab;}
  .tm-slider-wrap input[type=range]::-moz-range-track{background:transparent; height:34px;}
  .tm-slider-wrap input[type=range]::-moz-range-thumb{width:16px; height:16px; border-radius:50%;
    background:#34D399; border:3px solid #0A2A20; box-shadow:0 0 0 1px rgba(52,211,153,.6);}
  .tm-ticks{display:flex; justify-content:space-between; font-size:10.5px; color:var(--muted);
    font-variant-numeric:tabular-nums; padding:1px 2px 0;}
  .tm-livebtn{flex-shrink:0;}
  @media (max-width:640px){
    .tm-row{flex-wrap:wrap; gap:12px;}
    .tm-mid{flex:1 1 100%; order:3;}
    .tm-clock{font-size:28px; min-width:84px;}
  }

  /* ============ HOLOGRAM 3D CAMPUS ============ */
  .holo-chamber{position:relative; height:calc(100vh - 235px); min-height:470px;
    background:#04120D; border:1px solid rgba(0,229,160,.20); border-radius:14px; overflow:hidden;}
  #holo-canvas{position:absolute; inset:0; width:100%; height:100%; display:block;
    touch-action:none; cursor:grab;}
  #holo-canvas:active{cursor:grabbing;}
  .holo-hud{position:absolute; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:11px; letter-spacing:2px; color:rgba(0,229,160,.75); pointer-events:none; z-index:3;}
  .holo-hud-tl{top:14px; left:16px;}
  .holo-hud-tr{top:14px; right:16px;}
  .holo-hint{position:absolute; top:14px; left:50%; transform:translateX(-50%);
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10.5px;
    letter-spacing:1.5px; color:rgba(0,229,160,.45); pointer-events:none; z-index:3;
    white-space:nowrap;}
  .holo-corner{position:absolute; width:22px; height:22px; z-index:3; pointer-events:none;
    border:0 solid rgba(0,229,160,.55);}
  .holo-corner.tl{top:8px; left:8px; border-top-width:2px; border-left-width:2px;}
  .holo-corner.tr{top:8px; right:8px; border-top-width:2px; border-right-width:2px;}
  .holo-corner.bl{bottom:8px; left:8px; border-bottom-width:2px; border-left-width:2px;}
  .holo-corner.br{bottom:8px; right:8px; border-bottom-width:2px; border-right-width:2px;}
  .holo-toolbar{position:absolute; left:12px; right:12px; bottom:12px; z-index:4;
    display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  .holo-seg{display:flex; border:1px solid rgba(0,229,160,.28); border-radius:10px; overflow:hidden;}
  .holo-segbtn{background:rgba(4,18,13,.75); border:0; color:rgba(0,229,160,.65);
    font-size:12px; font-weight:700; padding:8px 14px; cursor:pointer; font-family:inherit;}
  .holo-segbtn + .holo-segbtn{border-left:1px solid rgba(0,229,160,.18);}
  .holo-segbtn.active{background:rgba(0,229,160,.16); color:#00E5A0;}
  .holo-zoom{display:flex; gap:6px; margin-left:auto;}
  .holo-zoom .btn{min-width:38px; justify-content:center; font-size:16px; font-weight:700;}
  .holo-card{position:absolute; top:46px; right:14px; width:252px; z-index:5;
    background:rgba(4,18,13,.94); border:1px solid rgba(0,229,160,.32); border-radius:12px;
    padding:14px 16px 12px; color:#d7efe4; font-size:13px;}
  .holo-card[hidden]{display:none;}
  .holo-card-name{font-family:Cambria,Georgia,serif; font-size:17px; color:#fff;
    margin:0 18px 8px 0; letter-spacing:.01em;}
  .holo-x{position:absolute; top:8px; right:10px; background:transparent; border:0;
    color:rgba(0,229,160,.6); font-size:16px; cursor:pointer; padding:4px; line-height:1;}
  .holo-x:hover{color:#00E5A0;}
  .holo-kv{display:flex; justify-content:space-between; align-items:baseline; gap:8px;
    padding:7px 0; border-top:1px solid rgba(0,229,160,.12); font-variant-numeric:tabular-nums;}
  .holo-kv span{color:rgba(215,239,228,.62);}
  .holo-kv b{color:#fff; font-weight:700;}
  @media (max-width:640px){
    .holo-hint{display:none;}
    .holo-chamber{height:calc(100vh - 260px); min-height:420px;}
    .holo-card{top:auto; bottom:64px; right:10px; left:10px; width:auto;}
  }