:root{
  --primary:#FF6B6B;--primary-dark:#E05555;--secondary:#4ECDC4;--accent:#FFE66D;
  --bg:#F5F5F5;--card:#fff;--text:#2D3436;--text-light:#636E72;
  --shadow:0 4px 20px rgba(0,0,0,0.08);--radius:16px;
  --cat-park:#4CAF50;--cat-museum:#FF9800;--cat-science:#2196F3;
  --cat-amusement:#FF5722;--cat-zoo:#9C27B0;--cat-indoor_play:#FF5722;
  --cat-sports:#00BCD4;--cat-restaurant:#795548;--cat-farm:#8BC34A;
  --cat-nature:#2E7D32;--cat-street:#E91E63;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);overflow:hidden;height:100dvh}

/* Loading Skeleton */
#loading-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .4s ease;pointer-events:all;
}
#loading-overlay.hidden{opacity:0;pointer-events:none}
.loading-spinner{
  width:48px;height:48px;border:4px solid #E0E0E0;border-top-color:var(--primary);
  border-radius:50%;animation:spin .8s linear infinite;margin-bottom:16px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:14px;color:var(--text-light)}
.loading-sub{font-size:12px;color:#B2BEC3;margin-top:4px}

#app{display:flex;flex-direction:column;height:100dvh}

/* Header */
.header{
  background:linear-gradient(135deg,var(--primary),#FF8E8E);
  color:#fff;padding:12px 16px;display:flex;align-items:center;gap:10px;
  z-index:1000;box-shadow:0 2px 12px rgba(255,107,107,0.3);flex-shrink:0;
}
.header h1{font-size:18px;font-weight:700;white-space:nowrap}
.header .subtitle{font-size:11px;opacity:0.85}
.header .logo{font-size:24px;flex-shrink:0}
.header-actions{margin-left:auto;display:flex;gap:8px}
.header-btn{
  background:rgba(255,255,255,0.2);border:none;color:#fff;width:36px;height:36px;
  border-radius:10px;font-size:16px;cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.header-btn:hover{background:rgba(255,255,255,0.35)}
.header-btn.map-switch{
  width:auto;padding:0 10px;font-size:12px;gap:4px;font-weight:600;text-decoration:none;
}
.header-btn.map-switch i{font-size:12px}
.header-btn .badge{
  position:absolute;top:-4px;right:-4px;background:#fff;color:var(--primary);
  font-size:9px;width:16px;height:16px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-weight:700;
}

/* Search Bar */
.search-bar{padding:8px 16px 12px;background:linear-gradient(135deg,var(--primary),#FF8E8E);z-index:999;flex-shrink:0}
.search-input-wrap{
  display:flex;align-items:center;background:#fff;border-radius:12px;
  padding:0 14px;height:42px;box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.search-input-wrap i{color:var(--text-light);font-size:16px;margin-right:8px}
.search-input-wrap input{flex:1;border:none;outline:none;font-size:14px;color:var(--text);background:transparent;font-family:inherit}
.search-input-wrap input::placeholder{color:#B2BEC3}
.search-clear{background:none;border:none;color:var(--text-light);cursor:pointer;font-size:14px;padding:4px;display:none}

/* Categories + Quick Filters combined */
.filter-bar{background:#fff;flex-shrink:0;z-index:998;box-shadow:0 1px 6px rgba(0,0,0,0.04);padding:10px 0 4px}
.categories{display:flex;gap:8px;padding:0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.categories::-webkit-scrollbar{display:none}
.cat-btn{
  flex-shrink:0;padding:6px 14px;border-radius:20px;border:1.5px solid #E0E0E0;
  background:#fff;font-size:12px;color:var(--text);cursor:pointer;
  transition:all .25s;display:flex;align-items:center;gap:5px;
  font-family:inherit;white-space:nowrap;font-weight:500;
}
.cat-btn .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cat-btn.active{color:#fff;background:var(--primary);border-color:transparent;box-shadow:0 2px 8px rgba(255,107,107,0.35)}
.cat-btn.active .dot{background:#fff!important}
.cat-scroll-hint{
  position:absolute;right:0;top:0;bottom:0;width:32px;
  background:linear-gradient(to right,transparent,#fff);pointer-events:none;
  display:flex;align-items:center;justify-content:center;color:#CCC;font-size:12px;
}
.filter-row{display:flex;gap:8px;padding:8px 16px 10px;overflow-x:auto;scrollbar-width:none;flex-shrink:0;background:#fff}
.filter-row::-webkit-scrollbar{display:none}
.filter-chip{
  flex-shrink:0;padding:4px 12px;border-radius:14px;border:1px solid #E8E8E8;
  background:#F8F8F8;font-size:11px;color:var(--text-light);cursor:pointer;
  transition:all .2s;font-family:inherit;white-space:nowrap;
}
.filter-chip.active{background:#FFF3E0;color:#F57C00;border-color:#FFB74D}
.filter-chip i{margin-right:3px}

/* Active filters display */
.active-filters{
  display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 8px;background:#fff;flex-shrink:0;
}
.active-filter-tag{
  padding:3px 8px 3px 10px;border-radius:12px;font-size:11px;display:flex;
  align-items:center;gap:4px;background:#FFF3E0;color:#F57C00;font-weight:500;
}
.active-filter-tag .remove{font-size:12px;cursor:pointer;opacity:0.6}
.active-filter-tag .remove:hover{opacity:1}
.clear-all-filters{font-size:11px;color:var(--primary);cursor:pointer;padding:3px 8px;font-weight:500}

/* Weather banner */
.weather-banner{
  display:flex;align-items:center;gap:8px;padding:8px 16px;background:#E3F2FD;
  border-bottom:1px solid #BBDEFB;flex-shrink:0;font-size:12px;color:#1565C0;
  cursor:pointer;transition:all .2s;
}
.weather-banner i{font-size:16px}
.weather-banner .rain-tip{font-weight:600}
.weather-banner:hover{background:#BBDEFB}

/* Map */
#map{flex:1;z-index:1}
.leaflet-container{background:#E8F5E9}

/* Count Bar */
.count-bar{
  position:absolute;bottom:0;left:0;right:0;z-index:900;
  background:#fff;padding:10px 16px;display:flex;align-items:center;
  justify-content:space-between;box-shadow:0 -2px 12px rgba(0,0,0,0.08);
  border-radius:20px 20px 0 0;
}
.place-count{font-size:13px;color:var(--text-light)}
.place-count strong{color:var(--primary);font-size:18px;margin-right:4px}
.count-bar-actions{display:flex;gap:8px}
.count-bar-btn{
  background:#F5F5F5;color:var(--text);border:none;padding:8px 14px;
  border-radius:10px;font-size:12px;cursor:pointer;font-weight:600;
  font-family:inherit;display:flex;align-items:center;gap:5px;transition:all .2s;
}
.count-bar-btn.primary{background:var(--primary);color:#fff}
.count-bar-btn.primary:hover{background:var(--primary-dark)}
.count-bar-btn:hover{background:#EEEEEE}
.count-bar-btn.primary:hover{background:var(--primary-dark)}

/* Custom Markers */
.custom-marker{width:36px;height:36px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,0.25);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;transition:transform .2s;cursor:pointer}
.custom-marker:hover{transform:scale(1.2)}
.custom-marker.park{background:var(--cat-park)}
.custom-marker.museum{background:var(--cat-museum)}
.custom-marker.science{background:var(--cat-science)}
.custom-marker.amusement{background:var(--cat-amusement)}
.custom-marker.zoo{background:var(--cat-zoo)}
.custom-marker.indoor_play{background:var(--cat-indoor_play)}
.custom-marker.sports{background:var(--cat-sports)}
.custom-marker.restaurant{background:var(--cat-restaurant)}
.custom-marker.farm{background:var(--cat-farm)}
.custom-marker.nature{background:var(--cat-nature)}
.custom-marker.street{background:var(--cat-street)}

/* Popup */
.leaflet-popup-content-wrapper{border-radius:16px!important;box-shadow:0 8px 32px rgba(0,0,0,0.12)!important;padding:0!important;overflow:hidden}
.leaflet-popup-content{margin:0!important;width:300px!important}
.leaflet-popup-tip{display:none}
.popup-card{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
.popup-header{padding:14px 16px 10px;display:flex;align-items:flex-start;gap:10px}
.popup-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;flex-shrink:0}
.popup-title{font-size:15px;font-weight:700;color:var(--text);line-height:1.3}
.popup-cat{font-size:11px;color:var(--text-light);margin-top:2px;display:flex;align-items:center;gap:4px}
.popup-body{padding:0 16px 14px}
.popup-desc{font-size:13px;color:var(--text-light);line-height:1.5;margin-bottom:10px}
.popup-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.popup-tag{padding:3px 10px;border-radius:8px;font-size:11px;font-weight:500}
.popup-tag.free{background:#E8F5E9;color:#2E7D32}
.popup-tag.paid{background:#FFF3E0;color:#E65100}
.popup-tag.indoor{background:#E3F2FD;color:#1565C0}
.popup-tag.outdoor{background:#F3E5F5;color:#7B1FA2}
.popup-tag.age{background:#FBE9E7;color:#BF360C}
.popup-tag.dist{background:#F3E5F5;color:#6A1B9A}
.popup-meta{font-size:11px;color:var(--text-light);margin-bottom:8px;display:flex;gap:12px}
.popup-meta span{display:flex;align-items:center;gap:3px}
.popup-actions{display:flex;gap:8px}
.popup-btn{flex:1;padding:8px;border-radius:10px;border:none;font-size:12px;cursor:pointer;font-weight:600;font-family:inherit;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:4px}
.popup-btn.nav{background:var(--primary);color:#fff}
.popup-btn.nav:hover{background:var(--primary-dark)}
.popup-btn.fav{background:#FFF8E1;color:#F57F17;border:1px solid #FFE082}
.popup-btn.fav:hover{background:#FFECB3}
.popup-btn.fav.saved{background:#E8F5E9;color:#2E7D32;border-color:#A5D6A7}
.popup-btn.share{background:#F5F5F5;color:var(--text)}
.popup-btn.share:hover{background:#EEEEEE}

/* List Panel */
.list-panel{position:fixed;top:0;left:0;right:0;bottom:0;z-index:2000;background:#fff;transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.list-panel.open{transform:translateY(0)}
.list-panel-header{padding:16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #F0F0F0;flex-shrink:0;flex-wrap:wrap}
.list-close{width:36px;height:36px;border-radius:10px;border:1px solid #E0E0E0;background:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text);transition:all .2s}
.list-close:hover{background:#F5F5F5}
.list-panel-header h2{font-size:17px;font-weight:700}
.list-panel-header .list-count{font-size:13px;color:var(--text-light);margin-left:auto}
.list-sort{display:flex;gap:4px;width:100%;margin-top:8px}
.list-sort-btn{padding:4px 12px;border-radius:12px;border:1px solid #E0E0E0;background:#fff;font-size:11px;cursor:pointer;font-family:inherit;color:var(--text-light);transition:all .2s}
.list-sort-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.list-items{flex:1;overflow-y:auto;padding:8px 16px 100px;-webkit-overflow-scrolling:touch}
.list-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #F5F5F5;cursor:pointer;transition:all .2s;align-items:flex-start}
.list-item:hover{background:#FAFAFA;margin:0 -16px;padding:14px 16px;border-radius:12px}
.list-item-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;flex-shrink:0}
.list-item-info{flex:1;min-width:0}
.list-item-name{font-size:14px;font-weight:600;color:var(--text);margin-bottom:3px;display:flex;align-items:center;gap:6px}
.list-item-name .fav-star{color:#F57F17;font-size:10px}
.list-item-meta{font-size:11px;color:var(--text-light);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.list-item-meta .sep{color:#DDD}
.list-item-tags{display:flex;gap:4px;margin-top:5px}
.list-item-tag{padding:2px 8px;border-radius:6px;font-size:10px;font-weight:500}
.list-item-arrow{color:#CCC;font-size:14px;margin-top:14px;flex-shrink:0}

/* Detail Modal */
.detail-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:3000;background:rgba(0,0,0,0.5);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.detail-modal.open{opacity:1;pointer-events:auto}
.detail-content{background:#fff;border-radius:24px 24px 0 0;width:100%;max-width:500px;max-height:85vh;overflow-y:auto;transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);padding-bottom:env(safe-area-inset-bottom)}
.detail-modal.open .detail-content{transform:translateY(0)}
.detail-handle{width:40px;height:4px;background:#DDD;border-radius:2px;margin:10px auto 0}
.detail-hero{padding:20px 20px 16px;display:flex;align-items:center;gap:14px}
.detail-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px}
.detail-title{font-size:20px;font-weight:800;color:var(--text);line-height:1.3}
.detail-cat{font-size:13px;color:var(--text-light);margin-top:3px}
.detail-body{padding:0 20px 20px}
.detail-section{margin-bottom:16px}
.detail-section-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.detail-section-title i{color:var(--primary);font-size:14px}
.detail-desc{font-size:14px;color:var(--text-light);line-height:1.6}
.detail-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.detail-info-card{padding:12px;border-radius:12px;background:#F8F9FA;min-width:0}
.detail-info-card:last-child:nth-child(odd){grid-column:1/-1}
.detail-info-label{font-size:11px;color:var(--text-light);margin-bottom:3px;display:flex;align-items:center;gap:4px}
.detail-info-value{font-size:14px;font-weight:600;color:var(--text);word-break:break-word}
.detail-actions{display:flex;gap:10px;padding:0 20px 24px}
.detail-btn{flex:1;padding:14px;border-radius:14px;border:none;font-size:14px;cursor:pointer;font-weight:700;font-family:inherit;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px}
.detail-btn.primary{background:var(--primary);color:#fff}
.detail-btn.primary:hover{background:var(--primary-dark)}
.detail-btn.fav-btn{background:#FFF8E1;color:#F57F17}
.detail-btn.fav-btn.saved{background:#E8F5E9;color:#2E7D32}
.detail-btn.secondary{background:#F5F5F5;color:var(--text)}

/* Detail: 亮点标签 */
.detail-tag-list{display:flex;flex-wrap:wrap;gap:6px}
.detail-tag{padding:4px 10px;border-radius:10px;font-size:12px;font-weight:500;background:linear-gradient(135deg,#FFF3E0,#FFE0B2);color:#E65100;border:1px solid #FFCC80}

/* Detail: 亲子设施 */
.detail-fac-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.detail-fac-item{padding:10px 12px;border-radius:12px;background:#F8F9FA;border:1px solid #F0F0F0}
.detail-fac-head{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text)}
.detail-fac-head i:first-child{color:var(--text-light);font-size:13px}
.detail-fac-badge{margin-left:auto;font-size:11px;font-weight:700;padding:2px 8px;border-radius:8px}
.detail-fac-item.yes{background:#E8F5E9;border-color:#C8E6C9}
.detail-fac-item.yes .detail-fac-badge{background:#C8E6C9;color:#1B5E20}
.detail-fac-item.no{background:#FFEBEE;border-color:#FFCDD2}
.detail-fac-item.no .detail-fac-badge{background:#FFCDD2;color:#B71C1C}
.detail-fac-item.unknown{background:#F5F5F5;border-color:#E0E0E0}
.detail-fac-item.unknown .detail-fac-badge{background:#E0E0E0;color:#616161}
.detail-fac-desc{display:block;margin-top:4px;font-size:11px;color:var(--text-light);line-height:1.4}

/* Detail: 遛娃攻略 */
.detail-guide-list{display:flex;flex-direction:column;gap:8px}
.detail-guide-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#F8F9FA;border:1px solid #F0F0F0;text-decoration:none;color:var(--text);transition:all .2s}
.detail-guide-item:hover{background:#FFF3E0;border-color:#FFCC80}
.detail-guide-item>i:first-child{color:#E65100;font-size:14px;flex-shrink:0}
.detail-guide-title{font-size:13px;font-weight:600;line-height:1.4;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-guide-meta{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:11px;color:var(--text-light)}
.detail-guide-src{padding:1px 6px;border-radius:6px;background:#FFE0B2;color:#E65100;font-weight:500}
.detail-guide-author{color:#B2BEC3}
.detail-guide-arrow{color:#B2BEC3;font-size:12px;flex-shrink:0}

/* No results */
.no-results{text-align:center;padding:40px 20px;color:var(--text-light)}
.no-results i{font-size:48px;margin-bottom:12px;color:#DDD}
.no-results p{font-size:14px;margin-bottom:4px}
.no-results .reset-btn{margin-top:12px;padding:8px 20px;border-radius:10px;background:var(--primary);color:#fff;border:none;font-size:13px;cursor:pointer;font-family:inherit;font-weight:600}

/* Scroll top */
.scroll-top{position:absolute;bottom:20px;right:20px;width:44px;height:44px;border-radius:50%;background:var(--primary);color:#fff;border:none;box-shadow:0 4px 12px rgba(255,107,107,0.4);font-size:18px;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:10;transition:all .2s}
.scroll-top.show{display:flex}
.scroll-top:hover{transform:scale(1.1)}

/* Toast */
.toast-msg{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.78);color:#fff;padding:10px 20px;border-radius:10px;font-size:13px;z-index:9999;animation:fadeInUp .3s ease;box-shadow:0 4px 16px rgba(0,0,0,0.2);pointer-events:none}

/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* Leaflet overrides */
.leaflet-control-zoom{border:none!important;box-shadow:var(--shadow)!important;border-radius:12px!important;overflow:hidden}
.leaflet-control-zoom a{width:36px!important;height:36px!important;line-height:36px!important;font-size:16px!important;color:var(--text)!important;border-bottom:1px solid #F0F0F0!important}
.leaflet-control-zoom a:hover{background:#F5F5F5!important}

/* MarkerCluster overrides */
.marker-cluster-small{background-color:rgba(255,107,107,0.2)!important}
.marker-cluster-small div{background-color:rgba(255,107,107,0.6)!important;color:#fff!important;font-weight:700!important}
.marker-cluster-medium{background-color:rgba(255,152,0,0.2)!important}
.marker-cluster-medium div{background-color:rgba(255,152,0,0.6)!important;color:#fff!important;font-weight:700!important}
.marker-cluster-large{background-color:rgba(233,30,99,0.2)!important}
.marker-cluster-large div{background-color:rgba(233,30,99,0.6)!important;color:#fff!important;font-weight:700!important}

@media(min-width:768px){
  .header h1{font-size:20px}
  .count-bar{max-width:500px;margin:0 auto;left:50%;right:auto;transform:translateX(-50%);border-radius:20px 20px 0 0}
  .detail-content{max-width:460px}
}