.auth-wrap{
    padding:40px 0 60px;
}

.auth-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:28px;
    align-items:stretch;
}

.auth-panel{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    padding:28px;
    box-shadow:var(--shadow);
}

.panel-image{
    margin-bottom:16px;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 16px 30px rgba(17,24,39,0.12);
}

.panel-image img{
    width:100%;
    height:200px;
    object-fit:cover;
    display:block;
}

.auth-panel h1{
    font-size:clamp(2rem, 3.8vw, 3rem);
    line-height:1.1;
    margin-bottom:12px;
}

.auth-panel p{
    color:var(--muted);
    line-height:1.7;
    margin-bottom:18px;
}

.chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.chip{
    padding:8px 14px;
    border-radius:999px;
    background:#fff;
    border:1px solid rgba(99,91,255,0.1);
    font-weight:700;
    font-size:0.85rem;
    color:var(--primary-dark);
}

.form-card{
    background:#fff;
    border-radius:var(--radius-xl);
    padding:30px;
    box-shadow:var(--shadow-lg);
    border:1px solid rgba(15, 23, 42, 0.06);
}

.form-card h2{
    font-size:1.6rem;
    margin-bottom:6px;
}

.form-card span{
    color:var(--muted);
    font-size:0.95rem;
}

.form-field{
    margin-top:16px;
    display:grid;
    gap:8px;
}

.form-field label{
    font-weight:800;
    font-size:0.9rem;
}

.form-field input,
.form-field select{
    border-radius:14px;
    border:1px solid rgba(99,91,255,0.18);
    padding:12px 14px;
    font-size:0.95rem;
    outline:none;
    background:#fff;
}

.form-field input:focus,
.form-field select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(99,91,255,0.12);
}

.form-actions{
    margin-top:20px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.checkbox-group{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px 16px;
}

.checkbox-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:12px;
    background:#f7f9ff;
    border:1px solid rgba(99,91,255,0.12);
    font-weight:700;
    color:#334155;
}

.checkbox-item input{
    width:16px;
    height:16px;
    accent-color:var(--primary);
}

.form-meta{
    margin-top:14px;
    color:var(--muted);
    font-size:0.9rem;
    text-align:center;
}

.form-error{
    margin-top:12px;
    padding:10px 14px;
    border-radius:8px;
    background:rgba(220,53,69,0.1);
    color:#c0392b;
    font-size:0.9rem;
}

@media (max-width:900px){
    .auth-wrap{ padding:30px 0 40px; }
}

/* Login V2 */
.login-page {
    --login-blue: #3d63ad;
    --login-sky: #66b7e4;
    --login-pink: #f42f91;
    --login-yellow: #f4ff3e;
    --login-purple: #4c4cab;
    --login-ink: #242223;
    --login-muted: #747b87;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--login-ink);
    background: #f4f8fc;
}

.login-page,
.login-page * {
    font-family: "Poppins", sans-serif;
}

.login-page * {
    box-sizing: border-box;
}

.login-page a {
    color: inherit;
    text-decoration: none;
}

.login-container {
    width: min(1080px, calc(100% - 48px));
    margin: 0 auto;
}

.login-nav {
    position: relative;
    z-index: 20;
    min-height: 88px;
    background: #fff;
}

.login-nav-content {
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 42px;
}

.login-brand {
    width: 121px;
    flex: 0 0 121px;
    margin-right: auto;
}

.login-brand img {
    width: 100%;
    height: auto;
    display: block;
}

.login-nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
}

.login-nav-links a {
    color: #596984;
    font-size: 14px;
    transition: color .2s ease;
}

.login-nav-links a:hover {
    color: var(--login-pink);
}

.login-nav-cta {
    padding: 7px 21px;
    color: #fff !important;
    border-radius: 999px;
    background: var(--login-blue);
    box-shadow: 0 6px 16px rgb(61 99 173 / 20%);
    font-size: 13px;
    font-weight: 500;
    transition: transform .2s ease, box-shadow .2s ease;
}

.login-nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 20px rgb(61 99 173 / 28%);
}

.login-main {
    position: relative;
    flex: 1;
    padding: 54px 0 58px;
    isolation: isolate;
}

.login-main::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: 0;
    right: 0;
    width: 48%;
    height: 100%;
    background: linear-gradient(180deg, rgb(255 255 255 / 70%), transparent);
}

.login-orb {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(1px);
    pointer-events: none;
}

