:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#eaf0f5;background:#071019}*{box-sizing:border-box}body{margin:0;background:#071019}header{display:flex;justify-content:space-between;align-items:center;padding:22px 30px;border-bottom:1px solid #23313d;background:#0b1620;position:sticky;top:0;z-index:5}h1{font-size:25px;margin:0}.brand{font-weight:800;letter-spacing:.4px}.muted{color:#8fa2b2}.wrap{padding:24px 30px}.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px}.card,.panel{background:#101d27;border:1px solid #22323f;border-radius:14px;padding:17px}.num{font-size:30px;font-weight:800}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0}.filters button,.range button{border:1px solid #304553;background:#12232e;color:#dce8ef;padding:9px 14px;border-radius:20px;cursor:pointer}.filters button.active,.range button.active{background:#d9ff43;color:#071019;border-color:#d9ff43}table{width:100%;border-collapse:collapse;background:#0d1922;border-radius:14px;overflow:hidden;font-size:14px}th,td{padding:13px 10px;border-bottom:1px solid #20303c;text-align:right;white-space:nowrap}th:first-child,td:first-child{text-align:left}th{color:#9fb1bf;font-size:12px;text-transform:uppercase;position:sticky;top:73px;background:#0d1922}.serial{color:#d9ff43;text-decoration:none;font-weight:700}.badge{padding:5px 9px;border-radius:12px;font-size:11px;font-weight:800}.ONLINE{background:#183e2b;color:#6ff2a5}.STALE{background:#4a3b17;color:#ffd76a}.OFFLINE{background:#343b41;color:#b8c0c6}.ERROR{background:#4a1e24;color:#ff8996}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metric .v{font-size:24px;font-weight:750;margin-top:6px}.charts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}.chart{height:310px}.chart canvas{max-height:250px}.errors td{text-align:left}.back{color:#d9ff43;text-decoration:none}@media(max-width:1100px){.cards,.grid{grid-template-columns:repeat(2,1fr)}.charts{grid-template-columns:1fr}.tablewrap{overflow:auto}}@media(min-width:1900px){body{font-size:18px}h1{font-size:34px}.wrap{padding:35px 45px}.cards{gap:22px}.num{font-size:42px}table{font-size:17px}th{font-size:14px}th,td{padding:17px 13px}}
.svgchart{width:100%;height:220px;display:block}.gridline{stroke:#1e303b;stroke-width:1}.axis{stroke:#526574;stroke-width:1}.axistext{fill:#8fa2b2;font-size:11px}.series{fill:none;stroke-width:2.2;vector-effect:non-scaling-stroke}.series.s0,.legend-line.s0{stroke:#d9ff43}.series.s1,.legend-line.s1{stroke:#59b7ff}.series.s2,.legend-line.s2{stroke:#ff9d57}.series.s3,.legend-line.s3{stroke:#c58cff}.legend{display:flex;gap:16px;flex-wrap:wrap;color:#cbd8e1;font-size:12px;margin:4px 0 2px}.legend-item{display:inline-flex;align-items:center;gap:6px}.legend-line{display:inline-block;width:18px;height:0;border-top-width:2px;border-top-style:solid}.chart-empty{height:210px;display:flex;align-items:center;justify-content:center;color:#8fa2b2;text-align:center;padding:20px}
.filterblock{margin:15px 0 18px}.filterlabel{font-size:11px;font-weight:800;letter-spacing:.11em;color:#728899;margin-bottom:6px}.filterlabel.second{margin-top:12px}.countryfilters{margin-top:0;margin-bottom:0}.emptyrow{text-align:center!important;color:#8fa2b2;padding:26px!important}.filters{margin:7px 0}.filters button{font-weight:650}


/* v0.1.7 mobile layout */
.mobile-devices{display:none}

@media(max-width:767px){
  header{padding:14px 16px;align-items:flex-start}
  .brand{font-size:16px}
  header .muted,#clock{font-size:12px}
  .wrap{padding:16px}

  .cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-bottom:16px
  }
  .card{padding:13px;border-radius:12px;min-height:82px}
  .card .muted{font-size:11px}
  .num{font-size:27px;margin-top:5px}

  .filterblock{margin:12px 0 16px}
  .filters{gap:7px}
  .filters button{
    padding:8px 12px;
    font-size:12px
  }

  .tablewrap{display:none}
  .mobile-devices{
    display:grid;
    grid-template-columns:1fr;
    gap:12px
  }
  .device-card{
    background:#0d1922;
    border:1px solid #22323f;
    border-radius:14px;
    padding:14px;
    min-width:0
  }
  .device-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding-bottom:12px;
    border-bottom:1px solid #20303c
  }
  .mobile-serial{
    display:block;
    font-size:14px;
    line-height:1.35;
    overflow-wrap:anywhere
  }
  .mobile-country{
    color:#8fa2b2;
    font-size:12px;
    margin-top:5px
  }
  .device-card .badge{
    flex:0 0 auto;
    margin-top:1px
  }
  .mobile-metrics{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1px;
    margin-top:11px;
    background:#20303c;
    border-radius:10px;
    overflow:hidden
  }
  .mobile-metrics>div{
    background:#101d27;
    padding:10px 11px;
    min-width:0
  }
  .mobile-metrics>div.wide{grid-column:1/-1}
  .mobile-metrics span{
    display:block;
    color:#8296a6;
    text-transform:uppercase;
    letter-spacing:.05em;
    font-size:10px;
    margin-bottom:4px
  }
  .mobile-metrics b{
    display:block;
    color:#edf4f8;
    font-size:14px;
    font-weight:700;
    overflow-wrap:anywhere
  }
  .mobile-empty{
    background:#0d1922;
    border:1px solid #22323f;
    border-radius:14px;
    color:#8fa2b2;
    padding:24px;
    text-align:center
  }
  #info{font-size:12px;line-height:1.4}
}


