:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  color: #f7f9ff;
  background: #0b0c10;
  --surface: #11141c;
  --line: #30394a;
  --muted: #b3bdce;
  --accent: #a8c8ff;
  --action: #c91e39;
  --red: #ed344e;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.login-card {
  width: min(100%, 560px);
  padding: clamp(22px, 6vw, 34px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
}

.login-kicker {
  margin: 6px 0 10px;
  color: var(--accent);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1 { margin: 0; font-size: clamp(1.8rem, 6vw, 2.2rem); line-height: 1.15; letter-spacing: -.04em; }
.login-intro { margin: 8px 0 28px; color: var(--muted); font-size: .85rem; }
a { color: var(--accent); text-underline-offset: 3px; }

.google, .login-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 46px;
  width: 100%;
  border-radius: 6px;
  font: inherit;
  font-size: .875rem;
  font-weight: 700;
}

.google { background: #f7f9ff; color: #11141c; border: 1px solid #b3bdce; text-decoration: none; }
.google:hover { background: #e4edff; }
.google svg { flex: none; width: 18px; height: 18px; }
.login-privacy { margin: 10px 0 0; text-align: center; font-size: .75rem; }
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  color: var(--muted);
  font-size: .78rem;
}
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

form { display: grid; gap: 8px; margin: 0; }
label { font-size: .8rem; font-weight: 650; }
input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #0b0c10;
  color: #f7f9ff;
  font: inherit;
  font-size: 1rem;
}
input::placeholder { color: var(--muted); }
.login-submit { margin-top: 6px; border: 0; background: var(--action); color: #fff; cursor: pointer; }
.login-submit:hover { box-shadow: inset 0 0 0 2px var(--red); }
.login-message { margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; font-size: .85rem; }
.login-hint, .login-retry, .login-footer { color: var(--muted); font-size: .78rem; }
.login-hint { margin: 0; }
.login-retry, .login-footer { margin: 16px 0 0; text-align: center; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }