/*
 * PointMintz brand tokens — canonical design system, loaded by every
 * public-facing platform surface BEFORE its page-specific CSS so page-
 * specific styles can consume `var(--pm-*)` tokens.
 *
 * Source of truth + rationale: /BRAND.md
 * Last updated: 2026-04-20
 */

:root {
  /* Pin platform surfaces to light mode — prevents browser dark-chrome
     leaks (form controls, scrollbars, canvas) when the user's system
     is dark. See platform-index.css for the same declaration. */
  color-scheme: light;

  /* ── Color — platform palette ─────────────────────────── */
  --pm-ink: #0f172a;
  --pm-ink-2: #1e293b;
  --pm-ink-muted: #475569;
  --pm-ink-subtle: #475569;
  --pm-surface: #ffffff;
  --pm-surface-2: #f8fafc;
  --pm-surface-3: #f1f5f9;
  --pm-surface-alt: #eef2ff;
  --pm-line: #e2e8f0;
  --pm-line-2: #cbd5e1;

  --pm-accent: #7cf5d2;        /* Electric mint — ties to the "Mintz" wordmark */
  --pm-accent-2: #1ac3a6;      /* Darker mint for hover/pressed fills */
  --pm-accent-text: #046c4d;   /* Mint tone safe for text on white AND pale-blue gradient sections (#dbe8fc) — WCAG AA 4.5:1 with margin (5.21 on gradient, 6.45 on white). Darkened 2026-05-12 from #047857 (4.43 on gradient, intermittent audit fail #10926). */
  --pm-accent-ink: #064e42;    /* Text on mint backgrounds (WCAG AA) */
  --pm-accent-warm: #f59e0b;   /* Amber — urgency / signup energy */
  --pm-accent-warm-2: #d97706;

  --pm-success: #047857;
  --pm-danger: #b91c1c;
  --pm-warning: #92400e;
  --pm-info: #0369a1;

  /* ── Type ─────────────────────────────────────────────── */
  --pm-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pm-font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pm-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --pm-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --pm-text-xs: 0.72rem;
  --pm-text-sm: 0.875rem;
  --pm-text-base: 1rem;
  --pm-text-md: 1.125rem;
  --pm-text-lg: 1.375rem;
  --pm-text-xl: 1.75rem;
  --pm-text-2xl: clamp(2rem, 4vw, 2.75rem);
  --pm-text-3xl: clamp(2.5rem, 5vw, 3.75rem);
  --pm-text-4xl: clamp(3rem, 6vw, 5rem);

  --pm-leading-tight: 1.1;
  --pm-leading-snug: 1.25;
  --pm-leading-normal: 1.55;
  --pm-leading-relaxed: 1.7;

  --pm-tracking-tight: -0.025em;
  --pm-tracking-kicker: 0.14em;

  /* ── Radius ───────────────────────────────────────────── */
  --pm-radius-sm: 8px;
  --pm-radius-md: 14px;
  --pm-radius-lg: 22px;
  --pm-radius-xl: 32px;
  --pm-radius-pill: 999px;

  /* ── Shadow ───────────────────────────────────────────── */
  --pm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --pm-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --pm-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.12);
  --pm-shadow-xl: 0 32px 90px rgba(15, 23, 42, 0.18);
  --pm-shadow-glow: 0 0 0 3px rgba(124, 245, 210, 0.28);
  --pm-shadow-glow-warm: 0 0 0 3px rgba(245, 158, 11, 0.24);

  /* ── Motion ───────────────────────────────────────────── */
  --pm-ease: cubic-bezier(.2, .8, .2, 1);
  --pm-duration-fast: 140ms;
  --pm-duration-med: 220ms;
  --pm-duration-slow: 400ms;

  /* ── Layout ───────────────────────────────────────────── */
  --pm-shell: 1200px;
  --pm-shell-wide: 1320px;
  --pm-gutter: clamp(18px, 3vw, 32px);
  --pm-tap-target: 44px;
}

