/* ═══════════════════════════════════════════════════════════════════
   EFIN v22 — UI/UX Improvements Patch
   Drop this <link> or <style> AFTER the existing styles in the <head>
   ═══════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   1. APPLICATION TABLE — Age / SLA badge
   ────────────────────────────────────────────────────────────────── */
.sla-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: .3px;
  white-space: nowrap;
}
.sla-ok   { background: rgba(26,115,64,.09);  color: #1a7340; border: 1px solid rgba(26,115,64,.2); }
.sla-warn { background: rgba(230,126,0,.10);  color: #b85e00; border: 1px solid rgba(230,126,0,.25); }
.sla-over { background: rgba(212,43,43,.10);  color: #d42b2b; border: 1px solid rgba(212,43,43,.22);
  animation: slaPulse 2s ease-in-out infinite; }
@keyframes slaPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(212,43,43,.0); }
  50%      { box-shadow: 0 0 0 4px rgba(212,43,43,.14); }
}

/* ──────────────────────────────────────────────────────────────────
   2. DETAIL ACTION BAR — consolidated, separated danger zone
   ────────────────────────────────────────────────────────────────── */
#detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Primary workflow actions */
.detail-action-primary {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Danger zone — separated visually */
.detail-action-danger-zone {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1.5px solid var(--border2);
}

/* Locked / disabled disburse button */
.btn-disburse-locked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(138,150,180,.08);
  border: 1.5px solid var(--border2);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text3);
  cursor: not-allowed;
  font-family: var(--font-body);
  position: relative;
}
.btn-disburse-locked:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: #1a2540;
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 9px;
  white-space: pre-line;
  width: 220px;
  line-height: 1.55;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  z-index: 200;
  pointer-events: none;
}
.btn-disburse-locked:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  right: 22px;
  border: 5px solid transparent;
  border-top-color: #1a2540;
  z-index: 200;
  pointer-events: none;
}

/* Disburse checklist inside lender details */
.disburse-checklist {
  margin-top: 16px;
  padding: 14px 18px;
  background: rgba(26,79,163,.04);
  border: 1.5px solid rgba(26,79,163,.14);
  border-radius: 13px;
}
.disburse-checklist-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.disburse-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text2);
}
.disburse-check-row:last-child { border-bottom: none; }
.disburse-check-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.disburse-check-icon.done    { background: rgba(26,115,64,.12); color: var(--success); }
.disburse-check-icon.pending { background: rgba(230,126,0,.10); color: var(--warn); }
.disburse-action-btn {
  margin-left: auto;
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid;
  transition: all .15s;
  white-space: nowrap;
}
.disburse-action-btn.pending-btn {
  background: rgba(230,126,0,.1);
  color: #b45309;
  border-color: rgba(230,126,0,.3);
}
.disburse-action-btn.pending-btn:hover {
  background: #f59e0b;
  color: #fff;
  border-color: #f59e0b;
}
.disburse-action-btn.done-btn {
  background: rgba(26,115,64,.08);
  color: var(--success);
  border-color: rgba(26,115,64,.2);
  cursor: default;
}

/* ──────────────────────────────────────────────────────────────────
   3. "MORE ACTIONS" DROPDOWN — replaces inline Hold/Reject
   ────────────────────────────────────────────────────────────────── */
.more-actions-wrap {
  position: relative;
}
.more-actions-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  background: var(--surface);
  border: 1.5px solid var(--border2);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all .18s;
}
.more-actions-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}
.more-actions-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 13px;
  box-shadow: 0 12px 40px rgba(26,79,163,.14);
  z-index: 999;
  overflow: hidden;
  animation: moreMenuIn .16s cubic-bezier(.34,1.2,.64,1) both;
}
@keyframes moreMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.more-actions-menu.open { display: block; }
.more-actions-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s;
  color: var(--text2);
  border-bottom: 1px solid var(--border);
}
.more-actions-item:last-child { border-bottom: none; }
.more-actions-item:hover { background: var(--surface2); }
.more-actions-item.danger { color: var(--accent2); }
.more-actions-item.danger:hover { background: var(--accent2-subtle); }
.more-actions-item.warn  { color: var(--warn); }
.more-actions-item.warn:hover  { background: rgba(230,126,0,.06); }
.more-actions-label {
  padding: 6px 16px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text3);
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}

