* { box-sizing: border-box; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  background: #0f1420;
  color: #e6e9f0;
  min-height: 100vh;
}
a { color: inherit; }

/* --- Auth card (login/register/verify) --- */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.auth-card {
  width: 380px;
  background: #161d30;
  border: 1px solid #263050;
  border-radius: 14px;
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.auth-logo {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, #7d9bff, #3b5bfd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 4px;
}
.auth-subtitle { color: #9aa4c0; font-size: 13px; margin: 0 0 24px; }

.auth-input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid #2a3350;
  background: #10182c;
  color: #e6e9f0;
  font-size: 14px;
  margin-bottom: 10px;
}
.auth-input::placeholder { color: #6b7699; }
.auth-input:focus { outline: none; border-color: #3b5bfd; }

.auth-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #2a3350;
  background: #1c2440;
  color: #e6e9f0;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 12px;
}
.auth-btn:hover { background: #232c4d; }
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-btn-primary { background: #3b5bfd; border-color: #3b5bfd; }
.auth-btn-primary:hover { background: #2f4bd9; }

#googleBtnContainer { display: flex; justify-content: center; margin-bottom: 14px; }

.auth-toggle { font-size: 12px; color: #9aa4c0; margin: 10px 0 18px; }
.auth-toggle a { color: #7d9bff; cursor: pointer; text-decoration: none; }
.auth-toggle a:hover { text-decoration: underline; }

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 16px; color: #6b7699; font-size: 12px;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #263050; }

.tg-panel {
  margin-top: 14px; padding: 14px;
  background: #10182c; border: 1px solid #263050; border-radius: 10px;
  font-size: 13px; color: #c3cbe6; display: none;
}
.tg-link { display: block; margin: 8px 0; color: #7d9bff; word-break: break-all; }

.auth-status { min-height: 18px; font-size: 13px; color: #ff6b6b; margin: 14px 0 0; }

/* --- Dashboard --- */
.dash-body { display: none; }
header {
  padding: 18px 28px;
  background: linear-gradient(135deg, #1a2138, #0f1420);
  border-bottom: 1px solid #2a3350;
  display: flex; align-items: center; justify-content: space-between;
}
header .logo { font-size: 18px; font-weight: 700; background: linear-gradient(135deg, #7d9bff, #3b5bfd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.who { font-size: 13px; color: #9aa4c0; }
.logout-btn {
  background: transparent; border: 1px solid #2a3350; color: #9aa4c0;
  padding: 6px 14px; border-radius: 8px; font-size: 12px; cursor: pointer; margin-left: 12px;
}
.logout-btn:hover { background: #1c2440; color: #e6e9f0; }

main { padding: 40px 28px; max-width: 480px; margin: 0 auto; }
.panel {
  background: #161d30; border: 1px solid #263050; border-radius: 14px; padding: 28px; text-align: center;
}
.badge { font-size: 12px; padding: 4px 12px; border-radius: 999px; display: inline-block; margin-bottom: 14px; }
.badge-active { background: #123a1f; color: #6ee787; }
.badge-inactive { background: #3a1212; color: #ff8b8b; }
.panel h2 { font-size: 18px; margin: 0 0 10px; }
.panel p { color: #9aa4c0; font-size: 14px; margin: 0 0 20px; }
.plan-price { font-size: 32px; font-weight: 800; margin: 6px 0; color: #7d9bff; }
.plan-price span { font-size: 13px; color: #9aa4c0; font-weight: 400; }