/* ═══════════════════════════════════════════════════════════
   StarliteEdu – auth.css  LIGHT THEME
═══════════════════════════════════════════════════════════ */

html, body { height: 100%; background: var(--land-bg); color: var(--land-text); }

.auth-split { display: flex; min-height: 100vh; }

/* ── Left Panel ─────────────────────────────────────────── */
.auth-panel-left {
  flex: 0 0 420px;
  background: linear-gradient(150deg, #1e3a8a 0%, #1d4ed8 60%, #0369a1 100%);
  display: flex; flex-direction: column;
  padding: 44px 52px;
  position: relative; overflow: hidden;
}
.auth-panel-left::before {
  content: '';
  position: absolute; top: -100px; right: -100px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 65%);
  pointer-events: none;
}
.auth-panel-left::after {
  content: '\2605';
  position: absolute; bottom: -60px; right: -30px;
  font-size: 280px; color: #fff;
  opacity: .04; pointer-events: none;
  font-family: var(--font-display); line-height: 1;
}
.deco-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.auth-logo { margin-bottom: auto; }
.auth-logo .brand-text { color: #fff; }
.auth-logo svg polygon { stroke: #fff; opacity: .9; }

.auth-panel-copy { margin: auto 0 56px; }
.auth-panel-copy h2 {
  font-family: var(--font-display); font-size: 2.4rem;
  font-weight: 800; margin-bottom: 14px; line-height: 1.1;
  letter-spacing: -.04em; color: #fff;
}
.auth-panel-copy h2 span { color: #93c5fd; }
.auth-panel-copy p { color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.7; }

.deco-stars span {
  position: absolute; color: rgba(255,255,255,.5);
  animation: twinkle 3.5s ease-in-out infinite;
}
.deco-stars span:nth-child(2) { animation-delay: 1.2s; }
.deco-stars span:nth-child(3) { animation-delay: 2.4s; }
@keyframes twinkle { 0%,100%{opacity:.15} 50%{opacity:.55} }

/* ── Right Panel ────────────────────────────────────────── */
.auth-panel-right {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 44px 28px; background: #fff;
}
.auth-card { width: 100%; max-width: 420px; }

.auth-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #0284c7; margin-bottom: 10px;
}
.auth-title {
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 800;
  margin-bottom: 6px; letter-spacing: -.04em; color: var(--land-text);
}
.auth-subtitle { color: var(--land-muted); font-size: 14px; margin-bottom: 36px; }

/* Override dark form-input for auth page */
.auth-card .form-input {
  background: var(--land-bg);
  border: 1.5px solid var(--land-border);
  color: var(--land-text);
}
.auth-card .form-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.auth-card .form-input::placeholder { color: var(--land-faint); }
.auth-card .form-label { color: var(--land-muted); }
.auth-card .field-error { color: #dc2626; }

/* Override btn-primary for auth (navy) */
.auth-card .btn-primary {
  background: var(--navy); color: #fff;
}
.auth-card .btn-primary:hover {
  background: #1e40af;
  box-shadow: 0 8px 24px rgba(30,58,138,.28);
}
.auth-card .alert-error { color: #b91c1c; }

.input-eye-wrap { position: relative; }
.input-eye-wrap .form-input { padding-right: 44px; }
.eye-toggle {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 16px;
  color: var(--land-muted); padding: 0; line-height: 1; transition: color .2s;
}
.eye-toggle:hover { color: var(--navy); }

.auth-footer-link { text-align: center; margin-top: 22px; font-size: 13px; color: var(--land-muted); }
.auth-footer-link a { color: var(--navy); font-weight: 600; }

@media (max-width: 780px) { .auth-panel-left { display: none; } }