:root{
  --cp-bg:#f7f8fc;
  --cp-card:#ffffff;
  --cp-ink:#111827;
  --cp-muted:#667085;
  --cp-line:rgba(17,24,39,.08);
  --cp-purple:#7c3aed;
  --cp-purple-2:#5b21e5;
  --cp-purple-soft:#f4edff;
  --cp-shadow:0 24px 58px rgba(17,24,39,.10);
  --cp-shadow-soft:0 14px 34px rgba(124,58,237,.12);
}

*{box-sizing:border-box}
html,body{min-height:100%;}
body.authPremium{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--cp-ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(124,58,237,.10), transparent 34%),
    linear-gradient(180deg,#ffffff 0%, var(--cp-bg) 42%, #ffffff 100%);
  -webkit-font-smoothing:antialiased;
}

.authShell{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:30px 20px calc(36px + env(safe-area-inset-bottom));
}

.authBrand{
  display:flex;
  align-items:center;
  gap:16px;
  padding:8px 6px 22px;
}
.authLogo{
  width:76px;
  height:76px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:38px;
  font-weight:950;
  letter-spacing:-.04em;
  background:linear-gradient(145deg,#7c3aed 0%,#5b21e5 92%);
  box-shadow:0 20px 34px rgba(91,33,229,.24);
}
.authBrand h1{
  margin:0;
  font-size:38px;
  line-height:1;
  letter-spacing:-.045em;
  font-weight:950;
}
.authBrand p{
  margin:8px 0 0;
  color:#536179;
  font-size:20px;
  line-height:1.25;
  font-weight:600;
}

.authCard{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(17,24,39,.07);
  border-radius:30px;
  box-shadow:var(--cp-shadow);
  padding:34px;
  margin-top:22px;
  backdrop-filter:blur(18px);
}
.authCardHead h2,.loginHead h2{
  margin:0;
  font-size:32px;
  letter-spacing:-.035em;
  line-height:1.05;
  font-weight:950;
}
.authCardHead p,.loginHead p{
  margin:14px 0 0;
  color:#536179;
  font-size:20px;
  line-height:1.25;
  font-weight:600;
}

.roleGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:30px;
}
.roleCard{
  min-width:0;
  border:1px solid rgba(17,24,39,.08);
  border-radius:26px;
  padding:28px 22px 24px;
  text-align:center;
  background:#fff;
  box-shadow:0 10px 28px rgba(17,24,39,.04);
}
.roleCard--featured{
  border-color:rgba(124,58,237,.30);
  background:linear-gradient(145deg,#fff 0%,#fbf7ff 100%);
  box-shadow:0 18px 36px rgba(124,58,237,.10);
}
.roleIcon{
  width:86px;
  height:86px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 22px;
  font-size:42px;
  background:linear-gradient(145deg,#f6f0ff,#eef2ff);
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.06);
}
.roleCard h3{
  margin:0;
  font-size:27px;
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:950;
}
.roleCard p{
  margin:12px 0 0;
  color:#667085;
  font-size:20px;
  line-height:1.15;
  font-weight:600;
}
.roleBtn{
  margin-top:28px;
  width:100%;
  min-height:58px;
  border-radius:20px;
  border:0;
  font-size:19px;
  font-weight:950;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.roleBtn--primary{
  color:#fff;
  background:linear-gradient(135deg,var(--cp-purple),var(--cp-purple-2));
  box-shadow:0 16px 28px rgba(124,58,237,.28);
}
.roleBtn--ghost{
  color:#6d28d9;
  background:#fff;
  border:2px solid rgba(124,58,237,.42);
}
.roleBtn:active,.btnPrimary:active,.googleBtn:active,.cancelBtn:active{transform:scale(.99)}

.loginHead{
  display:flex;
  align-items:flex-start;
  gap:18px;
}
.loginIcon{
  width:66px;
  height:66px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  font-size:28px;
  color:#6d28d9;
  background:linear-gradient(145deg,#f4edff,#ffffff);
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.06);
}
.loginForm{
  margin-top:28px;
}
.inputWrap{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:70px;
  border:1px solid rgba(17,24,39,.10);
  border-radius:20px;
  background:#fff;
  margin-top:14px;
  padding:0 18px;
  box-shadow:0 8px 22px rgba(17,24,39,.025);
}
.inputWrap:focus-within{
  border-color:rgba(124,58,237,.48);
  box-shadow:0 0 0 5px rgba(124,58,237,.10),0 10px 28px rgba(124,58,237,.07);
}
.inputIcon{
  width:28px;
  display:flex;
  justify-content:center;
  opacity:.72;
  font-size:23px;
}
.inputWrap input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  font-size:21px;
  color:#111827;
  font-weight:600;
  padding:20px 0;
}
.inputWrap input::placeholder{color:#a3a7b2;font-weight:500}
.eyeBtn{
  border:0;
  background:transparent;
  width:42px;
  height:42px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  opacity:.66;
  cursor:pointer;
}
.eyeBtn.isActive{background:#f4edff;opacity:1}

.error{
  margin-top:14px;
  border:1px solid rgba(220,38,38,.18);
  background:#fef2f2;
  color:#991b1b;
  border-radius:16px;
  padding:12px 14px;
  font-size:14px;
  font-weight:850;
}
.btnPrimary{
  width:100%;
  min-height:64px;
  border:0;
  border-radius:18px;
  margin-top:22px;
  color:#fff;
  background:linear-gradient(135deg,var(--cp-purple),var(--cp-purple-2));
  box-shadow:0 18px 30px rgba(124,58,237,.28);
  font-size:21px;
  font-weight:950;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  cursor:pointer;
}
.divider{
  display:flex;
  align-items:center;
  gap:18px;
  color:#667085;
  margin:22px 0 18px;
  font-weight:900;
}
.divider:before,.divider:after{
  content:"";
  height:1px;
  background:rgba(17,24,39,.09);
  flex:1;
}
.googleBtn{
  width:100%;
  min-height:58px;
  border:1px solid rgba(17,24,39,.09);
  border-radius:18px;
  background:#fff;
  color:#111827;
  font-size:19px;
  font-weight:850;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(17,24,39,.025);
}
.googleMark{
  width:26px;
  height:26px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  color:#4285f4;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(17,24,39,.08);
}
.cancelBtn{
  width:100%;
  border:0;
  background:transparent;
  color:#667085;
  font-size:18px;
  font-weight:900;
  padding:18px 10px 6px;
  cursor:pointer;
}
.links{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:16px;
  align-items:center;
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid rgba(17,24,39,.08);
}
.links span{
  width:1px;
  height:28px;
  background:rgba(17,24,39,.10);
}
.links a{
  color:#6d28d9;
  text-decoration:none;
  font-size:18px;
  line-height:1.2;
  font-weight:950;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
}

@media (max-width:560px){
  .authShell{padding:22px 16px calc(28px + env(safe-area-inset-bottom));}
  .authBrand{gap:14px;padding:6px 4px 18px;}
  .authLogo{width:62px;height:62px;border-radius:18px;font-size:31px;}
  .authBrand h1{font-size:30px;}
  .authBrand p{font-size:16px;margin-top:6px;}
  .authCard{border-radius:26px;padding:24px 20px;margin-top:18px;}
  .authCardHead h2,.loginHead h2{font-size:28px;}
  .authCardHead p,.loginHead p{font-size:17px;margin-top:9px;}
  .roleGrid{gap:12px;margin-top:22px;}
  .roleCard{padding:22px 12px 18px;border-radius:22px;}
  .roleIcon{width:72px;height:72px;font-size:34px;margin-bottom:18px;}
  .roleCard h3{font-size:23px;}
  .roleCard p{font-size:16px;}
  .roleBtn{min-height:54px;font-size:17px;margin-top:22px;border-radius:18px;}
  .loginHead{gap:14px;}
  .loginIcon{width:56px;height:56px;border-radius:18px;font-size:24px;}
  .inputWrap{min-height:62px;border-radius:18px;padding:0 14px;}
  .inputWrap input{font-size:18px;padding:16px 0;}
  .btnPrimary{min-height:58px;font-size:18px;}
  .googleBtn{min-height:54px;font-size:16px;}
  .links{gap:10px;}
  .links a{font-size:15px;}
}

@media (max-width:390px){
  .roleGrid{grid-template-columns:1fr;}
  .roleCard{display:grid;grid-template-columns:auto 1fr;column-gap:12px;text-align:left;align-items:center;}
  .roleIcon{grid-row:1 / span 2;width:58px;height:58px;font-size:28px;margin:0;}
  .roleBtn{grid-column:1 / -1;margin-top:16px;}
}

/* =========================================================
   Login · Selector de rol premium v6.3
   Corrige el chooser que quedaba al pie sin modal.
   ========================================================= */
.cpOverlay{
  position:fixed;
  inset:0;
  z-index:99990;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
  background:rgba(15,23,42,.62);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:cpFadeIn .18s ease-out both;
}
.cpPanel{
  width:min(720px,100%);
  max-height:calc(100vh - 40px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.72);
  border-radius:32px;
  box-shadow:0 -18px 62px rgba(15,23,42,.28);
  padding:20px;
  transform-origin:bottom center;
  animation:cpSlideUp .22s cubic-bezier(.2,.8,.2,1) both;
}
.cpHandle{
  width:76px;
  height:8px;
  border-radius:999px;
  background:#e4e7ee;
  margin:0 auto 18px;
}
.cpPanel__head{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:22px;
}
.cpHeadIcon{
  width:68px;
  height:68px;
  border-radius:24px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#7c3aed;
  font-size:32px;
  background:linear-gradient(145deg,#f5edff,#ffffff);
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.08);
}
.cpHeadText{min-width:0;flex:1;padding-top:4px;}
.cpTitle{
  margin:0;
  font-size:32px;
  line-height:1.04;
  letter-spacing:-.04em;
  font-weight:950;
  color:#111827;
}
.cpSub{
  margin-top:8px;
  color:#536179;
  font-size:20px;
  line-height:1.22;
  font-weight:600;
}
.cpClose{
  width:58px;
  height:58px;
  border:0;
  border-radius:999px;
  flex:0 0 auto;
  background:#f2f4f8;
  color:#111827;
  font-size:26px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.cpList{display:grid;gap:18px;}
.cpItem{
  width:100%;
  min-height:142px;
  border:2px solid rgba(124,58,237,.25);
  border-radius:24px;
  background:linear-gradient(145deg,#ffffff 0%,#fbf7ff 100%);
  display:grid;
  grid-template-columns:106px 1fr 34px;
  gap:18px;
  align-items:center;
  padding:18px;
  text-align:left;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(124,58,237,.07);
  -webkit-tap-highlight-color:transparent;
}
.cpItem:active{transform:scale(.992);}
.cpItem--presidente{border-color:rgba(37,99,235,.20);background:linear-gradient(145deg,#ffffff 0%,#f4f8ff 100%);box-shadow:0 12px 28px rgba(37,99,235,.06);}
.cpItem--tesorero{border-color:rgba(16,185,129,.22);background:linear-gradient(145deg,#ffffff 0%,#f0fdf8 100%);box-shadow:0 12px 28px rgba(16,185,129,.06);}
.cpItem__icon{
  width:88px;
  height:88px;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  background:linear-gradient(145deg,#f5edff,#eef2ff);
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.06);
}
.cpItem--presidente .cpItem__icon{background:linear-gradient(145deg,#eff6ff,#ffffff);}
.cpItem--tesorero .cpItem__icon{background:linear-gradient(145deg,#ecfdf5,#ffffff);}
.cpItem__body{min-width:0;}
.cpItem__label{
  color:#111827;
  font-size:26px;
  line-height:1.05;
  letter-spacing:-.035em;
  font-weight:950;
}
.cpItem__pill{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin-top:10px;
  padding:6px 12px;
  border-radius:999px;
  color:#6d28d9;
  background:#f3e8ff;
  font-size:16px;
  line-height:1.05;
  font-weight:950;
}
.cpItem--presidente .cpItem__pill{color:#2563eb;background:#dbeafe;}
.cpItem--tesorero .cpItem__pill{color:#059669;background:#d1fae5;}
.cpItem__desc{
  margin-top:10px;
  color:#536179;
  font-size:18px;
  line-height:1.35;
  font-weight:600;
}
.cpItem__chev{
  color:#7c3aed;
  font-size:42px;
  font-weight:950;
  justify-self:end;
}
.cpItem--presidente .cpItem__chev{color:#2563eb;}
.cpItem--tesorero .cpItem__chev{color:#059669;}
.cpCancel{
  width:100%;
  min-height:58px;
  border:0;
  border-radius:22px;
  margin-top:24px;
  background:#f4f6fa;
  color:#667085;
  font-size:19px;
  font-weight:950;
  cursor:pointer;
}
@keyframes cpFadeIn{from{opacity:0}to{opacity:1}}
@keyframes cpSlideUp{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:560px){
  .cpOverlay{padding:16px 14px calc(16px + env(safe-area-inset-bottom));}
  .cpPanel{border-radius:28px;padding:18px;}
  .cpPanel__head{gap:14px;margin-bottom:18px;}
  .cpHeadIcon{width:58px;height:58px;border-radius:21px;font-size:28px;}
  .cpTitle{font-size:28px;}
  .cpSub{font-size:17px;margin-top:7px;}
  .cpClose{width:50px;height:50px;font-size:23px;}
  .cpList{gap:14px;}
  .cpItem{min-height:132px;grid-template-columns:86px 1fr 24px;gap:14px;border-radius:22px;padding:16px;}
  .cpItem__icon{width:74px;height:74px;border-radius:22px;font-size:35px;}
  .cpItem__label{font-size:23px;}
  .cpItem__pill{font-size:14px;padding:5px 10px;}
  .cpItem__desc{font-size:16px;line-height:1.32;}
  .cpItem__chev{font-size:34px;}
}
@media(max-width:390px){
  .cpItem{grid-template-columns:68px 1fr 20px;gap:12px;padding:14px;}
  .cpItem__icon{width:62px;height:62px;border-radius:19px;font-size:30px;}
  .cpItem__label{font-size:21px;}
  .cpItem__desc{font-size:14px;}
}

/* ===== Admin access card ===== */
.authCard--admin{
  border:1px solid rgba(109,40,217,.14);
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(246,241,255,.92));
}
.authCardHead--admin{
  display:flex;
  align-items:center;
  gap:14px;
}
.authIcon--admin{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#ede9fe,#ffffff);
  color:#6d28d9;
  box-shadow:0 14px 28px rgba(109,40,217,.10);
}
.adminPanelBtn{
  width:100%;
  margin-top:16px;
  border:0;
  border-radius:22px;
  padding:16px 18px;
  font-weight:950;
  color:#fff;
  font-size:16px;
  background:linear-gradient(135deg,#111827,#4c1d95);
  box-shadow:0 18px 38px rgba(17,24,39,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.adminPanelBtn span{font-size:22px;line-height:1}
.adminHint{
  margin:10px 0 0;
  color:#667085;
  font-weight:800;
  font-size:12px;
  text-align:center;
}


/* =========================================================
   V60 · Login limpio y accesos separados
   ========================================================= */
body.authPremium--loginOnly{
  background:
    radial-gradient(circle at 50% -10%, rgba(124,58,237,.12), transparent 38%),
    linear-gradient(180deg,#fff 0%, #f8fafc 48%, #fff 100%);
}
.authShell--clean{max-width:560px;padding-top:28px;}
.authBrand--center{justify-content:center;text-align:left;padding-bottom:10px;}
.authCard--loginClean{margin-top:18px;}
.loginHead--clean{align-items:center;}
.links--clean{grid-template-columns:1fr;border-top:0;padding-top:10px;margin-top:12px;}
.links--clean span{display:none;}
.authCard--entryLinks{padding:20px;margin-top:16px;box-shadow:0 16px 38px rgba(17,24,39,.07);}
.entryLinksHead h2{margin:0;font-size:22px;font-weight:950;letter-spacing:-.02em;}
.entryLinksHead p{margin:6px 0 0;color:#667085;font-weight:700;line-height:1.3;}
.entryLinkGrid{display:grid;gap:10px;margin-top:14px;}
.entryLinkCard{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;text-decoration:none;color:#111827;border:1px solid rgba(17,24,39,.08);border-radius:18px;background:#fff;padding:14px 14px;box-shadow:0 8px 20px rgba(17,24,39,.035);}
.entryLinkCard--primary{border-color:rgba(124,58,237,.20);background:linear-gradient(135deg,#fff,#fbf7ff);}
.entryLinkIcon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#f4edff;font-size:23px;}
.entryLinkCard b{display:block;font-size:15px;font-weight:950;}
.entryLinkCard small{display:block;margin-top:3px;color:#667085;font-size:12px;font-weight:800;}
.entryLinkCard strong{font-size:26px;color:#7c3aed;}
.authLegal{margin:18px auto 0;text-align:center;color:#667085;font-size:13px;font-weight:800;line-height:1.8;}
.authLegal a{color:#6d28d9;text-decoration:none;font-weight:950;}
.internalAccess{margin-top:8px;}
.internalAccess summary{cursor:pointer;color:#667085;font-size:12px;}
.internalAccess a{display:inline-block;margin:6px 6px 0;color:#667085;font-size:12px;}
@media(max-width:560px){
  .authShell--clean{padding-top:18px;}
  .authBrand--center{justify-content:flex-start;}
  .authCard--loginClean{padding:22px 18px;}
  .authCard--entryLinks{padding:16px;}
}

/* =========================================================
   V70 · Login premium alineado a landing
   ========================================================= */
.srOnly{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.loginPageShell{
  width:min(1180px,100%);
  min-height:100vh;
  margin:0 auto;
  padding:28px 22px calc(36px + env(safe-area-inset-bottom));
}
.loginBack{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#6d28d9;
  text-decoration:none;
  font-weight:950;
  margin:0 0 18px;
}
.loginBack span:first-child{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#f4edff;
}
.loginPanel{
  display:grid;
  grid-template-columns:.94fr 1.06fr;
  gap:34px;
  align-items:stretch;
}
.loginVisual{
  position:relative;
  min-height:560px;
  border-radius:34px;
  overflow:hidden;
  background:#f4edff;
  box-shadow:0 24px 58px rgba(17,24,39,.10);
}
.loginVisual img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.01);
}
.loginVisual:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0) 46%,rgba(5,11,61,.68) 100%);
}
.loginVisualCard{
  position:absolute;
  z-index:2;
  left:26px;
  right:26px;
  bottom:26px;
  display:grid;
  grid-template-columns:58px 1fr;
  gap:14px;
  align-items:center;
  padding:18px;
  border-radius:24px;
  color:#050b3d;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.68);
  box-shadow:0 18px 42px rgba(17,24,39,.16);
  backdrop-filter:blur(18px);
}
.loginVisualCard strong{display:block;font-size:18px;font-weight:950}
.loginVisualCard small{display:block;margin-top:4px;color:#4b5563;font-weight:750}
.loginVisualIcon{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,#6d28d9,#7c3aed);
}
.loginContent{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.loginBrandBlock{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 20px;
}
.loginBrandMark{
  width:60px;
  height:60px;
  border-radius:18px;
  display:block;
  box-shadow:0 16px 30px rgba(109,40,217,.20);
}
.loginBrandMark img{
  width:100%;
  height:100%;
  display:block;
  border-radius:inherit;
  object-fit:cover;
}
.loginBrandBlock h1{
  margin:0;
  color:#050b3d;
  font-size:38px;
  line-height:1;
  font-weight:950;
  letter-spacing:0;
}
.loginBrandBlock p{
  margin:6px 0 0;
  color:#56607e;
  font-size:18px;
  font-weight:750;
}
.authCard--loginPremium{
  margin:0;
  padding:34px;
  border-radius:30px;
  background:rgba(255,255,255,.94);
}
.loginHead--premium{align-items:center}
.loginHead--premium .loginIcon,
.inputIcon,
.loginVisualIcon,
.appleMark,
.entryMiniIcon{
  font-size:0;
}
.loginHead--premium .loginIcon:before,
.inputIcon:before,
.loginVisualIcon:before,
.appleMark:before,
.entryMiniIcon:before,
.eyeBtn--premium:before{
  content:"";
  width:28px;
  height:28px;
  display:block;
  background:currentColor;
  -webkit-mask:center/contain no-repeat;
  mask:center/contain no-repeat;
}
.loginHead--premium .loginIcon:before,
.loginVisualIcon:before{
  width:32px;
  height:32px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M12 14v2'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M12 14v2'/%3E%3C/svg%3E");
}
.inputIcon--mail:before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%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");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%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");
}
.inputIcon--key:before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='m10.8 12.2 8-8'/%3E%3Cpath d='m15 5 4 4'/%3E%3Cpath d='m17 3 4 4'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='m10.8 12.2 8-8'/%3E%3Cpath d='m15 5 4 4'/%3E%3Cpath d='m17 3 4 4'/%3E%3C/svg%3E");
}
.eyeBtn--premium{
  flex:0 0 auto;
  color:#6d28d9;
  opacity:.72;
}
.eyeBtn--premium:before{
  width:22px;
  height:22px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.eyeBtn--premium.isActive:before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.7 5.1A10.8 10.8 0 0 1 12 5c6.5 0 10 7 10 7a18.2 18.2 0 0 1-3.1 4.1'/%3E%3Cpath d='M6.6 6.6C3.7 8.5 2 12 2 12s3.5 7 10 7c1.7 0 3.2-.5 4.4-1.2'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.7 5.1A10.8 10.8 0 0 1 12 5c6.5 0 10 7 10 7a18.2 18.2 0 0 1-3.1 4.1'/%3E%3Cpath d='M6.6 6.6C3.7 8.5 2 12 2 12s3.5 7 10 7c1.7 0 3.2-.5 4.4-1.2'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
}
.appleMark{
  width:26px;
  height:26px;
  color:#111827;
  display:grid;
  place-items:center;
}
.appleMark:before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M16.4 2.1c.1 1.1-.3 2.2-1 3-.8.9-2 1.5-3.1 1.4-.1-1.1.4-2.2 1.1-2.9.8-.9 2.1-1.5 3-1.5ZM20.2 17.7c-.5 1.1-.8 1.6-1.5 2.6-1 1.4-2.4 3.1-4.1 3.1-1.5 0-1.9-1-3.9-1s-2.4 1-3.9 1c-1.7 0-3-1.5-4-2.9C.1 16.4.6 11.5 4 9.4c1.2-.8 2.7-1.2 4.1-1.2 1.5 0 2.9 1 3.7 1 .8 0 2.3-1.2 3.9-1 1.5.1 3 .8 4 2-3.5 1.9-2.9 6.9.5 7.5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M16.4 2.1c.1 1.1-.3 2.2-1 3-.8.9-2 1.5-3.1 1.4-.1-1.1.4-2.2 1.1-2.9.8-.9 2.1-1.5 3-1.5ZM20.2 17.7c-.5 1.1-.8 1.6-1.5 2.6-1 1.4-2.4 3.1-4.1 3.1-1.5 0-1.9-1-3.9-1s-2.4 1-3.9 1c-1.7 0-3-1.5-4-2.9C.1 16.4.6 11.5 4 9.4c1.2-.8 2.7-1.2 4.1-1.2 1.5 0 2.9 1 3.7 1 .8 0 2.3-1.2 3.9-1 1.5.1 3 .8 4 2-3.5 1.9-2.9 6.9.5 7.5Z'/%3E%3C/svg%3E");
}
.socialLoginGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.btnPrimary--login{background:linear-gradient(135deg,#5b21b6,#7c3aed)}
.loginEntryLinks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:20px;
}
.loginEntryLinks a{
  min-height:78px;
  display:grid;
  grid-template-columns:46px 1fr;
  gap:12px;
  align-items:center;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(17,24,39,.08);
  color:#111827;
  text-decoration:none;
  background:#fff;
  box-shadow:0 8px 20px rgba(17,24,39,.035);
}
.loginEntryLinks a:first-child{background:linear-gradient(135deg,#fff,#fbf7ff)}
.loginEntryLinks a:last-child{background:linear-gradient(135deg,#fff,#fff7ed)}
.entryMiniIcon{
  width:46px;
  height:46px;
  border-radius:15px;
  display:grid;
  place-items:center;
}
.entryMiniIcon--parent{color:#6d28d9;background:#f0e8ff}
.entryMiniIcon--board{color:#f97316;background:#ffead0}
.entryMiniIcon--parent:before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.entryMiniIcon--board:before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.loginEntryLinks strong{display:block;font-size:15px;font-weight:950}
.loginEntryLinks small{display:block;margin-top:3px;color:#667085;font-size:12px;font-weight:800}
@media(max-width:900px){
  .loginPanel{grid-template-columns:1fr;gap:18px}
  .loginVisual{
    min-height:230px;
    border-radius:28px;
  }
  .loginVisual img{object-position:center 36%;transform:scale(1)}
  .loginVisualCard{left:18px;right:18px;bottom:18px;padding:14px;border-radius:20px}
}
@media(max-width:560px){
  .loginPageShell{padding:18px 16px calc(28px + env(safe-area-inset-bottom))}
  .loginBack{margin-bottom:12px}
  .loginVisual{min-height:176px}
  .loginVisualCard{display:none}
  .loginBrandBlock{margin-bottom:14px}
  .loginBrandMark{width:50px;height:50px;border-radius:15px}
  .loginBrandBlock h1{font-size:30px}
  .loginBrandBlock p{font-size:15px}
  .authCard--loginPremium{padding:22px 18px;border-radius:26px}
  .loginHead--premium .loginIcon{width:54px;height:54px}
  .socialLoginGrid{grid-template-columns:1fr}
  .loginEntryLinks{grid-template-columns:1fr}
}