/* ── Base body typography ─────────────────────────────────────
 * Loaded by every public-facing platform surface BEFORE its page-
 * specific CSS, so any page-level `body { font-family: ... }` rule
 * still wins via cascade order (verified across /css/platform-*.css
 * 2026-05-11). Pages that DON'T set their own body font (e.g. the
 * /onboarding/* trio, which only loads platform-brand.css +
 * platform-onboarding.css) inherit the brand UI font here instead
 * of falling all the way back to the browser default of Times New
 * Roman.
 *
 * Only font-family / color / line-height are set — `background` is
 * deliberately omitted because most marketing surfaces paint their
 * own gradient on body and a base background here would conflict.
 * Heading typography is similarly left to per-page CSS.
 *
 * History: founder caught Times-New-Roman onboarding render
 * 2026-05-11; first patch scoped a fix to body[data-onboarding-page]
 * inside platform-onboarding.css (commit 71ad80fa5). This block is
 * the proper, cascade-friendly fix that benefits every future
 * platform page that loads platform-brand.css. */
body {
  font-family: var(--pm-font-ui, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  color: var(--pm-ink, #0f172a);
  line-height: var(--pm-leading-normal, 1.55);
}

/* ── Focus ring (keyboard) — mint glow plus explicit outline for every platform surface ─── */
:focus-visible {
  outline: 3px solid var(--pm-accent-2);
  outline-offset: 3px;
  box-shadow: var(--pm-shadow-glow);
  border-radius: inherit;
}

@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }
}

/* ── Shared utilities consumable by page-specific CSS ──────── */
.pm-wordmark-accent {
  color: var(--pm-accent-ink);
}
.pm-kicker {
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-xs);
  font-weight: 700;
  letter-spacing: var(--pm-tracking-kicker);
  text-transform: uppercase;
}
.pm-display {
  font-family: var(--pm-font-display);
  letter-spacing: var(--pm-tracking-tight);
  line-height: var(--pm-leading-tight);
}
.pm-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--pm-tap-target);
  padding: 0 22px;
  border-radius: var(--pm-radius-pill);
  background: linear-gradient(135deg, var(--pm-ink), var(--pm-ink-2));
  color: var(--pm-surface);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  box-shadow: var(--pm-shadow-md);
  transition: transform var(--pm-duration-fast) var(--pm-ease),
    box-shadow var(--pm-duration-fast) var(--pm-ease);
}
.pm-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--pm-shadow-lg);
}
.pm-btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--pm-tap-target);
  padding: 0 22px;
  border-radius: var(--pm-radius-pill);
  background: var(--pm-accent);
  color: var(--pm-accent-ink);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  font-weight: 800;
  text-decoration: none;
  border: 1px solid transparent;
  box-shadow: 0 8px 24px rgba(124, 245, 210, 0.28);
  transition: transform var(--pm-duration-fast) var(--pm-ease),
    box-shadow var(--pm-duration-fast) var(--pm-ease),
    background var(--pm-duration-fast) var(--pm-ease);
}
.pm-btn-accent:hover {
  transform: translateY(-1px);
  background: var(--pm-accent-2);
  color: var(--pm-surface);
  box-shadow: 0 14px 32px rgba(26, 195, 166, 0.32);
}

/* Platform brand-logo <img> in nav headers.
 * Height-locked, width auto to preserve aspect ratio of whatever logo
 * the platform admin uploads. Default is the wide PointMintz wordmark
 * at /platform/images/logo-white.png; custom uploads may be square. */
.brand-logo-img {
  object-fit: contain;
  object-position: center;
  height: 32px;
  width: auto;
  max-width: 180px;
  display: inline-block;
  vertical-align: middle;
}

