/* =========================================================================
 * portal-ui.css — SiteDocket portal UI foundation layer
 *
 * Loaded AFTER portal.css. Holds the cross-cutting design-system pieces that
 * were missing or inconsistent: a unified focus/accessibility model, a
 * prefers-reduced-motion pass, shared component primitives (card / field /
 * input / badge / table / empty) so views stop reinventing them inline, and
 * a few restrained shell refinements. Everything is scoped to .wpsa-portal so
 * it can't bleed into the host WordPress theme. Reverting = drop the enqueue.
 * ========================================================================= */

/* --- Premium palette + depth (light mode) ---------------------------------- *
 * Pure #fff cards on cool slate with flat black shadows read "cheap SaaS".
 * Warm, paper-stock neutrals + brand-tinted layered shadows give physical
 * presence. Light mode only — the dark theme's own tokens (higher specificity)
 * still win when active. */
.wpsa-portal {
  --p-surface:    #fffefb;   /* cards — barely-warm white, still crisp */
  --p-surface-2:  #f6f3ed;   /* page  — warm off-white */
  --p-surface-3:  #efe9df;
  --p-border:     #e9e3d8;   /* warm hairline */
  --p-border-2:   #e9e3d8;
  --p-input-bg:   #fffefb;
  --p-text:       #1c1917;   /* warm near-black */
  --p-text-2:     #44403c;
  --p-text-3:     #78716c;
  --p-shadow:     0 1px 2px rgba(28, 25, 23, .05), 0 5px 16px rgba(79, 70, 229, .06);
  --p-shadow-md:  0 12px 34px rgba(79, 70, 229, .13), 0 3px 10px rgba(28, 25, 23, .06);

  --p-ring:        0 0 0 3px rgba(79, 70, 229, .35); /* keyboard focus halo */
  --p-ring-color:  #4f46e5;
  --p-space-1: 4px;  --p-space-2: 8px;  --p-space-3: 12px;
  --p-space-4: 16px; --p-space-5: 24px; --p-space-6: 32px;
  --p-ease:        cubic-bezier(.4, 0, .2, 1);
  --p-ease-settle: cubic-bezier(.22, 1, .36, 1); /* premium settle, never bouncy */

  /* Crisper UI type + a warm paper backdrop with subtle depth. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: radial-gradient(125% 85% at 50% -10%, #faf8f3 0%, var(--p-surface-2) 55%);
}
.wpsa-portal[data-theme="dark"] {
  --p-ring:       0 0 0 3px rgba(129, 140, 248, .45);
  --p-ring-color: #818cf8;
  background: var(--p-surface-2); /* dark theme keeps its own flat backdrop */
}

/* --- Accessibility: visible keyboard focus --------------------------------- */
/* Only `:focus-visible` so mouse clicks stay clean but keyboard users get a
 * clear, consistent ring everywhere. Uses outline (survives box-shadow resets)
 * plus a halo for inputs. */
.wpsa-portal a:focus-visible,
.wpsa-portal button:focus-visible,
.wpsa-portal input:focus-visible,
.wpsa-portal select:focus-visible,
.wpsa-portal textarea:focus-visible,
.wpsa-portal [role="button"]:focus-visible,
.wpsa-portal [tabindex]:focus-visible {
  outline: 2px solid var(--p-ring-color);
  outline-offset: 2px;
  border-radius: var(--p-radius-sm);
}
.wpsa-portal .wpsa-portal__nav-link:focus-visible {
  outline-offset: -2px; /* keep the ring inside the nav rail */
}
/* Inputs/buttons additionally get the soft halo for a more finished feel. */
.wpsa-portal input:focus-visible,
.wpsa-portal select:focus-visible,
.wpsa-portal textarea:focus-visible,
.wpsa-portal .wpsa-btn:focus-visible {
  box-shadow: var(--p-ring);
}

/* --- Accessibility: respect reduced-motion --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wpsa-portal *,
  .wpsa-portal *::before,
  .wpsa-portal *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Component primitives (adopt across views to kill inline-style sprawl) -- */
.wpsa-portal .wpsa-card {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  padding: var(--p-space-5);
  box-shadow: var(--p-shadow);
}
.wpsa-portal .wpsa-card--flush { padding: 0; overflow: hidden; }

.wpsa-portal .wpsa-field { display: flex; flex-direction: column; gap: var(--p-space-2); }
.wpsa-portal .wpsa-field > label {
  font-size: 12.5px; font-weight: 600; color: var(--p-text-2);
}
.wpsa-portal .wpsa-field__hint { font-size: 12px; color: var(--p-text-3); }

.wpsa-portal .wpsa-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-sm);
  background: var(--p-input-bg);
  color: var(--p-text);
  font-size: 14px;
  transition: border-color .15s var(--p-ease), box-shadow .15s var(--p-ease);
}
.wpsa-portal .wpsa-input::placeholder { color: var(--p-text-3); }
.wpsa-portal .wpsa-input:focus {
  border-color: var(--p-ring-color);
  box-shadow: var(--p-ring);
  outline: none;
}

.wpsa-portal .wpsa-badge {
  display: inline-flex; align-items: center; gap: var(--p-space-1);
  padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.7;
  background: var(--p-surface-3); color: var(--p-text-2);
}
.wpsa-portal .wpsa-badge--good { background: rgba(16, 185, 129, .12); color: var(--p-good); }
.wpsa-portal .wpsa-badge--warn { background: rgba(245, 158, 11, .14); color: var(--p-warn); }
.wpsa-portal .wpsa-badge--bad  { background: rgba(239, 68, 68, .12);  color: var(--p-bad); }
.wpsa-portal .wpsa-badge--info { background: var(--p-blue-lt);        color: var(--p-blue); }

.wpsa-portal .wpsa-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.wpsa-portal .wpsa-table th {
  text-align: left; font-weight: 600; color: var(--p-text-3);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  padding: 10px 12px; border-bottom: 1px solid var(--p-border);
}
.wpsa-portal .wpsa-table td { padding: 12px; border-bottom: 1px solid var(--p-border); color: var(--p-text-2); }
.wpsa-portal .wpsa-table tbody tr:last-child td { border-bottom: none; }
.wpsa-portal .wpsa-table tbody tr { transition: background .12s var(--p-ease); }
.wpsa-portal .wpsa-table tbody tr:hover { background: var(--p-surface-2); }

/* --- Restrained shell polish ----------------------------------------------- */
/* Smoother nav interaction + a clear active accent bar (was a flat bg swap). */
.wpsa-portal .wpsa-portal__nav-link {
  position: relative;
  transition: background .14s var(--p-ease), color .14s var(--p-ease);
}
.wpsa-portal .wpsa-portal__nav-item--active .wpsa-portal__nav-link::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; border-radius: 0 3px 3px 0;
  background: var(--p-ring-color);
}
.wpsa-portal .wpsa-portal__plan-badge { transition: background .14s var(--p-ease); }
.wpsa-portal .wpsa-dark-toggle,
.wpsa-portal .wpsa-portal__signout { transition: color .14s var(--p-ease), background .14s var(--p-ease); }

/* --- Responsive: comfortable touch targets on small screens ---------------- */
@media (max-width: 720px) {
  .wpsa-portal .wpsa-btn,
  .wpsa-portal .wpsa-portal__nav-link,
  .wpsa-portal .wpsa-dark-toggle { min-height: 44px; }
}

/* --- Mobile nav drawer (≤900px) -------------------------------------------- */
/* Replaces the old horizontal scrolling nav strip with a proper off-canvas
 * drawer + hamburger + scrim. Desktop is untouched. */
.wpsa-portal__topbar { display: none; }
.wpsa-portal__nav-scrim { display: none; }

