/* ==========================================================================
   LetSocial Affiliate Panel
   LIGHT NEON DESIGN SYSTEM
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');


/* ==========================================================================
   ROOT
   ========================================================================== */

:root {

    /* Main palette */
    --blue: #1730A8;
    --blue-bright: #2864D7;
    --blue-soft: #DDE8FF;

    --lime: #D8F20B;
    --lime-soft: #EEF9A7;

    --magenta: #D000E8;
    --magenta-bright: #E52BFF;
    --magenta-soft: #F4C7FA;

    --lavender: #E6B9E7;
    --lavender-soft: #F4E5F4;

    --cream: #F2F4E6;
    --cream-2: #E9ECD9;

    --olive: #737A52;

    /* Text */
    --ink: #10152F;
    --ink-soft: #454A63;
    --ink-muted: #777C91;
    --ink-light: #9A9EAF;

    /* Surfaces */
    --white: #FFFFFF;
    --surface: #FAFBF5;

    /* Status */
    --danger: #E32D5B;
    --danger-bg: #FFF0F4;

    --success: #198754;
    --success-bg: #ECFFF5;

    /* Borders */
    --border: rgba(16, 21, 47, 0.10);
    --border-strong: rgba(16, 21, 47, 0.18);

    /* Shape */
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;

    --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}


@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;

    background: var(--cream);

    color: var(--ink);

    font-family: var(--font-body);

    -webkit-font-smoothing: antialiased;
}


body {
    overflow-x: hidden;
}


a {
    color: inherit;
}


::selection {
    background: var(--lime);
    color: var(--ink);
}


:focus-visible {
    outline: 3px solid var(--magenta);
    outline-offset: 3px;
    border-radius: 6px;
}


/* ==========================================================================
   AUTH SHELL
   ========================================================================== */

.auth-shell {

    min-height: 100vh;

    display: grid;

    grid-template-columns: 1.02fr 0.98fr;

    background: var(--cream);

    position: relative;

    overflow: hidden;
}


@media (max-width: 991px) {

    .auth-shell {

        grid-template-columns: 1fr;

        min-height: 100vh;
    }
}


/* ==========================================================================
   HERO PANEL
   ========================================================================== */

.auth-hero {

    position: relative;

    overflow: hidden;

    min-height: 100vh;

    padding: 48px 58px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    background: var(--blue);

    isolation: isolate;
}


/* ==========================================================================
   HERO COLOR THEMES
   ========================================================================== */


/* REGISTER */

.auth-page-register .auth-hero {

    background: var(--blue);
}


/* LOGIN */

.auth-page-login .auth-hero {

    background: var(--magenta);
}


/* FORGOT */

.auth-page-forgot .auth-hero {

    background: var(--olive);
}


/* RESET */

.auth-page-reset .auth-hero {

    background: var(--blue);
}


/* ==========================================================================
   ORGANIC NEON SHAPES
   ========================================================================== */

.auth-hero__orbs {

    position: absolute;

    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;
}


.orb {

    position: absolute;

    border-radius: 42% 58% 63% 37% / 41% 38% 62% 59%;

    filter: blur(0);

    opacity: 1;

    animation:
        neon-float 14s ease-in-out infinite alternate,
        neon-morph 12s ease-in-out infinite alternate;
}


.orb--a {

    width: 430px;
    height: 430px;

    top: -180px;
    left: -160px;

    background: var(--lime);

    animation-delay: 0s;
}


.orb--b {

    width: 390px;
    height: 390px;

    right: -190px;
    bottom: -150px;

    background: var(--magenta);

    animation-delay: -5s;
}


.orb--c {

    width: 280px;
    height: 280px;

    right: 22%;
    top: 30%;

    background: var(--lavender);

    opacity: .95;

    animation-delay: -8s;
}


/* Register variation */

.auth-page-register .orb--a {
    background: var(--lime);
}

