/* NineConnect Web v50 — Live-Daten Design
   Rein visuelles Upgrade. Vorhandene IDs/JS-Logik bleiben unverändert. */

#page-live{
  --live-cyan:#16d9ff;
  --live-blue:#1a79ff;
  --live-green:#25e69c;
  --live-panel:linear-gradient(145deg,rgba(5,27,50,.90),rgba(3,14,28,.88));
}

#page-live.active{
  display:grid!important;
  gap:18px;
}

/* Main hero */
#page-live .live-hero{
  min-height:270px;
  padding:28px 30px!important;
  border:1px solid rgba(22,207,255,.27)!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 80% 18%,rgba(22,125,255,.18),transparent 28%),
    radial-gradient(circle at 25% 90%,rgba(29,224,168,.10),transparent 26%),
    linear-gradient(145deg,rgba(5,28,52,.94),rgba(2,14,29,.93))!important;
  box-shadow:0 26px 70px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.03)!important;
  overflow:hidden!important;
}

#page-live .live-hero:before{
  content:"LIVE";
  position:absolute;
  top:22px;
  right:24px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.22em;
  color:#75eaff;
  border:1px solid rgba(22,217,255,.24);
  background:rgba(0,20,38,.56);
  padding:7px 10px;
  border-radius:999px;
  z-index:2;
}

#page-live .live-hero h2{
  font-size:clamp(28px,3vw,44px)!important;
  margin:7px 0 8px!important;
  letter-spacing:-.035em;
}

#page-live .live-hero p{
  color:#8fa9c1!important;
}

#page-live .live-meta{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:16px;
}

#page-live .live-meta > *{
  border:1px solid rgba(31,173,255,.18)!important;
  border-radius:999px!important;
  background:rgba(0,15,29,.48)!important;
  padding:7px 10px!important;
  color:#92aec5!important;
}

/* Speed ring */
#page-live .live-speed-ring{
  width:210px!important;
  height:210px!important;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(0,22,40,.98) 0 52%,transparent 53%),
    conic-gradient(var(--live-cyan) 0 72deg,rgba(255,255,255,.07) 72deg 360deg)!important;
  border:1px solid rgba(22,214,255,.24)!important;
  box-shadow:
    0 0 0 11px rgba(4,25,45,.56),
    0 0 45px rgba(0,176,255,.13),
    inset 0 0 35px rgba(0,144,255,.08)!important;
}

#page-live .live-speed-ring:before{
  display:none!important;
}

#page-live .live-speed-ring strong{
  font-size:60px!important;
  line-height:.9!important;
  text-shadow:0 0 25px rgba(23,214,255,.18);
}

#page-live .live-speed-ring span{
  color:#8fa8be!important;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:11px!important;
}

/* Stats */
#page-live .live-stat-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
}

#page-live .live-stat{
  min-height:128px;
  border:1px solid rgba(26,167,255,.18)!important;
  border-radius:22px!important;
  background:var(--live-panel)!important;
  padding:18px!important;
  box-shadow:0 16px 42px rgba(0,0,0,.18)!important;
  position:relative;
  overflow:hidden;
}

#page-live .live-stat:after{
  content:"";
  position:absolute;
  width:80px;
  height:80px;
  right:-28px;
  bottom:-36px;
  border-radius:50%;
  background:var(--live-cyan);
  filter:blur(38px);
  opacity:.07;
}

#page-live .live-stat small{
  color:#7895ae!important;
  font-size:10px!important;
  letter-spacing:.14em;
  text-transform:uppercase;
}

#page-live .live-stat strong{
  display:block;
  margin-top:10px;
  font-size:30px!important;
  color:#f4fbff!important;
}

#page-live .live-stat em{
  color:#7895ae!important;
  font-style:normal!important;
  font-size:11px!important;
}

/* Map */
#page-live .live-map-card,
#page-live .map-card,
#page-live .card:has(#liveMap){
  border:1px solid rgba(22,185,255,.22)!important;
  border-radius:26px!important;
  overflow:hidden!important;
  background:linear-gradient(145deg,rgba(6,28,50,.86),rgba(3,14,27,.90))!important;
  box-shadow:0 22px 60px rgba(0,0,0,.25)!important;
}

#page-live #liveMap{
  min-height:430px!important;
  border-radius:20px!important;
  overflow:hidden!important;
  box-shadow:inset 0 0 0 1px rgba(23,207,255,.08);
}

#page-live .map-toolbar,
#page-live .live-map-toolbar{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  align-items:center;
}

#page-live .map-toolbar button,
#page-live .live-map-toolbar button{
  border:1px solid rgba(24,177,255,.20)!important;
  background:rgba(3,20,37,.72)!important;
  color:#dff7ff!important;
  border-radius:13px!important;
}

/* Charts */
#page-live canvas{
  border-radius:14px;
}

#page-live .chart-card,
#page-live .live-chart-card,
#page-live .card:has(canvas){
  border:1px solid rgba(28,165,255,.16)!important;
  border-radius:24px!important;
  background:linear-gradient(145deg,rgba(6,27,48,.84),rgba(3,15,28,.90))!important;
  box-shadow:0 18px 48px rgba(0,0,0,.20)!important;
}

/* Connection status */
#page-live [id*="Gps"],
#page-live [id*="Bluetooth"],
#page-live [id*="Connection"]{
  transition:.18s ease;
}

/* E-bike mode shares style but green accent */
#page-live.ebike-live{
  --live-cyan:#2ce7aa;
  --live-blue:#14b8c6;
  --live-green:#2ce7aa;
}

#page-live.ebike-live .live-hero{
  border-color:rgba(44,231,170,.24)!important;
  background:
    radial-gradient(circle at 80% 18%,rgba(44,231,170,.13),transparent 28%),
    radial-gradient(circle at 25% 90%,rgba(31,145,255,.09),transparent 26%),
    linear-gradient(145deg,rgba(4,31,44,.95),rgba(2,16,28,.93))!important;
}

@media(max-width:1100px){
  #page-live .live-stat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:720px){
  #page-live .live-hero{
    grid-template-columns:1fr!important;
    text-align:center!important;
  }
  #page-live .live-meta{
    justify-content:center;
  }
  #page-live .live-speed-ring{
    width:190px!important;
    height:190px!important;
  }
  #page-live .live-stat-grid{
    grid-template-columns:1fr 1fr!important;
  }
  #page-live #liveMap{
    min-height:340px!important;
  }
}

@media(max-width:470px){
  #page-live .live-stat-grid{
    grid-template-columns:1fr!important;
  }
}