:root { --bg: #f4efe7; --surface: #fffdf9; --ink: #2b2522; --muted: #7a6f66; --line: #e4dacc; --accent: #8a6d45;
  --accent-hover: #765b37; --err: #a0473b; --err-soft: #f6e3df; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); font: 400 16px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased; }
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
form { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 32px 28px; box-shadow: 0 1px 2px rgba(60, 45, 30, .05), 0 6px 24px rgba(60, 45, 30, .06); display: flex;
  flex-direction: column; }
.star { width: 28px; height: 28px; fill: var(--accent); align-self: center; }
h1 { font: 600 30px/1.1 Georgia, "Times New Roman", serif; text-align: center; margin: 10px 0 22px; }
label { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 6px; }
input { font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); margin-bottom: 16px; width: 100%; }
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
button { font: inherit; font-weight: 600; padding: 12px; border: 0; border-radius: 10px; background: var(--accent);
  color: #fff; cursor: pointer; margin-top: 4px; }
button:hover { background: var(--accent-hover); }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.err { background: var(--err-soft); color: var(--err); border-radius: 8px; padding: 10px 12px; font-size: 14px;
  margin: 0 0 16px; }