/* ============================================================
   DESIGN SYSTEM v5 — ULTRA-PREMIUM DUAL-THEME GLASSMORPHISM
   Open Stack Billing (WHMCS clone) · presentation layer only.
   Loaded AFTER premium.css (v1–v4). No pm-* class was renamed;
   v5 re-themes them via [data-theme] on <html> + CSS variables.
   Dark = default (pre-paint script in layouts sets data-theme
   from localStorage before first paint; no attr = dark rules).
   ============================================================ */

/* ---------- font: Inter (self-hosted) via --font-sans in tokens.css ---------- */
:root {
  --pm-font: var(--font-sans);
  --v5-ease: cubic-bezier(.16, 1, .3, 1);
  --v5-acc-indigo: var(--rgb-brand);
  --v5-acc-violet: var(--rgb-violet);
  --v5-acc-emerald: var(--rgb-ok);
  --v5-acc-amber: var(--rgb-warn);
  --v5-acc-rose: var(--rgb-bad);
}

/* ============================================================
   THEME TOKENS — redefining the premium.css variables per theme
   makes most v1–v4 rules follow automatically; the component
   overrides below handle the literal-colour rules in v4.
   ============================================================ */
html[data-theme="dark"], html:not([data-theme]) {
  color-scheme: dark;
  --pm-bg: var(--surface-0);
  --pm-card: var(--ai-65);
  --pm-border: var(--aw-08);
  --pm-text: var(--text-1);
  --pm-muted: var(--text-3);
  --pm-shadow: 0 1px 2px var(--ak-35), 0 10px 30px -12px var(--ak-55);
  --pm-shadow-lg: 0 2px 6px var(--ak-40), 0 18px 44px -14px var(--ab-35);
  --v5-surface: var(--ai-65);
  --v5-surface-2: var(--aw-05);
  --v5-surface-3: var(--aw-07);
  --v5-border: var(--aw-08);
  --v5-border-strong: var(--aw-14);
  --v5-input: var(--aw-05);
  --v5-thead: var(--ai-82);
  --v5-row-border: var(--aw-06);
  --v5-row-hover: var(--aw-04);
  --v5-glass-shadow: 0 1px 2px var(--ak-35), 0 14px 34px -14px var(--ak-60), 0 0 0 1px var(--aw-02), inset 0 1px 0 var(--aw-06);
  --v5-chip: var(--aw-06);
  --v5-placeholder: var(--text-3);
}
html[data-theme="light"] {
  color-scheme: light;
  --pm-bg: var(--surface-3);
  --pm-card: var(--aw-75);
  --pm-border: var(--aw-90);
  --pm-text: var(--text-1);
  --pm-muted: var(--text-3);
  --pm-shadow: 0 1px 2px var(--ai-04), 0 10px 28px -14px var(--ai-14);
  --pm-shadow-lg: 0 2px 4px var(--ai-05), 0 18px 42px -16px var(--ab-22);
  --v5-surface: var(--aw-75);
  --v5-surface-2: var(--aw-55);
  --v5-surface-3: var(--aw-85);
  --v5-border: var(--aw-90);
  --v5-border-strong: var(--am-35);
  --v5-input: var(--aw-85);
  --v5-thead: var(--aw-85);
  --v5-row-border: var(--as-80);
  --v5-row-hover: var(--ai-02);
  --v5-glass-shadow: 0 1px 2px var(--ai-04), 0 14px 34px -16px var(--ai-16), inset 0 1px 0 var(--aw-80);
  --v5-chip: var(--aw-70);
  --v5-placeholder: var(--text-3);
}

/* ---------- page backdrop: mesh + glowing orbs per theme ---------- */
html[data-theme="dark"] body, html:not([data-theme]) body {
  background: var(--surface-0);
  color: var(--pm-text);
  line-height: var(--lh-base);
}
html[data-theme="dark"] body::before, html:not([data-theme]) body::before {
  background:
    radial-gradient(680px 460px at 8% -8%, var(--ab-30), transparent 65%),
    radial-gradient(560px 420px at 92% -4%, var(--ab-22), transparent 65%),
    radial-gradient(720px 520px at 55% 112%, var(--ao-13), transparent 65%),
    radial-gradient(460px 340px at 82% 58%, var(--ab-14), transparent 65%),
    radial-gradient(380px 300px at 22% 78%, var(--ain-10), transparent 65%);
}
html[data-theme="light"] body {
  background: linear-gradient(160deg, var(--stroke) 0%, var(--stroke) 100%);
  background-attachment: fixed;
  color: var(--pm-text);
  line-height: var(--lh-base);
}
html[data-theme="light"] body::before {
  background:
    radial-gradient(640px 440px at 10% -6%, var(--ab-13), transparent 65%),
    radial-gradient(580px 430px at 90% 2%, var(--ab-10), transparent 65%),
    radial-gradient(760px 540px at 55% 110%, var(--ain-10), transparent 65%),
    radial-gradient(440px 330px at 80% 62%, var(--ao-07), transparent 65%);
}

::selection { background: var(--ab-45); }
html[data-theme="dark"] ::-webkit-scrollbar, html:not([data-theme]) ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb, html:not([data-theme]) ::-webkit-scrollbar-thumb { background: var(--am-28); border-radius: 8px; border: 2px solid var(--surface-0); }
html[data-theme="dark"] ::-webkit-scrollbar-track, html:not([data-theme]) ::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   KEYFRAMES v5
   ============================================================ */
