* { box-sizing: border-box; margin: 0; }
:root {
  --navy: #002e5d;
  --navy-2: #003e7e;
  --ink: #1c2733;
  --mut: #5c6b7a;
  --line: #d9e0e7;
  --bg: #f4f6f8;
  --card: #ffffff;
  --begun: #ffe3b3;
  --one: #cfe3f7;
  --both: #d3efc4;
  --declined: #dcdcdc;
  --dnc: #f6c9c9;
  --deceased: #9aa0a6;
  --owe: #7030a0;
  --paid-bg: #ffe95c;
  --warn: #b3261e;
}
html, body { height: 100%; }
body { font: 14px/1.45 "Segoe UI", system-ui, sans-serif; color: var(--ink); background: var(--bg); }
.hidden { display: none !important; }
a { color: var(--navy-2); }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; }
input:focus, select:focus, textarea:focus { outline: 2px solid #7fa8d9; outline-offset: 0; }

/* ---------- top bar ---------- */
#topbar { display: flex; align-items: center; gap: 18px; padding: 10px 18px; background: var(--navy); color: #fff; flex-wrap: wrap; position: sticky; top: 0; z-index: 20; }
#topbar .brand { font-size: 17px; font-weight: 600; white-space: nowrap; }
.wave-chip { background: #ffffff26; border-radius: 10px; padding: 2px 9px; font-size: 12px; font-weight: 600; margin-left: 4px; }
#nav { display: flex; gap: 2px; flex-wrap: wrap; }
#nav a { color: #d7e3f0; text-decoration: none; padding: 6px 11px; border-radius: 6px; font-weight: 500; }
#nav a:hover { background: #ffffff1d; color: #fff; }
#nav a.on { background: #ffffff2e; color: #fff; }
.topright { margin-left: auto; display: flex; gap: 8px; align-items: center; }
#globalSearch { width: 230px; border: none; }
.chip-btn { background: #ffffff2e; color: #fff; border: none; border-radius: 14px; padding: 5px 12px; font-weight: 600; }
.chip-btn:hover { background: #ffffff44; }

main { padding: 18px; max-width: 1240px; margin: 0 auto; }

/* ---------- generic ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.card h2 { font-size: 15px; margin-bottom: 10px; color: var(--navy); }
.card h3 { font-size: 13.5px; margin: 12px 0 6px; }
.btn { background: var(--navy-2); color: #fff; border: none; border-radius: 6px; padding: 6px 13px; font-weight: 500; }
.btn:hover { background: #00509e; }
.btn.sec { background: #e8edf2; color: var(--ink); }
.btn.sec:hover { background: #dbe3ea; }
.btn.danger { background: #b3261e; }
.btn.small { padding: 3px 9px; font-size: 12.5px; }
.muted { color: var(--mut); }
.small { font-size: 12.5px; }
.row-flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }

/* ---------- login ---------- */
#overlay { position: fixed; inset: 0; background: #0b1c2ccc; z-index: 50; display: flex; align-items: center; justify-content: center; }
.modal { background: #fff; border-radius: 12px; padding: 26px 30px; width: 400px; max-width: 92vw; max-height: 86vh; overflow: auto; box-shadow: 0 12px 40px #0006; }
.modal h1 { font-size: 19px; color: var(--navy); margin-bottom: 4px; }
.modal .sub { color: var(--mut); margin-bottom: 16px; }
.modal input[type=password], .modal input[type=text] { width: 100%; padding: 9px 10px; margin-bottom: 12px; }
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 14px; }
.who-grid button { padding: 10px; border: 1px solid var(--line); background: #f6f8fa; border-radius: 8px; font-weight: 600; }
.who-grid button:hover { background: #e8f0f8; border-color: #7fa8d9; }
.err { color: var(--warn); margin-bottom: 10px; }

/* ---------- toast ---------- */
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 8px; z-index: 60; box-shadow: 0 6px 18px #0005; max-width: 80vw; }

/* ---------- home tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: box-shadow .1s; }
.tile:hover { box-shadow: 0 3px 10px #00000018; }
.tile .n { font-size: 24px; font-weight: 700; }
.tile .t { color: var(--mut); font-size: 12.5px; margin-top: 2px; }
.tile.warn .n { color: var(--warn); }
.tile.good .n { color: #23730f; }
.tile.pay .n { color: var(--owe); }
.progress-outer { background: #e4e9ee; border-radius: 8px; height: 14px; overflow: hidden; margin: 6px 0 4px; }
.progress-inner { background: linear-gradient(90deg, #4b8ed6, #23730f); height: 100%; }
.ra-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ra-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; }
.ra-card:hover { box-shadow: 0 3px 10px #00000018; }
.ra-card .nm { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.ra-card .st { color: var(--mut); font-size: 12.5px; }

/* ---------- table ---------- */
.tblwrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); padding: 8px 10px; border-bottom: 2px solid var(--line); background: #fafbfc; position: sticky; top: 0; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--navy-2); background: #eef3f8; }
th.sortable.sorted { color: var(--navy); }
td { padding: 6px 10px; border-bottom: 1px solid #eef1f4; vertical-align: middle; }
tr.rowlink { cursor: pointer; }
tr.rowlink:hover td { filter: brightness(.96); }
tr.rc-begun td { background: var(--begun); }
tr.rc-one td { background: var(--one); }
tr.rc-both td { background: var(--both); }
tr.rc-declined td { background: var(--declined); }
tr.rc-dnc td { background: var(--dnc); }
tr.rc-deceased td { background: var(--deceased); color: #fff; }
tr.rc-deceased td a { color: #fff; }
tr.rc-scam td { background: #f0b6dd; }

.stchip { display: inline-block; border-radius: 10px; padding: 1px 9px; font-size: 12px; font-weight: 600; border: 1px solid #0002; background: #fff; }
.stchip.ns { color: var(--mut); }
.stchip.begun { background: #ffb84d; color: #5c3800; }
.stchip.completed { background: #6fc24a; color: #143603; }
.paychip { display: inline-block; border-radius: 10px; padding: 1px 8px; font-size: 11.5px; font-weight: 700; }
.paychip.owe { background: var(--owe); color: #fff; }
.paychip.paid { background: var(--paid-bg); color: #574f00; }
.flagchip { display: inline-block; border-radius: 4px; padding: 0 6px; font-size: 11px; font-weight: 700; margin-right: 3px; }
.flagchip.rev { background: #fff3cd; color: #7a5b00; border: 1px solid #e0c76b; }
.flagchip.bounce { background: #ffe0e0; color: #8a1c1c; border: 1px solid #e2a0a0; }
.flagchip.letter { background: #e2e8ff; color: #22337a; border: 1px solid #aab8ee; }
.flagchip.sync { background: #e0f4ff; color: #045d84; border: 1px solid #93cfe8; }
.flagchip.scam { background: #fad2ef; color: #8a0f6b; border: 1px solid #dfa3cd; }

/* ---------- list toolbar ---------- */
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.toolbar input[type=search] { width: 240px; }
.bulkbar { background: #fff8e1; border: 1px solid #e7d491; border-radius: 8px; padding: 7px 12px; margin-bottom: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- detail ---------- */
.det-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.det-head h1 { font-size: 21px; color: var(--navy); }
.det-head .idtag { font-size: 15px; color: var(--mut); font-weight: 600; }
.banner { border-radius: 8px; padding: 9px 14px; font-weight: 700; margin-bottom: 12px; }
.banner.dnc { background: var(--dnc); color: #7a1010; }
.banner.declined { background: var(--declined); color: #444; }
.banner.deceased { background: var(--deceased); color: #fff; }
.banner.scam { background: #f0b6dd; color: #71085a; }
.det-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 980px) { .det-grid { grid-template-columns: 1fr; } }
.field-grid { display: grid; grid-template-columns: 150px 1fr; gap: 6px 10px; align-items: center; }
.field-grid label { color: var(--mut); font-size: 12.5px; text-align: right; }
.field-grid input { width: 100%; }
.wavebox { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: #fafcff; }
.wavebox .who { font-weight: 700; margin-bottom: 6px; }
.linkline { display: flex; gap: 6px; align-items: center; margin: 6px 0; }
.linkline input { flex: 1; font-size: 12px; color: var(--mut); }
.note { border-left: 3px solid var(--line); padding: 6px 10px; margin-bottom: 8px; background: #fbfcfd; border-radius: 0 6px 6px 0; position: relative; }
.note .meta { font-size: 12px; color: var(--mut); margin-bottom: 2px; }
.note.w5 { border-left-color: #c9a86a; background: #fdfaf3; }
.note .del { position: absolute; top: 4px; right: 8px; border: none; background: none; color: #b0b8c0; font-size: 14px; }
.note .del:hover { color: var(--warn); }
.note .editbtn { border: none; background: none; color: #8fa0b0; font-size: 11.5px; cursor: pointer; margin-left: 8px; text-decoration: underline; }
.note .editbtn:hover { color: var(--navy-2); }
.forever { background: #fff9e6; border: 1px solid #ecd98a; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.forever h3 { margin-top: 0; color: #7a5b00; }
.forever textarea { width: 100%; min-height: 54px; }
textarea.notebox { width: 100%; min-height: 60px; }
.legacybox { background: #f4f2ee; border: 1px solid #ddd6c8; border-radius: 8px; padding: 9px 12px; font-size: 12.5px; color: #5d574a; }
.checks label { display: inline-flex; align-items: center; gap: 5px; margin-right: 14px; font-size: 13px; cursor: pointer; }

/* ---------- io ---------- */
.io-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .io-grid { grid-template-columns: 1fr; } }
.io-card select { max-width: 180px; }
.io-res { margin-top: 8px; font-size: 12.5px; }
.io-res.ok { color: #23730f; }
.io-res.bad { color: var(--warn); }

/* ---------- key ---------- */
.keyrow { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--mut); margin-top: 8px; }
.keyrow span { display: inline-flex; align-items: center; gap: 5px; }
.swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid #0002; display: inline-block; }