:root {
  /* Enterprise B2B — refined slate + deep blue accent (Linear / Stripe-adjacent clarity) */
  --primary: #1d4ed8;
  --primary-hover: #1e40af;
  --primary-muted: #eff6ff;
  --primary-subtle: rgba(29, 78, 216, 0.12);
  --bg: #f1f5f9;
  --app-canvas: #f1f5f9;
  --sidebar-bg: #f8fafc;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --surface-raised: #ffffff;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --success: #15803d;
  --success-bg: #f0fdf4;
  --warning: #b45309;
  --warning-bg: #fffbeb;
  --danger: #b91c1c;
  --danger-bg: #fef2f2;
  --info: #1d4ed8;
  --info-bg: #eff6ff;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 20px -4px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 50px -12px rgba(15, 23, 42, 0.12);
  --ring-primary: 0 0 0 3px rgba(29, 78, 216, 0.22);
  /* Dual-layer ring: a contrast halo (reads on dark surfaces) + the accent
     ring (reads on light). Visible on both per WCAG 2.2 focus-appearance. */
  --focus-ring: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 4px rgba(37, 99, 235, 0.9);
  --transition: 0.16s ease;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
/* Desktop product: maintain full layout; viewports narrower than this scroll horizontally */
html {
  min-width: 1280px;
}
body {
  font-family: var(--font-sans);
  background: var(--app-canvas);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Focus: keyboard-visible only (mouse clicks don’t show ring) */
:focus:not(:focus-visible) {
  outline: none;
}

/* Global keyboard-focus fallback. Component-level :focus-visible rules
   (higher specificity) still win; this only fills the gap for the many
   shared button classes that previously fell back to the UA outline or
   nothing. Uses the same --focus-ring token as every bespoke ring. */
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.tabular-nums,
.m1-td--right,
.m1-score,
.hero-stat strong,
.metric-card strong,
.dashboard-kpi-card strong,
/* Base numeric-value selectors that previously only got tabular-nums via a
   shell-scoped override (e.g. .m5-shell .m1pro-kpi__val), leaving currency /
   percent / delta columns proportional everywhere else. */
.m1pro-kpi__val,
.m1-metric-strip__item strong,
.mono,
.dash3-kpi__value,
.m2-leakage__hero strong,
.m2-leakage__meta strong,
.m2-heatcell strong,
.m3an-table tbody td {
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, p { margin: 0; }
h1 { font-size: 28px; line-height: 1.2; font-weight: 700; margin-top: 10px; letter-spacing: -0.02em; }
h2 { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: 16px; line-height: 1.3; font-weight: 600; }
small { color: var(--text-muted); }

.page-title {
  font-size: clamp(1.375rem, 2.5vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin-top: var(--space-3);
  color: var(--text);
}

.title-soft {
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.85em;
}

.auth-lead {
  font-size: 14px;
  line-height: 1.55;
  max-width: 42ch;
}

.brand-tagline {
  font-size: 13px;
  margin-top: 2px;
}

.text-norm {
  font-weight: 600;
  color: var(--text);
}

.field-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0 0;
  line-height: 1.45;
}

.invite-status-row {
  margin-top: 4px;
}

.app-shell { min-height: 100vh; }
.muted, .tiny { color: var(--text-muted); }
.tiny { font-size: 12px; }
.mt16 { margin-top: 16px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
}
.eyebrow.alt {
  background: rgba(255,255,255,0.16);
  color: #fff;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand strong {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.auth-panel .brand strong {
  font-size: 20px;
  line-height: 1.2;
}
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(145deg, #3b82f6 0%, var(--primary) 52%, var(--primary-hover) 100%);
  box-shadow: 0 2px 10px rgba(29, 78, 216, 0.28);
}

.auth-layout {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(400px, 480px) 1fr;
}

.auth-panel,
.auth-visual,
.sidebar,
.main {
  padding: var(--space-6) var(--space-5);
}

.auth-panel {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.auth-panel__inner {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  flex: 1;
}

.auth-intro {
  padding-top: 4px;
}

.auth-intro-subline {
  margin-top: 8px;
  margin-bottom: 0;
  max-width: 48ch;
  line-height: 1.45;
}

.auth-intro p,
.auth-lead {
  margin-top: var(--space-2);
}

.auth-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.demo-block {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.demo-block__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.tab-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 14px;
}
.tab {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  padding: 10px 12px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.tab:hover {
  color: var(--text);
}
.tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.1);
}

.tab-row--on-dark {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

.tab-row--on-dark .tab {
  color: rgba(255, 255, 255, 0.78);
}

.tab-row--on-dark .tab:hover {
  color: #fff;
}

.tab-row--on-dark .tab.active {
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.button-stack, .field-stack, .nav-list, .workspace-switch, .status-list { display: grid; gap: 10px; }

.button {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 11px 16px;
  min-height: 42px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform 0.1s ease;
}
.button--with-icon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.button--with-icon i { font-size: 15px; line-height: 1; }
.button:hover {
  filter: brightness(0.98);
}
.button:active {
  transform: translateY(1px);
}
.button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.button-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}
.button-primary:hover {
  background: var(--primary-hover);
}
.button-secondary {
  border-color: var(--border-strong);
  background: var(--surface);
}
.button-secondary:hover {
  background: var(--surface-alt);
  border-color: #cbd5e1;
}
.button-ghost {
  border-color: #bfdbfe;
  color: var(--primary);
  background: var(--primary-muted);
}
.button-ghost:hover {
  background: #dbeafe;
}
.button-tertiary {
  border-color: transparent;
  background: transparent;
  color: var(--text-secondary);
  box-shadow: none;
}
.button-tertiary:hover {
  background: rgba(15, 23, 42, 0.05);
  color: var(--text);
  filter: none;
}
.button-danger {
  background: var(--danger-bg);
  border: 1px solid #fecaca;
  color: var(--danger);
  box-shadow: none;
}
.button-danger:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  filter: none;
}
.button-sm,
.button.tiny {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: var(--radius-sm);
}
.button:disabled {
  background: #e2e8f0;
  border-color: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
  transform: none;
}

.provider-button { width: 100%; text-align: center; }
.divider {
  margin: 14px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  position: relative;
}
.divider::before, .divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 36%;
  height: 1px;
  background: var(--border);
}
.divider::before { left: 0; }
.divider::after { right: 0; }

.field-stack label,
.field-stack > label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.field,
.select,
.search {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.field:hover,
.select:hover {
  border-color: #cbd5e1;
}

.field:focus-visible,
.select:focus-visible,
.search:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

.field[readonly] {
  background: var(--surface-alt);
  color: #4b5563;
  cursor: default;
}
.inline-row,
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.split-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.split-actions .button-primary {
  margin-left: auto;
}

.proto-switch {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.proto-switch summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
}

.auth-visual {
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(37, 99, 235, 0.2), transparent 50%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(59, 130, 246, 0.12), transparent 45%),
    linear-gradient(180deg, #e8f0fe 0%, #f4f7fb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.auth-visual__content {
  width: 100%;
  max-width: 520px;
}

.journey-card {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(165deg, #1e3a8a 0%, #1d4ed8 48%, #2563eb 100%);
  color: #fff;
  padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.journey-card__title {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-top: var(--space-2);
}

.journey-card p {
  color: rgba(255, 255, 255, 0.9);
  margin-top: var(--space-3);
  font-size: 14px;
  line-height: 1.55;
}
.journey-subhead {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}
.usp-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.usp-item {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 10px;
}
.usp-item strong {
  display: block;
  font-size: 14px;
  color: #fff;
}
.usp-item p {
  margin-top: 4px;
  font-size: 13px;
}
.journey-list { display: grid; gap: 12px; margin-top: 16px; }
.journey-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  padding: 10px;
}
.journey-item span {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  font-weight: 700;
}
.journey-item strong { display: block; }

.workspace-layout {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 272px 1fr;
  background: var(--app-canvas);
}

.onboarding-layout {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0;
  padding: var(--space-4) var(--space-5) var(--space-6);
  max-width: min(1440px, 100%);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1440px) {
  .onboarding-layout {
    max-width: min(1600px, 100%);
    padding: var(--space-5) var(--space-6) var(--space-6);
  }
}

@media (min-width: 1760px) {
  .onboarding-layout {
    max-width: 1720px;
  }
}

.onboarding-main {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  width: 100%;
  min-height: 0;
}

.onboarding-topbar {
  align-items: flex-start;
  padding: 0 0 var(--space-3);
  margin: 0;
  border-bottom: 1px solid var(--border);
  gap: var(--space-3);
  position: static;
  z-index: auto;
  background: transparent;
}

.onboarding-topbar__headline {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 4px;
  color: var(--text);
}

.onboarding-topbar__sub {
  margin-top: 6px;
  max-width: 52ch;
}

.onboarding-topbar__actions {
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.onboarding-panel {
  display: grid;
  gap: var(--space-4);
}

.onboarding-panel--sheet {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border-color: #e7e5e4;
  background: var(--surface);
}

.onboarding-step {
  display: grid;
  gap: var(--space-3);
}

.onboarding-step > h1 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
}

.onboarding-step > .muted {
  max-width: 62ch;
  line-height: 1.55;
}
.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
}

.sidebar__section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--space-2) 0 0 var(--space-1);
  padding: 0 0 var(--space-1);
}
.panel,
.metric-card,
.card-item,
.goal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow);
}
.workspace-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  box-shadow: none;
}
.sidebar-bell {
  position: relative;
}
.sidebar-bell__btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #f8fbff;
  color: #1e3a8a;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 10px;
  cursor: pointer;
}
.sidebar-bell__txt {
  margin-right: auto;
}
.sidebar-bell__cnt {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
}
.sidebar-bell__popover {
  margin-top: 8px;
  border: 1px solid #dbeafe;
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}
.sidebar-bell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sidebar-bell__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.sidebar-bell__item {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  padding: 8px;
  display: grid;
  gap: 8px;
}
.sidebar-bell__item.is-ack {
  opacity: 0.72;
}
.sidebar-bell__actions {
  display: flex;
  gap: 6px;
}
.panel > h2:first-child {
  margin-top: 0;
}
.workspace-box h3 { margin-top: 10px; font-size: 16px; }

.nav-btn {
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  text-align: left;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 11px;
  line-height: 1.2;
  transition: background var(--transition), color var(--transition);
}
.nav-btn__icon {
  flex: 0 0 18px;
  font-size: 18px;
  line-height: 1;
  color: var(--text-secondary);
  opacity: 0.85;
  transition: color var(--transition), opacity var(--transition), transform var(--transition);
}
.nav-btn__label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-btn:hover {
  background: rgba(15, 23, 42, 0.04);
  color: var(--text);
}
.nav-btn:hover .nav-btn__icon {
  color: var(--text);
  opacity: 1;
}
.nav-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring-primary);
}
/* Active: tint only — no left "rail" or elevated card (reads more enterprise, less template).
   Icon flips to the brand accent so wayfinding reads at a glance. */
.nav-btn.active {
  background: rgba(15, 23, 42, 0.07);
  color: var(--text);
  font-weight: 600;
  box-shadow: none;
}
.nav-btn.active .nav-btn__icon {
  color: var(--accent, #4f46e5);
  opacity: 1;
}
.sidebar-foot {
  margin-top: auto;
  border-radius: var(--radius-md);
  border: 1px solid #dbeafe;
  background: linear-gradient(180deg, #f8fbff 0%, #f0f7ff 100%);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  padding: var(--space-3);
}

.main,
.page-shell {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-6);
  min-width: 0;
  width: 100%;
  max-width: min(1440px, 100%);
  margin: 0 auto;
}

/* Module 1 (credit) — tighter vertical rhythm, less “boxed” chrome */
.m1-module-shell {
  gap: var(--space-3);
  padding-top: var(--space-4);
  padding-bottom: var(--space-5);
}
.m1-module-shell > .topbar.page-header {
  padding: var(--space-2) 0 var(--space-3);
  margin: 0;
}
.m1-module-shell .m1-subnav.panel {
  margin-bottom: var(--space-2);
  padding: 6px 8px;
  background: #f8fafc;
  border-color: #e2e8f0;
  box-shadow: none;
}
.m1-module-shell .m1-subnav {
  min-height: 44px;
  padding: 8px 10px;
}
.m1-module-shell .m1-subnav__btn {
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  border-color: #e2e8f0;
}
.m1-module-shell .m1-subnav__btn.is-active {
  border-color: #1d4ed8;
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  color: #1e3a8a;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.2);
}
.m1-module-shell .m1-subnav__btn.is-active::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 999px;
  background: #1d4ed8;
  vertical-align: middle;
}

.m1-module-shell .m1-subnav__btn[aria-current="page"] {
  border-color: #1d4ed8;
}
.m1-module-shell .m1-queue__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: var(--space-3);
}
.m1-module-shell .m1-queue__tiles {
  margin-top: 0;
  gap: 8px;
}
.m1-module-shell .m1-tile {
  min-height: 66px;
  padding: 9px 12px 7px;
}
.m1-module-shell .m1-tile strong {
  font-size: 20px;
}
.m1-module-shell .m1-filters.mt16,
.m1-module-shell .module1-customer-search.mt16,
.m1-module-shell .m1-table-toolbar.mt16 {
  margin-top: 12px;
}
.m1-module-shell .m1-table-wrap.mt12 {
  margin-top: 10px;
}
.m1-module-shell > .panel.mt16 {
  margin-top: var(--space-3);
}

/* Sticky app header: title + primary actions stay visible on scroll */
.topbar,
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) 0 var(--space-4);
  margin: calc(-1 * var(--space-1)) 0 0;
  border-bottom: 1px solid var(--border);
  background: var(--app-canvas);
  position: sticky;
  top: 0;
  z-index: 20;
}
.page-header h1,
.topbar h1 {
  font-size: clamp(1.375rem, 2.2vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text);
  margin: var(--space-1) 0 0;
}
.page-header .eyebrow,
.topbar .eyebrow {
  margin-top: 0;
}
.topbar .search {
  min-width: min(280px, 100%);
  max-width: 360px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border-color: var(--border);
}
.topbar .search::placeholder {
  color: #94a3b8;
}

.topbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Align the legacy in-app module header (.topbar.page-header) with the modern
   .m2-queue__head kit: flat accent eyebrow (not a pill) + tighter bold title.
   Scoped to .page-shell so the auth / onboarding headers are unaffected. */
.page-shell .topbar.page-header .eyebrow {
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--d3-accent, #4f46e5);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.page-shell .topbar.page-header h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-top: 0;
}

/* Dashboard-only density pass: tighter title/search/actions on laptop viewports. */
.dashboard-topbar {
  gap: 8px 12px;
  padding-top: 8px;
  padding-bottom: 12px;
}

.dashboard-topbar h1 {
  margin-top: 6px;
  font-size: clamp(1.28rem, 1.85vw, 1.52rem);
  line-height: 1.24;
}

.dashboard-topbar .topbar-actions {
  gap: 8px;
}

.dashboard-topbar .search {
  min-width: 320px;
  max-width: 420px;
  padding: 9px 12px;
  font-size: 13px;
}

.dashboard-topbar .button {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 9px;
}

@media (max-width: 1480px) {
  .dashboard-topbar .search {
    min-width: 270px;
    max-width: 350px;
  }
}

@media (max-width: 1300px) {
  .dashboard-topbar {
    align-items: stretch;
  }

  .dashboard-topbar .topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .dashboard-topbar .search {
    flex: 1 1 260px;
    min-width: 240px;
  }
}

.stepper {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  padding-bottom: var(--space-4);
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
}

.step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px 8px 10px;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-alt);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.step span:first-child {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  color: #475569;
  flex-shrink: 0;
}

.step.upcoming {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #64748b;
}

.step.active {
  border-color: #93c5fd;
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  color: #1d4ed8;
}

.step.active span:first-child {
  background: #bfdbfe;
  color: #1d4ed8;
}

.step.completed {
  border-color: #86efac;
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
  color: #166534;
}

.step.completed span:first-child {
  background: #bbf7d0;
  color: #166534;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.metric-card strong { display: block; font-size: 24px; margin-top: 8px; }

.metric-card--status strong {
  font-size: 18px;
  color: #166534;
}

.metric-card--status small:last-of-type {
  display: block;
  margin-top: 6px;
  line-height: 1.45;
  color: var(--text-muted);
}

.validation-score-guide {
  border-top: 1px solid rgba(191, 219, 254, 0.9);
  padding-top: 10px;
}

.validation-score-guide__list {
  margin: 8px 0 0;
  padding-left: 1.15rem;
  color: #475569;
  line-height: 1.45;
}

.validation-score-guide__list li {
  margin: 4px 0;
}

.validation-findings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.validation-finding {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.validation-finding__label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
}

.validation-finding__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.link-like {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-like:hover {
  color: #1d4ed8;
}

.validation-route-help {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
}

.validation-panel__footer {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.validation-overview {
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  padding: 16px;
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 14px;
  align-items: center;
}

.validation-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.validation-overview-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.validation-stat {
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.validation-stat small {
  color: #64748b;
  display: block;
}

.validation-stat strong {
  display: block;
  margin-top: 6px;
  font-size: 20px;
  color: #0f172a;
}

.validation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.validation-panel {
  padding: 16px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.card-item h3 {
  margin-bottom: 4px;
}

.card-item p {
  font-size: 13px;
  line-height: 1.45;
}

.dashboard-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}

.dashboard-arrow {
  color: #94a3b8;
  font-size: 16px;
  font-weight: 700;
}

.dashboard-demo-banner {
  margin-bottom: var(--space-4);
  border-color: #93c5fd;
  background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 100%);
}

.dashboard-demo-banner p {
  margin: 0;
  max-width: 80ch;
  line-height: 1.5;
}

.dashboard-hero {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  padding: 22px 22px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 24px 28px;
  align-items: stretch;
}

@media (max-width: 960px) {
  .dashboard-hero {
    grid-template-columns: 1fr;
  }
}

.dashboard-hero__main {
  min-width: 0;
}

.dashboard-hero__lead {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: #475569;
  max-width: 52ch;
}

.dashboard-hero-badge--soft {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-weight: 500;
}

.dashboard-hero-aside {
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dashboard-hero-aside__top {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dashboard-hero-kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef2f6;
}

.dashboard-hero-kv:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.dashboard-hero-kv__k {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
}

.dashboard-hero-kv__v {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.dashboard-hero-lede {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #64748b;
}

.dashboard-hero-jump__label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 8px;
}

.dashboard-hero-jump__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-hero-chip {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #1e40af;
  background: #fff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.dashboard-hero-chip:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.dashboard-hero-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.dashboard-hero h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.dashboard-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-hero-stats--quad {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hero-stat {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  padding: 12px 12px 10px;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
  min-height: 0;
}

.hero-stat small {
  color: #64748b;
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hero-stat strong {
  display: block;
  margin-top: 8px;
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: #0f172a;
  line-height: 1.2;
}

.hero-stat__hint {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.35;
  color: #64748b;
  font-weight: 500;
}

.hero-stat--ptp .hero-stat__hint {
  margin-bottom: 2px;
}

.hero-stat__ptpmeta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
  font-size: 11px;
  line-height: 1.45;
  color: #475569;
}

.hero-stat__ptpmeta em {
  font-style: normal;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.hero-stat__diamond {
  color: #cbd5e1;
  font-weight: 400;
  padding: 0 0.2em;
}

.dashboard-kpi-wrap {
  margin-top: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  padding: 14px 14px 12px;
}

.dashboard-kpi-wrap__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 14px;
  padding: 2px 2px 12px;
  border-bottom: 1px solid #f1f5f9;
}

.dashboard-kpi-wrap__title {
  margin: 0 0 4px;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.dashboard-kpi-wrap__lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #64748b;
  max-width: 56ch;
}

.dashboard-kpi-wrap__meta {
  margin: 0;
  font-size: 12px;
  color: #64748b;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dashboard-kpi-wrap__meta strong {
  color: #0f172a;
  font-weight: 600;
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

@media (min-width: 1200px) {
  .dashboard-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.dashboard-kpi-card {
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  min-width: 0;
  min-height: 9rem;
  display: flex;
  flex-direction: column;
  padding: 13px 12px 10px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.dashboard-kpi-card--tone-neutral {
  border: 1px solid #e8ecf1;
  border-left: 3px solid #2563eb;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.dashboard-kpi-card--tone-warning {
  border: 1px solid #fef3c7;
  border-left: 3px solid #d97706;
  background: linear-gradient(180deg, #fffcf5 0%, #fff 52%);
  box-shadow: 0 1px 2px rgba(180, 83, 9, 0.06);
}
.dashboard-kpi-card--tone-risk {
  border: 1px solid #fecaca;
  border-left: 3px solid #dc2626;
  background: linear-gradient(180deg, #fffafb 0%, #fff 52%);
  box-shadow: 0 1px 2px rgba(185, 28, 28, 0.08);
}
.dashboard-kpi-card--tone-leakage {
  border: 1px solid #ede9fe;
  border-left: 3px solid #7c3aed;
  background: linear-gradient(180deg, #fbf9ff 0%, #fff 52%);
  box-shadow: 0 1px 2px rgba(109, 40, 217, 0.07);
}
.dashboard-kpi-card--tone-ptp {
  border: 1px solid #ccfbf1;
  border-left: 3px solid #0d9488;
  background: linear-gradient(180deg, #f6fffe 0%, #fff 52%);
  box-shadow: 0 1px 2px rgba(13, 148, 136, 0.08);
}

.dashboard-kpi-card:hover {
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.dashboard-kpi-faux {
  margin: 6px 0 0;
  text-align: right;
}

.dashboard-kpi-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0;
}

.dashboard-kpi-card__lens {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 1px 7px;
}

.dashboard-kpi-shelf {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 2px 6px;
}
.dashboard-kpi-shelf--trend {
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
}

.dashboard-kpi-card__label {
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  display: block;
  padding-right: 4px;
}

.dashboard-kpi-card__value {
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 8px 0 0;
  color: #0f172a;
  display: block;
}

.dashboard-kpi-card__sub {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #64748b;
  flex: 1;
}

.dashboard-kpi-ptp {
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid #e2e8f0;
  display: grid;
  gap: 6px;
}
.dashboard-kpi-ptp > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
}
.dashboard-kpi-ptp dt {
  margin: 0;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dashboard-kpi-ptp dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.dashboard-kpi-ptp__unit {
  font-weight: 500;
  color: #64748b;
  font-size: 11px;
}

.kpi-spark {
  height: 5px;
  background: #e8ecf0;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  margin-top: 12px;
}

.kpi-spark span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 999px;
  transition: width 0.35s ease;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.kpi-spark--neutral span {
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}
.kpi-spark--warning span {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}
.kpi-spark--risk span {
  background: linear-gradient(90deg, #f87171, #dc2626);
}
.kpi-spark--leakage span {
  background: linear-gradient(90deg, #a78bfa, #7c3aed);
}
.kpi-spark--ptp span {
  background: linear-gradient(90deg, #2dd4bf, #0d9488);
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 12px;
  align-items: stretch;
}

.dashboard-col-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.dashboard-payment-widget {
  margin-top: 0;
}

.dashboard-payment-signals {
  margin: 0;
  padding-left: 1.15rem;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
}

.dashboard-payment-signals li {
  margin: 6px 0;
}

.dashboard-payment-signals strong {
  color: #0f172a;
}

.dashboard-worklist {
  display: grid;
  gap: 10px;
}

.worklist-row {
  border: 1px solid #e8ecf1;
  border-radius: 10px;
  padding: 14px 14px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: start;
  background: #fff;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.worklist-row:hover {
  border-color: #dbeafe;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.worklist-row__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.worklist-open-btn {
  min-width: 5.25rem;
}

.worklist-cust-id {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  font-family: ui-monospace, monospace;
}

.worklist-meta {
  margin-top: 4px;
}

.worklist-row__main {
  min-width: 0;
}

.worklist-row__main strong {
  display: inline;
  font-size: 15px;
  color: #0f172a;
}

.worklist-reason {
  margin: 8px 0 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.worklist-row__main > .tiny.muted {
  font-size: 13px;
  line-height: 1.45;
}

.worklist-why-label {
  font-weight: 700;
  color: #334155;
}

.worklist-module {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 2px 8px;
  text-align: center;
  min-width: 5.4rem;
}

@media (max-width: 1180px) {
  .dashboard-main-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-side-stack {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .worklist-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .worklist-row__actions {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
}

.dashboard-side-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
  align-self: stretch;
}

.dashboard-side-stack .dashboard-insight-stack {
  flex: 1;
  min-height: 0;
}

.risk-bars {
  display: grid;
  gap: 10px;
}

.risk-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

.risk-track {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.risk-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.dashboard-insight-stack {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  background: #f8fafc;
  display: grid;
  gap: 8px;
}

.insight-pill {
  border: 1px solid #dbeafe;
  background: #eff6ff;
  border-radius: 10px;
  padding: 10px;
  font-size: 13px;
  color: #1e3a8a;
}

.module1-customer-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.module1-customer-selected-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-alt);
}

.module1-customer-selected-strip__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.module1-customer-selected-strip__name {
  display: block;
  font-size: 16px;
  margin-top: 4px;
}

.module1-customer-selected-strip__meta {
  display: block;
  margin-top: 4px;
}

.module1-customer-search .field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.module1-customer-search .mt8 {
  margin-top: 8px;
}

.module1-customer-search__row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}

.module1-customer-search-input {
  flex: 1;
  min-width: min(100%, 240px);
}

.module1-search-results {
  max-height: min(360px, 42vh);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.module1-search-hit {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background var(--transition);
}

.module1-search-hit:last-child {
  border-bottom: none;
}

.module1-search-hit:hover {
  background: var(--surface-alt);
}

.module1-search-hit--selected {
  background: var(--primary-muted);
  border-left: 3px solid var(--primary);
  padding-left: 9px;
}

.module1-search-hit__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: min(100%, 200px);
}

.module1-search-hit__stats {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.module1-stage-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 0;
}

.module1-primary-persona-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding: 10px 14px;
  margin-bottom: 16px;
  border-radius: var(--radius-sm);
  background: var(--primary-muted);
  border: 1px solid #bfdbfe;
}

.module1-primary-persona-bar__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary);
  flex-shrink: 0;
}

.module1-primary-persona-bar__value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
  flex: 1;
  min-width: min(100%, 260px);
}

.module1-stage {
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1e40af;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.module1-stage span {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #bfdbfe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.module1-stage.active {
  border-color: #1d4ed8;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
}

.module1-stage.active span {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.module1-stage--done:not(.active) {
  border-color: #86efac;
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
  color: #166534;
}

.module1-stage--done:not(.active) span {
  background: #bbf7d0;
  color: #166534;
  font-size: 10px;
}

.module1-journey-bar {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.module1-journey-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #4f46e5);
  transition: width 0.25s ease;
}

.module1-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.module1-chip {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 6px 12px;
}

.module1-micro {
  margin-top: 8px;
  font-size: 12px;
}

.module1-subpanel {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  background: #f8fafc;
}

.module1-subpanel h3 {
  margin: 0 0 8px 0;
  font-size: 14px;
}

.module1-callout {
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
  padding: 12px 14px;
  color: #1e3a8a;
}

.module1-callout--compact {
  font-size: 13px;
}

.module1-callout strong {
  display: block;
  margin-bottom: 4px;
}

.module1-list {
  margin: 0;
  padding-left: 18px;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
}

.module1-scenario-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.module1-metric-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface);
  display: grid;
  gap: 4px;
}

.module1-metric-card small {
  color: var(--text-muted);
  font-size: 11px;
}

.module1-metric-card strong {
  font-size: 15px;
  color: var(--text);
}

.module1-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 12px;
}

.module1-code {
  margin: 10px 0 0 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 12px;
  line-height: 1.45;
  overflow: auto;
}

.module1-note {
  min-height: 110px;
  resize: vertical;
}

.module1-notice {
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
  color: #1e3a8a;
  padding: 10px 12px;
  font-weight: 600;
}

.module1-rationale {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
  padding: 12px;
}

.module1-intro-panel .module1-intro-lead {
  max-width: 72ch;
  line-height: 1.55;
}

.module1-persona-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.module1-persona-chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
}

.module1-prd-details {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--surface-alt);
}

.module1-prd-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}

.module1-prd-body p {
  margin: 0;
  max-width: 85ch;
}

.module1-stage-product {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.module1-stage-product h2 {
  margin-top: 0;
  font-size: 17px;
}

.module1-stage-outcome {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.module1-stage-owner {
  margin-top: 8px;
}

.module1-side-h {
  margin: 0 0 8px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.module1-two-col-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.module1-bullet-list {
  margin: 8px 0 0 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.module1-demo-footnote {
  border-left: 3px solid var(--primary-muted);
  padding-left: 12px;
  max-width: 85ch;
}

.module1-api-details summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.goal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.goal-card {
  text-align: left;
  cursor: pointer;
}
.goal-card p { margin-top: 6px; color: var(--text-muted); font-size: 13px; }
.goal-card.active { border-color: #93c5fd; background: #eff6ff; }

.selectable-card {
  text-align: left;
  cursor: pointer;
  width: 100%;
}

.selectable-card.selected {
  border-color: #93c5fd;
  background: #eff6ff;
  box-shadow: inset 0 0 0 1px #bfdbfe;
}

.selectable-card:focus {
  outline: 2px solid #bfdbfe;
  outline-offset: 1px;
}

.table-like .row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.table-like .row:last-child { border-bottom: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  background: #f1f5f9;
  color: var(--text-secondary);
  border: 1px solid transparent;
}
.badge.tiny,
.badge.sm {
  font-size: 11px;
  padding: 2px 6px;
}
.badge.success {
  background: var(--success-bg);
  color: var(--success);
  border-color: rgba(21, 128, 61, 0.2);
}
.badge.warning {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: rgba(180, 83, 9, 0.18);
}
.badge.danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: rgba(185, 28, 28, 0.2);
}
.badge.info {
  background: var(--info-bg);
  color: var(--info);
  border-color: rgba(29, 78, 216, 0.15);
}
.badge.neutral {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

.progress {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--surface-alt);
  overflow: hidden;
}
.progress span { display: block; height: 100%; background: var(--primary); }

.status-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.status-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}
.status-list li:last-child { border-bottom: 0; }

/* —— Sign-in: desktop split (form | journey); stacks on narrow viewports —— */
.auth-page {
  position: relative;
  min-height: 100dvh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px clamp(18px, 4vw, 48px) 40px;
  overflow-x: hidden;
}

.auth-page__ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 55% at 50% -15%, rgba(37, 99, 235, 0.16), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 10%, rgba(59, 130, 246, 0.1), transparent 50%),
    radial-gradient(ellipse 45% 35% at 0% 90%, rgba(99, 102, 241, 0.09), transparent 50%),
    linear-gradient(185deg, #eef2f7 0%, #f8fafc 42%, #e8edf4 100%);
}

.auth-page__ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.55;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 70%, transparent 100%);
  pointer-events: none;
}

.auth-page__main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(1120px, 100%);
}

.auth-page__shell {
  width: 100%;
}

.auth-page__card {
  background: var(--surface);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 18px 48px -12px rgba(15, 23, 42, 0.14);
  overflow: hidden;
}

.auth-page__card--split {
  display: grid;
  grid-template-columns: minmax(400px, 1.15fr) minmax(360px, 0.85fr);
  min-height: min(640px, calc(100dvh - 96px));
  align-items: stretch;
}

.auth-page__col--form {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e8ecf1;
}

.auth-page__col--story {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 55%, #e8eef5 100%);
}

.auth-page__head {
  padding: 28px 32px 24px;
  border-bottom: 1px solid #f1f5f9;
}

.brand--compact {
  align-items: center;
}

.brand--compact .brand-mark {
  width: 36px;
  height: 36px;
}

.brand--compact strong {
  font-size: 16px;
  letter-spacing: -0.02em;
}

.auth-page__title {
  margin: 18px 0 0 0;
  font-size: clamp(1.45rem, 4vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0f172a;
  line-height: 1.2;
}

.auth-page__lead {
  margin: 8px 0 0 0;
  font-size: 14px;
  line-height: 1.5;
  max-width: 52ch;
}

.auth-route-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.auth-route-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  padding: 14px 14px 16px;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  background: #f8fafc;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.auth-route-card:hover {
  border-color: #93c5fd;
  background: #fff;
}

.auth-route-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.auth-route-card--active {
  border-color: #2563eb;
  background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.auth-route-card__step {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.auth-route-card__title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.auth-route-card__desc {
  font-size: 12px;
  line-height: 1.45;
  color: #475569;
}

.auth-page__route-hint {
  margin: 0 0 18px 0;
  line-height: 1.45;
  max-width: 58ch;
}

.auth-page__form-subhead {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

.auth-page__switch-route {
  margin: 16px 0 0 0;
  line-height: 1.5;
}

.text-link--inline {
  display: inline;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.text-link--inline:hover {
  color: var(--primary-hover);
}

.auth-demo-group-label {
  margin: 0 0 6px 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}

.auth-page__form {
  flex: 1;
  padding: 28px 36px 36px;
}

.auth-page__form .tab-row--quiet {
  margin-bottom: var(--space-4);
}

.auth-page__form .error-box {
  margin-top: 12px;
}

.auth-page__form > .button-block {
  margin-top: 18px;
}

.auth-page__journey {
  padding: 36px 32px 40px;
  height: 100%;
  box-sizing: border-box;
}

.auth-page__journey-head {
  margin-bottom: 14px;
}

.auth-page__journey-kicker {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
}

.auth-page__journey-lede {
  margin: 8px 0 16px 0;
  font-size: 15px;
  line-height: 1.5;
  color: #475569;
  max-width: 42ch;
}

.tab-row--flush {
  margin-bottom: 0;
}

.auth-page__journey-note {
  margin: 14px 0 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #64748b;
}

.auth-page__footer-note {
  text-align: center;
  margin-top: 18px;
}

.auth-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.auth-step-tile {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}

.auth-step-tile__n {
  font-size: 10px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.04em;
}

.auth-step-tile__t {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
}

.auth-step-tile__d {
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
}

.journey-segment--full {
  margin-top: 0;
}

.tab-row--quiet {
  margin-bottom: var(--space-4);
}

.field-stack--auth {
  gap: var(--space-4);
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-group label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.auth-primary-cta {
  margin-top: var(--space-4);
}

.button-block {
  width: 100%;
  justify-content: center;
}

.auth-sso {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.auth-sso-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.auth-sso-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.auth-sso-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid #dadce0;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #3c4043;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.auth-sso-btn:hover {
  background: #f8f9fa;
  border-color: #c4c7c5;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.1);
}

.auth-sso-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.auth-sso-btn:active {
  background: #f1f3f4;
}

.auth-sso-btn__icon {
  flex-shrink: 0;
  display: block;
}

.auth-tertiary {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
}

.auth-tertiary-sep {
  color: #d1d5db;
  user-select: none;
}

.text-link {
  border: 0;
  background: none;
  padding: 4px 6px;
  margin: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 6px;
}

.text-link:hover {
  color: var(--primary-hover);
}

.text-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.auth-demo-details {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed #e5e7eb;
}

.auth-demo-details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  list-style-position: outside;
  padding: 6px 0;
}

.auth-demo-details summary:hover {
  color: var(--text);
}

.auth-demo-details[open] summary {
  color: var(--text);
  margin-bottom: 6px;
}

.auth-demo-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 var(--space-3) 0;
}

.demo-list--compact {
  gap: 8px;
}

.demo-btn--compact {
  min-height: 38px;
  padding: 8px 10px;
  font-size: 12px;
}

.journey-card--soft {
  border: 1px solid #e2e8f0;
  background: linear-gradient(165deg, #f8fafc 0%, #ffffff 45%, #f1f5f9 100%);
  color: var(--text);
  box-shadow: var(--shadow-md);
}

.journey-card--soft .journey-card__title {
  color: #0f172a;
}

.journey-card__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.eyebrow--soft {
  background: #e0e7ff;
  color: #3730a3;
  align-self: flex-start;
}

.journey-card__lede {
  margin-top: var(--space-3);
  font-size: 14px;
  line-height: 1.55;
  color: #475569;
  max-width: 52ch;
}

.journey-card--soft p {
  color: #64748b;
}

.journey-segment {
  display: flex;
  gap: 8px;
  margin-top: var(--space-4);
  padding: 4px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid var(--border);
}

.journey-segment__btn {
  flex: 1;
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  background: transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.journey-segment__btn:hover {
  color: var(--text);
}

.journey-segment__btn.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.journey-segment__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.journey-steps {
  margin: var(--space-3) 0 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
}

.journey-steps li {
  padding-left: 4px;
}

.journey-footnote {
  margin: var(--space-3) 0 0 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}

.inline-row--invite {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
}

.invite-list-wrap {
  min-height: 48px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .button:active {
    transform: none;
  }
}

.error-box {
  margin-top: 12px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #7f1d1d;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.45;
  border-left: 3px solid #dc2626;
}

/* Enterprise empty & loading affordances */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  max-width: 28rem;
  margin: 0 auto;
  gap: var(--space-2);
}
.empty-state--left {
  align-items: flex-start;
  text-align: left;
  margin: 0;
}
.empty-state__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.empty-state__title {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.35;
  margin: 0;
}
.empty-state__desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
  max-width: 46ch;
}
.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  justify-content: center;
}
.empty-state--left .empty-state__actions {
  justify-content: flex-start;
}
.skeleton {
  position: relative;
  overflow: hidden;
  background: #e2e8f0;
  border-radius: var(--radius-sm);
}
.skeleton--line {
  height: 10px;
  width: 100%;
  max-width: 12rem;
}
.skeleton--pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.1s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton--pulse::after {
    animation: none;
  }
}

.demo-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.demo-btn {
  border: 1px dashed #93c5fd;
  border-radius: 10px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 10px 12px;
  min-height: 42px;
  text-align: left;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: background var(--transition), border-color var(--transition);
}

.demo-btn:hover {
  background: #dbeafe;
}

.demo-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-style: solid;
}

.invite-list {
  display: grid;
  gap: 8px;
}

.invite-add-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.invite-add-grid__cta {
  display: flex;
  align-items: flex-end;
  padding-bottom: 2px;
}

.invite-add-grid__cta .button {
  min-width: 4.5rem;
}

.invite-queue-status {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface-alt);
}

.invite-queue-status--active {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}

.split-actions--invite-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.invite-footer-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.invite-row {
  display: grid;
  /* email | function tag | status pill | action button */
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--surface-alt);
  transition: background 200ms ease, border-color 200ms ease;
}

.invite-row--sending {
  border-color: #fde68a;
  background: linear-gradient(180deg, #fffaf0 0%, #fff7e6 100%);
}

.invite-row--sent {
  border-color: #bbf7d0;
  background: linear-gradient(180deg, #f1fbf6 0%, #ebfaf0 100%);
}

.invite-row--failed {
  border-color: #fecaca;
  background: #fef7f7;
}

.invite-row__email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.invite-row__tag {
  flex-shrink: 0;
}

.invite-row__status {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Tiny inline spinner shown next to a row that is mid-send (and in the primary CTA). */
.invite-row__spinner,
.button-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(37, 99, 235, 0.25);
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: inviteSpin 720ms linear infinite;
}
.button-spinner {
  width: 12px;
  height: 12px;
  margin-left: 8px;
  vertical-align: -2px;
  border-color: rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
}
@keyframes inviteSpin {
  to { transform: rotate(360deg); }
}

.invite-queue-status--sending {
  border-color: #fde68a;
  background: linear-gradient(180deg, #fffaf0 0%, #fff7e6 100%);
}

.invite-queue-status--done {
  border-color: #bbf7d0;
  background: linear-gradient(180deg, #f1fbf6 0%, #ebfaf0 100%);
}

/* "Preview the email" disclosure row */
.invite-preview-toggle-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.invite-preview-toggle-row__hint code {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
}

/* Rendered email preview that mirrors the InvitationEmailPreview schema. */
.invite-email-preview {
  margin-top: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}
.invite-email-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #eef2f7;
  font-size: 13px;
}
.invite-email-preview__envelope {
  padding: 12px 14px 4px;
  display: grid;
  gap: 6px;
  border-bottom: 1px dashed #e5e7eb;
}
.invite-email-preview__row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 10px;
  font-size: 13px;
  align-items: baseline;
}
.invite-email-preview__body {
  padding: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: #0f172a;
}
.invite-email-preview__body p {
  margin: 0 0 10px;
}
.invite-email-preview__cta {
  display: inline-block;
  background: #2563eb;
  color: #ffffff !important;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}

/* Compact secondary button used in invite rows. */
.button.button-compact {
  padding: 4px 10px;
  font-size: 12px;
  min-height: 26px;
}

.invite-empty {
  padding: 10px 4px;
}

.upload-stack {
  display: grid;
  gap: 10px;
}

.upload-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
}

.upload-row p {
  margin-top: 4px;
  color: var(--text-muted);
}

.upload-actions {
  min-width: 0;
  flex: 1;
  max-width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.upload-inline-meta {
  min-width: 0;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-input {
  width: 200px;
  max-width: 42vw;
  flex-shrink: 1;
  min-width: 7rem;
}

.mapping-progress-strip {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-alt);
  padding: 10px 12px;
}

.mapping-progress-strip__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.mapping-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: #fff;
  color: #334155;
}

.mapping-chip-name::after {
  content: "·";
  margin-left: 6px;
  color: #94a3b8;
  font-weight: 500;
}

.mapping-chip-sub {
  font-weight: 600;
  color: #64748b;
  text-transform: none;
}

.mapping-chip--done {
  border-color: #86efac;
  background: #f0fdf4;
  color: #166534;
}

.mapping-chip--done .mapping-chip-sub {
  color: #15803d;
}

.mapping-chip--warn {
  border-color: #fcd34d;
  background: #fffbeb;
}

.mapping-chip--warn .mapping-chip-sub {
  color: #b45309;
}

.mapping-chip--ready .mapping-chip-sub {
  color: #1d4ed8;
}

.mapping-chip--active {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
}

.mapping-chip--muted {
  opacity: 0.85;
  font-weight: 500;
}

.mapping-chip--danger {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.mapping-compact-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.mapping-compact-row:hover {
  border-color: #bfdbfe;
  background: #f8fafc;
}

.mapping-compact-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mapping-compact-row__title {
  font-weight: 700;
  font-size: 15px;
  color: #0f172a;
}

.mapping-compact-row__file {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}

.mapping-compact-row__open {
  flex-shrink: 0;
  color: #2563eb;
  font-weight: 600;
}

.mapping-dataset-card--compact-missing {
  padding: 10px 12px;
}

.mapping-dataset-card--expanded {
  padding: 14px;
}

.mapping-preview-details {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fafafa;
}

.mapping-preview-details__summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  list-style: none;
}

.mapping-preview-details__summary::-webkit-details-marker {
  display: none;
}

.mapping-preview-details[open] {
  background: #fff;
}

.mapping-preview-details[open] .mapping-preview-details__summary {
  margin-bottom: 8px;
}

.mapping-flow-summary {
  line-height: 1.45;
}

.mapping-cta-hint {
  flex: 1;
  min-width: 0;
}

.mapping-grid {
  display: grid;
  gap: 12px;
}

.mapping-dataset-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.mapping-dataset-card.confirmed {
  border-color: #86efac;
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
  box-shadow: inset 0 0 0 1px #bbf7d0;
}

.mapping-dataset-card.confirmed h3 {
  color: #166534;
}

.mapping-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.preview-table-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
}

.preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.preview-table th,
.preview-table td {
  border-bottom: 1px solid var(--border);
  padding: 6px 8px;
  text-align: left;
  white-space: nowrap;
}

.preview-table th {
  background: #f8fafc;
  color: #334155;
  font-weight: 700;
}

.mapping-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.mapping-table th,
.mapping-table td {
  border-bottom: 1px solid var(--border);
  padding: 8px 6px;
  text-align: left;
}

.mapping-table th {
  color: #475569;
  font-weight: 700;
}

.mapping-select {
  min-width: 220px;
}

.mapping-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

.mapping-required-hint {
  font-size: 12px;
  font-weight: 600;
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 6px 8px;
}

.mapping-required-hint.success {
  color: #166534;
  background: #f0fdf4;
  border-color: #86efac;
}

.mapping-scroll {
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.mapping-advanced {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
  padding: 8px 10px;
}

.mapping-advanced summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.mapping-advanced .mapping-scroll {
  margin-top: 8px;
  background: #fff;
}

.button-confirmed {
  border-color: #86efac;
  background: #dcfce7;
  color: #166534;
  cursor: default;
}

.button-mapping-primary {
  border-color: #1d4ed8;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  min-width: 230px;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
}

.button-mapping-primary:hover {
  background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%);
}

.button-mapping-primary:disabled {
  background: linear-gradient(180deg, #93c5fd 0%, #60a5fa 100%);
  border-color: #60a5fa;
  color: #eff6ff;
  box-shadow: none;
  cursor: not-allowed;
}

.mapping-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
}

.mapping-cta-row-warning .tiny {
  color: #b45309;
  font-weight: 600;
}

.mapping-advanced-toggle {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-style: dashed;
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 700;
}

.mapping-advanced-meta {
  margin-top: 8px;
  color: #475569;
}

.mapping-advanced-label {
  font-weight: 700;
}

.mapping-advanced-cta {
  font-size: 12px;
  color: #1e40af;
  font-weight: 600;
}

/* Module 1 — queue-first credit workspace */
.m1-subnav {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  align-items: center;
  /* One stable row: avoid wrap when a pill is added to “Billing queue” or the viewport is narrow. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
  min-height: 48px;
  box-sizing: border-box;
  scrollbar-gutter: stable;
}

.m1-subnav__btn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.m1-subnav__btn:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.m1-subnav__btn.is-active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}

/* Spacer pushes the Admin / Governance button to the right of the subnav
   so it visually sits apart from the main operator tabs (items #2 + #10). */
.m1-subnav__spacer {
  flex: 1 1 auto;
  min-width: 8px;
}
.m1-subnav__btn--admin {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.m1-subnav__btn--admin:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}
.m1-subnav__btn--admin.is-active {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}
.m1-subnav__icon {
  font-size: 14px;
  opacity: 0.85;
}
.m1-subnav__admin-tag {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #e2e8f0;
  color: #475569;
  border: 1px solid #cbd5e1;
}

/* Admin / governance page banner */
.m1-admin-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
}
.m1-admin-banner__icon {
  font-size: 22px;
  opacity: 0.7;
}
.m1-admin-banner__body strong {
  display: block;
  margin-bottom: 2px;
  color: #0f172a;
}
.m1-admin-banner__body p {
  margin: 0;
}

.m1-metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.m1-metric-strip__item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #f8fafc;
}

.m1-metric-strip__item small {
  display: block;
  color: #64748b;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.m1-metric-strip__item strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
  color: #0f172a;
}

/* ---------- Portfolio recommendations — compact density + parent picker ---------- */
.m1-portfolio-recs {
  border: 1px solid #e8ecf1;
  border-radius: 10px;
  padding: 10px 12px 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.m1-portfolio-recs > .section-head {
  margin-bottom: 2px;
  gap: 6px 12px;
}
.m1-portfolio-recs > .section-head h3 {
  font-size: 0.8rem;
  color: #0f172a;
  margin: 0;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
}
.m1-portfolio-recs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 1100px) {
  .m1-portfolio-recs__list {
    grid-template-columns: 1fr;
  }
}
.m1-portfolio-rec {
  display: flex;
  gap: 8px;
  padding: 10px 10px 10px 8px;
  border-radius: 8px;
  background: #fafbfc;
  border: 1px solid #e8ecf1;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
  align-items: flex-start;
}
.m1-portfolio-rec--with-pick {
  grid-column: 1 / -1;
}
.m1-portfolio-rec strong {
  display: block;
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 2px;
  line-height: 1.3;
}
.m1-portfolio-rec p,
.m1-portfolio-rec__desc {
  margin: 0;
  color: #64748b;
  line-height: 1.4;
  font-size: 12px;
}
.m1-portfolio-rec__icon {
  flex: 0 0 28px;
  height: 28px;
  width: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.m1-portfolio-rec__body {
  flex: 1 1 auto;
  min-width: 0;
}
.m1-portfolio-rec__actions {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
}
.m1-portfolio-rec__actions .button {
  padding: 4px 8px;
  font-size: 10.5px;
  font-weight: 600;
}
.m1-pf-pick {
  margin-top: 8px;
  max-width: 420px;
}
.m1-pf-pick__lab {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 4px;
}
.m1-pf-pick__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.m1-pf-pick__sel {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 280px;
  padding: 6px 8px;
  font-size: 12px;
  min-height: 32px;
}
.m1-pf-pick__row .button {
  flex: 0 0 auto;
  white-space: nowrap;
}
/* Severity = icon + soft fill only (same 1px border on all sides) */
.m1-portfolio-rec--critical {
  background: #fff;
  border-color: #f1d5d9;
}
.m1-portfolio-rec--critical .m1-portfolio-rec__icon {
  background: #fef2f2;
  color: #9f1239;
  border-color: #fecdd3;
}
.m1-portfolio-rec--warning {
  background: #fff;
  border-color: #ede9e0;
}
.m1-portfolio-rec--warning .m1-portfolio-rec__icon {
  background: #fffbeb;
  color: #92400e;
  border-color: #fde68a;
}
.m1-portfolio-rec--watch {
  background: #fff;
  border-color: #e2e8f0;
}
.m1-portfolio-rec--watch .m1-portfolio-rec__icon {
  background: #f0f9ff;
  color: #0c4a6e;
  border-color: #bae6fd;
}
.m1-portfolio-rec--healthy {
  background: #f8fdfb;
  border-color: #d1fae5;
}
.m1-portfolio-rec--healthy .m1-portfolio-rec__icon {
  background: #ecfdf5;
  color: #166534;
  border-color: #a7f3d0;
}

.m1-filters__row {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr;
  gap: 8px 12px;
  align-items: end;
}

.m1-filters__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.m1-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
}

.m1-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.m1-table-wrap--tight {
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.m1-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.m1-table th,
.m1-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.m1-table th {
  background: #f8fafc;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: 0 1px 0 var(--border);
}

.m1-table tbody tr {
  transition: background var(--transition);
}
.m1-table tbody tr:hover {
  background: #f8fafc;
}
.m1-table tbody tr:last-child td {
  border-bottom: none;
}

.m1-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.m1-sig .badge {
  margin: 2px 4px 2px 0;
}

.m1-review-btn {
  padding: 6px 12px;
  font-size: 13px;
  white-space: nowrap;
}

/* Customer workspace — calmer header + density */
.m1-ws-hero {
  background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
  border: 1px solid #e8ecf1;
  border-radius: 12px;
  padding: 16px 18px 18px;
  margin: 0 0 4px;
}

.m1-ws-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px 24px;
  margin: 0;
}

.m1-ws-head__main {
  min-width: 0;
  flex: 1;
}

.m1-ws-head__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 2px;
}

.m1-ws-health-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.m1-back {
  display: inline-flex;
  align-items: center;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  cursor: pointer;
  text-decoration: none;
  border-radius: 6px;
}
.m1-back:hover {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.m1-back:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.m1-ws-title {
  margin: 0 0 6px;
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.25;
}

.m1-ws-meta {
  margin: 0 0 4px;
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
}

.m1-ws-id {
  font-variant-numeric: tabular-nums;
  color: #475569;
}

.m1-ws-dot {
  margin: 0 0.35em;
  color: #cbd5e1;
}

.m1-ws-expo {
  margin: 0;
  font-size: 14px;
  color: #0f172a;
}
.m1-ws-expo__val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.m1-ws-expo__lab {
  font-weight: 500;
  color: #64748b;
  font-size: 13px;
  margin-left: 4px;
}

.m1-ws-parent {
  color: #0f172a;
  font-weight: 600;
}

.m1-head-chips--hero {
  margin-top: 10px;
}

.m1-head-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.m1-head-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}
.m1-head-chip--watch {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}
.m1-head-chip--escalated {
  background: #ffedd5;
  color: #9a3412;
  border-color: #fed7aa;
}
.m1-head-chip--exc {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}
.m1-head-chip--reassigned {
  background: #e0f2fe;
  color: #075985;
  border-color: #bae6fd;
}
.m1-head-chip--hold {
  background: #f1f5f9;
  color: #334155;
  border-color: #cbd5e1;
}

/* Hold-for-review banner on Decision tab */
.m1-hold-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
}

/* Decision action bar refinements (item #7) */
.m1-action-bar--decision {
  align-items: stretch;
}
.m1-action-bar--decision .button {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  padding: 8px 14px;
  min-height: 48px;
  line-height: 1.2;
}
.m1-btn-sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.82;
  letter-spacing: 0.01em;
}
.m1-action-bar--decision .button-ghost.is-active {
  background: #e2e8f0;
  border-color: #94a3b8;
  color: #1e293b;
}
/* Icon inside button--with-icon overrides the column layout from .m1-action-bar--decision
   so the icon sits inline with the label, not stacked. */
.m1-action-bar--decision .button--with-icon {
  flex-direction: row;
  align-items: center;
  gap: 7px;
}
.m1-action-bar--decision .button--with-icon i { font-size: 15px; line-height: 1; }
/* The "?" help affordance next to the Park / Approval / Note buttons —
   single-time onboarding for operators who don't yet know the distinction. */
.m1-action-help {
  appearance: none;
  background: transparent;
  border: 1px solid var(--d3-line);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  color: var(--d3-muted);
  transition: background-color 160ms ease, color 160ms ease;
  align-self: center;
}
.m1-action-help i { font-size: 14px; line-height: 1; }
.m1-action-help:hover, .m1-action-help:focus-visible {
  background: var(--d3-surface-2);
  color: var(--d3-ink);
  outline: none;
}
/* Watch button — keep button--with-icon but tweak active state to use a soft
   blue wash that matches the eye-fill icon visual. */
.m1-decision-strip__actions .button-ghost.is-active {
  background: rgba(59, 130, 246, 0.10);
  color: #1d4ed8;
  border-color: rgba(59, 130, 246, 0.25);
}

/* ---------- Action gating (item #5) ---------- */
.m1-gating-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.m1-gating-pill--allowed {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}
.m1-gating-pill--exception {
  background: #fef3c7;
  color: #854d0e;
  border-color: #fde68a;
}
.m1-gating-pill--blocked {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}
.m1-gating-pill--inline {
  padding: 2px 7px;
  font-size: 10px;
  text-transform: none;
}

.m1-gating-panel {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  background: #f9fafb;
}
.m1-gating-row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto;
  grid-template-areas: "label pill" "body body";
  column-gap: 14px;
  row-gap: 4px;
  padding: 10px 0;
  border-bottom: 1px dashed #e5e7eb;
}
.m1-gating-row:last-child {
  border-bottom: none;
}
.m1-gating-row__label {
  grid-area: label;
  font-size: 13px;
  color: #0f172a;
}
.m1-gating-row .m1-gating-pill {
  grid-area: pill;
  justify-self: end;
}
.m1-gating-row__body {
  grid-area: body;
}
.m1-gating-reason {
  margin: 0;
  color: #374151;
}
.m1-gating-consequence {
  margin-top: 2px;
}

.m1-gating-live {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}
.m1-gating-live__body {
  flex: 1;
}
.m1-gating-live__body .tiny {
  margin: 0;
}

.m1-entity-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.m1-entity-action {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.m1-entity-action .button {
  margin: 0;
}

/* ---------- Context tab visual upgrade (item #4) ---------- */
.m1-context-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: start;
  padding: 16px 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
}
.m1-context-hero__hierarchy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.m1-hier-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  font-size: 13px;
  line-height: 1.25;
  max-width: 100%;
}
.m1-hier-chip strong {
  color: #0f172a;
  font-weight: 600;
}
.m1-hier-chip__kind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
  padding: 2px 6px;
  border-radius: 6px;
  background: #f1f5f9;
}
.m1-hier-chip--parent {
  border-left: 4px solid #6366f1;
}
.m1-hier-chip--parent .m1-hier-chip__kind {
  background: #eef2ff;
  color: #4338ca;
}
.m1-hier-chip--child {
  border-left: 4px solid #0ea5e9;
}
.m1-hier-chip--child .m1-hier-chip__kind {
  background: #e0f2fe;
  color: #0369a1;
}
.m1-hier-arrow {
  color: #94a3b8;
  font-size: 20px;
  font-weight: 600;
}
.m1-hier-meta {
  flex-basis: 100%;
  padding-left: 4px;
}
.m1-hier-was {
  text-decoration: line-through;
  color: #64748b;
}

