:root {
    --auth-navy-950: #032d4f;
    --auth-navy-900: #063c69;
    --auth-navy-800: #0a4d82;
    --auth-green-700: #008d57;
    --auth-green-600: #00a866;
    --auth-teal-500: #0aa9a4;
    --auth-text: #10243b;
    --auth-muted: #64748b;
    --auth-line: #dbe6ef;
    --auth-surface: #ffffff;
    --auth-soft: #f4f8fb;
    --auth-danger: #d92d4f;
    --auth-shadow: 0 28px 80px rgba(3, 45, 79, 0.13);
}

html {
    background: var(--auth-soft);
}

.auth-page,
.auth-page-shell {
    min-height: 100vh;
    min-height: 100dvh;
}

.auth-page {
    margin: 0;
    overflow-x: hidden;
    background: var(--auth-soft) !important;
    color: var(--auth-text);
    font-family: "Cairo", system-ui, sans-serif;
}

.auth-showcase {
    position: relative;
    flex: 0 0 clamp(430px, 42vw, 680px) !important;
    isolation: isolate;
    padding: clamp(38px, 4vw, 64px) !important;
}

.auth-showcase--navy {
    background:
        radial-gradient(circle at 16% 18%, rgba(10, 169, 164, 0.38), transparent 31%),
        linear-gradient(145deg, var(--auth-navy-950), var(--auth-navy-900) 58%, #07547c) !important;
}

.auth-showcase--green {
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.2), transparent 28%),
        linear-gradient(145deg, #007f54, var(--auth-green-600) 56%, var(--auth-teal-500)) !important;
}

.auth-showcase::before {
    position: absolute;
    z-index: -1;
    right: clamp(-90px, -5vw, -40px);
    bottom: clamp(-120px, -6vw, -50px);
    width: min(76%, 500px);
    aspect-ratio: 1;
    background: url("../qasetly-logo-transparent-v2.png") center / contain no-repeat;
    content: "";
    filter: brightness(0) invert(1);
    opacity: 0.075;
    transform: rotate(-10deg);
}

.auth-showcase::after {
    position: absolute;
    z-index: -2;
    top: 16%;
    left: -22%;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 72px rgba(255, 255, 255, 0.025), 0 0 0 144px rgba(255, 255, 255, 0.018);
}

.auth-showcase > div.absolute {
    display: none;
}

.auth-showcase > a {
    display: inline-flex;
    width: fit-content;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    padding: 7px 12px;
    box-shadow: 0 18px 42px rgba(1, 31, 53, 0.22);
}

.auth-showcase img[src*="qasetly-logo-transparent-v2.png"],
.auth-showcase img[src*="qasetly-logo-dark-v2.png"] {
    width: 164px !important;
    height: 64px;
    border-radius: 0 !important;
    object-fit: contain;
}

.dark .auth-showcase img[src*="qasetly-logo-transparent-v2.png"],
.dark .auth-showcase img[src*="qasetly-logo-dark-v2.png"],
.dark .auth-mobile-logo img[src*="qasetly-logo-transparent-v2.png"],
.dark .auth-mobile-logo img[src*="qasetly-logo-dark-v2.png"] {
    content: url("../qasetly-logo-dark-v2.png");
}

.dark .auth-showcase > a {
    border-color: rgba(115, 216, 167, 0.32);
    background: #063c69;
}

.auth-showcase h2 {
    margin-bottom: 18px !important;
    font-size: clamp(34px, 3.1vw, 50px) !important;
    line-height: 1.45 !important;
    letter-spacing: -0.035em;
}

.auth-showcase p {
    max-width: 520px;
    color: rgba(255, 255, 255, 0.74) !important;
    font-size: 17px !important;
    line-height: 1.9;
}

.auth-showcase .space-y-8 {
    display: grid;
    gap: 14px;
}

.auth-showcase .space-y-8 > * {
    margin-top: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    padding: 13px 14px;
    backdrop-filter: blur(8px);
}