@media (max-width: 900px) {
  .wpsa-portal__topbar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 30;
    padding: 10px 14px;
    background: var(--p-surface);
    border-bottom: 1px solid var(--p-border);
  }
  .wpsa-portal__nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex-shrink: 0;
    border: 1px solid var(--p-border); border-radius: var(--p-radius-sm);
    background: var(--p-surface); color: var(--p-text); cursor: pointer;
  }
  .wpsa-hamburger, .wpsa-hamburger::before, .wpsa-hamburger::after {
    display: block; width: 18px; height: 2px; border-radius: 2px;
    background: currentColor;
    transition: transform .2s var(--p-ease), opacity .2s var(--p-ease), background .2s var(--p-ease);
  }
  .wpsa-hamburger { position: relative; }
  .wpsa-hamburger::before, .wpsa-hamburger::after { content: ""; position: absolute; left: 0; }
  .wpsa-hamburger::before { top: -6px; }
  .wpsa-hamburger::after  { top: 6px; }
  .wpsa-portal.is-nav-open .wpsa-hamburger { background: transparent; }
  .wpsa-portal.is-nav-open .wpsa-hamburger::before { transform: translateY(6px) rotate(45deg); }
  .wpsa-portal.is-nav-open .wpsa-hamburger::after  { transform: translateY(-6px) rotate(-45deg); }
  .wpsa-portal__topbar-brand { font-weight: 700; font-size: 15px; color: var(--p-text); }

  /* Off-canvas drawer — override the portal.css horizontal-strip rules. */
  .wpsa-portal .wpsa-portal__shell { grid-template-columns: 1fr; }
  .wpsa-portal .wpsa-portal__nav {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(82vw, 300px); height: 100%;
    flex-direction: column; flex-wrap: nowrap;
    padding: 16px 0;
    background: var(--p-surface);
    border-right: 1px solid var(--p-border); border-bottom: none;
    transform: translateX(-100%);
    transition: transform .26s var(--p-ease);
    z-index: 50; overflow-y: auto;
  }
  .wpsa-portal.is-nav-open .wpsa-portal__nav {
    transform: translateX(0);
    box-shadow: var(--p-shadow-md);
  }
  .wpsa-portal .wpsa-portal__nav-brand { display: flex; padding: 0 16px 14px; }
  .wpsa-portal .wpsa-portal__nav-list {
    flex-direction: column; overflow: visible; gap: 2px; padding: 0 8px;
  }
  .wpsa-portal .wpsa-portal__nav-link { padding: 11px 12px; }
  .wpsa-portal .wpsa-portal__nav-footer {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 12px; width: auto; margin-top: auto;
    border-top: 1px solid var(--p-border);
  }

  /* Scrim behind the open drawer. */
  .wpsa-portal__nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 40;
    background: rgba(15, 23, 42, .45);
    opacity: 0; pointer-events: none;
    transition: opacity .26s var(--p-ease);
  }
  .wpsa-portal.is-nav-open .wpsa-portal__nav-scrim { opacity: 1; pointer-events: auto; }

  body.wpsa-nav-locked { overflow: hidden; }
}

/* --- Premium components ----------------------------------------------------- */
/* Primary CTA — subtle vertical gradient + brand-tinted layered shadow + a 1px
 * lift on hover. Physical presence, not a flat fill. */
.wpsa-portal .wpsa-btn--primary {
  background: linear-gradient(180deg, #5b52ec 0%, #4f46e5 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(79, 70, 229, .28), 0 4px 12px rgba(79, 70, 229, .22);
  transition: background .14s var(--p-ease), box-shadow .2s var(--p-ease-settle), transform .2s var(--p-ease-settle);
}
.wpsa-portal .wpsa-btn--primary:hover {
  background: linear-gradient(180deg, #524ae8 0%, #4338ca 100%);
  box-shadow: 0 2px 6px rgba(79, 70, 229, .32), 0 9px 22px rgba(79, 70, 229, .26);
  transform: translateY(-1px);
}
.wpsa-portal .wpsa-btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(79, 70, 229, .28);
}

/* Nav — soft indigo active pill + gentle hover wash (was a flat colour swap). */
.wpsa-portal .wpsa-portal__nav-item--active .wpsa-portal__nav-link {
  background: var(--p-blue-lt);
  color: var(--p-blue);
  border-radius: var(--p-radius-sm);
}
.wpsa-portal .wpsa-portal__nav-item:not(.wpsa-portal__nav-item--active) .wpsa-portal__nav-link:hover {
  background: var(--p-surface-3);
  border-radius: var(--p-radius-sm);
}

/* Cards settle on hover (depth only — no movement on static content). */
.wpsa-portal .wpsa-card {
  transition: box-shadow .25s var(--p-ease-settle);
}
.wpsa-portal .wpsa-card:hover { box-shadow: var(--p-shadow-md); }

/* =========================================================================
 * Auth pages (login / register / reset / self-register fragments) — premium.
 * These render outside the .wpsa-portal wrapper, so warm tokens are declared
 * locally on .wpsa-auth-wrap. Overrides portal.css (loaded earlier).
 * ========================================================================= */
.wpsa-auth-wrap {
  --a-surface: #fffefb;
  --a-border:  #e9e3d8;
  --a-text:    #1c1917;
  --a-text-3:  #78716c;
  --a-accent:  #4f46e5;

  min-height: 100vh;
  padding: 48px 16px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Warm paper backdrop with a soft brand glow up top — not flat cool slate. */
  background:
    radial-gradient(55% 45% at 50% 0%, rgba(79, 70, 229, .08) 0%, transparent 62%),
    radial-gradient(130% 95% at 50% -10%, #faf8f3 0%, #f3efe7 55%, #efeae1 100%);
}

.wpsa-auth-card {
  max-width: 440px;
  background: var(--a-surface);
  border: 1px solid var(--a-border);
  border-radius: 20px;
  padding: 44px 44px 38px;
  /* Brand-tinted, layered depth — physical card on paper, not a flat sticker. */
  box-shadow:
    0 1px 2px rgba(28, 25, 23, .05),
    0 20px 44px rgba(79, 70, 229, .13),
    0 5px 14px rgba(28, 25, 23, .05);
}

.wpsa-auth-card .wpsa-auth-brand { margin-bottom: 26px; }
.wpsa-auth-card .wpsa-auth-brand-text { color: var(--a-text); font-weight: 800; letter-spacing: -.02em; }
.wpsa-auth-card .wpsa-auth-title {
  font-size: 25px; font-weight: 700; letter-spacing: -.02em; color: var(--a-text);
}
.wpsa-auth-card .wpsa-auth-subtitle { font-size: 13.5px; color: var(--a-text-3); }

.wpsa-auth-card .wpsa-auth-field label { color: var(--a-text); font-weight: 600; }
.wpsa-auth-card .wpsa-auth-input {
  background: #ffffff;
  border: 1px solid var(--a-border);
  border-radius: 11px;
  padding: 11px 13px;
  font-size: 14px;
  color: var(--a-text);
  transition: border-color .15s, box-shadow .15s;
}
.wpsa-auth-card .wpsa-auth-input:focus {
  border-color: var(--a-accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .18);
  outline: none;
}

/* Premium CTA — gradient + brand-tinted shadow + 1px settle lift. */
.wpsa-auth-card .wpsa-auth-btn {
  background: linear-gradient(180deg, #5b52ec 0%, #4f46e5 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 13px 18px;
  font-size: 14.5px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(79, 70, 229, .30), 0 7px 18px rgba(79, 70, 229, .26);
  transition: background .14s, box-shadow .2s cubic-bezier(.22, 1, .36, 1), transform .2s cubic-bezier(.22, 1, .36, 1);
  cursor: pointer;
}
.wpsa-auth-card .wpsa-auth-btn:hover {
  background: linear-gradient(180deg, #524ae8 0%, #4338ca 100%);
  box-shadow: 0 2px 7px rgba(79, 70, 229, .34), 0 11px 26px rgba(79, 70, 229, .30);
  transform: translateY(-1px);
}
.wpsa-auth-card .wpsa-auth-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(79, 70, 229, .30); }

.wpsa-auth-card .wpsa-auth-forgot,
.wpsa-auth-card .wpsa-auth-footer a { color: var(--a-accent); font-weight: 600; }

/* =========================================================================
 * Login — split-screen (brand panel + form panel). Modeled on the agency
 * portal login, in SiteDocket indigo. Full-bleed: no dead whitespace.
 * ========================================================================= */
.wpsa-auth2 {
  --x-indigo:   #4f46e5;
  --x-indigo-2: #6366f1;
  --x-ink:      #1c1917;
  --x-ink-2:    #44403c;
  --x-muted:    #78716c;
  --x-border:   #e7e3da;

  position: relative;
  display: flex; flex-direction: column;
  min-height: 100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--x-ink);
}
@media (min-width: 1000px) { .wpsa-auth2 { flex-direction: row; } }

/* ── Brand panel ── */
.wpsa-auth2__brand {
  position: relative; overflow: hidden;
  min-height: 240px;
  background: linear-gradient(135deg, #ffffff 0%, #f6f4ff 45%, #eef2ff 100%);
}
@media (min-width: 1000px) { .wpsa-auth2__brand { width: 50%; min-height: 100vh; } }

.wpsa-auth2__orb {
  position: absolute; border-radius: 50%; filter: blur(70px);
  pointer-events: none; will-change: transform;
}
.wpsa-auth2__orb--a {
  top: -160px; left: -160px; width: 620px; height: 620px; opacity: .42;
  background: radial-gradient(circle, rgba(99, 102, 241, .42), transparent 70%);
  animation: wpsaOrbA 22s var(--p-ease, ease-in-out) infinite alternate;
}
.wpsa-auth2__orb--b {
  bottom: -190px; right: -130px; width: 540px; height: 540px; opacity: .38;
  background: radial-gradient(circle, rgba(139, 92, 246, .38), transparent 70%);
  animation: wpsaOrbB 26s var(--p-ease, ease-in-out) infinite alternate;
}
.wpsa-auth2__orb--c {
  top: 34%; right: 22%; width: 380px; height: 380px; opacity: .30;
  background: radial-gradient(circle, rgba(79, 70, 229, .34), transparent 70%);
  animation: wpsaOrbA 30s var(--p-ease, ease-in-out) infinite alternate-reverse;
}
@keyframes wpsaOrbA { to { transform: translate(60px, 40px) scale(1.08); } }
@keyframes wpsaOrbB { to { transform: translate(-50px, -30px) scale(1.06); } }

.wpsa-auth2__brand-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: inherit; height: 100%;
  padding: 32px;
  animation: wpsaFadeUp .7s cubic-bezier(.22, 1, .36, 1) both;
}
@media (min-width: 1000px) { .wpsa-auth2__brand-inner { padding: 56px; } }

.wpsa-auth2__brand-top { display: flex; align-items: center; gap: 12px; }
.wpsa-auth2__logo { height: 40px; width: auto; }
.wpsa-auth2__brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--x-indigo); color: #fff; font-weight: 800; font-size: 19px;
  box-shadow: 0 6px 16px rgba(79, 70, 229, .28);
}
.wpsa-auth2__brand-name { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--x-ink); }

