[hidden]{display:none!important;}

.authmodal{
  position:fixed; inset:0; z-index:160;
  display:flex; align-items:center; justify-content:center;
  padding:calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 12px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .12s ease, visibility 0s linear .12s;
  z-index: 6000;
}
.authmodal.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .12s ease, visibility 0s linear 0s;
}

.authmodal.is-menu .authmodal__panel{ width:min(420px, 100%); }
.authmodal.is-menu .authnotice{ display:none!important; }

.authmodal__backdrop{
  position:absolute; inset:0; border:0; cursor:pointer;
  background:rgba(0,0,0,.52);
  opacity:0;
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  transition:opacity .12s ease;
}
.authmodal.is-open .authmodal__backdrop{opacity:1;}

.authmodal__panel{
  position:relative;
  width:min(560px,100%);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 240px at 20% 0%, rgba(160,120,255,.14), transparent 60%),
    radial-gradient(900px 240px at 95% 0%, rgba(88,242,140,.10), transparent 60%),
    rgba(11,13,18,.96);
  box-shadow:0 16px 44px rgba(0,0,0,.45);
  overflow:hidden;
  max-height:calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
  transform:translateY(6px) scale(.994);
  opacity:0;
  transition:transform .16s cubic-bezier(.2,.9,.2,1), opacity .12s ease;
  outline:none;
  z-index: 6000;
}
.authmodal.is-open .authmodal__panel{transform:none; opacity:1;}

.authmodal__top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(140% 200% at 20% 0%, rgba(160,120,255,.12), transparent 58%),
    radial-gradient(140% 200% at 95% 0%, rgba(88,242,140,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    rgba(8,10,14,.62);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
}
.authmodal__title{
  font-family:var(--font-display);
  font-weight:950;
  letter-spacing:.02em;
  font-size:16px;
  color:rgba(255,255,255,.94);
}
.authmodal__x{
  width:36px; height:36px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(140% 120% at 30% 20%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  color:rgba(255,255,255,.92);
  display:grid; place-items:center;
  font-family:var(--font-display);
  font-weight:950;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .14s ease, filter .18s ease, border-color .18s ease;
}
.authmodal__x:hover{transform:translateY(-1px); filter:brightness(1.05); border-color:rgba(255,255,255,.16);}

.authmodal__body{
  padding:14px 12px 12px;
  display:grid; gap:12px;
  overflow:auto;
}

.authmenu{display:grid; gap:12px;}
.authmenu__section{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
  border-radius:18px;
  padding:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.authmenu__head{display:grid; gap:3px; margin-bottom:10px;}
.authmenu__h{
  font-family:var(--font-display);
  font-weight:950;
  letter-spacing:.02em;
  color:rgba(255,255,255,.92);
}
.authmenu__sub{
  font-weight:850;
  color:rgba(255,255,255,.60);
  font-size:12px;
}

.authaccounts{display:grid; gap:8px;}
.authacc{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:rgba(255,255,255,.88);
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  transition:transform .14s ease, filter .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.authacc:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 16px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.10);
}
.authacc__nick{
  font-family:var(--font-display);
  font-weight:950;
  letter-spacing:.02em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.authacc__badge{
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.75);
  background:rgba(0,0,0,.18);
}

.authacc.is-active{
  border-color:rgba(88,242,140,.26);
  box-shadow:0 0 0 1px rgba(88,242,140,.10), 0 18px 44px rgba(0,0,0,.28);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(88,242,140,.18), transparent 55%),
    radial-gradient(120% 120% at 80% 0%, rgba(160,120,255,.12), transparent 60%),
    rgba(0,0,0,.14);
}
.authacc.is-active .authacc__badge{
  border-color:rgba(88,242,140,.30);
  background:rgba(88,242,140,.12);
  color:rgba(255,255,255,.88);
}

.authbalance{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.authbalance__label{
  font-weight:950;
  color:rgba(255,255,255,.72);
}
.authbalance__value{
  font-family:var(--font-display);
  font-weight:1000;
  font-size:18px;
  color:rgba(255,255,255,.94);
  letter-spacing:.02em;
}

.authactions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.authaction{
  min-height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.14);
  color:rgba(255,255,255,.92);
  font-weight:950;
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .14s ease, filter .18s ease, border-color .18s ease;
}
.authaction:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
  border-color:rgba(255,255,255,.18);
}
.authaction--primary{
  border-color:rgba(160,120,255,.22);
  background:radial-gradient(140% 140% at 30% 10%, rgba(160,120,255,.16), transparent 55%), rgba(0,0,0,.14);
}
.authaction--danger{
  border-color:rgba(255,90,90,.22);
  background:radial-gradient(140% 140% at 30% 10%, rgba(255,90,90,.14), transparent 55%), rgba(0,0,0,.14);
}

