/* =========================================================
   UCHKO‘PRIK DIGITAL DISTRICT — PERFORMANCE UI V4
   Static white blur glass + GPU-friendly motion
========================================================= */

:root{
  --bg:#020407;
  --text:#f8fbff;
  --muted:#9eabb5;
  --faint:#71808a;
  --line:rgba(255,255,255,.13);
  --line2:rgba(255,255,255,.22);
  --glass:rgba(255,255,255,.055);
  --glass-strong:rgba(14,18,23,.78);
  --panel-dark:rgba(5,9,13,.78);
  --accent:#6eefff;
  --ease:cubic-bezier(.16,1,.3,1);
  --font-scale:1;
}

html[data-theme="light"]{
  --bg:#f2f5f7;
  --text:#10202b;
  --muted:#5f707c;
  --faint:#84919a;
  --line:rgba(16,35,47,.12);
  --line2:rgba(16,35,47,.20);
  --glass:rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.86);
  --panel-dark:rgba(245,249,251,.86);
}

*{
  box-sizing:border-box;
}

body.ux-v2{
  margin:0;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  font-size:calc(16px * var(--font-scale));
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

body.ux-v2 button,
body.ux-v2 input,
body.ux-v2 textarea{
  font:inherit;
  color:inherit;
}

body.ux-v2 button{
  border:0;
}

.hidden{
  display:none!important;
}

.icon,
.icon svg{
  display:grid;
  place-items:center;
}

.icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

body.ux-v2 .app-shell,
body.ux-v2 .map-stage{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
}


/* =========================================================
   MAP
========================================================= */

body.ux-v2 #map{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background:#000!important;
  transition:
    left .56s var(--ease),
    top .56s var(--ease),
    width .56s var(--ease),
    height .56s var(--ease),
    border-radius .56s var(--ease),
    opacity .35s ease!important;
  will-change:auto;
}

body.ux-v2 #map .maplibregl-canvas{
  filter:brightness(.70) saturate(.72) contrast(1.14)!important;
}

html[data-theme="light"] body.ux-v2 #map .maplibregl-canvas{
  filter:brightness(1.02) saturate(.88)!important;
}

.map-vignette{
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(
      circle at 50% 45%,
      transparent 55%,
      rgba(0,0,0,.24) 100%
    )!important;
}

.maplibregl-ctrl-group{
  background:rgba(15,18,22,.78)!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:14px!important;
  overflow:hidden!important;
  box-shadow:none!important;
}

.maplibregl-ctrl-group button{
  filter:invert(1) brightness(1.3);
}


/* =========================================================
   WHITE STATIC BLUR GLASS
========================================================= */

body.ux-v2 .glass,
body.ux-v2 .floating{
  position:relative;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.025)
    ),
    var(--glass)!important;
  border:1px solid var(--line)!important;
  box-shadow:
    0 14px 36px rgba(0,0,0,.20),
    inset 0 1px rgba(255,255,255,.11)!important;
  backdrop-filter:blur(12px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(12px) saturate(112%)!important;
}

html.reduce-transparency body.ux-v2 .glass,
html.reduce-transparency body.ux-v2 .floating{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:var(--glass-strong)!important;
}


/* =========================================================
   TOPBAR
========================================================= */

body.ux-v2 .topbar{
  position:fixed!important;
  top:14px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:min(980px,calc(100vw - 36px))!important;
  height:60px!important;
  padding:8px 10px!important;
  border-radius:22px!important;
  display:grid!important;
  grid-template-columns:minmax(170px,1fr) auto minmax(170px,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  z-index:50!important;
}

.ux-top-left{
  justify-self:start;
}

.ux-top-right{
  justify-self:end;
  display:flex;
  gap:6px;
  align-items:center;
}

.ux-district-title{
  min-width:270px;
  height:42px;
  padding:0 24px;
  border-radius:15px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
}

/* SEO semantic H1 + backward compatibility */
.ux-district-title h1,
.ux-district-title strong{
  margin:0;
  padding:0;
  font-size:.76rem;
  line-height:1.1;
  letter-spacing:.15em;
  font-weight:800;
  color:var(--text);
}

.ux-district-title small{
  font-size:.58rem;
  color:var(--muted);
  margin-top:3px;
}

.ux-top-button,
.topbar .icon-btn,
.language-btn{
  height:40px!important;
  padding:0 13px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  cursor:pointer;
  transition:
    transform .18s var(--ease),
    background-color .18s ease,
    border-color .18s ease!important;
}

.ux-top-button:hover,
.topbar .icon-btn:hover,
.language-btn:hover{
  background:rgba(255,255,255,.085)!important;
  border-color:var(--line2)!important;
  transform:translateY(-1px);
}

.ux-top-button:active,
.topbar .icon-btn:active,
.language-btn:active{
  transform:scale(.96);
}

.ux-top-button .icon{
  width:17px;
  height:17px;
}

.ux-top-button span:last-child{
  font-size:.68rem;
  font-weight:740;
}

.topbar .icon-btn{
  width:40px!important;
  padding:0!important;
}

.language-btn{
  min-width:56px!important;
}


/* =========================================================
   FILTERS
========================================================= */

.explore-panel{
  position:fixed!important;
  left:14px!important;
  top:92px!important;
  width:292px!important;
  max-height:calc(100vh - 188px)!important;
  padding:17px!important;
  overflow:auto!important;
  border-radius:28px!important;
  z-index:38!important;
  transition:
    opacity .28s ease,
    transform .34s var(--ease)!important;
}

.panel-header{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  margin-bottom:14px!important;
}

.panel-header .eyebrow,
.eyebrow{
  display:block;
  color:#8cefff;
  font-size:.59rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:4px;
}

/* H2 semantic support */
.panel-header h1,
.panel-header h2{
  font-size:.96rem!important;
  line-height:1.2;
  margin:0!important;
}

.panel-close,
.icon-btn{
  display:grid!important;
  place-items:center!important;
  width:34px;
  height:34px;
  border-radius:12px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid var(--line)!important;
  cursor:pointer;
}

.section-title-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  margin:14px 0 8px!important;
}

.section-title-row h2{
  font-size:.60rem!important;
  color:var(--muted)!important;
  text-transform:uppercase;
  letter-spacing:.10em;
  margin:0!important;
}

.text-btn,
.filter-reset{
  background:none!important;
  color:#87ebff!important;
  font-size:.60rem!important;
  font-weight:700!important;
  cursor:pointer;
}

.category-grid{
  display:grid!important;
  gap:7px!important;
}

.category-chip,
.filter-specialization{
  width:100%!important;
  min-height:40px!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.075)!important;
  color:var(--muted)!important;
  cursor:pointer!important;
  transition:
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease!important;
}

.category-chip{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  padding:0 12px!important;
}

.category-chip:hover,
.category-chip.active,
.filter-specialization:hover,
.filter-specialization.active{
  background:rgba(255,255,255,.075)!important;
  border-color:var(--line2)!important;
  color:var(--text)!important;
}

.category-chip .dot,
.filter-specialization .color{
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  box-shadow:0 0 7px currentColor;
}

.filter-specializations{
  margin-top:16px!important;
  padding-top:14px!important;
  border-top:1px solid var(--line)!important;
}

.filter-specializations-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  margin-bottom:8px;
}

.filter-specializations-head strong{
  font-size:.59rem;
  color:var(--muted);
  letter-spacing:.1em;
  text-transform:uppercase;
}

.filter-specializations-list{
  display:grid!important;
  gap:6px!important;
}

.filter-specialization{
  padding:0 10px!important;
  display:grid!important;
  grid-template-columns:10px 1fr auto!important;
  align-items:center!important;
  gap:9px!important;
  text-align:left!important;
}

