/*
=========================================================
OPEN1031 HUB DESIGN SYSTEM — SHARED COMPONENT CLASSES
=========================================================
Canonical app design system. Single source of truth for all token classes.
Every mobile/flow/surface mockup links this file instead of inlining mirrors.

  <link rel="stylesheet" href="../_system.css" />   (from mobile/ or flows/)
  <link rel="stylesheet" href="./_system.css" />    (from mockups/ root)

Pair with Tailwind CDN + the per-hub color token config in _head.html.
Dark theme: slate-950 body / slate-800 header+footer / slate-950 content area.
Per-hub color swaps only the items listed under each class.

FONT: Inter (loaded via Google Fonts or equivalent in _head.html) + system fallbacks.
  Load in <head>: <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

HUB COLORS (strict — use a static lookup, never dynamic Tailwind bg-${x}):
  ID=blue #2563eb | Sales=green #16a34a | Escrow=cyan #0891b2 |
  Purchase=purple #9333ea | Disbursement=orange #ea580c | IRS=teal #0f766e |
  Reverse=indigo #4338ca | Admin/platform chrome=indigo-600 #4f46e5

BRAND: logo teal #14B8A6 + navy #1E3A8A (the real logo asset colors).
  Indigo #4f46e5 is admin/nav chrome ONLY — never used on the logo.
  Admin logo: <img class="logo-asset" src="../assets/logo_white.png" alt="Open1031">
  Light logo:  <img class="logo-asset" src="../assets/logo_white.png" alt="Open1031">
  Compact mark (tight spaces): crop to the teal arch from logo_white.png — never a letter box.

NAV BADGES:
  .admin-nav-badge        — canonical indigo badge (default)
  .admin-nav-badge--alert — red badge for urgent counts (replaces ad-hoc red in qi-admin/platform-admin)

SEVERITY COLORS (apply only via .risk-pill / .hub-deadline / .status-badge):
  ok=#34d399 emerald | warning=#fbbf24 amber | critical=#f87171 red

Demo data: Matt Belcher, 456 Sunset Blvd Los Angeles CA, $850,000, Tax ID on file (synthetic only — no NPI)
=========================================================
*/

/* --------------------------------------------------
   Hub identity color tokens — single source of truth.
   Every hub hex below (base / dark hover-and-gradient-end / light
   gradient-end) lives ONLY here. All hub-scoped rules in this file, and
   all per-hub primitive classes (.hub-dot / .hub-text / .hub-icon-gradient
   / .hub-badge), reference these custom properties instead of repeating
   the literal hex.
-------------------------------------------------- */
:root {
  --hub-id: #2563eb;
  --hub-id-dark: #1d4ed8;
  --hub-id-light: #3b82f6;
  --hub-sales: #16a34a;
  --hub-sales-dark: #15803d;
  --hub-sales-light: #22c55e;
  --hub-escrow: #0891b2;
  --hub-escrow-dark: #0e7490;
  --hub-escrow-light: #06b6d4;
  --hub-purchase: #9333ea;
  --hub-purchase-dark: #7e22ce;
  --hub-purchase-light: #a855f7;
  --hub-disburse: #ea580c;
  --hub-disburse-dark: #c2410c;
  --hub-disburse-light: #f97316;
  --hub-irs: #0f766e;
  --hub-irs-dark: #115e59;
  --hub-irs-light: #14b8a6;
  --hub-reverse: #4338ca;
  --hub-reverse-dark: #3730a3;
  --hub-reverse-light: #6366f1;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: #0f172a;
  color: #f1f5f9;
}

/* These diagram/spec pages are single-theme dark by design: the ground above is
   explicit, and pinning color-scheme keeps UA-rendered widgets (form controls,
   scrollbars) from following a light OS preference. */
html { color-scheme: dark; }

/* --------------------------------------------------
   Hub inline-color primitives (A3 token sweep, #871).
   Cover the heterogeneous one-off inline `style="...#hex..."` shapes found
   across the mockup corpus: status dots / legend swatches / solid meter-bar
   fills (.hub-dot), plain text color (.hub-text), tinted chip background +
   text pair (.hub-badge), and icon-tile/avatar gradient backgrounds
   (.hub-icon-gradient, .hub-icon-gradient-light for the lighter stop pair).
   Apply alongside the hub modifier, e.g. class="hub-dot escrow".
-------------------------------------------------- */
.hub-dot.id        { background-color: var(--hub-id); }
.hub-dot.sales     { background-color: var(--hub-sales); }
.hub-dot.escrow    { background-color: var(--hub-escrow); }
.hub-dot.purchase  { background-color: var(--hub-purchase); }
.hub-dot.disburse  { background-color: var(--hub-disburse); }
.hub-dot.irs       { background-color: var(--hub-irs); }
.hub-dot.reverse   { background-color: var(--hub-reverse); }

.hub-text.id        { color: var(--hub-id); }
.hub-text.sales     { color: var(--hub-sales); }
.hub-text.escrow    { color: var(--hub-escrow); }
.hub-text.purchase  { color: var(--hub-purchase); }
.hub-text.disburse  { color: var(--hub-disburse); }
.hub-text.irs       { color: var(--hub-irs); }
.hub-text.reverse   { color: var(--hub-reverse); }

