/* ===== AUTH SCREEN ===== */
.auth-screen {
  display: flex; align-items: center; justify-content: center;
  height: 100vh; background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
}
.auth-box {
  background: #fff; border-radius: 24px; padding: 44px 40px;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  width: 400px; max-width: 90vw;
}
.auth-box h1 { font-size: 34px; margin-bottom: 6px; background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.auth-box p { color: var(--text-secondary); margin-bottom: 24px; font-size: 14px; }
.auth-tabs { display: flex; margin-bottom: 20px; border-bottom: 2px solid var(--border-color); }
.auth-tabs button { flex: 1; padding: 10px; border: none; background: #fff; font-size: 14px; cursor: pointer; color: #999; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; }
.auth-tabs button.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.auth-form { display: none; }
.auth-form.active { display: block; }
.auth-form input {
  width: 100%; padding: 13px 16px; border: 2px solid #e0e0e0;
  border-radius: 12px; font-size: 15px; outline: none; transition: border-color 0.2s; margin-bottom: 12px;
}
.auth-form input:focus { border-color: var(--primary); }
.auth-form button {
  width: 100%; padding: 14px; margin-top: 4px;
  background: var(--primary-gradient);
  color: #fff; border: none; border-radius: 12px; font-size: 16px;
  cursor: pointer; font-weight: 600; transition: transform 0.1s;
}
.auth-form button:hover { box-shadow: 0 4px 20px rgba(102,126,234,0.4); }
.auth-form button:active { transform: scale(0.98); }
.auth-form button:disabled { opacity: 0.6; cursor: not-allowed; }
.auth-error { color: var(--danger); font-size: 13px; margin-top: 8px; min-height: 20px; }