/* Loan-Pitch Pro theme: neutral blue / teal. Fonts stay the bundled "LOP Sans" (web fonts are not loaded). Green = savings / done, red = warnings, yellow only marks OCR cells to check. */
:root {
  --navy:#0b3954; --navy-deep:#072a3e; --navy-700:#0f4c6e; --blue:#0a6a99; --blue-600:#085a83; --teal:#14b8a6; --teal-dark:#0f766e;
  --navy-500:#0a6a99; --navy-100:#d5e8f0; --navy-50:#e9f4f8;
  --text:#222222; --text-2:#444444; --muted:#5d5d5d; --line:#d8e5ec; --line-2:#b5c9d4; --ctl:#7a93a3;
  --bg:#e8f2f5; --bg-2:#d8e9ee; --card:#ffffff; --sand:#fffbf2; --gold:#f5b93c;
  --green:#1f9d55; --green-text:#137a45; --red:#c12506; --red-bg:#fdf4f2;
  --flag:#fff3b0; --flagline:#e0b400; --radius:14px;
  --focus:0 0 0 3px rgba(10,106,153,.30); --focus-dark:0 0 0 3px rgba(255,255,255,.85);
  --stripe:linear-gradient(90deg, #0a6a99 0, #14b8a6 100%);
  --shadow:0 1px 2px rgba(11,57,84,.06), 0 6px 20px rgba(11,57,84,.08);
  --font:"LOP Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
[hidden] { display:none !important; }
* { box-sizing:border-box; }
html { scroll-padding-top:84px; }
html, body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 var(--font); -webkit-font-smoothing:antialiased; }
body { min-height:100vh; background:linear-gradient(180deg, var(--bg-2) 0, var(--bg) 320px) no-repeat, var(--bg); display:flex; flex-direction:column; }
body > .layout { flex:1 0 auto; width:100%; }
a { color:var(--blue); }
a:hover { color:var(--navy); }
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.ico { width:18px; height:18px; flex:none; vertical-align:-3px; }
.ico-lg { width:22px; height:22px; }
kbd { font:600 12px/1 var(--font); border:1px solid var(--line-2); border-bottom-width:2px; border-radius:5px; padding:2px 6px; background:#fff; color:var(--navy); }

/* ---------- buttons ---------- */
button, .btn { font:inherit; font-size:15px; border:1px solid var(--line-2); background:#fff; color:var(--navy); border-radius:9px; padding:8px 15px; font-weight:500;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; transition:background .12s, border-color .12s, box-shadow .12s, color .12s, transform .06s; }
button:hover, .btn:hover { border-color:var(--blue); background:var(--navy-50); }
button:active, .btn:active { transform:translateY(1px); }
button:focus-visible, .btn:focus-visible, .btn:focus-within:has(input:focus-visible), [tabindex]:focus-visible, summary:focus-visible { outline:none; box-shadow:var(--focus); }
button.primary { background:var(--blue); color:#fff; border-color:var(--blue); font-weight:600; box-shadow:0 1px 2px rgba(11,57,84,.25), 0 2px 8px rgba(10,106,153,.22); }
button.primary:hover { background:var(--navy); border-color:var(--navy); }
button.primary:focus-visible { box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--blue); }
button.ghost { background:transparent; border-color:transparent; color:var(--blue); }
button.ghost:hover { background:var(--navy-50); border-color:transparent; color:var(--navy); }
button.quiet, .btn.quiet { background:transparent; border-color:transparent; color:var(--text-2); }
button.quiet:hover, .btn.quiet:hover { background:var(--navy-50); color:var(--navy); border-color:transparent; }
button.danger { color:var(--red); border-color:#efc3bf; }
button.big { font-size:16px; padding:12px 22px; border-radius:10px; }
button:disabled, button:disabled:hover { opacity:.45; cursor:not-allowed; background:inherit; box-shadow:none; transform:none; }
button.primary:disabled { background:var(--blue); }
.icon-btn { width:40px; height:40px; padding:0; border-color:transparent; background:transparent; color:var(--text-2); border-radius:10px; }
.icon-btn:hover { background:var(--navy-50); color:var(--navy); border-color:transparent; }

/* ---------- form controls ---------- */
input[type=text], input[type=date], textarea, select { font:inherit; font-size:16px; font-weight:400; width:100%; padding:10px 12px; border:1px solid var(--ctl); border-radius:9px; background:#fff; color:inherit; transition:border-color .12s, box-shadow .12s, background .12s; }
input[type=text]:hover, input[type=date]:hover, textarea:hover, select:hover { border-color:var(--blue); }
input[type=text]::placeholder, textarea::placeholder { color:#66707c; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--blue); box-shadow:var(--focus); }
input:disabled { background:#eef2f6; color:#66707c; }
input[type=checkbox], input[type=radio] { accent-color:var(--blue); }
input[type=checkbox] { width:18px; height:18px; margin:0; flex:none; }
input[type=checkbox]:focus-visible { outline:none; box-shadow:var(--focus); }
label { display:block; font-weight:600; font-size:14px; color:var(--navy); }
label > input, label > textarea, label > select { margin-top:6px; font-weight:400; }
.field { margin:0 0 18px; min-width:0; }
.field > label, .field > .lbl { margin-bottom:6px; }
.lbl { display:block; font-weight:600; font-size:14px; color:var(--navy); margin-bottom:6px; }
.opt { font-weight:400; color:var(--muted); font-size:13px; margin-left:4px; }
label.inline { display:flex; align-items:flex-start; gap:10px; font-weight:500; font-size:15px; color:var(--text); margin:12px 0 4px; cursor:pointer; }
label.inline input { margin-top:3px; }
label.inline.small { font-size:14px; color:var(--text-2); }
label.inline.big { font-size:16px; }
.indent { margin-left:28px !important; }
.muted { color:var(--muted); font-weight:400; }
.small { font-size:13.5px; }
code { background:var(--navy-50); color:var(--navy); padding:0 4px; border-radius:4px; font-size:.92em; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.grid3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:0 16px; }
.grid4 { display:grid; grid-template-columns:repeat(4, 1fr); gap:0 14px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.grow { flex:1 1 200px; }

/* segmented control (radio group) */
.seg { display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; background:var(--navy-100); border-radius:11px; box-shadow:inset 0 1px 2px rgba(11,57,84,.10); }
.seg label { position:relative; display:flex; align-items:center; padding:8px 16px; font-size:15px; font-weight:500; color:var(--text-2); cursor:pointer; border-radius:8px; margin:0; transition:background .12s, color .12s; }
.seg label input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.seg label:hover { color:var(--navy); background:rgba(255,255,255,.55); }
.seg label:has(input:checked) { background:var(--blue); color:#fff; font-weight:700; box-shadow:0 1px 3px rgba(11,57,84,.30); }
.seg label:has(input:focus-visible) { box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--blue); }
.seg.small label { padding:6px 12px; font-size:14px; }

/* hints (quiet, inline) */
.hint { color:var(--muted); font-size:13.5px; margin:6px 0 0; line-height:1.45; }
.hint:empty { display:none; }
.hints:empty { display:none; }
.hints .hint { position:relative; padding-left:16px; }
.hints .hint::before { content:''; position:absolute; left:2px; top:.55em; width:7px; height:7px; border-radius:50%; background:#8fa6bd; }
.hint.warn { color:var(--red); }
.hints .hint.warn::before { background:var(--red); }
.hint.ok { color:var(--muted); }
.hints .hint.ok::before { background:var(--green); }
.info-block { color:var(--text-2); }

/* ---------- top bar (navy band, white logo pill, brand-blue stripe) ---------- */
.topbar { position:sticky; top:0; z-index:30; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 28px 14px; background:var(--navy); color:#fff; flex-wrap:wrap; box-shadow:0 2px 12px rgba(7,42,62,.28); }
.topbar::after { content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--stripe); }
.topbar .brand { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.logo-pill { display:inline-flex; align-items:center; background:#fff; border-radius:12px; padding:6px 14px; box-shadow:0 1px 3px rgba(0,0,0,.25); flex:none; }
.logo-pill img { display:block; height:34px; width:auto; }
.brand-title { display:flex; align-items:center; gap:14px; }
.brand-title::before { content:''; width:1px; height:28px; background:rgba(255,255,255,.28); }
.topbar .brand strong { font-size:17px; color:#fff; letter-spacing:-.01em; font-weight:600; }
.badge { display:inline-flex; align-items:center; gap:6px; color:#dbe8f5; font-size:13px; padding:3px 10px; border-radius:20px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); }
.badge .ico { width:14px; height:14px; }
.topbar .actions { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.topbar .quiet, .topbar .icon-btn { color:#e6eef7; }
.topbar .quiet:hover, .topbar .icon-btn:hover { background:rgba(255,255,255,.14); color:#fff; border-color:transparent; }
.topbar button:focus-visible, .topbar .btn:focus-visible, .topbar .btn:focus-within:has(input:focus-visible) { box-shadow:var(--focus-dark); }
.setup-note { max-width:1416px; margin:16px 32px 0; padding:10px 16px; font-size:14.5px; color:var(--text-2); background:var(--sand); border:1px solid #f0dca6; border-left:4px solid var(--gold); border-radius:10px; }
@media (min-width:1481px) { .setup-note { margin-left:auto; margin-right:auto; width:calc(100% - 64px); } }
.setup-note::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--red); margin-right:8px; vertical-align:1px; }

/* ---------- layout ---------- */
.layout { display:grid; grid-template-columns:minmax(0, 660px) minmax(0, 1fr); gap:36px; max-width:1480px; margin:0 auto; padding:24px 32px 48px; align-items:start; }
.inputs { min-width:0; }

/* stepper: white card, filled navy active step, branded progress line */
.stepper { position:relative; margin:4px 0 20px; background:var(--card); border-radius:var(--radius); padding:8px 8px 16px; box-shadow:var(--shadow); }
.stepper ol { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; position:relative; }
.progress-track { position:absolute; left:16px; right:16px; bottom:7px; height:4px; background:var(--navy-100); border-radius:4px; }
.progress-fill { height:100%; width:25%; background:var(--stripe); border-radius:4px; transition:width .25s ease; }
.stepper button { width:100%; justify-content:flex-start; border:0; background:transparent; border-radius:10px; padding:9px 10px; gap:10px; font-size:15.5px; font-weight:500; color:var(--muted); box-shadow:none; }
.stepper button:hover:not([aria-disabled=true]) { background:var(--navy-50); color:var(--navy); }
.stepper button .num { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; border:2px solid var(--line-2); font-weight:700; font-size:14px; color:var(--muted); background:#fff; flex:none; }
.stepper button.done .num { border-color:var(--blue); background:var(--blue); color:#fff; }
.stepper button.done { color:var(--navy); }
.stepper button[aria-selected=true] { background:var(--navy); color:#fff; font-weight:700; box-shadow:0 2px 8px rgba(11,57,84,.30); }
.stepper button[aria-selected=true] .num { background:#fff; border-color:#fff; color:var(--navy); }
.stepper button[aria-selected=true]:hover { background:var(--navy); color:#fff; }
.stepper button:focus-visible { box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--blue); }
.stepper button[aria-disabled=true] { cursor:default; opacity:.7; }
.stepper button[aria-disabled=true]:hover { background:transparent; }

/* step panel */
.step { background:var(--stripe) top/100% 4px no-repeat, var(--card); border-radius:var(--radius); padding:32px 30px 12px; box-shadow:var(--shadow); }
.step h2 { margin:0 0 20px; font-size:23px; font-weight:700; color:var(--navy); letter-spacing:-.01em; outline:none; }
.step h3 { margin:26px 0 12px; font-size:15px; font-weight:700; color:var(--blue); text-transform:uppercase; letter-spacing:.05em; }
.step h3 .opt { text-transform:none; letter-spacing:0; }
.step h3 .opt { font-weight:400; }
.step-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 0 8px; }
.span-all { grid-column:1 / -1; margin:-10px 0 16px; }
.step-nav .step-count { flex:1; text-align:center; }
.step-nav #btnNext { min-width:190px; }

/* product-dependent visibility */
body.is-heloc .refi-only, body:not(.is-heloc) .heloc-only { display:none !important; }
body:not(.prog-fha) .prog-fha-only, body:not(.prog-va) .prog-va-only { display:none !important; }
.program-note { margin:-6px 0 18px; }
.prog-panel { margin:4px 0 18px; padding:16px 18px 14px; background:var(--navy-50); border:1px solid var(--navy-100); border-left:4px solid var(--blue); border-radius:10px; }
.prog-panel h3 { margin:0 0 6px; }
.prog-panel .field { margin-bottom:6px; }
.exempt-help { margin:4px 0 0; }
.exempt-help summary { color:var(--blue); font-weight:500; font-size:13.5px; }
.exempt-help .exempt-hint { margin-top:4px; }

/* more options */
section.more { margin:10px 0 18px; border-top:1px solid var(--line); }
.more-title { margin:22px 0 0 !important; font-size:18px !important; color:var(--navy) !important; text-transform:none !important; letter-spacing:0 !important; }
.more-body { padding:2px 0 4px; }
.more-body h3:first-child { margin-top:14px; }

/* ---------- debts ---------- */
.client-field { max-width:420px; }
.drop { border:2px dashed #8fb0d1; border-radius:12px; padding:24px 18px; text-align:center; background:linear-gradient(180deg, #f3f8fd, var(--navy-50)); cursor:pointer; transition:background .15s, border-color .15s; }
.drop:hover { border-color:var(--blue); background:var(--navy-50); }
.drop:focus-visible, .drop.over { background:var(--navy-100); border-color:var(--blue); outline:none; box-shadow:var(--focus); }
.drop-main { font-size:16px; margin-bottom:6px; }
.drop .link { display:inline; color:var(--blue); text-decoration:underline; font-weight:600; font-size:inherit; cursor:pointer; }
.progress { position:relative; height:24px; margin-top:12px; background:var(--navy-100); border-radius:12px; overflow:hidden; }
.progress .bar { position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg, #8fb6dc, #7cc9d1); transition:width .2s; }
.progress .ptext { position:relative; font-size:13px; line-height:24px; }
.replace-opt { margin:10px 0 0; }
.ocr-result { display:flex; gap:14px; align-items:flex-start; margin:14px 0 0; padding:12px; background:var(--navy-50); border:1px solid var(--navy-100); border-radius:10px; font-size:14.5px; }
.ocr-result img { max-width:170px; max-height:110px; border-radius:6px; cursor:zoom-in; background:#fff; box-shadow:0 0 0 1px var(--line); }
.ocr-result .ok { color:var(--green-text); font-weight:600; }
.ocr-result .bad { color:var(--red); font-weight:600; }

.table-wrap { overflow-x:auto; margin-top:16px; }
table.debts { width:100%; border-collapse:collapse; font-size:15px; }
table.debts th { text-align:left; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--navy); padding:9px 6px; background:var(--navy-50); border-bottom:2px solid var(--navy-100); }
table.debts th:first-child { border-radius:9px 0 0 0; }
table.debts th:last-child { border-radius:0 9px 0 0; }
table.debts th.num { text-align:right; }
table.debts th:first-child { text-align:center; }
table.debts td { padding:2px 2px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.debts tbody tr:hover td { background:#f5f9fd; }
table.debts td input[type=text] { padding:7px 8px; border-radius:7px; border-color:transparent; background:transparent; font-size:15px; }
table.debts td input[type=text]:hover { border-color:var(--line-2); background:#fff; }
table.debts td input[type=text]:focus { border-color:var(--blue); background:#fff; }
table.debts td input.num { text-align:right; font-variant-numeric:tabular-nums; }
table.debts td.c-pay { text-align:center; width:56px; }
table.debts td.c-pay input { width:19px; height:19px; vertical-align:middle; }
table.debts td.c-cred { min-width:160px; }
table.debts td.c-bal, table.debts td.c-pmt { width:136px; }
table.debts td.c-del { width:36px; text-align:center; }
table.debts td.c-del button { width:30px; height:30px; padding:0; border:0; color:#66707c; background:transparent; font-size:18px; border-radius:7px; }
table.debts td.c-del button:hover { color:var(--red); background:var(--red-bg); }
table.debts tr.kept td input[type=text] { color:#66707c; }
table.debts .flag, table.debts td input.flag { background:var(--flag) !important; border-color:var(--flagline) !important; }
table.debts tfoot td { font-weight:700; color:var(--navy); padding:10px 8px; font-variant-numeric:tabular-nums; border-bottom:0; }
table.debts tfoot tr:first-child td { border-top:2px solid var(--navy-100); background:var(--navy-50); }
table.debts tfoot tr:first-child td:first-child { border-radius:0 0 0 9px; }
table.debts tfoot tr:first-child td:last-child { border-radius:0 0 9px 0; }
table.debts tfoot tr.keptrow td { color:var(--muted); font-weight:500; padding-top:6px; background:transparent; }
table.debts tfoot td.num { text-align:right; }
table.debts tfoot tr:first-child td.empty { background:transparent; border-top:0; border-radius:0; padding:14px 0 6px; }
.empty-card { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:22px 20px 20px; border-radius:12px; background:linear-gradient(180deg, #fff, var(--navy-50)); border:1px solid var(--navy-100); color:var(--text-2); font-weight:400; font-size:15px; }
.empty-card .empty-ico { width:56px; height:56px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 6px var(--navy-100); margin-bottom:8px; }
.empty-card .empty-ico svg { width:30px; height:30px; }
.empty-card strong { display:block; color:var(--navy); font-size:18px; }
#debtHints { margin-top:8px; }
.table-actions { margin-top:12px; }
.table-actions .grow { flex:1 1 100%; margin-top:2px; }
details.paste { margin:16px 0 18px; }
details summary { cursor:pointer; color:var(--blue); font-weight:600; font-size:15px; }
details.paste textarea { margin-top:10px; font-family:ui-monospace, Consolas, monospace; font-size:13px; }

/* ---------- terms ---------- */
.terms { display:grid; gap:8px; }
.term-row { display:grid; grid-template-columns:130px 200px 1fr; align-items:center; gap:14px; }
.term-row label.inline { margin:0; align-items:center; font-weight:600; }
.term-row label.inline input { margin-top:0; }
.term-row input[type=text] { padding:9px 12px; }
.term-row .muted { font-size:14px; }
.term-row .lbl { margin:0; }
#rateNote { margin-top:10px; }

/* ---------- extra payments ---------- */
.extra-section { margin-top:4px; padding-bottom:10px; }
.extra-panel { margin:10px 0 0 28px; }
.extra-grid { display:grid; grid-template-columns:230px 1fr; gap:0 20px; align-items:start; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { border-radius:20px; padding:6px 14px; font-weight:600; font-size:14.5px; background:#fff; border:1px solid var(--line-2); color:var(--navy); }
.chip:hover { border-color:var(--blue); background:var(--navy-50); color:var(--navy); }
.chip.on { background:var(--blue); border-color:var(--blue); color:#fff; }
.chip.on:hover { background:var(--navy); border-color:var(--navy); }
.chip.custom.on::after { content:' ×'; }
.chip-add { margin-top:10px; }
.chip-add input { width:120px; padding:7px 10px; }
.chip-add button { padding:7px 14px; }
table.extra { width:100%; border-collapse:collapse; margin-top:6px; font-size:14px; background:#fff; border-radius:10px; overflow:hidden; }
table.extra th, table.extra td { border-bottom:1px solid var(--line); padding:8px 8px; text-align:center; }
table.extra th { color:var(--navy); background:var(--navy-50); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
table.extra td:first-child, table.extra th:first-child { text-align:left; font-weight:600; white-space:nowrap; }
table.extra th.prim, table.extra td.prim { background:var(--navy-100); }
table.extra .pay { display:block; font-weight:700; }
table.extra .time { display:block; color:var(--blue); font-weight:700; }
table.extra .std .time { color:var(--muted); font-weight:500; }

/* ---------- download step ---------- */
.download-bar { display:flex; flex-direction:column; gap:10px; align-items:flex-start; margin-bottom:6px; }
.split { position:relative; display:inline-flex; }
.split > button.primary:first-child { border-radius:10px 0 0 10px; padding-left:26px; padding-right:24px; font-size:17px; }
.split > button.caret { border-radius:0 10px 10px 0; padding:12px 12px; border-left:1px solid rgba(255,255,255,.35); }
.menu { position:absolute; top:calc(100% + 6px); left:0; z-index:40; min-width:320px; background:#fff; border-radius:12px; padding:6px; border-top:3px solid var(--teal); box-shadow:0 12px 32px rgba(7,42,62,.22), 0 0 0 1px rgba(11,57,84,.10); }
.menu button { display:flex; width:100%; justify-content:flex-start; border:0; background:transparent; color:var(--text); padding:9px 12px; border-radius:8px; font-size:15px; box-shadow:none; }
.menu button:hover, .menu button:focus-visible { background:var(--navy-50); color:var(--navy); box-shadow:none; }
.menu button .fn { margin-left:auto; color:var(--muted); font-size:12.5px; padding-left:14px; }
.menu-sep { height:1px; background:var(--line); margin:6px 4px; }
.menu-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--blue); padding:4px 12px 2px; }
.block-error { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--red-bg); color:var(--red); border-radius:10px; padding:10px 14px; font-size:14.5px; font-weight:500; margin:0 0 16px; }
.block-error button { padding:5px 12px; font-size:14px; }
ul.checklist { list-style:none; padding:0; margin:0; }
ul.checklist li { position:relative; padding:7px 0 7px 22px; font-size:14.5px; color:var(--text-2); border-bottom:1px solid var(--line); }
ul.checklist li::before { content:''; position:absolute; left:3px; top:14px; width:8px; height:8px; border-radius:50%; background:#8fa6bd; }
ul.checklist li.warn::before { background:var(--red); }
ul.checklist li.warn { color:var(--text); }
ul.checklist li.ok::before { background:var(--green); }
ul.checklist li button.fix { border:0; background:transparent; color:var(--blue); padding:0 4px; font-size:14px; font-weight:600; text-decoration:underline; margin-left:6px; }
table.numbers { width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums; }
table.numbers th, table.numbers td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:right; }
table.numbers tbody tr:nth-child(even) td { background:#f6f9fc; }
table.numbers th:first-child, table.numbers td:first-child { text-align:left; color:var(--text-2); }
table.numbers thead th { color:var(--navy); background:var(--navy-50); font-weight:700; font-size:13px; }

/* ---------- preview (framed panel with navy title band) ---------- */
.preview { position:sticky; top:84px; min-width:0; }
.preview-card { background:var(--card); border-radius:var(--radius); padding:0; overflow:hidden; box-shadow:var(--shadow); }
.preview-head { display:flex; flex-direction:column; gap:10px; margin:0; padding:14px 16px 12px; background:var(--navy); border-bottom:4px solid transparent; border-image:var(--stripe) 1; }
.preview-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#cfe0f0; }
.preview-card > .preview-msg, .preview-card > .canvas-host { margin:16px; }
.tabs { display:flex; flex-wrap:wrap; gap:4px; }
.tabs button { border:0; background:transparent; border-radius:8px; padding:6px 12px; font-size:14px; color:var(--text-2); }
.tabs button:hover { background:var(--navy-50); color:var(--navy); }
.tabs button.on { background:var(--navy); color:#fff; }
.preview-head .tabs button { color:#e6eef7; background:rgba(255,255,255,.08); }
.preview-head .tabs button:hover { background:rgba(255,255,255,.18); color:#fff; }
.preview-head .tabs button.on { background:#fff; color:var(--navy); font-weight:600; }
.preview-head .tabs button:focus-visible { box-shadow:var(--focus-dark); }
.preview-msg { color:var(--muted); font-size:15px; }
.preview-msg:empty { display:none; }
.preview-msg:not(:empty) { padding:44px 24px 40px; text-align:center; background:linear-gradient(180deg, #fff, var(--navy-50)); border:2px dashed #8fb0d1; border-radius:12px; color:var(--text-2); }
.preview-msg:not(:empty)::before { content:''; display:block; width:64px; height:64px; margin:0 auto 14px; border-radius:50%; box-shadow:0 0 0 6px var(--navy-100);
  background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11.5 12 4l8.5 7.5'/%3E%3Cpath d='M5.5 10v9.5h13V10'/%3E%3Cpath d='M10 19.5v-5h4v5'/%3E%3C/svg%3E") center/34px no-repeat; }
.canvas-host { max-height:calc(100vh - 230px); overflow:auto; border-radius:10px; background:var(--bg-2); padding:14px; text-align:center; box-shadow:inset 0 1px 3px rgba(11,57,84,.14); }
.canvas-host:empty { display:none; }
.canvas-host canvas { width:100%; max-width:600px; height:auto; background:#fff; box-shadow:0 2px 12px rgba(7,42,62,.22); border-radius:2px; }

/* ---------- settings drawer ---------- */
dialog.settings { padding:0; border:0; color:var(--text); }
dialog.drawer { position:fixed; inset:0 0 0 auto; margin:0; height:100vh; max-height:100vh; width:min(760px, 100vw); max-width:100vw; border-radius:16px 0 0 16px; overflow:hidden; box-shadow:-10px 0 40px rgba(7,42,62,.28); background:var(--bg); }
dialog.drawer[open] { animation:drawer-in .2s ease-out; }
@keyframes drawer-in { from { transform:translateX(40px); opacity:.4; } to { transform:none; opacity:1; } }
dialog.settings form { display:flex; flex-direction:column; height:100%; }
dialog::backdrop { background:rgba(7,42,62,.45); }
.dlg-head { padding:18px 24px 0; background:var(--navy); color:#fff; border-bottom:4px solid transparent; border-image:var(--stripe) 1; }
.dlg-title-row { display:flex; align-items:center; justify-content:space-between; }
.dlg-head h2 { margin:0; font-size:20px; color:#fff; }
.dlg-head h2 .muted { color:#cfe0f0; }
.dlg-head .icon-btn { color:#e6eef7; }
.dlg-head .icon-btn:hover { background:rgba(255,255,255,.14); color:#fff; }
.dlg-head .icon-btn:focus-visible { box-shadow:var(--focus-dark); }
.dlg-head .tabs { margin:12px 0 0; gap:2px; }
.dlg-head .tabs button { border-radius:8px 8px 0 0; padding:9px 14px; font-size:14.5px; color:#cfe0f0; border-bottom:3px solid transparent; }
.dlg-head .tabs button:hover { background:rgba(255,255,255,.12); color:#fff; }
.dlg-head .tabs button.on { background:transparent; color:#fff; font-weight:700; border-bottom-color:var(--teal); }
.dlg-head .tabs button:focus-visible { box-shadow:var(--focus-dark); }
.dlg-body { padding:20px 24px; overflow:auto; flex:1; background:var(--bg); }
.dlg-body section > * + * { margin-top:14px; }
.dlg-body h3 { margin:22px 0 8px; font-size:15px; color:var(--blue); text-transform:uppercase; letter-spacing:.05em; }
.dlg-body .grid2, .dlg-body .grid3, .dlg-body .grid4 { gap:14px 16px; }
.dlg-body p { color:var(--text-2); }
.dlg-body .muted { color:var(--muted); }
.dlg-foot { display:flex; justify-content:flex-end; align-items:center; gap:10px; padding:14px 24px; border-top:1px solid var(--line-2); background:#fff; box-shadow:0 -4px 14px rgba(11,57,84,.06); }
.dlg-foot .muted { margin-right:auto; }
.logo-box { border:2px dashed #8fb0d1; border-radius:10px; padding:16px; text-align:center; background:#fff; }
.logo-box img { max-width:100%; max-height:124px; }
.preview-lines { background:#fff; border:1px solid var(--line-2); border-left:4px solid var(--teal); border-radius:10px; padding:12px; font-size:13px; color:var(--text-2); text-align:center; }
.preview-lines div:first-child { font-weight:700; }
.disc-field { margin-top:12px; }
.disc-field textarea { font-size:13.5px; line-height:1.45; }
dialog.imgdlg { max-width:96vw; max-height:94vh; border:0; border-radius:12px; }
dialog.imgdlg img { max-width:90vw; max-height:80vh; image-rendering:auto; }

/* ---------- app footer ---------- */
.appfoot { flex:none; text-align:center; padding:18px 20px 26px; font-size:13.5px; color:var(--muted); }
.appfoot::before { content:''; display:block; width:56px; height:3px; margin:0 auto 12px; border-radius:3px; background:var(--stripe); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .badge-txt { display:none; } .brand-title::before { display:none; } }
@media (max-width: 999px) {
  .layout { grid-template-columns:1fr; gap:24px; padding:18px 18px 40px; }
  .preview { position:static; }
  .canvas-host { max-height:80vh; }
  .topbar { padding:10px 18px 14px; }
  .setup-note { margin:14px 18px 0; padding:8px 14px; }
}
@media (max-width: 640px) {
  .grid2, .grid3, .grid4 { grid-template-columns:1fr 1fr; }
  .step { padding:20px 16px 8px; }
  .stepper .txt { display:none; }
  .stepper button { justify-content:center; }
  .term-row { grid-template-columns:110px 1fr; }
  .term-row > span:last-child { grid-column:2; }
  .extra-grid { grid-template-columns:1fr; }
  .extra-panel { margin-left:0; }
  .badge { display:none; }
  .logo-pill img { height:28px; }
  .topbar .brand strong { font-size:15px; }
}

.print-area { display:none; }
@media print {
  @page { size: letter portrait; margin: 0.35in; }
  body { background:#fff; }
  .appfoot { display:none !important; }
  body > *:not(.print-area) { display:none !important; }
  .print-area { display:block !important; }
  .print-area img { display:block; margin:0 auto; max-width:100%; max-height:10.2in; object-fit:contain; page-break-after:always; break-after:page; }
  .print-area img:last-child { page-break-after:auto; break-after:auto; }
}

/* ---------- subscription gate / lock screen ---------- */
body.gate-pending > *:not(#lock):not(script) { visibility:hidden; }
body.locked > *:not(#lock):not(script):not(svg) { display:none !important; }
.lock { flex:1 0 auto; display:flex; align-items:center; justify-content:center; padding:32px 16px; }
.lock-card { width:100%; max-width:520px; background:var(--card); border-radius:18px; box-shadow:var(--shadow); padding:32px 32px 26px; border-top:5px solid var(--teal); }
.lock-logo { display:block; margin:0 0 18px; height:38px; width:auto; }
.lock h1 { font-size:24px; line-height:1.25; margin:0 0 8px; color:var(--navy); }
.lock-msg { color:var(--text-2); margin:0 0 18px; }
.lock-cta { text-align:center; margin:6px 0 4px; }
.lock-cta button { width:100%; }
.lock-cta .muted { margin-top:8px; }
.lock-or { display:flex; align-items:center; gap:12px; margin:22px 0 14px; color:var(--muted); font-size:14px; }
.lock-or::before, .lock-or::after { content:''; flex:1; height:1px; background:var(--line); }
.lock-login label { margin-bottom:0; }
.lock-login input[type=email] { flex:1 1 220px; font:inherit; font-size:16px; padding:10px 12px; border:1px solid var(--ctl); border-radius:9px; }
.lock-login input[type=email]:focus { outline:none; border-color:var(--blue); box-shadow:var(--focus); }
.lock-login .row { margin-top:6px; }
.foot-links { margin-top:6px; }
.setup-note strong { color:var(--red); }

/* optional Est. monthly interest column (Debts step checkbox) */
table.debts th.c-int, table.debts td.c-int { display:none; }
table.debts.show-int th.c-int, table.debts.show-int td.c-int { display:table-cell; }
table.debts td.c-int { width:130px; text-align:right; padding-right:10px; font-variant-numeric:tabular-nums; color:var(--text-2); }
table.debts tfoot td.c-int { color:var(--navy); }
.est-int-opt { margin:12px 0 2px; }

/* cancel-retention modal */
.modal-back { position:fixed; inset:0; background:rgba(11,35,52,.55); display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000; }
.modal-back[hidden] { display:none; }
.modal-card { background:var(--card); border-radius:16px; box-shadow:var(--shadow); max-width:520px; width:100%; padding:26px 28px 24px; border-top:5px solid var(--teal); }
.modal-card h2 { margin:0 0 10px; color:var(--navy); font-size:24px; }
.modal-card p { margin:0 0 16px; color:var(--text-2); line-height:1.5; }
.modal-actions { display:flex; flex-direction:column; gap:10px; }
.modal-actions button { width:100%; padding:12px 16px; font-size:16px; }
.modal-card .hint.warn:empty { display:none; }