.orb-top {
    top: -210px;
    right: -110px;
    width: 480px;
    height: 480px;
    border: 90px solid rgb(102 183 228 / 10%);
}

.orb-bottom {
    bottom: -280px;
    left: -220px;
    width: 520px;
    height: 520px;
    border: 100px solid rgb(61 99 173 / 7%);
}

.login-shell {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    min-height: 620px;
    border-radius: 38px;
    background: #fff;
    box-shadow: 0 30px 80px rgb(35 62 104 / 16%);
}

.login-showcase {
    position: relative;
    overflow: hidden;
    padding: 60px 56px 46px;
    color: #fff;
    border-radius: 38px 0 0 38px;
    background: linear-gradient(135deg, var(--login-sky), var(--login-blue));
}

.login-showcase::before {
    content: "";
    position: absolute;
    top: -90px;
    left: -100px;
    width: 390px;
    height: 270px;
    border-radius: 50%;
    background: rgb(255 255 255 / 9%);
    transform: rotate(-18deg);
}

.showcase-ring {
    position: absolute;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 50%;
}

.ring-one {
    right: -175px;
    bottom: -175px;
    width: 430px;
    height: 430px;
}

.ring-two {
    right: -110px;
    bottom: -110px;
    width: 300px;
    height: 300px;
}

.showcase-content {
    position: relative;
    z-index: 2;
}

.showcase-label,
.login-card-label {
    display: inline-block;
    color: var(--login-pink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
}

.showcase-label {
    color: #fff;
    opacity: .86;
}

.login-showcase h1 {
    margin: 18px 0 17px;
    color: var(--login-yellow);
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.16;
}

.login-showcase > .showcase-content > p {
    max-width: 440px;
    margin: 0;
    color: rgb(255 255 255 / 88%);
    font-size: 13px;
    line-height: 1.7;
}

.learning-preview {
    width: min(100%, 440px);
    margin-top: 35px;
    padding: 19px;
    color: #526078;
    border: 1px solid rgb(255 255 255 / 72%);
    border-radius: 18px;
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 18px 35px rgb(32 64 112 / 22%);
    transform: rotate(-1deg);
}

.preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.preview-header div {
    display: grid;
    gap: 4px;
}

.preview-header span {
    color: var(--login-pink);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .06em;
}

.preview-header strong {
    color: #263f76;
    font-size: 14px;
    font-weight: 600;
}

.preview-header > b {
    padding: 4px 9px;
    color: #fff;
    border-radius: 999px;
    background: var(--login-blue);
    font-size: 8px;
    font-weight: 500;
}

.preview-progress {
    height: 5px;
    margin: 14px 0 16px;
    overflow: hidden;
    border-radius: 99px;
    background: #e7edf4;
}

.preview-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--login-sky), var(--login-blue));
}

.preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.preview-card {
    min-height: 77px;
    padding: 11px;
    display: grid;
    grid-template-columns: 31px 1fr;
    align-items: center;
    column-gap: 9px;
    border: 1px solid #e6edf4;
    border-radius: 11px;
    background: #fff;
}

.preview-icon {
    width: 31px;
    height: 31px;
    grid-row: span 2;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8f6fd;
}

.preview-icon svg {
    width: 17px;
    fill: none;
    stroke: #4384c8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.practice-icon {
    background: #fff0f7;
}

.practice-icon svg {
    stroke: var(--login-pink);
}

.preview-card span {
    align-self: end;
    color: #8d94a0;
    font-size: 8px;
}

.preview-card strong {
    align-self: start;
    color: #344a76;
    font-size: 10px;
    font-weight: 600;
}

.preview-footer {
    margin-top: 13px;
    padding-top: 13px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #e7edf4;
    color: #8d94a0;
    font-size: 8px;
}

.preview-footer b {
    color: var(--login-purple);
    font-size: 10px;
}

