:root { color-scheme: light dark; --navy: #1f376b; --blue: #1d84c6; --blue-deep: #176aa0;
    --coral: #f79e81; --ink: #1b2236; --muted: #5b6577; --surface: #ffffff; --page: #f4f6fa;
    --line: #e3e7ef; }
  @media (prefers-color-scheme: dark) { :root { --ink: #e8ecf5; --muted: #a7b0c3;
    --surface: #1c2231; --page: #12172a; --line: #2c3548; --blue: #4ea6dd; } }
  * { box-sizing: border-box; }
  body { margin: 0; min-height: 100vh; font: 16px/1.5 "Avenir Next", Avenir, "Helvetica Neue",
    system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink);
    background: linear-gradient(160deg, var(--navy) 0 38%, var(--page) 38% 100%); }
  main { max-width: 30rem; margin: 0 auto; padding: 8vh 1rem 2rem; }
  .card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 2rem 1.75rem; box-shadow: 0 20px 50px rgba(15, 25, 50, .18); }
  .logo { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto 1.5rem; }
  h1 { font-size: 1.45rem; margin: 0 0 .25rem; }
  .brand { color: var(--navy); font-weight: 700; font-size: .8rem; letter-spacing: .08em;
    text-transform: uppercase; margin-bottom: .35rem; }
  @media (prefers-color-scheme: dark) { .brand { color: #b8c4dc; } }
  p.muted, .muted { color: var(--muted); }
  ul.list { list-style: none; padding: 0; margin: 1rem 0 0; }
  ul.list li { margin-bottom: .5rem; }
  button { font: inherit; cursor: pointer; border-radius: 10px; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink); padding: .7rem .95rem; width: 100%;
    text-align: left; }
  button:hover { border-color: var(--blue); }
  button.primary { background: var(--blue); border-color: var(--blue); color: #fff;
    text-align: center; font-weight: 600; }
  button.primary:hover { background: var(--blue-deep); }
  .note { font-size: .85rem; margin-top: 1rem; }
  .dev-form label { display: block; margin: .6rem 0; font-size: .9rem; }
  .dev-form input, .dev-form select, .dev-form textarea { display: block; width: 100%;
    font: inherit; padding: .5rem; border-radius: 8px; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink); }
  .dev-form .trap { position: absolute; left: -10000px; width: 1px; height: 1px; }