.filter-specialization .color{
  background:var(--spec-color)!important;
}

.filter-specialization .name{
  font-size:.67rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.filter-specialization .count{
  font-size:.61rem;
  color:var(--faint);
}

.ux-filter-toggle{
  position:fixed!important;
  left:16px!important;
  top:94px!important;
  width:46px!important;
  height:46px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:16px!important;
  z-index:39!important;
  opacity:0;
  pointer-events:none;
  transform:translateX(-12px);
  transition:
    opacity .25s ease,
    transform .3s var(--ease)!important;
}

.filter-closed .explore-panel{
  opacity:0!important;
  pointer-events:none!important;
  transform:translateX(-28px)!important;
}

.filter-closed .ux-filter-toggle{
  opacity:1!important;
  pointer-events:auto!important;
  transform:none!important;
}


/* =========================================================
   LEGACY MARKER FALLBACK
   Never transform MapLibre marker root.
========================================================= */

.mfy-marker,
.place-marker{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  overflow:visible!important;
  cursor:pointer!important;
}

.mfy-dot,
.place-pin{
  position:relative!important;
  width:7px!important;
  height:7px!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:
    0 0 4px #fff,
    0 0 9px var(--marker),
    0 0 18px color-mix(in srgb,var(--marker) 42%,transparent)!important;
  animation:
    starTwinkle
    var(--twinkle,2.7s)
    ease-in-out
    var(--delay,0s)
    infinite alternate!important;
  transform-origin:center;
  will-change:opacity,transform;
}

.mfy-dot::before,
.mfy-dot::after,
.place-pin::before,
.place-pin::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  pointer-events:none;
  opacity:.72;
  animation:
    rayTwinkle
    var(--ray,4s)
    ease-in-out
    var(--delay2,0s)
    infinite alternate;
}

.mfy-dot::before,
.place-pin::before{
  width:1px;
  height:14px;
  transform:translate(-50%,-50%);
  background:
    linear-gradient(
      transparent,
      rgba(255,255,255,.9),
      transparent
    );
}

.mfy-dot::after,
.place-pin::after{
  width:14px;
  height:1px;
  transform:translate(-50%,-50%);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.9),
      transparent
    );
}

.place-pin .icon{
  display:none!important;
}

.mfy-marker:hover .mfy-dot,
.place-marker:hover .place-pin,
.mfy-marker.is-active .mfy-dot,
.place-marker.is-active .place-pin{
  animation-play-state:paused!important;
  opacity:1!important;
  transform:scale(1.35)!important;
  box-shadow:
    0 0 5px #fff,
    0 0 12px var(--marker),
    0 0 24px var(--marker)!important;
}

.mfy-marker.is-dim,
.place-marker.is-dim{
  opacity:.10!important;
}

.mfy-marker::after{
  content:attr(aria-label);
  position:absolute;
  bottom:calc(100% + 7px);
  left:50%;
  transform:translateX(-50%);
  padding:6px 9px;
  border-radius:9px;
  background:rgba(5,7,9,.88);
  border:1px solid var(--line);
  color:#fff;
  font-size:.62rem;
  font-weight:700;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}

.mfy-marker:hover::after{
  opacity:1;
}

@keyframes starTwinkle{
  0%{
    opacity:.25;
    transform:scale(.82);
  }
  37%{
    opacity:.65;
    transform:scale(.96);
  }
  71%{
    opacity:.92;
    transform:scale(1.08);
  }
  100%{
    opacity:.38;
    transform:scale(.88);
  }
}

@keyframes rayTwinkle{
  0%,22%{opacity:.15}
  55%{opacity:.85}
  100%{opacity:.32}
}


/* =========================================================
   DOCK
========================================================= */

.dock{
  position:fixed!important;
  left:50%!important;
  bottom:14px!important;
  transform:translateX(-50%)!important;
  height:64px!important;
  padding:5px!important;
  display:flex!important;
  align-items:center!important;
  gap:3px!important;
  border-radius:22px!important;
  z-index:50!important;
}

.dock-item{
  min-width:72px!important;
  height:52px!important;
  padding:5px 9px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  border-radius:16px!important;
  background:transparent!important;
  color:var(--muted)!important;
  font-size:.56rem!important;
  cursor:pointer!important;
  transition:
    transform .18s var(--ease),
    background-color .18s ease,
    color .18s ease!important;
}

.dock-item:hover,
.dock-item.active{
  background:rgba(255,255,255,.065)!important;
  color:var(--text)!important;
}

.dock-item:active{
  transform:scale(.96);
}

.dock-ai{
  position:relative;
  width:42px!important;
  height:42px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:
    radial-gradient(
      circle at 30% 22%,
      #fff 0 5%,
      #b7fbff 14%,
      #68e9e0 50%,
      #238aa4 100%
    )!important;
  color:#062d35!important;
  overflow:hidden!important;
  box-shadow:
    0 0 18px rgba(105,240,240,.26),
    0 8px 18px rgba(0,0,0,.22)!important;
}

.dock-ai::after{
  content:"";
  position:absolute;
  inset:-45%;
  background:
    conic-gradient(
      from 90deg,
      transparent,
      rgba(255,255,255,.65),
      transparent 26%
    );
  animation:aiLiquid 4.8s linear infinite;
  mix-blend-mode:soft-light;
}

@keyframes aiLiquid{
  to{
    transform:rotate(360deg);
  }
}

#aiOrb{
  display:none!important;
}


/* =========================================================
   GENERAL PANELS
========================================================= */

.mode-panel,
.ai-panel,
.search-dialog,
.sheet,
.detail-card{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.07),
      rgba(255,255,255,.025)
    ),
    rgba(7,10,14,.72)!important;
  border:1px solid var(--line)!important;
  backdrop-filter:blur(13px) saturate(110%)!important;
  -webkit-backdrop-filter:blur(13px) saturate(110%)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.25)!important;
}

.mode-panel{
  z-index:45!important;
  border-radius:26px!important;
}

.detail-card{
  position:fixed!important;
  right:28px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:min(420px,calc(100vw - 60px))!important;
  max-height:calc(100vh - 150px)!important;
  overflow:auto!important;
  border-radius:28px!important;
  z-index:45!important;
}

.detail-hero{
  height:104px!important;
  background:
    radial-gradient(
      circle at 25% 25%,
      rgba(255,255,255,.09),
      transparent 36%
    )!important;
}

.detail-body{
  padding:19px 21px 22px!important;
}

.detail-close{
  position:absolute!important;
  right:12px!important;
  top:12px!important;
}

.detail-extra-grid{
  display:grid;
  gap:6px;
  margin-top:12px;
}

#uxConnector{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  pointer-events:none!important;
  z-index:44!important;
}

#uxConnector .glow{
  display:none!important;
}

#uxConnector .main{
  fill:none;
  stroke:rgba(255,255,255,.38);
  stroke-width:1;
  stroke-linecap:round!important;
  stroke-dasharray:none!important;
  animation:none!important;
}

.search-dialog{
  position:fixed!important;
  top:88px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:min(700px,calc(100vw - 30px))!important;
  border-radius:24px!important;
  z-index:55!important;
}

.ai-panel{
  position:fixed!important;
  right:18px!important;
  bottom:88px!important;
  width:min(400px,calc(100vw - 28px))!important;
  max-height:calc(100vh - 110px)!important;
  border-radius:26px!important;
  z-index:55!important;
}


/* =========================================================
   PASSPORT
========================================================= */

body.passport-mode{
  background:#020407!important;
}

.passport-mode .glass,
.passport-mode .floating{
  background:rgba(6,10,14,.78)!important;
  border-color:rgba(255,255,255,.11)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.25)!important;
  backdrop-filter:blur(11px)!important;
  -webkit-backdrop-filter:blur(11px)!important;
}