.auth-page-register .orb--b {
    background: var(--magenta);
}

.auth-page-register .orb--c {
    background: var(--blue-bright);
}


/* Login variation */

.auth-page-login .orb--a {
    background: var(--lime);
}

.auth-page-login .orb--b {
    background: var(--blue);
}

.auth-page-login .orb--c {
    background: var(--lavender);
}


/* Forgot variation */

.auth-page-forgot .orb--a {
    background: var(--lime);
}

.auth-page-forgot .orb--b {
    background: var(--magenta);
}

.auth-page-forgot .orb--c {
    background: var(--cream);
}


/* Reset variation */

.auth-page-reset .orb--a {
    background: var(--lime);
}

.auth-page-reset .orb--b {
    background: var(--magenta);
}

.auth-page-reset .orb--c {
    background: var(--lavender);
}


@keyframes neon-float {

    from {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    to {
        transform: translate(35px, 30px) rotate(10deg) scale(1.08);
    }
}


@keyframes neon-morph {

    0% {
        border-radius: 42% 58% 63% 37% / 41% 38% 62% 59%;
    }

    50% {
        border-radius: 62% 38% 42% 58% / 52% 61% 39% 48%;
    }

    100% {
        border-radius: 35% 65% 58% 42% / 64% 39% 61% 36%;
    }
}


/* ==========================================================================
   HERO CONTENT
   ========================================================================== */

.auth-hero__top,
.auth-hero__body,
.auth-hero__foot {

    position: relative;

    z-index: 5;
}


.auth-logo {

    display: inline-flex;

    align-items: center;

    text-decoration: none;

    padding: 8px 12px;

    border-radius: 12px;

    background: rgba(255,255,255,.88);

    backdrop-filter: blur(10px);

    box-shadow:
        0 8px 30px rgba(0,0,0,.10);
}


.auth-logo img {

    height: 32px;

    width: auto;

    display: block;
}


/* ==========================================================================
   HERO BODY
   ========================================================================== */

.auth-hero__body {

    margin-top: auto;

    max-width: 500px;

    padding-top: 80px;
}


.auth-hero__eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 13px;

    border-radius: 999px;

    background: rgba(255,255,255,.88);

    color: var(--ink);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .02em;

    margin-bottom: 22px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.10);
}


.auth-hero__eyebrow .dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--magenta);

    box-shadow:
        0 0 0 4px rgba(208,0,232,.12),
        0 0 16px rgba(208,0,232,.6);
}


.auth-hero h1 {

    font-family: var(--font-display);

    font-size: clamp(38px, 4vw, 58px);

    line-height: 1.02;

    font-weight: 700;

    letter-spacing: -.045em;

    margin: 0 0 20px;

    color: #ffffff;

    max-width: 540px;

    text-shadow:
        0 3px 20px rgba(0,0,0,.12);
}


.auth-hero p.lead {

    color: rgba(255,255,255,.90);

    font-size: 16px;

    line-height: 1.65;

    max-width: 470px;

    margin: 0 0 34px;
}


/* ==========================================================================
   FEATURES
   ========================================================================== */

.auth-features {

    display: flex;

    flex-direction: column;

    gap: 13px;
}


.auth-features__item {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 14px;

    color: #ffffff;

    font-weight: 500;
}


.auth-features__item .icon {

    flex: none;

    width: 34px;

    height: 34px;

    border-radius: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255,255,255,.92);

    color: var(--blue);

    font-size: 15px;

    box-shadow:
        0 5px 18px rgba(0,0,0,.12);
}


.auth-hero__foot {

    margin-top: 40px;

    font-size: 12px;

    color: rgba(255,255,255,.65);
}


/* ==========================================================================
   FORM PANEL
   ========================================================================== */

.auth-form-panel {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 50px 40px;

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(216,242,11,.22),
            transparent 26%
        ),
        radial-gradient(
            circle at 10% 95%,
            rgba(208,0,232,.12),
            transparent 28%
        ),
        var(--cream);

    position: relative;

    overflow: hidden;
}


