:root {
    color-scheme: light;
    --bg: #fafafa; --surface: #fff; --text: #1f1829; --muted: #5a4f65;
    --line: #d9d2e2; --accent: rgb(17, 10, 26); --accent-hover: #3f3449;
    --button: #7801ff; --button-hover: #6a05f2;
    --soft: #efecf3; --ring: #c4b8d1; --error-bg: #fff1ef; --error: #a92a20;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #110a1a; --surface: #1f1829; --text: #fafafa; --muted: #ae9fc1;
    --line: #3f3449; --accent: #ae9fc1; --accent-hover: #c4b8d1;
    --soft: #2d2637; --ring: #5d3d81; --error-bg: #3b2425; --error: #ffb6af;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select { font: inherit; }
.auth-shell { min-height: 100svh; max-width: 1600px; margin: auto; padding: 40px 64px 28px; display: flex; flex-direction: column; }
.auth-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; font-size: 29px; font-weight: 650; letter-spacing: -1.2px; }
.brand-logo { display: block; width: 200px; height: auto; padding: 9px 12px; background: rgb(17, 10, 26); border-radius: 10px; }
@media (max-width: 720px) { .auth-header .brand-logo, .docs-header .brand-logo { width: 166px; } }
.appearance { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.appearance select { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 9px 12px; min-height: 40px; cursor: pointer; }
.auth-main { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 100px; max-width: 1090px; width: 100%; margin: 70px auto; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 650; letter-spacing: 2px; color: var(--accent); }
.eyebrow-line { width: 24px; height: 2px; background: var(--accent); }
h1 { font-size: clamp(48px, 5.1vw, 72px); font-weight: 550; letter-spacing: -3.5px; line-height: 1.08; margin: 28px 0 24px; }
h1 span { color: var(--accent); }
.intro-copy { max-width: 355px; font-size: 16px; color: var(--muted); line-height: 1.75; }
.connection-art { position: relative; width: 350px; height: 160px; margin-top: 38px; overflow: hidden; }
.orbit { position: absolute; border: 1px solid var(--ring); border-radius: 50%; width: 270px; height: 100px; left: 36px; top: 28px; transform: rotate(-19deg); }
.orbit-two { transform: rotate(20deg); }
.art-core { position: absolute; left: 139px; top: 45px; width: 66px; height: 66px; background: var(--soft); color: var(--accent); border: 1px solid var(--ring); border-radius: 19px; display: grid; place-items: center; font-size: 46px; }
.art-node { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.node-one { left: 58px; top: 42px; }.node-two { left: 280px; top: 50px; }.node-three { left: 85px; top: 120px; }
.art-label { position: absolute; color: var(--muted); font-size: 9px; letter-spacing: 1.7px; background: var(--bg); padding: 4px; }
.label-one { left: 5px; top: 12px; }.label-two { right: 5px; top: 20px; }.label-three { left: 0; bottom: 6px; }
.signin { background: var(--surface); padding: 42px; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 12px 40px #00000005; }
.section-label { color: var(--accent); font-size: 10px; letter-spacing: 1.7px; font-weight: 650; }
h2 { font-size: 30px; letter-spacing: -1px; font-weight: 600; margin: 15px 0 8px; }
.signin-heading p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 28px; }
.google-button { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 14px; border: 1px solid var(--line); border-radius: 9px; text-decoration: none; font-size: 14px; font-weight: 550; }
.google-button:hover { background: var(--soft); }
.divider { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 12px; margin: 24px 0; }
.divider::before, .divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 13px; font-weight: 550; margin-bottom: 9px; }
.field input { width: 100%; height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; }
.field input::placeholder { color: var(--muted); opacity: .85; }
:is(input, select, button, a):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.signin-button { width: 100%; display: flex; justify-content: center; align-items: center; gap: 12px; border: 0; border-radius: 8px; padding: 14px; background: var(--button); color: #fff; font-size: 14px; font-weight: 650; cursor: pointer; }
.signin-button:hover { background: var(--button-hover); }
.signin-button span { font-size: 20px; line-height: 1; }
.local-note { color: var(--muted); font-size: 11px; line-height: 1.6; margin-top: 14px; }
.local-note span { display: inline-block; height: 5px; width: 5px; border-radius: 50%; background: var(--accent); margin-right: 5px; }
.access-note { border-top: 1px solid var(--line); padding-top: 22px; margin: 26px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.alert-danger { background: var(--error-bg); color: var(--error); border-radius: 8px; padding: 14px; font-size: 14px; line-height: 1.5; margin-bottom: 20px; }
.auth-footer { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.auth-footer > span:first-child { font-size: 10px; letter-spacing: 1.4px; }
.footer-separator { margin: 0 9px; opacity: .5; }
@media (max-width: 1000px) { .auth-shell { padding: 28px 32px; }.auth-main { gap: 40px; }.signin { padding: 30px; } }
@media (max-width: 720px) { .auth-shell { padding: 22px 20px; }.brand { font-size: 24px; }.appearance label { display: none; }.auth-main { display: block; margin: 50px auto; max-width: 440px; }.intro { display: none; }.signin { padding: 28px 24px; }.auth-footer { flex-direction: column; align-items: center; text-align: center; } }