.passport-mode .topbar{
  width:310px!important;
  grid-template-columns:1fr!important;
}

.passport-mode .ux-top-left,
.passport-mode .ux-top-right{
  display:none!important;
}

.passport-mode .ux-district-title{
  min-width:0!important;
}

.passport-mode .explore-panel,
.passport-mode .ux-filter-toggle,
.passport-mode .dock,
.passport-mode .ai-panel,
.passport-mode .search-dialog,
.passport-mode .sphere-test-button{
  opacity:0!important;
  pointer-events:none!important;
}

.passport-mode #map{
  left:18px!important;
  top:86px!important;
  width:calc(66.666vw - 30px)!important;
  height:calc(62vh - 112px)!important;
  border-radius:24px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  overflow:hidden!important;
}

.passport-mode #map .maplibregl-canvas{
  filter:brightness(.62) saturate(.72) contrast(1.14)!important;
}

.passport-mode #districtPanel{
  display:block!important;
  position:fixed!important;
  right:18px!important;
  top:86px!important;
  width:calc(33.334vw - 24px)!important;
  height:calc(62vh - 112px)!important;
  overflow:auto!important;
  padding:18px!important;
  border-radius:24px!important;
  z-index:40!important;
}

.passport-grid{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:8px!important;
}

.metric-card{
  padding:11px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.035)!important;
  border-radius:14px!important;
}

.metric-card strong{
  display:block;
  font-size:1.05rem;
}

.metric-card span,
.metric-card small{
  display:block;
  color:var(--muted);
  font-size:.58rem;
  margin-top:3px;
}

.passport-section{
  margin-top:14px;
}

.passport-specialization-list{
  display:grid;
  gap:7px;
}

.passport-bar-row{
  display:grid;
  grid-template-columns:minmax(110px,1fr) 1.5fr 26px;
  align-items:center;
  gap:8px;
  font-size:.61rem;
}

.passport-bar{
  height:5px;
  background:rgba(255,255,255,.08);
  border-radius:99px;
  overflow:hidden;
}

.passport-bar i{
  display:block;
  height:100%;
  background:var(--bar-color);
  border-radius:inherit;
}

#passportDashboard{
  display:none;
  position:fixed;
  left:18px;
  right:18px;
  bottom:16px;
  height:calc(38vh - 22px);
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:12px;
  z-index:38;
}

.passport-mode #passportDashboard{
  display:grid!important;
}

.passport-card{
  padding:17px!important;
  border-radius:22px!important;
  overflow:auto!important;
}

.passport-card h3{
  font-size:.64rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8cefff;
  margin:0 0 12px!important;
}

.passport-card:nth-of-type(1){
  grid-column:1;
  grid-row:1/3;
}

.passport-card:nth-of-type(2){
  grid-column:2;
  grid-row:1/3;
}

.passport-top-mfy{
  grid-column:3;
  grid-row:1;
}

.passport-card:nth-last-of-type(1){
  grid-column:3;
  grid-row:2;
}

.passport-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-size:.66rem;
}

.passport-row span{
  color:var(--muted);
}

.passport-row strong{
  text-align:right;
}

.passport-ranking{
  display:grid;
  gap:5px;
}

.passport-rank-item{
  width:100%;
  display:grid;
  grid-template-columns:28px 1fr auto;
  align-items:center;
  gap:8px;
  padding:6px 4px;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  border-radius:9px!important;
}

.passport-rank-item:hover{
  background:rgba(255,255,255,.05);
}

.rank-index{
  width:26px;
  height:26px;
  border-radius:9px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.10);
  color:#86efff;
}

.rank-copy strong{
  display:block;
  font-size:.64rem;
}

.rank-copy small{
  display:block;
  color:var(--muted);
  font-size:.52rem;
  margin-top:2px;
}

.passport-rank-item b{
  font-size:.55rem;
  color:var(--muted);
}


/* =========================================================
   PRESENTATION BASE
========================================================= */

.presentation{
  position:fixed!important;
  inset:0!important;
  z-index:130!important;
  background:#020508!important;
  overflow:hidden!important;
}

.presentation-map{
  position:absolute!important;
  inset:0!important;
}

.presentation-map .maplibregl-canvas{
  filter:brightness(.54) saturate(.7) contrast(1.15)!important;
}

.presentation-shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(2,5,8,.96) 0%,
      rgba(2,5,8,.80) 30%,
      rgba(2,5,8,.20) 64%,
      rgba(2,5,8,.42) 100%
    ),
    linear-gradient(
      180deg,
      rgba(2,5,8,.28),
      transparent 55%,
      rgba(2,5,8,.42)
    );
}

.presentation-brand{
  position:absolute;
  left:28px;
  top:22px;
  display:flex;
  align-items:center;
  gap:10px;
  z-index:3;
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.14em;
}

.presentation-brand img{
  width:30px;
  height:30px;
}

.presentation-copy{
  position:absolute;
  left:7vw;
  top:50%;
  transform:translateY(-50%);
  width:min(680px,48vw);
  z-index:3;
}

.presentation-copy .eyebrow{
  font-size:.72rem;
}

.presentation-copy h2{
  font-size:clamp(3.4rem,6.5vw,7rem);
  line-height:.92;
  letter-spacing:-.06em;
  margin:18px 0 16px;
  color:#fff;
}

.presentation-copy p{
  max-width:620px;
  color:rgba(255,255,255,.72);
  font-size:1rem;
  line-height:1.5;
}

.presentation-controls{
  position:absolute!important;
  left:50%!important;
  bottom:24px!important;
  transform:translateX(-50%)!important;
  height:52px!important;
  padding:5px 7px!important;
  border-radius:18px!important;
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  z-index:5!important;
  background:rgba(10,13,17,.72)!important;
}

.presentation-controls button{
  width:40px;
  height:40px;
  border-radius:13px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
  display:grid;
  place-items:center;
  color:#fff;
  cursor:pointer;
  transition:
    transform .16s ease,
    background-color .16s ease;
}

.presentation-controls button:hover{
  background:rgba(255,255,255,.10);
  transform:translateY(-1px);
}

.presentation-controls button:active{
  transform:scale(.94);
}

.presentation-controls .icon{
  width:18px;
  height:18px;
}

.presentation-controls .icon svg{
  display:block!important;
  width:18px!important;
  height:18px!important;
  stroke:#fff!important;
  opacity:1!important;
}

.presentation-controls #sceneCounter{
  min-width:62px;
  text-align:center;
  font-size:.65rem;
  color:rgba(255,255,255,.66);
}


/* =========================================================
   SPHERE
========================================================= */

#idleSphereOverlay{
  position:fixed;
  inset:0;
  z-index:140;
  background:#000!important;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .42s ease!important;
}

#idleSphereStars{
  position:absolute;
  inset:0;
}

.idle-star{
  position:absolute;
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background:#fff;
  opacity:var(--alpha);
  animation:
    idleTwinkle
    var(--dur)
    ease-in-out
    var(--delay)
    infinite alternate;
}

@keyframes idleTwinkle{
  from{
    opacity:.15;
    transform:scale(.7);
  }
  to{
    opacity:1;
    transform:scale(1.25);
  }
}

#idleSphereCanvas{
  position:absolute;
  left:50%;
  top:50%;
  width:min(68vw,760px);
  height:min(68vw,760px);
  transform:translate(-50%,-50%) scale(.45);
  opacity:0;
}

#idleSphereLabel{
  position:absolute;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  font-size:.61rem;
  letter-spacing:.2em;
  color:rgba(255,255,255,.62);
}

#idleSphereClose{
  position:absolute;
  right:18px;
  top:18px;
  z-index:4;
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  display:grid;
  place-items:center;
  color:#fff;
  cursor:pointer;
}

