/* ======================================================
   app.css — SettleBot page-specific styles
   All styles that were previously in per-template <style>
   blocks live here. Change here → reload to see updates.
   ====================================================== */

/* ======================================================
   1) SHARED UTILITIES
   ====================================================== */

/* Filter form label (messages, scheduled_payments) */
.cl-filter-label {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cl-muted);
  margin: 0;
}
.cl-filter-select { font-size: .85rem; }

/* Color utilities */
.cl-muted { color: var(--cl-muted); }
.cl-gold  { color: var(--cl-gold); }
.cl-green { color: var(--cl-green-l, #4ecb82); }

/* Disabled button appearance (for <span> masquerading as disabled button) */
.btn-cl-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
/* Small muted hint / empty-state text */
.cl-hint-text { font-size: .85rem; color: var(--cl-muted); }
/* Small muted body text (inline lists, footnotes) */
.cl-text-sm      { font-size: .82rem; color: var(--cl-muted); }
.cl-text-sm-dark { font-size: .78rem; color: var(--cl-dark-muted); margin: .15rem 0 0; }
/* Modal subtitle (dark header subtext) */
.cl-modal-sub { font-size: .78rem; color: var(--cl-dark-muted); margin: .15rem 0 0; }
/* Inline list item title */
.cl-list-item-title { font-size: .88rem; font-weight: 600; color: var(--cl-text); }
.cl-list-item-meta  { font-size: .72rem; color: var(--cl-muted); margin-top: .1rem; }
/* Gold link */
.cl-link-gold { color: var(--cl-gold); text-decoration: none; }
.cl-link-gold:hover { color: var(--cl-gold-l); }
/* Stale label */
.cl-stale-label { font-size: .68rem; color: var(--cl-gold); margin-left: .75rem; letter-spacing: .06em; text-transform: uppercase; }
/* Dark mini-button (inline "Manage" action link) */
.cl-btn-dark-sm    { background: var(--cl-dark-bg); color: var(--cl-dark-text); border: none; border-radius: 2px; padding: .35rem .9rem; font-family: 'DM Sans', sans-serif; font-size: .7rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.cl-btn-outline-sm { background: none; border: 1px solid var(--cl-border); color: var(--cl-text); border-radius: 2px; padding: .35rem .9rem; font-family: 'DM Sans', sans-serif; font-size: .7rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }

/* Billing checkout cancelled */
.bcc-card { background: var(--cl-card-bg); border: 1px solid var(--cl-border); padding: 2rem; }
.bcc-coupon-input { max-width: 260px; }

/* Sidebar selected-claim widget */
.sb-claim-widget { background: var(--cl-dark-bg); border-radius: 3px; padding: .85rem 1rem; }
.sb-claim-label  { font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; color: var(--cl-dark-muted); margin-bottom: .5rem; }
.sb-claim-name   { font-family: 'Playfair Display', serif; font-size: .92rem; font-weight: 700; color: var(--cl-dark-text); margin-bottom: .35rem; line-height: 1.2; }
.sb-claim-badge  { margin-bottom: .5rem; }
.sb-claim-row    { font-size: .7rem; color: var(--cl-dark-muted); margin-bottom: .2rem; word-break: break-all; }
.sb-claim-row:last-child { margin-bottom: 0; }
.sb-claim-val    { color: var(--cl-dark-text); }

/* Dashboard tile info block */
.db-tile-info { margin-bottom: 1rem; }

/* Account list row (manage_claim empty state) */
.mc-acct-row    { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--cl-border); flex-wrap: wrap; }
.mc-acct-name   { font-size: .88rem; font-weight: 600; color: var(--cl-text); }
.mc-acct-meta   { font-size: .72rem; color: var(--cl-muted); margin-top: .15rem; }
.mc-acct-actions { display: flex; gap: .5rem; flex-shrink: 0; }

/* Content-area top padding helpers */
.cl-content-top    { padding-top: 1.5rem; }
.cl-content-top-lg { padding-top: 1.75rem; }

/* Gold warning banner (profile setup, wizard prompts) */
.cl-warn-banner {
  background: rgba(184, 146, 42, .08);
  border: 1px solid rgba(184, 146, 42, .3);
  border-left: 4px solid var(--cl-gold);
  border-radius: 3px;
  padding: 12px 14px;
  font-size: .82rem;
  color: var(--cl-text);
  margin-bottom: 1.25rem;
}

.cl-success-banner {
  background: rgba(16, 185, 129, .08);
  border: 1px solid rgba(16, 185, 129, .3);
  border-left: 4px solid var(--cl-success);
  border-radius: 3px;
  padding: 12px 14px;
  font-size: .82rem;
  color: var(--cl-text);
  margin-bottom: 1.25rem;
}

/* Full-width layout (no sidebar margin) */
.content-no-sidebar { margin-left: 0 !important; }


/* ======================================================
   2) DASHBOARD
   ====================================================== */
.db-page { background: var(--cl-page-bg); }

.db-tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
@media (max-width: 900px) { .db-tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .db-tile-grid { grid-template-columns: 1fr; } }

.db-tile {
  background: var(--cl-card-bg);
  border: 1px solid var(--cl-border);
  border-radius: 3px;
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  transition: border-color .2s;
}
.db-tile:hover { border-color: var(--cl-gold); }

.db-tile-tag {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--cl-dark-bg);
  color: var(--cl-dark-text);
  padding: .18rem .5rem;
  border-radius: 2px;
  display: inline-block;
  margin-bottom: .75rem;
  align-self: flex-start;
}
.db-tile-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cl-text);
  margin-bottom: .5rem;
  line-height: 1.2;
}
.db-tile-desc { font-size: .8rem; color: var(--cl-muted); line-height: 1.7; font-weight: 300; flex: 1; margin-bottom: .75rem; }
.db-tile .cl-state-badge { display: block; margin: .3rem 0 .5rem; }

