/* =========================================================
   PAREACLUB AUTH PREMIUM 3D V1
   Isolated login / registration presentation
========================================================= */

#loginScreen {
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: clamp(22px, 4vh, 46px) clamp(14px, 3vw, 42px);
    overflow-x: hidden;
    overflow-y: auto;
    isolation: isolate;
    background:
        radial-gradient(ellipse at 16% 12%, rgba(16, 111, 238, .21), transparent 34%),
        radial-gradient(ellipse at 88% 82%, rgba(205, 158, 55, .11), transparent 32%),
        linear-gradient(135deg, #050b16 0%, #071529 48%, #030711 100%);
}

#loginScreen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 78%, rgba(20, 113, 255, .12), transparent 22%),
        radial-gradient(circle at 83% 18%, rgba(32, 139, 255, .10), transparent 25%),
        linear-gradient(125deg, transparent 0%, rgba(255, 255, 255, .018) 48%, transparent 49%);
}

#loginScreen > .auth-shell {
    position: relative;
    z-index: 1;
    width: min(1160px, 100%);
    margin: auto;
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 19px;
    margin: 0 auto 30px;
    text-align: left;
}

.auth-brand-mark {
    display: grid;
    place-items: center;
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    border: 1px solid rgba(248, 205, 105, .88);
    border-radius: 21px;
    background:
        linear-gradient(145deg, rgba(48, 145, 255, .98), rgba(7, 47, 132, .98) 64%, #061a43);
    box-shadow:
        inset 0 2px 1px rgba(255, 255, 255, .30),
        inset 0 -5px 9px rgba(0, 0, 0, .35),
        0 5px 0 #04102c,
        0 11px 27px rgba(0, 87, 255, .27),
        0 0 22px rgba(18, 116, 255, .18);
}

.auth-brand-mark span {
    font-size: 34px;
    line-height: 1;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35));
}

.auth-brand-copy h1 {
    margin: 0;
    color: #f7fbff;
    font-size: clamp(30px, 4vw, 43px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.9px;
    text-shadow:
        0 2px 0 #122c50,
        0 5px 19px rgba(36, 132, 255, .25);
}

.auth-brand-copy p {
    margin: 8px 0 0;
    color: #b4c7df;
    font-size: 14px;
    letter-spacing: .25px;
}

.auth-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(18px, 2.5vw, 30px);
}

.login-box.auth-card {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 100%;
    margin: 0;
    padding: clamp(24px, 3vw, 36px);
    overflow: hidden;
    text-align: left;
    border: 1px solid rgba(79, 155, 255, .57);
    border-radius: 23px;
    background:
        linear-gradient(145deg, rgba(19, 39, 66, .96), rgba(8, 19, 37, .97) 52%, rgba(5, 13, 28, .98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .11),
        inset 0 -1px 0 rgba(0, 0, 0, .60),
        0 7px 0 #030916,
        0 20px 43px rgba(0, 0, 0, .45),
        0 0 28px rgba(14, 102, 255, .10);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.login-box.auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 220, 145, .92), rgba(96, 179, 255, .65), transparent);
    pointer-events: none;
}

.login-box.auth-card::after {
    content: "";
    position: absolute;
    top: -95px;
    right: -85px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(28, 111, 255, .13), transparent 68%);
    pointer-events: none;
}

.login-box.auth-card:hover {
    transform: translateY(-2px);
    border-color: rgba(105, 183, 255, .82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .13),
        inset 0 -1px 0 rgba(0, 0, 0, .60),
        0 9px 0 #030916,
        0 25px 48px rgba(0, 0, 0, .49),
        0 0 32px rgba(14, 102, 255, .15);
}

.login-box.auth-card h2 {
    margin: 12px 0 0;
    color: #f4f8ff;
    font-size: clamp(23px, 2.2vw, 28px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.45px;
}

.auth-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.auth-card-kicker {
    color: #9bcaff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.auth-card-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #91a7c4;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .8px;
    white-space: nowrap;
}

.auth-card-status i {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #48a5ff;
    box-shadow: 0 0 10px rgba(56, 155, 255, .85);
}

.auth-card-status.auth-gold-status {
    color: #e2c17c;
}

.auth-card-status.auth-gold-status i {
    background: #efc45d;
    box-shadow: 0 0 10px rgba(239, 196, 93, .8);
}

.auth-card-subtitle {
    margin: 9px 0 24px;
    color: #9fb1ca;
    font-size: 13px;
    line-height: 1.55;
}

.auth-field {
    position: relative;
    margin: 0 0 17px;
}

.auth-field-label {
    display: block;
    margin: 0 0 8px;
    color: #d8e5f7;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15px;
}

.auth-input-shell {
    position: relative;
    width: 100%;
}

.login-box.auth-card input:not([type="checkbox"]) {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 51px;
    margin: 0;
    padding: 0 47px;
    border: 1px solid rgba(89, 137, 196, .43);
    border-radius: 12px;
    outline: none;
    background: linear-gradient(180deg, rgba(4, 12, 25, .92), rgba(8, 18, 34, .96));
    color: #f4f8ff;
    font: inherit;
    font-size: 13px;
    box-shadow:
        inset 0 3px 7px rgba(0, 0, 0, .32),
        inset 0 1px 0 rgba(255, 255, 255, .025),
        0 1px 0 rgba(255, 255, 255, .025);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.login-box.auth-card input:not([type="checkbox"])::placeholder {
    color: #7187a4;
    opacity: 1;
}

.login-box.auth-card input:not([type="checkbox"]):focus {
    border-color: #42a0ff;
    background: rgba(5, 17, 37, .99);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, .24),
        0 0 0 3px rgba(32, 130, 255, .13),
        0 0 18px rgba(32, 130, 255, .08);
}

.auth-input-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 1;
    color: #7db7ff;
    font-size: 17px;
    line-height: 1;
    transform: translateY(-50%);
    pointer-events: none;
}

.login-box.auth-card .auth-eye {
    position: absolute;
    top: 50%;
    right: 7px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #a8c9f4;
    font-size: 16px;
    box-shadow: none;
    cursor: pointer;
}

.login-box.auth-card .auth-eye:hover {
    background: rgba(65, 143, 255, .12);
    color: #ffffff;
}

#loginRememberRow {
    box-sizing: border-box;
    margin: 3px 0 18px !important;
    padding: 1px 0;
    color: #b8c8dd !important;
    font-size: 12px;
    line-height: 1.4;
}

#loginRememberRow input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px !important;
    height: 16px;
    margin: 0 !important;
    accent-color: #278cff;
    cursor: pointer;
}

#loginRememberRow span {
    color: #b8c8dd;
}

.login-box.auth-card #loginBtn,
.login-box.auth-card #registerBtn {
    position: relative;
    isolation: isolate;
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 53px;
    margin: 8px 0 0;
    padding: 13px 16px;
    overflow: visible;
    border: 1px solid #65b6ff;
    border-radius: 13px;
    background: linear-gradient(180deg, #3aa0ff 0%, #1479ef 44%, #0752ba 100%);
    color: #ffffff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.1px;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 24, 68, .55);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .28),
        inset 0 -3px 0 rgba(0, 28, 83, .38),
        0 5px 0 #063b88,
        0 12px 21px rgba(0, 91, 220, .22);
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.login-box.auth-card #registerBtn {
    border-color: #f4d98b;
    background: linear-gradient(180deg, #f5d887 0%, #ddb451 45%, #b98725 100%);
    color: #182239;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .28);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .48),
        inset 0 -3px 0 rgba(116, 76, 11, .22),
        0 5px 0 #765017,
        0 12px 21px rgba(190, 137, 28, .16);
}

.login-box.auth-card #loginBtn:hover,
.login-box.auth-card #registerBtn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.login-box.auth-card #loginBtn:active,
.login-box.auth-card #registerBtn:active {
    transform: translateY(4px);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .15),
        0 1px 0 rgba(0, 0, 0, .7);
}

.login-box.auth-card #loginBtn:disabled,
.login-box.auth-card #registerBtn:disabled {
    opacity: .62;
    cursor: wait;
    filter: saturate(.65);
}

#loginError,
#registerMessage {
    min-height: 20px;
    margin: 11px 0 0;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

#loginError {
    color: #ff9b9b;
    text-align: left;
}

#registerMessage {
    text-align: center;
}

#registerMessage.auth-error {
    color: #ff9b9b;
}

#registerMessage.auth-success {
    color: #7de6a4;
}

#authModeHint {
    margin-top: 12px !important;
    color: #9fb9d9 !important;
    font-size: 11px !important;
    line-height: 1.5;
    text-align: center;
}

.auth-card-footnote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 23px;
    color: #8297b4;
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

.auth-footnote-gold {
    color: #e8c36c;
    font-size: 14px;
}

.auth-bottom-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin: 23px auto 0;
    color: #617590;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-align: center;
}

.auth-bottom-separator {
    color: #d7b45e;
}

.auth-cards:has(#authRegisterPanel[style*="display: none"]) #authLoginPanel {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 520px);
}

@media (max-width: 820px) {
    #loginScreen {
        align-items: flex-start;
        padding: 25px 14px 34px;
    }

    #loginScreen > .auth-shell {
        margin: auto;
    }

    .auth-brand {
        gap: 14px;
        margin-bottom: 23px;
    }

    .auth-brand-mark {
        flex-basis: 57px;
        width: 57px;
        height: 57px;
        border-radius: 17px;
    }

    .auth-brand-mark span {
        font-size: 29px;
    }

    .auth-brand-copy h1 {
        font-size: 32px;
    }

    .auth-brand-copy p {
        margin-top: 6px;
        font-size: 12px;
    }

    .auth-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        width: min(100%, 520px);
        margin: 0 auto;
    }

    .login-box.auth-card {
        min-height: auto;
        padding: 25px 22px;
        border-radius: 19px;
    }

    .login-box.auth-card h2 {
        font-size: 24px;
    }

    .auth-card-subtitle {
        margin-bottom: 20px;
    }

    .auth-card-footnote {
        padding-top: 18px;
    }

    .auth-bottom-note {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 19px;
        font-size: 8px;
        letter-spacing: 1.2px;
    }
}

@media (max-width: 380px) {
    .auth-brand {
        gap: 11px;
    }

    .auth-brand-mark {
        flex-basis: 49px;
        width: 49px;
        height: 49px;
        border-radius: 15px;
    }

    .auth-brand-mark span {
        font-size: 25px;
    }

    .auth-brand-copy h1 {
        font-size: 28px;
    }

    .login-box.auth-card {
        padding: 22px 17px;
    }

    .auth-card-status {
        font-size: 8px;
        letter-spacing: .3px;
    }
}

@media (max-height: 760px) and (min-width: 821px) {
    #loginScreen {
        align-items: flex-start;
        padding-top: 20px;
        padding-bottom: 24px;
    }

    .auth-brand {
        margin-bottom: 20px;
    }

    .auth-brand-mark {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }

    .login-box.auth-card {
        padding: 23px;
    }

    .auth-field {
        margin-bottom: 12px;
    }

    .auth-card-subtitle {
        margin-bottom: 17px;
    }

    .auth-card-footnote {
        padding-top: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-box.auth-card,
    .login-box.auth-card input,
    .login-box.auth-card button {
        transition: none !important;
    }
}

/* AUTH PANEL SWITCH + PUBLIC GUEST MODE FIX */
.login-box.auth-card .auth-switch-btn {
    display: block;
    width: 100%;
    margin: 17px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(115, 159, 213, .28);
    border-radius: 10px;
    background: rgba(8, 20, 39, .48);
    color: #a9c7ed;
    font-family: inherit;
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.login-box.auth-card .auth-switch-btn strong {
    color: #f1d17d;
    font-weight: 800;
}

.login-box.auth-card .auth-switch-btn:hover {
    border-color: rgba(101, 174, 255, .65);
    background: rgba(27, 75, 135, .22);
    color: #ffffff;
}

.login-box.auth-card .auth-switch-back {
    margin-top: 13px;
}

.auth-field:has(#loginPassword[style*="display: none"]) {
    display: none !important;
}

@media (min-width: 821px) {
    .auth-cards:has(#authLoginPanel[style*="display: none"]) #authRegisterPanel {
        grid-column: 1 / -1;
        justify-self: center;
        width: min(100%, 520px);
    }
}

@media (max-width: 820px) {
    #loginScreen #authRegisterPanel {
        display: none;
    }
}




/* =========================================================
   PAREACLUB AUTH — PARADIGM MATCH V2
========================================================= */

#loginScreen {
    padding: 24px clamp(18px, 3vw, 44px) 28px;
    overflow-x: hidden;
    overflow-y: auto;
    background:
        radial-gradient(ellipse at 2% 24%, rgba(0, 109, 255, .24), transparent 29%),
        radial-gradient(ellipse at 98% 17%, rgba(255, 162, 43, .20), transparent 28%),
        radial-gradient(ellipse at 8% 82%, rgba(0, 151, 255, .17), transparent 26%),
        radial-gradient(ellipse at 96% 76%, rgba(240, 157, 43, .12), transparent 24%),
        linear-gradient(122deg, #02050c 0%, #071426 42%, #03060c 72%, #090b12 100%);
}

#loginScreen::before {
    background:
        radial-gradient(circle at 2% 17%, rgba(255, 185, 76, .96) 0 2px, transparent 6px),
        radial-gradient(circle at 5% 21%, rgba(22, 147, 255, .85) 0 3px, transparent 18px),
        radial-gradient(circle at 96% 14%, rgba(255, 183, 62, .95) 0 2px, transparent 7px),
        radial-gradient(circle at 91% 29%, rgba(16, 132, 255, .8) 0 3px, transparent 20px),
        radial-gradient(ellipse at 0% 52%, rgba(0, 127, 255, .25), transparent 24%),
        radial-gradient(ellipse at 100% 59%, rgba(255, 154, 39, .17), transparent 23%),
        repeating-linear-gradient(90deg, transparent 0 8%, rgba(8, 112, 255, .035) 8.1% 8.3%, transparent 8.5% 15%),
        linear-gradient(130deg, transparent 0%, rgba(255, 255, 255, .025) 46%, transparent 47%);
    opacity: .96;
}