.idle-mode #idleSphereOverlay{
  opacity:1;
  pointer-events:auto;
}

.idle-mode #idleSphereCanvas{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.idle-mode .topbar,
.idle-mode .explore-panel,
.idle-mode .dock,
.idle-mode .mode-panel,
.idle-mode .detail-card,
.idle-mode .ux-filter-toggle{
  opacity:0!important;
  pointer-events:none!important;
}

.idle-mode #map{
  opacity:0!important;
}

.sphere-test-button{
  position:fixed!important;
  right:16px!important;
  bottom:16px!important;
  width:46px!important;
  height:46px!important;
  border-radius:15px!important;
  display:grid!important;
  place-items:center!important;
  z-index:60!important;
  cursor:pointer!important;
}

.sphere-test-button .icon{
  width:19px;
  height:19px;
}

.sphere-test-label{
  position:absolute;
  right:54px;
  padding:6px 9px;
  border-radius:8px;
  background:rgba(6,9,12,.84);
  border:1px solid var(--line);
  font-size:.60rem;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}

.sphere-test-button:hover .sphere-test-label{
  opacity:1;
}


/* =========================================================
   MINIMAL MOTION
========================================================= */

.topbar,
.explore-panel,
.dock,
.mode-panel,
.detail-card,
.ai-panel,
.search-dialog,
.sheet{
  backface-visibility:hidden;
}

html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after{
  animation-duration:.01ms!important;
  animation-iteration-count:1!important;
  transition-duration:.01ms!important;
}


/* =========================================================
   BASE RESPONSIVE
========================================================= */

@media(max-width:900px){

  .passport-mode #map{
    width:calc(100vw - 36px)!important;
    height:34vh!important;
  }

  .passport-mode #districtPanel{
    left:18px!important;
    right:18px!important;
    top:calc(34vh + 98px)!important;
    width:auto!important;
    height:calc(32vh - 20px)!important;
  }

  .passport-mode #passportDashboard{
    display:none!important;
  }
}

@media(max-width:760px){

  .topbar{
    top:8px!important;
    width:calc(100vw - 16px)!important;
    height:54px!important;
    grid-template-columns:42px 1fr auto!important;
  }

  .ux-top-left .ux-top-button{
    width:40px!important;
    padding:0!important;
  }

  .ux-top-left .ux-top-button span:last-child,
  .ux-district-title small,
  #presentationBtn,
  #accessibilityBtn,
  .ux-top-right #searchOpen span:last-child{
    display:none!important;
  }

  .ux-district-title{
    min-width:0;
    padding:0 8px;
  }

  .ux-district-title h1,
  .ux-district-title strong{
    margin:0;
    font-size:.61rem;
    line-height:1.1;
    letter-spacing:.08em;
    white-space:nowrap;
  }

  .explore-panel{
    left:8px!important;
    right:8px!important;
    top:auto!important;
    bottom:80px!important;
    width:auto!important;
    max-height:62vh!important;
  }

  .ux-filter-toggle{
    left:10px!important;
    top:auto!important;
    bottom:88px!important;
  }

  .dock{
    bottom:8px!important;
    width:calc(100vw - 16px)!important;
  }

  .dock-item{
    min-width:56px!important;
    flex:1!important;
    padding:4px!important;
  }

  .detail-card{
    left:8px!important;
    right:8px!important;
    top:auto!important;
    bottom:80px!important;
    width:auto!important;
    max-height:66vh!important;
    transform:none!important;
  }

  .presentation-copy{
    left:24px;
    top:46%;
    width:calc(100vw - 48px);
  }

  .presentation-copy h2{
    font-size:clamp(3rem,15vw,5rem);
  }

  .presentation-controls{
    bottom:14px!important;
  }

  .sphere-test-button{
    right:10px!important;
    bottom:82px!important;
  }

  .sphere-test-label{
    display:none;
  }
}


/* =========================================================
   V2.1 — MAP PERFORMANCE / 3D CAMERA / TELEGRAM GLASS
   Keep MapLibre marker-root transforms untouched.
========================================================= */

body.ux-v2 .mfy-marker{
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  min-height:22px!important;
}

body.ux-v2 .mfy-dot{
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  background:var(--marker)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:
    0 0 7px
    color-mix(in srgb,var(--marker) 72%,transparent)!important;
  animation:none!important;
  will-change:auto!important;
  opacity:.92!important;
  transform:none!important;
}

body.ux-v2 .mfy-dot::before,
body.ux-v2 .mfy-dot::after{
  display:none!important;
  animation:none!important;
}

body.ux-v2 .mfy-marker:hover .mfy-dot,
body.ux-v2 .mfy-marker.is-active .mfy-dot{
  animation:none!important;
  opacity:1!important;
  transform:scale(1.32)!important;
  box-shadow:0 0 10px var(--marker)!important;
}

body.ux-v2 .place-marker{
  width:28px!important;
  height:34px!important;
  min-width:28px!important;
  min-height:34px!important;
  overflow:visible!important;
}

body.ux-v2 .place-pin{
  position:relative!important;
  width:18px!important;
  height:18px!important;
  border-radius:50% 50% 50% 0!important;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--marker) 88%,white),
      var(--marker)
    )!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:
    0 4px 10px rgba(0,0,0,.34),
    0 0 8px color-mix(in srgb,var(--marker) 55%,transparent)!important;
  animation:none!important;
  transform:rotate(-45deg)!important;
  transform-origin:50% 50%!important;
  will-change:auto!important;
}

body.ux-v2 .place-pin::before,
body.ux-v2 .place-pin::after{
  display:none!important;
}

body.ux-v2 .place-pin .pin-core{
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  transform:translate(-50%,-50%);
  box-shadow:0 1px 2px rgba(0,0,0,.22);
}

body.ux-v2 .place-marker:hover .place-pin,
body.ux-v2 .place-marker.is-active .place-pin{
  animation:none!important;
  transform:rotate(-45deg) scale(1.14)!important;
  box-shadow:
    0 5px 12px rgba(0,0,0,.38),
    0 0 10px var(--marker)!important;
}

.presentation-map-marker{
  width:24px;
  height:30px;
  display:grid;
  place-items:end center;
  pointer-events:none;
}

.presentation-pin-shape{
  position:relative;
  display:block;
  width:16px;
  height:16px;
  border-radius:50% 50% 50% 0;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--marker) 86%,white),
      var(--marker)
    );
  border:1px solid rgba(255,255,255,.82);
  box-shadow:
    0 5px 12px rgba(0,0,0,.46),
    0 0 9px color-mix(in srgb,var(--marker) 48%,transparent);
  transform:rotate(-45deg);
}

.presentation-pin-shape>span{
  position:absolute;
  left:50%;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#fff;
  transform:translate(-50%,-50%);
}

body.ux-v2 #investorPanel{
  position:fixed!important;
  left:auto!important;
  right:18px!important;
  top:92px!important;
  bottom:auto!important;
  width:390px!important;
  max-height:calc(100vh - 190px)!important;
  overflow:auto!important;
  padding:22px!important;
}

body.ux-v2 #productsPanel{
  position:fixed!important;
  left:auto!important;
  right:18px!important;
  top:92px!important;
  bottom:auto!important;
  width:min(680px,calc(100vw - 360px))!important;
  max-height:calc(100vh - 190px)!important;
  overflow:auto!important;
  padding:22px!important;
}

body.ux-v2 .detail-card{
  top:92px!important;
  bottom:88px!important;
  right:24px!important;
  transform:none!important;
  height:auto!important;
  max-height:none!important;
  overflow:auto!important;
}

