:root {
    --auth-bg: #05080d;
    --auth-panel: #0b131d;
    --auth-line: rgba(148, 163, 184, .16);
    --auth-text: #f4f8fb;
    --auth-muted: #8ea0b1;
    --auth-cyan: #00e6c3;
    --auth-red: #fb7185;
}

body.auth-page {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--auth-text);
    background: var(--auth-bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.auth-page::before {
    content: "";
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    opacity: .24;
    background-image: linear-gradient(rgba(0, 230, 195, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 230, 195, .14) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .8), transparent 80%);
}
.auth-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr); min-height: 100vh; }
.auth-intro { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; padding: 42px clamp(28px, 6vw, 88px); border-right: 1px solid var(--auth-line); background: radial-gradient(circle at 30% 45%, rgba(0, 230, 195, .1), transparent 37%); }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; color: var(--auth-text); font-size: 14px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.auth-brand strong { color: var(--auth-cyan); }
.auth-brand-mark { display: block; width: 31px; height: 31px; object-fit: cover; border: 1px solid rgba(0, 230, 195, .45); border-radius: 8px; background: rgba(0, 230, 195, .08); }
.auth-intro-copy { max-width: 515px; margin: auto 0; padding: 80px 0; }
.auth-eyebrow, .auth-kicker { display: inline-flex; align-items: center; color: var(--auth-cyan); font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.auth-eyebrow::before { content: ""; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.auth-intro h1 { margin: 21px 0 17px; color: var(--auth-text); font-size: clamp(38px, 5vw, 68px); line-height: 1.01; letter-spacing: -.055em; }
.auth-intro-copy p { max-width: 390px; margin: 0; color: var(--auth-muted); font-size: 16px; line-height: 1.65; }
.auth-intro-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 18px; color: #6f8191; font-size: 11px; }
.auth-intro-footer a { margin-left: auto; color: var(--auth-cyan); font-weight: 700; }
.auth-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--auth-cyan); box-shadow: 0 0 10px var(--auth-cyan); }
.auth-panel { display: grid; place-items: center; padding: 42px clamp(22px, 7vw, 105px); background: rgba(5, 8, 13, .72); }
.auth-panel-inner { width: min(100%, 440px); }
.auth-panel-heading { margin-bottom: 30px; }
.auth-kicker { color: var(--auth-muted); }
.auth-panel h2 { margin: 12px 0 8px; color: var(--auth-text); font-size: clamp(27px, 3vw, 36px); line-height: 1.08; letter-spacing: -.04em; }
.auth-panel-heading p { margin: 0; color: var(--auth-muted); font-size: 13px; }
.auth-alert { display: flex; align-items: center; gap: 10px; margin-bottom: 19px; padding: 12px 13px; border: 1px solid rgba(251, 113, 133, .34); border-radius: 8px; color: #fecdd3; background: rgba(127, 29, 29, .2); font-size: 12px; line-height: 1.45; }
.auth-alert-icon { display: grid; flex: 0 0 auto; width: 19px; height: 19px; place-items: center; border: 1px solid rgba(251, 113, 133, .55); border-radius: 50%; color: #fecdd3; font-size: 11px; font-weight: 900; }
.auth-form { display: grid; gap: 18px; }
.auth-field { display: grid; gap: 8px; }
.auth-field label, .auth-label-row label { color: #c7d4de; font-size: 11px; font-weight: 750; letter-spacing: .04em; }
.auth-label-row { display: flex; justify-content: space-between; gap: 12px; }
.auth-label-row span { color: #627383; font-size: 10px; }
.auth-field input { width: 100%; min-height: 48px; box-sizing: border-box; padding: 0 13px; border: 1px solid var(--auth-line); border-radius: 7px; outline: none; color: var(--auth-text); background: rgba(11, 19, 29, .9); font-size: 14px; }
.auth-field input::placeholder { color: #506170; }
.auth-field input:focus { border-color: rgba(0, 230, 195, .62); box-shadow: 0 0 0 3px rgba(0, 230, 195, .1); }
.auth-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px; margin-top: 4px; padding: 0 17px; border: 1px solid rgba(0, 230, 195, .55); border-radius: 7px; color: #031310; background: var(--auth-cyan); font-size: 12px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.auth-submit:hover { background: #55f3dd; transform: translateY(-1px); }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 31px 0 19px; color: #66798a; font-size: 10px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--auth-line); }
.auth-signup { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px; border: 1px solid var(--auth-line); border-radius: 8px; background: rgba(11, 19, 29, .52); }
.auth-signup p { margin: 0; color: var(--auth-muted); font-size: 12px; }
.auth-signup a { flex: 0 0 auto; color: var(--auth-cyan); font-size: 11px; font-weight: 800; }
.auth-signup a span { margin-left: 4px; font-size: 15px; }

@media (max-width: 850px) {
    .auth-layout { grid-template-columns: 1fr; }
    .auth-intro { min-height: auto; padding: 26px 22px 0; border-right: 0; background: none; }
    .auth-intro-copy { margin: 0; padding: 62px 0 36px; }
    .auth-intro h1 { max-width: 620px; font-size: clamp(34px, 9vw, 58px); }
    .auth-intro-copy p { font-size: 14px; }
    .auth-intro-footer { padding-bottom: 22px; }
    .auth-panel { place-items: start center; padding: 38px 22px 52px; border-top: 1px solid var(--auth-line); }
}
@media (max-width: 520px) {
    .auth-intro-footer a { width: 100%; margin-left: 0; }
    .auth-panel { padding-right: 16px; padding-left: 16px; }
    .auth-signup { align-items: flex-start; flex-direction: column; }
    .auth-signup a { width: 100%; }
}