/* =========================================================
   BUYWELL AUTH — COSMIC PORTAL / SUPER GALAXY UI
   Login / Register / Forgot Password
   Completely different from all other pages
   Keep current HTML / class names
========================================================= */

.auth-card {
    position: relative;
    isolation: isolate;
    width: min(1120px, 100%);
    min-height: min(720px, calc(100vh - 48px));
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
    gap: 12px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: calc(var(--radius) + 10px);
    background:
        radial-gradient(circle at 12% 12%, rgba(32, 232, 210, 0.2), transparent 34%),
        radial-gradient(circle at 90% 82%, rgba(255, 114, 210, 0.17), transparent 36%),
        radial-gradient(circle at 52% 105%, rgba(255, 209, 102, 0.11), transparent 35%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025) 42%, rgba(32, 232, 210, 0.05)),
        rgba(6, 10, 24, 0.76);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.17),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05),
        0 32px 120px rgba(0, 0, 0, 0.52),
        0 0 70px rgba(32, 232, 210, 0.09),
        0 0 90px rgba(255, 114, 210, 0.055);
    backdrop-filter: blur(28px) saturate(165%);
    -webkit-backdrop-filter: blur(28px) saturate(165%);
}

.auth-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -2;
    pointer-events: none;
    border-radius: inherit;
    background:
        conic-gradient(
            from 210deg at 50% 50%,
            transparent,
            rgba(32, 232, 210, 0.22),
            transparent 28%,
            rgba(255, 114, 210, 0.18),
            transparent 56%,
            rgba(255, 209, 102, 0.16),
            transparent
        );
    opacity: 0.58;
    filter: blur(2px);
    animation: authPortalAura 18s linear infinite;
}

.auth-card::after {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: -1;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: calc(var(--radius) + 4px);
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: 0.42;
    mask-image: radial-gradient(circle at 50% 50%, black, transparent 78%);
    animation: authCardGridMove 12s linear infinite;
}

.auth-card.wide {
    width: min(1220px, 100%);
}

.auth-card.compact {
    width: min(560px, 100%);
    min-height: auto;
    grid-template-columns: 1fr;
}

/* ==============================
   Visual Side — Cosmic Portal
============================== */

.auth-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;
    padding: clamp(22px, 4vw, 38px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: calc(var(--radius) + 4px);
    background:
        radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.13), transparent 24%),
        radial-gradient(circle at 80% 20%, rgba(32, 232, 210, 0.17), transparent 34%),
        radial-gradient(circle at 10% 90%, rgba(255, 114, 210, 0.15), transparent 36%),
        linear-gradient(135deg, rgba(32, 232, 210, 0.23), transparent 44%),
        linear-gradient(28deg, rgba(255, 114, 210, 0.19), transparent 54%),
        rgba(5, 10, 24, 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(255, 255, 255, 0.045),
        0 20px 68px rgba(0, 0, 0, 0.34);
}

.auth-visual::before {
    content: "";
    position: absolute;
    inset: auto -18% -24% 18%;
    height: 230px;
    opacity: 0.55;
    pointer-events: none;
    background:
        conic-gradient(
            from 110deg,
            var(--cyan),
            var(--blue),
            var(--pink),
            var(--gold),
            var(--cyan)
        );
    filter: blur(48px);
    animation: authGlowSweep 8s ease-in-out infinite alternate;
}

.auth-visual::after {
    content: "";
    position: absolute;
    inset: -30%;
    pointer-events: none;
    opacity: 0.36;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.8px),
        radial-gradient(circle, rgba(32, 232, 210, 0.64) 0 1px, transparent 1.8px),
        radial-gradient(circle, rgba(255, 114, 210, 0.58) 0 1px, transparent 1.8px);
    background-size: 72px 72px, 118px 118px, 164px 164px;
    animation: authStarField 24s linear infinite;
    mask-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0.22));
}

.auth-visual > * {
    position: relative;
    z-index: 2;
}