body.ux-v2 .ai-suggestions{
  display:flex!important;
  flex-wrap:wrap!important;
  overflow:visible!important;
  max-height:92px;
  align-content:flex-start;
}

body.ux-v2 .ai-suggestion{
  white-space:normal!important;
  line-height:1.2!important;
}

.economic-zone-section .filter-count{
  font-size:.58rem;
  color:#91efff;
  border:1px solid rgba(145,239,255,.18);
  background:rgba(145,239,255,.06);
  border-radius:999px;
  padding:3px 7px;
}

.economic-zone-list{
  display:grid;
  gap:6px;
}

.economic-zone-item{
  width:100%;
  display:grid;
  gap:3px;
  text-align:left;
  padding:9px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.075)!important;
  color:var(--text);
  cursor:pointer;
}

.economic-zone-item:hover{
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(94,216,255,.28)!important;
}

.economic-zone-item strong{
  font-size:.62rem;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.economic-zone-item small{
  font-size:.53rem;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.economic-zone-more{
  font-size:.54rem;
  color:var(--muted);
  padding:5px 7px;
}


/* =========================================================
   TELEGRAM STYLE LIQUID GLASS
========================================================= */

html.liquid-glass body.ux-v2 .topbar,
html.liquid-glass body.ux-v2 .explore-panel,
html.liquid-glass body.ux-v2 .dock,
html.liquid-glass body.ux-v2 .mode-panel,
html.liquid-glass body.ux-v2 .detail-card,
html.liquid-glass body.ux-v2 .ai-panel,
html.liquid-glass body.ux-v2 .search-dialog,
html.liquid-glass body.ux-v2 .sheet,
html.liquid-glass body.ux-v2 .presentation-controls{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.14),
      rgba(255,255,255,.045) 42%,
      rgba(255,255,255,.025)
    ),
    rgba(12,16,21,.54)!important;
  border:1px solid rgba(255,255,255,.20)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(255,255,255,.055),
    0 16px 42px rgba(0,0,0,.28)!important;
  backdrop-filter:
    blur(16px)
    saturate(142%)
    brightness(1.04)!important;
  -webkit-backdrop-filter:
    blur(16px)
    saturate(142%)
    brightness(1.04)!important;
}

html[data-theme="light"].liquid-glass body.ux-v2 .topbar,
html[data-theme="light"].liquid-glass body.ux-v2 .explore-panel,
html[data-theme="light"].liquid-glass body.ux-v2 .dock,
html[data-theme="light"].liquid-glass body.ux-v2 .mode-panel,
html[data-theme="light"].liquid-glass body.ux-v2 .detail-card,
html[data-theme="light"].liquid-glass body.ux-v2 .ai-panel,
html[data-theme="light"].liquid-glass body.ux-v2 .search-dialog,
html[data-theme="light"].liquid-glass body.ux-v2 .sheet{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.78),
      rgba(255,255,255,.48)
    ),
    rgba(240,246,250,.46)!important;
  border-color:rgba(255,255,255,.72)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 16px 40px rgba(32,46,58,.14)!important;
}

html.reduce-transparency body.ux-v2 .glass,
html.reduce-transparency body.ux-v2 .floating{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

@media(max-width:980px){

  body.ux-v2 #productsPanel{
    left:18px!important;
    right:18px!important;
    width:auto!important;
  }
}

@media(max-width:760px){

  body.ux-v2 #investorPanel,
  body.ux-v2 #productsPanel{
    left:8px!important;
    right:8px!important;
    top:auto!important;
    bottom:80px!important;
    width:auto!important;
    max-height:70vh!important;
    padding:18px!important;
  }

  body.ux-v2 .detail-card{
    left:8px!important;
    right:8px!important;
    top:auto!important;
    bottom:80px!important;
    max-height:66vh!important;
    height:auto!important;
    transform:none!important;
  }
}


/* =========================================================
   V2.2 — LAYER LIST / 3D MAP MARKERS / PASSPORT CLEANUP
========================================================= */

body.ux-v2 .layer-list-toggle{
  position:fixed!important;
  left:14px!important;
  bottom:16px!important;
  width:292px!important;
  height:48px!important;
  z-index:41!important;
  border-radius:16px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:0 14px!important;
  color:var(--text)!important;
  cursor:pointer!important;
  transition:
    opacity .22s ease,
    transform .28s var(--ease),
    background-color .18s ease!important;
}

body.ux-v2 .layer-list-toggle .icon{
  width:18px;
  height:18px;
  color:#8cefff;
}

body.ux-v2 .layer-list-toggle>span:nth-child(2){
  font-size:.68rem;
  font-weight:760;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body.ux-v2 .layer-list-chevron{
  margin-left:auto;
  color:var(--muted);
  font-size:.9rem;
  transition:transform .28s var(--ease);
}

body.ux-v2 .layer-list-panel{
  position:fixed!important;
  left:14px!important;
  top:390px!important;
  bottom:76px!important;
  width:292px!important;
  z-index:40!important;
  border-radius:24px!important;
  padding:14px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  opacity:0!important;
  pointer-events:none!important;
  transform:translateY(22px) scale(.985)!important;
  transition:
    opacity .24s ease,
    transform .32s var(--ease)!important;
  overflow:hidden!important;
}

body.layer-list-open .layer-list-panel{
  opacity:1!important;
  pointer-events:auto!important;
  transform:translateY(0) scale(1)!important;
}

body.layer-list-open .layer-list-chevron{
  transform:rotate(180deg);
}

body.layer-list-open .explore-panel{
  max-height:286px!important;
  overflow:hidden!important;
}

body.layer-list-open #specializationFilters,
body.layer-list-open #organizationFilters,
body.layer-list-open #economicZoneFilters{
  display:none!important;
}

body.filter-closed .layer-list-toggle,
body.filter-closed .layer-list-panel{
  opacity:0!important;
  pointer-events:none!important;
}

.layer-list-head{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:8px;
}

.layer-list-head h2{
  font-size:.88rem;
  margin:0;
}

.layer-list-count{
  min-width:30px;
  height:25px;
  padding:0 7px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid rgba(140,239,255,.18);
  background:rgba(140,239,255,.06);
  color:#8cefff;
  font-size:.58rem;
  font-weight:800;
}

.layer-list-search{
  height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 10px;
}

.layer-list-search .icon{
  width:15px;
  height:15px;
  color:var(--muted);
}

.layer-list-search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-size:.64rem;
}

.layer-list-items{
  min-height:0;
  overflow:auto;
  display:grid;
  gap:6px;
  padding-right:2px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}

.layer-list-item{
  width:100%;
  min-height:52px;
  border-radius:13px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  background:rgba(255,255,255,.03)!important;
  color:var(--text)!important;
  display:grid;
  grid-template-columns:22px 1fr auto;
  align-items:center;
  gap:9px;
  padding:8px 9px!important;
  text-align:left;
  cursor:pointer;
  transition:
    transform .15s ease,
    background-color .15s ease,
    border-color .15s ease!important;
}

.layer-list-item:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.065)!important;
  border-color:rgba(140,239,255,.20)!important;
}

.layer-list-item.no-location{
  opacity:.68;
}

.layer-list-pin{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--item-color);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.08),
    0 0 9px color-mix(in srgb,var(--item-color) 58%,transparent);
}

.layer-list-copy{
  min-width:0;
}

.layer-list-copy strong{
  display:block;
  font-size:.62rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.layer-list-copy small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:.52rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.layer-list-location{
  font-size:.48rem;
  color:#86efff;
  white-space:nowrap;
}

.no-location .layer-list-location{
  color:var(--faint);
}

.layer-list-empty,
.layer-list-more{
  padding:18px 10px;
  text-align:center;
  color:var(--muted);
  font-size:.58rem;
  line-height:1.45;
}

.layer-list-empty strong{
  display:block;
  color:var(--text);
  font-size:.66rem;
  margin-bottom:5px;
}

.layer-list-empty span{
  display:block;
}


/* =========================================================
   LIGHTWEIGHT 3D MAP MARKERS
   MapLibre owns marker-root transform.
========================================================= */

body.ux-v2 .map-data-marker{
  width:32px!important;
  height:42px!important;
  min-width:32px!important;
  min-height:42px!important;
  display:grid!important;
  place-items:end center!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  overflow:visible!important;
  cursor:pointer!important;
}

body.ux-v2 .map-data-marker.mfy-marker{
  width:28px!important;
  height:38px!important;
  min-width:28px!important;
  min-height:38px!important;
}

body.ux-v2 .map-pin-3d{
  position:relative;
  display:block;
  width:26px;
  height:36px;
  transform-origin:50% 90%;
  transition:
    transform .16s var(--ease),
    filter .16s ease;
  filter:drop-shadow(0 6px 5px rgba(0,0,0,.40));
  transform-style:preserve-3d;
}

body.ux-v2 .marker-mahalla .map-pin-3d{
  width:22px;
  height:31px;
}

body.ux-v2 .map-pin-face{
  position:absolute;
  left:50%;
  top:0;
  width:23px;
  height:23px;
  transform:
    translateX(-50%)
    perspective(90px)
    rotateX(-10deg);
  border-radius:50%;
  background:
    radial-gradient(
      circle at 34% 25%,
      rgba(255,255,255,.95) 0 5%,
      color-mix(in srgb,var(--marker) 72%,white) 13%,
      var(--marker) 52%,
      color-mix(in srgb,var(--marker) 68%,black) 100%
    );
  border:1px solid rgba(255,255,255,.70);
  box-shadow:
    inset -4px -6px 8px rgba(0,0,0,.20),
    inset 3px 3px 5px rgba(255,255,255,.18),
    0 0 10px color-mix(in srgb,var(--marker) 38%,transparent);
}

body.ux-v2 .marker-mahalla .map-pin-face{
  width:20px;
  height:20px;
}

body.ux-v2 .map-pin-face::after{
  content:"";
  position:absolute;
  left:50%;
  top:76%;
  width:12px;
  height:16px;
  transform:translateX(-50%) rotate(45deg);
  border-radius:2px 12px 2px 12px;
  background:
    linear-gradient(
      135deg,
      var(--marker),
      color-mix(in srgb,var(--marker) 60%,black)
    );
  z-index:-1;
  border-right:1px solid rgba(255,255,255,.28);
  border-bottom:1px solid rgba(0,0,0,.25);
}

body.ux-v2 .map-pin-core{
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(7,10,13,.72);
  border:1px solid rgba(255,255,255,.78);
  transform:translate(-50%,-50%);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}

body.ux-v2 .marker-mahalla .map-pin-core{
  width:6px;
  height:6px;
}

body.ux-v2 .map-pin-glint{
  position:absolute;
  left:24%;
  top:18%;
  width:4px;
  height:3px;
  border-radius:50%;
  background:rgba(255,255,255,.85);
  transform:rotate(-22deg);
}

body.ux-v2 .map-pin-foot{
  position:absolute;
  left:50%;
  bottom:0;
  width:18px;
  height:5px;
  border-radius:50%;
  background:
    radial-gradient(
      ellipse,
      rgba(0,0,0,.46),
      transparent 70%
    );
  transform:translateX(-50%) translateZ(-2px);
}

body.ux-v2 .map-data-marker:hover .map-pin-3d,
body.ux-v2 .map-data-marker.is-active .map-pin-3d{
  transform:translateY(-3px) scale(1.12);
  filter:
    drop-shadow(0 9px 7px rgba(0,0,0,.48))
    drop-shadow(
      0 0 7px
      color-mix(in srgb,var(--marker) 48%,transparent)
    );
}

body.ux-v2 .mfy-dot,
body.ux-v2 .place-pin{
  display:none!important;
}

.mfy-marker::after{
  display:none!important;
}

.maplibregl-popup.marker-name-popup{
  z-index:70!important;
  pointer-events:none!important;
}

.maplibregl-popup.marker-name-popup .maplibregl-popup-content{
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
}

.marker-popup-card{
  min-width:132px;
  max-width:230px;
  padding:8px 10px;
  border-radius:12px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.13),
      rgba(255,255,255,.04)
    ),
    rgba(7,10,14,.80);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 12px 28px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(12px) saturate(125%);
  -webkit-backdrop-filter:blur(12px) saturate(125%);
  transform:
    perspective(260px)
    rotateX(-5deg)
    translateY(-3px);
  transform-origin:50% 100%;
}

.marker-popup-card::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  margin-right:6px;
  background:var(--marker);
  box-shadow:0 0 8px var(--marker);
}

.marker-popup-card span{
  font-size:.48rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#91efff;
}

.marker-popup-card strong{
  display:block;
  margin-top:3px;
  font-size:.62rem;
  line-height:1.25;
  color:#fff;
}

.maplibregl-popup.marker-name-popup .maplibregl-popup-tip{
  border-top-color:rgba(14,18,23,.84)!important;
}


/* =========================================================
   DETAIL IMAGE
========================================================= */

body.ux-v2 .detail-hero{
  position:relative;
  overflow:hidden;
  background-color:rgba(255,255,255,.025)!important;
  background-repeat:no-repeat!important;
}

.detail-hero.has-image{
  height:158px!important;
}

.detail-hero.has-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      transparent 35%,
      rgba(4,7,10,.44) 100%
    );
  pointer-events:none;
}

.detail-symbol{
  position:relative;
  z-index:2;
}

.detail-symbol.on-image{
  background:rgba(8,12,16,.52)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}


/* =========================================================
   PASSPORT CLEANUP
========================================================= */

.passport-mode #passportDashboard{
  grid-template-columns:1fr 1fr 1fr!important;
  grid-template-rows:1fr!important;
}

.passport-mode .passport-card:nth-of-type(1){
  grid-column:1!important;
  grid-row:1!important;
}

.passport-mode .passport-card:nth-of-type(2){
  grid-column:2!important;
  grid-row:1!important;
}

.passport-mode .passport-general-card{
  grid-column:3!important;
  grid-row:1!important;
  overflow:hidden!important;
}

.passport-general-card #passportGeneral{
  display:grid;
  gap:0;
}

.passport-general-card .passport-row{
  padding:7px 0!important;
}

.passport-top-mfy,
.passport-ranking{
  display:none!important;
}

@media(max-width:900px){

  body.ux-v2 .layer-list-toggle{
    left:8px!important;
    width:calc(100vw - 16px)!important;
    bottom:80px!important;
  }

  .layer-list-panel{
    left:8px!important;
    right:8px!important;
    width:auto!important;
    top:auto!important;
    bottom:136px!important;
    max-height:46vh!important;
  }

  .layer-list-open .explore-panel{
    max-height:210px!important;
  }

  .passport-mode #passportDashboard{
    display:none!important;
  }
}

@media(max-height:720px) and (min-width:901px){

  body.ux-v2 .layer-list-panel{
    top:330px!important;
  }

  .layer-list-open .explore-panel{
    max-height:226px!important;
  }
}


/* =========================================================
   UX PATCH V3 — COMPACT PINS / DETAIL / AI
========================================================= */

body.ux-v2 *{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
}

body.ux-v2 *::-webkit-scrollbar{
  width:6px;
  height:6px;
}

body.ux-v2 *::-webkit-scrollbar-track{
  background:transparent;
}

body.ux-v2 *::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.20);
  border-radius:999px;
}

body.ux-v2 *::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.32);
}