.showcase-benefits {
    margin-top: 27px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.showcase-benefits span {
    padding: 6px 9px;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 999px;
    background: rgb(255 255 255 / 10%);
    font-size: 8px;
}

.login-card {
    padding: 62px 57px 43px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 0 38px 38px 0;
    background: #fff;
}

.login-card-heading h2 {
    margin: 10px 0 8px;
    color: #263f76;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.025em;
}

.login-card-heading p {
    margin: 0;
    color: var(--login-muted);
    font-size: 12px;
    line-height: 1.6;
}

.login-error {
    margin-top: 19px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #ba286c;
    border: 1px solid #f4bfd9;
    border-radius: 10px;
    background: #fff1f8;
    font-size: 11px;
}

.login-error svg {
    width: 17px;
    flex: 0 0 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.login-form {
    margin-top: 23px;
}

.login-field + .login-field {
    margin-top: 18px;
}

.login-field label {
    display: block;
    margin-bottom: 7px;
    color: #3d4e6d;
    font-size: 11px;
    font-weight: 600;
}

.field-label-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.field-label-row a {
    color: var(--login-purple);
    font-size: 9px;
}

.field-label-row a:hover {
    color: var(--login-pink);
}

.input-wrap {
    position: relative;
}

.input-wrap svg {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 17px;
    fill: none;
    stroke: #8090a8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    transform: translateY(-50%);
    pointer-events: none;
}

.input-wrap input {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px 12px 43px;
    color: #263f76;
    border: 1px solid #d7e0eb;
    border-radius: 11px;
    outline: none;
    background: #fafdff;
    font-size: 12px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.input-wrap input::placeholder {
    color: #a5adb8;
}

.input-wrap input:focus {
    border-color: #68a8d9;
    background: #fff;
    box-shadow: 0 0 0 4px rgb(102 183 228 / 16%);
}

.input-wrap:focus-within svg {
    stroke: var(--login-blue);
}

.login-submit,
.login-secondary {
    width: 100%;
    min-height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 600;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.login-submit {
    margin-top: 25px;
    gap: 9px;
    color: #fff;
    border: 0;
    background: var(--login-pink);
    box-shadow: 0 10px 23px rgb(244 47 145 / 25%);
    cursor: pointer;
}

.login-submit span {
    font-size: 16px;
    transition: transform .2s ease;
}

.login-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgb(244 47 145 / 32%);
}

.login-submit:hover span {
    transform: translateX(3px);
}

.login-divider {
    position: relative;
    margin: 24px 0 16px;
    color: #969da7;
    text-align: center;
    font-size: 9px;
}

.login-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
    background: #e6ebf1;
}

.login-divider span {
    position: relative;
    padding: 0 12px;
    background: #fff;
}

.login-secondary {
    color: var(--login-purple) !important;
    border: 1px solid #aeb7c4;
    background: #fff;
}

.login-secondary:hover {
    border-color: var(--login-purple);
    transform: translateY(-2px);
}

.login-help {
    margin-top: 22px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: #f4f8fc;
}

.login-help > span {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: var(--login-sky);
    font-size: 11px;
    font-weight: 600;
}

.login-help p {
    margin: 0;
    color: #7a8493;
    font-size: 9px;
    line-height: 1.5;
}

.login-help strong {
    color: #4b5e7c;
    font-weight: 600;
}

.login-footer {
    min-height: 64px;
    background: #fff;
}

.login-footer .login-container {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #788290;
    font-size: 13px;
}

.login-footer p {
    margin: 0;
}

.login-footer a {
    color: var(--login-purple);
}

@media (max-width: 900px) {
    .login-nav-links {
        display: none;
    }

    .login-shell {
        grid-template-columns: .95fr 1.05fr;
    }

    .login-showcase {
        padding: 48px 34px 38px;
    }

    .login-card {
        padding: 48px 34px 38px;
    }

    .preview-grid {
        grid-template-columns: 1fr;
    }

    .preview-card {
        min-height: 62px;
    }
}

@media (max-width: 680px) {
    .login-container {
        width: min(calc(100% - 28px), 1080px);
    }

    .login-nav,
    .login-nav-content {
        min-height: 74px;
    }

    .login-brand {
        width: 108px;
        flex-basis: 108px;
    }

    .login-main {
        padding: 28px 0 34px;
    }

    .login-shell {
        display: flex;
        min-height: 0;
        flex-direction: column;
        border-radius: 27px;
    }

    .login-card {
        order: 1;
        padding: 38px 25px 32px;
        border-radius: 27px 27px 0 0;
    }

    .login-showcase {
        order: 2;
        padding: 38px 25px;
        border-radius: 0 0 27px 27px;
    }

    .login-showcase h1 {
        font-size: 29px;
    }

    .learning-preview {
        margin-top: 28px;
    }

    .preview-grid {
        grid-template-columns: 1fr 1fr;
    }

    .login-footer .login-container {
        padding: 20px 0;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 390px) {
    .login-nav-cta {
        padding: 7px 14px;
    }

    .preview-grid {
        grid-template-columns: 1fr;
    }
}

/* Signup V2 */
.signup-nav-login {
    min-height: 29px;
    padding: 5px 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--login-purple) !important;
    border: 1px solid #aab2be;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    transition: transform .2s ease, border-color .2s ease;
}

.signup-nav-login:hover {
    border-color: var(--login-purple);
    transform: translateY(-2px);
}

.signup-shell {
    grid-template-columns: .92fr 1.08fr;
}

.signup-showcase {
    padding-top: 54px;
}

.signup-showcase h1 {
    margin-bottom: 18px;
}

.pilot-preview {
    width: min(100%, 420px);
    margin-top: 31px;
    padding: 19px;
    color: #526078;
    border: 1px solid rgb(255 255 255 / 72%);
    border-radius: 18px;
    background: rgb(255 255 255 / 95%);
    box-shadow: 0 18px 35px rgb(32 64 112 / 22%);
    transform: rotate(-1deg);
}

.pilot-preview-heading {
    padding-bottom: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #e7edf4;
}

.pilot-preview-heading > div {
    display: grid;
    gap: 4px;
}

.pilot-preview-heading span {
    color: var(--login-pink);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .06em;
}

.pilot-preview-heading strong {
    color: #263f76;
    font-size: 14px;
    font-weight: 600;
}

.pilot-preview-heading > b {
    padding: 5px 9px;
    color: #fff;
    border-radius: 999px;
    background: var(--login-blue);
    font-size: 9px;
    font-weight: 500;
    white-space: nowrap;
}

.pilot-steps {
    margin-top: 13px;
    display: grid;
    gap: 8px;
}

.pilot-step {
    min-height: 54px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e6edf4;
    border-radius: 10px;
    background: #fff;
}

.pilot-step i {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--login-sky), var(--login-blue));
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
}