/* Shared platform header — lifted 2026-05-12 from per-page CSS so onboarding/* and any future page inherits.
 *
 * Background: /onboarding/{fit-quiz,gallery,feature-matrix} render with bare browser-default nav
 * (blue underlined links) because they only load platform-brand.css + platform-onboarding.css —
 * neither defined .site-header, .site-nav, .brand-link, .brand-mark, .brand-text, or .btn-cta. The
 * same shape is duplicated across platform-help.css, platform-book-demo.css, and platform-pricing.css
 * (each binding to its own --hp-/--bd-/--pp- color-scope variables). Lifting here using --pm-*
 * tokens means every page that loads platform-brand.css inherits a usable header by default; pages
 * that already define a per-page .site-header (platform-home.css, platform-index.css, the dark-theme
 * trio) cascade-override these rules unchanged.
 *
 * Color tokens chosen so the bare onboarding render is light-theme (matches platform-onboarding.css
 * card surfaces) and remains readable without any per-page override.
 */
.site-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--pm-line);
}
.header-inner {
  max-width: var(--pm-shell);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.brand-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  /* #11073 — was rendering 117x31 on /pricing tablet 768px; brand-link is
     the primary "back to home" anchor on every platform page so it must
     meet the WCAG 2.5.5 44x44 floor. Inline-flex with explicit min-height
     adds the vertical hit area without changing the visual letter rhythm. */
  min-height: var(--pm-tap-target);
  padding: 6px 0;
}
.brand-mark {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: url('/brand/pointmintz-mark.svg') center / contain no-repeat;
  color: transparent;
  font-size: 0;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(35, 217, 183, 0.18);
}
.brand-text {
  color: inherit;
}
.site-nav {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.site-nav a {
  color: var(--pm-ink);
  text-decoration: none;
  font-weight: 500;
  min-height: var(--pm-tap-target);
  min-width: var(--pm-tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  box-sizing: border-box;
}
.site-nav a[aria-current="page"] {
  color: var(--pm-accent-text);
}
.btn-cta {
  background: var(--pm-accent);
  color: var(--pm-accent-ink) !important;
  padding: 0.65rem 1.1rem;
  border-radius: var(--pm-radius-md);
  text-decoration: none;
  font-weight: 700;
  min-height: var(--pm-tap-target);
  display: inline-flex;
  align-items: center;
  border: 0;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform var(--pm-duration-fast) var(--pm-ease),
    box-shadow var(--pm-duration-fast) var(--pm-ease);
}
.btn-cta:hover, .btn-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--pm-shadow-md);
  outline: none;
}
.btn-cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-cta-large {
  padding: 1rem 2rem;
  font-size: 1.05rem;
}

.site-header--dark {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(6, 18, 14, 0.84);
  border-bottom: 1px solid rgba(124, 245, 210, 0.16);
  color: #f4fff9;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.site-header--dark .brand-link,
.site-header--dark .site-nav a {
  color: #f4fff9;
}
.site-header--dark .brand-mark,
.site-header--dark .site-nav a[aria-current="page"] {
  color: var(--pm-accent);
}
.site-header--dark .brand-mark {
  color: transparent;
}
.site-header--dark .site-nav a:not(.btn-cta):hover,
.site-header--dark .site-nav a:not(.btn-cta):focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--pm-radius-sm);
}

