/* ===================================================
   PULSE CHAT — Auth Page
   =================================================== */
#page-auth { justify-content:center; align-items:center; background:var(--gradient-bg); position:relative; }
#page-auth .landing-bg { position:absolute; }

.auth-card { position:relative; z-index:1; width:100%; max-width:420px; background:var(--glass); backdrop-filter:blur(30px); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:40px 32px; box-shadow:var(--shadow); animation:fadeUp 0.5s ease both; }
.auth-logo { font-size:32px; font-weight:800; text-align:center; margin-bottom:8px; background:var(--gradient-accent); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.auth-subtitle { text-align:center; color:var(--text-2); font-size:15px; margin-bottom:32px; }
.auth-tabs { display:flex; background:var(--input-bg); border-radius:10px; padding:3px; margin-bottom:28px; }
.auth-tab { flex:1; padding:10px; text-align:center; font-size:14px; font-weight:600; border-radius:8px; color:var(--text-2); transition:all 0.2s; cursor:pointer; }
.auth-tab.active { background:var(--accent); color:#fff; box-shadow:0 2px 8px rgba(56,189,248,0.3); }
.auth-form { display:flex; flex-direction:column; gap:16px; }
.auth-submit { width:100%; height:48px; background:var(--accent); color:#fff; border-radius:10px; font-size:16px; font-weight:600; margin-top:8px; transition:background var(--transition-fast),transform var(--transition-fast); }
.auth-submit:hover { background:var(--accent-dark); }
.auth-submit:active { transform:scale(0.98); }
.auth-footer { text-align:center; margin-top:20px; font-size:14px; color:var(--text-2); }
.auth-footer a { color:var(--accent); font-weight:500; cursor:pointer; }
.auth-back { position:absolute; top:16px; left:16px; z-index:2; }

/* Auth spinner */
.auth-spinner {
  width:32px; height:32px;
  border:3px solid var(--divider);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
  margin:0 auto;
}

/* Telegram widget container */
#tgWidgetContainer { min-height:48px; }
#tgWidgetContainer iframe { border-radius:12px !important; }

.auth-notice {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--input-border);
  background: var(--surface);
  color: var(--text-1);
  font-size: 13px;
  line-height: 1.45;
}

.auth-notice strong {
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 768px) { .auth-card { margin:16px; padding:32px 24px; } }

/* ===== Liquid glass pass ===== */
.auth-card {
  overflow: hidden;
  box-shadow: var(--glass-shadow), var(--liquid-inner-shadow);
}

.auth-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--liquid-sheen);
}

.auth-submit {
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 74%, #ffffff 26%));
  border: 1px solid color-mix(in oklab, var(--accent) 70%, #ffffff 30%);
  box-shadow: 0 10px 24px rgba(41, 132, 214, 0.25);
}

.auth-submit:hover {
  box-shadow: 0 14px 28px rgba(41, 132, 214, 0.32);
}

.auth-notice {
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
  background: var(--glass-bg-popup);
  border-color: var(--glass-border);
}