@keyframes pm-v5-fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pm-v5-pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--v5-dot-glow, var(--ao-45)); }
  50%      { box-shadow: 0 0 0 5px transparent; }
}
@keyframes pm-v5-modalPop {
  from { opacity: 0; transform: scale(.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes pm-v5-toastIn {
  from { opacity: 0; transform: translateX(24px) scale(.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes pm-v5-toastOut {
  to { opacity: 0; transform: translateX(24px) scale(.97); }
}
@keyframes pm-v5-toastBar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
@keyframes pm-v5-spin { to { transform: rotate(360deg); } }
@keyframes pm-v5-backdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pm-v5-dangerPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--abd-45), 0 0 22px -2px var(--abd-50); }
  50%      { box-shadow: 0 0 0 9px transparent, 0 0 30px 0 var(--abd-55); }
}

/* ============================================================
   GLASS SURFACES — cards, topbar, footer, panels (both themes)
   ============================================================ */
.pm-card, .pm-side-filter, .pm-tabs {
  background: var(--v5-surface);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--v5-border);
  box-shadow: var(--v5-glass-shadow);
  border-radius: 1.1rem;
  position: relative;
}
.pm-card-head {
  background: linear-gradient(180deg, var(--v5-surface-3), transparent);
  border-bottom: 1px solid var(--v5-border);
}
.pm-topbar, .pm-glass-bar {
  background: var(--v5-thead);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border-bottom: 1px solid var(--v5-border);
  box-shadow: 0 12px 30px -22px var(--ak-50);
}
.pm-footer {
  background: var(--v5-surface-2);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-top: 1px solid var(--v5-border);
}
.pm-glass {
  background: var(--v5-surface);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--v5-border);
  box-shadow: var(--v5-glass-shadow);
}

/* content bottom breathing room — save bars never hug the edge */
.pm-content { padding-bottom: 5rem; }

/* typography: crisper hierarchy in both themes */
.pm-content h1, .pm-pagehead h1 { letter-spacing: -.022em; }
.pm-page-sub, .pm-muted { color: var(--pm-muted); }
html[data-theme="dark"] .pm-page-title, html:not([data-theme]) .pm-page-title { color: var(--text-1); }

/* ============================================================
   CARD SHIMMER + MAGNETIC HOVER LIFT
   ============================================================ */
.pm-card { overflow: hidden; }
.pm-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(115deg, transparent 32%, var(--aw-09) 48%, transparent 62%);
  transform: translateX(-130%); transition: transform .8s var(--v5-ease);
}
.pm-card:hover::after { transform: translateX(130%); }
.pm-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--v5-glass-shadow), 0 22px 44px -18px var(--ab-38);
  transition: transform .3s var(--v5-ease), box-shadow .3s var(--v5-ease);
}
/* cards containing tables shouldn't clip sticky headers mid-scroll */
.pm-card:has(.pm-table-wrap) { overflow: visible; }
.pm-card:has(.pm-table-wrap)::after { border-radius: 1.1rem; }

/* ============================================================
   SIDEBAR — floating glass panel, gradient pill, icon bounce
   ============================================================ */
@media (min-width: 901px) {
  .pm-sidebar {
    margin: .8rem 0 .8rem .8rem; border-radius: 1.15rem;
    height: calc(100vh - 1.6rem); top: .8rem;
    border: 1px solid var(--am-18);
    box-shadow: 0 24px 48px -20px var(--ai-65), inset 0 1px 0 var(--aw-06);
    overflow: hidden;
  }
}
.pm-nav a { position: relative; transition: background-color .25s var(--v5-ease), color .25s var(--v5-ease), transform .25s var(--v5-ease), box-shadow .25s var(--v5-ease); }
.pm-nav a svg { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease; }
.pm-nav a:hover { background: var(--aw-06); }
.pm-nav a:hover svg { transform: scale(1.18) translateY(-2px); opacity: 1; }
.pm-nav a.pm-active {
  background: var(--grad-brand);
  font-weight: 700; color: var(--brand-ink);
  box-shadow: 0 8px 22px -6px var(--ab-65), 0 0 0 1px var(--ab-35), 0 0 18px -2px var(--ab-55);
}
/* settings / automation gear icons: slow rotate on hover */
.pm-nav a[href*="setup"] svg, .pm-nav a[href*="automation"] svg { transition: transform .5s var(--v5-ease); }
.pm-nav a[href*="setup"]:hover svg, .pm-nav a[href*="automation"]:hover svg { transform: rotate(180deg) scale(1.1); }
.pm-nav-label { color: var(--side-label); }

/* ============================================================
   KPI / METRIC CARDS — colourful gradient-accent glass cards
   .pm-acc-* sets the accent; works on .pm-stat in both themes.
   ============================================================ */
.pm-acc-emerald { --acc: var(--v5-acc-emerald); --acc2: var(--rgb-ok); }
.pm-acc-amber   { --acc: var(--v5-acc-amber);   --acc2: var(--rgb-warn); }
.pm-acc-rose    { --acc: var(--v5-acc-rose);    --acc2: var(--rgb-bad); }
.pm-acc-indigo  { --acc: var(--v5-acc-indigo);  --acc2: var(--rgb-brand-hi); }
.pm-acc-violet  { --acc: var(--v5-acc-violet);  --acc2: 168, 85, 247; }