@media (max-width: 700px) {
  .site-nav {
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* Issue #12556: global high-contrast mode + forced-colors expansion. */
html[data-pm-contrast="aaa"] {
  color-scheme: light;
  --pm-ink: #000000;
  --pm-ink-2: #000000;
  --pm-ink-muted: #111111;
  --pm-ink-subtle: #111111;
  --pm-surface: #ffffff;
  --pm-surface-2: #ffffff;
  --pm-surface-3: #ffffff;
  --pm-surface-alt: #ffffff;
  --pm-line: #000000;
  --pm-line-2: #000000;
  --pm-accent: #000000;
  --pm-accent-2: #000000;
  --pm-accent-text: #000000;
  --pm-accent-ink: #ffffff;
}

html[data-pm-contrast="aaa"] body,
html[data-pm-contrast="aaa"] main,
html[data-pm-contrast="aaa"] section,
html[data-pm-contrast="aaa"] article,
html[data-pm-contrast="aaa"] nav,
html[data-pm-contrast="aaa"] header,
html[data-pm-contrast="aaa"] footer,
html[data-pm-contrast="aaa"] .card,
html[data-pm-contrast="aaa"] .panel,
html[data-pm-contrast="aaa"] .modal,
html[data-pm-contrast="aaa"] .drawer {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

html[data-pm-contrast="aaa"] a,
html[data-pm-contrast="aaa"] p,
html[data-pm-contrast="aaa"] li,
html[data-pm-contrast="aaa"] span,
html[data-pm-contrast="aaa"] label,
html[data-pm-contrast="aaa"] h1,
html[data-pm-contrast="aaa"] h2,
html[data-pm-contrast="aaa"] h3,
html[data-pm-contrast="aaa"] h4,
html[data-pm-contrast="aaa"] h5,
html[data-pm-contrast="aaa"] h6 {
  color: #000000 !important;
}

html[data-pm-contrast="aaa"] button,
html[data-pm-contrast="aaa"] .btn,
html[data-pm-contrast="aaa"] .btn-cta,
html[data-pm-contrast="aaa"] input,
html[data-pm-contrast="aaa"] select,
html[data-pm-contrast="aaa"] textarea {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: none !important;
}

html[data-pm-contrast="aaa"] button,
html[data-pm-contrast="aaa"] .btn,
html[data-pm-contrast="aaa"] .btn-cta {
  background: #000000 !important;
  color: #ffffff !important;
}

.pm-high-contrast-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2147483640;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 2px solid #0f172a;
  background: #ffffff;
  color: #0f172a;
  font: 700 12px/1.2 var(--pm-font-ui);
  cursor: pointer;
}

html[data-pm-contrast="aaa"] .pm-high-contrast-toggle {
  border-color: #ffffff;
  background: #000000;
  color: #ffffff;
}

@media (forced-colors: active) {
  :is(body, main, section, article, nav, header, footer, .card, .panel, .modal, .drawer, .chip, .badge, .tab, .hero, .cta) {
    forced-color-adjust: auto;
    background: Canvas !important;
    color: CanvasText !important;
    border-color: CanvasText !important;
  }

  :is(button, .btn, .btn-cta, input, select, textarea, [role="button"], [role="tab"], [role="menuitem"]) {
    forced-color-adjust: auto;
    background: Canvas !important;
    color: ButtonText !important;
    border: 2px solid ButtonText !important;
    box-shadow: none !important;
  }

  :is(a, .link, .brand-link) {
    color: LinkText !important;
    text-decoration-color: LinkText !important;
  }

  .pm-high-contrast-toggle {
    forced-color-adjust: auto;
    background: Canvas !important;
    color: ButtonText !important;
    border: 2px solid ButtonText !important;
  }
}

/* Mobile tap-target floor for inline links.
 * Ensures mailto/tel links in copy paragraphs hit the 44px min target
 * recommended by WCAG 2.5.5. Expands the hit area without changing the
 * visual footprint, via negative margin + padding pair. (Mobile audit PR.) */
@media (max-width: 767px) {
  .copy a,
  main p a,
  main li a,
  .panel a,
  .info a,
  .quote a,
  .muted a,
  .lede a,
  a[href^="mailto:"],
  a[href^="tel:"] {
    display: inline-block;
    padding: 10px 4px;
    margin: -10px -4px;
    line-height: 1.4;
  }
}

/*
 * #11073 — `.skip-link` (accessibility "Skip to content" anchor) must
 * itself meet the 44x44 WCAG floor when it is focus-visible. The
 * pricing-page rule was rendering 143x42 (2px short). Platform-brand is
 * the shared chrome stylesheet so the floor lives here.
 */
.skip-link {
  position: absolute;
  top: -56px;
  left: 0;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  min-height: var(--pm-tap-target);
  min-width: var(--pm-tap-target);
  padding: 10px 16px;
  background: var(--pm-accent);
  color: var(--pm-accent-ink);
  font-weight: 800;
  text-decoration: none;
  border-radius: 0 0 var(--pm-radius-sm) 0;
  box-sizing: border-box;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
}

/*
 * #11070 — Platform footer / nav anchors floor. Several platform pages
 * (pointmintz.com home, /pricing, /upgrade, /platform-home, /marketplace)
 * inherit a `.footer` chrome that renders inline `<a>` children at 14-40px
 * tall on tablet 768px. Shared brand stylesheet owns the floor so the rule
 * lives here rather than being copied into every page's inline `<style>`.
 * The selector list is conservative — only platform-chrome surfaces, not
 * any anchor descendant of any `<footer>` (so tenant home footers stay
 * driven by `tenant-template-utilities.css`).
 */
.site-footer a,
.platform-footer a,
.footer .footer-links a,
footer.footer > a,
footer.footer .sep + a,
footer.footer a:not([class]),
.footer-grid a,
.apex-nav__brand,
.apex-login-foot a,
.apex-login-footer a,
.demos-nav a,
.demos-footer a,
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--pm-tap-target);
  padding: 6px 4px;
  box-sizing: border-box;
}

