body{--primary:var(--v24-brand);--primary-hover:var(--v24-brand-deep);--primary-soft:var(--v24-brand-tint);--primary-mid:var(--v24-brand);--primary-light:var(--v24-brand-tint);--primary-muted:var(--v24-brand-tint);--primary-faint:var(--v24-brand-tint);--primary-tint:var(--v24-brand-tint);--primary-accent:var(--v24-brand);--primary-press:var(--v24-brand-deep);--primary-deep:var(--v24-brand-deep);--primary-disabled:var(--v24-brand-tint)}.v24-row-hover{transition:background .18s ease}.v24-row-hover:hover{
  /* !important on every hover declaration — this utility is the SSOT
     hover for /orders, /library, /invoices, /disputes. Consumer pages
     attach the class alongside their own CSS Module .row class which
     defines base styles (padding, border-bottom, etc.) at the same
     specificity tier. CSS Module rules ship with the page bundle and
     load AFTER ui-v24/utilities.css in Next.js, so absent !important
     a consumer's stray .row:hover or even a .row property could
     silently shadow the bleed/radius/bg here. !important locks the
     hover recipe regardless of consumer-CSS load order. */background:var(--v24-surface-card)!important;border-radius:6px!important;margin-left:-16px!important;margin-right:-16px!important;padding-left:16px!important;padding-right:16px!important;border-bottom-color:transparent!important}@media (prefers-reduced-motion:reduce){.v24-row-hover{transition:background .18s ease}}.v24-row-hover-urgent{background:#fbf5e8;border-radius:6px;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;transition:background .18s ease}.v24-row-hover-urgent:hover{background:#f7eeda}input:focus,input:focus-visible,select:focus,select:focus-visible,textarea:focus,textarea:focus-visible{border-color:var(--v24-brand)!important;box-shadow:0 0 0 3px var(--v24-brand-tint)!important;caret-color:var(--v24-brand);accent-color:var(--v24-brand)}::selection{background:var(--v24-brand-tint);color:var(--v24-brand-deep)}