/* ── Agentic Reconciliation Engine V2 — Styles ─────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --void:#0A0A0B;--surface:#1C1C20;--surface-2:#141416;
  --surface-glass:rgba(28,28,32,0.85);
  --border:#2A2A30;--border-glass:rgba(0,212,170,0.12);--border-glass-hover:rgba(0,212,170,0.28);
  --accent:#00D4AA;--accent-dim:#00A888;--accent-light:#00F5C4;
  --accent-glow:rgba(0,212,170,0.25);--accent-glow-strong:rgba(0,212,170,0.45);
  --text:#F0F0F2;--text-dim:#8A8A96;--text-muted:#55555F;
  --green:#22C55E;--green-bg:rgba(34,197,94,0.1);
  --yellow:#EAB308;--yellow-bg:rgba(234,179,8,0.1);
  --red:#EF4444;--red-bg:rgba(239,68,68,0.1);
  --blue:#3B82F6;--blue-bg:rgba(59,130,246,0.1);
  --orange:#F97316;--purple:#A855F7;
  --radius:14px;--radius-sm:10px;--radius-xs:6px;
  --font-head:'Outfit',sans-serif;--font-body:'DM Sans',sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--void);color:var(--text);min-height:100vh;line-height:1.5;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 20% 0%,rgba(0,212,170,0.04) 0%,transparent 50%),
  radial-gradient(ellipse at 80% 100%,rgba(0,168,136,0.03) 0%,transparent 50%)}

/* ── Header ─────────────────────────────────────────────────────────── */
.header{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.header-left{display:flex;align-items:center;gap:20px}
.logo{display:flex;align-items:center;gap:10px}
.logo-bars{display:flex;flex-direction:column;gap:2px}
.logo-bars span{display:block;height:3px;background:var(--text-dim);border-radius:2px}
.logo-bars span:nth-child(1){width:10px}.logo-bars span:nth-child(2){width:16px}
.logo-bars span:nth-child(3){width:22px}.logo-bars .accent-bar{width:28px;height:3.5px;background:var(--accent)}
.logo-text{font-family:var(--font-head);font-weight:700;font-size:18px;letter-spacing:-0.5px}
.logo-text .accent{color:var(--accent)}
.header-title h1{font-family:var(--font-head);font-size:20px;font-weight:600;letter-spacing:-0.3px}
.subtitle{font-size:12px;color:var(--text-dim);margin-top:2px}
.header-badges{display:flex;gap:16px}
.badge{text-align:center;padding:8px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);min-width:80px}
.badge-value{display:block;font-family:var(--font-head);font-weight:700;font-size:20px;color:var(--accent)}
.badge-label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px}
.badge-warn .badge-value{color:var(--yellow)}
.badge-green .badge-value{color:var(--green)}
.badge-red .badge-value{color:var(--red)}

/* ── Control Bar ────────────────────────────────────────────────────── */
.control-bar{display:flex;align-items:center;gap:24px;padding:14px 28px;border-bottom:1px solid var(--border);background:var(--surface-glass);backdrop-filter:blur(12px)}
.controls{display:flex;gap:10px;flex-wrap:wrap}
.btn{font-family:var(--font-body);font-size:13px;font-weight:500;padding:8px 18px;border-radius:var(--radius-xs);border:none;cursor:pointer;transition:all 0.2s;letter-spacing:0.2px}
.btn-primary{background:var(--accent);color:var(--void)}
.btn-primary:hover{background:var(--accent-light);box-shadow:0 0 16px var(--accent-glow)}
.btn-primary:disabled,.btn-secondary:disabled{opacity:0.4;cursor:not-allowed}
.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border-glass)}
.btn-secondary:hover:not(:disabled){border-color:var(--border-glass-hover);background:var(--surface-2)}
.btn-ghost{background:transparent;color:var(--text-dim);border:1px solid var(--border)}
.btn-ghost:hover{color:var(--text);border-color:var(--text-muted)}
.progress-container{flex:1;min-width:200px}
.progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--text-dim);margin-bottom:6px}
.progress-bar{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-dim),var(--accent));border-radius:3px;transition:width 0.6s ease}