.auth-visual h1 {
    max-width: 11ch;
    margin: 0;
    font-size: clamp(2.25rem, 6vw, 5.65rem);
    line-height: 0.88;
    letter-spacing: -0.07em;
    color: #ffffff;
    text-shadow:
        0 0 24px rgba(32, 232, 210, 0.35),
        0 0 60px rgba(255, 114, 210, 0.2);
}

.auth-visual p:not(.eyebrow) {
    max-width: 42ch;
    color: var(--muted);
    line-height: 1.68;
}

/* ==============================
   Risk Core — Portal Engine
============================== */

.risk-core {
    position: absolute;
    top: 28px;
    right: 30px;
    width: min(230px, 45vw);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.09), transparent 28%),
        radial-gradient(circle at 50% 50%, rgba(32, 232, 210, 0.08), transparent 48%);
    box-shadow:
        0 0 0 10px rgba(255, 255, 255, 0.018),
        0 0 50px rgba(32, 232, 210, 0.13),
        inset 0 0 44px rgba(255, 255, 255, 0.05);
    animation: authOrbit 20s linear infinite;
}

.risk-core::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: inherit;
    border: 1px dashed rgba(32, 232, 210, 0.18);
    animation: authOrbitReverse 14s linear infinite;
}

.risk-core::after {
    content: "";
    position: absolute;
    inset: 38%;
    border-radius: inherit;
    background: #ffffff;
    box-shadow:
        0 0 18px rgba(255, 255, 255, 0.75),
        0 0 42px rgba(32, 232, 210, 0.45),
        0 0 70px rgba(255, 114, 210, 0.28);
}

.risk-core span {
    position: absolute;
    inset: 12%;
    border-radius: inherit;
    border: 1px solid rgba(32, 232, 210, 0.26);
}

.risk-core span:nth-child(2) {
    inset: 29%;
    border-color: rgba(255, 209, 102, 0.36);
    box-shadow: 0 0 30px rgba(255, 209, 102, 0.08);
}

.risk-core span:nth-child(3) {
    inset: 45%;
    background:
        conic-gradient(from 30deg, var(--cyan), var(--pink), var(--gold), var(--cyan));
    box-shadow: 0 0 42px rgba(32, 232, 210, 0.45);
}

/* ==============================
   Form Panel
============================== */

.form-panel {
    align-content: center;
    max-height: calc(100vh - 64px);
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(32, 232, 210, 0.55) rgba(255, 255, 255, 0.045);
}

.form-panel::-webkit-scrollbar {
    width: 8px;
}

.form-panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
}

.form-panel::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, var(--cyan), var(--pink));
    border: 2px solid rgba(3, 7, 18, 0.7);
}

.auth-card.compact .form-panel {
    max-height: none;
}

/* ==============================
   Auth Form
============================== */

.auth-form {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.105);
    border-radius: calc(var(--radius) + 4px);
    background:
        radial-gradient(circle at 10% 0%, rgba(32, 232, 210, 0.1), transparent 34%),
        radial-gradient(circle at 96% 100%, rgba(255, 114, 210, 0.09), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.026)),
        rgba(3, 7, 18, 0.48);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        inset 0 -1px 0 rgba(255, 255, 255, 0.045),
        0 18px 58px rgba(0, 0, 0, 0.25);
}

.auth-form::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.52;
    background:
        linear-gradient(120deg, transparent 0 30%, rgba(255, 255, 255, 0.12) 45%, transparent 60%);
    transform: translateX(-130%);
    animation: authFormShine 7s ease-in-out infinite;
}

.auth-form::after {
    content: "";
    position: absolute;
    inset: auto -10% -18%;
    height: 170px;
    z-index: -1;
    pointer-events: none;
    opacity: 0.13;
    background-image:
        linear-gradient(90deg, rgba(32, 232, 210, 0.78) 1px, transparent 1px),
        linear-gradient(rgba(255, 114, 210, 0.62) 1px, transparent 1px);
    background-size: 28px 28px;
    transform: perspective(700px) rotateX(64deg);
    transform-origin: 50% 100%;
    animation: authFormGridMove 9s linear infinite;
}

