:root{
  --bg:#f4f6f9; --card:#fff; --ink:#15202b; --muted:#6b7280; --line:#e2e8f0;
  --brand:#0b3d7a; --brand2:#1d6fd1; --accent:#c0261f;
  --green:#15803d; --greenbg:#dcfce7; --orange:#b45309; --orangebg:#fef3c7;
  --red:#b91c1c; --redbg:#fee2e2; --gray:#6b7280; --graybg:#e5e7eb; --white:#4b5563; --whitebg:#f1f5f9;
  --shadow:0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.06);
  --radius:14px;
}
[data-dark="1"]{
  --bg:#0b1220; --card:#131c2e; --ink:#e6edf7; --muted:#8fa3c0; --line:#22304a;
  --greenbg:#14331f; --orangebg:#3a2b12; --redbg:#3b1414; --graybg:#1e2634; --whitebg:#18202e;
  --shadow:0 1px 3px rgba(0,0,0,.5);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%; margin:0}
body{background:var(--bg); color:var(--ink); font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.hidden{display:none !important}
button{cursor:pointer; font:inherit; border:none; background:none; color:inherit}
a{color:var(--brand2)}
h1,h2,h3{margin:.2em 0 0}
h2{font-size:1.15rem} h3{font-size:.95rem; margin-top:1.1em; color:var(--muted)}

/* ---------- auth ---------- */
.auth-view{min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px; background:linear-gradient(160deg,var(--brand) 0%,#0a2b57 60%)}
.auth-card{background:var(--card); padding:26px; border-radius:20px; width:100%; max-width:380px; box-shadow:0 10px 40px rgba(0,0,0,.35)}
.auth-logo{font-size:2.6rem; text-align:center}
.auth-view h1{color:var(--ink); text-align:center; font-size:1.2rem; margin-top:6px}
.auth-sub{text-align:center; color:var(--muted); font-size:.85rem; margin:2px 0 16px}
.tabs-mini{display:flex; gap:6px; background:var(--bg); padding:4px; border-radius:10px; margin-bottom:16px}
.mini-tab{flex:1; padding:8px; border-radius:8px; color:var(--muted); font-weight:600}
.mini-tab.active{background:var(--card); color:var(--brand); box-shadow:var(--shadow)}
.auth-card label{display:block; margin-bottom:12px; font-size:.8rem; color:var(--muted); font-weight:600}
.auth-card input, .search, select{width:100%; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); margin-top:5px; font-size:1rem}
.btn-primary{display:inline-block; width:100%; padding:13px; margin-top:6px; border-radius:10px; background:var(--brand); color:#fff; font-weight:700; text-align:center; text-decoration:none}
.error{background:var(--redbg); color:var(--red); padding:10px 12px; border-radius:10px; margin-top:12px; font-size:.85rem}

/* ---------- app layout ---------- */
.app{max-width:760px; margin:0 auto; padding:0 14px 84px}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:14px 0; position:sticky; top:0; background:var(--bg); z-index:20}
.brand{font-size:1.05rem; color:var(--brand)}
.topbar-right{display:flex; align-items:center; gap:8px}
.whoami{font-size:.8rem; color:var(--muted); font-weight:600}
.icon-btn{font-size:1.15rem; padding:6px 8px; border-radius:8px; background:var(--card); box-shadow:var(--shadow)}
.view-title{margin-top:2px}

/* chips */
.chip-row{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0}
.chip{flex:1; min-width:86px; padding:9px 10px; border-radius:12px; font-size:.8rem; font-weight:700; text-align:center; box-shadow:var(--shadow); color:var(--ink)}
.chip b{display:block; font-size:1.25rem}

/* cards */
.card-list{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.card{background:var(--card); border-radius:var(--radius); padding:12px 14px; box-shadow:var(--shadow); display:flex; gap:10px; align-items:flex-start; border-left:5px solid var(--line)}
.card .body{flex:1; min-width:0}
.card .addr{font-weight:700; font-size:.92rem}
.card .meta{font-size:.78rem; color:var(--muted)}
.card .tag{font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:20px; background:var(--graybg); color:var(--muted); display:inline-block; margin-top:6px}
.star{font-size:1.35rem; line-height:1; color:var(--muted); flex-shrink:0}
.star.on{color:#eab308}
.star.on.filled{color:#f59e0b}
.card.green{border-left-color:var(--greenbg)}
.card.orange{border-left-color:var(--orange)}
.card.red{border-left-color:var(--red)}
.card.gray{border-left-color:var(--gray)}
.card.white{border-left-color:var(--white)}

/* tiles & rows */
.excluded-tile{width:100%; margin-top:14px; padding:16px; border-radius:var(--radius); background:var(--redbg); display:flex; align-items:center; gap:12px; box-shadow:var(--shadow)}
.excluded-label{font-weight:800; color:var(--red)}
.excluded-count{font-size:1.4rem; font-weight:800; color:var(--red); margin-left:auto}
.excluded-hint{font-size:.72rem; color:var(--muted)}

.export-row{display:flex; gap:10px}
.btn-ghost{flex:1; padding:12px; border:1px solid var(--line); border-radius:10px; text-align:center; color:var(--ink); font-weight:600; text-decoration:none}

/* map */
#map{position:fixed; left:0; right:0; top:56px; bottom:66px; width:100%}
.map-controls{position:fixed; left:10px; right:10px; top:64px; z-index:1002; display:flex; gap:6px; max-width:720px; margin:0 auto}
.mbtn{flex:1; padding:7px 0; border-radius:20px; background:var(--card); border:1px solid var(--line); font-size:.8rem; font-weight:700; color:var(--muted)}
.mbtn.active{background:var(--brand); color:#fff; border-color:var(--brand)}
.map-legend{position:fixed; left:10px; bottom:76px; z-index:1001; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 12px; font-size:.72rem; max-width:230px; box-shadow:var(--shadow)}
.map-legend .lg{display:flex; align-items:center; gap:8px; padding:2px 0}
.map-legend .lg-shapes{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin-top:4px; padding-top:6px; border-top:1px solid var(--line)}
.map-legend .shape{display:inline-flex; align-items:center; gap:5px}
.map-legend .clk{cursor:pointer; padding:1px 4px; border-radius:6px; transition:opacity .15s, background .15s}
.map-legend .clk:hover{background:var(--line)}
.map-legend .clk.dim{opacity:.28}
.map-legend .clk.dim .sw{outline:1px dashed rgba(0,0,0,.35); outline-offset:1px}
.map-legend .sw{width:12px; height:12px; border-radius:50%; flex-shrink:0; border:1px solid rgba(0,0,0,.15)}
.map-legend .lg-shapes .sw{line-height:1; background:transparent; display:inline-flex; align-items:center; justify-content:center; font-weight:700}
.map-legend .lg-note{margin-top:6px; padding-top:6px; border-top:1px solid var(--line); color:var(--muted); font-size:.68rem; line-height:1.35}
/* marker popup deal card */
#map .pcard{margin:4px 0 2px; border-top:1px solid #e5e7eb; padding-top:4px}
#map .prow{display:flex; justify-content:space-between; gap:10px; font-size:.76rem; line-height:1.45; color:#374151}
#map .prow b{font-weight:700; color:#111827; white-space:nowrap}
#map .prow a{font-weight:700; text-decoration:underline}
#map .prow.sub{justify-content:flex-start; color:#6b7280; font-size:.72rem; padding-left:2px}
#map .leaflet-popup-content{margin:10px 12px}
#map .ptitle{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:2px}
#map .ptitle .star{font-size:1.15rem; line-height:1; padding:0; background:none; border:none; cursor:pointer; color:#d97706}
#map .ptitle .star.filled{color:#f59e0b}

/* changelog feed */
.change-list{display:flex; flex-direction:column; gap:8px; margin:6px 0 4px}
.change{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 12px; box-shadow:var(--shadow)}
.change .ch-addr{font-weight:700; font-size:.88rem; margin-bottom:2px}
.change .ch-bit{font-size:.76rem; color:var(--muted); padding-left:2px}
.change .ch-addr.minor + .ch-bit{color:var(--muted)}

/* inline Street View / Map embed */
.modal-media{margin-top:10px}
.media-tabs{display:flex; gap:6px; margin-bottom:6px}
.media-tabs .mt{flex:1; padding:7px; border:1px solid var(--line); background:var(--card); border-radius:8px; color:var(--muted); font-size:.8rem; font-weight:600}
.media-tabs .mt.active{background:var(--brand2); color:#fff; border-color:var(--brand2)}
.media-frame{width:100%; height:200px; border:1px solid var(--line); border-radius:8px; background:var(--card)}
.map-legend b{font-size:.72rem}
.view{display:none}
.view.active{display:block}

/* list */
.search{margin:6px 0 10px}
.filter-row{display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch}
.ft{flex-shrink:0; padding:7px 12px; border-radius:20px; background:var(--card); border:1px solid var(--line); font-size:.8rem; font-weight:600; color:var(--muted)}
.ft.active{background:var(--brand); color:#fff; border-color:var(--brand)}
.sub-filters{display:flex; align-items:center; gap:12px; margin:10px 0; font-size:.8rem; color:var(--muted)}
.sub-filters select{width:auto; margin:0}
.list{display:flex; flex-direction:column; gap:8px}
.hint{color:var(--muted); font-size:.85rem; text-align:center; padding:20px 0}

/* bottom nav */
.bottomnav{position:fixed; bottom:0; left:0; right:0; background:var(--card); border-top:1px solid var(--line); display:flex; z-index:30; padding-bottom:env(safe-area-inset-bottom)}
.bn{flex:1; padding:8px 0 10px; display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--muted); font-size:.7rem}
.bn span{font-size:1.3rem}
.bn.active{color:var(--brand)}

/* modal */
.modal{position:fixed; inset:0; background:rgba(10,15,30,.55); display:flex; align-items:flex-end; z-index:60}
.modal-card{background:var(--card); width:100%; max-width:720px; margin:0 auto; border-radius:20px 20px 0 0; padding:20px; max-height:88vh; overflow-y:auto; animation:up .18s ease}
@keyframes up{from{transform:translateY(30px); opacity:.5} to{transform:none; opacity:1}}
@media(min-width:560px){.modal{align-items:center; padding:20px}.modal-card{border-radius:20px}}
.modal-head{display:flex; align-items:center; justify-content:space-between}
#modal-addr{font-size:1.1rem; margin-top:8px}
.badge-row{display:flex; gap:8px; margin-top:8px; align-items:center}
.tier-badge{padding:4px 12px; border-radius:20px; font-size:.78rem; font-weight:800}
.badge{display:flex; justify-content:space-between; padding:10px 2px; border-bottom:1px solid var(--line); font-size:.85rem}
.badge .k{color:var(--muted)}
.modal-body{margin-top:12px}
.modal-links{margin-top:12px; display:flex; flex-wrap:wrap; gap:8px}
.modal-links a{padding:10px 14px; border-radius:10px; background:var(--brand); color:#fff; font-weight:700; text-decoration:none; font-size:.85rem; flex:1; min-width:130px; text-align:center}
.excl-list{display:flex; flex-direction:column; gap:8px; margin-top:12px; max-height:52vh; overflow-y:auto}
.excl-row{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; display:flex; justify-content:space-between; align-items:center; font-size:.85rem}
.excl-row .v{font-weight:800; color:var(--red)}

[data-dark="1"] .leaflet-layer{filter:invert(1) hue-rotate(180deg) saturate(.7)}