:root{
  --bg:#f6f3ec;
  --surface:#fffdf9;
  --surface-2:#f0ece3;
  --text:#1c211d;
  --muted:#6e746e;
  --line:#e4ded2;
  --accent:#a15d3a;
  --accent-soft:#efe0d6;
  --shadow:0 14px 40px rgba(35,31,24,.09);
  --radius:22px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);overflow:hidden}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit}
.appShell{height:100dvh;display:grid;grid-template-columns:minmax(330px,410px) 1fr;gap:0;background:var(--surface)}
.sidebar{min-width:0;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;z-index:500}
.brandBlock{padding:24px 22px 16px}
.brandTopline{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:28px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brandMark{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;background:var(--accent);color:#fff;font-size:16px;box-shadow:0 7px 20px rgba(161,93,58,.25)}
.brand strong{display:block;font-size:15px;line-height:1.05;letter-spacing:.02em}
.brand small{display:block;margin-top:4px;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.topActions{display:flex;align-items:center;gap:7px}
.langSwitch{display:flex;padding:3px;background:var(--surface-2);border-radius:11px}
.lang{border:0;background:transparent;border-radius:8px;padding:7px 8px;color:var(--muted);font-size:11px;font-weight:800;cursor:pointer}
.lang.active{background:var(--surface);color:var(--text);box-shadow:0 2px 7px rgba(35,31,24,.08)}
.iconBtn{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;background:var(--surface);text-decoration:none;color:var(--muted);font-size:14px}
.iconBtn:hover{color:var(--text);border-color:#d1c8ba}
h1{margin:0;max-width:330px;font-size:clamp(27px,3vw,36px);line-height:1.03;letter-spacing:-.045em;font-weight:760}
.brandBlock p{margin:13px 0 0;color:var(--muted);line-height:1.5;font-size:14px;max-width:330px}
.searchBlock{padding:0 22px 14px;border-bottom:1px solid var(--line)}
.searchBox{height:46px;display:flex;align-items:center;gap:9px;padding:0 11px 0 14px;border:1px solid var(--line);background:#fff;border-radius:14px;transition:.2s ease}
.searchBox:focus-within{border-color:#c8ab99;box-shadow:0 0 0 4px rgba(161,93,58,.08)}
.searchBox>span{font-size:22px;color:#9b9d98;line-height:1;transform:rotate(-18deg)}
.searchBox input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:14px}
.searchBox input::placeholder{color:#9a9d98}
.clearSearch{width:28px;height:28px;display:none;place-items:center;border:0;border-radius:9px;background:var(--surface-2);color:var(--muted);cursor:pointer;font-size:17px;line-height:1}
.clearSearch.visible{display:grid}
.categoryPills{display:flex;gap:7px;overflow-x:auto;padding:12px 0 3px;scrollbar-width:none}
.categoryPills::-webkit-scrollbar{display:none}
.pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--muted);padding:8px 10px;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer;transition:.16s ease}
.pill:hover{border-color:#d4cabc;color:var(--text)}
.pill.active{background:var(--text);border-color:var(--text);color:#fff;box-shadow:0 5px 14px rgba(28,33,29,.12)}
.resultsMeta{display:flex;align-items:center;gap:5px;margin-top:10px;color:var(--muted);font-size:12px}
.resultsMeta strong{color:var(--text)}
.textBtn{margin-left:auto;border:0;background:transparent;color:var(--accent);padding:4px 0;font-size:12px;font-weight:700;cursor:pointer}
.placeList{flex:1;overflow-y:auto;padding:12px 13px 26px 14px;scrollbar-width:thin;scrollbar-color:#d8d1c6 transparent}
.placeCard{position:relative;padding:8px;border:1px solid transparent;border-radius:18px;display:grid;grid-template-columns:96px 1fr;gap:12px;cursor:pointer;transition:.18s ease;margin-bottom:5px;background:transparent}
.placeCard:hover{background:#faf7f1}
.placeCard.active{background:#f6efe8;border-color:#ead9cc}
.cardMedia{width:96px;height:96px;border-radius:14px;overflow:hidden;background:var(--surface-2);position:relative}
.cardMedia img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s ease}
.placeCard:hover .cardMedia img{transform:scale(1.035)}
.cardMedia.noPhoto{display:grid;place-items:center;font-size:29px;color:#b3aa9c;background:linear-gradient(145deg,#f1ece4,#e8e0d4)}
.cardBody{min-width:0;padding:3px 4px 3px 0;align-self:center}
.categoryTag{display:inline-flex;align-items:center;gap:5px;color:var(--accent);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.055em}
.cardBody h2{margin:5px 0 5px;font-size:15px;line-height:1.23;letter-spacing:-.015em}
.cardAddress,.cardNotes{margin:0;color:var(--muted);font-size:11.5px;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.cardAddress{-webkit-line-clamp:1}
.cardNotes{margin-top:4px;-webkit-line-clamp:2}
.cardCoords{margin-top:7px;color:#9a9a94;font-size:10.5px;font-variant-numeric:tabular-nums}
.noResults{margin:18px 8px;padding:28px 18px;border:1px dashed var(--line);border-radius:18px;text-align:center;color:var(--muted);font-size:13px}
.sidebarFooter{display:flex;justify-content:space-between;gap:10px;padding:11px 22px calc(11px + env(safe-area-inset-bottom));border-top:1px solid var(--line);color:#989b96;font-size:10.5px;background:var(--surface)}
.mapPane{position:relative;min-width:0;overflow:hidden;background:#dfe3dc}
#map{position:absolute;inset:0}
.leaflet-control-attribution{font-size:9px!important;background:rgba(255,255,255,.78)!important;backdrop-filter:blur(8px)}
.leaflet-control-zoom{border:0!important;box-shadow:var(--shadow)!important;margin:18px!important}
.leaflet-control-zoom a{width:36px!important;height:36px!important;line-height:34px!important;border:0!important;color:var(--text)!important;background:rgba(255,253,249,.94)!important}
.leaflet-control-zoom a:first-child{border-radius:12px 12px 0 0!important}
.leaflet-control-zoom a:last-child{border-radius:0 0 12px 12px!important}
.mapFloatingActions{position:absolute;right:18px;top:18px;z-index:450;display:flex;gap:8px}
.mapBtn{width:42px;height:42px;border:1px solid rgba(228,222,210,.9);border-radius:13px;background:rgba(255,253,249,.94);backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(35,31,24,.10);cursor:pointer;color:var(--text);font-size:19px;display:grid;place-items:center}
.mapBtn:hover{background:#fff}
.mapBtn.loading{animation:pulse 1s infinite alternate}
@keyframes pulse{to{opacity:.45}}
.mapHint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:450;background:rgba(28,33,29,.85);color:#fff;padding:8px 12px;border-radius:999px;font-size:11px;backdrop-filter:blur(12px);box-shadow:0 7px 18px rgba(20,20,18,.16);pointer-events:none;white-space:nowrap}
.customMarker{background:transparent;border:0}
.markerPin{width:36px;height:36px;border-radius:13px 13px 13px 4px;transform:rotate(-45deg);display:grid;place-items:center;border:2px solid rgba(255,255,255,.9);box-shadow:0 6px 16px rgba(33,33,28,.25);transition:.15s ease}
.markerPin span{transform:rotate(45deg);font-size:15px;line-height:1}
.markerPin.cats{background:#ad6540}.markerPin.murals{background:#596a89}.markerPin.food{background:#5c785d}.markerPin.other{background:#6d6f6a}
.leaflet-marker-icon:hover .markerPin{transform:rotate(-45deg) scale(1.08)}
.leaflet-popup-content-wrapper{border-radius:18px!important;box-shadow:0 16px 50px rgba(35,31,24,.18)!important;padding:0!important;overflow:hidden}
.leaflet-popup-content{margin:0!important;width:240px!important}
.leaflet-popup-tip{box-shadow:none!important}
.popupCard{background:#fff}
.popupPhoto{width:100%;height:125px;object-fit:cover;display:block;background:var(--surface-2)}
.popupBody{padding:13px 14px 14px}
.popupTag{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.popupBody h3{margin:4px 0 5px;font-size:15px;line-height:1.25}
.popupBody p{margin:0 0 10px;color:var(--muted);font-size:11px;line-height:1.4}
.popupActions{display:flex;gap:7px}
.popupBtn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:10px;background:var(--text);color:#fff;padding:8px 10px;font-size:10px;font-weight:800}
.lightbox{position:fixed;inset:0;background:rgba(18,18,17,.92);display:none;align-items:center;justify-content:center;padding:24px;z-index:9999;backdrop-filter:blur(10px)}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1100px,94vw);max-height:90vh;border-radius:18px;box-shadow:0 25px 90px rgba(0,0,0,.45)}
.lbClose{position:absolute;top:18px;right:20px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;border-radius:999px;width:40px;height:40px;cursor:pointer;font-size:24px;line-height:1;backdrop-filter:blur(9px)}

@media (max-width:820px){
  body{overflow:auto;background:var(--surface)}
  .appShell{height:auto;min-height:100dvh;display:flex;flex-direction:column}
  .sidebar{display:contents}
  .brandBlock{order:1;padding:18px 16px 12px;background:var(--surface)}
  .brandTopline{margin-bottom:18px}
  h1{font-size:30px;max-width:520px}
  .brandBlock p{max-width:520px}
  .searchBlock{order:2;padding:0 16px 13px;background:var(--surface);position:sticky;top:0;z-index:700;box-shadow:0 8px 20px rgba(35,31,24,.035)}
  .mapPane{order:3;position:relative;height:56vh;min-height:380px}
  #map{position:absolute}
  .placeList{order:4;overflow:visible;padding:12px 10px 26px;background:var(--surface)}
  .sidebarFooter{order:5;padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
  .placeCard{grid-template-columns:112px 1fr;padding:8px}
  .cardMedia{width:112px;height:104px}
  .mapHint{bottom:12px;font-size:10px}
  .leaflet-control-zoom{margin:12px!important}
  .mapFloatingActions{top:12px;right:12px}
}
@media (max-width:430px){
  .adminBtn{display:none}
  .brandBlock{padding-top:14px}
  .brandTopline{margin-bottom:15px}
  .brandMark{width:35px;height:35px;border-radius:12px}
  h1{font-size:27px}
  .brandBlock p{font-size:13px}
  .mapPane{height:52vh;min-height:330px}
  .placeCard{grid-template-columns:96px 1fr}
  .cardMedia{width:96px;height:96px}
  .mapHint{display:none}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}