* { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family:var(--ui); background:var(--page-bg); color:var(--ink); padding:20px; }

  /* ── Tab Bar ── */
  .tabbar {
    background:var(--primary); border-radius:0;
    max-width:900px; margin:0 auto; display:flex; align-items:center;
    padding:0 18px; flex-wrap:wrap; gap:6px;
  }
  .section-toggle-btn:hover { color:rgba(255,255,255,.85) !important; }
  .iw-stat { display:flex; justify-content:space-between; align-items:center; padding:5px 0; font-size:12px; border-bottom:1px solid var(--hairline); }
  .iw-stat:last-child { border-bottom:none; }
  .iw-stat span { color:var(--muted); }
  .iw-stat strong { color:var(--ink); font-size:13px; }
  .iw-slider-row { margin-top:12px; padding-top:10px; border-top:1px solid var(--hairline); }
  .iw-slider-row label { display:inline; font-size:10.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; }
  .iw-slider-row .iw-slider-val {
    float:right; font-size:12px; font-weight:700; color:var(--primary);
    border:none; background:none; outline:none; text-align:right;
    font-family:var(--ui); padding:1px 3px; border-radius:4px;
    width:70px; cursor:text; transition:background .15s;
  }
  .iw-slider-row .iw-slider-val:hover { background:var(--surface-hover); }
  .iw-slider-row .iw-slider-val:focus { background:var(--focus-soft); width:60px; }
  .iw-slider-row input[type="range"] {
    width:100%; margin-top:8px; accent-color:var(--accent); cursor:pointer;
    -webkit-appearance:none; appearance:none; background:transparent; height:14px;
  }
  .iw-slider-row input[type="range"]::-webkit-slider-runnable-track {
    height:3px; background:var(--line); border-radius:2px;
  }
  .iw-slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance:none; appearance:none;
    width:13px; height:13px; border-radius:50%; background:var(--accent);
    margin-top:-5px; cursor:pointer; border:none;
  }
  .iw-slider-row input[type="range"]::-moz-range-track {
    height:3px; background:var(--line); border-radius:2px;
  }
  .iw-slider-row input[type="range"]::-moz-range-thumb {
    width:13px; height:13px; border-radius:50%; background:var(--accent);
    cursor:pointer; border:none;
  }
  .iw-down-helper { font-size:10.5px; color:var(--check); font-weight:600; margin-top:4px; }
  .iw-down-input {
    border:none; background:none; outline:none; text-align:right;
    font-family:var(--ui); font-size:13px; font-weight:700; color:var(--ink);
    padding:2px 4px; border-radius:4px; width:170px; cursor:text; transition:background .15s;
  }
  .iw-down-input:hover { background:var(--surface-hover); }
  .iw-down-input:focus { background:var(--focus-soft); text-align:left; width:140px; }
  .tab-btn {
    background:none; border:none; color:rgba(255,255,255,.55);
    font-family:var(--ui); font-size:12.5px; font-weight:600;
    padding:13px 18px; cursor:pointer; letter-spacing:.2px;
    border-bottom:3px solid transparent; transition:color .15s, border-color .15s;
  }
  .tab-btn:hover { color:rgba(255,255,255,.85); }
  .tab-btn.active { color:var(--on-primary); border-bottom-color:var(--accent); }
  .tab-utility-row {
    background:var(--utility-bar); padding:8px 18px; max-width:900px; margin:0 auto;
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  }
  .tab-utility-row span { font-size:11px; color:rgba(255,255,255,.5); }
  .tab-page { display:none; }
  .tab-page.active { display:block; }

  /* ── Sub-tabs (used inside Checklist tab: TRID to Close / File Submission) ── */
  .subtab-row {
    max-width:900px; margin:0 0 14px; padding:14px 0 0;   /* left-align (2026-07-31): Checklist + Milestones subtab row */
    display:flex; gap:8px;
  }
  .subtab-btn {
    background:var(--paper); border:1.5px solid var(--line); color:var(--slate);
    font-family:var(--ui); font-size:12px; font-weight:600;
    padding:8px 18px; border-radius:20px; cursor:pointer;
    letter-spacing:.2px; transition:all .15s;
  }
  .subtab-btn:hover { border-color:var(--accent); color:var(--ink); }
  .subtab-btn.active { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
  .subtab-page { display:none; }
  .subtab-page.active { display:block; }
  .subtab-empty-state {
    max-width:900px; margin-left:0; background:var(--paper); border-radius:0 0 10px 10px;   /* left-align (2026-07-31) */
    box-shadow:0 4px 24px rgba(26,39,68,.10); padding:60px 40px; text-align:center;
    color:var(--muted); font-size:13px;
  }

  /* ── Borrower Milestones — card layout (mirrors Borrower View's bullet cards) ── */
  .bm-card-list { display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
  .bm-card {
    display:flex; align-items:flex-start; gap:10px;
    border:1px solid var(--line); border-radius:6px; padding:10px 12px; background:var(--paper);
    transition:background .15s;
  }
  .bm-card:hover { background:var(--ground); }
  .bm-card .bm-check-col { display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:2px; flex-shrink:0; }
  .bm-card .bm-check-col .cb-label { font-size:8px; font-weight:700; color:var(--muted); letter-spacing:.5px; text-transform:uppercase; }
  .bm-card .bm-drag { display:flex; align-items:center; padding-top:2px; flex-shrink:0; }
  .bm-card .bm-body { flex:1; min-width:0; }
  .bm-card .bm-body .item-text { font-size:12px; color:var(--ink); line-height:1.5; outline:none; border-radius:3px; padding:1px 3px; }
  .bm-card .bm-body .item-text:focus { background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent); }
  .bm-card .bm-date-col { flex-shrink:0; padding-top:2px; position:relative; min-width:110px; text-align:right; }
  .bm-card .bm-date-col .bm-date-trigger {
    font-size:11.5px; color:var(--muted); cursor:pointer; border:none; background:none;
    font-family:var(--ui); padding:3px 4px; border-radius:4px; transition:all .15s;
    border-bottom:1.5px solid var(--line); white-space:nowrap;
  }
  .bm-card .bm-date-col .bm-date-trigger:hover { border-bottom-color:var(--accent); color:var(--slate); }
  .bm-card .bm-date-col .bm-date-trigger.has-date { color:var(--ink); font-weight:500; }
  .bm-card .bm-remove { flex-shrink:0; padding-top:2px; }

  /* ── Toolbar (legacy, kept for utility row styling reuse) ── */
  .toolbar {
    background:var(--primary); color:var(--on-primary); padding:10px 18px;
    border-radius:10px 10px 0 0; font-size:12px;
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    max-width:900px; margin:0 auto;
  }
  .toolbar span { opacity:.65; }
  .toolbar strong { opacity:1; font-weight:600; }
  .tb-btn {
    border:none; font-family:var(--ui); font-size:11px;
    font-weight:600; padding:6px 14px; border-radius:6px;
    cursor:pointer; letter-spacing:.3px; white-space:nowrap; transition:opacity .15s;
  }
  .tb-btn:hover { opacity:.85; }
  .tb-btn-gold  { background:var(--accent); color:var(--on-primary); }
  .tb-btn-teal  { background:var(--tb-teal); color:var(--on-primary); }
  .tb-btn-slate { background:var(--tb-slate); color:var(--on-primary); }
  .tb-btn-save  { background:var(--tb-save); color:var(--on-primary); }
  .tb-btn-load  { background:var(--tb-load); color:var(--tb-load-text); }
  .tb-right { margin-left:auto; display:flex; gap:8px; align-items:center; }

  /* ── Page ── */
  .page {
    background:var(--paper); width:100%; max-width:900px; margin-left:0;   /* left-align (2026-07-31): Checklist + Milestones cards hug left */
    padding:32px 40px 36px; border-radius:0 0 10px 10px;
    box-shadow:0 4px 24px rgba(26,39,68,.10);
  }

  /* ── Header ── */
  .header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; gap:20px; }
  .header-left h1 { font-size:26px; font-weight:700; color:var(--primary); letter-spacing:-.4px; line-height:1.1; }
  .logo-box {
    border:2px dashed var(--line); border-radius:8px; width:150px; min-height:70px;
    display:flex; align-items:center; justify-content:center;
    color:var(--muted); font-size:11px; text-align:center;
    cursor:pointer; transition:border-color .2s; overflow:hidden; flex-shrink:0;
  }
  .logo-box:hover { border-color:var(--accent); }
  .logo-box img { max-width:100%; max-height:80px; object-fit:contain; }
  #logo-input { display:none; }

  /* ── LO Banner ── */
  .lo-banner {
    background:var(--ground); border:1px solid var(--line); border-left:4px solid var(--accent);
    border-radius:6px; padding:12px 16px; margin-bottom:14px;
    display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr; gap:8px 16px;
  }
  .lo-field label { display:block; font-size:9px; font-weight:700; color:var(--muted); letter-spacing:1px; text-transform:uppercase; margin-bottom:2px; }
  .lo-field input {
    width:100%; border:none; border-bottom:1.5px solid var(--line); background:transparent;
    font-family:var(--ui); font-size:12px; font-weight:500; color:var(--ink);
    padding:2px 0 3px; outline:none; transition:border-color .2s;
  }
  .lo-field input:focus { border-bottom-color:var(--accent); }
  .lo-field input::placeholder { color:var(--muted); font-weight:400; }

  /* ── Address + Closing Date row ── */
  .address-row {
    display:grid; grid-template-columns:1fr auto; gap:10px 18px; align-items:end;
    margin-bottom:10px; padding:10px 16px;
    background:var(--ground); border-radius:6px; border:1px solid var(--line);
  }
  .address-row .party-field label { display:block; font-size:9px; font-weight:700; color:var(--muted); letter-spacing:1px; text-transform:uppercase; margin-bottom:2px; }
  .address-row .party-field input {
    width:100%; border:none; border-bottom:1.5px solid var(--line); background:transparent;
    font-family:var(--ui); font-size:13px; color:var(--ink);
    padding:3px 0 4px; outline:none; transition:border-color .2s;
  }
  .address-row .party-field input:focus { border-bottom-color:var(--accent); }
  .address-row .party-field input::placeholder { color:var(--muted); }

  /* Closing date field in address row */
  .closing-date-field { flex-shrink:0; min-width:200px; }
  .closing-date-field label { display:block; font-size:9px; font-weight:700; color:var(--muted); letter-spacing:1px; text-transform:uppercase; margin-bottom:2px; }
  .closing-date-trigger-wrap { position:relative; display:inline-block; width:100%; }
  .closing-date-trigger {
    width:100%; border:none; border-bottom:1.5px solid var(--line); background:transparent;
    font-family:var(--ui); font-size:13px; color:var(--muted);
    padding:3px 0 4px; outline:none; cursor:pointer; text-align:left;
    transition:border-color .2s; white-space:nowrap; display:block;
    overflow:hidden; text-overflow:ellipsis; min-width:0; max-width:100%;
  }
  .closing-date-trigger:hover { border-bottom-color:var(--accent); }
  .closing-date-trigger.has-date { color:var(--ink); font-weight:500; }
  .closing-date-popup {
    display:none; position:absolute; top:calc(100% + 4px); left:0;
    background:var(--paper); border:1.5px solid var(--line); border-radius:8px;
    box-shadow:0 6px 24px rgba(26,39,68,.14); z-index:300; padding:12px; min-width:220px;
  }
  .closing-date-popup.open { display:block; }

  /* ── Add person button ── */
  .add-person-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:16px; height:16px; border-radius:50%;
    border:1.5px solid var(--accent); background:none; color:var(--accent);
    font-size:13px; font-weight:700; line-height:1;
    cursor:pointer; padding:0; margin-left:5px;
    transition:background .15s, color .15s; vertical-align:middle;
  }
  .add-person-btn:hover { background:var(--accent); color:var(--on-primary); }
  .ld-field-with-add { position:relative; }
  .ld-field-with-add label { display:flex; align-items:center; justify-content:space-between; }

  /* Extra party field (same look as .party-field but inside extra-people div) */
  .extra-party-field { position:relative; }
  .extra-party-field label { display:flex; align-items:center; justify-content:space-between; font-size:9px; font-weight:700; color:var(--muted); letter-spacing:1px; text-transform:uppercase; margin-bottom:2px; }
  .extra-party-field .ep-value { font-size:13px; color:var(--ink); padding:3px 0 4px; border-bottom:1.5px solid var(--line); }
  .ep-remove {
    display:inline-flex; align-items:center; justify-content:center;
    width:16px; height:16px; border-radius:50%;
    border:1.5px solid var(--accent); background:none; color:var(--accent);
    font-size:8px; font-weight:700; line-height:1;
    cursor:pointer; padding:0; margin-left:5px;
    transition:background .15s, color .15s, border-color .15s; vertical-align:middle;
  }
  .ep-remove:hover { background:var(--ex); border-color:var(--ex); color:var(--on-status); }

  /* ── Party grid ── */
  .parties {
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px 18px;
    margin-bottom:20px; padding:14px 16px;
    background:var(--ground); border-radius:6px; border:1px solid var(--line);
  }
  .party-field label { display:block; font-size:9px; font-weight:700; color:var(--muted); letter-spacing:1px; text-transform:uppercase; margin-bottom:2px; }
  .party-field input {
    width:100%; border:none; border-bottom:1.5px solid var(--line); background:transparent;
    font-family:var(--ui); font-size:13px; color:var(--ink);
    padding:3px 0 4px; outline:none; transition:border-color .2s;
  }
  .party-field input:focus { border-bottom-color:var(--accent); }
  .party-field input::placeholder { color:var(--muted); }

  /* ── Section Label ── */
  .section-label {
    font-size:10px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
    color:var(--on-primary); background:var(--primary); padding:0; border-radius:5px;
    margin:14px 0 4px; display:flex; align-items:stretch; gap:0; user-select:none;
    overflow:hidden;
  }
  .section-label-left {
    display:flex; align-items:center; gap:8px;
    padding:7px 14px; flex:0 0 50%; min-width:0;
  }
  .section-label .gold-bar { width:3px; height:14px; background:var(--accent); border-radius:2px; flex-shrink:0; }
  .section-label-text {
    outline:none; cursor:text; user-select:text; border-radius:3px; padding:1px 4px;
    min-width:20px; transition:background .15s;
  }
  .section-label-text:hover { background:rgba(255,255,255,.1); }
  .section-label-text:focus { background:rgba(255,255,255,.15); box-shadow:0 0 0 1px rgba(201,168,76,.6); }
  .section-label-text:empty:before { content:attr(data-placeholder); opacity:.45; }
  /* Notes box: occupies right 50% of header, starts at 3rd quarter */
  .section-label-notes-wrap {
    flex:0 0 50%; display:flex; align-items:center;
    background:rgba(255,255,255,.08); border-left:1px solid rgba(255,255,255,.12);
    padding:4px 10px; position:relative;
  }
  .section-label-notes-wrap::before {
    content:'Notes / Timeline:';
    font-size:7.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    color:rgba(255,255,255,.45); white-space:nowrap; flex-shrink:0; margin-right:6px;
  }
  .section-label-notes {
    flex:1; background:transparent; border:none; outline:none;
    font-family:var(--ui); font-size:11px; font-weight:400;
    letter-spacing:0; text-transform:none; color:rgba(255,255,255,.85);
    caret-color:var(--on-primary); padding:2px 4px; border-radius:3px;
    transition:background .15s;
  }
  .section-label-notes::placeholder { color:rgba(255,255,255,.3); font-style:italic; }
  .section-label-notes:hover { background:rgba(255,255,255,.06); }
  .section-label-notes:focus { background:rgba(255,255,255,.1); }

  /* ── Condo section ── always visible on main page; toggle only affects Agent View ── */
  #condo-section { display:block; }

  /* ── Checklist ── */
  .checklist { width:100%; border-collapse:collapse; }
  .checklist thead th {
    font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    color:var(--muted); padding:5px 8px; text-align:center; border-bottom:1.5px solid var(--line);
  }
  .checklist thead th.item-col { text-align:left; }

  .col-drag { width:20px; }
  .col-yes  { width:72px; text-align:center; }
  .col-item { }
  .col-note { width:32px; text-align:center; }
  .col-date { width:110px; white-space:nowrap; }
  .col-rm   { width:26px; text-align:center; }

  /* Note/email template button */
  .note-btn {
    background:none; border:none; cursor:pointer; padding:3px 5px;
    color:var(--muted); opacity:.45; transition:opacity .15s, color .15s;
    font-size:13px; line-height:1; display:inline-flex; align-items:center;
  }
  .note-btn:hover { opacity:1; color:var(--accent); }
  .note-btn.has-template { opacity:.8; color:var(--accent); }
  .note-btn.has-note-content { color:var(--note); opacity:1; }
  .note-btn.has-note-content:hover { color:var(--note-hover); }
  #av-email-btn.has-note-content { color:var(--note); border-color:var(--note) !important; }
  #bv-email-btn.has-note-content { color:var(--note); border-color:var(--note) !important; }
  @media print {
    .av-toolbar { display:none !important; }
  }
  /* Yellow highlight — only lights up when the Notes variant has actual text entered,
     independent of whether the email template toggle itself is on/off */
  .note-btn.has-note-content { opacity:1; color:var(--note-label); }
  .note-btn.has-note-content svg { fill:var(--note-fill); stroke:var(--note-stroke); }

  /* Email template modal */
  #note-modal-overlay {
    display:none; position:fixed; inset:0; background:rgba(10,20,40,.6);
    z-index:800; align-items:center; justify-content:center;
  }
  #note-modal-overlay.open { display:flex; }
  #note-modal-box {
    background:var(--paper); border-radius:10px; width:660px; max-width:95vw;
    box-shadow:0 8px 40px rgba(0,0,0,.3); font-family:var(--ui);
    overflow:hidden;
  }
  #note-modal-box .nm-header {
    background:var(--primary); color:var(--on-primary); padding:12px 18px;
    display:flex; align-items:center; justify-content:space-between;
  }
  #note-modal-box .nm-header h3 { font-size:13px; font-weight:700; margin:0; }
  #note-modal-box .nm-header .nm-close {
    background:none; border:none; color:var(--on-primary); font-size:18px;
    cursor:pointer; opacity:.7; padding:0 2px; line-height:1;
  }
  #note-modal-box .nm-header .nm-close:hover { opacity:1; }
  #note-modal-box .nm-body { padding:18px 20px; }
  .nm-field { margin-bottom:14px; }
  .nm-field label {
    display:flex; align-items:center; justify-content:space-between;
    font-size:9px; font-weight:700; color:var(--muted);
    letter-spacing:1px; text-transform:uppercase; margin-bottom:5px;
  }
  .nm-field-row {
    display:flex; align-items:flex-start; gap:8px;
    border:1.5px solid var(--line); border-radius:6px; padding:8px 10px;
    background:var(--ground);
  }
  .nm-field-row input, .nm-field-row textarea {
    flex:1; border:none; background:transparent; font-family:var(--ui);
    font-size:12.5px; color:var(--ink); outline:none; resize:vertical;
  }
  .nm-field-row textarea { min-height:100px; line-height:1.6; }
  #nm-body p { margin:0 0 1em 0; }
  #nm-body p:last-child { margin-bottom:0; }
  #nm-body ul, #nm-body ol { padding-left:2em; margin:0 0 1em 0; }
  #nm-body ul:last-child, #nm-body ol:last-child { margin-bottom:0; }
  #nm-body li { margin:0; }
  .nm-copy-btn {
    flex-shrink:0; background:none; border:1.5px solid var(--info); color:var(--info);
    font-family:var(--ui); font-size:9px; font-weight:700;
    padding:3px 9px; border-radius:5px; cursor:pointer; white-space:nowrap;
    letter-spacing:.5px; text-transform:uppercase; transition:all .15s; margin-top:1px;
    display:inline-flex; align-items:center; gap:4px;
  }
  .nm-copy-btn::before { content:'⎘'; font-size:11px; font-weight:400; }
  .nm-copy-btn:hover { background:var(--info); color:var(--on-primary); }
  .nm-copy-btn.copied { background:var(--check); border-color:var(--check); color:var(--on-status); }
  .nm-copy-btn.copied::before { content:'✓'; }
  .nm-tb-btn {
    background:var(--paper); border:1px solid var(--line); border-radius:4px;
    font-family:var(--ui); font-size:12px; font-weight:600;
    padding:3px 7px; cursor:pointer; color:var(--ink); line-height:1;
    transition:background .12s, border-color .12s;
  }
  .nm-tb-btn:hover { background:var(--accent-soft); border-color:var(--accent); }
  .nm-tb-btn:active { background:var(--accent); color:var(--on-primary); }
  .nm-pill {
    font-family:var(--ui); font-size:10px; font-weight:700; letter-spacing:.4px;
    padding:4px 12px; border-radius:12px; cursor:pointer; border:1.5px solid var(--line);
    background:var(--paper); color:var(--slate); transition:all .15s;
  }
  .nm-pill:hover { border-color:var(--primary); color:var(--primary); }
  .nm-pill.nm-pill-active { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
  #note-modal-box .nm-footer {
    padding:10px 20px 16px; display:flex; justify-content:flex-end;
    border-top:1px solid var(--line);
  }

  #team-section .row { border-bottom:1px solid var(--line); transition:background .15s; }
  #team-section .row:hover { background:var(--ground); }
  #team-section .row.dragging { opacity:.45; background:var(--accent-soft); }
  #team-section .row.drag-over { border-top:2px solid var(--accent); }
  #team-section .row td { padding:7px 8px; vertical-align:middle; }
  #team-section .drag-handle { cursor:grab; color:var(--line); font-size:16px; width:20px; text-align:center; line-height:1; user-select:none; transition:color .15s; }
  #team-section .row:hover .drag-handle { color:var(--muted); }
  #team-section .drag-handle:active { cursor:grabbing; }
  #team-section .drag-handle.rop-open { color:var(--accent); }
  /* Two-icon cell: template + link — each icon sits in its own fixed-width slot
     (see .note-slot) so it never re-centers depending on which icon(s) are present.
     NOTE: do not set display:grid/flex directly on .col-note — it's a <td> and
     changing its display breaks the table's column-width layout algorithm. */
  .col-note { width:52px; text-align:center; white-space:nowrap; }
  .note-slot { display:inline-block; width:26px; vertical-align:middle; text-align:center; }
  /* Link icon — hidden until active */
  .link-icon-btn {
    background:none; border:none; cursor:pointer; padding:3px 4px;
    color:var(--accent); opacity:.85; transition:opacity .15s;
    font-size:13px; line-height:1; display:none; align-items:center;
  }
  .link-icon-btn.active { display:inline-flex; }
  .link-icon-btn:hover { opacity:1; }

  /* Completed checkbox */
  .cb-wrap { display:flex; align-items:center; justify-content:center; }
  input[type="checkbox"].yes-cb {
    appearance:none; -webkit-appearance:none; width:15px; height:15px;
    border:1.5px solid var(--line); border-radius:3px;
    cursor:pointer; position:relative; transition:all .15s; background:var(--paper);
  }
  input[type="checkbox"].yes-cb:checked { background:var(--check); border-color:var(--check); }
  input[type="checkbox"].yes-cb:checked::after {
    content:'✓'; position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%); color:var(--on-status); font-size:9px; font-weight:700;
  }

  /* Incomplete checkbox — visually distinct (amber) from Completed (green) */
  input[type="checkbox"].incomplete-cb {
    appearance:none; -webkit-appearance:none; width:15px; height:15px;
    border:1.5px solid var(--line); border-radius:3px;
    cursor:pointer; position:relative; transition:all .15s; background:var(--paper);
  }
  input[type="checkbox"].incomplete-cb:checked { background:var(--inprog); border-color:var(--inprog); }
  input[type="checkbox"].incomplete-cb:checked::after {
    content:'✕'; position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%); color:var(--on-status); font-size:8px; font-weight:700;
  }

  /* In-process badge (shows when in-process selected instead of date) */
  .inprocess-badge {
    display:inline-flex; align-items:center;
    font-size:11.5px; color:var(--slate); font-weight:400;
    white-space:nowrap; font-family:var(--ui);
    cursor:pointer;
  }

  /* Item text */
  .item-text { font-size:12px; color:var(--ink); outline:none; border-radius:3px; padding:1px 4px; min-width:60px; line-height:1.4; display:inline; }
  .item-text:focus { background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent); }

  /* ── Date picker (column) ── */
  .date-cell { position:relative; }
  .date-display {
    display:flex; align-items:center; justify-content:flex-end; cursor:pointer;
    font-size:11.5px; color:var(--muted);
    border-bottom:1.5px solid var(--line); padding:3px 4px;
    border-radius:2px; transition:border-color .2s;
    user-select:none; white-space:nowrap;
  }
  .date-display:hover { border-bottom-color:var(--accent); color:var(--slate); }
  .date-display.has-date { color:var(--ink); font-weight:500; }

  /* ── Shared popup styles ── */
  .date-picker-popup, .inline-date-popup {
    display:none; position:absolute;
    background:var(--paper); border:1.5px solid var(--line); border-radius:8px;
    box-shadow:0 6px 24px rgba(26,39,68,.14); z-index:200; padding:12px; min-width:220px;
  }
  .date-picker-popup { top:calc(100% + 4px); right:0; }
  .inline-date-popup { top:calc(100% + 4px); left:0; }
  .date-picker-popup.open, .inline-date-popup.open { display:block; }
  .dp-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  .dp-nav { background:none; border:none; cursor:pointer; color:var(--primary); font-size:16px; padding:2px 6px; border-radius:4px; transition:background .15s; }
  .dp-nav:hover { background:var(--ground); }
  .dp-month-label { font-size:12px; font-weight:700; color:var(--primary); font-family:var(--ui); }
  .dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
  .dp-day-header { text-align:center; font-size:9px; font-weight:700; color:var(--muted); letter-spacing:.5px; padding:2px 0; }
  .dp-day { text-align:center; font-size:11px; padding:5px 2px; border-radius:4px; cursor:pointer; color:var(--ink); transition:background .1s; font-family:var(--ui); border:none; background:none; }
  .dp-day:hover { background:var(--accent-soft); }
  .dp-day.selected { background:var(--primary); color:var(--on-primary); font-weight:600; }
  .dp-day.today { border:1.5px solid var(--accent); font-weight:600; }
  .dp-day.empty { cursor:default; }
  .dp-day.empty:hover { background:none; }
  .dp-clear { margin-top:8px; width:100%; text-align:center; font-size:10px; color:var(--muted); cursor:pointer; padding:3px; border-radius:4px; border:none; background:none; font-family:var(--ui); transition:color .15s; }
  .dp-clear:hover { color:var(--ex); }

  /* Top action row inside calendar popups: In Process + Today buttons */
  .dp-action-row {
    display:flex; gap:6px; margin-bottom:10px;
  }
  .dp-action-btn {
    flex:1; padding:6px 8px; border-radius:6px; cursor:pointer;
    font-family:var(--ui); font-size:10.5px; font-weight:700;
    letter-spacing:.3px; text-align:center; transition:all .15s;
    border:1.5px solid var(--line); background:var(--paper); color:var(--slate);
  }
  .dp-action-btn:hover { border-color:var(--accent); color:var(--ink); background:var(--accent-soft); }
  .dp-action-btn.dp-today-btn.active,
  .dp-action-btn.dp-today-btn:hover { border-color:var(--primary); color:var(--primary); background:var(--ground); }
  .dp-action-btn.dp-inprocess-btn {
    border-color:var(--inprog-line); color:var(--inprog); background:var(--inprog-soft);
  }
  .dp-action-btn.dp-inprocess-btn:hover { background:var(--inprog-soft-hover); border-color:var(--inprog); }
  .dp-action-btn.dp-inprocess-btn.active { background:var(--inprog); border-color:var(--inprog); color:var(--on-status); }

  /* ── Inline date trigger ── */
  .inline-date-wrap { display:inline-flex; align-items:center; gap:4px; position:relative; vertical-align:middle; margin-left:4px; }
  .inline-date-trigger {
    display:inline-flex; align-items:center;
    font-size:11px; font-family:var(--ui); color:var(--muted);
    border-bottom:1.5px solid var(--line); padding:1px 4px;
    cursor:pointer; border-radius:2px; transition:border-color .2s, color .2s;
    white-space:nowrap; background:none; border-top:none; border-left:none; border-right:none; outline:none;
  }
  .inline-date-trigger:hover { border-bottom-color:var(--accent); color:var(--slate); }
  .inline-date-trigger.has-date { color:var(--ink); font-weight:500; }

  /* ── Signing row ── */
  .signing-row-wrap { display:flex; flex-wrap:nowrap; align-items:baseline; gap:3px 4px; font-size:12px; color:var(--ink); line-height:1.9; padding-left:0; overflow:hidden; }
  .signing-label { font-weight:500; white-space:nowrap; }
  .signing-time-select, .signing-method-select {
    border:none; border-bottom:1.5px solid var(--line); background:transparent;
    font-family:var(--ui); font-size:11.5px; color:var(--slate);
    padding:0 2px; outline:none; cursor:pointer; transition:border-color .2s;
    -webkit-appearance:none; appearance:none;
  }
  .signing-time-select:focus, .signing-method-select:focus { border-bottom-color:var(--accent); }
  .signing-other-input {
    border:none; border-bottom:1.5px solid var(--line);
    font-family:var(--ui); font-size:11.5px; color:var(--slate);
    padding:0 4px; width:110px; background:transparent; outline:none; transition:border-color .2s;
  }
  .signing-other-input:focus { border-bottom-color:var(--accent); }

  /* Remove / Add */
  .remove-btn { background:none; border:none; cursor:pointer; color:var(--line); font-size:14px; line-height:1; padding:2px 4px; border-radius:4px; transition:all .15s; }
  .remove-btn:hover { color:var(--ex); background:var(--ex-soft); }
  .add-row-btn { margin-top:5px; background:none; border:1.5px dashed var(--line); color:var(--muted); font-family:var(--ui); font-size:11px; padding:4px 14px; border-radius:6px; cursor:pointer; transition:all .2s; }
  .add-row-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

  /* ── Toast ── */
  #toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(30px); background:var(--primary); color:var(--on-primary); padding:10px 22px; border-radius:8px; font-size:12px; font-weight:600; opacity:0; transition:all .3s; z-index:9999; pointer-events:none; }
  #toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

  /* ── Agent View Modal ── */
  /* ── Agent View styling (now rendered inside tab-page-agent) ── */
  #agent-modal { background:var(--paper); max-width:820px; margin:0 auto; border-radius:10px; padding:28px 32px; box-shadow:0 8px 40px rgba(0,0,0,.3); font-family:var(--ui); }
  .agent-toolbar { display:flex; gap:10px; justify-content:space-between; align-items:center; margin-bottom:18px; }
  .agent-toolbar-right { display:flex; gap:8px; }
  .agent-close-btn { background:var(--ex); color:var(--on-status); border:none; border-radius:6px; padding:6px 16px; font-family:var(--ui); font-size:12px; font-weight:600; cursor:pointer; }

  /* Condo toggle in agent modal */
  .agent-condo-wrap { display:flex; align-items:center; gap:8px; }
  .agent-condo-wrap span { font-size:11px; font-weight:600; color:var(--slate); }
  .av-condo-btn {
    border:1.5px solid var(--line); background:transparent;
    font-family:var(--ui); font-size:10px; font-weight:700;
    color:var(--muted); padding:3px 10px; border-radius:4px;
    cursor:pointer; transition:all .15s; letter-spacing:.3px;
  }
  .av-condo-btn.active-yes { background:var(--check); border-color:var(--check); color:var(--on-status); }
  .av-condo-btn.active-no  { background:var(--ex);    border-color:var(--ex);    color:var(--on-status); }

  /* Agent content */
  #agent-content { padding:32px; }
  #agent-content h1 { font-size:20px; font-weight:700; color:var(--primary); margin-bottom:2px; }
  #agent-content .av-header, #borrower-content .av-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; gap:20px; }
  #agent-content .av-logo, #borrower-content .av-logo { height:52px; width:auto; max-width:140px; object-fit:contain; display:block; }
  #agent-content .av-subtitle, #borrower-content .av-subtitle { font-size:13px; font-weight:600; color:var(--primary); margin-bottom:2px; }
  #agent-content .av-closing-date, #borrower-content .av-closing-date { font-size:13px; font-weight:600; color:var(--accent); margin-bottom:4px; }
  #borrower-content [contenteditable][data-placeholder]:empty:before {
    content:attr(data-placeholder); color:var(--muted); font-style:italic;
  }
  #agent-content .av-lo { background:var(--ground); border-left:4px solid var(--accent); border-radius:5px; padding:8px 12px; margin-bottom:8px; display:flex; flex-wrap:wrap; gap:4px 20px; font-size:11px; }
  #agent-content .av-lo span { color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; display:block; }
  #agent-content .av-lo strong { font-size:11.5px; color:var(--ink); }
  #agent-content .av-parties { display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px 12px; padding:7px 12px; background:var(--ground); border-radius:5px; margin-bottom:8px; font-size:10.5px; }
  #agent-content .av-parties .av-pf span { color:var(--muted); font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; display:block; }
  #agent-content .av-parties .av-pf strong { color:var(--ink); }
  #agent-content .av-section, #borrower-content .av-section { font-size:9px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--on-primary); background:var(--primary); padding:4px 10px; border-radius:4px; margin:8px 0 3px; display:flex; align-items:center; gap:6px; }
  #agent-content .av-section .gold-bar, #borrower-content .av-section .gold-bar { width:3px; height:12px; background:var(--accent); border-radius:2px; flex-shrink:0; }
  #agent-content table { width:100%; border-collapse:collapse; font-size:11px; }
  #agent-content table th { font-size:8px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); padding:3px 6px; text-align:center; border-bottom:1px solid var(--line); white-space:nowrap; }
  #agent-content table th.ic { text-align:left; }
  #agent-content table td { padding:4px 6px; border-bottom:1px solid var(--line); vertical-align:middle; font-size:11px; }
  #agent-content .av-check { width:14px; height:14px; border:1.5px solid var(--line); border-radius:3px; display:inline-flex; align-items:center; justify-content:center; font-size:8px; font-weight:700; }
  #agent-content .av-check.yes { background:var(--check); border-color:var(--check); color:var(--on-status); }
  #agent-content .av-inprog { font-size:11px; color:var(--slate); font-weight:400; }

  /* ── Loan Details Modal ── */
  /* ── Loan Details styling (now rendered inside tab-page-loan) ── */
  /* Six-column worksheet: min-width is the narrow floor, and columns grow past it (minmax 1fr) to fill a wide
     window. The floor = the grid's own minimum (120*5 + 250 = 850px of columns + 5*18 = 90px of gaps = 940px)
     plus the chrome inside #ld-modal, which is border-box: .ld-body padding 48 + .ld-card padding 32 + .ld-card
     borders 5 = 85px, so 940 + 85 ≈ 1025, rounded to 1040 for a few px of slack against sub-pixel rounding.
     This is DOWN from 1400px — the wider columns made 1400 leave dead space at the narrow end. Any horizontal
     scroll is the BROWSER's, at the window edge — no inner scrollbar; nothing from <body> down clips
     horizontally (verified: no overflow on body / html / .app-shell / .app-main / #team-section), so a modal
     wider than the viewport pushes the document past the window and the browser shows its own bar. #ld-modal
     keeps overflow:hidden only to clip its OWN rounded corners; being the wide element, it never traps it. */
  #ld-modal {
    background:var(--paper); min-width:1040px; margin:0 auto; border-radius:10px;
    box-shadow:0 8px 40px rgba(0,0,0,.3); font-family:var(--ui); overflow:hidden;
  }
  #ld-modal .ld-body { padding:24px; }

  /* Qualifying + Scenario & Planning get the same wide treatment as the worksheet. #lo-section is narrow
     (900px) for the calculators; goLoTab adds .lo-wide only for those two tabs, which both show
     #lotab-page-scenario-host — so wide mode and the calculator pages are mutually exclusive and the
     calculators need no cap of their own. Wide, the shared paper card (#lo-content-card) drops its background
     so the scenario tool renders on --ground with its OWN cards (its native, unembedded look).
     The min-width:1400px floor is the KEY — it lives on #lo-content-card, the card that holds the wide
     content, exactly as #ld-modal carries the worksheet's floor. The card holds 1400px and overflows its
     section visibly (no ancestor clips — body / html / .app-shell / .app-main / #lo-section / .lotab-page /
     #lo-scenario-host / .wrap all set no overflow), so the DOCUMENT grows and the BROWSER scrolls; nothing
     inner. Below 1400px the page holds its shape and scrolls instead of compressing.
     Note: .wrap still caps at 1380px (qualify) / 1780px (scenario/client), so Scenario compresses between
     1400 and 1780 before it scrolls — accepted for now (do not raise the floor to 1780 unilaterally). */
  #lo-section { max-width:900px; margin-left:0; }   /* left-align: calculators keep 900px but hug left (2026-07-31) */
  #lo-section.lo-wide { max-width:none; }
  #lo-section.lo-wide #lo-content-card { background:none; box-shadow:none; border-radius:0; min-width:1400px; }

  /* ── Light card sections (replaces dark .ld-section bars) ── */
  .ld-card {
    background:var(--ground); border:1px solid var(--line); border-left:4px solid var(--accent);
    border-radius:6px; padding:14px 16px; margin-bottom:14px;
  }
  .ld-card .ld-grid { margin-bottom:0; }
  .ld-card .ld-field input { background:transparent; }

  /* Prevent inputs from overflowing their grid column while allowing popups to escape */
  .ld-card-grid > *, .ld-grid > * { min-width:0; }
  .ld-card-grid input, .ld-grid input { min-width:0; max-width:100%; box-sizing:border-box; overflow:hidden; text-overflow:ellipsis; }

  /* Section header inside modal (legacy dark bar, unused but kept for safety) */
  .ld-section {
    font-size:9px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
    color:var(--on-primary); background:var(--primary); padding:4px 12px; border-radius:4px;
    margin:14px 0 10px; display:flex; align-items:center; gap:8px;
  }
  .ld-section:first-child { margin-top:0; }
  .ld-section .gold-bar { width:3px; height:12px; background:var(--accent); border-radius:2px; flex-shrink:0; }

  /* Field grid inside modal */
  .ld-grid { display:grid; gap:14px 18px; margin-bottom:4px; align-items:end; }
  .ld-grid-2 { grid-template-columns:1fr 1fr; }
  .ld-grid-3 { grid-template-columns:1fr 1fr 1fr; }
  .ld-grid-4 { grid-template-columns:1fr 1fr 1fr 1fr; }
  .ld-grid-5 { grid-template-columns:1fr 1fr 1fr 1fr 1fr; }

  /* Unified card grid — single continuous grid spanning all rows inside a card. Six columns, each
     minmax(floor, Nfr). The floor holds the column at narrow widths; the fr SHARE governs how it grows on a
     wide window. First/Middle/Last/Preferred/Phone each take 0.5fr and Email 1.5fr, so once past the floors
     the growth ratio is 1:1:1:1:1:3 — Email ends up ~3x a name/phone column instead of equal to it (the
     old all-1fr made every column grow the same, so on a wide screen they looked identical). Floors are
     unchanged (120*5 + 250 = 850 + 90 gaps = 940 grid min -> #ld-modal 1040), so this changes growth, not the
     narrow end. A person row is First | Middle | Last | Preferred | Phone | Email; non-person rows use
     fewer/spanned columns and END SHORT (Transaction Details 120|120|240, Title/Escrow Company span 2 = 240,
     Team Email span 2, Seller span 3) — trailing columns stay empty by design. */
  .ld-card-grid {
    display:grid;
    grid-template-columns:minmax(120px,0.5fr) minmax(120px,0.5fr) minmax(120px,0.5fr) minmax(120px,0.5fr) minmax(120px,0.5fr) minmax(250px,1.5fr);
    gap:14px 18px; align-items:end;
  }
  /* Every person row leads with a .ld-field-with-add cell (the labelled First cell). Forcing it to column 1
     makes each person begin on a FRESH grid row, so a preceding short row (Team Email span 2, Seller span 3,
     Title/Escrow Company span 2) ends short with empty trailing columns instead of the next person's fields
     wrapping up into them. This is what puts Title/Escrow Company alone on row 1 and the officer/assistant on
     clean six-column rows below. */
  .ld-card-grid .ld-field-with-add { grid-column-start: 1; }

  .ld-field { min-width:0; overflow:visible; }
  .ld-field label {
    display:block; font-size:9px; font-weight:700; color:var(--muted);
    letter-spacing:1px; text-transform:uppercase; margin-bottom:3px;
  }
  .ld-field input {
    width:100%; border:none; border-bottom:1.5px solid var(--line); background:transparent;
    font-family:var(--ui); font-size:12.5px; color:var(--ink);
    padding:3px 0 4px; outline:none; transition:border-color .2s;
  }
  .ld-field input:focus { border-bottom-color:var(--accent); }
  .ld-field input::placeholder { color:var(--muted); font-weight:400; }   /* muted + light, matching .lo-field — so "Optional" doesn't read as a filled value */

  /* Same-company toggle */
  .ld-same-toggle {
    display:flex; align-items:center; gap:8px;
    margin:8px 0 14px; font-size:11.5px; color:var(--slate);
    cursor:pointer; user-select:none;
  }
  .ld-same-toggle input[type="checkbox"] {
    appearance:none; -webkit-appearance:none; width:15px; height:15px;
    border:1.5px solid var(--line); border-radius:3px;
    cursor:pointer; position:relative; transition:all .15s; background:var(--paper); flex-shrink:0;
  }
  .ld-same-toggle input[type="checkbox"]:checked { background:var(--check); border-color:var(--check); }
  .ld-same-toggle input[type="checkbox"]:checked::after {
    content:'✓'; position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%); color:var(--on-status); font-size:9px; font-weight:700;
  }

  /* (ld-save-bar removed — page now saves via global Save/Load buttons) */

  /* ── App Shell / Left Sidebar ── */
  .app-shell { display:flex; align-items:flex-start; min-height:100vh; background:var(--ground); }
  .app-sidebar {
    width:230px; flex-shrink:0; background:var(--sb-bg); min-height:100vh;
    position:sticky; top:0; display:flex; flex-direction:column; padding:18px 0 30px;
    overflow-y:auto; max-height:100vh; box-shadow:2px 0 14px rgba(20,30,60,.05); border-right:1px solid var(--sb-border);
  }
  .app-sidebar-brand {
    display:flex; align-items:center; gap:9px; width:100%; text-align:left;
    background:none; border:none; cursor:pointer;
    padding:8px 18px 16px; font-family:var(--ui); color:var(--sb-brand); font-size:13.5px; font-weight:700; letter-spacing:.2px;
    border-bottom:1px solid var(--sb-border); margin-bottom:10px; transition:opacity .15s;
  }
  .app-sidebar-brand:hover { opacity:.75; }
  .app-sidebar-brand-icon {
    flex-shrink:0; color:var(--sb-icon-fg); background:var(--sb-icon-bg); border-radius:50%; padding:5px; box-sizing:content-box;
  }
  .app-sidebar-brand-text { min-width:0; }
  /* The `.app-sidebar-brand small` rule styled #sidebar-client-label, the open File's borrower
     rendered inside the ACCOUNT button. Both removed 2026-07-19 — see updateSidebarBrandName. */
  .app-sidebar-group-label {
    font-family:var(--ui); font-size:9.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
    color:var(--sb-muted); padding:16px 18px 6px;
  }
  .app-sidebar-item {
    display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
    font-family:var(--ui); font-size:12.5px; font-weight:600; color:var(--sb-item);
    padding:9px 18px; border-left:3px solid transparent; transition:all .15s;
  }
  .app-sidebar-item:hover { color:var(--sb-item-active); background:var(--sb-hover-bg); }
  .app-sidebar-item.active { color:var(--sb-item-active); background:var(--sb-active-bg); border-left-color:var(--sb-accent); font-weight:700; }
  .app-sidebar-item.home-item { font-weight:700; font-size:13px; padding:10px 18px; }
  .app-main { flex:1; min-width:0; padding:26px 24px 60px; }

  /* Old horizontal nav bars are superseded by the sidebar */
  .section-toggle-bar, .tabbar { display:none !important; }

  /* ── Home page ── */
  #home-section { display:none; }
  .home-header { max-width:900px; margin:4px auto 20px; display:flex; align-items:center; justify-content:space-between; }
  .home-header h1 { font-family:var(--ui); font-size:21px; color:var(--primary); margin:0; }
  .home-new-btn {
    background:var(--accent); border:none; color:var(--on-primary); font-family:var(--ui); font-size:12.5px; font-weight:700;
    padding:10px 18px; border-radius:8px; cursor:pointer; letter-spacing:.2px; transition:opacity .15s;
  }
  .home-new-btn:hover { opacity:.88; }
  .home-new-btn:disabled { opacity:.4; cursor:default; }   /* settings Save: disabled until dirty / after save */
  .home-search-wrap { max-width:900px; margin:0 auto 14px; position:relative; }
  .home-search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
  .home-search-wrap input {
    width:100%; box-sizing:border-box; padding:10px 14px 10px 38px; border:1.5px solid var(--line); border-radius:10px;
    font-family:var(--ui); font-size:13px; color:var(--ink); outline:none; background:var(--paper); transition:border-color .15s;
  }
  .home-search-wrap input:focus { border-color:var(--accent); }
  /* .home-client-* card rules MOVED to styles/shell.css (2026-07-21). The unified Home (renderHome,
     js/scenario.js) is merge-owned and paints BOTH regions, including inside #lo-scenario-host —
     which the containment invariant forbids status.css from styling (tests/containment.test.js). The
     search-box rules above stay here: they are support-only (#home-section, never in the host). */

  /* ── Account Settings / Contacts ── */
  #settings-section { display:none; }
  .settings-header { max-width:900px; margin:4px auto 18px; display:flex; align-items:center; justify-content:space-between; }
  .settings-header h1 { font-family:var(--ui); font-size:21px; color:var(--primary); margin:0; }
  .settings-back-btn {
    background:none; border:1.5px solid var(--line); color:var(--slate); font-family:var(--ui);
    font-size:12px; font-weight:600; padding:8px 14px; border-radius:8px; cursor:pointer;
  }
  .settings-tabs { max-width:900px; margin:0 auto 16px; display:flex; gap:8px; }
  .settings-tab-btn {
    background:var(--paper); border:1.5px solid var(--line); color:var(--slate); font-family:var(--ui);
    font-size:12px; font-weight:600; padding:8px 16px; border-radius:20px; cursor:pointer;
  }
  .settings-tab-btn.active { background:var(--accent); border-color:var(--accent); color:var(--on-primary); }
  .settings-panel { max-width:900px; margin:0 auto; display:none; }
  .settings-panel.active { display:block; }
  .settings-card { background:var(--paper); border-radius:10px; box-shadow:0 2px 10px rgba(20,30,60,.06); padding:20px; margin-bottom:16px; }
  .settings-card label { display:block; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
  .settings-card input[type="text"] {
    width:100%; max-width:360px; border:none; border-bottom:1.5px solid var(--line); background:transparent;
    font-family:var(--ui); font-size:13px; color:var(--ink); padding:6px 0; outline:none;
  }
  .contact-category-pills { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
  .contact-pill {
    background:var(--paper); border:1.5px solid var(--line); color:var(--slate); font-family:var(--ui);
    font-size:11.5px; font-weight:600; padding:6px 14px; border-radius:16px; cursor:pointer;
  }
  .contact-pill.active { background:var(--accent); border-color:var(--accent); color:var(--on-primary); }

  /* ── Debt Snowball vs Avalanche comparison ── */
  .ds-compare-grid {
    display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:8px; align-items:center;
    padding:7px 0; border-top:1px solid var(--hairline);
  }
  .ds-compare-header {
    border-top:none; padding-top:12px; padding-bottom:4px;
    font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted);
  }
  .ds-compare-label { font-size:12px; color:var(--ink); }
  .ds-compare-val { font-size:13.5px; font-weight:700; color:var(--primary); }
  .ds-callout {
    margin-top:12px; padding:11px 13px; background:var(--callout-bg); border-radius:7px;
    font-size:11.5px; color:var(--ink); line-height:1.55;
  }
  .ds-order-tab {
    background:var(--paper); border:1.5px solid var(--line); color:var(--slate); font-family:var(--ui);
    font-size:11px; font-weight:600; padding:5px 12px; border-radius:14px; cursor:pointer;
  }
  .ds-order-tab.active { background:var(--accent); border-color:var(--accent); color:var(--on-primary); }
  .contact-row {
    background:var(--paper); border-radius:8px; box-shadow:0 1px 6px rgba(20,30,60,.05); padding:12px 16px;
    display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;
  }
  .contact-row-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .contact-row-name { font-size:13px; font-weight:700; color:var(--ink); }
  .contact-row-meta { font-size:11px; color:var(--muted); }
  .contact-row-actions { display:flex; gap:6px; flex-shrink:0; }
  .contact-row-actions button {
    background:none; border:1.5px solid var(--line); color:var(--slate); font-family:var(--ui);
    font-size:11px; font-weight:600; padding:5px 10px; border-radius:6px; cursor:pointer;
  }
  .contact-row-actions button:hover { border-color:var(--accent); color:var(--primary); }
  .contact-pick-btn {
    background:none; border:none; cursor:pointer; font-size:12px; padding:0 2px; opacity:.6; vertical-align:middle;
  }
  .contact-pick-btn:hover { opacity:1; }
  #contact-modal-overlay { display:none; position:fixed; inset:0; background:rgba(10,20,40,.55); z-index:950; align-items:center; justify-content:center; }
  .cm-box { background:var(--paper); border-radius:10px; width:520px; max-width:94vw; max-height:84vh; display:flex; flex-direction:column; box-shadow:0 8px 40px rgba(0,0,0,.3); font-family:var(--ui); overflow:hidden; }
  .cm-head { background:var(--cm-head-bg); border-bottom:1.5px solid var(--accent); padding:12px 18px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
  .cm-head-title { font-size:13px; font-weight:700; color:var(--primary); }
  .cm-close { background:none; border:none; color:var(--primary); opacity:.5; cursor:pointer; font-size:18px; padding:0; line-height:1; }
  .cm-search-wrap { padding:12px 16px 0; flex-shrink:0; }
  .cm-search-wrap input {
    width:100%; padding:7px 10px; border:1.5px solid var(--line); border-radius:6px;
    font-family:var(--ui); font-size:12px; outline:none; box-sizing:border-box;
  }
  .cm-list { flex:1; overflow-y:auto; padding:10px 16px; display:flex; flex-direction:column; gap:6px; min-height:80px; }
  .cm-list-row {
    border:1.5px solid var(--line); border-radius:8px; padding:9px 12px; cursor:pointer; transition:border-color .15s;
  }
  .cm-list-row:hover { border-color:var(--accent); }
  .cm-list-empty { text-align:center; color:var(--muted); font-size:12px; padding:20px; }
  .cm-form { display:none; padding:14px 16px; border-top:1px solid var(--line); flex-shrink:0; }
  .cm-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
  .cm-form-grid input, .cm-form-grid select {
    width:100%; box-sizing:border-box; border:1.5px solid var(--line); border-radius:6px; padding:7px 9px;
    font-family:var(--ui); font-size:12px; outline:none;
  }
  .cm-foot { padding:10px 16px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-shrink:0; }
  .cm-btn { font-family:var(--ui); font-size:12px; font-weight:600; padding:6px 14px; border-radius:6px; cursor:pointer; }
  .cm-btn-primary { background:var(--accent); border:none; color:var(--on-primary); font-weight:700; }
  .cm-btn-ghost { border:1.5px solid var(--line); background:none; color:var(--slate); }

  /* ── Print ── */
  @media print {
    body { background:var(--paper); padding:0; }
    .app-sidebar { display:none; }
    .app-shell { display:block; }
    .app-main { padding:0; }
    .toolbar { display:none; }
    .page { box-shadow:none; border-radius:0; padding:16px 24px 24px; max-width:100%; }
    .remove-btn, #team-section .drag-handle, .add-row-btn { display:none !important; }
    .logo-box { border:none; }
    #team-section .row:hover { background:transparent; }
    .date-picker-popup, .inline-date-popup, .closing-date-popup { display:none !important; }
    .date-display, .inline-date-trigger, .closing-date-trigger { border-bottom-color:transparent; }
    .signing-time-select, .signing-method-select, .signing-other-input { border-bottom-color:transparent; }
  }