/* AleVi CRM login — isolated from the application workspace. */
.login-page{
    --login-ink:#2a1f2f;
    --login-muted:#756a79;
    --login-line:#e2dbe5;
    --login-accent:#b66fd9;
    --login-accent-dark:#874da5;
    --login-panel:#fbf9fc;
    min-height:100vh;
    margin:0;
    display:grid;
    place-items:center;
    overflow:hidden;
    padding:28px;
    background:#f3eff5;
    color:var(--login-ink);
    position:relative;
}
.login-page::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(rgba(73,52,83,.028) 1px,transparent 1px),
        linear-gradient(90deg,rgba(73,52,83,.028) 1px,transparent 1px);
    background-size:36px 36px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 90%);
}
.login-ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.login-ambient-orb{position:absolute;border-radius:999px;filter:blur(3px);opacity:.72}
.login-ambient-orb--one{width:420px;height:420px;left:-160px;top:-170px;background:radial-gradient(circle,rgba(199,144,231,.30),rgba(199,144,231,0) 68%);animation:loginAmbientOne 14s ease-in-out infinite alternate}
.login-ambient-orb--two{width:480px;height:480px;right:-190px;bottom:-220px;background:radial-gradient(circle,rgba(144,184,231,.18),rgba(144,184,231,0) 69%);animation:loginAmbientTwo 17s ease-in-out infinite alternate}

.login-shell{
    width:min(960px,100%);
    min-height:560px;
    display:grid;
    grid-template-columns:minmax(350px,42%) minmax(0,1fr);
    position:relative;
    z-index:2;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(112,88,122,.17);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 28px 80px rgba(44,31,50,.14),0 2px 8px rgba(44,31,50,.05);
    animation:loginShellIn .62s cubic-bezier(.2,.72,.22,1) both;
}