/* ── Rec Report Panel ───────────────────────────────────────────────── */
.rec-report{margin:0 20px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);overflow:hidden;max-height:0;opacity:0;transition:max-height 0.5s ease,opacity 0.4s ease,margin 0.4s ease;margin-top:0;margin-bottom:0}
.rec-report.hidden{display:block !important;max-height:0;opacity:0;margin-top:0;margin-bottom:0;border-color:transparent}
.rec-report.visible{max-height:800px;opacity:1;margin-top:20px;margin-bottom:20px}
.rec-header{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;cursor:pointer;user-select:none}
.rec-header h2{font-family:var(--font-head);font-size:16px;font-weight:600}
.rec-toggle{color:var(--text-dim);font-size:14px;transition:transform 0.2s}
.rec-toggle.collapsed{transform:rotate(-90deg)}
.rec-body{padding:0 28px 20px}
.rec-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.rec-side h3{font-family:var(--font-head);font-size:13px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px}
.rec-table{width:100%;border-collapse:collapse;font-size:13px}
.rec-table td{padding:6px 8px}
.rec-table td.amt{text-align:right;font-family:'DM Sans',monospace;white-space:nowrap;font-weight:500}
.rec-section td{font-weight:600;color:var(--text-dim);padding-top:10px;font-size:12px;text-transform:uppercase;letter-spacing:0.3px}
.rec-subtotal td{color:var(--text-dim);font-style:italic;border-bottom:1px solid var(--border)}
.rec-item td{padding-left:20px;color:var(--text-dim);font-size:12px}
.rec-total td{font-weight:700;border-top:2px solid var(--accent);font-size:14px;padding-top:10px}
.rec-variance{text-align:center;padding:14px;margin-top:16px;border-radius:var(--radius-sm);font-family:var(--font-head);font-weight:700;font-size:16px}
.rec-variance.balanced{background:rgba(34,197,94,0.1);color:var(--green);border:1px solid rgba(34,197,94,0.3)}
.rec-variance.unbalanced{background:rgba(239,68,68,0.08);color:var(--red);border:1px solid rgba(239,68,68,0.25);animation:variancePulse 2s ease-in-out infinite;cursor:pointer;transition:background 0.2s}
.rec-variance.unbalanced:hover{background:rgba(239,68,68,0.15);text-decoration:underline;text-underline-offset:3px}
@keyframes variancePulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 20px rgba(239,68,68,0.2)}}

/* ── Welcome Card ──────────────────────────────────────────────────── */
.welcome-card{padding:24px 28px}
.welcome-inner{max-width:640px;margin:0 auto;text-align:center;padding:32px;background:var(--surface);border:1px solid var(--border-glass);border-radius:var(--radius);box-shadow:0 4px 24px rgba(0,212,170,0.06)}
.welcome-inner h2{font-family:var(--font-head);font-size:22px;font-weight:700;margin-bottom:8px}
.welcome-desc{font-size:13px;color:var(--text-dim);margin-bottom:20px;line-height:1.6}
.welcome-steps{display:flex;flex-direction:column;gap:10px;text-align:left;margin-bottom:24px}
.welcome-step{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text-dim)}
.welcome-num{width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--void);font-family:var(--font-head);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ── Progress Tracker ──────────────────────────────────────────────── */
.progress-tracker{display:flex;align-items:center;justify-content:center;padding:12px 28px;gap:0;border-bottom:1px solid var(--border)}
.tracker-step{display:flex;align-items:center;gap:6px;padding:4px 10px;cursor:pointer;border-radius:var(--radius-xs);transition:background 0.15s}
.tracker-step:hover{background:rgba(0,212,170,0.06)}
.tracker-count{font-size:10px;color:var(--text-muted);margin-left:2px}
.tracker-step.active .tracker-count{color:var(--accent)}
.tracker-step.done .tracker-count{color:var(--green)}
.tracker-dot{width:10px;height:10px;border-radius:50%;background:var(--surface-2);border:2px solid var(--border);transition:all 0.3s}
.tracker-label{font-size:11px;color:var(--text-muted);font-family:var(--font-head);font-weight:500;transition:color 0.3s}
.tracker-step.active .tracker-dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px var(--accent-glow)}
.tracker-step.active .tracker-label{color:var(--accent)}
.tracker-step.done .tracker-dot{background:var(--green);border-color:var(--green)}
.tracker-step.done .tracker-label{color:var(--green)}
.tracker-line{width:40px;height:2px;background:var(--border);transition:background 0.3s}
.tracker-line.done{background:var(--green)}
.tracker-export-btn{margin-left:16px;font-size:12px;padding:6px 16px;transition:all 0.3s}
.tracker-export-btn:disabled{opacity:0.3;cursor:not-allowed;background:var(--surface);color:var(--text-muted);border:1px solid var(--border)}
.tracker-export-btn:not(:disabled){animation:exportPulse 2s ease-in-out infinite}
@keyframes exportPulse{0%,100%{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 16px 4px var(--accent-glow)}}

/* ── KPI Cards ─────────────────────────────────────────────────────── */
.kpi-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.kpi-card{text-align:center;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}
.kpi-value{font-family:var(--font-head);font-weight:700;font-size:28px;color:var(--text);margin-bottom:4px}
.kpi-green{color:var(--green)}.kpi-yellow{color:var(--yellow)}.kpi-accent{color:var(--accent)}
.kpi-label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;font-weight:500}
.kpi-sub{font-size:10px;color:var(--text-muted);margin-top:4px}

/* ── Loading Shimmer ───────────────────────────────────────────────── */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.loading-shimmer{position:relative;overflow:hidden}
.loading-shimmer::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(0,212,170,0.04) 50%,transparent 100%);background-size:200% 100%;animation:shimmer 1.5s infinite}

