* { box-sizing:border-box; }

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

.login-body {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at top,#172033 0%,#0c1018 55%);
}

.login-card {
  width:390px;
  padding:42px;
  background:#151b27;
  border:1px solid #252e3f;
  border-radius:18px;
  box-shadow:0 25px 80px rgba(0,0,0,.4);
}

.logo,.sidebar-logo {
  font-size:30px;
  font-weight:800;
  letter-spacing:2px;
}

.logo span,.sidebar-logo span {
  color:#62ff87;
}

.login-subtitle {
  color:#8c98aa;
  margin:7px 0 30px;
}

label {
  display:block;
  margin:16px 0 7px;
  color:#b8c1cf;
}

input {
  width:100%;
  padding:13px;
  background:#0e131c;
  border:1px solid #293347;
  color:white;
  border-radius:9px;
}

button {
  border:0;
  border-radius:9px;
  padding:12px 18px;
  font-weight:700;
  cursor:pointer;
  background:#62ff87;
}

.login-card button {
  width:100%;
  margin-top:25px;
}

.alert {
  background:#421b25;
  color:#ff9eae;
  padding:11px;
  border-radius:8px;
  margin-bottom:18px;
}

.sidebar {
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:245px;
  background:#111722;
  border-right:1px solid #202939;
  padding:28px 18px;
}

.sidebar-logo {
  padding:3px 12px 30px;
}

.sidebar a {
  display:block;
  padding:12px 14px;
  margin:4px 0;
  text-decoration:none;
  color:#9ba7b8;
  border-radius:9px;
}

.sidebar a.active,.sidebar a:hover {
  background:#1c2635;
  color:white;
}

.main {
  margin-left:245px;
  padding:34px;
}

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

.topbar h1 { margin:0; }
.topbar p { color:#8d99aa; }

.logout {
  background:#252f40;
  color:white;
}

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

.stat-card,.panel {
  background:#151c28;
  border:1px solid #252f40;
  border-radius:14px;
}

.stat-card { padding:25px; }
.stat-number { font-size:31px;font-weight:800; }
.stat-label { color:#8e9aab;margin-top:6px; }

.panel {
  padding:25px;
  margin-top:20px;
}

.actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

table {
  width:100%;
  border-collapse:collapse;
}

th,td {
  padding:14px;
  text-align:left;
  border-bottom:1px solid #252e3e;
}

th {
  color:#8894a7;
  font-size:13px;
}

select {
  width:100%;
  padding:13px;
  background:#0e131c;
  border:1px solid #293347;
  color:white;
  border-radius:9px;
}

.success-box {
  padding:14px 16px;
  margin:20px 0;
  background:#143b24;
  color:#79ff9b;
  border-radius:9px;
}

.muted {
  color:#8e9aab;
}

.table-wrap {
  overflow-x:auto;
}

.status {
  display:inline-block;
  padding:5px 9px;
  border-radius:20px;
  text-transform:capitalize;
}

.status.active {
  background:#143b24;
  color:#79ff9b;
}

.status.suspended {
  background:#421b25;
  color:#ff9eae;
}

button.small {
  padding:7px 11px;
}

button.danger {
  background:#a93246;
  color:white;
}

button:disabled {
  opacity:.45;
  cursor:not-allowed;
}