/* subtle neon corner */

.auth-form-panel::before {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    right: -100px;

    top: -100px;

    background: var(--lime);

    border-radius: 45% 55% 50% 50%;

    opacity: .75;

    transform: rotate(15deg);
}


.auth-form-panel::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    left: -100px;

    bottom: -100px;

    background: var(--magenta);

    border-radius: 50%;

    opacity: .14;
}


/* ==========================================================================
   AUTH CARD
   ========================================================================== */

.auth-card {

    width: 100%;

    max-width: 430px;

    position: relative;

    z-index: 3;

    background: rgba(255,255,255,.92);

    border: 1px solid rgba(255,255,255,.95);

    border-radius: 24px;

    padding: 38px;

    box-shadow:
        0 25px 70px rgba(23,48,168,.12),
        0 4px 20px rgba(16,21,47,.06);

    backdrop-filter: blur(15px);
}


.auth-card__mobile-logo {

    display: none;

    margin-bottom: 25px;
}


.auth-card__mobile-logo img {

    height: 28px;

    width: auto;
}


@media (max-width: 991px) {

    .auth-card__mobile-logo {

        display: block;
    }
}


.auth-card h2 {

    font-family: var(--font-display);

    font-size: 30px;

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -.025em;

    margin: 0 0 7px;

    color: var(--ink);
}


.auth-card p.subtitle {

    color: var(--ink-muted);

    font-size: 14px;

    line-height: 1.5;

    margin: 0 0 30px;
}


/* ==========================================================================
   FORM FIELDS
   ========================================================================== */

.field {

    margin-bottom: 18px;
}


.field label {

    display: block;

    font-size: 12.5px;

    font-weight: 700;

    color: var(--ink);

    margin-bottom: 7px;
}


.field .control-wrap {

    position: relative;
}


.form-control {

    width: 100%;

    min-height: 49px;

    background: #ffffff;

    border: 1.5px solid var(--border-strong);

    color: var(--ink);

    font-family: var(--font-body);

    font-size: 14px;

    padding: 12px 14px;

    border-radius: 11px;

    transition:
        border-color .2s var(--ease),
        box-shadow .2s var(--ease),
        transform .2s var(--ease),
        background .2s var(--ease);
}


.form-control::placeholder {

    color: #A2A5B2;
}


.form-control:hover {

    border-color: rgba(23,48,168,.30);
}


.form-control:focus {

    outline: none;

    border-color: var(--blue);

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(23,48,168,.10),
        0 8px 20px rgba(23,48,168,.06);
}


.field-hint {

    font-size: 11.5px;

    color: var(--ink-muted);

    margin-top: 6px;
}


/* ==========================================================================
   FORGOT PASSWORD LINK
   ========================================================================== */

.field-inline-link {

    display: flex;

    justify-content: flex-end;

    margin-top: 8px;
}


.field-inline-link a {

    font-size: 12.5px;

    font-weight: 700;

    color: var(--blue);

    text-decoration: none;

    transition: color .15s;
}


.field-inline-link a:hover {

    color: var(--magenta);

}


/* ==========================================================================
   CHECKBOX
   ========================================================================== */

.check-row {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 22px;
}


.check-row input[type="checkbox"] {

    appearance: none;

    -webkit-appearance: none;

    width: 19px;

    height: 19px;

    flex: none;

    margin-top: 1px;

    border-radius: 5px;

    border: 1.5px solid var(--border-strong);

    background: #ffffff;

    cursor: pointer;

    position: relative;

    transition:
        background .15s,
        border-color .15s,
        box-shadow .15s;
}


.check-row input[type="checkbox"]:checked {

    background: var(--lime);

    border-color: var(--lime);

    box-shadow:
        0 0 12px rgba(216,242,11,.40);
}


