:root {
  --txt: #12141a;
  --txt-dim: #5b6472;
  --accent: #0a84ff;
  --radius: 20px;
  --blur: 30px;
  /* ── «liquid glass» (iOS 26): матовое, но живое стекло ── */
  --glass-filter: blur(var(--blur)) saturate(180%) brightness(1.08) contrast(1.03);
  /* два слоя: (1) диагональный спекуляр — «блик света на стекле», (2) базовая матовость
     (чуть холоднее и белее, чтобы тёплый фон карты не желтил стекло).
     Всё в background → под контентом, псевдоэлементы не нужны, работает и на балуне. */
  --glass-grad:
    linear-gradient(133deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.12) 15%, rgba(255, 255, 255, 0) 33%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.68), rgba(250, 252, 255, 0.44) 52%, rgba(244, 248, 255, 0.5));
  --glass-brd: rgba(255, 255, 255, 0.72);
  /* слои: мягкая тень-глубина + чёткий контактный контур + верхняя световая кромка +
     нижний внутренний блик + тонкий цветной ободок (хроматика стекла) */
  --glass-sh: 0 14px 40px -6px rgba(12, 22, 44, 0.24),
              0 2px 6px rgba(12, 22, 44, 0.10),
              inset 0 1.4px 0.5px rgba(255, 255, 255, 0.95),
              inset 0 -16px 28px -18px rgba(255, 255, 255, 0.5),
              inset 0 0 0 0.5px rgba(180, 205, 255, 0.10);
}
@media (prefers-color-scheme: dark) {
  :root {
    --glass-grad:
      linear-gradient(133deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.09) 15%, rgba(255, 255, 255, 0) 33%),
      linear-gradient(150deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.29) 52%, rgba(240, 246, 255, 0.36));
    --glass-brd: rgba(255, 255, 255, 0.62);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
#map, #map * { box-sizing: content-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  color: var(--txt); background: #e9ebee; -webkit-font-smoothing: antialiased;
}
#map { position: fixed; inset: 0; background: #e9ebee; }
.hidden { display: none !important; }

/* базовая стеклянная поверхность */
.glass {
  background: var(--glass-grad);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-sh);
}

/* ── верхняя строка ── */
.topbar {
  position: fixed; z-index: 6;
  top: calc(env(safe-area-inset-top) + 10px);
  left: 0; right: 0; margin: 0 auto; width: calc(100% - 24px); max-width: 760px;
  display: flex; align-items: center; gap: 10px;
}
.brand, .city-btn {
  height: 52px; border-radius: 17px;
  background: var(--glass-grad);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-brd); box-shadow: var(--glass-sh);
}
.brand { flex: 1; display: flex; align-items: center; padding: 0 18px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.city-btn { padding: 0 16px; flex: 0 0 auto; max-width: 46vw; display: inline-flex; align-items: center; gap: 7px;
  color: var(--accent); font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .12s ease, filter .2s ease; }
.city-btn:active { transform: scale(0.96); filter: brightness(1.04); }
.city-btn #cityName { color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ico-sm { width: 17px; height: 17px; flex: 0 0 auto; }

/* ── рекламная полоска: ненавязчиво — тонкое стекло, мелкий приглушённый текст, ноль анимаций ── */
.ad-strip {
  position: fixed; z-index: 6;
  top: calc(env(safe-area-inset-top) + 70px);
  left: 0; right: 0; margin: 0 auto; width: calc(100% - 24px); max-width: 760px;
  height: 34px; padding: 0 12px; border-radius: 12px;
  display: flex; align-items: center; gap: 8px;
  background: var(--glass-grad);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-brd); box-shadow: 0 4px 14px rgba(12, 22, 44, 0.10);
  text-decoration: none; color: var(--txt-dim); font-size: 11.5px; line-height: 1;
}
/* тач-таргет ≈44px без визуального утолщения (34px мало для пальца) */
.ad-strip::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -6px; }
.ad-tag { flex: 0 0 auto; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #8a93a1; border: 1px solid rgba(138, 147, 161, 0.45); border-radius: 6px; padding: 2.5px 5px; }
.ad-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-cta { flex: 0 0 auto; font-weight: 600; color: var(--accent); opacity: 0.85; }
.ad-short { display: none; }
@media (max-width: 480px) {   /* мобила: «| Реклама | ~1 млн показов/сутки», без строки контакта */
  .ad-full { display: none; }
  .ad-short { display: inline; }
  .ad-cta { display: none; }
}

/* ── сегмент-контрол марок (стеклянный трек + стеклянная активная «кнопка») ── */
.fuel-seg {
  position: fixed; z-index: 6;
  top: calc(env(safe-area-inset-top) + 112px);
  left: 0; right: 0; margin: 0 auto; width: calc(100% - 24px); max-width: 760px;
  display: flex; gap: 3px; padding: 4px; border-radius: 16px;
  background: var(--glass-grad);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-brd); box-shadow: var(--glass-sh);
}
.seg { flex: 1; height: 40px; border: none; border-radius: 12px; background: transparent; color: var(--txt);
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: transform .1s ease; }
.seg:active { transform: scale(0.96); }
/* активная марка = яркая стеклянная кнопка со светящейся кромкой (как клавиши на скрине) */
.seg.active {
  color: #061a33;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78));
  box-shadow: 0 4px 12px rgba(12, 22, 44, 0.16), inset 0 1px 1px rgba(255, 255, 255, 1), inset 0 -2px 4px rgba(120, 140, 170, 0.14);
}
/* альбомная ориентация: верхний стек и так съедает пол-экрана — рекламу прячем первой,
   сегмент-контрол поджимается на её место (правило ПОСЛЕ .fuel-seg — каскад побеждает) */
