/* ══════════════════════════════════════════════
   AUTH SCREEN
══════════════════════════════════════════════ */
#screen-auth {
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex: 1;
}

.auth-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,212,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  animation: gridScroll 12s linear infinite;
}
@keyframes gridScroll { to { background-position: 32px 32px; } }

.auth-card {
  position: relative;
  background: var(--panel);
  border: 2px solid var(--border2);
  width: min(400px, 94vw);
  padding: 32px 24px 24px;
  box-shadow: 0 0 60px rgba(0,212,255,0.1), 0 0 0 1px rgba(0,212,255,0.05);
}
.auth-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.auth-logo {
  text-align: center;
  font-family: 'Press Start 2P'; font-size: 18px;
  color: var(--accent);
  text-shadow: 0 0 20px rgba(0,212,255,0.5);
  letter-spacing: 3px; margin-bottom: 4px;
}
.auth-tagline {
  text-align: center; color: var(--text-dim); font-size: 15px;
  margin-bottom: 24px; letter-spacing: 1px;
}

.auth-tabs {
  display: flex; gap: 0; margin-bottom: 20px;
  border-bottom: 2px solid var(--border);
}
.auth-tab {
  flex: 1; background: none; border: none;
  color: var(--text-dim); font-family: 'Press Start 2P'; font-size: 9px;
  padding: 10px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: all 0.15s;
}
.auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.auth-error { color: var(--red); font-size: 14px; margin-top: 8px; text-align: center; min-height: 18px; }
.auth-google-hint {
  text-align: center; color: var(--text-dark); font-size: 13px;
  margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px;
}