.db-tile-steps { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.db-tile-steps li { font-size: .78rem; color: var(--cl-muted); padding: .2rem 0; display: flex; align-items: flex-start; gap: .5rem; line-height: 1.5; }
.db-tile-steps li::before { content: attr(data-n); font-family: 'Playfair Display', serif; font-size: .7rem; font-weight: 700; color: var(--cl-gold); flex-shrink: 0; margin-top: .05rem; }

.db-data-row { display: flex; justify-content: space-between; font-size: .78rem; padding: .3rem 0; border-bottom: 1px solid var(--cl-surface); }
.db-data-row:last-of-type { border-bottom: none; }
.db-data-row .lbl { color: var(--cl-muted); }
.db-data-row .val { font-weight: 500; color: var(--cl-text); }

/* Tile dynamic content */
.db-tile-name { font-family: 'Playfair Display', serif; font-size: .95rem; font-weight: 700; color: var(--cl-text); }
.db-tile-date { font-size: .72rem; color: var(--cl-muted); margin-bottom: .5rem; }
.db-tile-msg  { font-size: .8rem; color: var(--cl-text); line-height: 1.6; }
.db-tile-empty { font-size: .8rem; color: var(--cl-muted); flex: 1; margin-bottom: .75rem; }

/* Stat strip override on dashboard */
.db-page .cl-stat-strip { margin-top: 2rem; margin-bottom: 2rem; }
.db-page .cl-stat-item  { padding: 1.25rem 1.5rem; }
.db-page .cl-stat-val   { font-size: 1.5rem; }


/* ======================================================
   3) CLAIM WIZARD  (shared with respond_to_message)
   ====================================================== */
.cw-page { font-family: 'DM Sans', sans-serif; background: var(--cl-page-bg); min-height: 100%; }

.cw-page-header { background: var(--cl-card-bg); border-bottom: 1px solid var(--cl-border); padding: 1.5rem 0 1.25rem; }
.cw-eyebrow {
  font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cl-gold); display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem;
}
.cw-eyebrow::before { content: ''; display: block; width: 1.5rem; height: 1px; background: var(--cl-gold); }
.cw-page-title {
  font-family: 'Playfair Display', serif; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900;
  letter-spacing: -.02em; color: var(--cl-text); line-height: 1.1; margin-bottom: .25rem;
}
.cw-page-sub { font-size: .85rem; color: var(--cl-muted); font-weight: 300; }

/* Step bar */
.cw-steps-bar { background: var(--cl-surface); border-bottom: 1px solid var(--cl-border); padding: .75rem 0; }
.cw-steps { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.cw-step-item {
  display: flex; align-items: center; flex: 1;
  font-size: .65rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--cl-muted);
}
.cw-step-item.active { color: var(--cl-text); }
.cw-step-item.done   { color: var(--cl-green); }
.cw-dot {
  width: 1.55rem; height: 1.55rem; border-radius: 50%; border: 1.5px solid var(--cl-border);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-size: .7rem; font-weight: 700;
  flex-shrink: 0; color: var(--cl-muted); margin-right: .35rem;
}
.cw-step-item.active .cw-dot { border-color: var(--cl-text); background: var(--cl-text); color: var(--cl-card-bg); }
.cw-step-item.done   .cw-dot { border-color: var(--cl-green); background: var(--cl-green); color: #fff; }
.cw-step-label { white-space: nowrap; display: none; }
@media (min-width: 576px) { .cw-step-label { display: inline; } }
.cw-step-line { flex: 1; height: 1px; background: var(--cl-border); margin: 0 .3rem; }

/* Card shell */
.cw-body { padding: 2rem 0 4rem; }
.cw-card {
  background: var(--cl-card-bg); border: 1px solid var(--cl-border);
  border-radius: 3px; overflow: hidden; max-width: 720px; margin: 0 auto;
}
.cw-card-head {
  background: var(--cl-dark-bg); padding: 1.5rem 2rem;
  display: flex; align-items: flex-end; gap: 1.25rem;
}
.cw-card-num {
  font-family: 'Playfair Display', serif; font-size: 3rem; font-weight: 900;
  line-height: 1; color: var(--cl-gold-l); letter-spacing: -.04em; flex-shrink: 0; user-select: none;
}
.cw-card-head-info { flex: 1; }
.cw-card-tag { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cl-dark-muted); margin-bottom: .35rem; }
.cw-card-title { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700; color: var(--cl-dark-text); line-height: 1.2; margin-bottom: .15rem; }
.cw-card-sub { font-size: .8rem; color: var(--cl-dark-muted); font-weight: 300; }
.cw-card-body { padding: 1.75rem 2rem; }

/* Type selector (step 1) */
.cw-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1.5rem; }
.cw-type-card {
  border: 1.5px solid var(--cl-border); border-radius: 3px; padding: 1rem .75rem;
  cursor: pointer; transition: border-color .15s, background .15s; text-align: center; background: var(--cl-surface);
}
.cw-type-card:hover { border-color: var(--cl-gold); }
.cw-type-card.selected { border-color: var(--cl-gold); background: var(--cl-card-bg); }
.cw-type-icon { font-size: 1.5rem; margin-bottom: .35rem; }
.cw-type-name { font-size: .8rem; font-weight: 500; color: var(--cl-text); margin-bottom: .1rem; }
.cw-type-desc { font-size: .7rem; color: var(--cl-muted); }
.cw-type-grid input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
@media (max-width: 400px) { .cw-type-grid { grid-template-columns: 1fr; } }

/* Form fields */
.cw-field { margin-bottom: 1.1rem; }
.cw-label { display: block; font-size: .7rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--cl-muted); margin-bottom: .3rem; }
.cw-card-body .form-control,
.cw-card-body .form-select {
  background: var(--cl-surface) !important; border: 1px solid var(--cl-border) !important;
  border-radius: 2px !important; font-family: 'DM Sans', sans-serif; font-size: .88rem; color: var(--cl-text) !important;
}
.cw-card-body .form-control:focus,
.cw-card-body .form-select:focus {
  border-color: var(--cl-gold) !important; box-shadow: 0 0 0 2px rgba(184, 146, 42, .15) !important;
}
#id_message { overflow-y: hidden; resize: none; min-height: 12rem; }
.cw-2col { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
@media (max-width: 480px) { .cw-2col { grid-template-columns: 1fr; } }
.cw-divider { border: none; border-top: 1px solid var(--cl-border); margin: 1.5rem 0; }
.cw-section-label { font-size: .65rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--cl-muted); margin-bottom: .85rem; }
.cw-help  { font-size: .75rem; color: var(--cl-muted); margin-top: .2rem; }
.cw-error { font-size: .75rem; color: var(--cl-red); margin-top: .2rem; }
.cw-required { color: var(--cl-gold); }

