:root {
  /* ── Ana Arka Planlar ── */
  --bg: #080d1a;
  --surface: #111827;
  --panel: #1f2937;
  --border: rgba(148, 163, 184, 0.10);

  /* ── Accent Renkleri ── */
  --accent: #8b5cf6;
  --accent-light: #a78bfa;
  --accent-glow: rgba(139, 92, 246, 0.20);
  --gold: #d4a853;
  --gold-light: #e8c97a;

  /* ── Semantik Renkler ── */
  --green: #34d399;
  --red: #fb7185;
  --amber: #fbbf24;

  /* ── Metin ── */
  --text: rgba(255, 255, 255, 0.72);
  --muted: rgba(255, 255, 255, 0.38);
  --text-bright: #f1f5f9;

  /* ── Yüzey Efektleri ── */
  --glass: rgba(8, 13, 26, 0.80);
  --glass-border: rgba(148, 163, 184, 0.08);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.60);

  /* ── Spacing Sistemi ── */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* ── Geçişler ── */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

*{margin:0;padding:0;box-sizing:border-box;}
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', 'Manrope', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.outdoor-mode {
  --bg: #fafafa;
  --surface: #ffffff;
  --panel: #f1f5f9;
  --border: rgba(0, 0, 0, 0.08);
  --accent: #7c3aed;
  --accent-light: #a78bfa;
  --gold: #92750a;
  --gold-light: #b8960d;
  --green: #059669;
  --red: #dc2626;
  --amber: #d97706;
  --text: rgba(0, 0, 0, 0.78);
  --muted: rgba(0, 0, 0, 0.45);
  --text-bright: #0f172a;
  --glass: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(0, 0, 0, 0.06);
}
body:not(.outdoor-mode) :where(h1,h2,h3,h4,h5,h6,p,span,label,small,li,a,td,th,input,textarea,select,button){
  color:rgba(255,255,255,.70) !important;
}
body:not(.outdoor-mode) input::placeholder,
body:not(.outdoor-mode) textarea::placeholder{
  color:rgba(255,255,255,.55) !important;
}
body:not(.outdoor-mode) .btn,
body:not(.outdoor-mode) .btn-sm,
body:not(.outdoor-mode) .mob-drawer-btn,
body:not(.outdoor-mode) .dp-action-btn,
body:not(.outdoor-mode) .biz-cta,
body:not(.outdoor-mode) .exp-copy-btn,
body:not(.outdoor-mode) .lb-act-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
body:not(.outdoor-mode) .btn::before,
body:not(.outdoor-mode) .btn-sm::before,
body:not(.outdoor-mode) .mob-drawer-btn::before,
body:not(.outdoor-mode) .dp-action-btn::before,
body:not(.outdoor-mode) .biz-cta::before,
body:not(.outdoor-mode) .exp-copy-btn::before,
body:not(.outdoor-mode) .lb-act-btn::before{
  content:'•';
  color:rgba(255,255,255,.70) !important;
  font-size:10px;
  line-height:1;
}
body:not(.outdoor-mode) .exp-dl-icon{display:none;}
body:not(.outdoor-mode) .exp-dl-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
body:not(.outdoor-mode) .exp-dl-btn::before{
  content:'•';
  color:rgba(255,255,255,.70);
  font-size:11px;
}
body:not(.outdoor-mode) :is(.mob-menu-btn,.compass-fab,.exp-close,.biz-close,.lab-close,.cmps-close,.m3d-close,.ks-close-btn,.dp-close,.lb-close,.hist-close,.cmp-close,#district-pill-clear,#ms-clear,.mob-bottom-bar button:empty)::before{
  color:rgba(255,255,255,.70);
  line-height:1;
}
body:not(.outdoor-mode) .mob-menu-btn::before{content:'≡';font-size:14px;}
body:not(.outdoor-mode) .compass-fab::before{content:'◎';font-size:14px;}
body:not(.outdoor-mode) :is(.exp-close,.biz-close,.lab-close,.cmps-close,.m3d-close,.ks-close-btn,.dp-close,.lb-close,.hist-close,.cmp-close,#district-pill-clear,#ms-clear)::before{content:'×';font-size:12px;}
body:not(.outdoor-mode) .mob-bottom-bar button:empty::before{content:'•';font-size:12px;}
body:not(.outdoor-mode) :is(#lb-add-btn,.exp-copy-btn,.biz-cta.primary,.mob-search-row button,.mob-bottom-bar button.primary){
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.30) !important;
  color:rgba(255,255,255,.70) !important;
}
/* Global dark-mode button normalization */
body:not(.outdoor-mode) :where(
  button,
  .btn,
  .btn-sm,
  .mob-drawer-btn,
  .mob-bottom-bar button,
  .mob-layer-btn,
  .compass-fab,
  .dp-action-btn,
  .biz-cta,
  .exp-copy-btn,
  #lb-add-btn,
  .lb-act-btn,
  .hist-chip,
  .cmp-search-row .btn-sm
){
  background:rgba(27,79,127,.68) !important;
  color:rgba(255,255,255,.86) !important;
  border-color:rgba(170,214,241,.42) !important;
  box-shadow:none !important;
  font-family:'Inter','Manrope','Segoe UI','Helvetica Neue',Arial,sans-serif !important;
}
body:not(.outdoor-mode) :where(
  button,
  .btn,
  .btn-sm,
  .mob-drawer-btn,
  .mob-bottom-bar button,
  .mob-layer-btn,
  .compass-fab,
  .dp-action-btn,
  .biz-cta,
  .exp-copy-btn,
  #lb-add-btn,
  .lb-act-btn,
  .hist-chip,
  .cmp-search-row .btn-sm
):hover{
  background:rgba(42,101,148,.82) !important;
  color:rgba(255,255,255,.92) !important;
  border-color:rgba(194,228,248,.52) !important;
}
body:not(.outdoor-mode) :where(
  button,
  .btn,
  .btn-sm,
  .mob-drawer-btn,
  .mob-bottom-bar button,
  .mob-layer-btn,
  .compass-fab,
  .dp-action-btn,
  .biz-cta,
  .exp-copy-btn,
  #lb-add-btn,
  .lb-act-btn,
  .hist-chip,
  .cmp-search-row .btn-sm
):active{
  background:rgba(22,71,115,.9) !important;
}
body:not(.outdoor-mode) :where(
  button,
  .btn,
  .btn-sm,
  .mob-drawer-btn,
  .mob-bottom-bar button,
  .mob-layer-btn,
  .compass-fab,
  .dp-action-btn,
  .biz-cta,
  .exp-copy-btn,
  #lb-add-btn,
  .lb-act-btn,
  .hist-chip,
  .cmp-search-row .btn-sm
):disabled{
  background:rgba(27,79,127,.44) !important;
  color:rgba(255,255,255,.52) !important;
  border-color:rgba(170,214,241,.26) !important;
  cursor:not-allowed !important;
}
body:not(.outdoor-mode) :where(
  .btn::before,
  .btn-sm::before,
  .mob-drawer-btn::before,
  .dp-action-btn::before,
  .biz-cta::before,
  .exp-copy-btn::before,
  .lb-act-btn::before
){
  color:rgba(255,255,255,.86) !important;
}

/* ── HEADER */
header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  flex-shrink: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.brand-home{display:flex;align-items:center;gap:10px;cursor:pointer;border-radius:14px;padding:6px 8px;transition:background .15s;border:1px solid transparent;}
.brand-home:hover{background:rgba(255,255,255,.06);border-color:rgba(170,214,241,.2);}
.brand-home:focus-visible{outline:1px solid rgba(201,168,76,.55);}
.logo-q {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(170,214,241,.30);
  box-shadow: 0 6px 14px rgba(5,18,34,.28);
}
.logo-q img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  border-radius:inherit;
}
.logo-title{font-size:17px;font-weight:700;letter-spacing:.01em;}
.logo-sub{font-size:9px;color:rgba(255,255,255,.5);letter-spacing:.16em;text-transform:uppercase;}
.divider{width:1px;height:38px;background:rgba(170,214,241,.24);}
.search-box{display:flex;gap:8px;flex:1;max-width:440px;position:relative;background:rgba(21,62,101,.54);border:1px solid rgba(170,214,241,.3);border-radius:16px;padding:6px;}
.search-box input{background:transparent;border:0;color:var(--text);font-family:inherit;font-size:14px;padding:8px 10px;border-radius:10px;flex:1;outline:none;}
.search-box input:focus{border-color:var(--gold);}
.search-box input::placeholder{color:var(--muted);}
#search-btn{
  min-width:96px;
  border-radius:12px !important;
  font-size:13px !important;
  font-weight:700 !important;
  background:rgba(201,168,76,.24) !important;
  border:1px solid rgba(201,168,76,.46) !important;
  color:#f1c96f !important;
}
#search-btn:hover{background:rgba(201,168,76,.32) !important;}
.city-smart-dd{
  position:absolute;top:calc(100% + 8px);left:0;right:0;background:rgba(21,62,101,.9);
  border:1px solid rgba(170,214,241,.34);border-radius:12px;z-index:1300;max-height:320px;overflow-y:auto;
  box-shadow:0 10px 26px rgba(0,0,0,.55);display:none;backdrop-filter:blur(10px);
}
.city-smart-dd.show{display:block;}
.btn, .btn-sm {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.btn:hover, .btn-sm:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--text);
  border-color: rgba(148, 163, 184, 0.28);
}
.btn-sm.active, .btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large{
  background:rgba(22,71,115,.35) !important;
}
.marker-cluster div{
  background:rgba(27,79,127,.92) !important;
  color:rgba(255,255,255,.9) !important;
  border:1px solid rgba(170,214,241,.42);
  font-family:inherit;
  font-weight:700;
  box-shadow:0 6px 16px rgba(5,18,34,.35);
}

/* ── SCORE CARD */
.score-card{
  position:absolute;top:12px;right:12px;z-index:801;
  background:rgba(27,79,127,.94);border:1px solid var(--border);
  border-radius:10px;padding:16px;width:220px;
  backdrop-filter:blur(8px);box-shadow:0 12px 40px rgba(22,71,115,.60);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
  transform:translateY(-6px);
}
.score-card.show{opacity:1;pointer-events:all;transform:translateY(0);}
.sc-close{position:absolute;top:10px;right:12px;cursor:pointer;color:var(--muted);font-size:13px;line-height:1;}
.sc-close:hover{color:var(--text);}
.sc-city{font-size:13px;font-weight:700;color:var(--text);margin-bottom:14px;padding-right:20px;letter-spacing:.02em;}
/* donut */
.sc-score-wrap{position:relative;width:110px;height:110px;margin:0 auto 10px;}
#sc-donut{display:block;}
.sc-score-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.sc-pct{font-size:24px;font-weight:700;color:var(--text);line-height:1;}
.sc-pct-lbl{font-size:9px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:2px;}
/* grade badge */
.sc-grade{text-align:center;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 10px;border-radius:20px;display:inline-block;margin:0 auto 12px;width:fit-content;display:block;}
.sc-grade.A{background:rgba(74,222,128,.15);color:#4ade80;border:1px solid rgba(74,222,128,.3);}
.sc-grade.B{background:rgba(251,191,36,.15);color:#fbbf24;border:1px solid rgba(251,191,36,.3);}
.sc-grade.C{background:rgba(251,146,60,.15);color:#fb923c;border:1px solid rgba(251,146,60,.3);}
.sc-grade.D{background:rgba(248,113,113,.15);color:#f87171;border:1px solid rgba(248,113,113,.3);}
/* stats */
.sc-stats{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
.sc-stat-row{display:flex;align-items:center;gap:7px;font-size:10px;}
.sc-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.sc-stat-lbl{flex:1;color:var(--muted);}
.sc-stat-val{color:var(--text);font-weight:600;min-width:30px;text-align:right;}
/* best/worst */
.sc-best-worst{background:rgba(255,255,255,.03);border-radius:6px;padding:8px 10px;margin-bottom:8px;font-size:10px;}
.sc-bw-label{color:var(--muted);font-size:9px;letter-spacing:.08em;text-transform:uppercase;}
.sc-bw-name{color:var(--green);font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sc-tolerance{font-size:9px;color:rgba(255,255,255,.50);text-align:center;}
.map-switch{display:flex;gap:2px;background:rgba(21,62,101,.5);border:1px solid rgba(170,214,241,.25);border-radius:12px;overflow:hidden;padding:2px;}
.map-switch button{background:var(--panel);color:var(--muted);border:none;font-family:inherit;font-size:11px;padding:6px 11px;cursor:pointer;transition:all .15s;}
.map-switch button.active{background:rgba(255,255,255,.16);color:rgba(255,255,255,.70);font-weight:600;}
.map-switch button:hover:not(.active){color:var(--text);}
.lang-switch{display:flex;gap:4px;align-items:center;}
.header-actions{display:flex;flex-direction:column;gap:8px;margin-left:auto;align-items:flex-end;min-width:0;}
.header-row{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap;}
.header-row-groups{gap:10px;}
.nav-group{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  background:rgba(21,62,101,.46);border:1px solid rgba(170,214,241,.22);border-radius:14px;padding:7px;
}
.nav-group-title{
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);
  padding:0 7px;white-space:nowrap;
}
header .btn::before, header .btn-sm::before{content:none !important;}

@media (min-width: 769px) {
  body:not(.outdoor-mode) header :where(.btn,.btn-sm){
    background:rgba(27,79,127,.58) !important;
    border-color:rgba(170,214,241,.36) !important;
    color:rgba(255,255,255,.82) !important;
    border-radius:10px !important;
    box-shadow:none !important;
  }
  body:not(.outdoor-mode) header :where(.btn,.btn-sm):hover{
    background:rgba(42,101,148,.78) !important;
    border-color:rgba(194,228,248,.46) !important;
  }
}

/* ── STATS BAR */
.stats-bar{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  background:#1a4d7b;border-bottom:1px solid rgba(170,214,241,.22);flex-shrink:0;padding:7px 12px;
}
.stat{
  display:flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid rgba(170,214,241,.24);
  border-radius:11px;font-size:11px;background:rgba(21,62,101,.42);
}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.dot.gold{background:var(--gold);}
.dot.green{background:var(--green);box-shadow:0 0 5px var(--green);}
.dot.red{background:var(--red);box-shadow:0 0 5px var(--red);}
.dot.amber{background:var(--amber);}
.stat-num{font-size:15px;font-weight:600;color:var(--text);min-width:24px;}
.stat-lbl{color:var(--muted);letter-spacing:.05em;text-transform:uppercase;}

/* viewport loading indicator */
.vp-status{
  display:flex;align-items:center;gap:7px;padding:6px 10px;font-size:10px;color:var(--muted);
  border:1px solid rgba(170,214,241,.24);border-radius:11px;background:rgba(21,62,101,.42);
}
.vp-dot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:background .3s,box-shadow .3s;}
.vp-dot.loading{background:var(--amber);box-shadow:0 0 6px var(--amber);animation:pulse .8s infinite;}
.vp-dot.done{background:var(--green);box-shadow:0 0 5px var(--green);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

/* map floating search */
.floating-search{
  position:absolute;
  top:12px;
  left:12px;
  z-index:1460;
  width:min(560px, calc(100% - 24px));
  max-width:none;
  border-radius:22px;
  padding:7px;
  background:linear-gradient(160deg, rgba(22,71,115,.94), rgba(33,97,146,.9));
  border:1px solid rgba(170,214,241,.42);
  box-shadow:0 14px 34px rgba(5,18,34,.35);
  backdrop-filter:blur(10px);
}
.floating-search input{
  font-size:15px;
  padding:10px 12px;
}
.mob-pill-logo,.mob-pill-menu{display:none;}
.search-area-btn{
  position:absolute;
  top:74px;
  left:50%;
  transform:translateX(-50%) translateY(-4px);
  z-index:1455;
  border:1px solid rgba(201,168,76,.55);
  border-radius:999px;
  background:rgba(21,62,101,.92);
  color:#f1c96f;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  padding:8px 14px;
  box-shadow:0 8px 20px rgba(5,18,34,.34);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, box-shadow .2s ease, background .2s ease;
}
.search-area-btn.show{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.search-area-btn.armed{
  animation:searchAreaPulse 1.35s ease-in-out infinite;
}
.search-area-btn.loading{
  animation:none;
  background:rgba(29,78,124,.95);
  box-shadow:0 10px 26px rgba(5,18,34,.48);
  cursor:wait;
}
.search-area-btn:disabled{opacity:1;pointer-events:none;}
@keyframes searchAreaPulse{
  0%,100%{box-shadow:0 8px 20px rgba(5,18,34,.34);}
  50%{box-shadow:0 10px 26px rgba(201,168,76,.22);}
}

/* map live badge (always on map, top-left) */
.live-vp-badge{
  position:absolute;
  top:74px;
  left:12px;
  z-index:1450;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:8px 12px 8px 10px;
  border:1px solid rgba(170,214,241,.36);
  border-radius:13px;
  background:linear-gradient(160deg, rgba(20,63,101,.95), rgba(25,84,132,.9));
  color:rgba(255,255,255,.7);
  box-shadow:0 8px 22px rgba(5,18,34,.35);
  pointer-events:none;
  backdrop-filter:blur(8px);
}
.live-vp-icon-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
}
.live-vp-icon-wrap::after{
  content:'';
  position:absolute;
  inset:-5px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  opacity:.35;
}
.live-vp-copy{display:flex;flex-direction:column;line-height:1.05;text-align:left;}
#vp-label{font-size:12px;font-weight:700;color:rgba(255,255,255,.86);letter-spacing:.01em;}
#vp-meta{font-size:10px;color:rgba(255,255,255,.58);margin-top:3px;}
.live-vp-badge.loading{
  border-color:rgba(251,191,36,.62);
  background:linear-gradient(160deg, rgba(58,82,117,.95), rgba(91,70,30,.92));
}
.live-vp-badge.loading .live-vp-icon-wrap::after{
  border-color:rgba(251,191,36,.65);
  animation:livePulse 1.1s infinite ease-in-out;
}
.live-vp-badge.done{
  border-color:rgba(74,222,128,.62);
  background:linear-gradient(160deg, rgba(18,66,55,.92), rgba(21,91,68,.88));
}
.live-vp-badge.done .live-vp-icon-wrap::after{
  border-color:rgba(74,222,128,.62);
}
@keyframes livePulse{
  0%{transform:scale(1);opacity:.75;}
  70%{transform:scale(1.22);opacity:.15;}
  100%{transform:scale(1);opacity:.75;}
}

/* cache stats */
.cache-info{
  font-size:10px;color:rgba(255,255,255,.50);padding:6px 10px;border:1px solid rgba(170,214,241,.24);
  border-radius:11px;background:rgba(21,62,101,.42);
}
.cache-info span{color:var(--muted);}
.district-pill{
  display:none;align-items:center;gap:6px;margin-left:8px;padding:2px 7px;border-radius:999px;
  border:1px solid rgba(201,168,76,.45);background:rgba(201,168,76,.1);font-size:10px;color:var(--gold);
}
.district-pill.show{display:inline-flex;}
.district-pill button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:10px;line-height:1;padding:0 2px;}
.district-pill button:hover{color:var(--red);}

.tol{
  display:flex;align-items:center;gap:7px;margin-left:auto;padding:6px 10px;font-size:11px;color:var(--muted);
  border:1px solid rgba(170,214,241,.24);border-radius:11px;background:rgba(21,62,101,.42);
}
.tol input[type=range]{-webkit-appearance:none;width:75px;height:3px;background:var(--border);border-radius:2px;outline:none;cursor:pointer;}
.tol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--gold);cursor:pointer;}
#tol-val{color:var(--gold);min-width:26px;}

/* ── MAIN */
.main{display:flex;flex:1;overflow:hidden;}
#map{flex:1;position:relative;--mobile-sheet-offset:90px;}
body:not(.outdoor-mode) #map::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.18);
  z-index: 420;
}
#map .leaflet-bottom.leaflet-left{left:12px;bottom:14px;}
#map .leaflet-control-zoom{
  margin:0;
  border:none;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(5,18,34,.38);
}
#map .leaflet-control-zoom a{
  width:42px;
  height:42px;
  line-height:42px;
  font-size:24px;
  font-weight:500;
  border:none;
  background:rgba(27,79,127,.92);
  color:rgba(255,255,255,.72);
}
#map .leaflet-control-zoom a:hover{
  background:rgba(49,106,152,.96);
  color:rgba(255,255,255,.88);
}
#map .leaflet-control-zoom a.leaflet-disabled{
  background:rgba(31,76,118,.7);
  color:rgba(255,255,255,.36);
}

/* ── SIDEBAR */
.sidebar {
  width: 300px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.2) transparent;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.2); border-radius: 4px; }