.auth-form .form-control,
.auth-form .field input,
.auth-form .field select,
.auth-form .field textarea {
    min-height: 48px;
    border-color: rgba(255, 255, 255, 0.13);
    background:
        radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.07), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.067), rgba(255, 255, 255, 0.026)),
        rgba(2, 6, 18, 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 24px rgba(0, 0, 0, 0.12);
}

.auth-form .form-control:hover,
.auth-form .field input:hover,
.auth-form .field select:hover,
.auth-form .field textarea:hover {
    border-color: rgba(255, 255, 255, 0.24);
}

.auth-form .form-control:focus,
.auth-form .field input:focus,
.auth-form .field select:focus,
.auth-form .field textarea:focus {
    border-color: rgba(32, 232, 210, 0.74);
    background:
        radial-gradient(circle at 8% 0%, rgba(32, 232, 210, 0.1), transparent 34%),
        rgba(2, 6, 18, 0.8);
    box-shadow:
        0 0 0 4px rgba(32, 232, 210, 0.12),
        0 16px 36px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.auth-form .primary-button,
.auth-form .secondary-button {
    min-height: 48px;
}

/* ==============================
   Live Status
============================== */

.auth-live-status,
.field-live-status {
    min-height: 20px;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1.6;
}

.referral-preview {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(32, 232, 210, 0.16);
    border-radius: var(--radius);
    color: var(--muted);
    background:
        radial-gradient(circle at 8% 0%, rgba(32, 232, 210, 0.1), transparent 34%),
        rgba(255, 255, 255, 0.04);
}

.referral-preview.is-valid {
    border-color: rgba(68, 240, 168, 0.34);
    color: var(--green);
    box-shadow: 0 0 26px rgba(68, 240, 168, 0.08);
}

.referral-preview.is-invalid {
    border-color: rgba(255, 97, 121, 0.34);
    color: #ff9aab;
}

.auth-live-status {
    position: relative;
    overflow: hidden;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.08), transparent 34%),
        rgba(255, 255, 255, 0.047);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.auth-live-status:empty {
    display: none;
}

.auth-live-status[data-tone="success"],
.field-live-status[data-tone="success"] {
    color: var(--green);
    text-shadow: 0 0 16px rgba(68, 240, 168, 0.25);
}

.auth-live-status[data-tone="error"],
.field-live-status[data-tone="error"] {
    color: #ff9aab;
    text-shadow: 0 0 16px rgba(255, 97, 121, 0.22);
}

.auth-live-status[data-tone="info"],
.field-live-status[data-tone="info"] {
    color: var(--cyan);
    text-shadow: 0 0 16px rgba(32, 232, 210, 0.25);
}

/* ==============================
   Validation States
============================== */

.auth-form input[data-valid-state="success"] {
    border-color: rgba(68, 240, 168, 0.58);
    box-shadow:
        0 0 0 3px rgba(68, 240, 168, 0.09),
        0 0 24px rgba(68, 240, 168, 0.11);
}

.auth-form input[data-valid-state="error"] {
    border-color: rgba(255, 97, 121, 0.62);
    box-shadow:
        0 0 0 3px rgba(255, 97, 121, 0.09),
        0 0 24px rgba(255, 97, 121, 0.11);
}

.auth-form input[data-valid-state="success"] + .field-live-status::before,
.auth-form input[data-valid-state="error"] + .field-live-status::before {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 950;
}

.auth-form input[data-valid-state="success"] + .field-live-status::before {
    content: "✓";
    color: #04120f;
    background: var(--green);
}

.auth-form input[data-valid-state="error"] + .field-live-status::before {
    content: "!";
    color: #fff;
    background: var(--red);
}

/* ==============================
   Heading / Field Animation
============================== */

