/* UPAK Telegram Connect – Front Styles (v1.1.1) */
.upak-tg-connect{display:grid;gap:14px;width:100%;}
.upak-tg-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.upak-tg-group{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.text-left{justify-items:start;text-align:left;}
.text-center{justify-items:center;text-align:center;}
.text-right{justify-items=end;text-align:right;}

.upak-tg-button{
  --glass-bg: rgba(255,255,255,.08);
  --glass-br: rgba(255,255,255,.25);
  --brand: #7c3aed;
  --brand-2: #a855f7;
  position: relative;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid var(--glass-br);
  background: linear-gradient(135deg,var(--glass-bg),rgba(255,255,255,.02));
  box-shadow: 0 8px 30px rgba(124,58,237,.15), inset 0 1px 0 rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.upak-tg-button::before{
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(124,58,237,.45), rgba(168,85,247,.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.upak-tg-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(124,58,237,.25);
  border-color: rgba(124,58,237,.35);
}
.upak-tg-button:focus{ outline: none; }
.upak-tg-button:focus-visible{
  box-shadow: 0 0 0 3px rgba(124,58,237,.35), 0 10px 30px rgba(124,58,237,.25);
}

@media (prefers-color-scheme: light){
  .upak-tg-button{background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.75));}
}
@media (max-width: 480px){
  .upak-tg-row{flex-direction: column;}
  .upak-tg-button{width: 100%; justify-content: center;}
}