:root{
    --blue:#1769eb;
    --blue-dark:#0f56c9;
    --navy:#101a32;
    --text:#1b2740;
    --muted:#71809a;
    --line:#e5ebf4;
    --soft:#f7faff;
    --green:#28b77a;
    --shadow:0 28px 80px rgba(29,65,115,.13);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
    font-family:Inter,Arial,sans-serif;
    color:var(--text);
    background:#fff;
}
button,input{font:inherit}
button{appearance:none}
a{color:inherit}

.auth-page{
    min-height:100vh;
    position:relative;
    overflow-x:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:34px 24px;
    background:
        radial-gradient(circle at 7% 8%,rgba(46,111,240,.09),transparent 27%),
        radial-gradient(circle at 93% 12%,rgba(80,139,255,.14),transparent 30%),
        radial-gradient(circle at 70% 100%,rgba(89,125,255,.07),transparent 28%),
        #fff;
}

.auth-page::before,
.auth-page::after{
    content:"";
    position:fixed;
    z-index:0;
    border-radius:50%;
    pointer-events:none;
    filter:blur(2px);
}
.auth-page::before{
    width:280px;height:280px;
    left:-160px;top:28%;
    background:rgba(23,105,235,.055);
}
.auth-page::after{
    width:330px;height:330px;
    right:-190px;bottom:-120px;
    background:rgba(93,93,255,.055);
}

.auth-shell{
    width:min(1120px,100%);
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(390px,.86fr) minmax(0,1.14fr);
    min-height:680px;
    overflow:hidden;
    border:1px solid rgba(220,229,241,.95);
    border-radius:28px;
    background:rgba(255,255,255,.94);
    box-shadow:var(--shadow);
}

.auth-form-side{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:52px 58px;
    background:#fff;
}

.auth-form-inner{width:min(390px,100%)}

.brand-mark{
    display:flex;
    justify-content:center;
    margin-bottom:25px;
}
.brand-mark img{
    width:92px;
    height:92px;
    object-fit:contain;
    border-radius:25px;
    filter:drop-shadow(0 10px 20px rgba(23,105,235,.13));
}