.pilot-step > div {
    display: grid;
    gap: 2px;
}

.pilot-step strong {
    color: #344a76;
    font-size: 10px;
    font-weight: 600;
}

.pilot-step span {
    color: #9299a3;
    font-size: 8px;
}

.signup-card {
    padding: 46px 47px 38px;
    justify-content: flex-start;
}

.signup-form {
    margin-top: 22px;
}

.signup-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 13px;
}

.signup-fields .login-field {
    margin: 0;
}

.signup-span-2 {
    grid-column: 1 / -1;
}

.signup-page .login-field label,
.signup-interests legend {
    margin-bottom: 7px;
    color: #3d4e6d;
    font-size: 12px;
    font-weight: 600;
}

.signup-page .login-field input,
.signup-page .login-field select {
    width: 100%;
    min-height: 45px;
    padding: 10px 12px;
    color: #263f76;
    border: 1px solid #d7e0eb;
    border-radius: 10px;
    outline: none;
    background: #fafdff;
    font-size: 13px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.signup-page .login-field input::placeholder {
    color: #a5adb8;
}

.signup-page .login-field input:focus,
.signup-page .login-field select:focus {
    border-color: #68a8d9;
    background: #fff;
    box-shadow: 0 0 0 4px rgb(102 183 228 / 16%);
}

.signup-interests {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.signup-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.signup-checkbox {
    min-height: 42px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #526078;
    border: 1px solid #dce5ef;
    border-radius: 10px;
    background: #f4f8fc;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}

.signup-checkbox:has(input:checked) {
    color: var(--login-purple);
    border-color: #8da9d7;
    background: #edf4ff;
}

.signup-checkbox input {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    accent-color: var(--login-pink);
}

.signup-card .login-submit {
    margin-top: 20px;
}

.signup-card .login-divider {
    margin-top: 21px;
}

.signup-privacy {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #7d8795;
    font-size: 9px;
}

.signup-privacy > span {
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: var(--login-sky);
    font-size: 9px;
}

.signup-privacy p {
    margin: 0;
}

@media (max-width: 900px) {
    .signup-shell {
        grid-template-columns: .85fr 1.15fr;
    }

    .signup-showcase {
        padding: 43px 29px 35px;
    }

    .signup-card {
        padding: 42px 29px 34px;
    }

    .signup-fields {
        grid-template-columns: 1fr;
    }

    .signup-span-2 {
        grid-column: auto;
    }
}

@media (max-width: 680px) {
    .signup-shell {
        display: flex;
        flex-direction: column;
    }

    .signup-card {
        order: 1;
        padding: 38px 25px 32px;
    }

    .signup-showcase {
        order: 2;
        padding: 38px 25px;
    }

    .signup-checkbox-grid {
        grid-template-columns: 1fr;
    }
}