body {
  background:#0f172a;
  color:#e5e7eb;
  font-family:system-ui,Arial,sans-serif;
  padding:20px;
}

h1,h2 { margin:15px 0 }

.card {
  background:#020617;
  border-radius:12px;
  padding:15px;
  margin-bottom:25px;
  box-shadow: inset 0 0 0 1px #1e293b;
}

.chart-card {
  max-width:900px;
  height:260px;
}

.chart-title {
  font-size:14px;
  color:#94a3b8;
  margin-bottom:8px;
}

canvas {
  width:100% !important;
  height:200px !important;
}

table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

th,td {
  border-bottom:1px solid #1e293b;
  padding:8px;
}

th { color:#38bdf8 }

.badge {
  background:#1e293b;
  padding:4px 8px;
  border-radius:6px;
  font-size:12px;
}

.logout {
  float:right;
  font-size:13px;
  color:#94a3b8;
  text-decoration:none;
}

/* LOGIN */
body.login {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  margin:0;
}

.login-box {
  background:#020617;
  padding:30px;
  width:320px;
  border-radius:12px;
}

.login-box input, .login-box button {
  width:100%;
  padding:12px;
  margin-bottom:10px;
  border-radius:8px;
  border:none;
}

.login-box button {
  background:#38bdf8;
  font-weight:700;
}

.err {
  color:#f87171;
  font-size:13px;
}
/* ===== CHART SIZE FIX ===== */
.chart-card {
  width: 15em;   /* sebelumnya 900px */
  height: 15em;      /* sebelumnya 260+ */
  padding: 12px;
}

.chart-card canvas {
  height: 200px !important;
}