@font-face { font-family: "Cinzel"; src: url("/fonts/Cinzel.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/EBGaramond.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100dvh; }
body {
  display: grid; place-items: center;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px));
  color: #f4ead2;
  font: 400 19px/1.5 "EB Garamond", Georgia, serif;
  background: radial-gradient(ellipse 120% 70% at 50% 0%, #1a2163 0%, rgba(26, 33, 99, 0) 70%), #0d1230;
}
.login { width: min(100%, 380px); display: grid; justify-items: center; gap: 18px; text-align: center; }
.login-mark { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
h1 { margin: 0; font: 600 30px/1.1 "Cinzel", Georgia, serif; letter-spacing: 0.24em; color: #d6b670; text-transform: uppercase; }
form { width: 100%; display: grid; gap: 12px; text-align: left; }
label { font: 600 14px/1.2 "Cinzel", Georgia, serif; letter-spacing: 0.1em; color: #d6b670; }
input {
  width: 100%; min-height: 54px; padding: 12px 16px; border-radius: 14px;
  border: 1px solid rgba(214, 182, 112, 0.5); background: #080b20; color: #f4ead2; font: inherit; font-size: 20px;
}
input:focus { outline: 3px solid #ecd49a; outline-offset: 2px; }
button {
  min-height: 54px; border-radius: 999px; border: 1px solid #d6b670; cursor: pointer;
  background: linear-gradient(180deg, #e3c785, #c49d55); color: #121636;
  font: 700 17px/1 "Cinzel", Georgia, serif; letter-spacing: 0.1em;
}
.login-error { margin: 0; color: #f0a994; }