.sb-head{padding:11px 13px;border-bottom:1px solid var(--border);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;justify-content:space-between;}
.sb-count{color:var(--gold);font-weight:600;}
.mosque-list{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
.m-item{padding:8px 13px;border-bottom:1px solid rgba(170,214,241,.5);cursor:pointer;display:flex;gap:8px;align-items:flex-start;transition:background .12s;}
.m-item:hover{background:var(--panel);}
.m-item.active{background:rgba(201,168,76,.08);}
.m-dot{width:6px;height:6px;border-radius:50%;margin-top:4px;flex-shrink:0;}
.m-info{flex:1;min-width:0;}
.m-name{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m-sub{font-size:10px;color:var(--muted);margin-top:2px;}
.m-diff{font-size:10px;font-weight:600;flex-shrink:0;}
.m-group-hdr{
  padding:6px 13px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color:rgba(255,255,255,.50);
  background:rgba(21,62,101,.48);
  border-top:1px solid rgba(170,214,241,.24);
  border-bottom:1px solid rgba(170,214,241,.16);
}
/* ── MOSQUE SEARCH */
.ms-wrap{position:relative;border-bottom:1px solid var(--border);flex-shrink:0;}
.ms-box{display:flex;align-items:center;gap:7px;padding:8px 12px;background:var(--panel);}
.ms-icon{font-size:13px;flex-shrink:0;opacity:.5;}
.ms-box input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:inherit;font-size:12px;}
.ms-box input::placeholder{color:var(--muted);}
.ms-box input.has-value{color:var(--gold);}
#ms-clear{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:0 2px;display:none;line-height:1;}
#ms-clear:hover{color:var(--red);}
#ms-clear.show{display:block;}
.ms-scope{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 12px;background:#1b4f7f;border-top:1px solid rgba(170,214,241,.45);
}
.ms-scope-lbl{font-size:10px;color:var(--muted);}
.ms-scope-lbl b{color:var(--text);font-weight:600;}
.ms-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer;}
.ms-switch input{position:absolute;opacity:0;pointer-events:none;}
.ms-switch-track{
  width:34px;height:18px;border-radius:20px;background:rgba(170,214,241,.28);border:1px solid rgba(170,214,241,.40);
  position:relative;transition:all .15s;
}
.ms-switch-track::after{
  content:'';position:absolute;top:1px;left:1px;width:14px;height:14px;border-radius:50%;
  background:#d1d5db;transition:left .15s;
}
.ms-switch input:checked + .ms-switch-track{
  background:rgba(201,168,76,.25);border-color:rgba(201,168,76,.6);
}
.ms-switch input:checked + .ms-switch-track::after{
  left:17px;background:#c9a84c;
}
/* dropdown */
.ms-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--panel);border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;z-index:900;max-height:220px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;box-shadow:0 8px 24px rgba(0,0,0,.5);display:none;}
.ms-dropdown.show{display:block;}
.ms-item{padding:8px 13px;cursor:pointer;display:flex;gap:8px;align-items:flex-start;border-bottom:1px solid rgba(170,214,241,.4);transition:background .1s;}
.ms-item:last-child{border-bottom:none;}
.ms-item:hover,.ms-item.focused{background:rgba(201,168,76,.07);}
.ms-item-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.ms-item-info{flex:1;min-width:0;}
.ms-item-name{font-size:11px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ms-item-name mark{background:transparent;color:var(--gold);font-weight:700;}
.ms-item-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-right:6px;
  border-radius:6px;
  border:1px solid rgba(170,214,241,.32);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.70);
  font-size:9px;
  font-weight:700;
  vertical-align:middle;
}
.ms-item-sub{font-size:10px;color:var(--muted);margin-top:1px;}
.ms-item-sub.meta{opacity:.9;}
.ms-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.ms-badge{font-size:9px;padding:1px 6px;border-radius:10px;border:1px solid rgba(170,214,241,.28);color:rgba(255,255,255,.50);background:#1b4f7f;}
.ms-badge.pop{color:#c9a84c;border-color:rgba(201,168,76,.38);background:rgba(201,168,76,.1);}
.ms-badge.near{color:#60a5fa;border-color:rgba(96,165,250,.35);background:rgba(96,165,250,.1);}
.ms-badge.view{color:#4ade80;border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.1);}
.ms-item-diff{font-size:10px;font-weight:600;flex-shrink:0;margin-top:2px;white-space:nowrap;}
.ms-no-result{padding:12px 13px;font-size:11px;color:var(--muted);text-align:center;}
.ms-group-hdr{
  padding:6px 12px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color:rgba(255,255,255,.50);
  background:rgba(21,62,101,.52);
  border-top:1px solid rgba(170,214,241,.26);
  border-bottom:1px solid rgba(170,214,241,.18);
  display:flex;
  align-items:center;
  gap:6px;
}
.ms-group-act{
  margin-left:auto;
  border:1px solid rgba(170,214,241,.28);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.60);
  border-radius:8px;
  font-family:inherit;
  font-size:9px;
  padding:2px 8px;
  cursor:pointer;
}
.ms-group-act:hover{
  color:#f1c96f;
  border-color:rgba(201,168,76,.42);
}
.ms-group-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:15px;
  height:15px;
  border-radius:5px;
  border:1px solid rgba(170,214,241,.30);
  color:rgba(255,255,255,.68);
  background:rgba(255,255,255,.05);
  font-size:9px;
  font-weight:700;
}
.ms-item-del{
  margin-left:6px;
  margin-top:1px;
  width:19px;
  height:19px;
  border-radius:7px;
  border:1px solid rgba(170,214,241,.26);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.55);
  cursor:pointer;
  font-size:14px;
  line-height:16px;
  padding:0;
}
.ms-item-del:hover{
  color:#f87171;
  border-color:rgba(248,113,113,.44);
  background:rgba(248,113,113,.1);
}
.ms-suggest-btn{
  margin-top:7px;background:#1b4f7f;border:1px solid rgba(170,214,241,.28);color:#c9a84c;
  font-family:inherit;font-size:10px;padding:5px 8px;border-radius:6px;cursor:pointer;
}
.ms-suggest-btn:hover{border-color:rgba(201,168,76,.45);background:rgba(201,168,76,.08);}
/* Active filter banner */
.ms-filter-banner{display:none;padding:5px 12px;background:rgba(201,168,76,.08);border-bottom:1px solid rgba(201,168,76,.2);font-size:10px;color:var(--gold);align-items:center;justify-content:space-between;}
.ms-filter-banner.show{display:flex;}
.ms-filter-banner button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;padding:0;}
.ms-filter-banner button:hover{color:var(--red);}

.legend{padding:10px 13px;border-top:1px solid var(--border);font-size:10px;color:var(--muted);display:flex;flex-direction:column;gap:5px;}
.leg-row{display:flex;align-items:center;gap:7px;}
.leg-line{width:22px;height:2px;border-radius:1px;}
.pull-refresh{display:none;text-align:center;padding:0 10px;line-height:0;overflow:hidden;transition:line-height .18s ease,padding .18s ease;background:rgba(201,168,76,.08);color:var(--gold);border-bottom:1px solid rgba(201,168,76,.22);font-size:10px;letter-spacing:.08em;text-transform:uppercase;}
.pull-refresh.show{display:block;}
.pull-refresh.visible{line-height:22px;padding:6px 10px;}

/* ── LOADING OVERLAY */
.overlay{position:fixed;inset:0;background:rgba(22,71,115,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(4px);}
.spinner{width:42px;height:42px;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.ov-text{margin-top:13px;font-size:12px;color:var(--muted);letter-spacing:.1em;}
.ov-sub{font-size:10px;color:rgba(255,255,255,.50);margin-top:4px;}
.ov-cancel{
  margin-top:14px;
  display:none;
  align-items:center;
  justify-content:center;
  min-width:110px;
  border-radius:10px;
  border:1px solid rgba(170,214,241,.42);
  background:rgba(31,83,127,.82);
  color:rgba(255,255,255,.86);
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  padding:8px 14px;
  cursor:pointer;
}
.ov-cancel:hover{background:rgba(42,101,148,.86);}

/* ── MINI LOADER (non-blocking, bottom-left of map) */
.mini-loader{position:absolute;bottom:12px;left:12px;z-index:800;background:rgba(27,79,127,.9);border:1px solid var(--border);border-radius:7px;padding:7px 12px;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px;pointer-events:none;opacity:0;transition:opacity .25s;backdrop-filter:blur(4px);}
.mini-loader.show{opacity:1;}
.mini-spin{width:12px;height:12px;border:1.5px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0;}

/* ── KIBLE ANIMATION PANEL */
.qibla-panel{position:absolute;top:clamp(118px,17vh,170px);left:12px;z-index:800;background:rgba(27,79,127,.92);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:11px;color:var(--muted);min-width:200px;pointer-events:none;opacity:0;transition:opacity .3s;backdrop-filter:blur(6px);}
.qibla-panel.show{opacity:1;}
.qp-name{color:var(--gold);font-size:12px;font-weight:700;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;}
.qp-row{display:flex;justify-content:space-between;gap:16px;margin-bottom:3px;}
.qp-k{color:var(--muted);}
.qp-v{color:var(--text);}
.qp-anim{font-size:9px;color:var(--gold);margin-top:6px;letter-spacing:.1em;text-transform:uppercase;}
.district-hover-chip{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:803;
  background:rgba(22,71,115,.9);border:1px solid rgba(201,168,76,.35);color:var(--gold);
  border-radius:999px;padding:6px 10px;font-size:10px;letter-spacing:.03em;pointer-events:none;
  opacity:0;transition:opacity .2s;
}
.district-hover-chip.show{opacity:1;}

.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:5px;color:var(--muted);font-size:11px;padding:18px;text-align:center;min-height:180px;}
.empty-icon{font-size:28px;opacity:.35;margin-bottom:5px;}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--border);padding:9px 16px;border-radius:8px;font-size:12px;z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap;}
.toast.show{opacity:1;}

/* Leaflet popup */
.leaflet-popup-content-wrapper{background:var(--panel) !important;color:var(--text) !important;border:1px solid var(--border) !important;border-radius:8px !important;box-shadow:0 8px 32px rgba(22,71,115,.60) !important;}
.leaflet-popup-tip{background:var(--panel) !important;}
.leaflet-popup-content{font-family:inherit;font-size:12px;margin:10px 14px !important;}
.p-name{font-size:13px;color:var(--gold);font-weight:700;margin-bottom:7px;}
.p-row{display:flex;justify-content:space-between;gap:14px;margin-bottom:3px;}
.p-k{color:var(--muted);}.p-v{color:var(--text);}
.p-method{font-size:9px;color:rgba(255,255,255,.50);margin-top:6px;letter-spacing:.08em;}
.p-anim-btn{margin-top:8px;background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.3);color:var(--gold);font-family:inherit;font-size:10px;padding:5px 10px;border-radius:5px;cursor:pointer;width:100%;pointer-events:all;}
.p-anim-btn:hover{background:rgba(201,168,76,.25);}

/* ══ TOOLTIPS ═══════════════════════════════════════════════ */
[data-tip]{position:relative;}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:#225786;border:1px solid rgba(170,214,241,.40);color:#e8e4d8;font-size:10px;font-family:inherit;padding:4px 9px;border-radius:5px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:9000;letter-spacing:.03em;}
[data-tip]:hover::after{opacity:1;}

