:root {
  --bg: #0f1115;
  --surface: #181b22;
  --surface-2: #20242e;
  --border: #2a2f3a;
  --text: #e7ebf2;
  --muted: #9aa3b2;
  --primary: #4f8cff;
  --primary-press: #3a73e0;
  --danger: #e5484d;
  --ok: #46c08a;
  --warn: #e6a23c;
  --radius: 14px;
  --shadow: 0 8px 28px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Layout */
.container { max-width: 720px; margin: 0 auto; padding: 16px 16px 64px; }
.page-title { font-size: 1.5rem; margin: 12px 4px 16px; }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: rgba(15,17,21,.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand-mark {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--primary), #7b5cff);
  color: #fff; font-weight: 800;
}
.brand-mark.big { width: 56px; height: 56px; font-size: 1.6rem; border-radius: 16px; }
.brand-name { font-size: 1rem; }
.topnav { display: flex; align-items: center; gap: 12px; }
.pill { font-size: .72rem; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.logout { color: var(--muted); text-decoration: none; font-size: .9rem; }
.logout:hover { color: var(--text); }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin: 16px 0;
  box-shadow: var(--shadow);
}
.card-title { font-size: 1.05rem; margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 12px; text-align: center;
}
.stat-value { display: block; font-size: 1.15rem; font-weight: 700; }
.stat-label { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }

/* Forms */
label { display: block; margin-bottom: 4px; }
label > span { display: block; font-size: .82rem; color: var(--muted); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; padding: 11px 12px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 1rem; outline: none;
}
input:focus, select:focus { border-color: var(--primary); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-form .span-2 { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Buttons */
.btn {
  appearance: none; cursor: pointer;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 16px; font-size: .95rem; font-weight: 600;
  transition: transform .05s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-press); }
.btn-block { width: 100%; }
.btn-small { padding: 6px 10px; font-size: .8rem; }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.inline { display: inline; }

/* Auth */
.auth-page { display: grid; place-items: center; min-height: 100vh; }
.auth-card {
  width: 100%; max-width: 380px; margin: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 28px 24px; box-shadow: var(--shadow); text-align: center;
}
.auth-logo { display: grid; place-items: center; margin-bottom: 14px; }
.auth-card h1 { font-size: 1.3rem; margin: 0 0 6px; }
.auth-card form { margin-top: 18px; text-align: left; }
.link-subtle { display: inline-block; margin-top: 16px; color: var(--primary); text-decoration: none; font-size: .9rem; }
.callout { margin-top: 16px; padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; font-size: .82rem; word-break: break-all; text-align: left; }
.callout a { color: var(--primary); }

/* Flash */
.flash-stack { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.flash { padding: 11px 14px; border-radius: 10px; font-size: .9rem; word-break: break-word; }
.flash-info { background: rgba(70,192,138,.12); border: 1px solid var(--ok); }
.flash-error { background: rgba(229,72,77,.12); border: 1px solid var(--danger); }

/* Tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 520px; }
.data-table th, .data-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table th { color: var(--muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.cell-main { font-weight: 600; }
.cell-sub { color: var(--muted); font-size: .78rem; }
.empty { text-align: center; color: var(--muted); padding: 22px 0; }
.row-actions { display: flex; gap: 6px; }
.reset-form { display: flex; gap: 6px; }
.reset-form input { min-width: 120px; }

/* Status + tags */
.status { padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.status-Pending { background: rgba(230,162,60,.18); color: #f0b860; }
.status-Active { background: rgba(79,140,255,.16); color: #7eaaff; }
.status-Expired { background: rgba(229,72,77,.16); color: #ff8a8d; }
.status-Paid_In_Full { background: rgba(70,192,138,.16); color: #6fe0ac; }
.tag { font-size: .68rem; padding: 2px 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.tag-ok { color: var(--ok); border-color: var(--ok); }
.tag-warn { color: var(--warn); border-color: var(--warn); }

/* Filter bar */
.filter-bar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.filter-bar input { flex: 1 1 180px; }
.filter-bar select { flex: 0 0 auto; width: auto; }

/* Quote + collateral */
.quote { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; background: var(--surface-2); border-radius: 12px; }
.quote div { display: flex; flex-direction: column; }
.quote span { font-size: .72rem; color: var(--muted); }
.quote strong { font-size: 1rem; }
.collateral { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 14px; border: 1px dashed var(--warn); border-radius: 12px; }

/* Loan cards (borrower) */
.loan-head { display: flex; align-items: center; justify-content: space-between; }
.loan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.loan-grid div { display: flex; flex-direction: column; }
.loan-grid span { font-size: .72rem; color: var(--muted); }
.payments { margin-top: 14px; }
.payments summary { cursor: pointer; color: var(--primary); font-size: .9rem; }

/* AI widget */
.ai-card { border-color: rgba(79,140,255,.4); }
.ai-log { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; margin: 12px 0; }
.ai-msg { padding: 10px 12px; border-radius: 12px; font-size: .9rem; max-width: 92%; white-space: pre-wrap; word-break: break-word; }
.ai-msg.user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.ai-msg.bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.ai-msg.bot.pending { color: var(--muted); font-style: italic; }
.ai-form { display: flex; gap: 8px; }
.ai-form input { flex: 1; }

/* Attachments */
.attach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 12px 0; }
.attach { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.attach img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; display: block; }
.file-tile { display: grid; place-items: center; height: 120px; border-radius: 8px; background: var(--bg); border: 1px dashed var(--border); color: var(--muted); font-weight: 700; letter-spacing: .05em; text-decoration: none; }
.attach-meta { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; word-break: break-word; }
.attach-meta a { color: var(--primary); text-decoration: none; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal[hidden] { display: none; }
.modal-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); }

@media (max-width: 480px) {
  .grid-form { grid-template-columns: 1fr; }
  .quote { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}

.sep{border:none;border-top:1px solid #2a3344;margin:1rem 0;}
.steps{margin:.25rem 0 .5rem 1.1rem;padding:0;}
.steps li{margin:.15rem 0;}
.steps li.done{color:#7ee787;}
.ledger{margin:.25rem 0 .5rem 1.1rem;padding:0;font-size:.9rem;}

.verify{border-radius:8px;padding:.6rem .8rem;margin:.5rem 0;font-size:.92rem;}
.verify.ok{background:rgba(46,160,67,.12);border:1px solid #2ea043;}
.verify.bad{background:rgba(248,81,73,.12);border:1px solid #f85149;}
.findings{margin:.25rem 0 .25rem 1.1rem;padding:0;font-size:.88rem;}
.status-needs_review{background:#9e6a03;color:#fff;}
.progress{display:flex;gap:.5rem;flex-wrap:wrap;margin:.35rem 0;font-size:.85rem;}
.progress .step{padding:.15rem .5rem;border-radius:999px;background:#21262d;border:1px solid #2a3344;}
.progress .step.done{background:rgba(46,160,67,.18);border-color:#2ea043;color:#7ee787;}

/* App-like top nav */
.topnav{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;}
.navlink{padding:.3rem .7rem;border-radius:6px;color:#c9d1d9;text-decoration:none;font-size:.9rem;}
.navlink:hover{background:#21262d;}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit;}

/* Home launcher */
.launcher{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;text-align:center;}
.launcher h1{font-size:1.6rem;margin:0;}
.launch-buttons{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center;}
.launch-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  width:220px;height:180px;border-radius:16px;background:#161b22;border:1px solid #2a3344;
  color:#e6edf3;text-decoration:none;font-size:1.2rem;font-weight:600;transition:.15s;}
.launch-btn:hover{transform:translateY(-3px);border-color:#3b82f6;box-shadow:0 8px 24px rgba(0,0,0,.4);}
.launch-btn .ico{font-size:2.6rem;line-height:1;}
.launch-btn.primary{background:#1f6feb;border-color:#1f6feb;color:#fff;}
.launch-btn.primary:hover{background:#388bfd;}

/* Change history (grey) */
.history{margin:.2rem 0 .4rem;padding:0;list-style:none;}
.history li{color:#8b949e;font-size:.8rem;font-family:monospace;}
.history .del{text-decoration:line-through;}
.field-wrap{margin-bottom:.3rem;}
.autosave-status{font-size:.8rem;color:#8b949e;min-height:1em;}

/* Payment + misc */
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
.overdue{color:#f85149;font-weight:600;}

/* Receipt */
.receipt{max-width:520px;margin:1rem auto;}
.receipt-head{text-align:center;border-bottom:1px solid #2a3344;padding-bottom:.6rem;margin-bottom:.6rem;}
.receipt-head h1{margin:0;font-size:1.3rem;}
.receipt-table{width:100%;border-collapse:collapse;}
.receipt-table th{text-align:left;color:#8b949e;font-weight:500;padding:.3rem .4rem;width:45%;vertical-align:top;}
.receipt-table td{padding:.3rem .4rem;}
.receipt-table tr.amount td,.receipt-table tr.amount th{font-size:1.15rem;font-weight:700;color:#e6edf3;border-top:1px solid #2a3344;padding-top:.5rem;}

@media print{
  .topbar,.flash-stack,.no-print{display:none !important;}
  body,.container{background:#fff !important;color:#000 !important;}
  .card,.receipt{background:#fff !important;border:none !important;box-shadow:none !important;}
  .receipt-table th{color:#444 !important;}
  .receipt-table td,.receipt-head h1{color:#000 !important;}
}