.pm-stat.pm-acc-emerald, .pm-stat.pm-acc-amber, .pm-stat.pm-acc-rose,
.pm-stat.pm-acc-indigo, .pm-stat.pm-acc-violet {
  background: var(--v5-surface);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--v5-border);
  color: var(--pm-text);
  box-shadow: var(--v5-glass-shadow), inset 0 3px 0 0 rgb(var(--acc));
}
/* gradient top line (crisper than the inset shadow alone) */
.pm-stat.pm-acc-emerald::before, .pm-stat.pm-acc-amber::before, .pm-stat.pm-acc-rose::before,
.pm-stat.pm-acc-indigo::before, .pm-stat.pm-acc-violet::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, rgb(var(--acc)), rgb(var(--acc2)));
  border-radius: 3px 3px 0 0;
}
/* glowing watermark orb in the accent colour (replaces the plain white circle) */
.pm-stat.pm-acc-emerald::after, .pm-stat.pm-acc-amber::after, .pm-stat.pm-acc-rose::after,
.pm-stat.pm-acc-indigo::after, .pm-stat.pm-acc-violet::after {
  width: 190px; height: 190px; right: -46px; top: -56px;
  background: radial-gradient(circle, rgba(var(--acc), .30), transparent 68%);
}
.pm-stat.pm-acc-emerald .pm-stat-icon, .pm-stat.pm-acc-amber .pm-stat-icon, .pm-stat.pm-acc-rose .pm-stat-icon,
.pm-stat.pm-acc-indigo .pm-stat-icon, .pm-stat.pm-acc-violet .pm-stat-icon {
  position: absolute; right: 1rem; top: 1rem; bottom: auto; opacity: 1; z-index: 2;
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(var(--acc), .14); border: 1px solid rgba(var(--acc), .35); color: rgb(var(--acc));
  box-shadow: 0 0 18px -2px rgba(var(--acc), .45), inset 0 1px 0 var(--aw-15);
}
.pm-stat.pm-acc-emerald .pm-stat-icon svg, .pm-stat.pm-acc-amber .pm-stat-icon svg, .pm-stat.pm-acc-rose .pm-stat-icon svg,
.pm-stat.pm-acc-indigo .pm-stat-icon svg, .pm-stat.pm-acc-violet .pm-stat-icon svg { width: 21px; height: 21px; }
.pm-stat.pm-acc-emerald .pm-stat-label, .pm-stat.pm-acc-amber .pm-stat-label, .pm-stat.pm-acc-rose .pm-stat-label,
.pm-stat.pm-acc-indigo .pm-stat-label, .pm-stat.pm-acc-violet .pm-stat-label { opacity: 1; color: var(--pm-muted); font-weight: 600; }
.pm-stat.pm-acc-emerald:hover, .pm-stat.pm-acc-amber:hover, .pm-stat.pm-acc-rose:hover,
.pm-stat.pm-acc-indigo:hover, .pm-stat.pm-acc-violet:hover {
  transform: translateY(-5px);
  box-shadow: var(--v5-glass-shadow), 0 22px 44px -16px rgba(var(--acc), .5);
  transition: transform .3s var(--v5-ease), box-shadow .3s var(--v5-ease);
}
/* trend chips inside accent stats */
.pm-stat .pm-trend { display: inline-flex; align-items: center; gap: .3rem; padding: .14rem .55rem; border-radius: 9999px; font-size: var(--fs-xs); font-weight: 700; }
.pm-stat .pm-trend-up { background: var(--ao-15); color: var(--b-ok-fg); border: 1px solid var(--ao-35); }
.pm-stat .pm-trend-down { background: var(--abd-14); color: var(--b-bad-fg); border: 1px solid var(--abd-35); }
html[data-theme="light"] .pm-stat .pm-trend-up { color: var(--b-ok-fg); }
html[data-theme="light"] .pm-stat .pm-trend-down { color: var(--b-bad-fg); }

/* legacy gradient stats (pm-stat-1..6) in dark: deepen + glass sheen */
html[data-theme="dark"] .pm-stat, html:not([data-theme]) .pm-stat {
  border: 1px solid var(--aw-14);
  box-shadow: 0 2px 4px var(--ak-35), 0 18px 40px -14px var(--ak-65), inset 0 1px 0 var(--aw-22);
}

/* ============================================================
   BUTTONS — neon primary, glass secondary, tactile press
   ============================================================ */
.pm-btn { transition: all .22s var(--v5-ease); }
.pm-btn:active { transform: scale(.97) !important; }
.pm-btn-primary {
  background: var(--grad-brand);
  box-shadow: 0 8px 20px -6px var(--ab-60), 0 0 16px -4px var(--ab-55);
}
.pm-btn-primary:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 12px 26px -6px var(--ab-65), 0 0 22px -2px var(--ab-60); }
.pm-btn svg { transition: transform .25s var(--v5-ease); }
.pm-btn:hover svg { transform: translateX(2px) scale(1.08); }
html[data-theme="dark"] .pm-btn-ghost, html:not([data-theme]) .pm-btn-ghost,
html[data-theme="dark"] .pm-btn-secondary, html:not([data-theme]) .pm-btn-secondary {
  background: var(--aw-05); border-color: var(--aw-14); color: var(--text-2);
}
html[data-theme="dark"] .pm-btn-ghost:hover, html:not([data-theme]) .pm-btn-ghost:hover,
html[data-theme="dark"] .pm-btn-secondary:hover, html:not([data-theme]) .pm-btn-secondary:hover {
  background: var(--aw-10); border-color: var(--ab-60); color: var(--brand-ink);
  box-shadow: 0 0 16px -4px var(--ab-55);
}
.pm-action { transition: all .22s var(--v5-ease); }
.pm-action:active { transform: scale(.97); }
html[data-theme="dark"] .pm-action, html:not([data-theme]) .pm-action {
  background: var(--aw-05); border-color: var(--aw-12); color: var(--text-2);
}
html[data-theme="dark"] .pm-action:hover, html:not([data-theme]) .pm-action:hover {
  border-color: var(--ab-65); color: var(--brand-ink); box-shadow: 0 0 16px -4px var(--ab-50);
}
.pm-card-head a:hover svg, .pm-card-head a:hover { transition: all .2s var(--v5-ease); }

/* loading spinner utility for sync/refresh actions */
.pm-spin { animation: pm-v5-spin .9s linear infinite !important; }
.pm-icon-rotate svg { transition: transform .45s var(--v5-ease); }
.pm-icon-rotate:hover svg { transform: rotate(180deg); }

/* ============================================================
   TABLES — floating glass, sticky glass thead, glowing pills
   ============================================================ */
