:root{
  --bg:#fbfbfa;
  --card:#ffffff;
  --ink:#161616;
  --muted:#8a8a8e;
  --line:#ececea;
  --line-soft:#f1f1ef;
  --accent:#161616;
  --brand:#F97316;
  --accent-soft:#f4f4f3;
  --radius:18px;
  --max:1360px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#fbfbfa}
body{
  margin:0;background:transparent;color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* ===== HEADER: логотип большой, поиск — главный ===== */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,251,250,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:transform .35s ease;
}
.header.hide{transform:translateY(-101%)}
.header-inner{
  max-width:none;margin:0 auto;
  padding:0 22px;height:70px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;
}
/* левая колонка: отдельный большой логотип + навигация */
.rail{
  width:212px;flex-shrink:0;position:sticky;top:20px;align-self:flex-start;
  display:flex;flex-direction:column;gap:16px;
  transition:transform .4s ease,opacity .4s ease;
}
.rail.hide{transform:translateY(34px);opacity:0;pointer-events:none}
.logo{display:block}
.logo-img{
  width:100%;height:auto;aspect-ratio:1/1;display:block;object-fit:cover;
  border-radius:18px;background:#fff;border:1px solid var(--line);
}
.search{
  flex:1 1 auto;display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:6px 6px 6px 15px;height:50px;max-width:none;min-width:0;
}
.search:focus-within{border-color:#d8d8d5}
.search-ico{color:var(--muted);flex-shrink:0}
.search input{
  flex:1;border:0;outline:0;background:transparent;
  font-size:15px;color:var(--ink);min-width:0;
}
.search input::placeholder{color:#b5b5b2}
.search-clear{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;padding:6px}
.search-btn{
  border:0;background:var(--brand);color:#fff;border-radius:999px;
  height:38px;padding:0 26px;font-size:14px;font-weight:600;cursor:pointer;flex-shrink:0;
}
.search-btn:hover{opacity:.88}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.primary-btn{
  border:0;background:var(--brand);color:#fff;border-radius:999px;
  height:44px;padding:0 22px;font-size:14px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.primary-btn:hover{opacity:.88}
.primary-btn.soft{background:var(--accent-soft);color:var(--ink)}
.primary-btn.big{width:100%;justify-content:center;height:48px;font-size:15px}
.plus{font-size:19px;line-height:1}
.icon-btn{
  position:relative;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--ink);
}
.icon-btn:hover{border-color:#d9d9d6}

/* ===== LAYOUT + SIDEBAR ===== */
.layout{max-width:none;margin:0 auto;display:flex;gap:24px;padding:20px 22px 0;align-items:flex-start}
.sidebar{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;
  display:flex;flex-direction:column;gap:6px;
  transition:transform .4s ease,opacity .4s ease;
}
.sidebar.hide{transform:none;opacity:1}
.side-btn{
  display:flex;align-items:center;gap:12px;width:100%;
  border:1px solid transparent;background:transparent;border-radius:14px;
  padding:12px 14px;font-size:14.5px;font-weight:600;color:#2b2b2b;cursor:pointer;text-align:left;
  position:relative;
}
.side-btn:hover{background:var(--accent-soft)}
.side-btn.active{background:var(--brand);border-color:var(--brand);color:#fff}
.side-ico{
  width:36px;height:36px;border-radius:12px;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
}
.side-btn.active .side-ico{background:rgba(255,255,255,.16)}
.side-badge{
  margin-left:auto;background:var(--brand);color:#fff;border-radius:999px;
  min-width:24px;height:24px;padding:0 7px;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.side-btn.active .side-badge{background:#fff;color:#111}
.side-hint{font-size:12px;color:var(--muted);line-height:1.5;padding:10px 8px 4px}
.content{flex:1;min-width:0}

/* ===== Категории как на Avito: плитки ===== */
.cats{background:transparent;margin-bottom:6px}
.cats-head{display:flex;align-items:baseline;justify-content:space-between;margin:2px 2px 12px}
.cats-head h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.01em}
.link-btn{border:0;background:none;color:var(--muted);font-size:13.5px;font-weight:600;cursor:pointer}
.link-btn:hover{color:var(--ink)}
.cat-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;
}
.cat-tile{
  position:relative;display:flex;align-items:center;gap:14px;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:6px;color:var(--ink);
  padding:20px 16px 18px;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
  overflow:hidden;
}
.cat-tile:hover{transform:translateY(-2px)}
.cat-tile:hover,.cat-tile.active{background:var(--brand);border-color:var(--brand);color:#fff}
.cat-num{
  position:absolute;top:9px;right:12px;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;color:#cfcfcb;
}
.cat-tile:hover .cat-num,.cat-tile.active .cat-num{color:rgba(255,255,255,.45)}
.cat-ico{display:flex;flex-shrink:0;color:#161616;transition:color .25s ease}
.cat-tile:hover .cat-ico,.cat-tile.active .cat-ico{color:#fff}
.cat-tx b{display:block;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.cat-tx small{display:block;color:var(--muted);font-size:12px;margin-top:4px;font-variant-numeric:tabular-nums}
.cat-tile:hover .cat-tx small,.cat-tile.active .cat-tx small{color:rgba(255,255,255,.62)}
.cat-arrow{
  margin-left:auto;font-size:16px;opacity:0;transform:translateX(-6px);
  transition:opacity .25s ease,transform .25s ease;flex-shrink:0;
}
.cat-tile:hover .cat-arrow,.cat-tile.active .cat-arrow{opacity:1;transform:none}

.filters-row{
  display:flex;gap:10px;align-items:center;margin:14px 0 4px;flex-wrap:wrap;
}
.filters-row .dd{min-width:170px}
#sortDD{min-width:185px}
.mini-select{
  border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:9px 14px;font-size:13.5px;color:#3c3c3c;outline:0;cursor:pointer;
}
.status{font-size:12.5px;color:var(--muted);margin-left:auto}

/* ===== Рилс-лента как в Instagram: сверху вниз ===== */
.reels{margin:6px 0 2px}
.reels-hint{font-size:12.5px;color:var(--muted)}
.reels-feed{
  height:calc(100dvh - 130px);min-height:520px;overflow-y:auto;overscroll-behavior:contain;
  scroll-snap-type:y mandatory;scrollbar-width:none;background:transparent;border-radius:20px;
}
.reels-feed::-webkit-scrollbar{display:none}
.reel-full{
  position:relative;height:100%;scroll-snap-align:center;scroll-snap-stop:always;
  display:flex;align-items:flex-start;justify-content:center;background:transparent;
}
.reel-stage{
  position:relative;height:76%;aspect-ratio:9/16;max-width:92%;margin-top:2%;
  border-radius:18px;overflow:hidden;background:#000;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.reel-stage video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.reel-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.62) 0%,transparent 32%,transparent 78%,rgba(0,0,0,.28) 100%);
}
.reel-count{
  position:absolute;top:12px;left:14px;z-index:2;
  color:rgba(255,255,255,.85);font-size:12.5px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.reel-mute{
  position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;
  border:0;background:rgba(0,0,0,.45);color:#fff;font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.reel-mute.on{background:var(--brand)}
.reel-flash{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);z-index:2;
  font-size:64px;color:rgba(255,255,255,.92);opacity:0;pointer-events:none;
  text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.reel-flash.show{animation:flash .55s ease}
@keyframes flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}
.reel-rail{
  position:absolute;right:10px;bottom:110px;z-index:2;
  display:flex;flex-direction:column;gap:12px;align-items:center;
}
.rail-btn{
  width:48px;min-height:48px;border-radius:24px;border:0;background:rgba(0,0,0,.45);color:#fff;
  font-size:20px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:9px 0;
}
.rail-btn small{font-size:10px;font-weight:700}
.rail-btn.on{background:var(--brand)}
.reel-info{position:absolute;left:12px;right:84px;bottom:16px;z-index:2;color:#fff;text-align:left}
.reel-seller{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;margin-bottom:7px}
.reel-ava{
  width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.92);color:#111;
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;
}
.reel-title{
  font-size:14px;font-weight:600;line-height:1.35;margin-bottom:9px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.reel-price{
  display:inline-block;background:#fff;color:#111;border:0;border-radius:999px;
  padding:8px 15px;font-size:13.5px;font-weight:800;cursor:pointer;
}
.reel-price:hover{background:var(--brand);color:#fff}

/* ===== Pinterest-лента: фото со скруглениями, без рамок ===== */
.page{padding:14px 0 50px}
.masonry{columns:6 210px;column-gap:14px}
.card{
  break-inside:avoid;margin:0 0 16px;background:transparent;border:0;
  cursor:pointer;display:inline-block;width:100%;text-align:left;
}
.card-media{position:relative;overflow:hidden;background:var(--accent-soft);border-radius:18px;display:block;width:100%}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.card:hover .card-media img{transform:scale(1.04)}
.card-media::after{
  content:"";position:absolute;inset:0;border-radius:18px;z-index:1;
  background:rgba(0,0,0,0);transition:background .25s ease;pointer-events:none;
}
.card:hover .card-media::after{background:rgba(0,0,0,.14)}
.sz-square .card-media{aspect-ratio:1/1}
.sz-vert .card-media{aspect-ratio:3/4}
.sz-tall .card-media{aspect-ratio:3/4.6}
.sz-horiz .card-media{aspect-ratio:4/3}
.sz-small .card-media{aspect-ratio:1/.82}
.sz-wide .card-media{aspect-ratio:16/10}
.fav{
  position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(0,0,0,.06);background:rgba(255,255,255,.94);
  cursor:pointer;font-size:16px;line-height:1;color:#1c1c1c;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(-4px);transition:.2s;
}
.card:hover .fav,.fav.on{opacity:1;transform:none}
.fav.on{color:#e5484d}
.price-pill{
  position:absolute;left:10px;bottom:10px;
  background:rgba(255,255,255,.95);border:1px solid rgba(0,0,0,.05);
  border-radius:999px;padding:6px 12px;font-weight:800;font-size:14.5px;
}
/* шаблоны блока цены */
.price-pill.ps-s{font-size:12px;padding:4px 10px}
.price-pill.ps-l{font-size:17px;padding:9px 17px}
.price-pill.ps-bar{left:10px;right:10px;text-align:center;border-radius:13px;font-size:15px;padding:10px 12px}
/* пикер шаблона в форме */
.pspick{display:flex;gap:8px;margin-top:6px}
.pspick button{
  flex:1;border:1px solid var(--line);background:#fff;border-radius:12px;
  padding:10px 4px;font-weight:800;cursor:pointer;color:var(--ink);
}
.pspick button[data-ps="s"]{font-size:12px}
.pspick button[data-ps="m"]{font-size:14px}
.pspick button[data-ps="l"]{font-size:17px}
.pspick button[data-ps="bar"]{font-size:14px;letter-spacing:2px}
.pspick button.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.card-body{padding:10px 4px 0}
.card-title{margin:0 0 4px;font-size:14.5px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-sub{margin:0;font-size:12.8px;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{margin-top:9px;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.card-meta .dot{opacity:.5}

.empty{display:flex;justify-content:center;padding:40px 0}
.empty-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:38px 48px;text-align:center}
.empty-title{font-size:18px;font-weight:700;margin:0 0 6px}
.empty-sub{color:var(--muted);font-size:14px;margin:0 0 18px}
.loader{text-align:center;color:var(--muted);font-size:13px;padding:26px 0}
.skeleton-row{display:flex;gap:10px;justify-content:center;margin-bottom:12px}
.skeleton-row span{width:120px;height:8px;border-radius:99px;background:#eee;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

.footer{
  padding:22px 2px;border-top:1px solid var(--line);
  display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px;flex-wrap:wrap;
}
.to-top{margin-left:auto;border:1px solid var(--line);border-radius:999px;padding:8px 16px;background:#fff}

/* ===== Модалки ===== */
.detail{position:fixed;inset:0;z-index:100;display:flex;justify-content:center;align-items:flex-start;overflow-y:auto;padding:34px 16px}
.detail[hidden]{display:none}
.detail-backdrop{position:fixed;inset:0;background:rgba(20,20,20,.42);backdrop-filter:blur(3px)}
.detail-card{
  position:relative;background:#fff;border-radius:24px;max-width:980px;width:100%;
  overflow:hidden;display:grid;grid-template-columns:1.05fr 1fr;
  animation:up .28s ease;
}
@keyframes up{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.detail-media{position:relative;background:#f3f3f1;min-height:420px}
.detail-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fav-big{width:44px;height:44px;font-size:20px;opacity:1;transform:none}
.detail-body{padding:28px 30px}
.crumbs{font-size:12.5px;color:var(--muted);display:flex;gap:7px;margin-bottom:10px}
.detail-body h1{margin:0 0 10px;font-size:25px;line-height:1.25;letter-spacing:-.01em}
.d-price{font-size:23px;font-weight:800;margin:0 0 10px}
.d-short{color:#555;font-size:14.5px;margin:0 0 12px}
.d-desc{font-size:14.5px;line-height:1.65;color:#333;background:var(--accent-soft);border-radius:14px;padding:14px 16px;margin:0 0 18px}
.seller{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:14px}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.avatar.big{width:60px;height:60px;font-size:24px}
.seller-name{font-weight:700;font-size:14.5px}
.seller-sub{font-size:12.5px;color:var(--muted)}
.seller .primary-btn{margin-left:auto}
.d-meta{font-size:12.5px;color:var(--muted);margin-bottom:18px}
.rel-title{font-size:14px;margin:0 0 10px}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rel{border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;background:#fff}
.rel img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.rel div{padding:8px 10px;font-size:12.5px}
.rel strong{display:block;font-size:13px}
.close{position:absolute;top:14px;right:14px;z-index:2}

.profile-card{display:block;max-width:560px;padding:28px}
.profile-top{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.profile-top h2{margin:0;font-size:22px}
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.profile-stats div{background:var(--accent-soft);border-radius:16px;padding:14px;text-align:center}
.profile-stats strong{display:block;font-size:20px}
.profile-stats span{font-size:12px;color:var(--muted)}
.profile-actions{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}

.map-card{display:block;max-width:860px;padding:26px}
.map-head h2{margin:0 0 4px}
.map-controls{display:flex;gap:10px;align-items:center;margin:12px 0 14px;flex-wrap:wrap}
.dd{position:relative;min-width:190px}
.dd-btn{
  width:100%;display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:11px 14px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:border-color .2s ease;
}
.dd-btn:hover,.dd-btn.open{border-color:var(--brand)}
.dd-val{flex:1;display:flex;align-items:center;gap:9px;white-space:nowrap;overflow:hidden}
.dd-val .dd-ico{display:flex;color:#161616}
.dd-val .dd-ico svg{width:19px;height:19px}
.dd-val .dd-ico.all{font-size:14px}
.dd-chev{color:var(--muted);font-size:12px;transition:transform .2s ease}
.dd-btn.open .dd-chev{transform:rotate(180deg)}
.dd-panel{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:6px;max-height:290px;overflow-y:auto;
  box-shadow:0 14px 40px rgba(0,0,0,.12);
  animation:up .18s ease;min-width:210px;
}
.dd-opt{
  width:100%;display:flex;align-items:center;gap:10px;
  border:0;background:transparent;border-radius:10px;
  padding:10px 11px;font-size:13.5px;font-weight:500;color:#2b2b2b;cursor:pointer;text-align:left;
}
.dd-opt:hover{background:var(--accent-soft)}
.dd-opt.sel{background:var(--brand);border-color:var(--brand);color:#fff}
.dd-opt .dd-ico{display:flex}
.dd-opt .dd-ico svg{width:19px;height:19px}
.dd-opt .dd-ico.all{font-size:14px;width:19px;text-align:center}
.dd-opt.sel .dd-ico{color:#fff}
.dd-check{margin-left:auto;font-size:12px;font-weight:700;width:16px}
.dd-sec{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:10px 11px 4px;
}
.dd-sec:first-child{padding-top:4px}
.dd-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.12)}
.seg{
  display:flex;background:var(--accent-soft);border:1px solid var(--line);
  border-radius:999px;padding:3px;gap:2px;margin-left:auto;flex-shrink:0;
}
.seg button{
  border:0;background:transparent;border-radius:999px;
  padding:9px 16px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;
}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.mappin-ph{
  display:block;width:64px;height:64px;border-radius:16px;overflow:hidden;
  border:3px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.35);cursor:pointer;background:#eee;
}
.mappin-ph img{width:100%;height:100%;object-fit:cover;display:block}
.mappin-ph:hover{transform:scale(1.08)}
.pin.ph{padding:0;width:56px;height:56px;overflow:hidden;border-radius:14px}
.pin.ph img{width:100%;height:100%;object-fit:cover;display:block}
.chip{
  border:1px solid var(--line);background:#fff;color:#3c3c3c;
  border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:500;
  cursor:pointer;white-space:nowrap;flex-shrink:0;
}
.chip:hover{border-color:#d5d5d2}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff}
.chip.sm{padding:7px 12px;font-size:12.5px}
.map-canvas{
  position:relative;height:480px;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:#eef0ec;z-index:0;
}
.leaflet-container{font-family:inherit;border-radius:18px}
.mappin-wrap{background:none;border:0}
.mappin{
  transform:translate(-50%,-100%);background:var(--brand);color:#fff;border-radius:999px;
  padding:6px 11px;font-size:12px;font-weight:700;white-space:nowrap;position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer;
}
.mappin::after{
  content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--brand);border-bottom:0;
}
.mappin:hover{transform:translate(-50%,-100%) scale(1.08)}
.mpop{min-width:170px;text-align:left}
.mpop img{width:100%;height:110px;object-fit:cover;border-radius:10px;display:block;margin-bottom:8px}
.mpop b{display:block;font-size:15px;margin-bottom:2px}
.mpop span{display:block;font-size:12.5px;color:#333;line-height:1.35;margin-bottom:2px}
.mpop small{display:block;font-size:11.5px;color:var(--muted);margin-bottom:8px}
.mpop button{
  border:0;background:var(--brand);color:#fff;border-radius:999px;
  padding:8px 18px;font-size:13px;font-weight:600;cursor:pointer;width:100%;
}
.pin{
  position:absolute;transform:translate(-50%,-100%);z-index:2;
  background:var(--brand);color:#fff;border-radius:999px;padding:6px 11px;font-size:12px;font-weight:700;
  cursor:pointer;white-space:nowrap;border:0;
}
.pin::after{
  content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--brand);border-bottom:0;
}
.pin:hover{transform:translate(-50%,-100%) scale(1.08)}
.map-legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--muted)}

.form-card{display:block;max-width:520px;padding:30px}
.form-card h2{margin:0}
.form-sub{color:var(--muted);font-size:13.5px;margin:6px 0 18px}
.form-card label{display:block;font-size:13px;font-weight:600;margin-bottom:12px}
.form-card input,.form-card select,.form-card textarea{
  display:block;width:100%;margin-top:6px;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:14px;font-family:inherit;outline:0;background:#fff;color:var(--ink);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--brand);color:#fff;border-radius:999px;padding:12px 22px;font-size:14px;z-index:200;
}

/* ===== Меню категорий в header ===== */
.catmenu-wrap{position:relative}
.catmenu-panel{left:auto;right:0;min-width:260px}
#catMenuBtn.open,#catMenuBtn.on{background:var(--brand);border-color:var(--brand);color:#fff}
[data-theme="dark"] #catMenuBtn.open,[data-theme="dark"] #catMenuBtn.on{background:var(--brand);border-color:var(--brand);color:#fff}

body[data-accent="classic"]{--brand:#161616}
body[data-accent="classic"][data-theme="dark"]{--brand:#f2f2ef}

/* ===== Тумблер темы: луна ⇄ солнце ===== */
.theme-btn{display:grid;place-items:center}
.theme-btn svg{grid-area:1/1;transition:opacity .45s ease,transform .65s cubic-bezier(.4,0,.2,1)}
.theme-btn .ic-sun{opacity:0;transform:rotate(120deg) scale(.4)}
[data-theme="dark"] .theme-btn .ic-moon{opacity:0;transform:rotate(-120deg) scale(.4)}
[data-theme="dark"] .theme-btn .ic-sun{opacity:1;transform:rotate(0) scale(1)}

/* ===== Кнопка анимации фона ===== */
.arc-btn svg{transition:transform .5s cubic-bezier(.4,0,.2,1)}
.arc-btn.on{background:var(--brand);border-color:var(--brand);color:#fff}
.arc-btn.on svg{transform:rotate(72deg) scale(1.08)}
[data-theme="dark"] .arc-btn.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* ===== Кнопка музыки: нота ⇄ эквалайзер + магия ===== */
.music-btn{display:grid;place-items:center;overflow:visible}
.music-btn .ic-note{grid-area:1/1;transition:opacity .3s,transform .5s cubic-bezier(.4,0,.2,1)}
.music-btn .ic-eq{
  grid-area:1/1;display:none;align-items:flex-end;gap:2.5px;height:16px;
}
.music-btn .ic-eq i{width:3px;border-radius:2px;background:currentColor;animation:eqB .9s ease-in-out infinite}
.music-btn .ic-eq i:nth-child(1){height:60%;animation-delay:0s}
.music-btn .ic-eq i:nth-child(2){height:100%;animation-delay:.22s}
.music-btn .ic-eq i:nth-child(3){height:45%;animation-delay:.44s}
.music-btn .ic-eq i:nth-child(4){height:75%;animation-delay:.11s}
@keyframes eqB{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.music-btn.playing .ic-note{opacity:0;transform:scale(.4) rotate(-20deg)}
.music-btn.playing .ic-eq{display:flex}
.music-btn.playing{border-color:var(--brand);color:var(--brand);animation:pulseGlow 1.8s ease-out infinite}
@keyframes pulseGlow{
  0%{box-shadow:0 0 0 0 rgba(249,115,22,.45)}
  70%{box-shadow:0 0 0 16px rgba(249,115,22,0)}
  100%{box-shadow:0 0 0 0 rgba(249,115,22,0)}
}
/* взрыв искр и ударная волна */
.spark{
  position:fixed;z-index:300;pointer-events:none;border-radius:50%;
  width:7px;height:7px;background:var(--brand);
  animation:sparkFly 1s cubic-bezier(.15,.7,.3,1) forwards;
}
.spark.alt{background:#ffd166}
@keyframes sparkFly{
  0%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(0) rotate(200deg);opacity:0}
}
.shock{
  position:fixed;z-index:299;pointer-events:none;border-radius:50%;
  border:2px solid var(--brand);
  animation:shockWave .8s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes shockWave{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:.9}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}

/* ===== WebGL-фон Pixel Arc ===== */
#pixelArc{
  position:fixed;inset:0;width:100%;height:100%;z-index:-1;
  opacity:0;transition:opacity 1.6s ease;pointer-events:none;display:block;
}
#pixelArc.on{opacity:1}

/* Плавный перекрас при смене темы (без box-shadow — он тормозит) */
body.theming,body.theming *{transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease,stroke .35s ease}
.leaflet-tile-pane{transition:filter .35s ease}

/* ===== ТЁМНАЯ ТЕМА ===== */
html:has(body[data-theme="dark"]){background:#030308}
body[data-theme="dark"]{
  --bg:transparent;
  --card:#111116;
  --ink:#f2f2ef;
  --muted:#b6b6bd;
  --line:#26262d;
  --line-soft:#1c1c22;
  --accent:#f2f2ef;
  --accent-soft:#17171d;
}
/* тексты поверх анимированного фона — с тенью для читаемости */
[data-theme="dark"] .status,
[data-theme="dark"] .map-legend,
[data-theme="dark"] .side-hint,
[data-theme="dark"] .footer,
[data-theme="dark"] .loader,
[data-theme="dark"] .cats-head h2,
[data-theme="dark"] .link-btn{text-shadow:0 1px 12px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9)}
[data-theme="dark"] .header{background:rgba(6,6,11,.72)}
[data-theme="dark"] .search,
[data-theme="dark"] .icon-btn,
[data-theme="dark"] .detail-card,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .cat-tile,
[data-theme="dark"] .dd-btn,
[data-theme="dark"] .dd-panel,
[data-theme="dark"] .empty-card,
[data-theme="dark"] .rel,
[data-theme="dark"] .to-top{background:#111116}
[data-theme="dark"] .form-card input,
[data-theme="dark"] .form-card select,
[data-theme="dark"] .form-card textarea{background:#17171d}
[data-theme="dark"] .card{background:transparent}
[data-theme="dark"] .card:hover{border-color:#3a3a44}
[data-theme="dark"] .card-media,
[data-theme="dark"] .detail-media{background:#1a1a21}
[data-theme="dark"] .search input::placeholder{color:#5c5c63}
/* светлые кнопки в тёмной теме — тёмный текст */
[data-theme="dark"] .primary-btn,
[data-theme="dark"] .search-btn,
[data-theme="dark"] .side-btn.active,
[data-theme="dark"] .chip.active,
[data-theme="dark"] .avatar,
[data-theme="dark"] .badge,
[data-theme="dark"] .side-badge,
[data-theme="dark"] .dd-opt.sel,
[data-theme="dark"] .mpop button,
[data-theme="dark"] .cat-tile:hover,
[data-theme="dark"] .cat-tile.active{color:#0b0b0e}
[data-theme="dark"] .side-btn{color:var(--ink)}
[data-theme="dark"] .cat-ico{color:var(--ink)}
[data-theme="dark"] .cat-tile:hover .cat-ico,
[data-theme="dark"] .cat-tile.active .cat-ico{color:#0b0b0e}
[data-theme="dark"] .cat-num{color:#4a4a52}
[data-theme="dark"] .cat-tile:hover .cat-num,
[data-theme="dark"] .cat-tile.active .cat-num{color:rgba(11,11,14,.5)}
[data-theme="dark"] .cat-tile:hover .cat-tx small,
[data-theme="dark"] .cat-tile.active .cat-tx small{color:rgba(11,11,14,.62)}
[data-theme="dark"] .cat-arrow{color:inherit}
[data-theme="dark"] .dd-btn:hover,[data-theme="dark"] .dd-btn.open{border-color:#f2f2ef}
[data-theme="dark"] .dd-opt{color:#d7d7dc}
[data-theme="dark"] .dd-opt .dd-ico{color:#d7d7dc}
[data-theme="dark"] .dd-opt.sel .dd-ico{color:#0b0b0e}
[data-theme="dark"] .seg button.on{background:#26262e;color:var(--ink)}
[data-theme="dark"] .d-short{color:#b9b9bf}
[data-theme="dark"] .d-desc{color:#d7d7db}
[data-theme="dark"] .price-pill{background:rgba(17,17,22,.94);border-color:rgba(255,255,255,.09)}
[data-theme="dark"] .fav{background:rgba(20,20,27,.92);color:#f2f2ef;border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .fav.on{color:#ff6b6b}
[data-theme="dark"] .skeleton-row span{background:#232329}
[data-theme="dark"] .close{color:var(--ink)}
/* тёмная подложка карты */
[data-theme="dark"] .map-canvas{background:#0b0b10}
[data-theme="dark"] .leaflet-container{background:#0b0b10}
[data-theme="dark"] .leaflet-tile-pane{filter:invert(.92) hue-rotate(180deg) saturate(.55) brightness(.92)}
[data-theme="dark"] .leaflet-popup-content-wrapper{background:#14141a;color:#f2f2ef}
[data-theme="dark"] .leaflet-popup-tip{background:#14141a}
[data-theme="dark"] .leaflet-popup-close-button{color:#9b9ba1 !important}
[data-theme="dark"] .leaflet-bar a{background:#14141a;color:#f2f2ef;border-color:#26262d}
[data-theme="dark"] .leaflet-control-attribution{background:rgba(10,10,15,.7);color:#6a6a72}
[data-theme="dark"] .leaflet-control-attribution a{color:#8a8a93}
[data-theme="dark"] .mpop span{color:#cfcfd4}

/* ===== Адаптив ===== */
@media (max-width:1100px){
  .masonry{columns:4 200px}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .header-inner{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:10px 14px;height:auto}
  .header-actions{justify-self:end}
  .search{grid-column:1/-1;order:3;max-width:none}
  .layout{padding:14px 14px 90px;gap:0}
  .rail{position:static;width:auto;display:block}
  .rail.hide{transform:none;opacity:1;pointer-events:auto}
  .logo{margin-bottom:12px;max-width:180px}
  .logo-img{width:100%;height:auto}
  .sidebar{
    position:fixed;left:10px;right:10px;bottom:10px;top:auto;z-index:60;
    width:auto;flex-direction:row;justify-content:space-around;padding:8px;border-radius:18px;
  }
  .sidebar.hide{transform:translateY(150%);opacity:0;pointer-events:none}
  .side-btn{flex-direction:column;gap:4px;font-size:11px;padding:8px 10px;width:auto;flex:1;align-items:center}
  .side-ico{width:34px;height:34px}
  .side-hint{display:none}
  .side-badge{position:absolute;top:2px;right:8px;margin:0}
  .detail-card{grid-template-columns:1fr}
  .detail-media{min-height:300px;height:340px}
  .add-label{display:none}
}
@media (max-width:640px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .cat-tile{padding:16px 13px 14px;gap:11px}
  .cat-ico svg{width:24px;height:24px}
  .cat-arrow{display:none}
  .masonry{columns:2 150px;column-gap:12px}
  .card{margin-bottom:16px}
  .card-body{padding:8px 2px 0}
  .fav{opacity:1;transform:none;width:30px;height:30px;font-size:14px}
  .related{grid-template-columns:repeat(2,1fr)}
  .detail{padding:0}
  .detail-card{border-radius:0;min-height:100dvh}
  .reels-feed{height:calc(100dvh - 190px);min-height:440px;border-radius:14px}
  .map-canvas{height:62vh}
  .map-card{padding:18px}
  .form-row{grid-template-columns:1fr}
  .profile-actions .primary-btn{flex:1;justify-content:center}
}