/* v0.1.8 polished smartphone dashboard */
@media(max-width:767px){
  body{background:#08131c}
  header{
    padding:16px 18px;
    background:linear-gradient(180deg,#0c1822 0%,#0a151e 100%);
    border-bottom:1px solid #203340
  }
  .brand{font-size:18px;font-weight:800}
  header .muted{font-size:12px;color:#8fa1af}
  #clock{font-size:12px;line-height:1.35;text-align:right}

  .wrap{padding:14px}
  .cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:4px 0 14px
  }
  .card{
    position:relative;
    min-height:78px;
    padding:13px 14px;
    border-radius:13px;
    background:linear-gradient(145deg,#13232f,#0f1d27);
    border:1px solid #2a3e4b;
    box-shadow:0 8px 20px rgba(0,0,0,.16)
  }
  .card .muted{font-size:11px;color:#a2b0bb}
  .num{font-size:28px;line-height:1;margin-top:8px}

  .filterblock{margin:10px 0 12px}
  .filterlabel{font-size:10px;letter-spacing:.11em;color:#869aaa;margin-bottom:7px}
  .filters{gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filters button{
    flex:0 0 auto;
    min-height:38px;
    padding:8px 13px;
    border-radius:9px;
    border:1px solid #2a3f4c;
    background:#10212c;
    font-size:12px;
    font-weight:800
  }
  .filters button.active{
    background:#caff27;
    color:#08131c;
    border-color:#caff27;
    box-shadow:0 0 18px rgba(202,255,39,.08)
  }

  .mobile-toolbar{display:block;margin:12px 0}
  .mobile-search-wrap{
    display:flex;
    align-items:center;
    gap:9px;
    background:#0f1d27;
    border:1px solid #2a3e4b;
    border-radius:11px;
    padding:0 12px
  }
  .search-icon{font-size:22px;color:#a8b8c4;line-height:1}
  #mobileSearch{
    width:100%;
    height:44px;
    background:transparent;
    border:0;
    outline:0;
    color:#edf4f8;
    font-size:14px
  }
  #mobileSearch::placeholder{color:#758a99}

  .mobile-devices{display:grid;gap:14px}
  .device-card{
    position:relative;
    overflow:hidden;
    padding:0;
    border-radius:15px;
    background:linear-gradient(145deg,#13222d 0%,#0f1c25 100%);
    border:1px solid #2b414f;
    box-shadow:0 10px 28px rgba(0,0,0,.22)
  }
  .device-card:before{
    content:"";
    position:absolute;
    top:0;bottom:0;left:0;width:4px;
    background:#8b9aa5
  }
  .device-card.ONLINE:before{background:#35cf65}
  .device-card.STALE:before{background:#e6b936}
  .device-card.OFFLINE:before{background:#ff5959}
  .device-card.ERROR:before{background:#ff3434}

  .device-card-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:15px 15px 13px 18px;
    border-bottom:1px solid #243844
  }
  .device-ident{min-width:0}
  .mobile-serial{
    font-size:15px;
    font-weight:900;
    line-height:1.25;
    color:#caff27;
    overflow-wrap:anywhere
  }
  .mobile-country{
    display:flex;
    align-items:center;
    gap:5px;
    margin-top:7px;
    color:#b4c0c9;
    font-size:12px
  }
  .pin{color:#8297a6}
  .device-state{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    flex:0 0 auto
  }
  .device-state small{
    max-width:112px;
    margin-top:7px;
    color:#8fa1af;
    font-size:10px;
    line-height:1.25;
    text-align:right
  }
  .device-card .badge{
    padding:5px 9px;
    border-radius:999px;
    font-size:10px;
    font-weight:900
  }

  .mobile-metrics{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1px;
    margin:0;
    border-radius:0;
    background:#263946
  }
  .mobile-metrics>div{
    min-height:68px;
    padding:11px 12px;
    background:#11202a
  }
  .mobile-metrics span{
    display:block;
    margin-bottom:5px;
    color:#9aabb7;
    font-size:10px;
    letter-spacing:.02em;
    text-transform:none
  }
  .mobile-metrics b{
    font-size:15px;
    line-height:1.2;
    color:#f2f6f8
  }
  .bar{
    display:block;
    height:4px;
    margin-top:9px;
    overflow:hidden;
    border-radius:99px;
    background:#2a4238
  }
  .bar em{
    display:block;
    height:100%;
    background:#62d83c;
    border-radius:99px
  }
  .bar.blue{background:#213c50}
  .bar.blue em{background:#38aef4}

  .device-details{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:48px;
    border-top:1px solid #263a47;
    color:#caff27;
    font-size:12px;
    font-weight:900;
    text-decoration:none
  }
  .device-details span{font-size:22px;line-height:1}
  #info{font-size:11px;color:#8295a3;margin-top:14px}

  .tablewrap{display:none!important}
}

@media(min-width:768px){
  .mobile-toolbar{display:none}
}


/* v0.1.9 eTree branding */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand-group{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
}
.etree-logo{
  display:block;
  width:190px;
  height:auto;
  max-height:82px;
  object-fit:contain;
  flex:0 0 auto;
}
.brand-copy{min-width:0}
.brand-copy .brand{white-space:nowrap}

@media(max-width:767px){
  header{
    padding:13px 14px;
    gap:10px;
    align-items:center;
  }
  .brand-group{
    gap:10px;
    min-width:0;
    flex:1 1 auto;
  }
  .etree-logo{
    width:102px;
    max-height:54px;
  }
  .brand-copy .brand{
    font-size:16px;
    line-height:1.15;
    white-space:normal;
  }
  .brand-copy .muted{
    margin-top:3px;
    font-size:10px;
    line-height:1.2;
  }
  #clock{
    flex:0 0 auto;
    min-width:80px;
    font-size:10px;
    line-height:1.25;
  }
}

@media(max-width:430px){
  .etree-logo{width:88px}
  .brand-copy .brand{font-size:14px}
  .brand-copy .muted{font-size:9px}
}


/* v0.2.0 navigation stability / detail loading */
body.is-navigating{pointer-events:none}
body.is-navigating:after{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(6,15,22,.12);
  pointer-events:none;
}
.loading-panel{
  color:#8fa2b2;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.badge.loading{background:#263946;color:#aebcc6}
.small-error{font-size:13px!important;line-height:1.4;overflow-wrap:anywhere}
.detail-brand{display:flex;align-items:center;gap:14px;min-width:0}
.detail-logo{width:120px;max-height:58px}
.detail-header h1{margin:4px 0 0;font-size:18px;overflow-wrap:anywhere}
.detail-header .back{display:inline-block;position:relative;z-index:3}

@media(max-width:767px){
  .detail-header{
    padding:12px 14px;
    align-items:center;
  }
  .detail-brand{gap:9px;min-width:0;flex:1}
  .detail-logo{width:78px;max-height:44px}
  .detail-header h1{
    font-size:13px;
    line-height:1.2;
    max-width:190px;
  }
  .detail-header .back{
    font-size:12px;
    padding:5px 0;
  }
  .range{
    display:flex;
    gap:6px;
    overflow-x:auto;
    scrollbar-width:none
  }
  .range::-webkit-scrollbar{display:none}
  .range button{flex:0 0 auto}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric .v{font-size:15px}
  .charts{grid-template-columns:1fr}
}

/* v0.2.1 visible build version */
.version-badge{
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
  margin-left:7px;
  padding:2px 7px;
  border:1px solid #334b5a;
  border-radius:999px;
  font-size:10px;
  line-height:1.25;
  font-weight:700;
  letter-spacing:.04em;
  color:#9fb0bc;
  background:#10222d;
  white-space:nowrap;
}
@media(max-width:767px){
  .version-badge{font-size:9px;padding:2px 6px;margin-left:5px}
}


/* v0.2.2 active error + energy display */
.active-error-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:6px;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(255,71,71,.14);
  border:1px solid rgba(255,91,91,.38);
  color:#ff6b6b;
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.section-head h2{margin:0}
.count-badge{
  display:inline-flex;
  min-width:25px;
  height:25px;
  align-items:center;
  justify-content:center;
  margin-left:7px;
  padding:0 7px;
  border-radius:999px;
  font-size:12px;
  background:#263946;
  color:#dce6eb;
}
.count-badge.has-errors{background:rgba(255,64,64,.17);color:#ff6868;border:1px solid rgba(255,80,80,.4)}
.count-badge.no-errors{background:rgba(57,207,101,.13);color:#4fdb79;border:1px solid rgba(57,207,101,.32)}
.current-errors{margin-top:12px}
.current-error-row{
  display:grid;
  grid-template-columns:80px minmax(140px,220px) 1fr;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border-top:1px solid #263946;
}
.current-error-row:first-child{border-top:0}
.error-slot{color:#91a2af;font-size:12px}
.error-code{color:#ff7070;font-weight:800;font-size:13px}
.error-name{color:#ff8585;font-size:13px;overflow-wrap:anywhere}
.no-current-errors{padding:10px 0;color:#4fdc79;font-weight:700}
.energy-panel{margin-top:14px}
.energy-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:12px
}
.energy-card{
  padding:13px;
  border-radius:11px;
  background:#10202a;
  border:1px solid #293d49
}
.energy-card span{display:block;color:#91a3af;font-size:11px;margin-bottom:6px}
.energy-card b{font-size:19px;color:#f1f6f8}
.energy-card.charge b{color:#49d977}
.energy-card.discharge b{color:#43b8ff}
.energy-note{margin-top:9px;color:#8094a2;font-size:11px;line-height:1.4}

@media(max-width:767px){
  .current-error-row{
    grid-template-columns:58px 1fr;
    gap:5px 10px;
    padding:10px 4px
  }
  .error-name{grid-column:2}
  .energy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .energy-card{padding:11px}
  .energy-card b{font-size:16px}
}


/* v0.2.3 requested smartphone metric layout */
@media(max-width:767px){
  .mobile-metrics.requested-layout{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:1px;
    margin:0;
    background:#263946;
    border-radius:0;
  }
  .mobile-metrics.requested-layout>div{
    grid-column:span 2;
    min-height:78px;
    padding:12px 13px;
    background:#11202a;
  }
  .mobile-metrics.requested-layout>div.wide2{
    grid-column:span 3;
    min-height:86px;
  }
  .mobile-metrics.requested-layout span{
    font-size:11px;
    margin-bottom:7px;
  }
  .mobile-metrics.requested-layout b{
    font-size:17px;
    line-height:1.2;
  }
}




/* v0.2.14: full serial number in one line, no ellipsis */
.device-serial,
.system-serial,
.serial,
.device-title,
.device-name {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  word-break: normal;
  overflow-wrap: normal;
  max-width: 100%;
}

/* The actual serial line may shrink to fit the card width. */
.device-serial {
  display: block;
  width: 100%;
  min-width: 0;
  line-height: 1.15;
}


/* v0.2.15 detail page: long BMS/SYS state text may wrap inside its tile */
.state-value {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.2;
  max-width: 100%;
}


/* v0.2.16 detail page */
.eta-value {
  white-space: normal;
  line-height: 1.25;
}
.zero-soc-time {
  border-style: dashed;
}


/* v0.2.17 – simplified SOC overview on Android main page */
.soc-overview{
  padding:18px 16px 14px;
  background:linear-gradient(145deg,#11212b 0%,#0d1a23 100%);
}
.soc-gauge-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.soc-gauge{
  position:relative;
  width:min(72vw,310px);
  aspect-ratio:1/1;
  border-radius:50%;
  filter:drop-shadow(0 0 10px rgba(165,255,25,.10));
}
.soc-gauge::after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:50%;
  background:#0f1d26;
  box-shadow:inset 0 0 0 1px #263b47, inset 0 0 28px rgba(0,0,0,.25);
}
.soc-gauge-inner{
  position:absolute;
  inset:28px;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}
.soc-number{
  font-size:clamp(42px,12vw,72px);
  line-height:1;
  font-weight:900;
  letter-spacing:-.04em;
  color:#f4f7f9;
}
.soc-number span{
  margin-left:4px;
  font-size:.48em;
  font-weight:700;
  letter-spacing:0;
}
.soc-number.soc-green{color:#efffd2}
.soc-number.soc-yellow{color:#fff2bf}
.soc-number.soc-red{color:#ffd0d0}
.soc-label{
  margin-top:9px;
  color:#b7c4cc;
  font-size:18px;
  font-weight:700;
  letter-spacing:.06em;
}
.soc-zone-labels{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  width:min(72vw,310px);
  margin-top:-22px;
  padding:0 6px;
  font-size:9px;
  font-weight:800;
  text-align:center;
}
.soc-zone-labels span{opacity:.8}
.zone-green{color:#a9ff19}
.zone-yellow{color:#ffc62e}
.zone-red{color:#ff5a5a}
.soc-time{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:12px auto 0;
  padding-top:13px;
  border-top:1px solid #2a3d48;
  max-width:330px;
  text-align:center;
}
.soc-time span{
  color:#a9bac4;
  font-size:14px;
}
.soc-time b{
  color:#f3f7f9;
  font-size:23px;
  line-height:1;
}
.soc-time.operating::before,
.soc-time.charging::before{
  display:inline-block;
  font-size:18px;
}
.soc-time.operating::before{content:"▣";color:#66dc57}
.soc-time.charging::before{content:"⚡";color:#ffc62e}
@media(max-width:380px){
  .soc-gauge{width:min(76vw,270px)}
  .soc-zone-labels{width:min(76vw,270px)}
}


/* v0.2.18 – SOC title above value, simple BMS status below */
.soc-gauge-inner .soc-label{
  order:1;
  margin:0 0 10px;
  font-size:20px;
  font-weight:800;
}
.soc-gauge-inner .soc-number{
  order:2;
}
.soc-bms-status{
  order:3;
  margin-top:14px;
  color:#b7c4cc;
  font-size:20px;
  font-weight:800;
  letter-spacing:.03em;
}


/* v0.2.19 – BMS status follows SOC color; <5% is forced red Notabschaltung */
.soc-bms-status.soc-green{color:#a9ff19}
.soc-bms-status.soc-yellow{color:#ffc62e}
.soc-bms-status.soc-red{color:#ff4242}
.soc-bms-status.status-critical{
  color:#ff4242;
  font-weight:900;
}


/* v0.2.20 – power and error/action information on SOC overview */
.soc-power{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0 auto;
  padding:8px 0 4px;
  max-width:330px;
  text-align:center;
}
.soc-power span{
  color:#a9bac4;
  font-size:14px;
}
.soc-power b{
  color:#f3f7f9;
  font-size:22px;
  line-height:1;
}
.soc-power.operating-power b{color:#a9ff19}
.soc-power.charging-power b{color:#ffc62e}

.soc-error-box{
  margin:14px auto 0;
  padding-top:14px;
  border-top:1px solid #4b2b2b;
  max-width:360px;
}
.soc-error-box .error-line,
.soc-error-box .action-line{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:7px 4px;
  text-align:center;
}
.soc-error-box span{
  color:#ff7777;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.soc-error-box b{
  color:#f5f7f8;
  font-size:16px;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.soc-error-box small{
  color:#ff9c9c;
  font-size:12px;
}
.soc-error-box .action-line b{
  color:#ffb0b0;
}


/* v0.2.21 – clean lower status display */
.soc-time.operating::before,
.soc-time.charging::before{
  content:none !important;
  display:none !important;
}

/* All values below the SOC ring stay neutral white.
   Only the BMS status inside the ring uses SOC/status colors. */
.soc-time b,
.soc-power b,
.soc-power.operating-power b,
.soc-power.charging-power b{
  color:#f3f7f9 !important;
}

/* v0.2.22 lifetime / cycle display */
.lifetime-energy{margin-top:18px;padding-top:14px;border-top:1px solid #29404c}
.lifetime-energy h3{margin:0 0 10px;color:#b7c4cc;font-size:15px;text-transform:uppercase;letter-spacing:.06em}
.lifetime-grid .cycles{grid-column:1/-1}
.lifetime-grid .cycles b{font-size:28px;color:#f3f7f9}

/* v0.2.26 grouped detail layout */
.detail-group{margin:18px 0 0}.detail-group:first-child{margin-top:0}
.detail-group>h3{margin:0 0 10px;color:#b7c4cc;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.metric-grid{display:grid;gap:10px}.metric-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.metric-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.compact-metric{min-width:0;padding:14px 12px!important}.compact-metric .muted{font-size:12px;line-height:1.15;min-height:28px}.compact-metric .v{margin-top:7px;font-size:20px;line-height:1.15;overflow-wrap:anywhere}
.states-grid .compact-metric{min-height:104px}.states-grid .state-value{font-size:17px}
.runtime-card{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0!important;overflow:hidden}
.runtime-card>div{padding:15px 14px;min-width:0}.runtime-card>div+div{border-left:1px solid #29404c}
.runtime-card span{display:block;color:#9fb0ba;font-size:12px;margin-bottom:6px}.runtime-card b{color:#f3f7f9;font-size:22px;line-height:1.15}
.runtime-card .eta-wide{grid-column:1/-1;border-left:0!important;border-top:1px solid #29404c}.runtime-card .eta-wide b{font-size:18px;white-space:normal}
@media(max-width:380px){.metric-grid{gap:8px}.compact-metric{padding:12px 9px!important}.compact-metric .muted{font-size:11px}.compact-metric .v{font-size:18px}}


/* v0.2.28 – mobile detail layout cleanup */
#metrics{
  display:block !important;
  width:100%;
}

.detail-group{
  display:block;
  width:100%;
  margin:24px 0 0;
}

.detail-group:first-child{
  margin-top:0;
}

.detail-group>h3{
  margin:0 0 12px;
  font-size:17px;
  line-height:1.2;
}

/* Three compact cards across the full phone width */
.metric-grid.cols-3{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

.metric-grid.cols-2{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

.compact-metric{
  min-height:112px;
  padding:14px 10px !important;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.compact-metric .muted{
  min-height:auto;
  font-size:12px;
  line-height:1.15;
  overflow-wrap:normal;
  word-break:normal;
}

.compact-metric .v{
  margin-top:10px;
  font-size:clamp(18px,5.2vw,24px);
  line-height:1.05;
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
}

/* Long text fields may still wrap */
.states-grid .state-value,
.metric-grid.cols-2 .state-value{
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  font-size:17px;
  line-height:1.18;
}

.runtime-card{
  width:100%;
}

@media(max-width:420px){
  .metric-grid{gap:9px}
  .compact-metric{
    min-height:106px;
    padding:12px 9px !important;
  }
  .compact-metric .muted{font-size:11px}
  .compact-metric .v{font-size:clamp(17px,5vw,21px)}
}

@media(max-width:350px){
  .metric-grid.cols-3{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .compact-metric{
    min-height:102px;
    padding:10px 7px !important;
  }
  .compact-metric .muted{font-size:10px}
  .compact-metric .v{font-size:16px}
}


/* v0.2.29 – compact rectangular metric cards */
.metric-grid{
  gap:8px !important;
}

.compact-metric{
  min-height:82px !important;
  padding:10px 11px !important;
  border-radius:12px !important;
  justify-content:flex-start !important;
}

.compact-metric .muted{
  min-height:0 !important;
  margin:0 0 8px !important;
  font-size:12px !important;
  line-height:1.1 !important;
}

.compact-metric .v{
  margin-top:0 !important;
  font-size:clamp(18px,5vw,23px) !important;
  line-height:1.05 !important;
}

.detail-group{
  margin-top:18px !important;
}

.detail-group>h3{
  margin-bottom:8px !important;
}

.states-grid .compact-metric{
  min-height:88px !important;
}

.runtime-card{
  border-radius:12px !important;
}

.runtime-card>div{
  padding:11px 12px !important;
}

.runtime-card span{
  margin-bottom:4px !important;
}

@media(max-width:420px){
  .metric-grid{gap:7px !important}
  .compact-metric{
    min-height:78px !important;
    padding:9px 9px !important;
    border-radius:10px !important;
  }
  .compact-metric .muted{
    margin-bottom:6px !important;
    font-size:11px !important;
  }
  .compact-metric .v{
    font-size:clamp(17px,4.8vw,21px) !important;
  }
}

@media(max-width:350px){
  .compact-metric{
    min-height:74px !important;
    padding:8px 7px !important;
  }
  .compact-metric .muted{font-size:10px !important}
  .compact-metric .v{font-size:16px !important}
}


/* v0.2.30 – approved compact detail layout */
#metrics{display:block!important;width:100%}
.detail-group{width:100%;margin:16px 0 0!important}
.detail-group:first-child{margin-top:0!important}
.detail-group>h3{
  margin:0 0 8px!important;
  color:#eef3f6!important;
  font-size:16px!important;
  font-weight:900!important;
  text-transform:uppercase;
  letter-spacing:.035em!important;
}

.metric-grid{display:grid;gap:7px!important}
.metric-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.metric-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}

.compact-metric{
  min-height:68px!important;
  padding:9px 10px!important;
  border-radius:7px!important;
  display:block!important;
}
.compact-metric .muted{
  margin:0 0 5px!important;
  min-height:0!important;
  font-size:11px!important;
  line-height:1.05!important;
  color:#b4c1c9!important;
}
.compact-metric .v{
  margin:0!important;
  font-size:18px!important;
  line-height:1.05!important;
  font-weight:800!important;
  white-space:nowrap;
}

.detail-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:16px;
}
.detail-split .detail-group{margin-top:0!important}
.state-table,
.system-table{
  border-radius:7px!important;
  padding:0!important;
  overflow:hidden;
}
.state-table{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.state-cell{
  min-height:64px;
  padding:9px 10px;
}
.state-cell:nth-child(odd){border-right:1px solid #29404c}
.state-cell:nth-child(n+3){border-top:1px solid #29404c}
.state-cell span,
.system-table span{
  display:block;
  color:#b4c1c9;
  font-size:10.5px;
  margin-bottom:5px;
}
.state-cell b,
.system-table b{
  display:block;
  color:#f3f7f9;
  font-size:14px;
  line-height:1.15;
  overflow-wrap:anywhere;
}
.system-table>div{
  min-height:64px;
  padding:9px 10px;
}
.system-table>div+div{border-top:1px solid #29404c}

.runtime-card{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  border-radius:7px!important;
  padding:0!important;
  overflow:hidden!important;
}
.runtime-card>div{padding:9px 10px!important}
.runtime-card span{
  margin-bottom:4px!important;
  font-size:10.5px!important;
}
.runtime-card b{
  font-size:16px!important;
}
.runtime-card .eta-wide{
  grid-column:1/-1;
  border-left:0!important;
  border-top:1px solid #29404c;
}

/* Make all upper cards compact: no unnecessary empty vertical space */
@media(max-width:600px){
  .compact-metric{min-height:64px!important;padding:8px 9px!important}
  .compact-metric .muted{font-size:10.5px!important}
  .compact-metric .v{font-size:17px!important}
  .detail-group{margin-top:14px!important}
  .detail-split{gap:8px;margin-top:14px}
  .state-cell,.system-table>div{min-height:60px;padding:8px 9px}
  .state-cell b,.system-table b{font-size:13px}
}


/* v0.2.32 – state text and headings */
.detail-group>h3,
.section-head h2,
.section-head h3,
h1,h2,h3,
.card-title,
.panel-title{
  white-space:nowrap !important;
  overflow:hidden;
  text-overflow:clip;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

/* BMS Substate may break only after underscores via <wbr>. */
.state-cell b{
  word-break:normal !important;
  overflow-wrap:normal !important;
  white-space:normal !important;
}


/* v0.2.33 – Lebensdauer als 2x2-Raster */
.lifetime-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
}
.lifetime-grid .energy-card,
.lifetime-grid .cycles{
  grid-column:auto !important;
  width:auto !important;
  min-width:0;
}


/* v0.2.34 – offline side rail */
.device-card.offline-gray::before,
.device-card.OFFLINE.offline-gray::before,
.device-card.STALE.offline-gray::before{
  background:#6f7b83 !important;
  box-shadow:none !important;
}

.device-card.offline-error::before,
.device-card.OFFLINE.offline-error::before,
.device-card.STALE.offline-error::before{
  background:#ff4242 !important;
  box-shadow:0 0 12px rgba(255,66,66,.35) !important;
}


/* v0.2.35 – chart spike cleanup + readable axes */
.svgchart{
  height:260px !important;
}
.axistext{
  fill:#b7c7d1 !important;
  font-size:17px !important;
  font-weight:600;
}
.axistext.xtick{
  font-size:15px !important;
}
.axistext.ytick{
  font-size:16px !important;
}
.axislabel{
  fill:#e4edf2;
  font-size:18px;
  font-weight:800;
}
.gridline{
  stroke:#29404c !important;
  stroke-width:1.2 !important;
}
.axis{
  stroke:#718591 !important;
  stroke-width:1.3 !important;
}
.series{
  stroke-width:2.6 !important;
}
.chart .legend{
  font-size:14px !important;
  margin-bottom:8px !important;
}