/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Version: 1.0
*/

/* 3-column top row */
.lle-top{
  display: grid;
  grid-template-columns: 1fr min(620px, 100%) 1fr;
  gap: 24px;
  align-items: start;
}

/* side columns */
.lle-top-left,
.lle-top-right{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 18px;
}

/* center stage for inverter + battery + lines */
.lle-top-center{
  position: relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 16px;
}

/* Prevent pills/boxes from stretching full width */
.lle-node .lle-io,
.lle-node .lle-io-mid,
.lle-node .lle-io-batt{
  width: auto;
}

.lle-pill{
  width: fit-content;
}

/* bottom algorithm card */
.lle-bottom{
  margin-top: 18px;
}



/* MOBILE: stack */
@media (max-width: 900px){
  .lle-top{
    grid-template-columns: 1fr;
  }
  .lle-top-left,
  .lle-top-right{
    flex-direction:row;
    justify-content:center;
    flex-wrap:wrap;
  }
}



/* ===== SmartAlgorithm card polish ===== */
.lle-demo-wrap .lle-node{
  outline: 2px solid #2ea44f !important;  /* vihreä reunus */
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 18px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.06) !important;
}

/* SmartAlgorithm: tee sisällöstä tiiviimpi eikä “tyhjää kenttää” */
.lle-demo-wrap .lle-algo{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  min-height: auto !important;
}

/* Otsikko siistiksi */
.lle-demo-wrap .lle-algo .lle-title{
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}

/* ===== Tee tagit isoiksi "ruuduiksi" ===== */
.lle-demo-wrap .lle-tags{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2x2 grid */
  gap: 12px !important;
  align-items: stretch !important;
}

/* Tee jokaisesta tagista isompi "button-card" */
.lle-demo-wrap .lle-tag{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  padding: 14px 14px !important;
  border-radius: 14px !important;

  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;

  background: #f3fbf5 !important;         /* hyvin vaalea vihreä */
  border: 1px solid rgba(46,164,79,.25) !important;
  box-shadow: 0 4px 12px rgba(46,164,79,.08) !important;

  cursor: default !important;
}/* Hide diagram lines completely */
.lle-line{ display:none !important; }
/* Bigger demo canvas */
.lle-demo-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 14px;
}

/* Main flow panel look */
.lle-flow{
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px;
  border: 1px solid rgba(46,164,79,0.25);
  border-radius: 18px;
  background: rgba(46,164,79,0.04);
}
/* Bigger ON/OFF/Mode pills */
.lle-pill{
  font-size: 15px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 12px;
  letter-spacing: 0.2px;
}

/* Make OFF/RED still readable */
.lle-pill.lle-off{ opacity: 0.55; }
.lle-pill.lle-red{ font-weight: 800; }

/* Bigger tags in SmartAlgorithm card */
.lle-tag{
  font-size: 16px;
  padding: 8px 12px;
  border-radius: 999px;
}
/* Node titles */
.lle-title{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.6px;
}

/* Bigger emoji/icons inside boxes */
.lle-icon{
  font-size: 26px;
}

/* More breathing room inside each node */
.lle-node{
  padding: 18px 18px;
  border-radius: 16px;
}

/* Inverter/Battery icon boxes bigger */
.lle-inverter-box,
.lle-battery-box{
  font-size: 32px;
  padding: 18px 22px;
  border-radius: 14px;
  min-width: 220px;
  text-align: center;
}
/* Give center stage more space */
.lle-top{
  grid-template-columns: 1fr min(620px, 100%) 1fr;
  gap: 24px;
}
.lle-reason{
  font-size: 16px;
  padding: 12px 14px;
  line-height: 1.45;
}


.lle-demo-wrap .lle-pill{
  font-size: 16px !important;
  font-weight: 800 !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
}

.lle-demo-wrap .lle-tag{
  font-size: 14px !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}



/* Hieman "painikefiilistä" hoverilla (ei pakollinen) */
.lle-demo-wrap .lle-tag:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(46,164,79,.14) !important;
}

