/* UI-LOGIN-001 — professional standalone employee portal */
.emtarget-login-body{
  --login-bg:#020b18;
  --login-panel:#071726;
  --login-panel-2:#0b2032;
  --login-line:rgba(151,190,214,.18);
  --login-copy:#aebdcb;
  --login-green:#24d690;
  --login-green-2:#0bbf79;
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:#020b18;
  color:#fff;
  font-family:"Cairo","Segoe UI",Tahoma,Arial,sans-serif;
}
.emtarget-login-body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 74% 48%,rgba(0,174,145,.11),transparent 32%),
    radial-gradient(circle at 12% 80%,rgba(13,131,180,.08),transparent 27%),
    linear-gradient(135deg,#020a16,#04101f 48%,#03101b);
}
.emtarget-login-shell{
  direction:rtl;
  position:relative;
  isolation:isolate;
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.22fr) minmax(430px,.78fr);
  background:transparent;
}
.emtarget-login-brand,
.emtarget-login-card-wrap{direction:rtl;min-width:0}
.emtarget-login-brand{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:64px clamp(42px,6vw,110px) 48px;
  color:#fff;
  border-left:1px solid rgba(113,166,198,.15);
  background:
    linear-gradient(rgba(29,117,139,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(29,117,139,.035) 1px,transparent 1px);
  background-size:48px 48px;
}
.emtarget-login-brand::before{
  content:"";
  position:absolute;
  width:570px;
  height:570px;
  left:-260px;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  border:1px solid rgba(42,208,173,.13);
  box-shadow:0 0 0 32px rgba(42,208,173,.035),0 0 0 66px rgba(42,208,173,.025),0 0 100px rgba(6,189,142,.1);
}
.emtarget-login-brand::after{
  content:"";
  position:absolute;
  width:660px;
  height:660px;
  left:-350px;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  background:
    radial-gradient(circle,transparent 50%,rgba(11,191,121,.06) 51%,transparent 52%),
    repeating-radial-gradient(circle,rgba(57,217,185,.07) 0 1px,transparent 1px 7px);
  opacity:.55;
  mask-image:linear-gradient(90deg,black,transparent 74%);
}
.emtarget-login-ambient{
  position:absolute;
  right:8%;
  bottom:-165px;
  width:72%;
  height:230px;
  transform:perspective(500px) rotateX(62deg);
  transform-origin:bottom;
  background:
    linear-gradient(rgba(25,188,174,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(25,188,174,.09) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to top,black,transparent 80%);
  pointer-events:none;
}
.emtarget-login-status{
  position:absolute;
  top:28px;
  right:34px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:38px;
  padding:0 16px;
  border:1px solid rgba(151,190,214,.12);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#a7b6c5;
  font-size:11px;
  font-weight:700;
  backdrop-filter:blur(14px);
}
.emtarget-login-status span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--login-green);
  box-shadow:0 0 0 6px rgba(36,214,144,.08),0 0 16px rgba(36,214,144,.8);
}
.emtarget-login-brand-content{
  position:relative;
  z-index:2;
  width:min(100%,930px);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.emtarget-brand-mark{
  width:62px;
  height:62px;
  border-radius:19px;
  display:grid;
  place-items:center;
  margin:0 0 24px;
  color:#022719;
  font-size:21px;
  font-weight:900;
  background:linear-gradient(145deg,#28e09a,#08a967);
  border:1px solid rgba(110,255,200,.34);
  box-shadow:0 12px 38px rgba(9,190,119,.31),inset 0 1px 0 rgba(255,255,255,.35);
}
.emtarget-eyebrow{
  color:#40dfa4;
  font-size:12px;
  font-weight:900;
  letter-spacing:3px;
}
.emtarget-login-brand h1{
  max-width:820px;
  margin:25px 0 18px;
  color:#fff;
  font-size:clamp(44px,4.75vw,76px);
  font-weight:800;
  line-height:1.34;
  letter-spacing:-2.2px;
  text-wrap:balance;
}
.emtarget-login-brand h1 em{
  color:var(--login-green);
  font-style:normal;
  text-shadow:0 0 30px rgba(36,214,144,.16);
}
.emtarget-login-brand-content>p{
  max-width:720px;
  margin:0;
  color:#aab8c7;
  font-size:16px;
  font-weight:500;
  line-height:2;
}
.emtarget-login-points{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:42px;
}
.emtarget-login-points article{
  position:relative;
  min-height:205px;
  padding:26px 18px 22px;
  border:1px solid var(--login-line);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(9,27,43,.7),rgba(5,18,31,.5));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter:blur(13px);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.emtarget-login-points article:hover{
  transform:translateY(-5px);
  border-color:rgba(36,214,144,.38);
  box-shadow:0 16px 42px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04);
}
.emtarget-login-points article>b{
  position:absolute;
  top:12px;
  right:14px;
  color:#25d795;
  font-size:11px;
  font-weight:800;
}
.emtarget-feature-icon{
  width:57px;
  height:57px;
  margin:2px auto 17px;
  display:grid;
  place-items:center;
  border:1px solid rgba(36,214,144,.28);
  border-radius:50%;
  color:#34df9f;
  background:radial-gradient(circle,rgba(36,214,144,.14),rgba(36,214,144,.025) 66%);
  box-shadow:0 0 26px rgba(36,214,144,.08);
}
.emtarget-feature-icon svg{width:29px;height:29px}
.emtarget-login-points h2{
  margin:0 0 8px;
  color:#f3f8fb;
  font-size:13px;
  font-weight:800;
}
.emtarget-login-points p{
  margin:0;
  color:#8293a5;
  font-size:10px;
  line-height:1.85;
}
.emtarget-brand-trust{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0;
  margin-top:31px;
  color:#7e8f9f;
}
.emtarget-brand-trust span{
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 22px;
  border-left:1px solid rgba(151,190,214,.13);
  font-size:10px;
  font-weight:600;
}
.emtarget-brand-trust span:last-child{border-left:0}
.emtarget-brand-trust svg{width:17px;height:17px;color:#6f8798}
.emtarget-login-card-wrap{
  position:relative;
  display:grid;
  place-items:center;
  padding:48px clamp(32px,4vw,78px);
  background:
    radial-gradient(circle at 16% 74%,rgba(12,173,162,.12),transparent 24%),
    linear-gradient(160deg,#061522,#030c17 72%);
}
.emtarget-login-card-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(145deg,transparent 0 21px,rgba(29,150,171,.035) 22px 23px,transparent 24px 38px),
    radial-gradient(circle at 50% 50%,rgba(16,136,152,.06),transparent 60%);
  mask-image:linear-gradient(90deg,black,transparent 70%);
}
.emtarget-login-card{
  position:relative;
  z-index:2;
  width:min(100%,520px);
  padding:39px 38px 30px;
  color:#fff;
  border:1px solid rgba(81,184,181,.53);
  border-radius:34px;
  background:linear-gradient(155deg,rgba(13,38,56,.96),rgba(5,21,34,.97));
  box-shadow:0 28px 75px rgba(0,0,0,.4),0 0 60px rgba(15,193,160,.08),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(20px);
  overflow:hidden;
}
.emtarget-login-card::before{
  content:"";
  position:absolute;
  width:230px;
  height:230px;
  top:-150px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(22,214,154,.11);
  filter:blur(38px);
  pointer-events:none;
}
.emtarget-login-card-head{text-align:center;position:relative;z-index:1}
.emtarget-login-card-logo{
  width:62px;
  height:62px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  border-radius:18px;
  color:#fff;
  font-size:22px;
  font-weight:900;
  background:linear-gradient(145deg,#28db99,#087d58);
  border:1px solid rgba(114,255,207,.27);
  box-shadow:0 15px 35px rgba(10,190,121,.22),inset 0 1px 0 rgba(255,255,255,.3);
}
.emtarget-login-product{
  display:block;
  margin-bottom:17px;
  color:#3adea2;
  font-size:14px;
  font-weight:900;
  letter-spacing:5px;
}
.emtarget-login-product small{
  display:block;
  margin-top:3px;
  color:#d8e1e8;
  font-size:9px;
  letter-spacing:3px;
}
.emtarget-card-kicker{
  display:block;
  padding:0;
  background:none;
  color:#cad5de;
  font-size:11px;
  font-weight:600;
}
.emtarget-login-card h2{
  margin:4px 0 3px;
  color:#fff;
  font-size:34px;
  font-weight:800;
  letter-spacing:-.8px;
}
.emtarget-login-card-head>p{
  margin:0 auto 24px;
  color:#91a2b2;
  font-size:11px;
  line-height:1.85;
}
.emtarget-login-card form{position:relative;z-index:1}
.emtarget-login-card label{
  display:flex;
  margin:0 0 9px;
  color:#d9e3e9;
  font-size:11px;
  font-weight:700;
}
.emtarget-phone-field{
  height:54px;
  display:flex;
  align-items:center;
  border:1px solid rgba(118,162,183,.3);
  border-radius:12px;
  background:rgba(2,13,24,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015);
  overflow:hidden;
}
.emtarget-phone-field:focus-within{
  border-color:#21d391;
  background:rgba(3,21,34,.88);
  box-shadow:0 0 0 3px rgba(33,211,145,.09),0 0 25px rgba(33,211,145,.07);
}
.emtarget-phone-field span{
  min-width:72px;
  padding:0 14px;
  color:#c8d4dd;
  border-right:1px solid rgba(118,162,183,.2);
  font-size:13px;
  font-weight:800;
  text-align:center;
}
.emtarget-phone-field input,
.emtarget-login-card .emtarget-otp-input{
  color:#fff;
  caret-color:#2dd99a;
}
.emtarget-phone-field input{
  height:52px;
  padding:0 16px;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-align:left;
  font-size:14px;
}
.emtarget-phone-field input::placeholder,.emtarget-otp-input::placeholder{color:#5f7183;opacity:1}
.emtarget-otp-input{
  height:60px;
  width:100%;
  border:1px solid rgba(118,162,183,.33)!important;
  border-radius:13px!important;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 calc(16.666% - 1px),rgba(118,162,183,.2) calc(16.666% - 1px) 16.666%),
    rgba(2,13,24,.55)!important;
  box-shadow:none!important;
  text-align:center;
  direction:ltr;
  letter-spacing:20px;
  padding:0 0 0 20px!important;
  font-size:24px!important;
  font-weight:900;
}
.emtarget-otp-input:focus{
  border-color:#21d391!important;
  box-shadow:0 0 0 3px rgba(33,211,145,.09),0 0 25px rgba(33,211,145,.07)!important;
}
.emtarget-primary-btn{
  width:100%;
  min-height:55px;
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid rgba(134,255,213,.24);
  border-radius:11px;
  color:#fff;
  background:linear-gradient(100deg,#19c986,#36cfb5);
  box-shadow:0 14px 33px rgba(17,199,132,.17),inset 0 1px 0 rgba(255,255,255,.24);
  font-size:13px;
  font-weight:800;
}
.emtarget-primary-btn svg{width:18px;height:18px}
.emtarget-primary-btn:hover{
  transform:translateY(-2px);
  filter:saturate(1.08) brightness(1.04);
  box-shadow:0 18px 38px rgba(17,199,132,.24),inset 0 1px 0 rgba(255,255,255,.3);
}
.emtarget-primary-btn:disabled{filter:none;opacity:.64}
.emtarget-link-btn{
  width:100%;
  margin-top:7px;
  padding:9px;
  color:#36a5ff;
  background:transparent;
  font-size:11px;
  font-weight:700;
}
.emtarget-link-btn:hover{color:#75c1ff}
.emtarget-session-note{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:13px;
  color:#9caebe;
  font-size:10px;
  font-weight:600;
}
.emtarget-session-note span{
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border:1px solid rgba(55,223,166,.45);
  border-radius:4px;
  color:#41e6ab;
  background:rgba(32,211,147,.15);
  font-size:10px;
  font-weight:900;
}
.emtarget-alert{
  position:relative;
  z-index:1;
  margin:0 0 16px;
  padding:12px 14px;
  border-radius:10px;
  font-size:10px;
  line-height:1.75;
  font-weight:700;
}
.emtarget-alert.error{color:#ffb9bf;background:rgba(190,32,46,.15);border:1px solid rgba(255,92,105,.24)}
.emtarget-alert.success{color:#5fe6b1;background:rgba(17,174,112,.13);border:1px solid rgba(43,225,153,.25)}
.emtarget-login-security{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid rgba(118,162,183,.16);
  color:#8d9faf;
}
.emtarget-login-security div{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:0 8px;
  border-left:1px solid rgba(118,162,183,.13);
  text-align:center;
}
.emtarget-login-security div:last-child{border-left:0}
.emtarget-login-security svg{width:19px;height:19px;color:#8fa3b3}
.emtarget-login-security span{font-size:9px;font-weight:600}
.emtarget-login-independence{
  position:relative;
  z-index:1;
  margin:18px 0 0;
  color:#64798a;
  font-size:9px;
  text-align:center;
}
@media (max-width:1280px){
  .emtarget-login-shell{grid-template-columns:minmax(0,1.08fr) minmax(410px,.92fr)}
  .emtarget-login-brand{padding-inline:40px}
  .emtarget-login-points{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px}
  .emtarget-login-points article{min-height:170px}
  .emtarget-login-brand h1{font-size:clamp(42px,5.3vw,66px)}
}
@media (max-width:940px){
  .emtarget-login-shell{display:block;min-height:100vh}
  .emtarget-login-brand{display:none}
  .emtarget-login-card-wrap{min-height:100vh;padding:34px 20px}
  .emtarget-login-card-wrap::after{
    content:"EMARGATES SALES OS";
    position:absolute;
    top:22px;
    left:50%;
    transform:translateX(-50%);
    color:rgba(55,224,165,.5);
    font-size:9px;
    font-weight:900;
    letter-spacing:3px;
    white-space:nowrap;
  }
}
@media (max-width:560px){
  .emtarget-login-card-wrap{padding:40px 14px 22px}
  .emtarget-login-card{padding:30px 21px 24px;border-radius:26px}
  .emtarget-login-card-logo{width:56px;height:56px;border-radius:17px}
  .emtarget-login-card h2{font-size:29px}
  .emtarget-login-product{font-size:12px;letter-spacing:4px}
  .emtarget-login-security div{padding-inline:3px}
  .emtarget-login-security span{font-size:8px}
  .emtarget-otp-input{letter-spacing:13px;padding-left:13px!important}
}
@media (prefers-reduced-motion:reduce){
  .emtarget-login-points article,.emtarget-primary-btn{transition:none}
}
.emtarget-login-spinner{width:17px;height:17px;border:2px solid rgba(255,255,255,.34);border-top-color:#fff;border-radius:50%;animation:emtargetLoginSpin .72s linear infinite}
@keyframes emtargetLoginSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.emtarget-login-spinner{animation-duration:1.5s}}