*{margin:0;padding:0;box-sizing:border-box}
:root{
  --c-bg:#f5f5f7;
  --c-surface:#fff;
  --c-primary:#0066ff;
  --c-primary-light:#e8f0fe;
  --c-text:#1a1a2e;
  --c-text2:#64748b;
  --c-border:#e5e7eb;
  --c-radius:14px;
  --safe-bottom:env(safe-area-inset-bottom,0px);
  /* dimension colors */
  --dim-eat:#f59e0b;
  --dim-eat-light:#fef3c7;
  --dim-drink:#e11d48;
  --dim-drink-light:#ffe4e6;
  --dim-play:#10b981;
  --dim-play-light:#d1fae5;
  --dim-see:#3b82f6;
  --dim-see-light:#dbeafe;
  --dim-buy:#a855f7;
  --dim-buy-light:#f3e8ff;
}
html,body{height:100%;overflow:hidden}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","PingFang SC",sans-serif;
  background:var(--c-bg);
  color:var(--c-text);
  display:flex;
  flex-direction:column;
}

/* ===== header ===== */
.app-header{
  padding:12px 16px;
  background:var(--c-surface);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;
  position:sticky;top:0;z-index:100;
  box-shadow:0 1px 0 var(--c-border);
}
.app-header h1{font-size:18px;font-weight:700}
.icon-btn{
  width:36px;height:36px;border-radius:50%;border:none;
  background:var(--c-bg);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s;
}
.icon-btn:active{background:#dde1e6}
.icon-btn.locating{background:var(--c-primary);color:#fff}

/* ===== dimension chips ===== */
.dim-scroll{
  display:flex;gap:8px;padding:10px 16px;overflow-x:auto;flex-shrink:0;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.dim-scroll::-webkit-scrollbar{display:none}
.dim-chip{
  flex-shrink:0;padding:7px 16px;border-radius:20px;border:1.5px solid var(--c-border);
  background:var(--c-surface);font-size:14px;font-weight:500;
  cursor:pointer;transition:all .12s;white-space:nowrap;
}
.dim-chip:active{transform:scale(.95)}
.dim-chip[data-dim="吃"]{border-color:var(--dim-eat);color:var(--dim-eat)}
.dim-chip[data-dim="吃"].active{background:var(--dim-eat);color:#fff;border-color:var(--dim-eat)}
.dim-chip[data-dim="喝"]{border-color:var(--dim-drink);color:var(--dim-drink)}
.dim-chip[data-dim="喝"].active{background:var(--dim-drink);color:#fff;border-color:var(--dim-drink)}
.dim-chip[data-dim="玩"]{border-color:var(--dim-play);color:var(--dim-play)}
.dim-chip[data-dim="玩"].active{background:var(--dim-play);color:#fff;border-color:var(--dim-play)}
.dim-chip[data-dim="看"]{border-color:var(--dim-see);color:var(--dim-see)}
.dim-chip[data-dim="看"].active{background:var(--dim-see);color:#fff;border-color:var(--dim-see)}
.dim-chip[data-dim="买"]{border-color:var(--dim-buy);color:var(--dim-buy)}
.dim-chip[data-dim="买"].active{background:var(--dim-buy);color:#fff;border-color:var(--dim-buy)}
.dim-chip[data-dim]:not([data-dim=""]):active{color:#fff}
.dim-chip[data-dim=""].active{background:var(--c-text);color:#fff}

/* ===== filter row ===== */
.filter-row{
  display:flex;gap:8px;padding:0 16px 10px;flex-shrink:0;
  overflow-x:auto;scrollbar-width:none;
}
.filter-row::-webkit-scrollbar{display:none}
.pill-btn{
  flex-shrink:0;padding:7px 14px;border-radius:16px;border:1px solid var(--c-border);
  background:var(--c-surface);font-size:13px;color:var(--c-text);
  cursor:pointer;white-space:nowrap;transition:background .12s;
}
.pill-btn:active{background:#f1f5f9}
.pill-btn.has-value{color:var(--c-primary);border-color:var(--c-primary);background:var(--c-primary-light)}
.search-wrap{
  flex:1;min-width:100px;display:flex;align-items:center;gap:6px;
  padding:0 12px;border-radius:16px;border:1px solid var(--c-border);
  background:var(--c-surface);
}
.search-wrap svg{flex-shrink:0}
#search-box{
  border:none;outline:none;background:transparent;font-size:13px;
  width:100%;padding:7px 0;color:var(--c-text);
}

/* ===== main ===== */
main{flex:1;overflow:hidden;position:relative;padding-bottom:56px}
.view{display:none;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
.view.active{display:block}
#map-view{isolation:isolate}
#map{width:100%;height:100%}

/* ===== poi list ===== */
#poi-list{
  padding:4px 12px 12px;
  display:flex;flex-direction:column;gap:10px;
}
.poi-card{
  background:var(--c-surface);border-radius:var(--c-radius);
  padding:14px;cursor:pointer;transition:transform .1s;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.poi-card:active{transform:scale(.98)}
.poi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px}
.poi-name{font-size:15px;font-weight:600;line-height:1.3;flex:1}
.poi-dist{
  flex-shrink:0;font-size:11px;font-weight:600;color:var(--c-primary);
  background:var(--c-primary-light);padding:3px 8px;border-radius:10px;
}
.poi-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.tag{font-size:11px;font-weight:500;padding:2px 8px;border-radius:6px}
.tag-sub{background:#dbeafe;color:#1d4ed8}
.tag-district{background:#f1f5f9;color:#475569}
/* dimension-colored tags */
.tag-eat{background:var(--dim-eat-light);color:#92400e}
.tag-drink{background:var(--dim-drink-light);color:#be123c}
.tag-play{background:var(--dim-play-light);color:#065f46}
.tag-see{background:var(--dim-see-light);color:#1e40af}
.tag-buy{background:var(--dim-buy-light);color:#9d174d}
.poi-desc{font-size:13px;color:var(--c-text2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.poi-price{font-size:12px;color:var(--c-text2);margin-top:6px;
  padding-top:6px;border-top:1px solid var(--c-border)}

/* ===== bottom bar ===== */
.bottom-bar{
  position:fixed;bottom:0;left:0;right:0;
  padding:6px 0 calc(6px + var(--safe-bottom));
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--c-border);display:flex;z-index:100;
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  border:none;background:transparent;font-size:11px;font-weight:500;
  color:var(--c-text2);cursor:pointer;padding:4px 0;transition:color .12s;
}
.tab.active{color:var(--c-primary)}

/* ===== detail sheet ===== */
.sheet{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.45);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.sheet.hidden{display:none}
.sheet-bar{
  width:36px;height:4px;border-radius:2px;
  background:#d1d5db;margin:8px auto 0;flex-shrink:0;cursor:pointer;
}
.sheet-body{
  background:var(--c-surface);border-radius:16px 16px 0 0;
  padding:16px 20px calc(20px + var(--safe-bottom));
  max-height:75vh;overflow-y:auto;
}
#detail-name{font-size:18px;font-weight:700;margin-bottom:10px;line-height:1.3}
#detail-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.detail-addr{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  background:var(--c-bg);border-radius:10px;margin-bottom:12px;
  cursor:pointer;transition:background .12s;
}
.detail-addr:active{background:#e5e7eb}
.detail-addr svg{flex-shrink:0;color:var(--c-text2)}
.detail-addr span:first-of-type{flex:1;font-size:13px;color:var(--c-text);line-height:1.4}
.addr-hint{font-size:11px;color:var(--c-primary);white-space:nowrap;font-weight:500}
#detail-intro{font-size:14px;line-height:1.7;color:var(--c-text2);margin-bottom:12px}
#detail-features{font-size:14px;line-height:1.6;margin-bottom:10px}
#detail-price{font-size:13px;color:var(--c-text2);padding:10px 12px;background:var(--c-bg);border-radius:10px}

/* ===== picker sheet ===== */
.picker-body h3{font-size:16px;font-weight:600;margin-bottom:12px}
.picker-item{
  padding:12px 16px;border-radius:10px;font-size:14px;cursor:pointer;
  transition:background .12s;display:flex;align-items:center;justify-content:space-between;
}
.picker-item:active{background:var(--c-bg)}
.picker-item.selected{color:var(--c-primary);font-weight:600}
.picker-item .check{color:var(--c-primary);font-weight:700;opacity:0;transition:opacity .12s}
.picker-item.selected .check{opacity:1}

/* ===== leaflet ===== */
.leaflet-popup-content-wrapper{border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.leaflet-popup-content{margin:10px 14px;font-size:13px;line-height:1.4}
.popup-name{font-weight:600;font-size:14px;margin-bottom:2px}
.popup-info{color:var(--c-text2);font-size:12px}
.custom-marker{background:none!important;border:none!important}
.empty-state{text-align:center;padding:80px 24px;color:var(--c-text2)}
.empty-state p{font-size:14px}

/* ===== desktop ===== */
@media(min-width:768px){
  .app-header{padding:16px 24px}
  .app-header h1{font-size:22px}
  .dim-scroll{padding:12px 24px}
  .filter-row{padding:0 24px 14px}
  main{padding:0 0 56px}
  #poi-list{
    padding:8px 24px 12px;
    display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;
    align-content:start;
  }
  .bottom-bar{
    max-width:320px;left:50%;transform:translateX(-50%);
    border-radius:16px 16px 0 0;
    box-shadow:0 -2px 16px rgba(0,0,0,.08);
  }
  .sheet-body{max-width:480px;margin:0 auto}
}