:root {
  --ink: #101513;
  --muted: #69716d;
  --soft: #f1efe8;
  --line: #d8d5cd;
  --paper: #ffffff;
  --canvas: #f4f2ec;
  --green: #0b3b32;
  --green-dark: #07110f;
  --mint: #e7eee9;
  --lime: #c9f15a;
  --amber: #d9851f;
  --blue: #2868d8;
  --metal: #b8b2a5;
  --red: #b4463d;
  --shadow: 0 18px 50px rgba(16, 21, 19, 0.12);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.crm-app {
  --ink: #f7f1e7;
  --muted: #bdb4a3;
  --soft: #171b18;
  --line: rgba(190, 146, 68, 0.36);
  --paper: #0f1411;
  --canvas: #050706;
  --green: #0e3d34;
  --green-dark: #06100d;
  --mint: #15231e;
  --lime: #d3f45f;
  --amber: #d49b3d;
  --blue: #66a9ff;
  --metal: #c8beaa;
  --red: #e26c61;
  --shadow: 0 20px 55px rgba(0, 0, 0, 0.34);
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(178, 130, 49, .13), transparent 34rem),
    linear-gradient(180deg, #050706 0%, #09100d 48%, #050706 100%);
}

body.crm-app .main { min-height: 100vh; }

body.crm-app .prototype-badge,
body.crm-app .count-badge,
body.crm-app .staff-chip,
body.crm-app .search-field,
body.crm-app select,
body.crm-app .check-filter,
body.crm-app .panel,
body.crm-app .renewals-panel,
body.crm-app .advertisers-panel,
body.crm-app .leads-panel,
body.crm-app .safety-panel,
body.crm-app .workorders-panel,
body.crm-app .detail-drawer,
body.crm-app .modal-card,
body.crm-app .calendar-toolbar,
body.crm-app .cash-card,
body.crm-app .calendar-day,
body.crm-app .pipeline-column,
body.crm-app .workorder-card,
body.crm-app .publisher-grid article,
body.crm-app .webapp-grid article,
body.crm-app .publisher-steps {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line);
}

body.crm-app input,
body.crm-app textarea,
body.crm-app .form-grid input,
body.crm-app .form-grid textarea,
body.crm-app .form-grid select,
body.crm-app .lead-toolbar select {
  color: var(--ink);
  background: #0a0f0c;
  border-color: var(--line);
}

