.auth-shell {
    align-items: center;
    background: #ffffff;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    height: 100vh;
    left: 0;
    min-height: 100vh;
    overflow: auto;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 10;
}

.auth-stage {
    background: #ffffff;
    border: 0;
    border-radius: 0;
    display: grid;
    grid-template-columns: minmax(600px, 0.98fr) minmax(610px, 1.02fr);
    min-height: 100vh;
    overflow: hidden;
    width: 100%;
}

.auth-visual {
    background: linear-gradient(145deg, #fff9fc 0%, #ffe7f4 30%, #f3eaff 62%, #ffe5f1 100%);
    color: #ffffff;
    overflow: hidden;
    position: relative;
}

.auth-visual__backdrop {
    background-image: linear-gradient(135deg, rgba(255, 239, 249, 0.96), rgba(250, 209, 236, 0.80) 47%, rgba(193, 164, 247, 0.64)), url('/themes/clientarea/yunyoo/assets_custom/img/new-background.jpg');
    background-blend-mode: screen;
    background-position: center;
    background-size: cover;
    inset: 0;
    opacity: 0.80;
    position: absolute;
}

.auth-visual__shade {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.48), rgba(255, 238, 249, 0.12) 48%, rgba(230, 124, 184, 0.20));
    inset: 0;
    position: absolute;
}

.auth-visual__brand,
.auth-visual__footer {
    align-items: center;
    color: #ffffff;
    display: inline-flex;
    font-size: 15px;
    font-weight: 700;
    gap: 10px;
    letter-spacing: 0;
    position: relative;
    text-shadow: 0 1px 8px rgba(37, 73, 157, 0.18);
    z-index: 2;
}

.auth-visual__brand { left: 42px; position: absolute; top: 38px; }

.auth-visual__mark,
.auth-panel__brand-mark {
    display: inline-flex;
    gap: 3px;
    height: 20px;
    transform: skewX(-18deg);
}

.auth-visual__mark i,
.auth-panel__brand-mark i {
    background: currentColor;
    border-radius: 2px;
    display: block;
    width: 5px;
}

.auth-visual__mark i:nth-child(1),
.auth-panel__brand-mark i:nth-child(1) { height: 10px; margin-top: 8px; }
.auth-visual__mark i:nth-child(2),
.auth-panel__brand-mark i:nth-child(2) { height: 16px; margin-top: 4px; }
.auth-visual__mark i:nth-child(3),
.auth-panel__brand-mark i:nth-child(3) { height: 20px; }

.auth-visual__composition {
    bottom: 0;
    height: min(800px, 85vh);
    left: 0;
    position: absolute;
    right: 0;
}

.auth-visual__composition::before,
.auth-visual__composition::after {
    border: 1px solid rgba(89, 113, 204, 0.20);
    content: '';
    position: absolute;
}

.auth-visual__composition::before {
    border-left: 0;
    border-bottom: 0;
    height: 350px;
    left: 8%;
    top: 155px;
    transform: rotate(-10deg);
    width: 58%;
}

.auth-visual__composition::after {
    border-right: 0;
    border-top: 0;
    bottom: 34px;
    height: 320px;
    right: 5%;
    transform: rotate(8deg);
    width: 49%;
}

.auth-visual__idea {
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(228, 232, 246, 0.95);
    border-radius: 50%;
    box-shadow: 0 14px 30px rgba(91, 85, 174, 0.14);
    display: flex;
    height: 100px;
    justify-content: center;
    left: 27%;
    position: absolute;
    top: 58px;
    width: 100px;
}

.auth-visual__idea::before {
    border: 1px dashed rgba(102, 109, 188, 0.25);
    border-radius: 50%;
    content: '';
    height: 126px;
    position: absolute;
    width: 126px;
}

.auth-visual__idea img {
    display: block;
    height: auto;
    max-height: 78px;
    max-width: 82px;
    object-fit: contain;
    width: 76%;
}

.auth-visual__signal {
    align-items: flex-end;
    display: flex;
    gap: 6px;
    left: 17%;
    position: absolute;
    top: 278px;
}

