/* ========================================
   404 Has Found — Auth Page Styles
   认证页面: Login, Register, View Header
   ======================================== */

/* ---------- View Header ---------- */
.view-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.view-title {
  font-family: 'ZCOOL KuaiLe', 'Fredoka', sans-serif;
  font-size: 24px; font-weight: 700; letter-spacing: -0.3px;
}

/* ---------- Login Screen ---------- */
.login-screen {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #FFF5F3 0%, #FFE8E0 50%, #FFF5F3 100%);
}
.login-header {
  text-align: center; padding: 56px 20px 24px;
  position: relative;
}
.login-logo-404 {
  font-family: 'Caveat', cursive;
  font-size: 52px; font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--cta));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 4px;
}
.login-logo-brand {
  font-family: 'ZCOOL KuaiLe', sans-serif;
  font-size: 14px; font-weight: 600;
  color: var(--primary-600);
  letter-spacing: 3px;
}
.login-title {
  font-family: 'ZCOOL KuaiLe', sans-serif;
  font-size: 26px; font-weight: 700;
  color: var(--text); margin-top: 20px;
}
.login-subtitle {
  font-size: 13px; color: var(--text-secondary); margin-top: 6px;
}
.login-form-container {
  flex: 1; padding: 0 20px;
}
.login-card {
  background: var(--card); border-radius: var(--radius-xl);
  padding: 28px 20px; border: 2px solid var(--border-light);
  box-shadow: 0 6px 0 rgba(200,90,50,0.1), var(--shadow);
}
.login-back-link {
  text-align: center; padding: 24px 20px;
  font-size: 13px; color: var(--text-secondary);
}
.login-back-link a {
  color: var(--primary); font-weight: 700;
  transition: opacity var(--transition);
}
.login-back-link a:active { opacity: 0.6; }

/* ---------- Register Screen ---------- */
.register-screen {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #FFF5F3 0%, #FFF0EB 50%, #FFF5F3 100%);
}
.register-header {
  text-align: center; padding: 40px 20px 20px;
}
.register-logo-404 {
  font-family: 'Caveat', cursive;
  font-size: 44px; font-weight: 700;
  background: linear-gradient(135deg, var(--cta), var(--primary));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.register-title {
  font-family: 'ZCOOL KuaiLe', sans-serif;
  font-size: 24px; font-weight: 700;
  color: var(--text); margin-top: 12px;
}
.register-subtitle {
  font-size: 13px; color: var(--text-secondary); margin-top: 4px;
}
.register-form-container {
  flex: 1; padding: 0 20px;
}
.register-card {
  background: var(--card); border-radius: var(--radius-xl);
  padding: 24px 18px; border: 2px solid var(--border-light);
  box-shadow: 0 6px 0 rgba(200,90,50,0.1), var(--shadow);
}
.register-back-link {
  text-align: center; padding: 20px;
  font-size: 13px; color: var(--text-secondary);
}
.register-back-link a {
  color: var(--primary); font-weight: 700;
  transition: opacity var(--transition);
}

/* ---------- Send Code Button ---------- */
.btn-send-code {
  flex-shrink: 0;
  padding: 10px 14px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s, background 0.2s;
}
.btn-send-code:active { opacity: 0.7; }
.btn-send-code:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.7;
}