:root {
  color-scheme: light dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

body {
  margin: 0;
  background: #f5f7fb;
  color: #172033;
}

main {
  width: min(760px, calc(100% - 40px));
  margin: 48px auto;
  padding: 40px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 14px 40px rgb(23 32 51 / 10%);
}

h1, h2 { line-height: 1.2; }
h2 { margin-top: 2rem; }
a { color: #3157c8; }
.muted { color: #5e687c; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.button { display: inline-block; padding: 11px 17px; border-radius: 10px; background: #3157c8; color: #fff; text-decoration: none; }
label { display: block; margin-bottom: 6px; font-weight: 650; }
input { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid #98a2b5; border-radius: 9px; font: inherit; }
button { border: 0; font: inherit; cursor: pointer; }
.message { min-height: 1.6em; }
.message--error { color: #b42318; }

@media (max-width: 600px) {
  main { width: 100%; margin: 0; min-height: 100vh; padding: 28px 20px; border-radius: 0; }
}

@media (prefers-color-scheme: dark) {
  body { background: #101522; color: #edf1fa; }
  main { background: #171e2e; }
  a { color: #9bb3ff; }
  .muted { color: #b5bfd2; }
  input { background: #101522; color: #edf1fa; }
}