/* ── Void Pair Styles ──────────────────────────────────────────────── */
.void-pair-section{margin-top:12px;padding-top:8px;border-top:1px dashed var(--border)}
.void-pair-header{font-size:11px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px}
.void-pair-item{padding:6px 10px;background:rgba(85,85,95,0.08);border-radius:var(--radius-xs);font-size:11px;color:var(--text-muted);margin-bottom:4px;border-left:3px solid var(--text-muted)}

/* ── Main Grid ──────────────────────────────────────────────────────── */
.main-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:0;min-height:calc(100vh - 320px)}
.panel{border:1px solid var(--border);background:var(--surface-2);margin:0}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.panel-header h3{font-family:var(--font-head);font-size:14px;font-weight:600;letter-spacing:-0.2px}

/* ── Tabs ───────────────────────────────────────────────────────────── */
.tabs{display:flex;gap:4px}
.tab{font-family:var(--font-body);font-size:12px;font-weight:500;padding:6px 14px;border-radius:var(--radius-xs);background:transparent;border:1px solid transparent;color:var(--text-dim);cursor:pointer;transition:all 0.2s}
.tab:hover{color:var(--text)}
.tab.active{background:var(--surface);border-color:var(--border-glass);color:var(--accent)}
.count-label{font-size:12px;color:var(--text-muted)}

/* ── Tables ─────────────────────────────────────────────────────────── */
.table-wrap{overflow:auto;max-height:calc(100vh - 380px)}
.data-table{width:100%;border-collapse:collapse;font-size:11px}
.data-table th{position:sticky;top:0;z-index:2;padding:8px 10px;text-align:left;font-family:var(--font-head);font-weight:500;font-size:9px;text-transform:uppercase;letter-spacing:0.8px;color:var(--text-dim);background:var(--surface-2);border-bottom:1px solid var(--border)}
.data-table th.num,.data-table td.num{text-align:right}
.data-table td{padding:7px 10px;border-bottom:1px solid rgba(42,42,48,0.5)}
.data-table tbody tr{cursor:pointer;transition:background 0.15s}
.data-table tbody tr:hover{background:rgba(0,212,170,0.04)}
.data-table tbody tr:nth-child(even){background:rgba(20,20,22,0.4)}
.data-table tbody tr:nth-child(even):hover{background:rgba(0,212,170,0.04)}

/* Match hint on table rows */
.match-hint{display:inline-block;font-size:9px;color:var(--accent-dim);margin-left:4px;cursor:help;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.match-hint:hover{color:var(--accent-light)}

/* Row states */
.row-approved{background:var(--green-bg) !important}
.row-approved td:first-child{box-shadow:inset 3px 0 0 var(--green)}
.row-auto{background:rgba(34,197,94,0.06) !important}
.row-auto td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.row-pending{background:var(--yellow-bg) !important}
.row-pending td:first-child{box-shadow:inset 3px 0 0 var(--yellow)}
.row-exception{background:var(--red-bg) !important}
.row-exception td:first-child{box-shadow:inset 3px 0 0 var(--red)}

@keyframes matchFlash{0%{box-shadow:inset 0 0 0 1px var(--green)}50%{box-shadow:inset 0 0 12px rgba(34,197,94,0.3)}100%{box-shadow:none}}
.flash-match{animation:matchFlash 0.8s ease-out}

/* Status pills */
.status-pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:500;letter-spacing:0.3px}
.status-auto{background:rgba(0,212,170,0.12);color:var(--accent)}
.status-approved{background:var(--green-bg);color:var(--green)}
.status-pending{background:var(--yellow-bg);color:var(--yellow)}
.status-exception{background:var(--red-bg);color:var(--red)}
.status-unmatched{background:rgba(85,85,95,0.2);color:var(--text-muted)}

/* Transaction type badge */
.txn-badge{display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;color:#fff}

.hidden{display:none !important}

/* ── Right Panel (Tabbed: Review + Activity) ──────────────────────── */
.right-panel{display:flex;flex-direction:column}
.right-tabs-header{flex-shrink:0}
.right-tabs{display:flex;gap:4px}
.right-tab-content{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.right-tab-pane{display:none;flex:1;overflow-y:auto}
.right-tab-pane.active{display:block}
.feed-scroll{flex:1;overflow-y:auto;padding:12px 16px;max-height:calc(100vh - 300px)}
.feed-empty{color:var(--text-muted);font-size:13px;padding:20px 0;text-align:center}
.feed-entry{padding:10px 12px;margin-bottom:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;line-height:1.6}
.feed-tag{display:inline-block;padding:1px 7px;border-radius:4px;font-family:var(--font-head);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:0.5px;margin-right:6px}
.feed-tag-R1,.feed-tag-R2,.feed-tag-R3{background:rgba(34,197,94,0.15);color:var(--green)}
.feed-tag-R4{background:rgba(59,130,246,0.15);color:var(--blue)}
.feed-tag-R5{background:rgba(234,179,8,0.15);color:var(--yellow)}
.feed-tag-R6{background:rgba(168,85,247,0.15);color:var(--purple)}
.feed-tag-MANUAL{background:rgba(249,115,22,0.15);color:var(--orange)}
.feed-tag-system{background:rgba(0,212,170,0.15);color:var(--accent)}
.feed-tag-classify{background:rgba(249,115,22,0.15);color:var(--orange)}
.feed-detail{color:var(--text-dim);margin-top:4px}
.feed-confidence{display:inline-block;margin-top:4px;font-family:var(--font-head);font-weight:600;font-size:11px}
.feed-tier{display:inline-block;margin-left:8px;font-size:10px;padding:1px 6px;border-radius:4px}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);transition:all 0.3s}
.status-dot.active{background:var(--accent);box-shadow:0 0 8px var(--accent-glow-strong)}