.authgrid{display:grid; gap:10px;}

.authbtn{
  width:100%;
  min-height:58px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  color:rgba(255,255,255,.92);
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px;
  box-shadow:0 14px 34px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .14s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
  position:relative; overflow:hidden;
}
.authbtn::after{
  content:"";
  position:absolute; inset:-40% -60%;
  background:linear-gradient(120deg, transparent 45%, rgba(255,255,255,.18) 50%, transparent 55%);
  transform:translateX(-40%) rotate(8deg);
  opacity:0;
  transition:opacity .2s ease, transform .6s ease;
}
.authbtn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 20px 54px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);
  filter:brightness(1.03);
}
.authbtn:hover::after{opacity:1; transform:translateX(40%) rotate(8deg);}
.authbtn:disabled{opacity:.55; cursor:not-allowed; transform:none; filter:none;}
.authbtn:disabled::after{opacity:0;}

.authbtn__left{display:inline-flex; align-items:center; gap:12px; min-width:0;}
.authbtn__icon{
  width:46px; height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
  display:grid; place-items:center;
  flex:0 0 auto;
}
.authbtn__icon svg{width:24px; height:24px;}
.authbtn__text{display:flex; flex-direction:column; gap:3px; min-width:0;}
.authbtn__label{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.authbtn__sub{
  font-size:12px;
  font-weight:800;
  color:rgba(255,255,255,.62);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.authbtn__chev{
  opacity:.85; font-weight:1000;
  flex:0 0 auto;
  width:38px; height:38px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
  display:grid; place-items:center;
}

.authtoken{display:grid; gap:10px;}
.authtoken__row{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center;}
.authtoken__input{
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  color:rgba(255,255,255,.92);
  outline:none;
  font-weight:800;
}
.authtoken__copy{
  min-height:44px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  color:rgba(255,255,255,.92);
  font-weight:900;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .14s ease, filter .18s ease, border-color .18s ease;
}
.authtoken__copy:hover{transform:translateY(-1px); filter:brightness(1.04); border-color:rgba(255,255,255,.18);}

.authcooldown{color:rgba(255,255,255,.70); font-weight:950; padding:2px 2px 0;}

.authlinks{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.authlink{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;
  color:rgba(255,255,255,.92);
  font-weight:950;
  letter-spacing:.02em;
  background:rgba(0,0,0,.16);
  box-shadow:0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .14s ease, filter .18s ease, border-color .18s ease;
}
.authlink:hover{transform:translateY(-1px); filter:brightness(1.05); border-color:rgba(255,255,255,.18);}
.authlinks--locked .authlink{opacity:.70;}
.authlinks--locked .authlink:hover{transform:none; filter:none; border-color:rgba(255,255,255,.12);}

.authnotice{
  min-height:56px; max-height:56px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.80);
  font-weight:850;
  line-height:1.25;
  overflow:hidden;
  display:flex; align-items:center;
}
.authnotice.is-ok{
  border-color:rgba(88,242,140,.18);
  box-shadow:0 0 0 1px rgba(88,242,140,.08), 0 14px 34px rgba(0,0,0,.20);
}
.authnotice.is-warn{
  border-color:rgba(255,190,80,.18);
  box-shadow:0 0 0 1px rgba(255,190,80,.08), 0 14px 34px rgba(0,0,0,.20);
}
.authnotice.is-bad{
  border-color:rgba(255,90,90,.18);
  box-shadow:0 0 0 1px rgba(255,90,90,.08), 0 14px 34px rgba(0,0,0,.20);
}

.authmodal__x:focus-visible,
.authbtn:focus-visible,
.authtoken__copy:focus-visible,
.authlink:focus-visible,
.authacc:focus-visible,
.authaction:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:2px;
}

@media (max-width:760px){
  .authmodal{padding:12px 10px calc(env(safe-area-inset-bottom) + 10px);}
  .authmodal__panel{width:100%; border-radius:18px; z-index: 6000;}
  .authbtn__sub{display:none;}
  .authlinks{grid-template-columns:1fr;}
  .authactions{grid-template-columns:1fr;}
}

/* чтобы “резина” не прокидывала скролл на фон (auth modal) */
.authmodal,
.authmodal__panel{
  overscroll-behavior: contain;
}

/* на всякий: фон не должен тащить страницу */
.authmodal__backdrop{
  touch-action: none;
}