/* Charge / document list rows */
.cw-list { margin-bottom: 1.25rem; }
.cw-list-row {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .65rem .85rem; background: var(--cl-surface);
  border: 1px solid var(--cl-border); border-radius: 2px; margin-bottom: 0;
}
.cw-list > div { margin-bottom: .4rem; }
.cw-list-icon { font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }
.cw-list-info { flex: 1; min-width: 0; }
.cw-list-title { font-size: .85rem; font-weight: 500; color: var(--cl-text); }
.cw-list-meta { font-size: .72rem; color: var(--cl-muted); margin-top: .1rem; }
.cw-list-amount { font-family: 'Playfair Display', serif; font-size: .95rem; font-weight: 700; color: var(--cl-text); white-space: nowrap; flex-shrink: 0; }
.cw-list-del  { background: none; border: none; padding: .2rem .35rem; cursor: pointer; color: var(--cl-muted); font-size: .9rem; flex-shrink: 0; line-height: 1; transition: color .15s; }
.cw-list-del:hover { color: var(--cl-red); }
.cw-list-edit { background: none; border: none; padding: .2rem .35rem; cursor: pointer; color: var(--cl-muted); font-size: .88rem; flex-shrink: 0; line-height: 1; transition: color .15s; }
.cw-list-edit:hover, .cw-list-edit.is-open { color: var(--cl-gold); }
.cw-inline-edit {
  background: var(--cl-card-bg); border: 1px solid var(--cl-gold);
  border-top: none; border-radius: 0 0 3px 3px;
  padding: .85rem .85rem .75rem; margin-bottom: .4rem; margin-top: -.4rem;
}
.cw-totals-bar { display: flex; justify-content: space-between; align-items: center; padding: .6rem .85rem; background: var(--cl-dark-bg); border-radius: 2px; margin-bottom: 1.25rem; }
.cw-totals-bar .cw-tot-label { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cl-dark-muted); }
.cw-totals-bar .cw-tot-val { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; color: var(--cl-gold-l); }
.cw-empty { text-align: center; padding: 1.5rem; color: var(--cl-muted); font-size: .82rem; font-style: italic; }

/* Add-item row */
.cw-list-row-add { cursor: pointer; border-style: dashed; border-color: var(--cl-border); color: var(--cl-muted); transition: border-color .15s, color .15s; }
.cw-list-row-add:hover,
.cw-list-row-add.is-open { border-color: var(--cl-gold); color: var(--cl-gold); }
.cw-list-row-add-btn {
  width: 100%; text-align: left; background: var(--cl-card-bg);
  border: 1px dashed var(--cl-border); border-radius: 3px;
  display: flex; align-items: flex-start; gap: .75rem; padding: .65rem .85rem; margin: 0;
}
.cw-list-row-add-btn .cw-list-icon { margin-top: .2rem; }
.cw-list-row-add-btn .cw-list-info { display: flex; flex-direction: column; gap: .24rem; }
.cw-list-row-add-btn .cw-list-title { line-height: 1.2; margin: 0; }
.cw-list-row-add-btn .cw-list-meta { margin-top: 0; line-height: 1.35; margin-bottom: 0; }

/* Review step */
.cw-review-section { margin-bottom: 1.5rem; }
.cw-review-section-head {
  font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cl-muted); margin-bottom: .75rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--cl-border); display: flex; justify-content: space-between; align-items: center;
}
.cw-review-section-head a { font-size: .68rem; color: var(--cl-gold); text-decoration: none; }
.cw-review-section-head a:hover { color: var(--cl-gold-l); }
.cw-dl { display: flex; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--cl-border); font-size: .82rem; }
.cw-dl:last-child { border-bottom: none; }
.cw-dl--no-border { border-bottom: none !important; }
.cw-dl-k { color: var(--cl-muted); min-width: 140px; flex-shrink: 0; font-weight: 500; font-size: .72rem; letter-spacing: .02em; text-transform: uppercase; }
.cw-dl-v { color: var(--cl-text); word-break: break-word; }
.cw-dl-financial .cw-dl-v { margin-left: auto; text-align: right; }
.cw-claim-type-badge {
  display: inline-block; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .15rem .55rem; border-radius: 2px; background: var(--cl-dark-bg); color: var(--cl-dark-text);
}

/* Wizard navigation links */
.cw-back-link { color: inherit; text-decoration: none; }
.cw-step-link { display: flex; align-items: center; gap: .35rem; text-decoration: none; color: inherit; }

/* Existing claims panel (new claim landing) */
.cw-existing-section { border-top: 1px solid var(--cl-border); padding: 1.5rem 2rem; }
.cw-existing-label   { font-size: .65rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--cl-muted); margin-bottom: 1rem; }
.cw-existing-row     { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--cl-border); flex-wrap: wrap; }
.cw-existing-name    { font-size: .88rem; font-weight: 600; color: var(--cl-text); }
.cw-existing-meta    { font-size: .72rem; color: var(--cl-muted); margin-top: .1rem; }

/* Inline-edit save row */
.cw-edit-save-row { display: flex; gap: .5rem; align-items: center; }
.cw-edit-save-row .btn-cw-add  { margin-top: .5rem; }
.cw-edit-save-row .cw-list-del { margin-top: .5rem; font-size: .75rem; padding: .3rem .6rem; }