/* ── Review Panel ───────────────────────────────────────────────────── */
.review-empty{color:var(--text-muted);font-size:13px;padding:24px 16px;text-align:center}
.btn-close{background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;padding:0 4px;line-height:1}
.btn-close:hover{color:var(--text)}
.review-match{padding:16px}
.review-match h4{font-family:var(--font-head);font-size:13px;font-weight:600;margin-bottom:10px}
.review-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px;padding:10px;background:var(--surface);border-radius:var(--radius-xs);font-size:12px}
.review-row .label{color:var(--text-dim);min-width:40px;font-weight:500}
.review-row .value{color:var(--text)}
.confidence-bar{height:6px;border-radius:3px;background:var(--surface);margin:8px 0;overflow:hidden}
.confidence-fill{height:100%;border-radius:3px;transition:width 0.4s}
.conf-high{background:var(--green)}.conf-med{background:var(--yellow)}.conf-low{background:var(--red)}
.review-reasoning{font-size:12px;color:var(--text-dim);font-style:italic;margin:10px 0}
.review-actions{display:flex;gap:8px;margin-top:12px}
.btn-approve{background:var(--green-bg);color:var(--green);border:1px solid rgba(34,197,94,0.3);padding:6px 16px;border-radius:var(--radius-xs);font-size:12px;font-weight:500;cursor:pointer}
.btn-approve:hover{background:rgba(34,197,94,0.2)}
.btn-reject{background:var(--red-bg);color:var(--red);border:1px solid rgba(239,68,68,0.3);padding:6px 16px;border-radius:var(--radius-xs);font-size:12px;font-weight:500;cursor:pointer}
.btn-reject:hover{background:rgba(239,68,68,0.2)}

/* ── Dashboard ──────────────────────────────────────────────────────── */
.dashboard{padding:24px 28px;border-top:2px solid var(--border)}
.section-title{font-family:var(--font-head);font-size:18px;font-weight:600;margin-bottom:16px}
.dashboard-grid{display:grid;grid-template-columns:280px 1fr 1fr;gap:16px}
.donut-panel,.recon-items-panel,.audit-panel{padding:16px;border-radius:var(--radius)}
.donut-panel h3,.recon-items-panel h3,.audit-panel h3{font-family:var(--font-head);font-size:13px;font-weight:600;margin-bottom:12px}
.donut-container{position:relative;width:140px;height:140px;margin:0 auto 12px}
.donut{width:140px;height:140px;border-radius:50%;transition:background 0.6s}
.donut-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:28px;color:var(--text)}
.donut-legend{display:flex;flex-direction:column;gap:6px;font-size:12px}
.legend-item{display:flex;align-items:center;gap:8px}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.count-badge{font-size:11px;padding:2px 8px;border-radius:10px;background:rgba(0,212,170,0.12);color:var(--accent);font-weight:600}

/* Reconciling items */
.recon-items-list{max-height:260px;overflow-y:auto}
.recon-category{margin-bottom:12px}
.recon-category-header{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-dim);margin-bottom:6px;display:flex;justify-content:space-between}
.recon-item{padding:6px 10px;margin-bottom:4px;background:var(--surface);border-radius:var(--radius-xs);font-size:12px;display:flex;justify-content:space-between}
.recon-item .amt{font-weight:600;white-space:nowrap}

/* Audit log */
.audit-list{max-height:260px;overflow-y:auto}
.audit-entry{padding:8px 10px;margin-bottom:4px;border-left:2px solid var(--border-glass);font-size:11px;line-height:1.5}
.audit-entry .audit-time{color:var(--text-muted);font-size:10px}
.audit-entry .audit-action{color:var(--accent);font-weight:500;text-transform:uppercase;font-size:10px;letter-spacing:0.3px}

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer{padding:16px 28px;text-align:center;font-size:12px;color:var(--text-muted);border-top:1px solid var(--border)}
.footer strong{color:var(--text-dim)}

