:root {
    --auth-bg: #02040c;
    --auth-panel: #071120;
    --auth-line: #203653;
    --auth-text: #f7f9ff;
    --auth-muted: #8fa2b8;
    --auth-pink: #ff2f81;
    --auth-purple: #8c4dff;
    --auth-cyan: #21d7f5;
    --auth-red: #ff6874;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body.auth-page {
    margin: 0;
    min-height: 100vh;
    color: var(--auth-text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 47, 129, .13), transparent 28%),
        radial-gradient(circle at 85% 18%, rgba(75, 68, 255, .18), transparent 30%),
        radial-gradient(circle at 70% 90%, rgba(0, 195, 255, .10), transparent 28%),
        var(--auth-bg);
}

.auth-page a { color: inherit; text-decoration: none; }
.auth-page img { display: block; max-width: 100%; }
.auth-layout { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; }
.auth-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 42px 6vw;
    border-right: 1px solid rgba(255, 255, 255, .06);
}
.auth-visual::before {
    position: absolute;
    top: 170px;
    left: -130px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 47, 129, .28), rgba(140, 77, 255, .18), rgba(33, 215, 245, .15));
    content: "";
    filter: blur(50px);
}
.auth-brand, .auth-hero, .auth-footer { position: relative; z-index: 2; }
.auth-brand img { width: 180px; max-width: 55vw; }
.auth-hero { max-width: 650px; margin: 50px 0; }
.auth-tag {
    display: inline-flex;
    padding: 8px 12px;
    border: 1px solid rgba(64, 202, 255, .22);
    border-radius: 999px;
    background: rgba(14, 30, 53, .65);
    color: #cdefff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .7px;
}
.auth-hero h1 { margin: 20px 0; font-size: 60px; line-height: 1.02; letter-spacing: -2.5px; }
.auth-gradient {
    background: linear-gradient(90deg, #b24eff, #ff3d83, #ff9b18, #23d8f4);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
.auth-hero p { max-width: 570px; color: #aebdd0; font-size: 15px; line-height: 1.8; }
.auth-features { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; max-width: 580px; margin-top: 30px; }
.auth-feature {
    padding: 15px;
    border: 1px solid rgba(112, 147, 196, .17);
    border-radius: 13px;
    background: rgba(7, 17, 32, .66);
    color: #b7c5d7;
    font-size: 12px;
}
.auth-feature b { display: block; margin: 5px 0; color: #fff; }
.auth-footer { color: #647890; font-size: 10px; }
.auth-side { display: flex; align-items: center; justify-content: center; padding: 30px; }
.auth-card {
    width: min(510px, 100%);
    padding: 28px;
    border: 1px solid rgba(83, 117, 162, .25);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(10, 23, 41, .92), rgba(5, 12, 24, .94));
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    backdrop-filter: blur(18px);
}
.auth-mobile-logo { display: none; margin-bottom: 18px; text-align: center; }
.auth-mobile-logo img { width: 150px; margin: auto; }
.auth-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.auth-head h2 { margin: 0; font-size: 26px; }
.auth-head p { margin: 6px 0 0; color: var(--auth-muted); font-size: 12px; }
.auth-home {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #29405d;
    border-radius: 10px;
    background: #071324;
}
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 5px; margin-bottom: 22px; border: 1px solid #1c3049; border-radius: 11px; background: #050c17; }
.auth-tab { padding: 11px; border-radius: 8px; color: #8195ac; font-size: 13px; font-weight: 900; text-align: center; }
.auth-tab.active { color: #fff; background: linear-gradient(90deg, #7048e8, #d53c9c); }
.auth-form label { display: block; margin: 13px 0 7px; color: #9fb0c4; font-size: 10px; font-weight: 900; letter-spacing: .5px; }
.auth-field { position: relative; }
.auth-field input, .auth-field select {
    width: 100%;
    padding: 13px 42px 13px 13px;
    border: 1px solid #253b57;
    border-radius: 9px;
    outline: none;
    background: #050d19;
    color: #f4f8ff;
    font-size: 13px;
}
.auth-field input:focus, .auth-field select:focus { border-color: #6e55e8; box-shadow: 0 0 0 3px rgba(119, 78, 231, .10); }
.auth-field select option { background: #050d19; color: #f4f8ff; }
.auth-field input[readonly] { color: #8fa2b8; cursor: default; }
.auth-field-icon { position: absolute; top: 50%; right: 13px; color: #71869f; transform: translateY(-50%); }
button.auth-field-icon { padding: 0; border: 0; background: transparent; cursor: pointer; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.auth-options { display: flex; align-items: center; justify-content: flex-end; margin: 13px 0; color: #8fa3ba; font-size: 11px; }
.auth-forgot { color: #45d5f5 !important; }
.auth-consent { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; }
.auth-consent input[type="checkbox"] { width: 15px; height: 15px; flex: 0 0 auto; margin: 1px 0 0; accent-color: #a14cff; }
.auth-consent label { margin: 0; color: #a5b4c6; font-size: 11px; font-weight: 500; letter-spacing: 0; line-height: 1.5; }
.auth-consent a { color: #44d8f7; font-weight: 800; }
.auth-validation-error { display: block; margin-top: 6px; color: var(--auth-red); font-size: 11px; line-height: 1.4; }
.auth-field input.auth-validation-error, .auth-field select.auth-validation-error { border-color: var(--auth-red); color: #f4f8ff; }
.auth-submit {
    width: 100%;
    padding: 13px;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(90deg, var(--auth-pink), #9c47ff 55%, #168df0);
    box-shadow: 0 10px 25px rgba(126, 57, 215, .23);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: #62758b; font-size: 10px; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; background: #1b2b41; content: ""; }
.auth-switch { color: #8396ad; font-size: 11px; text-align: center; }
.auth-switch a { color: #44d8f7; font-weight: 800; }
.auth-note { padding: 10px; margin-top: 18px; border: 1px solid #1d3652; border-radius: 8px; background: #081528; color: #7389a1; font-size: 9px; line-height: 1.55; }
.auth-alert { padding: 11px; margin-bottom: 14px; border: 1px solid #7b2d3a; border-radius: 8px; background: rgba(109, 22, 37, .55); color: #ff9da7; font-size: 11px; line-height: 1.5; }
.clsSponserMessage { display: none; margin: 7px 0 0 !important; color: var(--auth-red) !important; }

@media (max-width: 900px) {
    .auth-layout { grid-template-columns: 1fr; }
    .auth-visual { display: none; }
    .auth-side { min-height: 100vh; padding: 20px; }
    .auth-mobile-logo { display: block; }
}

@media (max-width: 520px) {
    .auth-card { padding: 20px 16px; border-radius: 18px; }
    .auth-row { grid-template-columns: 1fr; }
    .auth-head h2 { font-size: 23px; }
}