*{box-sizing:border-box;margin:0;padding:0}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --color-text-primary:#111;
  --color-text-secondary:#555;
  --color-text-tertiary:#999;
  --color-text-success:#1a7f4b;
  --color-text-warning:#92580a;
  --color-text-danger:#b91c1c;
  --color-text-info:#1d4ed8;

  --color-background-primary:#fff;
  --color-background-secondary:#f4f4f5;
  --color-background-success:#dcfce7;
  --color-background-warning:#fef9c3;
  --color-background-danger:#fee2e2;
  --color-background-info:#dbeafe;

  --color-border-tertiary:#e4e4e7;
  --color-border-secondary:#d1d5db;
  --color-border-success:#86efac;
  --color-border-warning:#fde047;
  --color-border-danger:#fca5a5;
  --color-border-info:#93c5fd;

  --border-radius-md:6px;
  --border-radius-lg:10px;

  --space-xs:4px;
  --space-sm:8px;
  --space-md:12px;
  --space-lg:16px;
  --space-xl:24px;

  --font-size-h1:17px;
  --font-size-h2:13px;
  --font-size-body:13px;
  --font-size-meta:12px;
  --font-size-label:11px;
  --font-size-tiny:10px;

  --font-weight-regular:400;
  --font-weight-medium:500;
}

html,body{
  background:#f9f9f9;
  font-family:var(--font-sans);
  color:var(--color-text-primary);
  font-size:var(--font-size-body);
  line-height:1.5;
}
a{color:var(--color-text-info);text-decoration:none}
a:hover{text-decoration:underline}

/* ============================================================
   APP LAYOUT
   ============================================================ */
.app{max-width:1400px;margin:0 auto;padding:1.25rem 1.5rem;font-family:var(--font-sans)}

.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;gap:12px;flex-wrap:wrap}
.topbar h1{font-size:var(--font-size-h1);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}
.topbar p{font-size:var(--font-size-meta);color:var(--color-text-secondary);margin-top:2px}
.topbar nav{display:flex;gap:14px;font-size:var(--font-size-meta)}
.topbar nav a{color:var(--color-text-secondary)}
.topbar nav a.active{color:var(--color-text-primary);font-weight:var(--font-weight-medium)}

.step-pills{display:flex;gap:6px;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap}
.pill{font-size:var(--font-size-label);padding:4px 12px;border-radius:999px;border:0.5px solid var(--color-border-tertiary);color:var(--color-text-secondary);background:var(--color-background-secondary)}
.pill.active{background:var(--color-background-info);color:var(--color-text-info);border-color:var(--color-border-info)}
.pill.done{background:var(--color-background-success);color:var(--color-text-success);border-color:var(--color-border-success)}
.sep{font-size:var(--font-size-tiny);color:var(--color-text-tertiary)}

.info-bar{background:var(--color-background-info);border:0.5px solid var(--color-border-info);border-radius:var(--border-radius-md);padding:0.65rem 1rem;margin-bottom:1rem;font-size:var(--font-size-meta);color:var(--color-text-info);display:flex;align-items:flex-start;gap:8px}
.notice-bar{background:var(--color-background-warning);border:0.5px solid var(--color-border-warning);border-radius:var(--border-radius-md);padding:0.65rem 1rem;margin-bottom:1rem;font-size:var(--font-size-meta);color:var(--color-text-warning);display:flex;align-items:flex-start;gap:8px}
.error-bar{background:var(--color-background-danger);border:0.5px solid var(--color-border-danger);border-radius:var(--border-radius-md);padding:0.65rem 1rem;margin-bottom:1rem;font-size:var(--font-size-meta);color:var(--color-text-danger);display:flex;align-items:flex-start;gap:8px}

.config-card{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);padding:1rem 1.25rem;margin-bottom:1rem}
.config-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.config-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.field label{font-size:var(--font-size-label);color:var(--color-text-secondary);display:block;margin-bottom:4px;font-weight:var(--font-weight-medium);letter-spacing:0.03em;text-transform:uppercase}
.field select,.field input{width:100%;padding:5px 8px;border:0.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);font-size:var(--font-size-body);background:var(--color-background-primary);color:var(--color-text-primary);font-family:var(--font-sans)}
.field select:focus,.field input:focus{outline:none;border-color:var(--color-border-info)}
.run-row{display:flex;justify-content:space-between;align-items:center;margin-top:0.85rem;gap:10px;flex-wrap:wrap}

