: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; }

/* Page header with an action (e.g. the loan/client switcher) on the right. */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-head .page-title { margin-bottom: 12px; }
.loan-switch { display: flex; flex-direction: column; gap: 2px; margin: 0 4px 12px; }
.loan-switch select { max-width: 280px; }

/* Notification bell in the nav */
.notif-bell { position: relative; padding: 6px 10px !important; }
.notif-bell--active { color: var(--warn) !important; }
.notif-badge {
  position: absolute; top: 0; right: 0;
  background: var(--danger); color: #fff;
  font-size: .65rem; font-weight: 700;
  min-width: 16px; height: 16px; line-height: 16px;
  border-radius: 8px; text-align: center;
  padding: 0 3px;
}

/* Notifications list */
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.notif-item:last-child { border-bottom: none; }
.notif-item--unread { background: rgba(79,140,255,.06); }
.notif-body { display: flex; gap: 12px; flex: 1; min-width: 0; }
.notif-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.notif-content { flex: 1; min-width: 0; }
.notif-msg { margin: 0 0 4px; font-size: .95rem; }
.notif-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.notif-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; flex-wrap: wrap; }
.pill--warn { background: rgba(230,162,60,.18); color: var(--warn); }

/* App-like behavior on phones: respect notches, comfortable tap targets, and a
   horizontally scrollable top nav instead of a cramped wrap. */
@media (max-width: 640px) {
  .container { padding: 12px 12px calc(28px + env(safe-area-inset-bottom)); }
  .topbar { padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); gap: 10px; }
  .brand-name { display: none; }
  .topnav { gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .topnav::-webkit-scrollbar { display: none; }
  .navlink { white-space: nowrap; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: .9rem; }
  /* Bigger, finger-friendly controls. 16px inputs avoid iOS auto-zoom. */
  input, select, textarea, .btn { min-height: 46px; font-size: 16px; }
  .btn { padding: 12px 16px; }
  .btn-small { min-height: 34px; padding: 7px 11px; font-size: .82rem; }
  .form-actions { flex-wrap: wrap; }
  .form-actions .btn, .form-actions .btn-primary { flex: 1 1 auto; }
}

