body{
  background:#0b0f17;
  color:white;
  font-family:Arial, sans-serif;
  margin:0;
}

.topbar{
  display:flex;
  justify-content:space-between;
  padding:16px;
  border-bottom:1px solid #222;
}

.grid{
  padding:16px;
}

.panel{
  background:#111;
  padding:16px;
  border-radius:12px;
}

.card{
  background:#1a1a1a;
  padding:16px;
  border-radius:12px;
}

.kpi-value{
  font-size:40px;
  font-weight:900;
}

.bar{
  margin-top:12px;
  height:16px;
  background:#333;
  border-radius:999px;
  overflow:hidden;
}

.bar-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#00bfff,#00ff88);
}

.lamp{
  width:12px;
  height:12px;
  border-radius:50%;
  display:inline-block;
}

.mobile-sticky{ display:none; }

@media (max-width: 600px){
  body{
    font-size:19px;
    line-height:1.5;
  }

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

  .kpi-value{
    font-size:40px;
  }

  .mobile-sticky{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 16px;
    background:#0f1420;
    border-bottom:1px solid #222;
    position:sticky;
    top:64px;
    z-index:10;
    font-size:18px;
  }

  .ms-left{
    display:flex;
    gap:8px;
    font-weight:900;
  }
}