body {
  margin:0;
  font-family: Arial, sans-serif;
  background:#f5f7fb;
}
.topbar {
  height:60px;
  background:#020cff;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
}
.logo { font-weight:bold; }
.user-area span { margin-right:10px; }
.btn-logout {
  color:#020cff;
  background:#fff;
  padding:6px 10px;
  border-radius:4px;
  text-decoration:none;
}
.sidebar {
  width:200px;
  background:#fff;
  position:fixed;
  top:60px;
  bottom:0;
  border-right:1px solid #ddd;
  padding:10px;
}
.sidebar a {
  display:block;
  padding:8px 10px;
  color:#333;
  text-decoration:none;
  border-radius:4px;
  margin-bottom:4px;
}
.sidebar a:hover { background:#eef1ff; }
.content {
  margin-left:220px;
  padding:20px;
}
.cards {
  display:flex;
  gap:15px;
  flex-wrap:wrap;
}
.card {
  background:#fff;
  border-radius:6px;
  padding:15px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.card-number {
  font-size:24px;
  font-weight:bold;
}
.btn-primary {
  background:#020cff;
  color:#fff;
  border:none;
  padding:8px 14px;
  border-radius:4px;
  cursor:pointer;
}
.btn-primary:hover { opacity:.9; }
.table {
  width:100%;
  border-collapse:collapse;
  margin-top:15px;
}
.table th, .table td {
  border:1px solid #ddd;
  padding:8px;
}
.login-wrapper {
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.alert {
  background:#ffe0e0;
  padding:8px;
  margin-bottom:10px;
  border-radius:4px;
  color:#b00;
}
.footer {
  text-align:center;
  padding:10px;
  color:#666;
}