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

  /* ============================= THEME: EXECUTIVE NAVY ============================= */
  html[data-theme="navy"] {
    --bg-page: #eef1f6;
    --bg-card: #ffffff;
    --bg-card-alt: #f6f8fb;
    --text-primary: #16233f;
    --text-secondary: #5b6b8c;
    --text-muted: #93a0bd;
    --border: #e1e6f0;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-card: 0 1px 2px rgba(16,31,64,0.04), 0 8px 24px rgba(16,31,64,0.06);
    --shadow-pop: 0 12px 32px rgba(16,31,64,0.16);
    --grad-primary: linear-gradient(135deg, #1f3864 0%, #2e5395 55%, #3f77c9 100%);
    --grad-accent: linear-gradient(135deg, #d9a441 0%, #f0c975 100%);
    --accent-solid: #2e5395;
    --grad-kpi-1: linear-gradient(135deg, #1f3864, #2e5395);
    --grad-kpi-2: linear-gradient(135deg, #2e5395, #4f80c4);
    --grad-kpi-3: linear-gradient(135deg, #145c52, #1d9e75);
    --grad-kpi-4: linear-gradient(135deg, #9c5700, #d9a441);
    --grad-kpi-5: linear-gradient(135deg, #6a2fb0, #9d6ad9);
    --grad-kpi-6: linear-gradient(135deg, #0e6ba8, #4fa6d9);
    --grad-kpi-7: linear-gradient(135deg, #a32d2d, #d96666);
    --grad-kpi-8: linear-gradient(135deg, #2e5395, #145c52);
    --pill-app-bg: #eef1f6; --pill-app-text: #5b6b8c;
    --pill-progress-bg: #e3ecfb; --pill-progress-text: #1f4f8f;
    --pill-success-bg: #e1f5ee; --pill-success-text: #0f6e56;
    --pill-warn-bg: #fdf1e0; --pill-warn-text: #9c5700;
    --pill-danger-bg: #fbeaea; --pill-danger-text: #a32d2d;
    --sidebar-bg: #16233f;
    --sidebar-text: rgba(255,255,255,0.68);
    --sidebar-text-active: #ffffff;
    --font-heading: -apple-system, "Segoe UI", sans-serif;
  }

  /* ============================= THEME: SOFT NEUTRAL / AIRY ============================= */
  html[data-theme="airy"] {
    --bg-page: #fafaf9;
    --bg-card: #ffffff;
    --bg-card-alt: #f5f6f5;
    --text-primary: #23262b;
    --text-secondary: #767c78;
    --text-muted: #a7aca8;
    --border: #ececea;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --shadow-card: 0 1px 2px rgba(30,40,35,0.03), 0 10px 28px rgba(30,40,35,0.05);
    --shadow-pop: 0 14px 36px rgba(30,40,35,0.14);
    --grad-primary: linear-gradient(135deg, #0f9d76 0%, #2bbf9e 55%, #5fd6c4 100%);
    --grad-accent: linear-gradient(135deg, #ffb15c 0%, #ffd88a 100%);
    --accent-solid: #0f9d76;
    --grad-kpi-1: linear-gradient(135deg, #0f9d76, #2bbf9e);
    --grad-kpi-2: linear-gradient(135deg, #3d7ce0, #5fa8e6);
    --grad-kpi-3: linear-gradient(135deg, #e0a13d, #f0c46a);
    --grad-kpi-4: linear-gradient(135deg, #767c78, #a7aca8);
    --grad-kpi-5: linear-gradient(135deg, #2bbf9e, #5fd6c4);
    --grad-kpi-6: linear-gradient(135deg, #275e9e, #5fa8e6);
    --grad-kpi-7: linear-gradient(135deg, #ad3939, #e0a13d);
    --grad-kpi-8: linear-gradient(135deg, #0f8a63, #3d7ce0);
    --pill-app-bg: #f2f3f2; --pill-app-text: #6b716d;
    --pill-progress-bg: #e7f1fd; --pill-progress-text: #275e9e;
    --pill-success-bg: #e3f7ef; --pill-success-text: #0f8a63;
    --pill-warn-bg: #fdf1de; --pill-warn-text: #a8720e;
    --pill-danger-bg: #fbeaea; --pill-danger-text: #ad3939;
    --sidebar-bg: #ffffff;
    --sidebar-text: #767c78;
    --sidebar-text-active: #0f9d76;
    --font-heading: -apple-system, "Segoe UI", sans-serif;
  }

  /* ============================= SHARED COMPONENTS ============================= */
  .control-bar {
    position: sticky; top: 0; z-index: 100;
    background: #14141a; color: #fff;
    padding: 14px 24px; display: flex; align-items: center; gap: 24px;
    flex-wrap: wrap;
  }
  .control-bar .label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,0.5); margin-right: 8px; }
  .seg { display: inline-flex; background: rgba(255,255,255,0.08); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: wrap; }
  .seg button {
    border: none; background: transparent; color: rgba(255,255,255,0.65);
    font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer;
    transition: all .15s ease; font-family: inherit; white-space: nowrap;
  }
  .seg button.active { background: #fff; color: #14141a; }
  .seg button:hover:not(.active) { color: #fff; }
  .seg.seg-light { background: var(--bg-card-alt); }
  .seg.seg-light button { color: var(--text-secondary); }
  .seg.seg-light button.active { background: var(--grad-primary); color: #fff; }
  .seg.seg-light button:hover:not(.active) { color: var(--text-primary); }

  .app-shell { display: flex; min-height: calc(100vh - 54px); }
  /* Borrower/broker-facing preview mode — hides every internal-staff chrome element (the mockup's
     own dev control-bar plus the real app's sidebar nav) so what's left is exactly what an external
     party would see if they opened the upload link or the portal on their own device. A persistent
     banner stays pinned so staff previewing it can never mistake it for the live external session. */
  body.external-preview-mode .control-bar, body.external-preview-mode .sidebar { display: none; }
  body.external-preview-mode .app-shell { min-height: 100vh; }
  .external-preview-banner {
    display: none; position: sticky; top: 0; z-index: 200; padding: 10px 24px;
    background: #1F3864; color: #fff; font-size: 12.5px; font-weight: 600;
    align-items: center; justify-content: space-between; gap: 12px;
  }
  body.external-preview-mode .external-preview-banner { display: flex; }
  .external-preview-banner button {
    background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); color: #fff;
    padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer;
  }
  .external-shell-header { display:flex; align-items:center; gap:10px; padding: 22px 4px 6px; }
  .external-shell-header .mark { width: 30px; height: 30px; border-radius: 9px; background: var(--grad-primary); }
  .external-shell-header .name { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; }
  /* Portal's own left-rail nav — deliberately distinct from the internal .sidebar (dark, hidden in
     preview mode); this is a light rail matching the rest of the external-facing chrome. */
  .portal-shell { display:flex; gap:26px; align-items:flex-start; }
  .portal-nav { width:196px; flex-shrink:0; display:flex; flex-direction:column; gap:2px; position:sticky; top:16px; }
  .portal-nav button {
    display:flex; align-items:center; width:100%; text-align:left; padding:10px 14px; border-radius:8px;
    border:none; background:transparent; color:var(--text-secondary); font-size:13.5px; font-weight:700;
    cursor:pointer; font-family:inherit;
  }
  .portal-nav button:hover:not(.active) { background:var(--bg-card-alt); color:var(--text-primary); }
  .portal-nav button.active { background:var(--accent-solid); color:#fff; }
  .portal-content { flex:1; min-width:0; }
  .portal-loan-header {
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    margin-bottom:16px;
  }
  .portal-loan-subtabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px; flex-wrap:wrap; }
  .portal-loan-subtabs button {
    padding:9px 14px; border:none; background:none; font-size:13px; font-weight:700; color:var(--text-secondary);
    cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; font-family:inherit;
  }
  .portal-loan-subtabs button.active { color:var(--accent-solid); border-bottom-color:var(--accent-solid); }
  .portal-loan-subtabs button:hover:not(.active) { color:var(--text-primary); }
  .portal-info-row { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px; gap:12px; }
  .portal-info-row:last-child { border-bottom:none; }
  .portal-info-row span:first-child { color:var(--text-secondary); }
  .portal-info-row strong { text-align:right; }
  .sidebar {
    width: 232px; flex-shrink: 0; background: var(--sidebar-bg);
    padding: 24px 16px; display: flex; flex-direction: column; gap: 4px;
  }
  .sidebar .brand { display:flex; align-items:center; gap:10px; padding: 4px 10px 22px; }
  .sidebar .brand .mark {
    width: 30px; height: 30px; border-radius: 9px; background: var(--grad-primary);
    flex-shrink: 0;
  }
  .sidebar .brand .name { color: var(--sidebar-text-active); font-weight: 700; font-size: 15px; letter-spacing: .01em; }
  .sidebar a {
    display: flex; align-items: center; gap: 10px; color: var(--sidebar-text);
    text-decoration: none; font-size: 14px; font-weight: 500; padding: 10px 12px; border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .sidebar a.active { background: rgba(255,255,255,0.1); color: var(--sidebar-text-active); }
  html[data-theme="airy"] .sidebar a.active { background: var(--pill-success-bg); }
  .sidebar a svg { flex-shrink: 0; opacity: .9; }
  .sidebar .sec-label { color: rgba(255,255,255,0.35); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 18px 12px 6px; }
  html[data-theme="airy"] .sidebar .sec-label { color: var(--text-muted); }

  .main { flex: 1; min-width: 0; padding: 28px 34px 60px; }
  .page { display: none; }
  .page.active { display: block; }

  .topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
  .topbar h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
  .topbar .sub { color: var(--text-secondary); font-size: 14px; margin-top: 3px; }

  .btn {
    display: inline-flex; align-items: center; gap: 8px; font-family: inherit;
    font-size: 13.5px; font-weight: 600; border-radius: var(--radius-sm); border: none;
    padding: 10px 18px; cursor: pointer; white-space: nowrap;
  }
  .btn-primary { background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-card); }
  .btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); }
  .btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
  .btn-icon { padding: 9px; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; display:inline-flex; position:relative; }
  .btn:disabled { opacity: .45; cursor: not-allowed; }
  .btn-sm { padding: 7px 13px; font-size: 12.5px; }

  .card { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); border: 1px solid var(--border); }

  .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
  .kpi-card { border-radius: var(--radius-md); padding: 18px 20px; color: #fff; box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
  .kpi-card .num { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
  .kpi-card .vol { font-size: 13px; font-weight: 700; opacity: .92; margin-top: 1px; }
  .kpi-card .lbl { font-size: 12.5px; opacity: .88; font-weight: 600; margin-top: 4px; }
  .kpi-card .deltas { display: flex; gap: 10px; margin-top: 10px; font-size: 11px; font-weight: 700; opacity: .95; }
  .kpi-card .deltas span { display: flex; align-items: center; gap: 3px; background: rgba(255,255,255,0.16); padding: 2px 8px; border-radius: 999px; }

  .toolbar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
  .search-input {
    flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 9px 14px; color: var(--text-muted); font-size: 13.5px;
  }
  .search-input input {
    border: none; background: transparent; outline: none; font-family: inherit; font-size: 13.5px;
    color: var(--text-primary); width: 100%;
  }
  .chip {
    display: inline-flex; align-items: center; gap: 6px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 999px; padding: 8px 14px; font-size: 13px; color: var(--text-secondary); font-weight: 500; cursor: pointer;
  }
  .chip.active { background: var(--grad-primary); color: #fff; border-color: transparent; }

  table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
  td { padding: 13px 16px; border-bottom: 1px solid var(--border); color: var(--text-primary); vertical-align: middle; }
  tr:last-child td { border-bottom: none; }
  tbody tr:hover { background: var(--bg-card-alt); }

  .pill { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
  .pill-progress { background: var(--pill-progress-bg); color: var(--pill-progress-text); }
  .pill-success { background: var(--pill-success-bg); color: var(--pill-success-text); }
  .pill-warn { background: var(--pill-warn-bg); color: var(--pill-warn-text); }
  .pill-danger { background: var(--pill-danger-bg); color: var(--pill-danger-text); }
  .pill-neutral { background: var(--pill-app-bg); color: var(--pill-app-text); }

  select.pill-select {
    appearance: none; -webkit-appearance: none; border: none; cursor: pointer;
    font-size: 11.5px; font-weight: 700; padding: 5px 24px 5px 11px; border-radius: 999px; white-space: nowrap;
    font-family: inherit;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 8px center;
  }
  select.pill-select.pill-progress { background-color: var(--pill-progress-bg); color: var(--pill-progress-text); }
  select.pill-select.pill-success { background-color: var(--pill-success-bg); color: var(--pill-success-text); }
  select.pill-select.pill-warn { background-color: var(--pill-warn-bg); color: var(--pill-warn-text); }
  select.pill-select.pill-danger { background-color: var(--pill-danger-bg); color: var(--pill-danger-text); }
  select.pill-select.pill-neutral { background-color: var(--pill-app-bg); color: var(--pill-app-text); }

  .avatar-name { display: flex; align-items: center; gap: 8px; }
  .avatar {
    width: 26px; height: 26px; border-radius: 50%; background: var(--grad-primary); color: #fff;
    font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .row-actions { position: relative; }
  .actions-trigger {
    background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);
    border-radius: var(--radius-sm); padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
    font-family: inherit; white-space: nowrap;
  }
  .actions-dropdown {
    display: none; position: absolute; left: 0; top: calc(100% + 6px); background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop);
    min-width: 210px; z-index: 40; overflow: hidden;
  }
  .actions-dropdown.open { display: block; }
  .actions-dropdown button {
    display: block; width: 100%; text-align: left; background: none; border: none; padding: 10px 14px;
    font-size: 12.5px; color: var(--text-primary); cursor: pointer; font-weight: 600; font-family: inherit;
  }
  .actions-dropdown button:hover { background: var(--bg-card-alt); }
  .actions-dropdown .divider { height: 1px; background: var(--border); margin: 4px 0; padding: 0; cursor: default; }
  .actions-dropdown .divider:hover { background: var(--border); }

  .task-badge {
    position: absolute; top: -3px; right: -3px; background: #e1495a; color: #fff; font-size: 9.5px; font-weight: 800;
    width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  }
  .task-panel { width: 340px; left: auto; right: 0; }
  .task-panel-header { padding: 12px 14px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--border); color: var(--text-primary); }
  .task-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
  .task-item:last-child { border-bottom: none; }
  .task-item input[type=checkbox] { margin-top: 3px; flex-shrink: 0; }
  .task-item .t-text { font-size: 12.5px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
  .task-item .t-meta { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }
  .task-item .t-tag { display: inline-block; font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--pill-progress-bg); color: var(--pill-progress-text); margin-top: 4px; }

  .profile-chip { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; font-weight: 600; }
  .profile-chip .role { color: rgba(255,255,255,0.5); font-weight: 500; font-size: 11.5px; }

  .dropzone {
    border: 1.5px dashed var(--border); border-radius: var(--radius-sm); padding: 18px; text-align: center;
    color: var(--text-secondary); font-size: 12.5px; margin-bottom: 12px; cursor: pointer; transition: all .15s ease;
  }
  .dropzone:hover, .dropzone.drag-over { border-color: var(--accent-solid); background: var(--bg-card-alt); }
  .dropzone strong { color: var(--accent-solid); }

  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }


  /* ---- Additions for v4: modal, toggles, per-row upload, POCs, notes, aging ---- */
  .modal-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(10,12,20,0.55); z-index: 200;
    align-items: center; justify-content: center; padding: 30px;
  }
  .modal-backdrop.open { display: flex; }
  .modal-card {
    background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
    width: 100%; max-width: 1480px; max-height: 94vh; overflow: hidden; display: flex; flex-direction: column;
  }
  .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--border); }
  .modal-head .doc-title { font-size: 15px; font-weight: 700; font-family: ui-monospace, "SF Mono", Consolas, monospace; }
  .modal-close { background: none; border: none; font-size: 20px; color: var(--text-secondary); cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: 999px; }
  .modal-close:hover { background: var(--bg-card-alt); }
  .modal-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; flex: 1; }
  .modal-viewer {
    background: var(--bg-card-alt); border-right: 1px solid var(--border); display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 30px; color: var(--text-muted); overflow-y: auto;
  }
  .modal-viewer .doc-mock-page {
    background: #fff; width: 100%; max-width: 560px; aspect-ratio: 8.5/11; border-radius: 6px; box-shadow: 0 4px 18px rgba(0,0,0,0.12);
    padding: 32px; color: #333; font-size: 13px; line-height: 1.7; overflow: hidden;
  }
  .modal-panel { padding: 24px 28px; overflow-y: auto; font-size: 13.5px; }
  .extract-card {
    background: var(--pill-progress-bg); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 16px;
  }
  .extract-card .extract-title { font-size: 12px; font-weight: 800; color: var(--pill-progress-text); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
  .extract-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; color: var(--text-primary); }
  .extract-row .k { color: var(--text-secondary); }
  .extract-card.clear { background: var(--pill-success-bg); }
  .extract-card.clear .extract-title { color: var(--pill-success-text); }
  .extract-card.flagged { background: var(--pill-warn-bg); }
  .extract-card.flagged .extract-title { color: var(--pill-warn-text); }
  .account-fields { background: var(--bg-card-alt); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .account-fields .field-full { grid-column: 1 / -1; }
  .modal-footer { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .modal-footer .status-msg { font-size: 12px; color: var(--text-secondary); }
  .modal-footer .status-msg.ready { color: var(--pill-success-text); font-weight: 700; }
  .add-comment-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
  .add-comment-row select, .add-comment-row input { font-family: inherit; font-size: 12.5px; padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); }
  .add-comment-row input[type=text] { flex: 1; min-width: 160px; }

  .toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
  .toggle-switch input { opacity: 0; width: 0; height: 0; }
  .toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 999px; transition: .15s; }
  .toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .15s; }
  .toggle-switch input:checked + .toggle-slider { background: var(--grad-primary); }
  .toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }

  .row-upload-btn {
    width: 32px; height: 32px; border-radius: var(--radius-sm); border: none; background: #1e8e5a;
    color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  }
  .row-upload-btn:hover { background: #167048; }

  .poc-card { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .poc-card:last-child { border-bottom: none; }
  .poc-card.clickable { cursor: pointer; transition: background 0.1s ease; }
  .poc-card.clickable:hover { background: var(--bg-card-alt); }
  .poc-type-pill { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--pill-app-bg); color: var(--pill-app-text); }

  .note-item { padding: 14px 0; border-bottom: 1px solid var(--border); }
  .note-item:last-child { border-bottom: none; }
  .note-item .note-meta { font-size: 11.5px; color: var(--text-muted); margin-bottom: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .note-item .note-text { font-size: 13px; color: var(--text-primary); }
  .note-source { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 4px; }

  .pill-aging-ok { background: var(--pill-success-bg); color: var(--pill-success-text); }
  .pill-aging-warn { background: var(--pill-warn-bg); color: var(--pill-warn-text); }
  .pill-aging-bad { background: var(--pill-danger-bg); color: var(--pill-danger-text); }

  .terms-table td.diff { font-weight: 700; color: var(--accent-solid); }
  .terms-table { table-layout: fixed; }
  .terms-table th, .terms-table td { padding: 10px 14px; font-size: 12.5px; }
  .terms-table th:first-child, .terms-table td:first-child { width: 30%; font-weight: 600; color: var(--text-secondary); }
  .terms-table tbody tr:nth-child(even) { background: var(--bg-card-alt); }
  .terms-table tbody tr:nth-child(even):hover, .terms-table tbody tr:hover { background: var(--pill-progress-bg); }
  .terms-table th:last-child, .terms-table td:last-child { background: var(--pill-progress-bg); border-left: 2px solid var(--accent-solid); }
  .terms-table th:last-child { color: var(--accent-solid); }
  .terms-table td:last-child.diff { background: var(--pill-warn-bg); }
  .terms-input {
    width: 100%; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-primary);
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px;
  }
  .terms-input:focus { outline: 2px solid var(--accent-solid); outline-offset: 1px; }
  .terms-input.computed { background: transparent; border-style: dashed; color: var(--text-secondary); font-weight: 600; }
  select.terms-input { cursor: pointer; }
  .terms-flag {
    background: var(--pill-warn-bg); color: var(--pill-warn-text); border-left: 3px solid var(--pill-warn-text);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 10px 14px; font-size: 12px; margin: 14px 0; font-weight: 600;
  }


  .app-step { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
  .app-step.active-step { background: var(--grad-primary); color: #fff; }

  /* ===== Branded documents → PDF (browser print) =====
     Generic: isolates whichever .modal-backdrop currently has .open, so every system-generated
     document (Settlement Instructions, Term Sheet, Application summary, notification/conditions
     list previews, etc.) can reuse the same export path via printBrandedDocument(). */
  @media print {
    body.printing-branded-doc > *:not(.modal-backdrop.open) { display: none !important; }
    body.printing-branded-doc .modal-backdrop.open {
      position: static !important; display: block !important; background: none !important; padding: 0 !important; inset: auto !important;
    }
    body.printing-branded-doc .modal-backdrop.open .modal-card {
      box-shadow: none !important; max-width: none !important; max-height: none !important; width: 100% !important; border-radius: 0 !important;
    }
    body.printing-branded-doc .modal-backdrop.open .modal-head,
    body.printing-branded-doc .modal-backdrop.open .modal-footer { display: none !important; }
    body.printing-branded-doc .modal-backdrop.open .modal-body {
      max-height: none !important; overflow: visible !important; padding: 0 !important;
    }
    body.printing-branded-doc .doc-print-header { display: block !important; }
    @page { margin: 0.6in; }
  }

  .section-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; display:flex; align-items:center; gap:10px; }
  .muted-tag { font-size: 11.5px; font-weight: 600; color: var(--text-muted); background: var(--bg-card-alt); padding: 3px 9px; border-radius: 999px; }

  .toggle-pill {
    padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--border); font-size: 13.5px;
    font-weight: 600; color: var(--text-secondary); cursor: pointer;
  }
  .toggle-pill.selected { background: var(--grad-primary); color: #fff; border-color: transparent; }

  .hint-note {
    margin-top: 16px; font-size: 12.5px; color: var(--text-secondary); background: var(--bg-card-alt);
    padding: 10px 14px; border-left: 3px solid var(--accent-solid); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }

  .field-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 18px; }
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field-full { grid-column: 1 / -1; }
  .field label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
  .field input, .field select {
    font-family: inherit; font-size: 13.5px; padding: 9px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg-card-alt); color: var(--text-primary);
  }
  .field input:focus, .field select:focus { outline: 2px solid var(--accent-solid); outline-offset: 1px; background: var(--bg-card); }

  .tab-row { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
  .tab-row.sub { border-bottom: none; margin-bottom: 16px; gap: 8px; }
  .tab { padding: 10px 4px; margin-right: 18px; font-size: 14px; font-weight: 600; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; }
  .tab.active { color: var(--text-primary); border-bottom: 2px solid var(--accent-solid); }
  .tab.sub { padding: 7px 15px; margin-right: 0; border-radius: 999px; border-bottom: none; background: var(--bg-card); border: 1px solid var(--border); }
  .tab.sub.active { background: var(--grad-primary); color: #fff; border-color: transparent; }
  /* Lock-complete checkmark badge — its own solid green circle + white glyph, so it stays fully
     legible even on a .tab.sub.active tab's blue gradient background (plain colored text there
     would get lost against that background). */
  .tab-check { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; min-width:18px; border-radius:50%; background:var(--pill-success-text); color:#fff; font-size:11px; font-weight:900; line-height:1; margin-left:6px; vertical-align:middle; box-shadow:0 0 0 2px rgba(255,255,255,0.55); }
  .tab.sub.active .tab-check { box-shadow:0 0 0 2px rgba(255,255,255,0.9); }
  /* No native up/down spinner arrows on any number input — users just type the value. */
  input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  input[type=number] { -moz-appearance: textfield; }

  .doc-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--border); border-radius: var(--radius-sm); }
  .doc-row:last-child { border-bottom: none; }
  .doc-row:hover { background: var(--bg-card-alt); }
  .doc-category { flex: 0 0 180px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); }
  .doc-name { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--text-primary); font-family: inherit; letter-spacing: -0.005em; flex: 1; min-width: 0; cursor: pointer; }
  .doc-name:hover { text-decoration: underline; text-decoration-color: var(--accent-solid); }
  .doc-name svg { color: var(--accent-solid); flex-shrink: 0; opacity: 0.75; }
  .doc-row-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .tag-muted { color: var(--text-muted); font-weight: 600; font-family: inherit; font-size: 11.5px; margin-left: 6px; }
  .clear-btn {
    background: #1e8e5a; border: none; color: #fff;
    border-radius: var(--radius-sm); padding: 8px 16px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  }
  .clear-btn:hover { background: #167048; }
  .clear-btn.cleared { background: #125c3a; color: #fff; }

  .filename-preview {
    font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12.5px; color: var(--accent-solid);
    background: var(--bg-card-alt); border: 1px dashed var(--border); border-radius: var(--radius-sm);
    padding: 9px 13px; margin-top: 12px;
  }

  .check-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 13.5px; border-bottom: 1px solid var(--border); cursor: pointer; }
  .check-row:last-child { border-bottom: none; }
  .check-box {
    width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--border); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
  }
  .check-box.done { background: var(--accent-solid); border-color: var(--accent-solid); }
  .check-box.bad { background: var(--pill-danger-bg); border-color: var(--pill-danger-text); color: var(--pill-danger-text); }
  .check-row.deficient { color: var(--pill-danger-text); font-weight: 600; }

  .comment-box { background: var(--bg-card-alt); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 12.5px; color: var(--text-secondary); margin: 10px 0 6px; }
  .tag-pill { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--pill-danger-bg); color: var(--pill-danger-text); }
  .tag-pill.alt { background: var(--pill-app-bg); color: var(--pill-app-text); }
  .tag-pill.info { background: var(--pill-progress-bg); color: var(--pill-progress-text); }
  .tag-pill.internal { background: var(--pill-warn-bg); color: var(--pill-warn-text); }

  .investor-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .investor-row:last-child { border-bottom: none; }

  /* Used by the guideline-upload modal to simulate the extraction/digestion step. */
  @keyframes spin { to { transform: rotate(360deg); } }
  .spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent-solid); animation: spin .8s linear infinite; }

  /* Investor Matches tab — Match/Fringe/No Match cards. */
  .match-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 10px; }
  .match-card.match { border-left: 3px solid var(--pill-success-text); }
  .match-card.fringe { border-left: 3px solid var(--pill-warn-text); }
  .match-card.nomatch { border-left: 3px solid var(--pill-danger-text); }
  .match-criteria-table td, .match-criteria-table th { font-size: 12px; }

  /* Visual org chart — bottom-up: the property (when viewed from a file) anchors the base, the
     borrowing entity sits directly above it, and ownership branches continue upward toward the
     ultimate individual ("warm body") owners at the very top. */
  .oc-stack { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 4px 4px; }
  .oc-card {
    display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid var(--border); border-radius: 12px;
    padding: 10px 14px; background: var(--bg-card); box-shadow: var(--shadow-card); margin: 0; max-width: fit-content;
  }
  @keyframes ocFlash { 0% { box-shadow: 0 0 0 3px var(--accent-solid); } 100% { box-shadow: var(--shadow-card); } }
  .oc-card-new { animation: ocFlash 1.2s ease-out; }
  .oc-entity-card { border-color: var(--accent-solid); border-width: 2px; }
  .oc-property-row { display: flex; flex-direction: row; gap: 20px; justify-content: center; }
  .oc-property-card { border-radius: 20px; background: var(--bg-card-alt); font-size: 12px; padding: 8px 16px; text-align: center; }
  .oc-trunk { width: 2px; height: 20px; background: var(--border); }
  .oc-node { display: flex; flex-direction: column; align-items: center; position: relative; }
  .oc-kids-row { display: flex; flex-direction: row; align-items: flex-end; justify-content: center; gap: 26px; position: relative; padding-bottom: 20px; }
  .oc-kids-row.multi { border-bottom: 2px solid var(--border); }
  .oc-kids-row > .oc-node::after {
    content: ''; position: absolute; bottom: -20px; left: 50%; width: 2px; height: 20px; background: var(--border); transform: translateX(-50%);
  }

  /* Editable profile fields */
  .edit-field-row { display: flex; align-items: center; gap: 8px; }
  .icon-btn-sm {
    background: none; border: 1px solid var(--border); color: var(--text-secondary); border-radius: 7px;
    width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  }
  .icon-btn-sm:hover { background: var(--bg-card-alt); color: var(--accent-solid); border-color: var(--accent-solid); }


  /* Belt-and-suspenders: reflow the shared KPI-tile class on its own, no breakpoint required. Most
     KPI rows also carry their own inline grid-template-columns (which wins over this class rule),
     so the real fix for those is the !important override below — this just covers any KPI row that
     doesn't have an inline override. */
  .kpi-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

  /* Any element with a table gets a local horizontal scrollbar if its content doesn't fit, instead
     of the table squishing text unreadably or blowing out the whole page's width. Harmless at any
     width — only engages if content actually overflows. */
  .card:has(table) { overflow-x: auto; }

  @media (max-width: 1100px) {
    .sidebar { width: 72px; padding: 20px 8px; align-items: center; }
    .sidebar .brand { padding: 4px 0 22px; justify-content: center; }
    .sidebar .brand .name { display: none; }
    .sidebar a { justify-content: center; padding: 11px; font-size: 0; gap: 0; }
    .sidebar a svg { width: 19px; height: 19px; }
    .sidebar .sec-label { display: none; height: 14px; }
    .main { padding: 22px 18px 50px; }

    /* The blunt-force fix: force every hard-coded multi-column grid (KPI tiles, balance-tile rows,
       dashboard summary panels, org chart columns, DSCR calculator scenario cards, etc.) to reflow
       instead of squish. Inline styles otherwise beat any class-based rule regardless of source
       order, hence !important here — the only place in this stylesheet that uses it. */
    [style*="grid-template-columns"] { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; }

    .modal-body { grid-template-columns: 1fr !important; }
    .modal-viewer { border-right: none; border-bottom: 1px solid var(--border); }
  }

  @media (max-width: 700px) {
    [style*="grid-template-columns"] { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; }
    .topbar { align-items: flex-start; }
    .topbar h1 { font-size: 20px; }
    .main { padding: 18px 12px 44px; }
    .control-bar { padding: 10px 14px; }
  }