:root{
  --easivo-navy:#071124;
  --easivo-panel:#0b1730;
  --easivo-line:#26395e;
  --easivo-blue:#2f6df6;
  --easivo-blue-bright:#4f7fff;
  --easivo-gold:#f4b740;
  --easivo-soft:#a8b7d2;
}

html:has(.auth),
body:has(.auth),
body:has(.auth) #app{
  min-height:100%;
  margin:0;
  padding:0!important;
  background:var(--easivo-navy)!important;
  overscroll-behavior-y:none;
}

.auth{
  position:relative;
  isolation:isolate;
  min-height:100dvh;
  overflow:hidden;
  grid-template-columns:minmax(0,1.08fr) minmax(420px,.78fr);
  gap:clamp(36px,6vw,92px);
  padding:clamp(34px,5vw,76px) max(32px,calc((100vw - 1220px)/2));
  background:
    radial-gradient(circle at 9% 8%,rgba(47,109,246,.22),transparent 31%),
    radial-gradient(circle at 89% 78%,rgba(244,183,64,.09),transparent 28%),
    var(--easivo-navy);
}

.auth:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.42;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(90deg,#000,transparent 88%);
}

.auth:after{
  content:"";
  position:absolute;
  z-index:-1;
  width:460px;
  height:460px;
  right:-230px;
  top:-230px;
  border:1px solid rgba(79,127,255,.2);
  border-radius:50%;
  box-shadow:0 0 0 70px rgba(79,127,255,.035),0 0 0 140px rgba(79,127,255,.025);
}

.pitch{
  max-width:690px;
  padding:clamp(16px,3vw,42px) 0;
}

