:root {
  --bg: #eef1f6; --card: #ffffff; --ink: #1d2330; --muted: #677085; --line: #d5dae3;
  --accent: #2f6fde; --accent2: #2559b8; --err: #d6453d;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #12151b; --card: #1d2129; --ink: #e5e8ee; --muted: #9aa3b5; --line: #353b47; --accent: #5b8ff0; --accent2: #4a7ad8; --err: #f06a62; }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  background-image: radial-gradient(circle at 15% 10%, rgba(47,111,222,.14), transparent 45%),
                    radial-gradient(circle at 85% 90%, rgba(91,63,209,.12), transparent 45%);
}
.wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.card {
  width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 32px 28px 28px; box-shadow: 0 18px 50px rgba(20, 30, 60, .14); display: flex; flex-direction: column;
}
.logo { color: var(--accent); display: flex; justify-content: center; margin-bottom: 8px; }
h1 { margin: 0; text-align: center; font-size: 22px; }
.sub { margin: 6px 0 22px; text-align: center; color: var(--muted); font-size: 14px; }
label { font-size: 13px; color: var(--muted); margin: 10px 0 5px; }
input {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: transparent;
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; outline: none;
}
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,111,222,.18); }
.pw { position: relative; }
.pw input { padding-right: 42px; }
.pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: none;
  cursor: pointer; font-size: 16px; opacity: .6; padding: 4px; }
.err { min-height: 20px; color: var(--err); font-size: 13px; margin: 10px 0 4px; }
button[type=submit] {
  font: inherit; font-size: 15px; font-weight: 600; color: #fff; background: var(--accent); border: none;
  border-radius: 9px; padding: 11px; cursor: pointer;
}
button[type=submit]:hover { background: var(--accent2); }
button[type=submit]:disabled { opacity: .7; cursor: default; }