/* CRM sign-in family: login, forgot password, reset password, change password.
   Self-contained (prefix ax-) so the standalone pages need no other stylesheet. Colours follow the company brand colour. */
.ax,.ax *{box-sizing:border-box;}
.ax{--ax-a:var(--brand,#4F46E5);--ax-a2:var(--brand-2,#7C3AED);--ax-bg:#f4f6fc;--ax-card:#fff;--ax-ink:#14172b;--ax-soft:#4a4f6b;--ax-mut:#7a7f9f;--ax-line:#e2e5f1;--ax-field:#f6f7fc;
  --ax-err:#b42318;--ax-errbg:#fdecea;--ax-ok:#0f7a4a;--ax-okbg:#e5f6ed;--ax-warn:#a15c07;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ax-ink);}
:root[data-theme="dark"] .ax{--ax-bg:#0c0e19;--ax-card:#151829;--ax-ink:#eef0ff;--ax-soft:#b4b9da;--ax-mut:#8c92b8;--ax-line:#272b47;--ax-field:#0f1120;--ax-err:#ff8a80;--ax-errbg:#3a1a1c;--ax-ok:#5fd7a1;--ax-okbg:#12301f;--ax-warn:#f0b429;}
body.ax-page{margin:0;min-height:100vh;background:var(--ax-bg);}
.ax-page .ax-root,#login-screen.ax{display:flex;min-height:100vh;width:100%;background:var(--ax-bg);}
.ax-page .ax-root{height:100vh;overflow:hidden;}
#login-screen.ax{height:100vh;overflow:hidden;}

/* ---------- left: brand + live preview ---------- */
.ax-visual{flex:0 0 46%;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:44px 52px;color:#fff;
  background:linear-gradient(150deg,#1b2a6b 0%,#0b1233 60%,#060a1f 100%);
  background:linear-gradient(150deg,color-mix(in srgb,var(--ax-a) 72%,#0a0e2a) 0%,color-mix(in srgb,var(--ax-a) 30%,#070a1d) 58%,#05071a 100%);}
.ax-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;animation:axFloat 14s ease-in-out infinite;}
.ax-blob.b1{width:340px;height:340px;background:var(--ax-a2);top:-90px;right:-70px;}
.ax-blob.b2{width:300px;height:300px;background:var(--ax-a);bottom:-100px;left:-60px;animation-delay:-5s;}
.ax-blob.b3{width:200px;height:200px;background:#22d3ee;opacity:.25;top:42%;left:46%;animation-delay:-9s;}
@keyframes axFloat{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(26px,-22px) scale(1.08);}}
.ax-visual>*:not(.ax-blob){position:relative;z-index:1;flex:none;}
.ax-visual>.ax-logo{margin-top:auto;}
.ax-visual>*:last-child{margin-bottom:auto;}
.ax-visual{justify-content:flex-start!important;overflow-y:auto;scrollbar-width:none;}
.ax-visual::-webkit-scrollbar{display:none;}
.ax-logo{display:inline-flex;align-items:center;gap:11px;background:#fff;color:#14172b;border-radius:14px;padding:11px 18px;box-shadow:0 12px 30px -12px rgba(0,0,0,.5);align-self:flex-start;max-width:100%;}
.ax-logo img{height:38px;width:auto;display:block;max-width:220px;object-fit:contain;}
.ax-logo .ax-ini{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--ax-a),var(--ax-a2));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:none;}
.ax-logo b{font-size:16px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ax-visual h2{color:#fff;font-family:Outfit,Inter,sans-serif;font-size:clamp(28px,3.1vw,40px);line-height:1.12;margin:30px 0 12px;font-weight:700;letter-spacing:-.02em;}
.ax-grad{background:linear-gradient(90deg,#a5c8ff,#c4b5fd 55%,#99f6e4);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.ax-visual p.ax-lead{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.78);margin:0 0 26px;max-width:470px;}
.ax-preview{width:100%;max-width:470px;border-radius:18px;padding:14px 16px 16px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);box-shadow:0 24px 50px -24px rgba(0,0,0,.6);transition:transform .25s ease-out;will-change:transform;}
.ax-pv-top{display:flex;align-items:center;gap:6px;font-size:11.5px;color:rgba(255,255,255,.7);margin-bottom:12px;}
.ax-pv-top i{width:9px;height:9px;border-radius:50%;background:#ff6159;}.ax-pv-top i:nth-child(2){background:#ffbd2e;}.ax-pv-top i:nth-child(3){background:#27c93f;margin-right:6px;}
.ax-pv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.ax-pv-stats>div{background:rgba(255,255,255,.10);border-radius:12px;padding:10px 12px;}
.ax-pv-stats small{display:block;font-size:9.5px;letter-spacing:.09em;color:rgba(255,255,255,.65);font-weight:600;}
.ax-pv-stats b{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;}.ax-pv-stats em{font-style:normal;font-size:12px;opacity:.7;margin-left:2px;}
.ax-chart{display:block;width:100%;height:84px;margin-top:12px;}
.ax-line{stroke-dasharray:420;stroke-dashoffset:420;animation:axDraw 2.2s .3s ease forwards;}
.ax-area{opacity:0;animation:axFade 1.2s 1.2s ease forwards;}
@keyframes axDraw{to{stroke-dashoffset:0;}}@keyframes axFade{to{opacity:1;}}
.ax-bars{display:flex;align-items:flex-end;gap:8px;height:54px;margin-top:6px;}
.ax-bars i{flex:1;height:0;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.22));animation:axBar 1s ease forwards;}
.ax-bars i:nth-child(2){animation-delay:.08s}.ax-bars i:nth-child(3){animation-delay:.16s}.ax-bars i:nth-child(4){animation-delay:.24s}.ax-bars i:nth-child(5){animation-delay:.32s}.ax-bars i:nth-child(6){animation-delay:.4s}.ax-bars i:nth-child(7){animation-delay:.48s}
@keyframes axBar{to{height:var(--h);}}
.ax-slides{position:relative;height:70px;margin-top:20px;max-width:470px;}
.ax-slides>div{position:absolute;inset:0;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;}
.ax-slides>div.on{opacity:1;transform:none;}
.ax-slides b{display:block;font-size:15px;margin-bottom:3px;}.ax-slides span{font-size:13px;color:rgba(255,255,255,.72);line-height:1.45;display:block;}
.ax-dots{display:flex;gap:6px;margin-top:6px;}.ax-dots i{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.35);transition:all .3s;cursor:pointer;}.ax-dots i.on{width:22px;background:#fff;}
.ax-trust{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;}
.ax-trust span{font-size:11.5px;padding:6px 11px;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.9);}
.ax-contact{margin-top:18px;font-size:12px;color:rgba(255,255,255,.62);line-height:1.6;}.ax-contact a{color:rgba(255,255,255,.85);text-decoration:none;}

/* ---------- right: the card ---------- */
.ax-panel{flex:1 1 54%;display:flex;align-items:center;justify-content:center;padding:28px 24px;position:relative;overflow-y:auto;
  background:radial-gradient(900px 500px at 100% 0%,color-mix(in srgb,var(--ax-a) 9%,transparent),transparent 60%),var(--ax-bg);}
.ax-theme{position:absolute;top:20px;right:22px;width:38px;height:38px;border-radius:11px;border:1px solid var(--ax-line);background:var(--ax-card);color:var(--ax-soft);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:transform .15s,box-shadow .15s;z-index:3;}
.ax-theme:hover{transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(0,0,0,.35);}
.ax-card{width:100%;max-width:430px;background:var(--ax-card);border:1px solid var(--ax-line);border-radius:22px;padding:34px 34px 26px;box-shadow:0 30px 70px -34px rgba(20,25,70,.35);animation:axRise .55s cubic-bezier(.2,.8,.2,1) both;}
:root[data-theme="dark"] .ax-card{box-shadow:0 30px 70px -34px #000;}
@keyframes axRise{from{opacity:0;transform:translateY(18px) scale(.985);}to{opacity:1;transform:none;}}
.ax-card.shake{animation:axShake .45s ease;}
@keyframes axShake{20%,60%{transform:translateX(-7px);}40%,80%{transform:translateX(7px);}}
.ax-mobile-logo{display:none;}
.ax-badge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--ax-a);background:color-mix(in srgb,var(--ax-a) 11%,transparent);padding:6px 11px;border-radius:99px;}
.ax-card h1{font-family:Outfit,Inter,sans-serif;font-size:27px;margin:14px 0 6px;letter-spacing:-.02em;font-weight:700;color:var(--ax-ink);}
.ax-sub{margin:0 0 20px;color:var(--ax-mut);font-size:14px;line-height:1.55;}
.ax-sub b{color:var(--ax-ink);}
.ax-msg{display:none;margin:0 0 16px;padding:11px 13px;border-radius:12px;font-size:13px;line-height:1.5;background:var(--ax-errbg);color:var(--ax-err);border:1px solid color-mix(in srgb,var(--ax-err) 28%,transparent);}
.ax-msg.show{display:block;animation:axRise .3s both;}
.ax-msg.ok{background:var(--ax-okbg);color:var(--ax-ok);border-color:color-mix(in srgb,var(--ax-ok) 28%,transparent);}
.ax-msg.info{background:color-mix(in srgb,var(--ax-a) 10%,transparent);color:var(--ax-soft);border-color:color-mix(in srgb,var(--ax-a) 25%,transparent);}
.ax label.ax-l{display:block;font-size:12.5px;font-weight:600;color:var(--ax-soft);margin:0 0 6px;}
.ax-row-f{margin-bottom:14px;}
.ax-field{position:relative;display:flex;align-items:center;background:var(--ax-field);border:1.5px solid var(--ax-line);border-radius:13px;transition:border-color .15s,box-shadow .15s,background .15s;}
.ax-field:focus-within{border-color:var(--ax-a);background:var(--ax-card);box-shadow:0 0 0 4px color-mix(in srgb,var(--ax-a) 16%,transparent);}
.ax-field.bad{border-color:var(--ax-err);}
.ax-ic{width:44px;flex:none;display:inline-flex;justify-content:center;color:var(--ax-mut);}
.ax-field:focus-within .ax-ic{color:var(--ax-a);}
.ax-field input{flex:1;min-width:0;border:0;background:transparent;color:var(--ax-ink);font:inherit;font-size:14.5px;padding:13px 12px 13px 0;outline:none;}
.ax-field input::placeholder{color:var(--ax-mut);opacity:.75;}
.ax-field input.ax-otp{letter-spacing:.4em;font-size:19px;font-weight:600;text-align:center;padding-left:12px;}
.ax-eye{border:0;background:transparent;color:var(--ax-mut);width:42px;align-self:stretch;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:0 12px 12px 0;}
.ax-eye:hover{color:var(--ax-ink);}.ax-eye.on{color:var(--ax-a);}
.ax-eye .off{display:none;}.ax-eye.on .on{display:none;}.ax-eye.on .off{display:block;}
.ax-caps{font-size:12px;color:var(--ax-warn);margin:-6px 0 10px;display:none;}.ax-caps.show{display:block;}
.ax-opts{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;margin:2px 0 18px;font-size:13px;}
.ax-chk span:last-child{white-space:nowrap;}
.ax-chk{display:inline-flex;align-items:center;gap:9px;cursor:pointer;color:var(--ax-soft);user-select:none;background:none;border:0;padding:0;font:inherit;}
.ax-sw{width:34px;height:20px;border-radius:99px;background:var(--ax-line);position:relative;transition:background .2s;flex:none;}
.ax-sw::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s;}
.ax-chk[aria-checked="true"] .ax-sw{background:var(--ax-a);}.ax-chk[aria-checked="true"] .ax-sw::after{transform:translateX(14px);}
.ax-link{color:var(--ax-a);font-weight:600;text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:600;}
.ax-link:hover{text-decoration:underline;}
.ax-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;color:#fff;font:inherit;font-weight:650;font-size:15px;padding:14px 18px;border-radius:13px;text-decoration:none;
  background:linear-gradient(135deg,var(--ax-a),color-mix(in srgb,var(--ax-a) 70%,#000));box-shadow:0 14px 28px -14px var(--ax-a);transition:transform .15s,box-shadow .15s,filter .15s;position:relative;overflow:hidden;}
.ax-btn i{font-style:normal;transition:transform .2s;}
.ax-btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.06);}.ax-btn:hover:not(:disabled) i{transform:translateX(4px);}
.ax-btn:active:not(:disabled){transform:translateY(0);}
.ax-btn:disabled{opacity:.7;cursor:not-allowed;}
.ax-btn.is-loading span::after,.ax-btn.is-busy span::after{content:"";display:inline-block;width:14px;height:14px;margin-left:10px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;vertical-align:-2px;animation:axSpin .7s linear infinite;}
.ax-btn.is-loading i,.ax-btn.is-busy i{display:none;}
@keyframes axSpin{to{transform:rotate(360deg);}}
.ax-ghost{width:100%;display:inline-flex;justify-content:center;align-items:center;gap:8px;margin-top:10px;padding:12px;border-radius:13px;border:1.5px solid var(--ax-line);background:transparent;color:var(--ax-soft);font:inherit;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s;}
.ax-ghost:hover:not(:disabled){background:var(--ax-field);border-color:var(--ax-a);color:var(--ax-ink);}
.ax-ghost:disabled{opacity:.6;cursor:not-allowed;}
.ax-foot{margin-top:20px;padding-top:14px;border-top:1px solid var(--ax-line);text-align:center;font-size:12px;color:var(--ax-mut);}
.ax-foot a{color:var(--ax-a);font-weight:600;text-decoration:none;}
.ax-back{display:block;text-align:center;margin-top:16px;font-size:13.5px;}
.ax-state{display:none;text-align:center;}.ax-state.show{display:block;animation:axRise .4s both;}
.ax-seal{width:74px;height:74px;margin:6px auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ax-okbg);color:var(--ax-ok);}
.ax-seal.bad{background:var(--ax-errbg);color:var(--ax-err);}
.ax-seal svg{stroke-dasharray:60;stroke-dashoffset:60;animation:axDraw .7s .15s ease forwards;}
.ax-only-totp{display:none;}
.ax-stage-totp .ax-only-totp{display:block;}
.ax-stage-totp .ax-only-pw{display:none!important;}

/* ---------- password meter + checklist (reset page and change-password dialog) ---------- */
.ax-meter{display:flex;gap:5px;margin:9px 0 5px;}.ax-meter i{flex:1;height:5px;border-radius:99px;background:var(--ax-line);transition:background .25s;}
.ax-meterlbl{font-size:12px;color:var(--ax-mut);min-height:17px;}
.ax-match{font-size:12px;min-height:17px;margin-top:6px;}
.ax-list{list-style:none;margin:12px 0 4px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:12.3px;color:var(--ax-mut);}
.ax-list li{display:flex;align-items:center;gap:7px;transition:color .2s;}
.ax-list li i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--ax-line);flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-style:normal;color:transparent;transition:all .2s;}
.ax-list li.ok{color:var(--ax-ok);}.ax-list li.ok i{background:var(--ax-ok);border-color:var(--ax-ok);color:#fff;}
.ax-list li.ok i::before{content:"\2713";}
.ax-actions{display:flex;gap:10px;align-items:stretch;margin-top:16px;}.ax-actions .ax-btn{flex:1;}
.ax-suggest{border:1.5px dashed var(--ax-line);background:transparent;color:var(--ax-soft);border-radius:13px;padding:0 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;}
.ax-suggest:hover{border-color:var(--ax-a);color:var(--ax-a);}
.ax-tip{margin-top:12px;font-size:12px;color:var(--ax-mut);line-height:1.5;}

/* change-password dialog inside the app reuses the same pieces */
#pw-overlay .modal{max-width:460px;}
#pw-overlay .ax{background:none;}
#pw-overlay .ax-field{background:var(--field,var(--ax-field));}
#pw-overlay .ax-more{font-size:12.5px;margin:2px 0 14px;}

@media (max-width:900px){
  #login-screen.ax{flex-direction:column;height:auto;min-height:100vh;overflow:visible;}
  .ax-page .ax-root{flex-direction:column;height:auto;overflow:visible;}
  .ax-visual{display:none;}
  .ax-panel{flex:1;padding:24px 16px 40px;align-items:flex-start;padding-top:70px;}
  .ax-card{padding:26px 22px 22px;border-radius:18px;}
  .ax-mobile-logo{display:flex;margin-bottom:6px;}
  .ax-mobile-logo .ax-logo{box-shadow:none;background:transparent;padding:0;}
  .ax-mobile-logo .ax-logo img{height:34px;}
  .ax-mobile-logo .ax-logo b{color:var(--ax-ink);}
  .ax-list{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){.ax *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}.ax-line{stroke-dashoffset:0;}.ax-bars i{height:var(--h);}.ax-area{opacity:1;}}
#pw-overlay .modal.shake{animation:axShake .45s ease;}
#pw-overlay .modal-body{max-height:calc(100vh - 220px);overflow-y:auto;}
@media (max-height:820px){.ax-visual{padding-top:28px;padding-bottom:28px;}.ax-visual h2{margin-top:20px;}.ax-visual p.ax-lead{margin-bottom:16px;}.ax-chart{height:62px;}.ax-bars{height:40px;}.ax-slides{margin-top:14px;}.ax-trust{margin-top:14px;}}
@media (max-height:700px){.ax-slides,.ax-dots{display:none;}.ax-preview{display:none;}}
@media (max-width:420px){.ax-card{padding:24px 18px 20px;}.ax-chk{font-size:12.5px;}}

/* ---------- CRM pipeline scene on the left panel ---------- */
.ax-crm{max-width:500px;}
.ax-live{margin-left:auto;font-style:normal;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:#9ef0c0;letter-spacing:.04em;}
.ax-live u{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.7);animation:axPulse 1.8s infinite;}
@keyframes axPulse{70%{box-shadow:0 0 0 7px rgba(52,211,153,0);}100%{box-shadow:0 0 0 0 rgba(52,211,153,0);}}
.ax-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.ax-kpis>div{background:rgba(255,255,255,.10);border-radius:11px;padding:8px 10px;}
.ax-kpis small{display:block;font-size:9px;letter-spacing:.08em;color:rgba(255,255,255,.62);font-weight:600;white-space:nowrap;}
.ax-kpis b{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;}
.ax-kpis b.pop{animation:axPop .6s ease;}
@keyframes axPop{40%{transform:scale(1.14);color:#9ef0c0;}}
.ax-board{position:relative;height:178px;margin-top:9px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.ax-col{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:11px;padding:7px 8px;}
.ax-col.won{background:rgba(52,211,153,.10);border-color:rgba(52,211,153,.25);}
.ax-col h6{margin:0;font-size:10px;font-weight:650;color:rgba(255,255,255,.75);display:flex;justify-content:space-between;letter-spacing:.02em;white-space:nowrap;}
.ax-col h6 em{font-style:normal;background:rgba(255,255,255,.16);border-radius:99px;padding:0 6px;font-size:9.5px;}
.ax-deal{position:absolute;left:calc(var(--c)*(25% + 2px) + 5px);top:calc(31px + var(--r)*49px);width:calc(25% - 15px);padding:6px 8px;border-radius:9px;background:rgba(255,255,255,.93);color:#14172b;box-shadow:0 8px 16px -10px rgba(0,0,0,.6);
  transition:left .8s cubic-bezier(.4,.1,.2,1),top .6s ease,opacity .5s,transform .5s;border-left:3px solid var(--tag,#6366f1);}
.ax-deal b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ax-deal span{font-size:10.5px;color:#4a4f6b;font-weight:600;}
.ax-deal.won{background:#e9fbf2;border-left-color:#10b981;}
.ax-deal.hold{transform:scale(1.05);box-shadow:0 14px 26px -10px rgba(0,0,0,.7);z-index:3;}
.ax-deal.gone{opacity:0;transform:scale(.9);}
.ax-deal.born{opacity:0;transform:translateY(-8px);}
.ax-feed{margin-top:9px;display:flex;flex-direction:column;gap:5px;min-height:70px;overflow:hidden;}
.ax-feed div{font-size:11.5px;color:rgba(255,255,255,.82);background:rgba(255,255,255,.07);border-radius:8px;padding:5px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:axFeedIn .5s ease both;}
.ax-feed div:nth-child(2){opacity:.75;}.ax-feed div:nth-child(3){opacity:.5;}
@keyframes axFeedIn{from{opacity:0;transform:translateY(-8px);}}
@media (max-height:820px){.ax-board{height:150px;}.ax-deal{top:calc(29px + var(--r)*40px);padding:4px 7px;}.ax-feed{min-height:60px;}}
@media (max-height:700px){.ax-feed{display:none;}}