/* ──────────────────────────────────────────────────────────────────
   4. TASKS — Cross-application dashboard
   ────────────────────────────────────────────────────────────────── */
.task-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.task-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  transition: box-shadow .2s, border-color .2s;
}
.task-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--border2);
}
.task-card.priority-high   { border-left: 3px solid var(--accent2); }
.task-card.priority-medium { border-left: 3px solid var(--warn); }
.task-card.priority-low    { border-left: 3px solid var(--success); }
.task-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.task-card-app-id {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  font-family: monospace;
  background: rgba(26,79,163,.07);
  padding: 2px 7px;
  border-radius: 5px;
}
.task-card-type {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.task-card-meta {
  font-size: 11.5px;
  color: var(--text3);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.task-card-remark {
  font-size: 12.5px;
  color: var(--text2);
  line-height: 1.5;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--surface2);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.task-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.task-status-pill.draft    { background: rgba(138,150,180,.12); color: #6b7fa3; }
.task-status-pill.open     { background: rgba(26,79,163,.10);  color: var(--accent); }
.task-status-pill.done     { background: rgba(26,115,64,.10);  color: var(--success); }
.task-status-pill.cancelled { background: rgba(212,43,43,.08); color: var(--accent2); }

/* Task nav badge */
#tasks-nav-badge {
  background: var(--accent2);
  color: #fff;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}

/* ──────────────────────────────────────────────────────────────────
   5. HOLD DURATION INDICATOR in detail header
   ────────────────────────────────────────────────────────────────── */
.hold-duration-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(230,126,0,.10);
  border: 1px solid rgba(230,126,0,.25);
  color: var(--warn);
  margin-left: 8px;
  animation: holdPulse 3s ease-in-out infinite;
}
@keyframes holdPulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .65; }
}

/* ──────────────────────────────────────────────────────────────────
   6. TEAM OVERVIEW — user workload chips
   ────────────────────────────────────────────────────────────────── */
.tw-user-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  transition: box-shadow .2s;
  position: relative;
}
.tw-user-card:hover { box-shadow: var(--shadow); }
.tw-workload-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
}
.tw-workload-badge.low    { background: rgba(26,115,64,.08);  color: var(--success); }
.tw-workload-badge.medium { background: rgba(230,126,0,.10);  color: var(--warn); }
.tw-workload-badge.high   { background: rgba(212,43,43,.10);  color: var(--accent2); }

/* ──────────────────────────────────────────────────────────────────
   7. INLINE CONFIRM OVERLAY — replaces browser confirm()
   ────────────────────────────────────────────────────────────────── */
.inline-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(212,43,43,.06);
  border: 1.5px solid rgba(212,43,43,.22);
  border-radius: 10px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text2);
  animation: inlineConfirmIn .18s ease both;
}
@keyframes inlineConfirmIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.inline-confirm-text { flex: 1; }
.inline-confirm-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ──────────────────────────────────────────────────────────────────
   8. LOADING SPINNER for async buttons
   ────────────────────────────────────────────────────────────────── */
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: .75;
}
.btn-loading::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnSpin .6s linear infinite;
}
.btn-loading.btn-ghost::after,
.btn-loading.btn-ghost-like::after {
  border-color: rgba(26,79,163,.25);
  border-top-color: var(--accent);
}
@keyframes btnSpin { to { transform: translateY(-50%) rotate(360deg); } }

/* ──────────────────────────────────────────────────────────────────
   9. PERSISTED DATA BANNER — top of dashboard when loaded from storage
   ────────────────────────────────────────────────────────────────── */
.storage-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: rgba(26,115,64,.07);
  border: 1px solid rgba(26,115,64,.2);
  border-radius: 10px;
  font-size: 12.5px;
  color: #1a7340;
  font-weight: 500;
  margin-bottom: 18px;
  animation: storageBannerIn .3s ease both;
}
@keyframes storageBannerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.storage-banner-btn {
  margin-left: auto;
  background: none;
  border: 1px solid rgba(26,115,64,.3);
  border-radius: 7px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #1a7340;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all .15s;
}
.storage-banner-btn:hover {
  background: rgba(26,115,64,.1);
}

/* ──────────────────────────────────────────────────────────────────
   10. CAM OFFER — inline confirmation card before applying
   ────────────────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────────
   11. TASK PAGE — filter bar
   ────────────────────────────────────────────────────────────────── */
.task-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.task-filter-chip {
  padding: 6px 14px;
  border: 1.5px solid var(--border2);
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  background: var(--surface);
  transition: all .15s;
  font-family: var(--font-body);
}
.task-filter-chip:hover  { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
.task-filter-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ──────────────────────────────────────────────────────────────────
   12. EDIT DETAIL — diff summary before save
   ────────────────────────────────────────────────────────────────── */
.edit-diff-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.edit-diff-row:last-child { border-bottom: none; }
.edit-diff-label { color: var(--text3); font-weight: 600; min-width: 130px; font-size: 11.5px; }
.edit-diff-from  { color: var(--text3); text-decoration: line-through; }
.edit-diff-arrow { color: var(--text3); font-size: 11px; }
.edit-diff-to    { color: var(--accent); font-weight: 600; }

/* ──────────────────────────────────────────────────────────────────
   13. PERMISSIONS — Staged/Draft state before applying
   ────────────────────────────────────────────────────────────────── */
.perms-unsaved-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  background: rgba(230,126,0,.09);
  border: 1.5px solid rgba(230,126,0,.3);
  border-radius: 12px;
  font-size: 13px;
  color: var(--warn);
  font-weight: 600;
  margin-bottom: 16px;
  animation: permBannerIn .2s ease both;
}
.perms-unsaved-banner.visible { display: flex; }
@keyframes permBannerIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ──────────────────────────────────────────────────────────────────
   14. STEP NAVIGATION — locked future steps
   ────────────────────────────────────────────────────────────────── */
.wizard-step.locked .step-num {
  background: #e5e7eb !important;
  color: #9ca3af !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
.wizard-step.locked .step-num::after {
  content: '🔒';
  position: absolute;
  font-size: 8px;
  bottom: -2px;
  right: -2px;
}

/* ──────────────────────────────────────────────────────────────────
   15. RESEND INVITATION button in user table
   ────────────────────────────────────────────────────────────────── */
.btn-resend-invite {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border: 1px solid rgba(26,79,163,.25);
  border-radius: 7px;
  background: rgba(26,79,163,.06);
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all .15s;
  white-space: nowrap;
}
.btn-resend-invite:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}



/* ═══════════════════════════════════════════════════════════════════════════
   KYC — IDENTITY DOCUMENT EXTRACTION  (Step 2)
   Story: A physical ID card feeds into the scanner; fields populate one by one.
   Every element communicates "reading your document".
═══════════════════════════════════════════════════════════════════════════ */

/* ── Overlay wrapper ── */
.kyc-anim-wrap {
  position: relative;
  width: 180px;
  height: 166px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  overflow: visible;
}