.hub-badge.id        { background: rgba(37,99,235,0.12);  color: var(--hub-id); }
.hub-badge.sales     { background: rgba(22,163,74,0.12);  color: var(--hub-sales); }
.hub-badge.escrow    { background: rgba(8,145,178,0.12);  color: var(--hub-escrow); }
.hub-badge.purchase  { background: rgba(147,51,234,0.12); color: var(--hub-purchase); }
.hub-badge.disburse  { background: rgba(234,88,12,0.12);  color: var(--hub-disburse); }
.hub-badge.irs       { background: rgba(15,118,110,0.12); color: var(--hub-irs); }
.hub-badge.reverse   { background: rgba(67,56,202,0.12);  color: var(--hub-reverse); }

.hub-icon-gradient.id        { background: linear-gradient(135deg, var(--hub-id), var(--hub-id-dark)); }
.hub-icon-gradient.sales     { background: linear-gradient(135deg, var(--hub-sales), var(--hub-sales-dark)); }
.hub-icon-gradient.escrow    { background: linear-gradient(135deg, var(--hub-escrow), var(--hub-escrow-dark)); }
.hub-icon-gradient.purchase  { background: linear-gradient(135deg, var(--hub-purchase), var(--hub-purchase-dark)); }
.hub-icon-gradient.disburse  { background: linear-gradient(135deg, var(--hub-disburse), var(--hub-disburse-dark)); }
.hub-icon-gradient.irs       { background: linear-gradient(135deg, var(--hub-irs), var(--hub-irs-dark)); }
.hub-icon-gradient.reverse   { background: linear-gradient(135deg, var(--hub-reverse), var(--hub-reverse-dark)); }

.hub-icon-gradient-light.id        { background: linear-gradient(135deg, var(--hub-id), var(--hub-id-light)); }
.hub-icon-gradient-light.sales     { background: linear-gradient(135deg, var(--hub-sales), var(--hub-sales-light)); }
.hub-icon-gradient-light.escrow    { background: linear-gradient(135deg, var(--hub-escrow), var(--hub-escrow-light)); }
.hub-icon-gradient-light.purchase  { background: linear-gradient(135deg, var(--hub-purchase), var(--hub-purchase-light)); }
.hub-icon-gradient-light.disburse  { background: linear-gradient(135deg, var(--hub-disburse), var(--hub-disburse-light)); }
.hub-icon-gradient-light.irs       { background: linear-gradient(135deg, var(--hub-irs), var(--hub-irs-light)); }
.hub-icon-gradient-light.reverse   { background: linear-gradient(135deg, var(--hub-reverse), var(--hub-reverse-light)); }