.check-row input[type="checkbox"]:checked::after {

    content: "";

    position: absolute;

    left: 6px;

    top: 2px;

    width: 5px;

    height: 9px;

    border: solid var(--ink);

    border-width: 0 2px 2px 0;

    transform: rotate(45deg);
}


.check-row label {

    font-size: 12.5px;

    color: var(--ink-soft);

    line-height: 1.55;

    cursor: pointer;
}


.check-row a {

    color: var(--blue);

    text-decoration: none;

    font-weight: 600;
}


.check-row a:hover {

    color: var(--magenta);

    text-decoration: underline;
}


/* ==========================================================================
   BUTTON
   ========================================================================== */

.btn-neon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: 100%;

    min-height: 51px;

    padding: 13px 20px;

    border: none;

    border-radius: 11px;

    font-family: var(--font-body);

    font-weight: 700;

    font-size: 14px;

    letter-spacing: .01em;

    color: #10152F;

    background:
        linear-gradient(
            105deg,
            var(--lime) 0%,
            var(--lime) 48%,
            #CFF000 100%
        );

    cursor: pointer;

    text-decoration: none;

    transition:
        transform .18s var(--ease),
        box-shadow .18s var(--ease),
        filter .18s var(--ease);
}


.btn-neon:hover {

    transform: translateY(-2px);

    filter: brightness(1.03);

    box-shadow:
        0 12px 30px rgba(216,242,11,.35),
        0 3px 12px rgba(16,21,47,.10);
}


.btn-neon:active {

    transform: translateY(0);
}


/* ==========================================================================
   SECONDARY BUTTON
   ========================================================================== */

.btn-ghost {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    padding: 12px 20px;

    border-radius: 11px;

    border: 1.5px solid var(--blue);

    background: transparent;

    color: var(--blue);

    font-weight: 700;

    font-size: 14px;

    text-decoration: none;

    transition:
        border-color .15s,
        background .15s,
        color .15s;
}


.btn-ghost:hover {

    background: var(--blue);

    color: #ffffff;
}


/* ==========================================================================
   CARD FOOTER
   ========================================================================== */

.auth-card__foot {

    margin-top: 25px;

    text-align: center;

    font-size: 13px;

    color: var(--ink-muted);
}


.auth-card__foot a {

    color: var(--blue);

    font-weight: 700;

    text-decoration: none;
}


.auth-card__foot a:hover {

    color: var(--magenta);

    text-decoration: underline;
}


/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert-neon {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding: 13px 15px;

    border-radius: 11px;

    font-size: 13px;

    line-height: 1.5;

    margin-bottom: 20px;

    border: 1px solid transparent;

    animation: alert-in .35s var(--ease);
}