.login-identity{
    position:relative;
    min-height:560px;
    overflow:hidden;
    display:grid;
    place-items:center;
    isolation:isolate;
    background:
        radial-gradient(circle at 50% 44%,rgba(255,255,255,.88) 0 13%,rgba(255,255,255,.26) 34%,transparent 62%),
        linear-gradient(145deg,#eee1f5 0%,#f6eff8 44%,#ece6f1 100%);
    border-right:1px solid rgba(104,78,115,.13);
    --mx:0px;
    --my:0px;
}
.login-stage{position:absolute;inset:0;transform:translate3d(var(--mx),var(--my),0);transition:transform .25s ease-out}
.login-stage-grid{
    position:absolute;
    inset:28px;
    opacity:.42;
    background-image:radial-gradient(circle at center,rgba(110,75,126,.28) 0 1px,transparent 1.2px);
    background-size:22px 22px;
    mask-image:radial-gradient(circle at 50% 48%,#000 0 24%,rgba(0,0,0,.6) 48%,transparent 74%);
}
.login-orbit{position:absolute;left:50%;top:49%;border:1px solid rgba(126,88,144,.18);border-radius:50%;transform:translate(-50%,-50%)}
.login-orbit--one{width:210px;height:210px;animation:loginOrbitPulse 5s ease-in-out infinite}
.login-orbit--two{width:300px;height:300px;border-style:dashed;animation:loginOrbitSpin 28s linear infinite}
.login-orbit--three{width:390px;height:390px;border-color:rgba(126,88,144,.10);animation:loginOrbitSpinReverse 38s linear infinite}
.login-node{position:absolute;width:8px;height:8px;border-radius:50%;background:#9e5abe;box-shadow:0 0 0 6px rgba(158,90,190,.10),0 0 24px rgba(158,90,190,.45)}
.login-node--one{left:22%;top:29%;animation:loginNode 4.8s ease-in-out infinite}
.login-node--two{right:20%;top:62%;width:6px;height:6px;animation:loginNode 5.7s ease-in-out -1.5s infinite}
.login-node--three{left:31%;bottom:18%;width:5px;height:5px;animation:loginNode 6.4s ease-in-out -2.4s infinite}
.login-flow-line{position:absolute;inset:auto 0;width:100%;height:44%;fill:none;stroke:rgba(139,84,165,.18);stroke-width:1.2;stroke-dasharray:5 8}
.login-flow-line--one{top:22%;animation:loginDash 16s linear infinite}
.login-flow-line--two{bottom:16%;opacity:.62;animation:loginDashReverse 20s linear infinite}

.login-brand-mark{position:relative;z-index:3;width:min(66%,260px);display:flex;align-items:flex-end;justify-content:center;gap:9px;transform:translateY(-4px)}
.login-brand-glow{position:absolute;left:50%;top:50%;width:210px;height:150px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(199,144,231,.24),rgba(199,144,231,0) 70%);filter:blur(8px);animation:loginBrandGlow 4.5s ease-in-out infinite}
.login-logo{display:block;width:100%;height:auto;position:relative;filter:drop-shadow(0 8px 16px rgba(45,31,52,.08))}
.login-crm-mark{position:relative;flex:none;margin-bottom:8%;font-size:10px;font-weight:800;letter-spacing:.22em;color:#76647d;border-left:1px solid rgba(88,60,100,.22);padding-left:9px}

.login-form-panel{
    padding:62px clamp(42px,7vw,78px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:rgba(255,255,255,.96);
}
.login-form-head{margin:0 0 30px}
.login-form-head h1{margin:0;font-size:30px;line-height:1.1;letter-spacing:-.035em;font-weight:760;color:var(--login-ink)}
.login-form{display:grid;gap:18px}
.login-field{display:grid;gap:8px;margin:0;color:var(--login-ink)}
.login-field-label{font-size:12px;font-weight:700;letter-spacing:.01em;color:#554b59}
.login-input-wrap{position:relative;display:block}
.login-field-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#988d9c;pointer-events:none;transition:color .18s ease,transform .18s ease}
.login-form .login-input-wrap input{
    width:100%;
    height:46px;
    border:1px solid #ddd5e0;
    border-radius:9px;
    padding:0 44px 0 42px;
    background:#fff;
    color:var(--login-ink);
    font:inherit;
    font-size:14px;
    outline:none;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease;
}
.login-form .login-input-wrap input:hover{border-color:#c9bdcd}
.login-form .login-input-wrap input:focus{border-color:#aa70c4;box-shadow:0 0 0 4px rgba(182,111,217,.11);background:#fff}
.login-input-wrap:focus-within .login-field-icon{color:#9256ad;transform:translateY(-50%) scale(1.04)}
.login-password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:7px;background:transparent;color:#8e8292;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .16s ease,color .16s ease}
.login-password-toggle:hover{background:#f2edf4;color:#6d4b7d}
.login-eye--hide{display:none}
.login-password-toggle[aria-pressed="true"] .login-eye--show{display:none}
.login-password-toggle[aria-pressed="true"] .login-eye--hide{display:block}

.login-remember{display:inline-flex!important;align-items:center;justify-self:start;gap:9px;cursor:pointer;font-size:12px!important;font-weight:600!important;color:#655a69!important;user-select:none}
.login-remember input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.login-checkmark{width:18px;height:18px;border:1px solid #d2c8d5;border-radius:5px;background:#fff;display:grid;place-items:center;color:#fff;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease}
.login-checkmark svg{opacity:0;transform:scale(.55);transition:opacity .16s ease,transform .16s ease}
.login-remember input:checked + .login-checkmark{background:#8f56aa;border-color:#8f56aa;box-shadow:0 0 0 3px rgba(143,86,170,.09)}
.login-remember input:checked + .login-checkmark svg{opacity:1;transform:scale(1)}
.login-remember input:focus-visible + .login-checkmark{outline:2px solid #9a5eb5;outline-offset:2px}

.login-submit{
    position:relative;
    width:100%;
    min-height:46px;
    margin-top:4px;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    overflow:hidden;
    background:linear-gradient(110deg,#9b5bb8,#7f4699);
    border-color:#7f4699;
    box-shadow:0 10px 24px rgba(126,68,153,.20);
    transition:transform .17s ease,box-shadow .17s ease,filter .17s ease;
}
.login-submit::before{content:"";position:absolute;inset:-1px auto -1px -34%;width:30%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transition:left .55s ease}
.login-submit:hover{transform:translateY(-1px);box-shadow:0 13px 30px rgba(126,68,153,.25);filter:saturate(1.06)}
.login-submit:hover::before{left:108%}
.login-submit:active{transform:translateY(0)}
.login-submit-arrow{transition:transform .2s ease}
.login-submit:hover .login-submit-arrow{transform:translateX(3px)}
.login-submit-loader{display:none;width:17px;height:17px;border:2px solid rgba(255,255,255,.38);border-top-color:#fff;border-radius:50%;animation:loginSpinner .7s linear infinite}
.login-form.is-submitting .login-submit{pointer-events:none}
.login-form.is-submitting .login-submit-arrow{display:none}
.login-form.is-submitting .login-submit-loader{display:block}
.login-form.is-submitting .login-submit-label{opacity:.9}
.login-error{margin:0 0 18px;padding:11px 13px;border-radius:8px;font-size:12px;font-weight:650;animation:loginErrorIn .34s ease both}

/* Более выразительный первый показ. После него JS сохраняет маркер в localStorage. */
.login-first-visit .login-shell{animation-duration:.78s}
.login-first-visit .login-brand-mark{opacity:0;animation:loginBrandReveal .9s .22s cubic-bezier(.18,.75,.26,1) forwards}
.login-first-visit .login-orbit--one{opacity:0;animation:loginOrbitReveal .75s .16s ease forwards,loginOrbitPulse 5s 1.1s ease-in-out infinite}
.login-first-visit .login-orbit--two{opacity:0;animation:loginOrbitReveal .9s .25s ease forwards,loginOrbitSpin 28s 1.2s linear infinite}
.login-first-visit .login-orbit--three{opacity:0;animation:loginOrbitReveal 1s .34s ease forwards,loginOrbitSpinReverse 38s 1.3s linear infinite}
.login-first-visit .login-form-head,.login-first-visit .login-field,.login-first-visit .login-remember,.login-first-visit .login-submit{opacity:0;transform:translateY(12px);animation:loginFormReveal .46s cubic-bezier(.2,.72,.22,1) forwards}
.login-first-visit .login-form-head{animation-delay:.34s}
.login-first-visit .login-field:nth-of-type(1){animation-delay:.42s}
.login-first-visit .login-field:nth-of-type(2){animation-delay:.49s}
.login-first-visit .login-remember{animation-delay:.55s}
.login-first-visit .login-submit{animation-delay:.61s}

@keyframes loginShellIn{from{opacity:0;transform:translateY(14px) scale(.992)}to{opacity:1;transform:none}}
@keyframes loginBrandReveal{0%{opacity:0;transform:translateY(8px) scale(.88);filter:blur(5px)}55%{filter:blur(0)}100%{opacity:1;transform:translateY(-4px) scale(1);filter:none}}
@keyframes loginOrbitReveal{from{opacity:0;transform:translate(-50%,-50%) scale(.72)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes loginFormReveal{to{opacity:1;transform:none}}
@keyframes loginOrbitPulse{0%,100%{box-shadow:0 0 0 0 rgba(174,109,204,0)}50%{box-shadow:0 0 0 18px rgba(174,109,204,.035)}}
@keyframes loginOrbitSpin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes loginOrbitSpinReverse{from{transform:translate(-50%,-50%) rotate(360deg)}to{transform:translate(-50%,-50%) rotate(0)}}
@keyframes loginNode{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(-9px);opacity:1}}
@keyframes loginDash{to{stroke-dashoffset:-130}}
@keyframes loginDashReverse{to{stroke-dashoffset:130}}
@keyframes loginBrandGlow{0%,100%{opacity:.62;transform:translate(-50%,-50%) scale(.95)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes loginAmbientOne{to{transform:translate(55px,30px) scale(1.08)}}
@keyframes loginAmbientTwo{to{transform:translate(-45px,-26px) scale(.96)}}
@keyframes loginSpinner{to{transform:rotate(360deg)}}
@keyframes loginErrorIn{0%{opacity:0;transform:translateX(-5px)}100%{opacity:1;transform:none}}

@media(max-width:760px){
    .login-page{padding:16px;overflow:auto}
    .login-shell{grid-template-columns:1fr;min-height:0;width:min(480px,100%)}
    .login-identity{min-height:160px;border-right:0;border-bottom:1px solid rgba(104,78,115,.13)}
    .login-brand-mark{width:min(48%,190px);transform:none}
    .login-stage-grid{inset:8px}
    .login-orbit--one{width:120px;height:120px}
    .login-orbit--two{width:185px;height:185px}
    .login-orbit--three{width:245px;height:245px}
    .login-node--one{left:23%;top:22%}.login-node--two{right:22%;top:62%}.login-node--three{display:none}
    .login-form-panel{padding:34px 28px 38px}
    .login-form-head{margin-bottom:24px}.login-form-head h1{font-size:27px}
}
@media(max-width:430px){
    .login-page{padding:0;display:block;background:#fff}
    .login-shell{min-height:100vh;border:0;border-radius:0;box-shadow:none;width:100%}
    .login-identity{min-height:142px}
    .login-form-panel{padding:32px 22px 40px;justify-content:flex-start}
    .login-brand-mark{width:170px}
}
@media(prefers-reduced-motion:reduce){
    .login-page *, .login-page *::before, .login-page *::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
    .login-first-visit .login-form-head,.login-first-visit .login-field,.login-first-visit .login-remember,.login-first-visit .login-submit,.login-first-visit .login-brand-mark,.login-first-visit .login-orbit{opacity:1;transform:none}
}