button.primary{padding:6px 14px;border-radius:var(--border-radius-md);border:0.5px solid var(--color-border-secondary);background:var(--color-background-primary);color:var(--color-text-primary);cursor:pointer;font-size:var(--font-size-body);font-weight:var(--font-weight-medium)}
button.primary:hover{background:var(--color-background-secondary)}
button.primary:disabled{opacity:0.5;cursor:default}

.stats-row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:1rem}
.stat{background:var(--color-background-secondary);border-radius:var(--border-radius-md);padding:0.6rem 0.75rem}
.stat-lbl{font-size:var(--font-size-label);color:var(--color-text-secondary)}
.stat-val{font-size:18px;font-weight:var(--font-weight-medium);color:var(--color-text-primary);margin-top:1px}
.stat-val.g{color:var(--color-text-success)}
.stat-val.a{color:var(--color-text-warning)}
.stat-val.r{color:var(--color-text-danger)}
.stat-val.b{color:var(--color-text-info)}

.panel{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);overflow:hidden;margin-bottom:1rem}
.ph{padding:0.65rem 1rem;border-bottom:0.5px solid var(--color-border-tertiary);display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.ph-left{display:flex;align-items:center;gap:8px}
.ptitle{font-size:var(--font-size-body);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}
.badge{font-size:var(--font-size-label);padding:2px 9px;border-radius:999px;font-weight:var(--font-weight-medium)}
.bs{background:var(--color-background-success);color:var(--color-text-success)}
.bd{background:var(--color-background-danger);color:var(--color-text-danger)}
.bn{background:var(--color-background-secondary);color:var(--color-text-secondary)}
.ba{background:var(--color-background-warning);color:var(--color-text-warning)}

.filter-tabs{display:flex;gap:0}
.ftab{font-size:var(--font-size-label);padding:3px 10px;border:0.5px solid var(--color-border-secondary);background:transparent;color:var(--color-text-secondary);cursor:pointer}
.ftab:first-child{border-radius:var(--border-radius-md) 0 0 var(--border-radius-md)}
.ftab:last-child{border-radius:0 var(--border-radius-md) var(--border-radius-md) 0}
.ftab.on{background:var(--color-background-secondary);color:var(--color-text-primary);font-weight:var(--font-weight-medium)}

.match-item{border-bottom:0.5px solid var(--color-border-tertiary)}
.match-item:last-child{border-bottom:none}
.match-header{padding:0.6rem 1rem;display:grid;grid-template-columns:auto 1fr auto auto auto;gap:10px;align-items:center;cursor:pointer}
.match-header:hover{background:var(--color-background-secondary)}
.conf-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.conf-dot.high{background:var(--color-text-success)}
.conf-dot.medium{background:var(--color-text-warning)}
.conf-dot.low{background:var(--color-text-danger)}
.match-summary{font-size:var(--font-size-body);color:var(--color-text-primary);font-weight:var(--font-weight-medium)}
.match-meta{font-size:var(--font-size-label);color:var(--color-text-secondary);margin-top:1px}
.match-score{font-size:var(--font-size-meta);font-weight:var(--font-weight-medium);padding:2px 8px;border-radius:999px}
.match-score.high{background:var(--color-background-success);color:var(--color-text-success)}
.match-score.medium{background:var(--color-background-warning);color:var(--color-text-warning)}
.match-score.low{background:var(--color-background-danger);color:var(--color-text-danger)}

.amount-pill{font-size:var(--font-size-label);padding:2px 8px;border-radius:999px;background:var(--color-background-secondary);color:var(--color-text-primary);font-weight:var(--font-weight-medium);font-family:var(--font-sans);white-space:nowrap}
.amount-pill.pos{background:var(--color-background-success);color:var(--color-text-success)}
.amount-pill.neg{background:var(--color-background-danger);color:var(--color-text-danger)}

.action-btns{display:flex;gap:4px}
.abtn{font-size:var(--font-size-label);padding:3px 10px;border-radius:var(--border-radius-md);border:0.5px solid var(--color-border-secondary);background:transparent;color:var(--color-text-primary);cursor:pointer;white-space:nowrap}
.abtn:hover{background:var(--color-background-secondary)}
.abtn.approve{border-color:var(--color-border-success);color:var(--color-text-success)}
.abtn.approve:hover{background:var(--color-background-success)}
.abtn.reject{border-color:var(--color-border-danger);color:var(--color-text-danger)}
.abtn.reject:hover{background:var(--color-background-danger)}
.abtn.approved-state{background:var(--color-background-success);color:var(--color-text-success);border-color:var(--color-border-success);cursor:default}
.abtn.rejected-state{background:var(--color-background-danger);color:var(--color-text-danger);border-color:var(--color-border-danger);cursor:default}

.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0.75rem 1rem}
.preview-col{display:flex;flex-direction:column;gap:8px;min-width:0;overflow-x:auto}
.preview-col-h{display:flex;align-items:center;gap:8px;padding-bottom:6px;border-bottom:0.5px solid var(--color-border-tertiary);margin-bottom:4px;position:sticky;top:0;background:var(--color-background-primary);z-index:1}
.match-detail{padding:0.75rem 1rem 0.75rem 2rem;background:var(--color-background-secondary);border-top:0.5px solid var(--color-border-tertiary)}
.detail-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:start}
.tx-card{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);padding:10px 12px}
.tx-card.bank{border-left:3px solid var(--color-text-info)}
.tx-card.ns{border-left:3px solid #7e22ce}
.tx-type{font-size:var(--font-size-tiny);font-weight:var(--font-weight-medium);letter-spacing:0.04em;text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:4px}
.tx-entity{font-size:var(--font-size-body);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}
.tx-amount{font-size:16px;font-weight:var(--font-weight-medium);color:var(--color-text-primary);margin-top:4px}
.tx-row{font-size:var(--font-size-label);color:var(--color-text-secondary);margin-top:2px}
.arrow-mid{display:flex;align-items:center;justify-content:center;padding-top:28px;font-size:18px;color:var(--color-text-tertiary)}
.ai-reason{margin-top:8px;font-size:var(--font-size-meta);color:var(--color-text-secondary);padding:6px 10px;border-left:2px solid var(--color-border-info);background:var(--color-background-info);border-radius:0 var(--border-radius-md) var(--border-radius-md) 0}

.unmatched-item{padding:0.55rem 1rem;border-bottom:0.5px solid var(--color-border-tertiary);display:grid;grid-template-columns:auto 1fr auto auto auto;gap:10px;align-items:center;font-size:var(--font-size-meta)}
.unmatched-item:last-child{border-bottom:none}

.empty{padding:2.5rem 1rem;text-align:center;color:var(--color-text-secondary);font-size:14px}

/* Loading state ----------------------------------------------- */
.spinner{
  display:inline-block;
  width:14px;
  height:14px;
  border:2px solid var(--color-border-tertiary);
  border-top-color:var(--color-text-info);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
  vertical-align:middle;
}
.spinner.lg{width:32px;height:32px;border-width:3px}
@keyframes spin{to{transform:rotate(360deg)}}

.loading-overlay{
  position:fixed;
  inset:0;
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(2px);
  z-index:50;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.loading-overlay .spinner{display:block}
.loading-overlay .label{font-size:var(--font-size-meta);color:var(--color-text-secondary)}
.loading-overlay .sub{font-size:var(--font-size-label);color:var(--color-text-tertiary);font-family:var(--font-mono)}

.inline-loading{display:inline-flex;align-items:center;gap:8px;color:var(--color-text-secondary);font-size:var(--font-size-meta)}

/* ============================================================
   AUTH PAGE — clean, minimal, professional
   ============================================================ */
.auth-page{
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:#fafafa;
  color:#111;
  font-family:var(--font-sans);
}

.auth-top{
  padding:1.5rem 2rem;
  display:flex;
  align-items:center;
}
.auth-wordmark{
  font-size:15px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:#111;
  text-decoration:none;
}
.auth-wordmark:hover{text-decoration:none;color:#111}

.auth-main{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:1rem 1.25rem 3rem;
  gap:1.25rem;
}

.auth-box{
  width:100%;
  max-width:400px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:2rem;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.03),
    0 4px 12px rgba(0,0,0,0.04);
}

.auth-box h1{
  font-size:20px;
  font-weight:600;
  letter-spacing:-0.015em;
  line-height:1.3;
  color:#111;
  margin-bottom:6px;
}
.auth-box .auth-lede{
  font-size:13.5px;
  color:#6b7280;
  line-height:1.55;
  margin-bottom:1.5rem;
}

.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-row{display:flex;flex-direction:column;gap:6px}
.auth-row label{
  font-size:13px;
  font-weight:500;
  color:#374151;
  letter-spacing:-0.005em;
}
.auth-row input{
  width:100%;
  padding:9px 12px;
  font-size:14px;
  color:#111;
  background:#fff;
  border:1px solid #d1d5db;
  border-radius:8px;
  font-family:var(--font-sans);
  transition:border-color 0.12s ease, box-shadow 0.12s ease;
  outline:none;
}
.auth-row input:hover{border-color:#9ca3af}
.auth-row input:focus{
  border-color:#111;
  box-shadow:0 0 0 3px rgba(17,17,17,0.08);
}

.auth-banner{
  padding:9px 12px;
  font-size:13px;
  color:#991b1b;
  background:#fef2f2;
  border:1px solid #fecaca;
  border-radius:8px;
  line-height:1.45;
}

.auth-btn{
  margin-top:6px;
  width:100%;
  padding:10px 14px;
  font-size:14px;
  font-weight:500;
  color:#fff;
  background:#111;
  border:1px solid #111;
  border-radius:8px;
  cursor:pointer;
  letter-spacing:-0.005em;
  transition:background 0.12s ease, border-color 0.12s ease;
}
.auth-btn:hover{background:#000;border-color:#000}
.auth-btn:active{background:#1f2937}
.auth-btn:disabled{opacity:0.5;cursor:default}

.auth-help{
  font-size:13px;
  color:#6b7280;
  text-align:center;
  margin:0;
}
.auth-help a{color:#111;text-decoration:underline;text-underline-offset:2px}
.auth-help a:hover{color:#000}

.auth-footer{
  padding:1.25rem 2rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
  color:#9ca3af;
}

@media (max-width: 480px){
  .auth-top{padding:1rem 1.25rem}
  .auth-box{padding:1.5rem;border-radius:10px}
  .auth-box h1{font-size:18px}
}

/* Sign-in surface for the topbar (when authenticated) */
.user-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--font-size-meta);color:var(--color-text-secondary);
  padding:3px 8px;border-radius:999px;background:var(--color-background-secondary);
}
.user-chip::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--color-text-success);
}
.logout-form{display:inline-block;margin-left:6px}

/* Sign-in surface for the topbar (when authenticated) */
.user-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--font-size-meta);color:var(--color-text-secondary);
  padding:3px 8px;border-radius:999px;background:var(--color-background-secondary);
}
.user-chip::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--color-text-success);
}
.logout-form{display:inline-block;margin-left:6px}

.history-table{width:100%;border-collapse:collapse;font-size:var(--font-size-body)}
.history-table th{text-align:left;font-size:var(--font-size-label);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:0.03em;padding:8px 12px;border-bottom:0.5px solid var(--color-border-tertiary)}
.history-table td{padding:10px 12px;border-bottom:0.5px solid var(--color-border-tertiary);color:var(--color-text-primary)}
.history-table tr:last-child td{border-bottom:none}
.history-table .mono{font-family:var(--font-mono);font-size:var(--font-size-meta);color:var(--color-text-secondary)}

#blazor-error-ui{
  background:var(--color-background-danger);
  color:var(--color-text-danger);
  border-top:0.5px solid var(--color-border-danger);
  bottom:0;left:0;right:0;
  display:none;
  padding:0.6rem 1.25rem;
  position:fixed;
  font-size:var(--font-size-meta);
}
#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:0.75rem;top:0.5rem}