/* ===========================================================
   Pruvio Auth — shared design system for /login, /signup,
   /reset-password. Premium 2026 SaaS aesthetic, brand blue,
   dark surfaces, hero + card + trust structure adapted from
   the mobile app welcome/login screens.

   Used by:
     - /login.html        (full layout)
     - /signup.html       (first step "create account")
     - /reset-password.html (header treatment only)

   No new dependencies, vanilla CSS, sans-serif only,
   no italic anywhere.
   =========================================================== */

:root,
.pv-auth-scope {
  --pv-bg: #0A0A0B;
  --pv-surface: #111114;
  --pv-surface-2: #18181B;
  --pv-border: #27272A;
  --pv-text: #FAFAFA;
  --pv-muted: #A1A1AA;
  --pv-dim: #71717A;
  --pv-blue: #3B82F6;
  --pv-blue-soft: rgba(59, 130, 246, 0.10);
  --pv-blue-border: rgba(59, 130, 246, 0.24);
  --pv-focus-ring: rgba(59, 130, 246, 0.6);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--pv-bg);
  color: var(--pv-text);
  font-family: 'Inter', 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Dynamic viewport height + safe-area bottom padding: universal scroll fix
     so auth content (login / signup) clears iOS chrome and the home indicator. */
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
  overflow-x: hidden;
}

a { color: var(--pv-blue); text-decoration: none; }

button, input { font-family: inherit; font-style: normal; }

/* Global focus ring for keyboard nav */
:focus-visible {
  outline: 2px solid var(--pv-focus-ring);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===========================================================
   1. PAGE BACKGROUND (decorative, behind everything)
   =========================================================== */
.pv-bg {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.pv-bg__glow {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 720px; height: 720px;
  max-width: 120vw;
  background: radial-gradient(circle at center,
    rgba(59,130,246,0.06) 0%,
    rgba(59,130,246,0.04) 30%,
    transparent 65%);
  filter: blur(12px);
}

.pv-bg__grid {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 70vh;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.02) 0,
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 40px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.02) 0,
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 40px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

.pv-bg__wave {
  position: absolute;
  left: 0; right: 0;
  bottom: 18vh;
  width: 100%;
  height: 160px;
  opacity: 0.04;
}

.pv-bg__wave svg { display: block; width: 100%; height: 100%; }

/* ===========================================================
   2. HEADER
   =========================================================== */
.pv-header {
  position: relative;
  z-index: 10;
  height: 64px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  opacity: 0;
  animation: pvFadeIn 200ms ease forwards;
}

.pv-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--pv-text);
}

.pv-brand__mark {
  width: 32px;
  height: 32px;
  display: block;
  flex-shrink: 0;
}

.pv-brand__word {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-style: normal;
  color: var(--pv-text);
  line-height: 1;
}

.pv-help-link {
  font-size: 13px;
  color: var(--pv-muted);
  font-weight: 500;
  transition: color 150ms ease;
}
.pv-help-link:hover { color: var(--pv-text); }

/* ===========================================================
   3. MAIN LAYOUT (hero + card + trust)
   =========================================================== */
.pv-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 80px;
  min-height: calc(100dvh - 64px);
}

.pv-hero {
  text-align: center;
  margin: 0 auto 28px;
  max-width: 480px;
  opacity: 0;
  transform: translateY(8px);
  animation: pvHeroIn 280ms ease 80ms forwards;
}

.pv-hero__title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pv-text);
  line-height: 1.15;
  margin-bottom: 12px;
}

.pv-hero__sub {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--pv-muted);
  max-width: 420px;
  margin: 0 auto 18px;
}

.pv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pv-blue-soft);
  border: 1px solid var(--pv-blue-border);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--pv-text);
  transition: opacity 250ms ease;
}

.pv-chip__industry {
  color: var(--pv-blue);
  font-weight: 600;
}

.pv-chip.is-fading { opacity: 0; }

/* ===========================================================
   4. AUTH CARD
   =========================================================== */
.pv-card {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(16px);
  animation: pvCardIn 320ms ease 160ms forwards;
}

.pv-card__notice {
  background: var(--pv-blue-soft);
  border: 1px solid var(--pv-blue-border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pv-text);
}
.pv-card__notice strong { color: var(--pv-text); font-weight: 600; }

/* Form fields */
.pv-field { position: relative; margin-top: 16px; }
.pv-field:first-of-type { margin-top: 0; }

.pv-field__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--pv-dim);
  pointer-events: none;
  transition: color 150ms ease;
}