#loginScreen::after {
    content: "";
    position: absolute;
    inset: -5%;
    z-index: 0;
    pointer-events: none;
    opacity: .7;
    filter: blur(18px);
    background:
        linear-gradient(112deg, transparent 0 4%, rgba(0, 140, 255, .19) 5%, transparent 9% 88%, rgba(255, 176, 61, .14) 92%, transparent 96%),
        radial-gradient(ellipse at 4% 50%, rgba(0, 110, 255, .10), transparent 28%),
        radial-gradient(ellipse at 98% 52%, rgba(255, 157, 45, .09), transparent 28%);
}

#loginScreen > .auth-shell {
    width: min(1340px, 100%);
    margin: auto;
}

.auth-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(34px, 7.5vw, 108px);
    align-items: stretch;
}

.login-box.auth-card {
    min-height: 730px;
    padding: clamp(25px, 2.8vw, 36px);
    border: 2px solid transparent;
    border-radius: 29px;
    background:
        linear-gradient(151deg, rgba(3, 13, 27, .985), rgba(1, 6, 15, .985) 70%, rgba(4, 13, 25, .99)) padding-box,
        linear-gradient(135deg, #f8cc6d 0%, #298fff 22%, #067bea 48%, #174d9a 70%, #ffb747 100%) border-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .15),
        inset 0 -2px 0 rgba(0, 0, 0, .75),
        0 0 0 1px rgba(14, 144, 255, .30),
        0 0 25px rgba(0, 113, 255, .18),
        0 0 27px rgba(255, 171, 47, .10),
        0 9px 0 #01040a,
        0 25px 45px rgba(0, 0, 0, .65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.login-box.auth-card:hover {
    transform: translateY(-2px);
    border-color: transparent;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .17),
        0 0 0 1px rgba(11, 158, 255, .42),
        0 0 31px rgba(0, 119, 255, .22),
        0 0 34px rgba(255, 172, 54, .13),
        0 11px 0 #01040a,
        0 30px 53px rgba(0, 0, 0, .70);
}

.auth-card-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin: 0 auto 20px;
    text-align: left;
}

.auth-card-brand .auth-brand-mark {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    border-radius: 50% 50% 50% 22%;
    border: 2px solid #f6cf6f;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .25), transparent 32%),
        linear-gradient(140deg, #12b5ff, #075ee4 58%, #041945);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .42),
        inset 0 -4px 6px rgba(0, 0, 0, .5),
        0 0 0 3px rgba(0, 108, 255, .22),
        0 0 19px rgba(0, 132, 255, .43),
        0 3px 0 #061022;
}

.auth-card-brand .auth-brand-mark span {
    font-size: 29px;
}

.auth-card-brand .auth-brand-copy h1 {
    display: flex;
    margin: 0;
    font-size: clamp(30px, 3vw, 41px);
    line-height: 1;
    letter-spacing: -1.2px;
    text-shadow: 0 0 18px rgba(12, 135, 255, .18);
}

.auth-brand-gold {
    color: #ffcc65;
    -webkit-text-fill-color: #ffcc65;
    text-shadow: 0 0 10px rgba(255, 178, 52, .23);
}

.auth-brand-blue {
    color: #23a4ff;
    -webkit-text-fill-color: #23a4ff;
    text-shadow: 0 0 13px rgba(0, 131, 255, .43);
}

.auth-card-brand .auth-brand-copy p {
    margin: 7px 0 0;
    color: #f0d38b;
    font-family: Georgia, serif;
    font-size: 14px;
    font-style: italic;
    letter-spacing: .15px;
}

.auth-tabbar {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin: 0 0 27px;
    padding: 5px;
    border: 1px solid rgba(0, 154, 255, .66);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(0, 4, 12, .98), rgba(3, 10, 21, .97));
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, .75),
        0 0 15px rgba(0, 115, 255, .11);
}

.auth-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    min-height: 53px;
    padding: 8px 7px;
    border: 1px solid transparent;
    border-radius: 15px;
    color: #c7d7ea;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
}

.auth-tab-icon {
    color: #f5cb69;
    font-size: 18px;
    line-height: 1;
}