/* Decision-kenttä täysleveäksi ja selkeämmäksi */
.lle-demo-wrap .lle-reason{
  margin-top: 2px !important;
  padding: 14px 14px !important;
  border-radius: 14px !important;
  background: #f7f9fb !important;
  border: 1px dashed rgba(0,0,0,.12) !important;

  font-size: 15px !important;
  line-height: 1.4 !important;
}
/* ===== FORCE tiles to 2 columns even if WP inserts <br> or <p> wrappers ===== */
.lle-demo-wrap .lle-algo .lle-tags{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* If WP/editor injected <br> between items, remove them from layout */
.lle-demo-wrap .lle-algo .lle-tags br{
  display: none !important;
}

/* If WP/editor wrapped items in <p>, flatten them so grid sees the spans */
.lle-demo-wrap .lle-algo .lle-tags p{
  margin: 0 !important;
  padding: 0 !important;
  display: contents !important; /* makes p disappear as a layout box */
}

/* Make each tile fill its grid cell */
.lle-demo-wrap .lle-algo .lle-tags .lle-tag{
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;

  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  padding: 14px 14px !important;
  border-radius: 14px !important;

  font-size: 16px !important;
  font-weight: 800 !important;

  background: #f3fbf5 !important;
  border: 1px solid rgba(46,164,79,.25) !important;
  box-shadow: 0 4px 12px rgba(46,164,79,.08) !important;
}

/* Mobile: 1 column */
@media (max-width: 840px){
  .lle-demo-wrap .lle-algo .lle-tags{
    grid-template-columns: 1fr !important;
  }
}

.lle-control select{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  font-size:18px;
}
/* Make helper text readable (same scale as controls) */
.lle-small{
  font-size: 18px;     /* match your selects */
  line-height: 1.35;
  opacity: 0.85;
  margin-top: 6px;
}
.lle-control select,
.lle-control input[type="range"],
.lle-small{
  font-size: 18px;
}
.lle-flow-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 18px 0 8px;
  justify-content:center;
}
/* ===== BASE BADGE ===== */
.lle-badge{
  padding:10px 16px;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  border:1px solid #d0d7d2;
  background:#f4f7f5;
  color:#333;
  transition: all 0.25s ease;
}

/* ===== OFF STATE ===== */
.lle-badge.is-off{
  opacity:0.35;
  background:#f4f4f4;
  border-color:#e0e0e0;
  color:#999;
}