.m1-context-hero__badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  min-width: 240px;
}
.m1-match-badge {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  font-size: 12px;
}
.m1-match-badge__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}
.m1-match-badge strong {
  font-size: 15px;
  line-height: 1.3;
  margin-top: 2px;
  color: #0f172a;
}
.m1-match-badge__sub {
  font-size: 11px;
  color: #475569;
  margin-top: 2px;
}
.m1-match-badge--high {
  border-left: 4px solid #16a34a;
  background: #f0fdf4;
}
.m1-match-badge--high strong { color: #166534; }
.m1-match-badge--medium {
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
}
.m1-match-badge--medium strong { color: #92400e; }
.m1-match-badge--low {
  border-left: 4px solid #ef4444;
  background: #fef2f2;
}
.m1-match-badge--low strong { color: #991b1b; }
.m1-match-badge--reassigned {
  border-left: 4px solid #0ea5e9;
  background: #f0f9ff;
}
.m1-match-badge--reassigned strong { color: #0c4a6e; }
.m1-match-badge--dup {
  border-left: 4px solid #f97316;
  background: #fff7ed;
}
.m1-match-badge--dup strong { color: #9a3412; }
.m1-match-badge--neutral {
  border-left: 4px solid #94a3b8;
}

/* Duplicate / buying-center note */
.m1-ctx-note {
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #7c2d12;
  font-size: 13px;
}
.m1-ctx-note strong {
  color: #7c2d12;
}

/* Structural change timeline */
.m1-structural-timeline {
  padding: 12px 16px;
  border-radius: 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}
.m1-timeline {
  list-style: none;
  margin: 12px 0 0 0;
  padding: 0;
  position: relative;
}
.m1-timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 5px;
  width: 2px;
  background: #e2e8f0;
}
.m1-timeline__item {
  position: relative;
  padding-left: 22px;
  padding-bottom: 10px;
}
.m1-timeline__item:last-child {
  padding-bottom: 0;
}
.m1-timeline__dot {
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #94a3b8;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #cbd5e1;
}
.m1-timeline__item--reassign .m1-timeline__dot { background: #0ea5e9; box-shadow: 0 0 0 1px #38bdf8; }
.m1-timeline__item--confirm .m1-timeline__dot { background: #16a34a; box-shadow: 0 0 0 1px #22c55e; }
.m1-timeline__item--exception .m1-timeline__dot { background: #f59e0b; box-shadow: 0 0 0 1px #fbbf24; }
.m1-timeline__item--reallocate .m1-timeline__dot { background: #6366f1; box-shadow: 0 0 0 1px #818cf8; }
.m1-timeline__item--limit .m1-timeline__dot { background: #1d4ed8; box-shadow: 0 0 0 1px #3b82f6; }
.m1-timeline__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}
.m1-timeline__body p {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.m1-escalation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
}
.m1-escalation-banner .tiny {
  color: #9a3412;
}

/* ---------- Decision action strip (item #3) — enterprise tone, not "alert box" red.
   No colored left rail — severity reads from the colored statusval text in the
   Status column. Card boundary = shadow + hairline only. */
.m1-decision-strip {
  margin-top: 12px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.m1-decision-strip__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1.5fr);
  gap: 16px 20px;
  padding: 14px 16px 12px 18px;
  align-items: start;
}
@media (max-width: 1024px) {
  .m1-decision-strip__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.m1-decision-strip__label {
  display: block;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 4px;
}
.m1-decision-strip__statusval {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #0f172a;
}
.m1-decision-strip__recline {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  color: #0f172a;
}
.m1-decision-strip__whyline {
  display: block;
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
}
.m1-decision-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 16px 12px 18px;
  border-top: 1px solid #f1f5f9;
  background: #fafbfc;
}
.m1-decision-strip__actions .button {
  font-size: 13px;
  padding: 8px 14px;
}

/* Severity: text-color only on the statusval. No background tint, no left rail.
   Card boundary stays neutral; accent lives in the data (the colored status word). */
.m1-decision-strip--healthy .m1-decision-strip__statusval { color: #047857; }
.m1-decision-strip--watch .m1-decision-strip__statusval { color: #9a3412; }
.m1-decision-strip--critical .m1-decision-strip__statusval { color: #9f1239; }
.m1-decision-strip--breach .m1-decision-strip__statusval { color: #9f1239; }

/* Risk & behavior tab — signal cards */
.m1-signals-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 900px) {
  .m1-signals-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.m1-signal-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 100px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #e8ecf1;
  background: #fafbfc;
  box-shadow: none;
}
.m1-signal-card--tall {
  min-height: 100px;
}
.m1-signal-card__k {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
  line-height: 1.3;
}
.m1-signal-card__v {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.m1-signal-card__v--text {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}
.m1-signal-card__h {
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
  margin-top: auto;
  padding-top: 4px;
}
.m1-signal-card__h--bad {
  color: #b91c1c;
  font-weight: 600;
}
.m1-signal-card__h--ok {
  color: #64748b;
}
.m1-signals-footnote {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #64748b;
  max-width: 72ch;
}
.m1-signals-footnote--secondary {
  margin-top: 6px;
  font-size: 12px;
  color: #94a3b8;
}
.m1-signals-footnote strong {
  color: #475569;
  font-weight: 600;
}

.m1-reassigned-flag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #075985;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  border-radius: 999px;
  vertical-align: middle;
}

.m1-applied-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.m1-ws-tabs__btn {
  border: none;
  background: transparent;
  padding: 10px 14px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  border-radius: 0;
  margin-bottom: 0;
}

.m1-ws-tabs__btn:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.03);
}

.m1-ws-tabs__btn.is-active {
  color: #0f172a;
  background: transparent;
  box-shadow: inset 0 -2px 0 #0f172a;
}

/* Credit position — match signal card density (KPI row may follow tab lead) */
.m1-ws-panels--credit .m1-credit-kpi,
.m1-workspace .m1-credit-kpi {
  gap: 12px;
}
.m1-ws-panels--credit .m1-credit-kpi .metric-card {
  border: 1px solid #e8ecf1;
  background: #fafbfc;
  box-shadow: none;
  border-radius: 10px;
  padding: 14px 16px;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.m1-ws-panels--credit .m1-credit-kpi .metric-card > small:first-of-type {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
}
.m1-ws-panels--credit .m1-credit-kpi .metric-card > strong {
  font-size: 1.25rem;
  margin-top: 6px;
}

.m1-ws-panels {
  min-height: 120px;
}

/* ---------- Customer workspace: unified shell (all tabs) ---------- */
.m1-ws-shell {
  margin-top: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.m1-ws-body {
  background: #ebeef2;
  padding: 16px;
  min-height: 280px;
}

.m1-workspace .m1-ws-panels {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.m1-workspace .m1-ws-panels > * {
  margin: 0;
  padding: 20px 22px;
  border-bottom: 1px solid #f1f4f8;
}
.m1-workspace .m1-ws-panels > *:last-child {
  border-bottom: 0;
}

.m1-ws-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  margin: 0;
  padding: 6px 8px 0 12px;
  background: #fafbfc;
  border-bottom: 1px solid #e8ecf1;
}

.m1-ws-tab-lead {
  margin: 0;
  max-width: 80ch;
  font-size: 13px;
  line-height: 1.5;
  color: #64748b;
  padding: 0 0 2px;
}

.m1-ws-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.m1-ws-section__head--row {
  align-items: center;
  margin-bottom: 14px;
}
.m1-ws-section--tight {
  margin: 0;
  padding: 0;
  border: 0;
}
.m1-ws-section--tight .m1-ws-section__head {
  margin-bottom: 10px;
}
.m1-ws-section__title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0f172a;
}
.m1-ws-section__hint {
  font-size: 11.5px;
  font-weight: 500;
  color: #94a3b8;
}
.m1-ws-section__hint--block {
  text-align: right;
  line-height: 1.4;
  max-width: 36ch;
}
.m1-ws-section--flush {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  margin: 0;
}
.m1-ws-body .m1-structural-timeline,
.m1-ws-body .m1-group-panel {
  border: 0;
  background: #f8fafc;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0;
  border: 1px solid #e8ecf1;
}

.m1-ws-kv {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #e8ecf1;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.m1-ws-kv__row {
  display: grid;
  grid-template-columns: minmax(120px, 0.4fr) 1fr;
  gap: 12px 20px;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f4f8;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.45;
}
.m1-ws-kv__row:last-child {
  border-bottom: 0;
}
.m1-ws-kv__k {
  color: #64748b;
  font-weight: 500;
}
.m1-ws-kv__v {
  color: #0f172a;
  font-weight: 600;
}
.m1-ws-kv--compact {
  font-size: 12.5px;
}
.m1-ws-kv--compact .m1-ws-kv__v {
  font-weight: 600;
}

.m1-context-hero--inset {
  margin: 0;
  border-radius: 10px;
}

.m1-credit-split {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 1100px) {
  .m1-credit-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: start;
    gap: 20px;
  }
  .m1-credit-trends {
    min-width: 0;
  }
}
.m1-gating-panel {
  min-width: 0;
  border: 1px solid #e8ecf1;
  background: #fafbfc;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0;
}
.m1-gating-panel .m1-gating-row {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #f1f4f8;
  padding: 8px 10px;
  margin-top: 8px;
}
.m1-gating-panel .m1-gating-row:first-of-type {
  margin-top: 0;
}
.m1-credit-trends {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.m1-credit-trends .m1-spark-grid {
  gap: 10px;
}
.m1-credit-trends .m1-ws-kv--compact {
  background: #fafbfc;
}

.m1-decision-top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 1000px) {
  .m1-decision-top {
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    gap: 0 24px;
    align-items: start;
  }
  .m1-decision-top .m1-rec-panel {
    padding-right: 4px;
    border-right: 1px solid #f1f4f8;
    min-width: 0;
  }
  .m1-decision-top .m1-limit-panel {
    padding-left: 4px;
    min-width: 0;
  }
}
.m1-ws-panels--decision .m1-rec-panel,
.m1-ws-panels--decision .m1-limit-panel {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.m1-risk-bars-wrap {
  margin: 14px 0;
  padding: 12px 14px;
  background: #fafbfc;
  border: 1px solid #e8ecf1;
  border-radius: 10px;
}
.m1-ws-panels--decision .m1-rec-panel .m1-ws-section__head {
  margin-top: 0;
}
.m1-ws-panels--decision .module1-rationale {
  background: #fff;
  border-color: #e8ecf1;
}
.m1-ws-panels--decision .m1-illus {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 6px;
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
  vertical-align: 0.12em;
}
.m1-decision-ctrl {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid #f1f4f8;
}
.m1-decision-ctrl .m1-gating-live {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 20px;
  background: #f8fafc;
  border: 1px solid #e8ecf1;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0;
}
.m1-decision-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  margin-top: 0;
  padding: 0;
  border-top: 1px solid #f1f4f8;
}
.m1-decision-col {
  min-width: 0;
  padding: 16px 0 0;
  border: 0;
  border-right: 1px solid #f1f4f8;
  padding-right: 18px;
}
.m1-decision-col:last-child {
  border-right: 0;
  padding-right: 0;
  padding-left: 18px;
}
@media (max-width: 900px) {
  .m1-decision-split {
    grid-template-columns: 1fr;
  }
  .m1-decision-col {
    border-right: 0;
    border-bottom: 1px solid #f1f4f8;
    padding: 0 0 16px;
  }
  .m1-decision-col:last-child {
    border-bottom: 0;
    padding: 16px 0 0;
  }
}
.m1-decision-activity {
  max-height: 220px;
  overflow: auto;
  font-size: 12.5px;
}
.m1-ws-body .m1-m2-xpanel {
  background: #fff;
  box-shadow: none;
  border: 1px dashed #c7d2fe;
}
/* Collapsible variant — operator opens only when interesting; auto-opens
   when arriving from M2 or when there are disputes / holds / overdue. */
.m1-m2-xpanel--collapsible { padding: 0; }
.m1-m2-xpanel__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  transition: background-color 160ms ease;
}
.m1-m2-xpanel__summary::-webkit-details-marker { display: none; }
.m1-m2-xpanel__summary:hover { background: var(--d3-surface-2); }
.m1-m2-xpanel__summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--d3-accent) 25%, transparent);
}
.m1-m2-xpanel__summary-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.m1-m2-xpanel__summary-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--d3-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.m1-m2-xpanel__summary-title i {
  font-size: 16px;
  color: var(--d3-accent);
}
.m1-m2-xpanel__summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.m1-m2-xpanel__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--d3-surface-2);
  color: var(--d3-ink-2);
  border: 1px solid var(--d3-line);
  font-variant-numeric: tabular-nums;
}
.m1-m2-xpanel__chip strong { color: var(--d3-ink); font-weight: 700; }
.m1-m2-xpanel__chip i { font-size: 12px; }
.m1-m2-xpanel__chip--warn { color: #92400e; border-color: #fde68a; background: #fef3c7; }
.m1-m2-xpanel__chip--warn strong { color: #78350f; }
.m1-m2-xpanel__chip--bad { color: #991b1b; border-color: #fecaca; background: #fee2e2; }
.m1-m2-xpanel__chip--bad strong { color: #7f1d1d; }
.m1-m2-xpanel__chip--info { color: #1e40af; border-color: #c7d2fe; background: #eef2ff; }
.m1-m2-xpanel__chip--info strong { color: #1e3a8a; }
.m1-m2-xpanel__chip--accent { color: #3730a3; border-color: #c7d2fe; background: #eef2ff; }
.m1-m2-xpanel__caret {
  font-size: 18px;
  color: var(--d3-muted);
  flex-shrink: 0;
  transition: transform 200ms ease;
}
details[open] > .m1-m2-xpanel__summary .m1-m2-xpanel__caret {
  transform: rotate(180deg);
}
.m1-m2-xpanel__body {
  padding: 4px 18px 18px;
  border-top: 1px solid var(--d3-line);
}
.section-head--inline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
}
.section-head--inline p { margin: 0; flex: 1; }

.m1-rec-panel .section-head {
  margin-bottom: 8px;
}

.m1-rec-dir {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #1e293b;
}

.m1-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Health badge color variants */
.m1-health {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  line-height: 1.6;
}
.m1-health--healthy {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
.m1-health--watch {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}
.m1-health--warning {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}
.m1-health--critical {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.m1-health--pill {
  padding: 4px 12px;
  font-size: 13px;
}

/* Portfolio risk view */
.m1-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.m1-portfolio-col {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}
.m1-portfolio-col .section-head h3 {
  font-size: 14px;
  margin: 0;
}
.m1-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.m1-bar-row__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 13px;
}
.m1-bar-track {
  height: 8px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.m1-bar-track > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #60a5fa, #2563eb);
  border-radius: 999px;
}
.m1-bar-row.is-flagged .m1-bar-track > span {
  background: linear-gradient(90deg, #fb923c, #dc2626);
}
.m1-bar-row.is-flagged .m1-bar-row__head strong {
  color: #b91c1c;
}

/* Exception modal */
.m1-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 1000;
  backdrop-filter: blur(2px);
}
.m1-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.m1-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 24px 12px;
  border-bottom: 1px solid #e5e7eb;
}
.m1-modal__head h2 {
  margin: 4px 0 0;
  font-size: 18px;
}
.m1-modal__body {
  padding: 16px 24px;
  overflow-y: auto;
}
.m1-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid #e5e7eb;
  background: #f8fafc;
}
.m1-exc-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.m1-exc-cat {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.m1-exc-cat:hover {
  background: #f1f5f9;
}
.m1-exc-cat.is-active {
  background: #1d4ed8;
  color: #ffffff;
  border-color: #1d4ed8;
}
.m1-exc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
}
.m1-exc-route {
  white-space: nowrap;
  padding-bottom: 10px;
}
/* Module 1 — sub-nav count pill */
.m1-subnav__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 700;
}
.m1-subnav__btn.is-active .m1-subnav__pill {
  background: #fed7aa;
  color: #9a3412;
}
/* Bad variant — used for "incoming work" counts (e.g., Corrections from Disputes) */
.m1-subnav__pill--bad {
  background: #fee2e2;
  color: #b91c1c;
}
.m1-subnav__btn.is-active .m1-subnav__pill--bad {
  background: #fecaca;
  color: #991b1b;
}

/* Module 1 — Exceptions subview */
.m1-exc-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.m1-exc-pill {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.m1-exc-pill:hover {
  background: #f1f5f9;
}
.m1-exc-pill.is-active {
  background: #1d4ed8;
  color: #ffffff;
  border-color: #1d4ed8;
}
.m1-exc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.m1-exc-actions .button {
  padding: 4px 10px;
  font-size: 12px;
}
.m1-aging {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.m1-aging--fresh {
  background: #ecfdf5;
  color: #166534;
  border-color: #bbf7d0;
}
.m1-aging--due-soon {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}
.m1-aging--overdue {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}
.m1-waiting {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}
.m1-waiting--risk {
  background: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}
.m1-waiting--analyst {
  background: #ede9fe;
  color: #5b21b6;
  border-color: #ddd6fe;
}
.m1-waiting--done {
  background: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
}
.m1-empty {
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.m1-empty h3 {
  margin: 0 0 6px;
  font-size: 15px;
}

/* Module 1 — Decision tab: editable limit proposal */
.m1-limit-panel {
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 12px;
  padding: 14px;
}
.m1-limit-row {
  display: grid;
  grid-template-columns: auto minmax(140px, 220px) 1fr;
  align-items: center;
  gap: 12px;
}
.m1-limit-input {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.m1-limit-delta {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}
.m1-limit-delta.is-positive {
  color: #047857;
}
.m1-limit-delta.is-negative {
  color: #b91c1c;
}
.m1-limit-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.m1-limit-preset {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.m1-limit-preset:hover {
  background: #f1f5f9;
}
.m1-limit-preset--ghost {
  color: #64748b;
  background: transparent;
  border-style: dashed;
}

.m1-limit-input.is-invalid {
  border-color: #dc2626;
  background: #fef2f2;
}
.m1-limit-alert {
  border: 1px solid #fecaca;
  background: #fff1f2;
  border-radius: 10px;
  padding: 12px 14px;
}
.m1-limit-alert--danger {
  border-color: #fecaca;
  background: #fef2f2;
}
.m1-limit-alert__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.m1-limit-alert__head strong {
  color: #b91c1c;
  font-size: 13px;
}
.m1-limit-alert p {
  margin: 0;
  color: #7f1d1d;
}
.m1-limit-alert p.muted {
  color: #475569;
}
.m1-limit-headroom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: #475569;
  margin: 0;
}
.m1-limit-headroom .badge {
  flex: 0 0 auto;
}

.button[disabled],
.button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Unified Illustrative / Heuristic pill — matches .dash3-kpi__heuristic on the dashboard
   so the same disclosure reads the same way across modules. Quiet, monochrome, never accent. */
.m1-illus {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  margin-left: 6px;
  background: var(--d3-surface-2);
  color: var(--d3-muted);
  border: 1px solid var(--d3-line);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  cursor: help;
  vertical-align: middle;
  white-space: nowrap;
}
.m1-illus i {
  font-size: 11px;
  line-height: 1;
  margin-right: 4px;
}
/* Inline variant — sits next to a label rather than after a value. */
.m1-illus--inline {
  margin-left: 6px;
  font-size: 9px;
  padding: 1px 6px;
}
.m1-illus--inline i { font-size: 10px; }

.m1-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  background: #e5e7eb;
  color: #4b5563;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.m1-hint:hover,
.m1-hint:focus-visible {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.m1-hint:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.m1-th .m1-hint {
  margin-left: 2px;
}

.m1-th--right .m1-hint {
  margin-left: 4px;
}

.m1-row-actions {
  display: inline-flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.m1-mini-btn {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.4;
}
.m1-mini-btn:hover:not([disabled]) {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.m1-mini-btn[disabled],
.m1-mini-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}
.m1-mini-btn--primary {
  background: #1d4ed8;
  color: #ffffff;
  border-color: #1d4ed8;
}
.m1-mini-btn--primary:hover:not([disabled]) {
  background: #1e40af;
  border-color: #1e40af;
}

/* Module 1 — Decision tab: notes + activity lists */
.m1-notes,
.m1-history {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.m1-notes li,
.m1-history li {
  border-left: 3px solid #cbd5e1;
  background: #f8fafc;
  padding: 8px 10px;
  border-radius: 0 8px 8px 0;
}
.m1-notes__head,
.m1-history__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

/* Module 1 — Entity / parent mapping review */
.m1-entity-review {
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 12px;
  padding: 14px;
}
.m1-entity-review .section-head h3 {
  margin: 0;
  font-size: 14px;
}
.m1-entity-reassign {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
}

/* Module 1 — Portfolio: stress scenarios + groups (dense B2B tools) */
.m1-portfolio-tools {
  margin-top: 20px;
  padding-top: 4px;
  border-top: 1px solid #f1f4f8;
}
.m1-portfolio-stress {
  margin-bottom: 8px;
}
.m1-ptools-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-bottom: 8px;
}
.m1-ptools-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
}
.m1-ptools-meta {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

.m1-scenario-panel {
  border: 1px solid #e8ecf1;
  border-radius: 10px;
  background: #fff;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.m1-scenario-seg {
  display: inline-flex;
  margin: 10px 10px 0;
  padding: 3px;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  gap: 2px;
}
.m1-scenario-seg__btn {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
}
.m1-scenario-seg__btn:hover {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.7);
}
.m1-scenario-seg__btn.is-active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.m1-scenario-placeholder {
  margin: 8px 12px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: #94a3b8;
  max-width: 70ch;
}

.m1-scenario-output {
  border-top: 1px solid #f1f4f8;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, #fafbfc 0%, #fff 40%);
}
.m1-scenario-output__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 8px;
}
.m1-scenario-output__name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.m1-scenario-output__cohort {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.m1-scenario-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
@media (max-width: 900px) {
  .m1-scenario-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .m1-scenario-kpi--wide {
    grid-column: span 2;
  }
}
.m1-scenario-kpi {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #eef2f6;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.m1-scenario-kpi--wide {
  /* span handled by grid on small screens */
}
.m1-scenario-kpi__k {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  line-height: 1.2;
}
.m1-scenario-kpi__v {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.m1-scenario-kpi__v--text {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
}
.m1-scenario-narrative {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: #64748b;
  padding-top: 8px;
  border-top: 1px solid #f1f4f8;
}

/* Groups table */
.m1-groups-wrap {
  box-shadow: none;
  border: 1px solid #e8ecf1;
  border-radius: 10px;
  background: #fff;
}
.m1-groups-table {
  font-size: 12px;
}
.m1-groups-table tbody tr:last-child td {
  border-bottom: 0;
}
.m1-mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.m1-td--center {
  text-align: center;
}
.m1-td--narrow {
  width: 1%;
  white-space: nowrap;
}
.m1-th--action {
  width: 1%;
}
.m1-td--action {
  white-space: nowrap;
}
.m1-td--num {
  width: 4.5rem;
}
.m1-groups-name {
  max-width: 220px;
}
.m1-groups-name__text {
  font-weight: 600;
  color: #0f172a;
  display: block;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m1-groups-empty {
  padding: 12px 10px;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
}
.m1-needcount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.m1-needcount--ok {
  background: #f8fafc;
  color: #64748b;
  border-color: #e2e8f0;
}
.m1-needcount--mid {
  background: #fffbeb;
  color: #9a3412;
  border-color: #fde68a;
}
.m1-needcount--high {
  background: #fef2f2;
  color: #9f1239;
  border-color: #fecdd3;
}
.m1-text-btn {
  border: 0;
  background: none;
  padding: 2px 0;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: #2563eb;
  cursor: pointer;
  text-decoration: none;
  border-radius: 4px;
}
.m1-text-btn:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: #1d4ed8;
}
.m1-text-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Module 1 — Group limit structure */
.m1-group-panel {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  padding: 14px;
}
.m1-group-panel .section-head h3 {
  margin: 0;
  font-size: 14px;
}
.m1-group-bar {
  width: 100%;
  height: 10px;
  background: #eef2f7;
  border-radius: 999px;
  overflow: hidden;
}
.m1-group-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #1d4ed8);
  border-radius: 999px;
}
.m1-table--compact th,
.m1-table--compact td {
  padding: 8px 10px;
  font-size: 12.5px;
}
/* Tighter tool tables (e.g. portfolio groups) — after compact so it wins */
.m1-table.m1-groups-table th,
.m1-table.m1-groups-table td {
  padding: 5px 10px;
  font-size: 12px;
  vertical-align: middle;
}
.m1-table.m1-groups-table td {
  border-bottom-color: #f1f4f8;
}
.m1-table.m1-groups-table th {
  font-size: 9.5px;
  font-weight: 600;
  padding: 6px 10px 5px;
  white-space: nowrap;
}
.m1-table--compact tr.is-self {
  background: #eff6ff;
}
.m1-table--compact tr.is-self td {
  border-top: 1px solid #bfdbfe;
  border-bottom: 1px solid #bfdbfe;
}
.danger-text {
  color: #b91c1c;
}

/* Module 1 — Sparklines */
.m1-spark-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.m1-spark-card {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.m1-spark-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.m1-spark-card__head small {
  color: #64748b;
  font-size: 11.5px;
}
.m1-spark-card__head strong {
  font-size: 16px;
}
.m1-spark {
  width: 100%;
  height: 38px;
  display: block;
}

/* Module 1 — Review reason chip */
.m1-reason-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  font-size: 12px;
  line-height: 1.25;
  max-width: 100%;
}
.m1-reason-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2563eb;
  flex-shrink: 0;
}
.m1-reason-chip--row {
  margin-top: 4px;
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
  padding: 2px 8px;
  font-size: 11px;
}

/* Module 1 — Heat map */
.m1-heatmap-wrap {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  padding: 14px;
}
.m1-heatmap {
  display: grid;
  gap: 4px;
  overflow-x: auto;
}
.m1-heatmap-row {
  display: grid;
  gap: 4px;
  grid-template-columns: 160px repeat(var(--heat-cols, 7), minmax(96px, 1fr));
}
.m1-heatmap-row--head .m1-heatmap-cell {
  background: transparent;
  color: #475569;
  font-weight: 600;
  font-size: 11.5px;
  border: 0;
  padding: 4px 8px;
}
.m1-heatmap-cell {
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #0f172a;
}
.m1-heatmap-cell--label {
  background: transparent;
  border: 0;
  color: #475569;
  font-weight: 600;
  font-size: 12px;
  padding: 8px 10px;
}
.m1-heatmap-cell--corner {
  background: transparent;
  border: 0;
}
.m1-heatmap-cell--empty {
  background: repeating-linear-gradient(
    45deg,
    #f8fafc,
    #f8fafc 6px,
    #eef2f7 6px,
    #eef2f7 12px
  );
  color: transparent;
}
.m1-heatmap-cell strong {
  font-size: 12.5px;
  font-weight: 700;
}
.m1-heatmap-cell small {
  font-size: 11px;
  color: rgba(15, 23, 42, 0.7);
}
.m1-heatmap-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.m1-heatmap-swatch {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 3px;
  margin-right: 2px;
  margin-left: 6px;
  vertical-align: middle;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.m1-heatmap-swatch:first-child {
  margin-left: 0;
}

/* Module 1 — Governance */
.m1-gov-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.m1-gov-card {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
}
.m1-gov-card--wide {
  grid-column: 1 / -1;
}
.m1-gov-card .section-head h3 {
  margin: 0;
  font-size: 14px;
}
.m1-drift-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.m1-drift-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12.5px;
  margin-bottom: 4px;
}
.m1-drift-bar {
  width: 100%;
  height: 8px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.m1-drift-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.m1-drift-bar > span.success {
  background: #16a34a;
}
.m1-drift-bar > span.warning {
  background: #d97706;
}
.m1-drift-bar > span.danger {
  background: #b91c1c;
}

/* Module 1 — Clickable KPI tiles (replace static metric-strip on queue & exceptions) */
.m1-tile-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.m1-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
  padding: 12px 14px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
  color: inherit;
  cursor: pointer;
  font: inherit;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, transform 80ms ease;
  min-height: 78px;
}

.m1-tile:hover {
  background: #fff;
  border-color: #cbd5e1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.06);
}

.m1-tile:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.m1-tile:active {
  transform: translateY(1px);
}

.m1-tile small {
  display: block;
  color: #64748b;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
}

.m1-tile small .muted {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: #94a3b8;
  margin-left: 2px;
}

.m1-tile strong {
  display: block;
  margin-top: 2px;
  font-size: 22px;
  line-height: 1.1;
  color: #0f172a;
  font-weight: 700;
}

.m1-tile__hint {
  position: absolute;
  right: 12px;
  bottom: 8px;
  color: #94a3b8;
  font-size: 10.5px;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 120ms ease, transform 120ms ease;
  pointer-events: none;
}

.m1-tile:hover .m1-tile__hint,
.m1-tile:focus-visible .m1-tile__hint {
  opacity: 1;
  transform: translateY(0);
}

.m1-tile.is-active {
  background: #eff6ff;
  border-color: #2563eb;
  box-shadow: inset 0 0 0 1px #2563eb;
}

.m1-tile.is-active small {
  color: #1d4ed8;
}

.m1-tile.is-active strong {
  color: #1e3a8a;
}

.m1-tile.is-active .m1-tile__hint {
  opacity: 0;
}

/* Active filters bar */
.m1-filters__active {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
}

.m1-filters__active-label {
  color: #475569;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.m1-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.m1-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.25;
  border-radius: 999px;
  background: #fff;
  color: #1e3a8a;
  border: 1px solid #bfdbfe;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms ease, border-color 120ms ease;
}

.m1-chip:hover {
  background: #eff6ff;
  border-color: #2563eb;
}

.m1-chip:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}

.m1-chip--clear {
  background: transparent;
  color: #b91c1c;
  border-color: transparent;
  text-decoration: underline;
  padding-left: 4px;
  padding-right: 4px;
}

.m1-chip--clear:hover {
  background: #fee2e2;
  border-color: #fecaca;
  text-decoration: none;
}

/* Module 1 — Queue table: sortable columns, toolbar, pager */
.m1-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.m1-table-toolbar__left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 28px;
}

.m1-table-toolbar__count {
  color: #475569;
  font-weight: 500;
}

.m1-table-toolbar__right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.m1-page-size {
  min-width: 130px;
  padding: 6px 10px;
  font-size: 12.5px;
  height: 32px;
}

.m1-table--sortable thead th {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 0;
  vertical-align: middle;
}

.m1-th--sortable .m1-th__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 600;
  font-size: 12px;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-align: left;
}

.m1-th--sortable .m1-th__btn:hover {
  background: #eef2f7;
  color: #0f172a;
}

.m1-th--sortable .m1-th__btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

.m1-th--right .m1-th__btn {
  justify-content: flex-end;
  text-align: right;
}
.m1-th--center .m1-th__btn {
  justify-content: center;
  text-align: center;
}

.m1-th.is-active {
  background: #eff6ff;
}

.m1-th.is-active .m1-th__btn {
  color: #1d4ed8;
}

.m1-sort-caret {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: #94a3b8;
  opacity: 0.6;
  min-width: 0.75em;
}

.m1-sort-caret.is-active {
  color: #1d4ed8;
  opacity: 1;
}

.m1-td--right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.m1-td--center {
  text-align: center;
}

.m1-empty-row {
  text-align: center;
  padding: 28px 14px !important;
  color: #64748b;
  font-size: 13px;
}

.m1-empty-row .m1-chip {
  margin-left: 8px;
}

/* Pager */
.m1-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.m1-pager__info {
  color: #475569;
}

.m1-pager__controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.m1-pager__btn {
  min-width: 34px;
  height: 32px;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--border);
  background: #fff;
  color: #334155;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.m1-pager__btn:hover:not([disabled]) {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.m1-pager__btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}

.m1-pager__btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.m1-pager__btn--num {
  padding: 0 10px;
}

.m1-pager__btn.is-active {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
  font-weight: 600;
  cursor: default;
}

.m1-pager__btn.is-active:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

.m1-pager__gap {
  padding: 0 4px;
  color: #94a3b8;
  min-width: 18px;
  text-align: center;
  user-select: none;
}

/* =================== MODULE 2 · INVOICE ACCURACY & BILLING CONTROL =================== */

.m2-tile-strip {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.m1-tile--readonly {
  cursor: default;
  background: #f9fafb;
  border-style: dashed;
}

.m1-tile--readonly:hover {
  background: #f9fafb;
  border-color: #e5e7eb;
}

.m2-filters {
  display: grid;
  grid-template-columns: 2fr repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.m2-table td {
  vertical-align: top;
}

.m2-risk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.m2-risk strong {
  font-size: 14px;
  min-width: 24px;
  text-align: center;
}

.m2-risk-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.m2-risk-pill--low {
  background: #d1fae5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.m2-risk-pill--medium {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.m2-risk-pill--high {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.m2-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.m2-status--open {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.m2-status--overdue {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.m2-status--paid {
  background: #d1fae5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.m2-status--on_hold {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.m2-status--disputed {
  background: #fde2e7;
  color: #9f1239;
  border: 1px solid #fbcfe8;
}

.m2-sigs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.m2-sig {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.m2-sig--dispute {
  background: #fde2e7;
  color: #9f1239;
  border-color: #fbcfe8;
}


.m2-sig--overdue {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}

.m2-sig--hold {
  background: #fef9c3;
  color: #854d0e;
  border-color: #fef08a;
}

.m2-sig--risk {
  background: #ffe4e6;
  color: #9f1239;
  border-color: #fecdd3;
}

.m2-sig--correction {
  background: #e0e7ff;
  color: #3730a3;
  border-color: #c7d2fe;
}

/* Quality-gate hold-reason chips (WIP — Module 2 refactor) */
.m2-hold {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.m2-hold--safe {
  background: #dcfce7;
  color: #14532d;
  border-color: #bbf7d0;
}
.m2-hold--missing {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}
.m2-hold--order {
  background: #ffedd5;
  color: #9a3412;
  border-color: #fed7aa;
}
.m2-hold--tax {
  background: #fef3c7;
  color: #854d0e;
  border-color: #fde68a;
}
.m2-hold--caution {
  background: #e0e7ff;
  color: #3730a3;
  border-color: #c7d2fe;
}

/* Quality score column */
.m2-qual-w {
  font-size: 10px;
  font-weight: 500;
  color: #94a3b8;
  white-space: nowrap;
}

.m2-qual-cells {
  display: block;
  max-width: 12rem;
  margin: 2px auto 0;
  line-height: 1.35;
}

.m2-quality {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.m2-quality strong {
  font-size: 14px;
  font-weight: 700;
}
.m2-qb {
  display: inline-flex;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.m2-qb--safe { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.m2-qb--caution { background: #fef3c7; color: #854d0e; border-color: #fde68a; }
.m2-qb--hold { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

/* Highlighted quality-gate tiles */
.m2-tile--safe.is-active { border-color: #22c55e; background: #f0fdf4; }
.m2-tile--hold.is-active { border-color: #f87171; background: #fef2f2; }
.m2-tile--disp.is-active { border-color: #ec4899; background: #fdf2f8; }

/* Slide-over workspace */
.m2-slide-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(2px);
  z-index: 60;
  animation: m2FadeIn 0.18s ease-out;
}

.m2-slide {
  position: fixed;
  top: 0;
  right: 0;
  width: min(860px, 96vw);
  height: 100vh;
  background: #ffffff;
  box-shadow: -20px 0 40px -12px rgba(15, 23, 42, 0.25);
  border-left: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  z-index: 61;
  animation: m2SlideIn 0.22s ease-out;
}

@keyframes m2FadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes m2SlideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.m2-slide__head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #fafbfc;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.m2-slide__title {
  margin: 6px 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
}

.m2-slide__headchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 50%;
}

.m2-slide__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.m2-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}

.m2-card h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.m2-card .section-head {
  margin-bottom: 8px;
}

.m2-riskbox {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  align-items: flex-start;
}

.m2-riskbox__score {
  text-align: center;
  padding: 12px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.m2-riskbox__num {
  font-size: 36px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

.m2-riskbox__band {
  margin-top: 8px;
}

.m2-riskbox__factors {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.m2-quality-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: center;
}

.m2-stat-pair {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: #fafbfc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.m2-stat-pair strong {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
}

.m2-risk-factor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fafbfc;
  font-size: 13px;
}

.m2-risk-factor strong {
  font-variant-numeric: tabular-nums;
}

.m2-risk-factor--low {
  border-color: #e5e7eb;
}

.m2-risk-factor--medium {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.m2-risk-factor--high {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.m2-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.m2-timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: #e5e7eb;
}

.m2-timeline li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: flex-start;
  position: relative;
}

.m2-timeline__dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid #2563eb;
  margin-top: 3px;
  z-index: 1;
}

.m2-timeline__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.m2-timeline__content strong {
  color: #0f172a;
}

.m2-note-input {
  flex: 1;
  min-height: 60px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}

.m2-note-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Analytics view */
.m2-analytics .section-head {
  align-items: flex-start;
}

.m2-leakage {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 20px;
  margin-top: 16px;
  padding: 20px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.m2-leakage__hero {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.m2-leakage__hero small:first-child {
  color: #92400e;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}

.m2-leakage__hero strong {
  font-size: 34px;
  font-weight: 800;
  color: #7c2d12;
  line-height: 1.1;
}

.m2-leakage__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.m2-leakage__meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
}

.m2-leakage__meta strong {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
}

.m2-section {
  margin-top: 28px;
}

.m2-section h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.m2-cause {
  margin-top: 12px;
  padding: 12px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  font-size: 13px;
  color: #1e3a8a;
}

/* Heatmap */
.m2-heatmap-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fafbfc;
  padding: 10px;
  margin-top: 8px;
}

.m2-heatmap {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
}

.m2-heatmap th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #4b5563;
  padding: 6px 8px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  white-space: nowrap;
}

.m2-heatmap__corner {
  background: transparent !important;
  border: none !important;
  color: #6b7280 !important;
  font-style: italic;
}

.m2-heatcell {
  min-width: 80px;
  padding: 8px;
  text-align: center;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.12s ease;
  font-size: 11px;
  border: 1px solid transparent;
}

.m2-heatcell strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
}

.m2-heatcell small {
  display: block;
  font-size: 10px;
  opacity: 0.85;
  margin-top: 1px;
}

.m2-heatcell:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.m2-heatcell:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}

.m2-heat--0 {
  background: #f3f4f6;
  color: #9ca3af;
}

.m2-heat--1 {
  background: #dbeafe;
  color: #1e40af;
}

.m2-heat--2 {
  background: #bfdbfe;
  color: #1e3a8a;
}

.m2-heat--3 {
  background: #fde68a;
  color: #92400e;
}

.m2-heat--4 {
  background: #fca5a5;
  color: #7f1d1d;
}

.m2-heat--5 {
  background: #ef4444;
  color: #ffffff;
}

.m2-heatmap__legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 0 4px;
  font-size: 11px;
  color: #6b7280;
}

.m2-heat-sw {
  display: inline-block;
  width: 18px;
  height: 12px;
  border-radius: 3px;
}

/* Line chart */
.m2-linechart {
  background: #fafbfc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
  margin-top: 8px;
}

.m2-linechart svg {
  width: 100%;
  height: 160px;
  display: block;
}

.m2-linechart__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 2px;
  font-size: 10px;
  color: #6b7280;
  text-align: center;
}

.m2-linechart__axis span {
  flex: 1;
  min-width: 0;
}

.m2-linechart__axis small {
  color: #374151;
  font-weight: 600;
}

/* Dispute-type bar list */
.m2-barlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.m3-analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.m3-provenance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.m3-panel .m2-leakage.m2-leakage--inline {
  margin-top: 10px;
  border: 0;
  background: transparent;
}

.m3-analytics-grid > div {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
  min-width: 0;
}

.m3-analytics-grid .m1-table-wrap {
  margin-top: 8px;
}

.m3-analytics-grid .m1-table th,
.m3-analytics-grid .m1-table td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.m3-analytics-grid h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.01em;
}

@media (max-width: 1520px) {
  .m3-analytics-grid {
    grid-template-columns: 1fr;
  }
}

.m2-bar-row {
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.m2-bar-row__head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 6px;
}

.m2-bar-row__bar {
  height: 8px;
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 4px;
}

.m2-bar-row__bar span {
  display: block;
  height: 100%;
  background: #2563eb;
  border-radius: 999px;
}

.m2-empty {
  text-align: center;
  padding: 40px 16px;
}

.m2-empty h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #0f172a;
}

.m2-empty ul.status-list {
  text-align: left;
  max-width: 620px;
  margin: 16px auto 0;
}

/* Module 1 Context — invoices for this customer (Module 2 cross-link) */
.m1-m2-xpanel__headact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.m1-m2-xpanel__tablewrap {
  margin-top: 10px;
  max-height: min(420px, 50vh);
  overflow: auto;
}

.m1-m2-xtable__tr--hilight {
  background: #eff6ff;
  box-shadow: inset 3px 0 0 #2563eb;
}

.m1-m2-issue {
  display: block;
  max-width: 40ch;
  line-height: 1.4;
  color: #334155;
}

/* Module 2 — Prevention simulator layout */
.m2-prevention__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}
.m2-leakage--inline {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
  padding: 4px 0 8px;
}
.m2-leakage--inline > div {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: #f8fafc;
}
.m2-leakage--inline small {
  display: block;
}
.m2-leakage--inline strong {
  display: block;
  margin-top: 2px;
  font-size: 1.1rem;
}

/* ====================================================== */
/* Module 3 — Payment analytics (enterprise rebuild)        */
/* ====================================================== */
.panel.m3an {
  padding: 22px 24px 18px;
  background: #ffffff;
  border: 1px solid #eaecef;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.m3an-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid #f1f3f5;
}
.m3an-head__main {
  min-width: 0;
}
.m3an-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.m3an-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #64748b;
}
.m3an-sub strong {
  color: #0f172a;
  font-weight: 600;
}
.m3an-head__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.m3an-asof {
  font-size: 12px;
  color: #94a3b8;
  white-space: nowrap;
}
.m3an-asof strong {
  color: #475569;
  font-weight: 600;
}

/* KPI strip — borderless tinted blocks (less AI-grid feel) */
.m3an-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.m3an-kpi {
  position: relative;
  padding: 16px 18px 16px 22px;
  border: 0;
  border-radius: 12px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  font-family: inherit;
}
/* Left rail removed per design principle "no colored left rails" — */
/* boundary is shadow + hairline only. Severity carried by the icon-tile. */
.m3an-kpi--warn { background: #fff8eb; }
.m3an-kpi--info { background: #eff6ff; }
.m3an-kpi--ok   { background: #ecfdf5; }

.m3an-kpi:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.m3an-kpi:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.m3an-kpi__label {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.m3an-kpi__value {
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.m3an-kpi__hint {
  font-size: 12px;
  color: #64748b;
}
.m3an-kpi__hint code {
  background: rgba(15, 23, 42, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  color: #334155;
}
.m3an-kpi__hint strong {
  color: #0f172a;
  font-weight: 700;
}
.m3an-kpi__cta {
  font-size: 11.5px;
  font-weight: 600;
  color: #2563eb;
  margin-top: 2px;
}
.m3an-kpi:hover .m3an-kpi__cta { text-decoration: underline; }

/* Donut chart */
.m3an-card__body--chart {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  align-items: center;
}
.m3an-donut {
  display: flex;
  align-items: center;
  justify-content: center;
}
.m3an-donut svg { display: block; }
.m3an-donut__slice {
  transition: opacity 140ms ease, transform 140ms ease;
  transform-origin: 90px 90px;
}
.m3an-donut__slice:hover {
  opacity: 0.9;
  transform: scale(1.02);
}
.m3an-donut__num {
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  fill: #0f172a;
}
.m3an-donut__sub {
  font-family: inherit;
  font-size: 10px;
  fill: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.m3an-donut--empty {
  width: 180px;
  height: 180px;
  border: 1px dashed #e5e7eb;
  border-radius: 999px;
}

/* Legend */
.m3an-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.m3an-legend--row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
}
.m3an-legend__item {
  margin: 0;
  padding: 0;
}
.m3an-legend__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 5px 6px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
  color: #334155;
  cursor: pointer;
  text-align: left;
}
.m3an-legend__btn:hover {
  background: #f8fafc;
}
.m3an-legend__btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}
.m3an-legend__sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.m3an-legend__lbl {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m3an-legend__val {
  font-size: 12px;
  color: #475569;
  white-space: nowrap;
}
.m3an-legend__val strong {
  color: #0f172a;
  font-weight: 600;
}

/* Stacked bar */
.m3an-stack {
  display: flex;
  width: 100%;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f5f9;
}
.m3an-stack__seg {
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  transition: filter 140ms ease;
}
.m3an-stack__seg:hover {
  filter: brightness(1.08);
}
.m3an-stack__seg:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: -2px;
}
.m3an-stack__lbl {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* PTP & partial stat tiles */
.m3an-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.m3an-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 0;
  background: #f8fafc;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: transform 140ms ease, box-shadow 140ms ease;
  position: relative;
  overflow: hidden;
}
.m3an-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}
.m3an-stat--blue  { background: #eff6ff; }
.m3an-stat--blue::before  { background: #3b82f6; }
.m3an-stat--red   { background: #fef2f2; }
.m3an-stat--red::before   { background: #ef4444; }
.m3an-stat--amber { background: #fff8eb; }
.m3an-stat--amber::before { background: #f59e0b; }
.m3an-stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}
.m3an-stat:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.m3an-stat__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}
.m3an-stat__num {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1;
}
.m3an-stat__hint {
  font-size: 11.5px;
  color: #64748b;
}

@media (max-width: 980px) {
  .m3an-card__body--chart {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}
@media (max-width: 760px) {
  .m3an-stat-grid {
    grid-template-columns: 1fr;
  }
}

/* ====================================================== */
/* Shared M3 components (signals, ledger, governance)      */
/* ====================================================== */

/* Segment tiles (signals) */
.m3an-segtiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.m3an-segtile {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 14px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #eef0f3;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  overflow: hidden;
}
.m3an-segtile__icon {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--seg-color, #cbd5e1) 14%, transparent);
  color: var(--seg-color, #475569);
  font-size: 22px;
  line-height: 1;
  align-self: center;
}
.m3an-segtile__label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.m3an-segtile__num {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  align-self: start;
  grid-row: span 2;
  line-height: 1.05;
}
.m3an-segtile__hint {
  grid-column: 2 / 4;
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.4;
}
.m3an-segtile:hover {
  border-color: var(--seg-color, #cbd5e1);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.m3an-segtile.is-active {
  border-color: var(--seg-color, #2563eb);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--seg-color, #2563eb) 18%, transparent);
}
.m3an-segtile.is-active .m3an-segtile__icon {
  background: color-mix(in srgb, var(--seg-color, #2563eb) 22%, transparent);
}
.m3an-segtile:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Filters / toolbar */
.m3an-filters {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.m3an-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.m3an-field--grow {
  grid-column: span 1;
}
.m3an-field input,
.m3an-field select {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: #0f172a;
  text-transform: none;
  letter-spacing: normal;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
  min-width: 0;
}
.m3an-field input:focus,
.m3an-field select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.m3an-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 12px;
  border-bottom: 1px solid #f1f3f5;
  margin-bottom: 4px;
}
.m3an-toolbar__hint {
  font-size: 12px;
  color: #94a3b8;
}
.m3an-chip {
  padding: 5px 10px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: #1e40af;
  cursor: pointer;
  font-family: inherit;
}
.m3an-chip:hover { background: #dbeafe; }
.m3an-page-size {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
}
.m3an-page-size select {
  font-family: inherit;
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
}

/* Pills / badges */
.m3an-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  margin-right: 4px;
  white-space: nowrap;
}
.m3an-pill:last-child { margin-right: 0; }
.m3an-pill--green { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.m3an-pill--red   { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.m3an-pill--blue  { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.m3an-pill--amber { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.m3an-pill--gray  { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }

.m3an-segtag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px 3px 18px;
  position: relative;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: color-mix(in srgb, var(--seg-color, #64748b) 12%, #ffffff);
  color: color-mix(in srgb, var(--seg-color, #64748b) 80%, #0f172a);
  border: 1px solid color-mix(in srgb, var(--seg-color, #64748b) 25%, #ffffff);
}
.m3an-segtag::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--seg-color, #64748b);
}

.m3an-ptpcell {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.m3an-risk {
  display: inline-flex;
  min-width: 36px;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12.5px;
  justify-content: center;
}
.m3an-risk--lo { background: #ecfdf5; color: #065f46; }
.m3an-risk--md { background: #fff7ed; color: #9a3412; }
.m3an-risk--hi { background: #fef2f2; color: #991b1b; }

.m3an-delay--ok   { color: #166534; }
.m3an-delay--warn { color: #92400e; }
.m3an-delay--bad  { color: #991b1b; font-weight: 600; }

.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
}

/* Pipeline (governance) */
.m3an-pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.m3an-pipeline__step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #eef0f3;
  border-radius: 10px;
  position: relative;
}
.m3an-pipeline__step.is-current {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.m3an-pipeline__num {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.m3an-pipeline__step.is-current .m3an-pipeline__num {
  background: #2563eb;
  color: #ffffff;
}
.m3an-pipeline__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.m3an-pipeline__body strong {
  font-size: 12.5px;
  color: #0f172a;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.m3an-pipeline__body small {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Model cards (governance) */
.m3an-models {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.m3an-model {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  overflow: hidden;
}
.m3an-model__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #f5f6f8;
}
.m3an-model__title {
  min-width: 0;
}
.m3an-model__stage {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #2563eb;
  background: #eff6ff;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.m3an-model__title h3 {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.005em;
}
.m3an-model__title p {
  margin: 0;
  font-size: 12.5px;
  color: #475569;
}
.m3an-model__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: 1px solid #f5f6f8;
}
.m3an-model__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border-right: 1px solid #f5f6f8;
  min-width: 0;
}
.m3an-model__metric:last-child { border-right: 0; }
.m3an-model__metric small {
  font-size: 10.5px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.m3an-model__metric strong {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}
.m3an-model__metric-text {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  white-space: normal;
}
.m3an-model__outputs {
  padding: 14px 18px;
  flex: 1;
}
.m3an-model__outputs-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  display: block;
  margin-bottom: 6px;
}
.m3an-model__outputs ul {
  margin: 0;
  padding: 0 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: disc;
}
.m3an-model__outputs li {
  font-size: 12.5px;
  color: #334155;
  line-height: 1.4;
}
.m3an-model__tech {
  margin: 0 18px 14px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  font-size: 12px;
}
.m3an-model__tech summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.01em;
  outline: none;
  list-style: none;
}
.m3an-model__tech summary::-webkit-details-marker { display: none; }
.m3an-model__tech summary::after {
  content: "\e136"; /* ph-caret-down */
  font-family: "Phosphor";
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  color: #94a3b8;
  margin-left: 4px;
  transition: transform 160ms ease;
}
.m3an-model__tech[open] summary::after { transform: rotate(180deg); }
.m3an-model__tech summary i { font-size: 13px; line-height: 1; color: #64748b; }
.m3an-model__tech dl {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 4px 12px;
  font-size: 12.5px;
}
.m3an-model__tech dt { color: #64748b; font-weight: 600; }
.m3an-model__tech dd { margin: 0; color: #334155; }

.m3an-model__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px 14px;
  gap: 12px;
  border-top: 1px solid #f5f6f8;
  background: #fafbfc;
}
.m3an-model__foot .button i {
  margin-right: 5px;
  font-size: 13px;
  line-height: 1;
}

/* Plain bullet list */
.m3an-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.m3an-list li {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  font-size: 13px;
  color: #334155;
  align-items: start;
}
.m3an-list strong {
  color: #0f172a;
  font-weight: 600;
}
.m3an-list span {
  color: #64748b;
  font-size: 12.5px;
}
.m3an-list--cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
}
.m3an-list--cols li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.m3an-table--compact thead th {
  padding: 8px 14px;
}
.m3an-table--compact tbody td {
  padding: 10px 14px;
  font-size: 12.5px;
}

/* Responsive */
@media (max-width: 1100px) {
  .m3an-models {
    grid-template-columns: 1fr;
  }
  .m3an-pipeline {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 860px) {
  .m3an-segtiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .m3an-filters {
    grid-template-columns: 1fr 1fr;
  }
  .m3an-list li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .m3an-list--cols {
    grid-template-columns: 1fr;
  }
  .m3an-model__metrics {
    grid-template-columns: 1fr;
  }
  .m3an-model__metric {
    border-right: 0;
    border-bottom: 1px solid #f5f6f8;
  }
  .m3an-model__metric:last-child { border-bottom: 0; }
}
@media (max-width: 580px) {
  .m3an-segtiles {
    grid-template-columns: 1fr;
  }
  .m3an-filters {
    grid-template-columns: 1fr;
  }
  .m3an-pipeline {
    grid-template-columns: 1fr;
  }
}

/* ====================================================== */
/* Dashboard 2.0 — premium landing                          */
/* ====================================================== */

.dash2-shell {
  --dash2-bg: #f6f7fb;
  background: var(--dash2-bg);
}

/* Sample-data banner */
.dash2-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #fff7ed;
  border: 1px solid #fde6c8;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: #7c2d12;
}
.dash2-banner__pip {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f59e0b;
  flex-shrink: 0;
}
.dash2-banner strong { font-weight: 700; color: #92400e; }
.dash2-banner__link {
  background: transparent;
  border: 0;
  padding: 0;
  color: #92400e;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
  font-size: inherit;
}

/* Hero band */
.dash2-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 22px;
  isolation: isolate;
  border: 1px solid #e8eaf0;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.dash2-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(900px 400px at -10% -50%, rgba(59, 130, 246, 0.18), transparent 60%),
    radial-gradient(700px 320px at 110% -30%, rgba(139, 92, 246, 0.16), transparent 60%),
    radial-gradient(500px 260px at 50% 120%, rgba(14, 165, 233, 0.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}
.dash2-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12px 12px, rgba(15, 23, 42, 0.04) 1px, transparent 1.2px);
  background-size: 24px 24px;
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.dash2-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 32px;
  padding: 28px 32px;
  align-items: center;
}
.dash2-hero__lead { min-width: 0; }
.dash2-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.dash2-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.dash2-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.dash2-pill--ok    { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.dash2-pill--warn  { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.dash2-pill--ghost { background: rgba(15, 23, 42, 0.04); color: #475569; border-color: rgba(15, 23, 42, 0.06); }
.dash2-pill--ghost .dash2-pill__dot { background: #94a3b8; }

.dash2-hero__greet {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #0f172a;
  line-height: 1.1;
}
.dash2-hero__sub {
  margin: 0 0 18px;
  font-size: 14px;
  color: #475569;
  line-height: 1.55;
  max-width: 56ch;
}
.dash2-hero__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.dash2-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #e8eaf0;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.dash2-nav span {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.dash2-nav small {
  font-size: 10.5px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dash2-nav:hover {
  border-color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.12);
}
.dash2-nav:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.dash2-hero__metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.dash2-headline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dash2-headline__label {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dash2-headline__value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #0f172a;
  line-height: 1.05;
}
.dash2-headline__sub {
  font-size: 12.5px;
  color: #64748b;
}
.dash2-headline__split {
  margin-top: 8px;
}
.dash2-headline__bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: #f1f5f9;
}
.dash2-headline__bar-within { background: #10b981; }
.dash2-headline__bar-over { background: #ef4444; }
.dash2-headline__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
  font-size: 11.5px;
  color: #475569;
}
.dash2-headline__legend strong {
  color: #0f172a;
  font-weight: 600;
}
.dash2-headline__sw {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: 1px;
}
.dash2-headline__sw--ok  { background: #10b981; }
.dash2-headline__sw--bad { background: #ef4444; }

/* Health gauge */
.dash2-health {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
}
.dash2-health--ok   { color: #10b981; }
.dash2-health--warn { color: #f59e0b; }
.dash2-health--bad  { color: #ef4444; }
.dash2-health svg { display: block; }
.dash2-health__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-top: -68px;
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.dash2-health__num {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1;
  letter-spacing: -0.02em;
}
.dash2-health__lbl {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: currentColor;
}
.dash2-health__hint {
  font-size: 10.5px;
  color: #64748b;
  margin-top: 22px;
}

/* KPI strip — composition cards */
.dash2-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.dash2-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 16px;
  background: #ffffff;
  border: 1px solid #e8eaf0;
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  overflow: hidden;
}
.dash2-kpi::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent, #3b82f6), color-mix(in srgb, var(--accent, #3b82f6) 40%, transparent));
  opacity: 0;
  transition: opacity 160ms ease;
}
.dash2-kpi:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent, #3b82f6) 35%, #e8eaf0);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}
.dash2-kpi:hover::after { opacity: 1; }
.dash2-kpi:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}
.dash2-kpi__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dash2-kpi__lens {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}
.dash2-kpi__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent, #3b82f6);
}
.dash2-kpi__cta {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent, #2563eb);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.dash2-kpi:hover .dash2-kpi__cta {
  opacity: 1;
  transform: translateX(0);
}
.dash2-kpi__label {
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.005em;
}
.dash2-kpi__value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.1;
}
.dash2-kpi__sub {
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
  margin-bottom: 4px;
}
.dash2-kpi__share {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
}
.dash2-kpi__share-bar {
  height: 4px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
}
.dash2-kpi__share-bar span {
  display: block;
  height: 100%;
  background: var(--share-color, #3b82f6);
  border-radius: 999px;
  transition: width 240ms ease;
}
.dash2-kpi__share-pct {
  font-size: 11px;
  color: #64748b;
}
.dash2-kpi__compo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e5e7eb;
}
.dash2-kpi__compo-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: #475569;
}
.dash2-kpi__compo-row strong {
  color: #0f172a;
  font-weight: 600;
}

/* Main grid */
.dash2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 18px;
}
.dash2-grid__main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.dash2-grid__side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.dash2-panel {
  margin: 0;
}

/* Payment behavior strip */
.dash2-paystrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.dash2-paystrip__item {
  position: relative;
  padding: 14px 16px 14px 22px;
  border-radius: 10px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.dash2-paystrip__item::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 12px;
  width: 3px;
  border-radius: 999px;
  background: #cbd5e1;
}
.dash2-paystrip__item--ok   { background: #ecfdf5; }
.dash2-paystrip__item--ok::before { background: #10b981; }
.dash2-paystrip__item--warn { background: #fff8eb; }
.dash2-paystrip__item--warn::before { background: #f59e0b; }
.dash2-paystrip__item--info { background: #eff6ff; }
.dash2-paystrip__item--info::before { background: #3b82f6; }
.dash2-paystrip__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}
.dash2-paystrip__val {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.dash2-paystrip__hint {
  font-size: 11.5px;
  color: #64748b;
}
.dash2-jump {
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 0;
}
.dash2-jump:hover { text-decoration: underline; }

/* Concentration */
.dash2-conc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}
.dash2-conc__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash2-conc__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.dash2-conc__head span {
  font-size: 12.5px;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash2-conc__head strong {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.dash2-conc__bar {
  height: 8px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
}
.dash2-conc__bar span {
  display: block;
  height: 100%;
  background: var(--bar-color, #3b82f6);
  border-radius: 999px;
  transition: width 240ms ease;
}

/* Recommended actions */
.dash2-rec {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash2-rec__btn {
  width: 100%;
  display: grid;
  grid-template-columns: 4px 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 12px 12px 12px 0;
  background: transparent;
  border: 1px solid #eef0f3;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 140ms ease, background 140ms ease;
  position: relative;
  overflow: hidden;
}
.dash2-rec__btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.dash2-rec__btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.dash2-rec__sev {
  width: 4px;
  height: 100%;
  background: #cbd5e1;
}
.dash2-rec__item--info .dash2-rec__sev { background: #3b82f6; }
.dash2-rec__item--warn .dash2-rec__sev { background: #f59e0b; }
.dash2-rec__item--bad  .dash2-rec__sev { background: #ef4444; }
.dash2-rec__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dash2-rec__body strong {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.dash2-rec__body span {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}
.dash2-rec__arrow {
  font-size: 16px;
  color: #94a3b8;
  padding: 0 12px 0 0;
  align-self: center;
  transition: transform 140ms ease, color 140ms ease;
}
.dash2-rec__btn:hover .dash2-rec__arrow {
  color: #2563eb;
  transform: translateX(2px);
}

/* Worklist refinement when inside dash2-panel */
.dash2-panel .dashboard-worklist {
  margin-top: 0;
}

/* Responsive */
@media (max-width: 1280px) {
  .dash2-hero__inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .dash2-grid {
    grid-template-columns: 1fr;
  }
  .dash2-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .dash2-hero__nav {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .dash2-hero__inner {
    padding: 22px 20px;
  }
  .dash2-hero__greet {
    font-size: 24px;
  }
  .dash2-hero__metric {
    grid-template-columns: 1fr;
  }
  .dash2-kpis {
    grid-template-columns: 1fr;
  }
  .dash2-paystrip {
    grid-template-columns: 1fr;
  }
}

/* Card grid — softer chrome, no inner divider */
.m3an-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.m3an-card {
  border: 1px solid #eef0f3;
  border-radius: 12px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.m3an-card__head {
  padding: 16px 18px 4px;
}
.m3an-card__head--split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
}
.m3an-card__head--split > div {
  min-width: 0;
}
.m3an-card__title {
  margin: 0 0 3px;
  font-size: 14.5px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.005em;
}
.m3an-card__sub,
.m3an-card__hint {
  display: block;
  margin: 4px 0 0;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.5;
  font-weight: 400;
}
.m3an-card__sub strong,
.m3an-card__hint strong {
  color: #334155;
  font-weight: 600;
}
.m3an-card__body {
  padding: 12px 18px 18px;
  flex: 1;
}
.m3an-card__foot {
  padding: 12px 18px;
  border-top: 1px solid #f5f6f8;
  background: #fafbfc;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: #64748b;
  border-radius: 0 0 12px 12px;
}
.m3an-card__foot strong {
  font-size: 14px;
  color: #0f172a;
  font-weight: 600;
}
.m3an-card__foot small {
  margin-left: auto;
  font-size: 11px;
}

.m3an-linkbtn {
  flex-shrink: 0;
  background: transparent;
  color: #2563eb;
  border: 0;
  border-radius: 6px;
  padding: 4px 0;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.m3an-linkbtn:hover {
  color: #1d4ed8;
  text-decoration: underline;
}
.m3an-linkbtn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Bars — clickable */
.m3an-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.m3an-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 6px 8px;
  border-radius: 8px;
  text-align: left;
  font-family: inherit;
  width: 100%;
  margin: 0 -8px;
}
.m3an-bar--clickable {
  cursor: pointer;
  transition: background 140ms ease;
}
.m3an-bar--clickable:hover {
  background: #f8fafc;
}
.m3an-bar--clickable:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}
.m3an-bar__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: #334155;
}
.m3an-bar__label {
  color: #475569;
}
.m3an-bar__val {
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
}
.m3an-bar__track {
  height: 7px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.m3an-bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 240ms ease;
}
.m3an-bar__fill--blue   { background: #3b82f6; }
.m3an-bar__fill--green  { background: #10b981; }
.m3an-bar__fill--amber  { background: #f59e0b; }
.m3an-bar__fill--red    { background: #ef4444; }
.m3an-bar__fill--violet { background: #8b5cf6; }

/* Tables */
.m3an-card__table {
  padding: 4px 0 4px;
  overflow-x: auto;
}
.m3an-card__table--scroll {
  max-height: 360px;
  overflow-y: auto;
}
.m3an-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.m3an-table thead th {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  background: #ffffff;
  text-align: left;
  padding: 10px 18px;
  border-bottom: 1px solid #f1f3f5;
  position: sticky;
  top: 0;
  z-index: 1;
}
.m3an-table tbody td {
  padding: 12px 18px;
  border-bottom: 1px solid #f5f6f8;
  color: #1f2937;
  vertical-align: middle;
}
.m3an-table tbody tr:last-child td {
  border-bottom: 0;
}
.m3an-table tbody tr:hover td {
  background: #fafbfc;
}
.m3an-th--right,
.m3an-table .m1-td--right {
  text-align: right;
}
.m3an-td--action {
  text-align: right;
  width: 90px;
}
.m3an-rowbtn {
  background: transparent;
  border: 1px solid transparent;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.m3an-rowbtn:hover {
  background: #eff6ff;
  border-color: #dbeafe;
}
.m3an-cust {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.m3an-cust strong {
  font-size: 13px;
  color: #0f172a;
  font-weight: 600;
}
.m3an-cust__id {
  font-size: 11px;
  color: #94a3b8;
}
.m3an-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}

/* Provenance footer — quietest treatment */
.m3an-prov {
  margin-top: 14px;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  border-top: 1px dashed #e5e7eb;
  border-radius: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.m3an-prov__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #64748b;
}
.m3an-prov__tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.m3an-prov__tag--ok   { background: #dcfce7; color: #166534; }
.m3an-prov__tag--info { background: #dbeafe; color: #1e40af; }
.m3an-prov__tag--warn { background: #fef3c7; color: #92400e; }
.m3an-prov__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 280px;
  min-width: 0;
}
.m3an-prov__col strong {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475569;
}
.m3an-prov__col span {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

/* Active filter chips inside Signals & segments */
.m3-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 10px;
}
.m3-active-filters__label {
  font-size: 12px;
  font-weight: 600;
  color: #1e40af;
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.m3-active-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #ffffff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.m3-active-filters__chip:hover {
  background: #dbeafe;
}
.m3-active-filters__chip span {
  color: #64748b;
  font-weight: 700;
}
.m3-active-filters__clear {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: #1e40af;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.m3-active-filters__clear:hover {
  text-decoration: underline;
}

/* Responsive — laptop / tablet breakpoints */
@media (max-width: 1280px) {
  .m3an-grid {
    grid-template-columns: 1fr;
  }
  .m3an-grid--tables {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .panel.m3an {
    padding: 16px 14px 14px;
  }
  .m3an-head {
    flex-direction: column;
    gap: 8px;
  }
  .m3an-head__meta {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .m3an-kpis {
    grid-template-columns: 1fr;
  }
  .m3an-kpi__value {
    font-size: 22px;
  }
  .m3an-card__head--split {
    flex-direction: column;
    gap: 8px;
  }
  .m3an-linkbtn {
    align-self: flex-end;
  }
}

/* =========================================================================
   Module 1 · m1pro-* — premium redesign (Q1 2026)
   Shared shell, sub-nav, KPI tiles, filters, tables, portfolio cards.
   Built on top of the existing m3an design language.
   ========================================================================= */

/* m3an helpers used in Module 1 that weren't previously defined */
.m3an-th--center { text-align: center !important; }
.m3an-th--right { text-align: right !important; }
.m3an-th--action {
  width: 1%;
  text-align: right !important;
}
.m3an-td--center { text-align: center; }
.m3an-grid--cols2 {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 980px) {
  .m3an-grid--cols2 { grid-template-columns: 1fr; }
}
.m3an-rowbtn--primary {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}
.m3an-rowbtn--primary:hover {
  background: #1e40af;
  border-color: #1e40af;
  color: #fff;
}
.m3an-rowbtn--ghost {
  background: transparent;
  border-color: #e2e8f0;
  color: #475569;
}
.m3an-rowbtn--ghost:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.m3an-rowbtn--danger {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.m3an-rowbtn--danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}
.m3an-rowbtn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.m3an-rowbtn i {
  font-size: 13px;
  line-height: 1;
  margin-right: 4px;
}
.m3an-prov-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Active-filters chips (renamed shorthand) */
.m3-active-filters__lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
  margin-right: 4px;
}
.m3-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  cursor: pointer;
  transition: all 0.15s ease;
}
.m3-active-chip:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}
.m3-active-chip--clear {
  background: #fff;
  color: #b91c1c;
  border-color: #fecaca;
}
.m3-active-chip--clear:hover {
  background: #fef2f2;
}

/* Module 1 page shell */
.m1pro-shell {
  background: #f6f7fb;
}
.m1pro-shell > .topbar {
  background: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 16px;
}
.m1pro-shell > .topbar h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Sub-nav (m1pro-subnav) — replaces stacked tabs with a card-style nav strip */
.m1pro-subnav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 8px;
  margin-top: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.m1pro-subnav__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  font-family: inherit;
}
.m1pro-subnav__btn:hover {
  background: #f8fafc;
  color: #0f172a;
}
.m1pro-subnav__btn.is-active {
  background: linear-gradient(180deg, #1d4ed8 0%, #2563eb 100%);
  color: #fff;
  border-color: #1d4ed8;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
}
.m1pro-subnav__btn.is-active .m1pro-subnav__hint { color: rgba(255, 255, 255, 0.85); }
.m1pro-subnav__lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
}
.m1pro-subnav__hint {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.m1pro-subnav__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
}
.m1pro-subnav__btn.is-active .m1pro-subnav__pill {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.m1pro-subnav__pill--bad {
  background: #fee2e2;
  color: #b91c1c;
}
.m1pro-subnav__btn.is-active .m1pro-subnav__pill--bad {
  background: rgba(255, 255, 255, 0.95);
  color: #b91c1c;
}
.m1pro-subnav__btn--admin {
  background: #fafafa;
  border-color: #e5e7eb;
  border-style: dashed;
}
.m1pro-subnav__btn--admin.is-active {
  background: linear-gradient(180deg, #4b5563 0%, #374151 100%);
  border-color: #374151;
  border-style: solid;
}
@media (max-width: 1280px) {
  .m1pro-subnav { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .m1pro-subnav { grid-template-columns: 1fr 1fr; }
}

/* KPI strip — composition tiles with rail accent */
.m1pro-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.m1pro-kpis--readonly { gap: 12px; }
.m1pro-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  font-family: inherit;
  overflow: hidden;
}
.m1pro-kpi--readonly { cursor: default; }
/* Top accent stripe removed — active/hover state is carried by border +
   box-shadow + background only (design rule: no ::before accent stripes on
   cards). The :hover/.is-active ::before rules below are now harmless no-ops. */
.m1pro-kpi::before { content: none; }
.m1pro-kpi:hover {
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.m1pro-kpi:hover::before { opacity: 1; }
.m1pro-kpi--readonly:hover {
  transform: none;
  box-shadow: none;
}
.m1pro-kpi--readonly:hover::before { opacity: 0; }
.m1pro-kpi.is-active {
  border-color: var(--kpi-color, #1d4ed8);
  background: var(--kpi-bg, #eff6ff);
  box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.12);
}
.m1pro-kpi.is-active::before { opacity: 1; }
/* Old left rail kept as a no-op span for markup compatibility (hidden). */
.m1pro-kpi__rail { display: none; }
.m1pro-kpi__lens {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475569;
}
.m1pro-kpi__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kpi-color, #cbd5e1);
}
.m1pro-kpi__val {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.m1pro-kpi__hint {
  font-size: 12px;
  color: #64748b;
}
.m1pro-kpi__cta {
  font-size: 11px;
  font-weight: 600;
  color: var(--kpi-color, #475569);
  margin-top: 2px;
  letter-spacing: 0.01em;
}
.m1pro-kpi--readonly .m1pro-kpi__cta { display: none; }
.m1pro-kpi--ok    { --kpi-color: #047857; --kpi-bg: #ecfdf5; }
.m1pro-kpi--info  { --kpi-color: #1d4ed8; --kpi-bg: #eff6ff; }
.m1pro-kpi--warn  { --kpi-color: #b45309; --kpi-bg: #fffbeb; }
.m1pro-kpi--bad   { --kpi-color: #b91c1c; --kpi-bg: #fef2f2; }
@media (max-width: 1100px) { .m1pro-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .m1pro-kpis { grid-template-columns: 1fr; } }

/* Signal policy — user-tunable thresholds (Module 1 review queue) */
.m1pro-signal-panel {
  margin-top: 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fafbfc;
  overflow: hidden;
}
.m1pro-signal-panel__summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.02em;
}
.m1pro-signal-panel__summary::-webkit-details-marker { display: none; }
.m1pro-signal-panel__body {
  padding: 0 14px 14px;
  border-top: 1px solid #e2e8f0;
}

/* Workspace + queue collapsibles (Module 1 review) */
.m1-ws-collapse {
  margin-top: 10px;
}
.m1-ws-collapse + .m1-ws-collapse,
.m1-ws-collapse + details.m1pro-signal-panel {
  margin-top: 8px;
}
.m1-ws-collapse .m1pro-signal-panel__summary {
  user-select: none;
}
.m1-ws-collapse .m1pro-signal-panel__summary::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-right: 8px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: rotate(-45deg);
  vertical-align: 0.15em;
  transition: transform 0.15s ease;
}
.m1-ws-collapse[open] .m1pro-signal-panel__summary::before {
  transform: rotate(45deg);
  vertical-align: 0.05em;
}
.m1-ws-collapse--queue-help .m1pro-signal-panel__body {
  padding-top: 10px;
}
.m1-ws-section__head--inline {
  margin-bottom: 8px;
}
.m1pro-signal-lens--nested {
  border: none;
  padding: 0;
  background: transparent;
}
.m1-entity-review-inner,
.m1-group-panel-inner {
  padding-top: 4px;
}
.m1-ws-panels--context .m1-context-hero--inset {
  margin-bottom: 4px;
}

/* Module 5 · Dispute desk */
.m5-desk__kpis {
  margin-bottom: 14px;
}
.m5-desk__search {
  display: block;
  margin-bottom: 10px;
  max-width: 28rem;
}
.m5-desk__filters {
  margin-bottom: 0;
}
.m5-desk__filter-actions {
  display: flex;
  align-items: flex-end;
  padding-bottom: 2px;
}
.m5-desk__table-meta {
  margin: 10px 0 6px;
}
.m5-desk__pager {
  margin-top: 12px;
}
.m3an-kpi.is-active {
  box-shadow: 0 0 0 2px #2563eb;
}
.m5-slide .m2-slide__body {
  padding-bottom: 24px;
}
.m5-case-hero {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
}
.m5-case-hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 16px;
  font-size: 13px;
}
.m5-case-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.m5-case-hero__path {
  margin: 10px 0 0;
  max-width: 52ch;
}
.m5-kv {
  display: grid;
  gap: 8px;
}
.m5-kv--compact {
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}
.m5-kv__row {
  font-size: 13px;
}
.m5-kv__row--full {
  grid-column: 1 / -1;
}
.m5-kv__k {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 2px;
}
.m5-action-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 13px;
  line-height: 1.45;
}
.m5-mini-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.m5-mini-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #e5e7eb;
  font-size: 13px;
}
.m5-audit-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.m5-audit-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #e5e7eb;
  font-size: 13px;
}
.m5-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}
.m5-bar-row__label {
  width: 118px;
  flex-shrink: 0;
  font-size: 12px;
  color: #64748b;
}
.m5-bar-row__label--wide {
  flex: 1;
  width: auto;
}
.m5-bar-row__track {
  flex: 1;
  background: #e2e8f0;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
}
.m5-bar-row__track--thin {
  height: 8px;
  max-width: 280px;
}
.m5-bar-row__track > span {
  display: block;
  height: 100%;
}
.m5-bar-row__val {
  width: 28px;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
}
.m5-analytics__kpis {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.m5-analytics__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.m5-analytics__split {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
}
.m5-analytics__card {
  padding: 14px;
}
.m5-analytics__card-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
}
.m3an-head--tight {
  margin-bottom: 12px;
}

.m1pro-signal-panel__intro { margin: 10px 0 12px; max-width: 56rem; }
.m1pro-signal-thresholds {
  margin: 14px 0 16px;
  padding: 14px 12px;
  border-radius: 10px;
  border: 1px solid #c7d2fe;
  background: #f8fafc;
}
.m1pro-signal-thresholds__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1e3a8a;
  margin-bottom: 6px;
}
.m1pro-signal-thresholds__lead { margin: 0 0 12px; max-width: 56rem; line-height: 1.45; }
.m1pro-signal-rules {
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #cbd5e1;
}
.m1pro-signal-rules__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 10px;
}
.m1pro-signal-rules__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 14px;
}
.m1pro-signal-rule {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
}
.m1pro-signal-rule input[type="checkbox"] {
  grid-row: 1 / span 2;
  margin-top: 2px;
  width: 14px;
  height: 14px;
  accent-color: #1d4ed8;
  cursor: pointer;
}
.m1pro-signal-rule__lbl {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.m1pro-signal-rule__hint {
  grid-column: 2;
  line-height: 1.35;
}
.m1pro-signal-explainer {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  font-size: 12.5px;
  line-height: 1.45;
  color: #1e3a5f;
}
.m1pro-signal-explainer code {
  font-size: 11.5px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #bfdbfe;
}
.m1pro-signal-rules__sub { margin: -4px 0 12px; max-width: 52rem; }
.m1pro-signal-rules__section { margin-bottom: 12px; }
.m1pro-signal-rules__section:last-child { margin-bottom: 0; }
.m1pro-signal-rules__minititle {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 8px;
}
.m1pro-signal-rules__grid--binary {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.m1pro-signal-rule--binary {
  grid-template-rows: auto;
  align-items: center;
}
.m1pro-signal-rule--binary .m1pro-signal-rule__hint { display: none; }
.m1pro-signal-rule--binary .m1pro-signal-rule__lbl { grid-column: 2; }
.m1pro-signal-na {
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
}
.m1pro-signal-field--check {
  flex: 1 1 220px;
  align-items: flex-start;
}
.m1pro-check--block { width: 100%; align-items: flex-start; }
.m1pro-signal-lens {
  margin: 12px 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #c7d2fe;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}
.m1pro-signal-lens--ws,
.m1pro-signal-lens--empty {
  margin-top: 0;
}
.m1pro-signal-lens__head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  margin-bottom: 10px;
}
.m1pro-signal-lens__head strong { font-size: 13px; color: #0f172a; }
.m1pro-signal-lens__sub { display: flex; flex-direction: column; gap: 6px; }
.m1pro-signal-lens__subttl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
}
.m1pro-signal-lens__groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.m1pro-signal-lens__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.m1pro-signal-lens__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 12.5px;
  color: #334155;
  cursor: pointer;
  user-select: none;
}
.m1pro-signal-lens__item--binary { border-style: dashed; }
.m1pro-signal-lens__item input { accent-color: #1d4ed8; cursor: pointer; }
.m1pro-signal-lens__item input:disabled { opacity: 0.45; cursor: not-allowed; }
.m1pro-signal-lens__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.m1-signals-live {
  margin: 0 0 16px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fafbfc;
}
.m1-signals-live__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 8px;
}
.m1-signals-livechips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.m1pro-ws-empty .m1pro-signal-lens--empty { margin-top: 8px; text-align: left; }
.m1pro-signal-toggles__lead {
  flex: 1 0 100%;
  margin: 0 0 2px;
}
.m1pro-signal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 16px;
  align-items: end;
}
.m1pro-signal-field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.m1pro-signal-field label {
  width: 100%;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
}
.m1pro-signal-field .field {
  width: 72px;
  min-height: 36px;
}
.m1pro-signal-field__unit { font-size: 12px; color: #64748b; font-weight: 600; }
.m1pro-signal-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #cbd5e1;
}
.m1pro-signal-panel__foot { margin-top: 12px; }

/* Compressed filter bar v2 — replaces the old 4-KPI-tile row + 3 dropdowns + 3 toggles
   with: quick-stats line · 5-control filter row · active-filter chips. */
.m1pro-quick-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 22px;
  padding: 10px 0 14px;
  font-size: 12.5px;
  color: var(--d3-ink-2);
}
.m1pro-quick-stats__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.m1pro-quick-stats__item strong { color: var(--d3-ink); font-weight: 700; }
.m1pro-quick-stats__item i { font-size: 14px; color: var(--d3-muted); }
.m1pro-quick-stats__item--warn i { color: #f59e0b; }
.m1pro-quick-stats__item--bad  i { color: #ef4444; }
.m1pro-quick-stats__item--info i { color: #3b82f6; }

.m1pro-filters--v2 {
  display: grid;
  /* Row 1: 4 controls (Search · Region · Industry · Risk chips).
     Row 2: Workflow chips spanning full width. */
  grid-template-columns: minmax(220px, 1.6fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(280px, 1.4fr);
  gap: 14px 16px;
  align-items: end;
  padding: 16px 18px;
  background: var(--d3-surface);
  border: 1px solid var(--d3-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.m1pro-filters--v2 .field,
.m1pro-filters--v2 select.field,
.m1pro-filters--v2 input.field {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--d3-line-strong);
  border-radius: 8px;
  background: var(--d3-surface);
  font-size: 13px;
  color: var(--d3-ink);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.m1pro-filters--v2 input.field { padding: 0 12px; }
.m1pro-filters--v2 .field:hover { border-color: var(--d3-ink-2); }
.m1pro-filters--v2 .field:focus,
.m1pro-filters--v2 .field:focus-visible {
  outline: none;
  border-color: var(--d3-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--d3-accent) 18%, transparent);
}
@media (max-width: 1200px) {
  .m1pro-filters--v2 { grid-template-columns: 1fr 1fr; }
}
.m1pro-filters--v2 label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d3-muted);
  margin-bottom: 6px;
}
.m1pro-filters--v2 label i { font-size: 12px; line-height: 1; }

.m1pro-chipgroup {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
/* Wrap variant — used for the multi-select Workflow-state chips; allows the
   group to span the full filter-cell width and wrap to 2 rows on narrow viewports. */
.m1pro-chipgroup--wrap {
  align-content: flex-start;
}
.m1pro-workflow-chips {
  grid-column: 1 / -1; /* full width on row 2 */
}
.m1pro-chipgroup__hint {
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--d3-muted);
  margin-left: 8px;
  opacity: 0.85;
}
/* Counted chips: chip carries a small numeric badge after the label.
   Active state uses solid fill (per tone). */
.m1pro-chipgroup--counted .m1pro-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 14px;
  border-width: 1px;
  font-weight: 600;
}
.m1pro-chip__label { font-weight: 600; }
.m1pro-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--d3-surface-2);
  color: var(--d3-muted);
  border: 1px solid var(--d3-line);
}
.m1pro-chip:hover .m1pro-chip__count { background: var(--d3-surface); }
.m1pro-chip.is-active .m1pro-chip__count {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.30);
}
.m1pro-chip--ok:not(.is-active) {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.m1pro-chip--ok:not(.is-active) .m1pro-chip__count {
  background: rgba(6, 95, 70, 0.08);
  color: #065f46;
  border-color: rgba(6, 95, 70, 0.18);
}
.m1pro-chip--warn:not(.is-active) {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.m1pro-chip--warn:not(.is-active) .m1pro-chip__count {
  background: rgba(146, 64, 14, 0.08);
  color: #92400e;
  border-color: rgba(146, 64, 14, 0.18);
}
.m1pro-chip--bad:not(.is-active) {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.m1pro-chip--bad:not(.is-active) .m1pro-chip__count {
  background: rgba(153, 27, 27, 0.08);
  color: #991b1b;
  border-color: rgba(153, 27, 27, 0.18);
}

/* Search field — leading icon inside the input. */
.m1pro-search-wrap {
  position: relative;
}
.m1pro-search__ic {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--d3-muted);
  pointer-events: none;
}
.m1pro-search__input {
  padding-left: 34px !important;
}

/* Cash-impact column on the queue table — heuristic ₹ recoverable value
   with a small "heuristic" tag so operators don't read it as a model output. */
.m1pro-cashimpact {
  white-space: nowrap;
}
.m1pro-cashimpact__val {
  font-weight: 700;
  color: var(--d3-ink);
  font-variant-numeric: tabular-nums;
}
.m1pro-cashimpact__tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--d3-surface-2);
  color: var(--d3-muted);
  border: 1px solid var(--d3-line);
  vertical-align: middle;
  cursor: help;
}

/* M2 queue header — eyebrow + bold title + supporting paragraph + count pill
   on the right. Visual hierarchy without colored chrome. */
.m2-queue__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--d3-line);
  margin-bottom: 16px;
}
.m2-queue__head-main { flex: 1 1 auto; min-width: 0; }
.m2-queue__head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--d3-accent);
  margin-bottom: 6px;
}
.m2-queue__head .eyebrow i { font-size: 13px; line-height: 1; }
.m2-queue__title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--d3-ink);
  line-height: 1.25;
}
.m2-queue__sub {
  margin: 0;
  font-size: 13.5px;
  color: var(--d3-ink-2);
  line-height: 1.5;
  max-width: 76ch;
}
.m2-queue__sub strong { color: var(--d3-ink); font-weight: 600; }
.m2-queue__head-meta { flex-shrink: 0; }
.m2-queue__count-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--d3-surface-2);
  border: 1px solid var(--d3-line);
  font-size: 12.5px;
  color: var(--d3-ink-2);
  cursor: help;
  font-variant-numeric: tabular-nums;
}
.m2-queue__count-pill strong { color: var(--d3-ink); font-weight: 700; }
.m2-queue__count-sep { color: var(--d3-muted); }

/* M2 quick-stat strip — visible weight without colored chrome. Each tile is
   icon-square + value + label. Tinted backgrounds use the same accent palette
   as the workflow chips so the page reads as one design system. */
.m2-statstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
}
.m2-statstrip__tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--d3-line);
  background: var(--d3-surface);
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.m2-statstrip__tile:hover {
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03), 0 6px 16px -10px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}
.m2-statstrip__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--d3-surface-2);
  color: var(--d3-muted);
  flex-shrink: 0;
}
.m2-statstrip__ic i { font-size: 16px; line-height: 1; }
.m2-statstrip__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.m2-statstrip__val {
  font-size: 18px;
  font-weight: 700;
  color: var(--d3-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.m2-statstrip__lbl {
  font-size: 11px;
  color: var(--d3-muted);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m2-statstrip__tile--info  .m2-statstrip__ic { background: #eef2ff; color: #4338ca; }
.m2-statstrip__tile--ok    .m2-statstrip__ic { background: #ecfdf5; color: #047857; }
.m2-statstrip__tile--warn  .m2-statstrip__ic { background: #fffbeb; color: #b45309; }
.m2-statstrip__tile--bad   .m2-statstrip__ic { background: #fef2f2; color: #b91c1c; }
.m2-statstrip__tile--info:hover  { border-color: #c7d2fe; }
.m2-statstrip__tile--ok:hover    { border-color: #a7f3d0; }
.m2-statstrip__tile--warn:hover  { border-color: #fde68a; }
.m2-statstrip__tile--bad:hover   { border-color: #fecaca; }
/* Active state — when stat tile is also a filter chip (Action Center). */
.m2-statstrip__tile--active {
  border-width: 2px;
  border-color: var(--d3-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--d3-accent) 18%, transparent);
}
button.m2-statstrip__tile {
  appearance: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
button.m2-statstrip__tile:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--d3-accent) 25%, transparent);
}

/* M2 Prevention — production-reality note. Reminds operators the form is
   demo / what-if, not their daily workflow (that's an ERP-triggered preview). */
.m2pre-production-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin: 14px 0;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  font-size: 12.5px;
  color: #1e3a8a;
  line-height: 1.55;
}
.m2pre-production-note i {
  font-size: 16px;
  color: #4338ca;
  flex-shrink: 0;
  margin-top: 1px;
}
.m2pre-production-note strong { color: #1e3a8a; }

/* M2 Governance — summary line + collapsible detail. Reduces always-on noise
   for admin metrics most operators never need. */
.m2-gov-summary {
  font-size: 14px;
  color: var(--d3-ink);
  line-height: 1.6;
  margin: 0;
}
.m2-gov-summary strong {
  font-variant-numeric: tabular-nums;
  color: var(--d3-ink);
}
.m2-gov-details {
  border-top: 1px solid var(--d3-line);
  padding-top: 14px;
}
.m2-gov-details__summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: var(--d3-ink);
  font-weight: 600;
  font-size: 13px;
}
.m2-gov-details__summary::-webkit-details-marker { display: none; }
.m2-gov-details__summary i {
  font-size: 16px;
  color: var(--d3-muted);
  transition: transform 200ms ease;
}
.m2-gov-details[open] > .m2-gov-details__summary i { transform: rotate(180deg); }
.m2-gov-details__summary:hover { color: var(--d3-accent); }
.m2-gov-details__summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--d3-accent) 25%, transparent);
  border-radius: 6px;
}
.m2-gov-details__body {
  padding-top: 8px;
}
.m1pro-chip {
  appearance: none;
  border: 1px solid var(--d3-line);
  background: var(--d3-surface);
  color: var(--d3-ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.m1pro-chip:hover {
  background: var(--d3-surface-2);
  border-color: var(--d3-line-strong);
}
.m1pro-chip.is-active {
  background: var(--d3-ink);
  color: #ffffff;
  border-color: var(--d3-ink);
}
.m1pro-chip--ok.is-active   { background: #047857; border-color: #047857; }
.m1pro-chip--warn.is-active { background: #b45309; border-color: #b45309; }
.m1pro-chip--bad.is-active  { background: #b91c1c; border-color: #b91c1c; }
.m1pro-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--d3-accent) 25%, transparent);
}

/* Filters & toggles strip */
.m1pro-filters { margin-top: 4px; }
.m1pro-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px 14px;
  margin-top: 8px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.m1pro-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  user-select: none;
}
.m1pro-check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #1d4ed8;
  cursor: pointer;
}

/* Queue table */
.m1pro-tablewrap {
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #fff;
}
.m1pro-tablewrap--tight { margin-top: 6px; }
.m1pro-qtable thead th,
.m1pro-exctable thead th,
.m1pro-groupstable thead th {
  background: #f8fafc;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11px;
  color: #475569;
}

.m1pro-customer { display: flex; flex-direction: column; gap: 2px; }
.m1pro-customer__name {
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.005em;
}
.m1pro-customer__id {
  font-size: 11.5px;
  color: #64748b;
  letter-spacing: 0.02em;
}
.m1pro-customer__reason {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  margin-top: 2px;
  padding: 2px 8px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
}
/* Primary triage line (ranked reason) — stronger than signal chips */
.m1pro-customer__primary {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.m1pro-customer__detail {
  margin-top: 3px;
  line-height: 1.35;
  max-width: 42rem;
}

.m1pro-queue__rules {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 12px;
  line-height: 1.45;
  color: #475569;
  max-width: 72rem;
}
.m1pro-queue__rules strong { color: #0f172a; font-weight: 700; }
.m1pro-queue__rules--sub {
  margin-top: 6px;
  font-size: 11.5px;
  color: #64748b;
}
.m1pro-queue__rules-sep { margin: 0 0.35em; color: #94a3b8; }

.m3an-toolbar__hint--rule {
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

/* Health pill */
.m1pro-health {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12.5px;
}
.m1pro-health--ok   { background: #dcfce7; color: #15803d; }
.m1pro-health--info { background: #dbeafe; color: #1d4ed8; }
.m1pro-health--warn { background: #fef3c7; color: #92400e; }
.m1pro-health--bad  { background: #fee2e2; color: #b91c1c; }

/* Util column with tiny bar */
.m1pro-util {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 88px;
}
.m1pro-util__num { font-size: 12.5px; font-weight: 600; }
.m1pro-util__num--ok   { color: #047857; }
.m1pro-util__num--near { color: #b45309; }
.m1pro-util__num--warn { color: #d97706; }
.m1pro-util__num--bad  { color: #b91c1c; }
.m1pro-util__bar {
  position: relative;
  width: 80px;
  height: 4px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.m1pro-util__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--bar-color, #94a3b8);
}
.m1pro-util__bar--ok   { --bar-color: #10b981; }
.m1pro-util__bar--near { --bar-color: #f59e0b; }
.m1pro-util__bar--warn { --bar-color: #f97316; }
.m1pro-util__bar--bad  { --bar-color: #ef4444; }

/* Signal cell */
.m1pro-sigcell {
  padding-top: 10px;
  padding-bottom: 10px;
  opacity: 0.92;
}
.m1pro-sigcell .m1pro-sigchip {
  font-size: 10px;
  font-weight: 500;
}
.m1pro-sigchip {
  display: inline-block;
  padding: 2px 7px;
  margin: 1px 2px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.m1pro-sigchip--info { background: #e0e7ff; color: #4338ca; }
.m1pro-sigchip--warn { background: #fef3c7; color: #92400e; }
.m1pro-sigchip--bad  { background: #fee2e2; color: #b91c1c; }

/* Empty rows */
.m1pro-empty-row {
  text-align: center;
  padding: 28px 16px !important;
  color: #64748b;
  font-size: 13px;
  background: #fafbfc;
}
.m1pro-empty {
  margin-top: 16px;
  padding: 28px 24px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #fafbfc;
  text-align: center;
}
.m1pro-empty strong {
  display: block;
  font-size: 15px;
  color: #0f172a;
  margin-bottom: 4px;
}
.m1pro-empty p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  max-width: 56ch;
  margin-inline: auto;
}
.m1pro-empty--soft {
  padding: 18px;
  font-size: 13px;
  color: #64748b;
}

/* Exception table cells */
.m1pro-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.m1pro-pill--ok      { background: #dcfce7; color: #166534; }
.m1pro-pill--bad     { background: #fee2e2; color: #b91c1c; }
.m1pro-pill--warn    { background: #fef3c7; color: #92400e; }
.m1pro-pill--info    { background: #dbeafe; color: #1d4ed8; }
.m1pro-pill--neutral { background: #f1f5f9; color: #475569; }

.m1pro-tag-routed {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  background: #ede9fe;
  color: #5b21b6;
  font-weight: 500;
}
.m1pro-exc-change { font-size: 13px; color: #0f172a; }
.m1pro-exc-prop {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 12px;
  color: #334155;
}
.m1pro-applied {
  display: inline-block;
  padding: 1px 7px;
  margin-left: 4px;
  border-radius: 6px;
  background: #dcfce7;
  color: #166534;
  font-size: 11px;
  font-weight: 500;
}
.m1pro-applied-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  background: #dcfce7;
  color: #166534;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.m1pro-aging {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}
.m1pro-aging--fresh    { background: #dbeafe; color: #1d4ed8; }
.m1pro-aging--due-soon { background: #fef3c7; color: #92400e; }
.m1pro-aging--overdue  { background: #fee2e2; color: #b91c1c; }
.m1pro-waiting {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.m1pro-waiting--analyst { background: #e0e7ff; color: #4338ca; }
.m1pro-waiting--risk    { background: #fef3c7; color: #92400e; }
.m1pro-waiting--done    { background: #f1f5f9; color: #64748b; }

.m1pro-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* Recommendations card */
.m1pro-rec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m1pro-rec {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--d3-line);
  border-radius: 10px;
  background: var(--d3-surface);
}
.m1pro-rec__sev {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--d3-surface-2);
  color: var(--rec-color, var(--d3-muted));
}
.m1pro-rec__sev i { font-size: 18px; line-height: 1; }
.m1pro-rec--ok   { --rec-color: #047857; }
.m1pro-rec--ok   .m1pro-rec__sev { background: #ecfdf5; }
.m1pro-rec--info { --rec-color: #1d4ed8; }
.m1pro-rec--info .m1pro-rec__sev { background: #eef2ff; }
.m1pro-rec--warn { --rec-color: #b45309; }
.m1pro-rec--warn .m1pro-rec__sev { background: #fffbeb; }
.m1pro-rec--bad  { --rec-color: #b91c1c; }
.m1pro-rec--bad  .m1pro-rec__sev { background: #fef2f2; }
.m1pro-rec__body { flex: 1; min-width: 0; }
.m1pro-rec__title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}
.m1pro-rec__desc {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: #475569;
  line-height: 1.5;
}
.m1pro-rec__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.m1pro-rec__pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  margin-top: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.m1pro-rec__pick-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.m1pro-rec__pick-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.m1pro-rec__pick-row select {
  flex: 1;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  color: #0f172a;
}

/* Concentration bar cards */
.m1pro-conccard .m3an-card__head {
  margin-bottom: 8px;
}
.m1pro-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.m1pro-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.12s ease;
}
.m1pro-bar:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
}
.m1pro-bar--static { cursor: default; }
.m1pro-bar--static:hover { background: transparent; border-color: transparent; }
.m1pro-bar.is-flagged {
  background: linear-gradient(90deg, #fef3c7 0%, #fffbeb 100%);
  border-color: #fde68a;
}
.m1pro-bar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.m1pro-bar__label {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.005em;
}
.m1pro-bar__meta {
  font-size: 11.5px;
  color: #64748b;
  white-space: nowrap;
}
.m1pro-bar__track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}
.m1pro-bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%);
}
.m1pro-bar__track--alt .m1pro-bar__fill {
  background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 100%);
}
.m1pro-bar__track--alt2 .m1pro-bar__fill {
  background: linear-gradient(90deg, #06b6d4 0%, #0ea5e9 100%);
}
.m1pro-bar.is-flagged .m1pro-bar__fill {
  background: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%);
}

/* Heatmap */
.m1pro-heatcard { margin-top: 16px; }
.m1pro-heatmap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.m1pro-heatmap__row {
  display: grid;
  grid-template-columns: 160px repeat(auto-fit, minmax(86px, 1fr));
  gap: 4px;
}
.m1pro-heatmap__row--head .m1pro-heatmap__cell {
  background: transparent;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  padding: 6px 8px;
}
.m1pro-heatmap__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  color: #0f172a;
  min-height: 56px;
  background: #f8fafc;
  transition: transform 0.15s ease;
}
.m1pro-heatmap__cell strong {
  font-size: 13px;
  font-weight: 700;
}
.m1pro-heatmap__cell small {
  font-size: 10.5px;
  color: rgba(15, 23, 42, 0.7);
}
.m1pro-heatmap__cell:hover {
  transform: scale(1.02);
}
/* Clickable variant — heatmap cells with data drill into the queue filtered
   to that region × industry cohort. Reset button defaults + add focus ring. */
.m1pro-heatmap__cell--clickable {
  appearance: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.m1pro-heatmap__cell--clickable:hover {
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.25);
}
.m1pro-heatmap__cell--clickable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--d3-accent) 35%, transparent);
}
.m1pro-heatmap__cell--corner { background: transparent; min-height: auto; }
.m1pro-heatmap__cell--label {
  background: #f1f5f9;
  font-weight: 600;
  font-size: 12px;
  color: #334155;
}
.m1pro-heatmap__cell--empty { background: #fafbfc; opacity: 0.5; }
.m1pro-heatlegend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  font-size: 11.5px;
  color: #64748b;
  align-items: center;
}
.m1pro-heatlegend__sw {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
}

/* Stress scenarios */
.m1pro-stress__seg {
  display: inline-flex;
  padding: 4px;
  background: #f1f5f9;
  border-radius: 10px;
  margin-bottom: 12px;
}
.m1pro-stress__btn {
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.m1pro-stress__btn:hover { color: #0f172a; }
.m1pro-stress__btn.is-active {
  background: #fff;
  color: #1d4ed8;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.m1pro-stress__out {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
  background: #fafbfc;
}
.m1pro-stress__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.m1pro-stress__head strong {
  font-size: 14px;
  color: #0f172a;
}
.m1pro-stress__kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.m1pro-stress__kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.m1pro-stress__kpi span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  font-weight: 600;
}
.m1pro-stress__kpi strong {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.m1pro-stress__kpi--wide { grid-column: span 2; }
.m1pro-stress__narrative {
  margin-top: 10px;
  font-size: 12.5px;
  color: #475569;
  line-height: 1.55;
}
.m1pro-stress__placeholder {
  margin: 0;
  padding: 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #fafbfc;
  font-size: 13px;
  color: #64748b;
  text-align: center;
}

/* Forward-looking exposure card — two honest panels (concentration + aging cliff)
   that replaced the Illustrative stress-scenarios block. Both read real data. */
.m1pro-fwd { display: flex; flex-direction: column; gap: 18px; }
.m1pro-fwd__panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--d3-line);
  border-radius: 12px;
  background: var(--d3-surface);
}
.m1pro-fwd__lens {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--d3-muted);
}
.m1pro-fwd__lens i { font-size: 13px; line-height: 1; color: var(--d3-accent); }
.m1pro-fwd__line {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--d3-ink);
}
.m1pro-fwd__amt {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--d3-ink);
}
.m1pro-fwd__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.m1pro-fwd__list li {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--d3-ink-2);
}
.m1pro-fwd__list li:hover { background: var(--d3-surface-2); }
.m1pro-fwd__rank {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--d3-muted);
  letter-spacing: 0.04em;
}
.m1pro-fwd__name {
  font-weight: 600;
  color: var(--d3-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m1pro-fwd__amt-row {
  font-variant-numeric: tabular-nums;
  color: var(--d3-muted);
  font-size: 11.5px;
}
.m1pro-fwd__bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--d3-surface-2);
  box-shadow: inset 0 0 0 1px var(--d3-line);
}
.m1pro-fwd__seg {
  display: block;
  height: 100%;
}
.m1pro-fwd__seg + .m1pro-fwd__seg {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.6);
}
.m1pro-fwd__legend {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
  font-size: 11.5px;
  color: var(--d3-ink-2);
}
.m1pro-fwd__legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.m1pro-fwd__legend strong {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--d3-ink);
}
.m1pro-fwd__sw {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.m1pro-fwd__cta {
  align-self: flex-start;
  font-size: 12px;
  padding: 6px 12px;
  min-height: 0;
}

/* Groups needing review (compact table) */
.m1pro-needcount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
}
.m1pro-needcount--ok   { background: #dcfce7; color: #166534; }
.m1pro-needcount--warn { background: #fef3c7; color: #92400e; }
.m1pro-needcount--bad  { background: #fee2e2; color: #b91c1c; }

/* Customer workspace tabs (m1pro-wstabs) */
.m1pro-wstabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 16px;
}
.m1pro-wstabs__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  font-family: inherit;
}
.m1pro-wstabs__btn:hover { background: #f8fafc; }
.m1pro-wstabs__btn.is-active {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.m1pro-wstabs__lbl {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.m1pro-wstabs__lbl i { font-size: 14px; line-height: 1; }
.m1pro-wstabs__btn.is-active .m1pro-wstabs__lbl { color: #1d4ed8; }
.m1pro-wstabs__hint { font-size: 11px; color: #94a3b8; }
@media (max-width: 900px) {
  .m1pro-wstabs { grid-template-columns: 1fr 1fr; }
}

.m1pro-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 8px;
  font-family: inherit;
}
.m1pro-back:hover {
  border-color: #cbd5e1;
  color: #0f172a;
}

/* Activity panel — premium feed */
.m1pro-activity { margin-top: 16px; }
.m1pro-activity__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.m1pro-activity__item {
  position: relative;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
}
.m1pro-activity__item:last-child { border-bottom: none; }
.m1pro-activity__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--act-color, #94a3b8);
  margin: 0 auto;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15);
}
.m1pro-activity__item--ok   { --act-color: #10b981; }
.m1pro-activity__item--info { --act-color: #1d4ed8; }
.m1pro-activity__item--warn { --act-color: #f59e0b; }
.m1pro-activity__item--bad  { --act-color: #ef4444; }
.m1pro-activity__body { display: flex; flex-direction: column; gap: 1px; }
.m1pro-activity__body strong {
  font-size: 13px;
  color: #0f172a;
  font-weight: 600;
}
.m1pro-activity__body span {
  font-size: 12px;
  color: #64748b;
}
.m1pro-activity__meta {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
}

/* Workspace hero (m1pro-ws-hero) — slightly tighter */
.m1pro-workspace .m1-ws-hero {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
  border: 1px solid #e5e7eb;
}

/* Toolbar count + page-size styling refinement */
.m3an-toolbar__count { font-weight: 600; color: #0f172a; }
.m3an-page-size__lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  font-weight: 600;
  margin-right: 6px;
}

@media (max-width: 720px) {
  .m1pro-stress__kpis { grid-template-columns: 1fr; }
  .m1pro-stress__kpi--wide { grid-column: auto; }
  .m1pro-actions { align-items: stretch; }
}

/* Customer workspace — empty state */
.m1pro-ws-empty .m3an-head {
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 0;
  padding-bottom: 14px;
}
.m1pro-ws-empty__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 24px 28px;
  gap: 12px;
}
.m1pro-ws-empty__art {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  margin-bottom: 4px;
}
.m1pro-ws-empty__body strong {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.m1pro-ws-empty__body p {
  margin: 0;
  font-size: 13.5px;
  color: #475569;
  max-width: 56ch;
  line-height: 1.55;
}
.m1pro-ws-empty__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.m1pro-ws-empty__hint {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  margin-top: 6px !important;
}

/* ===========================================================
   Action center — single triage inbox merging Exceptions,
   Escalations, Holds and Watch into one table.
   =========================================================== */
.m1pro-actioncenter .m1pro-kpis {
  margin-top: 12px;
}

/* Toolbar — segmented type filter on the left, additional dropdown
   filters on the right. Wraps cleanly on small viewports. */
.m1pro-ac-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.m1pro-ac-toolbar__filters {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.m1pro-ac-toolbar__filters .m3an-field {
  min-width: 160px;
}

/* Segmented type filter — Linear/Notion-style chip group */
.m1pro-typeseg {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  flex-wrap: wrap;
}
.m1pro-typeseg__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #475569;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  letter-spacing: 0.01em;
}
.m1pro-typeseg__btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.m1pro-typeseg__btn.is-active {
  background: #1e293b;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.m1pro-typeseg__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #e2e8f0;
  color: #475569;
}
.m1pro-typeseg__btn.is-active .m1pro-typeseg__count {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* Type pill in the table — colored badge so the row's nature is
   readable at a glance. */
.m1pro-typepill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
}
.m1pro-typepill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.m1pro-typepill--exc {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.m1pro-typepill--esc {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.m1pro-typepill--hold {
  background: #fff7ed;
  color: #b45309;
  border: 1px solid #fed7aa;
}
.m1pro-typepill--watch {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

/* Action-center table */
.m1pro-actable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.m1pro-actable .m3an-th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 10px 12px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.m1pro-actable .m3an-th--type { width: 110px; }
.m1pro-actable tbody td {
  vertical-align: top;
  padding: 14px 12px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12.5px;
  color: #1e293b;
}
.m1pro-actable .m3an-td--type { width: 110px; }

/* Row tinting — subtle left border keyed to type. Helps the eye
   group same-type items even when the table is sorted by aging. */
.m1pro-acrow {
  position: relative;
}
.m1pro-acrow td:first-child {
  position: relative;
}
.m1pro-acrow td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
}
.m1pro-acrow--exception td:first-child::before { background: #3b82f6; }
.m1pro-acrow--escalation td:first-child::before { background: #ef4444; }
.m1pro-acrow--hold td:first-child::before { background: #f59e0b; }
.m1pro-acrow--watch td:first-child::before { background: #94a3b8; }

.m1pro-acrow:hover td {
  background: #fafbfc;
}
.m1pro-acrow:last-child td { border-bottom: none; }

/* Detail cell — title + chips + sub line */
.m1pro-ac-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 360px;
}
.m1pro-ac-detail__head {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
}
.m1pro-ac-detail__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.m1pro-ac-detail__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 2px 8px;
}
.m1pro-ac-detail__chip strong {
  color: #0f172a;
  font-weight: 700;
}
.m1pro-ac-detail__sub {
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.4;
}

/* Action stack — vertical button column in the rightmost cell.
   Buttons are tighter than elsewhere because most rows have 2–3. */
.m1pro-actable .m1pro-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  min-width: 130px;
}
.m1pro-actable .m1pro-actions .m3an-rowbtn {
  white-space: nowrap;
  font-size: 12px;
  padding: 6px 10px;
}

/* Responsive — collapse the type filter to wrap and tighten table padding */
@media (max-width: 1100px) {
  .m1pro-actable tbody td { padding: 12px 10px; }
  .m1pro-ac-detail { max-width: 280px; }
}
@media (max-width: 840px) {
  .m1pro-ac-toolbar { flex-direction: column; align-items: stretch; }
  .m1pro-ac-toolbar__filters { width: 100%; }
}

/* ===========================================================
   Module 4 v2 — Collections (My day, Allocation, ROI)
   =========================================================== */

/* Sub-nav: 3 tabs (vs Module 1's 5) — slightly wider buttons. */
.m4pro-subnav {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 720px) {
  .m4pro-subnav { grid-template-columns: 1fr !important; }
}

/* ---------- Persona switcher (My day · "Viewing as ...") ---------- */
.m4pro-persona {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid #e2e8f0;
  border-radius: 999px;
}
.m4pro-persona__lbl {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.m4pro-persona__sel {
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.m4pro-persona__sel:hover { background: #f1f5f9; }
.m4pro-persona__sel:focus { outline: 2px solid #3b82f6; outline-offset: 1px; }
.m4pro-persona__hint {
  font-size: 11px;
  color: #64748b;
  border-left: 1px solid #e2e8f0;
  padding-left: 10px;
}

/* ---------- AI lane banner ---------- */
.m4pro-aibanner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 10px;
  padding: 14px 18px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
}
.m4pro-aibanner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #dbeafe;
  color: #1d4ed8;
  border-radius: 10px;
  font-size: 19px;
  line-height: 1;
  flex-shrink: 0;
}
.m4pro-aibanner__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.m4pro-aibanner__body strong { font-size: 14px; color: #0f172a; }
.m4pro-aibanner__body span { font-size: 12px; color: #475569; }
.m4pro-aibanner__btn {
  background: #1d4ed8;
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.m4pro-aibanner__btn:hover { background: #1e40af; }
.m4pro-aibanner__btn i { font-size: 12px; line-height: 1; }

/* ---------- ROI illustrative banner ---------- */
.m4pro-illusbanner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 0;
  padding: 14px 18px;
  background: #fffbf0;
  border: 1px solid #fde68a;
  border-radius: 12px;
}
.m4pro-illusbanner__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #fef3c7;
  color: #b45309;
  border-radius: 10px;
  font-size: 19px;
  line-height: 1;
  flex-shrink: 0;
}
.m4pro-illusbanner__body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.m4pro-illusbanner__body strong { font-size: 13.5px; color: #78350f; }
.m4pro-illusbanner__body span { font-size: 12px; color: #92400e; line-height: 1.5; }

/* ---------- Auto-allocate preview + Reset confirm banners (Allocation tab) ---------- */
.m4pro-preview {
  margin: 14px 0 0;
  padding: 16px 18px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.m4pro-preview--danger {
  background: #fef2f2;
  border-color: #fecaca;
}
.m4pro-preview__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.m4pro-preview__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #1d4ed8;
}
.m4pro-preview__title--danger { color: #b91c1c; }
.m4pro-preview__title i { font-size: 16px; line-height: 1; }
.m4pro-preview__summary {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #475569;
}
.m4pro-preview__summary strong { color: #0f172a; font-variant-numeric: tabular-nums; }
.m4pro-preview__warn { color: #b91c1c !important; }
.m4pro-preview__details summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: #1d4ed8;
  list-style: none;
}
.m4pro-preview__details summary::-webkit-details-marker { display: none; }
.m4pro-preview__details summary i { font-size: 13px; line-height: 1; }
.m4pro-preview__table { margin-top: 10px; }
.m4pro-preview__actions {
  display: inline-flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ---------- Action card overflow menu ---------- */
.m4pro-actioncard__overflow {
  position: relative;
  display: inline-block;
}
.m4pro-actioncard__overbtn {
  padding: 6px 10px;
  min-width: 0;
}
.m4pro-actioncard__overbtn i { margin: 0; font-size: 16px; }
.m4pro-actioncard__overmenu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.22), 0 1px 0 rgba(15, 23, 42, 0.03);
  display: flex;
  flex-direction: column;
  min-width: 240px;
  padding: 6px;
  z-index: 30;
}
.m4pro-actioncard__overmenu button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #1f2937;
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.m4pro-actioncard__overmenu button:hover { background: #f1f5f9; }
.m4pro-actioncard__overmenu button i { font-size: 15px; line-height: 1; color: #475569; }
.m4pro-actioncard__overmenu button:focus-visible {
  outline: none;
  background: #eff6ff;
  box-shadow: inset 0 0 0 2px #1d4ed8;
}

.m4pro-ailane {
  margin: 0 0 12px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.m4pro-ailanetable th, .m4pro-ailanetable td {
  font-size: 12px;
  padding: 8px 10px;
}

/* ---------- Toolbar (chips + search) ---------- */
.m4pro-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  flex-wrap: wrap;
}
.m4pro-chips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 4px;
}
.m4pro-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: #475569;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.m4pro-chip:hover { background: #f1f5f9; color: #0f172a; }
.m4pro-chip.is-active {
  background: #1e293b;
  color: #ffffff;
  border-color: #0f172a;
}
.m4pro-chip__cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 1px 6px;
  background: #e2e8f0;
  color: #475569;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}
.m4pro-chip.is-active .m4pro-chip__cnt {
  background: rgba(255,255,255,0.18);
  color: #ffffff;
}
.m4pro-search input {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  min-width: 260px;
  background: #ffffff;
}
.m4pro-search input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

/* ---------- Action card (the row in My day) ---------- */
.m4pro-actionlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.m4pro-actioncard {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 18px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.m4pro-actioncard:hover {
  border-color: #94a3b8;
  box-shadow: 0 4px 16px rgba(15,23,42,0.06);
}
.m4pro-actioncard.is-expanded {
  border-color: #3b82f6;
  box-shadow: 0 6px 18px rgba(59,130,246,0.08);
}
/* Rail removed per design principle "no colored left rails". */
/* Action type is communicated by the type pill (already tinted) in the card head. */

.m4pro-actioncard__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.m4pro-actioncard__title {
  font-size: 14px;
  color: #0f172a;
  font-weight: 700;
}
.m4pro-actioncard__inv {
  font-size: 11.5px;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 7px;
  border-radius: 6px;
}
.m4pro-ptpbroken-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.m4pro-actioncard__amt {
  margin-left: auto;
  font-size: 14px;
  color: #0f172a;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 4px 10px;
  border-radius: 6px;
}

.m4pro-actioncard__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: #475569;
  border-top: 1px dashed #e2e8f0;
  border-bottom: 1px dashed #e2e8f0;
  padding: 8px 0;
}
.m4pro-actioncard__meta strong { color: #0f172a; font-weight: 600; }
.m4pro-actioncard__last {
  font-size: 11.5px;
  color: #64748b;
  font-style: italic;
}

.m4pro-actioncard__script {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.m4pro-actioncard__sb {
  align-self: flex-start;
  background: transparent;
  border: 1px dashed #cbd5e1;
  color: #475569;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.m4pro-actioncard__sb:hover { background: #f1f5f9; color: #0f172a; }
.m4pro-script {
  background: #f8fafc;
  border-left: 3px solid #3b82f6;
  padding: 10px 14px;
  font-size: 12.5px;
  color: #1e293b;
  border-radius: 6px;
  line-height: 1.5;
}

.m4pro-actioncard__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.m4pro-ptpalertstrip {
  margin-top: 12px;
  border: 1px solid #fecaca;
  background: linear-gradient(180deg, #fff7f7 0%, #fff 100%);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 10px;
}
.m4pro-ptpalertstrip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.m4pro-ptpalertstrip__list {
  display: grid;
  gap: 8px;
}
.m4pro-ptpalertstrip__item {
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fff;
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.m4pro-ptpalertstrip__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Type pills (shared with playbook + ailane table) ---------- */
.m4pro-typepill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
}
.m4pro-typepill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.m4pro-typepill--call { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.m4pro-typepill--hard { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.m4pro-typepill--soft { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.m4pro-typepill--email { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.m4pro-typepill--escalate { background: #fce7f3; color: #9d174d; border: 1px solid #fbcfe8; }

/* ---------- Reassign drawer ---------- */
.m4pro-reassign {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 10px;
}
.m4pro-reassign__lbl {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.m4pro-reassign__btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: #1e293b;
  transition: background 0.15s;
}
.m4pro-reassign__btn:hover { background: #f1f5f9; }
.m4pro-reassign__btn.is-active {
  background: #1e293b;
  color: #ffffff;
  border-color: #0f172a;
}
.m4pro-reassign__btn.is-active .muted { color: rgba(255,255,255,0.7); }

/* ---------- Empty state ---------- */
.m4pro-empty {
  text-align: center;
  padding: 32px 20px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  margin: 14px 0;
}
.m4pro-empty strong {
  display: block;
  font-size: 14px;
  color: #0f172a;
  margin-bottom: 6px;
}
.m4pro-empty p {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
}

/* ---------- PTP tracker ---------- */
.m4pro-ptpcard { margin-top: 14px; }
.m4pro-ptpgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 8px;
}
@media (max-width: 1100px) {
  .m4pro-ptpgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .m4pro-ptpgrid { grid-template-columns: 1fr; }
}
.m4pro-ptpcol {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m4pro-ptpcol header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}
/* Flat tinted backgrounds per design principle "no decorative gradients". */
.m4pro-ptpcol--bad  { border-color: #fecaca; background: #fef6f6; }
.m4pro-ptpcol--warn { border-color: #fde68a; background: #fffdf5; }
.m4pro-ptpcol--info { border-color: #bfdbfe; background: #f5f9ff; }
.m4pro-ptpcol--ok   { border-color: #a7f3d0; background: #f5fcf8; }
.m4pro-ptpitem {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  font-size: 11.5px;
}
.m4pro-ptpitem strong { color: #0f172a; font-size: 12.5px; }
.m4pro-ptpitem .mono { color: #64748b; }
.m4pro-ptpitem button { grid-column: 1 / -1; justify-self: flex-end; }

/* ---------- Allocation: agent workload board ---------- */
.m4pro-agentboard { margin-top: 14px; }
.m4pro-agentgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.m4pro-agentcard {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.m4pro-agentcard:hover {
  border-color: #94a3b8;
  box-shadow: 0 4px 14px rgba(15,23,42,0.05);
}
.m4pro-agentcard--bad { border-color: #fecaca; box-shadow: 0 0 0 1px #fecaca; }
.m4pro-agentcard--warn { border-color: #fde68a; }
.m4pro-agentcard--ok { border-color: #a7f3d0; }
.m4pro-agentcard--info { border-color: #bfdbfe; }

.m4pro-agentcard__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.m4pro-agentcard__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #ffffff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.m4pro-agentcard__id {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.m4pro-agentcard__id strong { font-size: 13px; color: #0f172a; }
.m4pro-agentcard__warn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}
.m4pro-agentcard__warn i { font-size: 12px; line-height: 1; }

.m4pro-agentcard__bar {
  width: 100%;
  height: 6px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.m4pro-agentcard__bar__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #f59e0b 70%, #ef4444 100%);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.m4pro-agentcard__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 10px;
  font-size: 12px;
}
.m4pro-agentcard__stats strong { color: #0f172a; font-weight: 600; }

/* ---------- Allocation: lane breakdown ---------- */
.m4pro-lanecard { margin-top: 14px; }
.m4pro-lanebars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.m4pro-lanebar { display: flex; flex-direction: column; gap: 5px; }
.m4pro-lanebar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.m4pro-lanebar__head strong { font-size: 13px; color: #0f172a; }
.m4pro-lanebar__track {
  width: 100%;
  height: 10px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.m4pro-lanebar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}
/* Flat fills — no decorative gradients on data bars. */
.m4pro-lanebar--ok   .m4pro-lanebar__fill { background: #10b981; }
.m4pro-lanebar--info .m4pro-lanebar__fill { background: #3b82f6; }
.m4pro-lanebar--warn .m4pro-lanebar__fill { background: #f59e0b; }

/* ---------- Allocation: playbook grid ---------- */
.m4pro-playbookcard { margin-top: 14px; }
.m4pro-playbook {
  margin-top: 8px;
  overflow-x: auto;
}
.m4pro-playbook__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.m4pro-playbook__table th,
.m4pro-playbook__table td {
  padding: 10px 12px;
  border: 1px solid #f1f5f9;
}
.m4pro-playbook__table thead th {
  background: #f8fafc;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
  font-weight: 600;
}
.m4pro-playbook__rowhdr {
  background: #f8fafc;
  font-size: 12.5px;
  color: #0f172a;
  text-align: left;
  font-weight: 600;
  width: 140px;
}
.m4pro-playbook__cell {
  background: #ffffff;
  vertical-align: middle;
}
.m4pro-playbook__sel {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  background: #ffffff;
  cursor: pointer;
}
.m4pro-playbook__sel:hover { border-color: #94a3b8; }
.m4pro-playbook__sel:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.m4pro-playbook__lane {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
}
.m4pro-playbook__lane--ai_auto { background: #d1fae5; color: #065f46; }
.m4pro-playbook__lane--hybrid { background: #dbeafe; color: #1d4ed8; }
.m4pro-playbook__lane--human { background: #fef3c7; color: #92400e; }

.m4pro-playbook__legend {
  margin-top: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px dashed #e2e8f0;
  border-radius: 8px;
  font-size: 11.5px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.m4pro-playbook__legend .m4pro-playbook__lane {
  margin-right: 4px;
}

/* ---------- ROI view ---------- */
.m4pro-segtable th, .m4pro-segtable td {
  font-size: 12.5px;
  padding: 10px 12px;
  vertical-align: middle;
}
.m4pro-recommend {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}
.m4pro-recommend--maintain      { background: #d1fae5; color: #065f46; }
.m4pro-recommend--invest-more   { background: #c7d2fe; color: #3730a3; }
.m4pro-recommend--automate-more { background: #dbeafe; color: #1d4ed8; }
.m4pro-recommend--reduce-effort { background: #fef3c7; color: #92400e; }
.m4pro-recommend--add-nudges    { background: #ede9fe; color: #6d28d9; }

.m4pro-roisvg {
  display: block;
  margin: 10px auto;
  width: 100%;
  max-width: 480px;
  height: auto;
}

.m4pro-prodcard { margin-top: 14px; }
.m4pro-prodtable th, .m4pro-prodtable td {
  font-size: 12.5px;
  padding: 10px 12px;
  vertical-align: middle;
}
.m4pro-prodrate {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
}
.m4pro-prodrate--ok { background: #d1fae5; color: #065f46; }
.m4pro-prodrate--info { background: #dbeafe; color: #1d4ed8; }
.m4pro-prodrate--warn { background: #fef3c7; color: #92400e; }

/* ---------- Outcome modal ---------- */
.m4pro-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  z-index: 1000;
  animation: m4pro-modal-fadein 0.18s ease-out;
}
@keyframes m4pro-modal-fadein {
  from { background: rgba(15,23,42,0); }
  to { background: rgba(15,23,42,0.55); }
}
.m4pro-modal {
  background: #ffffff;
  border-radius: 14px;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(15,23,42,0.25);
  animation: m4pro-modal-slidein 0.22s ease-out;
}
@keyframes m4pro-modal-slidein {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
.m4pro-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
}
.m4pro-modal__head strong { font-size: 15px; color: #0f172a; }
.m4pro-modal__close {
  background: transparent;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 20px;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.m4pro-modal__close:hover { background: #f1f5f9; color: #0f172a; }

.m4pro-modal__body {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.m4pro-modal__ctx {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
}
.m4pro-modal__ctx strong { color: #0f172a; }
.m4pro-modal__ctx .mono { color: #64748b; }

.m4pro-modal__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.m4pro-modal__row > label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
}
.m4pro-modal__row--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.m4pro-modal__row--two > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
}
.m4pro-modal__row .field {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  background: #ffffff;
}
.m4pro-modal__row .field:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.m4pro-modal__row textarea.field {
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}

.m4pro-modal__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.m4pro-modal__radio {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.m4pro-modal__radio:hover { background: #f1f5f9; color: #0f172a; }
.m4pro-modal__radio.is-active {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: #ffffff;
  border-color: #0f172a;
}

.m4pro-modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
  border-radius: 0 0 14px 14px;
}
.m4pro-modal__foot .m3an-rowbtn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .m4pro-actioncard__meta { gap: 12px; }
  .m4pro-actioncard__amt { margin-left: 0; }
}
@media (max-width: 720px) {
  .m4pro-modal { max-width: 95vw; }
  .m4pro-modal__row--two { grid-template-columns: 1fr; }
  .m4pro-toolbar { flex-direction: column; align-items: stretch; }
  .m4pro-search input { min-width: 0; width: 100%; }
}

/* ============================================================
 * Module 2 — Prevention tab redesign (m2pre-*)
 * ============================================================ */
.m2pre {
  padding: 22px 26px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 60%);
  border-radius: 14px;
}
.m2pre-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.m2pre-head h2 { margin: 4px 0 6px; font-size: 1.25rem; }
.m2pre-head p { margin: 0; max-width: 70ch; }
.m2pre-head__actions { display: flex; gap: 8px; flex-shrink: 0; }

.m2pre-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
  gap: 22px;
  align-items: start;
}
.m2pre-form { display: grid; gap: 16px; min-width: 0; }
.m2pre-side { display: grid; gap: 14px; position: sticky; top: 16px; }

/* ---- Section group cards (form left side) ---- */
.m2pre-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
}
.m2pre-section__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.m2pre-section__head strong {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #0f172a;
  text-transform: uppercase;
}
.m2pre-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 14px;
}

/* ---- Field with inline validation ---- */
.m2pre-fld { display: flex; flex-direction: column; gap: 4px; }
.m2pre-fld__lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}
.m2pre-fld__chk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.m2pre-fld__chk--ok { background: #dcfce7; color: #15803d; }
.m2pre-fld__chk--err { background: #fee2e2; color: #b91c1c; }
.m2pre-fld--ok input.field, .m2pre-fld--ok select.field { border-color: #bbf7d0; }
.m2pre-fld--error input.field, .m2pre-fld--error select.field { border-color: #fecaca; background: #fff7f7; }
.m2pre-fld input.field, .m2pre-fld select.field {
  width: 100%;
  font-size: 13px;
  padding: 8px 10px;
}

/* ---- Hero verdict card ---- */
.m2pre-hero {
  position: relative;
  border-radius: 14px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: grid;
  gap: 14px;
}
.m2pre-hero__head { display: grid; gap: 4px; }
.m2pre-hero__verdict {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.m2pre-hero__sub {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.5;
}
.m2pre-verdict--safe { border-color: #bbf7d0; background: #ecfdf5; }
.m2pre-verdict--review { border-color: #fed7aa; background: #fff7ed; }
.m2pre-verdict--hold { border-color: #fecaca; background: #fef2f2; }
.m2pre-verdict--safe .m2pre-hero__verdict { color: #166534; }
.m2pre-verdict--review .m2pre-hero__verdict { color: #9a3412; }
.m2pre-verdict--hold .m2pre-hero__verdict { color: #991b1b; }

.m2pre-hero__ring {
  --ring-pct: 50;
  --ring-col: #f59e0b;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: conic-gradient(var(--ring-col) calc(var(--ring-pct) * 1%), #e2e8f0 0);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px auto 6px;
}
.m2pre-hero__ring-inner {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: inset 0 0 0 1px #e2e8f0;
}
.m2pre-hero__ring-inner strong {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
}
.m2pre-hero__breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px 0;
  border-top: 1px dashed #e2e8f0;
  border-bottom: 1px dashed #e2e8f0;
  font-size: 12px;
}
.m2pre-hero__breakdown > div { display: flex; flex-direction: column; gap: 2px; }
.m2pre-hero__breakdown strong { font-size: 14px; color: #0f172a; }
.m2pre-hero__cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m2pre-hero__cta .button { width: 100%; justify-content: center; }
.m2pre-hero__cta .button[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---- Side cards: model signals + blockers + prompts ---- */
.m2pre-modelcard,
.m2pre-promptscard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
}
.m2pre-modelcard header,
.m2pre-promptscard header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.m2pre-modelcard__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
  font-size: 12px;
}
.m2pre-modelcard__grid strong { font-size: 14px; color: #0f172a; display: block; }

.m2pre-blockers {
  background: #fff7f7;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #991b1b;
}
.m2pre-blockers--ok {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.m2pre-blockers__pill {
  background: #ffffff;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11.5px;
  font-weight: 600;
}

.m2pre-prompts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.m2pre-prompt {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #1e293b;
  border: 1px solid transparent;
}
.m2pre-prompt__ic {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}
.m2pre-prompt--critical { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.m2pre-prompt--critical .m2pre-prompt__ic { background: #fee2e2; color: #b91c1c; }
.m2pre-prompt--warn { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.m2pre-prompt--warn .m2pre-prompt__ic { background: #fed7aa; color: #9a3412; }
.m2pre-prompt--info { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.m2pre-prompt--info .m2pre-prompt__ic { background: #dbeafe; color: #1d4ed8; }
.m2pre-prompt--ok { background: #ecfdf5; border-color: #bbf7d0; color: #166534; }
.m2pre-prompt--ok .m2pre-prompt__ic { background: #dcfce7; color: #15803d; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .m2pre-grid { grid-template-columns: 1fr; }
  .m2pre-side { position: static; }
  .m2pre-hero__breakdown { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .m2pre { padding: 16px 14px; }
  .m2pre-section__grid { grid-template-columns: 1fr; }
  .m2pre-modelcard__grid { grid-template-columns: 1fr; }
  .m2pre-head { flex-direction: column; align-items: stretch; }
  .m2pre-head__actions { flex-wrap: wrap; }
}

/* ===================================================================
 * Onboarding mapping — type-aware dropdowns + coverage breakdown.
 * Replaces the opaque "96.4% mapping coverage" with an explicit list
 * of what is mapped, what is missing, and which columns triggered a
 * type-mismatch soft warning (e.g. user mapped Payment Terms to Invoice Date).
 * =================================================================== */

.mapping-coverage {
  margin-top: 14px;
  padding: 14px 14px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  display: grid;
  gap: 10px;
}
.mapping-coverage__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mapping-coverage__head strong { display: block; }
.mapping-coverage__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mapping-coverage__chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
}
.mapping-coverage__chip.is-ok { border-color: #bbf7d0; background: #ecfdf5; color: #047857; }
.mapping-coverage__chip.is-bad { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.mapping-coverage__chip.is-warn { border-color: #fde68a; background: #fffbeb; color: #b45309; }
.mapping-coverage__bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.mapping-coverage__bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #0ea5e9);
  border-radius: 999px;
  transition: width 240ms ease;
}
.mapping-coverage__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: #334155;
}
.mapping-coverage__line code {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 11px;
  margin-right: 4px;
}
.mapping-coverage__lbl { font-weight: 600; color: #0f172a; }
.mapping-coverage__line--bad .mapping-coverage__lbl { color: #b91c1c; }
.mapping-coverage__line--bad code { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.mapping-coverage__line--warn .mapping-coverage__lbl { color: #b45309; }
.mapping-coverage__line--warn code { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.mapping-coverage__line--ok { color: #047857; font-weight: 600; }

/* Per-field type chip beside the system field name */
.mapping-field-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #0f172a;
}
.mapping-field-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  text-transform: lowercase;
}
.mapping-field-chip--type { background: #f1f5f9; color: #475569; }
.mapping-field-chip--ok { background: #ecfdf5; border-color: #bbf7d0; color: #047857; }
.mapping-field-hint {
  margin-top: 2px;
  margin-left: 0;
}
td.mapping-field-cell--warn {
  position: relative;
}
td.mapping-field-cell--warn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 3px;
  background: #f59e0b;
}

/* Inline soft warning under the <select> when chosen column type does not match */
.mapping-field-warn {
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid #fde68a;
  background: #fffbeb;
  border-radius: 8px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  color: #92400e;
  line-height: 1.45;
}
.mapping-field-warn__icon {
  font-size: 14px;
  flex: 0 0 auto;
  color: #b45309;
}
.mapping-field-warn__body strong { color: #78350f; }
.mapping-field-warn__body code {
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 0 4px;
  font-size: 11px;
}
.mapping-field-warn__body .muted { color: #92400e; opacity: 0.75; }

/* Validation screen — per-dataset coverage list */
.validation-coverage {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.validation-coverage__row {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  background: #ffffff;
  display: grid;
  gap: 6px;
}
.validation-coverage__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.validation-coverage__bar {
  height: 5px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.validation-coverage__bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #0ea5e9);
  border-radius: 999px;
}
.validation-coverage__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.validation-coverage__chip {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
}
.validation-coverage__chip.is-ok { border-color: #bbf7d0; background: #ecfdf5; color: #047857; }
.validation-coverage__chip.is-bad { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.validation-coverage__chip.is-warn { border-color: #fde68a; background: #fffbeb; color: #b45309; }
.validation-coverage__line {
  font-size: 12px;
  color: #475569;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
}
.validation-coverage__line code {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 0 5px;
  font-size: 11px;
  margin-right: 3px;
}
.validation-coverage__line--bad code {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.validation-coverage__line--bad { color: #991b1b; }

/* ===================================================================
 * Auth screen — quick-win redesign (Option A).
 * Goals: SSO-first, single CTA path, brand+trust on the right column,
 *        no instructional copy, no route-fork cards.
 * =================================================================== */

/* Slightly tighter card on v2 so the form doesn't feel marooned */
.auth-page--v2 .auth-page__card--v2 {
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 600px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(15, 23, 42, 0.04);
}

.auth-page__head--v2 {
  margin-bottom: 18px;
}
.auth-page__title--v2 {
  font-size: 26px;
  line-height: 1.2;
  margin-top: 14px;
  letter-spacing: -0.01em;
}
.auth-page--v2 .auth-page__lead {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.55;
}

.auth-page__form--v2 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* SSO buttons — block-stacked, primary-feeling */
.auth-sso-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-sso-btn--block {
  width: 100%;
  justify-content: flex-start;
  padding: 0 16px;
  min-height: 46px;
  font-size: 14.5px;
  background: #ffffff;
  border-color: #cbd5e1;
}
.auth-sso-btn--block:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.auth-sso-btn--block .auth-sso-btn__icon {
  margin-right: 4px;
}
.auth-sso-btn--block > span {
  flex: 1;
  text-align: left;
}

/* Divider with text */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}
.auth-divider span {
  padding: 0 6px;
}

/* Forgot link inline with password label */
.field-group__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.field-group__label-row label {
  margin-bottom: 0;
}

/* Setup-route hint — small line near the bottom */
.auth-page__setup-hint {
  margin-top: 6px;
  text-align: center;
}

/* Footer of the form column */
.auth-page__formfoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed #e2e8f0;
}
.text-link--ghost {
  color: #94a3b8;
}
.text-link--ghost:hover {
  color: #475569;
}

/* Demo accounts collapsed details — quieter */
.auth-demo-details--v2 {
  margin-top: 4px;
  border-top: 1px dashed #e2e8f0;
  padding-top: 12px;
}
.auth-demo-details--v2 summary {
  color: #64748b;
  font-size: 12.5px;
}

/* Right column — brand + trust hero */
.auth-page__col--brand {
  position: relative;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(59, 130, 246, 0.16) 0%, rgba(59, 130, 246, 0) 60%),
    radial-gradient(80% 120% at 0% 100%, rgba(99, 102, 241, 0.18) 0%, rgba(99, 102, 241, 0) 60%),
    linear-gradient(180deg, #0f172a 0%, #111c33 100%);
  color: #e2e8f0;
  padding: 36px 36px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-page__col--brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 35%, transparent 75%);
}
.auth-brand-hero {
  position: relative;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.auth-brand-hero__mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #60a5fa 0%, #818cf8 100%);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
.auth-brand-hero__headline {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #f8fafc;
  margin: 0;
}
.auth-brand-hero__sub {
  font-size: 13.5px;
  line-height: 1.6;
  color: #cbd5e1;
  margin: 0;
}
.auth-brand-hero__quote {
  margin: 4px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
}
.auth-brand-hero__quote blockquote {
  margin: 0;
  font-size: 14px;
  font-style: italic;
  color: #e2e8f0;
  line-height: 1.5;
}
.auth-brand-hero__quote figcaption {
  margin-top: 8px;
  font-size: 12px;
  color: #94a3b8;
}
.auth-brand-hero__quote figcaption strong {
  color: #cbd5e1;
}

/* Trust badges */
.auth-brand-hero__trust {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
}
.auth-brand-hero__trust li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #cbd5e1;
  letter-spacing: 0.01em;
}
.auth-brand-hero__trust li span {
  color: #60a5fa;
}

/* Responsive: stack columns on small screens */
@media (max-width: 960px) {
  .auth-page--v2 .auth-page__card--v2 {
    grid-template-columns: 1fr;
  }
  .auth-page__col--brand {
    padding: 28px 24px;
    order: 2;
  }
  .auth-brand-hero {
    max-width: 100%;
  }
  .auth-brand-hero__trust {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===================================================================
 * Module 2 — provenance chips and "pending model" pill.
 * Used to honestly distinguish rules-derived numbers from genuine
 * (yet-to-be-wired) ML outputs in Prevention and the Invoice detail.
 * Avoids over-claiming AI capability in stakeholder demos.
 * =================================================================== */

.m2-prov-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  white-space: nowrap;
}
.m2-prov-chip--rules {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #047857;
}
.m2-prov-chip--rules::before {
  content: "\e182"; /* ph-check */
  font-family: "Phosphor";
  font-style: normal;
  font-weight: normal;
  font-size: 11px;
}
.m2-prov-chip--pending {
  background: #fef3c7;
  border-color: #fde68a;
  color: #92400e;
}
.m2-prov-chip--pending::before {
  content: "\e19a"; /* ph-clock */
  font-family: "Phosphor";
  font-style: normal;
  font-weight: normal;
  font-size: 11px;
}

.m2-pending-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fffaf0, #fef3c7);
  border: 1px solid #fde68a;
  color: #92400e;
  box-shadow: 0 1px 0 rgba(146, 64, 14, 0.06);
}
.m2-pending-pill::before {
  content: "\e19a"; /* ph-clock */
  font-family: "Phosphor";
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 1;
}

/* Prevention model card — honest "AI signals — pending model" surface */
.m2pre-modelcard--pending {
  border-color: #fde68a;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 60%);
}
.m2pre-modelcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.m2pre-modelcard__caveat {
  margin: 6px 0 10px;
  color: #78350f;
  background: #fffbeb;
  border: 1px dashed #fde68a;
  padding: 8px 10px;
  border-radius: 8px;
  line-height: 1.5;
}
.m2pre-modelcard__caveat strong { color: #78350f; }
.m2pre-modelcard__grid > div {
  display: grid;
  gap: 2px;
  align-content: start;
}
.m2pre-formula {
  margin-top: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  background: #f8fafc;
}
.m2pre-formula > summary {
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  color: #334155;
}
.m2pre-formula__list {
  margin: 8px 0 6px 18px;
  padding: 0;
  display: grid;
  gap: 4px;
  color: #334155;
}
.m2pre-formula__list strong { color: #0f172a; }

/* =========================================================
 * Validate-step: grouped findings + per-row severity styling
 * =========================================================
 *
 * The findings panel used to show only a sliced subset (2 per dataset).
 * It's now grouped by dataset and lists EVERY blocking issue and warning
 * so the "Warnings N" count above the panel matches what the user can see.
 */
.validation-panel--findings .section-head {
  align-items: flex-start;
}
.validation-findings-groups {
  display: grid;
  gap: 14px;
}
.validation-findings-group {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}
.validation-findings-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #eef2f7;
  font-size: 13px;
}
.validation-findings-group__head strong {
  color: #0f172a;
  letter-spacing: 0.01em;
}
.validation-findings-group__empty {
  padding: 12px 14px;
}
.validation-findings-group .validation-findings-list {
  padding: 4px 0;
  gap: 0;
}
.validation-findings-group .validation-finding {
  padding: 10px 14px;
  border-top: 1px solid #f1f5f9;
  align-items: center;
}
.validation-findings-group .validation-finding:first-child {
  border-top: none;
}
.validation-finding__body code,
.validation-finding__hint code {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
  color: #0f172a;
}
.validation-finding__hint {
  display: block;
  margin-top: 4px;
  line-height: 1.4;
}
.validation-finding--danger .validation-finding__body code,
.validation-finding--danger .validation-finding__hint code {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.validation-finding--warning .validation-finding__body code,
.validation-finding--warning .validation-finding__hint code {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.validation-finding--danger {
  background: linear-gradient(0deg, rgba(239,68,68,0.04), rgba(239,68,68,0.04));
}
.validation-finding--warning {
  background: linear-gradient(0deg, rgba(245,158,11,0.035), rgba(245,158,11,0.035));
}

/* =========================================================
 * Mapping screen: focused-row highlight (deep-link from Validate)
 * =========================================================
 *
 * When the user clicks "Map field" / "Map or skip" / "Review mapping" on a
 * specific row inside the Validate findings panel, we navigate them to the
 * mapping screen AND scroll the corresponding canonical-field row into
 * view, then briefly pulse it so they see exactly which row to act on.
 */
.mapping-row--focused {
  position: relative;
}
.mapping-row--focused td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: #2563eb;
  border-radius: 2px;
}
@keyframes mappingRowPulse {
  0%   { background-color: rgba(37, 99, 235, 0.0); }
  20%  { background-color: rgba(37, 99, 235, 0.14); }
  100% { background-color: rgba(37, 99, 235, 0.0); }
}
.mapping-row--pulse > td {
  animation: mappingRowPulse 2.2s ease-out 1;
}

/* =========================================================
 * Dashboard scope drill-through
 * =========================================================
 *
 * Shown at the top of any destination module (M1 / M2 / M3 / M4) when the
 * user arrived there by clicking a dashboard KPI. It states the originating
 * KPI label, value, the exact formula used to compute it, and (for the
 * Overdue lens) how that total decomposes into lanes on this screen — so
 * the relationship between the dashboard number and the destination
 * number is always explicit, never inferred.
 */
.dash-scope-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 14px;
  margin: 0 0 14px;
  border: 1px solid #bfdbfe;
  border-left: 3px solid #2563eb;
  background: linear-gradient(180deg, #f5faff 0%, #eef5ff 100%);
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.dash-scope-banner--overdue   { border-color: #fed7aa; border-left-color: #f59e0b; background: linear-gradient(180deg, #fffaf0 0%, #fff5e6 100%); }
.dash-scope-banner--highRisk  { border-color: #fecaca; border-left-color: #ef4444; background: linear-gradient(180deg, #fff7f7 0%, #fff0f0 100%); }
.dash-scope-banner--openDispute { border-color: #fecdd3; border-left-color: #e11d48; background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%); }
.dash-scope-banner--ptpBroken { border-color: #bae6fd; border-left-color: #0ea5e9; background: linear-gradient(180deg, #f4fbff 0%, #ebf6ff 100%); }

.dash-scope-banner__lead {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}
.dash-scope-banner__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #2563eb;
}
.dash-scope-banner--overdue   .dash-scope-banner__icon { color: #b45309; }
.dash-scope-banner--highRisk  .dash-scope-banner__icon { color: #b91c1c; }
.dash-scope-banner--openDispute .dash-scope-banner__icon { color: #be123c; }
.dash-scope-banner--ptpBroken .dash-scope-banner__icon { color: #0369a1; }

.dash-scope-banner__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dash-scope-banner__title {
  font-size: 14px;
  color: #0f172a;
  line-height: 1.4;
}
.dash-scope-banner__title strong { color: #0f172a; font-weight: 700; }
.dash-scope-banner__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.dash-scope-banner__meta code {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11.5px;
  color: #0f172a;
}
.dash-scope-banner__note {
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 4px;
  max-width: 78ch;
}

/* Reconciliation breakdown (lanes) shown only for the Overdue lens. */
.dash-scope-banner__recon {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 6px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px dashed rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  font-size: 12.5px;
  color: #334155;
}
.dash-scope-banner__recon-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dash-scope-banner__recon-row strong {
  color: #0f172a;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dash-scope-banner__sw {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}
.dash-scope-banner__sw--human   { background: #ef4444; }
.dash-scope-banner__sw--hybrid  { background: #8b5cf6; }
.dash-scope-banner__sw--auto    { background: #0ea5e9; }
.dash-scope-banner__sw--dispute { background: #94a3b8; }

/* =========================================================
 * Dashboard KPI: formula chip
 * =========================================================
 *
 * Tiny inline chip rendered under each KPI's sub-line that states the
 * exact formula (e.g. `health < 40`). Surfaces the math without forcing
 * the user to hover for a tooltip — eliminates ambiguity about what each
 * number means and matches the same string shown on the destination's
 * scope banner.
 */
.dash2-kpi__formula {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #475569;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.dash2-kpi:hover .dash2-kpi__formula {
  background: color-mix(in srgb, var(--accent, #3b82f6) 8%, rgba(15, 23, 42, 0.04));
  border-color: color-mix(in srgb, var(--accent, #3b82f6) 35%, rgba(15, 23, 42, 0.08));
  color: #0f172a;
}

/* =========================================================
 * Dashboard polish — incremental refinements on top of the
 * existing .dash2-kpi system.
 * =========================================================
 */

/* Slightly tighter rhythm + softer card edges so the KPI row feels less
   "AI-generated boxes" and more like an instrument cluster. */
.dash2-kpis {
  gap: 12px;
  margin-bottom: 18px;
}
.dash2-kpi {
  padding: 16px 18px 14px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  border-color: #e6e9f0;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.dash2-kpi:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(15, 23, 42, 0.02);
}
.dash2-kpi__value {
  font-size: 25px;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.dash2-kpi__label {
  font-size: 13px;
  letter-spacing: 0;
  color: #1e293b;
}
.dash2-kpi__sub {
  font-size: 11.5px;
  line-height: 1.5;
  margin-bottom: 0;
}

/* On the 5-KPI row (Total + 4 lenses) preserve 4-up + wrap rather than crushing. */
@media (max-width: 1280px) {
  .dash2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .dash2-kpis { grid-template-columns: 1fr; }
}

/* Compact size variant of the "Clear filter" / "Resend" buttons used in
   the scope banner. (Mirrors the .button-compact used elsewhere; defined
   here in case the earlier definition is scoped out for older paths.) */
.dash-scope-banner .button-compact {
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 12px;
  min-height: 26px;
  flex-shrink: 0;
}

/* =================================================================== */
/* ▙▟ DASHBOARD 3.0 — "Command Bridge"                                  */
/* -------------------------------------------------------------------- */
/* Premium financial-operations command center.                         */
/*   • Indigo single-accent palette, calm + confident                   */
/*   • Tabular numerics everywhere                                      */
/*   • Sparklines and gradient avatars                                  */
/*   • Hairline borders, soft shadows, layered backgrounds              */
/*   • Sequential entry animation on first paint                        */
/* =================================================================== */

.dash3-shell {
  /* Design tokens — keep these local so the rest of the app is unaffected */
  --d3-ink: #0b1220;
  --d3-ink-2: #1f2937;
  --d3-muted: #64748b;
  --d3-line: rgba(15, 23, 42, 0.08);
  --d3-line-strong: rgba(15, 23, 42, 0.14);
  --d3-surface: #ffffff;
  --d3-surface-2: #f8fafc;
  --d3-bg: linear-gradient(180deg, #f6f8fd 0%, #f3f5fb 360px, #f7f8fc 100%);
  --d3-accent: #4f46e5;
  --d3-accent-2: #6366f1;
  --d3-accent-glow: rgba(79, 70, 229, 0.18);
  --d3-good: #059669;
  --d3-good-bg: #ecfdf5;
  --d3-bad: #dc2626;
  --d3-bad-bg: #fef2f2;
  --d3-warn: #d97706;
  --d3-warn-bg: #fffbeb;
  --d3-radius: 18px;
  --d3-radius-sm: 12px;
  --d3-shadow: 0 1px 0 rgba(15, 23, 42, 0.02), 0 8px 24px -16px rgba(15, 23, 42, 0.18);
  --d3-shadow-lg: 0 1px 0 rgba(15, 23, 42, 0.03), 0 24px 64px -36px rgba(15, 23, 42, 0.32);
  background: var(--d3-bg);
}

.dash3-shell {
  font-feature-settings: "ss01", "cv01", "tnum" 1;
}

.dash3-shell .panel,
.dash3-shell .panel.m3an { /* let our own panel style apply over generic */
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
}

/* ── Topbar ─────────────────────────────────────────────────────── */
/* NOTE: the global .topbar is position: sticky, top: 0 (line ~902).
   We must keep a solid background so content scrolled underneath
   stays hidden. Frosted-glass treatment for a premium feel. */
.dash3-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 22px 32px 16px;
  background: rgba(247, 248, 252, 0.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--d3-line);
  flex-wrap: wrap;
  z-index: 30; /* above .dash3-bridge animations + sparklines */
}
/* Solid fallback for browsers without backdrop-filter (older Edge / FF) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dash3-topbar { background: #f7f8fc; }
}
.dash3-topbar__lead { min-width: 0; flex: 1 1 380px; }
.dash3-topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dash3-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d3-accent);
  margin-bottom: 6px;
}
.dash3-title {
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.18;
  color: var(--d3-ink);
  letter-spacing: -0.01em;
}
.dash3-sub {
  margin: 0;
  font-size: 13px;
  color: var(--d3-muted);
}
.dash3-sub strong { color: var(--d3-ink-2); font-weight: 600; }
.dash3-search {
  min-width: 280px;
  border: 1px solid var(--d3-line-strong);
  border-radius: 10px;
  background: #fff;
  padding: 8px 12px;
  font-size: 13px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.dash3-search:focus {
  outline: none;
  border-color: var(--d3-accent);
  box-shadow: 0 0 0 3px var(--d3-accent-glow);
}

/* ── Bridge: hero command card ──────────────────────────────────── */
.dash3-bridge {
  position: relative;
  margin: 22px 32px 0;
  border-radius: var(--d3-radius);
  background: linear-gradient(160deg, #0b1220 0%, #1e1b4b 48%, #312e81 100%);
  color: #f8fafc;
  overflow: hidden;
  box-shadow: var(--d3-shadow-lg);
  isolation: isolate;
  animation: d3-fade-up 600ms cubic-bezier(.2, .8, .2, 1) both;
}
.dash3-bridge__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.dash3-bridge__grain {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(transparent 31px, rgba(255, 255, 255, 0.025) 32px),
    linear-gradient(90deg, transparent 31px, rgba(255, 255, 255, 0.02) 32px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at 60% 30%, rgba(0, 0, 0, 0.7), transparent 70%);
  opacity: 0.6;
}
.dash3-bridge__glow {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.55;
}
.dash3-bridge__glow--a {
  top: -180px; right: -120px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.95), transparent 60%);
}
.dash3-bridge__glow--b {
  bottom: -240px; left: -100px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.55), transparent 65%);
}
.dash3-bridge__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 32px 40px 28px;
  flex-wrap: wrap;
}
.dash3-bridge__main { flex: 1 1 520px; min-width: 0; }
.dash3-bridge__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.dash3-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
}
.dash3-chip__pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18);
  animation: d3-pulse 2.4s ease-in-out infinite;
}
.dash3-chip--live .dash3-chip__pip { background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.2); }
.dash3-chip--warn .dash3-chip__pip { background: #fbbf24; box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.2); }
.dash3-chip--ghost { background: rgba(255, 255, 255, 0.06); }
.dash3-chip i {
  font-size: 13px;
  line-height: 1;
  opacity: 0.85;
}
.dash3-chip--live i { color: #34d399; animation: d3-pulse 2.4s ease-in-out infinite; opacity: 1; }
.dash3-chip--warn i { color: #fbbf24; opacity: 1; }

.dash3-bridge__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(199, 210, 254, 0.85);
  margin-bottom: 8px;
}

/* ── North-star metric (DSO) ────────────────────────────────────────────
   The product's outcome metric. Surfaced as the hero number so the user
   instantly understands what we're moving (and how every module feeds it).
   ────────────────────────────────────────────────────────────────────── */
.dash3-northstar {
  margin-bottom: 14px;
}
.dash3-northstar__lbl {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(199, 210, 254, 0.78);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.dash3-northstar__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.75);
  cursor: help;
  user-select: none;
  transition: background 160ms ease, color 160ms ease;
}
.dash3-northstar__info i { font-size: 15px; line-height: 1; }
.dash3-northstar__info:hover,
.dash3-northstar__info:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  outline: none;
}
.dash3-northstar__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.dash3-northstar__val {
  font-size: clamp(48px, 5.4vw, 76px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.dash3-northstar__unit {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 600;
  color: rgba(199, 210, 254, 0.85);
  letter-spacing: -0.01em;
}
.dash3-northstar__delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(255, 255, 255, 0.14);
  align-self: center;
}
.dash3-northstar__delta i { font-size: 13px; line-height: 1; }
.dash3-northstar__delta--good { background: rgba(52, 211, 153, 0.14); border-color: rgba(52, 211, 153, 0.32); color: #bbf7d0; }
.dash3-northstar__delta--bad  { background: rgba(248, 113, 113, 0.16); border-color: rgba(248, 113, 113, 0.34); color: #fecaca; }
.dash3-northstar__delta--flat { background: rgba(255, 255, 255, 0.06); color: rgba(199, 210, 254, 0.85); }
.dash3-northstar__sub {
  margin-top: 10px;
  font-size: 12.5px;
  color: rgba(199, 210, 254, 0.75);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dash3-northstar__sub strong { color: #ffffff; font-weight: 600; }
.dash3-northstar__risk {
  color: #fecaca;
  font-weight: 600;
}
.dash3-northstar__risk-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 8px;
  border-radius: 8px;
  font-family: inherit;
  font-size: inherit;
  color: rgba(199, 210, 254, 0.75);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 160ms ease, color 160ms ease;
}
.dash3-northstar__risk-btn:hover {
  background: rgba(248, 113, 113, 0.12);
  color: #ffffff;
}
.dash3-northstar__risk-btn:focus-visible {
  outline: none;
  background: rgba(248, 113, 113, 0.18);
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.45);
}
.dash3-northstar__risk-btn i {
  font-size: 12px;
  transition: transform 200ms ease;
  opacity: 0.7;
}
.dash3-northstar__risk-btn:hover i { transform: translateX(3px); opacity: 1; }
.dash3-northstar__risk-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(199, 210, 254, 0.7);
  margin-left: 2px;
}

/* Legacy class — kept for any internal callers but no longer used by the hero. */
.dash3-bridge__valrow { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.dash3-bridge__value {
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 700;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.dash3-bridge__delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
}
.dash3-bridge__delta strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.dash3-bridge__delta--up   { background: rgba(248, 113, 113, 0.16); border-color: rgba(248, 113, 113, 0.34); color: #fecaca; }
.dash3-bridge__delta--down { background: rgba(52, 211, 153, 0.14); border-color: rgba(52, 211, 153, 0.32); color: #bbf7d0; }
.dash3-bridge__spark {
  margin: 14px 0 16px;
  opacity: 0.92;
}
.dash3-bridge__spark .sparkline path:nth-child(2) { stroke: #c7d2fe; }
.dash3-bridge__spark .sparkline circle { fill: #ffffff; }
.dash3-bridge__hint { color: rgba(199, 210, 254, 0.7); margin-top: 12px; font-size: 13px; }

/* Aging composition strip — single source-of-truth for hero's "where is
   the book sitting" story. Replaces the old binary within-vs-overdue
   split that duplicated the Overdue KPI below. */
.dash3-aging {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 680px;
}
.dash3-aging__bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.dash3-aging__seg {
  display: block;
  height: 100%;
  transition: filter 160ms ease, transform 200ms ease;
}
.dash3-aging__seg + .dash3-aging__seg {
  /* hairline gap between segments — looks like a chart legend */
  box-shadow: inset 1px 0 0 rgba(15, 23, 42, 0.18);
}
.dash3-aging__legend-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 14px;
}
@media (max-width: 720px) { .dash3-aging__legend-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dash3-aging__legend {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  color: rgba(229, 231, 255, 0.82);
  min-width: 0;
  /* Reset button browser defaults — otherwise the interactive buckets
     render as white pills with grey text on the dark hero (unreadable). */
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}
.dash3-aging__legend--btn {
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 160ms ease, transform 160ms ease;
}
.dash3-aging__legend--btn:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}
.dash3-aging__legend--btn:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.55);
}
.dash3-aging__legend--zero { opacity: 0.45; }
.dash3-aging__sw {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}
.dash3-aging__legend-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dash3-aging__legend-text strong {
  color: #ffffff;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dash3-aging__legend-text em {
  font-style: normal;
  color: rgba(199, 210, 254, 0.75);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

/* Health gauge */
.dash3-bridge__gauge {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 22px;
  width: 260px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  backdrop-filter: blur(12px);
}
.dash3-gauge__top {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Health drag breakdown — mini bars under the gauge showing which module
   is pulling the score down the most. Each row is a button that jumps to
   that module so the user can act on the biggest pain point. */
/* Worst-drag callout: always-visible answer to "which module is pulling the
   gauge down the most." Clickable; routes to the owning module. */
.dash3-gauge__callout {
  appearance: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  margin-top: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.9);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.dash3-gauge__callout:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
.dash3-gauge__callout:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.45);
}
.dash3-gauge__callout-ic { font-size: 18px; line-height: 1; }
.dash3-gauge__callout-body { display: flex; flex-direction: column; min-width: 0; }
.dash3-gauge__callout-lbl {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(199, 210, 254, 0.7);
}
.dash3-gauge__callout-body strong {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.dash3-gauge__callout-pts { color: #fecaca; font-weight: 700; }
.dash3-gauge__callout-arrow {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.dash3-gauge__callout:hover .dash3-gauge__callout-arrow {
  opacity: 1;
  transform: translateX(0);
  color: #ffffff;
}
.dash3-gauge__callout--ok {
  cursor: default;
  border-color: rgba(52, 211, 153, 0.28);
  background: rgba(52, 211, 153, 0.08);
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #bbf7d0;
}
.dash3-gauge__callout--ok:hover { background: rgba(52, 211, 153, 0.08); transform: none; }

.dash3-health-breakdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 14px;
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.dash3-health-breakdown__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.dash3-health-breakdown__lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(199, 210, 254, 0.85);
}
.dash3-health-breakdown__lbl i { font-size: 13px; line-height: 1; }
.dash3-health-breakdown__total {
  font-size: 10.5px;
  color: rgba(199, 210, 254, 0.7);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.dash3-health-breakdown__total strong {
  color: #fecaca;
  font-weight: 700;
}
.dash3-health-breakdown__sub {
  font-size: 10.5px;
  color: rgba(199, 210, 254, 0.55);
  line-height: 1.45;
  margin: 0 0 6px;
}
/* Legacy hint kept for back-compat with older callers (now replaced by __head + __sub). */
.dash3-health-breakdown__hint {
  font-size: 10px;
  color: rgba(199, 210, 254, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 4px;
}
.dash3-health-row {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 8px;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 90px 1fr 32px 14px;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
  text-align: left;
  font-family: inherit;
}
.dash3-health-row:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(2px);
}
.dash3-health-row:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.45);
}
.dash3-health-row__arrow {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.dash3-health-row:hover .dash3-health-row__arrow {
  opacity: 1;
  transform: translateX(0);
  color: rgba(255, 255, 255, 0.85);
}
.dash3-health-row__lbl {
  font-size: 11.5px;
  color: rgba(199, 210, 254, 0.9);
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dash3-health-row__lbl i {
  font-size: 13px;
  line-height: 1;
  opacity: 0.85;
}
.dash3-health-row__bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.dash3-health-row__bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 600ms cubic-bezier(.2, .8, .2, 1);
}
.dash3-health-row__pts {
  font-size: 11px;
  font-weight: 600;
  color: #fecaca;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.dash3-gauge__svg--ok   { color: #34d399; }
.dash3-gauge__svg--warn { color: #fbbf24; }
.dash3-gauge__svg--bad  { color: #f87171; }
.dash3-gauge__body { display: flex; flex-direction: column; }
.dash3-gauge__head {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
}
.dash3-gauge__num {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.dash3-gauge__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.75);
  cursor: help;
  transition: background 160ms ease, color 160ms ease;
  user-select: none;
}
.dash3-gauge__info i { font-size: 15px; line-height: 1; }
.dash3-gauge__info:hover,
.dash3-gauge__info:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
  outline: none;
}
.dash3-gauge__lbl {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #c7d2fe;
}
.dash3-gauge__hint { font-size: 11px; color: rgba(199, 210, 254, 0.7); margin-top: 2px; }

/* Module nav at bottom of the bridge — PRIMARY CTAs.
   Each card carries its module's color as a tinted background gradient
   (always visible) so the four lenses look distinct even at rest.
   On hover the card lifts, the accent intensifies, and the badge fills
   solid so it's unmistakable what the user is about to open. */
.dash3-modnav {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.dash3-modnav__btn {
  --m-accent: #6366f1;
  appearance: none;
  position: relative;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--m-accent) 18%, rgba(15, 23, 42, 0.12)),
    color-mix(in srgb, var(--m-accent)  6%, rgba(15, 23, 42, 0.20))
  );
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 18px 18px;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  color: #f8fafc;
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1),
              background 220ms ease,
              border-color 200ms ease,
              box-shadow 240ms ease;
  overflow: hidden;
}
.dash3-modnav__btn::after {
  /* Subtle accent halo, more intense on hover */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--m-accent) 35%, transparent), transparent 65%);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.dash3-modnav__btn:hover {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--m-accent) 40%, rgba(15, 23, 42, 0.20)),
    color-mix(in srgb, var(--m-accent) 16%, rgba(15, 23, 42, 0.20))
  );
  border-color: color-mix(in srgb, var(--m-accent) 55%, transparent);
  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--m-accent) 55%, transparent);
  transform: translateY(-2px);
}
.dash3-modnav__btn:hover::after { opacity: 1; }
.dash3-modnav__btn:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--m-accent) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-accent) 35%, transparent);
}

.dash3-modnav__num {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--m-accent) 22%, rgba(255, 255, 255, 0.08));
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid color-mix(in srgb, var(--m-accent) 45%, rgba(255, 255, 255, 0.12));
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
  flex-shrink: 0;
}
.dash3-modnav__btn:hover .dash3-modnav__num {
  background: var(--m-accent);
  border-color: var(--m-accent);
  transform: scale(1.04);
}
.dash3-modnav__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.dash3-modnav__lbl {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #ffffff;
}
.dash3-modnav__hint {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(229, 231, 255, 0.78);
}
.dash3-modnav__arrow {
  color: rgba(229, 231, 255, 0.6);
  font-size: 18px;
  line-height: 1;
  transition: color 220ms ease, transform 220ms ease;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.dash3-modnav__btn:hover .dash3-modnav__arrow {
  color: #ffffff;
  transform: translateX(4px);
}

/* Per-module accent colors */
.dash3-modnav__btn--m1 { --m-accent: #ef4444; }
.dash3-modnav__btn--m2 { --m-accent: #8b5cf6; }
.dash3-modnav__btn--m3 { --m-accent: #0ea5e9; }
.dash3-modnav__btn--m4 { --m-accent: #f59e0b; }
.dash3-modnav__btn--m5 { --m-accent: #e11d48; }

@media (max-width: 980px) {
  .dash3-modnav { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .dash3-modnav { grid-template-columns: 1fr; }
  .dash3-modnav__btn { padding: 14px 18px; }
}

@media (max-width: 880px) {
  .dash3-bridge__row { padding: 22px 22px 18px; }
  .dash3-modnav { grid-template-columns: repeat(2, 1fr); }
}

/* ── KPI "Instruments" ──────────────────────────────────────────── */
.dash3-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 32px 4px;
}
@media (max-width: 1280px) { .dash3-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .dash3-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .dash3-kpis { grid-template-columns: 1fr; } }

.dash3-kpi {
  --accent: #4f46e5;
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--d3-surface);
  border: 1px solid var(--d3-line);
  border-radius: var(--d3-radius);
  padding: 16px 16px 14px;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), box-shadow 220ms ease, border-color 200ms ease;
  box-shadow: var(--d3-shadow);
  animation: d3-fade-up 540ms cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(80ms + var(--anim-i, 0) * 70ms);
  min-width: 0;
}
/* No top accent gradient. No hover wash. Card boundary = soft shadow +
   hairline border. Accent lives only in the dot, value emphasis and
   progress-bar fill — never in chrome. */
.dash3-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 14px 30px -18px rgba(15, 23, 42, 0.22);
  border-color: var(--d3-line-strong);
}
.dash3-kpi:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.dash3-kpi__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--d3-muted);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.dash3-kpi__lens {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.dash3-kpi__lens i {
  font-size: 13px;
  line-height: 1;
  color: var(--accent);
}
/* Legacy dot kept for any pre-icon callers; safe to leave. */
.dash3-kpi__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.dash3-kpi__topright {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dash3-kpi__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: transparent;
  color: var(--d3-muted);
  cursor: help;
  transition: background 160ms ease, color 160ms ease;
  user-select: none;
  flex-shrink: 0;
}
.dash3-kpi__info i {
  font-size: 15px;
  line-height: 1;
}
.dash3-kpi__info:hover,
.dash3-kpi__info:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  outline: none;
}
.dash3-kpi__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.dash3-kpi__cta i { font-size: 13px; }
/* Heuristic pill — quiet, never accent-colored. Signals "Illustrative" per DEFERRED_SCOPE.md vocabulary. */
.dash3-kpi__heuristic {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--d3-surface-2);
  color: var(--d3-muted);
  border: 1px solid var(--d3-line);
  white-space: nowrap;
  cursor: help;
}
.dash3-kpi__heuristic i { font-size: 11px; line-height: 1; }
.dash3-kpi:hover .dash3-kpi__cta { opacity: 1; transform: translateX(0); }
.dash3-kpi__label {
  font-size: 13px;
  color: var(--d3-ink-2);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.dash3-kpi__valrow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.dash3-kpi__value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--d3-ink);
  letter-spacing: -0.018em;
  font-variant-numeric: tabular-nums;
}
.dash3-kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dash3-kpi__delta--good { color: var(--d3-good); background: var(--d3-good-bg); }
.dash3-kpi__delta--bad  { color: var(--d3-bad);  background: var(--d3-bad-bg);  }
.dash3-kpi__delta--flat { color: var(--d3-muted); background: rgba(100, 116, 139, 0.1); }
.dash3-kpi__spark {
  margin: 10px 0 4px;
  min-height: 36px;
}
.dash3-kpi__spark .sparkline { width: 100%; height: 36px; }
.dash3-kpi__sub {
  font-size: 12px;
  color: var(--d3-muted);
  line-height: 1.4;
}

/* ── KPI composition strip (real-data micro-viz) ───────────────────── */
/* Either a share bar (% of open AR) or a structured PTP breakdown.
   This is the ONLY visual on the KPI card that uses real portfolio
   data — sparklines were removed because we don't yet persist KPI
   history. */
.dash3-kpi__share {
  /* Pin to bottom of card so progress bars align across siblings even when
     sub-text length differs between cards. */
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash3-kpi__share-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--d3-surface-2);
  box-shadow: inset 0 0 0 1px var(--d3-line);
  overflow: hidden;
}
.dash3-kpi__share-bar > span {
  display: block;
  height: 100%;
  background: var(--share-color, var(--d3-accent));
  border-radius: 999px;
  transition: width 600ms cubic-bezier(.2, .8, .2, 1);
}
.dash3-kpi__share-pct {
  font-size: 11px;
  color: var(--d3-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.dash3-kpi__compo {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px dashed var(--d3-line);
}
.dash3-kpi__compo-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11.5px;
}
.dash3-kpi__compo-row span {
  color: var(--d3-muted);
  letter-spacing: 0.005em;
}
.dash3-kpi__compo-row strong {
  color: var(--d3-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dash3-kpi__formula {
  display: inline-block;
  margin-top: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  background: var(--d3-surface-2);
  border: 1px solid var(--d3-line);
  color: var(--d3-muted);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0;
}

/* ── Action grid ────────────────────────────────────────────────── */
.dash3-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 18px;
  padding: 18px 32px 32px;
}
@media (max-width: 1200px) { .dash3-grid { grid-template-columns: 1fr; } }
.dash3-grid__main, .dash3-grid__side { display: flex; flex-direction: column; gap: 18px; }

.dash3-panel {
  background: var(--d3-surface);
  border: 1px solid var(--d3-line);
  border-radius: var(--d3-radius);
  padding: 22px 22px 20px;
  box-shadow: var(--d3-shadow);
  animation: d3-fade-up 600ms cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: 200ms;
}
.dash3-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.dash3-panel__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--d3-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dash3-panel__title i {
  font-size: 17px;
  color: var(--d3-accent);
  line-height: 1;
}
.dash3-panel__sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--d3-muted);
  line-height: 1.45;
}
.dash3-panel__sub strong { color: var(--d3-ink-2); font-weight: 600; }
.dash3-panel__sub em { font-style: italic; color: var(--d3-muted); }
.dash3-panel__badge {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--d3-surface-2);
  border: 1px solid var(--d3-line);
  color: var(--d3-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dash3-panel__badge i { font-size: 12px; line-height: 1; }
.dash3-panel__badge--info { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }

/* ── Worklist tabs ──────────────────────────────────────────────── */
/* Lens switcher above the dashboard worklist. Each tab is a self-contained
   pill that shows label + active count + descriptive hint, so the user
   knows what they're switching between before they click. */
/* Worklist lens tabs — pill-on-track. All three read clearly as tabs,
   each carries its own accent color. */
.dash3-wltabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 14px;
  padding: 5px;
  background: var(--d3-surface-2);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--d3-line);
}
.dash3-wltab {
  --accent: #4f46e5;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--d3-muted);
  transition: background 160ms ease, color 160ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.dash3-wltab:hover {
  background: color-mix(in srgb, var(--accent) 6%, #fff);
  color: var(--d3-ink-2);
}
.dash3-wltab--active {
  background: var(--d3-surface);
  color: var(--d3-ink);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 4px 14px -6px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}
.dash3-wltab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
.dash3-wltab__top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.dash3-wltab__lens {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: inherit;
}
.dash3-wltab__lens i {
  font-size: 15px;
  line-height: 1;
  color: var(--accent);
}
.dash3-wltab__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  flex-shrink: 0;
}
.dash3-wltab__count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--d3-muted);
  background: var(--d3-surface-2);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px var(--d3-line);
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.dash3-wltab--active .dash3-wltab__count {
  background: color-mix(in srgb, var(--accent) 14%, var(--d3-surface));
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.dash3-wltab__hint {
  font-size: 11.5px;
  color: var(--d3-muted);
  font-weight: 500;
}
.dash3-wltab--active .dash3-wltab__hint {
  color: color-mix(in srgb, var(--d3-ink) 60%, transparent);
}

/* ── Worklist legend strip ────────────────────────────────────────
   Inline explanation of what the pills on each lens mean. Surfaced
   beneath the tabs so the user doesn't have to hover to learn the
   categories. Only rendered on Invoices and Disputes (the Customers
   lens uses self-explanatory pills). */
.dash3-wllegend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--d3-surface-2);
  border: 1px solid var(--d3-line);
  border-radius: 10px;
  font-size: 11.5px;
  color: var(--d3-muted);
}
.dash3-wllegend__title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d3-ink-2);
  padding-right: 12px;
  border-right: 1px solid var(--d3-line);
  margin-right: 4px;
}
.dash3-wllegend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.dash3-wllegend__chip {
  /* Suppress the size variation when the pill is shown inside the legend */
  padding: 2px 7px !important;
  font-size: 10.5px !important;
  margin-right: 2px;
}
.dash3-wllegend__note {
  width: 100%;
  font-size: 10.5px;
  color: var(--d3-ink-2);
  font-style: italic;
  padding-top: 4px;
  border-top: 1px dashed var(--d3-line);
  margin-top: 2px;
}
@media (max-width: 720px) {
  .dash3-wllegend__title { border-right: 0; padding-right: 0; }
  .dash3-wllegend__item { white-space: normal; }
}

/* Severity rail on the row's leading edge — makes triage scannable at a
   glance even before reading any pill text. */
.dash3-row--sev-bad     { box-shadow: inset 3px 0 0 0 #dc2626; }
.dash3-row--sev-warn    { box-shadow: inset 3px 0 0 0 #f59e0b; }
.dash3-row--sev-neutral { box-shadow: inset 3px 0 0 0 transparent; }

/* Inline resolution-path tag in Disputes why-text (replaces the previous
   "Billing fix / Negotiate" pill, which was duplicative). */
.dash3-row__path {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
  cursor: help;
  border: 1px solid transparent;
}
.dash3-row__path--bad {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.18);
}
.dash3-row__path--neutral {
  color: var(--d3-ink-2);
  background: rgba(15, 23, 42, 0.04);
  border-color: var(--d3-line);
}

/* ── Worklist rows ──────────────────────────────────────────────── */
.dash3-worklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash3-row--empty {
  padding: 28px 12px;
  text-align: center;
}
.dash3-row--empty .dash3-row__main { grid-column: 1 / -1; }
.dash3-row--empty .dash3-row__why { text-align: center; }
.dash3-row {
  --row-accent: #4f46e5;
  position: relative;
  display: grid;
  /* Flexible main + stat columns shrink to fit; right cluster stays compact. */
  grid-template-columns: 22px 36px minmax(0, 1.8fr) minmax(0, 0.85fr) minmax(0, 0.85fr) auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--d3-surface);
  border: 0;
  border-radius: var(--d3-radius-sm);
  box-shadow: 0 0 0 1px var(--d3-line);
  margin-bottom: 6px;
  /* min-width: 0 is critical — without it, the row (a flex child) grows past
     its parent container when the grid's intrinsic min-content exceeds the
     panel width, dragging the pill + CTA outside the card boundary. */
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow 220ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), background 180ms ease;
  animation: d3-fade-up 500ms cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(120ms + var(--anim-i, 0) * 50ms);
}
/* Left accent rail removed — felt templated. Severity now reads through
   the pill chip + CTA color + rank tint. */
.dash3-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--d3-line-strong),
              0 10px 24px -16px rgba(15, 23, 42, 0.25);
  background: var(--d3-surface);
}
.dash3-row:last-child { margin-bottom: 0; }
.dash3-row__rank {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
  color: var(--d3-muted);
  letter-spacing: 0.05em;
  text-align: center;
}
.dash3-row__avatar {
  --c1: #6366f1; --c2: #0ea5e9;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--c1) 40%, transparent);
  font-variant-numeric: tabular-nums;
}
/* Numeric IDs from anonymized "Customer NNN" names — scale font down so
   3-4 digits still fit inside the avatar disc without overflowing. */
.dash3-row__avatar[data-len="3"] { font-size: 10.5px; letter-spacing: -0.01em; }
.dash3-row__avatar[data-len="4"] { font-size: 9.5px; letter-spacing: -0.025em; }
.dash3-row__main { min-width: 0; overflow: hidden; }
.dash3-row__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--d3-ink);
  letter-spacing: -0.005em;
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash3-row__id {
  font-size: 11px;
  font-weight: 500;
  color: var(--d3-muted);
  font-variant-numeric: tabular-nums;
}
.dash3-row__meta { font-size: 11.5px; color: var(--d3-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash3-row__why { font-size: 12px; color: var(--d3-ink-2); margin-top: 4px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dash3-row__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.dash3-row__stat strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash3-row__stat span {
  font-size: 10.5px;
  color: var(--d3-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.dash3-row__stat strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--d3-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.dash3-row__sparkwrap {
  margin-top: 2px;
  height: 22px;
}
.dash3-row__sparkwrap .sparkline { width: 100%; height: 22px; }

.dash3-row__health {
  --ring-deg: 0deg;
  --ring-color: #10b981;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    conic-gradient(var(--ring-color) var(--ring-deg), rgba(15, 23, 42, 0.07) var(--ring-deg));
  display: grid;
  place-items: center;
  cursor: help;
  transition: transform 200ms ease;
}
.dash3-row:hover .dash3-row__health { transform: scale(1.04); }
.dash3-row__health::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ring-color) 12%, transparent);
}
.dash3-row__health-num {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--d3-ink);
}
.dash3-row__health--bad .dash3-row__health-num  { color: #b91c1c; }
.dash3-row__health--warn .dash3-row__health-num { color: #b45309; }
.dash3-row__health--ok .dash3-row__health-num   { color: #047857; }

/* ── Health chip (replaces the conic ring — calmer, less alarmist) ─── */
.dash3-row__healthchip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 6px 10px;
  border-radius: 8px;
  min-width: 0;
  cursor: help;
  font-variant-numeric: tabular-nums;
  transition: filter 160ms ease;
}
.dash3-row__healthchip:hover { filter: brightness(0.98); }
.dash3-row__healthchip-lbl {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.75;
}
.dash3-row__healthchip-val {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}
.dash3-row__healthchip-denom {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.55;
  margin-left: 1px;
}
.dash3-row__healthchip--bad {
  background: var(--d3-bad-bg);
  color: var(--d3-bad);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--d3-bad) 18%, transparent);
}
.dash3-row__healthchip--warn {
  background: var(--d3-warn-bg);
  color: var(--d3-warn);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--d3-warn) 22%, transparent);
}
.dash3-row__healthchip--ok {
  background: var(--d3-good-bg);
  color: var(--d3-good);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--d3-good) 22%, transparent);
}

.dash3-row__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  /* When the pill has a `title` attribute (Invoices/Disputes lenses), the
     help cursor + a slight underline-on-hover signals "more info available". */
}
.dash3-row__pill[title] {
  cursor: help;
  transition: transform 160ms ease, filter 160ms ease;
}
.dash3-row__pill[title]:hover {
  transform: scale(1.04);
  filter: brightness(1.04);
}
.dash3-row__pill--bad     { background: var(--d3-bad-bg);  color: var(--d3-bad);  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--d3-bad)  22%, transparent); }
.dash3-row__pill--warn    { background: var(--d3-warn-bg); color: var(--d3-warn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--d3-warn) 22%, transparent); }
.dash3-row__pill--neutral { background: #eef2ff;           color: #4338ca;         box-shadow: inset 0 0 0 1px color-mix(in srgb, #4338ca 22%, transparent); }

.dash3-row__cta {
  appearance: none;
  border: 0;
  background: var(--row-accent, var(--d3-accent));
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.005em;
  transition: filter 160ms ease, transform 200ms ease, box-shadow 200ms ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.dash3-row__cta:hover {
  filter: brightness(0.94);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--row-accent, var(--d3-accent)) 60%, rgba(15, 23, 42, 0.3));
  transform: translateY(-1px);
}
.dash3-row__cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--row-accent, var(--d3-accent)) 28%, transparent);
}

@media (max-width: 1180px) {
  .dash3-row {
    grid-template-columns: 22px 36px 1fr 80px 78px 78px 76px;
  }
  .dash3-row__stat:nth-of-type(2) { display: none; }
}
@media (max-width: 880px) {
  .dash3-row {
    grid-template-columns: 28px 40px 1fr 80px;
    grid-template-areas:
      "rank avatar main main"
      ".    .      stat1 cta"
      ".    .      stat2 pill";
  }
  .dash3-row__rank { grid-area: rank; }
  .dash3-row__avatar { grid-area: avatar; }
  .dash3-row__main { grid-area: main; }
  .dash3-row__stat:nth-of-type(1) { grid-area: stat1; }
  .dash3-row__stat:nth-of-type(2) { grid-area: stat2; }
  .dash3-row__pill { grid-area: pill; justify-self: end; }
  .dash3-row__cta  { grid-area: cta;  justify-self: end; }
  .dash3-row__health { display: none; }
}

/* ── Payment-strip + jump button (Module 3 quick-deck) ──────────── */
.dash3-paystrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px) { .dash3-paystrip { grid-template-columns: 1fr; } }
.dash3-paystrip__item {
  --accent: var(--d3-accent);
  position: relative;
  background: var(--d3-surface);
  border: 0;
  border-radius: var(--d3-radius-sm);
  box-shadow: 0 0 0 1px var(--d3-line);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 200ms ease, transform 200ms cubic-bezier(.2,.8,.2,1);
}
.dash3-paystrip__item:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--d3-line-strong), 0 10px 24px -16px rgba(15, 23, 42, 0.22);
}
.dash3-paystrip__item--ok   { --accent: var(--d3-good); }
.dash3-paystrip__item--warn { --accent: var(--d3-warn); }
.dash3-paystrip__item--info { --accent: var(--d3-accent); }
.dash3-paystrip__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.dash3-paystrip__label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  flex-shrink: 0;
}
.dash3-paystrip__val {
  font-size: 24px;
  font-weight: 700;
  color: var(--d3-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 2px;
}
.dash3-paystrip__hint {
  font-size: 11.5px;
  color: var(--d3-muted);
  line-height: 1.4;
}
.dash3-jump {
  appearance: none;
  margin-top: 14px;
  background: transparent;
  border: 1px solid var(--d3-line-strong);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--d3-accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 160ms ease, border-color 160ms ease;
}
.dash3-jump:hover {
  background: var(--d3-surface-2);
  border-color: var(--d3-accent);
}
.dash3-jump i { font-size: 14px; line-height: 1; transition: transform 200ms ease; }
.dash3-jump:hover i { transform: translateX(3px); }

/* ── Concentration ──────────────────────────────────────────────── */
.dash3-conc-stack {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--d3-surface-2);
  box-shadow: inset 0 0 0 1px var(--d3-line);
  margin-bottom: 18px;
}
.dash3-conc-stack__seg {
  display: block;
  height: 100%;
  transition: filter 160ms ease;
}
.dash3-conc-stack__seg:hover { filter: brightness(1.08); }
.dash3-conc-stack__seg--rest { background: repeating-linear-gradient(45deg, #e5e7eb 0 6px, #f1f5f9 6px 12px); }

.dash3-conc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dash3-conc__row {
  display: grid;
  grid-template-columns: 12px 1fr;
  grid-template-rows: auto auto;
  gap: 4px 10px;
  align-items: center;
}
.dash3-conc__sw {
  grid-row: 1 / span 2;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 4px;
}
.dash3-conc__body {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.dash3-conc__lbl {
  font-size: 12.5px;
  color: var(--d3-ink-2);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.dash3-conc__pct {
  font-size: 11.5px;
  color: var(--d3-muted);
  font-variant-numeric: tabular-nums;
}
.dash3-conc__pct strong {
  color: var(--d3-ink);
  font-weight: 700;
  margin-right: 4px;
}
.dash3-conc__bar {
  grid-column: 2;
  height: 5px;
  background: var(--d3-surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.dash3-conc__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 600ms cubic-bezier(.2, .8, .2, 1);
}

/* ── Forecast micro-panel ───────────────────────────────────────── */
.dash3-forecast {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash3-forecast__top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.dash3-forecast__amt {
  font-size: 28px;
  font-weight: 700;
  color: var(--d3-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.018em;
}
.dash3-forecast__spark { margin-top: 4px; min-height: 56px; }
.dash3-forecast__spark .sparkline { width: 100%; height: 56px; }

/* ── Recommended actions ────────────────────────────────────────── */
.dash3-rec {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash3-rec__item {
  border-radius: var(--d3-radius-sm);
  animation: d3-fade-up 480ms cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(140ms + var(--anim-i, 0) * 60ms);
}
.dash3-rec__btn {
  appearance: none;
  width: 100%;
  background: var(--d3-surface);
  border: 1px solid var(--d3-line);
  border-radius: var(--d3-radius-sm);
  padding: 12px 14px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 200ms ease;
}
.dash3-rec__btn:hover {
  background: var(--d3-surface-2);
  border-color: var(--d3-line-strong);
  transform: translateX(2px);
}
.dash3-rec__sev {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--d3-muted);
}
.dash3-rec__item--bad  .dash3-rec__sev { background: var(--d3-bad); box-shadow: 0 0 0 3px var(--d3-bad-bg); }
.dash3-rec__item--warn .dash3-rec__sev { background: var(--d3-warn); box-shadow: 0 0 0 3px var(--d3-warn-bg); }
.dash3-rec__item--info .dash3-rec__sev { background: var(--d3-accent); box-shadow: 0 0 0 3px #eef2ff; }
.dash3-rec__body { flex: 1 1 auto; min-width: 0; }
.dash3-rec__body strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--d3-ink);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.dash3-rec__body span {
  display: block;
  font-size: 12px;
  color: var(--d3-muted);
  line-height: 1.4;
}
.dash3-rec__arrow {
  color: var(--d3-muted);
  font-size: 16px;
  transition: color 160ms ease, transform 200ms ease;
}
.dash3-rec__btn:hover .dash3-rec__arrow {
  color: var(--d3-accent);
  transform: translateX(2px);
}

/* ── Animations ────────────────────────────────────────────────── */
@keyframes d3-fade-up {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes d3-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.22); }
  50%      { box-shadow: 0 0 0 6px rgba(34, 211, 238, 0.05); }
}

@media (prefers-reduced-motion: reduce) {
  /* Disable all entrance / running animations + transition affordances
     that move elements. Hover state colour changes remain (they're not
     motion). Sweep covers dashboard + M1 + shared components. */
  .dash3-bridge,
  .dash3-kpi,
  .dash3-panel,
  .dash3-row,
  .dash3-rec__item { animation: none !important; }
  .dash3-chip__pip,
  .dash3-chip--live i,
  .dash3-wc__title i,
  .dash3-prev__seg,
  .dash3-aging__seg { animation: none !important; }
  .dash3-kpi:hover,
  .dash3-row:hover,
  .dash3-panel:hover,
  .dash3-prev__btn:hover,
  .m1pro-heatmap__cell:hover,
  .m1pro-heatmap__cell--clickable:hover,
  .nav-btn:hover,
  .button--with-icon:hover i,
  .dash3-jump:hover i,
  .dash3-kpi__cta,
  .dash3-prev__cta,
  .m1pro-fwd__cta,
  .dash3-northstar__risk-btn:hover i,
  .dash3-health-row:hover,
  .dash3-health-row__arrow,
  .m1pro-chip:hover { transform: none !important; }
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================== */
/* Module 5 — Disputes                                            */
/* Reuses m1pro-* / m3an-* chrome; adds dispute-specific chips    */
/* and row actions. Keep this section small — most of the visual  */
/* system comes from the shared module shell.                     */
/* ============================================================== */

.m5-shell .m1pro-subnav__btn { min-width: 0; }

/* Compact two-line customer cell */
.m5-cust { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m5-cust__name { font-weight: 600; color: var(--text); }
.m5-cust__meta { color: var(--muted); }

/* Monospace for IDs (dispute id, invoice id) */
.m5-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--text); }
.m5-td-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

/* Repeat-customer dot — surfaces "this customer disputes a lot" */
.m5-repeat-dot {
  display: inline-block;
  margin-left: 4px;
  font-size: 12px;
  color: #b45309;
  background: #fef3c7;
  border-radius: 999px;
  padding: 0 6px;
  border: 1px solid #fde68a;
  line-height: 16px;
  vertical-align: middle;
}

/* Preventability chip — the most important classification in M5 */
.m5-prev-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
  letter-spacing: 0.01em;
}
.m5-prev-chip--bad {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.m5-prev-chip--ok {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}

/* Status chip — workflow state */
.m5-status-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.m5-status-chip--open {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}
.m5-status-chip--resolved {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

/* Row actions cluster — keep buttons tight, right-aligned */
.m5-rowactions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.m5-rowactions .m3an-rowbtn { padding: 4px 8px; font-size: 12px; }

/* Queue table — tighten id + give value-at-risk visual weight */
.m5-qtable td.m3an-td { vertical-align: middle; }
.m5-qtable .m5-row:hover { background: var(--hover-bg, #f8fafc); }
.m5-qtable .m3an-td--right strong { font-variant-numeric: tabular-nums; }

/* ── M5 Analytics ─────────────────────────────────────────────── */

/* Compact summary strip at top of Analytics — 4 tiles, less weight than the Register KPI tiles */
.m5-an-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 16px;
}
@media (max-width: 1100px) {
  .m5-an-summary { grid-template-columns: repeat(2, 1fr); }
}
.m5-an-tile {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.m5-an-tile__lbl {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.m5-an-tile__val {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.m5-an-tile__hint {
  font-size: 11.5px;
  color: #64748b;
}

/* Analytics sub-nav — three pills inside the Analytics tab */
.m5-an-subnav {
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 4px;
  margin: 8px 0 16px;
}
.m5-an-subnav__btn {
  flex: 1;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-family: inherit;
  color: #475569;
  transition: background 140ms ease, color 140ms ease;
}
.m5-an-subnav__btn:hover { background: #e2e8f0; }
.m5-an-subnav__btn.is-active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.m5-an-subnav__lbl {
  font-size: 13.5px;
  font-weight: 600;
}
.m5-an-subnav__hint {
  font-size: 11.5px;
  color: #64748b;
}

/* 3-column grid for Recurrence / Leakage sub-views (Backlog uses full width) */
.m5-an-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1100px) {
  .m5-an-grid { grid-template-columns: 1fr; }
}
.m5-an-card {
  padding: 14px 16px;
}
.m5-an-card--wide {
  grid-column: 1 / -1;
}
.m5-an-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.m5-an-card__head h3 {
  margin: 0 0 2px 0;
  font-size: 14px;
  color: #0f172a;
}
.m5-an-card__head p {
  margin: 0;
}

/* Inline pill — used in card headers (leakage, backlog status counts) */
.m5-an-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  border: 1px solid transparent;
  margin-left: 4px;
}
.m5-an-pill--bad {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.m5-an-pill--warn {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}
.m5-an-pill--ok {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}

/* Backlog table — clearer separators because it's an action surface */
.m5-backlog-table tbody tr { border-top: 1px solid #f1f5f9; }
.m5-backlog-table tbody tr:hover { background: #f8fafc; }
.m5-an-backlog-meta {
  display: flex;
  align-items: center;
  gap: 0;
}

/* ── Module 2 · Corrections queue ──────────────────────────────── */

.m2-corr-shell { padding: 14px 16px; }

/* Source chip — Disputes (rose) vs Manual (slate) */
.m2-corr-src {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.m2-corr-src--disputes {
  background: #fff1f2;
  color: #be123c;
  border-color: #fecdd3;
}
.m2-corr-src--manual {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

/* Pattern cell content — strong proposed value + small reason */
.m2-corr-pattern {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-width: 380px;
}
.m2-corr-reason {
  white-space: normal;
  line-height: 1.35;
}

/* Upstream fix note shown back on a resolved correction row */
.m2-corr-fixnote {
  margin-top: 4px;
  padding: 4px 8px;
  border-left: 2px solid #16a34a;
  background: #f0fdf4;
  color: #166534;
  border-radius: 0 4px 4px 0;
  line-height: 1.35;
  max-width: 320px;
  white-space: normal;
}

/* Resolve modal — wider than the default m1-modal to fit the textarea */
.m2-resolve-modal {
  min-width: 520px;
  max-width: 640px;
}

/* ── Register · upstream fix badge (per-dispute) ───────────────── */

.m5-td-id__fix {
  margin-top: 4px;
}
.m5-fix-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.m5-fix-chip--inprog {
  background: #fff1f2;
  color: #be123c;
  border-color: #fecdd3;
}
.m5-fix-chip--done {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}

/* ── Module 5 · Case workspace ─────────────────────────────────── */

.m5-case-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.m5-case-header {
  background: var(--panel-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 16px 18px;
}
.m5-case-header__top {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.m5-case-header__id .eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.m5-case-header__id h2 {
  margin: 2px 0 0 0;
  font-size: 22px;
  letter-spacing: 0.01em;
}
.m5-case-header__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.m5-case-header__back {
  margin-left: auto;
}
.m5-case-header__meta {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}
.m5-case-header__meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.m5-case-header__meta strong {
  font-size: 14px;
  color: #0f172a;
}
@media (max-width: 1100px) {
  .m5-case-header__meta { grid-template-columns: repeat(2, 1fr); }
}

.m5-case-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1200px) {
  .m5-case-body { grid-template-columns: 1fr; }
}
.m5-case-body__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.m5-case-body__side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 12px;
}

/* Classification + resolution panel */
.m5-case-panel {
  padding: 16px 18px;
}
.m5-case-panel__head h3 {
  margin: 0 0 4px 0;
  font-size: 14px;
}
.m5-case-panel__head p {
  margin: 0;
}
.m5-case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 900px) {
  .m5-case-grid { grid-template-columns: 1fr; }
}
.m5-case-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.m5-case-field--full { grid-column: 1 / -1; }
.m5-case-field label { font-size: 12.5px; font-weight: 600; color: #334155; }

/* Actions strip */
.m5-case-actions {
  padding: 14px 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
}
.m5-case-actions__main {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.m5-case-actions__addnote {
  display: flex;
  gap: 8px;
  align-items: stretch;
  min-width: 0;
}
.m5-case-actions__addnote textarea {
  flex: 1;
  min-height: 38px;
  resize: vertical;
}
@media (max-width: 900px) {
  .m5-case-actions { grid-template-columns: 1fr; }
}

/* Context cards (right rail) */
.m5-ctx-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
}
.m5-ctx-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.m5-ctx-card__head h3 {
  margin: 0;
  font-size: 13px;
  color: #0f172a;
}
.m5-ctx-card__kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 14px;
  row-gap: 6px;
  margin: 0;
  font-size: 12.5px;
}
.m5-ctx-card__kv dt { color: #64748b; }
.m5-ctx-card__kv dd { margin: 0; color: #0f172a; text-align: right; }
.m5-ctx-card__note {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid transparent;
}
.m5-ctx-card__note--warn {
  background: #fff7ed;
  color: #9a3412;
  border-color: #fed7aa;
}
.m5-ctx-card__note--ok {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}

/* Related disputes list */
.m5-related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.m5-related-row {
  width: 100%;
  appearance: none;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.m5-related-row:hover { background: #f1f5f9; }
.m5-related-row:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }

/* Empty state for unselected case */
.m5-case-empty { padding: 16px 18px; }

/* Activity panel (case-scoped) */
.m5-case-activity {
  padding: 14px 18px;
}

/* Source chip — case-level variant */
.m2-corr-src--case {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

/* ================================================================== */
/* Module 3 — Payment behavior · enterprise visual polish              */
/* ------------------------------------------------------------------ */
/* Scoped under .m3-shell so other modules (M2 in particular) keep    */
/* their existing look. Same token vocabulary as the dashboard         */
/* (--d3-* / --accent) — white surfaces, hairline edges, layered      */
/* shadows, per-card accents, no harsh borders.                       */
/* ================================================================== */

.m3-shell {
  --d3-ink: #0b1220;
  --d3-ink-2: #1f2937;
  --d3-muted: #64748b;
  --d3-line: rgba(15, 23, 42, 0.08);
  --d3-line-strong: rgba(15, 23, 42, 0.14);
  --d3-surface: #ffffff;
  --d3-surface-2: #f8fafc;
  --d3-bg: linear-gradient(180deg, #f6f8fd 0%, #f3f5fb 360px, #f7f8fc 100%);
  --d3-accent: #4f46e5;
  --d3-good: #059669;
  --d3-good-bg: #ecfdf5;
  --d3-bad: #dc2626;
  --d3-bad-bg: #fef2f2;
  --d3-warn: #d97706;
  --d3-warn-bg: #fffbeb;
  --d3-radius: 14px;
  --d3-radius-sm: 10px;
  --d3-shadow: 0 1px 0 rgba(15, 23, 42, 0.02), 0 8px 24px -16px rgba(15, 23, 42, 0.18);
  --d3-shadow-lg: 0 1px 0 rgba(15, 23, 42, 0.03), 0 24px 64px -36px rgba(15, 23, 42, 0.32);
  background: var(--d3-bg);
  font-feature-settings: "ss01", "cv01", "tnum" 1;
}

/* ── Sub-nav · pill-on-track tab pattern ───────────────────────── */
/* Replaces the line-of-bordered-buttons look. Single track, white   */
/* active state with soft elevation, no borders.                     */
/* Page header — picks up base .m2-queue__head from M2. Just align right column. */
.m3-shell .m3-pagehead .m2-queue__head-meta,
.m4-shell .m4-pagehead .m2-queue__head-meta,
.m5-shell .m5-pagehead .m2-queue__head-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.m3-shell .m3-pagehead .m2-queue__head-actions,
.m4-shell .m4-pagehead .m2-queue__head-actions,
.m5-shell .m5-pagehead .m2-queue__head-actions {
  display: inline-flex;
  gap: 8px;
}
.m3-shell .m3-pagehead .m2-queue__head-actions .button i,
.m4-shell .m4-pagehead .m2-queue__head-actions .button i,
.m5-shell .m5-pagehead .m2-queue__head-actions .button i {
  margin-right: 6px;
}

/* M5 CFO cash-blocked strip — same icon-tile shape as M3 .m3an-cfostrip. */
.m5-shell .m5-cfostrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}
@media (max-width: 980px) {
  .m5-shell .m5-cfostrip { grid-template-columns: repeat(2, 1fr); }
}
.m5-shell .m5-cfostat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--d3-radius-sm);
  border: 1px solid var(--d3-line);
  background: var(--d3-surface);
  appearance: none;
  font-family: inherit;
  text-align: left;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.m5-shell button.m5-cfostat {
  cursor: pointer;
  width: 100%;
}
.m5-shell button.m5-cfostat:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03), 0 8px 18px -12px rgba(15, 23, 42, 0.22);
}
.m5-shell button.m5-cfostat:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--d3-accent) 25%, transparent);
}
.m5-shell .m5-cfostat__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  font-size: 19px;
  line-height: 1;
}
.m5-shell .m5-cfostat__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m5-shell .m5-cfostat__val {
  font-size: 18px;
  font-weight: 700;
  color: var(--d3-ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.m5-shell .m5-cfostat__lbl {
  font-size: 11.5px;
  color: var(--d3-muted);
  line-height: 1.4;
}
.m5-shell .m5-cfostat__lbl strong { color: var(--d3-ink-2); font-weight: 700; }
.m5-shell .m5-cfostat--bad  .m5-cfostat__ic { background: #fef2f2; color: #b91c1c; }
.m5-shell .m5-cfostat--warn .m5-cfostat__ic { background: #fffbeb; color: #b45309; }
.m5-shell .m5-cfostat--info .m5-cfostat__ic { background: #eff6ff; color: #1d4ed8; }
.m5-shell .m5-cfostat--ok   .m5-cfostat__ic { background: #ecfdf5; color: #047857; }

/* M5 Governance (policy & admin surface) */
.m5-shell .m5-gov__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 1100px) { .m5-shell .m5-gov__grid { grid-template-columns: 1fr; } }
.m5-shell .m5gov-body { padding: 0 18px 14px; font-size: 13px; color: #1f2937; }
.m5-shell .m5gov-table th,
.m5-shell .m5gov-table td { font-size: 12.5px; padding: 7px 10px; }
.m5-shell .m5gov-table thead th {
  background: #f8fafc;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  font-size: 11.5px;
  color: #475569;
}
.m5-shell .m5gov-taxonomy {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.m5-shell .m5gov-taxonomy__chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
}
.m5-shell .m5gov-defs {
  margin: 0;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 6px 14px;
  font-size: 12.5px;
}
.m5-shell .m5gov-defs dt { color: #475569; font-weight: 600; }
.m5-shell .m5gov-defs dd { margin: 0; color: #1f2937; }
.m5-shell .m5gov-auditstats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px) { .m5-shell .m5gov-auditstats { grid-template-columns: repeat(2, 1fr); } }
.m5-shell .m5gov-auditstats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.m5-shell .m5gov-auditstats strong {
  font-size: 18px;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.m3-shell .m3-subnav {
  display: flex;
  gap: 4px;
  padding: 5px;
  margin: 14px 0 18px;
  background: var(--d3-surface-2);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--d3-line);
  overflow-x: auto;
  scrollbar-width: thin;
}
.m3-shell .m3-subnav__btn {
  flex: 1;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 16px;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  cursor: pointer;
  font-family: inherit;
  color: var(--d3-muted);
  transition: background 160ms ease, color 160ms ease, box-shadow 200ms ease, transform 200ms ease;
  min-width: 0;
  text-align: left;
}
.m3-shell .m3-subnav__icon {
  grid-row: span 2;
  align-self: center;
  font-size: 16px;
  line-height: 1;
  color: inherit;
}
.m3-shell .m3-subnav__btn.is-active .m3-subnav__icon {
  color: var(--d3-accent);
}
.m3-shell .m3-subnav__btn:hover {
  background: color-mix(in srgb, var(--d3-accent) 6%, #fff);
  color: var(--d3-ink-2);
}
.m3-shell .m3-subnav__btn.is-active {
  background: var(--d3-surface);
  color: var(--d3-ink);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 4px 14px -6px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}
.m3-shell .m3-subnav__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--d3-accent) 28%, transparent);
}
.m3-shell .m3-subnav__lbl {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.m3-shell .m3-subnav__hint {
  font-size: 11.5px;
  color: var(--d3-muted);
  font-weight: 500;
}
.m3-shell .m3-subnav__btn.is-active .m3-subnav__hint {
  color: color-mix(in srgb, var(--d3-ink) 60%, transparent);
}

/* ── Header polish ─────────────────────────────────────────────── */
.m3-shell .m3an {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.m3-shell .m3an-head {
  padding: 0 0 14px 0;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--d3-line);
}
.m3-shell .m3an-title {
  font-size: 20px;
  letter-spacing: -0.015em;
}
.m3-shell .m3an-sub {
  max-width: 70ch;
}

/* ── KPI cards · dash3-kpi style with per-card --accent ────────── */
.m3-shell .m3an-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.m3-shell .m3an-kpi {
  --accent: #6366f1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 16px;
  background: var(--d3-surface);
  border-radius: var(--d3-radius);
  box-shadow: var(--d3-shadow);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease;
  border: 0;
}
/* M3 KPI: no top accent gradient, no colored left rail, no radial hover wash. */
/* Boundary = shadow + hairline only. Severity carried inside the data. */
.m3-shell .m3an-kpi::before { content: none; }
.m3-shell .m3an-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 14px 30px -18px rgba(15, 23, 42, 0.22);
}
.m3-shell .m3an-kpi:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
.m3-shell .m3an-kpi__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  margin-bottom: 12px;
}
.m3-shell .m3an-kpi__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 19px;
  line-height: 1;
  flex-shrink: 0;
}
/* Legacy lens label retained for any callers — hidden by default in m3-shell. */
.m3-shell .m3an-kpi__lens {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.m3-shell .m3an-kpi__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.m3-shell .m3an-kpi__topright {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.m3-shell .m3an-kpi__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--d3-surface-2);
  color: var(--d3-muted);
  font-size: 13px;
  line-height: 1;
  cursor: help;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  border: 1px solid var(--d3-line-strong);
  padding: 0;
  appearance: none;
  font-family: inherit;
}
.m3-shell .m3an-kpi__info:hover,
.m3-shell .m3an-kpi__info:focus-visible {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  outline: none;
}
.m3-shell .m3an-kpi__cta {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.m3-shell .m3an-kpi__cta i { font-size: 13px; line-height: 1; }
.m3-shell .m3an-kpi:hover .m3an-kpi__cta {
  opacity: 1;
  transform: translateX(0);
}
.m3-shell .m3an-kpi__label {
  font-size: 13px;
  color: var(--d3-ink-2);
  font-weight: 600;
}
.m3-shell .m3an-kpi__value {
  font-size: 30px;
  font-weight: 700;
  color: var(--d3-ink);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.m3-shell .m3an-kpi__sub {
  font-size: 12px;
  color: var(--d3-muted);
}
.m3-shell .m3an-kpi__sub strong {
  color: var(--d3-ink);
  font-weight: 700;
}
.m3-shell .m3an-kpi__share {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.m3-shell .m3an-kpi__share-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--d3-surface-2);
  box-shadow: inset 0 0 0 1px var(--d3-line);
  overflow: hidden;
}
.m3-shell .m3an-kpi__share-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--share-color, var(--accent));
  transition: width 600ms cubic-bezier(.2,.8,.2,1);
}
.m3-shell .m3an-kpi__share-pct {
  font-size: 11px;
  color: var(--d3-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Main cards (donuts, bars, stats, tables) ──────────────────── */
.m3-shell .m3an-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.m3-shell .m3an-grid--tables {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .m3-shell .m3an-grid,
  .m3-shell .m3an-grid--tables { grid-template-columns: 1fr; }
}

.m3-shell .m3an-card {
  --accent: var(--d3-accent);
  position: relative;
  background: var(--d3-surface);
  border-radius: var(--d3-radius);
  box-shadow: var(--d3-shadow);
  padding: 18px;
  border: 0;
  overflow: hidden;
  transition: box-shadow 240ms ease, transform 240ms ease;
}
/* M3 panel card: no top accent gradient. */
.m3-shell .m3an-card:hover {
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03), 0 18px 40px -24px rgba(15, 23, 42, 0.28);
}
.m3-shell .m3an-card__head {
  margin-bottom: 14px;
}
.m3-shell .m3an-card__head--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.m3-shell .m3an-card__titlewrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.m3-shell .m3an-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  flex-shrink: 0;
}
.m3-shell .m3an-card__title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--d3-ink);
  letter-spacing: -0.01em;
}
.m3-shell .m3an-card__sub {
  font-size: 12.5px;
  color: var(--d3-muted);
  line-height: 1.5;
  margin: 0;
  max-width: 65ch;
}
.m3-shell .m3an-card__sub strong { color: var(--d3-ink-2); font-weight: 600; }
.m3-shell .m3an-card__foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--d3-line);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  color: var(--d3-muted);
}
.m3-shell .m3an-card__foot strong {
  color: var(--d3-ink);
  font-size: 15px;
  font-weight: 700;
}
/* CFO cash-at-risk strip — sits above the segment tiles on Signals & segments. */
/* Frames the page in cash terms before the credit-manager segment counts.    */
.m3-shell .m3an-cfostrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}
@media (max-width: 980px) {
  .m3-shell .m3an-cfostrip { grid-template-columns: repeat(2, 1fr); }
}
.m3-shell .m3an-cfostat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--d3-radius-sm);
  border: 1px solid var(--d3-line);
  background: var(--d3-surface);
  appearance: none;
  font-family: inherit;
  text-align: left;
  transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.m3-shell button.m3an-cfostat {
  cursor: pointer;
  width: 100%;
}
.m3-shell button.m3an-cfostat:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03), 0 8px 18px -12px rgba(15, 23, 42, 0.22);
}
.m3-shell button.m3an-cfostat:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--d3-accent) 25%, transparent);
}
.m3-shell .m3an-cfostat__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  font-size: 19px;
  line-height: 1;
}
.m3-shell .m3an-cfostat__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m3-shell .m3an-cfostat__val {
  font-size: 18px;
  font-weight: 700;
  color: var(--d3-ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.m3-shell .m3an-cfostat__lbl {
  font-size: 11.5px;
  color: var(--d3-muted);
  line-height: 1.4;
}
.m3-shell .m3an-cfostat__lbl strong { color: var(--d3-ink-2); font-weight: 700; }
.m3-shell .m3an-cfostat--bad     .m3an-cfostat__ic { background: #fef2f2; color: #b91c1c; }
.m3-shell .m3an-cfostat--warn    .m3an-cfostat__ic { background: #fffbeb; color: #b45309; }
.m3-shell .m3an-cfostat--ok      .m3an-cfostat__ic { background: #ecfdf5; color: #047857; }
.m3-shell .m3an-cfostat--neutral .m3an-cfostat__ic { background: #eff6ff; color: #1d4ed8; }

.m3-shell .m3an-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 18px;
  background: var(--d3-surface-2);
  border: 1px dashed var(--d3-line-strong);
  border-radius: var(--d3-radius);
  color: var(--d3-muted);
}
.m3-shell .m3an-empty > i {
  font-size: 28px;
  color: var(--d3-muted);
  flex-shrink: 0;
}
.m3-shell .m3an-empty strong { color: var(--d3-ink); font-size: 14px; }
.m3-shell .m3an-empty p { margin: 4px 0 0; font-size: 12.5px; }
.m3-shell .m3an-empty .m3an-linkbtn { font-size: 12.5px; vertical-align: baseline; padding: 0; }

.m3-shell .m3an-rowactions {
  display: inline-flex;
  gap: 6px;
  justify-content: flex-end;
}
.m3-shell .m3an-rowicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--d3-surface-2);
  color: var(--d3-muted);
  border: 1px solid var(--d3-line);
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.m3-shell .m3an-rowicon:hover {
  background: var(--d3-surface);
  color: var(--d3-accent);
  border-color: color-mix(in srgb, var(--d3-accent) 30%, var(--d3-line));
  transform: translateY(-1px);
}
.m3-shell .m3an-rowicon:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--d3-accent) 25%, transparent);
}
.m3-shell .m3an-linkbtn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--accent);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  padding: 4px 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.m3-shell .m3an-linkbtn i { font-size: 13px; line-height: 1; }
.m3-shell .m3an-linkbtn:hover { text-decoration: underline; }

/* ── Stat tiles inside PTP & partial pressure card ─────────────── */
.m3-shell .m3an-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.m3-shell .m3an-stat {
  --accent: #6366f1;
  position: relative;
  background: var(--d3-surface);
  border-radius: var(--d3-radius-sm);
  box-shadow: inset 0 0 0 1px var(--d3-line);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  cursor: pointer;
  border: 0;
  font-family: inherit;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.m3-shell .m3an-stat::before {
  content: none;
}
.m3-shell .m3an-stat:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, var(--d3-line-strong)),
              0 8px 18px -10px color-mix(in srgb, var(--accent) 30%, rgba(15, 23, 42, 0.2));
}
.m3-shell .m3an-stat__lens {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.m3-shell .m3an-stat__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--accent) 22%, transparent);
}
.m3-shell .m3an-stat__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--d3-ink-2);
  letter-spacing: -0.005em;
  text-transform: none;
}
.m3-shell .m3an-stat__num {
  font-size: 24px;
  font-weight: 700;
  color: var(--d3-ink);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.m3-shell .m3an-stat__hint {
  font-size: 11.5px;
  color: var(--d3-muted);
}

/* ── Donut + legend + stacked bar polish ───────────────────────── */
.m3-shell .m3an-donut__num { fill: var(--d3-ink); }
.m3-shell .m3an-donut__sub { fill: var(--d3-muted); }
.m3-shell .m3an-legend__btn { color: var(--d3-ink-2); }
.m3-shell .m3an-legend__btn:hover { background: var(--d3-surface-2); }
.m3-shell .m3an-legend__val { color: var(--d3-muted); }
.m3-shell .m3an-legend__val strong { color: var(--d3-ink); }
.m3-shell .m3an-stack {
  background: var(--d3-surface-2);
  box-shadow: inset 0 0 0 1px var(--d3-line);
}

/* ── Tables inside cards ───────────────────────────────────────── */
.m3-shell .m3an-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.m3-shell .m3an-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--d3-muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--d3-line);
  background: var(--d3-surface-2);
  position: sticky;
  top: 0;
  z-index: 1;
}
.m3-shell .m3an-table tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--d3-line);
  vertical-align: middle;
  color: var(--d3-ink-2);
}
.m3-shell .m3an-table tbody tr:hover td {
  background: var(--d3-surface-2);
}
.m3-shell .m3an-table tbody tr:last-child td { border-bottom: 0; }
.m3-shell .m3an-card__table {
  margin: 0 -4px;
  padding: 0 4px;
}
.m3-shell .m3an-card__table--scroll {
  max-height: 320px;
  overflow-y: auto;
  border-radius: 8px;
}
.m3-shell .m3an-th--right { text-align: right; }
.m3-shell .m1-td--right { text-align: right; }
.m3-shell .m3an-td--action { text-align: right; }

/* ── Provenance footer ─────────────────────────────────────────── */
.m3-shell .m3an-prov {
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--d3-surface);
  border-radius: var(--d3-radius);
  box-shadow: var(--d3-shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 0;
}
.m3-shell .m3an-prov__row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--d3-muted);
}
.m3-shell .m3an-prov__tag {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 6px;
}
.m3-shell .m3an-prov__tag--ok   { background: var(--d3-good-bg); color: var(--d3-good); }
.m3-shell .m3an-prov__tag--info { background: #eff6ff; color: #1d4ed8; }
.m3-shell .m3an-prov__tag--warn { background: var(--d3-warn-bg); color: var(--d3-warn); }

/* ── Activity panel at the bottom of M3 ────────────────────────── */
.m3-shell main > .panel.mt16 {
  background: var(--d3-surface);
  border-radius: var(--d3-radius);
  box-shadow: var(--d3-shadow);
  border: 0;
  padding: 18px;
}

/* ================================================================== */
/* Module 5 — Disputes · enterprise visual polish                      */
/* Same token vocabulary as M3 polish above. Scoped under .m5-shell    */
/* so M1/M2/M4 keep their existing chrome.                            */
/* ================================================================== */

.m5-shell {
  --d3-ink: #0b1220;
  --d3-ink-2: #1f2937;
  --d3-muted: #64748b;
  --d3-line: rgba(15, 23, 42, 0.08);
  --d3-line-strong: rgba(15, 23, 42, 0.14);
  --d3-surface: #ffffff;
  --d3-surface-2: #f8fafc;
  --d3-bg: linear-gradient(180deg, #f6f8fd 0%, #f3f5fb 360px, #f7f8fc 100%);
  --d3-accent: #e11d48; /* M5 accent — rose, matches the dashboard module CTA */
  --d3-good: #059669;
  --d3-good-bg: #ecfdf5;
  --d3-bad: #dc2626;
  --d3-bad-bg: #fef2f2;
  --d3-warn: #d97706;
  --d3-warn-bg: #fffbeb;
  --d3-radius: 14px;
  --d3-radius-sm: 10px;
  --d3-shadow: 0 1px 0 rgba(15, 23, 42, 0.02), 0 8px 24px -16px rgba(15, 23, 42, 0.18);
  background: var(--d3-bg);
  font-feature-settings: "ss01", "cv01", "tnum" 1;
}

/* ── Module-level sub-nav (Register / Case / Analytics / Governance) */
/* Replace the bordered-button look with a pill-on-track tab pattern  */
.m5-shell .m1pro-subnav {
  display: flex;
  gap: 4px;
  padding: 5px;
  margin: 14px 0 18px;
  background: var(--d3-surface-2);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--d3-line);
  border: 0;
  overflow-x: auto;
}
.m5-shell .m1pro-subnav__btn {
  flex: 1;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 16px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  cursor: pointer;
  font-family: inherit;
  color: var(--d3-muted);
  min-width: 0;
  text-align: left;
  transition: background 160ms ease, color 160ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.m5-shell .m1pro-subnav__btn:hover {
  background: color-mix(in srgb, var(--d3-accent) 6%, #fff);
  color: var(--d3-ink-2);
}
.m5-shell .m1pro-subnav__btn.is-active {
  background: var(--d3-surface);
  color: var(--d3-ink);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 4px 14px -6px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}
.m5-shell .m1pro-subnav__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--d3-accent) 28%, transparent);
}
.m5-shell .m1pro-subnav__lbl {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.m5-shell .m1pro-subnav__hint {
  font-size: 11.5px;
  color: var(--d3-muted);
  font-weight: 500;
}
.m5-shell .m1pro-subnav__btn.is-active .m1pro-subnav__hint {
  color: color-mix(in srgb, var(--d3-ink) 60%, transparent);
}

/* ── Analytics shell + summary tiles upgrade ───────────────────── */

.m5-shell .m5-an-shell {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.m5-shell .m5-an-shell > .m3an-head {
  padding: 0 0 14px 0;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--d3-line);
  background: transparent;
}
.m5-shell .m3an-title {
  font-size: 20px;
  letter-spacing: -0.015em;
}

/* Summary tiles — match the dashboard KPI card style */
.m5-shell .m5-an-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0 18px;
}
@media (max-width: 1100px) {
  .m5-shell .m5-an-summary { grid-template-columns: repeat(2, 1fr); }
}
.m5-shell .m5-an-tile {
  --accent: var(--d3-accent);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  background: var(--d3-surface);
  border: 0;
  border-radius: var(--d3-radius);
  padding: 18px 18px 16px;
  box-shadow: var(--d3-shadow);
  overflow: hidden;
  font-family: inherit;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease;
}
.m5-shell .m5-an-tile--interactive {
  cursor: pointer;
}
/* M5 analytics tile: no top accent gradient, no radial hover wash. */
.m5-shell .m5-an-tile--interactive:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 14px 30px -18px rgba(15, 23, 42, 0.22);
}
.m5-shell .m5-an-tile--interactive:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* Top row: lens + dot on left, info icon + CTA on right */
.m5-shell .m5-an-tile__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  margin-bottom: 10px;
}
.m5-shell .m5-an-tile__lens {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.m5-shell .m5-an-tile__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.m5-shell .m5-an-tile__topright {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.m5-shell .m5-an-tile__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--d3-surface-2);
  color: var(--d3-muted);
  font-size: 13px;
  line-height: 1;
  cursor: help;
  border: 1px solid var(--d3-line-strong);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.m5-shell .m5-an-tile__info:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.m5-shell .m5-an-tile__cta {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.m5-shell .m5-an-tile__cta--ref {
  opacity: 0.65;
  transform: none;
  color: var(--d3-muted);
  font-weight: 500;
}
.m5-shell .m5-an-tile--interactive:hover .m5-an-tile__cta {
  opacity: 1;
  transform: translateX(0);
}

.m5-shell .m5-an-tile__label {
  font-size: 13px;
  color: var(--d3-ink-2);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.m5-shell .m5-an-tile__val {
  font-size: 30px;
  font-weight: 700;
  color: var(--d3-ink);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.m5-shell .m5-an-tile__sub {
  font-size: 12px;
  color: var(--d3-muted);
}
.m5-shell .m5-an-tile__sub strong {
  color: var(--d3-ink);
  font-weight: 700;
}

/* Share bar at the bottom — same pattern as Payment Analytics KPIs */
.m5-shell .m5-an-tile__share {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.m5-shell .m5-an-tile__share-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--d3-surface-2);
  box-shadow: inset 0 0 0 1px var(--d3-line);
  overflow: hidden;
}
.m5-shell .m5-an-tile__share-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--share-color, var(--accent));
  transition: width 600ms cubic-bezier(.2,.8,.2,1);
}
.m5-shell .m5-an-tile__share-pct {
  font-size: 11px;
  color: var(--d3-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Analytics sub-nav (Recurrence / Leakage / Backlog) ────────── */
.m5-shell .m5-an-subnav {
  background: var(--d3-surface-2);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--d3-line);
  padding: 5px;
  gap: 4px;
}
.m5-shell .m5-an-subnav__btn {
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--d3-muted);
  background: transparent;
  transition: background 160ms ease, color 160ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.m5-shell .m5-an-subnav__btn:hover {
  background: color-mix(in srgb, var(--d3-accent) 6%, #fff);
  color: var(--d3-ink-2);
}
.m5-shell .m5-an-subnav__btn.is-active {
  background: var(--d3-surface);
  color: var(--d3-ink);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 4px 14px -6px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}
.m5-shell .m5-an-subnav__lbl { font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; }
.m5-shell .m5-an-subnav__hint { font-size: 11.5px; color: var(--d3-muted); font-weight: 500; }

/* ── Analytics cards (Recurrence + Leakage sub-views) ──────────── */
.m5-shell .m5-an-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) {
  .m5-shell .m5-an-grid { grid-template-columns: 1fr; }
}
.m5-shell .m5-an-card {
  --accent: var(--d3-accent);
  position: relative;
  background: var(--d3-surface);
  border-radius: var(--d3-radius);
  box-shadow: var(--d3-shadow);
  padding: 18px;
  border: 0;
  overflow: hidden;
  transition: box-shadow 240ms ease;
}
/* M5 panel card: no top accent gradient. */
.m5-shell .m5-an-card:hover {
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03), 0 18px 40px -24px rgba(15, 23, 42, 0.28);
}
.m5-shell .m5-an-card--wide {
  grid-column: 1 / -1;
}
.m5-shell .m5-an-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.m5-shell .m5-an-card__head h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--d3-ink);
  letter-spacing: -0.01em;
}
.m5-shell .m5-an-card__head h3::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.m5-shell .m5-an-card__head p {
  margin: 0;
  font-size: 12.5px;
  color: var(--d3-muted);
  line-height: 1.5;
  max-width: 60ch;
}
.m5-shell .m5-an-card__head p strong { color: var(--d3-ink-2); font-weight: 600; }

/* Bars inside the cards (m3an-bars / m3an-bar) — restyle subtly */
.m5-shell .m3an-bar { padding: 4px 6px; margin: 0 -6px; border-radius: 6px; transition: background 140ms ease; }
.m5-shell .m3an-bar:hover { background: var(--d3-surface-2); }
.m5-shell .m3an-bar__head { font-size: 12.5px; }
.m5-shell .m3an-bar__label { color: var(--d3-ink-2); }
.m5-shell .m3an-bar__val { font-size: 12.5px; font-weight: 600; color: var(--d3-ink); font-variant-numeric: tabular-nums; }
.m5-shell .m3an-bar__track {
  background: var(--d3-surface-2);
  box-shadow: inset 0 0 0 1px var(--d3-line);
  height: 6px;
}

/* Inline pills — leakage card header */
.m5-shell .m5-an-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  margin-left: 6px;
  border: 0;
}
.m5-shell .m5-an-pill--bad {
  background: var(--d3-bad-bg);
  color: var(--d3-bad);
}
.m5-shell .m5-an-pill--warn {
  background: var(--d3-warn-bg);
  color: var(--d3-warn);
}
.m5-shell .m5-an-pill--ok {
  background: var(--d3-good-bg);
  color: var(--d3-good);
}

/* Backlog meta strip (Open · In progress · Closed) */
.m5-shell .m5-an-backlog-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Backlog table inside Analytics → Upstream backlog ─────────── */
.m5-shell .m5-backlog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.m5-shell .m5-backlog-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--d3-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--d3-line);
  background: var(--d3-surface-2);
}
.m5-shell .m5-backlog-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--d3-line);
  vertical-align: middle;
  color: var(--d3-ink-2);
}
.m5-shell .m5-backlog-table tbody tr:hover td { background: var(--d3-surface-2); }
.m5-shell .m5-backlog-table tbody tr:last-child td { border-bottom: 0; }
.m5-shell .m5-backlog-table .m3an-th--center { text-align: center; }
.m5-shell .m5-backlog-table .m3an-th--right { text-align: right; }

/* ── Register table polish (Queue tab, also under .m5-shell) ───── */
.m5-shell .m5-qtable thead th,
.m5-shell .m5-qtable .m3an-th {
  background: var(--d3-surface-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--d3-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--d3-line);
}
.m5-shell .m5-qtable tbody td.m3an-td {
  border-bottom: 1px solid var(--d3-line);
}

/* ── Case workspace — header card + side cards (already styled, */
/* polish the surface treatment) */
.m5-shell .m5-case-header,
.m5-shell .m5-ctx-card,
.m5-shell .m5-case-panel,
.m5-shell .m5-case-actions,
.m5-shell .m5-case-activity {
  background: var(--d3-surface);
  border: 0;
  border-radius: var(--d3-radius);
  box-shadow: var(--d3-shadow);
}

/* ── Activity panel below module ───────────────────────────────── */
.m5-shell main > .panel.m1pro-activity {
  background: var(--d3-surface);
  border-radius: var(--d3-radius);
  box-shadow: var(--d3-shadow);
  border: 0;
}

/* ── Register · KPI tile strip + filters polish (already used m1pro-kpis pattern) */
.m5-shell .m1pro-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 12px 0 16px;
}
.m5-shell .m1pro-kpi {
  --accent: var(--d3-accent);
  position: relative;
  background: var(--d3-surface);
  border-radius: var(--d3-radius);
  box-shadow: var(--d3-shadow);
  padding: 14px 16px;
  border: 0;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
/* M5 Register KPI tile (m1pro variant): no top accent gradient. */
.m5-shell .m1pro-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 14px 30px -18px rgba(15, 23, 42, 0.22);
}
.m5-shell .m1pro-kpi--warn { --accent: #f59e0b; }
.m5-shell .m1pro-kpi--bad  { --accent: #ef4444; }
.m5-shell .m1pro-kpi--info { --accent: #3b82f6; }
.m5-shell .m1pro-kpi--ok   { --accent: #14b8a6; }
.m5-shell .m1pro-kpi__rail { display: none; }
.m5-shell .m1pro-kpi__lens {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.m5-shell .m1pro-kpi__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.m5-shell .m1pro-kpi__val {
  font-size: 26px;
  font-weight: 700;
  color: var(--d3-ink);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  margin: 6px 0 4px;
  display: block;
}
.m5-shell .m1pro-kpi__hint { font-size: 12px; color: var(--d3-muted); display: block; }
.m5-shell .m1pro-kpi__cta {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
  display: block;
  margin-top: 6px;
}
.m5-shell .m1pro-kpi:hover .m1pro-kpi__cta {
  opacity: 1;
  transform: translateX(0);
}
.m5-shell .m1pro-kpi.is-active {
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 12px 28px -16px color-mix(in srgb, var(--accent) 50%, rgba(15, 23, 42, 0.3));
}
.m5-shell .m1pro-kpi.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  pointer-events: none;
}

/* ================================================================== */
/* Dashboard — strategic refactor (May 2026)                           */
/* New elements: role switcher · what-changed strip · prevention card  */
/* ================================================================== */

.dash3-eyebrow__role { font-weight: 700; color: var(--d3-accent); letter-spacing: 0.01em; }

.dash3-roleswitch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  background: var(--d3-surface);
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--d3-line);
  transition: box-shadow 200ms ease;
}
.dash3-roleswitch:hover { box-shadow: 0 0 0 1px var(--d3-line-strong); }
.dash3-roleswitch__lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--d3-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dash3-roleswitch__lbl i { font-size: 13px; line-height: 1; }
.dash3-roleswitch__sel {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--d3-ink);
  cursor: pointer;
  padding: 2px 22px 2px 0;
  background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%), linear-gradient(135deg, #94a3b8 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.dash3-roleswitch__sel:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--d3-accent) 28%, transparent);
}

/* What-changed strip */
.dash3-wc {
  margin: 0 32px 18px;
  padding: 16px 18px;
  background: var(--d3-surface);
  border-radius: var(--d3-radius);
  box-shadow: var(--d3-shadow);
  position: relative;
}
.dash3-wc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.dash3-wc__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--d3-ink);
  letter-spacing: -0.005em;
}
.dash3-wc__title i {
  font-size: 16px;
  color: #22c55e;
  animation: dash3-wc-pulse 2.4s ease-in-out infinite;
}
@keyframes dash3-wc-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.dash3-wc__hint {
  font-size: 11.5px;
  color: var(--d3-muted);
}
.dash3-wc__strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1100px) { .dash3-wc__strip { grid-template-columns: repeat(2, 1fr); } }
.dash3-wc__chip {
  --chip-tone: #4f46e5;
  appearance: none;
  background: var(--d3-surface);
  border: 0;
  border-radius: var(--d3-radius-sm);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  box-shadow: inset 0 0 0 1px var(--d3-line);
  transition: transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms ease;
  animation: d3-fade-up 500ms cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(50ms + var(--anim-i, 0) * 60ms);
  min-width: 0;
}
.dash3-wc__chip--bad     { --chip-tone: #ef4444; }
.dash3-wc__chip--warn    { --chip-tone: #f59e0b; }
.dash3-wc__chip--ok      { --chip-tone: #10b981; }
.dash3-wc__chip--info    { --chip-tone: #3b82f6; }
.dash3-wc__chip--neutral { --chip-tone: #64748b; }
.dash3-wc__chip:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip-tone) 32%, var(--d3-line-strong)),
              0 8px 18px -12px color-mix(in srgb, var(--chip-tone) 50%, rgba(15,23,42,0.3));
}
.dash3-wc__chip:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--chip-tone),
              0 0 0 3px color-mix(in srgb, var(--chip-tone) 28%, transparent);
}
.dash3-wc__chip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--chip-tone);
  flex-shrink: 0;
}
.dash3-wc__chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--chip-tone) 14%, transparent);
  color: var(--chip-tone);
  flex-shrink: 0;
}
.dash3-wc__chip-icon i { font-size: 15px; line-height: 1; }
.dash3-wc__chip-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.dash3-wc__chip-body strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--d3-ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash3-wc__chip-sub {
  font-size: 11px;
  color: var(--d3-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Prevention loop card · differentiator */
.dash3-prev {
  margin: 0 32px 18px;
}
.dash3-prev__btn {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto auto;
  align-items: center;
  gap: 24px;
  background: var(--d3-surface);
  border: 0;
  border-radius: var(--d3-radius);
  box-shadow: var(--d3-shadow);
  padding: 18px 22px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease;
}
/* Prevention loop: no top accent gradient, no radial hover wash —
   per the design principles in memory. Boundary = shadow + hairline. */
.dash3-prev__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 14px 30px -18px rgba(15, 23, 42, 0.22);
}
.dash3-prev__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, #10b981 28%, transparent);
}
.dash3-prev__lead {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.dash3-prev__lens {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #047857;
}
.dash3-prev__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
}
.dash3-prev__headline {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.dash3-prev__rate {
  font-size: 32px;
  font-weight: 700;
  color: var(--d3-ink);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dash3-prev__rate-lbl {
  font-size: 13px;
  color: var(--d3-muted);
  font-weight: 600;
}
.dash3-prev__sub {
  font-size: 12.5px;
  color: var(--d3-ink-2);
  line-height: 1.5;
}
.dash3-prev__sub strong {
  color: var(--d3-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Honest backlog composition — three-segment bar + legend, real counts. */
.dash3-prev__progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 260px;
}
.dash3-prev__progress-lbl {
  font-size: 10.5px;
  color: var(--d3-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.dash3-prev__bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--d3-surface-2, rgba(15, 23, 42, 0.05));
  box-shadow: inset 0 0 0 1px var(--d3-line);
}
.dash3-prev__seg {
  display: block;
  height: 100%;
  transition: filter 160ms ease;
}
.dash3-prev__seg + .dash3-prev__seg {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.6);
}
.dash3-prev__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  font-size: 11.5px;
  color: var(--d3-ink-2);
}
.dash3-prev__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.dash3-prev__legend-item strong {
  color: var(--d3-ink);
  font-weight: 700;
}
.dash3-prev__sw {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.dash3-prev__lens i {
  font-size: 13px;
  color: #10b981;
  opacity: 0.9;
}
.dash3-prev__cta i {
  font-size: 13px;
  margin-left: 4px;
  vertical-align: -1px;
}
.dash3-prev__cta {
  font-size: 12px;
  font-weight: 600;
  color: #059669;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
  white-space: nowrap;
}
.dash3-prev__btn:hover .dash3-prev__cta {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 1100px) {
  .dash3-prev__btn { grid-template-columns: 1fr; gap: 12px; }
  .dash3-prev__progress { min-width: 0; }
}

/* Single-column grid variant (after dropping side column) */
.dash3-grid--single { grid-template-columns: 1fr; }