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

body {
  font-family: 'Courier New', Courier, monospace;
  background: #0a0a0a;
  color: #699;
  min-height: 100vh;
  margin: 0;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
}

h1 {
  font-size: 2rem;
  font-weight: normal;
  text-align: center;
  margin-bottom: 0.5rem;
  color: #9dd;
}

.subtitle {
  text-align: center;
  color: #2a4545;
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

a {
  color: #3a8888;
  text-decoration: none;
  transition: color 0.1s;
}

a:hover { color: #7cc; }

.nav-links {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.btn {
  color: #199;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(17, 153, 153, 0.3);
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: inherit;
  transition: all 0.15s;
  cursor: pointer;
  background: transparent;
}

.btn:hover {
  background: rgba(17, 153, 153, 0.08);
  color: #5cc;
  border-color: rgba(17, 153, 153, 0.6);
}

.btn.active {
  background: rgba(17, 153, 153, 0.15);
  color: #5cc;
  border-color: #199;
}

.back {
  text-align: center;
  margin-bottom: 1.5rem;
}

.back a {
  font-size: 0.8rem;
  color: #2a4545;
}

.back a:hover { color: #5cc; }

.loading {
  text-align: center;
  color: #1e3636;
  padding: 2rem;
}