/* ── ID card ── */
.kyc-card {
  position: relative;
  width: 148px;
  height: 96px;
  border-radius: 10px;
  background: linear-gradient(145deg, #fff 0%, #f0f4ff 100%);
  border: 1.5px solid rgba(26,79,163,.22);
  box-shadow: 0 8px 32px rgba(26,79,163,.18), 0 2px 6px rgba(26,79,163,.1);
  overflow: hidden;
  z-index: 3;
}

/* Card top colour stripe */
.kyc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 22px;
  background: linear-gradient(90deg, #1a4fa3, #2c6fff);
}

/* Card chip */
.kyc-card-chip {
  position: absolute;
  top: 5px;
  left: 10px;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  background: linear-gradient(135deg, #d4a843 0%, #f0c060 40%, #c8932a 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  z-index: 1;
}

/* Photo box */
.kyc-card-photo {
  position: absolute;
  top: 28px;
  left: 10px;
  width: 28px;
  height: 34px;
  border-radius: 4px;
  background: linear-gradient(145deg, #dce8ff, #c8d8f4);
  border: 1px solid rgba(26,79,163,.2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kyc-card-photo::after {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(26,79,163,.25);
  box-shadow: 0 8px 0 rgba(26,79,163,.15);
}

/* Data lines — animate in sequence */
.kyc-card-lines {
  position: absolute;
  top: 30px;
  left: 46px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.kyc-line {
  height: 5px;
  border-radius: 3px;
  background: rgba(26,79,163,.12);
  transform-origin: left;
  transform: scaleX(0);
  animation: kyc-line-fill 0.5s ease-out forwards;
}
.kyc-line-1 { width: 82%; animation-delay: 0.2s; }
.kyc-line-2 { width: 64%; animation-delay: 0.5s; background: rgba(26,79,163,.18); }
.kyc-line-3 { width: 74%; animation-delay: 0.8s; }
.kyc-line-4 { width: 50%; animation-delay: 1.1s; background: rgba(26,79,163,.14); }
@keyframes kyc-line-fill {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* ── Scan beam — sweeps over the card ── */
.kyc-scan-beam {
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(44,111,255,.0) 8%,
    rgba(44,111,255,.85) 35%,
    rgba(111,163,255,1) 50%,
    rgba(44,111,255,.85) 65%,
    rgba(44,111,255,.0) 92%,
    transparent 100%);
  filter: blur(0.5px);
  box-shadow: 0 0 10px 3px rgba(44,111,255,.45);
  animation: kyc-beam-travel 2.4s cubic-bezier(.4,0,.6,1) infinite;
  z-index: 4;
  pointer-events: none;
}
.kyc-scan-glow {
  position: absolute;
  left: 0; right: 0;
  height: 40px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(44,111,255,.06) 40%,
    rgba(44,111,255,.1) 50%,
    rgba(44,111,255,.06) 60%,
    transparent 100%);
  animation: kyc-beam-travel 2.4s cubic-bezier(.4,0,.6,1) infinite;
  margin-top: -20px;
  z-index: 3;
  pointer-events: none;
}
@keyframes kyc-beam-travel {
  0%   { top: 0; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: calc(100% - 3px); opacity: 0; }
}

/* ── Corner brackets — framing the card ── */
.kyc-corner { position: absolute; width: 14px; height: 14px; z-index: 5; }
.kyc-corner-tl { top: -2px; left: -2px;
  border-top: 2.5px solid #1a4fa3; border-left: 2.5px solid #1a4fa3; border-radius: 3px 0 0 0; }
.kyc-corner-tr { top: -2px; right: -2px;
  border-top: 2.5px solid #1a4fa3; border-right: 2.5px solid #1a4fa3; border-radius: 0 3px 0 0; }
.kyc-corner-bl { bottom: -2px; left: -2px;
  border-bottom: 2.5px solid #1a4fa3; border-left: 2.5px solid #1a4fa3; border-radius: 0 0 0 3px; }
.kyc-corner-br { bottom: -2px; right: -2px;
  border-bottom: 2.5px solid #1a4fa3; border-right: 2.5px solid #1a4fa3; border-radius: 0 0 3px 0; }
.kyc-corner { animation: kyc-corner-pulse 2s ease-in-out infinite; }
@keyframes kyc-corner-pulse {
  0%,100% { opacity: .7; }
  50%      { opacity: 1; filter: drop-shadow(0 0 3px rgba(26,79,163,.6)); }
}

/* ── Verified checkmark — appears after scan ── */
.kyc-verified-mark {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #16a34a, #1a7340);
  border: 2.5px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(22,163,74,.4);
  z-index: 6;
  animation: kyc-checkmark-pop .5s cubic-bezier(.34,1.56,.64,1) 1.6s both;
}
.kyc-verified-mark svg { display: block; }
@keyframes kyc-checkmark-pop {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Stage label ── */
.kyc-stage-label {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #1a4fa3 0%, #0f3278 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  padding: 4px 12px 4px 9px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(26,79,163,.45);
  z-index: 10;
  animation: kyc-label-slide .5s cubic-bezier(.34,1.46,.64,1) .3s both;
}
.kyc-stage-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,.9);
  flex-shrink: 0;
  animation: kyc-dot-glow 1.2s ease-in-out infinite;
}
@keyframes kyc-label-slide {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes kyc-dot-glow {
  0%,100% { box-shadow: 0 0 4px rgba(74,222,128,.7);  }
  50%      { box-shadow: 0 0 10px rgba(74,222,128,1); transform: scale(1.2); }
}

/* ── Sub text + progress dots ── */
.kyc-loading-sub {
  font-size: 11.5px; color: var(--text3);
  margin-top: 5px; font-weight: 500;
}
.kyc-progress-dots {
  display: flex; gap: 7px; margin-top: 16px;
}
.kyc-pdot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); opacity: 0.2;
  animation: kyc-pdot-bounce 1.2s ease-in-out infinite;
}
.kyc-pdot:nth-child(2) { animation-delay: .18s; }
.kyc-pdot:nth-child(3) { animation-delay: .36s; }
@keyframes kyc-pdot-bounce {
  0%,100% { opacity:.2; transform:translateY(0);    }
  50%      { opacity:1;  transform:translateY(-4px); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   OFFER INTERSTITIAL — FINANCIAL CALCULATION  (Step 6)
   Story: A rupee symbol materialises, numbers cascade up, a bar fills.
   Every element communicates "computing your loan offer".
═══════════════════════════════════════════════════════════════════════════ */

#oi-lottie-wrap {
  width: 180px;
  height: 180px;
  margin: -8px auto 18px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* ── Coin base — central rupee disc ── */
.oi-coin {
  position: relative;
  z-index: 4;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1a4fa3 0%, #0f3278 60%, #1a4fa3 100%);
  border: 3px solid rgba(44,111,255,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 6px rgba(26,79,163,.1),
    0 0 0 12px rgba(26,79,163,.05),
    0 12px 40px rgba(26,79,163,.5);
  animation: oi-coin-spin 6s linear infinite, oi-coin-glow 2.4s ease-in-out infinite;
}
@keyframes oi-coin-spin {
  0%   { box-shadow: 0 0 0 6px rgba(26,79,163,.1), 0 0 0 12px rgba(26,79,163,.05), 0 12px 40px rgba(26,79,163,.5), inset -4px 0 12px rgba(0,0,0,.15); }
  50%  { box-shadow: 0 0 0 6px rgba(26,79,163,.1), 0 0 0 12px rgba(26,79,163,.05), 0 12px 40px rgba(26,79,163,.5), inset 4px 0 12px rgba(255,255,255,.06); }
  100% { box-shadow: 0 0 0 6px rgba(26,79,163,.1), 0 0 0 12px rgba(26,79,163,.05), 0 12px 40px rgba(26,79,163,.5), inset -4px 0 12px rgba(0,0,0,.15); }
}
@keyframes oi-coin-glow {
  0%,100% { transform: scale(1);    filter: brightness(1); }
  50%      { transform: scale(1.04); filter: brightness(1.1); }
}
.oi-coin-symbol {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  font-family: var(--font-head);
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
  line-height: 1;
  user-select: none;
}

/* ── Number cascade — digits counting up around the coin ── */
.oi-num-stream {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.oi-num {
  position: absolute;
  font-size: 11px;
  font-weight: 800;
  color: rgba(26,79,163,.75);
  font-family: 'Courier New', monospace;
  animation: oi-num-rise 1.8s ease-in infinite;
  letter-spacing: .5px;
}
.oi-num-1 { left: 2px;  top: 55px; animation-delay: 0s;    animation-duration: 2.1s; }
.oi-num-2 { left: 130px; top: 42px; animation-delay: 0.35s; animation-duration: 1.9s; }
.oi-num-3 { left: 12px;  top: 115px; animation-delay: 0.7s;  animation-duration: 2.3s; }
.oi-num-4 { left: 120px; top: 110px; animation-delay: 1.05s; animation-duration: 2.0s; }
.oi-num-5 { left: 68px;  top: 2px;   animation-delay: 1.4s;  animation-duration: 1.85s; }
.oi-num-6 { left: 55px;  top: 152px; animation-delay: 1.75s; animation-duration: 2.15s; }
@keyframes oi-num-rise {
  0%   { opacity: 0; transform: translateY(14px) scale(.7); }
  15%  { opacity: 1; transform: translateY(0)    scale(1);  }
  70%  { opacity: .8; }
  100% { opacity: 0; transform: translateY(-10px) scale(.85); }
}

/* ── Orbit ring with calculation dots ── */
.oi-orbit-ring {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px solid rgba(26,79,163,.12);
  animation: oi-orbit-cw 8s linear infinite;
  pointer-events: none;
}
.oi-calc-dot {
  position: absolute;
  border-radius: 50%;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
}
.oi-calc-dot-a {
  width: 8px; height: 8px;
  background: #2c6fff;
  box-shadow: 0 0 12px 3px rgba(44,111,255,.7);
}
.oi-calc-dot-b {
  width: 6px; height: 6px;
  background: rgba(26,79,163,.8);
  box-shadow: 0 0 8px 2px rgba(26,79,163,.5);
  top: auto; bottom: -3px;
}
.oi-orbit-ring-2 {
  position: absolute;
  inset: 32px;
  border-radius: 50%;
  border: 1px dashed rgba(44,111,255,.15);
  animation: oi-orbit-ccw 5s linear infinite;
  pointer-events: none;
}
@keyframes oi-orbit-cw  { to { transform: rotate(360deg);  } }
@keyframes oi-orbit-ccw { to { transform: rotate(-360deg); } }

/* ── Shimmer arcs — sense of energy ── */
.oi-arc {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
}
.oi-arc-1 {
  border-top-color: rgba(44,111,255,.45);
  border-right-color: rgba(44,111,255,.15);
  animation: oi-orbit-cw 2.2s cubic-bezier(.5,0,.5,1) infinite;
}
.oi-arc-2 {
  inset: 20px;
  border-bottom-color: rgba(26,79,163,.35);
  border-left-color: rgba(26,79,163,.12);
  animation: oi-orbit-ccw 1.8s cubic-bezier(.5,0,.5,1) infinite;
}
.oi-arc-3 {
  inset: 55px;
  border-top-color: rgba(44,111,255,.2);
  border-style: dashed;
  animation: oi-orbit-cw 4s linear infinite;
}

/* ── Stage label ── */
.oi-stage-label {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #1a4fa3 0%, #0f3278 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  padding: 4px 12px 4px 9px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 3px 14px rgba(26,79,163,.5);
  z-index: 10;
  animation: oi-label-slide .5s cubic-bezier(.34,1.46,.64,1) .3s both;
}
.oi-stage-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 6px rgba(251,191,36,.9);
  flex-shrink: 0;
  animation: oi-dot-blink 1.1s ease-in-out infinite;
}
@keyframes oi-label-slide {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes oi-dot-blink {
  0%,100% { opacity: .5; transform: scale(.9); }
  50%      { opacity: 1;  transform: scale(1.3); box-shadow: 0 0 10px rgba(251,191,36,1); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LOAN ANALYTICS INTERSTITIAL  (Step 9 — 1.5 s)
   Story: Bank columns rise like a comparison chart, then a match-line
   connects the best fit. Every element communicates "comparing banks".
═══════════════════════════════════════════════════════════════════════════ */

#la-interstitial {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8800;
  background: rgba(4,8,24,.88);
  backdrop-filter: blur(18px) saturate(1.8);
  align-items: center;
  justify-content: center;
}
#la-interstitial.lai-active { display: flex; }

.lai-card {
  background: linear-gradient(160deg, #ffffff 0%, #eef4ff 100%);
  border-radius: 28px;
  padding: 30px 40px 28px;
  max-width: 380px;
  width: 92%;
  text-align: center;
  box-shadow: 0 48px 120px rgba(8,20,70,.35), 0 0 0 1px rgba(26,79,163,.12);
  position: relative;
  overflow: hidden;
  animation: lai-card-up .45s cubic-bezier(.34,1.46,.64,1) both;
}
.lai-card::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 50% at 50% -5%, rgba(26,79,163,.07) 0%, transparent 70%);
}
@keyframes lai-card-up {
  from { opacity: 0; transform: translateY(30px) scale(.93); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* Animation wrapper */
.lai-anim-wrap {
  position: relative;
  width: 220px;
  height: 130px;
  margin: 0 auto 22px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  overflow: visible;
}

/* ── Bank comparison bars ── */
.lai-bank-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
}
.lai-bank-bar {
  width: 28px;
  border-radius: 6px 6px 0 0;
  transform-origin: bottom;
  transform: scaleY(0);
  animation: lai-bar-rise .8s cubic-bezier(.34,1.3,.64,1) forwards;
  position: relative;
  overflow: hidden;
}
.lai-bank-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, transparent 100%);
  border-radius: 6px 6px 0 0;
}
.lai-col-1 .lai-bank-bar {
  height: 68px;
  background: linear-gradient(180deg, #2c6fff, #1a4fa3);
  animation-delay: .1s;
}
.lai-col-2 .lai-bank-bar {
  height: 92px;
  background: linear-gradient(180deg, #16a34a, #1a7340);
  animation-delay: .25s;
  box-shadow: 0 4px 16px rgba(22,163,74,.4);
}
.lai-col-3 .lai-bank-bar {
  height: 54px;
  background: linear-gradient(180deg, #7c3aed, #5b21b6);
  animation-delay: .4s;
}
.lai-col-4 .lai-bank-bar {
  height: 78px;
  background: linear-gradient(180deg, #ea580c, #c2410c);
  animation-delay: .55s;
}
@keyframes lai-bar-rise {
  from { transform: scaleY(0); opacity: .3; }
  to   { transform: scaleY(1); opacity: 1;  }
}

/* Bank icon labels under each bar */
.lai-bank-icon {
  font-size: 11px;
  font-weight: 800;
  color: var(--text3);
  letter-spacing: .3px;
}

/* ── "Best match" crown on tallest bar ── */
.lai-crown {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  opacity: 0;
  animation: lai-crown-pop .4s cubic-bezier(.34,1.56,.64,1) 1.2s forwards;
}
@keyframes lai-crown-pop {
  from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.5); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)   scale(1);  }
}

/* ── Horizontal baseline ── */
.lai-baseline {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(26,79,163,.2), rgba(26,79,163,.35), rgba(26,79,163,.2), transparent);
  border-radius: 1px;
}

/* ── Scanning line that sweeps across the bars ── */
.lai-scan-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(44,111,255,.8) 30%, rgba(44,111,255,.9) 70%, transparent);
  box-shadow: 0 0 8px 3px rgba(44,111,255,.4);
  border-radius: 1px;
  animation: lai-scan-sweep 1.6s ease-in-out infinite;
  opacity: 0;
}
@keyframes lai-scan-sweep {
  0%   { left: 0;    opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Stage label */
.lai-stage-label {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #1a4fa3 0%, #0f3278 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  padding: 4px 12px 4px 9px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 3px 14px rgba(26,79,163,.5);
  z-index: 10;
  animation: lai-label-slide .5s cubic-bezier(.34,1.46,.64,1) .4s both;
}
.lai-stage-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,.9);
  flex-shrink: 0;
  animation: lai-dot-pulse 1.2s ease-in-out infinite;
}
@keyframes lai-label-slide {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes lai-dot-pulse {
  0%,100% { opacity: .5; transform: scale(.9); }
  50%      { opacity: 1;  transform: scale(1.3); box-shadow: 0 0 10px rgba(74,222,128,1); }
}

/* Title + sub */
.lai-title {
  font-family: var(--font-head);
  font-size: 19px; font-weight: 800;
  color: var(--text); margin-bottom: 5px; letter-spacing: -.3px;
}
.lai-sub {
  font-size: 12px; color: var(--text3);
  line-height: 1.65; margin-bottom: 20px; font-weight: 500;
}

/* Progress bar */
.lai-bar-track {
  height: 3px; border-radius: 3px;
  background: rgba(26,79,163,.08);
  overflow: hidden; margin-bottom: 12px;
}
.lai-bar-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #1a4fa3, #2c6fff, #6fa3ff);
  background-size: 200% 100%; width: 0%;
  transition: width 1.3s cubic-bezier(.25,.46,.45,.94);
  animation: lai-shimmer 1.6s linear infinite;
}
@keyframes lai-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Hint */
.lai-hint {
  font-size: 11.5px; color: var(--text3);
  min-height: 16px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: opacity .18s ease;
}
.lai-hint::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: #2c6fff;
  display: inline-block; flex-shrink: 0;
  animation: lai-dot-pulse 1.2s ease-in-out infinite;
}

/* ── Bank eligibility inline loading (inside la-panel-eligibility) ── */
.la-match-wrap {
  position: relative;
  width: 130px;
  height: 130px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.la-centre-node {
  position: relative;
  z-index: 4;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(140deg, #1a4fa3 0%, #0f3278 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 22px rgba(26,79,163,.42), 0 0 0 5px rgba(26,79,163,.1);
  animation: la-node-breathe 2.4s ease-in-out infinite;
}
@keyframes la-node-breathe {
  0%,100% { transform:scale(1);    box-shadow:0 6px 22px rgba(26,79,163,.42),0 0 0 5px rgba(26,79,163,.1); }
  50%      { transform:scale(1.05); box-shadow:0 8px 30px rgba(26,79,163,.52),0 0 0 9px rgba(26,79,163,.07); }
}
.la-orbit { position:absolute; inset:0; border-radius:50%; z-index:3; }
.la-orbit-1 { animation:la-orb-cw  3.6s linear infinite; }
.la-orbit-2 { animation:la-orb-ccw 2.8s linear infinite; }
.la-orbit-3 { animation:la-orb-cw  4.4s linear infinite; }
@keyframes la-orb-cw  { to { transform:rotate(360deg);  } }
@keyframes la-orb-ccw { to { transform:rotate(-360deg); } }
.la-bank-node {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; border:1.5px solid;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.la-bank-node-a { background:rgba(26,79,163,.12);  color:#1a4fa3; border-color:rgba(26,79,163,.3);  }
.la-bank-node-b { background:rgba(16,185,129,.12);  color:#059669; border-color:rgba(16,185,129,.3);  }
.la-bank-node-c { background:rgba(26,79,163,.18);  color:#0f3278; border-color:rgba(26,79,163,.4);  }
.la-orbit-1 .la-bank-node { animation:la-orb-ccw 3.6s linear infinite; }
.la-orbit-2 .la-bank-node { animation:la-orb-cw  2.8s linear infinite; }
.la-orbit-3 .la-bank-node { animation:la-orb-ccw 4.4s linear infinite; }
.la-connect-svg { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.la-conn-line { stroke:rgba(26,79,163,.18); stroke-width:1.5; stroke-dasharray:5 4; animation:la-dash-flow 1.6s linear infinite; }
.la-conn-1 { animation-delay:0s; }
.la-conn-2 { animation-delay:.5s; }
.la-conn-3 { animation-delay:1s; }
@keyframes la-dash-flow { to { stroke-dashoffset:-18; } }
.la-pulse-ring { position:absolute; inset:38px; border-radius:50%; border:1.5px solid rgba(26,79,163,.28); animation:la-pulse-expand 2.4s ease-out infinite; pointer-events:none; z-index:1; }
.la-pr-2 { animation-delay:.8s; border-color:rgba(44,111,255,.18); }
.la-pr-3 { animation-delay:1.6s; border-color:rgba(26,79,163,.12); }
@keyframes la-pulse-expand { 0%{transform:scale(1);opacity:.9} 100%{transform:scale(2.5);opacity:0} }
.la-stream-dot {
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 6px 2px rgba(44,111,255,.65);
  z-index:5; pointer-events:none; top:50%; left:50%; transform:translate(-50%,-50%);
}
.la-sd-1 { animation:la-dot-t1 1.8s ease-in-out infinite 0s; }
.la-sd-2 { animation:la-dot-t2 1.8s ease-in-out infinite .6s; background:#16a34a; box-shadow:0 0 6px 2px rgba(22,163,74,.65); }
.la-sd-3 { animation:la-dot-t3 1.8s ease-in-out infinite 1.2s; background:#2c6fff; box-shadow:0 0 6px 2px rgba(44,111,255,.65); }
@keyframes la-dot-t1 { 0%{transform:translate(-50%,-50%);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translate(-50%,-295%);opacity:0} }
@keyframes la-dot-t2 { 0%{transform:translate(-50%,-50%);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translate(185%,130%);opacity:0} }
@keyframes la-dot-t3 { 0%{transform:translate(-50%,-50%);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translate(-225%,130%);opacity:0} }
.la-bar-chart { display:flex; align-items:flex-end; gap:5px; height:32px; margin:14px auto 0; width:80px; justify-content:center; }
.la-bar { width:10px; border-radius:3px 3px 0 0; background:linear-gradient(180deg,#2c6fff 0%,#1a4fa3 100%); animation:la-bar-grow 1.4s ease-in-out infinite alternate; }
.la-bar-1 { height:40%; animation-delay:0s; }
.la-bar-2 { height:75%; animation-delay:.15s; }
.la-bar-3 { height:55%; animation-delay:.3s; background:linear-gradient(180deg,#16a34a,#1a7340); }
.la-bar-4 { height:90%; animation-delay:.45s; }
.la-bar-5 { height:35%; animation-delay:.6s; background:linear-gradient(180deg,#1a4fa3,#0f3278); }
@keyframes la-bar-grow { 0%{transform:scaleY(.35);opacity:.45} 100%{transform:scaleY(1);opacity:1} }
