:root {
  color-scheme: dark;
  font-family: Georgia, 'Times New Roman', serif;
  background: #10131a;
  color: #f0e5ce;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse at 12% 28%, rgb(23 91 150 / 28%), transparent 38%),
    radial-gradient(ellipse at 90% 72%, rgb(147 46 31 / 27%), transparent 40%),
    linear-gradient(145deg, #171b24, #090b10 75%);
}

.portal { width: min(100% - 32px, 500px); margin: 0 auto; padding: 9vh 0 32px; }
.brand { text-align: center; margin-bottom: 28px; }
.eyebrow { color: #c9a76b; font: 700 11px/1.5 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 8px 0; font-size: clamp(36px, 10vw, 54px); letter-spacing: .02em; text-shadow: 0 3px 18px #000; }
h1 span { color: #d8b56c; }
.intro { color: #b9b6b1; font: 15px/1.5 Arial, sans-serif; }
.card { border: 1px solid #6c5736; border-radius: 8px; background: rgb(12 14 19 / 92%); box-shadow: 0 18px 60px #0009; padding: 24px; }
.tabs { display: flex; gap: 8px; margin: -4px 0 24px; border-bottom: 1px solid #34343a; }
.tab { flex: 1; border: 0; border-bottom: 2px solid transparent; padding: 12px 5px; color: #b9b6b1; background: transparent; cursor: pointer; font: 700 14px Arial, sans-serif; }
.tab.active { color: #f1d38e; border-color: #d8a743; }
h2 { margin: 0 0 22px; color: #f3d898; font-size: 24px; }
label { display: block; margin: 18px 0 8px; font: 700 14px Arial, sans-serif; }
input { width: 100%; border: 1px solid #55535a; border-radius: 4px; padding: 12px; background: #171920; color: #fff; font: 16px Arial, sans-serif; }
input:focus { outline: 2px solid #d4a94f; outline-offset: 1px; }
.hint { margin: 6px 0 12px; color: #aaa7a1; font: 12px/1.45 Arial, sans-serif; }
.submit { width: 100%; margin-top: 18px; border: 1px solid #e2c077; border-radius: 4px; padding: 13px; color: #17120a; background: linear-gradient(#f0d28c, #ba8734); cursor: pointer; font: 700 15px Arial, sans-serif; }
.submit:hover { filter: brightness(1.08); }
.submit:disabled { opacity: .65; cursor: wait; }
.submit.secondary { color: #f0e5ce; background: #262831; border-color: #66616a; }
.message { min-height: 22px; margin: 14px 0 0; color: #f0d58e; font: 13px/1.5 Arial, sans-serif; }
.signed-in { font: 15px/1.6 Arial, sans-serif; }
footer { padding: 20px 10px; color: #96939a; text-align: center; font: 12px/1.5 Arial, sans-serif; }

[hidden] { display: none !important; }