.easivo-go-wordmark{display:flex;align-items:center;gap:12px}
.easivo-go-wordmark img{display:block;width:44px;height:44px;border-radius:12px;object-fit:cover;box-shadow:0 10px 28px rgba(5,15,39,.24)}
.easivo-go-wordmark span{color:#111a34;font-size:23px;font-weight:900;letter-spacing:-.8px}
.easivo-go-wordmark b{color:var(--easivo-gold);font:inherit}
.easivo-go-wordmark.large{margin:0 0 clamp(42px,7vh,76px)}
.easivo-go-wordmark.large img{width:56px;height:56px;border-radius:15px;box-shadow:0 14px 36px rgba(0,0,0,.34)}
.easivo-go-wordmark.large span{font-size:31px}
.easivo-go-wordmark.light span{color:#fff}
.easivo-go-wordmark.card{justify-content:center;margin:0 auto 22px}

.pitch .brand{
  margin-bottom:clamp(42px,7vh,76px);
  padding:0;
  font-size:27px!important;
  letter-spacing:-.7px;
}

.pitch .brand:before{
  width:54px;
  height:54px;
  flex-basis:54px;
  border-radius:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.34);
}

.pitch-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  color:var(--easivo-gold);
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.pitch-kicker:before{
  content:"";
  width:20px;
  height:2px;
  border-radius:99px;
  background:var(--easivo-gold);
}

.pitch h1{
  max-width:710px;
  margin:0;
  color:#fff;
  font-size:clamp(48px,5.4vw,76px);
  line-height:.98;
  letter-spacing:-.055em;
}

.pitch h1 .headline-accent{
  background:linear-gradient(90deg,#fff 5%,#a9c4ff 52%,#f4c96b 96%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.pitch>p{
  max-width:600px;
  margin:24px 0 0;
  color:var(--easivo-soft);
  font-size:17px;
  line-height:1.65;
  opacity:1;
}

.pitch-chips{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:28px;
}

.pitch-chips span{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 13px;
  border:1px solid rgba(103,142,226,.32);
  border-radius:9px;
  background:rgba(11,23,48,.66);
  color:#c7d4ea;
  font-size:11px;
  font-weight:800;
}

.pitch-chips span:first-child:before{
  content:"◆";
  margin-right:7px;
  color:var(--easivo-gold);
  font-size:8px;
}

.pitch-trial{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:22px;
  color:#8798b6;
  font-size:12px;
}

.pitch-trial b{
  padding:7px 10px;
  border-radius:99px;
  background:rgba(47,109,246,.16);
  color:#9db9ff;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.authcard{
  max-width:540px;
  padding:34px;
  border:1px solid rgba(126,156,219,.28);
  border-radius:24px;
  background:#fbfcff;
  box-shadow:0 34px 100px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.035);
}

.authcard:before{
  display:none!important;
  content:none!important;
}

.authcard h2{
  margin:22px 0 6px;
  color:#111a34;
  font-size:26px;
  letter-spacing:-.7px;
}

.authcard .muted{
  color:#697892;
}

.authcard .tabs{
  padding:4px;
  border:1px solid #e1e8f4;
  border-radius:13px;
  background:#edf2f9;
}

.authcard .tabs button{
  min-height:44px;
  border-radius:9px;
  color:#68768f;
}

.authcard .tabs button.on{
  color:var(--easivo-blue);
  background:#fff;
  box-shadow:0 4px 16px rgba(25,50,98,.1);
}

.authcard form>label{
  color:#17213a;
}

.authcard form>label input,
.authcard form>label select,
.authcard .password-wrap input{
  min-height:48px;
  border-color:#cfdaec;
  background:#fff;
  color:#111a34;
  transition:border-color .18s ease,box-shadow .18s ease;
}

.authcard form>label input:focus,
.authcard form>label select:focus,
.authcard .password-wrap input:focus{
  outline:0;
  border-color:var(--easivo-blue);
  box-shadow:0 0 0 3px rgba(47,109,246,.14);
}

.authcard .show-pass{
  color:#63718a;
}

.authcard .remember-login input{
  accent-color:var(--easivo-blue);
}

.authcard .remember-login span b{
  color:#17213a;
}

.authcard .remember-login span small,
.authcard .password-hint{
  color:#77849a;
}

.authcard .forgot{
  color:#255edb;
}

.authcard .btn.full{
  min-height:48px;
  border-radius:11px;
  background:linear-gradient(135deg,#245fdc,#397cf7);
  color:#fff;
  box-shadow:0 12px 28px rgba(30,95,222,.24);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}

.authcard .btn.full:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:0 16px 36px rgba(30,95,222,.31);
}

.authcard .btn.full:focus-visible,
.authcard .tabs button:focus-visible,
.authcard .forgot:focus-visible{
  outline:3px solid rgba(244,183,64,.72);
  outline-offset:3px;
}

.auth.one{
  background:var(--easivo-navy);
}

@media(max-width:900px){
  .auth{grid-template-columns:minmax(0,1fr) minmax(390px,.86fr);gap:38px;padding-inline:28px}
  .pitch h1{font-size:clamp(43px,6vw,61px)}
}

@media(max-width:780px){
  .auth{display:grid;grid-template-columns:1fr;place-items:center;width:100%;min-height:100svh;height:auto;overflow-x:hidden;overflow-y:auto;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 0,rgba(47,109,246,.22),transparent 35%),var(--easivo-navy)}
  .pitch{display:none!important}
  .authcard{width:min(100%,500px);margin:auto;padding:26px 22px;border-radius:20px}
  .easivo-go-wordmark.card{margin-bottom:17px}
}

@media(max-width:420px){
  .auth{padding:calc(10px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom))}
  .authcard{padding:23px 17px;border-radius:18px}
  .authcard h2{font-size:23px}
  .authcard .login-options{gap:8px}
}

@media(prefers-reduced-motion:reduce){
  .authcard .btn.full{transition:none}
  .authcard .btn.full:hover{transform:none}
}
.easivo-legal-links{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:14px;font-size:12px}.easivo-legal-links a{color:#315bd8;text-decoration:underline}.easivo-legal-links span{color:#9aa5b7}.manual-payment-notice{display:flex;flex-direction:column;gap:3px;margin:0 0 12px;padding:12px 14px;border-radius:12px;background:#fff7df;border:1px solid #f4d98b;color:#624700;text-align:left}.manual-payment-notice b{font-size:13px}.manual-payment-notice span{font-size:12px;line-height:1.4}
.confirm-card .recovery-logo{display:block;width:68px!important;height:68px!important;max-width:68px!important;margin:0 auto 8px!important;border-radius:18px;object-fit:cover;box-shadow:0 12px 28px rgba(17,26,52,.18)}
#new-password-form{display:grid;gap:12px;margin-top:20px;text-align:left}#new-password-form .btn{margin-top:4px}.confirm-card>#cancel-recovery{display:block;margin:14px auto 0}
@media(max-width:420px){.confirm-card .recovery-logo{width:58px!important;height:58px!important;max-width:58px!important;border-radius:16px}.confirm-card:has(#new-password-form){padding:22px 18px}.confirm-card:has(#new-password-form) h2{margin-top:12px}}