body.ux-v2.passport-mode .topbar{
  width:330px!important;
  height:58px!important;
  grid-template-columns:1fr!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  padding:7px!important;
}

body.ux-v2.passport-mode .ux-top-left,
body.ux-v2.passport-mode .ux-top-right{
  display:none!important;
}

body.ux-v2.passport-mode .ux-district-title{
  width:100%!important;
  min-width:0!important;
  height:42px!important;
  padding:0 16px!important;
}

body.ux-v2.passport-mode .ux-district-title h1,
body.ux-v2.passport-mode .ux-district-title strong{
  margin:0;
}

body.ux-v2 .map-data-marker{
  width:30px!important;
  height:35px!important;
  min-width:30px!important;
  min-height:35px!important;
  place-items:end center!important;
}

body.ux-v2 .map-data-marker.mfy-marker{
  width:28px!important;
  height:33px!important;
  min-width:28px!important;
  min-height:33px!important;
}

body.ux-v2 .map-pin-3d{
  width:25px!important;
  height:31px!important;
  filter:drop-shadow(0 5px 4px rgba(0,0,0,.34))!important;
}

body.ux-v2 .marker-mahalla .map-pin-3d{
  width:23px!important;
  height:29px!important;
}

body.ux-v2 .map-pin-face{
  left:50%!important;
  top:1px!important;
  width:22px!important;
  height:22px!important;
  transform:translateX(-50%) rotate(-45deg)!important;
  border-radius:52% 52% 52% 16%!important;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--marker) 66%,white),
      var(--marker) 52%,
      color-mix(in srgb,var(--marker) 70%,black)
    )!important;
  border:1px solid rgba(255,255,255,.68)!important;
  box-shadow:
    inset 3px 3px 5px rgba(255,255,255,.26),
    inset -4px -4px 6px rgba(0,0,0,.18),
    0 0 8px color-mix(in srgb,var(--marker) 30%,transparent)!important;
}

body.ux-v2 .marker-mahalla .map-pin-face{
  width:20px!important;
  height:20px!important;
}

body.ux-v2 .map-pin-face::after{
  display:none!important;
}

body.ux-v2 .map-pin-core{
  width:7px!important;
  height:7px!important;
  background:rgba(255,255,255,.90)!important;
  border:0!important;
  box-shadow:0 0 0 2px rgba(0,0,0,.10)!important;
  transform:translate(-50%,-50%) rotate(45deg)!important;
}

body.ux-v2 .map-pin-glint{
  left:22%!important;
  top:18%!important;
  width:4px!important;
  height:2px!important;
  transform:rotate(25deg)!important;
}

body.ux-v2 .map-pin-foot{
  bottom:0!important;
  width:14px!important;
  height:4px!important;
  opacity:.62;
}

body.ux-v2 .map-data-marker:hover .map-pin-3d,
body.ux-v2 .map-data-marker.is-active .map-pin-3d{
  transform:translateY(-2px) scale(1.09)!important;
  filter:
    drop-shadow(0 7px 5px rgba(0,0,0,.38))
    drop-shadow(
      0 0 5px
      color-mix(in srgb,var(--marker) 38%,transparent)
    )!important;
}

.maplibregl-popup.marker-name-popup{
  transform:translateY(-5px);
}

.marker-popup-card{
  min-width:118px!important;
  max-width:220px!important;
  padding:7px 9px!important;
  border-radius:11px!important;
  transform:none!important;
  background:rgba(12,16,20,.88)!important;
  backdrop-filter:blur(9px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(9px) saturate(120%)!important;
}


/* =========================================================
   COMPLETE DETAIL
========================================================= */

body.ux-v2 .detail-card{
  max-height:calc(100vh - 112px)!important;
}

.detail-data-title{
  position:sticky;
  top:0;
  z-index:2;
  padding:7px 0 6px;
  background:
    linear-gradient(
      180deg,
      rgba(10,14,18,.96),
      rgba(10,14,18,.80)
    );
  color:#8cefff;
  font-size:.56rem;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.detail-data-row{
  align-items:flex-start!important;
}

.detail-data-row strong{
  max-width:62%;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.detail-actions{
  display:grid!important;
  grid-template-columns:auto minmax(130px,1fr) 38px!important;
  gap:8px!important;
  align-items:center!important;
}

#detailDirections{
  width:auto!important;
  min-width:76px!important;
  height:40px!important;
  padding:0 12px!important;
  border-radius:13px!important;
  gap:6px!important;
  font-size:.67rem!important;
}

#detailDirections .icon{
  width:16px!important;
  height:16px!important;
}

#detailAsk{
  height:40px!important;
  border-radius:13px!important;
}


/* =========================================================
   CONNECTOR
========================================================= */

#uxConnector .main{
  stroke:url(#uxConnectorGradient)!important;
  stroke-width:1.45!important;
  stroke-dasharray:7 8!important;
  animation:connectorFlow 1.15s linear infinite!important;
  filter:drop-shadow(0 0 3px rgba(98,230,255,.40));
}

#uxConnector .glow{
  display:block!important;
  fill:none!important;
  stroke:rgba(98,230,255,.10)!important;
  stroke-width:6!important;
}

#uxConnector .connector-pulse{
  fill:#8cf6ff;
  filter:drop-shadow(0 0 5px #62e6ff);
  opacity:.95;
}

@keyframes connectorFlow{
  to{
    stroke-dashoffset:-30;
  }
}


/* =========================================================
   AI DOCK
========================================================= */

.dock .center{
  min-width:66px!important;
}

.dock-ai{
  width:42px!important;
  height:42px!important;
  border-radius:15px!important;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.15),
      rgba(255,255,255,.035)
    ),
    rgba(9,18,22,.82)!important;
  color:#7cf3ff!important;
  border:1px solid rgba(124,243,255,.28)!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.14),
    0 8px 18px rgba(0,0,0,.24),
    0 0 14px rgba(91,235,247,.12)!important;
}

.dock-ai::after{
  display:none!important;
}

.dock-ai .icon{
  width:22px!important;
  height:22px!important;
  filter:drop-shadow(0 0 5px rgba(124,243,255,.34));
}


/* =========================================================
   AI PANEL — FIXED OPEN / CLOSE BEHAVIOR
========================================================= */

body.ux-v2 .ai-panel{
  width:min(430px,calc(100vw - 28px))!important;
  height:min(590px,calc(100vh - 112px))!important;
  max-height:none!important;
  grid-template-rows:auto minmax(0,1fr) auto auto auto!important;
  overflow:hidden!important;
}

/* AI faqat hidden bo‘lmasa ko‘rinadi */
body.ux-v2 #aiPanel:not(.hidden){
  display:grid!important;
}

/* X bosilganda qat’iy yopiladi */
body.ux-v2 #aiPanel.hidden{
  display:none!important;
}

.ai-head{
  min-height:62px!important;
}

.ai-head-actions{
  display:flex;
  gap:7px;
  align-items:center;
}

.ai-voice-toggle.active{
  color:#7cf3ff!important;
  border-color:rgba(124,243,255,.30)!important;
  background:rgba(124,243,255,.08)!important;
}

.ai-messages{
  min-height:0!important;
  height:auto!important;
  overflow:auto!important;
  padding:14px!important;
}

.ai-suggestions{
  display:flex!important;
  gap:7px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:8px 12px 10px!important;
  white-space:nowrap!important;
  scrollbar-width:none!important;
}

.ai-suggestions::-webkit-scrollbar{
  display:none;
}