.pm-table-wrap { border-radius: .9rem; }
.pm-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--v5-thead);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--v5-border-strong);
  color: var(--pm-muted);
}
.pm-table tbody td { border-bottom: 1px solid var(--v5-row-border); }
.pm-table tbody tr { transition: background-color .22s ease, box-shadow .22s ease; }
.pm-table tbody tr:hover { background: var(--v5-row-hover); box-shadow: inset 3px 0 0 rgb(var(--v5-acc-indigo)); }
.pm-table-striped tbody tr:nth-child(even) { background: var(--v5-surface-2); }
html[data-theme="dark"] .pm-table-striped tbody tr:nth-child(even), html:not([data-theme]) .pm-table-striped tbody tr:nth-child(even) { background: var(--aw-02); }
html[data-theme="dark"] .pm-table-striped tbody tr:nth-child(even):hover, html:not([data-theme]) .pm-table-striped tbody tr:nth-child(even):hover { background: var(--v5-row-hover); }
.pm-content input[type="checkbox"], .pm-content input[type="radio"] {
  width: 16px; height: 16px; flex-shrink: 0;
  transition: transform .15s cubic-bezier(.34, 1.56, .64, 1);
}
.pm-content input[type="checkbox"]:active, .pm-content input[type="radio"]:active { transform: scale(.82); }

/* status badges → glass pills with live pulsing dots */
html[data-theme="dark"] .pm-badge, html:not([data-theme]) .pm-badge {
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--aw-10);
}
html[data-theme="dark"] .pm-b-green, html:not([data-theme]) .pm-b-green,
html[data-theme="dark"] .pm-badge-active, html:not([data-theme]) .pm-badge-active,
html[data-theme="dark"] .pm-badge-paid, html:not([data-theme]) .pm-badge-paid,
html[data-theme="dark"] .pm-badge-complete, html:not([data-theme]) .pm-badge-complete,
html[data-theme="dark"] .pm-badge-completed, html:not([data-theme]) .pm-badge-completed { background: var(--ao-15); color: var(--b-ok-fg); }
html[data-theme="dark"] .pm-b-red, html:not([data-theme]) .pm-b-red,
html[data-theme="dark"] .pm-badge-unpaid, html:not([data-theme]) .pm-badge-unpaid,
html[data-theme="dark"] .pm-badge-incomplete, html:not([data-theme]) .pm-badge-incomplete,
html[data-theme="dark"] .pm-badge-failed, html:not([data-theme]) .pm-badge-failed { background: var(--abd-14); color: var(--b-bad-fg); }
html[data-theme="dark"] .pm-badge-overdue, html:not([data-theme]) .pm-badge-overdue { background: var(--abd-20); color: var(--b-bad-fg); }
html[data-theme="dark"] .pm-b-yellow, html:not([data-theme]) .pm-b-yellow,
html[data-theme="dark"] .pm-b-amber, html:not([data-theme]) .pm-b-amber,
html[data-theme="dark"] .pm-badge-pending, html:not([data-theme]) .pm-badge-pending,
html[data-theme="dark"] .pm-badge-onhold, html:not([data-theme]) .pm-badge-onhold { background: var(--awn-15); color: var(--b-warn-fg); }
html[data-theme="dark"] .pm-b-orange, html:not([data-theme]) .pm-b-orange,
html[data-theme="dark"] .pm-badge-suspended, html:not([data-theme]) .pm-badge-suspended { background: var(--awn-16); color: var(--b-orng-fg); }
html[data-theme="dark"] .pm-b-blue, html:not([data-theme]) .pm-b-blue,
html[data-theme="dark"] .pm-badge-open, html:not([data-theme]) .pm-badge-open,
html[data-theme="dark"] .pm-badge-processing, html:not([data-theme]) .pm-badge-processing { background: var(--ain-16); color: var(--b-info-fg); }
html[data-theme="dark"] .pm-b-gray, html:not([data-theme]) .pm-b-gray,
html[data-theme="dark"] .pm-badge-closed, html:not([data-theme]) .pm-badge-closed,
html[data-theme="dark"] .pm-badge-cancelled, html:not([data-theme]) .pm-badge-cancelled,
html[data-theme="dark"] .pm-badge-terminated, html:not([data-theme]) .pm-badge-terminated,
html[data-theme="dark"] .pm-badge-draft, html:not([data-theme]) .pm-badge-draft,
html[data-theme="dark"] .pm-badge-default, html:not([data-theme]) .pm-badge-default { background: var(--am-14); color: var(--b-mut-fg); }
html[data-theme="dark"] .pm-b-purple, html:not([data-theme]) .pm-b-purple,
html[data-theme="dark"] .pm-badge-fraud, html:not([data-theme]) .pm-badge-fraud { background: var(--ab-18); color: var(--b-purp-fg); }
html[data-theme="dark"] .pm-b-teal, html:not([data-theme]) .pm-b-teal,
html[data-theme="dark"] .pm-badge-answered, html:not([data-theme]) .pm-badge-answered { background: var(--ao-14); color: var(--b-teal-fg); }
html[data-theme="dark"] .pm-b-cyan, html:not([data-theme]) .pm-b-cyan,
html[data-theme="dark"] .pm-badge-inprogress, html:not([data-theme]) .pm-badge-inprogress { background: var(--ain-14); color: var(--b-info-fg); }
html[data-theme="dark"] .pm-b-sky, html:not([data-theme]) .pm-b-sky,
html[data-theme="dark"] .pm-badge-customerreply, html:not([data-theme]) .pm-badge-customerreply { background: var(--ain-15); color: var(--b-info-fg); }
html[data-theme="dark"] .pm-b-indigo, html:not([data-theme]) .pm-b-indigo,
html[data-theme="dark"] .pm-badge-refunded, html:not([data-theme]) .pm-badge-refunded { background: var(--ab-18); color: var(--brand-hi); }