.wpsa-auth2__hero { display: none; }
@media (min-width: 1000px) { .wpsa-auth2__hero { display: block; } }
.wpsa-auth2__headline {
  max-width: 460px; margin: 0;
  font-size: 38px; font-weight: 700; line-height: 1.12; letter-spacing: -.025em; color: var(--x-ink);
}
.wpsa-auth2__subhead {
  max-width: 440px; margin: 18px 0 0;
  font-size: 16px; line-height: 1.6; color: var(--x-ink-2);
}
.wpsa-auth2__features {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  max-width: 460px; margin-top: 32px;
}
.wpsa-auth2__feature {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 13px;
  border: 1px solid rgba(99, 102, 241, .18);
  background: rgba(255, 255, 255, .6); backdrop-filter: blur(6px);
  font-size: 13.5px; font-weight: 500; color: var(--x-ink-2);
}
.wpsa-auth2__feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
  background: #e7e9ff; color: var(--x-indigo);
}
.wpsa-auth2__feature-icon svg { width: 16px; height: 16px; }
.wpsa-auth2__brand-foot { display: none; }
@media (min-width: 1000px) { .wpsa-auth2__brand-foot { display: block; } }

/* ── Form panel ── */
.wpsa-auth2__panel {
  display: flex; align-items: center; justify-content: center;
  flex: 1; padding: 40px 24px; background: #fffefb;
}
@media (min-width: 1000px) { .wpsa-auth2__panel { width: 50%; padding: 48px; } }
.wpsa-auth2__form-inner {
  width: 100%; max-width: 400px;
  animation: wpsaFadeUp .6s cubic-bezier(.22, 1, .36, 1) .08s both;
}
.wpsa-auth2__head { margin-bottom: 28px; }
.wpsa-auth2__title { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.025em; color: var(--x-ink); }
.wpsa-auth2__lede { margin: 8px 0 0; font-size: 14px; color: var(--x-muted); }

.wpsa-auth2__notice { padding: 11px 14px; border-radius: 11px; font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
.wpsa-auth2__notice strong { display: block; margin-bottom: 2px; }
.wpsa-auth2__notice--info  { background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; }
.wpsa-auth2__notice--warn  { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.wpsa-auth2__notice--error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.wpsa-auth2__notice a { color: var(--x-indigo); font-weight: 600; }

.wpsa-auth2__form { display: flex; flex-direction: column; gap: 18px; }
.wpsa-auth2__field { display: flex; flex-direction: column; gap: 7px; }
.wpsa-auth2__field-head { display: flex; align-items: center; justify-content: space-between; }
.wpsa-auth2__field label { font-size: 13px; font-weight: 600; color: var(--x-ink-2); }
.wpsa-auth2__forgot { font-size: 12.5px; font-weight: 600; color: var(--x-indigo); text-decoration: none; }
.wpsa-auth2__forgot:hover { text-decoration: underline; }

.wpsa-auth2__input-wrap { position: relative; }
.wpsa-auth2__input-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: #a8a29e; pointer-events: none; display: inline-flex;
}
.wpsa-auth2__input-icon svg { width: 18px; height: 18px; }
.wpsa-auth2__input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px 12px 40px;
  border: 1px solid var(--x-border); border-radius: 12px;
  background: #fff; color: var(--x-ink); font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.wpsa-auth2__input::placeholder { color: #a8a29e; }
.wpsa-auth2__input:hover { border-color: #d6d1c7; }
.wpsa-auth2__input:focus { outline: none; border-color: var(--x-indigo); box-shadow: 0 0 0 4px rgba(79, 70, 229, .12); }
.wpsa-auth2__toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: inline-flex; padding: 4px; border: none; background: none;
  color: #a8a29e; cursor: pointer;
}
.wpsa-auth2__toggle svg { width: 18px; height: 18px; }
.wpsa-auth2__toggle:hover { color: var(--x-ink-2); }

.wpsa-auth2__remember { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--x-ink-2); cursor: pointer; }
.wpsa-auth2__remember input { width: 16px; height: 16px; accent-color: var(--x-indigo); }

