.login-page { min-height: 100vh; display: grid; place-items: center; overflow-x: hidden; }
.login-page::before, .login-page::after { position: fixed; z-index: -1; content: ""; width: 34vw; height: 34vw; border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 50%; pointer-events: none; }
.login-page::before { top: -19vw; right: -8vw; box-shadow: 0 0 0 34px color-mix(in srgb, var(--accent) 4%, transparent), 0 0 0 70px color-mix(in srgb, var(--accent) 3%, transparent); }
.login-page::after { bottom: -23vw; left: -14vw; opacity: .7; }
.login-shell { width: min(100% - 36px, 510px); padding: 28px 0; }
.login-card { position: relative; padding: clamp(32px, 7vw, 62px); border: 1px solid var(--line-strong); border-radius: 24px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface-strong) 94%, var(--accent) 6%), var(--surface)); box-shadow: 0 28px 100px rgba(0, 0, 0, .34), 0 0 0 8px color-mix(in srgb, var(--accent) 3%, transparent); }
.login-mark { display: grid; width: 48px; height: 48px; margin-bottom: 28px; place-items: center; border: 1px solid var(--accent); border-radius: 15px; background: var(--accent-soft); transform: rotate(-8deg); }
.login-mark span { width: 16px; height: 16px; border: 2px solid var(--accent); border-radius: 50%; box-shadow: 8px -7px 0 -4px var(--accent); }
.login-card h1 { max-width: none; margin: 18px 0 20px; font-size: clamp(2.6rem, 8vw, 4.7rem); line-height: .91; letter-spacing: -.085em; }
.login-card h1 em { color: var(--accent); font-style: italic; font-weight: 500; }
.login-intro { max-width: 350px; margin-bottom: 34px; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.login-form { display: grid; gap: 15px; }
.login-form label { display: grid; gap: 8px; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.login-form input { width: 100%; padding: 14px 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); color: var(--ink); font-size: .98rem; letter-spacing: normal; text-transform: none; }
.login-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); outline: none; }
.login-submit { margin-top: 8px; padding: 14px 16px; font-size: .84rem; }
.login-submit span { margin-left: 5px; }
.login-message { min-height: 20px; margin: 0; color: var(--danger); font-size: .77rem; line-height: 1.4; }
.login-footnote { display: flex; align-items: center; gap: 8px; margin-top: 28px; color: var(--faint); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.login-footnote-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.login-caption { margin: 18px 0 0; color: var(--faint); font-size: .64rem; font-weight: 900; letter-spacing: .16em; text-align: center; }
.login-caption span { padding: 0 7px; color: var(--accent); }
@media (max-width: 520px) { .login-shell { width: min(100% - 24px, 510px); } .login-card { padding: 32px 26px; } }