/* --------------------------------------------------
   .hub-modal — near-full-screen hub shell (matches shipped HubShell).
   Fills the viewport over a dimmed overlay: max 80rem (7xl) on desktop,
   edge-to-edge on mobile. Sticky header + footer (flex-shrink:0), a single
   overflow-y:auto body. Tall fixed frame (not content-capped) so it reads as
   a full-screen shell, not a floating card.
-------------------------------------------------- */
.hub-modal {
  background: #1e293b;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6);
  border: 1px solid #334155;
  width: 100%;
  max-width: 80rem;
  height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (max-width: 640px) {
  .hub-modal {
    border-radius: 0;
    border: 0;
    height: 100vh;
    max-width: none;
  }
}

/* --------------------------------------------------
   .hub-header — fixed header: icon row + deadline row + progress bar.
-------------------------------------------------- */
.hub-header {
  background: #1e293b;
  border-bottom: 1px solid #334155;
  padding: 1rem 1.5rem;
  flex-shrink: 0;
}

/* --------------------------------------------------
   .hub-deadline — deadline / status row.
   Base: neutral slate. Override with .is-safe / .is-warning / .is-critical.
-------------------------------------------------- */
.hub-deadline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  background: rgba(15,23,42,0.6);
  border: 1px solid #475569;
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0;
}
.hub-deadline.is-safe   { border-color: #475569; }
.hub-deadline.is-safe   .deadline-icon,
.hub-deadline.is-safe   .deadline-text  { color: #4ade80; }

.hub-deadline.is-warning { border-color: rgba(180,83,9,0.5); }
.hub-deadline.is-warning .deadline-icon,
.hub-deadline.is-warning .deadline-text { color: #fbbf24; }

.hub-deadline.is-critical { border-color: rgba(185,28,28,0.5); }
.hub-deadline.is-critical .deadline-icon,
.hub-deadline.is-critical .deadline-text { color: #f87171; animation: pulse 1.5s ease-in-out infinite; }

.deadline-icon { flex-shrink: 0; width: 1rem; height: 1rem; }
.deadline-text { font-size: 0.875rem; font-weight: 600; }
.deadline-meta { font-size: 0.75rem; color: #94a3b8; }
.deadline-cite { font-size: 0.75rem; color: #64748b; margin-left: auto; }

/* --------------------------------------------------
   .hub-status-pill — for hubs without an IRS countdown.
-------------------------------------------------- */
.hub-status-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  background: rgba(15,23,42,0.6);
  border: 1px solid #334155;
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 600;
}
.hub-status-pill .status-sub {
  font-size: 0.75rem;
  font-weight: 400;
  color: #94a3b8;
}
/* Vectr workflow chip on the right of a status pill — keep icon + label inline, never wrap */
.vectr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  color: #a5b4fc;
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.28);
  border-radius: 9999px;
  padding: 0.25rem 0.5rem;
}
.vectr-badge svg {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
}
/* Let the status sentence shrink/truncate so the chip stays on one line */
.hub-status-pill > span:not(.vectr-badge):not(.status-sub) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------
   .hub-progress — completion progress bar (track + fill).
-------------------------------------------------- */
.hub-progress {
  background: #334155;
  border-radius: 9999px;
  height: 8px;
  overflow: hidden;
}
.hub-progress-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.4s ease;
}
.hub-progress-fill.id        { background: linear-gradient(90deg,var(--hub-id),var(--hub-id-light),var(--hub-id)); box-shadow: 0 0 10px rgba(59,130,246,0.6); }
.hub-progress-fill.sales     { background: linear-gradient(90deg,var(--hub-sales),var(--hub-sales-light),var(--hub-sales)); box-shadow: 0 0 10px rgba(34,197,94,0.6); }
.hub-progress-fill.escrow    { background: linear-gradient(90deg,var(--hub-escrow),var(--hub-escrow-light),var(--hub-escrow)); box-shadow: 0 0 10px rgba(6,182,212,0.6); }
.hub-progress-fill.purchase  { background: linear-gradient(90deg,var(--hub-purchase),var(--hub-purchase-light),var(--hub-purchase)); box-shadow: 0 0 10px rgba(168,85,247,0.6); }
.hub-progress-fill.disburse  { background: linear-gradient(90deg,var(--hub-disburse),var(--hub-disburse-light),var(--hub-disburse)); box-shadow: 0 0 10px rgba(249,115,22,0.6); }
.hub-progress-fill.irs       { background: linear-gradient(90deg,var(--hub-irs),var(--hub-irs-light),var(--hub-irs)); box-shadow: 0 0 10px rgba(20,184,166,0.6); }
.hub-progress-fill.reverse   { background: linear-gradient(90deg,var(--hub-reverse),var(--hub-reverse-light),var(--hub-reverse)); box-shadow: 0 0 10px rgba(99,102,241,0.6); }

/* --------------------------------------------------
   .hub-tabs / .hub-tab / .hub-tab-active — step-tab row.
-------------------------------------------------- */
.hub-tabs {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.25rem;
  background: #1e293b;
  border-bottom: 1px solid #334155;
  padding: 0.75rem 1rem;
  flex-shrink: 0;
  overflow: hidden;
}
.hub-tabs-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 0.5rem;
}
.hub-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: #334155;
  color: #94a3b8;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.hub-tab-active {
  color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.hub-tab-active.id       { background: var(--hub-id); }
.hub-tab-active.sales    { background: var(--hub-sales); }
.hub-tab-active.escrow   { background: var(--hub-escrow); }
.hub-tab-active.purchase { background: var(--hub-purchase); }
.hub-tab-active.disburse { background: var(--hub-disburse); }
.hub-tab-active.irs      { background: var(--hub-irs); }
.hub-tab-active.reverse  { background: var(--hub-reverse); }
.hub-tab-complete {
  background: rgba(16,185,129,0.15);
  color: #34d399;
}
.hub-tab-complete.id       { background: rgba(37,99,235,0.18);  color: #93c5fd; }
.hub-tab-complete.sales    { background: rgba(22,163,74,0.18);  color: #86efac; }
.hub-tab-complete.escrow   { background: rgba(8,145,178,0.18);  color: #67e8f9; }
.hub-tab-complete.purchase { background: rgba(147,51,234,0.18); color: #d8b4fe; }
.hub-tab-complete.disburse { background: rgba(234,88,12,0.18);  color: #fdba74; }
.hub-tab-complete.irs      { background: rgba(15,118,110,0.18); color: #5eead4; }
.hub-tab-complete.reverse  { background: rgba(67,56,202,0.18);  color: #a5b4fc; }
.hub-tab-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #334155;
  color: #64748b;
}
.hub-tab-chevron {
  width: 0.75rem;
  height: 0.75rem;
  color: #475569;
  flex-shrink: 0;
}

/* --------------------------------------------------
   .cta-card — large dashed-border CTA for empty-state primary actions.
-------------------------------------------------- */
.cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.75rem;
  border: 2px dashed rgba(59,130,246,0.4);
  background: rgba(37,99,235,0.05);
  padding: 1.5rem 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  width: 100%;
}
.cta-card:hover {
  background: rgba(37,99,235,0.1);
  border-color: rgba(59,130,246,0.7);
}
.cta-card .cta-icon-wrap {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(37,99,235,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.cta-card:hover .cta-icon-wrap { background: rgba(37,99,235,0.3); }
.cta-card .cta-label   { font-size: 0.875rem; font-weight: 600; color: #bfdbfe; }
.cta-card .cta-desc    { font-size: 0.75rem; color: #94a3b8; margin-top: 0.125rem; }

/* --------------------------------------------------
   .rec-badge — "Recommended" badge on pre-selected default options.
-------------------------------------------------- */
.rec-badge {
  background: rgba(37,99,235,0.2);
  border: 1px solid rgba(59,130,246,0.5);
  color: #93c5fd;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  display: inline-block;
  white-space: nowrap;
}

/* --------------------------------------------------
   .empty-state — dashed-border empty state inside a list.
-------------------------------------------------- */
.empty-state {
  border: 2px dashed rgba(59,130,246,0.3);
  background: rgba(37,99,235,0.04);
  border-radius: 0.75rem;
  padding: 2rem 1rem;
  text-align: center;
}
.empty-state .empty-icon { color: rgba(59,130,246,0.4); margin: 0 auto 0.75rem; }
.empty-state .empty-label { font-size: 0.875rem; color: #64748b; }
.empty-state .empty-sub   { font-size: 0.75rem; color: #475569; margin-top: 0.25rem; }

/* --------------------------------------------------
   .neela-tip — Neela AI assistant tip card. First item in a tab's content.
-------------------------------------------------- */
.neela-tip {
  background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(99,102,241,0.12));
  border: 1px solid rgba(99,102,241,0.35);
  border-radius: 0.75rem;
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.neela-tip .neela-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #15294a 0%, #102040 55%, #0b1424 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.neela-tip .neela-avatar svg { width: 1.5rem; height: 1.5rem; }
.neela-tip .neela-heading { font-size: 0.875rem; font-weight: 600; color: #bfdbfe; }
.neela-tip .neela-byline  { font-size: 0.75rem; color: #a5b4fc; }
.neela-tip .neela-body    { font-size: 0.75rem; color: #cbd5e1; line-height: 1.5; }
.neela-tip .neela-dismiss {
  flex-shrink: 0;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: #64748b;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: color 0.15s, background 0.15s;
}
.neela-tip .neela-dismiss:hover { color: #cbd5e1; background: rgba(51,65,85,0.6); }

/* --------------------------------------------------
   .ro-field — read-only data field (label + value pair).
   .ro-source is the green "extracted / seeded" indicator.
-------------------------------------------------- */
.ro-field {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.ro-field .ro-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}
.ro-field .ro-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #e2e8f0;
}
.ro-field .ro-source {
  font-size: 0.65rem;
  color: #4ade80;
}

/* --------------------------------------------------
   .confirm-toggle — full-width confirmation toggle at the end of every tab.
   On = emerald. Off = slate. Fires auto-advance when turned on.
   Add class "on" to .confirm-toggle-track for the enabled state.
-------------------------------------------------- */
.confirm-toggle {
  padding: 1rem;
  border-radius: 0.5rem;
  border: 2px solid rgba(6,78,59,0.5);
  background: rgba(6,78,59,0.1);
  transition: border-color 0.2s, background 0.2s;
}
.confirm-toggle.is-on {
  border-color: rgba(52,211,153,0.6);
  background: rgba(6,78,59,0.2);
}
.confirm-toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
}
.confirm-toggle-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(167,243,208,0.6);
}
.confirm-toggle.is-on .confirm-toggle-text { color: #a7f3d0; }
.confirm-toggle-hint {
  font-size: 0.75rem;
  color: #334155;
  margin-top: 0.5rem;
}
.confirm-toggle-track {
  width: 2.75rem;
  height: 1.5rem;
  background: #334155;
  border-radius: 9999px;
  position: relative;
  display: inline-block;
  transition: background 0.2s;
  flex-shrink: 0;
}
.confirm-toggle-track.on { background: #059669; }
.confirm-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.2s;
}
.confirm-toggle-track.on .confirm-toggle-knob { transform: translateX(1.25rem); }

/* --------------------------------------------------
   .section-card — contained card for grouping fields/options within a tab.
   Variants: .section-card--accent-{hub} for a tinted version.
-------------------------------------------------- */
.section-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.5rem;
  padding: 1rem;
}
.section-card--accent-id       { background: rgba(37,99,235,0.08);  border-color: rgba(37,99,235,0.3); }
.section-card--accent-sales    { background: rgba(22,163,74,0.08);   border-color: rgba(22,163,74,0.3); }
.section-card--accent-escrow   { background: rgba(8,145,178,0.08);   border-color: rgba(8,145,178,0.3); }
.section-card--accent-purchase { background: rgba(147,51,234,0.08);  border-color: rgba(147,51,234,0.3); }
.section-card--accent-disburse { background: rgba(234,88,12,0.08);   border-color: rgba(234,88,12,0.3); }
.section-card--accent-irs      { background: rgba(15,118,110,0.08);  border-color: rgba(15,118,110,0.3); }
.section-card--accent-reverse  { background: rgba(67,56,202,0.08);   border-color: rgba(67,56,202,0.3); }
.section-card--success         { background: rgba(6,78,59,0.15);     border-color: rgba(52,211,153,0.4); }
.section-card--warning         { background: rgba(120,53,15,0.15);   border-color: rgba(245,158,11,0.35); }

/* --------------------------------------------------
   SHARED UTILITIES (buttons, labels, autosave, annotation)
-------------------------------------------------- */
.section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-bottom: 0.5rem;
  display: block;
}

.btn-hub {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  color: white;
}
.btn-hub.id       { background: var(--hub-id); }
.btn-hub.id:hover { background: var(--hub-id-dark); }
.btn-hub.sales    { background: var(--hub-sales); }
.btn-hub.sales:hover { background: var(--hub-sales-dark); }
.btn-hub.escrow   { background: var(--hub-escrow); }
.btn-hub.escrow:hover { background: var(--hub-escrow-dark); }
.btn-hub.purchase { background: var(--hub-purchase); }
.btn-hub.purchase:hover { background: var(--hub-purchase-dark); }
.btn-hub.disburse { background: var(--hub-disburse); }
.btn-hub.disburse:hover { background: var(--hub-disburse-dark); }
.btn-hub.irs      { background: var(--hub-irs); }
.btn-hub.irs:hover { background: var(--hub-irs-dark); }
.btn-hub.reverse  { background: var(--hub-reverse); }
.btn-hub.reverse:hover { background: var(--hub-reverse-dark); }
.btn-hub:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: transparent;
  color: #94a3b8;
  border: 1px solid #475569;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  cursor: pointer;
}
.btn-outline:hover { background: rgba(71,85,105,0.2); }

.btn-outline-hub {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: transparent;
  border-radius: 0.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.btn-outline-hub.id       { color: #93c5fd; border: 1px solid rgba(59,130,246,0.5); }
.btn-outline-hub.id:hover { background: rgba(37,99,235,0.1); }

.autosave-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid #334155;
  background: #1e293b;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  color: #cbd5e1;
}
.autosave-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #10b981;
  position: relative;
  display: inline-block;
}
.autosave-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #34d399;
  opacity: 0.6;
  animation: ping 1.2s ease-in-out infinite;
}

.hub-footer {
  border-top: 1px solid #334155;
  background: #1e293b;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.hub-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  background: #0f172a;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.annotation {
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.35);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.7rem;
  color: #fbbf24;
}

/* Rule selector item (ID Hub "Which IRS rule applies?" pattern) */
.rule-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  text-align: left;
  cursor: pointer;
  border: 1px solid #334155;
  background: #1e293b;
  transition: border-color 0.15s;
}
.rule-option:hover { border-color: rgba(59,130,246,0.4); }
.rule-option.selected {
  border: 2px solid #2563eb;
  background: rgba(37,99,235,0.1);
}
.rule-option .rule-title { font-size: 0.75rem; font-weight: 600; color: #cbd5e1; }
.rule-option.selected .rule-title { color: #93c5fd; }
.rule-option .rule-desc  { font-size: 0.75rem; color: #64748b; line-height: 1.4; margin-top: 0.125rem; }

/* --------------------------------------------------
   ADMIN / COLLABORATION SURFACE CLASSES
   Platform-level surfaces that sit OUTSIDE a single hub but share the
   same dark-slate language. Admin chrome = indigo-600 (#4f46e5).
   Consumer hub colors appear INSIDE admin as data indicators only.
-------------------------------------------------- */

.surface-page {
  background: #0f172a;
  min-height: 100vh;
  padding: 2rem 1.5rem;
}
.surface-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.surface-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.02em;
}
.surface-subtitle {
  font-size: 0.875rem;
  color: #64748b;
  margin-top: 0.25rem;
}

.collab-panel {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.75rem;
  overflow: hidden;
}
.collab-panel-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #334155;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.collab-panel-title { font-size: 0.875rem; font-weight: 600; color: #e2e8f0; }
.collab-panel-subtitle { font-size: 0.75rem; color: #64748b; margin-top: 0.125rem; }
.collab-panel-body { padding: 0; }

.party-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid #1e293b;
  background: #0f172a;
  transition: background 0.15s;
}
.party-row:last-child { border-bottom: none; }
.party-row:hover { background: #131f35; }

.party-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.party-avatar.exchanger   { background: rgba(37,99,235,0.25);  color: #93c5fd; }
.party-avatar.qi          { background: rgba(99,102,241,0.25); color: #a5b4fc; }
.party-avatar.title       { background: rgba(8,145,178,0.25);  color: #67e8f9; }
.party-avatar.cpa         { background: rgba(15,118,110,0.25); color: #5eead4; }
.party-avatar.attorney    { background: rgba(147,51,234,0.25); color: #d8b4fe; }
.party-avatar.lender      { background: rgba(234,88,12,0.25);  color: #fdba74; }
.party-avatar.seller      { background: rgba(22,163,74,0.25);  color: #86efac; }
.party-avatar.buyer       { background: rgba(251,191,36,0.2);  color: #fde68a; }

.status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.status-dot.active  { background: #34d399; }
.status-dot.invited { background: #fbbf24; }
.status-dot.pending { background: #475569; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 600;
  white-space: nowrap;
}
.status-badge.active  { background: rgba(6,78,59,0.3);   color: #34d399; border: 1px solid rgba(52,211,153,0.3); }
.status-badge.invited { background: rgba(120,53,15,0.3); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.status-badge.pending { background: rgba(30,41,59,0.6);  color: #64748b; border: 1px solid #334155; }
.status-badge.missing { background: rgba(127,29,29,0.3); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.form-input {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #e2e8f0;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}
.form-input:focus { border-color: rgba(59,130,246,0.6); box-shadow: 0 0 0 2px rgba(37,99,235,0.15); }
.form-input::placeholder { color: #475569; }
.form-select {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #e2e8f0;
  width: 100%;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
  appearance: none;
}
.form-select:focus { border-color: rgba(59,130,246,0.6); }

/* .touchpoint-timeline — vertical phased touchpoint map */
.touchpoint-timeline {
  position: relative;
  padding: 0 1.25rem 1.5rem;
}
.touchpoint-phase {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0;
  position: relative;
}
.touchpoint-phase-dot {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  border: 2px solid;
  background: #0f172a;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.touchpoint-phase-line {
  position: absolute;
  left: calc(1.25rem + 0.4375rem - 1px);
  top: 1.25rem;
  bottom: 0;
  width: 2px;
  background: #1e293b;
  z-index: 0;
}
.touchpoint-phase-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}
.touchpoint-event {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.25rem 0 0.25rem 1.5rem;
  position: relative;
}
.touchpoint-event-icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.touchpoint-event-body {
  flex: 1;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid #1e293b;
}
.touchpoint-event:last-child .touchpoint-event-body { border-bottom: none; }
.touchpoint-event-title { font-size: 0.8125rem; font-weight: 600; color: #e2e8f0; }
.touchpoint-event-meta { font-size: 0.75rem; color: #64748b; margin-top: 0.125rem; line-height: 1.4; }
.touchpoint-gap-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(127,29,29,0.25);
  color: #f87171;
  border: 1px solid rgba(248,113,113,0.25);
}
.touchpoint-hit-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(6,78,59,0.25);
  color: #34d399;
  border: 1px solid rgba(52,211,153,0.25);
}

/* Admin shell */
.admin-shell {
  display: flex;
  height: 100vh;
  background: #0f172a;
  color: #f1f5f9;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  overflow: hidden;
}
.admin-sidebar {
  width: 14rem;
  flex-shrink: 0;
  background: #1e293b;
  border-right: 1px solid #334155;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
.admin-sidebar-logo {
  padding: 1.25rem 1rem 1rem;
  border-bottom: 1px solid #334155;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.admin-sidebar-logo .logo-asset {
  height: 1.75rem;
  width: auto;
  flex-shrink: 0;
  display: block;
}
.admin-sidebar-logo .logo-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: -0.01em;
}
.admin-nav {
  padding: 0.75rem 0.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.admin-nav-section {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #475569;
  padding: 0.75rem 0.5rem 0.25rem;
}
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #94a3b8;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
}
.admin-nav-item:hover { background: rgba(79,70,229,0.1); color: #c7d2fe; }
.admin-nav-item.active { background: rgba(79,70,229,0.18); color: #a5b4fc; font-weight: 600; }
.admin-nav-item .nav-icon { width: 1rem; height: 1rem; flex-shrink: 0; opacity: 0.7; }
.admin-nav-item.active .nav-icon { opacity: 1; }
.admin-nav-badge {
  margin-left: auto;
  background: rgba(79,70,229,0.25);
  color: #818cf8;
  border-radius: 9999px;
  padding: 0.1rem 0.45rem;
  font-size: 0.65rem;
  font-weight: 700;
}
.admin-nav-badge--alert {
  margin-left: auto;
  background: rgba(127,29,29,0.35);
  color: #f87171;
  border: 1px solid rgba(248,113,113,0.35);
  border-radius: 9999px;
  padding: 0.1rem 0.45rem;
  font-size: 0.65rem;
  font-weight: 700;
}
.admin-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.admin-topbar {
  height: 3.5rem;
  flex-shrink: 0;
  background: #1e293b;
  border-bottom: 1px solid #334155;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.admin-topbar-title { font-size: 0.9375rem; font-weight: 600; color: #e2e8f0; }
.admin-topbar-sub { font-size: 0.75rem; color: #64748b; }
.admin-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.admin-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* .data-table */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.data-table thead tr { background: #1e293b; border-bottom: 1px solid #334155; }
.data-table th {
  padding: 0.625rem 0.875rem;
  text-align: left;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.data-table th:hover { color: #94a3b8; }
.data-table th.sorted { color: #818cf8; }
.data-table-row { border-bottom: 1px solid #1e293b; transition: background 0.1s; }
.data-table-row:hover { background: rgba(30,41,59,0.7); }
.data-table-row.selected { background: rgba(79,70,229,0.08); }
.data-table td { padding: 0.75rem 0.875rem; color: #cbd5e1; vertical-align: middle; }
.data-table td.cell-primary { font-weight: 600; color: #e2e8f0; }
.data-table td.cell-meta { font-size: 0.75rem; color: #64748b; }
.data-table td.cell-amount { font-variant-numeric: tabular-nums; font-weight: 600; color: #e2e8f0; }
.data-table-wrap {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.5rem;
  overflow: hidden;
}

/* .stat-tile */
.stat-tile {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.stat-tile.accent { border-color: rgba(79,70,229,0.4); background: rgba(79,70,229,0.07); }
.stat-tile-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}
.stat-tile-value { font-size: 1.5rem; font-weight: 700; color: #e2e8f0; line-height: 1.2; }
.stat-tile-delta { font-size: 0.75rem; color: #64748b; }
.stat-tile-delta.positive { color: #34d399; }
.stat-tile-delta.negative { color: #f87171; }
.stat-tile-delta.neutral  { color: #94a3b8; }
.stat-tile-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79,70,229,0.15);
  color: #818cf8;
  margin-bottom: 0.25rem;
}

/* .filter-bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.5rem;
}
.filter-input {
  flex: 1;
  min-width: 10rem;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 0.375rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  color: #e2e8f0;
  outline: none;
  transition: border-color 0.15s;
}
.filter-input::placeholder { color: #475569; }
.filter-input:focus { border-color: #4f46e5; }
.filter-select {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 0.375rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  color: #e2e8f0;
  outline: none;
  cursor: pointer;
}
.filter-btn {
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #334155;
  background: transparent;
  color: #64748b;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.filter-btn:hover { background: rgba(30,41,59,0.8); color: #94a3b8; }
.filter-btn.active {
  background: rgba(79,70,229,0.18);
  border-color: rgba(79,70,229,0.5);
  color: #a5b4fc;
  font-weight: 600;
}
.filter-separator { width: 1px; height: 1.25rem; background: #334155; flex-shrink: 0; }

/* .risk-pill — inline status/risk indicator. ok / warning / critical. */
.risk-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 9999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.risk-pill::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.risk-pill.ok { background: rgba(6,78,59,0.25); border: 1px solid rgba(52,211,153,0.35); color: #34d399; }
.risk-pill.ok::before { background: #34d399; }
.risk-pill.warning { background: rgba(120,53,15,0.25); border: 1px solid rgba(245,158,11,0.35); color: #fbbf24; }
.risk-pill.warning::before { background: #fbbf24; }
.risk-pill.critical { background: rgba(127,29,29,0.3); border: 1px solid rgba(248,113,113,0.4); color: #f87171; }
.risk-pill.critical::before { background: #f87171; animation: pulse 1.2s ease-in-out infinite; }

/* .kpi-row */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
}

/* .participant-card */
.participant-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  transition: border-color 0.15s;
}
.participant-card:hover { border-color: #475569; }
.participant-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(79,70,229,0.2);
  border: 1px solid rgba(79,70,229,0.35);
  color: #a5b4fc;
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}
.participant-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.participant-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.participant-email { font-size: 0.75rem; color: #64748b; }
.participant-role-line { display: flex; align-items: center; gap: 0.375rem; }
.participant-actions { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; }

/* .role-pill — party-role badge */
.role-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.role-pill.exchanger { background: rgba(37,99,235,0.18);  color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
.role-pill.qi        { background: rgba(79,70,229,0.2);   color: #a5b4fc; border: 1px solid rgba(99,102,241,0.35); }
.role-pill.agent     { background: rgba(22,163,74,0.15);  color: #86efac; border: 1px solid rgba(34,197,94,0.25); }
.role-pill.attorney  { background: rgba(8,145,178,0.15);  color: #67e8f9; border: 1px solid rgba(6,182,212,0.25); }
.role-pill.advisor   { background: rgba(147,51,234,0.15); color: #d8b4fe; border: 1px solid rgba(168,85,247,0.25); }
.role-pill.lender    { background: rgba(234,88,12,0.15);  color: #fdba74; border: 1px solid rgba(249,115,22,0.25); }
.role-pill.title     { background: rgba(8,145,178,0.15);  color: #67e8f9; border: 1px solid rgba(6,182,212,0.25); }
.role-pill.cpa       { background: rgba(15,118,110,0.15); color: #5eead4; border: 1px solid rgba(20,184,166,0.3); }
.role-pill.seller    { background: rgba(22,163,74,0.15);  color: #86efac; border: 1px solid rgba(34,197,94,0.25); }
.role-pill.buyer     { background: rgba(120,53,15,0.15);  color: #fde68a; border: 1px solid rgba(251,191,36,0.3); }

/* .invite-card — dashed-border CTA for adding a participant (admin indigo) */
.invite-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  border: 2px dashed rgba(79,70,229,0.35);
  background: rgba(79,70,229,0.04);
  border-radius: 0.5rem;
  padding: 1.25rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  width: 100%;
}
.invite-card:hover { background: rgba(79,70,229,0.09); border-color: rgba(79,70,229,0.6); }
.invite-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(79,70,229,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #818cf8;
}
.invite-label { font-size: 0.8125rem; font-weight: 600; color: #c7d2fe; }
.invite-desc  { font-size: 0.75rem; color: #64748b; }

/* .invite-modal */
.invite-modal {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.75rem;
  width: 100%;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
  overflow: hidden;
}
.invite-modal-header { padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid #334155; }
.invite-modal-title { font-size: 1rem; font-weight: 600; color: #e2e8f0; }
.invite-modal-sub { font-size: 0.75rem; color: #64748b; margin-top: 0.25rem; }
.invite-modal-body { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.invite-modal-footer {
  padding: 0.875rem 1.5rem;
  border-top: 1px solid #334155;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  background: rgba(15,23,42,0.3);
}
.invite-field-label { font-size: 0.75rem; font-weight: 600; color: #94a3b8; margin-bottom: 0.375rem; display: block; }
.invite-field-input {
  width: 100%;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #e2e8f0;
  outline: none;
  transition: border-color 0.15s;
}
.invite-field-input:focus { border-color: #4f46e5; }
.invite-field-input::placeholder { color: #475569; }

/* .team-rail — compact horizontal scrollable participant chips */
.team-rail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.125rem;
}
.team-rail::-webkit-scrollbar { display: none; }
.team-rail-member {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: rgba(30,41,59,0.8);
  border: 1px solid #334155;
  border-radius: 9999px;
  padding: 0.2rem 0.625rem 0.2rem 0.2rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.team-rail-avatar {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: rgba(79,70,229,0.2);
  color: #a5b4fc;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
}
.team-rail-name { font-size: 0.75rem; font-weight: 500; color: #cbd5e1; }

/* .notify-row */
.notify-row {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #1e293b;
  transition: background 0.1s;
  cursor: pointer;
}
.notify-row:hover { background: rgba(30,41,59,0.6); }
.notify-row.unread { background: rgba(79,70,229,0.04); border-left: 3px solid #4f46e5; }
.notify-row.unread:hover { background: rgba(79,70,229,0.08); }
.notify-row .notify-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.notify-title { font-size: 0.8125rem; font-weight: 600; color: #e2e8f0; }
.notify-row.unread .notify-title { color: #c7d2fe; }
.notify-meta { font-size: 0.75rem; color: #64748b; }
.notify-actions { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; }

/* .notify-badge */
.notify-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.notify-badge.deadline  { background: rgba(127,29,29,0.3);  color: #f87171; }
.notify-badge.document  { background: rgba(37,99,235,0.2);  color: #93c5fd; }
.notify-badge.fund      { background: rgba(6,78,59,0.25);   color: #34d399; }
.notify-badge.alert     { background: rgba(120,53,15,0.25); color: #fbbf24; }
.notify-badge.platform  { background: rgba(79,70,229,0.2);  color: #818cf8; }
.notify-badge.esign     { background: rgba(8,145,178,0.2);  color: #67e8f9; }

/* .timeline — vertical audit / activity timeline */
.timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
.timeline-event { display: flex; gap: 0.75rem; position: relative; padding-bottom: 1.25rem; }
.timeline-event:last-child { padding-bottom: 0; }
.timeline-track { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 1.25rem; }
.timeline-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: #4f46e5;
  border: 2px solid #0f172a;
  flex-shrink: 0;
  margin-top: 0.25rem;
  z-index: 1;
}
.timeline-dot.ok       { background: #34d399; }
.timeline-dot.warning  { background: #fbbf24; }
.timeline-dot.critical { background: #f87171; }
.timeline-dot.platform { background: #818cf8; }
.timeline-spine { width: 1px; flex: 1; background: #334155; margin-top: 0.25rem; }
.timeline-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.timeline-label { font-size: 0.8125rem; font-weight: 500; color: #cbd5e1; }
.timeline-when  { font-size: 0.7rem; color: #475569; }
.timeline-actor { font-size: 0.7rem; color: #64748b; }

/* .touchpoint-track — horizontal milestone track */
.touchpoint-track { position: relative; height: 3.5rem; margin: 0 0.75rem; }
.touchpoint-track-line {
  position: absolute;
  top: 0.5rem;
  left: 0;
  right: 0;
  height: 2px;
  background: #334155;
  border-radius: 9999px;
  overflow: hidden;
}
.touchpoint-track-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #4f46e5, #818cf8);
  transition: width 0.4s ease;
}
.touchpoint-marker {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  transform: translateX(-50%);
}
.touchpoint-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #334155;
  border: 2px solid #1e293b;
  z-index: 1;
}
.touchpoint-marker.done     .touchpoint-dot { background: #34d399; border-color: #0f172a; }
.touchpoint-marker.active   .touchpoint-dot { background: #4f46e5; border-color: #0f172a; box-shadow: 0 0 0 3px rgba(79,70,229,0.3); }
.touchpoint-marker.upcoming .touchpoint-dot { background: #334155; }
.touchpoint-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  text-align: center;
}
.touchpoint-marker.done   .touchpoint-label { color: #34d399; }
.touchpoint-marker.active .touchpoint-label { color: #818cf8; }
.touchpoint-date { font-size: 0.55rem; color: #475569; white-space: nowrap; }

/* Keyframes */
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes pulse {
  50% { opacity: 0.5; }
}