* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #0d1117; color: #e6edf3; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
}
.bg {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(600px 300px at 20% 10%, rgba(255, 200, 60, .08), transparent),
    radial-gradient(800px 400px at 80% 90%, rgba(60, 120, 255, .08), transparent);
}
header { text-align: center; padding: 56px 20px 12px; }
header h1 { font-size: 40px; letter-spacing: 4px; }
.sub { color: #8b949e; margin-top: 8px; font-size: 15px; }
main {
  display: flex; gap: 24px; flex-wrap: wrap; justify-content: center;
  padding: 36px 20px; max-width: 900px;
}
.card {
  width: 260px; padding: 32px 24px; border-radius: 16px;
  background: #161b22; border: 1px solid #30363d;
  text-align: center; text-decoration: none; color: inherit;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  display: block;
}
a.card:hover {
  transform: translateY(-4px); border-color: #f0b429;
  box-shadow: 0 8px 32px rgba(240, 180, 41, .15);
}
.card.disabled { opacity: .45; cursor: default; }
.icon { font-size: 56px; }
.name { font-size: 22px; margin: 14px 0 8px; font-weight: 600; }
.desc { font-size: 13px; color: #8b949e; line-height: 1.6; min-height: 44px; }
.badge {
  display: inline-block; margin-top: 16px; padding: 8px 20px; border-radius: 20px;
  font-size: 14px; background: #f0b429; color: #1a1a1a; font-weight: 600;
}
.card.disabled .badge { background: #30363d; color: #8b949e; }
footer { color: #484f58; font-size: 13px; padding: 24px; margin-top: auto; }