/* One page, so one stylesheet, and it is allowed to be short. */
:root { --paper:#f7f6f3; --ink:#1c1b1a; --muted:#6b6863; --line:#e2e0dc; --green:#0f4d3a; }
* { box-sizing: border-box }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center;
  background: var(--paper); color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
}
.card {
  width: min(92vw, 380px); padding: 40px 32px 32px; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.06);
}
h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.01em }
.note { margin: 10px 0 0; color: var(--muted); font-size: 14px }
.warn { margin: 14px 0 0; color: #8a3b2f; font-size: 14px }
.gbtn {
  display: block; margin-top: 26px; padding: 11px 16px; border-radius: 9px;
  background: var(--green); color: #fff; text-decoration: none; font-weight: 500;
}
.gbtn:hover { filter: brightness(1.12) }
.acct {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--muted);
}
.acct button {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  padding: 6px 12px; border-radius: 7px; font: inherit; cursor: pointer;
}
.acct button:hover { border-color: var(--green); color: var(--green) }
@media (prefers-color-scheme: dark) {
  :root { --paper:#141413; --ink:#ecebe8; --muted:#9a968f; --line:#2c2b29; --green:#2f8f6d }
  .card { background:#1b1b1a; box-shadow:none }
  .acct button { background:#1b1b1a; color:var(--ink) }
}