.auth-tab-active {
    border-color: #5bd2ff;
    background:
        linear-gradient(180deg, #159eff 0%, #0873f2 48%, #0541b5 100%);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 15, 55, .8);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .43),
        inset 0 -3px 0 rgba(0, 21, 78, .50),
        0 0 0 1px rgba(0, 139, 255, .35),
        0 0 19px rgba(0, 115, 255, .52),
        0 4px 0 #043477;
}

.auth-tab-active .auth-tab-icon {
    color: #ffffff;
}

.auth-tab-inactive {
    background: linear-gradient(180deg, rgba(9, 22, 39, .95), rgba(2, 8, 17, .98));
    border-color: rgba(78, 119, 166, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.login-box.auth-card .auth-card-topline {
    display: none;
}

.login-box.auth-card h2 {
    margin: 0;
    color: #f6f8ff;
    font-size: clamp(22px, 2vw, 27px);
    line-height: 1.2;
    font-weight: 850;
    text-shadow: 0 2px 11px rgba(0, 105, 255, .12);
}

.auth-card-subtitle {
    margin: 7px 0 23px;
    color: #9db2cb;
    font-size: 12px;
    line-height: 1.5;
}

.auth-field {
    margin-bottom: 17px;
}

.auth-field-label {
    margin-bottom: 9px;
    color: #dce8f7;
    font-size: 13px;
    font-weight: 750;
}

.login-box.auth-card input:not([type="checkbox"]) {
    height: 55px;
    padding-left: 48px;
    padding-right: 48px;
    border: 1px solid rgba(38, 157, 255, .72);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(0, 9, 22, .98), rgba(4, 15, 31, .99));
    color: #f3f8ff;
    box-shadow:
        inset 0 3px 11px rgba(0, 0, 0, .62),
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 0 10px rgba(0, 104, 255, .06);
}

.login-box.auth-card input:not([type="checkbox"])::placeholder {
    color: #718ba8;
}

.login-box.auth-card input:not([type="checkbox"]):focus {
    border-color: #44c5ff;
    box-shadow:
        inset 0 2px 7px rgba(0, 0, 0, .48),
        0 0 0 2px rgba(0, 156, 255, .16),
        0 0 18px rgba(0, 133, 255, .20);
}

.login-box.auth-card input:-webkit-autofill,
.login-box.auth-card input:-webkit-autofill:hover,
.login-box.auth-card input:-webkit-autofill:focus,
.login-box.auth-card input:autofill {
    -webkit-text-fill-color: #f3f8ff !important;
    caret-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px #061426 inset !important;
    box-shadow: 0 0 0 1000px #061426 inset !important;
    border: 1px solid #29a9ff !important;
    transition: background-color 99999s ease-out 0s;
}

.auth-input-icon {
    left: 15px;
    color: #61bdff;
    font-size: 18px;
    text-shadow: 0 0 9px rgba(0, 131, 255, .5);
}

.login-box.auth-card .auth-eye {
    right: 7px;
    width: 35px;
    height: 35px;
    border-radius: 9px;
    color: #b7d9ff;
    background: rgba(12, 34, 59, .22);
}

#loginRememberRow {
    margin: 0 0 17px !important;
    color: #c1d0e2 !important;
    font-size: 12px;
}

#loginRememberRow input[type="checkbox"] {
    width: 17px !important;
    height: 17px;
    accent-color: #168cff;
}

.login-box.auth-card #loginBtn {
    min-height: 58px;
    margin-top: 8px;
    border: 2px solid #61c5ff;
    border-radius: 16px;
    background: linear-gradient(180deg, #169dff 0%, #0875f2 45%, #063eb4 100%);
    color: #ffffff;
    font-size: 14px;
    letter-spacing: 1px;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .52),
        inset 0 -4px 0 rgba(0, 28, 99, .58),
        0 0 0 3px rgba(0, 107, 255, .25),
        0 0 23px rgba(0, 119, 255, .44),
        0 5px 0 #052b72,
        0 12px 20px rgba(0, 0, 0, .35);
}

.login-box.auth-card #loginBtn:hover {
    filter: brightness(1.12);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .55),
        0 0 0 4px rgba(0, 119, 255, .26),
        0 0 29px rgba(0, 119, 255, .52),
        0 5px 0 #052b72;
}

.login-box.auth-card .auth-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 8px;
    color: #b8d0e9;
    font-size: 13px;
    opacity: 1;
}

.login-box.auth-card .auth-separator::before,
.login-box.auth-card .auth-separator::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, rgba(86, 163, 213, .75));
}

.login-box.auth-card .auth-separator::after {
    background: linear-gradient(90deg, rgba(86, 163, 213, .75), transparent);
}

.login-box.auth-card #openRegisterBtn.auth-cta-button {
    min-height: 57px;
    margin: 8px 0 0;
    padding: 12px 10px;
    border: 2px solid #eab84f;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(12, 23, 35, .98), rgba(1, 6, 13, .99));
    color: #d9e8f6;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .6px;
    text-shadow: 0 1px 3px #000000;
    box-shadow:
        inset 0 2px 0 rgba(255, 232, 167, .17),
        inset 0 -2px 0 rgba(0, 0, 0, .65),
        0 0 0 2px rgba(248, 181, 58, .10),
        0 0 17px rgba(246, 165, 42, .18),
        0 4px 0 #62400f;
}

.login-box.auth-card #openRegisterBtn.auth-cta-button:hover {
    border-color: #ffe09a;
    color: #ffffff;
    background: linear-gradient(180deg, rgba(26, 39, 52, .99), rgba(4, 9, 18, .99));
    box-shadow:
        0 0 0 2px rgba(248, 181, 58, .15),
        0 0 24px rgba(246, 165, 42, .29),
        0 4px 0 #62400f;
}