/* ── Match Explorer ─────────────────────────────────────────────────── */
.match-explorer{display:flex;flex-direction:column;height:100%;overflow:hidden}
.match-explorer-filters{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}
.filter-btn{font-family:var(--font-body);font-size:11px;padding:3px 10px;border-radius:var(--radius-xs);background:transparent;border:1px solid var(--border);color:var(--text-dim);cursor:pointer;transition:all 0.2s}
.filter-btn:hover{color:var(--text);border-color:var(--border-glass-hover)}
.filter-btn.active{background:var(--surface);border-color:var(--border-glass);color:var(--accent)}
.match-explorer-scroll{flex:1;overflow-y:auto;padding:8px 10px}

.match-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xs);margin-bottom:6px;overflow:hidden;transition:all 0.2s;cursor:pointer}
.match-card:hover{border-color:var(--border-glass-hover)}
.match-card.selected{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.match-card-header{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;border-bottom:1px solid rgba(42,42,48,0.5);background:rgba(20,20,22,0.3)}
.match-card-rule{font-family:var(--font-head);font-size:10px;font-weight:600;display:flex;align-items:center;gap:4px}
.match-card-confidence{display:flex;align-items:center;gap:6px}
.match-card-conf-bar{width:40px;height:3px;border-radius:2px;background:var(--surface-2);overflow:hidden}
.match-card-conf-fill{height:100%;border-radius:2px}
.match-card-body{padding:6px 10px}
.match-card-pair{display:grid;grid-template-columns:1fr 20px 1fr;gap:4px;align-items:start}
.match-card-side{padding:6px 8px;background:var(--surface-2);border-radius:var(--radius-xs);min-height:40px}
.match-card-side .side-label{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);margin-bottom:2px}
.match-card-side .side-desc{color:var(--text);font-size:10px;line-height:1.3;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.match-card-side .side-meta{color:var(--text-dim);font-size:9px}
.match-card-side .side-amt{font-weight:600;color:var(--text);font-size:11px}
.match-card-arrow{display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:14px;padding-top:12px}
.match-card-plain{font-size:10px;color:var(--text-dim);font-style:italic;padding:3px 10px 6px;line-height:1.3}
.match-card-actions{display:flex;gap:6px;padding:6px 10px;border-top:1px solid rgba(42,42,48,0.5)}

.needs-attention-header{font-family:var(--font-head);font-size:12px;font-weight:600;color:var(--orange);text-transform:uppercase;letter-spacing:0.5px;padding:14px 0 8px;border-top:1px solid var(--border);margin-top:8px}
.unmatched-item{padding:8px 12px;margin-bottom:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xs);font-size:11px;display:flex;justify-content:space-between;align-items:center;border-left:3px solid var(--text-muted)}
.unmatched-item .amt{font-weight:600;white-space:nowrap;margin-left:12px}

/* ── All Transactions Table (legacy, kept for reference) ─────────────── */
.sortable{cursor:pointer;user-select:none;position:relative}
.sortable:hover{color:var(--accent)}
.sortable::after{content:'';display:inline-block;margin-left:4px;opacity:0.4}
.sortable.sort-asc::after{content:'▲';opacity:1;color:var(--accent)}
.sortable.sort-desc::after{content:'▼';opacity:1;color:var(--accent)}
.source-badge{display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px}
.source-bank{background:rgba(59,130,246,0.15);color:var(--blue)}
.source-gl{background:rgba(168,85,247,0.15);color:var(--purple)}
.match-link{color:var(--accent);cursor:pointer;font-size:11px;text-decoration:underline;text-underline-offset:2px}
.match-link:hover{color:var(--accent-light)}

/* ── Match Candidate Panel ─────────────────────────────────────────── */
.candidate-panel{display:flex;flex-direction:column;height:100%}
.candidate-header{padding:16px;border-bottom:1px solid var(--border)}
.candidate-source{font-size:13px;line-height:1.5}
.candidate-list{flex:1;overflow-y:auto;padding:8px}
.candidate-item{padding:8px 10px;margin-bottom:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xs);cursor:pointer;transition:all 0.15s}
.candidate-item:hover{border-color:var(--border-glass-hover);background:rgba(0,212,170,0.03)}
.candidate-item.selected{border-color:var(--accent);background:rgba(0,212,170,0.08);box-shadow:inset 0 0 0 1px var(--accent)}
.candidate-item.exact-match{border-left:3px solid var(--green)}
.candidate-item.close-match{border-left:3px solid var(--yellow)}
.candidate-item-main{display:flex;align-items:center;gap:8px;font-size:12px}
.candidate-id{font-weight:600;color:var(--text-dim);min-width:50px}
.candidate-desc{flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.candidate-amt{font-weight:600;white-space:nowrap}
.candidate-item-meta{font-size:10px;color:var(--text-muted);margin-top:3px;display:flex;align-items:center;gap:6px}
.candidate-score{background:rgba(0,212,170,0.12);color:var(--accent);padding:1px 6px;border-radius:4px;font-weight:600;font-size:9px}
.candidate-actions{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}

/* ── Manual Match Mode ─────────────────────────────────────────────── */
.manual-match-btn{background:rgba(249,115,22,0.1);color:var(--orange);border:1px solid rgba(249,115,22,0.25)}
.manual-match-btn.active{background:var(--orange);color:var(--void);border-color:var(--orange);box-shadow:0 0 12px rgba(249,115,22,0.3)}
.unmatched-item.selectable{cursor:pointer;transition:all 0.15s}
.unmatched-item.selectable:hover{border-color:var(--accent);background:rgba(0,212,170,0.04)}
.unmatched-item.selected{border-color:var(--accent);background:rgba(0,212,170,0.08);box-shadow:inset 0 0 0 1px var(--accent)}
.manual-match-bar{position:fixed;bottom:0;left:0;right:0;z-index:1500;display:flex;align-items:center;justify-content:space-between;padding:12px 28px;background:var(--surface);border-top:2px solid var(--orange);box-shadow:0 -4px 20px rgba(0,0,0,0.4)}
.manual-match-label{font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--orange)}
.manual-match-info{display:flex;flex-direction:column;gap:2px}
#manualMatchSummary{font-size:12px;color:var(--text-dim)}
.manual-match-actions{display:flex;gap:8px}

