:root{
  --bg:#070b16; --panel:#0d1226; --ink:#e6edf7; --muted:#9fb2c8;
  --grad-a:#7c3aed; --grad-b:#06b6d4; --grad-c:#22c55e;
  --accent:var(--grad-b); --accent-dark:#0aa0b8;
  --padel:var(--grad-c); --pickle:var(--grad-b);
  --border:#1a2540; --ring:#ffffff2a;
}
*{box-sizing:border-box}
html,body,#app{height:100%;margin:0}
body{font:14px/1.4 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}

.sidebar{position:fixed;left:0;top:0;bottom:0;width:360px;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border)}
.logo{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,var(--grad-a),var(--grad-b));color:#fff;display:grid;place-items:center;font-weight:700}
.title{font-weight:700}
.menu{margin-left:auto;border:0;background:transparent;font-size:18px;cursor:pointer}
.home-btn{margin-left:auto;margin-right:6px;background:#ffffff10;border:1px solid var(--ring);padding:6px 10px;border-radius:8px;color:#e2e8f0;text-decoration:none;font-size:13px}
.home-btn:hover{box-shadow:0 0 0 4px var(--ring)}

.tabs{display:flex;border-bottom:1px solid var(--border)}
.tab{flex:1;padding:10px 12px;background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer}
.tab.active{border-bottom-color:var(--accent);font-weight:600}

.panel{padding:12px;overflow:auto}
.panel.hidden{display:none}
.section{padding:10px 6px}
.section-title{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;margin-bottom:8px;letter-spacing:.02em}
.checkbox{display:block;margin:6px 0}
.muted .hint{color:var(--muted)}
.search-input{width:100%;padding:10px;border:1px solid var(--border);border-radius:6px;outline:none}
.select{width:100%;padding:10px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--ink)}
.list-btn{width:100%;margin-top:12px;padding:12px;background:#ffffff10;border:1px solid var(--ring);border-radius:10px;color:#e2e8f0;cursor:pointer}
.list-btn:hover{box-shadow:0 0 0 6px var(--ring)}
.panel-visual{margin:18px 0 10px;border:1px solid var(--ring);border-radius:12px;overflow:hidden;background:#ffffff08;box-shadow:0 12px 32px rgba(0,0,0,.28)}
.panel-visual img{display:block;width:100%;height:180px;object-fit:cover}
.panel-visual figcaption{padding:10px 12px;color:var(--muted);font-size:12px;line-height:1.4}

.map-wrap{position:fixed;left:360px;right:0;top:0;bottom:0}
#map{position:absolute;inset:0}
.neon-overlay{position:absolute;inset:0;pointer-events:none;display:none;background:linear-gradient(135deg,rgba(124,58,237,.22),rgba(6,182,212,.22)),radial-gradient(800px 800px at 10% 20%,rgba(34,197,94,.18),transparent 60%);mix-blend-mode:color-dodge}
.legend{position:absolute;right:16px;bottom:16px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.legend-row{display:flex;align-items:center;gap:8px;margin:6px 0}
.key{width:12px;height:12px;border-radius:50%}
.key.padel{background:var(--padel)}
.key.pickleball{background:var(--pickle)}

.drawer{position:absolute;left:16px;bottom:16px;top:auto;width:320px;max-height:60%;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.35);display:flex;flex-direction:column}
.drawer.hidden{display:none}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border)}
.result-list{overflow:auto}
.result{padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer}
.result .name{font-weight:600}
.result .addr{color:var(--muted);font-size:12px}
.result .links{margin-top:6px}
.result .links a{color:var(--accent);text-decoration:none;margin-right:10px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}

@media (max-width: 900px){
  .sidebar{width:100%;height:320px;right:0;bottom:auto;padding-bottom:12px}
  .map-wrap{left:0;top:320px}
  .panel-visual{display:none}
}

/* Leaflet custom marker dot */
.pp-icon{background:transparent;border:none}
.pp-dot{width:16px;height:16px;border-radius:50%;border:2px solid #07111f;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.pp-dot.padel{background:var(--padel)}
.pp-dot.pickle{background:var(--pickle)}

/* Logo marker (used at close zoom) */
.pp-logo{background:transparent;border:none}
.pp-logo .img{width:22px;height:22px;border-radius:50%;overflow:hidden;border:2px solid #07111f;box-shadow:0 1px 6px rgba(0,0,0,.45)}
.pp-logo .img img{width:100%;height:100%;object-fit:cover;display:block}

/* Map color styles via CSS filters on raster tiles */
body.theme-vibrant .leaflet-tile{filter:hue-rotate(315deg) saturate(1.2) brightness(0.85) contrast(1.05)}
body.theme-light .leaflet-tile{filter:none}
body.theme-night .leaflet-tile{filter:brightness(.85) saturate(1.15) contrast(1.1)}
body.theme-night .neon-overlay{display:block}

/* MarkerCluster neon styling */
.marker-cluster-small{background:rgba(6,182,212,.15)}
.marker-cluster-small div{background:linear-gradient(135deg,#06b6d4,#22c55e);color:#07111f;border:2px solid #0ea5b8}
.marker-cluster-medium{background:rgba(124,58,237,.16)}
.marker-cluster-medium div{background:linear-gradient(135deg,#7c3aed,#06b6d4);color:#fff;border:2px solid #6d28d9}
.marker-cluster-large{background:rgba(124,58,237,.2)}
.marker-cluster-large div{background:linear-gradient(135deg,#7c3aed,#22c55e);color:#fff;border:2px solid #16a34a}