/* pulsing aura dots: active/paid (emerald), pending/onhold (amber), overdue/failed (crimson) */
.pm-badge-active::before, .pm-badge-paid::before, .pm-badge-complete::before, .pm-badge-completed::before, .pm-b-green::before {
  --v5-dot-glow: var(--ao-50); animation: pm-v5-pulseGlow 2.2s ease-out infinite;
}
.pm-badge-pending::before, .pm-badge-onhold::before, .pm-b-amber::before, .pm-b-yellow::before {
  --v5-dot-glow: var(--awn-50); animation: pm-v5-pulseGlow 2.2s ease-out infinite;
}
.pm-badge-overdue::before, .pm-badge-failed::before, .pm-badge-unpaid::before, .pm-badge-incomplete::before, .pm-b-red::before {
  --v5-dot-glow: var(--abd-50); animation: pm-v5-pulseGlow 2.2s ease-out infinite;
}
.pm-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--b-ok-fg); --v5-dot-glow: var(--ao-55);
  animation: pm-v5-pulseGlow 2s ease-out infinite; vertical-align: middle;
}
.pm-live-dot.amber { background: var(--b-warn-fg); --v5-dot-glow: var(--awn-55); }
.pm-live-dot.rose { background: var(--b-bad-fg); --v5-dot-glow: var(--abd-55); }

/* ============================================================
   FORMS — rounded glass inputs, indigo focus glow
   ============================================================ */
.pm-input, .pm-select, .pm-search {
  border-radius: .85rem;
  background: var(--v5-input);
  border: 1px solid var(--v5-border-strong);
  color: var(--pm-text);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.pm-input::placeholder, .pm-search::placeholder, textarea.pm-input::placeholder { color: var(--v5-placeholder); }
.pm-input:focus, .pm-select:focus, .pm-search:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--ab-50), 0 0 18px -2px var(--ab-45);
}
html[data-theme="dark"] .pm-input option, html:not([data-theme]) .pm-input option,
html[data-theme="dark"] .pm-select option, html:not([data-theme]) .pm-select option { background: var(--text-1); color: var(--text-1); }
.pm-field label, .pm-filter-label { color: var(--pm-text); opacity: .92; }
.pm-help { color: var(--pm-muted); }

/* alerts → tinted glass */
html[data-theme="dark"] .pm-alert-error, html:not([data-theme]) .pm-alert-error { background: var(--abd-10); border-color: var(--abd-35); color: var(--b-bad-fg); }
html[data-theme="dark"] .pm-alert-success, html:not([data-theme]) .pm-alert-success { background: var(--ao-10); border-color: var(--ao-35); color: var(--b-ok-fg); }
html[data-theme="dark"] .pm-alert-warn, html:not([data-theme]) .pm-alert-warn { background: var(--awn-10); border-color: var(--awn-35); color: var(--b-warn-fg); }
html[data-theme="dark"] .pm-alert-info, html:not([data-theme]) .pm-alert-info { background: var(--ain-10); border-color: var(--ain-35); color: var(--b-info-fg); }

/* ============================================================
   FILTER STRIPS — dark glass (Orders / Tickets / Settings tabs)
   ============================================================ */
.pm-filter-tabs {
  background: var(--ai-50);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--aw-09);
  box-shadow: inset 0 1px 0 var(--aw-05);
}
html[data-theme="light"] .pm-filter-tabs { background: var(--aw-55); border-color: var(--am-30); }
.pm-ftab {
  background: var(--v5-surface-3); border-color: var(--v5-border-strong); color: var(--pm-text);
}
html[data-theme="dark"] .pm-ftab, html:not([data-theme]) .pm-ftab { background: var(--aw-06); color: var(--text-4); }
.pm-content .pm-filter-tabs a.pm-ftab { color: var(--pm-text); }
html[data-theme="dark"] .pm-content .pm-filter-tabs a.pm-ftab, html:not([data-theme]) .pm-content .pm-filter-tabs a.pm-ftab { color: var(--text-4); }
html[data-theme="dark"] .pm-content .pm-filter-tabs a.pm-ftab:hover, html:not([data-theme]) .pm-content .pm-filter-tabs a.pm-ftab:hover { color: var(--brand-ink); }
.pm-ftab:hover { border-color: var(--ab-55); box-shadow: 0 0 14px -4px var(--ab-50); }