/* ── Export Dropdown ────────────────────────────────────────────────── */
.export-dropdown{position:relative;display:inline-block}
.export-menu{position:absolute;top:100%;left:0;margin-top:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xs);box-shadow:0 8px 24px rgba(0,0,0,0.4);z-index:20;min-width:160px;overflow:hidden}
.export-item{display:block;width:100%;padding:8px 14px;background:none;border:none;color:var(--text);font-family:var(--font-body);font-size:12px;text-align:left;cursor:pointer;transition:background 0.15s}
.export-item:hover{background:rgba(0,212,170,0.08);color:var(--accent)}

/* ── Resolution Modal ──────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);z-index:2000;display:flex;align-items:center;justify-content:center}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:520px;max-width:90vw;max-height:80vh;overflow-y:auto;box-shadow:0 16px 48px rgba(0,0,0,0.5)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-header h3{font-family:var(--font-head);font-size:16px;font-weight:600}
.modal-body{padding:20px}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;padding:16px 20px;border-top:1px solid var(--border)}

.resolve-info{font-size:13px;line-height:1.6;margin-bottom:16px;color:var(--text-dim)}
.resolve-info strong{color:var(--text)}
.resolve-amounts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.resolve-amt-box{padding:10px;background:var(--surface-2);border-radius:var(--radius-xs);text-align:center}
.resolve-amt-box .label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px}
.resolve-amt-box .value{font-size:18px;font-weight:700;font-family:var(--font-head)}
.resolve-amt-box .value.green{color:var(--green)}
.resolve-amt-box .value.red{color:var(--red)}

.resolve-field{margin-bottom:12px}
.resolve-field label{display:block;font-size:11px;font-weight:500;color:var(--text-dim);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.3px}
.resolve-field select,.resolve-field input,.resolve-field textarea{width:100%;padding:8px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text);font-family:var(--font-body);font-size:13px}
.resolve-field select:focus,.resolve-field input:focus,.resolve-field textarea:focus{outline:none;border-color:var(--accent)}

.je-preview{margin-top:16px;padding:12px;background:var(--void);border:1px solid var(--border);border-radius:var(--radius-xs);font-size:12px}
.je-preview-title{font-weight:600;color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px}
.je-preview-row{display:flex;justify-content:space-between;padding:4px 0;color:var(--text-dim)}
.je-preview-row .acct{color:var(--text)}

/* ── Resolve Buttons on Items ──────────────────────────────────────── */
.btn-resolve{background:rgba(0,212,170,0.1);color:var(--accent);border:1px solid rgba(0,212,170,0.25);padding:3px 10px;border-radius:var(--radius-xs);font-size:10px;font-weight:500;cursor:pointer;transition:all 0.2s}
.btn-resolve:hover{background:rgba(0,212,170,0.2);border-color:rgba(0,212,170,0.4)}
.btn-acknowledge{background:rgba(59,130,246,0.1);color:var(--blue);border:1px solid rgba(59,130,246,0.25);padding:3px 10px;border-radius:var(--radius-xs);font-size:10px;font-weight:500;cursor:pointer;transition:all 0.2s}
.btn-acknowledge:hover{background:rgba(59,130,246,0.2)}

/* Item differentiation in recon list */
.recon-item-timing{border-left:3px solid var(--blue)}
.recon-item-error{border-left:3px solid var(--red)}
.recon-item-resolved{border-left:3px solid var(--green);opacity:0.7}
.recon-item-resolved::after{content:' \u2713';color:var(--green);font-weight:700}

