@import url("/generated-tokens.css");
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: linear-gradient(var(--vd), var(--vd)) top / 100% 7px no-repeat, var(--bg); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
.login-shell { display: grid; min-height: 100vh; padding: 32px; place-items: center; }
.login-card { width: min(100%, 520px); padding: clamp(30px, 6vw, 58px); background: var(--bg); border: 1px solid var(--rule); border-top: 7px solid var(--vd); box-shadow: var(--shadow-xl); }
.brand-lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; color: var(--ink); font-size: 11px; font-weight: 900; letter-spacing: .32em; text-transform: uppercase; }
.brand-mark { width: 48px; height: 48px; flex: 0 0 48px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.eyebrow::before { width: 14px; height: 14px; background: var(--vd); border-radius: 50%; content: ''; flex: 0 0 14px; }
h1 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(36px, 7vw, 56px); font-style: italic; font-weight: 400; line-height: .98; }
.intro { margin: 20px 0 28px; color: var(--ink-soft); font-size: 17px; line-height: 1.55; }
.access-note { display: grid; gap: 5px; margin-bottom: 24px; padding: 16px 18px; background: color-mix(in srgb, var(--vd) 7%, var(--bg)); border-left: 4px solid var(--vd); }
.access-note span, .status { color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
button { width: 100%; min-height: 48px; padding: 12px 18px; color: var(--bg); background: var(--ink); border: 0; border-radius: 3px; font: 700 15px ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
button:hover { background: var(--vd); }
button:disabled { cursor: wait; opacity: .6; }
button:focus-visible { outline: 3px solid color-mix(in srgb, var(--vd) 35%, transparent); outline-offset: 3px; }
.status { min-height: 20px; margin: 14px 0 0; text-align: center; }
.error { color: var(--status-error); }
@media (max-width: 560px) { .login-shell { padding: 16px; } .login-card { padding: 30px 24px; } }