:root {
  color-scheme: dark;
  --gold: #d4a45e;
  --gold-bright: #f0cf99;
  --ink: #f1e2cb;
  --muted: #a99c8b;
  --line: rgb(216 164 88 / .34);
  --surface: rgb(10 10 9 / .92);
  --danger: #cf756e;
  --green: #8ec47f;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background:
    radial-gradient(circle at 50% 14%, transparent 0 10%, rgb(0 0 0 / .25) 58%, rgb(0 0 0 / .82) 100%),
    linear-gradient(rgb(4 5 5 / .53), rgb(2 3 3 / .84)),
    url("/auth-assets/admin-office-night.png") center / cover fixed;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.auth-shell {
  width: min(100%, 31rem);
  position: relative;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: .35rem;
  background:
    radial-gradient(circle at 50% 0%, rgb(167 103 42 / .13), transparent 35%),
    linear-gradient(145deg, rgb(17 15 12 / .96), rgb(5 6 6 / .97));
  box-shadow: 0 2rem 5rem rgb(0 0 0 / .62), inset 0 0 3rem rgb(194 131 55 / .04);
  backdrop-filter: blur(18px);
}
.auth-shell::before, .auth-shell::after {
  content: "";
  position: absolute;
  width: 2.35rem;
  height: 2.35rem;
  pointer-events: none;
}
.auth-shell::before { inset: .55rem auto auto .55rem; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.auth-shell::after { inset: auto .55rem .55rem auto; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.auth-brand { text-align: center; }
.auth-brand img { width: 13rem; height: 8.5rem; object-fit: contain; margin: -1.5rem auto -1rem; filter: drop-shadow(0 0 1rem rgb(209 151 76 / .2)); }
.auth-eyebrow { margin: 0; color: var(--gold); font-size: .66rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
h1 { margin: .35rem 0 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: clamp(1.8rem, 5vw, 2.45rem); }
.auth-intro { margin: .7rem auto 1.35rem; max-width: 26rem; color: var(--muted); font-size: .84rem; line-height: 1.55; text-align: center; }
.auth-form { display: grid; gap: .8rem; }

.setup-summary {
  display: grid;
  gap: .28rem;
  margin: 0 0 1rem;
  padding: .85rem .95rem;
  border: 1px solid rgb(216 164 88 / .24);
  background: rgb(4 5 5 / .58);
  text-align: center;
}
.setup-summary span { color: var(--muted); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; }
.setup-summary strong { color: var(--gold-bright); font-family: Georgia, "Times New Roman", serif; font-size: .94rem; font-weight: 500; }
.auth-field { display: grid; gap: .35rem; }
.auth-field span { color: #d8cbb9; font-size: .72rem; font-weight: 760; }
.auth-control {
  width: 100%; min-height: 3rem; padding: .72rem .82rem;
  border: 1px solid rgb(214 160 82 / .34); border-radius: .25rem;
  background: rgb(3 5 5 / .86); color: var(--ink); outline: none;
}
.auth-control:focus { border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgb(216 173 104 / .12); }
.auth-button {
  min-height: 3rem; display: flex; align-items: center; justify-content: center; gap: .65rem;
  padding: .68rem .9rem; border: 1px solid rgb(215 163 86 / .54); border-radius: .25rem;
  background: linear-gradient(145deg, rgb(62 40 22 / .96), rgb(16 13 10 / .98));
  color: var(--gold-bright); font-size: .7rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
}
.auth-button:hover:not(:disabled) { border-color: var(--gold-bright); transform: translateY(-1px); }
.auth-button:disabled, .auth-button.is-disabled { opacity: .48; cursor: not-allowed; }
.auth-button--google { background: rgb(247 247 247); border-color: rgb(255 255 255 / .8); color: #282828; text-transform: none; letter-spacing: 0; font-size: .82rem; }
.google-mark { width: 1.15rem; height: 1.15rem; display: grid; place-items: center; border-radius: 50%; font-weight: 900; color: #4285f4; }
.auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; margin: 1rem 0; color: var(--muted); font-size: .65rem; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; background: rgb(216 164 88 / .2); }
.auth-message { margin: 0 0 1rem; padding: .7rem .8rem; border: 1px solid rgb(207 117 110 / .45); background: rgb(73 25 22 / .4); color: #f1b7b2; font-size: .75rem; line-height: 1.45; }
.auth-message.is-notice { border-color: rgb(142 196 127 / .45); background: rgb(28 67 24 / .34); color: #c8ebc1; }
.auth-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; color: var(--muted); font-size: .68rem; }
.auth-link { color: var(--gold-bright); text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.otp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .42rem; }
.otp-box { min-width: 0; min-height: 3.55rem; padding: .25rem; text-align: center; font-family: Georgia, serif; font-size: 1.45rem; }
.auth-meta { margin: .85rem 0 0; color: var(--muted); font-size: .68rem; text-align: center; }
.security-seal { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: 1.25rem; color: rgb(203 178 139 / .72); font-size: .61rem; letter-spacing: .08em; text-transform: uppercase; }
.security-dot { width: .42rem; height: .42rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 .55rem rgb(142 196 127 / .7); }
@media (max-width: 560px) { .auth-shell { padding: 1.4rem 1rem; } .auth-footer { align-items: flex-start; flex-direction: column; } .otp-grid { gap: .25rem; } }