.form-heading h2 {
    font-size: clamp(1.75rem, 4vw, 2.7rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
    text-shadow:
        0 0 24px rgba(32, 232, 210, 0.16),
        0 0 36px rgba(255, 114, 210, 0.12);
}

.field-enter {
    animation: fieldEnter 460ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
    animation-delay: var(--delay, 0ms);
}

.auth-focus .risk-core {
    filter:
        drop-shadow(0 0 28px rgba(32, 232, 210, 0.35))
        drop-shadow(0 0 48px rgba(255, 114, 210, 0.18));
}

/* ==============================
   Animations
============================== */

@keyframes authPortalAura {
    to {
        transform: rotate(360deg);
    }
}

@keyframes authCardGridMove {
    from {
        background-position: 0 0, 0 0;
    }
    to {
        background-position: 68px 68px, 68px 68px;
    }
}

@keyframes authOrbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes authOrbitReverse {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes authGlowSweep {
    from {
        transform: translate3d(-8%, 0, 0) rotate(0deg) scale(0.94);
    }
    to {
        transform: translate3d(8%, -8%, 0) rotate(18deg) scale(1.08);
    }
}

@keyframes authStarField {
    from {
        background-position: 0 0, 0 0, 0 0;
    }
    to {
        background-position: 120px 90px, -110px 130px, 150px -90px;
    }
}

@keyframes authFormShine {
    0%,
    42% {
        transform: translateX(-130%);
    }
    72%,
    100% {
        transform: translateX(130%);
    }
}

@keyframes authFormGridMove {
    from {
        background-position: 0 0, 0 0;
    }
    to {
        background-position: 56px 56px, 56px 56px;
    }
}

@keyframes fieldEnter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ==============================
   Responsive
============================== */

@media (max-width: 1080px) {
    .auth-card {
        width: min(100%, 980px);
        grid-template-columns: minmax(300px, 0.85fr) minmax(380px, 1.15fr);
    }

    .risk-core {
        width: min(200px, 42vw);
    }
}

@media (max-width: 900px) {
    .auth-card,
    .auth-card.wide {
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .auth-visual {
        min-height: 330px;
    }

    .form-panel {
        max-height: none;
    }

    .auth-visual h1 {
        max-width: 13ch;
    }
}

@media (max-width: 680px) {
    .auth-card {
        gap: 9px;
        padding: 9px;
        border-radius: 26px;
    }

    .auth-card::after {
        inset: 8px;
        border-radius: 20px;
    }

    .auth-visual {
        min-height: 285px;
        padding: 22px;
        border-radius: 22px;
    }

    .auth-visual h1 {
        font-size: clamp(2rem, 13vw, 3.45rem);
    }

    .risk-core {
        top: 18px;
        right: 18px;
        width: min(170px, 44vw);
        opacity: 0.72;
    }

    .auth-form {
        border-radius: 22px;
    }

    .form-heading h2 {
        font-size: clamp(1.65rem, 9vw, 2.3rem);
    }
}

@media (max-width: 560px) {
    .auth-visual {
        min-height: 260px;
    }

    .risk-core {
        opacity: 0.58;
    }

    .auth-form .primary-button,
    .auth-form .secondary-button,
    .auth-form .form-control,
    .auth-form .field input,
    .auth-form .field select,
    .auth-form .field textarea {
        min-height: 46px;
    }
}

@media (max-width: 420px) {
    .auth-card {
        border-radius: 22px;
        padding: 7px;
    }

    .auth-visual {
        min-height: 230px;
        padding: 18px;
        border-radius: 18px;
    }

    .risk-core {
        width: 132px;
        top: 14px;
        right: 14px;
    }

    .auth-visual p:not(.eyebrow) {
        font-size: 0.92rem;
    }
}

/* ==============================
   Reduced Motion
============================== */

@media (prefers-reduced-motion: reduce) {
    .auth-card *,
    .auth-card *::before,
    .auth-card *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}