* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(160deg, #14161f 0%, #1d2030 100%);
  color: #e8eaf0;
  min-height: 100vh;
}

.page { max-width: 960px; margin: 0 auto; padding: 40px 20px; }

.hero { text-align: center; padding: 30px 0 40px; }
.hero .logo { font-size: 52px; }
.hero h1 { font-size: 32px; letter-spacing: 2px; margin: 10px 0 6px; }
.hero p { color: #8b91a7; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }

.card {
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit;
  background: #202433; border: 1px solid #2c3145; border-radius: 16px; padding: 22px;
  transition: transform .15s, border-color .15s, background .15s;
}
.card:hover { transform: translateY(-4px); border-color: #6c8cff; background: #262b3d; }

.card .icon { font-size: 34px; }
.card .name { font-size: 18px; font-weight: 700; }
.card .desc { font-size: 13px; color: #8b91a7; line-height: 1.6; flex: 1; }

.card .status { align-self: flex-start; font-size: 12px; padding: 3px 10px; border-radius: 12px; }
.status.online { background: #1d3a2c; color: #3ddc84; }
.status.coming { background: #262b3d; color: #5a6078; border: 1px dashed #3a3f52; }

.coming-card { opacity: .6; cursor: not-allowed; }
.coming-card:hover { transform: none; border-color: #2c3145; }