.auth-content {
    position: relative;
    min-width: 0;
    background:
        radial-gradient(circle at 82% 12%, rgba(0, 168, 102, 0.11), transparent 24%),
        radial-gradient(circle at 12% 88%, rgba(15, 105, 216, 0.08), transparent 26%),
        #f7fafc !important;
    padding: 92px clamp(22px, 5vw, 78px) 52px !important;
}

.auth-content::before {
    position: absolute;
    top: 8%;
    right: 5%;
    width: 150px;
    aspect-ratio: 1;
    background: url("../qasetly-logo-transparent-v2.png") center / contain no-repeat;
    content: "";
    opacity: 0.035;
    pointer-events: none;
}

.auth-content > * {
    position: relative;
    z-index: 1;
}

.auth-card {
    width: 100%;
    max-width: 550px !important;
    border: 1px solid rgba(209, 222, 233, 0.9);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.96);
    padding: clamp(26px, 3.2vw, 42px);
    box-shadow: var(--auth-shadow);
    backdrop-filter: blur(12px);
}

.auth-card--wide {
    max-width: 720px !important;
}

.auth-card > div:first-child {
    margin-bottom: 28px !important;
}

.auth-card h1 {
    margin-bottom: 7px !important;
    color: var(--auth-navy-950) !important;
    font-size: clamp(26px, 3vw, 36px) !important;
    line-height: 1.4;
    letter-spacing: -0.025em;
}

.auth-card h1 + p {
    color: var(--auth-muted) !important;
}

.auth-primary-form label,
.auth-card fieldset legend {
    color: #334a60 !important;
    font-weight: 800 !important;
}

.auth-primary-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.auth-primary-form select,
.auth-primary-form textarea {
    min-height: 54px;
    border: 1px solid #d7e2ec !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    color: var(--auth-text) !important;
    box-shadow: 0 1px 2px rgba(3, 45, 79, 0.025);
    outline: none;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.auth-primary-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,
.auth-primary-form select:hover,
.auth-primary-form textarea:hover {
    border-color: #b9cad9 !important;
    background: #ffffff !important;
}

.auth-primary-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.auth-primary-form select:focus,
.auth-primary-form textarea:focus {
    border-color: var(--auth-green-600) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(0, 168, 102, 0.12) !important;
}

.auth-primary-form input:disabled {
    border-style: dashed !important;
    background: #eef3f7 !important;
    color: #718096 !important;
}

.auth-primary-form input::placeholder {
    color: #9aa9b8;
}

.auth-primary-form input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-color: #becbd7;
    border-radius: 5px;
    color: var(--auth-green-600);
}

.auth-primary-form svg.absolute {
    color: #8294a6 !important;
}

.auth-primary-form > button[type="submit"],
.auth-primary-form > div > button[type="submit"] {
    min-height: 56px;
    border: 0;
    border-radius: 15px !important;
    background: linear-gradient(135deg, var(--auth-green-600), var(--auth-green-700)) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(0, 141, 87, 0.2) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.auth-primary-form > button[type="submit"]:hover,
.auth-primary-form > div > button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 34px rgba(0, 141, 87, 0.25) !important;
    filter: saturate(1.08);
}

.auth-primary-form > button[type="submit"]:active,
.auth-primary-form > div > button[type="submit"]:active {
    transform: translateY(0) !important;
}

.auth-card a {
    text-underline-offset: 3px;
}

.auth-card a:hover {
    color: var(--auth-green-700) !important;
}

.auth-card fieldset {
    border: 1px solid #dce6ef;
    border-radius: 20px;
    background: #f8fafc;
    padding: 17px;
}

.auth-toolbar {
    z-index: 5;
    border: 1px solid rgba(211, 223, 234, 0.9);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
    padding: 6px;
    box-shadow: 0 10px 30px rgba(3, 45, 79, 0.07);
    backdrop-filter: blur(12px);
}

.auth-toolbar > button {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px !important;
    background: #eef4f8 !important;
    padding: 0 !important;
}

.auth-toolbar > a {
    min-height: 38px;
    border-right: 1px solid #dce5ed;
    color: #496074 !important;
    padding-inline: 10px;
}