/* ticket status toggle pills (checkbox hidden, pill is the control) */
.pm-toggle-pill { position: relative; gap: .5rem; user-select: none; }
.pm-toggle-pill > input[type="checkbox"] {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.pm-toggle-pill .pm-pill-check {
  display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: .45; transition: all .2s var(--v5-ease); flex-shrink: 0;
}
.pm-toggle-pill .pm-pill-check svg { width: 10px; height: 10px; opacity: 0; transform: scale(.4); transition: all .2s cubic-bezier(.34, 1.56, .64, 1); }
.pm-toggle-pill:has(> input[type="checkbox"]:checked) {
  background: var(--pm-grad); color: var(--brand-ink) !important; border-color: transparent;
  box-shadow: 0 6px 16px -6px var(--ab-55);
}
.pm-toggle-pill:has(> input[type="checkbox"]:checked) .pm-pill-check { opacity: 1; background: var(--aw-22); border-color: transparent; }
.pm-toggle-pill:has(> input[type="checkbox"]:checked) .pm-pill-check svg { opacity: 1; transform: scale(1); }
.pm-toggle-pill:has(> input[type="checkbox"]:checked) .pm-ftab-count { background: var(--aw-24); color: var(--brand-ink); }
.pm-toggle-pill:focus-within { box-shadow: 0 0 0 2px var(--ab-50); }

/* ============================================================
   BULK ACTION BAR (Orders / Tickets "With Selected") — uniform h-10
   ============================================================ */
.pm-bulk-bar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.pm-bulk-bar .pm-btn { height: 2.5rem; padding-top: 0; padding-bottom: 0; }
.pm-bulk-bar .pm-input { height: 2.5rem; padding-top: 0; padding-bottom: 0; }
.pm-bulk-bar > span { font-size: var(--fs-sm); font-weight: 600; color: var(--pm-muted); }

/* ============================================================
   DARK-THEME COMPAT — Tailwind utilities + inline styles
   used inside view markup (reports, settings, legacy panels)
   ============================================================ */
/* LAYOUT-REPAIR 2026-10-24: the .bg-white / .bg-gray-50/100/200 and
   .text-gray-700 overrides that used to live here were REMOVED. They
   fought ui-v6's token compat layer and won on specificity, so in dark
   theme every Tailwind-built card rendered as a 5%-white wash over the
   aurora mesh (text contrast depended on where the mesh pools happened
   to sit) and .text-gray-700 labels rendered in --text-4, the disabled
   tone (measured 2.99:1). ui-v6's html[data-theme] mappings now govern
   these utilities in both themes. */
html[data-theme="dark"] .pm-content .bg-red-50, html:not([data-theme]) .pm-content .bg-red-50 { background-color: var(--abd-10); }
html[data-theme="dark"] .pm-content .bg-green-50, html:not([data-theme]) .pm-content .bg-green-50 { background-color: var(--ao-10); }
html[data-theme="dark"] .pm-content .bg-amber-50, html:not([data-theme]) .pm-content .bg-amber-50 { background-color: var(--awn-10); }
html[data-theme="dark"] .pm-content .bg-indigo-50, html:not([data-theme]) .pm-content .bg-indigo-50 { background-color: var(--ab-12); }
html[data-theme="dark"] .pm-content .text-gray-900, html:not([data-theme]) .pm-content .text-gray-900,
html[data-theme="dark"] .pm-content .text-gray-800, html:not([data-theme]) .pm-content .text-gray-800,
html[data-theme="dark"] .pm-content .text-slate-800, html:not([data-theme]) .pm-content .text-slate-800 { color: var(--text-1); }
html[data-theme="dark"] .pm-content .text-gray-600, html:not([data-theme]) .pm-content .text-gray-600,
html[data-theme="dark"] .pm-content .text-slate-600, html:not([data-theme]) .pm-content .text-slate-600 { color: var(--text-3); }
html[data-theme="dark"] .pm-content .text-gray-500, html:not([data-theme]) .pm-content .text-gray-500,
html[data-theme="dark"] .pm-content .text-slate-500, html:not([data-theme]) .pm-content .text-slate-500 { color: var(--text-3); }
html[data-theme="dark"] .pm-content .text-gray-400, html:not([data-theme]) .pm-content .text-gray-400 { color: var(--text-3); }
html[data-theme="dark"] .pm-content .text-red-600, html:not([data-theme]) .pm-content .text-red-600 { color: var(--b-bad-fg); }
html[data-theme="dark"] .pm-content .text-green-600, html:not([data-theme]) .pm-content .text-green-600,
html[data-theme="dark"] .pm-content .text-green-700, html:not([data-theme]) .pm-content .text-green-700 { color: var(--b-ok-fg); }
html[data-theme="dark"] .pm-content .hover\:bg-gray-50:hover, html:not([data-theme]) .pm-content .hover\:bg-gray-50:hover { background-color: var(--aw-06); }
html[data-theme="dark"] .pm-content .border, html:not([data-theme]) .pm-content .border,
html[data-theme="dark"] .pm-content .border-b, html:not([data-theme]) .pm-content .border-b,
html[data-theme="dark"] .pm-content .border-t, html:not([data-theme]) .pm-content .border-t { border-color: var(--aw-09); }

/* ============================================================
   ENTRANCE ANIMATIONS — staggered fadeInUp (reduced-motion safe)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .pm-content { animation: pm-v5-fadeInUp .5s var(--v5-ease) backwards; }
  .pm-stats > * { animation: pm-v5-fadeInUp .55s var(--v5-ease) backwards; }
  .pm-stats > *:nth-child(1) { animation-delay: .05s; }
  .pm-stats > *:nth-child(2) { animation-delay: .10s; }
  .pm-stats > *:nth-child(3) { animation-delay: .15s; }
  .pm-stats > *:nth-child(4) { animation-delay: .20s; }
  .pm-stats > *:nth-child(5) { animation-delay: .25s; }
  .pm-stats > *:nth-child(6) { animation-delay: .30s; }
  .pm-content .pm-card { animation: pm-v5-fadeInUp .45s var(--v5-ease) backwards; }
  .pm-table tbody tr { animation: pm-v5-fadeInUp .35s ease backwards; animation-delay: calc(var(--i, 0) * 50ms); }
  .pm-table tbody tr:nth-child(1) { --i: 0; } .pm-table tbody tr:nth-child(2) { --i: 1; }
  .pm-table tbody tr:nth-child(3) { --i: 2; } .pm-table tbody tr:nth-child(4) { --i: 3; }
  .pm-table tbody tr:nth-child(5) { --i: 4; } .pm-table tbody tr:nth-child(6) { --i: 5; }
  .pm-table tbody tr:nth-child(7) { --i: 6; } .pm-table tbody tr:nth-child(8) { --i: 7; }
  .pm-table tbody tr:nth-child(9) { --i: 8; } .pm-table tbody tr:nth-child(10) { --i: 9; }
  .pm-table tbody tr:nth-child(11) { --i: 10; } .pm-table tbody tr:nth-child(12) { --i: 11; }
  .pm-table tbody tr:nth-child(n+13) { animation: none; }
}

/* ============================================================
   REPORTS — glass cards with category icons + hover glow
   ============================================================ */
.pm-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem; }
.pm-report-card {
  --acc: var(--v5-acc-indigo);
  display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.05rem;
  background: var(--v5-surface); border: 1px solid var(--v5-border); border-radius: 1rem;
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--v5-glass-shadow); text-decoration: none !important; color: var(--pm-text) !important;
  transition: transform .3s var(--v5-ease), box-shadow .3s var(--v5-ease), border-color .3s var(--v5-ease);
  position: relative; overflow: hidden;
}
.pm-report-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, var(--aw-08) 48%, transparent 62%);
  transform: translateX(-130%); transition: transform .8s var(--v5-ease);
}
.pm-report-card:hover { transform: translateY(-5px); border-color: rgba(var(--acc), .5); box-shadow: var(--v5-glass-shadow), 0 20px 40px -16px rgba(var(--acc), .45); }
.pm-report-card:hover::after { transform: translateX(130%); }
.pm-report-icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: .8rem; display: grid; place-items: center;
  background: rgba(var(--acc), .13); border: 1px solid rgba(var(--acc), .32); color: rgb(var(--acc));
  box-shadow: 0 0 16px -4px rgba(var(--acc), .5);
}
.pm-report-icon svg { width: 20px; height: 20px; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.pm-report-card:hover .pm-report-icon svg { transform: scale(1.18) translateY(-2px); }
.pm-report-name { font-weight: 700; font-size: var(--fs-md); line-height: var(--lh-tight); display: flex; align-items: center; gap: .4rem; }
.pm-report-name .pm-report-arrow { opacity: 0; transform: translateX(-3px); transition: all .25s var(--v5-ease); color: rgb(var(--acc)); }
.pm-report-card:hover .pm-report-arrow { opacity: 1; transform: translateX(3px); }
.pm-report-desc { font-size: var(--fs-xs); color: var(--pm-muted); margin-top: .2rem; line-height: var(--lh-base); }

/* ============================================================
   ORDER-FORM TEMPLATE PREVIEW CARDS (General Settings → Ordering)
   ============================================================ */
.pm-tpl-card {
  display: block; cursor: pointer; border-radius: 1rem; padding: .8rem;
  background: var(--v5-surface-2); border: 1px solid var(--v5-border-strong);
  transition: transform .3s var(--v5-ease), box-shadow .3s var(--v5-ease), border-color .3s var(--v5-ease);
  position: relative;
}
.pm-tpl-card:hover { transform: translateY(-4px); border-color: var(--ab-60); box-shadow: 0 16px 32px -14px var(--ab-45); }
.pm-tpl-card:has(input:checked) {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--ab-50), 0 14px 30px -12px var(--ab-50);
  background: var(--ab-07);
}
.pm-tpl-preview {
  border-radius: .65rem; overflow: hidden; margin-bottom: .6rem;
  border: 1px solid var(--v5-border); background: linear-gradient(150deg, var(--ab-12), var(--ab-07));
  line-height: var(--lh-tight);
}
.pm-tpl-preview svg { width: 100%; height: auto; display: block; }
.pm-tpl-name { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); font-weight: 600; color: var(--pm-text); }