.login-box.auth-card #registerBtn {
    min-height: 59px;
    margin-top: 18px;
    border: 2px solid #fff0a1;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffe48a 0%, #f0c14e 44%, #bb8625 100%);
    color: #121a25;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .65px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .36);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .72),
        inset 0 -4px 0 rgba(116, 73, 9, .31),
        0 0 0 3px rgba(255, 186, 53, .18),
        0 0 26px rgba(245, 177, 45, .30),
        0 5px 0 #755017,
        0 13px 21px rgba(0, 0, 0, .40);
}

.login-box.auth-card #registerBtn:hover {
    filter: brightness(1.07);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .72),
        0 0 0 4px rgba(255, 186, 53, .20),
        0 0 31px rgba(245, 177, 45, .36),
        0 5px 0 #755017;
}

.auth-security-note {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px;
    margin: 17px 0 0;
    padding: 13px 14px;
    border: 1px solid rgba(66, 139, 200, .52);
    border-radius: 15px;
    background:
        linear-gradient(125deg, rgba(8, 28, 48, .95), rgba(2, 8, 18, .98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 0 15px rgba(0, 126, 255, .07);
}

.auth-security-icon {
    display: grid;
    place-items: center;
    color: #ffcb61;
    font-size: 28px;
    filter: drop-shadow(0 0 8px rgba(255, 177, 44, .3));
}

.auth-security-note strong {
    display: block;
    margin-bottom: 4px;
    color: #ffce62;
    font-size: 12px;
    line-height: 1.25;
}

.auth-security-note p {
    margin: 0;
    color: #c3d3e6;
    font-size: 11px;
    line-height: 1.4;
}

.auth-security-arrow {
    color: #3f9fff;
    font-size: 25px;
    text-align: center;
}

.login-box.auth-card #backToLoginFromRegister {
    margin-top: 19px;
    padding: 9px 5px;
    border: 0;
    background: transparent;
    color: #b9d4ee;
    font-size: 12px;
    box-shadow: none;
    text-transform: none;
}

.login-box.auth-card #backToLoginFromRegister strong {
    color: #ffd066;
}

.auth-card-footnote {
    justify-content: center;
    margin-top: auto;
    padding-top: 21px;
    border-top: 1px solid rgba(50, 134, 192, .32);
    color: #8197b2;
    font-size: 11px;
}

.auth-footnote-gold {
    color: #ffd064;
    text-shadow: 0 0 10px rgba(255, 188, 48, .4);
}

.auth-bottom-note {
    margin-top: 21px;
    color: #7b91ad;
    letter-spacing: 1.5px;
}

.auth-bottom-separator {
    color: #ffd05d;
}

@media (max-width: 820px) {
    #loginScreen {
        padding: 20px 14px 30px;
    }

    .auth-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        width: min(100%, 590px);
        margin: 0 auto;
    }

    .login-box.auth-card {
        min-height: 0;
        padding: 24px 20px;
        border-radius: 24px;
    }

    .auth-card-brand .auth-brand-mark {
        flex-basis: 54px;
        width: 54px;
        height: 54px;
    }

    .auth-card-brand .auth-brand-mark span {
        font-size: 26px;
    }

    .auth-card-brand .auth-brand-copy h1 {
        font-size: 33px;
    }

    .auth-tabbar {
        margin-bottom: 24px;
    }

    .auth-tab {
        min-height: 49px;
        font-size: 13px;
    }

    .auth-card-subtitle {
        margin-bottom: 20px;
    }

    .auth-card-footnote {
        margin-top: 20px;
    }
}

@media (max-width: 380px) {
    .auth-card-brand {
        gap: 9px;
    }

    .auth-card-brand .auth-brand-copy h1 {
        font-size: 29px;
    }

    .auth-card-brand .auth-brand-copy p {
        font-size: 12px;
    }

    .login-box.auth-card {
        padding: 21px 15px;
    }

    .auth-tab {
        gap: 6px;
        font-size: 12px;
    }
}

@media (max-height: 790px) and (min-width: 821px) {
    #loginScreen {
        align-items: flex-start;
        padding-top: 18px;
        padding-bottom: 26px;
    }

    .login-box.auth-card {
        min-height: 700px;
        padding: 24px;
    }

    .auth-card-brand {
        margin-bottom: 15px;
    }

    .auth-tabbar {
        margin-bottom: 22px;
    }

    .auth-field {
        margin-bottom: 13px;
    }

    .auth-card-footnote {
        padding-top: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-box.auth-card,
    .login-box.auth-card input,
    .login-box.auth-card button {
        transition: none !important;
    }
}




/* =========================================================
   PAREACLUB AUTH V2 — COMPACT DESKTOP / HEIGHT FIX
========================================================= */

#loginScreen {
    align-items: flex-start;
    padding: 8px 20px 16px;
    overflow-x: hidden;
    overflow-y: auto;
}

#loginScreen > .auth-shell {
    width: min(1280px, 100%);
    margin: auto;
}