.wpsa-auth2__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 18px; margin-top: 2px;
  border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #5b52ec 0%, #4f46e5 100%);
  color: #fff; font-size: 14.5px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(79, 70, 229, .30), 0 8px 20px rgba(79, 70, 229, .26);
  transition: background .14s, box-shadow .2s cubic-bezier(.22, 1, .36, 1), transform .2s cubic-bezier(.22, 1, .36, 1);
}
.wpsa-auth2__btn svg { width: 18px; height: 18px; transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
.wpsa-auth2__btn:hover { background: linear-gradient(180deg, #524ae8 0%, #4338ca 100%); box-shadow: 0 2px 8px rgba(79, 70, 229, .34), 0 12px 28px rgba(79, 70, 229, .30); transform: translateY(-1px); }
.wpsa-auth2__btn:hover svg { transform: translateX(3px); }
.wpsa-auth2__btn:active { transform: translateY(0); }
.wpsa-auth2__btn:focus-visible { outline: 2px solid var(--x-indigo); outline-offset: 2px; }

.wpsa-auth2__foot { margin: 28px 0 0; text-align: center; font-size: 13px; color: var(--x-muted); }
.wpsa-auth2__foot a { color: var(--x-ink-2); font-weight: 600; text-decoration: none; }
.wpsa-auth2__foot a:hover { color: var(--x-indigo); text-decoration: underline; }

@keyframes wpsaFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .wpsa-auth2__orb { animation: none !important; }
  .wpsa-auth2__brand-inner, .wpsa-auth2__form-inner { animation: none !important; }
  .wpsa-auth2__btn, .wpsa-auth2__btn svg { transition: none !important; }
}

/* Fix: host-theme input rules were beating the field padding, dropping the icon
   under the placeholder. Force room for the leading icon (and the password
   show/hide on the right), with higher specificity + !important so theme CSS
   can't override it; keep icons click-through. */
.wpsa-auth2 .wpsa-auth2__input-wrap > .wpsa-auth2__input {
  padding: 12px 42px 12px 44px !important;
}
.wpsa-auth2 .wpsa-auth2__input-icon,
.wpsa-auth2 .wpsa-auth2__input-icon svg { pointer-events: none; }

/* --- Login: theme toggle + dark mode --------------------------------------- */
.wpsa-auth2__theme {
  position: absolute; top: 16px; right: 16px; z-index: 30;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--x-border); background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #78716c; cursor: pointer; transition: color .15s, background .15s;
}
.wpsa-auth2__theme:hover { color: var(--x-ink); background: #fff; }
.wpsa-auth2__theme svg { width: 18px; height: 18px; }
.wpsa-auth2__theme-sun { display: none; }
.wpsa-auth2.is-dark .wpsa-auth2__theme-moon { display: none; }
.wpsa-auth2.is-dark .wpsa-auth2__theme-sun  { display: inline-flex; }

/* Dark variant — cohesive with the portal's slate-navy + indigo-400 theme. */
.wpsa-auth2.is-dark {
  --x-ink:    #f1f5f9;
  --x-ink-2:  #cbd5e1;
  --x-muted:  #94a3b8;
  --x-border: #334155;
  --x-indigo: #818cf8;
  color: var(--x-ink);
}
.wpsa-auth2.is-dark .wpsa-auth2__brand { background: linear-gradient(135deg, #0b1120 0%, #141b33 48%, #1c1b40 100%); }
.wpsa-auth2.is-dark .wpsa-auth2__orb--a { opacity: .5; }
.wpsa-auth2.is-dark .wpsa-auth2__orb--b { opacity: .45; }
.wpsa-auth2.is-dark .wpsa-auth2__orb--c { opacity: .4; }
.wpsa-auth2.is-dark .wpsa-auth2__brand-name,
.wpsa-auth2.is-dark .wpsa-auth2__headline { color: #fff; }
.wpsa-auth2.is-dark .wpsa-auth2__subhead  { color: #94a3b8; }
.wpsa-auth2.is-dark .wpsa-auth2__brand-mark { background: #6366f1; box-shadow: 0 6px 16px rgba(99, 102, 241, .4); }
.wpsa-auth2.is-dark .wpsa-auth2__feature {
  background: rgba(129, 140, 248, .07); border-color: rgba(129, 140, 248, .18); color: #cbd5e1;
}
.wpsa-auth2.is-dark .wpsa-auth2__feature-icon { background: rgba(129, 140, 248, .16); color: #a5b4fc; }
.wpsa-auth2.is-dark .wpsa-auth2__panel { background: #0b1120; }
.wpsa-auth2.is-dark .wpsa-auth2__title { color: #fff; }
.wpsa-auth2.is-dark .wpsa-auth2__lede,
.wpsa-auth2.is-dark .wpsa-auth2__foot  { color: #94a3b8; }
.wpsa-auth2.is-dark .wpsa-auth2__field label { color: #cbd5e1; }
.wpsa-auth2.is-dark .wpsa-auth2__input {
  background: #1e293b; border-color: #334155; color: #f1f5f9;
}
.wpsa-auth2.is-dark .wpsa-auth2__input::placeholder { color: #64748b; }
.wpsa-auth2.is-dark .wpsa-auth2__input:hover  { border-color: #475569; }
.wpsa-auth2.is-dark .wpsa-auth2__input:focus  { border-color: #818cf8; box-shadow: 0 0 0 4px rgba(129, 140, 248, .18); }
.wpsa-auth2.is-dark .wpsa-auth2__input-icon,
.wpsa-auth2.is-dark .wpsa-auth2__toggle { color: #64748b; }
.wpsa-auth2.is-dark .wpsa-auth2__toggle:hover { color: #cbd5e1; }
.wpsa-auth2.is-dark .wpsa-auth2__remember { color: #cbd5e1; }
.wpsa-auth2.is-dark .wpsa-auth2__forgot,
.wpsa-auth2.is-dark .wpsa-auth2__foot a:hover { color: #a5b4fc; }
.wpsa-auth2.is-dark .wpsa-auth2__foot a { color: #cbd5e1; }
.wpsa-auth2.is-dark .wpsa-auth2__theme { background: rgba(15, 23, 42, .6); border-color: #334155; color: #94a3b8; }
.wpsa-auth2.is-dark .wpsa-auth2__theme:hover { background: #1e293b; color: #fff; }
.wpsa-auth2.is-dark .wpsa-auth2__notice--info  { background: rgba(99, 102, 241, .12); border-color: rgba(129, 140, 248, .3); color: #c7d2fe; }
.wpsa-auth2.is-dark .wpsa-auth2__notice--warn  { background: rgba(245, 158, 11, .12); border-color: rgba(251, 191, 36, .3); color: #fcd34d; }
.wpsa-auth2.is-dark .wpsa-auth2__notice--error { background: rgba(239, 68, 68, .12);  border-color: rgba(248, 113, 113, .3); color: #fca5a5; }

/* Fix: a few-px vertical scroll on the full-bleed login. Two causes neutralised:
 * (1) content-box padding adding to the 100vh panels' height — force border-box;
 * (2) the entrance translateY nudging a full-height panel past the viewport —
 *     redefine the keyframes to fade only (opacity). Plus clip stray x-overflow. */
.wpsa-auth2,
.wpsa-auth2 *,
.wpsa-auth2 *::before,
.wpsa-auth2 *::after { box-sizing: border-box; }
.wpsa-auth2 { overflow-x: hidden; }
@keyframes wpsaFadeUp { from { opacity: 0; } to { opacity: 1; } }

/* The login is a direct child of <body> on the Elementor Canvas page, so the
 * browser's default body margin makes the 100vh section overflow by a few px.
 * Zero it (scoped to the canvas portal page, and to any page holding the login). */
body.elementor-template-canvas { margin: 0 !important; padding: 0 !important; }
html:has(.wpsa-auth2),
body:has(.wpsa-auth2) { margin: 0 !important; padding: 0 !important; }
.wpsa-auth2 { margin: 0; }

/* Scroll fix (structural): the brand panel carried its OWN min-height:100vh plus
 * 56px padding, and brand-inner had min-height:inherit + height:100% — that nest
 * can compute a hair over 100vh and push the document. Instead: the container's
 * min-height + default flex-stretch sizes the panel to the viewport, and the
 * inner simply flexes to fill (no own height, no padding overflow). Also clip any
 * horizontal scrollbar at the page level — its reserved gutter shows up as a few
 * px of vertical scroll. */
.wpsa-auth2__brand { display: flex; flex-direction: column; }
@media (min-width: 1000px) { .wpsa-auth2__brand { min-height: 0; } }
.wpsa-auth2__brand-inner {
  min-height: 0 !important;
  height: auto !important;
  flex: 1 1 auto;
}
html:has(.wpsa-auth2),
body:has(.wpsa-auth2) { overflow-x: hidden; }

/* THE actual scroll cause (confirmed by headless measurement): wpautop wraps the
 * shortcode's trailing whitespace in an empty <p> at <body> level, and that <p>'s
 * default ~14px margin pushes the 100vh login section past the viewport. Zero it. */
body:has(.wpsa-auth2) > p { margin: 0 !important; }
body.elementor-template-canvas > p:empty { display: none !important; }

/* =========================================================================
 * Premium logged-in dashboard. The cards picked up the warm surface token but
 * stayed flat (thin border, no resting shadow) and the stat row was cramped
 * centred pills. Give everything real depth, breathing room, and hover settle.
 * ========================================================================= */

/* KPI stat row — equal-width cards, left-aligned, number-forward, with depth. */
.wpsa-portal .wpsa-pstats { gap: 14px; margin-bottom: 28px; }
.wpsa-portal .wpsa-pstat {
  align-items: flex-start;
  flex: 1 1 0; min-width: 130px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--p-border);
  background: var(--p-surface);
  box-shadow: var(--p-shadow);
  gap: 7px;
  transition: box-shadow .22s var(--p-ease-settle), transform .22s var(--p-ease-settle);
}
.wpsa-portal .wpsa-pstat:hover { box-shadow: var(--p-shadow-md); transform: translateY(-2px); }
.wpsa-portal .wpsa-pstat__val { font-size: 30px; font-weight: 750; letter-spacing: -.025em; }
.wpsa-portal .wpsa-pstat__label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--p-text-3);
}
.wpsa-portal .wpsa-pstat--alert { border-color: rgba(239, 68, 68, .35); background: rgba(239, 68, 68, .05); }

/* Site (portfolio) cards — warm depth at rest + a settle lift on hover. */
.wpsa-portal .wpsa-pcard {
  padding: 20px;
  border-radius: 16px;
  box-shadow: var(--p-shadow);
  transition: box-shadow .22s var(--p-ease-settle), transform .22s var(--p-ease-settle);
}
.wpsa-portal .wpsa-pcard:hover {
  box-shadow: var(--p-shadow-md);
  transform: translateY(-3px);
  border-color: var(--p-border);
}
.wpsa-portal .wpsa-portfolio-grid { gap: 18px; }

/* View header — larger, warm ink, tighter tracking. */
.wpsa-portal .wpsa-view-title { font-size: 28px; font-weight: 700; letter-spacing: -.025em; color: var(--p-text); }
.wpsa-portal .wpsa-view-subtitle { font-size: 13.5px; color: var(--p-text-3); }

/* Cards that use the legacy --wpsa-* tokens (quick-audit, site-card) — bring
 * them onto the warm surface + premium depth so nothing reads stark-white. */
.wpsa-portal .wpsa-quick-audit-card,
.wpsa-portal .wpsa-site-card {
  background: var(--p-surface) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--p-shadow);
  padding: 24px 26px;
}

/* Filter/search controls — softer, warmer, consistent radius. */
.wpsa-portal .wpsa-portfolio-search-input,
.wpsa-portal .wpsa-form-control {
  border-radius: 10px;
  border-color: var(--p-border);
  background: var(--p-surface);
}
.wpsa-portal .wpsa-view-toggle { background: var(--p-surface-3); border-radius: 10px; }

/* =========================================================================
 * Premium first-run / empty dashboard. Replaces the flat banner + lone input
 * + void with a warm indigo-glow hero (brand-matched to the login) and a
 * "what you get" feature grid that fills the space with value.
 * ========================================================================= */
.wpsa-portal .wpsa-dash-empty { display: flex; flex-direction: column; gap: 22px; }

.wpsa-portal .wpsa-dash-empty__hero {
  position: relative; overflow: hidden;
  border: 1px solid var(--p-border); border-radius: 22px;
  background: linear-gradient(135deg, #fffdf9 0%, #f8f5ff 55%, #f1efff 100%);
  box-shadow: var(--p-shadow-md);
  padding: 46px 46px 42px;
}
.wpsa-portal .wpsa-dash-empty__glow {
  position: absolute; top: -130px; right: -90px; width: 480px; height: 480px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(99, 102, 241, .20), transparent 70%);
}
.wpsa-portal .wpsa-dash-empty__hero-in { position: relative; z-index: 1; max-width: 640px; }
.wpsa-portal .wpsa-dash-empty__eyebrow {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .11em; color: var(--p-blue); margin-bottom: 14px;
}
.wpsa-portal .wpsa-dash-empty__title {
  margin: 0; font-size: 34px; font-weight: 700; line-height: 1.13; letter-spacing: -.03em; color: var(--p-text);
}
.wpsa-portal .wpsa-dash-empty__title span { display: block; color: var(--p-blue); }
.wpsa-portal .wpsa-dash-empty__sub {
  margin: 15px 0 26px; font-size: 15.5px; line-height: 1.6; color: var(--p-text-2); max-width: 560px;
}
.wpsa-portal .wpsa-dash-empty__form { display: flex; gap: 10px; max-width: 600px; }
.wpsa-portal .wpsa-dash-empty__form .wpsa-audit-form__input {
  flex: 1; padding: 14px 16px; font-size: 15px; border-radius: 12px;
  border: 1px solid var(--p-border); background: #fff; color: var(--p-text);
}
.wpsa-portal .wpsa-dash-empty__form .wpsa-audit-form__input:focus { border-color: var(--p-blue); box-shadow: var(--p-ring); outline: none; }
.wpsa-portal .wpsa-dash-empty__form .wpsa-btn-run { padding: 14px 26px; font-size: 15px; border-radius: 12px; }

.wpsa-portal .wpsa-dash-empty__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1100px) { .wpsa-portal .wpsa-dash-empty__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .wpsa-portal .wpsa-dash-empty__grid { grid-template-columns: 1fr; } }
.wpsa-portal .wpsa-dash-empty__feat {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--p-surface); border: 1px solid var(--p-border);
  border-radius: 16px; padding: 18px 20px; box-shadow: var(--p-shadow);
  transition: box-shadow .22s var(--p-ease-settle), transform .22s var(--p-ease-settle);
}
.wpsa-portal .wpsa-dash-empty__feat:hover { box-shadow: var(--p-shadow-md); transform: translateY(-2px); }
.wpsa-portal .wpsa-dash-empty__feat-ic {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e7e9ff; color: var(--p-blue);
}
.wpsa-portal .wpsa-dash-empty__feat-ic svg { width: 20px; height: 20px; }
.wpsa-portal .wpsa-dash-empty__feat strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--p-text); margin-bottom: 3px; }
.wpsa-portal .wpsa-dash-empty__feat p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--p-text-3); }

/* Dark mode */
.wpsa-portal[data-theme="dark"] .wpsa-dash-empty__hero { background: linear-gradient(135deg, #131c33 0%, #16142e 58%, #1c1b40 100%); }
.wpsa-portal[data-theme="dark"] .wpsa-dash-empty__glow { background: radial-gradient(circle, rgba(129, 140, 248, .22), transparent 70%); }
.wpsa-portal[data-theme="dark"] .wpsa-dash-empty__form .wpsa-audit-form__input { background: var(--p-input-bg); }
.wpsa-portal[data-theme="dark"] .wpsa-dash-empty__feat-ic { background: rgba(129, 140, 248, .16); color: #a5b4fc; }

/* =========================================================================
 * Light theme v2 — "crisper + richer" (Marcel: warm-cream read flat/beige).
 * Crisp white cards on a clean cool-neutral so cards pop, stronger indigo-tinted
 * depth, and more indigo accent presence. Dark theme is untouched (its
 * [data-theme="dark"] rules out-specify these). Loaded last → overrides the
 * earlier warm palette. ========================================================= */
.wpsa-portal {
  --p-surface:    #ffffff;   /* crisp white cards */
  --p-surface-2:  #eef1f8;   /* clean cool-neutral page */
  --p-surface-3:  #e7ebf5;
  --p-border:     #e4e8f1;
  --p-border-2:   #e4e8f1;
  --p-input-bg:   #ffffff;
  --p-text:       #0f172a;   /* crisp cool slate */
  --p-text-2:     #475569;
  --p-text-3:     #64748b;
  --p-shadow:     0 1px 2px rgba(15, 23, 42, .04), 0 8px 22px rgba(79, 70, 229, .09);
  --p-shadow-md:  0 18px 44px rgba(79, 70, 229, .17), 0 4px 12px rgba(15, 23, 42, .07);
  background: radial-gradient(130% 90% at 50% -8%, #f4f6fd 0%, var(--p-surface-2) 55%);
}

/* Richer: branded indigo top-accent on the KPI stat cards. */
.wpsa-portal .wpsa-pstat { position: relative; overflow: hidden; }
.wpsa-portal .wpsa-pstat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #4f46e5, #818cf8);
}
.wpsa-portal .wpsa-pstat--alert::before { background: linear-gradient(90deg, #ef4444, #f87171); }

/* Crisper hero — lighter, cooler, with a touch more indigo energy. */
.wpsa-portal .wpsa-dash-empty__hero { background: linear-gradient(135deg, #ffffff 0%, #f4f3ff 50%, #ebeaff 100%); }
.wpsa-portal .wpsa-dash-empty__glow { background: radial-gradient(circle, rgba(99, 102, 241, .26), transparent 70%); }

/* =========================================================================
 * Report content premium retune. The audit report renders on its OWN token
 * system (--wpsa-*, sky-blue accent, flat shadows) separate from --p-*, so it
 * stayed stark while the rest of the portal got the premium treatment. Retune
 * those tokens inside .wpsa-portal so every report component (section cards,
 * issue cards, badges, score breakdowns) adopts the crisp + indigo + depth look
 * at once. Scoped to .wpsa-portal → admin + public reports keep their defaults.
 * ========================================================================= */
.wpsa-portal {
  --wpsa-blue:        #4f46e5;   /* indigo to match the portal (was sky #3b82f6) */
  --wpsa-blue-bright: #6366f1;
  --wpsa-surface:     #ffffff;
  --wpsa-surface-2:   #f7f8fc;
  --wpsa-border:      #e4e8f1;
  --wpsa-border-2:    #eef1f8;
  --wpsa-text:        #0f172a;
  --wpsa-text-2:      #475569;
  --wpsa-text-3:      #64748b;
  --wpsa-r-md: 11px;
  --wpsa-r-lg: 16px;
  --wpsa-r-xl: 20px;
  --wpsa-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --wpsa-shadow-md: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 22px rgba(79, 70, 229, .09);
  --wpsa-shadow-lg: 0 18px 44px rgba(79, 70, 229, .16), 0 4px 12px rgba(15, 23, 42, .07);
}
.wpsa-portal[data-theme="dark"] {
  --wpsa-surface:   #0f172a;
  --wpsa-surface-2: #1e293b;
  --wpsa-border:    #334155;
  --wpsa-border-2:  #243043;
  --wpsa-text:      #f1f5f9;
  --wpsa-text-2:    #cbd5e1;
  --wpsa-text-3:    #94a3b8;
  --wpsa-blue:      #818cf8;
}

/* Issue cards — a touch more room + a clean hover, on the retuned tokens. */
.wpsa-portal .wpsa-results-panel .wpsa-issue-card { padding: 16px 22px; }
.wpsa-portal .wpsa-results-panel .wpsa-issue-card:hover { background: var(--p-surface-2); }
/* Report section cards get the premium depth from the retuned --wpsa-shadow-md. */
.wpsa-portal .wpsa-results-panel .wpsa-card { border-radius: var(--wpsa-r-lg); }

/* Report — breathing-room pass (Marcel: "too tight everywhere"). Objective
 * whitespace + looser type for a calmer, more premium read. */
.wpsa-portal .wpsa-results-panel .wpsa-card { margin-bottom: 26px; }
.wpsa-portal .wpsa-results-panel .wpsa-card__header { padding: 18px 26px; }

/* Issue cards — more room, looser text, clearer separation. */
.wpsa-portal .wpsa-results-panel .wpsa-issue-card { padding: 20px 26px; gap: 16px; }
.wpsa-portal .wpsa-results-panel .wpsa-issue-card__title { font-size: 14.5px; line-height: 1.45; margin-bottom: 5px; }
.wpsa-portal .wpsa-results-panel .wpsa-issue-card__desc { font-size: 13px; line-height: 1.66; }
.wpsa-portal .wpsa-results-panel .wpsa-issue-card__content > * + * { margin-top: 9px; }
.wpsa-portal .wpsa-results-panel .wpsa-issue-card__fix-body { line-height: 1.66; padding: 6px 0 2px; }
.wpsa-portal .wpsa-results-panel .wpsa-issue-card__fix-toggle,
.wpsa-portal .wpsa-results-panel .wpsa-issue-card__items-toggle { margin-top: 11px; }

/* Score breakdown rows + stats — more vertical rhythm. */
.wpsa-portal .wpsa-results-panel .wpsa-perf-score-row,
.wpsa-portal .wpsa-results-panel .wpsa-score-row { padding: 9px 0; }
.wpsa-portal .wpsa-results-panel .wpsa-perf-stats { gap: 14px; margin: 20px 0; }
.wpsa-portal .wpsa-results-panel .wpsa-perf-stat { padding: 16px 18px; }
.wpsa-portal .wpsa-results-panel .wpsa-perf-section-hdr { margin: 26px 0 12px; }
.wpsa-portal .wpsa-results-panel .wpsa-issue-filters { margin: 18px 0; gap: 8px; }

/* Tab panel content gets a little air under the tab bar + between overview blocks. */
#wpsa-findings .wpsa-rtabs__panels { padding-top: 2px; }
.wpsa-portal .wpsa-results-panel .wpsa-rtabs__panel--overview > * { margin-bottom: 22px; }

/* =========================================================================
 * Issue findings → distinct elevated cards (was dense divider rows). The core
 * repeating element of the report; card-ifying it transforms the whole feel.
 * ========================================================================= */
.wpsa-portal .wpsa-results-panel .wpsa-issue-card {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-left: 3px solid var(--p-border);
  border-radius: 14px;
  box-shadow: var(--p-shadow);
  padding: 18px 22px;
  margin-bottom: 12px;
  transition: box-shadow .2s var(--p-ease-settle), transform .2s var(--p-ease-settle), border-color .15s;
}
.wpsa-portal .wpsa-results-panel .wpsa-issue-card:hover {
  box-shadow: var(--p-shadow-md);
  transform: translateY(-1px);
}
.wpsa-portal .wpsa-results-panel .wpsa-issue-card[data-severity="critical"] { border-left-color: #ef4444; }
.wpsa-portal .wpsa-results-panel .wpsa-issue-card[data-severity="warning"]  { border-left-color: #f59e0b; }
.wpsa-portal .wpsa-results-panel .wpsa-issue-card[data-severity="info"]     { border-left-color: var(--p-blue); }

/* The issues list containers shouldn't add their own card chrome (avoid card-in-card). */
.wpsa-portal .wpsa-results-panel .wpsa-perf-issues,
.wpsa-portal .wpsa-results-panel .wpsa-seo-issues,
.wpsa-portal .wpsa-results-panel .wpsa-infra-issues,
.wpsa-portal .wpsa-results-panel .wpsa-crawl-issues {
  background: none; border: none; box-shadow: none; padding: 0;
}
/* Slightly larger severity dot, aligned to the new padding. */
.wpsa-portal .wpsa-results-panel .wpsa-issue-card__sev-dot { width: 9px; height: 9px; margin-top: 6px; }

/* =========================================================================
 * Report hero → crisp premium scorecard (was flat dark navy that clashed with
 * the light theme). Uses --p-surface so it stays light in light mode and dark in
 * dark mode automatically. Every white-on-navy element re-coloured to the theme.
 * ========================================================================= */
.wpsa-portal .wpsa-results-panel .wpsa-results-hero {
  background: var(--p-surface) !important;
  border: 1px solid var(--p-border);
  box-shadow: var(--p-shadow-md);
}
.wpsa-portal .wpsa-results-panel .wpsa-results-hero::after {
  background: radial-gradient(circle, rgba(79, 70, 229, .10) 0%, transparent 70%) !important;
}
.wpsa-portal .wpsa-results-panel .wpsa-score-ring__number,
.wpsa-portal .wpsa-results-panel .wpsa-hero-score__grade { color: var(--p-text); }
.wpsa-portal .wpsa-results-panel .wpsa-score-ring__sub,
.wpsa-portal .wpsa-results-panel .wpsa-hero-score__label,
.wpsa-portal .wpsa-results-panel .wpsa-hero-meta__duration { color: var(--p-text-3); }
.wpsa-portal .wpsa-results-panel .wpsa-hero-meta__url { color: var(--p-text-2); }
.wpsa-portal .wpsa-results-panel .wpsa-score-ring__track,
.wpsa-portal .wpsa-results-panel .wpsa-cat-ring__track { stroke: var(--p-surface-3); }
.wpsa-portal .wpsa-results-panel .wpsa-hero-divider { background: var(--p-border); }
.wpsa-portal .wpsa-results-panel .wpsa-cat-card {
  background: var(--p-surface-2) !important;
  border-color: var(--p-border) !important;
}
.wpsa-portal .wpsa-results-panel .wpsa-cat-card__label { color: var(--p-text-3) !important; }
.wpsa-portal .wpsa-results-panel .wpsa-cat-ring__num { fill: var(--p-text); color: var(--p-text); }

/* Hero v3: white had no contrast, flat navy clashed — use a premium INDIGO
 * GRADIENT scorecard. Brand-coloured, strong contrast against the light report,
 * white text/rings. (Overrides the white-hero block above.) */
.wpsa-portal .wpsa-results-panel .wpsa-results-hero {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 55%, #3730a3 100%) !important;
  border: none !important;
  box-shadow: 0 18px 44px rgba(79, 70, 229, .28), 0 4px 12px rgba(15, 23, 42, .12) !important;
}
.wpsa-portal .wpsa-results-panel .wpsa-results-hero::after {
  background: radial-gradient(circle, rgba(255, 255, 255, .14) 0%, transparent 70%) !important;
}
.wpsa-portal .wpsa-results-panel .wpsa-score-ring__number,
.wpsa-portal .wpsa-results-panel .wpsa-hero-score__grade { color: #fff; }
.wpsa-portal .wpsa-results-panel .wpsa-score-ring__sub,
.wpsa-portal .wpsa-results-panel .wpsa-hero-score__label,
.wpsa-portal .wpsa-results-panel .wpsa-hero-meta__duration { color: rgba(255, 255, 255, .7); }
.wpsa-portal .wpsa-results-panel .wpsa-hero-meta__url { color: rgba(255, 255, 255, .82); }
.wpsa-portal .wpsa-results-panel .wpsa-score-ring__track,
.wpsa-portal .wpsa-results-panel .wpsa-cat-ring__track { stroke: rgba(255, 255, 255, .2); }
.wpsa-portal .wpsa-results-panel .wpsa-hero-divider { background: rgba(255, 255, 255, .16); }
.wpsa-portal .wpsa-results-panel .wpsa-cat-card {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .15) !important;
}
.wpsa-portal .wpsa-results-panel .wpsa-cat-card__label { color: rgba(255, 255, 255, .62) !important; }
.wpsa-portal .wpsa-results-panel .wpsa-cat-ring__num { fill: #fff; color: #fff; }

/* Hero category cards — compact. 9 big ring-cards was overkill for a header;
 * shrink the rings/padding so the scorecard reads tight, not chunky. */
.wpsa-portal .wpsa-results-panel .wpsa-category-scores { gap: 8px !important; }
.wpsa-portal .wpsa-results-panel .wpsa-cat-card { padding: 9px 8px !important; }
.wpsa-portal .wpsa-results-panel .wpsa-cat-ring-wrap { width: 42px !important; height: 42px !important; margin: 0 auto 5px !important; }
.wpsa-portal .wpsa-results-panel .wpsa-cat-ring { width: 42px !important; height: 42px !important; }
.wpsa-portal .wpsa-results-panel .wpsa-cat-ring__num { font-size: 12px !important; }
.wpsa-portal .wpsa-results-panel .wpsa-cat-card__label { font-size: 9px !important; letter-spacing: .04em !important; }



/* Hero: category scores in a SINGLE ROW (was 3×3). Move the URL/date to a header
 * line on top so the overall score + all 9 boxes get the full width as one row. */
.wpsa-portal .wpsa-results-panel .wpsa-results-hero {
  grid-template-columns: auto 1fr !important;
  grid-template-areas: "meta meta" "score cats" !important;
  align-items: center !important;
  gap: 18px 26px !important;
}
.wpsa-portal .wpsa-results-panel .wpsa-hero-meta {
  grid-area: meta; text-align: left !important;
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
}
.wpsa-portal .wpsa-results-panel .wpsa-hero-score { grid-area: score; padding: 4px 16px !important; }
.wpsa-portal .wpsa-results-panel .wpsa-hero-divider { display: none !important; }
.wpsa-portal .wpsa-results-panel .wpsa-category-scores {
  grid-area: cats;
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

/* Category tabs → prominent pill buttons. */
.wpsa-portal #wpsa-findings .wpsa-rtabs__bar { gap: 8px; border-bottom: none; margin-bottom: 24px; }
.wpsa-portal #wpsa-findings .wpsa-rtab {
  border: 1px solid var(--p-border); border-radius: 10px;
  background: var(--p-surface); padding: 9px 14px; margin-bottom: 0;
  color: var(--p-text-2); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.wpsa-portal #wpsa-findings .wpsa-rtab:hover { border-color: var(--p-blue); color: var(--p-text); }
.wpsa-portal #wpsa-findings .wpsa-rtab.is-active {
  background: var(--p-blue); border-color: var(--p-blue); color: #fff;
  box-shadow: 0 5px 14px rgba(79, 70, 229, .32);
}
.wpsa-portal #wpsa-findings .wpsa-rtab.is-active .dashicons { color: #fff; }
.wpsa-portal #wpsa-findings .wpsa-rtab.is-active .wpsa-rtab__count { background: rgba(255, 255, 255, .25) !important; color: #fff !important; }

/* One-row hero: tighten boxes + labels so all 9 fit cleanly (no label collisions). */
.wpsa-portal .wpsa-results-panel .wpsa-cat-card { padding: 10px 4px !important; }
.wpsa-portal .wpsa-results-panel .wpsa-cat-card__label {
  font-size: 8.5px !important; letter-spacing: .01em !important; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center;
}

/* =========================================================================
 * Core Web Vitals bars — sleeker premium gauge. Was a chunky 20px bordered
 * track with washed-out .18 zones + a thin line marker & triangle. Now: a thin
 * rounded pill track, richer zone tints, and a clean white-ringed thumb dot.
 * ========================================================================= */
.wpsa-portal .wpsa-results-panel .wpsa-cwv-bar-track {
  height: 9px !important; border: none !important; border-radius: 999px !important; overflow: visible !important;
  background: var(--p-surface-3);
}
.wpsa-portal .wpsa-results-panel .wpsa-cwv-bar-zone--good { background: rgba(34, 197, 94, .34); border-radius: 999px 0 0 999px; }
.wpsa-portal .wpsa-results-panel .wpsa-cwv-bar-zone--avg  { background: rgba(245, 158, 11, .36); }
.wpsa-portal .wpsa-results-panel .wpsa-cwv-bar-zone--poor { background: rgba(239, 68, 68, .32); border-radius: 0 999px 999px 0; }

/* Marker → clean slider-thumb dot (was a thin vertical line + triangle).
 * !important + higher specificity to beat admin.css's second CWV block. */
.wpsa-portal .wpsa-results-panel .wpsa-cwv-bar-marker {
  top: 50% !important; bottom: auto !important; width: 15px !important; height: 15px !important;
  border-radius: 50% !important; transform: translate(-50%, -50%) !important;
  border: 3px solid #fff !important; box-shadow: 0 1px 3px rgba(15, 23, 42, .3) !important;
  z-index: 2;
}
.wpsa-portal[data-theme="dark"] .wpsa-results-panel .wpsa-cwv-bar-marker { border-color: var(--p-surface); }
.wpsa-portal .wpsa-results-panel .wpsa-cwv-bar-marker__tip { display: none; }

/* Threshold label + row rhythm. */
.wpsa-portal .wpsa-results-panel .wpsa-cwv-bar-thresholds { height: 11px; margin-top: 8px; }
.wpsa-portal .wpsa-results-panel .wpsa-cwv-bar-thresholds span { font-size: 9.5px; color: var(--p-text-3); }
.wpsa-portal .wpsa-results-panel .wpsa-cwv-bar-row { padding: 14px 20px; }

/* Legend swatches a touch richer to match. */
.wpsa-portal .wpsa-results-panel .wpsa-cwv-legend-item::before { border-radius: 3px; }

/* Perf score speedometer — the score + status label sat cramped against the arc.
 * Enlarge the gauge (more interior room) while keeping the text size, and add a
 * little gap between the number and its label. !important to beat admin.css. */
.wpsa-portal .wpsa-results-panel .wpsa-gauge-wrap { width: 170px !important; }
.wpsa-portal .wpsa-results-panel .wpsa-gauge { width: 170px !important; height: 97px !important; }
.wpsa-portal .wpsa-results-panel .wpsa-gauge__center { bottom: 17px !important; }
.wpsa-portal .wpsa-results-panel .wpsa-gauge__num { font-size: 30px !important; }
.wpsa-portal .wpsa-results-panel .wpsa-gauge__label { margin-top: 4px !important; font-size: 8.5px !important; }

/* Destructive buttons (Delete etc.) were a washed "weird pink" at rest (#fff5f5)
 * and on hover. Make them clean & deliberate: neutral at rest with red text,
 * solid red on hover with white text. !important + specificity to beat the
 * several .wpsa-btn--danger rules in portal.css. */
.wpsa-portal .wpsa-btn--danger,
.wpsa-portal .wpsa-report-actions__buttons .wpsa-btn--danger {
  background: var(--p-surface) !important;
  border-color: var(--p-border) !important;
  color: #dc2626 !important;
}
.wpsa-portal .wpsa-btn--danger:hover,
.wpsa-portal .wpsa-report-actions__buttons .wpsa-btn--danger:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}
.wpsa-portal .wpsa-btn--danger:hover .dashicons { color: #fff !important; }

/* =========================================================================
 * Host-theme pink (#cc3366) bleed. Several report buttons were left unstyled, so
 * the WP theme painted them pink — text/border at rest, background on hover.
 * Give each clean in-theme styling. (.wpsa-portal .<class> beats the theme.)
 * ========================================================================= */
/* Mobile / Desktop device toggle */
.wpsa-portal .wpsa-device-btn:hover {
  background: var(--p-surface-3) !important; color: var(--p-text) !important; border-color: var(--p-border) !important;
}
.wpsa-portal .wpsa-device-btn--active,
.wpsa-portal .wpsa-device-btn--active:hover {
  background: var(--p-blue) !important; border-color: var(--p-blue) !important; color: #fff !important;
}
/* Lighthouse opportunities toggle (text button) */
.wpsa-portal .wpsa-opp-toggle { color: var(--p-blue) !important; }
.wpsa-portal .wpsa-opp-toggle:hover { background: transparent !important; color: var(--p-blue) !important; text-decoration: underline; }
/* AI action buttons (GEO action plan, content-quality critique) → clean indigo */
.wpsa-portal .wpsa-geo-plan-btn,
.wpsa-portal .wpsa-cq-critique-btn {
  background: #eef2ff !important; color: #4f46e5 !important; border: 1px solid #c7d2fe !important;
}
.wpsa-portal .wpsa-geo-plan-btn:hover,
.wpsa-portal .wpsa-cq-critique-btn:hover {
  background: #e0e7ff !important; border-color: #a5b4fc !important; color: #3730a3 !important;
}

/* More host-theme #cc3366 pink bleed, swept across the other portal views. */
.wpsa-portal .wpsa-portal__nav-toggle { color: var(--p-text) !important; border-color: var(--p-border) !important; }
.wpsa-portal .wpsa-portal__nav-toggle:hover { background: var(--p-surface-2) !important; }
.wpsa-portal .wpsa-serp-device-btn:hover {
  background: var(--p-surface-3) !important; color: var(--p-text) !important; border-color: var(--p-border) !important;
}
.wpsa-portal .wpsa-serp-device-btn.is-active,
.wpsa-portal .wpsa-serp-device-btn--active {
  background: var(--p-blue) !important; border-color: var(--p-blue) !important; color: #fff !important;
}
.wpsa-portal .wpsa-nudge-dismiss:hover { background: var(--p-surface-2) !important; color: var(--p-text) !important; }

/* Dashboard portfolio grid/list view toggle — same pink bleed. */
.wpsa-portal .wpsa-view-toggle-btn:hover { background: var(--p-surface-3) !important; color: var(--p-text) !important; }
.wpsa-portal .wpsa-view-toggle-btn.is-active,
.wpsa-portal .wpsa-view-toggle-btn--active {
  background: var(--p-blue) !important; color: #fff !important; border-color: var(--p-blue) !important;
}

/* Report content (actions, tabs, cards) hugged the report-box edge — zero gutter.
 * Pad the content wrapper so nothing hugs the edge, and pull the indigo hero back
 * out to stay a full-bleed banner. */
.wpsa-portal .wpsa-results-panel { padding: 0 26px 26px !important; }
.wpsa-portal .wpsa-results-panel > .wpsa-results-hero {
  margin-left: -26px !important; margin-right: -26px !important;
}

/* While the audit-loading panel is visible (re-run polling / initial fetch), hide
 * the empty placeholder report behind it so only the progress steps show. The
 * panel is shown via jQuery (inline display:block); hidden again on completion. */
.wpsa-portal #wpsa-loading-panel[style*="block"] ~ .wpsa-results-hero,
.wpsa-portal #wpsa-loading-panel[style*="block"] ~ .wpsa-report-actions,
.wpsa-portal #wpsa-loading-panel[style*="block"] ~ .wpsa-findings { display: none !important; }
/* Give the loading panel its own breathing room in the report box. */
.wpsa-portal .wpsa-results-panel > #wpsa-loading-panel { margin: 8px 0 4px; }