@media (max-height: 450px) {
  .ad-strip { display: none; }
  .fuel-seg { top: calc(env(safe-area-inset-top) + 72px); }
}

/* ── нижняя карточка «лучшая» (во всех городах кроме Мск/СПб) ── */
.best-card {
  position: fixed; z-index: 7;
  left: 0; right: 0; margin: 0 auto; width: calc(100% - 24px); max-width: 560px;
  bottom: calc(env(safe-area-inset-bottom) + 16px);
  height: 68px; padding: 0 12px 0 18px; border: none;
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  background: var(--glass-grad);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-brd); border-radius: 22px; box-shadow: var(--glass-sh);
  animation: rise .34s cubic-bezier(.2, 1, .36, 1);
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.bc-main { flex: 1; min-width: 0; }
.bc-title { font-size: 12px; font-weight: 700; color: #0a9d57; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-title.busy { color: #d1730a; }
.bc-name { font-size: 18px; font-weight: 700; color: var(--txt); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.bc-cta {
  flex: 0 0 auto; height: 42px; padding: 0 20px; border-radius: 21px; color: #fff; font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; text-decoration: none;
  background: linear-gradient(180deg, #2b9bff, var(--accent));
  box-shadow: 0 4px 12px rgba(10, 132, 255, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
.bc-cta:active { filter: brightness(.95); }

/* ── точки ── */
.pin { border-radius: 50%; background: #007aff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); transform: translate(-50%, -50%); }
.pin-no { width: 11px; height: 11px; border-radius: 50%; background: transparent; border: 2px solid #9aa1ab; opacity: .7; transform: translate(-50%, -50%); }
.pin-unk { width: 10px; height: 10px; border-radius: 50%; background: rgba(0, 122, 255, .18); border: 2px solid rgba(0, 122, 255, .45); transform: translate(-50%, -50%); }
.best-wrap { transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; }
.best-chip { background: #007aff; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; padding: 3px 9px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.3); white-space: nowrap; }
.best-mark { margin-top: 3px; width: 30px; height: 30px; border-radius: 50%; background: #007aff; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); color: #fff; display: grid; place-items: center; font-size: 16px; }
/* альтернативные «хорошие» без очереди — чистая звезда без плашки (промис уже в бренде) */
.best-mark.alt { width: 22px; height: 22px; border-width: 2.5px; font-size: 12px; background: #4da3ff; }
/* исключение: у рекомендованной точки всё же ЕСТЬ очередь — янтарное предупреждение */
.best-chip.warn { background: #fff2e2; color: #b45309; box-shadow: 0 2px 6px rgba(0,0,0,.22); font-weight: 700; white-space: nowrap; }
.best-mark.warn { width: 22px; height: 22px; border-width: 2.5px; font-size: 12px; background: #ef8a3c; }

/* ── стеклянный балун (перекрываем дефолт Яндекса) ── */
[class*="balloon__layout"], [class*="balloon_layout_normal"] { background: transparent !important; box-shadow: none !important; border: none !important; overflow: visible !important; }
[class*="balloon__content"] {
  margin: 0 !important; padding: 14px 16px !important;
  background: var(--glass-grad) !important;
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border-radius: 20px !important; border: 1px solid var(--glass-brd) !important;
  box-shadow: var(--glass-sh) !important;
  color: var(--txt) !important; font-family: inherit !important; min-width: 210px !important; max-width: 290px !important;
}
[class*="balloon-content__header"] { font-weight: 700 !important; font-size: 16px !important; letter-spacing: -0.01em; margin: 0 0 9px !important; padding-right: 18px !important; color: var(--txt) !important; }
[class*="balloon__tail"] { display: none !important; }
[class*="balloon__close"] { top: 6px !important; right: 6px !important; }
[class*="balloon__close-button"] { opacity: .5 !important; }
.bl { font-size: 13px; line-height: 1.5; }
.bl-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 10px; margin: 0 6px 6px 0;
  background: rgba(255,255,255,.55); box-shadow: inset 0 1px 1px rgba(255,255,255,.8); }
.bl-chip.on { color: var(--accent); }
.bl-chip.off { color: #8a9099; }
.bl-jam { font-size: 13px; font-weight: 700; margin: 5px 0 10px; display: flex; align-items: center; gap: 5px; }
.ico-clock { width: 15px; height: 15px; flex: 0 0 auto; }
.bl-route { display: inline-block; color: var(--accent); font-weight: 700; text-decoration: none; font-size: 14px; }

[class*="copyrights-pane"], [class*="gotoymaps"], [class*="gototech"] { display: none !important; }

/* ── лист городов ── */
.sheet {
  position: fixed; z-index: 9; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 10px);
  max-height: 68vh; overflow-y: auto; border-radius: 26px; padding: 8px 18px 20px;
  background: var(--glass-grad);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-brd); box-shadow: var(--glass-sh);
  transform: translateY(140%); transition: transform .3s cubic-bezier(.22, 1, .36, 1); -webkit-overflow-scrolling: touch;
}
.sheet:not(.hidden) { transform: translateY(0); }
.grab { width: 40px; height: 5px; border-radius: 3px; background: rgba(120,130,150,.4); margin: 8px auto 12px; box-shadow: inset 0 1px 1px rgba(255,255,255,.5); }
.sh-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sh-name { font-size: 20px; font-weight: 700; flex: 1; letter-spacing: -0.02em; }
.sh-close { flex: 0 0 32px; width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(255,255,255,.5); box-shadow: inset 0 1px 1px rgba(255,255,255,.8); color: var(--txt); font-size: 18px; cursor: pointer; }
.city-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.city-item { height: 48px; border: none; border-radius: 14px; color: var(--txt); font-size: 15px; font-weight: 600; cursor: pointer; text-align: left; padding: 0 15px;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.42)); box-shadow: inset 0 1px 1px rgba(255,255,255,.8), 0 1px 3px rgba(12,22,44,.08); transition: transform .1s ease; }
.city-item:active { transform: scale(0.97); }

/* ── прочее ── */
.nokey { position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 460px); border-radius: 22px; padding: 22px;
  background: var(--glass-grad); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-brd); box-shadow: var(--glass-sh); }
.nokey-title { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.nokey-body { font-size: 14px; color: var(--txt-dim); line-height: 1.55; }
.nokey-body code { background: rgba(120,120,128,.16); padding: 2px 6px; border-radius: 6px; color: var(--txt); }
.nokey-body b { color: var(--txt); }

.empty-state { position: fixed; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 14px 20px; border-radius: 16px; font-size: 15px; font-weight: 600; color: var(--txt); text-align: center;
  background: var(--glass-grad); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border: 1px solid var(--glass-brd); box-shadow: var(--glass-sh); }

.toast { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%) translateY(-16px); top: calc(env(safe-area-inset-top) + 172px);
  background: rgba(20,22,28,.9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #fff; padding: 11px 18px; border-radius: 14px; font-size: 14px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; box-shadow: 0 10px 30px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.15); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.backdrop { position: fixed; inset: 0; z-index: 8; background: rgba(10, 15, 30, 0.28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }