:root {
    --bg: #040815;
    --bg-deep: #090f1f;
    --card: rgba(9,14,28,.76);
    --card-strong: rgba(8,12,24,.92);

    --text: #f8fafc;
    --muted: #a5b4d4;
    --muted-2: #7c8db3;

    --border: rgba(255,255,255,.08);
    --border-strong: rgba(255,255,255,.14);

    --primary: #7c5cff;
    --secondary: #39b7ff;
    --accent: #15d6c7;
    --hot: #ff4fd8;

    --gradient:
        linear-gradient(
            135deg,
            #8b5cf6 0%,
            #5b7cfa 44%,
            #28c8ff 100%
        );

    --text-gradient:
        linear-gradient(
            135deg,
            #ff4fd8 0%,
            #8b5cf6 45%,
            #29d7ff 100%
        );

    --shadow:
        0 24px 70px rgba(0,0,0,.52);

    --shadow-glow:
        0 0 0 1px rgba(255,255,255,.03),
        0 0 40px rgba(124,92,255,.22);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100dvh;
    width: 100%;
    overflow-x: hidden;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: clamp(14px, 3vw, 28px);

    color: var(--text);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(circle at 18% 18%, rgba(124,92,255,.20), transparent 26%),
        radial-gradient(circle at 82% 82%, rgba(25,211,197,.16), transparent 28%),
        radial-gradient(circle at 50% 0%, rgba(255,79,216,.10), transparent 30%),
        linear-gradient(135deg, #03050d 0%, #071022 48%, #040815 100%);

    position: relative;
}

/* फ्लोटिंग बैकग्राउंड ग्लो */
body::before,
body::after {
    content: "";
    position: fixed;
    inset: auto;
    width: min(42vw, 520px);
    height: min(42vw, 520px);
    border-radius: 50%;
    filter: blur(110px);
    pointer-events: none;
    opacity: .22;
    animation: floatGlow 12s ease-in-out infinite;
}

body::before {
    top: -170px;
    left: -120px;
    background: rgba(124,92,255,.65);
}

body::after {
    right: -140px;
    bottom: -180px;
    background: rgba(25,211,197,.55);
    animation-delay: -5s;
}

a {
    text-decoration: none;
}

::selection {
    background: rgba(124,92,255,.38);
    color: #fff;
}

.auth-shell {
    width: min(100%, 460px); /* साइनअप के लिए विड्थ थोड़ी सी बढ़ाई है ताकि लेआउट सही रहे */
    position: relative;
    z-index: 2;
}

.auth-panel {
    position: relative;
    width: 100%;
    padding: clamp(28px, 5vw, 38px) clamp(20px, 4vw, 30px);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(14,20,40,.80), rgba(6,10,22,.88));
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: var(--shadow), var(--shadow-glow);
    animation: panelIn .7s cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
}

/* बॉर्डर पर ग्रेडिएंट लाइन इफ़ेक्ट */
.auth-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.16),
            rgba(124,92,255,.45),
            rgba(25,211,197,.25),
            rgba(255,79,216,.30)
        );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.auth-panel::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -55px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255,255,255,.16), transparent 68%);
    pointer-events: none;
}

@keyframes panelIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(.98);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.brand {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: #fff;
    font-weight: 800;
}

.brand img {
    width: auto;
    height: clamp(38px, 6vw, 46px);
    filter:
        drop-shadow(0 0 22px rgba(124,92,255,.48))
        drop-shadow(0 0 10px rgba(25,211,197,.22));
}

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

.auth-heading p {
    color: var(--accent); /* #15d6c7 नियॉन स्यान */
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 6px;
}

.auth-heading h1 {
    font-size: clamp(1.8rem, 4.5vw, 2.2rem);
    font-weight: 900;
    letter-spacing: -.05em;
    line-height: 1.1;
    color: var(--text);
    text-shadow: 0 0 30px rgba(124,92,255,.12);
}

/* हेडिंग के नीचे की कस्टमाइज्ड फुल-विड्थ ग्लोइंग लाइन */
.auth-heading h1::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    margin-top: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--primary));
    box-shadow: 0 0 12px rgba(25,211,197,.4);
}

.alert {
    margin-bottom: 18px;
    padding: 14px 15px;
    border-radius: 16px;
    border: 1px solid rgba(251,113,133,.18);
    background: linear-gradient(180deg, rgba(127,29,29,.20), rgba(88,28,28,.16));
    color: #fecaca;
    font-size: .92rem;
    line-height: 1.45;
}

.alert p + p {
    margin-top: 4px;
}

.form-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #dbe3f6;
    font-size: .88rem;
    font-weight: 700;
    animation: fadeUp .55s ease both;
}

label:nth-of-type(1) { animation-delay: .08s; }
label:nth-of-type(2) { animation-delay: .16s; }

input {
    width: 100%;
    height: 52px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(180deg, rgba(5,10,22,.94), rgba(8,12,24,.98));
    color: #fff;
    padding: 0 16px;
    font-size: 15px;
    outline: none;
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}

input::placeholder {
    color: #6f7fa3; /* लॉगिन की तरह परफेक्ट विजिबिलिटी */
}

input:hover {
    border-color: rgba(124,92,255,.28);
}

input:focus {
    border-color: rgba(124,92,255,.95);
    background: rgba(5,9,19,.99);
    box-shadow:
        0 0 0 4px rgba(124,92,255,.16),
        0 0 24px rgba(25,211,197,.10);
    transform: translateY(-1px);
}

/* लॉगिन की तरह ही मास्टर पर्पल-टू-ब्लू बटन */
.auth-button {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 54px;
    margin-top: 6px;
    border: none;
    border-radius: 16px;
    background:
        linear-gradient(135deg, #8b5cf6 0%, #5b7cfa 46%, #29d7ff 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: .01em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow:
        0 14px 28px rgba(91,124,250,.28),
        0 0 0 1px rgba(255,255,255,.08) inset;
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease;
    animation: fadeUp .55s ease both;
    animation-delay: .24s;
}

.auth-button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 20px 40px rgba(91,124,250,.38),
        0 0 0 1px rgba(255,255,255,.10) inset;
    filter: saturate(1.08);
}

.auth-button:active {
    transform: translateY(0);
}

/* शाइन इफ़ेक्ट एनीमेशन जो होवर पर बटन पार करेगा */
.auth-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
    transition: left .85s ease;
}

.auth-button:hover::before {
    left: 140%;
}

.auth-link {
    margin-top: 22px;
    text-align: center;
    color: var(--muted-2);
    font-size: .92rem;
    animation: fadeUp .55s ease both;
    animation-delay: .32s;
}

.auth-link a {
    color: #b79cff;
    font-weight: 900;
    transition: color .2s ease, text-shadow .2s ease;
}

.auth-link a:hover {
    color: #e6dbff;
    text-shadow: 0 0 16px rgba(124,92,255,.16);
    text-decoration: none; /* अंडरलाइन हटा कर लॉगिन जैसा क्लीन लुक दिया */
}

/* एनिमेशन्स */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatGlow {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(0,12px,0) scale(1.04); }
}

/* ऑटो-फिल फिक्स */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0px 1000px #07101d inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* मीडिया क्वेरीज (Responsive Design) */
@media (max-width: 768px) {
    body {
        align-items: flex-start;
    }

    .auth-shell {
        margin: 18px 0;
    }

    .auth-panel {
        border-radius: 24px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 12px;
    }

    .auth-panel {
        padding: 24px 16px;
        border-radius: 22px;
    }

    .auth-heading h1 {
        font-size: 1.75rem;
    }

    input,
    .auth-button {
        height: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}