/* 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); }
.pill-ok { background: rgba(70,192,138,.16); color: #6fe0ac; border-color: rgba(70,192,138,.4); }
.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%; max-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); }

/* Size each box to the content it holds (no more full-width boxes). */
input[type="date"] { width: 10.5rem; }
input[type="time"] { width: 7.5rem; }
input[type="number"] { width: 12rem; }
input[type="email"] { width: 100%; max-width: 24rem; }
input[type="password"] { width: 100%; max-width: 20rem; }
input[type="text"] { width: 100%; max-width: 26rem; }
select { width: auto; min-width: 10rem; max-width: 100%; }
textarea { width: 100%; max-width: 100%; }
/* Utility widths for short codes / amounts when a tighter box is wanted. */
.in-code { width: 13rem !important; }
.in-amount { width: 12rem !important; }
.in-wide { width: 100% !important; max-width: 100% !important; }
/* On phones, let everything use the available width. */
@media (max-width: 520px) {
  input[type="date"], input[type="time"], input[type="number"],
  input[type="text"], input[type="email"], input[type="password"],
  select, .in-code, .in-amount { width: 100% !important; max-width: 100% !important; }
}
.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 { width: 100%; }
.data-table { width: 100%; border-collapse: collapse; font-size: .85rem; table-layout: auto; }
.data-table th, .data-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.data-table th { color: var(--muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }

/* Narrow screens: stack each row into a labelled card — no horizontal scroll. */
@media (max-width: 640px) {
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table thead { display: none; }
  .data-table tr { border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; margin-bottom: 12px; background: var(--surface-2); }
  .data-table td { border: none; padding: 6px 0; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
  .data-table td::before {
    content: attr(data-label);
    color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    flex: 0 0 auto; font-weight: 600;
  }
  .data-table td:empty, .data-table td[data-label=""]::before { display: none; }
  .data-table td > * { text-align: right; }
  .row-actions { justify-content: flex-end; }
}
.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;}

/* Language toggle */
.lang-toggle{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--border);border-radius:6px;padding:2px;margin-left:auto;}
.lang-toggle .lang-link,.lang-toggle .lang-on{font-size:.72rem;font-weight:600;line-height:1;padding:3px 7px;border-radius:4px;text-decoration:none;}
.lang-toggle .lang-link{color:var(--muted);}
.lang-toggle .lang-link:hover{background:#21262d;color:var(--text);}
.lang-toggle .lang-on{background:var(--accent,#2f81f7);color:#fff;}
.auth-lang{position:fixed;top:14px;right:16px;z-index:10;}

/* Show/hide password toggle */
.pw-wrap{position:relative;display:block;}
.pw-wrap input{width:100%;padding-right:2.4rem;}
.pw-toggle{position:absolute;top:50%;right:.4rem;transform:translateY(-50%);background:none;border:none;cursor:pointer;opacity:.55;font-size:1rem;line-height:1;padding:2px 4px;}
.pw-toggle:hover,.pw-toggle.on{opacity:1;}

/* Locked workflow step (Step 2 before Step 1 is complete) */
.locked-step{background:#1c2230;border:1px dashed #3b4763;color:#9fb0c8;border-radius:10px;
  padding:.8rem 1rem;font-size:.9rem;margin:.4rem 0;}

/* Structured borrower payout entry (method + value) */
.payout-fields{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
@media (max-width:640px){.payout-fields{grid-template-columns:1fr;}}

/* Loan in default badge */
.status-default{background:rgba(229,72,77,.16);color:#ff8a8d;}

/* In-person signature pad */
.sign-block{margin-top:.4rem;}
.sign-pad-wrap{max-width:620px;position:relative;}
.sign-pad{width:100%;height:auto;aspect-ratio:3/1;background:#fff;border:1px solid #30363d;
  border-radius:10px;touch-action:none;cursor:crosshair;display:block;}
.sign-hint{position:absolute;left:12px;bottom:34px;color:#b9c2cf;font-size:.8rem;font-weight:600;
  pointer-events:none;letter-spacing:.02em;}
.sign-baseline{display:flex;justify-content:flex-end;border-top:1px dashed #c9d2dd;margin-top:-26px;
  padding:0 10px 4px;pointer-events:none;}
.sign-baseline span{color:#9aa4b2;font-size:.72rem;}

/* Credit score card */
.credit-card .credit-row{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;}
.credit-score{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:96px;padding:.7rem 1rem;border-radius:12px;background:rgba(70,192,138,.14);border:1px solid rgba(70,192,138,.4);}
.credit-score.is-low{background:rgba(230,162,60,.15);border-color:rgba(230,162,60,.45);}
.credit-score.is-blocked{background:rgba(229,72,77,.15);border-color:rgba(229,72,77,.5);}
.credit-value{font-size:2rem;font-weight:700;line-height:1;color:var(--text,#e6edf3);}
.credit-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#8b949e);margin-top:.25rem;}
.credit-meta{flex:1;min-width:200px;}
.badge{display:inline-block;border-radius:999px;padding:3px 11px;font-size:.78rem;font-weight:600;}
.badge-ok{background:rgba(70,192,138,.16);color:#6fe0ac;}
.badge-danger{background:rgba(229,72,77,.18);color:#ff8a8d;}

/* AI suggested-prompt chips */
.ai-suggest{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;}
.chip{background:var(--surface-2,#21262d);border:1px solid var(--border,#30363d);color:var(--muted,#8b949e);border-radius:999px;padding:4px 11px;font-size:.78rem;cursor:pointer;}
.chip:hover{color:var(--text,#e6edf3);border-color:var(--accent,#2f81f7);}

/* 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;}
.launch-status{display:flex;gap:1.4rem;color:#8b949e;font-size:.82rem;
  border-top:1px solid #2a3344;padding-top:.9rem;margin-top:.4rem;}
.launch-status span{display:inline-flex;align-items:center;gap:.35rem;}

/* 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;}
}

/* Worklist + due indicators + schedule */
.worklist-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 6px; }
.worklist-h.overdue { color: #ff8a8d; }
.worklist-h.warn { color: var(--warn); }
.worklist-list { list-style: none; margin: 0; padding: 0; }
.worklist-list li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.worklist-list a { color: var(--text); text-decoration: none; font-weight: 600; }
.worklist-list a:hover { color: var(--primary); }
.due-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: .92rem; }
.due-box.due-late { border-color: var(--danger); }
.schedule { margin: 8px 0; }
.schedule summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.sched-paid { opacity: .55; }
.sched-paid td { text-decoration: line-through; }

/* Revenue review / treasury */
.report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rstat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.rstat .rlabel { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.rstat .rval { font-size: 1.1rem; font-weight: 700; }
.rstat.in { border-left: 3px solid var(--ok); }
.rstat.out { border-left: 3px solid var(--danger); }
.rstat.net { border-left: 3px solid var(--primary); }
.flow { font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.flow-in { background: rgba(70,192,138,.16); color: #6fe0ac; }
.flow-out { background: rgba(229,72,77,.16); color: #ff8a8d; }
@media (max-width: 520px) { .report-grid { grid-template-columns: 1fr; } }

.payout-edit summary { list-style: none; display: inline-block; cursor: pointer; }
.payout-edit summary::-webkit-details-marker { display: none; }