/* ============================================================
   MODALS — centered glass, animated backdrop, danger variant
   ============================================================ */
.pm-modal-backdrop {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: var(--ak-60);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: pm-v5-backdropIn .25s ease;
}
.pm-modal-backdrop[hidden] { display: none; }
.pm-modal {
  width: 100%; max-width: 460px; max-height: calc(100vh - 2rem); overflow-y: auto;
  background: var(--v5-surface); border: 1px solid var(--v5-border-strong); border-radius: 1.15rem;
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  box-shadow: 0 30px 60px -18px var(--ak-55), inset 0 1px 0 var(--aw-12);
  padding: 1.6rem; color: var(--pm-text);
  animation: pm-v5-modalPop .3s cubic-bezier(.16, 1, .3, 1);
}
html[data-theme="dark"] .pm-modal, html:not([data-theme]) .pm-modal { background: var(--ai-88); }
html[data-theme="light"] .pm-modal { background: var(--aw-92); }
.pm-modal-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 1rem; display: grid; place-items: center;
  background: var(--ab-14); border: 1px solid var(--ab-40); color: var(--brand-hi);
}
.pm-modal-icon svg { width: 27px; height: 27px; }
.pm-modal-icon.danger {
  background: var(--abd-13); border-color: var(--abd-45); color: var(--b-bad-fg);
  animation: pm-v5-dangerPulse 2s ease-out infinite;
}
.pm-modal h3 { text-align: center; font-size: var(--fs-lg); font-weight: 800; margin: 0 0 .45rem; color: var(--pm-text); }
.pm-modal p { text-align: center; font-size: var(--fs-sm); color: var(--pm-muted); margin: 0 0 1.3rem; line-height: var(--lh-base); }
.pm-modal-actions { display: flex; gap: .6rem; }
.pm-modal-actions .pm-btn { flex: 1; height: 2.6rem; }

/* any view-local modal that follows the common fixed-overlay pattern */
.pm-modal-open { overflow: hidden; }

/* ============================================================
   TOASTS — top-right, coloured progress bar, auto-dismiss
   ============================================================ */
.pm-toasts {
  position: fixed; top: 1rem; right: 1rem; z-index: 120;
  display: flex; flex-direction: column; gap: .6rem;
  width: min(92vw, 360px); pointer-events: none;
}
.pm-toast {
  --acc: var(--v5-acc-indigo);
  pointer-events: auto; position: relative; overflow: hidden;
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .85rem 2.2rem .95rem .95rem; border-radius: .9rem;
  background: var(--v5-surface); border: 1px solid var(--v5-border-strong);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  box-shadow: 0 18px 38px -14px var(--ak-45);
  color: var(--pm-text); font-size: var(--fs-sm); line-height: var(--lh-base);
  animation: pm-v5-toastIn .35s var(--v5-ease);
}
html[data-theme="dark"] .pm-toast, html:not([data-theme]) .pm-toast { background: var(--ai-90); }
html[data-theme="light"] .pm-toast { background: var(--aw-94); }
.pm-toast.leaving { animation: pm-v5-toastOut .3s var(--v5-ease) forwards; }
.pm-toast .pm-toast-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(var(--acc), .15); border: 1px solid rgba(var(--acc), .4); color: rgb(var(--acc));
}
.pm-toast .pm-toast-icon svg { width: 15px; height: 15px; }
.pm-toast.success { --acc: var(--v5-acc-emerald); }
.pm-toast.error { --acc: var(--v5-acc-rose); }
.pm-toast.warning { --acc: var(--v5-acc-amber); }
.pm-toast.info { --acc: var(--v5-acc-indigo); }
.pm-toast::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, rgb(var(--acc)), rgba(var(--acc), .35));
  transform-origin: left; animation: pm-v5-toastBar 4.5s linear forwards;
}
.pm-toast-close {
  position: absolute; top: .45rem; right: .5rem; background: none; border: none; cursor: pointer;
  color: var(--pm-muted); font-size: var(--fs-lg); line-height: var(--lh-tight); padding: .2rem; border-radius: .4rem;
}
.pm-toast-close:hover { color: var(--pm-text); }