/* ── JE Report ─────────────────────────────────────────────────────── */
.je-report{margin:0 20px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);overflow:hidden;max-height:0;opacity:0;transition:max-height 0.5s ease,opacity 0.4s ease,margin 0.4s ease;margin-top:0;margin-bottom:0}
.je-report.hidden{display:block !important;max-height:0;opacity:0;margin-top:0;margin-bottom:0;border-color:transparent}
.je-report.visible{max-height:600px;opacity:1;margin-top:12px;margin-bottom:12px}
.je-header{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;cursor:pointer;user-select:none}
.je-header h2{font-family:var(--font-head);font-size:16px;font-weight:600}
.je-body{padding:0 28px 20px}
.je-table{width:100%;border-collapse:collapse;font-size:12px}
.je-table th{padding:8px;text-align:left;font-family:var(--font-head);font-weight:500;font-size:10px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-dim);border-bottom:1px solid var(--border)}
.je-table td{padding:7px 8px;border-bottom:1px solid rgba(42,42,48,0.5)}
.je-table td.num{text-align:right;font-weight:600}
.je-table tfoot td{font-weight:700;border-top:2px solid var(--accent);font-size:13px}
.je-summary{margin-top:12px;padding:12px;background:var(--void);border-radius:var(--radius-xs);font-size:12px;color:var(--text-dim);line-height:1.6}
.je-summary strong{color:var(--text)}
.btn-undo{background:none;border:none;color:var(--text-muted);font-size:11px;cursor:pointer;text-decoration:underline;padding:2px}
.btn-undo:hover{color:var(--red)}

/* ── Chat Widget ────────────────────────────────────────────────────── */
.chat-widget{position:fixed;bottom:24px;right:24px;z-index:1000}
.chat-toggle{
  width:56px;height:56px;border-radius:50%;border:none;
  background:var(--accent);color:var(--void);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(0,212,170,0.35);
  transition:all 0.3s;position:relative;
}
.chat-toggle:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(0,212,170,0.5)}
.chat-toggle.open .chat-icon-open{display:none}
.chat-toggle.open .chat-icon-close{display:block !important}

.chat-unread{
  position:absolute;top:-4px;right:-4px;
  background:var(--red);color:#fff;font-size:10px;font-weight:700;
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

.chat-window{
  position:absolute;bottom:calc(100% + 12px);right:0;
  width:420px;max-height:540px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,0.5);
  display:flex;flex-direction:column;
  transition:all 0.25s ease;
  transform-origin:bottom right;
}
.chat-window.hidden{opacity:0;pointer-events:none;transform:scale(0.95) translateY(8px)}

.chat-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--border);
  background:var(--surface-2);border-radius:var(--radius) var(--radius) 0 0;
}
.chat-header-info{display:flex;align-items:center;gap:10px}
.chat-avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--accent);color:var(--void);
  display:flex;align-items:center;justify-content:center;
}
.chat-title{font-family:var(--font-head);font-weight:600;font-size:14px}
.chat-status{font-size:11px;color:var(--text-dim)}
.chat-status.active{color:var(--accent)}
.chat-close{background:none;border:none;color:var(--text-dim);font-size:22px;cursor:pointer;padding:0 4px;line-height:1}
.chat-close:hover{color:var(--text)}

.chat-messages{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:12px;
  max-height:360px;min-height:200px;
}

.chat-msg{display:flex;gap:8px;align-items:flex-start}
.chat-msg-ai{flex-direction:row}
.chat-msg-user{flex-direction:row-reverse}