.auth-cards {
    gap: clamp(28px, 7vw, 96px);
    align-items: stretch;
}

.login-box.auth-card {
    min-height: 0 !important;
    padding: 20px 24px 18px;
}

.auth-card-brand {
    gap: 10px;
    margin-bottom: 13px;
}

.auth-card-brand .auth-brand-mark {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
}

.auth-card-brand .auth-brand-mark span {
    font-size: 25px;
}

.auth-card-brand .auth-brand-copy h1 {
    font-size: clamp(27px, 2.8vw, 36px);
}

.auth-card-brand .auth-brand-copy p {
    margin-top: 5px;
    font-size: 12px;
}

.auth-tabbar {
    margin-bottom: 17px;
    padding: 4px;
    gap: 4px;
}

.auth-tab {
    min-height: 43px;
    padding: 6px;
    font-size: 12px;
    gap: 7px;
}

.login-box.auth-card h2 {
    font-size: clamp(21px, 1.9vw, 24px);
}

.auth-card-subtitle {
    margin: 5px 0 15px;
    font-size: 11px;
}

.auth-field {
    margin-bottom: 11px;
}

.auth-field-label {
    margin-bottom: 6px;
    font-size: 12px;
}

.login-box.auth-card input:not([type="checkbox"]) {
    height: 47px;
}

#loginRememberRow {
    margin-bottom: 11px !important;
}

.login-box.auth-card #loginBtn {
    min-height: 50px;
    margin-top: 5px;
    font-size: 13px;
}

.login-box.auth-card .auth-separator {
    margin: 14px 0 5px;
}

.login-box.auth-card #openRegisterBtn.auth-cta-button {
    min-height: 49px;
    margin-top: 5px;
    font-size: 12px;
}

.auth-security-note {
    grid-template-columns: 35px minmax(0, 1fr) 12px;
    gap: 8px;
    margin-top: 11px;
    padding: 9px 11px;
}

.auth-security-icon {
    font-size: 24px;
}

.auth-security-note strong {
    font-size: 11px;
}

.auth-security-note p {
    font-size: 10px;
    line-height: 1.35;
}

.login-box.auth-card #registerBtn {
    min-height: 51px;
    margin-top: 13px;
    font-size: 12px;
}

.login-box.auth-card #backToLoginFromRegister {
    margin-top: 12px;
}

.auth-card-footnote {
    margin-top: 13px;
    padding-top: 12px;
    font-size: 10px;
}

.auth-bottom-note {
    margin-top: 12px;
    font-size: 8px;
}

@media (min-width: 821px) and (max-height: 1000px) {
    #loginScreen {
        align-items: flex-start;
        padding-top: 7px;
        padding-bottom: 10px;
    }

    .login-box.auth-card {
        min-height: 0 !important;
        padding: 17px 21px 15px;
    }

    .auth-card-brand {
        margin-bottom: 10px;
    }

    .auth-card-brand .auth-brand-mark {
        flex-basis: 47px;
        width: 47px;
        height: 47px;
    }

    .auth-card-brand .auth-brand-mark span {
        font-size: 23px;
    }

    .auth-card-brand .auth-brand-copy h1 {
        font-size: clamp(26px, 2.6vw, 34px);
    }

    .auth-card-brand .auth-brand-copy p {
        margin-top: 4px;
        font-size: 11px;
    }

    .auth-tabbar {
        margin-bottom: 13px;
    }

    .auth-tab {
        min-height: 40px;
    }

    .login-box.auth-card h2 {
        font-size: 22px;
    }

    .auth-card-subtitle {
        margin-bottom: 12px;
    }

    .auth-field {
        margin-bottom: 9px;
    }

    .login-box.auth-card input:not([type="checkbox"]) {
        height: 44px;
    }

    #loginRememberRow {
        margin-bottom: 8px !important;
    }

    .login-box.auth-card #loginBtn {
        min-height: 47px;
        margin-top: 3px;
    }

    .login-box.auth-card .auth-separator {
        margin: 11px 0 3px;
    }

    .login-box.auth-card #openRegisterBtn.auth-cta-button {
        min-height: 46px;
        margin-top: 3px;
    }

    .auth-security-note {
        margin-top: 8px;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .login-box.auth-card #registerBtn {
        min-height: 48px;
        margin-top: 10px;
    }

    .login-box.auth-card #backToLoginFromRegister {
        margin-top: 9px;
    }

    .auth-card-footnote {
        margin-top: 10px;
        padding-top: 9px;
    }

    .auth-bottom-note {
        margin-top: 9px;
    }
}

@media (max-width: 820px) {
    #loginScreen {
        padding: 16px 12px 24px;
    }

    #loginScreen > .auth-shell {
        width: min(590px, 100%);
    }

    .auth-cards {
        gap: 22px;
    }

    .login-box.auth-card {
        min-height: 0 !important;
        padding: 22px 19px 18px;
    }

    .auth-card-brand .auth-brand-copy h1 {
        font-size: 31px;
    }

    .auth-tab {
        min-height: 44px;
        font-size: 12px;
    }

    .auth-bottom-note {
        margin-top: 16px;
    }
}