/* ============================================================
   THEME TOGGLE BUTTON (topbar)
   ============================================================ */
.pm-theme-toggle {
  width: 38px; height: 38px; border-radius: 9999px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--v5-surface-3); border: 1px solid var(--v5-border-strong); color: var(--pm-muted);
  cursor: pointer; transition: all .25s var(--v5-ease);
}
.pm-theme-toggle:hover { color: var(--warn); border-color: var(--awn-55); box-shadow: 0 0 16px -4px var(--awn-60); transform: translateY(-1px); }
.pm-theme-toggle:active { transform: scale(.94); }
.pm-theme-toggle svg { width: 18px; height: 18px; transition: transform .45s var(--v5-ease); }
.pm-theme-toggle:hover svg { transform: rotate(35deg) scale(1.12); }
.pm-theme-toggle .ic-sun { display: none; }
.pm-theme-toggle .ic-moon { display: block; }
html[data-theme="dark"] .pm-theme-toggle .ic-sun, html:not([data-theme]) .pm-theme-toggle .ic-sun { display: block; }
html[data-theme="dark"] .pm-theme-toggle .ic-moon, html:not([data-theme]) .pm-theme-toggle .ic-moon { display: none; }
html[data-theme="dark"] .pm-theme-toggle, html:not([data-theme]) .pm-theme-toggle { color: var(--b-warn-fg); }

/* ============================================================
   AUTH PAGES (guest layout + standalone admin auth) — centered glass card
   ============================================================ */
.pm-auth-wrap {
  /* FULL-POLISH 2026-10-25 (P2, gentle): 100vh + header/footer above
     pushed the card ~55% down the page on mobile. 60vh keeps it
     visually centred in its band while starting much higher. */
  min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 1.25rem;
  position: relative;
}
.pm-auth-card {
  width: 100%; max-width: 430px; position: relative; z-index: 1;
  background: var(--v5-surface); border: 1px solid var(--v5-border-strong); border-radius: 1.25rem;
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  box-shadow: 0 30px 60px -18px var(--ak-50), inset 0 1px 0 var(--aw-12);
  padding: 2.1rem 2rem; animation: pm-v5-modalPop .35s cubic-bezier(.16, 1, .3, 1);
}
html[data-theme="dark"] .pm-auth-card, html:not([data-theme]) .pm-auth-card { background: var(--ai-80); }
html[data-theme="light"] .pm-auth-card { background: var(--aw-88); }
.pm-auth-card h1 { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em; color: var(--pm-text); margin: 0 0 .35rem; }
.pm-auth-card .pm-auth-sub { font-size: var(--fs-sm); color: var(--pm-muted); margin: 0 0 1.4rem; line-height: var(--lh-base); }
.pm-auth-lock {
  width: 58px; height: 58px; border-radius: 1rem; margin: 0 auto 1.1rem; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ab-25), var(--ab-25));
  border: 1px solid var(--ab-45); color: var(--brand-hi);
  box-shadow: 0 0 24px -4px var(--ab-55);
}
.pm-auth-lock svg { width: 27px; height: 27px; }

/* pagination in dark */
html[data-theme="dark"] .pm-page, html:not([data-theme]) .pm-page { background: var(--aw-05); border-color: var(--aw-12); color: var(--text-2); }
html[data-theme="dark"] span.pm-page.pm-disabled, html:not([data-theme]) span.pm-page.pm-disabled { background: var(--aw-02); color: var(--text-4); }

/* tabs-line in dark */
html[data-theme="dark"] .pm-tabs-line, html:not([data-theme]) .pm-tabs-line { border-bottom-color: var(--aw-10); }

/* hero stays deep in both themes (white text by design) */
.pm-hero { box-shadow: 0 24px 48px -20px var(--ab-55); }

/* ============================================================
   FALLBACKS + REDUCED MOTION
   ============================================================ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="dark"] .pm-card, html:not([data-theme]) .pm-card,
  html[data-theme="dark"] .pm-modal, html:not([data-theme]) .pm-modal,
  html[data-theme="dark"] .pm-toast, html:not([data-theme]) .pm-toast,
  html[data-theme="dark"] .pm-auth-card, html:not([data-theme]) .pm-auth-card { background: var(--surface-1); }
  html[data-theme="light"] .pm-card, html[data-theme="light"] .pm-modal,
  html[data-theme="light"] .pm-toast, html[data-theme="light"] .pm-auth-card { background: var(--surface-1); }
  html[data-theme="dark"] .pm-topbar, html:not([data-theme]) .pm-topbar { background: var(--ai-97); }
}
@media (prefers-reduced-motion: reduce) {
  .pm-badge-active::before, .pm-badge-paid::before, .pm-badge-completed::before, .pm-b-green::before,
  .pm-badge-pending::before, .pm-badge-onhold::before, .pm-b-amber::before, .pm-b-yellow::before,
  .pm-badge-overdue::before, .pm-badge-failed::before, .pm-badge-unpaid::before, .pm-b-red::before,
  .pm-live-dot, .pm-modal-icon.danger { animation: none !important; }
  .pm-card::after, .pm-report-card::after { display: none; }
  .pm-toast::after { animation: none; }
  .pm-card:hover, .pm-report-card:hover, .pm-tpl-card:hover { transform: none; }
}

/* Neutral (flat) trend chip — up/down variants above override. */
.pm-trend { background: var(--v5-chip); border: 1px solid var(--v5-border-strong); color: var(--pm-muted); }
.pm-acc-emerald .pm-trend-up, .pm-stat .pm-trend-up { background: rgba(var(--v5-green),.14); border-color: rgba(var(--v5-green),.4); color: var(--v5-green-tx); }
.pm-stat .pm-trend-down { background: rgba(var(--v5-rose),.14); border-color: rgba(var(--v5-rose),.4); color: var(--v5-rose-tx); }