@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root, html[data-theme="dark"] {
  --pa-bg: #0a1630;
  --pa-card: rgba(16, 26, 50, 0.94);
  --pa-text: #f4f6fb;
  --pa-muted: #9aa3b5;
  --pa-line: rgba(255,255,255,0.1);
  --pa-input: #1c2433;
  --pa-accent: #3d8bfd;
  --pa-danger: #f04747;
  --pa-font: "Plus Jakarta Sans", system-ui, sans-serif;
  --pa-display: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
}
html[data-theme="light"] {
  --pa-bg: #eef2f8;
  --pa-card: #fff;
  --pa-text: #121722;
  --pa-muted: #5b6578;
  --pa-line: rgba(18,23,34,0.1);
  --pa-input: #f4f6fb;
}

* { box-sizing: border-box; }
body.pa-body {
  margin: 0; min-height: 100vh; min-height: 100dvh; font-family: var(--pa-font); color: var(--pa-text);
  background:
    radial-gradient(ellipse at 25% 15%, rgba(61,139,253,0.18), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(139,124,247,0.12), transparent 45%),
    var(--pa-bg);
}
.pa-shell {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
  gap: 18px;
}
.pa-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none; font-weight: 700; font-size: 18px;
}
.pa-mark {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(145deg, #3d8bfd, #2563c7); font-weight: 800;
}
.pa-card {
  width: min(400px, 100%); background: var(--pa-card); border: 1px solid var(--pa-line);
  border-radius: 18px; padding: 28px 24px; display: grid; gap: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}
.pa-card h1 {
  margin: 0; text-align: center; font-size: 26px; letter-spacing: -0.04em;
  background: linear-gradient(135deg, #fff 35%, var(--pa-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="light"] .pa-card h1 {
  background: linear-gradient(135deg, #121722 20%, var(--pa-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pa-sub { margin: 0; text-align: center; color: var(--pa-muted); font-size: 14px; }
.pa-social { display: grid; gap: 8px; }
.pa-social-btn {
  min-height: 42px; border-radius: 10px; border: 1px solid var(--pa-line);
  background: transparent; color: var(--pa-text); font: inherit; font-weight: 600; cursor: pointer;
}
.pa-social-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pa-divider { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; color: var(--pa-muted); font-size: 12px; }
.pa-divider::before, .pa-divider::after { content: ""; height: 1px; background: var(--pa-line); }
.pa-card label { display: grid; gap: 6px; font-size: 11px; font-weight: 700; color: var(--pa-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.pa-card input {
  min-height: 42px; border-radius: 10px; border: 1px solid var(--pa-line);
  background: var(--pa-input); color: var(--pa-text); padding: 0 12px; font: inherit; text-transform: none;
}
.pa-card input:focus { outline: 2px solid rgba(61,139,253,0.45); }
.pa-primary {
  min-height: 46px; border: 0; border-radius: 999px; cursor: pointer;
  background: #fff; color: #0b1020; font: inherit; font-weight: 700;
}
html[data-theme="light"] .pa-primary { background: var(--pa-accent); color: #fff; }
.pa-primary:disabled { opacity: 0.55; cursor: wait; }
.pa-ghost {
  border: 0; background: transparent; color: var(--pa-muted); font: inherit; cursor: pointer; padding: 8px;
}
.pa-error { color: var(--pa-danger); text-align: center; font-size: 13px; margin: 0; }
.pa-switch, .pa-back { margin: 0; text-align: center; color: var(--pa-muted); font-size: 14px; }
.pa-switch a, .pa-back a { color: var(--pa-accent); }
.hidden { display: none !important; }

/* Public legal pages */
body.pa-legal { align-items: stretch; }
.pa-legal .pa-shell {
  align-items: stretch; justify-content: flex-start;
  max-width: 820px; margin: 0 auto; padding: 32px 20px 64px;
}
.pa-legal-nav {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  margin-bottom: 8px;
}
.pa-legal-nav a {
  color: var(--pa-muted); text-decoration: none; font-size: 14px; font-weight: 600;
}
.pa-legal-nav a:hover, .pa-legal-nav a[aria-current="page"] { color: var(--pa-accent); }
.pa-legal-doc {
  background: var(--pa-card); border: 1px solid var(--pa-line);
  border-radius: 18px; padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.22);
}
.pa-legal-doc h1 {
  margin: 0 0 8px; font-family: var(--pa-display); font-size: clamp(28px, 4vw, 36px);
  letter-spacing: -0.03em; color: var(--pa-text);
  background: none; -webkit-text-fill-color: unset;
}
.pa-legal-doc .pa-updated { margin: 0 0 24px; color: var(--pa-muted); font-size: 13px; }
.pa-legal-doc h2 {
  margin: 28px 0 10px; font-family: var(--pa-display); font-size: 20px; color: var(--pa-text);
}
.pa-legal-doc p, .pa-legal-doc li {
  color: var(--pa-muted); font-size: 15px; line-height: 1.6;
}
.pa-legal-doc p { margin: 0 0 12px; }
.pa-legal-doc ul { margin: 0 0 12px; padding-left: 1.2em; }
.pa-legal-doc a { color: var(--pa-accent); }

@media (max-width: 520px) {
  .pa-shell { justify-content: flex-start; }
  .pa-card { width: 100%; padding: 22px 16px; border-radius: 16px; }
  .pa-card h1 { font-size: 24px; }
  .pa-card input, .pa-primary, .pa-social-btn { min-height: 48px; font-size: 16px; }
  .pa-legal .pa-shell { padding: 20px 14px 48px; }
  .pa-legal-doc { padding: 20px 16px; border-radius: 14px; }
}