/* ============================================================
   CLASSMIRROR LOGIN AI V4 — visual match
   ============================================================ */

.login-section{
    min-height:calc(100vh - 104px)!important;
    padding:14px 20px 40px!important;
    background:
        radial-gradient(circle at 1% 36%,rgba(91,124,255,.11),transparent 27%),
        radial-gradient(circle at 99% 78%,rgba(57,188,255,.12),transparent 30%),
        linear-gradient(180deg,#fbfcff 0%,#f6f8ff 100%)!important;
}

.login-container{
    width:min(1530px,calc(100vw - 38px))!important;
    margin:0 auto!important;
}

.login-layout{
    display:grid!important;
    grid-template-columns:minmax(520px,.88fr) minmax(760px,1.22fr)!important;
    gap:14px!important;
    min-height:760px!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
}

.login-form-panel{
    position:relative!important;
    box-sizing:border-box!important;
    padding:40px 62px 30px!important;
    background:linear-gradient(180deg,#fff,#fdfdff)!important;
    border:1px solid rgba(63,76,150,.09)!important;
    border-radius:28px!important;
    box-shadow:0 22px 60px rgba(51,66,140,.10)!important;
    overflow:hidden!important;
}

.login-form-panel::before{
    content:"";
    position:absolute;
    left:64px;right:64px;top:0;height:2px;
    background:linear-gradient(90deg,transparent,#674af4,#4a93ff,transparent);
    opacity:.48;
}

.login-heading{margin-bottom:25px!important}

.login-heading .badge{
    display:inline-flex!important;align-items:center!important;
    padding:8px 15px!important;
    color:#4f5b7a!important;
    background:#f2f5fc!important;
    border:1px solid #e7ebf6!important;
    border-radius:999px!important;
    font-size:14px!important;font-weight:700!important;
}

.login-heading h1{
    margin:17px 0 8px!important;
    color:#10245f!important;
    font-size:clamp(38px,3.1vw,48px)!important;
    line-height:1.04!important;
    letter-spacing:-.038em!important;
    font-weight:900!important;
}

.login-heading p{
    margin:0!important;
    max-width:570px!important;
    color:#697594!important;
    font-size:16px!important;
    line-height:1.55!important;
}

.login-form{gap:17px!important}
.login-field{gap:8px!important}

.login-field label{
    color:#14265c!important;font-size:14px!important;font-weight:850!important;
}

.cm-v4-password-row,.cm-v3-password-label-row{
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;
}

.cm-v4-password-row a,.cm-v3-password-label-row a{
    color:#6548ef!important;font-size:13px!important;font-weight:800!important;text-decoration:none!important;
}

.login-input{
    width:100%!important;box-sizing:border-box!important;
    min-height:58px!important;
    padding:0 50px 0 52px!important;
    color:#27355f!important;font-size:15px!important;
    background-color:#f8faff!important;
    border:1px solid #dce3f2!important;border-radius:14px!important;
    outline:none!important;
}

#email{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23344f91' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;background-position:18px center!important;
}

.password-wrapper{position:relative!important}

.password-wrapper::before{
    content:"";position:absolute;left:18px;top:50%;z-index:2;
    width:21px;height:21px;transform:translateY(-50%);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23344f91' stroke-width='1.8'%3E%3Crect x='5' y='10' width='14' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;
}

.login-input:focus{
    background-color:#fff!important;border-color:#6450ef!important;
    box-shadow:0 0 0 4px rgba(100,80,239,.09)!important;
}

.password-toggle{
    position:absolute!important;right:12px!important;top:50%!important;
    width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;
    padding:0!important;font-size:0!important;background:transparent!important;border:0!important;
    border-radius:50%!important;transform:translateY(-50%)!important;
}

.password-toggle::after{
    content:"";display:block;width:24px;height:24px;margin:7px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c478e' stroke-width='1.8'%3E%3Cpath d='M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.login-field-status.success{color:#15814c!important;font-size:11px!important;font-weight:800!important}

.login-remember{
    display:grid!important;grid-template-columns:22px 1fr!important;gap:10px!important;align-items:center!important;
    margin:0!important;padding:10px 0!important;color:#26365e!important;background:transparent!important;border:0!important;
    font-size:13px!important;
}

.login-remember input{width:21px!important;height:21px!important;accent-color:#6548ef!important}

.login-security-note{
    margin-top:1px!important;padding:11px 14px!important;
    color:#66718c!important;font-size:11px!important;line-height:1.45!important;
    background:#f5f7fb!important;border:1px solid #eef1f7!important;border-radius:11px!important;
}

.login-help-links{display:none!important}

.login-submit{
    min-height:57px!important;margin-top:2px!important;
    color:#fff!important;font-size:15px!important;font-weight:900!important;
    border:0!important;border-radius:15px!important;
    background:linear-gradient(105deg,#5135df 0%,#754df4 52%,#5f77ff 100%)!important;
    box-shadow:0 13px 28px rgba(91,66,225,.25)!important;
}

.login-submit::after{content:"→";float:right;margin-right:12px;font-size:25px;font-weight:400}

.login-register{
    margin:21px 0 0!important;padding:17px 0 0!important;
    color:#69748e!important;font-size:14px!important;border-top:1px solid #eceff6!important;
}

.login-register a{color:#563cdd!important;font-weight:900!important}

.login-side{
    position:relative!important;order:initial!important;min-width:0!important;
    padding:0!important;overflow:hidden!important;color:#fff!important;
    border-radius:28px!important;
    border:1px solid rgba(255,255,255,.27)!important;
    background:
        radial-gradient(circle at 92% -8%,rgba(82,213,255,.47),transparent 31%),
        radial-gradient(circle at 72% 76%,rgba(154,112,255,.25),transparent 38%),
        linear-gradient(138deg,#102db7 0%,#293ed6 34%,#5147e6 64%,#3f8ff7 100%)!important;
    box-shadow:0 25px 68px rgba(36,49,149,.20)!important;
}

.login-side::before{
    content:"";position:absolute;width:690px;height:690px;right:-305px;top:-410px;border-radius:50%;
    border:1px solid rgba(255,255,255,.11);
    box-shadow:0 0 0 95px rgba(255,255,255,.026),0 0 0 190px rgba(255,255,255,.018);
}

.login-side::after{
    content:"";position:absolute;width:620px;height:620px;left:-390px;bottom:-470px;border-radius:50%;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 0 0 95px rgba(255,255,255,.022),0 0 0 190px rgba(255,255,255,.015);
}

.cm4-premium{
    position:relative;z-index:2;box-sizing:border-box;
    display:grid;grid-template-columns:minmax(390px,1fr) 330px;gap:24px;
    min-height:760px;padding:45px 34px 26px 50px;
}

.cm4-copy{position:relative;z-index:4;min-width:0}

.cm4-kicker{
    margin-bottom:20px;color:rgba(255,255,255,.76);
    font-size:11px;font-weight:900;letter-spacing:.31em;
}

.cm4-title{
    margin:0;color:#fff;font-size:clamp(42px,3.45vw,59px);line-height:.98;
    letter-spacing:-.045em;font-weight:950;
}

.cm4-title span{
    display:block;margin-top:5px;
    background:linear-gradient(90deg,#fff 0%,#f0a6ff 48%,#75deff 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}

.cm4-description{
    max-width:565px;margin:21px 0 18px;color:rgba(255,255,255,.89);
    font-size:14px;line-height:1.55;
}

.cm4-benefits{display:grid;gap:2px;margin:0;padding:0;list-style:none}

.cm4-benefit{
    display:grid;grid-template-columns:46px 1fr;gap:13px;align-items:center;
    padding:8px;border-radius:14px;
}

.cm4-icon{
    display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
    font-size:20px;background:linear-gradient(145deg,#6b59f7,#4275f4);
    border:1px solid rgba(255,255,255,.25);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 9px 20px rgba(9,15,104,.19);
}

.cm4-benefit strong{display:block;margin-bottom:2px;color:#fff;font-size:14px;font-weight:900}

.cm4-benefit small{display:block;max-width:285px;color:rgba(255,255,255,.74);font-size:11px;line-height:1.32}

.cm4-personas{
    position:relative;display:flex;flex-direction:column;justify-content:center;gap:17px;padding-top:55px;
}

.cm4-hand{
    position:absolute;right:3px;top:2px;width:182px;color:#fff;text-align:center;
    font-family:"Comic Sans MS",cursive;font-size:17px;font-style:italic;line-height:1.15;transform:rotate(-5deg);
}

.cm4-star{
    position:absolute;left:-17px;top:64px;color:#fff0a2;font-size:38px;
    text-shadow:0 0 28px rgba(255,245,165,.92);
}

.cm4-persona{
    position:relative;display:grid;grid-template-columns:78px 1fr 34px;gap:12px;align-items:center;
    min-height:106px;padding:11px 14px;
    background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(239,244,255,.95));
    border:1px solid rgba(255,255,255,.90);border-radius:22px;color:#15235b;
    box-shadow:0 20px 40px rgba(5,13,91,.25);
}

.cm4-persona.lina-card{transform:translateX(0) rotate(2deg)}
.cm4-persona.jad-card{transform:translateX(-18px) rotate(2.8deg)}
.cm4-persona.maya-card{transform:translateX(-39px) rotate(3.7deg)}

.cm4-photo{
    width:78px;height:78px;object-fit:cover;border-radius:20px;display:block;
    box-shadow:0 8px 18px rgba(38,41,127,.18);
}

.cm4-persona strong{display:block;margin-bottom:4px;color:#17235c;font-size:16px;font-weight:900}

.cm4-persona span{display:block;color:#687398;font-size:11.5px;line-height:1.33}

.cm4-persona-badge{
    display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
    font-size:17px;background:#f2f0ff;
}

.cm4-book-wrap{
    position:absolute;right:18px;bottom:7px;width:410px;z-index:3;pointer-events:none;
}

.cm4-book{
    display:block;width:100%;border-radius:18px;
    filter:drop-shadow(0 20px 18px rgba(6,15,103,.26));
}

.cm4-note{
    position:absolute;right:7px;bottom:106px;width:140px;color:#fff;
    font-family:"Comic Sans MS",cursive;font-size:15px;line-height:1.15;text-align:center;transform:rotate(-5deg);
}

.login-side-footer{display:none!important}

@media(max-width:1280px){
    .login-layout{grid-template-columns:minmax(440px,.92fr) minmax(600px,1.08fr)!important}
    .cm4-premium{grid-template-columns:minmax(345px,1fr) 265px;padding:41px 28px 25px 37px}
    .cm4-persona{grid-template-columns:62px 1fr;min-height:90px}
    .cm4-photo{width:62px;height:62px}
    .cm4-persona-badge{display:none}
    .cm4-book-wrap{width:315px}
}

@media(max-width:980px){
    .login-section{padding:18px 14px 38px!important}
    .login-container{width:min(700px,100%)!important}
    .login-layout{grid-template-columns:1fr!important;min-height:auto!important}
    .login-form-panel{padding:38px 30px!important}
    .cm4-premium{grid-template-columns:1fr;min-height:auto;padding:40px 31px 32px}
    .cm4-personas{padding-top:18px}
    .cm4-persona,.cm4-persona.lina-card,.cm4-persona.jad-card,.cm4-persona.maya-card{transform:none}
    .cm4-hand,.cm4-star,.cm4-book-wrap,.cm4-note{display:none}
}

@media(max-width:560px){
    .login-container{width:100%!important}
    .login-form-panel,.login-side{border-radius:21px!important}
    .login-form-panel{padding:29px 21px!important}
    .login-heading h1{font-size:34px!important}
    .cm4-premium{padding:33px 22px 28px}
    .cm4-title{font-size:38px}
}