body.crm-app input::placeholder,
body.crm-app textarea::placeholder { color: #8f8777; opacity: 1; }

body.crm-app .panel-heading,
body.crm-app .renewals-heading,
body.crm-app .advertiser-header,
body.crm-app .lead-header,
body.crm-app .pipeline-column > header {
  background: #111a16;
  border-color: var(--line);
}

body.crm-app .inventory-item,
body.crm-app .lead-card,
body.crm-app .payment-row,
body.crm-app .profile-face,
body.crm-app .history-item,
body.crm-app .financial-box,
body.crm-app .activity-card,
body.crm-app .workorder-stats article,
body.crm-app .safety-card {
  color: var(--ink);
  background: #111713;
  border-color: rgba(190, 146, 68, .24);
}

body.crm-app .inventory-item:hover,
body.crm-app .inventory-item.selected,
body.crm-app .workorder-card:hover,
body.crm-app .lead-card:hover {
  color: var(--ink);
  background: #1a231e;
}

body.crm-app .inventory-item.selected {
  border-color: rgba(211, 170, 87, .72);
}

body.crm-app .sign-icon,
body.crm-app .face-size-pill {
  color: #ffd98c;
  background: rgba(178, 130, 49, .16);
}

body.crm-app .status-pill,
body.crm-app .lead-stage,
body.crm-app .workorder-top span {
  color: #8cf0ca;
  background: rgba(24, 145, 105, .18);
}

body.crm-app .status-pill.pipeline,
body.crm-app .renewal-item.due .renewal-status,
body.crm-app .lead-followup,
body.crm-app .converted-label {
  color: #ffd28a;
  background: rgba(212, 155, 61, .16);
}

body.crm-app .vacancy.full,
body.crm-app .empty-state,
body.crm-app .inventory-meta,
body.crm-app .activity-copy small,
body.crm-app .activity-copy div span,
body.crm-app .workorder-card small,
body.crm-app .workorder-meta,
body.crm-app .safety-card p,
body.crm-app .publisher-heading p,
body.crm-app .webapp-grid p,
body.crm-app .lead-card p {
  color: var(--muted);
}

body.crm-app .button.primary {
  color: #080b09;
  background: linear-gradient(135deg, #d9ad58, #a97828);
  border-color: rgba(255, 221, 142, .55);
}

body.crm-app .button.ghost,
body.crm-app .face-edit-button,
body.crm-app .calendar-button,
body.crm-app .icon-button {
  color: var(--ink);
  background: #101713;
  border-color: var(--line);
}

body.crm-app .publisher-panel,
body.crm-app .webapp-panel {
  color: var(--ink);
  background: linear-gradient(135deg, #111713, #0c110e 64%, #171209);
  border-color: var(--line);
}

body.crm-app .map-card,
body.crm-app #map {
  color: #101513;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 238px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 28px 20px 22px;
  color: #eff9f5;
  background: #0b302a;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 28px; }
.brand-mark {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 13px; color: #0b302a; background: var(--lime);
  font-weight: 900; letter-spacing: -0.08em; padding-right: 3px;
}
.brand-logo {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
}
.brand-logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.brand strong, .brand span { display: block; }
.brand strong { font-size: 15px; }
.brand span { margin-top: 2px; font-size: 12px; color: #a9c5bd; }
.nav { display: grid; gap: 6px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; border: 0;
  padding: 12px 14px; border-radius: 11px; color: #b7cdc7;
  background: transparent; text-align: left; cursor: pointer;
}
.nav-item span { width: 20px; text-align: center; font-size: 18px; }
.nav-item.active { color: white; background: rgba(255,255,255,.1); }
.nav-item.soon { opacity: .62; cursor: default; }
.nav-link { text-decoration: none; }
.privacy-note {
  margin-top: auto; display: flex; gap: 10px; padding: 14px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  color: #a9c5bd; font-size: 11px; line-height: 1.45;
}
.privacy-note strong { color: white; font-size: 12px; }
.lock-dot { color: var(--lime); }

.main { min-width: 0; padding: 34px clamp(20px, 3vw, 48px) 48px; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.eyebrow { margin: 0 0 7px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.045em; line-height: 1.08; }
h2 { margin-bottom: 0; font-size: 20px; letter-spacing: -.02em; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.prototype-badge, .count-badge {
  padding: 7px 10px; border-radius: 999px; background: var(--soft);
  color: #59706a; font-size: 11px; font-weight: 800;
}
.prototype-badge { border: 1px solid var(--line); background: white; }
.avatar { width: 38px; height: 38px; border: 0; border-radius: 50%; color: white; background: var(--green); font-weight: 800; }
.staff-chip {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: white;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(16,21,19,.05);
}
.staff-chip span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--green);
  font-size: 10px;
  font-weight: 900;
}
.staff-chip strong { font-size: 11px; white-space: nowrap; }
.staff-chip:not(.signed-in) span { background: var(--muted); }
.button.compact { padding: 8px 10px; border: 1px solid var(--line); font-size: 10px; white-space: nowrap; }

.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 22px;
  background: radial-gradient(circle at top, rgba(201,241,90,.13), transparent 30%), rgba(5, 18, 15, .82);
  backdrop-filter: blur(6px);
}
.login-overlay[hidden] { display: none; }
.login-card {
  width: min(430px, 100%);
  padding: 28px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  color: white;
  background: linear-gradient(145deg, #0d2d27, #07110f);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
}
.login-card h1 { margin-bottom: 10px; font-size: 28px; }
.login-card p { color: #c9d8d4; line-height: 1.45; }
.login-card label { display: block; margin-top: 16px; color: #dcebe7; font-size: 12px; font-weight: 800; }
.login-card input,
.login-card select {
  width: 100%;
  margin-top: 7px;
  color: var(--ink);
}
.login-card .button { width: 100%; justify-content: center; margin-top: 20px; }
.login-card small { display: block; margin-top: 14px; color: #a9c5bd; line-height: 1.4; }
.login-logo { width: 72px; height: 72px; margin-bottom: 18px; background: rgba(255,255,255,.08); }
.login-logo img { width: 58px; height: 58px; object-fit: contain; }
.login-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  color: #fff5f4 !important;
  background: rgba(180,70,61,.28);
}

.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 28px 0 20px; }
.stat-card { min-height: 137px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 4px 14px rgba(20,52,45,.03); }
.stat-card.accent { color: white; border-color: var(--green); background: var(--green); }
.stat-label { font-size: 12px; font-weight: 750; color: var(--muted); }
.accent .stat-label, .accent .stat-foot { color: #b9d8d0; }
.stat-value { margin: 13px 0 6px; font-size: clamp(27px, 3vw, 35px); font-weight: 850; letter-spacing: -.05em; }
.stat-foot { color: var(--muted); font-size: 11px; }

.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.search-field { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 180px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.search-field span { color: var(--muted); font-size: 20px; }
.search-field input { width: 100%; min-height: 44px; border: 0; outline: 0; background: transparent; }
select { min-height: 44px; padding: 0 32px 0 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: white; }
.check-filter { min-height: 44px; display: flex; align-items: center; gap: 7px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; background: white; font-size: 12px; font-weight: 700; white-space: nowrap; }
.check-filter input { accent-color: var(--green); }
.add-location-button { min-height: 44px; white-space: nowrap; }

.workspace { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(330px, .75fr); gap: 16px; }
.panel { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 7px 24px rgba(20,52,45,.045); }
.panel-heading { min-height: 77px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 19px; border-bottom: 1px solid var(--line); }
#map { height: 548px; background: #e6eee9; }
.map-fallback { display: grid; place-items: center; min-height: 360px; padding: 30px; color: var(--muted); text-align: center; }
.map-legend { padding: 11px 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.legend-dot { display: inline-block; width: 9px; height: 9px; margin: 0 5px 0 12px; border-radius: 50%; }
.legend-dot:first-child { margin-left: 0; }
.legend-dot.available { background: var(--amber); }
.legend-dot.occupied { background: var(--green); }
.inventory-list { height: 590px; overflow: auto; padding: 8px; }
.inventory-item { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 13px 11px; border: 0; border-bottom: 1px solid #edf1ef; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; }
.inventory-item:hover, .inventory-item.selected { background: #f0f6f3; }
.sign-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 11px; color: var(--green); background: var(--mint); font-size: 12px; font-weight: 900; }
.inventory-name { margin-bottom: 4px; font-size: 13px; font-weight: 800; }
.inventory-meta { color: var(--muted); font-size: 11px; }
.item-right { text-align: right; }
.status-pill { display: inline-block; padding: 5px 7px; border-radius: 999px; color: #16604f; background: #ddf1e9; font-size: 9px; font-weight: 850; text-transform: uppercase; white-space: nowrap; }
.status-pill.pipeline { color: #87530f; background: #fff0d7; }
.vacancy { margin-top: 6px; color: var(--amber); font-size: 10px; font-weight: 750; }
.vacancy.full { color: var(--muted); }
.empty-state { padding: 42px 20px; color: var(--muted); text-align: center; }

.renewals-panel { margin-top: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 7px 24px rgba(20,52,45,.045); }
.renewals-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px; border-bottom: 1px solid var(--line); }
.renewals-heading h2 { margin: 3px 0 5px; }
.renewals-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.activity-panel {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
  box-shadow: 0 7px 24px rgba(20,52,45,.045);
}
.private-label {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #16604f;
  background: #ddf1e9;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.activity-list {
  display: grid;
  gap: 10px;
  padding: 14px;
  max-height: 420px;
  overflow: auto;
}
.activity-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcfc;
}
.activity-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: white;
  background: var(--green);
  font-size: 11px;
  font-weight: 900;
}
.activity-copy div { font-size: 13px; }
.activity-copy div span { color: var(--muted); font-weight: 650; }
.activity-copy p { margin: 5px 0; color: var(--ink); font-size: 13px; }
.activity-copy small { color: var(--muted); font-size: 11px; }
.renewal-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px 14px; color: var(--muted); font-size: 10px; }
.renewal-legend span { display: flex; align-items: center; gap: 5px; }
.renewal-legend i { width: 9px; height: 9px; border-radius: 50%; }
.lease-dot { background: var(--red); }
.advertiser-dot { background: var(--green); }
.renewal-legend strong { flex-basis: 100%; color: var(--ink); text-align: right; }
.cash-calendar { margin: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfc; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border-bottom: 1px solid var(--line); background: white; }
.calendar-toolbar h3 { margin: 3px 0 0; font-size: 20px; }
.calendar-nav { display: flex; gap: 6px; }
.calendar-button { min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: white; cursor: pointer; font-weight: 850; }
.calendar-button:hover { color: var(--green); background: var(--mint); }
.calendar-button.today { font-size: 10px; }
.cash-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 12px; border-bottom: 1px solid var(--line); }
.cash-card { padding: 11px 12px; border-radius: 10px; background: white; }
.cash-card small, .cash-card strong { display: block; }
.cash-card small { margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.cash-card strong { font-size: 17px; }
.cash-card.income { color: var(--green); background: #eaf6f1; }
.cash-card.expense { color: var(--red); background: #fceceb; }
.cash-card.net { color: #304c46; background: #eef2f1; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { border-bottom: 1px solid var(--line); background: #f2f6f4; }
.calendar-weekdays span { padding: 8px 5px; color: var(--muted); font-size: 9px; font-weight: 850; text-align: center; text-transform: uppercase; }
.calendar-day { min-width: 0; min-height: 126px; padding: 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day.outside { background: #f7f9f8; }
.calendar-day.outside .day-number { color: #aebbb7; }
.calendar-day.current-day { box-shadow: inset 0 0 0 2px var(--amber); }
.day-number { display: inline-grid; place-items: center; width: 23px; height: 23px; margin-bottom: 4px; border-radius: 50%; color: var(--muted); font-size: 10px; font-weight: 850; }
.current-day .day-number { color: white; background: var(--amber); }
.day-events { display: grid; gap: 4px; }
.cash-event { min-width: 0; padding: 5px 6px; border: 0; border-left: 3px solid var(--green); border-radius: 6px; color: #154e41; background: #e9f5f0; text-align: left; cursor: pointer; }
.cash-event.lease { color: #8b352e; border-left-color: var(--red); background: #fbe9e7; }
.cash-event span { display: flex; justify-content: space-between; gap: 4px; min-width: 0; }
.cash-event strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.cash-event b { font-size: 8px; white-space: nowrap; }
.cash-event small { display: block; margin-top: 2px; overflow: hidden; color: inherit; opacity: .75; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.timeline-heading { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 17px 0; }
.timeline-heading h3 { margin: 0; font-size: 13px; }
.timeline-heading span { color: var(--muted); font-size: 10px; }
.renewal-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; max-height: 560px; overflow: auto; padding: 12px; }
.renewal-item { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center; min-width: 0; padding: 12px; border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: 11px; color: var(--ink); background: #f8faf9; text-align: left; cursor: pointer; }
.renewal-item:hover { background: #f0f6f3; }
.renewal-item.lease { border-left-color: var(--red); }
.renewal-item.overdue { background: #fff8f7; }
.renewal-date { text-align: center; }
.renewal-date strong, .renewal-date small, .renewal-copy small, .renewal-copy strong, .renewal-copy span { display: block; }
.renewal-date strong { font-size: 14px; }
.renewal-date small, .renewal-copy small, .renewal-copy span { color: var(--muted); font-size: 9px; }
.renewal-copy { min-width: 0; }
.renewal-copy strong { margin: 2px 0 3px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.renewal-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.renewal-status { padding: 5px 7px; border-radius: 999px; color: var(--muted); background: white; font-size: 9px; font-weight: 800; white-space: nowrap; }
.renewal-item.overdue .renewal-status { color: #9a2f25; background: #fde4e1; }
.renewal-item.due .renewal-status { color: #87530f; background: #fff0d7; }
.renewal-item.advertiser .renewal-copy small { color: var(--green); }
.renewal-item.lease .renewal-copy small { color: var(--red); }

.leaflet-container { font-family: inherit; }
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: var(--shadow); }
.leaflet-popup-content { margin: 12px 14px; }
.popup-title { margin-bottom: 4px; font-weight: 850; }
.popup-meta { color: var(--muted); font-size: 11px; }
.pin-marker { display: grid; place-items: center; width: 34px !important; height: 34px !important; margin: -17px 0 0 -17px !important; border: 3px solid white; border-radius: 50% 50% 50% 10%; color: white; background: var(--green); box-shadow: 0 5px 14px rgba(13,92,75,.35); transform: rotate(-45deg); }
.pin-marker.vacant { background: var(--amber); }
.pin-marker span { transform: rotate(45deg); font-size: 9px; font-weight: 900; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 999; background: rgba(6,27,24,.24); backdrop-filter: blur(2px); }
.detail-drawer { position: fixed; z-index: 1000; top: 0; right: 0; width: min(500px, 100vw); height: 100vh; overflow: auto; background: white; box-shadow: -24px 0 70px rgba(5,32,27,.2); transform: translateX(102%); transition: transform .24s ease; }
.detail-drawer.open { transform: translateX(0); }
.drawer-head { padding: 24px 24px 20px; color: white; background: var(--green-dark); }
.drawer-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.drawer-head .eyebrow { color: #acd2c8; }
.drawer-head h2 { margin-bottom: 8px; font-size: 27px; }
.drawer-head p { margin-bottom: 0; color: #c7ded8; font-size: 13px; }
.icon-button { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; color: inherit; background: rgba(255,255,255,.08); cursor: pointer; font-size: 21px; }
.edit-button { padding: 8px 11px; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; color: white; background: rgba(255,255,255,.08); cursor: pointer; font-size: 11px; font-weight: 800; }
.drawer-body { padding: 22px 24px 40px; }
.detail-section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.detail-section:first-child { padding-top: 0; }
.section-title { margin-bottom: 12px; font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.detail-field small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 750; }
.detail-field strong { font-size: 13px; }
.private-label { display: inline-block; margin-left: 5px; color: var(--red); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.face-card { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #f8faf9; }
.face-card + .face-card { margin-top: 10px; }
.face-photo { width: 100%; max-height: 230px; object-fit: cover; margin-bottom: 13px; border-radius: 9px; background: var(--soft); }
.face-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.face-title { font-weight: 850; }
.face-edit-button { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--green); background: white; cursor: pointer; font-size: 10px; font-weight: 850; }
.availability { color: var(--green); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.availability.vacant { color: var(--amber); }
.public-chip {
  display: inline-block;
  margin-left: 5px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #dff2e9;
  color: var(--green);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}
.public-chip.off { background: #ecefed; color: #7c8b87; }
.face-details { display: grid; grid-template-columns: 1.4fr .8fr; gap: 10px; color: var(--muted); font-size: 11px; }
.face-details strong { display: block; margin-top: 2px; color: var(--ink); font-size: 12px; }
.face-details .change-callout { padding: 8px; border-radius: 8px; color: #87530f; background: #fff0d7; }
.public-summary {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #d9eadf;
  border-radius: 10px;
  background: #f3faf6;
  color: var(--muted);
  font-size: 11px;
}
.public-summary small,
.public-summary span { display: block; }
.public-summary small { margin-bottom: 3px; color: var(--green); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.display-history { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); }
.display-history summary { color: var(--green); cursor: pointer; font-size: 11px; font-weight: 850; }
.history-item { display: grid; grid-template-columns: 110px 1fr; gap: 11px; align-items: start; margin-top: 11px; }
.history-item img { width: 110px; height: 82px; object-fit: cover; border-radius: 8px; background: var(--soft); }
.history-item strong, .history-item small { display: block; }
.history-item strong { font-size: 12px; }
.history-item small, .history-item p { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.financial-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.financial-box { padding: 12px; border-radius: 11px; background: var(--soft); }
.financial-box small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; }
.financial-box strong { font-size: 14px; }

dialog { width: min(720px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; border: 0; border-radius: 18px; color: var(--ink); box-shadow: var(--shadow); overflow: auto; }
dialog::backdrop { background: rgba(6,27,24,.42); backdrop-filter: blur(3px); }
#edit-form, #face-form, #advertiser-form, #payment-form, #lead-form { padding: 24px; }

.face-workflow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(11, 59, 50, .08), rgba(217, 133, 31, .08));
}
.face-workflow h3 { margin: 3px 0 7px; font-size: 15px; }
.face-workflow p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.face-workflow-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(125px, 1fr));
  gap: 8px;
}
.face-action {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--paper);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  text-align: left;
}
.face-action:hover { border-color: var(--amber); transform: translateY(-1px); }
.face-action.available { background: rgba(70, 178, 116, .14); border-color: rgba(70, 178, 116, .35); }
.face-action.warning { background: rgba(217, 133, 31, .14); border-color: rgba(217, 133, 31, .42); }
.face-action.wait { background: rgba(40, 104, 216, .14); border-color: rgba(40, 104, 216, .38); }
.face-action.muted { color: var(--muted); }

@media (max-width: 760px) {
  .face-workflow { grid-template-columns: 1fr; }
  .face-workflow-actions { grid-template-columns: 1fr; }
}

.advertisers-panel { margin-top: 28px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow); overflow: hidden; scroll-margin-top: 20px; }
.advertiser-search { display: flex; align-items: center; gap: 8px; width: min(330px, 100%); padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #f8faf9; }
.advertiser-search input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; }
.advertiser-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 17px 17px; }
.advertiser-stats article, .advertiser-profile-summary article { padding: 14px; border-radius: 11px; background: var(--soft); }
.advertiser-stats small, .advertiser-profile-summary small { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.advertiser-stats strong, .advertiser-profile-summary strong { font-size: 18px; }
.advertiser-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 17px 18px; }
.advertiser-card { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fbfcfc; text-align: left; cursor: pointer; }
.advertiser-card:hover { border-color: #9dbdb4; background: #f2f7f5; }
.advertiser-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: white; background: var(--green); font-size: 13px; font-weight: 900; }
.advertiser-card-copy, .advertiser-card-value { min-width: 0; }
.advertiser-card-copy strong, .advertiser-card-copy small, .advertiser-card-copy span, .advertiser-card-value small, .advertiser-card-value strong, .advertiser-card-value span { display: block; }
.advertiser-card-copy strong { overflow: hidden; margin-bottom: 4px; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.advertiser-card-copy small, .advertiser-card-copy span, .advertiser-card-value small, .advertiser-card-value span { color: var(--muted); font-size: 9px; }
.advertiser-card-copy span { margin-top: 4px; }
.advertiser-card-value { text-align: right; }
.advertiser-card-value strong { margin: 3px 0; color: var(--green); font-size: 15px; }
#advertiser-dialog { width: min(820px, calc(100vw - 28px)); }
.advertiser-profile-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 18px; }
.profile-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.profile-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.profile-section-heading h3 { margin: 0; font-size: 13px; }
.profile-face { display: flex; justify-content: space-between; gap: 15px; width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #f8faf9; text-align: left; cursor: pointer; }
.profile-face + .profile-face { margin-top: 7px; }
.profile-face > span:last-child { text-align: right; }
.profile-face strong, .profile-face small, .payment-row strong, .payment-row small { display: block; }
.profile-face strong, .payment-row strong { font-size: 11px; }
.profile-face small, .payment-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.ledger-note { margin: -2px 0 11px; color: var(--muted); font-size: 10px; }
.payment-row { display: grid; grid-template-columns: 145px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.delete-payment { padding: 5px 7px; border: 0; border-radius: 7px; color: var(--red); background: #fbe9e7; cursor: pointer; font-size: 9px; font-weight: 800; }
.empty-state.compact { padding: 15px; }

.leads-panel { margin-top: 28px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow); overflow: hidden; scroll-margin-top: 20px; }
.leads-heading { border-bottom: 0; }
.lead-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 17px 16px; }
.lead-stats article { padding: 14px; border-radius: 11px; background: var(--soft); border-left: 4px solid var(--muted); }
.lead-stats article.hot { border-left-color: var(--red); background: #fff4f2; }
.lead-stats article.followup { border-left-color: var(--amber); background: #fff8eb; }
.lead-stats article.won { border-left-color: var(--green); background: #edf7f3; }
.lead-stats small, .lead-stats strong { display: block; }
.lead-stats small { margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.lead-stats strong { font-size: 20px; }
.lead-toolbar { display: flex; align-items: center; gap: 9px; padding: 14px 17px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fbfcfc; }
.lead-toolbar .advertiser-search { flex: 1; }
.lead-toolbar select { min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: white; }
.lead-toolbar > strong { margin-left: auto; color: var(--muted); font-size: 10px; white-space: nowrap; }
.pipeline-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 17px; background: #f4f7f6; }
.pipeline-column { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: white; overflow: hidden; }
.pipeline-column > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px; border-top: 4px solid var(--muted); border-bottom: 1px solid var(--line); }
.pipeline-column.hot > header { border-top-color: var(--red); }
.pipeline-column.warm > header { border-top-color: var(--amber); }
.pipeline-column > header strong, .pipeline-column > header small { display: block; }
.pipeline-column > header strong { font-size: 12px; }
.pipeline-column > header small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.pipeline-column > header b { display: grid; place-items: center; min-width: 26px; height: 26px; border-radius: 50%; color: var(--muted); background: var(--soft); font-size: 10px; }
.pipeline-cards { display: grid; gap: 8px; max-height: 680px; padding: 9px; overflow: auto; }
.lead-card { position: relative; display: block; width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fbfcfc; text-align: left; cursor: pointer; }
.lead-card:hover { border-color: #a9c3bb; background: #f3f8f6; }
.lead-card.followup-due { box-shadow: inset 3px 0 var(--amber); }
.lead-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.priority-dot { width: 8px; height: 8px; border-radius: 50%; background: #a8b5b1; }
.lead-card.hot .priority-dot { background: var(--red); }
.lead-card.warm .priority-dot { background: var(--amber); }
.lead-card.cold .priority-dot { background: #71817c; }
.lead-stage { padding: 3px 6px; border-radius: 999px; color: var(--muted); background: var(--soft); font-size: 8px; font-weight: 800; }
.lead-card > strong, .lead-card > small { display: block; }
.lead-card > strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lead-card > small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.lead-card p { display: -webkit-box; margin: 8px 0 0; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lead-followup, .converted-label { display: block; margin-top: 8px; padding: 5px 7px; border-radius: 7px; color: #87530f; background: #fff0d7; font-size: 8px; font-weight: 800; }
.lead-followup.due { color: #9a2f25; background: #fde4e1; }
.converted-label { color: var(--green); background: #e5f4ee; }
#lead-dialog { width: min(780px, calc(100vw - 28px)); }
.lead-source-note { margin-top: 13px; color: var(--muted); font-size: 9px; }
.dialog-actions.spread { justify-content: space-between; align-items: center; }
.button.danger { color: #9a2f25; background: #fde4e1; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.dialog-heading .icon-button { color: var(--ink); border-color: var(--line); background: var(--soft); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.form-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 750; }
.form-grid label.wide { grid-column: 1 / -1; }
.form-grid input, .form-grid textarea, .form-grid select { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: white; outline: none; }
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(13,92,75,.1); }
.form-grid label.check-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fbfcfb;
}
.form-grid label.check-field input {
  width: auto;
  min-height: auto;
  accent-color: var(--green);
}
.photo-upload { padding: 12px; border: 1px dashed #a9c3bb; border-radius: 11px; background: #f3f8f6; }
.photo-upload small { color: var(--muted); font-weight: 500; line-height: 1.4; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.button { padding: 10px 15px; border: 0; border-radius: 10px; cursor: pointer; font-weight: 800; }
.button.primary { color: white; background: var(--green); }
.button.secondary { color: var(--ink); background: var(--soft); }

@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .workspace { grid-template-columns: 1fr; }
  #map { height: 430px; }
  .inventory-list { height: auto; max-height: 520px; }
}
@media (max-width: 760px) {
  .app-shell { display: block; padding-bottom: 72px; }
  .sidebar { position: fixed; z-index: 800; inset: auto 0 0; width: 100%; height: 64px; padding: 7px 9px; flex-direction: row; align-items: center; box-shadow: 0 -8px 30px rgba(7,39,33,.18); }
  .brand, .privacy-note { display: none; }
  .nav { width: 100%; grid-template-columns: repeat(5, 1fr); gap: 2px; }
  .nav-item { min-width: 0; display: grid; justify-items: center; gap: 1px; padding: 6px 2px; font-size: 9px; }
  .nav-item span { width: auto; font-size: 17px; }
  .nav-item.soon { display: grid; }
  .main { padding: 22px 14px 24px; }
  .prototype-badge { display: none; }
  .top-actions .button.compact { padding: 7px; font-size: 9px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 20px; }
  .stat-card { min-height: 120px; padding: 15px; }
  .stat-value { font-size: 26px; }
  .toolbar { align-items: stretch; flex-wrap: wrap; }
  .search-field { flex-basis: 100%; }
  .toolbar select, .check-filter, .add-location-button { flex: 1; }
  #map { height: 380px; }
  .panel-heading { min-height: 68px; padding: 14px; }
  .inventory-item { padding: 12px 8px; }
  .detail-grid, .financial-strip { grid-template-columns: 1fr 1fr; }
  .financial-box:last-child { grid-column: 1 / -1; }
  .renewals-heading { align-items: flex-start; flex-direction: column; }
  .renewal-legend { justify-content: flex-start; }
  .renewal-legend strong { text-align: left; }
  .renewal-list { grid-template-columns: 1fr; }
  .advertiser-stats { grid-template-columns: repeat(2, 1fr); }
  .advertiser-list { grid-template-columns: 1fr; }
  .advertiser-card { grid-template-columns: 40px 1fr; }
  .advertiser-card-value { grid-column: 2; display: flex; align-items: baseline; justify-content: space-between; text-align: left; }
  .advertiser-card-value small { display: none; }
  .advertiser-profile-summary { grid-template-columns: 1fr; }
  .payment-row { grid-template-columns: 105px 1fr auto; }
  .lead-stats { grid-template-columns: repeat(2, 1fr); }
  .lead-toolbar { align-items: stretch; flex-wrap: wrap; }
  .lead-toolbar .advertiser-search { flex-basis: 100%; }
  .lead-toolbar select { flex: 1; }
  .pipeline-board { grid-template-columns: 1fr; }
  .pipeline-cards { max-height: none; }
  .calendar-day { min-height: 102px; padding: 4px; }
  .cash-event { padding: 4px; }
  .cash-event small { display: none; }
  .cash-event span { display: block; }
  .cash-event b { display: block; margin-top: 1px; }
}

.customer-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(201, 241, 90, .22), transparent 34rem),
    linear-gradient(135deg, #f8fbf8 0%, #eef5f1 100%);
}
.customer-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 56px;
}
.customer-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid rgba(13, 92, 75, .16);
  border-radius: 28px;
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--shadow);
}
.customer-hero h1 {
  max-width: 760px;
  font-size: clamp(32px, 5vw, 58px);
}
.customer-logo {
  width: min(220px, 52vw);
  height: 88px;
  object-fit: contain;
  object-position: left center;
  margin: -12px 0 12px;
}
.customer-intro {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}
.customer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.customer-contact a {
  padding: 10px 12px;
  border-radius: 11px;
  color: var(--green);
  background: #edf7f2;
  text-decoration: none;
  font-weight: 900;
}
.customer-help-button {
  padding: 10px 12px;
  border: 0;
  border-radius: 11px;
  color: #0b302a;
  background: var(--lime);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}
.customer-hero-card {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 24px;
  border-radius: 22px;
  color: white;
  background: var(--green);
}
.customer-hero-card strong {
  font-size: 58px;
  line-height: .9;
  letter-spacing: -.06em;
}
.customer-hero-card span {
  color: #cbe4dd;
  font-weight: 800;
}
.customer-hero-card .button.secondary {
  color: #0b302a;
  background: #eaf6f1;
  text-align: center;
  text-decoration: none;
}
.customer-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.customer-products article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
}
.customer-product-card {
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.customer-product-card:hover,
.customer-product-card:focus-visible {
  border-color: #a9c3bb;
  box-shadow: 0 12px 32px rgba(20, 52, 45, .09);
  transform: translateY(-2px);
}
.customer-products h2 {
  margin: 4px 0 8px;
  font-size: 21px;
}
.customer-products strong {
  display: block;
  color: var(--green);
  font-size: 18px;
}
.customer-products p:not(.eyebrow) {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.customer-product-card button {
  margin-top: 14px;
  padding: 9px 12px;
  border: 0;
  border-radius: 999px;
  color: #0b302a;
  background: var(--lime);
  cursor: pointer;
  font-weight: 900;
}
.customer-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(4, minmax(140px, 180px));
  gap: 10px;
  margin: 18px 0;
}
.customer-controls .search-field { flex: 1; }
.customer-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.customer-summary article {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
}
.customer-summary small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.customer-summary strong {
  display: block;
  margin-top: 6px;
  font-size: 26px;
}
.customer-map-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 14px;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: white;
}
.customer-map-stage {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(135deg, #dceae4, #f7f2dd);
}
.customer-map-stage.leaflet-container {
  background: #dceae4;
  font: inherit;
}
.customer-map-stage .leaflet-popup-content-wrapper {
  border-radius: 14px;
}
.customer-map-popup {
  display: grid;
  gap: 7px;
}
.customer-map-popup strong {
  color: var(--green);
  font-size: 14px;
}
.customer-map-popup button,
.customer-map-popup a {
  display: inline-block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  color: white;
  background: var(--green);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-weight: 900;
}
.customer-map-stage::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 2px dashed rgba(13, 92, 75, .18);
  border-radius: 18px;
}
.customer-map-pin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 3px solid white;
  border-radius: 50% 50% 50% 8px;
  color: white;
  background: var(--green);
  box-shadow: 0 6px 16px rgba(13, 92, 75, .3);
  border-style: solid;
  cursor: pointer;
  text-decoration: none;
  transform: translate(-50%, -100%) rotate(-45deg);
}
.customer-map-pin.available { background: var(--amber); }
.customer-map-pin span {
  font-size: 9px;
  font-weight: 900;
  transform: rotate(45deg);
}
.customer-map-list {
  display: grid;
  align-content: start;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
}
.customer-map-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  background: #fbfcfc;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.customer-map-item:hover { border-color: #a9c3bb; background: #f6faf8; }
.customer-map-item small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
}
.customer-map-item b { color: var(--green); }
.customer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.customer-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: white;
  box-shadow: 0 10px 32px rgba(20, 52, 45, .075);
  cursor: pointer;
}
.customer-card:hover { border-color: #a9c3bb; transform: translateY(-1px); }
.customer-photo-wrap {
  position: relative;
  min-height: 285px;
  background: #e8f0ec;
}
.customer-photo-wrap img {
  width: 100%;
  height: 315px;
  display: block;
  object-fit: cover;
}
.customer-photo-empty {
  height: 315px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 800;
}
.customer-status {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 8px 11px;
  border-radius: 999px;
  color: white;
  background: var(--green);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.customer-card.rented .customer-status { background: #697b75; }
.customer-card-body { padding: 18px; }
.customer-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.customer-card-title h2 { font-size: 21px; }
.customer-card-title strong {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--green);
  background: var(--mint);
  font-size: 11px;
}
.customer-location,
.customer-landmark,
.customer-description,
.customer-traffic {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.45;
}
.customer-description { color: var(--ink); }
.customer-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.customer-card-foot span {
  font-weight: 900;
}
.customer-card-foot a {
  color: var(--green);
  font-weight: 900;
  text-decoration: none;
}
.customer-view-button {
  border: 0;
  color: var(--green);
  background: transparent;
  cursor: pointer;
  font-weight: 900;
}
.customer-quote-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .9fr) auto;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #cfe9dc;
  border-radius: 22px;
  background: #eef8f3;
}
.customer-quote-panel[hidden] { display: none; }
.customer-floating-quote {
  position: fixed;
  z-index: 20;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 36px);
  padding: 11px 14px 11px 11px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  color: white;
  background: var(--green);
  box-shadow: 0 14px 36px rgba(13, 59, 51, .28);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}
.customer-floating-quote[hidden] { display: none; }
.customer-floating-quote strong {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #0b302a;
  background: var(--lime);
}
.customer-floating-quote span {
  font-size: 13px;
}
.customer-quote-panel h2 { margin: 0; }
.customer-quote-list,
#customer-quote-list {
  display: grid;
  gap: 7px;
}
.customer-quote-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
}
.customer-quote-item strong,
.customer-quote-item small {
  display: block;
}
.customer-quote-item small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}
.customer-quote-item button {
  border: 0;
  color: var(--red);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}
#customer-detail-dialog {
  width: min(940px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  color: var(--ink);
  background: white;
  box-shadow: var(--shadow);
  overflow: auto;
}
#customer-interest-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  color: var(--ink);
  background: white;
  box-shadow: var(--shadow);
  overflow: auto;
}
#customer-interest-dialog::backdrop {
  background: rgba(6,27,24,.45);
  backdrop-filter: blur(3px);
}
.customer-interest-form {
  position: relative;
  padding: 30px;
}
.customer-interest-form h2 {
  margin-bottom: 8px;
  font-size: clamp(27px, 4vw, 42px);
}
.customer-interest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin-top: 18px;
}
.customer-interest-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.customer-interest-grid .wide {
  grid-column: 1 / -1;
}
.customer-interest-grid input,
.customer-interest-grid select,
.customer-interest-grid textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--ink);
  background: white;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}
.customer-interest-grid textarea {
  resize: vertical;
}
#customer-detail-dialog::backdrop {
  background: rgba(6,27,24,.45);
  backdrop-filter: blur(3px);
}
.customer-detail {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .95fr) minmax(0, 1.05fr);
}
.customer-detail-close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255,255,255,.92);
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
}
.customer-detail-photo {
  position: relative;
  min-height: 420px;
  background: #e8f0ec;
}
.customer-detail-photo img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: block;
  object-fit: cover;
}
.customer-detail-body {
  padding: 30px;
}
.customer-detail-body h2 {
  margin-bottom: 14px;
  font-size: clamp(26px, 4vw, 38px);
}
.customer-detail-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 16px 0;
}
.customer-detail-facts article {
  padding: 12px;
  border-radius: 12px;
  background: var(--soft);
}
.customer-detail-facts small,
.customer-detail-facts strong {
  display: block;
}
.customer-detail-facts small {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.customer-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.customer-detail-actions a {
  text-decoration: none;
}
.customer-location-overview {
  position: relative;
  padding: 28px;
}
.customer-location-overview h2 {
  margin-bottom: 8px;
  font-size: clamp(27px, 4vw, 42px);
}
.customer-location-faces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.customer-location-face {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fbfcfc;
}
.customer-location-face img,
.customer-location-face .customer-photo-empty {
  width: 100%;
  height: 170px;
  min-height: 170px;
  object-fit: cover;
}
.customer-location-face div {
  padding: 13px;
}
.customer-location-face h3 {
  margin: 0 0 5px;
  font-size: 17px;
}
.customer-location-face button {
  margin-top: 10px;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  color: white;
  background: var(--green);
  cursor: pointer;
  font-weight: 900;
}

/* Public site polish: light luxury / industrial catalog */
.customer-body {
  background:
    radial-gradient(circle at 11% 6%, rgba(201, 241, 90, .18), transparent 25rem),
    radial-gradient(circle at 91% 20%, rgba(11, 59, 50, .12), transparent 30rem),
    linear-gradient(135deg, #fbfaf6 0%, #f1efe8 56%, #ffffff 100%);
}

.customer-shell {
  position: relative;
  z-index: 1;
}

.customer-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background-image:
    linear-gradient(rgba(16, 21, 19, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 21, 19, .028) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}

.customer-hero {
  position: relative;
  overflow: hidden;
  border-color: rgba(16, 21, 19, .12);
  background:
    linear-gradient(105deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.9) 64%, rgba(7,17,15,.08) 100%);
}

.customer-hero h1,
.customer-section-heading h2,
.customer-trust-panel h2,
.customer-faq-panel h2 {
  letter-spacing: -.065em;
}

.customer-hero-card {
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(145deg, #07110f 0%, #0b3b32 70%, #101513 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 24px 60px rgba(7,17,15,.18);
}

.customer-hero-card .button.secondary,
.customer-help-button,
.customer-product-card button {
  color: #07110f;
  background: var(--lime);
  box-shadow: 0 8px 20px rgba(201, 241, 90, .18);
}

.customer-pricing-panel,
.customer-map-panel,
.customer-quote-panel,
.customer-trust-panel,
.customer-faq-panel {
  position: relative;
  z-index: 1;
}

.customer-pricing-panel {
  margin: 18px 0;
  padding: 20px;
  border: 1px solid rgba(16, 21, 19, .12);
  border-radius: 24px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow);
}

.customer-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.customer-section-heading h2 {
  margin: 0;
  font-size: clamp(26px, 4vw, 42px);
}

.customer-section-heading p {
  max-width: 480px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.customer-products {
  margin: 0;
}

.customer-products article {
  position: relative;
  overflow: hidden;
  border-color: rgba(16, 21, 19, .12);
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%);
}

.customer-products article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--green-dark), var(--metal), var(--lime));
}

.customer-product-card:hover,
.customer-product-card:focus-visible {
  border-color: rgba(7,17,15,.42);
  box-shadow: 0 22px 52px rgba(16, 21, 19, .12);
}

.customer-map-panel,
.customer-card,
#customer-detail-dialog,
#customer-interest-dialog,
.customer-summary article {
  border-color: rgba(16, 21, 19, .12);
}

.customer-status {
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 8px 18px rgba(16, 21, 19, .18);
}

.customer-status.tone-available,
.customer-card.rented .customer-status.tone-available {
  color: white;
  background: #10a760;
}

.customer-status.tone-coming,
.customer-card.rented .customer-status.tone-coming {
  color: #15110a;
  background: #f0a22a;
  border-radius: 9px;
}

.customer-status.tone-coming::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border-radius: 50%;
  color: #f0a22a;
  background: #15110a;
}

.customer-status.tone-claim,
.customer-card.rented .customer-status.tone-claim {
  color: white;
  background: var(--blue);
}

.inline-status {
  position: static;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 10px;
}

.customer-trust-panel {
  margin-top: 22px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  color: white;
  background:
    linear-gradient(145deg, rgba(7,17,15,.98), rgba(11,59,50,.96)),
    radial-gradient(circle at 86% 16%, rgba(201,241,90,.2), transparent 24rem);
  box-shadow: 0 28px 70px rgba(7,17,15,.22);
}

.customer-owner-panel {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1fr);
  gap: clamp(18px, 4vw, 34px);
  align-items: stretch;
  margin-top: 22px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(16, 21, 19, .12);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(251,250,246,.9)),
    radial-gradient(circle at 8% 8%, rgba(201,241,90,.16), transparent 24rem);
  box-shadow: var(--shadow);
}

.customer-owner-photo {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--green-dark);
  box-shadow: 0 24px 55px rgba(7,17,15,.2);
}

.customer-owner-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 40%, rgba(7,17,15,.46)),
    linear-gradient(90deg, rgba(7,17,15,.22), transparent 45%);
}