@media (max-width: 380px) {
    .login-box.auth-card {
        padding: 20px 14px 17px;
    }

    .auth-card-brand .auth-brand-copy h1 {
        font-size: 27px;
    }

    .auth-tab {
        gap: 5px;
        font-size: 11px;
    }
}


/* AUTH V2 — functional tab buttons */
.login-box.auth-card button.auth-tab {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    font-family: inherit;
    cursor: pointer;
}

.login-box.auth-card button.auth-tab:focus-visible {
    outline: 2px solid #fff0a1;
    outline-offset: 3px;
}

.login-box.auth-card button.auth-tab:hover {
    filter: brightness(1.12);
}




/* AUTH V2 — CENTER THE SINGLE VISIBLE AUTH CARD */
.auth-cards:has(#authRegisterPanel[style*="display:none"]),
.auth-cards:has(#authRegisterPanel[style*="display: none"]) {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center;
}

.auth-cards:has(#authRegisterPanel[style*="display:none"]) #authLoginPanel,
.auth-cards:has(#authRegisterPanel[style*="display: none"]) #authLoginPanel {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(590px, 100%) !important;
}

.auth-cards:has(#authLoginPanel[style*="display:none"]),
.auth-cards:has(#authLoginPanel[style*="display: none"]) {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center;
}

.auth-cards:has(#authLoginPanel[style*="display:none"]) #authRegisterPanel,
.auth-cards:has(#authLoginPanel[style*="display: none"]) #authRegisterPanel {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(590px, 100%) !important;
}


/* AUTH V2 — LOGIN ORPHAN SEPARATOR CLEANUP */
.auth-login-card .auth-separator {
    display: none !important;
}




/* AUTH V2 — COMPACT CENTERED CARDS V5 */
@media (min-width: 821px) {
    .auth-cards:has(#authRegisterPanel[style*="display:none"]) #authLoginPanel,
    .auth-cards:has(#authRegisterPanel[style*="display: none"]) #authLoginPanel,
    .auth-cards:has(#authLoginPanel[style*="display:none"]) #authRegisterPanel,
    .auth-cards:has(#authLoginPanel[style*="display: none"]) #authRegisterPanel {
        width: min(540px, 100%) !important;
    }

    .login-box.auth-card {
        min-height: 0 !important;
        padding: 17px 21px 14px;
        border-radius: 26px;
    }

    .auth-card-brand {
        gap: 9px;
        margin-bottom: 10px;
    }

    .auth-card-brand .auth-brand-mark {
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
    }

    .auth-card-brand .auth-brand-mark span {
        font-size: 22px;
    }

    .auth-card-brand .auth-brand-copy h1 {
        font-size: clamp(26px, 2.4vw, 32px);
    }

    .auth-card-brand .auth-brand-copy p {
        margin-top: 4px;
        font-size: 10px;
    }

    .auth-tabbar {
        margin-bottom: 12px;
        padding: 3px;
        gap: 4px;
    }

    .auth-tab {
        min-height: 37px;
        padding: 5px;
        gap: 6px;
        font-size: 11px;
    }

    .login-box.auth-card h2 {
        font-size: 21px;
    }

    .auth-card-subtitle {
        margin: 4px 0 11px;
        font-size: 10px;
    }

    .auth-field {
        margin-bottom: 9px;
    }

    .auth-field-label {
        margin-bottom: 5px;
        font-size: 11px;
    }

    .login-box.auth-card input:not([type="checkbox"]) {
        height: 42px;
        border-radius: 13px;
    }

    #loginRememberRow {
        margin-bottom: 7px !important;
        font-size: 11px;
    }

    .login-box.auth-card #loginBtn {
        min-height: 45px;
        margin-top: 3px;
        border-radius: 14px;
        font-size: 12px;
    }

    .login-box.auth-card .auth-separator {
        display: none !important;
    }

    .auth-security-note {
        grid-template-columns: 32px minmax(0, 1fr) 11px;
        gap: 7px;
        margin-top: 8px;
        padding: 8px 9px;
        border-radius: 12px;
    }

    .auth-security-icon {
        font-size: 22px;
    }

    .auth-security-note strong {
        font-size: 10px;
    }

    .auth-security-note p {
        font-size: 9px;
    }

    .login-box.auth-card #registerBtn {
        min-height: 46px;
        margin-top: 10px;
        border-radius: 14px;
        font-size: 11px;
    }

    .login-box.auth-card #backToLoginFromRegister {
        margin-top: 9px;
    }

    .auth-card-footnote {
        margin-top: 9px;
        padding-top: 9px;
        font-size: 9px;
    }

    .auth-bottom-note {
        margin-top: 9px;
        font-size: 8px;
    }
}