@keyframes alert-in {

    from {
        opacity: 0;
        transform: translateY(-7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.alert-neon--danger {

    background: var(--danger-bg);

    border-color: rgba(227,45,91,.20);

    color: #B71946;
}


.alert-neon--success {

    background: var(--success-bg);

    border-color: rgba(25,135,84,.20);

    color: #157347;
}


.alert-neon .icon {

    flex: none;

    margin-top: 1px;
}


/* ==========================================================================
   PAGE-SPECIFIC FORM ACCENTS
   ========================================================================== */


/* REGISTER */

.auth-page-register .auth-card {

    box-shadow:
        0 25px 70px rgba(23,48,168,.14),
        0 4px 20px rgba(216,242,11,.10);
}


.auth-page-register .btn-neon {

    background: linear-gradient(
        105deg,
        var(--lime),
        #CFF000
    );
}


/* LOGIN */

.auth-page-login .auth-card {

    box-shadow:
        0 25px 70px rgba(208,0,232,.10),
        0 4px 20px rgba(23,48,168,.08);
}


.auth-page-login .btn-neon {

    background: linear-gradient(
        105deg,
        var(--lime),
        #CFF000
    );
}


/* FORGOT */

.auth-page-forgot .auth-card {

    box-shadow:
        0 25px 70px rgba(208,0,232,.12),
        0 4px 20px rgba(23,48,168,.07);
}


.auth-page-forgot .btn-neon {

    background: linear-gradient(
        105deg,
        var(--magenta),
        var(--magenta-bright)
    );

    color: #ffffff;

    box-shadow:
        0 10px 28px rgba(208,0,232,.25);
}


.auth-page-forgot .btn-neon:hover {

    box-shadow:
        0 14px 35px rgba(208,0,232,.32);
}


/* RESET */

.auth-page-reset .auth-card {

    box-shadow:
        0 25px 70px rgba(23,48,168,.13),
        0 4px 20px rgba(216,242,11,.09);
}


.auth-page-reset .btn-neon {

    background: linear-gradient(
        105deg,
        var(--lime),
        var(--magenta)
    );

    color: var(--ink);
}


/* ==========================================================================
   DASHBOARD
   ========================================================================== */

.aff-sidebar {

    width: 264px;

    height: 100vh;

    position: fixed;

    left: 0;

    top: 0;

    background: var(--blue);

    border-right: none;

    z-index: 1000;

    display: flex;

    flex-direction: column;

    box-shadow:
        8px 0 30px rgba(23,48,168,.10);
}


.aff-sidebar__logo {

    padding: 24px 22px;

    border-bottom: 1px solid rgba(255,255,255,.14);
}


.aff-sidebar__logo img {

    height: 26px;

    display: block;

    background: #ffffff;

    padding: 5px 8px;

    border-radius: 8px;
}


.aff-sidebar__logo small {

    display: block;

    color: rgba(255,255,255,.65);

    font-size: 11px;

    margin-top: 8px;
}


.aff-nav {

    padding: 16px 12px;

    flex: 1;
}


.aff-nav a {

    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 11px 14px;

    margin-bottom: 4px;

    border-radius: 10px;

    text-decoration: none;

    color: rgba(255,255,255,.76);

    font-size: 14px;

    font-weight: 500;

    transition:
        background .15s,
        color .15s,
        transform .15s;
}


.aff-nav a:hover {

    background: rgba(255,255,255,.10);

    color: #ffffff;

    transform: translateX(2px);
}


.aff-nav a.active {

    background: var(--lime);

    color: var(--ink);

    box-shadow:
        0 7px 22px rgba(216,242,11,.22);
}


.aff-nav a.active::before {

    display: none;
}


.aff-nav .menu-icon {

    width: 20px;

    text-align: center;

    font-size: 15px;
}


.aff-sidebar__user {

    border-top: 1px solid rgba(255,255,255,.14);

    padding: 16px 20px;
}


.aff-sidebar__user-name {

    font-size: 14px;

    font-weight: 600;

    color: #ffffff;
}


.aff-sidebar__user-code {

    font-size: 11.5px;

    color: rgba(255,255,255,.55);

    margin-top: 2px;
}


.aff-sidebar__logout {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: 12px;

    text-decoration: none;

    color: var(--lime);

    font-size: 13px;

    font-weight: 600;
}


.aff-main {

    margin-left: 264px;

    min-height: 100vh;

    background: var(--cream);
}


.aff-topbar {

    height: 68px;

    background: rgba(255,255,255,.90);

    border-bottom: 1px solid var(--border);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 30px;

    position: sticky;

    top: 0;

    z-index: 500;

    backdrop-filter: blur(14px);
}


.aff-topbar h1 {

    font-family: var(--font-display);

    font-size: 19px;

    font-weight: 700;

    margin: 0;

    color: var(--ink);
}


.aff-topbar__user {

    font-size: 13px;

    color: var(--ink-soft);
}


.aff-content {

    padding: 30px;
}


.mobile-topbar {

    display: none;
}


@media (max-width: 991px) {

    .aff-sidebar {

        display: none;
    }

    .aff-main {

        margin-left: 0;
    }

    .aff-topbar {

        display: none;
    }

    .mobile-topbar {

        display: flex;

        height: 60px;

        background: var(--blue);

        border-bottom: none;

        align-items: center;

        justify-content: space-between;

        padding: 0 16px;
    }

    .mobile-topbar img {

        height: 22px;

        background: #ffffff;

        padding: 3px 6px;

        border-radius: 6px;
    }

    .aff-content {

        padding: 20px 16px;
    }
}


.mobile-toggle {

    background: var(--lime);

    border: none;

    color: var(--ink);

    border-radius: 8px;

    padding: 7px 11px;

    font-size: 16px;
}


/* ==========================================================================
   OFFCANVAS
   ========================================================================== */

.offcanvas {

    background: var(--blue);

    color: #ffffff;
}


.offcanvas-header {

    border-bottom: 1px solid rgba(255,255,255,.14);
}


.offcanvas .list-group-item {

    background: transparent;

    color: rgba(255,255,255,.80);

    border-color: rgba(255,255,255,.12);
}


.offcanvas .list-group-item:hover {

    background: rgba(255,255,255,.10);

    color: #ffffff;
}


/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */

.legal-shell {

    max-width: 820px;

    margin: 0 auto;

    padding: 64px 24px 96px;
}


.legal-header {

    margin-bottom: 40px;
}


.legal-header .auth-logo img {

    height: 28px;

    margin-bottom: 28px;
}


.legal-header h1 {

    font-family: var(--font-display);

    font-size: 38px;

    font-weight: 700;

    letter-spacing: -.03em;

    margin: 0 0 10px;

    color: var(--ink);
}


.legal-header .updated {

    color: var(--ink-muted);

    font-size: 13px;
}


.legal-body h2 {

    font-family: var(--font-display);

    font-size: 19px;

    font-weight: 700;

    color: var(--blue);

    margin: 34px 0 10px;
}


.legal-body p,
.legal-body li {

    color: var(--ink-soft);

    font-size: 15px;

    line-height: 1.8;
}


.legal-body ul {

    padding-left: 22px;
}


.legal-back {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: 44px;

    color: var(--blue);

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;
}


.legal-back:hover {

    color: var(--magenta);
}


.legal-topbar {

    border-bottom: 1px solid var(--border);

    padding: 18px 24px;

    background: #ffffff;
}


.legal-topbar .auth-logo img {

    height: 24px;
}


/* ==========================================================================
   RESPONSIVE AUTH
   ========================================================================== */

@media (max-width: 991px) {

    .auth-hero {

        min-height: auto;

        padding: 30px 28px 55px;
    }

    .auth-hero__body {

        padding-top: 80px;
    }

    .auth-hero h1 {

        font-size: 42px;
    }

    .auth-form-panel {

        min-height: auto;

        padding: 35px 20px 60px;
    }

    .auth-card {

        max-width: 500px;

        padding: 30px 25px;
    }
}


@media (max-width: 575px) {

    .auth-hero {

        padding: 22px 20px 42px;
    }

    .auth-logo {

        padding: 6px 9px;
    }

    .auth-logo img {

        height: 26px;
    }

    .auth-hero__body {

        padding-top: 70px;
    }

    .auth-hero h1 {

        font-size: 35px;
    }

    .auth-hero p.lead {

        font-size: 14px;
    }

    .auth-features__item {

        font-size: 13px;
    }

    .auth-form-panel {

        padding: 25px 15px 45px;
    }

    .auth-card {

        border-radius: 20px;

        padding: 26px 21px;
    }

    .auth-card h2 {

        font-size: 27px;
    }

    .orb--a {

        width: 280px;

        height: 280px;

        top: -100px;

        left: -110px;
    }

    .orb--b {

        width: 260px;

        height: 260px;

        right: -130px;

        bottom: -100px;
    }

    .orb--c {

        width: 180px;

        height: 180px;
    }
}