.customer-owner-photo img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  display: block;
  object-fit: cover;
  object-position: 50% 36%;
}

.customer-owner-copy {
  display: grid;
  align-content: center;
  padding: clamp(8px, 2vw, 18px);
}

.customer-owner-copy h2 {
  margin: 0 0 18px;
  font-size: clamp(30px, 5vw, 54px);
  letter-spacing: -.07em;
}

.customer-owner-copy blockquote {
  margin: 0;
  padding: 0 0 0 20px;
  border-left: 4px solid var(--green);
  color: var(--ink);
  font-size: clamp(18px, 2.2vw, 25px);
  font-weight: 750;
  line-height: 1.38;
  letter-spacing: -.03em;
}

.customer-owner-signature {
  margin: 20px 0 0;
}

.customer-owner-signature strong,
.customer-owner-signature span {
  display: block;
}

.customer-owner-signature strong {
  font-size: 18px;
}

.customer-owner-signature span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.customer-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.customer-social-links a {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: white;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
}

.customer-social-links a:first-child {
  color: #07110f;
  border-color: var(--lime);
  background: var(--lime);
}

.customer-trust-panel .eyebrow,
.customer-trust-panel p {
  color: rgba(255,255,255,.68);
}

.customer-trust-panel h2 {
  margin: 0 0 8px;
  font-size: clamp(28px, 4vw, 46px);
}