.auth-kicker{
    margin:0 0 7px;
    color:var(--blue);
    text-align:center;
    font-size:10px;
    line-height:1;
    font-weight:900;
    letter-spacing:.13em;
    text-transform:uppercase;
}
.auth-title{
    margin:0;
    color:var(--navy);
    text-align:center;
    font-family:Outfit,Inter,Arial,sans-serif;
    font-size:37px;
    line-height:1.04;
    letter-spacing:-.035em;
    font-weight:800;
}
.auth-title span{
    background:linear-gradient(90deg,#1769eb,#4d5dff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.auth-subtitle{
    max-width:355px;
    margin:13px auto 28px;
    color:var(--muted);
    text-align:center;
    font-size:12px;
    line-height:1.6;
}

.alert{
    margin:0 0 18px;
    padding:12px 13px;
    border:1px solid #f1cccc;
    border-radius:12px;
    background:#fff5f5;
    color:#c63e48;
    font-size:11px;
    line-height:1.45;
    font-weight:700;
}
.alert.success{
    border-color:#c9ecd9;
    background:#f1fbf6;
    color:#168957;
}

.auth-form{display:grid;gap:15px}
.field{display:grid;gap:7px}
.field label{
    color:#33415b;
    font-size:11px;
    font-weight:850;
}

.input-wrap{
    height:51px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 12px;
    border:1px solid #dce5f0;
    border-radius:13px;
    background:#fbfdff;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease,transform .2s ease;
}
.input-wrap:focus-within{
    border-color:#4c87ed;
    background:#fff;
    box-shadow:0 0 0 4px rgba(23,105,235,.08);
}
.input-icon{
    width:21px;height:21px;
    flex:0 0 21px;
    display:grid;place-items:center;
    color:#60708b;
}
.input-wrap:focus-within .input-icon{color:var(--blue)}
.input-wrap input{
    width:100%;height:100%;min-width:0;
    padding:0;
    border:0;outline:0;
    background:transparent;
    color:#16243e;
    font-size:13px;
}
.input-wrap input::placeholder{color:#9aa7ba}

.toggle-pass{
    width:34px;height:34px;flex:0 0 34px;
    display:grid;place-items:center;
    border:1px solid #e0e7f0;
    border-radius:9px;
    background:#fff;
    color:#69778d;
    cursor:pointer;
    transition:.2s ease;
}
.toggle-pass:hover,.toggle-pass.is-visible{
    color:var(--blue);
    border-color:#bfd3f4;
    background:#f3f7ff;
}

.primary-btn{
    min-height:51px;
    margin-top:3px;
    border:0;
    border-radius:13px;
    background:linear-gradient(100deg,#1769eb 0%,#315ce8 54%,#6946df 100%);
    color:#fff;
    font-size:12px;
    font-weight:850;
    letter-spacing:.01em;
    cursor:pointer;
    box-shadow:0 12px 25px rgba(49,91,226,.22);
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.primary-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 15px 29px rgba(49,91,226,.27);
    filter:saturate(1.05);
}
.primary-btn:active{transform:translateY(0)}

.trust-line{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:18px;
    color:#8a97a9;
    font-size:10px;
}
.trust-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(40,183,122,.09)}
.switch-link{
    margin-top:13px;
    text-align:center;
    color:#7b889d;
    font-size:11px;
}
.switch-link a{color:var(--blue);font-weight:850;text-decoration:none}
.switch-link a:hover{text-decoration:underline}

.password-strength{
    display:grid;
    gap:6px;
    margin-top:-3px;
}
.strength-bars{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.strength-bars span{height:3px;border-radius:5px;background:#e6ebf3;transition:background .2s ease}
.password-strength[data-level="1"] .strength-bars span:nth-child(1),
.password-strength[data-level="2"] .strength-bars span:nth-child(-n+2){background:#e0a04a}
.password-strength[data-level="3"] .strength-bars span:nth-child(-n+3){background:#4f9be9}
.password-strength[data-level="4"] .strength-bars span:nth-child(-n+4),
.password-strength[data-level="5"] .strength-bars span{background:#28b77a}
.strength-text{color:#8a97a9;font-size:9px}

.auth-visual{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    padding:58px 62px;
    background:
        radial-gradient(circle at 84% 15%,rgba(56,111,235,.10),transparent 28%),
        radial-gradient(circle at 15% 90%,rgba(100,94,232,.08),transparent 31%),
        #f7faff;
    border-left:1px solid #e5ebf3;
}
.auth-visual::before{
    content:"";
    position:absolute;
    width:180px;height:180px;
    right:-70px;top:-65px;
    border-radius:50%;
    border:30px solid rgba(23,105,235,.035);
}
.auth-visual-head{position:relative;z-index:1;margin-bottom:16px}
.visual-kicker{
    color:var(--blue);
    font-size:9px;
    letter-spacing:.16em;
    font-weight:900;
    text-transform:uppercase;
}
.visual-title{
    margin-top:5px;
    color:var(--navy);
    font-family:Outfit,Inter,Arial,sans-serif;
    font-size:27px;
    line-height:1.05;
    font-weight:800;
}
.visual-copy{margin:7px 0 0;color:#75839a;font-size:11px;line-height:1.5}

.promo-slider{
    position:relative;
    z-index:1;
    width:100%;
    height:390px;
    overflow:hidden;
    border:1px solid #dce5f1;
    border-radius:22px;
    background:#fff;
    box-shadow:0 20px 50px rgba(30,65,110,.10);
}
.promo-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:opacity .4s ease;
}
.promo-slide.active{opacity:1;visibility:visible}
.promo-slide img{width:100%;height:100%;display:block;object-fit:cover}
.promo-overlay{
    position:absolute;
    inset:auto 0 0;
    padding:62px 25px 22px;
    color:#fff;
    background:linear-gradient(transparent,rgba(5,15,35,.84));
}
.promo-overlay strong{display:block;font-size:17px;font-weight:850}
.promo-overlay span{display:block;max-width:570px;margin-top:4px;font-size:10px;line-height:1.45}
.promo-arrow{
    position:absolute;
    top:50%;
    z-index:3;
    transform:translateY(-50%);
    width:37px;height:37px;
    display:grid;place-items:center;
    border:1px solid rgba(220,229,241,.95);
    border-radius:50%;
    background:rgba(255,255,255,.94);
    color:#24324a;
    font-size:23px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(0,0,0,.10);
}
.promo-arrow:hover{color:var(--blue);transform:translateY(-50%) scale(1.04)}
.promo-prev{left:14px}.promo-next{right:14px}
.promo-dots{display:flex;justify-content:center;gap:5px;margin-top:13px}
.promo-dot{width:7px;height:7px;padding:0;border:0;border-radius:9px;background:#cdd8e7;cursor:pointer;transition:.25s ease}
.promo-dot.active{width:22px;background:var(--blue)}

.visual-points{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
}
.visual-point{
    padding:7px 10px;
    border:1px solid #e0e7f1;
    border-radius:999px;
    background:rgba(255,255,255,.75);
    color:#65738a;
    font-size:9px;
    font-weight:750;
}

@media(max-width:950px){
    .auth-shell{grid-template-columns:1fr;max-width:620px;min-height:auto}
    .auth-form-side{padding:48px 44px}
    .auth-visual{border-left:0;border-top:1px solid #e5ebf3;padding:40px 44px}
    .promo-slider{height:min(58vw,370px);min-height:260px}
}

@media(max-width:560px){
    /*
       MOBILE CLEAN MODE
       The desktop decorative artwork is intentionally removed here.
       No gradients, circles, pseudo-elements or decorative layers are
       allowed behind the login controls. This prevents the visual
       interference seen around the Register link.
    */
    .auth-page,
    .auth-page::before,
    .auth-page::after,
    .auth-visual,
    .auth-visual::before{
        background:#fff !important;
        background-image:none !important;
    }

    .auth-page::before,
    .auth-page::after,
    .auth-visual::before{
        display:none !important;
        content:none !important;
        width:0 !important;
        height:0 !important;
        border:0 !important;
        box-shadow:none !important;
    }

    .auth-page{
        padding:10px;
        overflow-x:hidden;
        isolation:isolate;
    }

    .auth-shell{
        border-radius:20px;
        box-shadow:0 18px 50px rgba(29,65,115,.10);
        overflow:hidden;
    }

    .auth-form-side{
        position:relative;
        z-index:20;
        padding:32px 20px 30px;
        isolation:isolate;
    }

    .auth-form-inner{
        position:relative;
        z-index:30;
        isolation:isolate;
    }

    .brand-mark img{width:78px;height:78px;border-radius:21px}
    .auth-title{font-size:30px}
    .auth-subtitle{font-size:11px;margin-bottom:23px}

    .auth-form{gap:17px}
    .field{gap:8px}
    .field label{font-size:12px}

    .input-wrap{
        height:58px;
        min-height:58px;
        padding:0 14px;
        border-radius:15px;
    }

    .input-wrap input{
        font-size:15px;
        touch-action:manipulation;
    }

    .toggle-pass{
        width:44px;
        height:44px;
        flex-basis:44px;
        border-radius:12px;
        touch-action:manipulation;
    }

    .primary-btn{
        min-height:58px;
        width:100%;
        border-radius:15px;
        font-size:14px;
        touch-action:manipulation;
        -webkit-tap-highlight-color:transparent;
    }

    .trust-line{
        position:relative;
        z-index:3;
        margin-top:17px;
        font-size:11px;
    }

    .switch-link{
        position:relative;
        z-index:40;
        margin-top:15px;
        min-height:48px;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:4px;
        font-size:13px;
        line-height:1.4;
        touch-action:manipulation;
    }

    .switch-link a{
        position:relative;
        z-index:41;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:44px;
        padding:7px 9px;
        border-radius:9px;
        touch-action:manipulation;
        -webkit-tap-highlight-color:transparent;
    }

    .auth-visual{
        position:relative;
        z-index:1;
        pointer-events:auto;
        padding:30px 20px 34px;
    }

    .promo-slider{height:230px;min-height:0;border-radius:17px}
    .visual-title{font-size:23px}
    .promo-overlay{padding:48px 17px 16px}
    .promo-overlay strong{font-size:14px}
    .promo-overlay span{font-size:9px}

    .promo-arrow{
        width:44px;
        height:44px;
        touch-action:manipulation;
    }

    .promo-dot{
        min-width:28px;
        min-height:28px;
        padding:9px;
        background-clip:content-box;
        touch-action:manipulation;
    }
}