.chat-msg-avatar{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;
}
.chat-msg-ai .chat-msg-avatar{background:var(--accent);color:var(--void)}
.chat-msg-user .chat-msg-avatar{background:var(--blue);color:#fff}

.chat-msg-bubble{
  max-width:85%;padding:10px 14px;border-radius:12px;
  font-size:13px;line-height:1.5;
}
.chat-msg-ai .chat-msg-bubble{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}
.chat-msg-user .chat-msg-bubble{background:var(--accent);color:var(--void)}

.chat-msg-loading .chat-msg-bubble{padding:14px 18px}
@keyframes chatDot{0%,100%{opacity:0.3}50%{opacity:1}}
.chat-dots{display:flex;gap:4px}
.chat-dots span{width:6px;height:6px;border-radius:50%;background:var(--text-dim)}
.chat-dots span:nth-child(1){animation:chatDot 1s 0s infinite}
.chat-dots span:nth-child(2){animation:chatDot 1s 0.15s infinite}
.chat-dots span:nth-child(3){animation:chatDot 1s 0.3s infinite}

.chat-input-area{padding:12px;border-top:1px solid var(--border);background:var(--surface-2);border-radius:0 0 var(--radius) var(--radius)}
.chat-input-area form{display:flex;gap:8px;align-items:center}
.chat-input{
  flex:1;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:10px 14px;
  color:var(--text);font-family:var(--font-body);font-size:13px;
  outline:none;transition:border-color 0.2s;
}
.chat-input:focus{border-color:var(--accent)}
.chat-input::placeholder{color:var(--text-muted)}
.chat-send{
  width:36px;height:36px;border-radius:50%;border:none;
  background:var(--accent);color:var(--void);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;flex-shrink:0;
}
.chat-send:hover{background:var(--accent-light)}

@media(max-width:1200px){
  .main-grid{grid-template-columns:1fr}
  .dashboard-grid{grid-template-columns:1fr}
  .rec-columns{grid-template-columns:1fr}
  .header{flex-wrap:wrap;gap:12px}
  .chat-window{width:calc(100vw - 48px);right:-12px}
}

/* ── Tablet ────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .header{flex-direction:column;align-items:flex-start;padding:12px 16px;gap:10px}
  .header-left{flex-direction:column;align-items:flex-start;gap:8px}
  .header-badges{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:8px}
  .badge{min-width:70px;padding:6px 12px}
  .badge-value{font-size:16px}
  .control-bar{flex-wrap:wrap;padding:10px 16px;gap:10px}
  .controls{flex-wrap:wrap;gap:6px;width:100%}
  .progress-container{min-width:100%;order:1}
  .kpi-cards{grid-template-columns:1fr 1fr}
  .dashboard{padding:16px}
  .progress-tracker{flex-wrap:wrap;gap:6px;padding:10px 16px;justify-content:flex-start}
  .tracker-line{width:24px}
  .tracker-export-btn{margin-left:0;margin-top:4px}
  .welcome-inner{padding:24px 20px}
  .rec-body{padding:0 16px 16px}
  .panel-header{padding:10px 12px}
  .feed-scroll{padding:10px 12px}
}

/* ── Phone ─────────────────────────────────────────────────────────── */
@media(max-width:600px){
  .header{padding:10px 12px}
  .header-title h1{font-size:16px}
  .subtitle{display:none}
  .logo-text{font-size:15px}
  .header-badges{gap:6px}
  .badge{min-width:60px;padding:5px 8px}
  .badge-value{font-size:14px}
  .badge-label{font-size:9px}

  .control-bar{padding:8px 12px}
  .controls{flex-direction:column;gap:6px}
  .controls .btn{width:100%;min-height:44px;font-size:14px}
  .controls .export-dropdown{width:100%}
  .controls .export-dropdown .btn{width:100%}

  .progress-tracker{overflow-x:auto;flex-wrap:nowrap;padding:8px 12px;gap:4px;-webkit-overflow-scrolling:touch}
  .tracker-label{font-size:9px}
  .tracker-line{width:16px}
  .tracker-step{padding:4px 6px}
  .tracker-export-btn{font-size:10px;padding:5px 10px;white-space:nowrap}

  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-height:50vh}
  .data-table{min-width:580px}
  /* Hide low-priority columns: Check # (6th) and Ref (7th) on bank table */
  #bankTable th:nth-child(6),#bankTable td:nth-child(6),
  #bankTable th:nth-child(7),#bankTable td:nth-child(7){display:none}
  /* Hide Eff Date (3rd) on GL table */
  #glTable th:nth-child(3),#glTable td:nth-child(3){display:none}

  .kpi-cards{grid-template-columns:1fr}
  .kpi-value{font-size:22px}
  .dashboard{padding:12px}
  .section-title{font-size:15px}

  .welcome-card{padding:12px}
  .welcome-inner{padding:20px 14px}
  .welcome-inner h2{font-size:18px}
  .welcome-desc{font-size:12px}

  .match-card-pair{grid-template-columns:1fr;gap:2px}
  .match-card-arrow{transform:rotate(90deg);padding:0}
  .match-explorer-filters{gap:4px;padding:6px 8px}
  .filter-btn{font-size:10px;padding:3px 7px}

  .review-match{padding:12px}
  .review-row{flex-direction:column;gap:4px}
  .review-actions{flex-wrap:wrap}

  .rec-body{padding:0 10px 12px}
  .rec-header{padding:10px 12px}

  .modal{width:100vw;max-width:100vw;height:100vh;max-height:100vh;border-radius:0}
  .resolve-amounts{grid-template-columns:1fr}

  .manual-match-bar{flex-wrap:wrap;padding:10px 12px;gap:8px}
  .manual-match-label{font-size:12px}
  .manual-match-actions{width:100%}
  .manual-match-actions .btn{flex:1}

  .chat-toggle{width:48px;height:48px}
  .chat-widget.chat-open{position:fixed;inset:0;bottom:0;right:0;z-index:1001}
  .chat-widget.chat-open .chat-toggle{display:none}
  .chat-window{position:fixed;inset:0;width:100%;height:100%;max-height:100%;border-radius:0;bottom:0;right:0}
  .chat-messages{max-height:none;flex:1}
  .chat-header{border-radius:0}
  .chat-input-area{border-radius:0}
  body.chat-open-mobile{overflow:hidden;position:fixed;width:100%}

  .footer{padding:10px 12px;font-size:11px}

  .donut-container{width:110px;height:110px}
  .donut{width:110px;height:110px}
  .donut-center{font-size:22px}
}