.ai-suggestion{
  flex:0 0 auto!important;
  max-width:260px!important;
  height:34px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ai-compose{
  position:static!important;
  margin:0 12px 10px!important;
  min-height:48px!important;
}

.ai-foot{
  position:static!important;
  min-height:42px!important;
  padding:8px 13px!important;
}

.message{
  position:relative!important;
  padding-right:34px!important;
}

.message.user{
  padding-right:12px!important;
}

.message-speak{
  position:absolute;
  right:7px;
  top:7px;
  width:26px;
  height:26px;
  border-radius:9px;
  background:rgba(255,255,255,.045);
  color:var(--muted);
  display:grid;
  place-items:center;
  cursor:pointer;
}

.message-speak:hover{
  color:#7cf3ff;
  background:rgba(124,243,255,.08);
}

.message-speak svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

.search-results{
  overscroll-behavior:contain;
}

html.reduce-motion #uxConnector .main{
  animation:none!important;
}

html.reduce-motion .dock-ai .icon{
  filter:none!important;
}


/* =========================================================
   PRESENTATION STUDIO V1 — DATABASE DRIVEN SHOWROOM
========================================================= */

.presentation{
  --presentation-accent:#7cefff;
  --presentation-overlay:.56;
}

.presentation-map{
  transition:
    opacity .35s ease,
    filter .35s ease;
}

.presentation-no-map .presentation-map{
  opacity:.10!important;
  filter:blur(5px) brightness(.35)!important;
}

.presentation-shade{
  background:
    linear-gradient(
      90deg,
      rgba(2,5,8,.97) 0%,
      rgba(2,5,8,.82) 30%,
      rgba(2,5,8,calc(var(--presentation-overlay) * .40)) 64%,
      rgba(2,5,8,calc(var(--presentation-overlay) * .72)) 100%
    ),
    linear-gradient(
      180deg,
      rgba(2,5,8,.24),
      transparent 55%,
      rgba(2,5,8,.48)
    )!important;
}

.presentation-copy{
  z-index:6!important;
  transition:
    left .45s var(--ease),
    width .45s var(--ease),
    top .45s var(--ease);
}

.presentation-copy .eyebrow{
  color:var(--presentation-accent)!important;
}

.presentation-copy h2{
  max-width:780px;
}

.presentation-copy p{
  max-width:660px;
  font-size:1rem;
  line-height:1.55;
  color:rgba(255,255,255,.72);
}

.presentation-media{
  position:absolute;
  z-index:4;
  right:5vw;
  top:50%;
  transform:translateY(-50%);
  width:min(42vw,650px);
  height:min(62vh,610px);
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(8,12,16,.70);
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    inset 0 1px rgba(255,255,255,.12);
  pointer-events:none;
}

.presentation-media.image img,
.presentation-media.video video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.presentation-media.gallery{
  display:grid!important;
  grid-template-columns:1.2fr .8fr;
  grid-template-rows:1fr 1fr;
  gap:8px;
  padding:8px;
  background:rgba(8,12,16,.62);
}

.presentation-media.gallery figure{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  min-width:0;
  min-height:0;
  position:relative;
}

.presentation-media.gallery figure:first-child{
  grid-row:1/3;
}

.presentation-media.gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.94) contrast(1.03);
}

.presentation-media.gallery figure:nth-child(n+4){
  display:none;
}

.presentation-entity{
  margin-top:18px;
  display:inline-flex;
  flex-direction:column;
  gap:3px;
  max-width:430px;
  padding:10px 13px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.presentation-entity span{
  font-size:.54rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--presentation-accent);
  font-weight:850;
}

.presentation-entity strong{
  font-size:.82rem;
}

.presentation-entity small{
  font-size:.58rem;
  color:rgba(255,255,255,.58);
}

.presentation-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(110px,1fr));
  gap:8px;
  margin-top:22px;
  max-width:720px;
}

.presentation-stat{
  min-height:82px;
  padding:13px 14px;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.025)
    );
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.presentation-stat strong{
  display:block;
  font-size:1.28rem;
  line-height:1.05;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.presentation-stat span{
  display:block;
  margin-top:7px;
  font-size:.57rem;
  color:rgba(255,255,255,.58);
  text-transform:uppercase;
  letter-spacing:.07em;
}

.presentation-cta{
  margin-top:20px;
  height:44px;
  padding:0 18px;
  border-radius:14px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--presentation-accent) 40%,
      transparent
    );
  background:
    color-mix(
      in srgb,
      var(--presentation-accent) 16%,
      rgba(10,14,18,.74)
    );
  color:#fff;
  font-size:.68rem;
  font-weight:820;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}

.presentation-progress{
  position:absolute;
  z-index:7;
  left:28px;
  right:28px;
  bottom:10px;
  height:2px;
  border-radius:99px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}

.presentation-progress i{
  display:block;
  width:0;
  height:100%;
  border-radius:99px;
  background:var(--presentation-accent);
  box-shadow:0 0 10px var(--presentation-accent);
}

.presentation[data-layout="media-right"] .presentation-copy,
.presentation[data-layout="split"] .presentation-copy{
  left:6vw;
  width:min(50vw,690px);
}

.presentation[data-layout="media-right"] .presentation-media,
.presentation[data-layout="split"] .presentation-media{
  display:block;
}

.presentation[data-layout="full-media"] .presentation-media{
  display:block;
  inset:0;
  width:100%;
  height:100%;
  transform:none;
  border:0;
  border-radius:0;
  right:auto;
  top:auto;
  opacity:.72;
}

.presentation[data-layout="full-media"] .presentation-copy{
  left:7vw;
  width:min(720px,68vw);
}

.presentation[data-layout="stats"] .presentation-copy{
  width:min(780px,60vw);
}

.presentation[data-layout="stats"] .presentation-stats{
  grid-template-columns:repeat(4,minmax(120px,1fr));
}

.presentation[data-layout="spotlight"] .presentation-copy{
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
  width:min(900px,80vw);
  text-align:center;
}

.presentation[data-layout="spotlight"] .presentation-copy p,
.presentation[data-layout="spotlight"] .presentation-stats{
  margin-left:auto;
  margin-right:auto;
}

.presentation[data-layout="spotlight"] .presentation-copy h2{
  margin-left:auto;
  margin-right:auto;
}

.presentation[data-slide-type="ai"] .presentation-copy h2{
  text-shadow:
    0 0 38px
    color-mix(
      in srgb,
      var(--presentation-accent) 28%,
      transparent
    );
}

.presentation[data-slide-type="final"] .presentation-copy h2{
  font-size:clamp(3.8rem,7.4vw,8.2rem);
}


/* =========================================================
   PRESENTATION RESPONSIVE
========================================================= */

@media(max-width:980px){

  .presentation-media{
    right:3vw;
    width:43vw;
  }

  .presentation-stats{
    grid-template-columns:repeat(2,minmax(120px,1fr));
    max-width:480px;
  }

  .presentation-copy p{
    font-size:.88rem;
  }
}

@media(max-width:760px){

  .presentation-media{
    left:18px;
    right:18px;
    top:16%;
    width:auto;
    height:28vh;
    transform:none;
    border-radius:20px;
  }

  .presentation[data-layout="split"] .presentation-copy,
  .presentation[data-layout="media-right"] .presentation-copy,
  .presentation-copy{
    left:22px!important;
    top:50%!important;
    width:calc(100vw - 44px)!important;
    transform:translateY(-50%)!important;
  }

  .presentation[data-layout="spotlight"] .presentation-copy{
    left:50%!important;
    transform:translate(-50%,-50%)!important;
  }

  .presentation-copy h2{
    font-size:clamp(2.8rem,14vw,4.8rem);
  }

  .presentation-stats{
    grid-template-columns:1fr 1fr;
    gap:6px;
  }

  .presentation-stat{
    min-height:66px;
    padding:10px;
  }

  .presentation-stat strong{
    font-size:1rem;
  }

  .presentation-progress{
    left:12px;
    right:12px;
    bottom:4px;
  }
}