/* Pill sidebar - minimal styles (no background) */
:root{
    --muted: #6c7a6c;
    --pill-bg: rgba(255,255,255,0.92);
    --pill-shadow: 0 14px 40px rgba(8,20,10,0.06);
    --accent: #7fd13b;
    --card-shadow: 0 26px 50px rgba(6,20,10,0.08);
}
.ui-wrapper{position:absolute;left:110px;top:50%;transform:translateY(-50%);--pill-width:35px;z-index:1400}
.pill-bar{display:flex;align-items:center;gap:8px;width:var(--pill-width);height:auto;padding:8px 6px;border-radius:28px;background:var(--pill-bg);box-shadow:var(--pill-shadow);backdrop-filter:blur(6px);transition:box-shadow .28s ease,padding .28s ease}
.pill-icons{display:flex;flex-direction:column;gap:6px;align-items:center}
.pill{width:35px;height:35px;border-radius:999px;border:none;background:transparent;display:grid;place-items:center;font-size:16px;cursor:pointer;transition:background .18s ease, transform .12s ease,color .18s ease;color:#2b3b2b}
.pill:hover{background:rgba(11,24,11,0.04);transform:translateY(-2px)}
.pill.active{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(127,209,59,0.18)}
.pill svg{display:block;width:18px;height:18px}
.info-panel{position:absolute;left:calc(var(--pill-width) + 32px);top:50%;transform:translateY(-50%) translateX(-6px);width:520px;max-width:calc(100vw - 180px);background:#fff;border-radius:18px;box-shadow:var(--card-shadow);overflow:hidden;opacity:0;pointer-events:none;transition:opacity .36s ease,transform .36s cubic-bezier(.2,.9,.2,1);z-index:1401}
.info-panel.open{opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto;height: 60vh;}

/* connector */
.connector{display:none}
.connector.visible{display:block}
.panel-head{display:flex;flex-direction:column;gap:10px;padding:14px}
.search-wrap{display:flex;align-items:center;gap:10px;background:#9cdb8c;padding:10px;border-radius:12px}
.search-icon{color:#7a8b7a;flex:0 0 18px}
.search-input{flex:1;border:none;background:transparent;font-size:14px;outline:none}
.panel-filters{height: 12vh;display:flex;flex-direction: row;gap:8px;overflow-x: hidden;}
.filter{background:transparent;border:none;padding:6px 10px;border-radius:999px;font-size:13px;color:var(--muted);cursor:pointer;transition:background .18s ease}
.filter.active{background:rgba(127,209,59,0.12);color:var(--accent)}

.panel-list{margin-top:10px;display:flex;flex-direction:column;gap:12px;max-height:520px;overflow:auto;padding:12px}
.place{display:flex;gap:10px;background:#fff;border-radius:14px;padding:8px;align-items:flex-start;box-shadow:0 8px 16px rgba(6,20,10,0.04);transition:transform .22s cubic-bezier(.2,.9,.2,1),box-shadow .22s cubic-bezier(.2,.9,.2,1),background-color .18s ease}
.place:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(6,20,10,0.10)}
.place-media{flex-shrink:0}
.place-media img{width:96px;height:72px;object-fit:cover;border-radius:10px;transition:transform .28s ease,filter .28s ease}
.place:hover .place-media img{transform:scale(1.06);filter:brightness(1.02)}
.place-body{flex:1;min-width:0}
.place-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.place-name{font-size:15px;color:#07230b}
.verified{opacity:1}
.place-type{font-size:13px;color:var(--muted);margin-top:4px}
.place-address{font-size:12px;color:#859386;margin-top:6px}
.place-tags{margin-top:8px;display:flex;gap:6px}
.chip{font-size:11px;padding:6px 8px;border-radius:999px;background:rgba(10,20,10,0.03);color:#274a27}

.detail-card{position:absolute;left:calc(var(--pill-width) + 32px);top:50%;transform:translateY(-50%) translateX(-6px);width:520px;max-width:calc(100vw - 180px);background:#fff;border-radius:18px;box-shadow:0 30px 60px rgba(6,20,10,0.12);z-index:1402;padding:0;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .32s ease,transform .32s cubic-bezier(.2,.9,.2,1)}
.detail-card.open{opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto}
.detail-close{position:absolute;right:18px;top:18px;border:none;background:rgba(255,255,255,0.92);width:40px;height:40px;border-radius:18px;cursor:pointer;color:#07220a;display:grid;place-items:center;box-shadow:0 10px 24px rgba(6,20,10,0.12);z-index:1403;backdrop-filter:blur(4px)}
.detail-slider{position:relative;height:220px;background:#f2f6f2;display:flex;align-items:center;justify-content:center;border-radius:18px;overflow:hidden;margin:14px;box-shadow:0 14px 40px rgba(6,20,10,0.10)}
.detail-slider .slides{display:flex;transition:transform .36s ease;width:100%;height:100%;}
.detail-slider .slides img{width:100%;height:100%;object-fit:cover;flex:0 0 100%;display:block}
.detail-slider::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.55) 100%);pointer-events:none}
.detail-slider .prev,.detail-slider .next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.85);border:none;width:36px;height:36px;border-radius:10px;cursor:pointer;box-shadow:0 6px 18px rgba(8,20,10,0.06)}
.detail-slider .prev{left:12px}
.detail-slider .next{right:12px}
.detail-body{padding:14px}
.detail-name{margin:6px 0;font-size:18px}
.detail-type,.detail-address{color:var(--muted);font-size:13px}
.detail-tags{margin-top:8px;display:flex;gap:8px}
.detail-desc{margin-top:10px;color:#516451;font-size:14px}
.detail-actions{display:flex;gap:10px;margin-top:12px}

.nav{background:linear-gradient(90deg,var(--accent),#43ff5c);border:none;color:#fff;padding:10px 14px;border-radius:10px;cursor:pointer}
.fav{background:transparent;border:none;font-size:18px;cursor:pointer;color:#888}
.fav-active{color:#e24b6a}
.nav.navigating{transform:translateY(-1px) scale(.995);box-shadow:0 6px 12px rgba(0,0,0,0.06);opacity:0.95}
.nav-status{margin-top:10px;background:rgba(10,20,10,0.03);color:#264523;padding:8px 10px;border-radius:10px;font-size:13px}

.panel-list::-webkit-scrollbar{width:8px}
.panel-list::-webkit-scrollbar-thumb{background:rgba(10,20,10,0.05);border-radius:8px}

@media (max-width:720px){.ui-wrapper{left:16px;top:calc(50% + 30px)} .pill-bar.expanded{width:320px} .panel-list{max-height:260px}} 
.info-panel.open{opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto}
.panel-head{display:flex;flex-direction:column;gap:10px;padding:12px}
.search-wrap{display:flex;align-items:center;gap:10px;background:#f0f6f0;padding:8px;border-radius:10px}
.search-icon{color:#7a8b7a;flex:0 0 18px}
.search-input{flex:1;border:none;background:transparent;font-size:14px;outline:none}
.panel-filters{display:flex;gap:8px;flex-wrap:wrap}
.filter{background:transparent;border:none;padding:6px 10px;border-radius:999px;font-size:13px;color:var(--muted);cursor:pointer}
.filter.active{background:rgba(127,209,59,0.12);color:var(--accent)}
.panel-list{margin-top:8px;display:flex;flex-direction:column;gap:10px;max-height:380px;overflow:auto;padding:10px}
.place{display:flex;gap:8px;background:#fff;border-radius:10px;padding:8px;align-items:flex-start;box-shadow:0 6px 12px rgba(6,20,10,0.04);transition:transform .18s ease}
.place-media img{width:84px;height:64px;object-fit:cover;border-radius:8px}
.place-body{flex:1;min-width:0}
.place-name{font-size:14px;color:#07230b}
.place-type{font-size:12px;color:var(--muted);margin-top:4px}
.place-address{font-size:12px;color:#859386;margin-top:6px}
.chip{font-size:11px;padding:5px 8px;border-radius:999px;background:rgba(10,20,10,0.03);color:#274a27}
.detail-card{position:absolute;inset:0;background:#fff;border-radius:14px;box-shadow:0 24px 48px rgba(6,20,10,0.12);z-index:1200;padding:0;overflow:hidden;transform:translateY(6px) scale(.995);opacity:0;pointer-events:none;transition:opacity .32s ease,transform .32s cubic-bezier(.2,.9,.2,1)}
.detail-card.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.detail-close{position:absolute;right:14px;top:14px;border:none;background:rgba(255,255,255,0.92);width:36px;height:36px;border-radius:12px;cursor:pointer;color:#07220a;display:grid;place-items:center}
@media (max-width:720px){.ui-wrapper{left:16px;top:calc(50% + 30px)} .info-panel{width:320px}}
#hoverCardRoot{
position: fixed;
inset: 0;
pointer-events: none;
z-index: 100000;
}