.customer-advertiser-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.customer-advertiser-cloud span {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: #f8faf6;
  background: rgba(255,255,255,.07);
  font-size: 13px;
  font-weight: 850;
}

.customer-faq-panel {
  margin-top: 18px;
  padding: clamp(20px, 4vw, 30px);
  border: 1px solid rgba(16, 21, 19, .12);
  border-radius: 24px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow);
}

.customer-faq-panel h2 {
  margin: 0 0 16px;
  font-size: clamp(27px, 4vw, 42px);
}

.customer-faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.customer-faq-grid article {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fbfaf6;
}

.customer-faq-grid h3 {
  margin: 0 0 7px;
  font-size: 15px;
}

.customer-faq-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.customer-past-ads {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.customer-past-ads > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.customer-past-ads article {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfaf6;
}

.customer-past-ads img {
  width: 100%;
  height: 118px;
  display: block;
  object-fit: cover;
}

.customer-past-ads span {
  display: block;
  padding: 9px 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.safety-panel,
.workorders-panel {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
  box-shadow: 0 7px 24px rgba(20,52,45,.045);
}
.safety-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}
.safety-card {
  min-height: 150px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fbfcfb;
}
.safety-card.good { background: #eef8f3; border-color: #cfe9dc; }
.safety-card.warning { background: #fff8e8; border-color: #f2dfad; }
.safety-card small,
.workorder-stats small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.safety-card strong {
  display: block;
  margin: 8px 0;
  font-size: 18px;
}
.safety-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.safety-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px 14px;
  color: var(--muted);
  font-size: 12px;
}
.publisher-panel,
.webapp-panel {
  margin: 0 14px 16px;
  padding: 18px;
  border: 1px solid #cfe4da;
  border-radius: 18px;
  background: linear-gradient(135deg, #f4fbf7, #ffffff 62%, #fff8e8);
}
.webapp-panel {
  border-color: #d7d4ec;
  background: linear-gradient(135deg, #f6f4ff, #ffffff 58%, #edf8f2);
}
.publisher-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.publisher-heading h3 {
  margin-bottom: 6px;
  font-size: 22px;
  letter-spacing: -.035em;
}
.publisher-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.publisher-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.publisher-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.publisher-grid article,
.webapp-grid article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.86);
}
.publisher-grid small,
.webapp-grid small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.publisher-grid strong {
  display: block;
  margin-top: 6px;
  color: var(--green);
  font-size: 28px;
  letter-spacing: -.04em;
}
.webapp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.webapp-grid strong {
  display: block;
  margin: 7px 0 6px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}
.webapp-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
#install-crm-app:disabled {
  opacity: .65;
  cursor: default;
}
.publisher-steps {
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed #c9dcd3;
  border-radius: 15px;
  color: var(--muted);
  background: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.5;
}
.publisher-steps strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
}
.publisher-steps ol {
  margin: 0 0 10px 18px;
  padding: 0;
}
.publisher-steps p {
  margin: 0;
  color: var(--green);
  font-weight: 800;
}
.workorder-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 14px 0;
}
.workorder-stats article {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fbfcfb;
}
.workorder-stats article.followup { background: #fff4e7; border-color: #f1d9b8; }
.workorder-stats article.won { background: #edf8f2; border-color: #cae7d8; }
.workorder-stats strong {
  display: block;
  margin-top: 5px;
  font-size: 26px;
}
.workorder-list {
  display: grid;
  gap: 9px;
  padding: 12px 14px 16px;
}
.workorder-card {
  width: 100%;
  display: grid;
  gap: 7px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  text-align: left;
  cursor: pointer;
}
.workorder-card:hover { background: #f6faf8; }
.workorder-card.due { border-color: #e7b26e; box-shadow: inset 4px 0 0 #d78525; }
.workorder-card.completed { opacity: .72; }
.workorder-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.workorder-top strong { font-size: 14px; }
.workorder-top span {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--green);
  font-size: 10px;
  font-weight: 900;
}
.workorder-card small,
.workorder-meta {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}
.workorder-card p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
}

@media (max-width: 860px) {
  .customer-hero { grid-template-columns: 1fr; }
  .customer-grid { grid-template-columns: 1fr; }
  .customer-products,
  .customer-map-panel,
  .customer-quote-panel,
  .customer-detail,
  .customer-owner-panel { grid-template-columns: 1fr; }
  .customer-owner-photo,
  .customer-owner-photo img { min-height: 430px; }
  .customer-section-heading { align-items: flex-start; flex-direction: column; }
  .customer-faq-grid { grid-template-columns: 1fr 1fr; }
  .customer-controls { grid-template-columns: 1fr 1fr; }
  .customer-detail-photo,
  .customer-detail-photo img { min-height: 300px; }
  .customer-detail-facts { grid-template-columns: 1fr; }
  #customer-detail-dialog {
    width: min(100vw - 18px, 620px);
    max-height: calc(100dvh - 18px);
    border-radius: 20px;
  }
  .customer-detail-body { padding: 22px; }
  .safety-grid,
  .publisher-grid,
  .webapp-grid,
  .workorder-stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .customer-shell { width: min(100% - 20px, 1180px); padding-top: 16px; }
  .customer-hero { padding: 22px; border-radius: 20px; }
  .customer-hero::after { display: none; }
  .customer-pricing-panel,
  .customer-trust-panel,
  .customer-faq-panel,
  .customer-owner-panel { border-radius: 20px; }
  .customer-owner-photo,
  .customer-owner-photo img { min-height: 360px; }
  .customer-owner-copy blockquote { padding-left: 14px; }
  .customer-controls,
  .customer-products { grid-template-columns: 1fr; }
  .customer-faq-grid,
  .customer-past-ads > div { grid-template-columns: 1fr; }
  .customer-summary { grid-template-columns: 1fr; }
  .customer-map-stage { min-height: 300px; }
  .customer-location-faces { grid-template-columns: 1fr; }
  .customer-detail-photo,
  .customer-detail-photo img { min-height: 240px; }
  .customer-detail-actions { flex-direction: column; }
  .customer-detail-actions .button { width: 100%; text-align: center; }
  .customer-floating-quote {
    right: 10px;
    bottom: 10px;
  }
  .customer-interest-form { padding: 22px; }
  .customer-interest-grid { grid-template-columns: 1fr; }
  .customer-interest-grid .wide { grid-column: auto; }
  .safety-grid,
  .publisher-grid,
  .webapp-grid,
  .workorder-stats { grid-template-columns: 1fr; }
  .safety-actions { align-items: flex-start; flex-direction: column; }
  .publisher-heading { flex-direction: column; }
  .publisher-actions { justify-content: flex-start; }
  .customer-photo-wrap,
  .customer-photo-wrap img,
  .customer-photo-empty { min-height: 220px; height: 220px; }
  .customer-card-foot { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 420px) {
  h1 { font-size: 27px; }
  .topbar .eyebrow { font-size: 9px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat-card { min-height: 112px; }
  .stat-label { font-size: 10px; }
  .stat-foot { font-size: 9px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid label.wide { grid-column: auto; }
  .cash-calendar { margin: 8px; }
  .calendar-toolbar { align-items: flex-start; padding: 12px; }
  .calendar-toolbar h3 { font-size: 17px; }
  .cash-summary { gap: 5px; padding: 8px; }
  .cash-card { padding: 8px; }
  .cash-card strong { font-size: 13px; }
  .calendar-day { min-height: 88px; }
  .day-number { width: 19px; height: 19px; }
  .cash-event strong { font-size: 8px; }
  .cash-event b { font-size: 7px; }
}

/* Dark concept experiment: premium local billboard catalog skin.
   This section is intentionally visual-only. Existing page structure and behavior remain unchanged. */
:root {
  --ink: #f3eee2;
  --muted: #b5afa3;
  --soft: #151817;
  --line: rgba(212, 179, 113, .25);
  --paper: #0d0f0e;
  --canvas: #050606;
  --green: #9f7a38;
  --green-dark: #030504;
  --mint: rgba(212, 179, 113, .12);
  --lime: #c5a05a;
  --amber: #c79542;
  --blue: #6c86a8;
  --metal: #ded5c6;
  --red: #c26352;
  --shadow: 0 26px 80px rgba(0, 0, 0, .46);
}

body.customer-body {
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 10%, rgba(197, 160, 90, .16), transparent 28rem),
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.05), transparent 24rem),
    linear-gradient(rgba(0,0,0,.74), rgba(0,0,0,.86)),
    linear-gradient(135deg, #090b0a 0%, #020303 100%);
  animation: none;
}

body.customer-body::after {
  content: none;
  display: none;
  animation: none;
}

@keyframes customer-dust-drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(-90px, -130px, 0) rotate(1deg); }
}

@keyframes customer-page-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.customer-shell::before {
  opacity: .22;
  background-image:
    linear-gradient(rgba(197,160,90,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,160,90,.055) 1px, transparent 1px);
}

.customer-logo {
  filter: none;
  width: min(300px, 58vw);
  height: 112px;
  display: block;
  object-position: left center;
  margin: -16px 0 12px;
}

.customer-hero,
.customer-pricing-panel,
.customer-map-panel,
.customer-summary article,
.customer-card,
.customer-quote-panel,
.customer-owner-panel,
.customer-faq-panel,
#customer-detail-dialog,
#customer-interest-dialog {
  border-color: rgba(212, 179, 113, .24);
  background:
    linear-gradient(145deg, rgba(22, 24, 23, .96), rgba(7, 8, 8, .97)),
    radial-gradient(circle at 18% 0%, rgba(197,160,90,.08), transparent 18rem);
  box-shadow:
    inset 0 1px rgba(255,255,255,.06),
    0 24px 70px rgba(0,0,0,.42);
  animation: none;
}

.customer-pricing-panel,
.customer-controls,
.customer-summary,
.customer-map-panel,
.customer-card,
.customer-owner-panel,
.customer-trust-panel,
.customer-faq-panel {
  animation: none;
}

@keyframes customer-section-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.customer-hero {
  background:
    linear-gradient(90deg, rgba(4,5,5,.9), rgba(5,6,6,.7)),
    radial-gradient(circle at 72% 30%, rgba(197,160,90,.16), transparent 20rem),
    linear-gradient(145deg, #111412, #030403);
}

.customer-hero h1,
.customer-section-heading h2,
.customer-trust-panel h2,
.customer-faq-panel h2,
.customer-owner-copy h2,
.customer-map-panel h2,
.customer-card-title h2,
.customer-location-overview h2,
.customer-detail-body h2 {
  color: #f6f0e5;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
  font-weight: 500;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.customer-hero h1 {
  max-width: 720px;
  line-height: .92;
  text-shadow: 0 16px 40px rgba(0,0,0,.7);
}

.customer-hero h1::first-line {
  color: #f6f0e5;
}

.customer-hero-card {
  border: 1px solid rgba(212,179,113,.28);
  color: #f6f0e5;
  background:
    linear-gradient(155deg, rgba(12,15,14,.95), rgba(3,4,4,.98)),
    radial-gradient(circle at 50% 0%, rgba(197,160,90,.16), transparent 18rem);
}

.customer-hero-card strong {
  color: #f0e8d8;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
  font-weight: 500;
  letter-spacing: .04em;
}

.customer-hero-card span,
.customer-intro,
.customer-location,
.customer-landmark,
.customer-traffic,
.customer-section-heading p,
.customer-products p:not(.eyebrow),
.customer-faq-grid p,
.customer-owner-signature span,
.customer-quote-item small {
  color: var(--muted);
}

.eyebrow {
  color: var(--amber);
  letter-spacing: .18em;
}

.button.primary,
.customer-help-button,
.customer-hero-card .button.primary,
.customer-product-card button,
.customer-location-face button,
.customer-map-popup button,
.customer-map-popup a,
.customer-social-links a:first-child {
  color: #11100c;
  border: 1px solid rgba(244, 218, 159, .4);
  background: linear-gradient(180deg, #c8a45d, #8f682c);
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 14px 30px rgba(0,0,0,.36);
}

.button.secondary,
.customer-hero-card .button.secondary,
.customer-contact a,
.customer-social-links a {
  color: #ead9b4;
  border: 1px solid rgba(197,160,90,.36);
  background: rgba(4,5,5,.52);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}

.customer-products article,
.customer-faq-grid article,
.customer-map-item,
.customer-quote-item,
.customer-location-face,
.customer-detail-facts article,
.customer-past-ads article,
.customer-interest-grid input,
.customer-interest-grid select,
.customer-interest-grid textarea,
select,
.search-field {
  color: var(--ink);
  border-color: rgba(212,179,113,.22);
  background: linear-gradient(180deg, rgba(21,24,23,.94), rgba(7,8,8,.96));
}

.customer-product-card:hover,
.customer-product-card:focus-visible,
.customer-card:hover,
.customer-map-item:hover {
  border-color: rgba(226,190,116,.55);
  box-shadow: 0 22px 62px rgba(0,0,0,.56);
}

.customer-card,
.customer-product-card,
.customer-map-item,
.customer-location-face,
.customer-faq-grid article,
.customer-advertiser-cloud span,
.customer-social-links a,
.button,
.customer-help-button,
.customer-view-button {
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    color .22s ease,
    opacity .22s ease;
}

.customer-card:hover,
.customer-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 30px 80px rgba(0,0,0,.58);
}

.customer-card:hover .customer-photo-wrap img,
.customer-card:focus-visible .customer-photo-wrap img {
  transform: scale(1.035);
}

.customer-photo-wrap {
  overflow: hidden;
}

.customer-photo-wrap img {
  transition: transform .55s ease, filter .35s ease;
}

.customer-view-button {
  position: relative;
  padding-bottom: 3px;
}

.customer-view-button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: #e5bf6c;
  transition: right .22s ease;
}

.customer-card:hover .customer-view-button::after,
.customer-card:focus-visible .customer-view-button::after {
  right: 0;
}

.customer-product-card:hover,
.customer-product-card:focus-visible,
.customer-social-links a:hover,
.customer-social-links a:focus-visible,
.customer-advertiser-cloud span:hover {
  transform: translateY(-3px);
}

.button:hover,
.customer-help-button:hover,
.customer-product-card button:hover,
.customer-location-face button:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px rgba(255,255,255,.26), 0 18px 36px rgba(0,0,0,.46);
}

.customer-map-item:hover,
.customer-map-item:focus-visible {
  color: #f4ecdc;
  background: linear-gradient(180deg, rgba(35,31,24,.96), rgba(12,13,12,.98));
}

.customer-map-item:hover small,
.customer-map-item:focus-visible small {
  color: #cfc5b3;
}

.customer-products article::before {
  background: linear-gradient(90deg, transparent, #c8a45d, transparent);
}

.customer-products strong,
.customer-map-item b,
.customer-card-title strong,
.customer-view-button,
.customer-card-foot span,
.customer-owner-signature strong {
  color: #e5bf6c;
}

.customer-card-title strong {
  background: rgba(197,160,90,.12);
  border: 1px solid rgba(197,160,90,.24);
}

.customer-photo-wrap,
.customer-detail-photo,
.customer-map-stage {
  background: #060808;
}

.customer-photo-wrap img,
.customer-detail-photo img,
.customer-location-face img,
.customer-past-ads img,
.customer-owner-photo img {
  filter: saturate(.82) contrast(1.12) brightness(.82);
}

.customer-status.tone-available,
.customer-card.rented .customer-status.tone-available {
  color: #090806;
  border-color: rgba(255,232,178,.54);
  background: linear-gradient(180deg, #e1bd6c, #9b7132);
}

.customer-status.tone-coming,
.customer-card.rented .customer-status.tone-coming {
  color: #160d08;
  border-color: rgba(255,194,125,.5);
  background: linear-gradient(180deg, #d98b43, #8f4d23);
}

.customer-status.tone-claim,
.customer-card.rented .customer-status.tone-claim {
  color: #edf5f7;
  border-color: rgba(167,193,207,.42);
  background: linear-gradient(180deg, #5e7889, #2f4656);
}

.customer-status {
  letter-spacing: .09em;
}

.customer-card-body,
.customer-detail-body,
.customer-location-overview,
.customer-interest-form {
  background: linear-gradient(180deg, rgba(10,12,12,.2), rgba(4,5,5,.18));
}

.customer-description {
  color: #e8e0d2;
}

.customer-map-panel,
.customer-faq-panel,
.customer-pricing-panel {
  background:
    linear-gradient(145deg, rgba(26, 28, 27, .96), rgba(8, 9, 9, .98)),
    radial-gradient(circle at 20% 0%, rgba(197,160,90,.07), transparent 20rem);
}

.customer-trust-panel {
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(14,16,15,.96), rgba(4,5,5,.98)),
    radial-gradient(circle at 86% 16%, rgba(197,160,90,.16), transparent 24rem);
}

.customer-advertiser-cloud span {
  color: #f3eee2;
  border-color: rgba(212,179,113,.24);
  background: rgba(255,255,255,.035);
}

.customer-owner-photo {
  border: 1px solid rgba(212,179,113,.24);
  background: #050606;
}

.customer-owner-copy blockquote {
  color: #f3eee2;
  border-left-color: #c8a45d;
}

.customer-detail-close {
  color: #f3eee2;
  border: 1px solid rgba(212,179,113,.26);
  background: rgba(0,0,0,.72);
}

.customer-floating-quote {
  color: #f3eee2;
  background: linear-gradient(180deg, #151817, #050606);
  border-color: rgba(212,179,113,.38);
}

.customer-floating-quote strong {
  color: #11100c;
  background: #c8a45d;
}

@media (max-width: 620px) {
  .customer-hero h1 {
    font-size: clamp(42px, 13vw, 64px);
  }

  .customer-logo {
    width: min(250px, 70vw);
    height: 92px;
    margin: -10px 0 8px;
    object-position: left center;
  }

  .customer-intro,
  .customer-location,
  .customer-products p:not(.eyebrow),
  .customer-faq-grid p {
    color: #cfc8ba;
  }

  .customer-card-title h2 {
    font-size: 25px;
    line-height: 1.03;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.customer-body,
  body.customer-body::after,
  .customer-hero,
  .customer-pricing-panel,
  .customer-controls,
  .customer-summary,
  .customer-map-panel,
  .customer-card,
  .customer-owner-panel,
  .customer-trust-panel,
  .customer-faq-panel {
    animation: none !important;
  }

  .customer-card,
  .customer-card:hover,
  .customer-product-card:hover,
  .customer-map-item:hover,
  .button:hover,
  .customer-help-button:hover {
    transform: none !important;
  }
}

/* Final CRM readability polish
   These rules intentionally sit at the end so the internal CRM stays easy to read,
   while the public customer website keeps its finished dark brand styling. */
body.crm-app {
  --crm-bg: #050706;
  --crm-surface: #0f1511;
  --crm-surface-2: #131b16;
  --crm-surface-3: #18231d;
  --crm-ink: #fbf5ea;
  --crm-muted: #c8bdab;
  --crm-faint: #948a7a;
  --crm-line: rgba(207, 164, 83, .32);
  --crm-line-strong: rgba(218, 176, 91, .55);
  --crm-gold: #d7aa52;
  --crm-gold-soft: rgba(215, 170, 82, .15);
  --crm-green: #2bc083;
  --crm-green-soft: rgba(43, 192, 131, .15);
  --crm-red: #f07167;
  --crm-red-soft: rgba(240, 113, 103, .13);
  --crm-blue: #7db7ff;
  --crm-blue-soft: rgba(125, 183, 255, .13);
  color: var(--crm-ink);
  background:
    radial-gradient(circle at top left, rgba(215, 170, 82, .12), transparent 32rem),
    radial-gradient(circle at bottom right, rgba(43, 192, 131, .08), transparent 34rem),
    var(--crm-bg);
}

body.crm-app .main,
body.crm-app .page {
  background: transparent;
}

body.crm-app h1,
body.crm-app h2,
body.crm-app h3,
body.crm-app h4,
body.crm-app strong,
body.crm-app .section-eyebrow,
body.crm-app .renewals-heading h2,
body.crm-app .advertiser-header h2,
body.crm-app .lead-header h2,
body.crm-app .publisher-heading h3 {
  color: var(--crm-ink);
}

body.crm-app p,
body.crm-app small,
body.crm-app label,
body.crm-app .muted,
body.crm-app .empty-state,
body.crm-app .renewals-heading p,
body.crm-app .advertiser-header p,
body.crm-app .lead-header p,
body.crm-app .publisher-heading p,
body.crm-app .webapp-grid p,
body.crm-app .safety-card p,
body.crm-app .workorder-meta,
body.crm-app .workorder-card small,
body.crm-app .activity-copy small,
body.crm-app .activity-copy div span,
body.crm-app .renewal-date small,
body.crm-app .renewal-copy small,
body.crm-app .renewal-copy span,
body.crm-app .advertiser-card-copy small,
body.crm-app .advertiser-card-copy span,
body.crm-app .advertiser-card-value small,
body.crm-app .advertiser-card-value span,
body.crm-app .lead-card > small,
body.crm-app .lead-card p,
body.crm-app .lead-toolbar > strong,
body.crm-app .safety-actions {
  color: var(--crm-muted);
}

body.crm-app .stat-card,
body.crm-app .renewals-panel,
body.crm-app .activity-panel,
body.crm-app .advertisers-panel,
body.crm-app .leads-panel,
body.crm-app .safety-panel,
body.crm-app .workorders-panel,
body.crm-app .publisher-panel,
body.crm-app .webapp-panel,
body.crm-app .modal-card {
  color: var(--crm-ink);
  border-color: var(--crm-line);
  background: var(--crm-surface);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
}

body.crm-app .stat-card.accent {
  color: var(--crm-ink);
  border-color: rgba(215, 170, 82, .75);
  background: linear-gradient(135deg, rgba(24, 34, 28, .98), rgba(9, 15, 12, .98));
  box-shadow: inset 0 0 0 1px rgba(215, 170, 82, .10), 0 18px 45px rgba(0, 0, 0, .28);
}

body.crm-app .stat-card.accent .stat-label,
body.crm-app .stat-card.potential .stat-label {
  color: #d7aa52;
}

body.crm-app .stat-card.accent .stat-value,
body.crm-app .stat-card.potential .stat-value {
  color: #fff7e8;
}

body.crm-app .stat-card.accent .stat-foot,
body.crm-app .stat-card.potential .stat-foot {
  color: #d8cab0;
}

body.crm-app .stat-card.potential {
  border-color: rgba(215, 170, 82, .48);
  background: linear-gradient(135deg, rgba(16, 24, 19, .98), rgba(10, 15, 12, .98));
}

body.crm-app .renewals-heading,
body.crm-app .activity-panel .panel-heading,
body.crm-app .advertiser-header,
body.crm-app .lead-header,
body.crm-app .publisher-heading,
body.crm-app .calendar-toolbar,
body.crm-app .workorders-panel > .panel-heading,
body.crm-app .safety-panel > .panel-heading {
  border-color: var(--crm-line);
  background: var(--crm-surface-2);
}

body.crm-app .cash-calendar,
body.crm-app .calendar-grid,
body.crm-app .pipeline-column {
  border-color: var(--crm-line);
  background: #0b100d;
}

body.crm-app .calendar-weekdays,
body.crm-app .cash-summary,
body.crm-app .toolbar,
body.crm-app .lead-toolbar {
  border-color: var(--crm-line);
  background: #f6f1e6;
}

body.crm-app .calendar-weekdays span {
  color: #776b59;
}

body.crm-app .calendar-day {
  color: var(--crm-ink);
  border-color: rgba(215, 170, 82, .24);
  background: #0e1511;
}

body.crm-app .calendar-day.outside {
  background: #080c0a;
}

body.crm-app .calendar-day.outside .day-number {
  color: #6f786f;
}

body.crm-app .calendar-day.current-day {
  box-shadow: inset 0 0 0 2px var(--crm-gold);
}

body.crm-app .cash-card,
body.crm-app .advertiser-stats article,
body.crm-app .advertiser-profile-summary article,
body.crm-app .lead-stats article,
body.crm-app .workorder-stats article,
body.crm-app .safety-card,
body.crm-app .publisher-grid article,
body.crm-app .webapp-grid article,
body.crm-app .face-card,
body.crm-app .financial-box {
  color: var(--crm-ink);
  border: 1px solid var(--crm-line);
  background: var(--crm-surface-2);
}

body.crm-app .cash-card small,
body.crm-app .advertiser-stats small,
body.crm-app .advertiser-profile-summary small,
body.crm-app .lead-stats small,
body.crm-app .workorder-stats small,
body.crm-app .safety-card small,
body.crm-app .publisher-grid small,
body.crm-app .webapp-grid small {
  color: #d8cbb5;
}

body.crm-app .cash-card.income,
body.crm-app .safety-card.good,
body.crm-app .workorder-stats article.completed,
body.crm-app .lead-stats article.won {
  color: #bfffe4;
  border-color: rgba(43, 192, 131, .45);
  background: var(--crm-green-soft);
}

body.crm-app .cash-card.expense,
body.crm-app .lead-stats article.hot,
body.crm-app .renewal-item.overdue {
  color: #ffd4cf;
  border-color: rgba(240, 113, 103, .45);
  background: var(--crm-red-soft);
}

body.crm-app .cash-card.net,
body.crm-app .safety-card.warning,
body.crm-app .lead-stats article.followup,
body.crm-app .workorder-stats article.due {
  color: #ffe1a5;
  border-color: rgba(215, 170, 82, .48);
  background: var(--crm-gold-soft);
}

body.crm-app .cash-event {
  color: #dbfff2;
  border-left-color: var(--crm-green);
  background: rgba(43, 192, 131, .20);
}

body.crm-app .cash-event.lease {
  color: #ffd7d3;
  border-left-color: var(--crm-red);
  background: rgba(240, 113, 103, .18);
}

body.crm-app .renewal-item,
body.crm-app .activity-item,
body.crm-app .advertiser-card,
body.crm-app .lead-card,
body.crm-app .workorder-card {
  color: var(--crm-ink);
  border-color: var(--crm-line);
  background: var(--crm-surface-2);
}

body.crm-app .renewal-item:hover,
body.crm-app .activity-item:hover,
body.crm-app .advertiser-card:hover,
body.crm-app .lead-card:hover,
body.crm-app .workorder-card:hover {
  color: var(--crm-ink);
  border-color: var(--crm-line-strong);
  background: var(--crm-surface-3);
}

body.crm-app .renewal-item.lease {
  border-left-color: var(--crm-red);
}

body.crm-app .renewal-item.advertiser {
  border-left-color: var(--crm-green);
}

body.crm-app .renewal-item.advertiser .renewal-copy small,
body.crm-app .advertiser-card-value strong,
body.crm-app .publisher-grid strong {
  color: #91f0c8;
}

body.crm-app .renewal-item.lease .renewal-copy small {
  color: #ffaaa2;
}

body.crm-app .renewal-status,
body.crm-app .lead-stage,
body.crm-app .workorder-top span,
body.crm-app .status-pill,
body.crm-app .public-chip,
body.crm-app .prototype-badge,
body.crm-app .private-label,
body.crm-app .count-badge {
  color: #eaf8f3;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .08);
}

body.crm-app .renewal-item.overdue .renewal-status,
body.crm-app .lead-followup.due {
  color: #ffd7d3;
  background: rgba(240, 113, 103, .22);
}

body.crm-app .renewal-item.due .renewal-status,
body.crm-app .lead-followup,
body.crm-app .converted-label {
  color: #ffe1a5;
  background: rgba(215, 170, 82, .22);
}

body.crm-app .search-field,
body.crm-app .advertiser-search,
body.crm-app .check-filter,
body.crm-app select,
body.crm-app input,
body.crm-app textarea {
  color: var(--crm-ink);
  border-color: rgba(215, 170, 82, .45);
  background: #0a0f0c;
}

body.crm-app .search-field input,
body.crm-app .advertiser-search input {
  color: var(--crm-ink);
  background: transparent;
}

body.crm-app input::placeholder,
body.crm-app textarea::placeholder {
  color: #a99e8c;
  opacity: 1;
}

body.crm-app .search-field span,
body.crm-app .advertiser-search span {
  color: var(--crm-gold);
}

body.crm-app .button.primary,
body.crm-app .add-location-button,
body.crm-app .add-workorder-button,
body.crm-app .add-lead-button {
  color: #070907;
  border-color: rgba(255, 226, 161, .55);
  background: linear-gradient(135deg, #e6bf6a, #a9792a);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

body.crm-app .button.ghost,
body.crm-app .calendar-button,
body.crm-app .face-edit-button,
body.crm-app .icon-button {
  color: var(--crm-ink);
  border-color: var(--crm-line);
  background: #0a0f0c;
}

body.crm-app .button.ghost:hover,
body.crm-app .calendar-button:hover,
body.crm-app .face-edit-button:hover,
body.crm-app .icon-button:hover {
  color: #ffe1a5;
  border-color: var(--crm-line-strong);
  background: #172019;
}

body.crm-app .activity-avatar,
body.crm-app .advertiser-avatar {
  color: #ffffff;
  background: #0b4d3b;
}

body.crm-app .priority-dot.hot,
body.crm-app .lead-card.hot .priority-dot {
  background: var(--crm-red);
}

body.crm-app .priority-dot.warm,
body.crm-app .lead-card.warm .priority-dot {
  background: var(--crm-gold);
}

body.crm-app .priority-dot.cold,
body.crm-app .lead-card.cold .priority-dot {
  background: #8fa199;
}

body.crm-app .lead-stage,
body.crm-app .workorder-top span {
  color: #9bf3cf;
  background: rgba(43, 192, 131, .17);
}

body.crm-app .activity-list,
body.crm-app .renewal-list,
body.crm-app .pipeline-cards {
  scrollbar-color: rgba(215, 170, 82, .55) rgba(255, 255, 255, .06);
}

body.crm-app .map-card,
body.crm-app #map,
body.crm-app .leaflet-container,
body.crm-app .leaflet-popup-content-wrapper,
body.crm-app .leaflet-popup-tip {
  color: #111713;
}

body.crm-app .leaflet-control-zoom a {
  color: #111713;
}

/* CRM follow-up: remove the remaining bright bands and pastel boxes. */
body.crm-app .toolbar,
body.crm-app .lead-toolbar,
body.crm-app .cash-summary {
  border-color: rgba(215, 170, 82, .28);
  background: linear-gradient(90deg, #0c120f, #101711);
}

body.crm-app .calendar-weekdays {
  border-color: rgba(215, 170, 82, .28);
  background: #151a14;
}

body.crm-app .calendar-weekdays span {
  color: #d3c5ac;
}

body.crm-app .cash-card,
body.crm-app .cash-card.income,
body.crm-app .cash-card.expense,
body.crm-app .cash-card.net {
  color: var(--crm-ink);
  border-color: rgba(215, 170, 82, .34);
  background: #121914;
}

body.crm-app .cash-card small {
  color: #d8cbb5;
}

body.crm-app .cash-card.income strong {
  color: #91f0c8;
}

body.crm-app .cash-card.expense strong {
  color: #ffaaa2;
}

body.crm-app .cash-card.net strong {
  color: #ffe1a5;
}

body.crm-app .lead-toolbar,
body.crm-app .workorders-panel .toolbar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

body.crm-app .search-field,
body.crm-app .advertiser-search {
  border-color: rgba(215, 170, 82, .42);
  background: #080d0a;
}

body.crm-app .lead-toolbar select,
body.crm-app .toolbar select,
body.crm-app .check-filter {
  color: var(--crm-ink);
  border-color: rgba(215, 170, 82, .42);
  background: #080d0a;
}

body.crm-app .check-filter {
  color: #f1eadc;
}

body.crm-app .check-filter input {
  accent-color: var(--crm-green);
}

body.crm-app .lead-toolbar > strong,
body.crm-app .toolbar > strong {
  color: #d8cbb5;
}

body.crm-app .lead-stats article.hot,
body.crm-app .lead-stats article.followup,
body.crm-app .lead-stats article.won,
body.crm-app .workorder-stats article,
body.crm-app .workorder-stats article.due,
body.crm-app .workorder-stats article.completed {
  color: var(--crm-ink);
  border-color: rgba(215, 170, 82, .28);
  background: #121914;
}

body.crm-app .lead-stats article.hot {
  border-left-color: var(--crm-red);
}

body.crm-app .lead-stats article.followup {
  border-left-color: var(--crm-gold);
}

body.crm-app .lead-stats article.won,
body.crm-app .workorder-stats article.completed {
  border-left-color: var(--crm-green);
}

body.crm-app .pipeline-column {
  border-color: rgba(215, 170, 82, .34);
  background: #0b100d;
}

body.crm-app .pipeline-column-header {
  border-color: rgba(215, 170, 82, .28);
  background: #111812;
}

/* CRM final polish: remove the light tray behind the sales pipeline. */
body.crm-app .pipeline-board {
  border-top-color: rgba(215, 170, 82, .24);
  background: #07100c;
}

body.crm-app .pipeline-column {
  border-color: rgba(215, 170, 82, .34);
  background: #0b100d;
}

body.crm-app .pipeline-column > header {
  color: var(--crm-ink);
  border-bottom-color: rgba(215, 170, 82, .28);
  background: #111812;
}

body.crm-app .pipeline-column > header small {
  color: #c8bdab;
}

body.crm-app .pipeline-column > header b {
  color: #e9dcc6;
  background: rgba(255, 255, 255, .06);
}

/* CRM dialog readability: keep edit windows dark, calm, and legible. */
body.crm-app dialog {
  color: var(--crm-ink);
  border: 1px solid rgba(215, 170, 82, .42);
  background: #0b100d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .62);
}

body.crm-app dialog::backdrop {
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(4px);
}

body.crm-app dialog form,
body.crm-app .modal-card {
  color: var(--crm-ink);
  background: #0b100d;
}

body.crm-app .dialog-heading {
  color: var(--crm-ink);
  border-bottom: 1px solid rgba(215, 170, 82, .20);
  padding-bottom: 12px;
}

body.crm-app .dialog-heading p,
body.crm-app .form-grid label {
  color: #d0c2a9;
}

body.crm-app .form-grid input,
body.crm-app .form-grid textarea,
body.crm-app .form-grid select {
  color: #fff7e8;
  border-color: rgba(215, 170, 82, .42);
  background: #050907;
}

body.crm-app .form-grid input:focus,
body.crm-app .form-grid textarea:focus,
body.crm-app .form-grid select:focus {
  outline: none;
  border-color: #d7aa52;
  box-shadow: 0 0 0 3px rgba(215, 170, 82, .16);
}

body.crm-app .dialog-actions {
  border-top: 1px solid rgba(215, 170, 82, .20);
  padding-top: 16px;
}

body.crm-app .form-grid label.check-field {
  color: #f4ead8;
  border-color: rgba(215, 170, 82, .42);
  background: #050907;
}

body.crm-app .form-grid label.check-field input {
  width: auto;
  min-height: 0;
  accent-color: var(--crm-green);
}

body.crm-app .photo-upload {
  color: #d0c2a9;
  border-color: rgba(215, 170, 82, .42);
  background: #050907;
}

body.crm-app .photo-upload small {
  color: #bdb09d;
}

body.crm-app .photo-upload input[type="file"] {
  color: #fff7e8;
}

body.crm-app .photo-upload input[type="file"]::file-selector-button {
  color: #050907;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, #f0c96e, #b9842c);
  font-weight: 900;
  padding: 8px 12px;
  margin-right: 12px;
  cursor: pointer;
}

/* Mobile CRM overflow fix - 2026-07-04 */
html,
body,
body.crm-app,
body.crm-app .main {
  max-width: 100%;
  overflow-x: hidden;
}

body.crm-app .detail-drawer {
  max-width: 100vw;
  transform: translateX(100%);
}

body.crm-app .detail-drawer:not(.open) {
  visibility: hidden;
  pointer-events: none;
}

body.crm-app .detail-drawer.open {
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

@media (max-width: 760px) {
  body.crm-app .main {
    max-width: 100vw;
    padding-left: 14px;
    padding-right: 14px;
  }

  body.crm-app .main-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  body.crm-app .top-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.crm-app .top-actions .button.compact,
  body.crm-app .top-actions .staff-chip {
    width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  body.crm-app .staff-chip strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.crm-app .stats {
    grid-template-columns: 1fr;
  }

  body.crm-app .toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  body.crm-app .toolbar .search-field,
  body.crm-app .toolbar .add-location-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  body.crm-app .toolbar select,
  body.crm-app .toolbar .check-filter,
  body.crm-app .toolbar .add-location-button {
    min-width: 0;
  }
}