/* ===== NORMAL FLOW (ON) ===== */
.lle-badge.is-on{
  background:linear-gradient(135deg, #dff5e7, #c8ecd7);
  border-color:#69c38d;
  color:#1c5a3a;
  box-shadow:0 0 8px rgba(50,160,100,0.25);
}

/* ===== STRONG ACTIVE (optional highlight) ===== */
.lle-badge.is-on.lle-active{
  box-shadow:0 0 14px rgba(50,160,100,0.45);
}

/* ===== EXPORT (GRID FEED-IN) ===== */
.lle-badge.is-export.is-on{
  background:linear-gradient(135deg, #e3efff, #cfe0ff);
  border-color:#4a82ff;
  color:#1a3d8f;
  box-shadow:0 0 10px rgba(60,120,255,0.35);
}

/* ===== EXPORT OFF ===== */
.lle-badge.is-export.is-off{
  background:#f2f5fa;
  border-color:#d5dbea;
  color:#8aa0c5;
  opacity:0.35;
}

/* Slightly larger helper text (replaces tiny "lle-small" feeling) */
.lle-help{
  font-size: 14px;
  color: #667;
  margin-top: 6px;
  line-height: 1.35;
}

/* Make selects look like your cards */
.lle-control select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  font-size: 16px;
}

/* Segmented weather buttons */
.lle-seg{
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.lle-seg-btn{
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  font-size: 16px;
  cursor: pointer;
}
.lle-seg-btn.is-active{
  border-color: rgba(46,164,79,0.8);
  box-shadow: 0 0 0 3px rgba(46,164,79,0.15);
}

@keyframes flowPulse {
  0% { box-shadow:0 0 6px rgba(50,160,100,0.2); }
  50% { box-shadow:0 0 16px rgba(50,160,100,0.5); }
  100% { box-shadow:0 0 6px rgba(50,160,100,0.2); }
}

.lle-badge.is-on{
  animation: flowPulse 2s infinite;
}

/* ================================
   Lite Lion Energy Color Mapping
   ================================ */
:root{
  --pv: #1f9d55;          /* green */
  --batt: #f2b705;        /* yellow */
  --grid: #1f6feb;        /* blue */
  --inv: #f59e0b;         /* orange */
  --house: #8b5a2b;       /* brown */

  --on-bg: rgba(25, 135, 84, .16);
  --on-bd: rgba(25, 135, 84, .55);
  --off-bg: rgba(220, 53, 69, .12);
  --off-bd: rgba(220, 53, 69, .45);

  --pill-text: #111;
}

/* Give each top node a colored frame */
.lle-node.lle-solar   { border: 2px solid rgba(31,157,85,.55); }
.lle-node.lle-battery { border: 2px solid rgba(242,183,5,.55); }
.lle-node.lle-grid    { border: 2px solid rgba(31,111,235,.55); }
.lle-node.lle-inverter{ border: 2px solid rgba(245,158,11,.55); }
.lle-node.lle-house   { border: 2px solid rgba(139,90,43,.55); }

/* Title bars (label background) */
.lle-node .lle-title{
  display:inline-block;
  padding: 6px 12px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #0b0b0b;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
}
.lle-solar   .lle-title{ background: rgba(31,157,85,.18);  border-color: rgba(31,157,85,.35); }
.lle-battery .lle-title{ background: rgba(242,183,5,.22);  border-color: rgba(242,183,5,.40); }
.lle-grid    .lle-title{ background: rgba(31,111,235,.16); border-color: rgba(31,111,235,.35); }
.lle-inverter .lle-title{ background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.38); }
.lle-house   .lle-title{ background: rgba(139,90,43,.20);  border-color: rgba(139,90,43,.40); color:#1a0f06; }

/* Make ON/OFF pills actually pop */
.lle-pill{
  font-weight: 800;
  letter-spacing: .4px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
  color: var(--pill-text);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  min-width: 72px;
  text-align:center;
}

/* Active states: ON = green, OFF = red */
.lle-pill:not(.lle-off){
  background: var(--on-bg);
  border-color: var(--on-bd);
  color: #0b3b1f;
}
.lle-pill.lle-off{
  background: var(--off-bg);
  border-color: var(--off-bd);
  color: #7a1020;
  opacity: 1; /* remove washed-out feel */
}

/* Discharging pill stronger red */
.lle-pill.lle-red:not(.lle-off){
  background: rgba(220,53,69,.18);
  border-color: rgba(220,53,69,.55);
  color: #7a1020;
}

/* Battery state pills: give a hint of battery yellow even when ON */
#battCharge:not(.lle-off){
  background: rgba(242,183,5,.18);
  border-color: rgba(242,183,5,.55);
  color: #5a4200;
}

/* Flow badges: higher contrast ON/OFF */
.lle-badge{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
  color: #111;
  font-weight: 700;
}
.lle-badge.is-on{
  background: rgba(31,157,85,.16);
  border-color: rgba(31,157,85,.45);
  color: #0b3b1f;
}
.lle-badge.is-off{
  opacity: .55;
}

/* Export badge: make ON clearly blue */
.lle-badge.is-export.is-on{
  background: rgba(31,111,235,.20);
  border-color: rgba(31,111,235,.55);
  color: #0b2a66;
}

/* OPTIONAL: make icons a bit larger */
.lle-icon{ font-size: 28px; line-height: 1; }

/* =========================
   LED-style ON/OFF pills
   Safety mapping:
   ON  = RED (energized / dangerous)
   OFF = GREEN (safe)
   ========================= */

/* Base pill look */
.lle-pill{
  font-weight: 900;
  letter-spacing: .6px;
  padding: 12px 16px;
  border-radius: 12px;
  min-width: 84px;
  text-align:center;

  /* “LED module” depth */
  border: 2px solid rgba(0,0,0,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    inset 0 -10px 18px rgba(0,0,0,.08),
    0 6px 16px rgba(0,0,0,.08);
  color: #0b0b0b;
  background: rgba(0,0,0,.04);
}

/* OFF = green (safe)  -> you currently mark OFF-pills with .lle-off */
.lle-pill.lle-off{
  background: linear-gradient(180deg, #7CFF7C 0%, #14C814 100%);
  border-color: rgba(10, 140, 10, .45);
  color: #072b07;

  /* glow */
  box-shadow:
    0 0 0 3px rgba(20, 200, 20, .12),
    0 0 18px rgba(20, 200, 20, .35),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -10px 18px rgba(0,0,0,.12),
    0 6px 16px rgba(0,0,0,.08);
}

/* ON = red (energized) -> pills that are active do NOT have .lle-off */
.lle-pill:not(.lle-off){
  background: linear-gradient(180deg, #FF6B6B 0%, #D60000 100%);
  border-color: rgba(150, 0, 0, .55);
  color: #fff;

  /* glow */
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  box-shadow:
    0 0 0 3px rgba(214, 0, 0, .12),
    0 0 18px rgba(214, 0, 0, .35),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -10px 18px rgba(0,0,0,.18),
    0 6px 16px rgba(0,0,0,.08);
}

/* Battery discharge already uses .lle-red when active -> keep it extra punchy */
.lle-pill.lle-red:not(.lle-off){
  background: linear-gradient(180deg, #FF4B4B 0%, #B80000 100%);
  border-color: rgba(120, 0, 0, .65);
  box-shadow:
    0 0 0 3px rgba(184, 0, 0, .14),
    0 0 22px rgba(184, 0, 0, .45),
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -10px 18px rgba(0,0,0,.20),
    0 6px 16px rgba(0,0,0,.08);
}

/* Optional: make pill groups breathe a bit */
.lle-io{ gap: 10px; }

/* =========================
   OVERRIDES: make the *active* pill color depend on the *meaning*
   Active pill = element WITHOUT .lle-off (your JS behavior)
   ========================= */

/* Helper “LED” looks */
:root{
  --lle-green1:#7CFF7C; --lle-green2:#14C814; --lle-greenB:rgba(10,140,10,.55);
  --lle-red1:#FF6B6B;   --lle-red2:#D60000;   --lle-redB:rgba(150,0,0,.60);
}

/* ACTIVE OFF buttons (safe) = GREEN */
#pvOff:not(.lle-off),
#gridOff:not(.lle-off),
#battIdle:not(.lle-off){
  background: linear-gradient(180deg, var(--lle-green1) 0%, var(--lle-green2) 100%);
  border-color: var(--lle-greenB);
  color:#072b07;
  text-shadow:none;
  box-shadow:
    0 0 0 3px rgba(20,200,20,.14),
    0 0 20px rgba(20,200,20,.50),
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -10px 18px rgba(0,0,0,.12),
    0 6px 16px rgba(0,0,0,.08);
}

/* ACTIVE ON buttons (energized / dangerous) = RED */
#pvOn:not(.lle-off),
#gridOn:not(.lle-off){
  background: linear-gradient(180deg, var(--lle-red1) 0%, var(--lle-red2) 100%);
  border-color: var(--lle-redB);
  color:#fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  box-shadow:
    0 0 0 3px rgba(214,0,0,.14),
    0 0 20px rgba(214,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 -10px 18px rgba(0,0,0,.18),
    0 6px 16px rgba(0,0,0,.08);
}

/* Battery CHARGING = happy GREEN (active) */
#battCharge:not(.lle-off){
  background: linear-gradient(180deg, #8BFF8B 0%, #00B800 100%);
  border-color: rgba(0,120,0,.65);
  color:#072b07;
  box-shadow:
    0 0 0 3px rgba(0,184,0,.16),
    0 0 26px rgba(0,184,0,.60),
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -10px 18px rgba(0,0,0,.12),
    0 6px 16px rgba(0,0,0,.08);
}

/* Battery DISCHARGING = strong RED (active) */
#battDischarge:not(.lle-off){
  background: linear-gradient(180deg, #FF4B4B 0%, #B00000 100%);
  border-color: rgba(120,0,0,.75);
  color:#fff;
  box-shadow:
    0 0 0 3px rgba(176,0,0,.18),
    0 0 28px rgba(176,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -10px 18px rgba(0,0,0,.22),
    0 6px 16px rgba(0,0,0,.08);
}

/* Optional: make truly inactive pills look “dead” (no glow) */
.lle-pill.lle-off{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -10px 18px rgba(0,0,0,.08),
    0 6px 16px rgba(0,0,0,.06);
  filter: saturate(.65) brightness(.98);
}
/* =========================
   FLOW BADGES: stronger contrast + source-based colors
   PV = green, Battery = yellow, Grid = blue, Export = blue-ish
   Active = .is-on (your JS toggles this)
   Inactive = .is-off (or missing .is-on)
   ========================= */

/* Base badge */
.lle-badge{
  font-weight: 700;
  border-width: 2px;
  letter-spacing: .2px;
}

/* Inactive: visibly “off” */
.lle-badge.is-off,
.lle-badge:not(.is-on){
  opacity: .45;
  filter: saturate(.6);
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.12);
  color: rgba(0,0,0,.55);
  box-shadow: none;
}

/* Active: common glow */
.lle-badge.is-on{
  opacity: 1;
  filter: none;
  color: #0b0b0b;
  box-shadow:
    0 0 0 3px rgba(0,0,0,.05),
    0 10px 22px rgba(0,0,0,.10);
}

/* PV flows (PV → House, PV → Battery) */
.lle-badge.is-on[data-src="pv"],
#flowPvHouse.is-on, #flowPvBatt.is-on{
  background: linear-gradient(180deg, #B8FFB8 0%, #18C218 100%);
  border-color: rgba(10,140,10,.55);
  color:#062906;
  box-shadow:
    0 0 0 3px rgba(20,200,20,.14),
    0 0 22px rgba(20,200,20,.45),
    0 10px 22px rgba(0,0,0,.10);
}

/* Battery flow (Battery → House) */
.lle-badge.is-on[data-src="battery"],
#flowBattHouse.is-on{
  background: linear-gradient(180deg, #FFF2A6 0%, #F2C400 100%);
  border-color: rgba(170,120,0,.55);
  color:#2a1a00;
  box-shadow:
    0 0 0 3px rgba(242,196,0,.14),
    0 0 22px rgba(242,196,0,.40),
    0 10px 22px rgba(0,0,0,.10);
}

/* Grid flow (Grid → House) */
.lle-badge.is-on[data-src="grid"],
#flowGridHouse.is-on{
  background: linear-gradient(180deg, #BFD9FF 0%, #2F6BFF 100%);
  border-color: rgba(47,107,255,.55);
  color:#061a3a;
  box-shadow:
    0 0 0 3px rgba(47,107,255,.14),
    0 0 22px rgba(47,107,255,.40),
    0 10px 22px rgba(0,0,0,.10);
}

/* Export (PV → Grid) slightly “special” */
.lle-badge.is-on.is-export,
#flowPvGrid.is-on{
  background: linear-gradient(180deg, #D7E7FF 0%, #1F6FEB 100%);
  border-color: rgba(31,111,235,.65);
  color:#061a3a;
  box-shadow:
    0 0 0 3px rgba(31,111,235,.16),
    0 0 26px rgba(31,111,235,.48),
    0 10px 22px rgba(0,0,0,.10);
}

/* BASE */
.lle-badge{
  font-weight: 700;
  border: 2px solid rgba(0,0,0,.15);
  padding: 8px 14px;
  border-radius: 999px;
  transition: all .2s ease;
}

/* OFF state (selvästi himmeä) */
.lle-badge:not(.is-on){
  opacity: .35;
  background: #f4f4f4;
  color: #666;
  box-shadow: none;
}

/* ON base */
.lle-badge.is-on{
  opacity: 1;
  color: #0b0b0b;
  transform: translateY(-1px);
}

/* =========================
   ENERGY COLORS
   ========================= */

/* PV = vihreä */
.lle-badge.is-on[data-src="pv"]{
  background: linear-gradient(180deg, #B8FFB8 0%, #18C218 100%);
  border-color: #0c9b0c;
  color:#062906;
  box-shadow:
    0 0 0 3px rgba(20,200,20,.18),
    0 0 24px rgba(20,200,20,.55);
}

/* Battery = keltainen */
.lle-badge.is-on[data-src="battery"]{
  background: linear-gradient(180deg, #FFF2A6 0%, #F2C400 100%);
  border-color: #c79a00;
  color:#2a1a00;
  box-shadow:
    0 0 0 3px rgba(242,196,0,.18),
    0 0 24px rgba(242,196,0,.55);
}

/* Grid = sininen */
.lle-badge.is-on[data-src="grid"]{
  background: linear-gradient(180deg, #BFD9FF 0%, #2F6BFF 100%);
  border-color: #1f4ec9;
  color:#061a3a;
  box-shadow:
    0 0 0 3px rgba(47,107,255,.18),
    0 0 24px rgba(47,107,255,.55);
}

/* Export = kirkkaampi sininen (erottuu) */
.lle-badge.is-on.is-export{
  background: linear-gradient(180deg, #D7E7FF 0%, #1F6FEB 100%);
  border-color: #1f6feb;
  color:#061a3a;
  box-shadow:
    0 0 0 3px rgba(31,111,235,.22),
    0 0 30px rgba(31,111,235,.65);
}

.lle-chart-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:16px 16px 8px;
  margin-top:16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
}
.lle-chart-head{ margin-bottom:10px; }
.lle-chart-title{ margin:0; font-size:18px; }
.lle-chart-sub{ font-size:14px; opacity:.7; margin-top:4px; }

.lle-live-stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
  margin: 10px 0 14px;
}

.lle-live-box{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:10px 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
}

.lle-live-label{
  display:block;
  font-size:13px;
  opacity:.7;
  margin-bottom:4px;
}

@media (max-width: 800px){
  .lle-live-stats{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
.lle-live-sub{
  margin-top: 6px;
  font-size: 13px;
  opacity: 0.75;
}



/* ===== SYSTEM PARAMETER CARDS ===== */
.lle-system-params{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin: 10px 0 18px;
}

.lle-param-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:14px 16px;
  background:#fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
}

.lle-param-card h4{
  margin:0 0 12px;
  font-size:15px;
}

.lle-param-card input{
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  font-size:16px;
  background:#fff;
}

.lle-param-card small{
  display:block;
  margin-top:8px;
  opacity:.7;
}

/* Mild color coding */
.lle-param-card.is-batt{
  background: rgba(245,158,11,.08);
}
.lle-param-card.is-inv{
  background: rgba(249,115,22,.08);
}
.lle-param-card.is-grid{
  background: rgba(59,130,246,.08);
}
.lle-param-card.is-pv{
  background: rgba(34,197,94,.08);
}

@media (max-width: 900px){
  .lle-system-params{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

/* ===== NEW TOP LAYOUT ===== */
.lle-top-layout{
  max-width: 1080px;
  margin: 0 auto 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lle-top-row{
  display: grid;
  gap: 24px;
  align-items: start;
}

.lle-top-row-1{
  grid-template-columns: 180px minmax(420px, 1fr) 180px;
}

.lle-top-row-2{
  grid-template-columns: 180px minmax(420px, 1fr) 180px;
}

.lle-top-cell > .lle-node{
  width: 100%;
  box-sizing: border-box;
}

/* Row 1 */
.lle-cell-solar > .lle-node,
.lle-cell-grid > .lle-node,
.lle-cell-inverter > .lle-node{
  min-height: 220px;
}

.lle-cell-inverter > .lle-node{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  padding: 18px 22px !important;
}

/* Row 2 */
.lle-cell-battery > .lle-node,
.lle-cell-house > .lle-node{
  min-height: 120px;
}

.lle-cell-battery > .lle-node{
  max-width: 520px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  padding: 16px 20px !important;
}

.lle-cell-house > .lle-node{
  max-width: 180px;
  margin-left: auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

/* Inner boxes flatter */
.lle-inverter-box{
  min-width: 260px !important;
  min-height: 72px !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

.lle-battery-box{
  min-width: 280px !important;
  min-height: 56px !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Battery buttons on one row */
.lle-battery .lle-io{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:center;
  gap: 12px !important;
  width: 100%;
}

.lle-battery .lle-pill{
  min-width: 120px;
}

/* Responsive */
@media (max-width: 900px){
  .lle-top-row-1,
  .lle-top-row-2{
    grid-template-columns: 1fr;
  }

  .lle-cell-spacer{
    display:none;
  }

  .lle-cell-battery > .lle-node,
  .lle-cell-house > .lle-node{
    max-width:none;
    margin:0;
  }
}

.lle-demo-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 14px;
  font-family: Arial, sans-serif;
  color: #1f2937;

  background: #eef5ef;
  border: 1px solid #cfe0d2;
  border-radius: 28px;
  box-shadow: 0 6px 24px rgba(0,0,0,.05);
}

/* Force center column content to true center */
.lle-cell-inverter,
.lle-cell-battery{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Inverter centered and narrower */
.lle-cell-inverter > .lle-node{
  width: 100%;
  max-width: 520px;
  margin: 0 auto !important;
  justify-self: center !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Battery centered and flatter */
.lle-cell-battery > .lle-node{
  width: 100%;
  max-width: 520px;
  margin: 0 auto !important;
  justify-self: center !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* House and grid stay on right */
.lle-cell-grid,
.lle-cell-house{
  display: flex;
  justify-content: flex-end;
}

/* Solar stays left */
.lle-cell-solar{
  display: flex;
  justify-content: flex-start;
}

/* ===== Final top alignment + equal heights ===== */

/* Row items align to top */
.lle-top-row-1,
.lle-top-row-2{
  align-items: start !important;
}

/* Same height for Solar / Inverter / Grid */
.lle-cell-solar > .lle-node,
.lle-cell-inverter > .lle-node,
.lle-cell-grid > .lle-node{
  min-height: 220px !important;
  height: 220px !important;
}

/* Same height for Battery / House */
.lle-cell-battery > .lle-node,
.lle-cell-house > .lle-node{
  min-height: 220px !important;
  height: 220px !important;
}

/* Keep inverter content aligned to top */
.lle-cell-inverter > .lle-node{
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  align-items: center;
  padding-top: 18px !important;
}

  .lle-top-layout .lle-inverter,
.lle-top-layout .lle-battery{
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-self: center !important;
}
.lle-param-card select{
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  font-size:16px;
  background:#fff;
}

#algoMode,
#algoWeather,
#algoPrice,
#algoPeak,
#algoLocation{
  font-weight: 700;
}
#tariffFieldsWrap{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}

#tariffFieldsWrap.is-hidden{
  display:none;
}

.lle-chart-meta{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.78;
}

.lle-param-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.lle-param-actions button {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d8a7a7;
  background: #f8dede;
  color: #5a2a2a;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}

.lle-param-actions button:hover {
  background: #f4cfcf;
}

.lle-param-actions button:active {
  transform: translateY(1px);
}

.lle-card-cost {
  background: #eef6ee;
  border: 1px solid #cfe3cf;
}