/* LM Bookings (Phase 3.5) — list, detail, modals.
 * Custom-styled to match Settings/Discover/Profile aesthetic.
 * Variables: --lm-primary, --lm-primary-soft, --lm-fg, --lm-bg-soft, --lm-border (defined in core LM CSS).
 */

.lm-bookings-page { background: var(--lm-bg, #f6f7f9); min-height: calc(100vh - 60px); padding: 24px 16px 56px; }
.lm-bookings-shell { max-width: 920px; margin: 0 auto; }

/* ── Header ─────────────────────────────────────── */
.lm-bookings-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.lm-bookings-title { font-size: 22px; font-weight: 700; margin: 0; color: var(--lm-text, #1a1a1a); }
.lm-bookings-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 8px; font-size: 12px; line-height: 1; font-weight: 700; color: #fff; background: var(--lm-primary, #0f6f4f); border-radius: 11px; vertical-align: middle; }

/* ── Incoming / Sent switcher (large, prominent) ─── */
.lm-bookings-mode-switcher {
  display: flex;
  background: var(--lm-bg, #fff);
  border: 1px solid var(--lm-border, #e3e3e3);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 36px;
}
.lm-bookings-mode-btn {
  flex: 1;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--lm-text, #1a1a1a);
  text-decoration: none;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s, color .15s;
}
.lm-bookings-mode-btn:hover { color: var(--lm-primary-text, #0f6f4f); background: var(--lm-primary-soft, rgba(15,111,79,0.06)); }
.lm-bookings-mode-btn.is-active { background: var(--lm-primary, #0f6f4f); color: #fff; }
.lm-bookings-mode-btn.is-active:hover { background: var(--lm-primary, #0f6f4f); color: #fff; }
.lm-bookings-mode-btn .lm-bookings-badge { background: rgba(255, 255, 255, 0.25); }
.lm-bookings-mode-btn:not(.is-active) .lm-bookings-badge { background: var(--lm-primary, #0f6f4f); color: #fff; }
.lm-bookings-mode-btn:not(.is-active) .lm-bookings-badge-dispute { background: #c0392b; color: #fff; }
.lm-bookings-mode-btn.is-active .lm-bookings-badge-dispute { background: rgba(255,255,255,0.25); }
html[data-lm-theme="dark"] .lm-bookings-mode-switcher { background: var(--lm-surface, #1f2329); border-color: var(--lm-border, #2a3038); }
html[data-lm-theme="dark"] .lm-bookings-mode-btn { color: var(--lm-text, #e6edf3); }
html[data-lm-theme="dark"] .lm-bookings-mode-btn:hover { background: var(--lm-primary-soft, rgba(46,161,111,0.12)); color: var(--lm-primary-text, #5fcc94); }
html[data-lm-theme="dark"] .lm-bookings-mode-btn.is-active { color: #fff; }

/* (Old per-mode sections styles removed — single mode is shown at a time
   via the switcher above; A/P/H sub-sections remain.) */

/* ── Status sub-sections (Active / Pending / History) ── */
.lm-bookings-subsection { margin-bottom: 36px; }
.lm-bookings-subsection:last-child { margin-bottom: 0; }
.lm-bookings-subsection-title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--lm-muted, #6b7280);
  margin: 0 0 14px 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
/* Scoped to the bookings page so the profile tabs (which use a chip-style
   .lm-tab-count from lm-profile.css) keep their own design. */
.lm-bookings-subsection-title .lm-tab-count { font-weight: 400; color: var(--lm-muted-2, #94a3b8); font-size: 13px; }

/* ── List ───────────────────────────────────────── */
.lm-bookings-list { display: flex; flex-direction: column; gap: 10px; }
.lm-bookings-empty { background: var(--lm-bg, #fff); border: 1px dashed var(--lm-border, #e3e3e3); border-radius: 10px; padding: 56px 24px; text-align: center; color: var(--lm-muted, #777); }
.lm-bookings-empty svg { color: var(--lm-muted-2, #bbb); margin-bottom: 12px; }
.lm-bookings-empty p { margin: 0; font-size: 14px; color: inherit; }
/* Compact empty-state for sub-sections (e.g. "No active bookings.") */
.lm-bookings-empty-sm {
  background: var(--lm-surface, #fafbfc);
  border: 1px dashed var(--lm-border, #e3e3e3);
  border-radius: 8px;
  padding: 16px 18px;
  font-size: 13px;
  color: var(--lm-muted, #888);
  text-align: left;
}

.lm-booking-card { position: relative; display: flex; align-items: center; gap: 14px; background: var(--lm-bg, #fff); border: 1px solid var(--lm-border, #e3e3e3); border-radius: 10px; padding: 14px 16px; text-decoration: none; color: var(--lm-text, inherit); transition: box-shadow .15s, border-color .15s; }
/* Booking ID pinned to top-right corner of the card. */
.lm-booking-card-id {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--lm-muted-2, #9ca3af);
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}
html[data-lm-theme="dark"] .lm-booking-card-id { color: var(--lm-muted-2, #6e7681); }

/* Per-card "Leave a review" CTA — pinned top-right of the card. Uses
   absolute positioning so it sits above the surrounding link without
   becoming part of the row's flex layout. */
.lm-card-review-btn {
  position: absolute;
  top: 50%;
  right: 70px;
  transform: translateY(-50%);
  padding: 6px 12px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}
.lm-card-review-done {
  position: absolute;
  top: 50%;
  right: 70px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--lm-primary-text, #0a5439);
  z-index: 2;
  white-space: nowrap;
}
.lm-card-review-pending {
  color: var(--lm-muted, #6b7280);
}
.lm-card-review-both {
  color: #d97706; /* amber — both ratings visible */
}
/* Two-row "You gave / They gave" block on history cards. */
.lm-card-review-scores {
  position: absolute;
  top: 50%;
  right: 70px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
  white-space: nowrap;
}
.lm-card-review-score {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  line-height: 1.2;
}
.lm-card-review-score-label {
  color: var(--lm-muted, #6b7280);
  font-weight: 500;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.lm-card-review-score-value {
  font-weight: 700;
  color: var(--lm-text, #0f172a);
  font-variant-numeric: tabular-nums;
}
.lm-card-review-score-value .lm-rating-star {
  font-size: 11px;
}
@media (max-width: 640px) {
  .lm-card-review-scores { position: static; transform: none; margin-left: auto; }
}

/* Reviews block on booking detail — reuses .lm-timeline-item structure
   (avatar + meta + text + sender-coloured left stripe) but tints the card
   background by role so the two reviews read as paired colour-blocks.
   Scoped to .lm-review-cta-existing so it doesn't affect the negotiation
   timeline above. */
.lm-review-cta-existing {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lm-review-cta-existing .lm-timeline-item.lm-timeline-from-brand {
  background: #a8d4dc;  /* deeper teal — pairs with #00363f stripe */
}
.lm-review-cta-existing .lm-timeline-item.lm-timeline-from-talent {
  background: #b1d9c0;  /* deeper green — pairs with --lm-primary stripe */
}
/* Small "you" tag next to the viewer's own name in the review block. */
.lm-you-pill {
  display: inline-block;
  padding: 1px 7px;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  color: var(--lm-text, #111);
  vertical-align: 2px;
}
html[data-lm-theme="dark"] .lm-you-pill { background: rgba(255,255,255,.12); color: #e6e8eb; }
/* Golden rating star — matches the amber stars used in the review modal
   and profile reviews list. */
.lm-rating-star { color: #f59e0b; }
/* "left a review · 3.6 ★ · Would book again" line — keep dark and bold so
   the rating reads at a glance against the tinted card. */
.lm-review-cta-existing .lm-timeline-action {
  color: var(--lm-text, #111);
  font-weight: 600;
}
html[data-lm-theme="dark"] .lm-review-cta-existing .lm-timeline-item.lm-timeline-from-brand {
  background: #0d3a44;
}
html[data-lm-theme="dark"] .lm-review-cta-existing .lm-timeline-item.lm-timeline-from-talent {
  background: #0e3a25;
}
@media (max-width: 640px) {
  .lm-card-review-btn, .lm-card-review-done { position: static; margin-left: auto; }
}
.lm-booking-card:hover { box-shadow: var(--lm-shadow-md, 0 4px 14px rgba(0,0,0,.06)); border-color: var(--lm-border-2, #cdd); }  /* cursor-fix v3: no translateY (cursor flicker) */
.lm-booking-card-avatar { position: relative; flex-shrink: 0; }
.lm-booking-card-avatar > img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
/* Page badges are SQUARE (slightly rounded) to visually distinguish brand entities from human users. */
.lm-booking-card-page-badge { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 4px; border: 2px solid var(--lm-bg, #fff); object-fit: cover; background: var(--lm-bg, #fff); }
.lm-booking-card-page-badge-fallback { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; background: var(--lm-primary, #0f6f4f); text-transform: uppercase; line-height: 1; }
.lm-booking-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lm-booking-card-name { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--lm-text, #1a1a1a); }
.lm-booking-card-name strong { font-weight: 600; }
.lm-booking-card-page-name { color: var(--lm-muted, #888); font-size: 13px; font-weight: 400; }
.lm-verified-check { color: var(--lm-primary, #0f6f4f); flex-shrink: 0; vertical-align: -1px; }
html[data-lm-theme="dark"] .lm-verified-check { color: var(--lm-primary-text, #5fcc94); }
.lm-booking-card-meta { font-size: 12px; color: var(--lm-muted, #777); display: flex; gap: 6px; flex-wrap: wrap; }
.lm-booking-card-status { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
/* Right-side pinned column on each list card: small label above offer amount.
   Top padding leaves room for the absolute-positioned booking #ID. */
.lm-booking-card-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-left: auto;
  padding-left: 12px;
  padding-top: 14px;
  text-align: right;
}
/* City pill in the meta line (after dates). Inline with the rest of the meta. */
.lm-booking-card-city {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.lm-booking-card-city svg { color: var(--lm-muted-2, #9ca3af); flex-shrink: 0; vertical-align: -1px; }
/* Small uppercase label above the offer amount: "Initial offer" / "Current offer" / "Final amount". */
.lm-booking-card-offer-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--lm-muted-2, #9ca3af);
  line-height: 1;
}
html[data-lm-theme="dark"] .lm-booking-card-offer-label { color: var(--lm-muted-2, #6e7681); }
/* Offer line: optional [prev → arrow] then current amount in big green. */
.lm-booking-card-offer {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.lm-booking-card-amount-prev {
  font-size: 13px;
  font-weight: 500;
  color: var(--lm-muted-2, #9ca3af);
  text-decoration: line-through;
}
.lm-booking-card-arrow {
  color: var(--lm-muted-2, #9ca3af);
  flex-shrink: 0;
  transform: translateY(2px); /* nudge arrow to optical-center with the amounts */
}
.lm-booking-card-amount { font-size: 18px; font-weight: 700; color: var(--lm-primary-text, #0f6f4f); white-space: nowrap; line-height: 1.1; }
html[data-lm-theme="dark"] .lm-booking-card-city { color: var(--lm-muted, #8b949e); }
html[data-lm-theme="dark"] .lm-booking-card-city svg { color: var(--lm-muted-2, #6e7681); }
html[data-lm-theme="dark"] .lm-booking-card-amount-prev { color: var(--lm-muted-2, #6e7681); }
html[data-lm-theme="dark"] .lm-booking-card-arrow { color: var(--lm-muted-2, #6e7681); }
html[data-lm-theme="dark"] .lm-booking-card-amount { color: var(--lm-primary-text, #5fcc94); }

.lm-status-pill { display: inline-block; padding: 2px 9px; font-size: 11px; font-weight: 600; border-radius: 12px; text-transform: capitalize; letter-spacing: .02em; }
.lm-status-pill-lg { font-size: 12px; padding: 4px 12px; border-radius: 14px; }
.lm-status-requested { background: #fff7e0; color: #b07b00; }
.lm-status-counter_offered { background: #e0f0ff; color: #1565c0; }
.lm-status-accepted { background: #e3f9ed; color: #0a8a4f; }
.lm-status-declined { background: #fde2e2; color: #c33; }
.lm-status-completed { background: #e8e8e8; color: #555; }
.lm-status-cancelled { background: #f0f0f0; color: #888; }
/* Status pills — dark mode (semantic palette stays recognisable but tinted for dark surface) */
html[data-lm-theme="dark"] .lm-status-requested      { background: rgba(245,158,11,.18);  color: #fbbf24; }
html[data-lm-theme="dark"] .lm-status-counter_offered{ background: rgba(29,155,240,.18);  color: #60a5fa; }
html[data-lm-theme="dark"] .lm-status-accepted       { background: rgba(46,161,111,.20);  color: #5fcc94; }
html[data-lm-theme="dark"] .lm-status-declined       { background: rgba(192,57,43,.20);   color: #ff7b6f; }
html[data-lm-theme="dark"] .lm-status-completed      { background: rgba(255,255,255,.08); color: #c9d1d9; }
html[data-lm-theme="dark"] .lm-status-cancelled      { background: rgba(255,255,255,.06); color: #8b949e; }

/* "Whose turn" badge — appears next to status pill on /bookings cards.
   Bright green pulsing for "your turn", muted gray for "awaiting their response". */
.lm-turn-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.lm-turn-yours {
  background: var(--lm-primary, #0a8a4f);
  color: #fff;
}
.lm-turn-other {
  background: #f0f0f0;
  color: #888;
}
.lm-turn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
  flex-shrink: 0;
  animation: lm-turn-pulse 1.6s ease-in-out infinite;
}
@keyframes lm-turn-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) {
  .lm-turn-dot { animation: none; }
}
html[data-lm-theme="dark"] .lm-turn-other { background: #2a2f37; color: #aab; }

/* Dispute-flavoured turn badge — same shape, orange palette so it reads as
   "this is a dispute waiting on someone" rather than a normal negotiation. */
.lm-turn-dispute-yours {
  background: #ea8a1f;
  color: #fff;
}
.lm-turn-dispute-other {
  background: #fff3e0;
  color: #b54708;
}
html[data-lm-theme="dark"] .lm-turn-dispute-other { background: #2a1d10; color: #f59e0b; }

/* Escalated state — admin owns next action; red palette to signal severity. */
.lm-turn-dispute-escalated {
  background: #c0392b;
  color: #fff;
}
html[data-lm-theme="dark"] .lm-turn-dispute-escalated { background: #8a1f15; color: #fff; }

/* ── Admin dispute inbox rows ───────────────────────────── */
.lm-bookings-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--lm-muted, #6b7280);
}
.lm-admin-dispute-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--lm-border, #e5e7eb);
  border-radius: 8px;
  background: var(--lm-bg, #fff);
  color: var(--lm-text, inherit);
  margin-bottom: 8px;
  transition: border-color .15s, box-shadow .15s;
  cursor: pointer;
}
.lm-admin-dispute-row:focus-visible {
  outline: 2px solid var(--lm-primary, #0f6f4f);
  outline-offset: 2px;
}
.lm-admin-dispute-row:hover {
  border-color: var(--lm-primary, #0f6f4f);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
html[data-lm-theme="dark"] .lm-admin-dispute-row {
  background: var(--lm-surface, #151b23);
  border-color: var(--lm-border, #2a3038);
  color: var(--lm-text, #e6edf3);
}
html[data-lm-theme="dark"] .lm-admin-dispute-row:hover {
  border-color: var(--lm-primary, #2ea16f);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
html[data-lm-theme="dark"] .lm-admin-dispute-title { color: var(--lm-text, #e6edf3); }
html[data-lm-theme="dark"] .lm-admin-dispute-service { color: var(--lm-text, #e6edf3); }
html[data-lm-theme="dark"] .lm-admin-dispute-amount { color: var(--lm-text, #e6edf3); }
html[data-lm-theme="dark"] .lm-admin-money-val { color: var(--lm-text, #e6edf3); }
html[data-lm-theme="dark"] .lm-admin-money-label { color: var(--lm-muted-2, #6e7681); }
html[data-lm-theme="dark"] .lm-admin-money-spread { color: var(--lm-primary-text, #5fcc94); }
html[data-lm-theme="dark"] .lm-admin-dispute-row-id { color: var(--lm-muted, #8b949e); }
html[data-lm-theme="dark"] .lm-admin-dispute-role { color: var(--lm-muted-2, #6e7681); }
html[data-lm-theme="dark"] .lm-admin-dispute-row-meta { color: var(--lm-muted, #8b949e); }
html[data-lm-theme="dark"] .lm-admin-dispute-vs { color: var(--lm-muted-2, #6e7681); }
html[data-lm-theme="dark"] .lm-admin-dispute-sep { color: var(--lm-muted-2, #6e7681); }
html[data-lm-theme="dark"] .lm-admin-dispute-row a { color: inherit; }
html[data-lm-theme="dark"] .lm-admin-dispute-row a:hover { color: var(--lm-primary-text, #5fcc94); }
html[data-lm-theme="dark"] .lm-admin-dispute-open-link { color: var(--lm-primary-text, #5fcc94) !important; }
.lm-admin-dispute-row a {
  color: inherit;
  text-decoration: none;
}
.lm-admin-dispute-row a:hover {
  color: var(--lm-primary, #0a8a4f);
  text-decoration: underline;
}
.lm-admin-dispute-open-link {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lm-primary, #0a8a4f) !important;
}
.lm-admin-dispute-row-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.lm-admin-dispute-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--lm-text, #111);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lm-admin-dispute-service {
  color: var(--lm-text, #111);
}
.lm-admin-dispute-sep {
  color: var(--lm-muted, #9ca3af);
}
.lm-admin-dispute-row-escalated {
  border-left: 4px solid #c0392b;
  padding-left: 13px;
}
.lm-admin-dispute-row-id {
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 13px;
  color: var(--lm-muted, #6b7280);
  font-weight: 600;
}
.lm-admin-dispute-row-parties {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.lm-admin-dispute-party {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
}
.lm-admin-dispute-role {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--lm-muted, #6b7280);
}
.lm-admin-dispute-name {
  font-weight: 600;
  font-size: 14px;
}
.lm-admin-dispute-vs {
  color: var(--lm-muted, #9ca3af);
  font-size: 16px;
}
.lm-admin-dispute-row-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  font-size: 12px;
  color: var(--lm-muted, #6b7280);
}
.lm-admin-dispute-amount {
  font-weight: 700;
  font-size: 15px;
  color: var(--lm-text, #111);
}
.lm-admin-dispute-money {
  display: inline-flex;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 4px;
}
.lm-admin-money-cell {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: right;
}
.lm-admin-money-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--lm-muted, #6b7280);
}
.lm-admin-money-val {
  font-weight: 700;
  font-size: 14px;
  color: var(--lm-text, #111);
  font-variant-numeric: tabular-nums;
}
.lm-admin-money-spread {
  color: var(--lm-primary, #0a8a4f);
}
.lm-admin-dispute-when {
  font-size: 11px;
  margin-left: 6px;
}
@media (max-width: 640px) {
  .lm-admin-dispute-row { grid-template-columns: 1fr; }
  .lm-admin-dispute-row-meta { align-items: flex-start; text-align: left; }
}

/* ── Detail ─────────────────────────────────────── */
.lm-booking-detail { padding-bottom: 60px; }
.lm-back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--lm-muted, #555); text-decoration: none; font-size: 13px; margin-bottom: 14px; }
.lm-back-link:hover { color: var(--lm-primary-text, #0f6f4f); }
.lm-booking-detail-title-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.lm-booking-detail-title-row h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--lm-text, #0f172a); }
.lm-bid { color: var(--lm-muted-2, #aaa); font-weight: 400; }

.lm-booking-summary { background: var(--lm-bg, #fff); border: 1px solid var(--lm-border, #e3e3e3); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; }
.lm-party-card { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--lm-border-2, #f0f0f0); }
.lm-party-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; }
.lm-party-avatar-link { display: inline-block; line-height: 0; flex-shrink: 0; }
/* Inline link that inherits the surrounding text colour and only underlines
   on hover. Used wherever we wrap names/avatars with profile links so the
   visual stays clean. */
.lm-link-plain { color: inherit !important; text-decoration: none; }
.lm-link-plain:hover { text-decoration: underline; color: var(--lm-primary-text, #0f6f4f) !important; }
.lm-party-info { flex: 1; min-width: 0; }
.lm-party-name { display: flex; align-items: center; gap: 6px; font-size: 16px; color: var(--lm-text, #0f172a); }
.lm-party-page { font-size: 12px; color: var(--lm-muted, #777); display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.lm-party-page-icon { width: 14px; height: 14px; border-radius: 3px; object-fit: cover; }  /* SQUARE: brand pages */
.lm-party-role { font-size: 11px; color: var(--lm-muted-2, #999); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* Booking detail meta grid — Phase H R69:
   Service on the left (1fr), Dates on the right (auto, hugs the
   mini-calendar). Created moved to a tiny stamp next to the status pill
   in the title row, freeing this grid for what actually matters. */
.lm-booking-meta-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 24px;
  align-items: start;
}
.lm-meta-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lm-meta-cell-dates { min-width: 0; }
.lm-meta-label { font-size: 11px; color: var(--lm-muted-2, #999); text-transform: uppercase; letter-spacing: .04em; }
.lm-meta-value { font-size: 14px; color: var(--lm-text, #1a1a1a); font-weight: 500; }

/* Phase H R69: redesigned summary block — left column (Service / City /
   Offer rows with leading icons) sits next to right column (date range +
   mini calendar + time label). Replaces the old 2-cell meta grid. */
.lm-booking-summary-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px 28px;
  align-items: start;
}
.lm-booking-summary-left  { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lm-booking-summary-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.lm-bs-row { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.lm-bs-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--lm-primary-soft, rgba(15,111,79,0.08));
  color: var(--lm-primary-strong, #0a8a4f);
  margin-top: 2px;
}
.lm-bs-body  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lm-bs-label {
  font-size: 11px; color: var(--lm-muted-2, #999);
  text-transform: uppercase; letter-spacing: .05em;
}
.lm-bs-value { font-size: 14.5px; color: var(--lm-text); font-weight: 500; line-height: 1.35; }

/* Service title — pulls the eye first. */
.lm-bs-service-title { font-size: 16px; font-weight: 600; }

/* Offer row — highlighted with a tinted background, larger amount. */
.lm-bs-offer {
  background: var(--lm-primary-soft, rgba(15,111,79,0.06));
  border: 1px solid var(--lm-primary-soft-2, rgba(15,111,79,0.18));
  border-radius: 10px;
  padding: 12px 14px;
}
.lm-bs-offer .lm-bs-icon {
  background: var(--lm-primary, #10b981);
  color: #fff;
}
.lm-bs-offer-value {
  font-size: 22px; font-weight: 700;
  color: var(--lm-primary-strong, #0a8a4f);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
/* Phase H R69: brand's free-text note hangs below the offer amount. */
.lm-bs-offer-note {
  display: flex; gap: 6px; align-items: flex-start;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--lm-primary-soft-2, rgba(15,111,79,0.25));
  font-size: 13px; color: var(--lm-text);
  line-height: 1.45;
}
.lm-bs-offer-note svg { color: var(--lm-muted, #6b7280); flex-shrink: 0; margin-top: 3px; }
html[data-lm-theme="dark"] .lm-bs-offer-note { border-top-color: rgba(110, 231, 183, 0.25); }

/* Right column — date range header + mini calendar + time line. */
.lm-bs-daterange-head {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--lm-muted-2, #999);
}
.lm-bs-daterange-head .lm-bs-label { letter-spacing: .05em; }
.lm-bs-time {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px;
  font-size: 12.5px; color: var(--lm-muted, #6b7280);
  font-variant-numeric: tabular-nums;
}
.lm-bs-time svg { color: currentColor; opacity: .75; }

html[data-lm-theme="dark"] .lm-bs-icon { background: rgba(110, 231, 183, 0.10); color: #6ee7b7; }
html[data-lm-theme="dark"] .lm-bs-offer { background: rgba(110, 231, 183, 0.06); border-color: rgba(110, 231, 183, 0.18); }
html[data-lm-theme="dark"] .lm-bs-offer .lm-bs-icon { background: var(--lm-primary, #10b981); color: #fff; }
html[data-lm-theme="dark"] .lm-bs-offer-value { color: #6ee7b7; }

@media (max-width: 720px) {
  .lm-booking-summary-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* Created stamp — tiny secondary metadata next to the status pill. */
.lm-booking-created-stamp {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
  font-size: 11px; color: var(--lm-muted, #6b7280);
  font-variant-numeric: tabular-nums;
}
.lm-booking-created-stamp svg { color: currentColor; opacity: .7; }
html[data-lm-theme="dark"] .lm-booking-created-stamp { color: var(--lm-muted, #94a3b8); }

/* Date range textual line above the mini-calendar. */
.lm-booking-daterange { display: flex; align-items: center; gap: 8px; }
.lm-booking-daterange-text { font-weight: 600; font-size: 13.5px; color: var(--lm-text); }

/* Mini calendar(s) — one or two side-by-side month panels with the
   booked range highlighted. Compact, tooltip-y feel — not interactive. */
.lm-booking-minical { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
/* Phase H R69: bumped from compact tooltip-size to a real glanceable
   calendar (~268px wide). Cells, fonts, padding all scale up so the
   booked range reads at a distance. */
.lm-mc {
  background: var(--lm-card, #fff);
  border: 1px solid var(--lm-border, #e3e3e3);
  border-radius: 10px;
  padding: 12px 14px;
  min-width: 268px;
}
.lm-mc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
}
.lm-mc-title {
  flex: 1;
  text-align: center;
  font-size: 14px; font-weight: 600; color: var(--lm-text);
  user-select: none;
}
.lm-mc-nav {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--lm-border, #e3e3e3);
  border-radius: 6px;
  color: var(--lm-text);
  cursor: pointer;
  padding: 0;
  transition: background .12s, border-color .12s, color .12s, opacity .12s;
  -webkit-tap-highlight-color: transparent;
}
.lm-mc-nav:hover { background: var(--lm-primary-soft, rgba(15,111,79,0.08)); border-color: var(--lm-primary, #10b981); color: var(--lm-primary-strong, #0a8a4f); }
.lm-mc-nav:active { transform: translateY(1px); }
.lm-mc-nav:disabled { opacity: .25; cursor: default; }
.lm-mc-nav:disabled:hover { background: transparent; border-color: var(--lm-border, #e3e3e3); color: var(--lm-text); }
html[data-lm-theme="dark"] .lm-mc-nav { border-color: var(--lm-border, #2a3038); }
html[data-lm-theme="dark"] .lm-mc-nav:hover { background: rgba(110,231,183,0.10); border-color: var(--lm-primary, #10b981); color: #6ee7b7; }

/* Phase H R69: party-card "deal" layout — two parties left & right of an
   arrow ("Client → hires → Talent"), tells the viewer the deal direction
   at a glance. Replaces the stacked name / on-behalf / role lines that
   read confusingly to admins. */
.lm-party-card-deal {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--lm-card, #fff);
  border: 1px solid var(--lm-border, #e3e3e3);
  border-radius: 12px;
  margin-bottom: 16px;
}
.lm-party-deal-side { display: flex; gap: 10px; align-items: center; min-width: 0; flex: 1 1 220px; }
.lm-party-deal-avatar-link { flex-shrink: 0; display: block; line-height: 0; text-decoration: none; }
.lm-party-deal-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--lm-surface-2, #f1f5f9);
  display: block;
}
.lm-party-deal-avatar--page { border-radius: 8px; }
.lm-party-deal-avatar--placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: var(--lm-muted, #6b7280);
  background: var(--lm-surface-2, #f1f5f9);
}
.lm-party-deal-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lm-party-deal-role {
  font-size: 10.5px; font-weight: 600;
  color: var(--lm-muted-2, #999);
  text-transform: uppercase; letter-spacing: .06em;
}
.lm-party-deal-name {
  display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 14.5px; color: var(--lm-text);
  text-decoration: none;
  line-height: 1.25;
}
.lm-party-deal-name:hover strong { color: var(--lm-primary); }
.lm-party-deal-byline { font-size: 11.5px; color: var(--lm-muted, #6b7280); margin-top: 1px; }
.lm-party-deal-byline a { color: var(--lm-text); }
.lm-party-deal-byline a:hover { color: var(--lm-primary); }

.lm-party-deal-arrow {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--lm-muted, #6b7280);
  flex-shrink: 0;
  padding: 0 4px;
}
.lm-party-deal-arrow-label {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--lm-muted-2, #999);
}
.lm-party-deal-arrow svg { color: var(--lm-primary, #10b981); }

.lm-party-deal-chat { flex-shrink: 0; margin-left: auto; }

html[data-lm-theme="dark"] .lm-party-card-deal { background: var(--lm-card, #161b22); border-color: var(--lm-border, #2a3038); }
html[data-lm-theme="dark"] .lm-party-deal-avatar { background: rgba(255,255,255,0.04); }

@media (max-width: 640px) {
  /* On phones the arrow flips to vertical so each party gets a full row. */
  .lm-party-card-deal { flex-direction: column; align-items: stretch; }
  .lm-party-deal-side { flex: 1 1 auto; }
  .lm-party-deal-arrow { flex-direction: row; align-self: flex-start; }
  .lm-party-deal-arrow svg { transform: rotate(90deg); }
  .lm-party-deal-chat { margin-left: 0; align-self: stretch; }
}
.lm-mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.lm-mc-wd { font-size: 10.5px; color: var(--lm-muted-2, #999); text-align: center; padding: 2px 0; text-transform: uppercase; letter-spacing: .04em; }
.lm-mc-cell { font-size: 13px; text-align: center; padding: 7px 0; border-radius: 6px; color: var(--lm-text); font-variant-numeric: tabular-nums; }
.lm-mc-empty { background: transparent; }
.lm-mc-cell.is-in {
  background: var(--lm-primary-soft, rgba(15,111,79,0.10));
  color: var(--lm-primary-strong, #0a8a4f);
  font-weight: 600;
}
.lm-mc-cell.is-start { border-top-left-radius: 50%; border-bottom-left-radius: 50%; background: var(--lm-primary, #10b981); color: #fff; }
.lm-mc-cell.is-end   { border-top-right-radius: 50%; border-bottom-right-radius: 50%; background: var(--lm-primary, #10b981); color: #fff; }
.lm-mc-cell.is-start.is-end { border-radius: 50%; }
html[data-lm-theme="dark"] .lm-mc { background: var(--lm-card, #161b22); border-color: var(--lm-border, #2a3038); }
html[data-lm-theme="dark"] .lm-mc-cell.is-in { background: rgba(110, 231, 183, 0.12); color: #6ee7b7; }
html[data-lm-theme="dark"] .lm-mc-cell.is-start,
html[data-lm-theme="dark"] .lm-mc-cell.is-end { background: var(--lm-primary, #10b981); color: #fff; }

/* Admin tools panel on booking_detail — surfaces money-flow actions
   (verify/decline transfer, release payout, refund) without forcing the
   admin to leave the booking detail page. Yellow accent so it's visually
   distinct from party-side actions. */
.lm-admin-panel {
  border: 1px solid #fcd34d;
  background: rgba(252, 211, 77, 0.08);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
}
.lm-admin-panel-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #92400e;
  background: rgba(252, 211, 77, 0.18);
  border-bottom: 1px solid rgba(252, 211, 77, 0.5);
}
.lm-admin-panel-body { padding: 4px 0; }
.lm-admin-panel-row {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(252, 211, 77, 0.25);
  flex-wrap: wrap;
}
.lm-admin-panel-row:last-child { border-bottom: 0; }
.lm-admin-panel-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lm-admin-panel-info strong { font-size: 13.5px; color: var(--lm-text); }
.lm-admin-panel-meta { font-size: 12px; color: var(--lm-muted, #6b7280); }
.lm-admin-panel-meta a { color: var(--lm-primary); }
.lm-admin-panel-meta code { background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }
.lm-admin-panel-actions { display: flex; gap: 6px; flex-wrap: wrap; }
html[data-lm-theme="dark"] .lm-admin-panel { border-color: rgba(252, 211, 77, 0.45); background: rgba(252, 211, 77, 0.06); }
html[data-lm-theme="dark"] .lm-admin-panel-head { color: #fcd34d; background: rgba(252, 211, 77, 0.10); }
html[data-lm-theme="dark"] .lm-admin-panel-meta code { background: rgba(255,255,255,0.06); }

/* Phase H R69: admin "All" mode shows both parties in each card. */
.lm-booking-card-vs   { color: var(--lm-muted, #94a3b8); margin: 0 4px; font-weight: 400; }
.lm-booking-card-other { color: var(--lm-muted, #6b7280); font-weight: 500; font-size: 12.5px; }

/* Breakdown table */
.lm-booking-breakdown { background: var(--lm-bg, #fff); border: 1px solid var(--lm-border, #e3e3e3); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; }
.lm-booking-breakdown h3 { font-size: 13px; font-weight: 600; color: var(--lm-muted, #777); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px 0; }
.lm-breakdown-table { width: 100%; border-collapse: collapse; }
.lm-breakdown-table td { padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--lm-border-2, #f0f0f0); }
.lm-breakdown-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.lm-breakdown-table tr:last-child td { border-bottom: 0; }
.lm-breakdown-table .row-subtotal td { padding-top: 12px; border-top: 1px solid var(--lm-border, #ddd); }
.lm-breakdown-table .row-final td { padding: 14px 0 4px; font-size: 16px; color: var(--lm-primary-text, #0f6f4f); border-top: 2px solid var(--lm-border, #ddd); border-bottom: 0; }

/* Action bar */
.lm-booking-actions { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.lm-booking-actions-info { background: var(--lm-bg, #fff); border: 1px solid var(--lm-border, #e3e3e3); border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; font-size: 13px; color: var(--lm-muted, #777); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lm-booking-actions-info-buttons { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* Turn hint above the action panel — green when it's your move, gray when waiting. */
.lm-booking-turn-hint {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lm-booking-turn-hint::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lm-turn-yours-text { color: var(--lm-primary-text, #0f6f4f); }
.lm-turn-yours-text::before { background: var(--lm-primary, #0f6f4f); }
.lm-turn-other-text  { color: var(--lm-muted, #6b7280); }
.lm-turn-other-text::before { background: var(--lm-muted-2, #9ca3af); }

/* Cancel-request button — neutral ghost so it doesn't compete with primary actions. */
.lm-btn-ghost {
  background: transparent;
  color: var(--lm-muted, #6b7280);
  border: 1px solid var(--lm-border, #d1d5db);
}
.lm-btn-ghost:hover { background: var(--lm-surface-2, #f3f4f6); color: var(--lm-text, #374151); }
html[data-lm-theme="dark"] .lm-btn-ghost { color: var(--lm-muted, #8b949e); border-color: var(--lm-border, #2a3038); }
html[data-lm-theme="dark"] .lm-btn-ghost:hover { background: var(--lm-surface-2, #1c232c); color: var(--lm-text, #e6edf3); }

/* Timeline — wrapper is transparent so each message reads as its own
   standalone "island" matching .lm-booking-actions-info. */
.lm-booking-timeline { background: transparent; border: 0; padding: 0; }
.lm-booking-timeline h3 {
  font-size: 13px; font-weight: 600; color: var(--lm-muted, #777);
  text-transform: uppercase; letter-spacing: .04em;
  margin: 0 0 14px 0;
}
.lm-timeline-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
/* Each negotiation message rendered as its own island — matches the
   .lm-booking-actions-info "Waiting for the other party..." card style. */
.lm-timeline-item {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  background: var(--lm-bg, #fff);
  border: 1px solid var(--lm-border, #e3e3e3);
  border-radius: 10px;
  color: var(--lm-text, inherit);
}
/* Left accent stripe colored by SENDER side so the eye instantly tracks
   "who said what" through the negotiation: brand-side green, talent-side
   blue, fallback gray. Page admins acting on behalf of a brand resolve
   to "brand" via get_booking_messages → sender_role. */
/* Sender-side stripe colour is set via --sender-color custom property on
   each from-* variant so dispute styles can pair the same colour with an
   outer orange ring. Default border-left uses it. */
.lm-timeline-item                         { --sender-color: #cbd5e1; border-left: 4px solid var(--sender-color); } /* fallback slate */
.lm-timeline-item.lm-timeline-from-talent { --sender-color: var(--lm-primary, #0f6f4f); } /* green = talent/model */
.lm-timeline-item.lm-timeline-from-brand  { --sender-color: #00363f; } /* dark teal = brand/employer */
.lm-timeline-item.lm-timeline-from-admin  { --sender-color: #c0392b; } /* red = LocalModels staff/admin */
.lm-timeline-item.lm-timeline-from-other  { --sender-color: #cbd5e1; } /* light slate = system messages */
/* Phase H R69: lift the card off the page-black background in dark
   theme — the default --lm-bg is almost pure black, so a card with that
   same colour disappears. Per-role tinted backgrounds + matching border
   so talent / brand / admin are visually distinct at a glance. */
html[data-lm-theme="dark"] .lm-timeline-item                         { background: var(--lm-card, #161b22); border-color: var(--lm-border, #2a3038); }
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-from-talent { background: rgba(110, 231, 183, 0.10); border-color: rgba(110, 231, 183, 0.35); }
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-from-brand  { background: rgba(56, 189, 248, 0.10); border-color: rgba(56, 189, 248, 0.35); }
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-from-admin  { background: rgba(248, 113, 113, 0.10); border-color: rgba(248, 113, 113, 0.35); }
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-from-other  { background: var(--lm-card, #161b22); border-color: var(--lm-border, #2a3038); }

/* Dispute messages — light-orange tinted card body + an OUTER orange
   outline that traces the card's full rounded contour. `outline` with
   `outline-offset` honours border-radius in modern browsers (Chrome 95+,
   Safari 16.4+, Firefox 88+), so the orange ring curves along the top
   and bottom corners as well as the left side, parallel to the inner
   sender-colour border-left. Margin reserves space so the outline isn't
   clipped by neighbouring cards. */
/* Dispute messages — light-orange tinted card so the eye spots them as
   "this is dispute talk, not regular negotiation". Sender border-left
   (green=talent / dark-teal=brand) stays so you still see who said it.
   No extra outer stripe (CSS outline + border-radius interaction was
   inconsistent across browsers — keeping it simple). */
.lm-timeline-item.lm-timeline-dispute,
.lm-timeline-item.lm-timeline-dispute_reply,
.lm-timeline-item.lm-timeline-dispute_resolved {
  background: #fff7ed;           /* light orange tint on the whole card */
  border-top-color: #fde6c5;
  border-right-color: #fde6c5;
  border-bottom-color: #fde6c5;
  border-left-color: var(--sender-color);
}

/* Speech-bubble inside the dispute card — same light orange as card body
   so message text doesn't sit in a separate gray box. */
.lm-timeline-item.lm-timeline-dispute .lm-timeline-text,
.lm-timeline-item.lm-timeline-dispute_reply .lm-timeline-text,
.lm-timeline-item.lm-timeline-dispute_resolved .lm-timeline-text {
  background: #fff7ed;
  color: inherit;
}

html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-dispute,
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-dispute_reply,
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-dispute_resolved {
  background: rgba(176, 123, 0, 0.15);
  border-top-color: rgba(176, 123, 0, 0.40);
  border-right-color: rgba(176, 123, 0, 0.40);
  border-bottom-color: rgba(176, 123, 0, 0.40);
  /* border-left-color inherits --sender-color from the from-* variant */
}
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-dispute .lm-timeline-text,
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-dispute_reply .lm-timeline-text,
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-dispute_resolved .lm-timeline-text {
  background: rgba(176, 123, 0, 0.15);
  color: inherit;
}

/* LocalModels admin reply inside a dispute — distinct red palette so it's
   instantly visible as an "official" message from the platform. Overrides
   the orange dispute tint for admin-sender messages.
   `.lm-timeline-from-admin` selector wins by being more specific (2 classes
   already on the dispute rule, +1 admin class via combinator). */
.lm-timeline-item.lm-timeline-dispute.lm-timeline-from-admin,
.lm-timeline-item.lm-timeline-dispute_reply.lm-timeline-from-admin,
.lm-timeline-item.lm-timeline-dispute_resolved.lm-timeline-from-admin {
  background: #fef2f2;            /* light red tint */
  border-top-color: #fecaca;
  border-right-color: #fecaca;
  border-bottom-color: #fecaca;
  border-left-color: var(--sender-color); /* red sender stripe */
}
.lm-timeline-item.lm-timeline-dispute.lm-timeline-from-admin .lm-timeline-text,
.lm-timeline-item.lm-timeline-dispute_reply.lm-timeline-from-admin .lm-timeline-text,
.lm-timeline-item.lm-timeline-dispute_resolved.lm-timeline-from-admin .lm-timeline-text {
  background: #fef2f2;
  color: inherit;
}
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-dispute.lm-timeline-from-admin,
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-dispute_reply.lm-timeline-from-admin,
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-dispute_resolved.lm-timeline-from-admin {
  background: rgba(192, 57, 43, 0.15);
  border-top-color: rgba(192, 57, 43, 0.40);
  border-right-color: rgba(192, 57, 43, 0.40);
  border-bottom-color: rgba(192, 57, 43, 0.40);
}
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-dispute.lm-timeline-from-admin .lm-timeline-text,
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-dispute_reply.lm-timeline-from-admin .lm-timeline-text,
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-dispute_resolved.lm-timeline-from-admin .lm-timeline-text {
  background: rgba(192, 57, 43, 0.15);
  color: inherit;
}
html[data-lm-theme="dark"] .lm-timeline-item {
  background: var(--lm-surface, #151b23);
  border-top-color: var(--lm-border, #2a3038);
  border-right-color: var(--lm-border, #2a3038);
  border-bottom-color: var(--lm-border, #2a3038);
  /* preserve border-left-color = var(--sender-color) from base rule */
  color: var(--lm-text, #e6edf3);
}
/* Brighter sender stripes in dark mode so the role colour reads against
   the dark surface (talent #2ea16f primary green, brand bright teal). */
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-from-talent { --sender-color: #34d399; }
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-from-brand  { --sender-color: #006474; }
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-from-admin  { --sender-color: #ff7b6f; }
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-from-other  { --sender-color: #6e7681; }
.lm-timeline-avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.lm-timeline-body { flex: 1; min-width: 0; }
.lm-timeline-meta { display: flex; align-items: baseline; gap: 8px; font-size: 13px; flex-wrap: wrap; margin-bottom: 4px; color: var(--lm-text, inherit); }
.lm-timeline-action { color: var(--lm-muted, #777); }
.lm-timeline-handle {
  color: var(--lm-muted, #6b7280);
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 12px;
  text-decoration: none;
  margin-left: 2px;
}
.lm-timeline-handle:hover { color: var(--lm-primary-text, #0f6f4f); text-decoration: underline; }
.lm-timeline-time { color: var(--lm-muted-2, #aaa); font-size: 11px; margin-left: auto; }
.lm-timeline-text { font-size: 14px; color: var(--lm-text, #1a1a1a); margin-top: 4px; padding: 8px 12px; background: var(--lm-surface-2, #f6f7f9); border-radius: 8px; }
.lm-timeline-offer { font-size: 12px; color: var(--lm-muted, #555); margin-top: 6px; padding: 6px 10px; background: var(--lm-primary-soft, #eef6f1); border-left: 2px solid var(--lm-primary, #0f6f4f); border-radius: 4px; }
.lm-timeline-offer strong { color: var(--lm-primary-text, #0f6f4f); }

/* ── Modals ─────────────────────────────────────── */
.lm-modal-overlay { position: fixed; inset: 0; background: rgba(20,22,28,.45); z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
.lm-modal-card { background: var(--lm-bg, #fff); color: var(--lm-text, inherit); border-radius: 12px; padding: 24px 26px; width: 100%; max-width: min(540px, calc(100vw - 24px)); box-shadow: 0 20px 60px rgba(0,0,0,.2); position: relative; }
.lm-counter-modal-card { max-width: min(600px, calc(100vw - 24px)); }
.lm-modal-close { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 24px; line-height: 1; color: var(--lm-muted, #888); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.lm-modal-close:hover { background: var(--lm-surface-2, #f0f0f0); color: var(--lm-text, #333); }
.lm-modal-title { margin: 0 0 16px 0; font-size: 18px; font-weight: 700; color: var(--lm-text, inherit); }
.lm-modal-subtitle { color: var(--lm-muted, #888); font-weight: 400; }

.lm-form-group { margin-bottom: 14px; }
.lm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lm-form-label { display: block; font-size: 12px; font-weight: 600; color: var(--lm-text-secondary, #555); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.lm-form-hint { color: var(--lm-muted, #999); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; }
.lm-form-control { width: 100%; padding: 9px 12px; font-size: 14px; border: 1px solid var(--lm-border, #d6d6d6); border-radius: 7px; background: var(--lm-bg, #fff); color: var(--lm-text, #111); box-sizing: border-box; font-family: inherit; }
.lm-form-control:focus { outline: 0; border-color: var(--lm-primary, #0f6f4f); box-shadow: 0 0 0 3px rgba(15,111,79,.15); }
.lm-form-control::placeholder { color: var(--lm-muted-2, #94a3b8); opacity: 1; }
html[data-lm-theme="dark"] .lm-form-control::placeholder { color: var(--lm-muted-2, #6e7681); }
textarea.lm-form-control { resize: vertical; min-height: 80px; }

.lm-radio-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--lm-border, #eee); border-radius: 7px; margin-bottom: 6px; cursor: pointer; font-size: 14px; color: var(--lm-text, inherit); background: var(--lm-bg, transparent); }
.lm-radio-row:has(input:checked) { border-color: var(--lm-primary, #0f6f4f); background: var(--lm-primary-soft, #f0faf4); }
.lm-radio-page-icon { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; }  /* SQUARE: brand pages */
.lm-radio-inline { display: inline-flex; align-items: center; gap: 5px; margin-right: 14px; cursor: pointer; font-size: 13px; color: var(--lm-text, inherit); }
.lm-checkbox-row { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--lm-text, inherit); }

/* Custom file picker — replaces the OS-native "Choose File" widget so it
   matches LM buttons across browsers. The real <input type="file"> is
   visually hidden but still focusable; the <label for=...> wraps a styled
   button + filename slot that the JS handler updates on change. */
.lm-file-native {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.lm-file-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--lm-border, #d6d6d6);
  border-radius: 7px;
  background: var(--lm-bg, #fff);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.lm-file-picker:hover { border-color: var(--lm-primary, #0f6f4f); }
.lm-file-native:focus + .lm-file-picker {
  border-color: var(--lm-primary, #0f6f4f);
  box-shadow: 0 0 0 3px rgba(15,111,79,.15);
}
.lm-file-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--lm-surface, #f3f4f6);
  border: 1px solid var(--lm-border, #d6d6d6);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lm-text, #111);
  white-space: nowrap;
  flex-shrink: 0;
}
.lm-file-picker-name {
  font-size: 13px;
  color: var(--lm-muted, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.lm-file-picker-name.has-file { color: var(--lm-text, #111); font-weight: 500; }
html[data-lm-theme="dark"] .lm-file-picker { background: #15171c; border-color: #2a2f37; }
html[data-lm-theme="dark"] .lm-file-picker-btn { background: #20242c; border-color: #2a2f37; color: #e6e8eb; }

/* LM-styled checkbox — replaces the OS-native blue square. Real input is
   hidden, .lm-check-box draws the visual; .is-checked state via :checked
   sibling combinator. */
.lm-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
}
.lm-check input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.lm-check-box {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border: 1.5px solid var(--lm-border, #c4c8cf);
  border-radius: 4px;
  background: var(--lm-bg, #fff);
  position: relative;
  margin-top: 1px;
  transition: background .15s, border-color .15s;
}
.lm-check input[type="checkbox"]:checked + .lm-check-box {
  background: var(--lm-primary, #0f6f4f);
  border-color: var(--lm-primary, #0f6f4f);
}
.lm-check input[type="checkbox"]:checked + .lm-check-box::after {
  content: "";
  position: absolute;
  top: 2px; left: 5px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lm-check input[type="checkbox"]:focus + .lm-check-box {
  box-shadow: 0 0 0 3px rgba(15,111,79,.15);
}
.lm-check-label { color: var(--lm-text, #111); line-height: 1.4; }
html[data-lm-theme="dark"] .lm-check-box { background: var(--lm-bg, #0d1117); border-color: var(--lm-border, #2a3038); }

.lm-counter-breakdown { background: var(--lm-surface-2, #f6f7f9); border-radius: 8px; padding: 12px 14px; margin: 14px 0; }
.lm-counter-breakdown h4 { font-size: 11px; font-weight: 700; color: var(--lm-muted, #777); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px 0; }
.lm-counter-breakdown .lm-breakdown-table td { background: transparent; border-bottom-color: var(--lm-border-2, #e8e9eb); padding: 5px 0; font-size: 13px; }

.lm-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lm-border-2, #f0f0f0); flex-wrap: wrap; }

/* Buttons (re-use LM if available, else local) */
.lm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; font-size: 13px; font-weight: 600; border-radius: 7px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.lm-btn-sm { padding: 6px 12px; font-size: 12px; }
.lm-btn-primary { background: var(--lm-primary, #0f6f4f); color: #fff; border-color: var(--lm-primary, #0f6f4f); }
.lm-btn-primary:hover { background: var(--lm-primary-strong, #0a5439); border-color: var(--lm-primary-strong, #0a5439); color: #fff; }
.lm-btn-secondary { background: var(--lm-bg, #fff); color: var(--lm-text, #333); border-color: var(--lm-border, #d0d0d0); }
.lm-btn-secondary:hover { background: var(--lm-surface-2, #f4f4f4); border-color: var(--lm-muted-2, #b0b0b0); }
.lm-btn-danger { background: var(--lm-bg, #fff); color: #c33; border-color: #e0a0a0; }
.lm-btn-danger:hover { background: #fae8e8; border-color: #c33; }
html[data-lm-theme="dark"] .lm-btn-danger { background: var(--lm-surface, #151b23); color: #ff7b6f; border-color: rgba(192,57,43,.45); }
html[data-lm-theme="dark"] .lm-btn-danger:hover { background: rgba(192,57,43,.18); border-color: #ff7b6f; }

/* ── Mobile ─────────────────────────────────────── */
@media (max-width: 720px) {
  .lm-bookings-page { padding: 16px 8px 80px; }
  /* Reset to single column — drop the explicit grid-area assignments from the desktop rule. */
  .lm-booking-meta-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; }
  .lm-booking-meta-grid > .lm-meta-cell:nth-child(1),
  .lm-booking-meta-grid > .lm-meta-cell:nth-child(2),
  .lm-booking-meta-grid > .lm-meta-cell:nth-child(3) { grid-column: auto; grid-row: auto; }
  .lm-form-row { grid-template-columns: 1fr; }
  .lm-modal-card { padding: 18px 16px; }
  .lm-bookings-section-title { font-size: 16px; }
  .lm-bookings-subsection-title { font-size: 12px; }
}

/* ── Dark mode ──────────────────────────────────── */
html[data-lm-theme="dark"] .lm-bookings-page { background: var(--lm-bg, #0d1117); }
html[data-lm-theme="dark"] .lm-booking-card,
html[data-lm-theme="dark"] .lm-booking-summary,
html[data-lm-theme="dark"] .lm-booking-breakdown,
html[data-lm-theme="dark"] .lm-booking-actions-info,
html[data-lm-theme="dark"] .lm-modal-card,
html[data-lm-theme="dark"] .lm-bookings-empty { background: var(--lm-surface, #151b23); border-color: var(--lm-border, #2a3038); color: var(--lm-text, #e6edf3); }
/* Timeline wrapper stays transparent in dark too — only individual
   .lm-timeline-item children carry the card background. */
html[data-lm-theme="dark"] .lm-booking-timeline { background: transparent; border: 0; }
html[data-lm-theme="dark"] .lm-bookings-empty-sm { background: var(--lm-surface-2, #222a33); border-color: var(--lm-border, #2a3038); color: var(--lm-muted, #8b949e); }
html[data-lm-theme="dark"] .lm-bookings-section-title { color: var(--lm-text, #e6edf3); border-bottom-color: var(--lm-primary, #2ea16f); }
html[data-lm-theme="dark"] .lm-bookings-subsection-title { color: var(--lm-muted, #8b949e); }
html[data-lm-theme="dark"] .lm-form-control { background: var(--lm-bg, #0d1117); border-color: var(--lm-border, #2a3038); color: var(--lm-text, #e6edf3); }
html[data-lm-theme="dark"] .lm-counter-breakdown { background: var(--lm-bg, #0d1117); }
/* Phase H R69: lift the inline message box off the card surface in dark
   theme — same-as-bg made it disappear. Use a slightly lighter rgba so
   the bubble reads as a distinct sub-island inside the timeline card. */
html[data-lm-theme="dark"] .lm-timeline-text { background: rgba(255, 255, 255, 0.04); color: var(--lm-text, #e6edf3); }
html[data-lm-theme="dark"] .lm-radio-row { background: var(--lm-bg, #0d1117); border-color: var(--lm-border, #2a3038); color: var(--lm-text, #e6edf3); }
html[data-lm-theme="dark"] .lm-radio-row:has(input:checked) { background: var(--lm-primary-soft, rgba(46,161,111,.12)); border-color: var(--lm-primary, #2ea16f); }
html[data-lm-theme="dark"] .lm-modal-close:hover { background: var(--lm-surface-2, #1c232c); color: var(--lm-text, #e6edf3); }
html[data-lm-theme="dark"] .lm-meta-value { color: var(--lm-text, #e6edf3); }
html[data-lm-theme="dark"] .lm-party-page { color: var(--lm-muted, #8b949e); }
html[data-lm-theme="dark"] .lm-party-role { color: var(--lm-muted-2, #6e7681); }
html[data-lm-theme="dark"] .lm-meta-label { color: var(--lm-muted-2, #6e7681); }
html[data-lm-theme="dark"] .lm-back-link { color: var(--lm-muted, #8b949e); }
html[data-lm-theme="dark"] .lm-back-link:hover { color: var(--lm-primary-text, #5fcc94); }
html[data-lm-theme="dark"] .lm-bid { color: var(--lm-muted-2, #6e7681); }
html[data-lm-theme="dark"] .lm-booking-detail-title-row h1 { color: var(--lm-text, #e6edf3); }
html[data-lm-theme="dark"] .lm-booking-actions-info { color: var(--lm-muted, #8b949e); }
html[data-lm-theme="dark"] .lm-booking-card-name { color: var(--lm-text, #e6edf3); }
html[data-lm-theme="dark"] .lm-booking-card-page-name { color: var(--lm-muted, #8b949e); }
html[data-lm-theme="dark"] .lm-booking-card-meta { color: var(--lm-muted, #8b949e); }
html[data-lm-theme="dark"] .lm-booking-breakdown h3 { color: var(--lm-muted, #8b949e); }
html[data-lm-theme="dark"] .lm-booking-timeline h3 { color: var(--lm-muted, #8b949e); }
html[data-lm-theme="dark"] .lm-timeline-action { color: var(--lm-muted, #8b949e); }
html[data-lm-theme="dark"] .lm-timeline-time { color: var(--lm-muted-2, #6e7681); }
html[data-lm-theme="dark"] .lm-counter-breakdown h4 { color: var(--lm-muted, #8b949e); }
html[data-lm-theme="dark"] .lm-counter-breakdown .lm-breakdown-table td { border-bottom-color: var(--lm-border-2, #21272f); }
html[data-lm-theme="dark"] .lm-modal-actions { border-top-color: var(--lm-border-2, #21272f); }
html[data-lm-theme="dark"] .lm-form-label { color: var(--lm-muted, #8b949e); }
html[data-lm-theme="dark"] .lm-form-hint { color: var(--lm-muted-2, #6e7681); }
html[data-lm-theme="dark"] .lm-modal-subtitle { color: var(--lm-muted, #8b949e); }
html[data-lm-theme="dark"] .lm-modal-close { color: var(--lm-muted, #8b949e); }
html[data-lm-theme="dark"] .lm-breakdown-table td { border-bottom-color: var(--lm-border-2, #21272f); }
html[data-lm-theme="dark"] .lm-breakdown-table .row-subtotal td { border-top-color: var(--lm-border, #2a3038); }
html[data-lm-theme="dark"] .lm-breakdown-table .row-final td { color: var(--lm-primary-text, #5fcc94); border-top-color: var(--lm-border, #2a3038); }
html[data-lm-theme="dark"] .lm-party-card { border-bottom-color: var(--lm-border-2, #21272f); }
html[data-lm-theme="dark"] .lm-btn-secondary { background: var(--lm-surface, #151b23); color: var(--lm-text, #e6edf3); border-color: var(--lm-border, #2a3038); }
html[data-lm-theme="dark"] .lm-btn-secondary:hover { background: var(--lm-surface-2, #1c232c); border-color: var(--lm-muted-2, #6e7681); }

/* ── Phase 3.5.5 — Escrow state cards ─────────────────────────────── */
.lm-escrow-card {
  display: flex; gap: 12px; padding: 16px 18px; margin: 0 0 16px 0;
  background: var(--lm-surface, #fff); border: 1px solid var(--lm-border, #e2e8f0);
  border-radius: 10px;
}
.lm-escrow-card-icon { font-size: 22px; line-height: 1; flex-shrink: 0; padding-top: 2px; }
.lm-escrow-card-body { flex: 1; min-width: 0; }
.lm-escrow-card-body h4 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--lm-text, #0f172a); }
.lm-escrow-card-body p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--lm-muted, #6b7280); }
.lm-escrow-card-body p strong { color: var(--lm-text, #0f172a); }
.lm-escrow-card-success { background: linear-gradient(135deg, var(--lm-primary-soft, #e8f5ee), rgba(255,255,255,0)); border-color: var(--lm-primary-soft, #c8e6d4); }
.lm-escrow-card-warning { background: linear-gradient(135deg, #fff7e0, rgba(255,255,255,0)); border-color: #ffd97a; }

/* Dispute compose form sits below the warning card. Visually grouped with the
   open-dispute conversation (subtle orange-tinted background). */
.lm-dispute-reply-form {
  background: #fffaf2;
  border: 1px solid #ffe1b8;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
html[data-lm-theme="dark"] .lm-dispute-reply-form {
  background: rgba(176, 123, 0, 0.12);
  border-color: rgba(176, 123, 0, 0.35);
}

/* Action row inside dispute reply form: [Attach + filename + Send] left,
   [Escalate] pinned right via space-between. */
.lm-dispute-reply-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.lm-dispute-reply-actions-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lm-dispute-reply-actions-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lm-dispute-attach-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.lm-dispute-attach-name {
  font-size: 12px;
  color: #6b7280;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-lm-theme="dark"] .lm-dispute-attach-name { color: #aab; }

/* Attachment preview inside a timeline message bubble. */
.lm-timeline-attachment { margin-top: 8px; }
.lm-timeline-attachment-img {
  max-width: 240px;
  max-height: 240px;
  border-radius: 6px;
  border: 1px solid var(--lm-border, #e3e3e3);
  display: block;
}
.lm-timeline-attachment-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--lm-bg, #fff);
  border: 1px solid var(--lm-border, #e3e3e3);
  border-radius: 6px;
  font-size: 13px;
  color: var(--lm-text, #1a1a1a);
  text-decoration: none;
}
.lm-timeline-attachment-link:hover { background: var(--lm-surface, #fafafa); border-color: var(--lm-border-2, #cdd); }
html[data-lm-theme="dark"] .lm-timeline-attachment-img { border-color: var(--lm-border, #2a3038); }
html[data-lm-theme="dark"] .lm-timeline-attachment-link { background: var(--lm-surface, #151b23); border-color: var(--lm-border, #2a3038); color: var(--lm-text, #e6edf3); }
html[data-lm-theme="dark"] .lm-timeline-attachment-link:hover { background: var(--lm-surface-2, #1c232c); }
.lm-escrow-card-info    { background: var(--lm-surface-2, #f6f7f9); }
html[data-lm-theme="dark"] .lm-escrow-card { background: #1f2329; border-color: #2a2f37; }
html[data-lm-theme="dark"] .lm-escrow-card-body p { color: #aab; }
html[data-lm-theme="dark"] .lm-escrow-card-success { background: linear-gradient(135deg, rgba(46,161,111,.18), rgba(46,161,111,0)); border-color: rgba(46,161,111,.32); }
html[data-lm-theme="dark"] .lm-escrow-card-warning { background: linear-gradient(135deg, rgba(176,123,0,.20), rgba(176,123,0,0)); border-color: rgba(176,123,0,.45); }

.lm-escrow-bank-info { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 10px; padding: 10px 12px; background: var(--lm-surface-2, #f6f7f9); border-radius: 6px; font-size: 12.5px; }
.lm-escrow-bank-info > div { display: flex; gap: 8px; align-items: baseline; }
.lm-escrow-bank-info > div span { color: var(--lm-muted, #6b7280); min-width: 140px; }
.lm-escrow-bank-info > div strong { color: var(--lm-text, #0f172a); font-variant-numeric: tabular-nums; }
html[data-lm-theme="dark"] .lm-escrow-bank-info { background: #15171c; }
/* When the bank-info sits inside a warning card (declined receipt), tint
   it the same warm yellow as the card so it doesn't read as a separate
   gray box. */
.lm-escrow-bank-info-warn { background: rgba(255, 217, 122, 0.18); }
html[data-lm-theme="dark"] .lm-escrow-bank-info-warn { background: rgba(176, 123, 0, 0.18); }
/* Admin's decline reason — sits between the explainer paragraph and the
   bank details. Red side stripe ties it to the X icon at the top. */
.lm-escrow-decline-reason {
  display: block;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(192, 57, 43, .08);
  border-left: 3px solid #c0392b;
  border-radius: 0 6px 6px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lm-text, #111);
}
.lm-escrow-decline-reason strong { color: #c0392b; margin-right: 4px; }
html[data-lm-theme="dark"] .lm-escrow-decline-reason { background: rgba(192,57,43,.15); }

.lm-escrow-quote { border-left: 3px solid var(--lm-muted, #6b7280); padding: 6px 12px; margin: 10px 0 0; font-size: 13px; color: var(--lm-text, #0f172a); background: rgba(0,0,0,0.02); }

.lm-pay-deposit-bank-summary { display: grid; gap: 4px; padding: 12px 14px; background: var(--lm-surface-2, #f6f7f9); border-radius: 7px; font-size: 13px; }
.lm-pay-deposit-bank-summary > div { display: flex; gap: 8px; align-items: baseline; }
.lm-pay-deposit-bank-summary > div span { color: var(--lm-muted, #6b7280); min-width: 160px; }
html[data-lm-theme="dark"] .lm-pay-deposit-bank-summary { background: #15171c; }

/* Admin top-bar warning banner for empty bank settings */
.lm-admin-bank-warning {
  background: #fff3cd; color: #664d03; border: 1px solid #ffecb5;
  padding: 10px 16px; border-radius: 6px; margin: 14px 0; font-size: 13px;
  display: flex; gap: 10px; align-items: center;
}
.lm-admin-bank-warning a { color: #5b3d00; text-decoration: underline; font-weight: 600; }
html[data-lm-theme="dark"] .lm-admin-bank-warning {
  background: rgba(245,158,11,.15); color: #fbbf24; border-color: rgba(245,158,11,.40);
}
html[data-lm-theme="dark"] .lm-admin-bank-warning a { color: #fde68a; }

/* Booking — per-message timeline mini-breakdown table (Fix #2) */
.lm-timeline-offer-table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--lm-surface-2, #f6f7f9);
  border-radius: 6px;
  overflow: hidden;
}
/* The user's "Additional expenses" free-text — actual user content, not a
   footnote. Quoted block with a left stripe so the eye separates it from
   the surrounding row label and fee lines. Matches the message-text size
   so it reads as real content, not a fine-print description. */
.lm-timeline-offer-table td .lm-timeline-expenses-text,
.lm-breakdown-table       td .lm-timeline-expenses-text,
.lm-timeline-expenses-text {
  display: block;
  margin-top: 6px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 400;
  color: var(--lm-text, #111) !important;
  background: #e3f4eb;  /* default soft green — matches talent role */
  border-left: 3px solid var(--lm-primary, #0f6f4f);
  border-radius: 0 6px 6px 0;
  white-space: pre-wrap;
  line-height: 1.5;
}
/* Role-coloured user-content tint for the expenses block. */
.lm-timeline-item.lm-timeline-from-brand .lm-timeline-expenses-text {
  background: #cde0e3;
  border-left-color: #00363f;
}
.lm-timeline-item.lm-timeline-from-admin .lm-timeline-expenses-text {
  background: #fde8e6;
  border-left-color: #c0392b;
}
html[data-lm-theme="dark"] .lm-timeline-expenses-text {
  background: rgba(52, 211, 153, .14);
  color: var(--lm-text, #e6edf3) !important;
  border-left-color: #34d399;
}
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-from-brand .lm-timeline-expenses-text {
  background: rgba(0, 100, 116, .22);
  border-left-color: #006474;
}
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-from-admin .lm-timeline-expenses-text {
  background: rgba(255, 123, 111, .14);
  border-left-color: #ff7b6f;
}
/* Service name shown as a dark prefix in the rate row (e.g.
   "Brand Ambassador · Day rate × 2 days"). Overrides the muted-grey
   default for breakdown td's so the service stands out. */
.lm-line-service { color: var(--lm-text, #111); font-weight: 600; }
/* "Platform service fee (10.00%) [tier]" — auxiliary line, lighter and
   one notch smaller than the rest of the breakdown. Applied via
   class="row-fee" on the tr in booking_detail.tpl. */
.lm-timeline-offer-table tr.row-fee td,
.lm-breakdown-table       tr.row-fee td {
  font-size: 12px;
  color: var(--lm-muted, #6b7280);
}
.lm-timeline-offer-table tr.row-fee td.num,
.lm-breakdown-table       tr.row-fee td.num {
  font-weight: 500;
}
/* Row labels (Day rate × N days, Additional expenses, etc.) — soft gray.
   Numeric values stay dark so the eye scans amounts first. The user-typed
   "Additional expenses" free-text overrides back to dark via its own
   .lm-timeline-expenses-text rule (already styled as a quoted block). */
.lm-timeline-offer-table td,
.lm-breakdown-table td {
  color: var(--lm-muted, #6b7280);
}
.lm-timeline-offer-table td.num,
.lm-breakdown-table td.num {
  color: var(--lm-text, #111);
  font-weight: 500;
}
/* Subtotal — break out from the muted label colour so the answer reads
   dark. Final row keeps its own green styling from the base rule. */
.lm-timeline-offer-table .row-subtotal td,
.lm-breakdown-table       .row-subtotal td {
  color: var(--lm-text, #111);
}
/* Counter-offer / request accompanying message — user-typed text bubble.
   Tinted by SENDER role so it reads as "what THIS person said":
   talent → soft green, brand → soft teal, admin → soft red. Defaults
   neutral grey for unknown sender. */
.lm-timeline-item.lm-timeline-counter_offer .lm-timeline-text,
.lm-timeline-item.lm-timeline-request .lm-timeline-text {
  font-size: 14px;
  padding: 12px 14px;
  background: #eef2f7;
  border-left: 3px solid var(--sender-color, #cbd5e1);
  border-radius: 0 8px 8px 0;
  min-height: 44px;
  color: var(--lm-text, #0f172a);
}
/* Light theme — role-tinted bubble backgrounds. */
.lm-timeline-item.lm-timeline-from-talent.lm-timeline-counter_offer .lm-timeline-text,
.lm-timeline-item.lm-timeline-from-talent.lm-timeline-request .lm-timeline-text {
  background: #e3f4eb;  /* soft green */
}
.lm-timeline-item.lm-timeline-from-brand.lm-timeline-counter_offer .lm-timeline-text,
.lm-timeline-item.lm-timeline-from-brand.lm-timeline-request .lm-timeline-text {
  background: #cde0e3;  /* soft teal */
}
.lm-timeline-item.lm-timeline-from-admin.lm-timeline-counter_offer .lm-timeline-text,
.lm-timeline-item.lm-timeline-from-admin.lm-timeline-request .lm-timeline-text {
  background: #fde8e6;  /* soft red */
}
/* Dark theme — translucent role-tinted bubbles, distinct from card surface. */
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-counter_offer .lm-timeline-text,
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-request .lm-timeline-text {
  background: rgba(148, 163, 184, .12);
  color: var(--lm-text, #e6edf3);
}
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-from-talent.lm-timeline-counter_offer .lm-timeline-text,
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-from-talent.lm-timeline-request .lm-timeline-text {
  background: rgba(52, 211, 153, .14);   /* soft green tint */
}
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-from-brand.lm-timeline-counter_offer .lm-timeline-text,
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-from-brand.lm-timeline-request .lm-timeline-text {
  background: rgba(0, 100, 116, .22);   /* soft teal tint based on #006474 */
}
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-from-admin.lm-timeline-counter_offer .lm-timeline-text,
html[data-lm-theme="dark"] .lm-timeline-item.lm-timeline-from-admin.lm-timeline-request .lm-timeline-text {
  background: rgba(255, 123, 111, .14);  /* soft red tint */
}
.lm-timeline-offer-table td {
  padding: 8px 14px;
  vertical-align: top;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.lm-timeline-offer-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lm-timeline-offer-table tr:last-child td { border-bottom: none; }
.lm-timeline-offer-table tr.row-subtotal td { padding: 10px 16px; background: rgba(0,0,0,0.03); }
/* Final row — full-width green pill across BOTH the inline timeline-offer
   table and the main breakdown at the top of the page. */
.lm-timeline-offer-table tr.row-final td,
.lm-breakdown-table       tr.row-final td {
  padding: 12px 18px;
  background: var(--lm-primary-soft, #ecfdf5);
  color: var(--lm-primary-text, #0a5439);
}
html[data-lm-theme="dark"] .lm-timeline-offer-table { background: var(--lm-bg, #0d1117); }
html[data-lm-theme="dark"] .lm-timeline-offer-table tr.row-subtotal td { background: rgba(255,255,255,0.04); }
html[data-lm-theme="dark"] .lm-timeline-offer-table tr.row-final td,
html[data-lm-theme="dark"] .lm-breakdown-table       tr.row-final td { background: var(--lm-primary-soft, rgba(46,161,111,.18)); color: var(--lm-primary-text, #5fcc94); }

/* Tier badge styling lives in lm-profile.css (.lm-tier, .lm-tier-pro,
   .lm-tier-vip, .lm-tier-elite, .lm-tier-sm) — loaded site-wide.
   Booking timeline reuses it via _lm_tier_inline.tpl include. */

/* ── Inline-style replacements (extracted from templates) ──────────── */
/* Compact "Leave a review" CTA wrapper inside the breakdown panel. */
.lm-review-cta-wrap { padding: 14px 0 0 0; border-top: 1px solid var(--lm-border-2, #f0f0f0); margin-top: 14px; }
html[data-lm-theme="dark"] .lm-review-cta-wrap { border-top-color: var(--lm-border-2, #21272f); }
/* Inline error message (replaces inline color:#c33). */
.lm-form-error-text { color: #c33; font-size: 12px; display: none; }
.lm-form-error-text.is-visible { display: block; }
html[data-lm-theme="dark"] .lm-form-error-text { color: #ff7b6f; }
/* Modal subtitle paragraph (replaces inline color:var(--lm-muted)). */
.lm-modal-p { color: var(--lm-muted, #6b7280); font-size: 14px; margin: 0 0 14px 0; }
html[data-lm-theme="dark"] .lm-modal-p { color: var(--lm-muted, #8b949e); }
/* Hidden by default — used by JS to toggle a section visibility. */
.lm-hidden { display: none; }

/* Review submit modal (Pattern B legacy) — extracted inline rules.
   Phase H R23: scoped under #lm-review-scrim so they don't override the
   global LM modal system in lm-profile.css. The original `.lm-modal`,
   `.lm-modal-head`, `.lm-modal-body`, `.lm-modal-foot` selectors here
   were generic and silently overrode every LM modal sitewide (Switch
   Accounts, Email this profile, etc.) because lm-bookings.css loads
   AFTER lm-profile.css. The bookings.css review modal still gets all
   these styles via the parent #lm-review-scrim id selector. */
#lm-review-scrim .lm-modal { background: var(--lm-bg, #fff); color: var(--lm-text, inherit); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.2); position: relative; width: 100%; max-width: min(560px, calc(100vw - 24px)); }
html[data-lm-theme="dark"] #lm-review-scrim .lm-modal { background: var(--lm-surface, #151b23); border: 1px solid var(--lm-border, #2a3038); }
#lm-review-scrim .lm-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 16px 22px 0;
  /* Phase H R69: kill the global .lm-modal-head bottom border — visually
     too heavy under a title-only header without a subtitle. */
  border-bottom: 0;
}
/* Phase H R69: reviewee chunk in title — name + verified ✓ + tier pill on one line. */
#lm-review-scrim .lm-modal-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#lm-review-scrim .lm-review-reviewee { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#lm-review-scrim .lm-review-reviewee-name { font-weight: 700; }
#lm-review-scrim .lm-review-reviewee-verified { display: inline-flex; align-items: center; }
#lm-review-scrim .lm-review-reviewee-tier { display: inline-flex; align-items: center; }
#lm-review-scrim .lm-review-reviewee-verified[hidden],
#lm-review-scrim .lm-review-reviewee-tier[hidden] { display: none; }
#lm-review-scrim .lm-modal-sub { font-size: 13px; color: var(--lm-muted, #6b7280); margin-top: 2px; }
html[data-lm-theme="dark"] #lm-review-scrim .lm-modal-sub { color: var(--lm-muted, #8b949e); }
#lm-review-scrim .lm-modal-body { padding: 6px 22px 18px; color: var(--lm-text, inherit); }
#lm-review-scrim .lm-modal-foot { padding: 14px 22px; border-top: 1px solid var(--lm-border-2, #f0f0f0); text-align: right; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
html[data-lm-theme="dark"] #lm-review-scrim .lm-modal-foot { border-top-color: var(--lm-border-2, #21272f); }

/* Phase H R69: scope to the review submit modal — there's a same-named
   .lm-criterion-row on the profile reviews tab (display-only, grid layout)
   in lm-profile.css that otherwise wins by load order and crushes our
   note input into a 38px score column.

   Compact single-row layout: label | stars | note input — all on one
   line. The short input width visually signals the brevity expectation
   (people don't try to write paragraphs). Stacks on narrow screens. */
#lm-review-scrim .lm-criterion-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
#lm-review-scrim .lm-criterion-label {
  flex: 0 0 130px;
  margin: 0;
  font-size: 13px; font-weight: 500; color: var(--lm-text, inherit);
}
#lm-review-scrim .lm-star-picker { display: flex; gap: 4px; flex-shrink: 0; }
.lm-criterion-row { margin-bottom: 10px; }
.lm-criterion-label { display: block; font-size: 13px; margin-bottom: 4px; color: var(--lm-text, inherit); }

/* Phase H R69: viewer's own submitted review preview, shown on
   booking_detail while waiting on the counterparty. Reads like a small
   card so the lone star icon (previous markup) doesn't look orphaned. */
.lm-self-review-card {
  background: var(--lm-card, #fff);
  border: 1px solid var(--lm-border, #e3e3e3);
  border-radius: 10px;
  padding: 12px 14px;
}
.lm-self-review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lm-self-review-stars { display: inline-flex; align-items: center; gap: 2px; }
.lm-self-review-stars svg { display: block; }
.lm-self-review-score { font-weight: 700; font-size: 14px; color: var(--lm-text); margin-left: 4px; font-variant-numeric: tabular-nums; }
.lm-self-review-tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--lm-primary-strong, #0a8a4f);
  background: var(--lm-primary-soft, rgba(15,111,79,0.10));
  border-radius: 999px;
}
.lm-self-review-rebook {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600;
  color: var(--lm-primary-strong, #0a8a4f);
}
.lm-self-review-body {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--lm-border, #e3e3e3);
  font-size: 13px; line-height: 1.5; color: var(--lm-text);
}
.lm-self-review-hint {
  display: flex; gap: 6px; align-items: flex-start;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--lm-border, #e3e3e3);
  font-size: 11.5px; line-height: 1.4; color: var(--lm-muted, #6b7280);
}
.lm-self-review-hint svg { flex-shrink: 0; margin-top: 2px; color: currentColor; }
html[data-lm-theme="dark"] .lm-self-review-card { background: var(--lm-card, #161b22); border-color: var(--lm-border, #2a3038); }
html[data-lm-theme="dark"] .lm-self-review-body { border-top-color: var(--lm-border, #2a3038); }
html[data-lm-theme="dark"] .lm-self-review-hint { border-top-color: var(--lm-border, #2a3038); }
html[data-lm-theme="dark"] .lm-self-review-tag { background: rgba(110,231,183,0.10); color: #6ee7b7; }
html[data-lm-theme="dark"] .lm-self-review-rebook { color: #6ee7b7; }
.lm-star-picker { display: flex; gap: 4px; }
.lm-star-btn { background: none; border: 0; cursor: pointer; padding: 0; }
.lm-star-btn svg { stroke: var(--lm-border, #cbd5e1); }
.lm-star-btn.is-on svg { stroke: #f59e0b; fill: #f59e0b; }

/* Phase H R68/R69: per-criterion short note input. Inline with label
   and stars on the same row — short width is the visual cue that the
   note is meant to be brief. Hard-capped at 80 chars by the input attr.
   Scoped to #lm-review-scrim where the form lives; the default selector
   below keeps backward-compat for any other contexts. */
#lm-review-scrim .lm-criterion-note {
  flex: 1 1 0;
  min-width: 120px;
  margin: 0;
  padding: 6px 10px;
  font-family: inherit; font-size: 12.5px; line-height: 1.35;
  color: var(--lm-text, #111);
  background: var(--lm-bg, #fff);
  border: 1px solid var(--lm-border, #d6d6d6); border-radius: 6px;
  box-sizing: border-box;
}
.lm-criterion-note {
  display: block; width: 100%; margin-top: 8px;
  padding: 8px 12px;
  font-family: inherit; font-size: 13px; line-height: 1.4;
  color: var(--lm-text, #111);
  background: var(--lm-bg, #fff);
  border: 1px solid var(--lm-border, #d6d6d6); border-radius: 6px;
  box-sizing: border-box;
}
.lm-criterion-note::placeholder { color: var(--lm-muted-2, #9ca3af); opacity: 1; font-style: italic; }
.lm-criterion-note:focus { outline: none; border-color: var(--lm-primary, #10b981); box-shadow: 0 0 0 3px rgba(16,185,129,0.12); }
html[data-lm-theme="dark"] .lm-criterion-note { background: var(--lm-bg, #0d1117); color: var(--lm-text, #e6edf3); border-color: var(--lm-border, #2a3038); }

/* Review modal textarea — replaces big inline style block. */
#lm-review-comment {
  width: 100%; min-height: 96px; padding: 9px 12px;
  font-family: inherit; font-size: 14px; line-height: 1.45;
  background: var(--lm-bg, #fff); color: var(--lm-text, #111);
  border: 1px solid var(--lm-border, #d6d6d6); border-radius: 7px;
  resize: vertical; box-sizing: border-box;
}
#lm-review-comment::placeholder { color: var(--lm-muted-2, #9ca3af); opacity: 1; }
html[data-lm-theme="dark"] #lm-review-comment { background: var(--lm-bg, #0d1117); color: var(--lm-text, #e6edf3); border-color: var(--lm-border, #2a3038); }
html[data-lm-theme="dark"] #lm-review-comment::placeholder { color: var(--lm-muted-2, #6e7681); }

/* Modal scrim wrapper used by Pattern B modals (review submit). */
.lm-modal-scrim {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(20,22,28,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
}
/* Review modal — Yes/No "Would you book again" toggle row. */
.lm-review-modal { max-width: min(560px, calc(100vw - 24px)); }
/* Phase H R69: rebook question on a single row — "Would you book ...? [Yes] [No]". */
.lm-review-rebook-row {
  margin-top: 14px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
/* Override the 130px label cap from the criteria rows — the rebook
   question is one long sentence and should take whatever it needs. */
#lm-review-scrim .lm-review-rebook-row > .lm-criterion-label {
  flex: 1 1 auto;
  width: auto;
  margin: 0;
  min-width: 0;
  white-space: normal;
}
/* Phase H R69: Comments row must be block-stacked (label, then textarea)
   with real breathing room between them. Higher-specificity #lm-review-scrim
   selectors so they beat the criterion-row flex defaults.
   The "Your review" textarea is now first in the body — kill the
   margin-top so it sits snug under the subtitle. */
#lm-review-scrim .lm-review-comment-row {
  display: block;
  margin-top: 0;
}
#lm-review-scrim .lm-review-comment-row .lm-criterion-label {
  flex: none;
  display: block;
  width: auto;
  margin: 0 0 14px 0;
}
#lm-review-scrim .lm-review-comment-row #lm-review-comment { margin-top: 0; }
.lm-review-comment-row { margin-top: 14px; }
.lm-review-rebook-group { display: inline-flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
/* Phase H R69: scope to the submit-modal scrim — the bare .lm-review-rebook
   class is ALSO used on the profile reviews tab as a green pill badge
   ("Would book again"), and the bookings.css load order was clobbering
   its primary-tinted style with this neutral Yes/No button look. */
#lm-review-scrim .lm-review-rebook {
  border: 1px solid var(--lm-border, #d6d6d6);
  background: var(--lm-bg, #fff);
  color: var(--lm-text, #111);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: background .15s, border-color .15s, color .15s;
}
#lm-review-scrim .lm-review-rebook:hover { border-color: var(--lm-primary, #0f6f4f); }
#lm-review-scrim .lm-review-rebook.is-on { background: var(--lm-primary, #0f6f4f); color: #fff; border-color: var(--lm-primary, #0f6f4f); }
#lm-review-scrim .lm-review-rebook.is-on-no { background: #c0392b; color: #fff; border-color: #c0392b; }
html[data-lm-theme="dark"] #lm-review-scrim .lm-review-rebook { background: var(--lm-bg, #0d1117); color: var(--lm-text, #e6edf3); border-color: var(--lm-border, #2a3038); }
html[data-lm-theme="dark"] #lm-review-scrim .lm-review-rebook.is-on { background: var(--lm-primary, #2ea16f); border-color: var(--lm-primary, #2ea16f); color: #fff; }

/* ── Mobile (≤480px) ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .lm-bookings-page { padding: 14px 10px 80px; }
  .lm-bookings-shell { padding: 0; }
  .lm-bookings-header { gap: 8px; margin-bottom: 14px; }
  .lm-bookings-title { font-size: 20px; }

  /* Mode switcher: shrink padding/font, keep horizontal flex. With 3 admin
     tabs at 360px this fits at 12px font + 10px padding ≈ 320px usable. */
  .lm-bookings-mode-switcher { padding: 3px; gap: 2px; margin-bottom: 24px; border-radius: 10px; }
  .lm-bookings-mode-btn { padding: 10px 8px; font-size: 12.5px; gap: 4px; border-radius: 8px; }
  .lm-bookings-mode-btn .lm-bookings-badge { min-width: 18px; height: 18px; font-size: 10.5px; padding: 0 5px; }

  /* Booking cards: stack vertically — body left, right column slides under. */
  .lm-booking-card { padding: 12px 14px; gap: 12px; align-items: flex-start; }
  .lm-booking-card-id { font-size: 10px; top: 6px; right: 10px; }
  .lm-booking-card-avatar > img { width: 44px; height: 44px; }
  .lm-booking-card-right { padding-left: 0; padding-top: 4px; align-items: flex-start; text-align: left; margin-left: 0; flex-basis: 100%; border-top: 1px dashed var(--lm-border-2, #eef2f6); padding-top: 8px; }
  .lm-booking-card-amount { font-size: 16px; }
  /* Per-card review CTA (already absolute) — slide under body via static layout. */
  .lm-card-review-btn,
  .lm-card-review-done,
  .lm-card-review-scores { position: static; transform: none; margin-left: 0; right: auto; }

  /* Booking detail */
  .lm-booking-detail-title-row { gap: 8px; margin-bottom: 14px; }
  .lm-booking-detail-title-row h1 { font-size: 18px; }
  .lm-booking-summary { padding: 14px 14px; }
  .lm-party-card { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; }
  .lm-party-avatar { width: 48px; height: 48px; }
  .lm-booking-meta-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 10px; }
  .lm-booking-meta-grid > .lm-meta-cell { grid-column: auto; grid-row: auto; }
  .lm-booking-breakdown { padding: 14px 14px; }
  .lm-booking-actions-info { flex-direction: column; align-items: flex-start; gap: 8px; }
  .lm-booking-actions { gap: 8px; }
  .lm-booking-actions .lm-btn { flex: 1 1 calc(50% - 4px); justify-content: center; }

  /* Timeline */
  .lm-timeline-item { padding: 12px 14px; gap: 10px; }
  .lm-timeline-avatar img { width: 32px; height: 32px; }
  .lm-timeline-meta { font-size: 12px; gap: 6px; }
  .lm-timeline-time { font-size: 10px; }
  .lm-timeline-text { font-size: 13.5px; padding: 8px 10px; }
  .lm-timeline-offer-table td { padding: 6px 10px; font-size: 12.5px; }

  /* Modals: full-width with tight padding. */
  .lm-modal-overlay { padding: 10px; }
  .lm-modal-card { padding: 18px 14px; max-width: 100%; }
  .lm-counter-modal-card { max-width: 100%; }
  .lm-modal-title { font-size: 16px; margin-bottom: 12px; }
  .lm-modal-actions { flex-direction: column-reverse; gap: 8px; padding-top: 14px; margin-top: 14px; }
  .lm-modal-actions .lm-btn { width: 100%; justify-content: center; }
  .lm-form-row { grid-template-columns: 1fr; gap: 10px; }

  /* Review submit modal (Pattern B). */
  .lm-modal-scrim { padding: 10px; }
  .lm-modal { max-width: 100%; }
  .lm-modal-head { padding: 16px 16px 4px; }
  .lm-modal-body { padding: 10px 16px 14px; }
  .lm-modal-foot { padding: 12px 16px; flex-direction: column-reverse; }
  .lm-modal-foot .lm-btn { width: 100%; justify-content: center; }

  /* Admin dispute row (already stacks at 640) — tighten further. */
  .lm-admin-dispute-row { padding: 12px 14px; gap: 10px; }
}

/* ── Tablet/mobile (≤767px) — additional tweaks ───────────────────── */
@media (max-width: 767px) {
  /* Form rows always stack on mobile/tablet (replaces old 720px rule). */
  .lm-form-row { grid-template-columns: 1fr; }
  /* Note: meta-grid stack handled in the ≤720px rule above (single column).
     Earlier override of `1fr 1fr` removed because it broke the explicit grid-area
     assignments used at desktop sizes. */
}


/* ============================================================
   LM shared photo lightbox (.lm-ph-lb) — built by lm-photo-lightbox.js.
   Used by talent My Applications + brand Review Applications.
   ============================================================ */
.lm-ph-lb { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 40px; background: rgba(8,12,16,.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lm-ph-lb[hidden] { display: none; }
.lm-ph-lb-img { max-width: min(92vw, 880px); max-height: 86vh; border-radius: 12px; object-fit: contain; background: #0b0f12; box-shadow: 0 24px 80px -20px rgba(0,0,0,.7); }
.lm-ph-lb-close { position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s; }
.lm-ph-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s; }
.lm-ph-lb-close:hover, .lm-ph-lb-nav:hover { background: rgba(255,255,255,.24); }
.lm-ph-lb-prev { left: 22px; }
.lm-ph-lb-next { right: 22px; }
.lm-ph-lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-family: var(--lm-font-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .08em; color: rgba(255,255,255,.82); background: rgba(0,0,0,.4); padding: 5px 12px; border-radius: 999px; }
html.lm-ph-lb-open { overflow: hidden; }
@media (max-width: 720px) {
  .lm-ph-lb { padding: 16px; }
  .lm-ph-lb-nav { width: 40px; height: 40px; font-size: 26px; }
  .lm-ph-lb-prev { left: 8px; }
  .lm-ph-lb-next { right: 8px; }
  .lm-ph-lb-close { top: 10px; right: 12px; }
}