/* Review section totals bar (column layout variant) */
.cw-totals-bar--review { flex-direction: column; gap: .35rem; align-items: stretch; margin-top: .75rem; margin-bottom: 0; }
.cw-totals-row { display: flex; justify-content: space-between; }
.cw-totals-row--border { border-top: 1px solid rgba(255,255,255,.12); padding-top: .35rem; }
.cw-tot-val--paid  { color: #6db87a; }
.cw-hint-small { font-size: .68rem; color: var(--cl-muted); }

/* Nav buttons */
.cw-nav { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: 1.25rem 2rem; border-top: 1px solid var(--cl-border); background: var(--cl-card-bg); }
.cw-nav-right { display: flex; gap: .5rem; align-items: center; }
.btn-cw-back { background: none; border: 1px solid var(--cl-border); color: var(--cl-muted); border-radius: 2px; padding: .55rem 1.2rem; font-family: 'DM Sans', sans-serif; font-size: .75rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: all .2s; }
.btn-cw-back:hover { border-color: var(--cl-text); color: var(--cl-text); }
.btn-cw-continue { background: var(--cl-dark-bg); color: var(--cl-dark-text); border: none; border-radius: 2px; padding: .6rem 1.5rem; font-family: 'DM Sans', sans-serif; font-size: .75rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: background .2s; white-space: nowrap; }
.btn-cw-continue:hover { background: var(--cl-gold); }
.btn-cw-add { background: none; border: 1px solid var(--cl-border); color: var(--cl-text); border-radius: 2px; padding: .5rem 1.1rem; font-family: 'DM Sans', sans-serif; font-size: .75rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: all .2s; white-space: nowrap; }
.btn-cw-add:hover { border-color: var(--cl-gold); color: var(--cl-gold); }
.btn-cw-finish { background: var(--cl-green); color: #fff; border: none; border-radius: 2px; padding: .65rem 1.75rem; font-family: 'DM Sans', sans-serif; font-size: .8rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: background .2s; white-space: nowrap; }
.btn-cw-finish:hover { background: #144a2e; }
.btn-cw-finish-dnc { background: #b91c1c; color: #fff; border: none; border-radius: 2px; padding: .65rem 1.75rem; font-family: 'DM Sans', sans-serif; font-size: .8rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: background .2s; white-space: nowrap; }
.btn-cw-finish-dnc:hover { background: #991b1b; }

/* Respond-to-message: response tiles */
.rtm-tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; grid-auto-rows: 1fr; }
@media (max-width: 500px) { .rtm-tile-grid { grid-template-columns: 1fr; } }
.response-tile {
  text-align: left; border: 1px solid var(--cl-border); border-radius: 3px;
  background: var(--cl-surface); color: var(--cl-text);
  padding: .85rem 1rem; cursor: pointer; min-height: 98px; height: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.response-tile:hover:not(:disabled) { border-color: var(--cl-gold); }
.response-tile.is-active { border-color: var(--cl-gold); box-shadow: 0 0 0 2px rgba(184, 146, 42, .18); background: rgba(184, 146, 42, .04); }
.response-tile-title { font-weight: 600; font-size: .88rem; margin-bottom: .2rem; }
.response-tile-desc  { margin: 0; font-size: .78rem; color: var(--cl-muted); }

/* Response option toggle (outgoing message create) */
.response-option-toggle-group { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.response-option-toggle {
  width: 100%; text-align: left; border: 1px solid var(--cl-border);
  background: var(--cl-card-bg); color: var(--cl-text);
  border-radius: 2px; padding: .45rem .75rem; font-size: .82rem; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.response-option-toggle.is-active { border-color: var(--cl-gold); background: rgba(184, 146, 42, .08); color: var(--cl-gold-d); box-shadow: 0 0 0 2px rgba(184, 146, 42, .12); }
.response-option-toggle:hover:not(:disabled):not(.is-active) { border-color: var(--cl-muted); }
.response-option-toggle:disabled { opacity: .45; cursor: not-allowed; }
.response-option-hidden { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; pointer-events: none !important; }

/* Respond-to-message: review accordion */
.rtm-review-toggle {
  width: 100%; text-align: left; background: var(--cl-surface);
  border: 1px solid var(--cl-border); border-radius: 3px;
  padding: .65rem 1rem; font-size: .78rem; font-weight: 600;
  color: var(--cl-muted); display: flex; align-items: center;
  justify-content: space-between; cursor: pointer; transition: background .15s; margin-bottom: .5rem;
}
.rtm-review-toggle:hover { border-color: var(--cl-gold); color: var(--cl-text); }
.rtm-review-body { background: var(--cl-surface); border: 1px solid var(--cl-border); border-radius: 3px; padding: 1rem; margin-bottom: 1.25rem; font-size: .83rem; color: var(--cl-text); line-height: 1.7; }
.rtm-review-msg { max-height: 180px; overflow-y: auto; white-space: pre-wrap; }
.rtm-record { border: 1px solid var(--cl-border); border-radius: 2px; padding: .5rem .75rem; background: var(--cl-card-bg); margin-bottom: .4rem; font-size: .82rem; }
.rtm-record:last-child { margin-bottom: 0; }
.rtm-record-title { font-weight: 600; margin-bottom: .1rem; }
.rtm-record-meta  { color: var(--cl-muted); }
.record-media-placeholder { width: 72px; height: 52px; border-radius: 2px; border: 1px solid var(--cl-border); background: var(--cl-surface); color: var(--cl-muted); font-size: .78rem; display: flex; align-items: center; justify-content: center; text-align: center; flex-shrink: 0; }

/* DNC warning */
.rtm-dnc-warning { margin-top: 1rem; background: #fff8f8; border: 1px solid #fca5a5; border-left: 4px solid #b91c1c; border-radius: 3px; padding: 12px 14px; font-size: .82rem; }

/* Payment plan table */
#paymentPlanFields .cw-label { font-size: .7rem; }
#paymentPlanFields .table th,
#paymentPlanFields .table td { padding: .3rem .5rem; vertical-align: middle; font-size: .82rem; }

@media (max-width: 575px) {
  .cw-card-head { padding: 1.1rem 1rem; gap: .75rem; }
  .cw-card-num  { font-size: 2rem; }
  .cw-card-body { padding: 1.25rem 1rem; }
  .cw-nav       { padding: 1rem; }
}


/* ======================================================
   4) MANAGE CLAIM
   ====================================================== */

/* Claim selector strip (always dark) */
.claim-strip { background: var(--cl-dark-bg); padding: .9rem 0; }
.claim-strip-label { font-size: .68rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--cl-dark-muted); white-space: nowrap; }
.claim-strip select {
  flex: 1; max-width: 380px; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18); color: var(--cl-dark-text); border-radius: 2px;
  padding: .45rem .8rem; font-family: 'DM Sans', sans-serif; font-size: .85rem; outline: none;
}
.claim-strip select option { background: var(--cl-dark-bg); color: var(--cl-dark-text); }
.btn-strip {
  background: none; border: 1px solid rgba(255, 255, 255, .25); color: var(--cl-dark-text); border-radius: 2px;
  padding: .4rem 1rem; font-family: 'DM Sans', sans-serif; font-size: .72rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  transition: border-color .2s; text-decoration: none; display: inline-block;
}
.btn-strip:hover { border-color: var(--cl-gold); color: var(--cl-gold-l); }
.btn-strip-gold { border-color: var(--cl-gold); color: var(--cl-gold-l); }
.btn-strip-gold:hover { background: var(--cl-gold); color: #fff; }

/* Section cards */
.mc-body { padding: 1.75rem 0 4rem; }
.mc-card { background: var(--cl-card-bg); border: 1px solid var(--cl-border); border-radius: 3px; margin-bottom: 1rem; overflow: hidden; }
.mc-card-head { background: var(--cl-dark-bg); padding: 1.25rem 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mc-card-head-left { display: flex; align-items: center; gap: 1rem; }
.mc-card-num { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 900; line-height: 1; color: var(--cl-gold-l); letter-spacing: -.04em; flex-shrink: 0; user-select: none; }
.mc-card-tag   { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cl-dark-muted); margin-bottom: .2rem; }
.mc-card-title { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; color: var(--cl-dark-text); line-height: 1.2; }
.mc-card-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.mc-card-body { padding: 1.25rem 1.75rem; }
.mc-card-body--compact { padding: .75rem 1.75rem; }
.mc-card-body--top-sm  { padding-top: .65rem; }
.mc-card-body--top-sm .msg-tile:first-child { margin-top: 0; }

/* btn-cl-outline override inside dark card headers */
.mc-card-head .btn-cl-outline { color: var(--cl-dark-muted); border-color: rgba(255, 255, 255, .2); }
.mc-card-head .btn-cl-outline:hover { border-color: var(--cl-gold); color: var(--cl-gold-l); }

/* Financial rows */
.mc-fin-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .6rem .85rem; background: var(--cl-surface); border: 1px solid var(--cl-border); border-radius: 2px; margin-bottom: .35rem; }
.mc-fin-info .mc-fin-type { font-size: .82rem; font-weight: 500; color: var(--cl-text); }
.mc-fin-info .mc-fin-date { font-size: .7rem; color: var(--cl-muted); margin-top: .1rem; }
.mc-fin-info .mc-fin-note { font-size: .7rem; color: var(--cl-muted); margin-top: .1rem; font-style: italic; }
.mc-fin-right { text-align: right; flex-shrink: 0; }
.mc-fin-amt { font-family: 'Playfair Display', serif; font-size: .95rem; font-weight: 700; color: var(--cl-text); }
.mc-fin-amt.charge  { color: #c0392b; }
.mc-fin-amt.payment { color: var(--cl-green-l); }
.mc-fin-actions { display: flex; gap: .4rem; align-items: center; margin-top: .3rem; justify-content: flex-end; }
.mc-icon-btn { background: none; border: none; padding: .2rem; cursor: pointer; color: var(--cl-muted); line-height: 1; }
.mc-icon-btn:hover { color: var(--cl-text); }
.mc-icon-btn.danger:hover { color: var(--cl-red); }

.mc-ledger-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .42rem 0; border-bottom: 1px solid var(--cl-border); }
.mc-ledger-label { font-size: .78rem; color: var(--cl-muted); text-transform: uppercase; letter-spacing: .03em; }
.mc-ledger-value { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; justify-content: flex-end; font-size: .9rem; color: var(--cl-text); font-weight: 600; }
.mc-ledger-meta { font-size: .85rem; color: var(--cl-text); font-weight: 500; }
.mc-ledger-edit { padding: .15rem .5rem; font-size: .62rem; }

.mc-summary-block { background: var(--cl-dark-bg); border-radius: 2px; margin-top: .75rem; padding: .2rem .85rem; }
.mc-summary-line { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .45rem 0; }
.mc-summary-key { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cl-dark-muted); }
.mc-summary-val { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; color: var(--cl-gold-l); }
.mc-summary-val.payment { color: var(--cl-green-l); }

/* Totals bar */
.mc-totals-bar { display: flex; justify-content: space-between; align-items: center; padding: .55rem .85rem; background: var(--cl-dark-bg); border-radius: 2px; margin: .5rem 0 1.25rem; }
.mc-totals-bar .mc-tot-label { font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cl-dark-muted); }
.mc-totals-bar .mc-tot-val   { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: var(--cl-gold-l); }
.mc-sub-label { font-size: .65rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cl-muted); margin-bottom: .75rem; }

/* Empty state */
.mc-empty { padding: 3rem 2rem; text-align: center; color: var(--cl-muted); }
.mc-empty-icon  { font-size: 2.5rem; margin-bottom: 1rem; opacity: .4; }
.mc-empty-title { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; color: var(--cl-text); margin-bottom: .5rem; }
.mc-empty-sub   { font-size: .85rem; margin-bottom: 1.75rem; line-height: 1.7; }
.mc-empty-hint  { font-size: .78rem; color: var(--cl-muted); align-self: center; }
.mc-report-frame { width: 100%; height: 75vh; border: 0; background: #0a1324; display: block; }
.btn-cl--lg     { padding: .65rem 1.75rem; font-size: .78rem; }

/* Timeline */
.mc-timeline { display: flex; flex-direction: column; gap: .75rem; }
.mc-tl-item    { background: var(--cl-card-bg); border: 1px solid var(--cl-border); border-radius: 3px; overflow: hidden; }
.mc-tl-summary { list-style: none; cursor: pointer; padding: 0; display: block; position: relative; }
.mc-tl-summary::-webkit-details-marker { display: none; }
.mc-tl-caret   { position: absolute; top: .95rem; right: 1rem; font-size: 1rem; line-height: 1; color: var(--cl-muted); pointer-events: none; }
.mc-tl-item[open] .mc-tl-caret { color: var(--cl-gold-l); }
.mc-tl-detail  { padding: 0; background: var(--cl-card-bg); }
.mc-tl-report  { font-size: .72rem; color: var(--cl-gold); text-decoration: none; margin-top: .75rem; display: inline-block; }
.mc-tl-report:hover { color: var(--cl-gold-l); }

/* AI Summary textarea */
.mc-summary-out { width: 100%; background: var(--cl-surface) !important; border: 1px solid var(--cl-border) !important; border-radius: 2px; font-family: 'DM Sans', sans-serif; font-size: .85rem; color: var(--cl-text) !important; padding: .75rem; resize: vertical; }

/* DNC compliance banner */
.mc-dnc-banner { background: #1a0a0a; border: 1px solid #6e1919; border-left: 4px solid var(--cl-red); border-radius: 3px; padding: 1.1rem 1.4rem; margin-bottom: 1rem; }
.mc-dnc-inner  { display: flex; align-items: flex-start; gap: .85rem; }
.mc-dnc-icon   { color: var(--cl-red); font-size: 1.1rem; margin-top: .1rem; flex-shrink: 0; }
.mc-dnc-title  { font-size: .82rem; font-weight: 700; color: #e57373; margin-bottom: .3rem; letter-spacing: .02em; }
.mc-dnc-desc   { font-size: .78rem; color: rgba(229, 115, 115, .75); line-height: 1.65; }

/* Setup-in-progress prompt */
.mc-setup-prompt { background: var(--cl-surface); border: 1px solid var(--cl-border); border-left: 3px solid var(--cl-gold); border-radius: 3px; padding: 1rem 1.25rem; margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mc-setup-title { font-size: .78rem; font-weight: 600; color: var(--cl-text); margin-bottom: .2rem; }
.mc-setup-desc  { font-size: .75rem; color: var(--cl-muted); }
.mc-setup-cta   { background: var(--cl-gold); color: #fff; border: none; border-radius: 2px; padding: .5rem 1.2rem; font-family: 'DM Sans', sans-serif; font-size: .72rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }

@media (max-width: 575px) {
  .claim-strip .container { flex-direction: column !important; align-items: stretch !important; gap: .5rem !important; }
  .claim-strip select { max-width: 100%; width: 100%; }
  .btn-strip { width: 100%; text-align: center; }
  .mc-card-head { padding: 1rem; gap: .75rem; }
  .mc-card-num  { font-size: 1.6rem; }
  .mc-card-body { padding: 1rem; }
}


/* ======================================================
   5) OUTGOING MESSAGE CREATE
   ====================================================== */
.submit-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55);
  z-index: 2000; display: none; align-items: center; justify-content: center;
}
.submit-overlay.active { display: flex; }
.submit-overlay-inner  { background: var(--cl-dark-bg); border: 1px solid rgba(255, 255, 255, .1); border-radius: 3px; padding: .8rem 1.5rem; display: flex; align-items: center; gap: .8rem; }
.submit-overlay-spinner { color: var(--cl-gold); }
.submit-overlay-text    { font-size: .82rem; color: var(--cl-dark-muted); }

.omc-card      { background: var(--cl-card-bg); border: 1px solid var(--cl-border); border-radius: 3px; overflow: hidden; }
.omc-card-head { background: var(--cl-dark-bg); padding: .9rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.omc-card-head .btn-cl-outline { color: var(--cl-dark-muted); border-color: rgba(255, 255, 255, .2); }
.omc-card-head .btn-cl-outline:hover { border-color: var(--cl-gold); color: var(--cl-gold-l); }
.omc-card-title { font-family: 'Playfair Display', serif; font-size: .95rem; font-weight: 700; color: var(--cl-dark-text); }
.omc-card-body  { padding: 1.5rem 1.25rem; }

.omc-field-label { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--cl-muted); margin-bottom: .35rem; }
.omc-steps { font-size: .78rem; color: var(--cl-muted); background: var(--cl-surface); border: 1px solid var(--cl-border); border-radius: 2px; padding: .55rem .9rem; margin-bottom: 1.25rem; }

.omc-plan-card  { background: var(--cl-surface); border: 1px solid var(--cl-border); border-radius: 2px; padding: 1rem 1.1rem; }
.omc-plan-title { font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--cl-muted); margin-bottom: .75rem; }

.omc-action-row   { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem; }
.omc-action-group { display: flex; gap: .5rem; flex-wrap: wrap; }
.omc-error        { font-size: .78rem; color: var(--cl-red); margin-top: .3rem; }
.omc-selected-claim { font-size: 1.02rem; font-weight: 600; color: var(--cl-text); }

.omc-response-wrap { border: 1px solid var(--cl-border); border-radius: 2px; padding: .75rem; background: var(--cl-surface); }
.omc-field-hint    { font-size: .74rem; color: var(--cl-muted); margin-top: .3rem; }
.omc-plan-th       { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--cl-muted); }


/* ======================================================
   6) USER EDIT
   ====================================================== */
.ue-card      { background: var(--cl-card-bg); border: 1px solid var(--cl-border); border-radius: 3px; overflow: hidden; margin-bottom: 1.25rem; }
.ue-card-head { background: var(--cl-dark-bg); padding: .85rem 1.25rem; display: flex; align-items: center; gap: 1rem; }
.ue-card-head-title { font-family: 'Playfair Display', serif; font-size: .95rem; font-weight: 700; color: var(--cl-dark-text); }
.ue-card-body { padding: 1.5rem 1.25rem; }

.ue-field-label { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--cl-muted); margin-bottom: .35rem; }
.ue-field-hint  { font-size: .75rem; color: var(--cl-muted); margin-top: .3rem; line-height: 1.5; }
.ue-field-error { font-size: .75rem; color: var(--cl-red); margin-top: .3rem; }

.ue-logo-img { max-width: 140px; max-height: 44px; width: auto; height: auto; object-fit: contain; background: rgba(255, 255, 255, .08); border-radius: 2px; padding: 3px; }

.ue-danger-zone { background: rgba(185, 28, 28, .04); border: 1px solid rgba(185, 28, 28, .2); border-radius: 3px; overflow: hidden; margin-bottom: 1.25rem; }
.ue-danger-head { background: rgba(185, 28, 28, .08); padding: .85rem 1.25rem; border-bottom: 1px solid rgba(185, 28, 28, .15); }
.ue-danger-head-title { font-family: 'Playfair Display', serif; font-size: .95rem; font-weight: 700; color: #b91c1c; }
.ue-danger-body { padding: 1.25rem; }
.ue-danger-text { font-size: .82rem; color: var(--cl-muted); margin-bottom: 1rem; }


/* ======================================================
   7) HOME PAGE
   ====================================================== */
.home-shell {
  background:
    radial-gradient(circle at top left, rgba(44, 123, 229, .16), transparent 30%),
    radial-gradient(circle at top right, rgba(15, 118, 110, .10), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #f3f7fb 100%);
}
.hero-card, .section-card { border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 .75rem 1.75rem rgba(15, 23, 42, .08); }
.step-panel { background: linear-gradient(180deg, rgba(44, 123, 229, .05), rgba(44, 123, 229, .02)); }
.step-item  { display: flex; align-items: flex-start; gap: .75rem; }
.cta-shadow { box-shadow: 0 .5rem 1.25rem rgba(44, 123, 229, .18); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid rgba(44, 123, 229, .16); background: rgba(255, 255, 255, .86);
  border-radius: 999px; padding: .45rem .8rem; font-size: .85rem; font-weight: 700;
  color: var(--app-primary); letter-spacing: .02em; text-transform: uppercase;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 1.5rem; align-items: stretch; }
.hero-proof { background: linear-gradient(180deg, rgba(44, 123, 229, .08), rgba(15, 118, 110, .06)); border: 1px solid rgba(44, 123, 229, .1); }
.hero-proof-item { padding: .85rem 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.hero-proof-item:last-child  { border-bottom: 0; padding-bottom: 0; }
.hero-proof-item:first-child { padding-top: 0; }
.step-num  { width: 2rem; height: 2rem; border-radius: 50%; background: rgba(44, 123, 229, .12); color: var(--app-primary); display: inline-flex; flex: 0 0 2rem; align-items: center; justify-content: center; font-weight: 700; margin-top: .1rem; }
.step-copy { flex: 1 1 auto; line-height: 1.6; }
.persona-chip, .signal-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: .45rem .8rem; background: rgba(44, 123, 229, .08); color: #234; font-weight: 600; }
.signal-chip { background: rgba(15, 118, 110, .1); }
.pain-card { border: 1px solid rgba(0, 0, 0, .08); border-radius: 1rem; padding: 1rem; background: rgba(255, 255, 255, .88); height: 100%; }
.mini-label { text-transform: uppercase; letter-spacing: .08em; font-size: .76rem; font-weight: 700; color: #6b7280; }
.report-frame { border-radius: 1rem; border: 1px solid rgba(0, 0, 0, .08); background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .96)); overflow: hidden; }
.report-topbar { padding: .9rem 1rem; border-bottom: 1px solid rgba(0, 0, 0, .08); background: rgba(15, 23, 42, .04); }
.report-row { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.report-row:last-child { border-bottom: 0; }
.report-label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #64748b; }
.quote-callout { border-left: 4px solid var(--app-primary); background: rgba(44, 123, 229, .06); }

[data-bs-theme=dark] .home-shell {
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, .18), transparent 30%),
    radial-gradient(circle at top right, rgba(20, 184, 166, .10), transparent 24%),
    linear-gradient(180deg, #0f1727 0%, #111c31 100%);
}
[data-bs-theme=dark] .hero-card,
[data-bs-theme=dark] .section-card { background: #1b2842; border-color: #314562; box-shadow: 0 .9rem 1.9rem rgba(0, 0, 0, .35); }
[data-bs-theme=dark] .hero-card .card-body,
[data-bs-theme=dark] .section-card .card-body { background: #1b2842; color: #f8fbff; }
[data-bs-theme=dark] .eyebrow { background: rgba(96, 165, 250, .12); border-color: rgba(96, 165, 250, .28); color: #9ec5ff; }
[data-bs-theme=dark] .hero-proof { background: linear-gradient(180deg, rgba(37, 99, 235, .12), rgba(15, 23, 42, .22)); border-color: #3b4f70; }
[data-bs-theme=dark] .hero-proof-item { border-bottom-color: rgba(148, 163, 184, .18); }
[data-bs-theme=dark] .persona-chip { background: rgba(96, 165, 250, .14); color: #dbeafe; }
[data-bs-theme=dark] .signal-chip  { background: rgba(45, 212, 191, .14); color: #d5fffb; }
[data-bs-theme=dark] .pain-card    { background: #24324d; border-color: #40557a; color: #eef4ff; }
[data-bs-theme=dark] .pain-card p  { color: #eef4ff; }
[data-bs-theme=dark] .mini-label   { color: #9fb1cf; }
[data-bs-theme=dark] .step-panel   { background: linear-gradient(180deg, rgba(37, 99, 235, .08), rgba(15, 23, 42, .12)); border-color: #3b4f70 !important; }
[data-bs-theme=dark] .step-num     { background: rgba(59, 130, 246, .18); color: #8fb4ff; }
[data-bs-theme=dark] .quote-callout { background: rgba(59, 130, 246, .10); color: #eef4ff; }

@media (max-width: 991.98px) { .hero-grid { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .report-row { grid-template-columns: 1fr; gap: .35rem; } }


/* ======================================================
   8) REPORT LOCKED VIEWER
   ====================================================== */
.report-preview-page  { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.report-preview-wrap  { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.report-preview-frame-wrap { border: 1px solid var(--cl-border); border-radius: 3px; overflow: hidden; background: #0b1020; flex: 1; min-height: 0; }
#lockedReportFrame { width: 100%; height: 100%; border: 0; display: block; }


/* ======================================================
   9) MESSAGE TILE  (partials/message_tile.html)
   ====================================================== */
.msg-tile { background: var(--cl-card-bg); border: 1px solid var(--cl-border); border-radius: 3px; overflow: hidden; margin-bottom: .05rem; }
.msg-tile > summary { list-style: none; cursor: pointer; }
.msg-tile > summary::-webkit-details-marker { display: none; }

.msg-tile-header { background: var(--cl-dark-bg); padding: .65rem 1rem; display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; flex-wrap: wrap; }
.msg-tile-name-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .1rem; }
.msg-tile-name    { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: var(--cl-dark-text); }
.msg-tile-kind    { font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: .15rem .5rem; border-radius: 2px; }
.msg-tile-kind--out { background: rgba(184, 146, 42, .18); color: var(--cl-gold); }
.msg-tile-kind--in  { background: rgba(26, 92, 58, .2);   color: #4ecb82; }
.msg-tile-subject { font-size: .7rem; color: var(--cl-dark-muted); }
.msg-tile-date    { font-size: .68rem; color: var(--cl-dark-muted); white-space: nowrap; flex-shrink: 0; }
.msg-tile-right { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; margin-left: auto; }
.msg-tile-toggle-row { display: flex; align-items: center; gap: .4rem; }
.msg-tile-toggle-label {
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cl-muted);
  line-height: 1;
}
.msg-tile-toggle-collapse { display: none; }
.msg-tile[open] .msg-tile-toggle-expand { display: none; }
.msg-tile[open] .msg-tile-toggle-collapse { display: inline; color: var(--cl-gold-l); }
.msg-tile-caret {
  color: var(--cl-muted);
  font-size: .72rem;
  line-height: 1;
  transition: transform .18s ease, color .18s ease;
}
.msg-tile[open] .msg-tile-caret {
  transform: rotate(180deg);
  color: var(--cl-gold-l);
}

.msg-tile-meta     { background: var(--cl-surface); padding: .45rem 1rem; border-top: 1px solid var(--cl-border); display: flex; flex-wrap: wrap; gap: .55rem 1.4rem; }
.msg-tile-meta-col { font-size: .72rem; color: var(--cl-muted); }
.msg-tile-meta-key { font-weight: 500; text-transform: uppercase; letter-spacing: .04em; font-size: .65rem; }

.msg-tile-body { padding: .8rem 1rem; background: var(--cl-card-bg); border-top: 1px solid var(--cl-border); }
.msg-tile-text { font-size: .82rem; color: var(--cl-text); line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.msg-tile-count  { margin-top: .75rem; font-size: .7rem; color: var(--cl-muted); letter-spacing: .04em; }
.msg-tile-report { margin-top: .75rem; display: inline-block; font-size: .72rem; color: var(--cl-gold); text-decoration: none; }
.msg-tile-report:hover { color: var(--cl-gold-l); }


/* ======================================================
   10) SCHEDULED PAYMENTS
   ====================================================== */
.sp-rows { display: flex; flex-direction: column; gap: .6rem; }
.sp-row  { background: var(--cl-card-bg); border: 1px solid var(--cl-border); border-radius: 3px; overflow: hidden; }

.sp-row-header { background: var(--cl-dark-bg); padding: .8rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sp-row-date-wrap { display: flex; align-items: center; gap: 1rem; }
.sp-row-date   { font-family: 'Playfair Display', serif; font-size: .95rem; font-weight: 700; color: var(--cl-dark-text); }
.sp-row-type   { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cl-dark-muted); margin-top: .15rem; }
.sp-row-amount { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 900; color: var(--cl-gold-l); }

.sp-row-body         { padding: .75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sp-row-account      { font-size: .8rem; color: var(--cl-muted); }
.sp-row-account-link { color: var(--cl-text); font-weight: 500; text-decoration: none; }
.sp-row-actions      { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }


/* ======================================================
   11) RESPOND TO MESSAGE
   ====================================================== */
.rtm-arrow         { font-size: .7rem; font-family: monospace; transition: transform .2s; }
.rtm-subject-label { font-size: .72rem; color: var(--cl-muted); margin-bottom: .4rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.rtm-report-link   { font-size: .75rem; color: var(--cl-gold); text-decoration: none; border: 1px solid var(--cl-gold); border-radius: 2px; padding: .25rem .6rem; }
.rtm-report-link:hover { color: var(--cl-gold-l); border-color: var(--cl-gold-l); }
.rtm-count-gold    { color: var(--cl-gold); font-family: 'Playfair Display', serif; font-weight: 700; }
.rtm-record-note   { font-size: .75rem; color: var(--cl-muted); margin-top: .2rem; }
.rtm-record-amount { font-weight: 600; color: var(--cl-text); white-space: nowrap; }
.rtm-record-amount--success { color: var(--cl-success); }
.rtm-totals-row    { font-size: .78rem; color: var(--cl-muted); display: flex; justify-content: space-between; padding: .5rem 0 0; border-top: 1px solid var(--cl-border); margin-top: .5rem; }
.rtm-total-gold    { color: var(--cl-gold); }
.rtm-total-success { color: var(--cl-success); }
.rtm-doc-img       { width: 72px; height: 52px; object-fit: cover; border-radius: 2px; border: 1px solid var(--cl-border); flex-shrink: 0; }
.rtm-divider       { border: none; border-top: 1px solid var(--cl-border); margin: 1.5rem 0; }
.rtm-select-hint   { font-size: .75rem; color: var(--cl-muted); margin-top: .75rem; }

.rtm-submitted-title  { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; color: var(--cl-text); margin: 0; }
.cw-card-body--center { text-align: center; padding: 3rem 1.5rem; }

.rtm-dnc-confirm       { border-left: 4px solid #b91c1c; padding: 1rem 1.25rem; background: rgba(185,28,28,.04); border-radius: 3px; }
.rtm-dnc-confirm-title { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; color: #b91c1c; margin-bottom: .5rem; }
.rtm-dnc-confirm-notice { background: #fff8f8; border: 1px solid #fca5a5; border-radius: 3px; padding: 12px 14px; font-size: .82rem; color: var(--cl-muted); }

.rtm-dnc-warning-title { font-weight: 700; color: #b91c1c; margin-bottom: .4rem; }
.rtm-dnc-warning-text  { margin: 0 0 .5rem; color: #374151; }
.rtm-dnc-warning-list  { margin: 0 0 .5rem; padding-left: 1.25rem; color: #374151; }

.rtm-plan-summary   { font-size: .8rem; color: var(--cl-muted); margin: -.1rem 0 1rem; }
.rtm-plan-separator { margin: 0 .45rem; color: var(--cl-border); }
.rtm-plan-th        { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cl-muted); }
.btn-cw-back--sm    { padding: .35rem .75rem !important; font-size: .68rem !important; }


/* ======================================================
   12) CHARGE EXHIBIT TILES  (partials/charge_exhibit_tiles_styles.html)
   ====================================================== */
.charge-exhibit-tiles .record-tile { border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-body-bg); }
.charge-exhibit-tiles .record-media { width: 96px; height: 72px; object-fit: cover; border-radius: .4rem; background: var(--bs-gray-200); }
.charge-exhibit-tiles .record-media-placeholder { width: 96px; height: 72px; border-radius: .4rem; background: var(--bs-gray-200); display: flex; align-items: center; justify-content: center; color: var(--bs-gray-600); font-size: .85rem; }
.charge-exhibit-tiles .record-title { color: var(--bs-primary); font-weight: 700; line-height: 1.2; margin-bottom: .15rem; }
.charge-exhibit-tiles .record-meta  { line-height: 1.2; margin-bottom: .15rem; }
.charge-exhibit-tiles .record-description { margin-top: .45rem; }


/* ======================================================
   13) STRIPE CONNECT
   ====================================================== */
/* Profile page — Stripe status card */
.sc-status             { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border-radius: 4px; border: 1px solid var(--cl-border); }
.sc-status--connected  { border-color: var(--cl-success, #4ecb82); background: rgba(78,203,130,.06); }
.sc-status-icon        { font-size: 1.4rem; color: var(--cl-success, #4ecb82); flex-shrink: 0; }
.sc-status-label       { font-weight: 600; font-size: .88rem; color: var(--cl-text); line-height: 1.2; }
.sc-status-sub         { font-size: .75rem; color: var(--cl-muted); margin-top: .1rem; }

/* Payer success page icon */
.sc-success-icon       { font-size: 3rem; color: var(--cl-success, #4ecb82); margin-bottom: 1rem; }

/* Respond-to-message — Pay Now block */
.rtm-pay-now-wrap      { margin-top: 1.5rem; }
.rtm-pay-now-desc      { font-size: .85rem; color: var(--cl-muted); margin-bottom: 1rem; }
.rtm-pay-now-btn       { display: inline-flex; }

/* Respond-to-message — Stripe not available notices */
.rtm-no-stripe-banner  { display: flex; align-items: flex-start; gap: .6rem; background: rgba(217,119,6,.1); border: 1px solid rgba(217,119,6,.35); border-radius: 4px; padding: .85rem 1rem; font-size: .83rem; color: var(--cl-text); margin-top: .75rem; margin-bottom: 1rem; }
.rtm-no-stripe-notice  { margin-top: 1.5rem; display: flex; align-items: flex-start; gap: .75rem; background: rgba(217,119,6,.08); border: 1px solid rgba(217,119,6,.3); border-radius: 4px; padding: 1rem 1.25rem; max-width: 420px; margin-left: auto; margin-right: auto; }
.rtm-no-stripe-icon    { font-size: 1.2rem; color: #d97706; flex-shrink: 0; margin-top: .1rem; }
.rtm-no-stripe-msg     { font-size: .83rem; color: var(--cl-text); text-align: left; line-height: 1.45; }