/* =========================================================================
   App-style auth screens (login / register) — makes them look like a native
   mobile sign-in page on phones while leaving desktop intact.
   ========================================================================= */

/* Brand + subtitle (also fine on desktop). */
.auth-brand { text-align: center; margin: 0 0 18px; }
.auth-brand .auth-logo { height: 50px; width: auto; }
.auth-sub { text-align: center; color: rgba(255, 255, 255, 0.5); font-size: 0.92rem; margin: -2px 0 20px; }

@media (max-width: 768px) {
  /* Hide the marketing header/footer for a full-screen app login — installed app
     only (standalone). A normal mobile browser keeps the website chrome. */
  html.pwa-standalone body.page-login .app-topbar,
  html.pwa-standalone body.page-login .site-footer,
  html.pwa-standalone body.page-register .app-topbar,
  html.pwa-standalone body.page-register .site-footer,
  html.pwa-standalone body.page-verify-email .app-topbar,
  html.pwa-standalone body.page-verify-email .site-footer { display: none !important; }

  html.pwa-standalone body.page-login, html.pwa-standalone body.page-register, html.pwa-standalone body.page-verify-email { background: #05070f; }
  html.pwa-standalone body.page-login main, html.pwa-standalone body.page-register main, html.pwa-standalone body.page-verify-email main { display: block; }

  html.pwa-standalone .auth-panel.login-panel,
  html.pwa-standalone .auth-panel.register-panel,
  html.pwa-standalone .auth-panel.verify-panel {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
    padding: calc(38px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom)) !important;
    background:
      radial-gradient(120% 70% at 50% -10%, rgba(243, 186, 47, 0.10), transparent 60%),
      radial-gradient(100% 60% at 50% 0%, rgba(220, 38, 38, 0.10), transparent 55%),
      #05070f;
  }

  .auth-panel .wrap.narrow { width: 100%; max-width: 440px; margin: 0 auto; padding: 0; }

  .auth-brand { margin: 6px 0 24px; }
  .auth-brand .auth-logo { height: 58px; }

  .auth-panel h1 { text-align: center; font-size: 1.62rem; margin: 0 0 6px; }
  .auth-sub { margin-bottom: 24px; }

  /* Touch-friendly fields & a full-width primary button. */
  .auth-panel .form label { font-size: 0.82rem; margin-bottom: 16px; color: rgba(255, 255, 255, 0.7); }
  .auth-panel .form input {
    height: 52px;
    padding: 0 16px;
    font-size: 16px; /* >=16px prevents iOS zoom-on-focus */
    border-radius: 12px;
    margin-top: 7px;
  }
  .auth-panel .form .btn-primary,
  .auth-panel .form button[type="submit"] {
    width: 100%;
    height: 52px;
    font-size: 1rem;
    border-radius: 12px;
    margin-top: 12px;
  }
  .auth-panel .alert { border-radius: 12px; }
  .auth-panel .muted.small,
  .auth-panel p:last-child { text-align: center; margin-top: 22px; font-size: 0.9rem; }
}