* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", sans-serif;
  background: #0f0f23;
  color: #e6e6f2;
  margin: 0;
  padding: 2rem;
}

main {
  max-width: 900px;
  margin: 0 auto;
}

h1 {
  margin-bottom: 0.25rem;
}

.subtitle {
  color: #8b8b9f;
  margin-top: 0;
}

.status {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.status.ok { background: #1b4332; color: #95d5b2; }
.status.warn { background: #433218; color: #f2cc8f; }
.status.error { background: #431a1a; color: #ff9f9f; }

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 700px) {
  .cards { grid-template-columns: 1fr; }
}

.card {
  background: #18182b;
  border: 1px solid #2a2a45;
  border-radius: 8px;
  padding: 1.5rem;
}

.card h2 {
  margin-top: 0;
  font-size: 1.2rem;
}

.card p {
  color: #a0a0b5;
}

.button {
  display: inline-block;
  background: #3b82f6;
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}

.button:hover { background: #2563eb; }

pre {
  background: #0c0c1a;
  border-radius: 6px;
  padding: 1rem;
  overflow: auto;
  max-height: 240px;
  font-size: 0.85rem;
  margin-top: 1rem;
}

.env-help {
  margin-top: 2rem;
  padding: 1rem;
  background: #141425;
  border-radius: 8px;
}

.env-help code {
  background: #0c0c1a;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  word-break: break-all;
}