/* =========================
   INDEX.CSS — Login card in stile HOME
   (non tocca la logica, solo UI)
========================= */

/* usa lo stesso wrap della home, ma serve un po’ di spazio */
.indexPage .wrap{
  margin:-54px auto 0; /* come home */
}

/* blocco login sotto al profilo */
.authSection{
  margin-top: 18px;
  display:flex;
  justify-content:center;
}

/* card più piccola (come chiedi) */
.authCard{
  width: min(360px, 92vw); /* più stretta */
  margin: 0 auto;
  border:1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  box-shadow: var(--shadow);
  padding: 18px 16px 16px;
}


/* bottone telegram più piccolo */
.authCard #btnTelegram{
  height: 44px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 650;
}

/* icona telegram */
.authCard .tg-icon{
  width:20px;
  height:20px;
}

/* divider “OR USE” più sottile e piccolo */
.authDivider{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 14px 0 12px;
  color: color-mix(in srgb, var(--muted) 80%, transparent);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.authDivider::before,
.authDivider::after{
  content:"";
  height:1px;
  flex:1;
  background: color-mix(in srgb, var(--line) 80%, transparent);
}

/* input VIP più piccolo */
.authField{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border-radius: 14px;
  padding: 10px 12px;
  height: 46px;
}

.authField .icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: color-mix(in srgb, var(--text) 70%, transparent);
}

.authField input{
  border:0;
  outline:0;
  width:100%;
  font-size: 13px;
  background: transparent;
  color: var(--text);
  letter-spacing: .02em;
}

/* login button più piccolo */
.authLoginBtn{
  width:100%;
  height: 44px;
  border-radius: 14px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
}

/* riga subscribe */
.authBottom{
  margin-top: 12px;
  text-align:center;
  font-size: 12px;
  color: var(--muted);
}
.authBottom a{
  font-weight: 800;
  color: color-mix(in srgb, var(--text) 86%, transparent);
}
.authBottom a:hover{
  text-decoration: underline;
}

/* status testi */
.authCard .status{
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
  text-align:center;
}

/* su mobile rendi ancora più compatta */
@media (max-width: 540px){
  .authCard{
    padding: 16px 14px 14px;
    border-radius: 16px;
  }
  .authCard #btnTelegram{ height: 42px; }
  .authField{ height: 44px; }
  .authLoginBtn{ height: 42px; }
}
/* Telegram primary button */
.tgPrimary{
  background: linear-gradient(180deg, #44a3ff 0%, #2f7df7 100%);
  color: #fff;
  border-color: rgba(47,125,247,.95);
  box-shadow: 0 10px 22px rgba(47,125,247,.25);
}

.tgPrimary:hover{
  filter: brightness(1.02);
}

:root[data-theme="dark"] .tgPrimary{
  border-color: rgba(255,255,255,.18);
}