body {
  margin:0;
  font-family:system-ui;
  color:#e2e8f0;
  background: radial-gradient(circle at top, #0f172a, #020617);
}

/* header */
header {
  padding:20px;
  display:flex;
  justify-content:space-between;
}

.logo {
  color:#22c55e;
  font-weight:bold;
}

nav a {
  margin-left:15px;
  color:#cbd5f5;
  text-decoration:none;
}

nav a:hover {
  color:#fff;
}

/* hero */
.hero {
  text-align:center;
  padding:100px 20px;
}

.btn {
  background:#22c55e;
  padding:12px 24px;
  border-radius:8px;
  color:#000;
  text-decoration:none;
}

/* cards */
.features {
  display:flex;
  gap:20px;
  justify-content:center;
  padding:40px;
}

.card {
  background:#1e293b;
  padding:20px;
  border-radius:10px;
  width:220px;
  text-align:center;
  transition:0.2s;
}

.card:hover {
  background:#334155;
}

/* login */
.box {
  background:rgba(30,41,59,0.9);
  backdrop-filter:blur(10px);
  padding:30px;
  border-radius:12px;
  width:320px;
}

input {
  width:100%;
  padding:10px;
  margin:8px 0;
  border:none;
  border-radius:6px;
  background:#0f172a;
  color:#fff;
}

button {
  width:100%;
  padding:10px;
  background:#22c55e;
  border:none;
  border-radius:6px;
  cursor:pointer;
}

#status {
  margin-top:10px;
  font-size:14px;
}

/* dashboard */
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:15px;
  padding:20px;
}