.pv-field__input {
  width: 100%;
  height: 52px;
  background: var(--pv-surface-2);
  border: 1px solid var(--pv-border);
  border-radius: 12px;
  padding: 0 16px 0 44px;
  color: var(--pv-text);
  font-size: 15px;
  font-weight: 400;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.pv-field__input::placeholder { color: var(--pv-dim); }

.pv-field__input:focus {
  border-color: var(--pv-blue);
  border-width: 1.5px;
  padding: 0 16px 0 43.5px; /* keep alignment when border thickens */
}
.pv-field:focus-within .pv-field__icon { color: var(--pv-blue); }

.pv-field--password .pv-field__input { padding-right: 48px; }

.pv-eye-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pv-dim);
  cursor: pointer;
  border-radius: 6px;
  transition: color 150ms ease;
}
.pv-eye-btn:hover { color: var(--pv-text); }
.pv-eye-btn svg { width: 18px; height: 18px; display: block; }

.pv-error {
  font-size: 12px;
  color: #F87171;
  margin-top: 6px;
  display: none;
}
.pv-error.is-visible { display: block; }

/* Primary CTA */
.pv-cta {
  width: 100%;
  height: 52px;
  margin-top: 24px;
  background: var(--pv-blue);
  color: #FFFFFF;
  border: 0;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 150ms ease, transform 80ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pv-cta:hover { filter: brightness(1.06); }
.pv-cta:active { transform: scale(0.98); filter: brightness(0.94); }
.pv-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

.pv-cta__spinner {
  display: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pvSpin 600ms linear infinite;
}
.pv-cta.is-loading .pv-cta__label { display: none; }
.pv-cta.is-loading .pv-cta__spinner { display: inline-block; }

/* Below CTA: forgot link, cross-link */
.pv-forgot {
  display: block;
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--pv-muted);
  background: none;
  border: 0;
  cursor: pointer;
  width: 100%;
}
.pv-forgot__accent { color: var(--pv-blue); font-weight: 500; }
.pv-forgot:hover { text-decoration: underline; text-underline-offset: 3px; }

.pv-card__crosslink {
  text-align: center;
  font-size: 13px;
  color: var(--pv-muted);
  margin-top: 22px;
}
.pv-card__crosslink a { color: var(--pv-blue); font-weight: 500; }
.pv-card__crosslink a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Error / success banners (sits between form and CTA chrome).
   Visible by default once text content is set, hidden when empty. Some
   pages also toggle the `is-visible` class explicitly. */
.pv-banner {
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin-top: 14px;
  text-align: center;
  display: block;
  line-height: 1.4;
}
.pv-banner:empty { display: none; }
.pv-banner.is-visible { display: block; }
.pv-banner--error {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.30);
  color: #FCA5A5;
}
.pv-banner--success {
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.30);
  color: #86EFAC;
}

/* Tiny legal text */
.pv-legal {
  font-size: 11px;
  color: var(--pv-dim);
  text-align: center;
  margin-top: 16px;
  line-height: 1.5;
}
.pv-legal a { color: var(--pv-muted); }
.pv-legal a:hover { color: var(--pv-text); }

/* ===========================================================
   5. TRUST FEATURES STRIP
   =========================================================== */
.pv-trust {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin: 32px auto 0;
  max-width: 720px;
  width: 100%;
  opacity: 0;
  animation: pvFadeIn 200ms ease 480ms forwards;
}

.pv-trust__tile {
  flex: 1 1 0;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  position: relative;
}

.pv-trust__tile + .pv-trust__tile::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 1px;
  background: rgba(255,255,255,0.08);
}

.pv-trust__icon { width: 20px; height: 20px; color: var(--pv-blue); }

.pv-trust__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pv-text);
}

.pv-trust__sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--pv-dim);
  white-space: nowrap;
}

/* ===========================================================
   6. FOOTER
   =========================================================== */
.pv-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 12px;
  color: var(--pv-dim);
  padding: 24px 16px 28px;
}
.pv-footer__links { margin-left: 4px; }
.pv-footer__links a { color: var(--pv-dim); transition: color 150ms ease; }
.pv-footer__links a:hover { color: var(--pv-text); }
.pv-footer__sep { margin: 0 6px; opacity: 0.6; }

/* ===========================================================
   7. RESPONSIVE
   =========================================================== */
@media (max-width: 720px) {
  .pv-header { padding: 0 16px; height: 60px; }
  .pv-main { padding: 24px 16px 64px; }
  .pv-hero__title { font-size: 22px; }
  .pv-card { padding: 24px; border-radius: 20px; }
  .pv-trust { flex-direction: column; gap: 16px; margin-top: 28px; }
  .pv-trust__tile { padding: 0; }
  .pv-trust__tile + .pv-trust__tile::before { display: none; }
  .pv-trust__sub { white-space: normal; }
  .pv-footer { display: flex; flex-direction: column; gap: 4px; }
  .pv-footer__sep { display: none; }
  .pv-footer__links { display: block; margin: 0; }
}

/* ===========================================================
   8. MOTION (entrance animations + reduced-motion)
   =========================================================== */
@keyframes pvFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pvHeroIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pvCardIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pvSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .pv-header,
  .pv-hero,
  .pv-card,
  .pv-trust {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .pv-chip { transition: none; }
}