/* Honeypot field — visually hidden from real users but still in the DOM
   so naive bots fill it. CSP style-src nonces don't cover style
   ATTRIBUTES, so this lives in a class (#11139 / #11157 / #11178 /
   #11185 fleet-coverage gate). */
.pm-honeypot-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Shared platform sitemap footer. Public platform pages should use this
   footer instead of page-specific three-link footers so every platform route
   remains discoverable from every public surface. */
.pm-platform-footer {
  margin-top: clamp(34px, 6vw, 72px);
  padding: clamp(28px, 5vw, 54px) var(--pm-gutter) 28px;
  background: #06120e;
  color: #d8f7ec;
  border-top: 1px solid rgba(124, 245, 210, 0.18);
}
.pm-platform-footer__inner {
  width: min(100%, var(--pm-shell-wide));
  margin: 0 auto;
}
.pm-platform-footer__brand {
  display: grid;
  gap: 8px;
  max-width: 720px;
  margin-bottom: 26px;
}
.pm-platform-footer__brand strong {
  color: #ffffff;
  font-family: var(--pm-font-display);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: 0;
}
.pm-platform-footer__brand p {
  margin: 0;
  color: #b8c9c2;
  font-size: 15px;
  line-height: 1.65;
}
.pm-platform-footer__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}
.pm-platform-footer__group {
  display: grid;
  align-content: start;
  gap: 8px;
}
.pm-platform-footer__group h2 {
  margin: 0 0 4px;
  color: var(--pm-accent);
  font-family: var(--pm-font-ui);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}