/* ══ KEYBOARD SHORTCUT OVERLAY ══════════════════════════════ */
.ks-overlay{position:fixed;inset:0;background:rgba(22,71,115,.82);z-index:9800;display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px);}
.ks-overlay.show{display:flex;}
.ks-modal{background:#1a4d7b;border:1px solid rgba(170,214,241,.28);border-radius:14px;padding:28px 32px;width:min(560px,94vw);box-shadow:0 24px 80px rgba(0,0,0,.9);}
.ks-title{font-size:14px;font-weight:700;color:#e8e4d8;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;}
.ks-close-btn{background:none;border:none;color:rgba(255,255,255,.50);cursor:pointer;font-size:15px;padding:2px 6px;border-radius:4px;}
.ks-close-btn:hover{color:#e8e4d8;}
.ks-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;}
.ks-row{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid rgba(170,214,241,.4);}
.ks-row:last-child{border-bottom:none;}
.ks-key{background:#225786;border:1px solid rgba(170,214,241,.40);border-radius:5px;padding:2px 7px;font-size:10px;color:#c9a84c;font-family:inherit;min-width:28px;text-align:center;font-weight:700;flex-shrink:0;}
.ks-desc{font-size:11px;color:rgba(255,255,255,.50);}
.ks-footer{margin-top:14px;font-size:10px;color:rgba(255,255,255,.50);text-align:center;}

/* ══ STAT COUNTER ANIMATION ════════════════════════════════ */
.stat-num{transition:color .3s;}
.stat-num.updated{animation:statpop .4s ease;}
@keyframes statpop{0%{transform:scale(1.3);}100%{transform:scale(1);}}

/* ══ SIDEBAR LIST STAGGER ════════════════════════════════════ */
.m-item{animation:fadeSlide .2s ease both;}
@keyframes fadeSlide{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* ══ SKELETON LOADER ════════════════════════════════════════ */
.sk-item{padding:8px 13px;border-bottom:1px solid rgba(170,214,241,.5);display:flex;gap:8px;align-items:center;}
.sk-dot{width:6px;height:6px;border-radius:50%;background:#275d8d;flex-shrink:0;}
.sk-line{height:9px;border-radius:4px;background:linear-gradient(90deg,#225786 25%,#2a6598 50%,#225786 75%);background-size:200% 100%;animation:shimmer 1.2s infinite;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.sk-name{flex:1;}
.sk-diff{width:34px;}

/* ══ MOBILE RESPONSIVE ══════════════════════════════════════ */
.mob-menu-btn{display:none;background:transparent;border:1px solid var(--border);color:var(--muted);font-size:16px;padding:5px 9px;border-radius:6px;cursor:pointer;line-height:1;}
.mob-menu-btn:hover{color:var(--text);}

/* Mobile menu drawer */
.mob-drawer {
  position: fixed;
  top: 8px;
  left: 8px;
  bottom: 8px;
  width: min(340px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  z-index: 8000;
  transform: translateX(calc(-100% - 14px));
  transition: transform var(--transition-smooth);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.mob-drawer.open{transform:translateX(0);}
.mob-drawer-backdrop{position:fixed;inset:0;background:rgba(22,71,115,.66);z-index:7999;display:none;backdrop-filter:blur(4px);}
.mob-drawer-backdrop.show{display:block;}
.mob-drawer-shell{display:flex;flex-direction:column;height:100%;padding:12px;}
.mob-drawer-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.mob-brand-chip{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(21,62,101,.72);
  border:1px solid rgba(170,214,241,.28);
  border-radius:12px;
  padding:10px 12px;
  color:rgba(255,255,255,.9);
  font-size:14px;
  font-weight:700;
  letter-spacing:.01em;
}
.mob-brand-icon{
  width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(170,214,241,.32);border-radius:8px;font-size:11px;color:rgba(255,255,255,.7);
}
.mob-brand-icon img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  border-radius:inherit;
}
.mob-drawer-close{
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(21,62,101,.72);border:1px solid rgba(170,214,241,.28);border-radius:12px;
  color:rgba(255,255,255,.7);font-size:18px;line-height:1;
}
.mob-search-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  background:rgba(21,62,101,.66);
  border:1px solid rgba(170,214,241,.32);
  border-radius:12px;
  padding:8px;
}
.mob-search-icon{
  width:30px;height:30px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(27,79,127,.9);color:rgba(255,255,255,.6);font-size:15px;flex-shrink:0;
}
.mob-search-row input{
  flex:1;background:transparent;border:none;color:#e8e4d8;font-family:inherit;font-size:14px;padding:0 4px;outline:none;
}
.mob-search-row input:focus{border-color:#c9a84c;}
.mob-search-row button{
  border-radius:10px;
  padding:8px 12px;
  font-weight:700;
  cursor:pointer;
}
.mob-drawer-scroll{flex:1;overflow-y:auto;padding-right:2px;display:flex;flex-direction:column;gap:10px;}
.mob-drawer-section{
  background:rgba(21,62,101,.54);
  border:1px solid rgba(170,214,241,.24);
  border-radius:14px;
  padding:10px;
}
.mob-drawer-section-lbl{
  font-size:10px;
  color:rgba(255,255,255,.5);
  letter-spacing:.11em;
  text-transform:uppercase;
  margin:0 0 8px 2px;
}
.mob-drawer .mob-drawer-btn::before{content:none !important;}
.mob-drawer-btn{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:transparent !important;border:1px solid rgba(170,214,241,.2) !important;color:rgba(255,255,255,.72) !important;
  font-family:inherit;font-size:14px;padding:10px 11px;border-radius:11px;cursor:pointer;
  margin-bottom:6px;transition:all .14s;
}
.mob-drawer-btn:last-child{margin-bottom:0;}
.mob-nav-ico{
  width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.56);font-size:12px;line-height:1;flex-shrink:0;
}
.mob-drawer-btn > span:last-child{flex:1;}
.mob-drawer-btn::after{content:'›';color:rgba(255,255,255,.4);font-size:14px;line-height:1;}
.mob-drawer-btn:hover{
  color:#e8e4d8 !important;
  border-color:rgba(170,214,241,.44) !important;
  background:rgba(34,87,134,.65) !important;
}
.mob-drawer-btn.active{
  background:rgba(201,168,76,.12) !important;
  color:#e8e4d8 !important;
  border-color:rgba(201,168,76,.42) !important;
}
.mob-drawer-btn.active .mob-nav-ico{color:#c9a84c;}
.mob-drawer-foot{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.mob-lang-btn{
  border-radius:10px;
  border:1px solid rgba(170,214,241,.34);
  background:rgba(21,62,101,.72);
  color:rgba(255,255,255,.72);
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  padding:9px 10px;
  cursor:pointer;
}
.mob-lang-btn:hover{border-color:rgba(170,214,241,.5);background:rgba(34,87,134,.72);}
.mob-bottom-bar{display:none;}
.mob-layer-stack{display:none;}
.compass-fab{display:none;}

.sb-snap-panels{display:none;}

@media (max-width: 1460px) and (min-width: 769px) {
  header{
    flex-wrap:wrap;
    row-gap:8px;
    align-items:flex-start;
  }
  .divider{display:none;}
  .search-box{
    order:30;
    flex:1 1 100%;
    max-width:none;
  }
  .header-actions{
    order:20;
    margin-left:0;
    width:100%;
    align-items:stretch;
  }
  .header-row{
    justify-content:flex-start;
  }
  .btn-sm{padding:6px 9px;font-size:10px;}
}

@media (max-width: 768px) {
  html,body{
    width:100%;
    height:100%;
    overflow:hidden;
    overscroll-behavior:none;
    -webkit-text-size-adjust:100%;
  }

  /* Mobile portrait floating layout */
  body{
    background:#164773;
  }
  header{display:none !important;}
  .header-actions{display:none !important;}
  .logo-sub,.divider,.map-switch,.btn-sm:not(#mob-menu-show){display:none !important;}
  .lang-switch{display:none !important;}
  .search-box{display:none !important;}
  .floating-search{
    display:flex !important;
    position:fixed;
    top:calc(10px + env(safe-area-inset-top, 0px));
    left:50%;
    transform:translateX(-50%);
    width:min(560px, calc(100vw - 26px));
    border-radius:999px;
    padding:6px;
    gap:6px;
    z-index:1500;
    background:linear-gradient(160deg, rgba(22,71,115,.94), rgba(33,97,146,.9));
    border:1px solid rgba(170,214,241,.42);
    box-shadow:0 14px 34px rgba(5,18,34,.35);
    backdrop-filter:blur(12px);
  }
  .floating-search input{
    order:2;
    font-size:16px;
    min-width:0;
    color:rgba(255,255,255,.86);
    background:transparent;
    padding:10px 8px;
  }
  .floating-search input::placeholder{color:rgba(255,255,255,.52);}
  .floating-search .btn#search-btn{
    order:3;
    border-radius:999px;
    padding:10px 14px;
    font-size:14px;
    border:1px solid rgba(201,168,76,.46);
    background:rgba(201,168,76,.24);
    color:#f1c96f;
    flex-shrink:0;
  }
  .mob-pill-logo{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    order:1;
    width:38px;
    height:38px;
    border-radius:999px;
    border:none;
    background:transparent;
    color:#f1c96f;
    font-family:inherit;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    flex-shrink:0;
  }
  .mob-pill-logo img{
    width:30px;
    height:30px;
    display:block;
    object-fit:contain;
    border-radius:8px;
  }
  .mob-pill-menu{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    order:4;
    width:38px;
    height:38px;
    border-radius:999px;
    border:1px solid rgba(170,214,241,.34);
    background:rgba(21,62,101,.84);
    color:rgba(255,255,255,.72);
    font-family:inherit;
    cursor:pointer;
    flex-shrink:0;
  }
  .mob-pill-menu::before{
    content:'≡';
    font-size:15px;
    line-height:1;
  }
  .floating-search .city-smart-dd{
    left:46px;
    right:46px;
    top:calc(100% + 8px);
    border-radius:16px;
    background:rgba(21,62,101,.96);
    border:1px solid rgba(170,214,241,.34);
  }
  .search-area-btn{display:none !important;}
  .mob-menu-btn{display:block;}
  .brand-home{margin-right:auto;}

  .mob-bottom-bar{display:none !important;}
  .mob-bottom-bar input{
    flex:1;
    min-width:0;
    background:#205b90;
    border:1px solid rgba(170,214,241,.40);
    color:#e8e4d8;
    font-family:inherit;
    font-size:16px;
    border-radius:8px;
    padding:11px 12px;
    outline:none;
  }
  .mob-bottom-bar button{
    border:1px solid rgba(170,214,241,.40);
    background:#1b4f7f;
    color:#e8e4d8;
    font-family:inherit;
    font-size:14px;
    border-radius:8px;
    padding:10px 12px;
    cursor:pointer;
  }
  .mob-bottom-bar button.primary{
    background:#c9a84c;
    color:#164773;
    border-color:#c9a84c;
    font-weight:700;
  }
  .mob-bottom-bar button:active{transform:translateY(1px);}
  .mob-bottom-bar button:last-child{min-width:44px;}
  #mob-city-smart-dd{
    position:absolute;
    left:0;
    right:0;
    bottom:calc(100% + 8px);
    top:auto;
    max-height:46vh;
    border-radius:12px;
    border:1px solid rgba(170,214,241,.36);
    background:rgba(21,62,101,.96);
    box-shadow:0 14px 32px rgba(0,0,0,.48);
    z-index:1210;
  }
  #mob-city-smart-dd .ms-item{padding:10px 12px;}
  #mob-city-smart-dd .ms-item-name{font-size:13px;}
  #mob-city-smart-dd .ms-item-sub{font-size:11px;}

  .mob-search-row input{font-size:16px;}
  .mob-search-row{position:relative;}
  #mob-drawer-city-smart-dd{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 8px);
    max-height:42vh;
    border-radius:12px;
    border:1px solid rgba(170,214,241,.36);
    background:rgba(21,62,101,.97);
    box-shadow:0 14px 28px rgba(0,0,0,.44);
    z-index:8100;
  }
  #mob-drawer-city-smart-dd .ms-item{padding:9px 11px;}
  #mob-drawer-city-smart-dd .ms-item-name{font-size:13px;}
  #mob-drawer-city-smart-dd .ms-item-sub{font-size:11px;}
  .dp-int-form input,.dp-int-form select{font-size:16px;}
  .ms-box input{font-size:16px;}
  .stats-bar,.mob-bottom-bar{touch-action:manipulation;}

  .mob-layer-stack{
    display:flex;
    flex-direction:column;
    gap:6px;
    position:absolute;
    top:10px;
    right:10px;
    z-index:1450;
  }
  .mob-layer-btn{
    border:1px solid rgba(170,214,241,.40);
    background:rgba(31,83,127,.94);
    color:#d1d5db;
    font-family:inherit;
    font-size:12px;
    border-radius:8px;
    padding:8px 10px;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(0,0,0,.35);
  }
  .mob-layer-btn.active{
    background:#c9a84c;
    color:#164773;
    border-color:#c9a84c;
    font-weight:700;
  }

  .compass-fab{
    display:flex;
    position:absolute;
    right:10px;
    bottom:86px;
    z-index:1450;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border-radius:50%;
    border:1px solid rgba(170,214,241,.40);
    background:rgba(31,83,127,.94);
    color:#d1d5db;
    font-family:inherit;
    font-size:20px;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(0,0,0,.35);
  }
  .compass-fab.active{
    background:#c9a84c;
    color:#164773;
    border-color:#c9a84c;
  }

  /* Stats bar scrollable */
  .stats-bar{
    position:fixed;
    top:calc(66px + env(safe-area-inset-top, 0px));
    left:13px;
    right:13px;
    z-index:1400;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;
    scrollbar-width:none;
    border-radius:16px;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(25,35,54,.12);
    box-shadow:0 10px 26px rgba(8,15,28,.12);
    padding:8px 10px;
  }
  .stats-bar::-webkit-scrollbar{display:none;}
  .stat{
    background:#ffffff;
    border:1px solid rgba(25,35,54,.1);
    color:#0f172a;
  }
  .stat-lbl{color:#475569;}
  .stat-num{color:#0f172a;}
  .stat{flex-shrink:0;}
  .tol{flex-shrink:0;}
  .cache-info{display:none;}
  .district-pill{flex-shrink:0;}

  /* Sidebar becomes bottom sheet */
  .main{
    position:fixed;
    inset:0;
    background:#ffffff;
    padding:8px;
  }
  #map{
    position:absolute;
    inset:8px;
    border-radius:34px;
    border:10px solid #ffffff;
    overflow:hidden;
    box-sizing:border-box;
  }
  .sidebar{
    position:fixed;bottom:0;left:0;right:0;
    width:100% !important;
    height:95vh;
    --sheet-snap:20;
    border-left:none;border-top:1px solid rgba(170,214,241,.28);
    border-radius:14px 14px 0 0;
    transform:translateY(calc(100% - (var(--sheet-snap) * 1vh)));
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    z-index:700;
    box-shadow:0 -8px 40px rgba(22,71,115,.60);
    padding-bottom:70px;
  }
  .sidebar.mob-open{--sheet-snap:95;}
  .sb-head{cursor:pointer;justify-content:center;padding:10px;position:sticky;top:0;background:#1b4f7f;z-index:2;}
  .sb-head::before{content:'';display:block;width:36px;height:4px;background:rgba(170,214,241,.40);border-radius:2px;position:absolute;top:6px;left:50%;transform:translateX(-50%);}

  .sb-snap-panels{display:block;border-bottom:1px solid rgba(170,214,241,.28);background:#174a78;}
  .sb-mini-panel,.sb-half-panel{display:none;padding:10px 12px;}
  .sb-mini-title{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.50);margin-bottom:4px;}
  .sb-mini-city{font-size:12px;color:#e8e4d8;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .sb-mini-score{font-size:24px;font-weight:700;color:#c9a84c;line-height:1;margin-top:4px;}
  .sb-mini-sub{font-size:10px;color:rgba(255,255,255,.50);}
  .sb-half-grid{display:grid;grid-template-columns:1fr 110px;gap:10px;align-items:center;}
  .sb-half-metrics{display:flex;flex-direction:column;gap:6px;}
  .sb-half-row{display:flex;justify-content:space-between;font-size:10px;color:rgba(255,255,255,.50);border-bottom:1px solid rgba(170,214,241,.45);padding-bottom:4px;}
  .sb-half-row b{color:#e8e4d8;}
  #sb-radar{width:108px;height:108px;border-radius:50%;border:1px solid rgba(170,214,241,.28);background:#1a4d7b;}

  .sidebar[data-snap="min"] .sb-mini-panel{display:block;}
  .sidebar[data-snap="half"] .sb-half-panel{display:block;}
  .sidebar[data-snap="full"] .ms-wrap,
  .sidebar[data-snap="full"] .ms-filter-banner,
  .sidebar[data-snap="full"] .mosque-list,
  .sidebar[data-snap="full"] .legend{display:block;}
  .sidebar[data-snap="min"] .ms-wrap,
  .sidebar[data-snap="min"] .ms-filter-banner,
  .sidebar[data-snap="min"] .mosque-list,
  .sidebar[data-snap="min"] .legend,
  .sidebar[data-snap="min"] #sb-pull-indicator{display:none !important;}
  .sidebar[data-snap="half"] .ms-wrap,
  .sidebar[data-snap="half"] .ms-filter-banner,
  .sidebar[data-snap="half"] .mosque-list,
  .sidebar[data-snap="half"] .legend,
  .sidebar[data-snap="half"] #sb-pull-indicator{display:none !important;}
  .sidebar[data-snap="full"] .sb-mini-panel,
  .sidebar[data-snap="full"] .sb-half-panel{display:none;}

  /* Detail panel full-screen on mobile */
  .dp-panel{width:100% !important;border-left:none;border-top:1px solid rgba(170,214,241,.28);}
  .dp-int-gallery{grid-template-columns:repeat(2,1fr);}
  .dp-int-form{grid-template-columns:1fr;}
  .dp-name{font-size:21px;}
  .dp-name-ar{font-size:17px;}
  .dp-coords{font-size:11px;}
  .dp-ribbon-lbl{font-size:10px;}
  .dp-ribbon-val{font-size:18px;}
  .dp-status-badge{font-size:15px;}
  .dp-section-title{font-size:11px;}
  .dp-int-meta{font-size:13px;}
  .dp-int-form label{font-size:13px;}
  .dp-int-form input,.dp-int-form select{font-size:16px;padding:9px 10px;}
  .dp-int-axis-val{font-size:15px;}
  .dp-qs-row{font-size:14px;}
  .dp-wiki-body{font-size:14px;}
  .dp-tag-row{grid-template-columns:130px 1fr;font-size:13px;}
  .dp-action-btn{font-size:14px;padding:10px 12px;}
  .m-item{font-size:13px;}

  /* Score card repositioned */
  .score-card{right:8px;top:8px;width:200px;}

  /* Qibla panel smaller */
  .qibla-panel{top:128px;left:10px;max-width:min(340px,calc(100% - 20px));font-size:10px;}
  .qp-name{max-width:140px;}
  .district-hover-chip{
    top:8px;left:8px;transform:none;max-width:calc(100% - 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  /* Modals full-screen */
  .hist-modal,.cmp-modal,.lb-modal{width:100% !important;max-height:100vh;border-radius:0;margin:0;}
  .lab-modal{width:100% !important;max-height:100vh;border-radius:0;margin:0;}
  .cmps-modal{width:100% !important;max-height:100vh;border-radius:0;margin:0;}
  .m3d-modal{width:100% !important;max-height:100vh;border-radius:0;margin:0;}
  .biz-modal{width:100% !important;max-height:100vh;border-radius:0;margin:0;}
  .hist-overlay,.cmp-overlay,.lb-overlay{align-items:flex-end;}
  .lab-overlay{align-items:flex-end;}
  .cmps-overlay,.m3d-overlay{align-items:flex-end;}
  .biz-overlay{align-items:flex-end;}
  .biz-grid{grid-template-columns:1fr;}
  .biz-form{grid-template-columns:1fr;}
  .lab-grid{grid-template-columns:1fr;}
  .m3d-wrap{grid-template-columns:1fr;}
  .m3d-side{border-left:none;border-top:1px solid rgba(170,214,241,.28);}

  .live-vp-badge{
    top:calc(120px + env(safe-area-inset-top, 0px));
    left:10px;
    min-height:40px;
    padding:7px 11px 7px 9px;
    border-radius:12px;
  }
  #vp-label{font-size:11px;}
  #vp-meta{font-size:9px;}
  #map .leaflet-bottom.leaflet-left{left:10px;bottom:calc(var(--mobile-sheet-offset, 90px) + env(safe-area-inset-bottom, 0px));}
  .search-area-btn{
    top:56px;
    font-size:11px;
    padding:7px 12px;
  }
  .sidebar{display:none !important;}

  .ov-cancel{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:calc(18px + env(safe-area-inset-bottom, 0px));
    min-width:160px;
    padding:11px 16px;
    font-size:14px;
    border-radius:12px;
  }
}

@media (max-width: 480px) {
  .logo-title{font-size:14px;}
  .floating-search .btn#search-btn{padding:10px 11px;font-size:13px;}
  .mob-bottom-bar{
    left:8px;
    right:8px;
    bottom:calc(8px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 900px) and (pointer: coarse) {
  .mob-bottom-bar{display:none !important;}
}



/* ══ COMPARISON MODAL CSS ══════════════════════════════════ */
.cmp-overlay{position:fixed;inset:0;background:rgba(22,71,115,.75);z-index:5000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.cmp-overlay.show{display:flex;}
.cmp-modal{background:#1a4d7b;border:1px solid rgba(170,214,241,.28);border-radius:14px;width:min(820px,96vw);max-height:90vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.8);display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:rgba(170,214,241,.28) transparent;}
.cmp-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px;border-bottom:1px solid rgba(170,214,241,.28);flex-shrink:0;}
.cmp-title{font-size:15px;font-weight:700;color:#e8e4d8;letter-spacing:.02em;}
.cmp-close{background:none;border:none;color:rgba(255,255,255,.50);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:4px;}
.cmp-close:hover{color:#e8e4d8;background:rgba(170,214,241,.28);}

/* inputs */
.cmp-inputs{display:grid;grid-template-columns:1fr 60px 1fr;gap:0;padding:18px 22px;border-bottom:1px solid rgba(170,214,241,.28);align-items:center;}
.cmp-city-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:6px;}
.cmp-city-current{font-size:15px;font-weight:700;color:#e8e4d8;margin-bottom:3px;}
.cmp-city-hint{font-size:10px;color:rgba(255,255,255,.50);}
.cmp-vs{text-align:center;font-size:18px;font-weight:700;color:rgba(170,214,241,.28);}
.cmp-search-row{display:flex;gap:7px;margin-bottom:5px;}
.cmp-search-row input{flex:1;background:#205b90;border:1px solid rgba(170,214,241,.28);color:#e8e4d8;font-family:inherit;font-size:12px;padding:7px 12px;border-radius:6px;outline:none;}
.cmp-search-row input:focus{border-color:#c9a84c;}
.cmp-search-row input::placeholder{color:rgba(255,255,255,.50);}
.cmp-search-row select{background:#205b90;border:1px solid rgba(170,214,241,.28);color:#e8e4d8;font-family:inherit;font-size:11px;padding:7px 9px;border-radius:6px;outline:none;min-width:84px;}
.cmp-search-row select:focus{border-color:#c9a84c;}
.cmp-search-row .btn-sm{padding:7px 10px;font-size:11px;}
.cmp-city-status{font-size:10px;color:rgba(255,255,255,.50);min-height:14px;}

/* progress */
.cmp-progress-wrap{padding:12px 22px;border-bottom:1px solid rgba(170,214,241,.28);}
.cmp-progress-bar{height:3px;background:linear-gradient(90deg,#c9a84c,#e8c97a);border-radius:2px;width:0%;transition:width .4s ease;margin-bottom:6px;}
.cmp-progress-label{font-size:10px;color:rgba(255,255,255,.50);letter-spacing:.08em;}

/* results */
.cmp-results{padding:20px 22px;display:flex;flex-direction:column;gap:20px;}

/* score row */
.cmp-score-row{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:start;}
.cmp-score-block{border-radius:10px;padding:16px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;}
.cmp-a-bg{background:rgba(96,165,250,.06);border:1px solid rgba(96,165,250,.2);}
.cmp-b-bg{background:rgba(244,114,182,.06);border:1px solid rgba(244,114,182,.2);}
.cmp-score-pct{font-size:28px;font-weight:700;color:#e8e4d8;line-height:1;}
.cmp-score-grade{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:12px;}
.cmp-score-grade.A{background:rgba(74,222,128,.15);color:#4ade80;}
.cmp-score-grade.B{background:rgba(251,191,36,.15);color:#fbbf24;}
.cmp-score-grade.C{background:rgba(251,146,60,.15);color:#fb923c;}
.cmp-score-grade.D{background:rgba(248,113,113,.15);color:#f87171;}
.cmp-score-city{font-size:11px;font-weight:700;color:#e8e4d8;text-align:center;max-width:120px;word-break:break-word;}

/* winner middle column */
.cmp-winner-col{display:flex;flex-direction:column;align-items:center;gap:8px;}
.cmp-winner-badge{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:20px;text-align:center;}
.cmp-winner-badge.a{background:rgba(96,165,250,.15);color:#60a5fa;border:1px solid rgba(96,165,250,.3);}
.cmp-winner-badge.b{background:rgba(244,114,182,.15);color:#f472b6;border:1px solid rgba(244,114,182,.3);}
.cmp-winner-badge.tie{background:rgba(201,168,76,.15);color:#c9a84c;border:1px solid rgba(201,168,76,.3);}
#cmp-radar{display:block;}
.cmp-radar-legend{font-size:10px;color:rgba(255,255,255,.50);display:flex;gap:10px;align-items:center;}
.cmp-leg-a{color:#60a5fa;font-size:13px;}
.cmp-leg-b{color:#f472b6;font-size:13px;}

/* bars */
.cmp-bars-section,.cmp-table-section{display:flex;flex-direction:column;gap:8px;}
.cmp-section-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.50);margin-bottom:2px;}
.cmp-bar-row{display:grid;grid-template-columns:120px 1fr 1fr;gap:8px;align-items:center;font-size:11px;}
.cmp-bar-label{color:rgba(255,255,255,.50);text-align:right;padding-right:6px;}
.cmp-bar-outer{height:14px;background:#205b90;border-radius:7px;overflow:hidden;position:relative;}
.cmp-bar-inner{height:100%;border-radius:7px;transition:width .6s ease;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:9px;font-weight:700;color:rgba(255,255,255,.70);white-space:nowrap;}

/* table */
.cmp-tbl{width:100%;border-collapse:collapse;font-size:11px;}
.cmp-tbl th{color:rgba(255,255,255,.50);font-weight:500;padding:6px 10px;text-align:left;border-bottom:1px solid rgba(170,214,241,.28);}
.cmp-tbl td{padding:6px 10px;border-bottom:1px solid rgba(170,214,241,.4);}
.cmp-tbl tr:last-child td{border:none;}
.cmp-tbl .winner-cell{font-weight:700;}

.cmp-footer{padding:12px 22px;border-top:1px solid rgba(170,214,241,.28);font-size:10px;color:rgba(255,255,255,.50);flex-shrink:0;}
body:not(.outdoor-mode) .cmp-modal{
  font-family:'Inter','Manrope','Segoe UI','Helvetica Neue',Arial,sans-serif;
}
body:not(.outdoor-mode) .cmp-modal :is(
  .cmp-close,
  .cmp-city-hint,
  .cmp-city-status,
  .cmp-progress-label,
  .cmp-radar-legend,
  .cmp-section-label,
  .cmp-bar-label,
  .cmp-tbl th,
  .cmp-footer
){
  color:rgba(255,255,255,.50) !important;
}
body:not(.outdoor-mode) .cmp-modal .cmp-search-row input::placeholder{
  color:rgba(255,255,255,.50) !important;
}

/* ══ DETAIL PANEL CSS ═════════════════════════════════════════ */
.dp-backdrop{position:fixed;inset:0;background:rgba(22,71,115,0);z-index:4800;display:none;transition:background .25s;}
.dp-backdrop.show{display:block;background:rgba(22,71,115,.45);}
.dp-panel{position:fixed;top:0;right:0;bottom:0;width:380px;background:#1a4d7b;border-left:1px solid rgba(170,214,241,.28);z-index:4900;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(170,214,241,.28) transparent;display:flex;flex-direction:column;}
.dp-panel.open{transform:translateX(0);}

/* Head */
.dp-head{padding:16px 16px 12px;border-bottom:1px solid rgba(170,214,241,.28);display:flex;justify-content:space-between;align-items:flex-start;flex-shrink:0;background:linear-gradient(135deg,#1f537f,#255b89);}
.dp-head-left{flex:1;min-width:0;padding-right:8px;}
.dp-name{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;color:#e8e4d8;line-height:1.2;word-break:break-word;}
.dp-name-ar{font-family:'Noto Naskh Arabic',serif;font-size:15px;color:#c9a84c;margin-top:3px;direction:rtl;text-align:right;}
.dp-place{font-size:10px;color:rgba(255,255,255,.50);margin-top:4px;letter-spacing:.02em;}
.dp-coords{font-size:9px;color:rgba(255,255,255,.50);margin-top:4px;letter-spacing:.05em;}
.dp-close{background:none;border:none;color:rgba(255,255,255,.50);cursor:pointer;font-size:16px;padding:2px 5px;border-radius:4px;flex-shrink:0;}
.dp-close:hover{color:#e8e4d8;background:rgba(170,214,241,.28);}

/* Ribbon */
.dp-ribbon{display:flex;border-bottom:1px solid rgba(170,214,241,.28);flex-shrink:0;}
.dp-ribbon-item{flex:1;padding:9px 10px;border-right:1px solid rgba(170,214,241,.28);display:flex;flex-direction:column;gap:3px;}
.dp-ribbon-item:last-child{border-right:none;}
.dp-ribbon-lbl{font-size:8px;color:rgba(255,255,255,.50);letter-spacing:.1em;text-transform:uppercase;}
.dp-ribbon-val{font-size:12px;font-weight:700;color:#e8e4d8;}
.dp-status-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;}
.dp-status-badge.correct{background:rgba(74,222,128,.12);color:#4ade80;border:1px solid rgba(74,222,128,.3);}
.dp-status-badge.wrong{background:rgba(248,113,113,.12);color:#f87171;border:1px solid rgba(248,113,113,.3);}
.dp-status-badge.unknown{background:rgba(251,191,36,.10);color:#fbbf24;border:1px solid rgba(251,191,36,.25);}

/* Photo */
.dp-photo-wrap{position:relative;flex-shrink:0;}
.dp-photo{width:100%;max-height:200px;object-fit:cover;display:block;}
.dp-photo-credit{position:absolute;bottom:4px;right:6px;font-size:8px;color:rgba(255,255,255,.5);background:rgba(22,71,115,.55);padding:1px 5px;border-radius:3px;}

/* Sections */
.dp-section{padding:14px 16px;border-bottom:1px solid rgba(170,214,241,.5);}
.dp-section-title{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.50);margin-bottom:10px;}

/* Interior evidence */
.dp-int-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px;}
.dp-int-thumb{position:relative;border:1px solid rgba(170,214,241,.28);border-radius:6px;overflow:hidden;cursor:pointer;background:#1b4f7f;height:70px;}
.dp-int-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.dp-int-thumb span{position:absolute;left:4px;bottom:4px;font-size:8px;color:#d1d5db;background:rgba(22,71,115,.58);padding:1px 4px;border-radius:3px;}
.dp-int-meta{font-size:10px;color:rgba(255,255,255,.50);line-height:1.45;margin-bottom:8px;}
.dp-int-form{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px;}
.dp-int-form label{grid-column:1/-1;font-size:10px;color:rgba(255,255,255,.50);}
.dp-int-form input,.dp-int-form select{background:#1b4f7f;border:1px solid rgba(170,214,241,.28);color:#e8e4d8;font-family:inherit;font-size:10px;padding:7px 9px;border-radius:6px;outline:none;}
.dp-int-form input[type=range]{grid-column:1/-1;padding:0;height:4px;accent-color:#c9a84c;}
.dp-int-axis-val{font-size:10px;color:#c9a84c;align-self:center;}
.dp-int-form button{grid-column:1/-1;justify-content:center;}
.dp-int-ev-list{display:flex;flex-direction:column;gap:5px;}
.dp-int-ev-row{display:flex;align-items:center;gap:8px;background:#1b4f7f;border:1px solid rgba(170,214,241,.28);border-radius:6px;padding:6px 8px;font-size:10px;}
.dp-int-ev-main{flex:1;color:#e8e4d8;}
.dp-int-ev-sub{font-size:9px;color:rgba(255,255,255,.50);}
.dp-int-ev-del{background:none;border:1px solid rgba(248,113,113,.35);color:#f87171;border-radius:5px;font-size:9px;padding:3px 6px;cursor:pointer;}

/* Compass */
.dp-qibla-row{display:flex;gap:14px;align-items:flex-start;}
#dp-compass{flex-shrink:0;border-radius:50%;background:#1b4f7f;border:1px solid rgba(170,214,241,.28);}
.dp-qibla-stats{flex:1;display:flex;flex-direction:column;gap:7px;}
.dp-qs-row{display:flex;justify-content:space-between;font-size:11px;}
.dp-qs-k{color:rgba(255,255,255,.50);}
.dp-qs-v{color:#e8e4d8;font-weight:600;}

/* Wikipedia */
.dp-wiki-body{font-size:11px;color:rgba(255,255,255,.50);line-height:1.65;margin-bottom:8px;max-height:140px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(170,214,241,.28) transparent;}
.dp-wiki-link{font-size:10px;color:#c9a84c;text-decoration:none;letter-spacing:.04em;}
.dp-wiki-link:hover{text-decoration:underline;}

/* Tags */
.dp-tags{display:flex;flex-direction:column;gap:3px;}
.dp-tag-row{display:grid;grid-template-columns:140px 1fr;gap:6px;font-size:10px;padding:3px 0;border-bottom:1px solid rgba(170,214,241,.3);}
.dp-tag-row:last-child{border-bottom:none;}
.dp-tag-k{color:rgba(255,255,255,.50);word-break:break-all;}
.dp-tag-v{color:#c9a84c;word-break:break-all;}
.dp-tag-v a{color:#60a5fa;text-decoration:none;}
.dp-tag-v a:hover{text-decoration:underline;}

/* Actions */
.dp-actions{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px 20px;flex-shrink:0;}
.dp-action-btn{display:flex;align-items:center;gap:6px;background:#1b4f7f;border:1px solid rgba(170,214,241,.28);color:#e8e4d8;font-family:inherit;font-size:10px;padding:7px 12px;border-radius:6px;cursor:pointer;text-decoration:none;transition:all .13s;}
.dp-action-btn:hover{border-color:#c9a84c;color:#c9a84c;background:rgba(201,168,76,.06);}
.dp-action-btn.anim{background:rgba(201,168,76,.1);border-color:rgba(201,168,76,.35);color:#c9a84c;}
.dp-action-btn.anim:hover{background:rgba(201,168,76,.2);}
body:not(.outdoor-mode) .dp-panel :is(
  .dp-place,
  .dp-coords,
  .dp-ribbon-lbl,
  .dp-section-title,
  .dp-int-meta,
  .dp-int-form label,
  .dp-int-ev-sub,
  .dp-qs-k,
  .dp-wiki-body,
  .dp-tag-k
){
  color:rgba(255,255,255,.82) !important;
}
body:not(.outdoor-mode) .dp-panel :is(
  .dp-name,
  .dp-name-ar,
  .dp-ribbon-val,
  .dp-int-ev-main,
  .dp-qs-v,
  .dp-tag-v,
  .dp-tag-v a
){
  color:rgba(255,255,255,.92) !important;
}
body:not(.outdoor-mode) .dp-panel .dp-int-form input::placeholder{
  color:rgba(255,255,255,.68) !important;
}

/* ══ EXPORT MODAL CSS ═════════════════════════════════════════ */
.exp-overlay{position:fixed;inset:0;background:rgba(22,71,115,.78);z-index:5200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.exp-overlay.show{display:flex;}
.exp-modal{background:#1a4d7b;border:1px solid rgba(170,214,241,.28);border-radius:14px;width:min(540px,95vw);max-height:88vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.9);display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:rgba(170,214,241,.28) transparent;}
.exp-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px;border-bottom:1px solid rgba(170,214,241,.28);}
.exp-title{font-size:15px;font-weight:700;color:#e8e4d8;}
.exp-close{background:none;border:none;color:rgba(255,255,255,.50);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:4px;}
.exp-close:hover{color:#e8e4d8;background:rgba(170,214,241,.28);}

.exp-section{padding:16px 22px;border-bottom:1px solid rgba(170,214,241,.5);}
.exp-section:last-of-type{border-bottom:none;}
.exp-section-title{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.50);margin-bottom:12px;}

/* Share URL */
.exp-url-row{display:flex;gap:8px;margin-bottom:8px;}
.exp-url-input{flex:1;background:#1b4f7f;border:1px solid rgba(170,214,241,.28);color:#c9a84c;font-family:inherit;font-size:11px;padding:8px 12px;border-radius:6px;outline:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.exp-copy-btn{background:#c9a84c;color:#164773;border:none;font-family:inherit;font-size:11px;font-weight:700;padding:8px 16px;border-radius:6px;cursor:pointer;white-space:nowrap;transition:background .15s;}
.exp-copy-btn:hover{background:#e8c97a;}
.exp-copy-btn.copied{background:#4ade80;color:#164773;}
.exp-url-hint{font-size:10px;color:rgba(255,255,255,.50);line-height:1.5;}

/* Summary */
.exp-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.exp-sum-card{background:#1b4f7f;border:1px solid #275d8d;border-radius:8px;padding:10px;text-align:center;}
.exp-sum-val{font-size:20px;font-weight:700;color:#c9a84c;}
.exp-sum-lbl{font-size:9px;color:rgba(255,255,255,.50);text-transform:uppercase;letter-spacing:.08em;margin-top:3px;}

/* Download grid */
.exp-dl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.exp-dl-btn{background:#1b4f7f;border:1px solid rgba(170,214,241,.28);border-radius:8px;padding:14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:all .15s;text-align:center;}
.exp-dl-btn:hover{border-color:#c9a84c;background:rgba(201,168,76,.06);}
.exp-dl-icon{font-size:22px;line-height:1;}
.exp-dl-label{font-size:13px;font-weight:700;color:#e8e4d8;font-family:inherit;}
.exp-dl-desc{font-size:10px;color:rgba(255,255,255,.50);}

.exp-footer{padding:12px 22px;font-size:10px;color:rgba(255,255,255,.50);}

/* ══ BUSINESS / MONETIZATION MODAL CSS ═══════════════════════ */
.biz-overlay{position:fixed;inset:0;background:rgba(22,71,115,.78);z-index:5250;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.biz-overlay.show{display:flex;}
.biz-modal{background:#1a4d7b;border:1px solid rgba(170,214,241,.28);border-radius:14px;width:min(700px,96vw);max-height:90vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.9);display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:rgba(170,214,241,.28) transparent;}
.biz-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px;border-bottom:1px solid rgba(170,214,241,.28);}
.biz-title{font-size:15px;font-weight:700;color:#e8e4d8;}
.biz-close{background:none;border:none;color:rgba(255,255,255,.50);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:4px;}
.biz-close:hover{color:#e8e4d8;background:rgba(170,214,241,.28);}
.biz-section{padding:16px 22px;border-bottom:1px solid rgba(170,214,241,.5);}
.biz-section:last-child{border-bottom:none;}
.biz-section-title{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.50);margin-bottom:12px;}
.biz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.biz-card{background:#1b4f7f;border:1px solid rgba(170,214,241,.28);border-radius:8px;padding:10px;}
.biz-card-name{font-size:11px;font-weight:700;color:#e8e4d8;}
.biz-card-price{font-size:16px;font-weight:700;color:#c9a84c;margin-top:5px;}
.biz-card-desc{font-size:10px;color:rgba(255,255,255,.50);margin-top:6px;line-height:1.4;}
.biz-inline{display:flex;justify-content:space-between;gap:8px;font-size:11px;padding:8px 10px;border:1px solid rgba(170,214,241,.28);border-radius:7px;background:#1b4f7f;color:#e8e4d8;margin-bottom:7px;}
.biz-inline strong{color:#c9a84c;}
.biz-cta-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.biz-cta{background:transparent;border:1px solid rgba(170,214,241,.28);color:rgba(255,255,255,.50);font-family:inherit;font-size:11px;padding:8px 12px;border-radius:7px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;}
.biz-cta:hover{color:#e8e4d8;border-color:rgba(170,214,241,.40);background:#1b4f7f;}
.biz-cta.primary{background:#c9a84c;color:#164773;border-color:transparent;font-weight:700;}
.biz-cta.primary:hover{background:#e8c97a;color:#164773;}
.biz-form{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.biz-form input,.biz-form textarea{background:#1b4f7f;border:1px solid rgba(170,214,241,.28);color:#e8e4d8;font-family:inherit;font-size:11px;padding:8px 10px;border-radius:7px;outline:none;}
.biz-form textarea{grid-column:1 / -1;min-height:74px;resize:vertical;}
.biz-form button{grid-column:1 / -1;}
.biz-hint{font-size:10px;color:rgba(255,255,255,.50);margin-top:8px;}

/* ══ LAB MODAL ═══════════════════════════════════════════════ */
.lab-overlay{position:fixed;inset:0;background:rgba(22,71,115,.78);z-index:5260;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.lab-overlay.show{display:flex;}
.lab-modal{background:#1a4d7b;border:1px solid rgba(170,214,241,.28);border-radius:14px;width:min(900px,97vw);max-height:90vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.9);display:flex;flex-direction:column;}
.lab-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(170,214,241,.28);}
.lab-title{font-size:15px;font-weight:700;color:#e8e4d8;}
.lab-close{background:none;border:none;color:rgba(255,255,255,.50);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:4px;}
.lab-close:hover{color:#e8e4d8;background:rgba(170,214,241,.28);}
.lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px;}
.lab-card{background:#1b4f7f;border:1px solid rgba(170,214,241,.28);border-radius:10px;padding:10px;min-height:180px;}
.lab-card-title{font-size:10px;color:rgba(255,255,255,.50);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;}
.lab-row{display:flex;justify-content:space-between;gap:8px;font-size:10px;padding:6px 0;border-bottom:1px solid rgba(170,214,241,.35);}
.lab-row:last-child{border-bottom:none;}
.lab-k{color:rgba(255,255,255,.50);}
.lab-v{color:#e8e4d8;text-align:right;}
.badge{display:inline-block;font-size:9px;padding:2px 6px;border-radius:9px;border:1px solid rgba(170,214,241,.28);color:#c9a84c;}

/* ══ COMPASS MODAL ═══════════════════════════════════════════ */
.cmps-overlay{position:fixed;inset:0;background:rgba(22,71,115,.78);z-index:5265;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.cmps-overlay.show{display:flex;}
.cmps-modal{background:#1a4d7b;border:1px solid rgba(170,214,241,.28);border-radius:14px;width:min(420px,95vw);max-height:90vh;overflow-y:auto;}
.cmps-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(170,214,241,.28);}
.cmps-title{font-size:14px;font-weight:700;color:#e8e4d8;}
.cmps-close{background:none;border:none;color:rgba(255,255,255,.50);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:4px;}
.cmps-close:hover{color:#e8e4d8;background:rgba(170,214,241,.28);}
.cmps-body{padding:12px 16px;}
#cmps-canvas{display:block;margin:0 auto 10px;border:1px solid rgba(170,214,241,.45);border-radius:50%;background:#1b4f7f;}
.cmps-rows{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;}
.cmps-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}

/* ══ 3D MODAL ════════════════════════════════════════════════ */
.m3d-overlay{position:fixed;inset:0;background:rgba(22,71,115,.82);z-index:5266;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.m3d-overlay.show{display:flex;}
.m3d-modal{background:#1a4d7b;border:1px solid rgba(170,214,241,.28);border-radius:14px;width:min(980px,97vw);max-height:90vh;overflow:hidden;display:flex;flex-direction:column;}
.m3d-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(170,214,241,.28);}
.m3d-title{font-size:14px;font-weight:700;color:#e8e4d8;}
.m3d-close{background:none;border:none;color:rgba(255,255,255,.50);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:4px;}
.m3d-close:hover{color:#e8e4d8;background:rgba(170,214,241,.28);}
.m3d-wrap{display:grid;grid-template-columns:1fr 260px;min-height:420px;}
#m3d-canvas{width:100%;height:100%;display:block;background:#225786;}
.m3d-side{border-left:1px solid rgba(170,214,241,.28);padding:10px;overflow-y:auto;font-size:11px;color:rgba(255,255,255,.50);}

.manual-axis-point{background:#c9a84c;border:1px solid #fff;border-radius:50%;width:10px;height:10px;box-shadow:0 0 10px rgba(201,168,76,.8);}

/* ══ LEADERBOARD CSS ══════════════════════════════════════════ */
.lb-overlay{position:fixed;inset:0;background:rgba(22,71,115,.8);z-index:5100;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.lb-overlay.show{display:flex;}
.lb-modal{background:#164773;border:1px solid rgba(170,214,241,.28);border-radius:14px;width:min(1020px,97vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 32px 100px rgba(0,0,0,.9);}

/* Header */
.lb-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px 12px;border-bottom:1px solid rgba(170,214,241,.28);flex-shrink:0;background:linear-gradient(135deg,#1f537f,#255b89);}
.lb-title{font-size:16px;font-weight:700;color:#e8e4d8;letter-spacing:.02em;}
.lb-header-right{display:flex;align-items:center;gap:12px;}
.lb-updated{font-size:10px;color:rgba(255,255,255,.50);}
.lb-close{background:none;border:none;color:rgba(255,255,255,.50);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:4px;}
.lb-close:hover{color:#e8e4d8;background:rgba(170,214,241,.28);}

/* Controls */
.lb-controls{padding:12px 20px;border-bottom:1px solid rgba(170,214,241,.28);flex-shrink:0;display:flex;flex-direction:column;gap:10px;background:#1f537f;}
.lb-add-wrap{display:flex;gap:8px;align-items:center;}
.lb-add-wrap input{flex:1;max-width:340px;background:#205b90;border:1px solid rgba(170,214,241,.28);color:#e8e4d8;font-family:inherit;font-size:12px;padding:7px 13px;border-radius:6px;outline:none;transition:border-color .2s;}
.lb-add-wrap input:focus{border-color:#c9a84c;}
.lb-add-wrap input::placeholder{color:rgba(255,255,255,.50);}
#lb-add-btn{background:#c9a84c;color:#164773;border:none;font-family:inherit;font-size:11px;font-weight:700;padding:7px 16px;border-radius:6px;cursor:pointer;letter-spacing:.04em;white-space:nowrap;transition:background .15s;}
#lb-add-btn:hover{background:#e8c97a;}
#lb-add-btn:disabled{background:rgba(170,214,241,.40);color:rgba(255,255,255,.50);cursor:not-allowed;}

/* Progress */
.lb-progress-wrap{display:flex;align-items:center;gap:10px;height:18px;}
.lb-progress-bar{height:4px;background:#c9a84c;border-radius:2px;transition:width .4s ease;width:0%;}
.lb-progress-label{font-size:10px;color:#c9a84c;letter-spacing:.05em;white-space:nowrap;}

/* Region filters */
.lb-filters{display:flex;gap:6px;flex-wrap:wrap;}
.lb-filter{background:transparent;border:1px solid rgba(170,214,241,.28);color:rgba(255,255,255,.50);font-family:inherit;font-size:10px;padding:4px 10px;border-radius:14px;cursor:pointer;transition:all .13s;}
.lb-filter:hover{color:#e8e4d8;border-color:rgba(255,255,255,.50);}
.lb-filter.active{background:rgba(201,168,76,.15);color:#c9a84c;border-color:rgba(201,168,76,.45);font-weight:700;}

/* Sort buttons */
.lb-sort-row{display:flex;align-items:center;gap:6px;}
.lb-sort-label{font-size:10px;color:rgba(255,255,255,.50);margin-right:2px;}
.lb-sort{background:transparent;border:1px solid #275d8d;color:rgba(255,255,255,.50);font-family:inherit;font-size:10px;padding:3px 9px;border-radius:4px;cursor:pointer;transition:all .13s;}
.lb-sort:hover{color:#e8e4d8;}
.lb-sort.active{background:#275d8d;color:#e8e4d8;border-color:rgba(170,214,241,.40);}
.lb-mode-row{display:flex;align-items:center;gap:6px;}
.lb-mode{background:transparent;border:1px solid #275d8d;color:rgba(255,255,255,.50);font-family:inherit;font-size:10px;padding:3px 9px;border-radius:4px;cursor:pointer;transition:all .13s;}
.lb-mode:hover{color:#e8e4d8;}
.lb-mode.active{background:#275d8d;color:#e8e4d8;border-color:rgba(170,214,241,.40);}

/* Summary strip */
.lb-summary{display:flex;gap:0;border-bottom:1px solid rgba(170,214,241,.28);flex-shrink:0;}
.lb-sum-item{flex:1;padding:10px 16px;text-align:center;border-right:1px solid rgba(170,214,241,.28);}
.lb-sum-item:last-child{border-right:none;}
.lb-sum-val{font-size:20px;font-weight:700;color:#c9a84c;}
.lb-sum-lbl{font-size:9px;color:rgba(255,255,255,.50);text-transform:uppercase;letter-spacing:.1em;margin-top:2px;}

/* Table */
.lb-table-wrap{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(170,214,241,.28) transparent;}
.lb-table-head{display:grid;grid-template-columns:36px 1fr 140px 42px 28px 52px 58px 72px 60px;align-items:center;padding:8px 16px;border-bottom:1px solid rgba(170,214,241,.28);font-size:9px;color:rgba(255,255,255,.50);letter-spacing:.1em;text-transform:uppercase;position:sticky;top:0;background:#1f537f;z-index:2;}
.lb-row{display:grid;grid-template-columns:36px 1fr 140px 42px 28px 52px 58px 72px 60px;align-items:center;padding:9px 16px;border-bottom:1px solid rgba(170,214,241,.35);transition:background .12s;cursor:pointer;}
.lb-row:hover{background:rgba(201,168,76,.04);}
.lb-row.current-city{background:rgba(201,168,76,.07);border-left:2px solid #c9a84c;}
.lb-row.analyzing{opacity:.5;pointer-events:none;}

/* Row cells */
.lbt-rank{font-size:13px;font-weight:700;text-align:center;}
.lb-rank-1{color:#fbbf24;}
.lb-rank-2{color:rgba(255,255,255,.50);}
.lb-rank-3{color:#c9784c;}
.lb-rank-n{color:rgba(255,255,255,.50);}

.lbt-city{display:flex;flex-direction:column;gap:2px;min-width:0;padding-right:8px;}
.lb-city-name{font-size:12px;color:#e8e4d8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lb-city-country{font-size:9px;color:rgba(255,255,255,.50);}

.lbt-bar{padding-right:8px;}
.lb-bar-track{height:6px;background:#225786;border-radius:3px;overflow:hidden;}
.lb-bar-fill{height:100%;border-radius:3px;transition:width .8s cubic-bezier(.4,0,.2,1);}

.lbt-pct{font-size:13px;font-weight:700;text-align:right;}
.lbt-not{text-align:center;font-size:13px;}
.lbt-count,.lbt-avg{font-size:11px;color:rgba(255,255,255,.50);text-align:right;}
.lbt-date{font-size:9px;color:rgba(255,255,255,.50);text-align:right;}
.lbt-act{display:flex;gap:4px;justify-content:flex-end;}
.lb-act-btn{background:#205b90;border:1px solid rgba(170,214,241,.28);color:rgba(255,255,255,.50);font-size:9px;padding:3px 7px;border-radius:4px;cursor:pointer;font-family:inherit;transition:all .12s;white-space:nowrap;}
.lb-act-btn:hover{color:#c9a84c;border-color:rgba(201,168,76,.4);}
.lb-act-btn.danger:hover{color:#f87171;border-color:rgba(248,113,113,.4);}

.lb-empty{padding:48px;text-align:center;color:rgba(255,255,255,.50);font-size:13px;}
.lb-empty-icon{font-size:40px;margin-bottom:12px;opacity:.4;}

/* Footer */
.lb-footer{padding:10px 20px;border-top:1px solid rgba(170,214,241,.28);font-size:10px;color:rgba(255,255,255,.50);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.lb-clear-btn{background:transparent;border:1px solid rgba(248,113,113,.25);color:rgba(248,113,113,.6);font-family:inherit;font-size:10px;padding:3px 10px;border-radius:4px;cursor:pointer;transition:all .12s;}
.lb-clear-btn:hover{background:rgba(248,113,113,.08);color:#f87171;border-color:#f87171;}

/* ══ HISTORY MODAL CSS ════════════════════════════════════════ */
.hist-overlay{position:fixed;inset:0;background:rgba(22,71,115,.78);z-index:5000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.hist-overlay.show{display:flex;}
.hist-modal{background:#1a4d7b;border:1px solid rgba(170,214,241,.28);border-radius:14px;width:min(860px,96vw);max-height:90vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.85);display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:rgba(170,214,241,.28) transparent;}
.hist-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px;border-bottom:1px solid rgba(170,214,241,.28);flex-shrink:0;}
.hist-title{font-size:15px;font-weight:700;color:#e8e4d8;letter-spacing:.02em;}
.hist-close{background:none;border:none;color:rgba(255,255,255,.50);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:4px;}
.hist-close:hover{color:#e8e4d8;background:rgba(170,214,241,.28);}

/* Period chips */
.hist-chips{display:flex;flex-wrap:wrap;gap:8px;padding:14px 22px;border-bottom:1px solid rgba(170,214,241,.28);}
.hist-chip{background:transparent;border:1px solid rgba(170,214,241,.28);color:rgba(255,255,255,.50);font-family:inherit;font-size:11px;padding:5px 13px;border-radius:20px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:5px;}
.hist-chip:hover{color:#e8e4d8;border-color:rgba(255,255,255,.50);}
.hist-chip.active{font-weight:700;}
.hist-chip-sub{font-size:9px;opacity:.6;}
.hist-chip.all.active{background:rgba(201,168,76,.15);color:#c9a84c;border-color:rgba(201,168,76,.4);}
.hist-chip.ottoman.active{background:rgba(167,139,250,.15);color:#a78bfa;border-color:rgba(167,139,250,.4);}
.hist-chip.early.active{background:rgba(251,191,36,.15);color:#fbbf24;border-color:rgba(251,191,36,.4);}
.hist-chip.mid.active{background:rgba(96,165,250,.15);color:#60a5fa;border-color:rgba(96,165,250,.4);}
.hist-chip.modern.active{background:rgba(74,222,128,.15);color:#4ade80;border-color:rgba(74,222,128,.4);}
.hist-chip.unknown.active{background:rgba(107,114,128,.15);color:rgba(255,255,255,.50);border-color:rgba(107,114,128,.4);}

/* Summary cards */
.hist-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:14px 22px;border-bottom:1px solid rgba(170,214,241,.28);}
.hist-card{border-radius:8px;padding:12px 10px;display:flex;flex-direction:column;gap:4px;border:1px solid rgba(170,214,241,.28);}
.hist-card.ottoman{border-color:rgba(167,139,250,.25);background:rgba(167,139,250,.05);}
.hist-card.early{border-color:rgba(251,191,36,.25);background:rgba(251,191,36,.05);}
.hist-card.mid{border-color:rgba(96,165,250,.25);background:rgba(96,165,250,.05);}
.hist-card.modern{border-color:rgba(74,222,128,.25);background:rgba(74,222,128,.05);}
.hist-card.unknown{border-color:rgba(107,114,128,.2);background:rgba(107,114,128,.04);}
.hist-card-period{font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;}
.hist-card.ottoman .hist-card-period{color:#a78bfa;}
.hist-card.early .hist-card-period{color:#fbbf24;}
.hist-card.mid .hist-card-period{color:#60a5fa;}
.hist-card.modern .hist-card-period{color:#4ade80;}
.hist-card.unknown .hist-card-period{color:rgba(255,255,255,.50);}
.hist-card-count{font-size:22px;font-weight:700;color:#e8e4d8;line-height:1;}
.hist-card-pct{font-size:11px;font-weight:700;}
.hist-card.ottoman .hist-card-pct{color:#a78bfa;}
.hist-card.early .hist-card-pct{color:#fbbf24;}
.hist-card.mid .hist-card-pct{color:#60a5fa;}
.hist-card.modern .hist-card-pct{color:#4ade80;}
.hist-card.unknown .hist-card-pct{color:rgba(255,255,255,.50);}
.hist-card-avg{font-size:10px;color:rgba(255,255,255,.50);}

/* Chart and scatter */
.hist-chart-wrap,.hist-scatter-wrap{padding:16px 22px;border-bottom:1px solid rgba(170,214,241,.28);}
.hist-section-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.50);margin-bottom:10px;}
#hist-chart,#hist-scatter{display:block;width:100%;border-radius:6px;}
.hist-scatter-legend{display:flex;gap:14px;font-size:10px;color:rgba(255,255,255,.50);margin-top:8px;flex-wrap:wrap;}
.hsl-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px;vertical-align:middle;}
.hsl-dot.ottoman{background:#a78bfa;}
.hsl-dot.early{background:#fbbf24;}
.hsl-dot.mid{background:#60a5fa;}
.hsl-dot.modern{background:#4ade80;}

/* Table */
.hist-table-wrap{padding:16px 22px;border-bottom:1px solid rgba(170,214,241,.28);}
.hist-tbl{width:100%;border-collapse:collapse;font-size:11px;}
.hist-tbl th{color:rgba(255,255,255,.50);font-weight:500;padding:6px 10px;text-align:left;border-bottom:1px solid rgba(170,214,241,.28);}
.hist-tbl td{padding:6px 10px;border-bottom:1px solid rgba(170,214,241,.4);color:#e8e4d8;}
.hist-tbl tr:last-child td{border:none;}
.hist-period-badge{display:inline-block;padding:1px 7px;border-radius:10px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.hist-period-badge.ottoman{background:rgba(167,139,250,.15);color:#a78bfa;}
.hist-period-badge.early{background:rgba(251,191,36,.15);color:#fbbf24;}
.hist-period-badge.mid{background:rgba(96,165,250,.15);color:#60a5fa;}
.hist-period-badge.modern{background:rgba(74,222,128,.15);color:#4ade80;}
.hist-period-badge.unknown{background:rgba(107,114,128,.12);color:rgba(255,255,255,.50);}

/* Filtered list */
.hist-list-wrap{padding:16px 22px;}
.hist-list{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(170,214,241,.28) transparent;}
.hist-list-item{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#1b4f7f;border-radius:6px;cursor:pointer;font-size:11px;border:1px solid transparent;transition:border-color .12s;}
.hist-list-item:hover{border-color:rgba(170,214,241,.28);}
.hist-list-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.hist-list-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e8e4d8;}
.hist-list-year{font-size:9px;color:rgba(255,255,255,.50);flex-shrink:0;min-width:36px;}
.hist-list-diff{font-size:10px;font-weight:700;flex-shrink:0;min-width:34px;text-align:right;}

.hist-footer{padding:12px 22px;border-top:1px solid rgba(170,214,241,.28);font-size:10px;color:rgba(255,255,255,.50);flex-shrink:0;}
.hist-footer code{background:#225786;padding:1px 5px;border-radius:3px;font-family:inherit;}

/* ── Desktop'ta header-actions gizle (sidebar'a taşındı) ── */
@media (min-width: 769px) {
  .header-actions {
    display: none !important;
  }
  header {
    padding: 8px 20px;
  }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP NAV SIDEBAR
   ═══════════════════════════════════════════════════════════ */
.nav-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 220px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 1100;
  transition: width var(--transition-smooth);
  overflow: hidden;
}

/* Daraltılmış mod */
.nav-sidebar.collapsed {
  width: 58px;
}
.nav-sidebar.collapsed .ns-label,
.nav-sidebar.collapsed .ns-group-label,
.nav-sidebar.collapsed .ns-lang {
  opacity: 0;
  width: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.nav-sidebar.collapsed .ns-btn {
  justify-content: center;
  padding: 10px;
}
.nav-sidebar.collapsed .ns-brand {
  justify-content: center;
}
.nav-sidebar.collapsed .ns-toggle .ns-icon {
  transform: rotate(180deg);
}

/* Üst bölüm (scroll) */
.nav-sidebar-top {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.15) transparent;
}
.nav-sidebar-top::-webkit-scrollbar { width: 3px; }
.nav-sidebar-top::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.15); border-radius: 3px; }

/* Alt bölüm (sabit) */
.nav-sidebar-bottom {
  padding: 8px 10px 14px;
  flex-shrink: 0;
}

/* Brand */
.ns-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  margin-bottom: 4px;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.ns-brand:hover { background: rgba(255,255,255,0.05); }

/* Divider */
.ns-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 4px;
}

/* Grup Başlığı */
.ns-group { margin-bottom: 4px; }
.ns-group-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 10px 4px;
  transition: opacity var(--transition-smooth);
}

/* Sidebar Butonları */
.ns-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.ns-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
.ns-btn.active {
  background: var(--accent-glow);
  color: var(--accent-light);
}

/* İkon */
.ns-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

/* Label */
.ns-label {
  transition: opacity var(--transition-smooth), width var(--transition-smooth);
}

/* Dil Toggle */
.ns-lang {
  display: flex;
  gap: 4px;
  padding: 4px 6px;
  transition: opacity var(--transition-smooth);
}
.ns-lang-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: all var(--transition-fast);
}
.ns-lang-btn:hover { color: var(--text); }
.ns-lang-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Toggle Butonu */
.ns-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  margin-top: 4px;
}
.ns-toggle:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.ns-toggle .ns-icon {
  transition: transform var(--transition-smooth);
}

/* Tooltip (collapsed modda) */
.nav-sidebar.collapsed .ns-btn[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 62px;
  background: var(--panel);
  color: var(--text);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  z-index: 9999;
  pointer-events: none;
}
.nav-sidebar.collapsed .ns-btn {
  position: relative;
}

/* Mobilde sidebar gizle */
@media (max-width: 768px) {
  .nav-sidebar {
    display: none;
  }
}

/* ── Sidebar varken layout offset ── */
@media (min-width: 769px) {
  header {
    margin-left: 220px;
    transition: margin-left var(--transition-smooth);
  }
  .main {
    margin-left: 220px;
    transition: margin-left var(--transition-smooth);
  }
  .stats-bar {
    margin-left: 220px;
    transition: margin-left var(--transition-smooth);
  }

  /* Sidebar collapsed durumda */
  body.nav-collapsed header,
  body.nav-collapsed .main,
  body.nav-collapsed .stats-bar {
    margin-left: 58px;
  }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 3 - MAP + FLOATING UI
   ═══════════════════════════════════════════════════════════ */
.stats-bar {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  flex-wrap: wrap;
  max-width: calc(100% - 340px);
  pointer-events: auto;
}

@media (min-width: 769px) {
  header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: none;
    pointer-events: none;
    margin-left: 220px;
    transition: margin-left var(--transition-smooth);
  }
  header > * {
    pointer-events: auto;
  }
  .brand-home,
  .divider {
    display: none !important;
  }
  body.nav-collapsed header {
    margin-left: 58px;
  }
}

.floating-search {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  pointer-events: auto;
  width: auto;
  max-width: calc(100% - 32px);
  border: 0;
  box-shadow: none;
  background: transparent;
}

.floating-search .search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 4px 4px 4px 16px;
  box-shadow: var(--shadow-md);
  min-width: 280px;
  max-width: 100%;
  transition: all var(--transition-smooth);
}

.floating-search .search-box:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-glow);
  min-width: 360px;
}

.floating-search .search-box input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  flex: 1;
  padding: 8px 0;
}

.floating-search .search-box input::placeholder {
  color: var(--muted);
}

.floating-search #search-btn,
.floating-search .search-box button:not(.mob-pill-logo):not(.mob-pill-menu) {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.floating-search #search-btn:hover,
.floating-search .search-box button:not(.mob-pill-logo):not(.mob-pill-menu):hover {
  background: var(--accent-light);
  box-shadow: 0 0 16px var(--accent-glow);
}

#map .leaflet-control-zoom {
  margin: 0;
  border: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#map .leaflet-control-zoom a {
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 20px;
  font-weight: 500;
  border: none;
  background: var(--glass);
  color: var(--text);
  transition: all var(--transition-fast);
}

#map .leaflet-control-zoom a:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-bright);
}

#map .leaflet-control-zoom a + a {
  border-top: 1px solid var(--glass-border);
}

#map .leaflet-control-zoom a.leaflet-disabled {
  background: var(--glass);
  color: rgba(255, 255, 255, 0.2);
}

.map-fab {
  position: absolute;
  bottom: 24px;
  right: 16px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
}

.map-fab-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--accent);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
}

.map-fab-btn:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-lg), 0 0 20px var(--accent-glow);
}

.map-fab-btn.secondary {
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text);
}

.map-fab-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.14);
}

.live-badge {
  position: absolute;
  top: 60px;
  left: 16px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  box-shadow: var(--shadow-sm);
}

.live-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4); }
  50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0); }
}

.main {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

@media (min-width: 769px) {
  .main {
    margin-left: 220px;
    transition: margin-left var(--transition-smooth);
  }
  body.nav-collapsed .main {
    margin-left: 58px;
  }
  .stats-bar {
    margin-left: 0 !important;
  }
}

.sidebar {
  width: 320px;
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-left: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.15) transparent;
  z-index: 450;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.2);
  border-radius: 4px;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 8px var(--accent-glow);
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: transform var(--transition-fast);
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 8px var(--accent-glow);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.dot.green { background: var(--green); box-shadow: 0 0 6px rgba(52, 211, 153, 0.4); }
.dot.red { background: var(--red); box-shadow: 0 0 6px rgba(248, 113, 113, 0.4); }
.dot.amber { background: var(--amber); box-shadow: 0 0 6px rgba(251, 191, 36, 0.4); }

.stat-num {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .stats-bar {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    max-width: 100%;
    border-radius: 0;
    margin-left: 0;
    backdrop-filter: none;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
  }

  .floating-search {
    top: 8px;
    left: 8px;
    right: 8px;
    max-width: none;
  }

  .floating-search .search-box {
    min-width: 0;
    flex: 1;
  }

  .floating-search .search-box:focus-within {
    min-width: 0;
  }

  .map-fab {
    bottom: 90px;
    right: 12px;
  }

  .sidebar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--surface);
  }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 4 - MODAL / PANEL SYSTEM MODERNIZATION
   ═══════════════════════════════════════════════════════════ */

/* Backdrop */
.exp-overlay,
.biz-overlay,
.lab-overlay,
.cmps-overlay,
.m3d-overlay,
.lb-overlay,
.hist-overlay,
.cmp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 5000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: modalBackdropIn 0.2s ease-out;
}

.exp-overlay.show,
.biz-overlay.show,
.lab-overlay.show,
.cmps-overlay.show,
.m3d-overlay.show,
.lb-overlay.show,
.hist-overlay.show,
.cmp-overlay.show {
  display: flex;
}

@keyframes modalBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Modal Card */
.exp-modal,
.biz-modal,
.lab-modal,
.cmps-modal,
.m3d-modal,
.lb-modal,
.hist-modal,
.cmp-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  animation: modalCardIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.15) transparent;
}

.exp-modal::-webkit-scrollbar,
.biz-modal::-webkit-scrollbar,
.lab-modal::-webkit-scrollbar,
.cmps-modal::-webkit-scrollbar,
.m3d-modal::-webkit-scrollbar,
.lb-modal::-webkit-scrollbar,
.hist-modal::-webkit-scrollbar,
.cmp-modal::-webkit-scrollbar {
  width: 4px;
}

.exp-modal::-webkit-scrollbar-thumb,
.biz-modal::-webkit-scrollbar-thumb,
.lab-modal::-webkit-scrollbar-thumb,
.cmps-modal::-webkit-scrollbar-thumb,
.m3d-modal::-webkit-scrollbar-thumb,
.lb-modal::-webkit-scrollbar-thumb,
.hist-modal::-webkit-scrollbar-thumb,
.cmp-modal::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.2);
  border-radius: 4px;
}

@keyframes modalCardIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Modal Header */
.exp-header,
.biz-header,
.lab-header,
.cmps-header,
.m3d-header,
.lb-header,
.hist-header,
.cmp-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 3;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* Modal Close Buttons */
.exp-close,
.biz-close,
.lab-close,
.cmps-close,
.m3d-close,
.lb-close,
.hist-close,
.cmp-close,
.ks-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.exp-close:hover,
.biz-close:hover,
.lab-close:hover,
.cmps-close:hover,
.m3d-close:hover,
.lb-close:hover,
.hist-close:hover,
.cmp-close:hover,
.ks-close-btn:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  transform: rotate(90deg);
}

/* Modal Content Area */
.exp-modal > div:not(:first-child),
.biz-modal > div:not(:first-child),
.lab-modal > div:not(:first-child) {
  padding: 20px 24px;
}

/* Modal Tables */
.lb-overlay table,
.hist-overlay table,
.cmp-overlay table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.lb-overlay th,
.hist-overlay th,
.cmp-overlay th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}

.lb-overlay td,
.hist-overlay td,
.cmp-overlay td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.06);
  color: var(--text);
  transition: background var(--transition-fast);
}

.lb-overlay tr:hover td,
.hist-overlay tr:hover td,
.cmp-overlay tr:hover td {
  background: rgba(124, 58, 237, 0.06);
}

.lb-overlay td:first-child,
.hist-overlay td:first-child,
.cmp-overlay td:first-child {
  font-weight: 600;
  color: var(--text-bright);
}

/* Modal Action Buttons */
.lb-overlay button:not(.lb-close),
.hist-overlay button:not(.hist-close),
.cmp-overlay button:not(.cmp-close) {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.lb-overlay button:not(.lb-close):hover,
.hist-overlay button:not(.hist-close):hover,
.cmp-overlay button:not(.cmp-close):hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--text);
}

.lb-overlay button.active,
.hist-overlay button.active,
.cmp-overlay button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Modal Form Elements */
.lb-overlay input[type="text"],
.hist-overlay input[type="text"],
.cmp-overlay input[type="text"],
.lb-overlay select,
.cmp-overlay select {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: all var(--transition-fast);
  width: 100%;
}

.lb-overlay input[type="text"]:focus,
.hist-overlay input[type="text"]:focus,
.cmp-overlay input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  background: rgba(255, 255, 255, 0.06);
}

.lb-overlay input::placeholder,
.hist-overlay input::placeholder,
.cmp-overlay input::placeholder {
  color: var(--muted);
}

.lb-overlay select,
.cmp-overlay select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(255,255,255,0.5)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* Detail Panel */
.dp-panel {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 380px;
  max-height: 70vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-lg);
  z-index: 4900;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform var(--transition-smooth);
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.15) transparent;
}

.dp-panel.open {
  transform: translateY(0);
}

.dp-panel::-webkit-scrollbar { width: 4px; }
.dp-panel::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.2);
  border-radius: 4px;
}

.dp-head {
  position: sticky;
  top: 0;
  background: var(--surface);
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  z-index: 2;
}

@media (max-width: 768px) {
  .dp-panel {
    width: 100%;
    left: 0;
    right: 0;
    max-height: 55vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
}

/* Export Modal Download Cards */
.exp-modal .exp-dl-btn,
.exp-modal button[onclick*="download"],
.exp-modal button[onclick*="export"] {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  margin-bottom: 8px;
}

.exp-modal .exp-dl-btn:hover,
.exp-modal button[onclick*="download"]:hover,
.exp-modal button[onclick*="export"]:hover {
  background: var(--accent-glow);
  border-color: rgba(124, 58, 237, 0.3);
  transform: translateX(4px);
}

/* Score Card Modal Family */
.sc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 5000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.sc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  min-width: 340px;
  max-width: 420px;
  animation: modalCardIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sc-score-center {
  font-size: 48px;
  font-weight: 800;
  color: var(--text-bright);
  text-align: center;
  line-height: 1;
}

.sc-city {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-bright);
  text-align: center;
  margin-bottom: 4px;
}

.sc-stat-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
}

/* Leaflet Popup */
.leaflet-popup-content-wrapper {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 0 !important;
}

.leaflet-popup-content {
  margin: 12px 16px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-family: inherit !important;
}

.leaflet-popup-tip {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.leaflet-popup-close-button {
  color: var(--muted) !important;
  font-size: 20px !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  top: 6px !important;
  right: 6px !important;
  border-radius: 50%;
  transition: all 0.15s !important;
}

.leaflet-popup-close-button:hover {
  color: var(--red) !important;
  background: rgba(248, 113, 113, 0.1) !important;
}

/* Keyboard Shortcuts */
.ks-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 6000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ks-overlay.show {
  display: flex;
}

.ks-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 24px 28px;
  max-width: 480px;
  width: 100%;
  animation: modalCardIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ks-overlay kbd,
.ks-overlay code,
.ks-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--text);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

/* Toast Notification */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  z-index: 9999;
  padding: 12px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transition: all var(--transition-smooth);
  pointer-events: none;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Loading Overlay */
.loading-overlay,
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.loading-overlay .spinner,
.overlay .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(148, 163, 184, 0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ═══════════════════════════════════════════════════════════
   PHASE 5 - SIDEBAR & SCORE PANEL MODERNIZATION
   ═══════════════════════════════════════════════════════════ */

/* Sidebar header */
.sidebar-header,
.sidebar .sidebar-header,
.sidebar .sb-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
}

.sidebar-header h3,
.sidebar-header .sidebar-title,
.sidebar .sb-head span:first-child {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-bright);
  margin: 0 0 2px;
}

.sidebar-header .sidebar-subtitle,
.sidebar .sb-head .sidebar-subtitle {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

/* Sidebar score summary */
.sidebar .score-summary,
.sidebar .sc-summary,
.sidebar .sb-mini-panel {
  padding: 20px 16px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.sidebar .score-big,
.sidebar .sc-big,
.sidebar .sb-mini-score {
  font-size: 52px;
  font-weight: 800;
  color: var(--text-bright);
  line-height: 1;
  letter-spacing: -0.02em;
}

.sidebar .score-label,
.sidebar .sb-mini-sub,
.sidebar .sb-mini-title {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin-top: 4px;
}

/* Stats grid */
.sidebar .stats-grid,
.sidebar .sb-half-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.sidebar .stat-card,
.sidebar .sb-half-row {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
  transition: all var(--transition-fast);
}

.sidebar .stat-card:hover,
.sidebar .sb-half-row:hover {
  background: rgba(124, 58, 237, 0.05);
  border-color: rgba(124, 58, 237, 0.15);
}

.sidebar .stat-card .stat-card-label,
.sidebar .sb-half-row span {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 4px;
}

.sidebar .stat-card .stat-card-value,
.sidebar .sb-half-row b {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.sidebar .stat-card .stat-card-value.green { color: var(--green); }
.sidebar .stat-card .stat-card-value.red { color: var(--red); }
.sidebar .stat-card .stat-card-value.amber { color: var(--amber); }

/* Sidebar mosque search */
.sidebar .mosque-search,
.sidebar .ms-wrap,
.sidebar .ms-box {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}

.sidebar .mosque-search input,
.sidebar .ms-box input,
.sidebar #mosque-search {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: all var(--transition-fast);
}

.sidebar .mosque-search input:focus,
.sidebar .ms-box input:focus,
.sidebar #mosque-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  background: rgba(255, 255, 255, 0.06);
}

.sidebar .mosque-search input::placeholder,
.sidebar .ms-box input::placeholder,
.sidebar #mosque-search::placeholder {
  color: var(--muted);
}

/* Area toggle */
.sidebar .area-toggle,
.sidebar .ms-scope {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}

.sidebar .toggle-switch,
.sidebar .ms-switch-track,
.sidebar input[type="checkbox"]#ms-scope-only {
  position: relative;
  width: 40px;
  height: 22px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  cursor: pointer;
  transition: background var(--transition-fast);
  border: none;
  padding: 0;
}

.sidebar input[type="checkbox"]#ms-scope-only {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
}

.sidebar .ms-switch-track::after,
.sidebar input[type="checkbox"]#ms-scope-only::after,
.sidebar .toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.sidebar input[type="checkbox"]#ms-scope-only:checked,
.sidebar input[type="checkbox"]#ms-scope-only:checked + .ms-switch-track,
.sidebar .toggle-switch.on {
  background: var(--accent);
}

.sidebar input[type="checkbox"]#ms-scope-only:checked::after,
.sidebar input[type="checkbox"]#ms-scope-only:checked + .ms-switch-track::after,
.sidebar .toggle-switch.on::after {
  transform: translateX(18px);
}

/* Filter chips */
.sidebar .filter-chips,
.sidebar .filter-row,
.sidebar .map-switch {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  flex-wrap: wrap;
}

.sidebar .filter-chip,
.sidebar .map-switch button {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sidebar .filter-chip:hover,
.sidebar .map-switch button:hover {
  color: var(--text);
  border-color: rgba(148, 163, 184, 0.3);
}

.sidebar .filter-chip.active,
.sidebar .map-switch button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Mosque list cards */
.sidebar .mosque-list {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar .mosque-item,
.sidebar .ms-row,
.sidebar .m-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  gap: 8px;
  background: rgba(255, 255, 255, 0.01);
}

.sidebar .mosque-item:hover,
.sidebar .ms-row:hover,
.sidebar .m-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}

.sidebar .mosque-item.active,
.sidebar .ms-row.active,
.sidebar .m-item.active {
  background: var(--accent-glow);
  border-color: rgba(124, 58, 237, 0.25);
}

.sidebar .mosque-item .ms-name,
.sidebar .ms-row .ms-name,
.sidebar .m-item .m-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar .mosque-item .ms-info,
.sidebar .ms-row .ms-info,
.sidebar .m-item .m-sub {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar .mosque-item .ms-deviation,
.sidebar .ms-row .ms-deviation,
.sidebar .m-item .m-diff,
.sidebar .m-item .ms-deviation {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 42px;
  text-align: center;
}

.sidebar .ms-deviation.correct,
.sidebar .ms-row.correct .ms-deviation,
.sidebar .m-item.correct .m-diff,
.sidebar .m-item.correct .ms-deviation {
  background: rgba(52, 211, 153, 0.12);
  color: var(--green) !important;
}

.sidebar .ms-deviation.deviated,
.sidebar .ms-row.deviated .ms-deviation,
.sidebar .m-item.deviated .m-diff,
.sidebar .m-item.deviated .ms-deviation {
  background: rgba(248, 113, 113, 0.12);
  color: var(--red) !important;
}

.sidebar .ms-deviation.nodata,
.sidebar .ms-row.nodata .ms-deviation,
.sidebar .m-item.nodata .m-diff,
.sidebar .m-item.nodata .ms-deviation {
  background: rgba(251, 191, 36, 0.12);
  color: var(--amber) !important;
}

/* List stagger animation */
@keyframes listItemIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.sidebar .mosque-item,
.sidebar .ms-row,
.sidebar .m-item {
  animation: listItemIn 0.3s ease-out both;
}

.sidebar .m-item:nth-child(1) { animation-delay: 0.02s; }
.sidebar .m-item:nth-child(2) { animation-delay: 0.04s; }
.sidebar .m-item:nth-child(3) { animation-delay: 0.06s; }
.sidebar .m-item:nth-child(4) { animation-delay: 0.08s; }
.sidebar .m-item:nth-child(5) { animation-delay: 0.10s; }
.sidebar .m-item:nth-child(6) { animation-delay: 0.12s; }
.sidebar .m-item:nth-child(7) { animation-delay: 0.14s; }
.sidebar .m-item:nth-child(8) { animation-delay: 0.16s; }
.sidebar .m-item:nth-child(9) { animation-delay: 0.18s; }
.sidebar .m-item:nth-child(10) { animation-delay: 0.20s; }
.sidebar .m-item:nth-child(n+11) { animation-delay: 0.22s; }

/* Legend */
.sidebar .legend,
.sidebar .explanation {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.sidebar .legend-title,
.sidebar .legend > div:first-child {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted) !important;
  margin-bottom: 10px;
}

.sidebar .legend-row,
.sidebar .leg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text);
}

.sidebar .legend-line,
.sidebar .leg-line {
  width: 20px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}

.sidebar .legend-line.green { background: var(--green); }
.sidebar .legend-line.red { background: var(--red); }
.sidebar .legend-line.gold { background: var(--gold); }
.sidebar .legend-line.amber { background: var(--amber); }
.sidebar .legend-line.accent { background: var(--accent); }

.ns-link {
  text-decoration: none;
}

.seo-links {
  padding: 10px 13px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255,255,255,.02);
}

.seo-links-title {
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.seo-links a {
  color: var(--text);
  font-size: 12px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 7px 10px;
  background: rgba(255,255,255,.03);
  transition: all var(--transition-fast);
}

.seo-links a:hover {
  border-color: var(--accent);
  color: var(--text-bright);
}

.mob-drawer a.mob-drawer-btn {
  text-decoration: none;
}

/* Chart area */
.sidebar .chart-area,
.sidebar .radar-area,
.sidebar .sb-half-panel {
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.sidebar .chart-title,
.sidebar .sb-mini-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.sidebar canvas {
  border-radius: var(--radius-md);
  max-width: 100%;
}

/* Best / worst cards */
.sidebar .best-worst,
.sidebar .sc-best-worst {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.sidebar .bw-card,
.sidebar .sc-best-worst {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  transition: all var(--transition-fast);
}

.sidebar .bw-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.sidebar .bw-card.best {
  border-color: rgba(52, 211, 153, 0.2);
  background: rgba(52, 211, 153, 0.04);
}

.sidebar .bw-card.worst {
  border-color: rgba(248, 113, 113, 0.2);
  background: rgba(248, 113, 113, 0.04);
}

.sidebar .bw-card .bw-label,
.sidebar .sc-bw-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.sidebar .bw-card.best .bw-label { color: var(--green); }
.sidebar .bw-card.worst .bw-label { color: var(--red); }

.sidebar .bw-card .bw-name,
.sidebar .sc-bw-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar .bw-card .bw-value {
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.sidebar .bw-card.best .bw-value { color: var(--green); }
.sidebar .bw-card.worst .bw-value { color: var(--red); }

/* Sidebar footer */
.sidebar-footer,
.sidebar .tolerance-info,
.sidebar .sc-tolerance {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  margin-top: auto;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

.sidebar-footer .tolerance-info strong,
.sidebar .sc-tolerance strong,
.sidebar .sc-tolerance #sc-tol-val {
  color: var(--accent-light);
  font-weight: 700;
}

/* Mobile bottom sheet behavior */
@media (max-width: 768px) {
  .sidebar {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    max-height: 50vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-left: none;
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
    transform: translateY(calc(100% - 48px));
    transition: transform var(--transition-smooth);
    z-index: 1000;
    backdrop-filter: none;
    background: var(--surface);
    overflow-y: auto;
  }

  .sidebar.expanded {
    transform: translateY(0);
  }

  .sidebar::before {
    content: '';
    position: sticky;
    top: 0;
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(148, 163, 184, 0.3);
    border-radius: 2px;
    margin: 10px auto 6px;
    flex-shrink: 0;
    z-index: 11;
  }

  .sidebar .stats-grid,
  .sidebar .sb-half-metrics {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 6px;
    padding: 8px 12px;
  }

  .sidebar .stat-card,
  .sidebar .sb-half-row {
    padding: 8px;
  }

  .sidebar .stat-card .stat-card-value,
  .sidebar .sb-half-row b {
    font-size: 16px;
  }

  .sidebar .best-worst,
  .sidebar .sc-best-worst {
    padding: 8px 12px;
    gap: 6px;
  }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 6 - MICRO INTERACTIONS & FINAL POLISH
   ═══════════════════════════════════════════════════════════ */

/* Global animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideInBottom {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { box-shadow: 0 0 0 8px rgba(124, 58, 237, 0); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Skeleton */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton-line {
  height: 14px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 80%; }
.skeleton-line.full { width: 100%; }

.skeleton-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.skeleton-card {
  height: 64px;
  border-radius: var(--radius-md);
  margin-bottom: 6px;
}

.skeleton-mosque {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.skeleton-mosque .skeleton-name {
  flex: 1;
  height: 14px;
  border-radius: 4px;
}

.skeleton-mosque .skeleton-badge {
  width: 42px;
  height: 24px;
  border-radius: 6px;
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

button:focus-visible,
.ns-btn:focus-visible,
.btn:focus-visible,
.btn-sm:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-glow);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Press effect */
.btn:active,
.btn-sm:active,
.ns-btn:active,
.map-fab-btn:active,
.ns-lang-btn:active,
.filter-chip:active,
.exp-dl-btn:active {
  transform: scale(0.96);
  transition-duration: 0.05s;
}

.ns-btn:active { transform: scale(0.97); }
.map-fab-btn:active { transform: scale(0.92); }

/* Global tooltip */
[data-tip] {
  position: relative;
}

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 12px;
  background: var(--panel);
  color: var(--text-bright);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: all 0.15s ease-out;
  z-index: 9999;
}

[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

[data-tip-pos="bottom"]::after {
  bottom: auto;
  top: calc(100% + 8px);
}

[data-tip-pos="right"]::after {
  bottom: auto;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
}

[data-tip-pos="right"]:hover::after {
  transform: translateY(-50%) translateX(0);
}

.nav-sidebar.collapsed [data-tip]::after {
  bottom: auto;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
}

.nav-sidebar.collapsed [data-tip]:hover::after {
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 768px) {
  [data-tip]::after {
    display: none;
  }
}

/* Marker animation */
@keyframes markerBounce {
  0% { transform: scale(0) translateY(-10px); opacity: 0; }
  60% { transform: scale(1.15) translateY(0); opacity: 1; }
  80% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.leaflet-marker-icon {
  transition: opacity 0.15s ease-out, filter 0.15s ease-out;
  animation: markerBounce 0.35s ease-out;
}

.leaflet-marker-icon:hover {
  filter: brightness(1.06);
  z-index: 10000 !important;
}

/* Sidebar scroll fade */
.sidebar {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0px,
    black 8px,
    black calc(100% - 8px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0px,
    black 8px,
    black calc(100% - 8px),
    transparent 100%
  );
}

/* Qibla line draw animation */
@keyframes drawLine {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}

.leaflet-overlay-pane svg path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  animation: drawLine 1.2s ease-out;
}

/* Smooth page load */
body {
  opacity: 0;
  animation: fadeIn 0.4s ease-out 0.1s forwards;
  transition: background-color 0.4s ease, color 0.3s ease;
}

/* Selection */
::selection {
  background: rgba(124, 58, 237, 0.35);
  color: #fff;
}

::-moz-selection {
  background: rgba(124, 58, 237, 0.35);
  color: #fff;
}

/* Smooth scroll + global scrollbar */
html {
  scroll-behavior: smooth;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.15) transparent;
}

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.15);
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.3);
}

/* Links */
a {
  color: var(--accent-light);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Mini loader */
.mini-loader {
  position: absolute;
  bottom: 16px;
  left: 60px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  box-shadow: var(--shadow-sm);
  animation: fadeInUp 0.3s ease-out;
}

.mini-loader .mini-spinner,
.mini-loader .mini-spin {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(148, 163, 184, 0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Theme transition for major shells */
header,
.sidebar,
.nav-sidebar,
.stats-bar,
.mob-drawer {
  transition: background-color 0.4s ease,
              border-color 0.3s ease,
              color 0.3s ease;
}

/* Print */
@media print {
  .nav-sidebar,
  .mob-bottom-bar,
  .mob-drawer,
  .map-fab,
  .floating-search,
  .mini-loader,
  .live-badge,
  header {
    display: none !important;
  }

  .main {
    margin-left: 0 !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* Accessibility */
@media (forced-colors: active) {
  .ns-btn.active,
  .btn-sm.active,
  .btn.active {
    border: 2px solid ButtonText;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════
   PHASE 7 - CRITICAL REFINEMENTS
   ═══════════════════════════════════════════════════════════ */

/* 7.2 NAV SIDEBAR REVISED */
.nav-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 180px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 1100;
  transition: width var(--transition-smooth);
  overflow: hidden;
}

.nav-sidebar.collapsed {
  width: 52px;
}

.nav-sidebar-top {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 6px;
  scrollbar-width: none;
}

.nav-sidebar-top::-webkit-scrollbar { display: none; }

.nav-sidebar-bottom {
  padding: 6px;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
}

.ns-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 6px 8px;
  cursor: pointer;
}
.ns-brand:hover { background: transparent !important; }

.ns-brand-text{
  padding: 0 8px 8px;
  text-align:center;
  cursor:pointer;
}
.ns-brand-title{
  font-size:16px;
  font-weight:700;
  letter-spacing:.01em;
  color:rgba(255,255,255,.90);
  line-height:1.15;
}
.ns-brand-sub{
  margin-top:2px;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.52);
  line-height:1.2;
}

.ns-brand .logo-q {
  width: 34px;
  height: 34px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
}

.nav-sidebar.collapsed .ns-brand-text{
  display:none;
}

.ns-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 8px;
}

.ns-group { margin-bottom: 2px; }

.ns-group-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 10px 12px 4px;
}

.ns-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  margin: 1px 0;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  transition: all var(--transition-fast);
  white-space: nowrap;
  line-height: 1.3;
}

.ns-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.ns-btn.active {
  background: rgba(139, 92, 246, 0.12);
  color: var(--accent-light);
}

.ns-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  opacity: 0.7;
}

.ns-btn:hover .ns-icon,
.ns-btn.active .ns-icon {
  opacity: 1;
}

.ns-label {
  transition: opacity var(--transition-smooth);
}

.ns-lang {
  display: flex;
  gap: 4px;
  padding: 4px 6px;
}

.ns-lang-btn {
  padding: 3px 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  transition: all var(--transition-fast);
}

.ns-lang-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.ns-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  font-size: 14px;
}

.ns-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.nav-sidebar.collapsed .ns-label,
.nav-sidebar.collapsed .ns-group-label,
.nav-sidebar.collapsed .ns-lang {
  display: none;
}

.nav-sidebar.collapsed .ns-btn {
  justify-content: center;
  padding: 8px;
}

.nav-sidebar.collapsed .ns-brand {
  justify-content: center;
}

.nav-sidebar.collapsed .ns-toggle .ns-icon {
  transform: rotate(180deg);
}

.nav-sidebar.collapsed .ns-btn {
  position: relative;
}

.nav-sidebar.collapsed .ns-btn:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 56px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--panel);
  color: var(--text-bright);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  z-index: 9999;
  pointer-events: none;
}

@media (min-width: 769px) {
  header { margin-left: 180px !important; }
  .main { margin-left: 180px !important; }
  .stats-bar { margin-left: 180px !important; }
  body.nav-collapsed header { margin-left: 52px !important; }
  body.nav-collapsed .main { margin-left: 52px !important; }
  body.nav-collapsed .stats-bar { margin-left: 52px !important; }
}

/* 7.3 TOP FLOATING BARS SEPARATED */
.floating-search {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 600;
  pointer-events: auto;
}

.floating-search .search-box,
.search-box {
  display: flex;
  align-items: center;
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 50px;
  padding: 4px 4px 4px 16px;
  box-shadow: var(--shadow-md);
  width: 300px;
  transition: all var(--transition-smooth);
}

.floating-search .search-box:focus-within,
.search-box:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-glow);
  width: 380px;
}

.floating-search .search-box input,
.search-box input[type="text"] {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  flex: 1;
  padding: 8px 0;
  min-width: 0;
}

.floating-search .search-box input::placeholder,
.search-box input::placeholder {
  color: var(--muted);
}

#search-btn,
.floating-search button,
.search-box > button {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 7px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

#search-btn:hover {
  background: var(--accent-light) !important;
  box-shadow: 0 0 14px var(--accent-glow);
}

.stats-bar {
  position: absolute;
  top: 12px;
  left: 330px;
  z-index: 550;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 50px;
  box-shadow: var(--shadow-sm);
  font-size: 12px;
  pointer-events: auto;
  white-space: nowrap;
}

.stats-bar .stat-num {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
}

.stats-bar .stat-label,
.stats-bar .stat-lbl {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.stats-bar .dot {
  width: 7px;
  height: 7px;
}

.tolerance-pill {
  position: absolute;
  top: 56px;
  right: 340px;
  z-index: 550;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 50px;
  box-shadow: var(--shadow-sm);
  font-size: 11px;
  color: var(--muted);
  pointer-events: auto;
}

.mode-pills {
  position: absolute;
  top: 12px;
  right: 340px;
  z-index: 551;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 50px;
  box-shadow: var(--shadow-sm);
  pointer-events: auto;
}

.mode-pills .map-switch {
  display: flex;
  gap: 2px;
  background: transparent;
  border: 0;
  padding: 0;
}

.mode-pills button {
  padding: 4px 10px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mode-pills button.active {
  background: var(--accent);
  color: #fff;
}

.mode-pills button:hover:not(.active) {
  color: var(--text);
}

.tolerance-pill .tol {
  margin-left: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* 7.4 DETAIL PANEL REVISED */
.dp-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 1800;
  display: none;
}

.dp-backdrop.show {
  display: block;
}

.dp-panel {
  position: fixed;
  bottom: 16px;
  right: 16px;
  top: auto;
  width: 360px;
  max-height: calc(100vh - 100px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  z-index: 1900;
  overflow: hidden;
  display: none;
  flex-direction: column;
  animation: modalCardIn 0.25s ease-out;
  transform: none;
}

.dp-panel.open,
.dp-panel.show,
.dp-panel[style*="display: flex"],
.dp-panel[style*="display:flex"] {
  display: flex;
}

.dp-panel > div:first-child,
.dp-header,
.dp-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.dp-panel .dp-name,
.dp-panel h3,
.dp-panel h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1.3;
  margin: 0;
}

.dp-panel .dp-address,
.dp-panel .dp-sub,
.dp-panel .dp-place {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.dp-panel button[onclick*="close"],
.dp-panel button[onclick*="Close"],
.dp-panel button[onclick*="hide"],
.dp-panel .dp-close,
.dp-panel > div:first-child > button:last-child {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 10;
  line-height: 1;
}

.dp-panel button[onclick*="close"]:hover,
.dp-panel .dp-close:hover,
.dp-panel > div:first-child > button:last-child:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.dp-panel .dp-content,
.dp-panel > div:not(:first-child) {
  padding: 14px 18px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.12) transparent;
}

/* 7.5 LEAFLET POPUP MINIMAL */
.leaflet-popup-content-wrapper {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 0 !important;
  max-width: 200px !important;
  min-width: 120px !important;
}

.leaflet-popup-content {
  margin: 10px 14px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-family: inherit !important;
}

.leaflet-popup-content b,
.leaflet-popup-content strong {
  color: var(--text-bright);
  font-size: 13px;
  display: block;
  margin-bottom: 2px;
}

.leaflet-popup-tip-container {
  opacity: 0.8;
}

.leaflet-popup-tip {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.leaflet-popup-close-button {
  color: var(--muted) !important;
  font-size: 16px !important;
  width: 24px !important;
  height: 24px !important;
  top: 4px !important;
  right: 4px !important;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
}

.leaflet-popup-close-button:hover {
  color: var(--red) !important;
  background: rgba(251, 113, 133, 0.1) !important;
}

/* 7.6 search area button */
.search-area-btn {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 580;
  padding: 7px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
  pointer-events: auto;
  white-space: nowrap;
}

.search-area-btn:hover {
  background: var(--accent-light);
  transform: translateX(-50%) translateY(-1px);
  box-shadow: var(--shadow-lg), 0 0 20px var(--accent-glow);
}

.search-area-btn:active {
  transform: translateX(-50%) scale(0.96);
}

/* 7.7 live badge position */
.live-badge,
.live-vp-badge.live-badge {
  position: absolute;
  top: 56px;
  left: 12px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 50px;
  font-size: 10px;
  font-weight: 600;
  color: var(--green);
  box-shadow: var(--shadow-sm);
}

/* 7.8 right sidebar refinement */
.sidebar {
  width: 300px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.12) transparent;
  z-index: 450;
  flex-shrink: 0;
}

.sidebar h3,
.sidebar .sidebar-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-bright);
  padding: 14px 14px 0;
  margin: 0;
}

.sidebar input[type="text"] {
  width: calc(100% - 28px);
  margin: 10px 14px;
  padding: 8px 12px;
  border-radius: 50px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 12px;
  outline: none;
  transition: all var(--transition-fast);
}

.sidebar input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.sidebar .ms-deviation,
.sidebar span[style*="background"] {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
}

/* 7.9 mobile responsive full revision */
@media (max-width: 768px) {
  .nav-sidebar {
    display: none !important;
  }

  header,
  .main,
  .stats-bar {
    margin-left: 0 !important;
  }

  header {
    position: relative;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1000;
  }

  header .brand-home {
    display: flex;
  }

  header .divider {
    display: none;
  }

  header .header-actions {
    display: none !important;
  }

  .floating-search {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    padding: 8px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex !important;
  }

  .floating-search .search-box,
  .search-box {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: none;
    border: 1px solid var(--border);
  }

  .floating-search .search-box:focus-within,
  .search-box:focus-within {
    width: 100% !important;
    min-width: 0 !important;
  }

  .stats-bar {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    padding: 6px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    backdrop-filter: none;
    box-shadow: none;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 11px;
  }

  .mode-pills,
  .tolerance-pill {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    margin: 6px 12px 0;
    width: auto;
    justify-content: center;
  }

  .main {
    flex: 1;
    position: relative;
  }

  #map {
    width: 100% !important;
    height: 100% !important;
  }

  .sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    height: auto;
    max-height: 50vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-left: none;
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
    background: var(--surface);
    z-index: 1200;
    transform: translateY(calc(100% - 52px));
    transition: transform var(--transition-smooth);
    overflow: hidden;
    display: flex !important;
  }

  .sidebar.expanded {
    transform: translateY(0);
    overflow-y: auto;
  }

  .sidebar::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(148, 163, 184, 0.25);
    border-radius: 2px;
    margin: 10px auto 6px;
    flex-shrink: 0;
  }

  .map-fab {
    bottom: 64px;
    right: 12px;
  }

  .live-badge,
  .live-vp-badge.live-badge {
    top: auto;
    bottom: 64px;
    left: 12px;
    font-size: 9px;
    padding: 4px 8px;
  }

  .search-area-btn {
    top: 12px;
    display: inline-flex !important;
  }

  .dp-panel {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-height: 60vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    animation: slideInBottom 0.3s ease-out;
  }

  .exp-modal,
  .biz-modal,
  .lab-modal,
  .cmps-modal,
  .lb-modal,
  .hist-modal,
  .cmp-modal {
    width: calc(100vw - 24px) !important;
    max-width: 100% !important;
    max-height: 80vh;
    margin: 0 12px;
  }

  .exp-overlay,
  .biz-overlay,
  .lab-overlay,
  .cmps-overlay,
  .lb-overlay,
  .hist-overlay,
  .cmp-overlay {
    padding: 12px;
    align-items: flex-end;
  }

  .mob-menu-btn {
    display: flex;
  }

  .mob-drawer {
    width: min(300px, 88vw);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
  }

  .mob-drawer .mob-drawer-btn,
  .mob-drawer button {
    padding: 8px 12px;
    font-size: 13px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
  }

  .mob-drawer button:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  .mob-drawer button.active {
    background: rgba(139, 92, 246, 0.12);
    color: var(--accent-light);
  }

  .mob-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    display: flex !important;
    align-items: center;
    padding: 6px 12px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    gap: 8px;
  }

  .mob-bottom-bar input[type="text"] {
    flex: 1;
    padding: 8px 14px;
    border-radius: 50px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: 13px;
    outline: none;
  }

  .mob-bottom-bar input[type="text"]:focus {
    border-color: var(--accent);
  }

  .mob-bottom-bar button {
    padding: 8px 14px;
    border-radius: 50px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }

  [data-tip]::after {
    display: none !important;
  }

  #map .leaflet-control-zoom {
    margin-left: 8px !important;
    margin-bottom: 64px !important;
  }

  #map .leaflet-control-zoom a {
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 18px;
  }
}

@media (max-width: 400px) {
  .stats-bar {
    font-size: 10px;
    padding: 4px 8px;
    gap: 3px;
  }

  .stats-bar .stat-num {
    font-size: 11px;
  }

  .dp-panel .dp-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 7.10 map overlay density */
body:not(.outdoor-mode) #map::after {
  background: rgba(8, 13, 26, 0.12);
}

.leaflet-overlay-pane svg path {
  opacity: 0.65;
  stroke-width: 1.5px;
}

.leaflet-marker-icon {
  opacity: 0.85;
}

.leaflet-marker-icon:hover {
  opacity: 1;
  filter: brightness(1.06);
  z-index: 10000 !important;
}

/* ═══════════════════════════════════════════════════════════
   FINAL HOTFIX — search/info separation + visibility + clean map overlays
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  body {
    --nav-offset-live: 180px;
    --search-box-w-collapsed: 320px;
    --search-box-w-expanded: 470px;
    --search-gap: 16px;
  }

  body.nav-collapsed {
    --nav-offset-live: 52px;
  }

  .floating-search {
    left: calc(var(--nav-offset-live) + 14px) !important;
    top: 12px !important;
    z-index: 620 !important;
  }

  .floating-search .search-box,
  .search-box {
    width: var(--search-box-w-collapsed) !important;
    transition:
      width 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
      box-shadow 200ms ease,
      border-color 200ms ease,
      transform 200ms ease !important;
  }

  .floating-search .search-box:focus-within,
  .search-box:focus-within {
    width: var(--search-box-w-expanded) !important;
  }

  .stats-bar {
    margin-left: 0 !important;
    left: calc(var(--nav-offset-live) + 14px + var(--search-box-w-collapsed) + var(--search-gap)) !important;
    top: 12px !important;
    transform: none !important;
    transition:
      left 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
      background-color 200ms ease,
      border-color 200ms ease !important;
    z-index: 560 !important;
  }

  body.search-expanded .stats-bar {
    left: calc(var(--nav-offset-live) + 14px + var(--search-box-w-expanded) + var(--search-gap)) !important;
  }

  .mode-pills {
    top: 58px !important;
    right: 330px !important;
  }

  .tolerance-pill {
    top: 58px !important;
    right: 14px !important;
  }
}

/* Search button — stronger 2026 visibility */
#search-btn,
.floating-search #search-btn {
  position: relative;
  isolation: isolate;
  min-width: 74px;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background:
    linear-gradient(135deg, rgba(139, 92, 246, 0.98), rgba(99, 102, 241, 0.95)) !important;
  color: #f8faff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  box-shadow:
    0 8px 24px rgba(99, 102, 241, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
}

#search-btn::before,
.floating-search #search-btn::before {
  content: "⌕";
  margin-right: 6px;
  opacity: 0.92;
}

#search-btn:hover,
.floating-search #search-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 28px rgba(99, 102, 241, 0.40),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset !important;
}

/* Cluster bubbles — smoky + transparent */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background: rgba(31, 41, 55, 0.28) !important;
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div,
.marker-cluster div {
  background: rgba(55, 65, 81, 0.52) !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  color: rgba(236, 239, 244, 0.88) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24) !important;
}

/* Remove extra click info boxes; keep main detail panel */
#qibla-panel,
.qibla-panel {
  display: none !important;
}

#map .leaflet-popup,
#map .leaflet-popup-pane {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE PORTRAIT FINAL OVERRIDE (single-source responsive)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: portrait) {
  html, body {
    background: var(--bg) !important;
    overflow: hidden !important;
  }

  body {
    padding: 0 !important;
    margin: 0 !important;
  }

  header,
  .mob-bottom-bar,
  .mode-pills,
  .tolerance-pill,
  .search-area-btn {
    display: none !important;
  }

  .main {
    position: fixed !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  #map {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    --mobile-sheet-offset: 92px;
  }

  /* Top full-width search rail: [Q] [input] [Ara] [☰] */
  .floating-search {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    z-index: 2200 !important;
    display: block !important;
    transform: none !important;
    width: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .floating-search .search-box,
  .search-box {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto 42px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(148, 163, 184, 0.26) !important;
    background: rgba(8, 13, 26, 0.86) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  .mob-pill-logo,
  .mob-pill-menu {
    display: inline-flex !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.24) !important;
    background: rgba(15, 23, 42, 0.72) !important;
    color: #e2e8f0 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .floating-search .search-box input,
  .floating-search input,
  #city-input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    color: #f8fafc !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 10px 2px !important;
  }

  #city-input::placeholder,
  .floating-search input::placeholder {
    color: rgba(241, 245, 249, 0.6) !important;
  }

  .floating-search #search-btn {
    min-width: 68px !important;
    height: 42px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(196, 181, 253, 0.52) !important;
    background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 22px rgba(99, 102, 241, 0.36) !important;
  }

  .floating-search #search-btn::before {
    content: none !important;
  }

  .floating-search .city-smart-dd {
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 8px) !important;
    border-radius: 14px !important;
    z-index: 2210 !important;
  }

  /* Stats as compact rail under top search */
  .stats-bar {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: calc(64px + env(safe-area-inset-top, 0px)) !important;
    transform: none !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
    background: rgba(8, 13, 26, 0.74) !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 2100 !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  .stats-bar .stat {
    min-width: max-content !important;
  }

  .live-badge,
  .live-vp-badge.live-badge {
    top: calc(102px + env(safe-area-inset-top, 0px)) !important;
    left: 12px !important;
    bottom: auto !important;
    z-index: 2050 !important;
  }

  .mob-layer-stack {
    top: calc(108px + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
    z-index: 2050 !important;
  }

  #map .leaflet-control-zoom {
    margin-left: 10px !important;
    margin-bottom: calc(var(--mobile-sheet-offset, 92px) + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP FIXES — cluster hover bug + search clarity + nav state colors
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  body {
    --search-box-w-collapsed: clamp(340px, 30vw, 460px);
    --search-box-w-expanded: clamp(500px, 42vw, 660px);
    --search-gap: 18px;
  }

  .floating-search .search-box,
  .search-box {
    background: linear-gradient(180deg, rgba(26, 48, 92, 0.90), rgba(30, 58, 116, 0.86)) !important;
    border-color: rgba(148, 163, 184, 0.34) !important;
    box-shadow: 0 12px 28px rgba(5, 14, 36, 0.45) !important;
  }

  .floating-search .search-box input,
  .search-box input[type="text"] {
    color: #f8fbff !important;
  }

  .floating-search .search-box input::placeholder,
  .search-box input::placeholder {
    color: rgba(226, 232, 240, 0.74) !important;
  }

  .stats-bar {
    left: calc(var(--nav-offset-live) + 14px + var(--search-box-w-collapsed) + var(--search-gap)) !important;
    right: 334px !important;
    max-width: none !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  body.search-expanded .stats-bar {
    left: calc(var(--nav-offset-live) + 14px + var(--search-box-w-expanded) + var(--search-gap)) !important;
  }

  .nav-sidebar .ns-btn {
    background: rgba(13, 64, 255, 0.18) !important;
    border: 1px solid rgba(13, 64, 255, 0.40) !important;
    color: #dbe7ff !important;
  }

  .nav-sidebar .ns-btn:hover {
    background: rgba(13, 64, 255, 0.30) !important;
    border-color: rgba(13, 64, 255, 0.55) !important;
    color: #ffffff !important;
  }

  .nav-sidebar .ns-btn.active {
    background: #0c74e8 !important;
    border-color: #0c74e8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 10px 22px rgba(12, 116, 232, 0.36) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   DETAIL PANEL HOTFIX — single scroll container + modern title
   ═══════════════════════════════════════════════════════════ */
.dp-panel {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.dp-panel > div:not(:first-child) {
  padding: 0 !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
  scrollbar-width: auto !important;
}

.dp-section {
  padding: 14px 16px !important;
}

.dp-actions {
  padding: 14px 16px 20px !important;
}

.dp-wiki-body {
  max-height: none !important;
  overflow: visible !important;
}

.dp-panel .dp-name {
  font-family: 'Inter', 'Manrope', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* ═══════════════════════════════════════════════════════════
   TOP-LAYOUT + SEARCH + SIDEBAR SCOPE SWITCH FIX
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  body {
    --search-box-w-collapsed: clamp(420px, 36vw, 620px);
    --search-box-w-expanded: clamp(560px, 46vw, 760px);
  }

  .floating-search {
    left: 50% !important;
    top: 12px !important;
    transform: translateX(-50%) !important;
    z-index: 620 !important;
  }

  .floating-search .search-box,
  .search-box {
    width: var(--search-box-w-collapsed) !important;
    background: #0C74E8 !important;
    border: 1px solid rgba(219, 234, 254, 0.34) !important;
    box-shadow: 0 12px 28px rgba(12, 116, 232, 0.35) !important;
  }

  .floating-search .search-box:focus-within,
  .search-box:focus-within {
    width: var(--search-box-w-expanded) !important;
  }

  .floating-search .search-box input,
  .search-box input[type="text"] {
    color: #f8fbff !important;
  }

  .floating-search .search-box input::placeholder,
  .search-box input::placeholder {
    color: rgba(239, 246, 255, 0.80) !important;
  }

  .floating-search #search-btn {
    background: #0DFFBA !important;
    border-color: rgba(13, 255, 186, 0.65) !important;
    color: #032a20 !important;
    box-shadow: 0 8px 20px rgba(13, 255, 186, 0.35) !important;
  }

  .floating-search #search-btn:hover {
    box-shadow: 0 10px 24px rgba(13, 255, 186, 0.45) !important;
  }

  .floating-search .mob-pill-logo {
    background: #0DFFBA !important;
    color: #032a20 !important;
    border-color: rgba(13, 255, 186, 0.65) !important;
  }

  .stats-bar {
    left: 50% !important;
    top: 78px !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 560 !important;
    margin-left: 0 !important;
    max-width: min(980px, calc(100vw - 420px)) !important;
  }

  body.search-expanded .stats-bar {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .mode-pills {
    top: 124px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(calc(-50% - 140px)) !important;
  }

  .tolerance-pill {
    top: 124px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(calc(-50% + 170px)) !important;
  }
}

.ms-scope {
  background: #0D40FF !important;
  border-top: 1px solid rgba(191, 219, 254, 0.32) !important;
}

.ms-scope-lbl,
.ms-scope-lbl b {
  color: #eef4ff !important;
}

.ms-switch-track {
  width: 48px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: rgba(4, 14, 44, 0.42) !important;
  border: 1px solid rgba(191, 219, 254, 0.46) !important;
}

.ms-switch-track::after {
  top: 2px !important;
  left: 2px !important;
  width: 18px !important;
  height: 18px !important;
  background: #dbeafe !important;
  border-radius: 50% !important;
  transition: transform .18s ease !important;
}

.ms-switch input:checked + .ms-switch-track {
  background: rgba(13, 255, 186, 0.30) !important;
  border-color: rgba(13, 255, 186, 0.68) !important;
}

.ms-switch input:checked + .ms-switch-track::after {
  left: 2px !important;
  transform: translateX(24px) !important;
  background: #0DFFBA !important;
}

/* ═══════════════════════════════════════════════════════════
   FINAL THEME OVERRIDES — accent blue + live badge polish
   ═══════════════════════════════════════════════════════════ */

/* Requested blue tone for key controls */
.ns-lang-btn,
.ns-toggle,
.mode-pills button,
.map-fab-btn,
.map-fab-btn.secondary,
#axis-final,
#axis-raw,
#axis-interior {
  background: rgba(13, 64, 255, 0.28) !important;
  border: 1px solid rgba(13, 64, 255, 0.56) !important;
  color: #eaf1ff !important;
}

.ns-lang-btn:hover,
.ns-toggle:hover,
.mode-pills button:hover,
.map-fab-btn:hover,
.map-fab-btn.secondary:hover,
#axis-final:hover,
#axis-raw:hover,
#axis-interior:hover {
  background: rgba(13, 64, 255, 0.42) !important;
  border-color: rgba(13, 64, 255, 0.72) !important;
  color: #ffffff !important;
}

.ns-lang-btn.active,
.mode-pills button.active,
#axis-final.active,
#axis-raw.active,
#axis-interior.active {
  background: #0c74e8 !important;
  border-color: #0c74e8 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(12, 116, 232, 0.34) !important;
}

/* Live badge: mint-accented premium look */
.live-vp-badge.live-badge,
.live-badge {
  background:
    radial-gradient(120% 140% at 8% 50%, rgba(13, 255, 186, 0.20) 0%, rgba(13, 255, 186, 0.06) 32%, rgba(8, 21, 48, 0.82) 78%),
    linear-gradient(145deg, rgba(8, 20, 46, 0.92), rgba(14, 35, 74, 0.88)) !important;
  border: 1px solid rgba(13, 255, 186, 0.42) !important;
  border-radius: 16px !important;
  color: #d7fff2 !important;
  box-shadow:
    0 10px 28px rgba(6, 16, 40, 0.50),
    inset 0 0 0 1px rgba(13, 255, 186, 0.15) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease !important;
}

.live-vp-badge.live-badge:hover,
.live-badge:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(13, 255, 186, 0.62) !important;
  box-shadow:
    0 14px 32px rgba(6, 16, 40, 0.56),
    0 0 0 4px rgba(13, 255, 186, 0.12),
    inset 0 0 0 1px rgba(13, 255, 186, 0.24) !important;
}

.live-vp-badge .live-vp-icon,
.live-badge .live-vp-icon,
.live-vp-badge::before,
.live-badge::before {
  color: #0DFFBA !important;
  background: #0DFFBA !important;
  box-shadow: 0 0 0 0 rgba(13, 255, 186, 0.50), 0 0 16px rgba(13, 255, 186, 0.45) !important;
}

.live-vp-badge .live-vp-title,
.live-badge .live-vp-title {
  color: #bfffe9 !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

.live-vp-badge .live-vp-sub,
.live-badge .live-vp-sub {
  color: rgba(220, 255, 245, 0.86) !important;
}

#vp-label {
  color: #bfffe9 !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

#vp-meta {
  color: rgba(220, 255, 245, 0.86) !important;
}

.live-vp-icon-wrap::after {
  border-color: rgba(13, 255, 186, 0.5) !important;
}

@media (min-width: 769px) {
  .tolerance-pill {
    display: none !important;
  }

  .sidebar .tolerance-pill {
    position: sticky !important;
    top: 44px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: block !important;
    width: auto !important;
    margin: 8px 12px 8px !important;
    padding: 8px 12px !important;
    z-index: 20 !important;
    border-radius: 14px !important;
    background: rgba(7, 19, 45, 0.82) !important;
    border: 1px solid rgba(148, 163, 184, 0.30) !important;
    box-shadow: 0 8px 18px rgba(4, 12, 30, 0.35) !important;
  }

  .sidebar .tolerance-pill .tol {
    width: 100% !important;
    justify-content: space-between !important;
    font-size: 12px !important;
    color: #dbeafe !important;
  }

  .sidebar .tolerance-pill .tol input[type=range] {
    width: 120px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE STABILIZER — mobile + iPad cleanup
   ═══════════════════════════════════════════════════════════ */

/* Keep "Bu alanı tara" color consistent */
.search-area-btn {
  background: #0C74E8 !important;
  border: 1px solid rgba(147, 197, 253, 0.50) !important;
  color: #eef6ff !important;
}

@media (max-width: 768px) {
  .mob-bottom-bar { display: none !important; }

  #map {
    border: 0 !important;
    border-radius: 0 !important;
  }

  header {
    display: none !important;
  }

  .floating-search {
    position: absolute !important;
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    z-index: 2300 !important;
  }

  .floating-search .search-box,
  .search-box {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 18px !important;
    padding: 5px 6px 5px 10px !important;
  }

  .floating-search .search-box input,
  .search-box input[type="text"] {
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding: 10px 4px !important;
  }

  .floating-search #search-btn {
    min-width: 74px !important;
    height: 40px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
  }

  .floating-search .mob-pill-logo,
  .floating-search .mob-pill-menu {
    display: inline-flex !important;
    width: 38px !important;
    height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
  }

  .stats-bar {
    position: absolute !important;
    top: calc(70px + env(safe-area-inset-top, 0px)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    margin: 0 !important;
    border-radius: 14px !important;
    padding: 7px 10px !important;
    gap: 6px !important;
    justify-content: center !important;
    overflow-x: auto !important;
    z-index: 2200 !important;
  }

  .mode-pills {
    position: absolute !important;
    top: calc(126px + env(safe-area-inset-top, 0px)) !important;
    right: 10px !important;
    left: auto !important;
    transform: none !important;
    z-index: 2205 !important;
  }

  .search-area-btn {
    top: calc(126px + env(safe-area-inset-top, 0px)) !important;
    left: 10px !important;
    transform: none !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    z-index: 2205 !important;
  }

  .tolerance-pill {
    display: none !important;
  }

  .mob-drawer {
    width: min(360px, 94vw) !important;
    border-radius: 0 22px 22px 0 !important;
    background: linear-gradient(180deg, rgba(8, 23, 54, 0.98), rgba(9, 29, 68, 0.98)) !important;
    border: 1px solid rgba(13, 64, 255, 0.34) !important;
    box-shadow: 0 20px 48px rgba(2, 8, 24, 0.62) !important;
  }

  .mob-drawer-section-lbl {
    color: #93c5fd !important;
    letter-spacing: .08em !important;
  }

  .mob-drawer-btn {
    background: rgba(13, 64, 255, 0.14) !important;
    border: 1px solid rgba(13, 64, 255, 0.30) !important;
    color: #e8f1ff !important;
    border-radius: 12px !important;
  }

  .mob-drawer-btn.active {
    background: #0c74e8 !important;
    border-color: #0c74e8 !important;
    color: #fff !important;
  }

  .mob-drawer-foot .mob-lang-btn {
    background: rgba(13, 64, 255, 0.30) !important;
    border: 1px solid rgba(13, 64, 255, 0.54) !important;
    color: #eef4ff !important;
  }
}

/* Mobile Parity Guard: keep latest desktop-aligned dark-blue behavior as final override */
@media (max-width: 768px) {
  #map { --mobile-top-hud: 72px; }
  .sidebar::before {
    display:none !important;
    content:none !important;
  }
  .sidebar .sb-head{
    cursor:pointer !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    min-height:58px !important;
    padding:18px 14px 10px !important;
    position:sticky !important;
    top:0 !important;
    z-index:2 !important;
    background:#1b4f7f !important;
    border-bottom:1px solid rgba(170,214,241,.22) !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .sidebar .sb-head::before{
    content:'' !important;
    display:block !important;
    width:42px !important;
    height:4px !important;
    background:rgba(170,214,241,.56) !important;
    border-radius:3px !important;
    position:absolute !important;
    top:7px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
  }
  .sidebar .sb-head::after{content:none !important;}
  .sidebar .sb-head > span:first-child{
    width:100% !important;
    text-align:center !important;
    font-size:16px !important;
    line-height:1.2 !important;
    color:rgba(255,255,255,.88) !important;
    letter-spacing:.02em !important;
    text-transform:uppercase !important;
  }
  .sidebar .sb-count{
    position:absolute !important;
    right:14px !important;
    top:50% !important;
    transform:translateY(-35%) !important;
    margin-left:0 !important;
    padding-left:0 !important;
    color:#4ade80 !important;
    font-weight:700 !important;
    font-size:15px !important;
    letter-spacing:0 !important;
    font-variant-numeric:tabular-nums !important;
  }
  .sidebar {
    display:block !important;
    z-index:2170 !important;
    background:#1b4f7f !important;
    border-top:1px solid rgba(170,214,241,.22) !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  .sidebar[data-snap="half"] .ms-wrap,
  .sidebar[data-snap="half"] .ms-filter-banner,
  .sidebar[data-snap="half"] .mosque-list,
  .sidebar[data-snap="half"] .legend {
    display:block !important;
  }
  .sidebar[data-snap="half"] #sb-pull-indicator {
    display:none !important;
  }
  .mob-drawer{
    width:min(360px, 94vw) !important;
    border-radius:0 20px 20px 0 !important;
    background:var(--surface) !important;
    border:1px solid var(--border) !important;
    box-shadow:0 20px 48px rgba(2,8,24,.52) !important;
    opacity:0 !important;
    transform:translateX(calc(-100% - 10px)) scale(.985) !important;
    transform-origin:left center !important;
    transition:transform .32s cubic-bezier(.22,.9,.27,1),opacity .22s ease !important;
  }
  .mob-drawer.open{
    opacity:1 !important;
    transform:translateX(0) scale(1) !important;
  }
  .mob-drawer-backdrop{
    display:block !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:opacity .22s ease !important;
  }
  .mob-drawer-backdrop.show{
    opacity:1 !important;
    pointer-events:auto !important;
  }
  .mob-drawer-shell{
    padding:12px 10px 10px !important;
  }
  .mob-brand-icon{
    width:34px !important;
    height:34px !important;
    border:none !important;
    border-radius:9px !important;
  }
  .mob-drawer-close{
    width:32px !important;
    height:32px !important;
    font-size:16px !important;
    border-radius:10px !important;
  }
  .mob-search-row{
    display:grid !important;
    grid-template-columns:32px minmax(0,1fr) 58px !important;
    align-items:center !important;
    gap:8px !important;
    padding:8px 10px !important;
    overflow:hidden !important;
  }
  .mob-search-row button{
    min-width:58px !important;
    width:58px !important;
    height:34px !important;
    padding:0 6px !important;
    margin:0 !important;
    white-space:nowrap !important;
    justify-self:stretch !important;
    box-sizing:border-box !important;
    font-size:16px !important;
  }
  .mob-search-row input{
    min-width:0 !important;
    font-size:17px !important;
  }
  .mob-drawer-section{
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    padding:0 !important;
  }
  .mob-drawer-section-lbl{
    color:var(--muted) !important;
    font-size:13px !important;
    font-weight:600 !important;
    letter-spacing:.08em !important;
    margin:8px 10px 4px !important;
  }
  .mob-drawer .mob-drawer-btn{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    padding:8px 10px !important;
    margin:1px 0 !important;
    border:none !important;
    border-radius:8px !important;
    background:transparent !important;
    color:var(--muted) !important;
    font-size:15.5px !important;
    font-weight:500 !important;
    line-height:1.3 !important;
  }
  .mob-drawer .mob-drawer-btn:hover{
    background:rgba(255,255,255,.05) !important;
    color:var(--text) !important;
  }
  .mob-drawer .mob-drawer-btn.active{
    background:rgba(139,92,246,.12) !important;
    color:var(--accent-light) !important;
  }
  .mob-drawer .mob-drawer-btn::after{
    content:none !important;
  }
  body:not(.outdoor-mode) {
    background:#164773 !important;
  }
  body:not(.outdoor-mode) .main {
    position:fixed !important;
    inset:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
  }
  body:not(.outdoor-mode) #map {
    position:absolute !important;
    inset:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  body:not(.outdoor-mode) .stats-bar {
    background:linear-gradient(160deg, rgba(22,71,115,.92), rgba(31,84,128,.88)) !important;
    border:1px solid rgba(170,214,241,.34) !important;
    box-shadow:0 10px 24px rgba(5,18,34,.30) !important;
  }
  body:not(.outdoor-mode) .stats-bar .stat {
    background:rgba(21,62,101,.72) !important;
    border:1px solid rgba(170,214,241,.30) !important;
    color:rgba(255,255,255,.72) !important;
  }
  body:not(.outdoor-mode) .stats-bar .stat-num {
    color:rgba(255,255,255,.88) !important;
  }
  body:not(.outdoor-mode) .stats-bar .stat-lbl,
  body:not(.outdoor-mode) .stats-bar .cache-info,
  body:not(.outdoor-mode) .stats-bar .district-pill {
    color:rgba(255,255,255,.52) !important;
  }
  body:not(.outdoor-mode) .floating-search {
    z-index:2300 !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    margin:0 !important;
    padding:0 !important;
  }
  body:not(.outdoor-mode) .floating-search .search-box {
    min-height:46px !important;
    padding:6px !important;
    gap:8px !important;
    border-radius:14px !important;
    align-items:center !important;
    background:rgba(21,62,101,.54) !important;
    border:1px solid rgba(170,214,241,.30) !important;
    box-shadow:none !important;
  }
  body:not(.outdoor-mode) .floating-search input {
    color:rgba(255,255,255,.86) !important;
    font-size:16px !important;
    line-height:1.25 !important;
  }
  body:not(.outdoor-mode) .floating-search input::placeholder {
    color:rgba(255,255,255,.52) !important;
  }
  body:not(.outdoor-mode) .floating-search #search-btn {
    background:rgba(201,168,76,.24) !important;
    border:1px solid rgba(201,168,76,.46) !important;
    color:#f1c96f !important;
    min-width:72px !important;
    height:40px !important;
    padding:0 14px !important;
    border-radius:11px !important;
  }
  body:not(.outdoor-mode) .floating-search #search-btn::before {
    content:none !important;
  }
  body:not(.outdoor-mode) .floating-search .btn::before,
  body:not(.outdoor-mode) .floating-search .btn-sm::before,
  body:not(.outdoor-mode) .stats-bar .btn::before,
  body:not(.outdoor-mode) .stats-bar .btn-sm::before,
  body:not(.outdoor-mode) .mob-drawer-foot .mob-lang-btn::before,
  body:not(.outdoor-mode) .mob-drawer .mob-drawer-close::before {
    content:none !important;
  }
  body:not(.outdoor-mode) .floating-search .mob-pill-logo {
    background:transparent !important;
    border:none !important;
    color:#f1c96f !important;
    width:40px !important;
    height:40px !important;
    border-radius:0 !important;
    padding:0 !important;
  }
  body:not(.outdoor-mode) .floating-search .mob-pill-logo img {
    width:30px !important;
    height:30px !important;
    border-radius:8px !important;
  }
  body:not(.outdoor-mode) .floating-search .mob-pill-menu {
    background:rgba(21,62,101,.84) !important;
    border:1px solid rgba(170,214,241,.34) !important;
    color:rgba(255,255,255,.72) !important;
    width:40px !important;
    height:40px !important;
    border-radius:11px !important;
  }
  body:not(.outdoor-mode) .mob-drawer {
    background:var(--surface) !important;
    border-left:1px solid var(--border) !important;
    box-shadow:none !important;
  }
  body:not(.outdoor-mode) .mob-drawer-shell {
    padding:14px 12px 12px !important;
    gap:8px !important;
  }
  body:not(.outdoor-mode) .mob-drawer-section {
    gap:8px !important;
  }
  body:not(.outdoor-mode) .mob-drawer .mob-drawer-btn {
    display:grid !important;
    grid-template-columns:20px 1fr 10px !important;
    align-items:center !important;
    column-gap:10px !important;
    min-height:44px !important;
    padding:8px 10px !important;
    border-radius:8px !important;
    background:transparent !important;
    border:none !important;
    color:var(--muted) !important;
    font-size:15.5px !important;
    line-height:1.3 !important;
  }
  body:not(.outdoor-mode) .mob-drawer .mob-drawer-btn::before {
    content:none !important;
  }
  body:not(.outdoor-mode) .mob-drawer .mob-drawer-btn::after {
    content:none !important;
  }
  body:not(.outdoor-mode) .mob-drawer .mob-drawer-btn > span:last-child {
    min-width:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  body:not(.outdoor-mode) .mob-drawer .mob-nav-ico {
    width:20px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:rgba(255,255,255,.58) !important;
    font-size:15px !important;
    line-height:1 !important;
  }
  body:not(.outdoor-mode) .mob-drawer .mob-drawer-btn.active {
    background:rgba(139, 92, 246, 0.12) !important;
    color:var(--accent-light) !important;
  }
  body:not(.outdoor-mode) .mob-drawer .mob-drawer-btn.active .mob-nav-ico {
    color:#f1c96f !important;
  }
  body:not(.outdoor-mode) .mob-drawer-foot .mob-lang-btn {
    background:rgba(21,62,101,.68) !important;
    border:1px solid rgba(170,214,241,.32) !important;
    color:rgba(255,255,255,.72) !important;
    min-height:42px !important;
  }
  body:not(.outdoor-mode) .mob-drawer .mob-search-row {
    min-height:46px !important;
    border-radius:12px !important;
    background:rgba(21,62,101,.72) !important;
    border:1px solid rgba(170,214,241,.34) !important;
  }
  body:not(.outdoor-mode) .mob-drawer .mob-search-row button::before {
    content:none !important;
  }
  body:not(.outdoor-mode) .mob-drawer .mob-search-icon {
    background:rgba(31,83,127,.78) !important;
    color:rgba(255,255,255,.62) !important;
    border:1px solid rgba(170,214,241,.24) !important;
  }
  body:not(.outdoor-mode) .mob-drawer .mob-search-row button {
    background:rgba(201,168,76,.24) !important;
    border:1px solid rgba(201,168,76,.46) !important;
    color:#f1c96f !important;
    border-radius:10px !important;
    min-height:34px !important;
    padding:0 12px !important;
  }
  body:not(.outdoor-mode) .mob-drawer .mob-search-row input {
    color:rgba(255,255,255,.84) !important;
  }
  body:not(.outdoor-mode) .mob-drawer .mob-search-row input::placeholder {
    color:rgba(255,255,255,.50) !important;
  }
  #city-smart-dd,
  #mob-city-smart-dd,
  #mob-drawer-city-smart-dd {
    background:rgba(21,62,101,.96) !important;
    border:1px solid rgba(170,214,241,.34) !important;
    z-index:2310 !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }
  #city-smart-dd {
    position:fixed !important;
    top:var(--mob-search-dd-top, calc(env(safe-area-inset-top, 0px) + 72px)) !important;
    left:var(--mob-search-dd-left, 10px) !important;
    right:auto !important;
    width:var(--mob-search-dd-width, calc(100vw - 20px)) !important;
    max-height:min(46vh, calc(var(--mob-vv-height, 100dvh) - var(--mob-search-dd-top, 120px) - 12px)) !important;
    border-radius:16px !important;
  }
  #mob-city-smart-dd {
    position:fixed !important;
    left:var(--mob-quick-dd-left, 10px) !important;
    right:auto !important;
    width:var(--mob-quick-dd-width, calc(100vw - 20px)) !important;
    bottom:var(--mob-quick-dd-bottom, 64px) !important;
    top:auto !important;
    max-height:min(42vh, calc(var(--mob-vv-height, 100dvh) - 96px)) !important;
    border-radius:12px !important;
  }
  #mob-drawer-city-smart-dd {
    position:fixed !important;
    top:var(--mob-drawer-dd-top, calc(env(safe-area-inset-top, 0px) + 104px)) !important;
    left:var(--mob-drawer-dd-left, 12px) !important;
    right:auto !important;
    width:var(--mob-drawer-dd-width, calc(100vw - 24px)) !important;
    max-height:min(42vh, calc(var(--mob-vv-height, 100dvh) - var(--mob-drawer-dd-top, 130px) - 12px)) !important;
    border-radius:12px !important;
  }
  #mob-city-smart-dd .ms-item,
  #mob-drawer-city-smart-dd .ms-item {
    padding:10px 12px !important;
  }
  #mob-city-smart-dd .ms-item-name,
  #mob-drawer-city-smart-dd .ms-item-name {
    font-size:13px !important;
  }
  #mob-city-smart-dd .ms-item-sub,
  #mob-drawer-city-smart-dd .ms-item-sub {
    font-size:11px !important;
  }
  .live-vp-badge {
    z-index:2200 !important;
    top:var(--mobile-top-hud) !important;
    left:10px !important;
    max-width:min(210px, calc(100vw - 20px)) !important;
    border-radius:12px !important;
    background:rgba(21,62,101,.82) !important;
    border:1px solid rgba(170,214,241,.30) !important;
  }
  .mob-layer-stack {
    z-index:2190 !important;
    top:var(--mobile-top-hud) !important;
    right:10px !important;
    gap:8px !important;
  }
  .compass-fab {
    display:flex !important;
    right:10px !important;
    bottom:calc(var(--mobile-sheet-offset, 90px) + env(safe-area-inset-bottom, 0px) + 60px) !important;
    z-index:2196 !important;
  }
  body:not(.outdoor-mode) .compass-fab::before{
    font-size:18px !important;
  }
  .map-fab {
    right:10px !important;
    bottom:calc(var(--mobile-sheet-offset, 90px) + env(safe-area-inset-bottom, 0px) + 8px) !important;
    gap:8px !important;
    z-index:2195 !important;
  }
  .map-fab-btn,
  .map-fab-btn.secondary {
    width:42px !important;
    height:42px !important;
    border-radius:50% !important;
    background:rgba(21,62,101,.84) !important;
    border:1px solid rgba(170,214,241,.34) !important;
    color:rgba(255,255,255,.72) !important;
    font-size:17px !important;
    box-shadow:0 10px 22px rgba(5,18,34,.32) !important;
  }
  .map-fab-btn:hover,
  .map-fab-btn.secondary:hover {
    background:rgba(49,106,152,.92) !important;
    color:rgba(255,255,255,.88) !important;
  }
  .qibla-panel {
    top:calc(var(--mobile-top-hud) + 62px) !important;
    left:10px !important;
    max-width:min(340px, calc(100% - 20px)) !important;
    z-index:2180 !important;
  }
  #map .leaflet-control-zoom {
    border:none !important;
    border-radius:12px !important;
    overflow:hidden !important;
  }
  #map .leaflet-control-zoom a {
    background:rgba(21,62,101,.92) !important;
    color:rgba(255,255,255,.72) !important;
    border:none !important;
  }
  #map .leaflet-control-zoom a:hover {
    background:rgba(49,106,152,.96) !important;
    color:rgba(255,255,255,.88) !important;
  }
  #map .leaflet-control-zoom a.leaflet-disabled {
    background:rgba(31,76,118,.7) !important;
    color:rgba(255,255,255,.36) !important;
  }
}

/* STEP 1: Detail panel spacing + typography uplift */
.dp-panel{width:420px;}
.dp-head{padding:22px 24px 16px;}
.dp-head-left{padding-right:12px;}
.dp-name{font-size:21px;line-height:1.28;}
.dp-name-ar{font-size:17px;margin-top:6px;}
.dp-place{font-size:15px;line-height:1.45;margin-top:8px;}
.dp-coords{font-size:12px;line-height:1.4;margin-top:6px;}
.dp-ribbon-item{padding:14px 14px 12px;gap:6px;}
.dp-ribbon-lbl{font-size:11px;letter-spacing:.07em;}
.dp-ribbon-val{font-size:17px;line-height:1.3;}
.dp-status-badge{font-size:13px;padding:6px 12px;border-radius:12px;}
.dp-photo{max-height:250px;}
.dp-photo-credit{font-size:10px;padding:3px 8px;border-radius:6px;}
.dp-section{padding:18px 20px;}
.dp-section-title{font-size:13px;margin-bottom:14px;}
.dp-int-gallery{gap:10px;margin-bottom:12px;}
.dp-int-thumb{height:82px;border-radius:8px;}
.dp-int-thumb span{font-size:11px;left:6px;bottom:6px;padding:2px 6px;}
.dp-int-meta{font-size:15px;line-height:1.5;margin-bottom:12px;}
.dp-int-form{gap:10px;margin-bottom:12px;}
.dp-int-form label{font-size:14px;}
.dp-int-form input,.dp-int-form select{font-size:14px;padding:10px 12px;border-radius:8px;}
.dp-int-axis-val{font-size:15px;}
.dp-int-ev-list{gap:8px;}
.dp-int-ev-row{padding:10px 12px;font-size:13px;border-radius:8px;}
.dp-int-ev-sub{font-size:12px;line-height:1.4;}
.dp-int-ev-del{font-size:12px;padding:5px 10px;}
.dp-qibla-row{gap:18px;}
.dp-qibla-stats{gap:10px;}
.dp-qs-row{font-size:16px;line-height:1.45;}
.dp-wiki-body{font-size:15px;line-height:1.65;margin-bottom:12px;}
.dp-wiki-link{font-size:13px;}
.dp-tags{gap:5px;}
.dp-tag-row{grid-template-columns:155px 1fr;gap:10px;font-size:14px;padding:7px 0;}
.dp-actions{gap:10px;padding:18px 20px 24px;}
.dp-action-btn{font-size:14px;padding:10px 14px;border-radius:8px;}
.dp-kunye{display:flex;flex-direction:column;gap:8px;}
.dp-kunye-row{
  display:grid;
  grid-template-columns:156px 1fr;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid rgba(170,214,241,.22);
}
.dp-kunye-row:last-child{border-bottom:none;}
.dp-kunye-k{
  font-size:13px;
  color:rgba(255,255,255,.58);
  line-height:1.4;
}
.dp-kunye-v{
  font-size:14px;
  color:rgba(255,255,255,.84);
  line-height:1.45;
  font-weight:600;
}
.dp-kunye-v a{
  color:rgba(180, 230, 255, .92);
  text-decoration:none;
  border-bottom:1px solid rgba(180, 230, 255, .4);
}
.dp-kunye-v a:hover{
  color:#ffffff;
  border-bottom-color:rgba(255,255,255,.8);
}

@media (max-width:768px){
  .dp-panel{width:100%;}
  .dp-head{padding:18px 16px 14px;}
  .dp-name{font-size:19px;}
  .dp-place{font-size:13px;}
  .dp-ribbon-item{padding:12px 10px 10px;}
  .dp-ribbon-lbl{font-size:10px;}
  .dp-ribbon-val{font-size:15px;}
  .dp-section{padding:16px 14px;}
  .dp-section-title{font-size:12px;}
  .dp-int-meta,.dp-qs-row,.dp-wiki-body{font-size:14px;}
  .dp-tag-row{grid-template-columns:128px 1fr;font-size:13px;gap:8px;}
  .dp-kunye-row{grid-template-columns:124px 1fr;gap:8px;padding:8px 0;}
  .dp-kunye-k{font-size:12px;}
  .dp-kunye-v{font-size:13px;}
}

/* DETAIL SPACING FIX: keep true inner distance from modal borders */
.dp-panel > div.dp-section{
  padding:18px 24px !important;
}
.dp-panel > div.dp-actions{
  padding:18px 24px 24px !important;
}
@media (max-width:768px){
  .dp-panel > div.dp-section{
    padding:16px 16px !important;
  }
  .dp-panel > div.dp-actions{
    padding:16px 16px 20px !important;
  }
}