* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #1a1a2e; color: #c0d0e0; font-family: monospace; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 60px 20px 30px; }
.hero { max-width: 620px; width: 100%; text-align: center; margin-bottom: 28px; }
.hero h1 { font-size: 28px; color: #64ffda; margin-bottom: 8px; letter-spacing: 1px; }
.hero .tagline { color: #889; font-size: 13px; margin-bottom: 4px; }
.actions { max-width: 620px; width: 100%; display: flex; flex-direction: column; gap: 14px; }
.action {
  background: #0f0f1f; border: 1px solid #233; border-radius: 6px;
  padding: 22px 26px;
}
.action h2 { font-size: 14px; color: #8af; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
.action p { font-size: 13px; color: #a0b0c0; line-height: 1.6; margin-bottom: 14px; }
/* Register card: bigger, brighter heading so "not registered yet? register"
   reads at a glance — the most common first-visit action. */
.action-register { border-color: #2a5a4a; }
.action-register h2 { font-size: 18px; color: #64ffda; text-transform: none; letter-spacing: 0.3px; }
.action-register p { font-size: 14px; color: #c0d0e0; }
.btn {
  display: inline-block; padding: 10px 20px; font-family: monospace; font-size: 13px;
  text-decoration: none; border-radius: 3px; transition: all 0.15s;
}
.btn-primary {
  background: #1a3a2a; color: #64ffda; border: 1px solid #2a5a4a;
}
.btn-primary:hover { background: #2a4a3a; border-color: #3a6a5a; }
.btn-secondary {
  background: #112; color: #8af; border: 1px solid #233;
}
.btn-secondary:hover { background: #1a2a3a; color: #aff; border-color: #345; }
.btn-lg { font-size: 15px; padding: 14px 26px; letter-spacing: 0.4px; }
.footer { margin-top: 30px; color: #445; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.footer a { color: #667; }
.signed-out-banner {
  max-width: 620px; width: 100%; margin-bottom: 14px;
  padding: 12px 16px; border: 1px solid #2a5a4a; border-radius: 4px;
  background: #0f1f15; color: #c0e0d0; font-size: 13px; line-height: 1.5;
}
.signed-out-banner strong { color: #64ffda; margin-right: 6px; }
.signed-out-banner.hidden { display: none; }
.first-visit-banner {
  max-width: 620px; width: 100%; margin-bottom: 14px;
  padding: 10px 16px; border: 1px solid #345; border-radius: 4px;
  background: #14142a; color: #c0d0e0; font-size: 13px; line-height: 1.5;
  text-align: center;
}
.first-visit-banner a { color: #64ffda; text-decoration: none; }
.first-visit-banner a:hover { text-decoration: underline; }
.first-visit-banner.hidden { display: none; }
label { display: block; font-size: 11px; color: #889; margin: 8px 0 4px; text-transform: uppercase; letter-spacing: 0.8px; }
input[type=text], input[type=password] {
  width: 100%; padding: 8px 10px; font-family: monospace; font-size: 13px;
  background: #1a1a2e; color: #c0d0e0; border: 1px solid #233; border-radius: 3px;
}
input[type=text]:focus, input[type=password]:focus { outline: none; border-color: #64ffda; }
form#login-form button { width: 100%; margin-top: 12px; cursor: pointer; }
.error { color: #ff6464; font-size: 12px; margin: 6px 0; }
.takeover-warning {
  margin: 10px 0; padding: 10px 12px; border-radius: 4px;
  background: rgba(214, 165, 64, 0.10);
  border: 1px solid rgba(214, 165, 64, 0.55);
  color: #f0c674; font-size: 12px; line-height: 1.4;
}
.takeover-warning strong { display: block; color: #ffd084; margin-bottom: 4px; }
.takeover-warning p { margin: 0; color: #d8c89c; }
.hidden { display: none !important; }