.auth-mobile-logo img[src*="qasetly-logo-transparent-v2.png"],
.auth-mobile-logo img[src*="qasetly-logo-dark-v2.png"] {
    width: 150px !important;
    height: 66px;
    border: 1px solid #dce6ee;
    border-radius: 16px !important;
    background: #ffffff;
    object-fit: contain;
    padding: 5px 9px;
    box-shadow: 0 12px 30px rgba(3, 45, 79, 0.08);
}

.dark .auth-mobile-logo img[src*="qasetly-logo-transparent-v2.png"],
.dark .auth-mobile-logo img[src*="qasetly-logo-dark-v2.png"] {
    border-color: rgba(115, 216, 167, 0.28);
    background: #063c69;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.auth-success-card {
    border-radius: 32px;
    box-shadow: var(--auth-shadow);
}

.auth-success-card > div {
    border-radius: 32px !important;
}

body .bg-\[\#0d3b66\] {
    background-color: var(--auth-navy-950) !important;
}

body .text-\[\#0d3b66\] {
    color: var(--auth-navy-950) !important;
}

body .bg-\[\#27ae60\] {
    background-color: var(--auth-green-600) !important;
}

body .text-\[\#27ae60\] {
    color: var(--auth-green-700) !important;
}

body .hover\:bg-\[\#219150\]:hover {
    background-color: var(--auth-green-700) !important;
}

body .focus\:ring-\[\#27ae60\]:focus {
    --tw-ring-color: rgba(0, 168, 102, 0.35) !important;
}

.dark .auth-page {
    background: #07111e !important;
    color: #e8eef5;
}

.dark .auth-content {
    background:
        radial-gradient(circle at 82% 12%, rgba(0, 168, 102, 0.13), transparent 24%),
        radial-gradient(circle at 12% 88%, rgba(15, 105, 216, 0.13), transparent 26%),
        #07111e !important;
}

.dark .auth-card {
    border-color: #203247;
    background: rgba(13, 26, 42, 0.95);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
}

.dark .auth-card h1,
.dark .auth-primary-form label,
.dark .auth-card fieldset legend {
    color: #f3f7fb !important;
}

.dark .auth-primary-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.dark .auth-primary-form select,
.dark .auth-primary-form textarea {
    border-color: #2b3d50 !important;
    background: #101f2e !important;
    color: #f7fafc !important;
}

.dark .auth-primary-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.dark .auth-primary-form select:focus,
.dark .auth-primary-form textarea:focus {
    border-color: #18bc7b !important;
    background: #132537 !important;
}

.dark .auth-card fieldset,
.dark .auth-toolbar {
    border-color: #26394d;
    background: rgba(13, 26, 42, 0.92);
}

.dark .auth-toolbar > button {
    background: #172a3d !important;
}

.dark .auth-toolbar > a {
    border-color: #2a3d51;
    color: #becbd7 !important;
}

@media (max-width: 1023px) {
    .auth-page,
    .auth-page-shell {
        display: block !important;
    }

    .auth-content {
        min-height: 100vh;
        min-height: 100dvh;
        justify-content: flex-start !important;
        padding: 86px 20px 38px !important;
    }

    .auth-mobile-logo {
        margin-bottom: 20px !important;
    }

    .auth-card,
    .auth-card--wide {
        max-width: 640px !important;
    }
}

@media (max-width: 640px) {
    .auth-content {
        padding: 80px 12px 24px !important;
    }

    .auth-content::before {
        top: 2%;
        right: -12%;
        width: 180px;
    }

    .auth-card {
        border-radius: 24px;
        padding: 24px 18px;
        box-shadow: 0 18px 48px rgba(3, 45, 79, 0.11);
    }

    .auth-card h1 {
        font-size: 27px !important;
    }

    .auth-toolbar {
        top: 12px !important;
        left: 12px !important;
    }

    .auth-toolbar > a {
        padding-inline: 7px;
    }

    .auth-primary-form {
        gap: 16px !important;
    }

    .auth-primary-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .auth-primary-form select,
    .auth-primary-form textarea {
        min-height: 52px;
        font-size: 16px !important;
    }

    .auth-card fieldset {
        padding: 14px;
    }

    .auth-success-card > div {
        border-radius: 24px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-page *,
    .auth-page *::before,
    .auth-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}