.auth-visual__signal span { background: #df72ae; display: block; opacity: 0.88; width: 6px; }
.auth-visual__signal span:nth-child(1) { height: 12px; }
.auth-visual__signal span:nth-child(2) { height: 22px; }
.auth-visual__signal span:nth-child(3) { height: 34px; }

.auth-visual__window {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.98);
    border-radius: 10px;
    box-shadow: 0 28px 55px rgba(72, 99, 183, 0.20);
    color: #192742;
    overflow: hidden;
    position: absolute;
}

.auth-visual__window--primary {
    left: 49%;
    top: 128px;
    transform: rotate(-8deg);
    width: min(455px, 56%);
}

.auth-visual__window--secondary {
    bottom: 54px;
    right: 6%;
    transform: rotate(7deg);
    width: min(370px, 52%);
}

.auth-visual__window-top {
    align-items: center;
    background: #f5f7fc;
    display: flex;
    gap: 5px;
    height: 27px;
    padding: 0 12px;
}

.auth-visual__window-top i { background: #c5d1e4; border-radius: 50%; height: 5px; width: 5px; }

.auth-visual__window-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 0.9fr 1.1fr;
    min-height: 145px;
    padding: 20px;
}

.auth-visual__window-copy { display: grid; gap: 10px; grid-template-rows: 9px 9px 1fr; }
.auth-visual__window-copy b { background: #ebcddd; display: block; }
.auth-visual__window-copy b:nth-child(2) { width: 75%; }
.auth-visual__window-copy b:nth-child(3) { background: #fae2f0; }

.auth-visual__window-bars {
    align-items: end;
    border-bottom: 1px solid #d7deeb;
    display: flex;
    gap: 7px;
    padding-bottom: 7px;
}

.auth-visual__window-bars i { background: #e878b7; display: block; flex: 1; }
.auth-visual__window-bars i:nth-child(1) { height: 25%; }
.auth-visual__window-bars i:nth-child(2) { height: 52%; }
.auth-visual__window-bars i:nth-child(3) { height: 40%; }
.auth-visual__window-bars i:nth-child(4) { height: 76%; }
.auth-visual__window-bars i:nth-child(5) { height: 56%; }
.auth-visual__window-bars i:nth-child(6) { height: 88%; }
.auth-visual__window-bars i:nth-child(7) { height: 68%; }

.auth-visual__window-chart {
    align-items: flex-end;
    display: flex;
    gap: 7px;
    height: 116px;
    padding: 20px;
}

.auth-visual__window-chart i { background: #d777b9; display: block; flex: 1; }
.auth-visual__window-chart i:nth-child(1) { height: 26%; }
.auth-visual__window-chart i:nth-child(2) { height: 48%; }
.auth-visual__window-chart i:nth-child(3) { height: 34%; }
.auth-visual__window-chart i:nth-child(4) { height: 75%; }
.auth-visual__window-chart i:nth-child(5) { height: 59%; }
.auth-visual__window-chart i:nth-child(6) { height: 88%; }

.auth-visual__device {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.96);
    border-radius: 14px;
    bottom: 24px;
    box-shadow: 0 26px 52px rgba(77, 89, 165, 0.19);
    height: 280px;
    left: 7%;
    padding: 14px;
    position: absolute;
    transform: rotate(-15deg);
    width: 205px;
}

.auth-visual__device-screen {
    background: linear-gradient(155deg, #fff4fb, #ffffff 40%, #f7eaff);
    border-radius: 8px;
    height: 100%;
    overflow: hidden;
    padding: 24px 16px;
    position: relative;
}

.auth-visual__device-screen i { background: #cbd6e7; display: block; height: 7px; margin-bottom: 9px; }
.auth-visual__device-screen i:nth-child(2) { width: 70%; }
.auth-visual__device-screen i:nth-child(3) { width: 82%; }
.auth-visual__device-screen b { background: #fae2f0; display: block; height: 82px; margin-top: 18px; }
.auth-visual__device-screen b:last-child { background: #dc70b5; bottom: 25px; height: 8px; left: 16px; position: absolute; right: 16px; }

.auth-visual__metric {
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.96);
    border-radius: 8px;
    box-shadow: 0 18px 36px rgba(64, 104, 190, 0.14);
    display: grid;
    gap: 8px;
    padding: 17px;
    position: absolute;
    right: 16%;
    top: 320px;
    transform: rotate(-5deg);
    width: 160px;
}

.auth-visual__metric i { background: #cbd5e5; display: block; height: 8px; }
.auth-visual__metric i:nth-child(2) { background: #e778b9; width: 62%; }
.auth-visual__metric i:nth-child(3) { width: 80%; }
.auth-visual__metric i:nth-child(4) { width: 42%; }

.auth-visual__footer { bottom: 36px; font-size: 13px; left: 42px; opacity: 0.9; position: absolute; }

.auth-panel {
    align-items: flex-start;
    display: flex;
    justify-content: center;
    padding: 0 56px;
    position: relative;
}

.auth-panel__inner { margin-top: clamp(190px, 28vh, 320px); max-width: 482px; width: 100%; }
.auth-panel__brand { display: none; }

.auth-panel__heading { margin: 0 0 42px; text-align: center; }

.auth-panel__heading h1 {
    color: #151820;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.45;
    margin: 0;
}

.auth-panel__heading h1 span {
    color: #df589f;
    display: inline-block;
    margin-left: 7px;
    position: relative;
}

.auth-panel__heading h1 span::after {
    background: #f2a0c8;
    bottom: -4px;
    content: '';
    height: 2px;
    left: 6%;
    position: absolute;
    transform: rotate(-3deg);
    width: 88%;
}

.auth-panel__heading p { color: #434a59; font-size: 16px; font-weight: 600; margin: 34px 0 0; }

.auth-form .form-group { margin-bottom: 28px; }
.auth-form .form-control-label { margin: 0; }

.auth-form .input-group {
    align-items: stretch;
    border: 1px solid #e6e9ef;
    border-radius: 12px;
    flex-wrap: nowrap;
    min-height: 54px;
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.auth-form .input-group:focus-within { border-color: #df72ae; box-shadow: 0 0 0 3px rgba(223, 114, 174, 0.14); }
.auth-form .input-group-prepend { margin-right: 0; }
.auth-form .input-group-text { background: transparent; border: 0; color: #758098; padding-left: 17px; }
.auth-form .input-group-text svg { height: 19px; width: 19px; }

.auth-form .form-control {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #19233a;
    font-size: 15px;
    height: 52px;
    min-width: 0;
    padding: 10px 17px 10px 10px;
}

.auth-form .form-control:focus { box-shadow: none; }
.auth-form .form-control::placeholder { color: #a8afbc; }

.auth-form .input-group-append .btn {
    background: transparent;
    border: 0;
    border-left: 1px solid #edf0f5;
    border-radius: 0 11px 11px 0;
    color: #d8539d;
    font-size: 14px;
    font-weight: 700;
    height: 52px;
    padding: 0 16px;
    white-space: nowrap;
}

.auth-form .input-group-append .btn:hover,
.auth-form .input-group-append .btn:focus { background: #fff4fa; color: #bd3f85; }

.auth-form .input-group-append {
    align-items: stretch;
    display: flex;
    flex: 0 0 auto;
    margin-left: 0;
}

.auth-form .auth-form__captcha .input-group-append img {
    border: 0 !important;
    border-left: 1px solid #edf0f5 !important;
    border-radius: 0 11px 11px 0;
    cursor: pointer;
    display: block;
    height: 52px;
    max-width: 40vw;
    object-fit: cover;
    width: 120px !important;
}

.auth-form__captcha { margin: -6px 0 24px; }
.auth-form__captcha .form-group { margin-bottom: 0; }
.auth-form__captcha .input-group-append .btn { border-radius: 0 11px 11px 0; }

.auth-form__links { display: flex; font-size: 14px; justify-content: space-between; margin: 28px 0 36px; }
.auth-form__links a,
.auth-panel__register a { color: #d8539d; font-weight: 700; text-decoration: none; }
.auth-form__links a:hover,
.auth-panel__register a:hover { color: #af377c; text-decoration: none; }

.auth-form__submit {
    align-items: center;
    background: #df589f;
    border: 1px solid #df589f;
    border-radius: 999px;
    color: #ffffff;
    display: flex;
    font-size: 16px;
    font-weight: 700;
    height: 54px;
    justify-content: center;
    letter-spacing: 0;
    transition: background-color 160ms ease, transform 160ms ease;
    width: 100%;
}

.auth-form__submit:hover,
.auth-form__submit:focus { background: #c8478b; border-color: #c8478b; color: #ffffff; }
.auth-form__submit:active { transform: translateY(1px); }
.auth-form__submit.is-loading::before { animation: auth-spin 700ms linear infinite; border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 50%; border-top-color: #ffffff; content: ''; height: 16px; margin-right: 8px; width: 16px; }

.auth-panel__register { color: #7f8796; font-size: 14px; margin-top: 26px; text-align: center; }

.auth-panel--register .auth-panel__inner,
.auth-panel--reset .auth-panel__inner { margin-top: clamp(52px, 9vh, 104px); }

.auth-panel--register .auth-panel__heading,
.auth-panel--reset .auth-panel__heading { margin-bottom: 28px; }

.auth-panel--register .auth-panel__heading p,
.auth-panel--reset .auth-panel__heading p { margin-top: 20px; }

.auth-form--compact .form-group { margin-bottom: 17px; }
.auth-form--compact .auth-form__captcha { margin: -2px 0 17px; }
.auth-form--compact .auth-form__links { margin: 18px 0 22px; }

.auth-form__terms {
    color: #737c8c;
    font-size: 13px;
    line-height: 1.65;
    margin: 4px 0 0;
}

.auth-form__terms .custom-control-label::before { border-color: #d9deea; border-radius: 4px; }
.auth-form__terms .custom-control-input:checked ~ .custom-control-label::before { background-color: #df589f; border-color: #df589f; }
.auth-form__terms a { color: #d8539d; font-weight: 600; }

@keyframes auth-spin { to { transform: rotate(360deg); } }

@media (max-width: 1220px) {
    .auth-stage { grid-template-columns: minmax(500px, 0.94fr) minmax(500px, 1.06fr); width: 100%; }
    .auth-visual__window--primary { left: 44%; }
    .auth-panel { padding: 0 42px; }
}

@media (max-width: 900px) {
    .auth-shell {
        background-color: #fff3fa;
        background-image: linear-gradient(145deg, rgba(255, 248, 252, 0.92), rgba(255, 223, 242, 0.80) 44%, rgba(235, 214, 255, 0.86)), url('/themes/clientarea/yunyoo/assets_custom/img/new-background.jpg');
        background-blend-mode: screen;
        background-position: center;
        background-size: cover;
        padding: 0;
    }
    .auth-stage { background: transparent; border: 0; border-radius: 0; display: block; min-height: 100vh; width: 100%; }
    .auth-visual { display: none; }
    .auth-panel { background: transparent; min-height: 100vh; padding: 32px 22px; }
    .auth-panel__inner {
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(255, 255, 255, 0.92);
        border-radius: 18px;
        box-shadow: 0 18px 46px rgba(187, 93, 150, 0.16);
        margin: 24px 0;
        padding: 46px 30px;
    }
    .auth-panel--register .auth-panel__inner,
    .auth-panel--reset .auth-panel__inner { margin: 24px 0; }
}

@media (max-width: 420px) {
    .auth-panel { padding: 22px 14px; }
    .auth-panel__inner { border-radius: 14px; margin: 14px 0; padding: 38px 22px; }
    .auth-panel--register .auth-panel__inner,
    .auth-panel--reset .auth-panel__inner { margin: 14px 0; padding: 34px 20px; }
    .auth-panel__heading h1 { font-size: 24px; }
    .auth-panel__heading p { margin-top: 26px; }
    .auth-form .form-group { margin-bottom: 22px; }
}