* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, "Noto Sans TC", sans-serif;
  margin: 0;
  background: #0f1115;
  color: #e6e6e6;
  line-height: 1.6;
}
.topnav {
  display: flex;
  gap: 1.25rem;
  padding: 1rem 1.5rem;
  background: #171a21;
  border-bottom: 1px solid #2a2e37;
  align-items: center;
  flex-wrap: wrap;
}
.topnav a { color: #cfd6e4; text-decoration: none; }
.topnav a:hover { color: #ffffff; }
.brand { font-weight: 700; color: #4fc3a1 !important; margin-right: auto; }
main { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem; }
h1, h2 { color: #ffffff; }
code, kbd {
  background: #1f232c;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9em;
}
.status-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.status-table th, .status-table td {
  border: 1px solid #2a2e37;
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.status-table th { background: #171a21; }
.ok { color: #4fc3a1; font-weight: 600; }
.bad { color: #e0665a; font-weight: 600; }
.note { color: #9aa3b2; font-size: 0.9em; }
.login-form, .ledger-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 360px;
}
.ledger-form { flex-direction: row; align-items: flex-end; flex-wrap: wrap; max-width: none; }
.ledger-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9em; }
input, select, button {
  background: #1f232c;
  border: 1px solid #2a2e37;
  color: #e6e6e6;
  padding: 0.5rem;
  border-radius: 6px;
  font-size: 1em;
}
button { cursor: pointer; background: #2a6f5c; border-color: #2a6f5c; }
button:hover { background: #338071; }
footer { text-align: center; color: #6b7280; font-size: 0.8em; padding: 2rem 0; }
.download-btn {
  display: inline-block;
  background: #2a6f5c;
  border: 1px solid #2a6f5c;
  color: #ffffff !important;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
}
.download-btn:hover { background: #338071; }
.btn-secondary { background: #1f232c; border-color: #2a2e37; }
.btn-secondary:hover { background: #2a2e37; }
.hero {
  text-align: center;
  padding: 3rem 1rem;
  margin: -2rem -1.5rem 2rem;
  background: linear-gradient(180deg, #1a2a24 0%, #0f1115 100%);
  border-bottom: 1px solid #2a2e37;
}
.hero h1 { font-size: 2.5rem; margin: 0 0 0.5rem; }
.hero-tagline { color: #9aa3b2; margin: 0 0 1.5rem; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
section { margin: 2.5rem 0; }
.grid-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.tile {
  display: block;
  background: #171a21;
  border: 1px solid #2a2e37;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: inherit;
}
.tile:hover { border-color: #4fc3a1; }
.tile h3 { margin: 0 0 0.4rem; color: #4fc3a1; }
.tile p { margin: 0; color: #9aa3b2; font-size: 0.9em; }
.player-list { list-style: none; padding: 0; }
.player-list li { padding: 0.3rem 0; border-bottom: 1px solid #1f232c; }