/* ============================================================
   Rentals dashboard — scoped styles on top of site.css tokens
   ============================================================ */

/* wider than the site default so the table fits without a scrollbar */
#main.container { max-width: 1440px; }

.country-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 1rem;
}
.country-legend {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.country-combo { position: relative; display: inline-flex; }
.country-combo input[type="text"] {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 34px 8px 11px;
  min-width: 230px;
}
.country-combo input[type="text"]:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.country-toggle {
  position: absolute;
  right: 1px; top: 1px; bottom: 1px;
  width: 30px;
  border: none;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 0.7rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.country-toggle:hover { background: var(--line); color: var(--ink); }
.country-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  z-index: 20;
}
.country-list li {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--ink);
  white-space: nowrap;
}
.country-list li:hover { background: var(--line); }
.country-list li.active { font-weight: 700; color: var(--gold); }
.country-list li.empty { color: var(--ink-3); cursor: default; font-style: italic; }
.country-list li.empty:hover { background: none; }

/* multi-select dropdown (City, etc.) — sits inline next to Country */
.msc { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.msc-legend {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.msc-toggle {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  min-width: 130px;
  text-align: left;
  cursor: pointer;
}
.msc-toggle:hover { border-color: var(--gold); }
.msc-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 210px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  z-index: 20;
}
.msc-search {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  margin-bottom: 6px;
}
.msc-search:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.msc-items {
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.msc-items li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--ink);
  white-space: nowrap;
}
.msc-items li:hover { background: var(--line); }
.msc-items li.on { font-weight: 600; }
.msc-items li input[type="checkbox"] { pointer-events: none; margin: 0; }
.msc-items li.empty { color: var(--ink-3); cursor: default; font-style: italic; }
.msc-items li.empty:hover { background: none; }
.msc-quick {
  display: flex;
  gap: 6px;
  padding: 0 2px 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.msc-quick button {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
}
.msc-quick button:hover { text-decoration: underline; }
.country-note {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-3);
}

#filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: flex-end;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 1rem;
}

.f-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
}
.f-legend {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0;
}
.f-group .f-val {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold-ink);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}

#filters input[type="text"],
#filters input[type="number"],
#filters select {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
}
#filters input[type="number"] { width: 84px; }
#filters input[type="text"] { min-width: 190px; }
#filters input[type="range"] { width: 190px; accent-color: var(--gold); }
#filters input[type="range"]:disabled { opacity: 0.4; }

.f-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  max-width: 320px;
}
.f-checks label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.f-checks input { accent-color: var(--gold); }

.f-inline { display: flex; gap: 6px; align-items: center; }
#filters [hidden], #country-pick [hidden] { display: none !important; }
.f-pfx, .f-sfx {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold-ink);
}
#filters input[type="number"][name="maxPriceNum"] { width: 74px; }

#filters button {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  cursor: pointer;
}
#filters button:hover { border-color: var(--gold); color: var(--gold-ink); background: var(--bg-2); }

#geo-status { font-size: 0.78rem; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
#geo-status.err { color: #b3261e; }

#meta {
  font-size: 0.85rem;
  color: var(--ink-3);
  margin-bottom: 0.75rem;
}
#meta.err { color: #b3261e; font-weight: 600; }

.grid-wrap {
  overflow: auto;
  max-height: 70vh;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overscroll-behavior: contain;
}
/* the page's shared .container class (assets/site.css) pads every page by
   2rem a side — reclaim that just for the table, the one element on this
   page wide enough to need it. Matches site.css's own >820px breakpoint:
   below that the container's padding drops to 1.5rem for the mobile nav,
   where a 14-column table needs its horizontal scroll anyway regardless
   of a few reclaimed px, so this is left alone there. */
@media (min-width: 821px) {
  .grid-wrap { margin-left: -2rem; margin-right: -2rem; }
}

.data-grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88rem;
}
.data-grid th, .data-grid td {
  padding: 7px 7px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-grid th {
  position: sticky;
  top: 0;
  background: var(--bg-2);
  color: var(--ink-2);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.data-grid th:hover { color: var(--gold-ink); }
.data-grid th .caret { color: var(--ink-3); font-size: 0.7rem; margin-left: 3px; }
.data-grid th[aria-sort="ascending"] .caret::after { content: "▲"; }
.data-grid th[aria-sort="descending"] .caret::after { content: "▼"; }
.data-grid th.num, .data-grid td.num { text-align: right; font-variant-numeric: tabular-nums; }

.data-grid tbody tr:nth-child(even) { background: var(--bg-2); }
.data-grid tbody tr:hover { background: var(--gold-bg); }
.data-grid td small { display: block; color: var(--ink-3); font-size: 0.78rem; }
.data-grid td small.price-down { color: #1a7f37; font-weight: 600; }
.data-grid td small.price-up { color: #c0392b; font-weight: 600; }
.data-grid td small.price-usd { font-style: italic; }
.badge-new, .badge-off, .badge-back {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 1px;
  white-space: nowrap;
}
.badge-new { background: #1a7f37; }
.badge-off { background: #b3261e; }
.badge-back { background: #1f6feb; }

.data-grid tbody tr { cursor: pointer; }
.data-grid tbody tr.row-off td:not(.fav) { opacity: 0.6; }
/* every row here is off-market by definition — dimming all of them the way
   the main table dims a stray OFF row among live ones would just gray out
   the whole tab for no signal. */
#archive-grid tbody tr.row-off td:not(.fav) { opacity: 1; }
/* price outlier (server-flagged, see daftwatch.outliers): greyed and hatched
   so it reads as "don't trust this number" — deliberately NOT the same look
   as .row-off (plain dim + red OFF badge), which means "no longer available".
   Still fully legible: the point is to let you judge it, not hide it. */
.data-grid tbody tr.row-outlier td:not(.fav) {
  opacity: 0.6;
  filter: grayscale(1);
  background-image: repeating-linear-gradient(135deg, transparent 0 7px, var(--line) 7px 8px);
}
.data-grid td small.price-outlier { color: #b3261e; font-weight: 700; font-style: normal; }
.compare-excluded { margin: 0 0 1.4rem; }
.compare-excluded td.num, .compare-excluded th.num { text-align: right; }
.data-grid tr.timeline-row { cursor: default; }
.data-grid tr.timeline-row td { background: var(--bg-2); padding: 10px 14px; }
.timeline { font-size: 0.82rem; }
.timeline .tl-head { color: var(--ink-3); margin-bottom: 4px; font-style: italic; }
.timeline .tl-item { padding: 2px 0; color: var(--ink-2); }
.timeline .tl-when { color: var(--ink-3); font-family: var(--font-mono); font-size: 0.76rem; margin-right: 4px; }
.timeline .tl-price-drop { color: #1a7f37; }
.timeline .tl-price-up { color: #c0392b; }
.timeline .tl-gone { color: #b3261e; }
.timeline .tl-back { color: #1f6feb; font-weight: 600; }
.data-grid td.wrap { white-space: normal; max-width: 200px; }
.data-grid .empty { text-align: center; color: var(--ink-3); padding: 28px; font-style: italic; }

.data-grid th[data-key="fav"], .data-grid th[data-key="note"], .data-grid td.fav { text-align: center; width: 1%; padding-left: 6px; padding-right: 6px; }
.heart {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 2px 4px;
  color: var(--ink-3);
  transition: transform 0.08s ease;
}
.heart:hover { transform: scale(1.2); color: var(--gold-ink); }
.heart.on { color: #e0245e; }
.note-btn {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
  color: var(--ink-3);
  transition: transform 0.08s ease;
}
.note-btn:hover { transform: scale(1.2); color: var(--gold-ink); }
.note-btn.on { color: var(--gold-ink); }
.f-fav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  white-space: nowrap;
}
.f-fav input { accent-color: #e0245e; }

/* ---- view toggle + map ---- */
#viewbar { margin: 0 0 0.75rem; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.viewbar-link {
  font: inherit; font-size: 0.82rem; font-weight: 600;
  background: none; border: 0; color: var(--gold-ink); cursor: pointer; padding: 4px 0;
}
.viewbar-link:hover { text-decoration: underline; }
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.view-toggle button {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 14px;
  border: 0;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}
.view-toggle button + button { border-left: 1px solid var(--line); }
.view-toggle button[aria-pressed="true"] { background: var(--gold); color: #1a1205; }

#map {
  height: 68vh;
  min-height: 360px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.market-wrap { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--bg-2); }
.market-controls { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 12px; }
.market-chart .mc-guide { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.market-chart .mc-hit { cursor: crosshair; }
.market-tip {
  position: absolute; z-index: 5; pointer-events: none;
  min-width: 190px; max-width: 320px; padding: 8px 10px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); font-size: 0.78rem;
}
.market-tip .tip-date { font-family: var(--font-mono); color: var(--ink-3); margin-bottom: 5px; }
.market-tip .tip-row { display: grid; grid-template-columns: 10px 1fr auto; column-gap: 7px; align-items: baseline; padding: 1px 0; }
.market-tip .tip-row i { width: 10px; height: 3px; border-radius: 2px; align-self: center; }
.market-tip .tip-band { grid-column: 2 / 4; color: var(--ink-3); font-size: 0.72rem; margin-bottom: 3px; }
.market-tip .tip-none { color: var(--ink-3); font-style: italic; }
.market-chart { width: 100%; height: auto; display: block; }
.market-chart .mc-grid { stroke: var(--line); stroke-width: 1; }
.market-chart .mc-axis { fill: var(--ink-3); font-size: 11px; font-family: var(--font-mono); }
.market-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 0.82rem; color: var(--ink-2); }
.market-legend span { display: inline-flex; align-items: center; gap: 6px; }
.market-legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.market-note { font-size: 0.8rem; color: var(--ink-3); margin-top: 8px; }

.compare-wrap { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--bg-2); }
.compare-headline { margin-bottom: 14px; }
.compare-stat { font-family: var(--font-serif); font-size: 2.4rem; font-weight: 600; color: var(--gold-ink); line-height: 1.1; }
.compare-stat-label { font-size: 0.92rem; color: var(--ink-2); max-width: 46ch; margin-top: 4px; }
.compare-meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-3); margin: 4px 0 18px; }
/* the reference level of this table is not the pooled one — say so loudly,
   the percentages are against a different baseline */
.compare-warn { color: var(--gold); border-left: 2px solid var(--gold); padding-left: 9px; }
.compare-wrap h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); margin: 22px 0 8px; }
.compare-table { border-collapse: collapse; font-size: 0.88rem; }
.compare-table td, .compare-table th { padding: 5px 14px 5px 0; text-align: left; border-bottom: 1px solid var(--line); }
.compare-table th { color: var(--ink-3); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; }
.compare-table td.num, .compare-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.compare-caveats { margin: 0; padding-left: 20px; font-size: 0.82rem; color: var(--ink-2); }
.compare-caveats li { margin-bottom: 6px; }
.compare-side-by-side { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.compare-col { flex: 1 1 280px; min-width: 0; }
.compare-col-wide { flex: 2 1 460px; }
.ptype-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin: 2px 0 8px; }
.ptype-toggle button {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border: 0;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}
.ptype-toggle button + button { border-left: 1px solid var(--line); }
.ptype-toggle button[aria-pressed="true"] { background: var(--gold); color: #1a1205; }
.compare-legend { display: flex; gap: 16px; margin: 4px 0 4px; font-size: 0.8rem; color: var(--ink-2); }
.compare-legend span { display: inline-flex; align-items: center; gap: 6px; }
.compare-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.compare-range-table td.range-cell { min-width: 160px; }
/* 90px, not the Compare tab's 160px: this bar only needs to show a shape
   at a glance in a dense row, and every extra px here pushes the whole
   table closer to a horizontal scrollbar. */
.data-grid td.range-cell { min-width: 90px; padding-top: 0; padding-bottom: 0; }
.range-track { position: relative; height: 14px; background: var(--line); border-radius: 3px; overflow: hidden; }
.range-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.range-median { position: absolute; top: -1px; bottom: -1px; width: 2px; }
/* this row's own price within its city's range — deliberately louder than
   the median tick (wider, always the same colour) so it reads as "you are
   here" rather than another statistic */
.range-mine { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--gold); box-shadow: 0 0 0 1px var(--bg); }
.map-pin-wrap svg { display: block; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.4)); }
.map-modes a {
  font-size: 15px;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
}
.map-modes a.active { background: var(--gold); }
.sat-icon { font-size: 0.8em; opacity: 0.75; }
.data-grid td a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); }
.data-grid td a:hover { text-decoration-color: var(--gold); color: var(--gold-ink); }
.map-legend {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  font-size: 0.72rem;
  color: var(--ink-2);
  line-height: 1.6;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.map-legend span { display: flex; align-items: center; gap: 5px; }
.map-legend svg { vertical-align: middle; }
.map-legend .lg-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #fff;
}
.map-legend .lg-price .lg-dot { margin-right: -2px; }
.map-pop { font-family: var(--font-sans); min-width: 180px; }
.map-pop-price { font-weight: 700; font-size: 0.95rem; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.map-pop-meta { font-size: 0.8rem; color: var(--ink-2); margin-top: 3px; }
.map-pop .price-down { color: #1a7f37; font-weight: 600; font-size: 0.8rem; margin-top: 2px; }
.map-pop .price-up { color: #c0392b; font-weight: 600; font-size: 0.8rem; margin-top: 2px; }
.map-pop-note {
  font-size: 0.82rem;
  color: var(--ink);
  background: var(--bg-2);
  border-left: 2px solid var(--gold);
  padding: 4px 8px;
  margin-top: 6px;
  white-space: pre-wrap;
}
.map-pop-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.map-pop-actions a { font-size: 0.82rem; font-weight: 600; margin-left: auto; }

/* Dark mode: invert the OSM raster tiles (a common, key-free way to get a
   dark basemap). Pins and popups live outside the tile pane, so they keep
   their real colours. */
:root[data-theme="dark"] #map .leaflet-tile {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(1.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #map .leaflet-tile {
    filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(1.05);
  }
}
/* Leaflet popup/controls follow the site theme */
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip,
:root[data-theme="dark"] .leaflet-bar a {
  background: var(--surface);
  color: var(--ink);
}
:root[data-theme="dark"] .leaflet-bar a { border-color: var(--line); }

@media (max-width: 820px) {
  #filters input[type="range"] { width: 150px; }
  #filters input[type="text"] { min-width: 150px; }
  #map { height: 60vh; }
}

/* ---- contact ---- */
.contact-cell { white-space: nowrap; }
.contact-cell a, .contact-cell button {
  font-size: 1rem; text-decoration: none; padding: 2px 5px; border: 0;
  background: none; cursor: pointer; border-radius: 6px; line-height: 1;
}
.contact-cell .c-wa:hover, .contact-cell .c-msg:hover { background: var(--bg-2); }
.contact-cell .c-done {
  font-size: 0.72rem; font-weight: 700; color: var(--go, #1f6feb);
  background: var(--go-soft, #e2efe4); padding: 3px 7px;
}
.data-grid th[data-key="contact"] { text-align: center; }

#contact-dlg {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); max-width: 460px; width: 92vw;
  padding: 0; box-shadow: 0 20px 60px -12px rgba(0,0,0,.3);
  inset: 0; margin: auto; max-height: 88vh; overflow: auto;
}
#contact-dlg::backdrop { background: rgba(0,0,0,.4); }
.contact-dlg { padding: 22px 22px 20px; }
.contact-dlg h2 { font-family: var(--font-serif, Georgia); font-size: 1.3rem; margin: 0 0 4px; }
.contact-dlg h3 { font-size: 0.95rem; margin: 20px 0 4px; }
.cd-sub { font-size: 0.85rem; color: var(--ink-2); margin: 0 0 12px; }
.cd-hint { display: block; font-size: 0.74rem; color: var(--ink-3); margin-top: 4px; font-family: var(--font-mono); }
.cd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.cd-grid label, .cd-tpl { display: flex; flex-direction: column; gap: 3px; font-size: 0.74rem; font-weight: 600; color: var(--ink-3); }
.cd-tpl { margin-top: 12px; }
.contact-dlg input, .contact-dlg textarea {
  font: inherit; font-size: 0.88rem; color: var(--ink); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; width: 100%;
}
.contact-dlg textarea { resize: vertical; line-height: 1.45; }
.cd-bm { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.cd-bm-link {
  display: inline-block; padding: 8px 14px; border-radius: 999px;
  background: var(--gold); color: #1a1205; font-weight: 700; font-size: 0.85rem;
  text-decoration: none; cursor: grab;
}
.btn-sm {
  font: inherit; font-size: 0.8rem; font-weight: 600; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--ink); cursor: pointer;
}
.cd-close { margin-top: 18px; width: 100%; padding: 9px; }