:root {
  --red: #e4002b; --red-600: #c50026; --red-050: #fff1f3;
  --ink: #0f172a; --muted: #64748b; --faint: #94a3b8;
  --line: #e6e8ec; --line-2: #eef1f4; --bg: #f6f7f9; --card: #ffffff;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
  --shadow-md: 0 6px 18px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.06);
  --shadow-lg: 0 14px 36px rgba(15,23,42,.18);
  --r-card: 14px; --r-ctrl: 10px; --r-chip: 999px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { margin: 0; height: 100%; }
body { color: var(--ink); background: var(--bg); }
/* Flex column, not fixed-row grid: children vary by mode (teaser banner appears
   for free-tier users) and the map/list body must always take the remainder.
   The bars are RIGID (flex:none) — only .body absorbs height pressure; without
   this, flexbox vertically crushes the filterbar/header on short windows. */
#app { display: flex; flex-direction: column; height: 100%; }
#app > .header, #app > .filterbar, #app > .teaser, #app > .foot { flex: none; }

/* Header */
.header { display: flex; align-items: center; gap: 12px; padding: 9px 16px; background: var(--card); border-bottom: 1px solid var(--line); z-index: 1100; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.brand .logo { flex: none; filter: drop-shadow(0 1px 1.5px rgba(228,0,43,.28)); }
.brand .word { font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.header .spacer { flex: 1; }
.hgrp { display: contents; }
.count { font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.count b { color: var(--ink); font-weight: 700; }
.header select { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background-color: var(--card); border: 1px solid var(--line); border-radius: var(--r-ctrl); padding: 8px 30px 8px 12px; min-height: 38px; max-width: 210px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; transition-property: border-color, box-shadow; transition-duration: 140ms; transition-timing-function: ease-out; }
.header select:hover { border-color: #c3cad4; }

/* Search */
.search { position: relative; flex: 0 1 380px; min-width: 170px; display: flex; align-items: center; }
.search .mag { position: absolute; left: 12px; color: var(--faint); pointer-events: none; }
.search input { width: 100%; font: inherit; font-size: 13.5px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-chip); padding: 8px 14px 8px 35px; min-height: 38px; transition-property: border-color, background-color, box-shadow; transition-duration: 140ms; transition-timing-function: ease-out; }
.search input::placeholder { color: var(--faint); }
.search input:hover { border-color: #cdd3db; }
.search input:focus { outline: none; background: var(--card); border-color: var(--red); box-shadow: 0 0 0 3px rgba(228,0,43,.12); }
.qr { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 5px; z-index: 1400; max-height: 330px; overflow-y: auto; }
.qi { display: block; width: 100%; text-align: left; font: inherit; background: none; border: 0; border-radius: 9px; padding: 8px 11px; cursor: pointer; }
.qi b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.qi span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; font-variant-numeric: tabular-nums; }
.qi:hover, .qi.on { background: var(--red-050); }
.qi.on b { color: var(--red-600); }
.qi.geo { border-top: 1px solid var(--line-2); border-radius: 0 0 9px 9px; }
.qi.geo b { color: var(--red-600); }

/* Filter bar */
.filterbar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: var(--card); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.filterbar::-webkit-scrollbar { display: none; }
/* Chips/selects must never flex-shrink into each other when space is tight —
   the bar scrolls horizontally instead (this was the "jammed filters" bug). */
.filterbar > *, .filterbar .types > * { flex: none; }
.fsep { display: none; }
.types { display: flex; gap: 7px; }
.types + .types { margin-left: 10px; }
.tchip { font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; color: #3f4a5a; background: var(--card); border: 1px solid var(--line); padding: 0 15px; min-height: 37px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-chip); transition-property: background-color, border-color, color, box-shadow, transform; transition-duration: 140ms; transition-timing-function: ease-out; }
.tchip:hover { border-color: #c3cad4; background: #fafbfc; }
.tchip:active { transform: scale(.97); }
.tchip.on { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 1px 3px rgba(228,0,43,.30); }
.heartchip .savedn { background: #fff; color: var(--red-600); font-size: 10.5px; font-weight: 800; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.heartchip:not(.on) .savedn { background: var(--red-050); }
/* Selects styled as chips: native arrow replaced with a consistent chevron. */
.pricesel { font: inherit; font-size: 13px; font-weight: 600; color: #3f4a5a; background-color: var(--card); border: 1px solid var(--line); border-radius: var(--r-chip); padding: 0 32px 0 15px; min-height: 37px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; transition-property: border-color; transition-duration: 140ms; }
.pricesel:hover { border-color: #c3cad4; }
.filterbar .types + .pricesel, .filterbar .pricesel + .pricesel { margin-left: 10px; }
/* Fixed widths: option text changes (e.g. "Newest" vs "Price high–low") must
   never resize the selects and shuffle the whole bar. */
#maxPrice { width: 142px; }
#sortBy { width: 158px; }
/* Quiet link-style button (auth modal "Forgot password?" etc.) */
.pw-link { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 6px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; transition-property: color; transition-duration: 140ms; }
.pw-link:hover { color: var(--ink); }

/* Body: list | map */
.body { position: relative; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(340px, 400px) 1fr; }
.list { overflow-y: auto; background: var(--bg); border-right: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.map { position: relative; }
#map { position: absolute; inset: 0; background: #e7edf2; }
.leaflet-tile-pane { filter: saturate(.78) contrast(1.02); }

/* Map pins (price pills) + clusters */
.pinwrap { background: none; border: none; }
.pin { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 4px; background: #fff; color: var(--ink); border: 1px solid rgba(15,23,42,.16); border-radius: 999px; padding: 4px 10px; font-size: 11.5px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 1px 4px rgba(15,23,42,.28); cursor: pointer; transition-property: transform, box-shadow, background-color, color; transition-duration: 120ms; transition-timing-function: ease-out; }
.pin:hover, .pin.hov { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 4px 12px rgba(15,23,42,.32); }
.pin.seen { background: #eef1f4; color: #52606f; border-color: rgba(15,23,42,.08); }
.pin.sel { background: var(--red); color: #fff; border-color: var(--red-600); box-shadow: 0 4px 14px rgba(228,0,43,.45); }
.pin .ph { display: inline-flex; color: var(--red); }
.pin .ph svg { width: 11px; height: 11px; }
.pin.sel .ph { color: #fff; }
.clus { position: absolute; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: #fff; border: 2.5px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 2px 10px rgba(228,0,43,.42); cursor: pointer; transition-property: transform, box-shadow; transition-duration: 120ms; transition-timing-function: ease-out; }
.clus:hover { transform: translate(-50%, -50%) scale(1.08); }

/* Card */
.card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 13px 15px; cursor: pointer; scroll-margin: 12px; box-shadow: var(--shadow-sm); transition-property: transform, box-shadow, border-color; transition-duration: 150ms; transition-timing-function: ease-out; }
.card:hover, .card.hl { box-shadow: var(--shadow-md); border-color: #f3c2cc; transform: translateY(-1px); }
.card:active { transform: translateY(0); }
.card.sel { border-color: var(--red); box-shadow: 0 0 0 2px rgba(228,0,43,.20), var(--shadow-md); }
.card .heart { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--card); color: var(--faint); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; transition-property: color, border-color, transform, background-color; transition-duration: 140ms; transition-timing-function: ease-out; }
.card .heart:hover { color: var(--red); border-color: #f3c2cc; }
.card .heart:active { transform: scale(.92); }
.card .heart.on { color: var(--red); background: var(--red-050); border-color: #f3c2cc; }
.row1 { display: flex; align-items: center; gap: 7px; margin-right: 44px; }
.badge { display: inline-flex; align-items: center; gap: 5px; background: var(--red-050); color: var(--red-600); font-size: 10.5px; font-weight: 800; padding: 3px 9px 3px 8px; border-radius: var(--r-chip); text-transform: uppercase; letter-spacing: .04em; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.datechip { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.seenchip { font-size: 10px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.card .price { margin-top: 9px; font-weight: 800; font-size: 16.5px; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.card .price .est { font-weight: 600; font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; padding-left: 3px; }
.card .price .ca { font-weight: 650; font-size: 13.5px; color: var(--muted); }
.card .addr { font-weight: 700; color: var(--ink); margin-top: 4px; font-size: 14.5px; line-height: 1.3; text-wrap: balance; }
.card .sub { color: var(--muted); font-size: 12.5px; margin-top: 1px; text-wrap: pretty; }
.card .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { background: #f1f3f6; color: #475569; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 8px; }
.card .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--muted); }
.card .foot > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card a.search { color: var(--red); font-weight: 700; text-decoration: none; font-size: 12px; white-space: nowrap; }
.card a.search:hover { color: var(--red-600); text-decoration: underline; text-underline-offset: 2px; }
.empty { color: var(--muted); font-size: 14px; text-align: center; padding: 44px 18px; line-height: 1.6; text-wrap: pretty; }
.morecards { color: var(--muted); font-size: 12.5px; text-align: center; padding: 14px 12px 18px; line-height: 1.5; text-wrap: pretty; }
.linkbtn { font: inherit; font-size: inherit; color: var(--red); background: none; border: 0; padding: 0; cursor: pointer; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.linkbtn:hover { color: var(--red-600); }

/* Leaflet popup */
.leaflet-popup-content-wrapper { border-radius: var(--r-card); box-shadow: var(--shadow-lg); }
.leaflet-popup-content { margin: 14px 16px; width: 250px !important; font-family: inherit; }
.pp .pp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ppdate { font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.ppprice { margin-top: 9px; font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ppprice .gmut { font-weight: 600; font-size: 12px; color: var(--muted); }
.pp .b { font-weight: 700; color: var(--ink); font-size: 14.5px; line-height: 1.3; margin-top: 3px; text-wrap: balance; }
.pp .s { color: var(--muted); font-size: 12px; margin-top: 1px; }
.pp .m { margin-top: 8px; font-size: 12.5px; color: #334155; line-height: 1.5; }
.ppact { display: flex; gap: 6px; margin-top: 12px; }
.ppbtn { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 13px; font-weight: 700; border-radius: var(--r-ctrl); min-height: 38px; cursor: pointer; text-decoration: none; transition-property: background-color, color, border-color, transform; transition-duration: 140ms; transition-timing-function: ease-out; }
.ppbtn:active { transform: scale(.96); }
.ppbtn.pri { flex: 1; background: var(--red); color: #fff; border: 0; padding: 0 12px; }
.ppbtn.pri:hover { background: var(--red-600); }
.ppbtn.ghost { width: 38px; background: var(--card); color: var(--muted); border: 1px solid var(--line); }
.ppbtn.ghost:hover { color: var(--red); border-color: #f3c2cc; }
.ppbtn.ghost.on { color: var(--red); background: var(--red-050); border-color: #f3c2cc; }

/* About dialog */
dialog#about { border: 0; border-radius: 16px; padding: 20px 22px 22px; max-width: 540px; width: calc(100vw - 40px); box-shadow: var(--shadow-lg); color: var(--ink); }
dialog#about::backdrop { background: rgba(15,23,42,.45); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
dialog#about h2 { margin: 0; font-size: 19px; letter-spacing: -.01em; }
dialog#about h3 { margin: 18px 0 4px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
dialog#about p, dialog#about li { font-size: 13.5px; line-height: 1.6; color: #334155; text-wrap: pretty; }
dialog#about p { margin: 6px 0; }
dialog#about ul { margin: 6px 0; padding-left: 19px; }
dialog#about .dlg-disc { color: var(--muted); font-size: 12px; border-top: 1px solid var(--line-2); padding-top: 12px; margin-top: 14px; }
.dlg-x { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--muted); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; transition-property: color, border-color; transition-duration: 140ms; }
.dlg-x:hover { color: var(--ink); border-color: #cdd3db; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 8px); background: #111827; color: #f8fafc; font-size: 13px; font-weight: 600; padding: 10px 17px; border-radius: 999px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; z-index: 2000; transition-property: opacity, transform; transition-duration: 180ms; transition-timing-function: ease-out; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Footer */
.foot { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 7px 16px; background: var(--card); border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.foot b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.foot a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.foot a:hover { color: var(--ink); }
.foot .sep { color: var(--faint); }
.foot .foot-spacer { flex: 1; }
.foot .disc { color: var(--faint); }
.foot .linkbtn { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.foot .linkbtn:hover { color: var(--ink); }
@media (max-width: 720px) { .foot .disc { display: none; } }

/* Accessibility */
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }

/* ============ Landing (gated mode, signed out) ============ */
#landing { min-height: 100%; overflow-y: auto; background: var(--card); }
.land { max-width: 560px; margin: 0 auto; padding: 64px 26px 48px; text-align: center; }
.land-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.land-brand svg { filter: drop-shadow(0 2px 3px rgba(228,0,43,.25)); }
.land-word { font-weight: 800; font-size: 25px; letter-spacing: -.02em; }
.land h1 { font-size: 30px; line-height: 1.18; letter-spacing: -.02em; margin: 20px 0 10px; text-wrap: balance; }
.land-sub { color: var(--muted); font-size: 15px; line-height: 1.6; text-wrap: pretty; margin: 0 0 18px; }
.land-points { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 9px; text-align: left; }
.land-points li { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 11px 15px; font-size: 13.5px; color: #334155; line-height: 1.5; }
.land-points b { color: var(--ink); }
.land-price { display: flex; gap: 10px; justify-content: center; margin-bottom: 16px; }
.land-plan { flex: 1; max-width: 200px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; text-align: center; cursor: pointer; transition-property: border-color, box-shadow, transform; transition-duration: 140ms; transition-timing-function: ease-out; }
.land-plan:active { transform: scale(.98); }
.land-plan.on { border-color: var(--red); box-shadow: 0 0 0 3px rgba(228,0,43,.10); }
.land-plan b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.land-plan span { display: block; font-size: 11px; color: var(--red-600); font-weight: 600; margin-top: 2px; }
.land-cta { display: block; width: 100%; max-width: 420px; margin: 0 auto; background: var(--red); color: #fff; border: 0; border-radius: 13px; min-height: 50px; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(228,0,43,.33); transition-property: background-color, transform; transition-duration: 140ms; }
.land-cta:hover { background: var(--red-600); }
.land-cta:active { transform: scale(.985); }
.land-fine { font-size: 12.5px; color: var(--muted); margin: 12px 0 4px; }
.land-legal { font-size: 11.5px; color: var(--faint); margin-top: 18px; }
.land-legal a { color: var(--faint); }

/* ============ Teaser banner (free tier) ============ */
.teaser { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: var(--red-050); border-bottom: 1px solid #f3c2cc; font-size: 12.5px; color: var(--red-600); }
.teaser b { font-variant-numeric: tabular-nums; }
.teaser-btn { font: inherit; font-size: 12.5px; font-weight: 800; background: var(--red); color: #fff; border: 0; border-radius: 999px; padding: 7px 15px; cursor: pointer; transition-property: background-color, transform; transition-duration: 140ms; }
.teaser-btn:hover { background: var(--red-600); }
.teaser-btn:active { transform: scale(.97); }

/* ============ Account menu ============ */
.acct { position: relative; }
.acctmenu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; min-width: 230px; z-index: 1500; }
.acct-email { font-size: 12.5px; font-weight: 700; color: var(--ink); padding: 8px 11px 1px; overflow: hidden; text-overflow: ellipsis; }
.acct-status { font-size: 11.5px; color: var(--muted); padding: 0 11px 8px; border-bottom: 1px solid var(--line-2); margin-bottom: 5px; }
.acct-item { display: block; width: 100%; text-align: left; font: inherit; font-size: 13px; font-weight: 600; color: #334155; background: none; border: 0; border-radius: 8px; padding: 9px 11px; cursor: pointer; }
.acct-item:hover { background: var(--bg); color: var(--ink); }

/* ============ Modals (auth + subscribe) ============ */
.pmodal { position: fixed; inset: 0; z-index: 1900; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pm-scrim { position: absolute; inset: 0; background: rgba(15,23,42,0); transition: background-color 180ms ease-out; }
.pmodal.open .pm-scrim { background: rgba(15,23,42,.5); }
.pm-card { position: relative; background: var(--card); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 24px 24px 22px; width: 100%; max-width: 400px; opacity: 0; transform: translateY(10px) scale(.98); transition-property: opacity, transform; transition-duration: 180ms; transition-timing-function: ease-out; }
.pmodal.open .pm-card { opacity: 1; transform: translateY(0) scale(1); }
.pm-x { position: absolute; top: 12px; right: 12px; }
.pm-card.wide { max-width: 560px; }
.savedlist { display: flex; flex-direction: column; gap: 10px; max-height: 62vh; overflow-y: auto; margin-top: 4px; padding: 2px; scrollbar-width: thin; }
.pm-card h2 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.01em; }
.pm-sub { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0 0 14px; text-wrap: pretty; }
.pm-input { display: block; width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; margin-bottom: 10px; }
.pm-input:focus { outline: none; background: var(--card); border-color: var(--red); box-shadow: 0 0 0 3px rgba(228,0,43,.12); }
.pm-input.otp { text-align: center; font-size: 22px; font-weight: 800; letter-spacing: .35em; font-variant-numeric: tabular-nums; }
.pm-cta { display: block; width: 100%; background: var(--red); color: #fff; border: 0; border-radius: 12px; min-height: 47px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; transition-property: background-color, transform; transition-duration: 140ms; }
.pm-cta:hover { background: var(--red-600); }
.pm-cta:active { transform: scale(.985); }
.pm-cta[disabled] { opacity: .7; }
.pm-fine { font-size: 11.5px; color: var(--muted); line-height: 1.5; text-align: center; margin: 10px 0 0; text-wrap: pretty; }
.pm-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.plan { position: relative; text-align: left; background: var(--card); border: 1.6px solid var(--line); border-radius: 13px; padding: 13px 12px 11px; font: inherit; cursor: pointer; transition-property: border-color, box-shadow, transform; transition-duration: 140ms; }
.plan:active { transform: scale(.98); }
.plan.on { border-color: var(--red); box-shadow: 0 0 0 3px rgba(228,0,43,.12); }
.plan-badge { position: absolute; top: -9px; left: 10px; background: var(--red); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.plan-name { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.plan-price { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.plan-price small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.plan-per { display: block; font-size: 10.5px; font-weight: 600; color: var(--red-600); margin-top: 2px; }
.authtabs { display: flex; gap: 5px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin-bottom: 12px; }
.authtab { flex: 1; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--muted); background: none; border: 0; border-radius: 9px; min-height: 38px; cursor: pointer; transition-property: background-color, color; transition-duration: 140ms; }
.authtab.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.autherr { background: var(--red-050); color: var(--red-600); font-size: 12.5px; font-weight: 600; border-radius: 9px; padding: 9px 12px; margin-bottom: 10px; line-height: 1.45; text-wrap: pretty; }
.autherr.ok { background: #ecfdf3; color: #157347; }
.authaux { display: flex; justify-content: center; margin-top: 10px; }
.pm-google { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 46px; margin-top: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: 14px; font-weight: 700; color: #334155; cursor: pointer; transition-property: border-color, transform; transition-duration: 140ms; }
.pm-google:active { transform: scale(.985); }

/* Mobile: map/list toggle + stacked header */
.toggle { display: none; border: 1px solid var(--line); border-radius: var(--r-chip); overflow: hidden; flex: none; }
.toggle button { border: 0; background: var(--card); padding: 0 15px; min-height: 38px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.toggle button.on { background: var(--red); color: #fff; }
@media (max-width: 900px) {
  .header { display: grid; grid-template-columns: 1fr auto; row-gap: 8px; padding: 9px 12px; }
  .brand { grid-row: 1; grid-column: 1; }
  .toggle { display: inline-flex; grid-row: 1; grid-column: 2; justify-self: end; }
  .search { grid-row: 2; grid-column: 1 / -1; flex-basis: auto; max-width: none; }
  .header .spacer { display: none; }
  .hgrp { display: flex; grid-row: 3; grid-column: 1 / -1; align-items: center; gap: 10px; }
  .hgrp .count { flex: 1; }
  .hgrp select { max-width: 60%; }
  .body { grid-template-columns: 1fr; }
  .list, .map { grid-column: 1; grid-row: 1; }
  .map { display: none; }
  #app.show-map .map { display: block; }
  #app.show-map .list { display: none; }
  .filterbar { padding: 8px 12px; }
}