* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  background: #07111f;
  color: #e5eefb;
}

.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 270px;
  background: #0b1628;
  border-right: 1px solid #1d2b44;
  padding: 26px;
}

.logo {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 40px;
}

.cloud {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #00b7ff, #006dff);
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 24px;
}

.logo h2 {
  margin: 0;
  font-size: 18px;
}

.logo span {
  color: #8fa7c7;
  font-size: 13px;
}

nav a {
  display: block;
  padding: 14px 16px;
  color: #9fb4d3;
  border-radius: 12px;
  margin-bottom: 8px;
}

nav a.active,
nav a:hover {
  background: #10233d;
  color: white;
}

.main {
  flex: 1;
  padding: 32px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

header h1 {
  margin: 0;
  font-size: 32px;
}

header p {
  color: #8fa7c7;
  margin-top: 8px;
}

.badge {
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: bold;
}

.online {
  background: rgba(22, 199, 132, .14);
  color: #27e6a4;
  border: 1px solid rgba(39, 230, 164, .35);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.card {
  background: #0b1628;
  border: 1px solid #1d2b44;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
}

.card span {
  color: #8fa7c7;
  font-size: 13px;
}

.card h2 {
  margin: 14px 0 8px;
  font-size: 25px;
}

.card p {
  color: #7389aa;
  margin: 0;
}

.panel {
  background: #0b1628;
  border: 1px solid #1d2b44;
  border-radius: 18px;
  padding: 24px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button {
  background: #006dff;
  color: white;
  border: 0;
  padding: 11px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
}

.status-list {
  margin-top: 22px;
}

.status-list div {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  border-top: 1px solid #1d2b44;
}

.status-list span {
  color: #27e6a4;
}

@media(max-width: 900px) {
  .app {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }

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

.login-body {
  background:#07111f;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}

.login-box {
  width:390px;
  background:#0b1628;
  border:1px solid #1d2b44;
  border-radius:22px;
  padding:36px;
  text-align:center;
  box-shadow:0 25px 80px rgba(0,0,0,.35);
}

.login-box .cloud {
  margin:0 auto 18px;
}

.login-box h1 {
  margin:0;
  font-size:26px;
}

.login-box p {
  color:#8fa7c7;
  margin-bottom:28px;
}

.login-box input {
  width:100%;
  margin-bottom:14px;
  padding:14px;
  border-radius:12px;
  border:1px solid #263a5c;
  background:#07111f;
  color:white;
  outline:none;
}

.login-box button {
  width:100%;
  margin-top:8px;
}

#error {
  color:#ff6b6b;
  margin-top:16px;
}

pre {
  background:#07111f;
  border:1px solid #1d2b44;
  border-radius:14px;
  padding:18px;
  color:#d8e7ff;
  white-space:pre-wrap;
  line-height:1.6;
}

.csv-btn {
  background:#006dff;
  color:white;
  padding:11px 18px;
  border-radius:10px;
  text-decoration:none;
  font-weight:bold;
}

.history-table {
  width:100%;
  border-collapse:collapse;
  margin-top:18px;
}

.history-table th,
.history-table td {
  padding:13px;
  border-top:1px solid #1d2b44;
  text-align:left;
}

.history-table th {
  color:#8fa7c7;
}

.history-table td {
  color:#e5eefb;
}

.charts-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:22px;
}

.charts-grid div {
  background:#07111f;
  border:1px solid #1d2b44;
  border-radius:16px;
  padding:18px;
}

.charts-grid h3 {
  margin:0 0 14px;
  color:#8fa7c7;
  font-size:15px;
}

.live-dot {
  color:#00ffb3;
  font-weight:bold;
}

canvas {
  width:100%;
  height:260px;
}

@media(max-width:900px){
  .charts-grid {
    grid-template-columns:1fr;
  }
}

.alert-row {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  gap:12px;
  padding:14px 0;
  border-top:1px solid #1d2b44;
  color:#d8e7ff;
}

.alert-row span,
.alert-row small {
  color:#8fa7c7;
}