:root { color-scheme: light; --auth-ink: #172521; --auth-muted: #718078; --auth-green: #177b59; --auth-line: #dfe8e3; }
* { box-sizing: border-box; }
body.auth-page { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 28px; background: radial-gradient(ellipse at 12% 10%, #e4f3eb 0, transparent 38%), #f5f7f6; color: var(--auth-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.auth-shell { width: min(100%, 1040px); min-height: 590px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid #e4ebe7; border-radius: 24px; background: #fff; box-shadow: 0 28px 80px #1c3d2d16, 0 3px 12px #1c3d2d08; }
.auth-welcome { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 44px; color: #f3fff8; background: linear-gradient(145deg, #143f31 0%, #176748 56%, #21815d 100%); }
.auth-welcome::before, .auth-welcome::after { position: absolute; content: ""; border: 1px solid #ffffff18; border-radius: 50%; pointer-events: none; }
.auth-welcome::before { width: 470px; height: 470px; right: -190px; bottom: -175px; }
.auth-welcome::after { width: 350px; height: 350px; right: -125px; bottom: -115px; }
.auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.auth-brand-mark { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; border: 1px solid #ffffff40; border-radius: 13px; background: #ffffff16; }
.auth-brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.auth-brand-mark svg { width: 22px; height: 22px; }
.auth-welcome-copy { position: relative; z-index: 1; max-width: 390px; margin: auto 0; padding: 65px 0; }
.auth-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; color: #c1ebd6; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.auth-eyebrow::before { width: 20px; height: 1px; content: ""; background: #9cdbb8; }
.auth-welcome h1 { margin: 0; font-size: clamp(34px, 4vw, 48px); line-height: 1.08; letter-spacing: -.045em; }
.auth-welcome-copy > p:last-child { max-width: 350px; margin: 18px 0 0; color: #d2e8dc; font-size: 14px; line-height: 1.75; }
.auth-secure-note { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; color: #d2e8dc; font-size: 11px; }
.auth-secure-note svg { width: 16px; height: 16px; color: #a6e4c0; }
.auth-form-side { display: flex; align-items: center; justify-content: center; padding: 44px; }
.auth-form-wrap { width: 100%; max-width: 380px; }
.auth-mobile-brand { display: none; }
.auth-form-wrap h2 { margin: 0; color: #172521; font-size: 27px; font-weight: 800; letter-spacing: -.035em; }
.auth-subtitle { margin: 8px 0 26px; color: var(--auth-muted); font-size: 13px; line-height: 1.6; }
.auth-alert { margin: 0 0 17px; padding: 11px 13px; border: 1px solid; border-radius: 10px; font-size: 12px; line-height: 1.5; }
.auth-alert.error { border-color: #f3c9c5; background: #fff6f5; color: #a33b31; }
.auth-alert.success { border-color: #c7e8d4; background: #f2fbf5; color: #207347; }
.auth-field { margin: 0 0 15px; }
.auth-field label { display: block; margin: 0 0 7px; color: #34443c; font-size: 12px; font-weight: 700; }
.auth-input-wrap { position: relative; }
.auth-input-wrap > svg { position: absolute; top: 50%; left: 13px; width: 17px; height: 17px; transform: translateY(-50%); color: #84948b; pointer-events: none; }
.auth-field input { width: 100%; height: 47px; padding: 0 42px; border: 1px solid var(--auth-line); border-radius: 11px; outline: 0; background: #fff; color: #172521; font: inherit; font-size: 13px; transition: border-color .18s, box-shadow .18s; }
.auth-field input::placeholder { color: #a5b0aa; }
.auth-field input:focus { border-color: #399873; box-shadow: 0 0 0 3px #177b5918; }
.auth-input-action { position: absolute; top: 50%; right: 9px; display: grid; width: 30px; height: 30px; place-items: center; transform: translateY(-50%); border: 0; border-radius: 7px; background: transparent; color: #718078; cursor: pointer; }
.auth-input-action:hover { background: #f1f5f3; color: #245c45; }
.auth-input-action svg { width: 17px; height: 17px; }
.auth-submit { width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 9px; border: 0; border-radius: 11px; background: linear-gradient(100deg, #167451, #21835d); box-shadow: 0 7px 16px #177b5926; color: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: transform .15s, box-shadow .15s, filter .15s; }
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 20px #177b5932; filter: brightness(1.04); }
.auth-submit:active { transform: translateY(0); }
.auth-submit svg { width: 17px; height: 17px; }
.auth-demo { margin-top: 20px; padding: 12px 14px; border: 1px solid #e7ede9; border-radius: 11px; background: #f8faf9; }
.auth-demo-title { margin: 0 0 7px; color: #627169; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.auth-demo p { margin: 3px 0; color: #68766f; font-size: 11px; }
.auth-demo strong { color: #263830; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; font-size: 11px; }
.auth-links a { color: #567066; text-decoration: none; }
.auth-links a:hover { color: var(--auth-green); text-decoration: underline; }
.auth-hint { margin: -8px 0 14px; color: #84948b; font-size: 10px; }
@media (max-width: 720px) {
    body.auth-page { padding: 16px; }
    .auth-shell { min-height: 0; max-width: 450px; grid-template-columns: 1fr; border-radius: 19px; }
    .auth-welcome { display: none; }
    .auth-form-side { padding: 29px 23px 25px; }
    .auth-mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 25px; font-size: 14px; font-weight: 800; }
    .auth-mobile-brand .auth-brand-mark { width: 36px; height: 36px; border-color: #dce9e1; background: #edf6f0; color: #177b59; }
    .auth-mobile-brand .auth-brand-mark svg { width: 19px; height: 19px; }
    .auth-form-wrap h2 { font-size: 24px; }
    .auth-register .auth-form-side { padding-top: 24px; padding-bottom: 22px; }
    .auth-register .auth-mobile-brand { margin-bottom: 17px; }
    .auth-register .auth-subtitle { margin-bottom: 18px; }
    .auth-register .auth-field { margin-bottom: 11px; }
    .auth-register .auth-field input { height: 43px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }