.sn-auth-shell {
    --sn-primary: #00b795;
    --sn-primary-dark: #00a486;
    --sn-primary-soft: #e5f7f4;
    --sn-ink: #171717;
    --sn-muted: #737373;
    --sn-line: #e5e5e5;
    --bs-primary: #00b795;
    --bs-primary-rgb: 0, 183, 149;
    isolation: isolate;
    padding: 32px 0;
    color: var(--sn-ink);
    background:
        radial-gradient(
            circle at 16% 20%,
            rgba(1, 183, 149, 0.24),
            transparent 24%
        ),
        radial-gradient(
            circle at 84% 15%,
            rgba(25, 118, 210, 0.2),
            transparent 28%
        ),
        radial-gradient(
            circle at 68% 88%,
            rgba(124, 179, 66, 0.18),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #f7fcfb 0%,
            #edf8fb 43%,
            #f6fbff 72%,
            #fbfefd 100%
        );
}

.sn-auth-shell::before,
.sn-auth-shell::after {
    position: absolute;
    inset: auto;
    z-index: -3;
    content: "";
    pointer-events: none;
}

.sn-auth-shell::before {
    right: -150px;
    bottom: -210px;
    width: min(58vw, 760px);
    height: min(44vw, 560px);
    border-radius: 38% 62% 48% 52% / 58% 36% 64% 42%;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.74), transparent 44%),
        conic-gradient(
            from 152deg,
            rgba(1, 183, 149, 0.22),
            rgba(25, 118, 210, 0.08),
            rgba(124, 179, 66, 0.18),
            rgba(1, 183, 149, 0.22)
        );
    opacity: 0.78;
    transform: rotate(-10deg);
}

.sn-auth-shell::after {
    top: -170px;
    left: -120px;
    width: min(48vw, 590px);
    height: min(36vw, 440px);
    border-radius: 57% 43% 62% 38% / 44% 61% 39% 56%;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.78),
            rgba(255, 255, 255, 0) 48%
        ),
        linear-gradient(
            35deg,
            rgba(1, 183, 149, 0.26),
            rgba(25, 118, 210, 0.08) 68%,
            transparent
        );
    opacity: 0.84;
    transform: rotate(12deg);
}

.sn-auth-pattern {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(
            115deg,
            transparent 0 39%,
            rgba(255, 255, 255, 0.52) 39% 39.35%,
            transparent 39.35%
        ),
        linear-gradient(
            115deg,
            transparent 0 63%,
            rgba(1, 183, 149, 0.08) 63% 63.22%,
            transparent 63.22%
        ),
        linear-gradient(rgba(34, 80, 103, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 80, 103, 0.045) 1px, transparent 1px);
    background-size:
        100% 100%,
        100% 100%,
        44px 44px,
        44px 44px;
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.82),
        transparent 88%
    );
}

.sn-auth-pattern::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        radial-gradient(
            circle at 28% 78%,
            rgba(255, 255, 255, 0.7) 0 1px,
            transparent 1.5px
        ),
        radial-gradient(
            circle at 78% 34%,
            rgba(255, 255, 255, 0.58) 0 1px,
            transparent 1.5px
        ),
        radial-gradient(
            circle at 12% 40%,
            rgba(1, 183, 149, 0.16) 0 1px,
            transparent 1.5px
        );
    background-size:
        82px 82px,
        116px 116px,
        98px 98px;
    opacity: 0.88;
}

.sn-auth-pattern::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(
            35deg,
            transparent 0 18%,
            rgba(1, 183, 149, 0.06) 18% 18.3%,
            transparent 18.3%
        ),
        repeating-linear-gradient(
            135deg,
            transparent 0 24px,
            rgba(25, 118, 210, 0.032) 24px 25px,
            transparent 25px 50px
        );
    opacity: 0.8;
}

.sn-auth-orbit {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(1, 183, 149, 0.23);
    border-radius: 999px;
    pointer-events: none;
    box-shadow: inset 0 0 42px rgba(255, 255, 255, 0.48);
}

.sn-auth-orbit-one {
    top: 9%;
    right: 8%;
    width: 220px;
    height: 220px;
}

.sn-auth-orbit-one::before,
.sn-auth-orbit-two::before,
.sn-auth-orbit-one::after,
.sn-auth-orbit-two::after {
    position: absolute;
    content: "";
    border-radius: inherit;
    pointer-events: none;
}

.sn-auth-orbit-one::before,
.sn-auth-orbit-two::before {
    inset: 18px;
    border: 1px dashed rgba(18, 52, 71, 0.09);
}

.sn-auth-orbit-one::after,
.sn-auth-orbit-two::after {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: rgba(1, 183, 149, 0.28);
    box-shadow: 0 0 24px rgba(1, 183, 149, 0.25);
}

.sn-auth-orbit-one::after {
    top: 30px;
    right: 30px;
}

.sn-auth-orbit-two {
    bottom: 10%;
    left: 9%;
    width: 148px;
    height: 148px;
    border-color: rgba(25, 118, 210, 0.21);
}

.sn-auth-orbit-two::after {
    bottom: 24px;
    left: 20px;
    background: rgba(25, 118, 210, 0.26);
    box-shadow: 0 0 24px rgba(25, 118, 210, 0.22);
}

.sn-auth-shell.sn-nagorik-main .text-primary {
    color: #00b795 !important;
}

.sn-auth-shell.sn-nagorik-main .bg-primary {
    background-color: #00b795 !important;
}

.sn-auth-shell.sn-nagorik-main .btn-primary,
.sn-auth-shell.sn-nagorik-main button[type="submit"] {
    --bs-btn-color: #fff;
    --bs-btn-bg: #00b795;
    --bs-btn-border-color: #00b795;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #00a486;
    --bs-btn-hover-border-color: #00a486;
    --bs-btn-focus-shadow-rgb: 0, 183, 149;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #00a486;
    --bs-btn-active-border-color: #00a486;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #00b795;
    --bs-btn-disabled-border-color: #00b795;
    border-color: #00b795 !important;
    background: #00b795 !important;
    color: #fff !important;
}

.sn-auth-shell.sn-nagorik-main .btn-primary:hover,
.sn-auth-shell.sn-nagorik-main .btn-primary:focus,
.sn-auth-shell.sn-nagorik-main button[type="submit"]:hover,
.sn-auth-shell.sn-nagorik-main button[type="submit"]:focus {
    border-color: #00a486 !important;
    background: #00a486 !important;
    color: #fff !important;
}

.sn-auth-shell.sn-nagorik-main .form-control,
.sn-auth-shell.sn-nagorik-main .form-select,
.sn-auth-shell.sn-nagorik-main input,
.sn-auth-shell.sn-nagorik-main select,
.sn-auth-shell.sn-nagorik-main textarea {
    border-color: #d4d4d4 !important;
    border-radius: 4px !important;
    color: #171717;
}

.sn-auth-shell.sn-nagorik-main .form-control:focus,
.sn-auth-shell.sn-nagorik-main .form-select:focus,
.sn-auth-shell.sn-nagorik-main input:focus,
.sn-auth-shell.sn-nagorik-main select:focus,
.sn-auth-shell.sn-nagorik-main textarea:focus {
    border-color: #00b795 !important;
    box-shadow: none !important;
}

@media (max-width: 767.98px) {
    .sn-auth-shell {
        align-items: flex-start !important;
        padding: 16px 0;
    }

    .sn-auth-shell::before {
        right: -220px;
        bottom: -160px;
        width: 460px;
        height: 330px;
        opacity: 0.5;
    }

    .sn-auth-shell::after,
    .sn-auth-orbit {
        display: none;
    }
}