.pm-platform-footer__group a {
  display: inline-flex;
  align-items: center;
  min-height: var(--pm-tap-target);
  min-width: var(--pm-tap-target);
  justify-content: center;
  width: max-content;
  max-width: 100%;
  padding: 6px 0;
  color: #f4fff9;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  box-sizing: border-box;
}
.pm-platform-footer__group a:hover,
.pm-platform-footer__group a:focus-visible {
  color: var(--pm-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.pm-platform-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(124, 245, 210, 0.14);
  color: #9fb5ad;
  font-size: 13px;
}

@media (max-width: 980px) {
  .pm-platform-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .pm-platform-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .pm-platform-footer__grid {
    grid-template-columns: 1fr;
  }
}

.cp-admin-page :is(button, .btn, .btn-primary, .btn-secondary, .nav-item, a[href], select, input, textarea) {
  min-height: var(--pm-tap-target);
}

.cp-admin-page :is(button, .btn, .btn-primary, .btn-secondary, .nav-item, a[href]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cp-admin-page .skip-link {
  position: absolute;
  left: 16px;
  top: -56px;
  z-index: 30;
  padding: 10px 14px;
  border-radius: var(--pm-radius-sm);
  background: var(--pm-accent);
  color: var(--pm-accent-ink);
  font-weight: 800;
  text-decoration: none;
}

.cp-admin-page .skip-link:focus {
  top: 16px;
}

.cp-admin-page .cp-header {
  border-bottom: 1px solid var(--pm-line);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.cp-admin-page .cp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(var(--pm-shell-wide), calc(100% - 2 * var(--pm-gutter)));
  margin: 0 auto;
  padding: 18px 0;
}

.cp-admin-page .cp-brand {
  color: var(--pm-ink);
  font: 900 1.05rem/1 var(--pm-font-display);
  text-decoration: none;
  white-space: nowrap;
}

.cp-admin-page .cp-brand span {
  color: var(--pm-accent-text);
}

.cp-admin-page .cp-title {
  margin: 0;
  font: 850 clamp(1.25rem, 2vw, 1.8rem)/1.1 var(--pm-font-display);
  color: var(--pm-ink);
}

.cp-admin-page .cp-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.cp-admin-page .cp-meta label {
  font-size: var(--pm-text-sm);
  font-weight: 800;
  color: var(--pm-ink-muted);
}

.cp-admin-page select,
.cp-admin-page input,
.cp-admin-page textarea {
  border: 1px solid var(--pm-line-2);
  border-radius: var(--pm-radius-sm);
  background: #fff;
  color: var(--pm-ink);
  font: 700 var(--pm-text-sm)/1 var(--pm-font-ui);
}

.cp-admin-page :is(button:not([class]), .cp-button) {
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(26, 195, 166, 0.34);
  border-radius: var(--pm-radius-sm);
  background: var(--pm-ink);
  color: #fff;
  font: 850 var(--pm-text-sm)/1 var(--pm-font-ui);
  cursor: pointer;
  box-shadow: var(--pm-shadow-sm);
  transition: transform var(--pm-duration-fast) var(--pm-ease), background var(--pm-duration-fast), box-shadow var(--pm-duration-fast);
}

.cp-admin-page :is(button:not([class]), .cp-button):hover {
  background: var(--pm-accent-text);
  box-shadow: var(--pm-shadow-md);
  transform: translateY(-1px);
}

.cp-admin-page .cp-main {
  width: min(var(--pm-shell-wide), calc(100% - 2 * var(--pm-gutter)));
  max-width: 100%;
  margin: 0 auto;
  padding: 28px 0 48px;
  overflow-x: hidden;
}

.cp-admin-page .cp-main section {
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius-md);
  background: #fff;
  box-shadow: var(--pm-shadow-sm);
  overflow-x: auto;
}

.cp-admin-page .cp-main h2 {
  margin: 0 0 8px;
  font: 850 1.1rem/1.2 var(--pm-font-display);
}

.cp-admin-page .cp-note {
  margin: 0 0 12px;
  color: var(--pm-ink-muted);
}

.cp-admin-page .cp-error {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #fecaca;
  border-radius: var(--pm-radius-sm);
  background: #fef2f2;
  color: var(--pm-danger);
}

.cp-admin-page .cp-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--pm-text-sm);
}

.cp-admin-page .cp-table th,
.cp-admin-page .cp-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--pm-line);
  text-align: left;
}

.cp-admin-page .cp-table th {
  color: var(--pm-ink-muted);
  font-size: var(--pm-text-xs);
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0;
  background: var(--pm-surface-2);
}

.dashboard-wrap :is(button, .btn, .btn-primary, .btn-secondary, a.nav-item),
.mfa-link {
  min-height: var(--pm-tap-target);
}

.dashboard-wrap :is(button, .btn, .btn-primary, .btn-secondary, a.nav-item),
.mfa-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 760px) {
  .cp-admin-page .cp-header-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .cp-admin-page .cp-meta {
    justify-content: stretch;
    width: 100%;
  }

  .cp-admin-page .cp-meta > * {
    flex: 1 1 150px;
  }

  .cp-admin-page .cp-main {
    width: min(100% - 24px, var(--pm-shell-wide));
    padding-top: 16px;
  }
}