@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg: #F7F7F5;
  --surface: #FFFFFF;
  --surface-alpha: rgba(255,255,255,0.88);
  --text: #16181C;
  --text-dim: #62666D;
  --border: rgba(20,22,26,0.10);
  --brand: #0E5A6B;
  --brand-dark: #0A4552;
  --accent: #F2A93B;
  --shadow: 0 6px 24px rgba(20,22,26,0.14);
  --radius: 14px;

  --green: #2AA85C;
  --red: #E15252;
  --yellow: #E8B838;
  --grey: #9AA0A6;
  --dark_grey: #4A4E54;
}

[data-theme="dark"]{
  --bg: #101216;
  --surface: #1B1E24;
  --surface-alpha: rgba(27,30,36,0.90);
  --text: #F1F2F4;
  --text-dim: #9AA0A8;
  --border: rgba(255,255,255,0.10);
  --brand: #48C2D6;
  --brand-dark: #2E96A8;
  --shadow: 0 6px 24px rgba(0,0,0,0.45);
}

*{ box-sizing: border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  overscroll-behavior: none;
}
h1,h2,h3{ font-family:'Manrope', sans-serif; letter-spacing:-0.01em; margin:0 0 8px; }
button{ font-family: inherit; }
input{ font-family: inherit; }

#app{ display:flex; flex-direction:column; width:100vw; height:100vh; height:100dvh; overflow:hidden; }

/* ---------- Рекламный баннер сверху (для реферальных ссылок) ---------- */
.ad-banner{
  flex-shrink:0; z-index:800; min-height:40px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(90deg, var(--brand), var(--brand-dark)); color:#fff; font-size:13px;
  padding:8px 40px; text-align:center; position:relative;
}
.ad-banner-content{ color:#fff; text-decoration:none; }
.ad-banner-content:hover{ text-decoration:underline; }
.ad-banner-close{
  position:absolute; right:8px; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15);
  border:none; color:#fff; width:24px; height:24px; border-radius:50%; cursor:pointer; font-size:12px; flex-shrink:0;
}
body.banner-hidden .ad-banner{ display:none; }

/* Вся карта и её UI (топбар, фильтры, легенда, кнопка +) живут в этой обёртке.
   flex:1 — она сама забирает всё место, что осталось под баннером, поэтому
   при любой высоте баннера (даже если текст переносится на 2 строки) внутренние
   элементы физически не могут наложиться на баннер — они просто в другой области. */
#map-ui{ position:relative; flex:1; min-height:0; overflow:hidden; }
#map{ position:absolute; inset:0; z-index:0; }

/* ---------- Кнопки в карточке АЗС: маршрут + история ---------- */
.card-action-row{ display:flex; gap:8px; margin-bottom:16px; }
.card-action-row .btn{ height:44px; font-size:15px; }
.btn-route{
  background:#1a73e8; color:#fff; display:flex; align-items:center; justify-content:center; gap:6px;
  text-decoration:none; border-radius:12px; flex:1; font-weight:700; box-shadow:0 2px 8px rgba(26,115,232,.35);
}
.btn-route:hover{ background:#1765cc; }

/* ---------- История: таймлайн и праймтайм ---------- */
.history-timeline{ display:flex; flex-direction:column; gap:10px; }
.history-fuel-row{ border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
.history-fuel-label{ font-weight:600; font-size:13px; margin-bottom:6px; }
.history-runs{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:12px; }
.history-run{ padding:3px 8px; border-radius:999px; }
.history-run.yes{ background: rgba(42,168,92,.15); color: var(--green); }
.history-run.no{ background: rgba(225,82,82,.15); color: var(--red); }
.history-arrow{ color:var(--text-dim); }
.prime-chart{ display:flex; align-items:flex-end; gap:2px; height:64px; margin-top:8px; }
.prime-bar{ flex:1; background:var(--brand); border-radius:2px 2px 0 0; min-height:4px; }
.prime-chart-labels{ display:flex; justify-content:space-between; font-size:11px; color:var(--text-dim); margin-top:4px; }

/* ---------- Оповещения о появлении топлива ---------- */
.premium-badge{ background: rgba(242,169,59,.15); color:#a56d0e; padding:8px 12px; border-radius:10px; font-size:13px; margin-bottom:12px; }
[data-theme="dark"] .premium-badge{ color: var(--accent); }
.premium-upsell{ background: var(--bg); border:1px dashed var(--border); padding:8px 12px; border-radius:10px; font-size:12px; color:var(--text-dim); margin-bottom:12px; }
.alerts-list{ display:flex; flex-direction:column; gap:8px; }
.alert-item{ border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:13px; }
.alert-item.locked{ opacity:.7; background:var(--bg); }
.alert-item-meta{ font-size:11px; color:var(--text-dim); margin-top:2px; }
.subscription-disclaimer{
  font-size:11px; color:var(--text-dim); background:var(--bg); border-radius:10px;
  padding:10px 12px; margin-bottom:12px; line-height:1.5;
}

/* ---------- Мягкое предложение включить уведомления ---------- */
.notif-soft-ask{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:2500;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:14px 16px; box-shadow:var(--shadow); max-width:340px; width:90vw;
  animation: slideUp .3s ease-out;
}
.notif-soft-ask-text{ font-size:13px; margin-bottom:10px; }
.notif-soft-ask-actions{ display:flex; gap:8px; }
.notif-soft-ask-actions .btn{ height:38px; font-size:12px; }
.notif-steps{ padding-left:20px; font-size:14px; line-height:1.7; }
.notif-steps li{ margin-bottom:4px; }
.notif-note{ font-size:12px; color:var(--text-dim); background:var(--bg); border-radius:10px; padding:10px 12px; }

/* ---------- Напоминание "помоги друзьям" (реферальная система) ---------- */
.share-reminder{
  position:fixed; bottom:100px; left:50%; transform:translateX(-50%); z-index:2500;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:14px 16px; box-shadow:var(--shadow); max-width:340px; width:90vw;
  animation: slideUp .3s ease-out;
}
.share-reminder-text{ font-size:13px; margin-bottom:10px; }
.share-reminder-actions{ display:flex; gap:8px; }
.share-reminder-actions .btn{ height:38px; font-size:12px; }

/* ---------- Верхняя панель ---------- */
.topbar{
  position:absolute; left:12px; right:12px; z-index:500;
  /* env(safe-area-inset-top) — отступ под "чёлку"/динамический остров iPhone,
     чтобы кнопки не оказывались под системными элементами устройства */
  top: calc(12px + env(safe-area-inset-top, 0px));
  display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap;
}
.search-box{
  flex:1 1 200px; min-width:140px; position:relative;
}
#search-input{
  width:100%; height:48px; border-radius: var(--radius); border:1px solid var(--border);
  background: var(--surface-alpha); backdrop-filter: blur(10px);
  padding:0 16px; font-size:15px; color:var(--text); box-shadow: var(--shadow);
}
#search-input:focus{ outline:2px solid var(--brand); outline-offset:1px; }
.search-results{
  position:absolute; top:56px; left:0; right:0; background:var(--surface);
  border-radius: var(--radius); box-shadow: var(--shadow); max-height:280px; overflow-y:auto;
  border:1px solid var(--border);
}
.search-result-item{ padding:12px 16px; cursor:pointer; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.search-result-item:last-child{ border-bottom:none; }
.search-result-item:hover{ background: var(--bg); }
.search-result-item .sr-text{ flex:1; min-width:0; }
.search-result-item .sr-name{ font-weight:600; }
.search-result-item .sr-addr{ font-size:13px; color:var(--text-dim); }
.search-result-item .dot{ width:10px; height:10px; }
.sr-route-btn{
  flex-shrink:0; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--bg); text-decoration:none; font-size:15px;
}
.sr-route-btn:hover{ background: var(--brand); }

.topbar-actions{ display:flex; gap:8px; flex-shrink:0; }
.icon-btn{
  width:48px; height:48px; border-radius:50%; border:1px solid var(--border);
  background: var(--surface-alpha); backdrop-filter: blur(10px); font-size:19px;
  box-shadow: var(--shadow); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.icon-btn:active{ transform: scale(0.94); }

/* ---------- Панели (легенда/фильтр) ---------- */
.panel{
  background: var(--surface-alpha); backdrop-filter: blur(10px);
  border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding:10px 14px;
}
.filters-stack{
  position:absolute; left:12px; bottom:100px; z-index:500; max-width:calc(100vw - 24px);
  display:flex; flex-direction:column; gap:10px;
}
.fuel-filter, .brand-filter{ max-width:calc(100vw - 24px); }
.fuel-filter-title{ font-size:12px; color:var(--text-dim); margin-bottom:6px; }
.fuel-filter-chips{ display:flex; gap:6px; flex-wrap:wrap; max-width: 280px; }

/* ---------- Кнопка-переключатель для всего блока фильтров (компактность) ---------- */
.filters-toggle{
  display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; box-shadow:var(--shadow);
  color:var(--text); width:fit-content;
}
.filters-toggle-arrow{ transition: transform .2s ease; color:var(--text-dim); font-size:11px; }
.filters-toggle.expanded .filters-toggle-arrow{ transform: rotate(180deg); }
.filters-panels{ display:flex; flex-direction:column; gap:10px; }
.filters-panels.collapsed{ display:none; }
.atm-toggle-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:10px 14px;
}
.switch{ position:relative; display:inline-block; width:38px; height:22px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.switch-slider{
  position:absolute; inset:0; background:var(--border); border-radius:999px; cursor:pointer; transition:.2s;
}
.switch-slider::before{
  content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff;
  border-radius:50%; transition:.2s;
}
.switch input:checked + .switch-slider{ background: var(--brand); }
.switch input:checked + .switch-slider::before{ transform: translateX(16px); }

.chip{
  padding:6px 12px; border-radius:999px; border:1px solid var(--border); font-size:13px;
  background: var(--surface); cursor:pointer; user-select:none;
}
.chip.active{ background: var(--brand); color:#fff; border-color: var(--brand); }

.legend{
  position:absolute; right:12px; bottom:24px; z-index:500;
  transition: padding .15s ease;
}
.legend-item{ display:flex; align-items:center; gap:8px; font-size:13px; margin:4px 0; }
.dot{ width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.dot.green{ background: var(--green); }
.dot.red{ background: var(--red); }
.dot.yellow{ background: var(--yellow); }
.dot.grey{ background: var(--grey); }
.dot.dark_grey{ background: var(--dark_grey); }
.dot.blue{ background: #2f6fed; }
.legend-toggle{
  position:absolute; top:6px; right:6px; background:none; border:none; cursor:pointer; font-size:14px; color:var(--text-dim);
}
.legend.collapsed{ padding:8px 30px 8px 12px; }
.legend.collapsed .legend-item{ display:none; }

/* Мобильные экраны — легенда свёрнута по умолчанию (см. app.js), маленький
   значок-переключатель, чтобы не занимать место у карты, но всегда доступна в один тап. */
@media (max-width: 899px){
  .legend{ font-size:12px; }
  .legend.collapsed{ padding:6px 26px 6px 10px; }
}

/* Десктоп — легенда крупнее и заметнее, всегда развёрнута по умолчанию */
@media (min-width: 900px){
  .legend{ padding:16px 20px; min-width:220px; }
  .legend-item{ font-size:15px; margin:7px 0; gap:10px; }
  .dot{ width:15px; height:15px; }
  .legend-toggle{ font-size:16px; top:10px; right:10px; }
}

/* ---------- Кнопка добавить АЗС ---------- */
.fab{
  position:absolute; right:16px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index:500;
  width:56px; height:56px; border-radius:50%; border:none;
  background: var(--accent); color:#1a1a1a; font-size:28px; font-weight:700;
  box-shadow: var(--shadow); cursor:pointer;
}
.fab:active{ transform: scale(0.94); }

/* ---------- Кнопка "Описание" и юридическая подпись внизу карты ---------- */
.about-toggle-btn{
  position:absolute; left:12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index:490;
  background:var(--surface-alpha); backdrop-filter: blur(10px); border:1px solid var(--border);
  border-radius:999px; padding:6px 12px; font-size:12px; color:var(--text-dim); cursor:pointer;
}
.legal-footer{
  position:absolute; left:12px; bottom: calc(2px + env(safe-area-inset-bottom, 0px)); z-index:480;
  font-size:10px; color:var(--text-dim); opacity:.55; pointer-events:none;
}
.legal-footer *{ pointer-events:auto; }
.legal-footer-link{ background:none; border:none; padding:0; font-size:10px; color:inherit; text-decoration:underline; cursor:pointer; }
.legal-footer a{ color:inherit; }
@media (max-width: 640px){
  .about-toggle-btn{ bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
  .legal-footer{ display:none; } /* на маленьком экране не хватает места — доступно через профиль */
}

.add-mode-hint{
  position:absolute; top:70px; left:50%; transform:translateX(-50%); z-index:600;
  background: var(--brand); color:#fff; padding:10px 18px; border-radius:999px; font-size:14px;
  box-shadow: var(--shadow); display:flex; gap:10px; align-items:center; white-space:nowrap;
}
.link-btn{ background:none; border:none; color:#fff; text-decoration:underline; cursor:pointer; font-size:14px; padding:0; }

/* ---------- Модалки ---------- */
.modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:flex-end; justify-content:center; }
.modal.hidden{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(10,12,16,0.5); }
.modal-content{
  position:relative; background: var(--surface); width:100%; max-width:520px;
  border-radius: 20px 20px 0 0; padding:20px; max-height:88vh; overflow-y:auto;
  box-shadow: var(--shadow); animation: slideUp .22s ease-out;
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
}
@media (min-width:640px){
  .modal{ align-items:center; }
  .modal-content{ border-radius:20px; max-height:80vh; }
}
@keyframes slideUp{ from{ transform:translateY(24px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.modal-content.small{ max-width:400px; }

.modal-content label{ display:block; font-size:13px; color:var(--text-dim); margin-bottom:12px; }
.modal-content input{
  display:block; width:100%; height:44px; margin-top:4px; padding:0 12px;
  border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:15px;
}
.modal-actions{ display:flex; gap:10px; margin-top:8px; }
.btn{
  flex:1; height:46px; border-radius:12px; border:none; font-size:15px; font-weight:600; cursor:pointer;
}
.btn-primary{ background: var(--brand); color:#fff; }
.btn-secondary{ background: var(--bg); color:var(--text); border:1px solid var(--border); }
.btn-yes{ background: var(--green); color:#fff; }
.btn-no{ background: var(--red); color:#fff; }
.btn-unsure{ background: var(--grey); color:#fff; }
.confirm-text{ font-size:16px; text-align:center; margin-bottom:18px; }
.confirm-buttons{ display:flex; gap:8px; }

/* ---------- Тост достижения ---------- */
.achievement-toast{
  position:fixed; top:20px; left:50%; transform:translateX(-50%) translateY(-120%);
  z-index:2000; background: var(--brand); color:#fff; border-radius:16px; padding:14px 20px;
  display:flex; align-items:center; gap:12px; box-shadow: var(--shadow);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
.achievement-toast.hidden{ display:flex; transform:translateX(-50%) translateY(-120%); }
.achievement-toast.show{ transform:translateX(-50%) translateY(0); }
.achievement-toast-icon{ font-size:28px; }
.achievement-toast-title{ font-size:11px; opacity:.85; text-transform:uppercase; letter-spacing:.05em; }
.achievement-toast-name{ font-size:15px; font-weight:700; }

.hidden{ display:none !important; }

/* Leaflet popups/markers minor tweaks */
.station-marker{
  position:relative;
  width:20px; height:20px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 1px 2px rgba(0,0,0,0.35);
}
.station-marker.inactive{ opacity:0.45; }
.station-marker.green{ background: var(--green); }
.station-marker.red{ background: var(--red); }
.station-marker.yellow{ background: var(--yellow); }
.station-marker.grey{
  background: var(--grey);
  /* Заметнее, чем раньше — это тысячи станций из OSM без единой отметки от
     сообщества, цветная рамка вместо белой приглашает кликнуть и заполнить
     данные. dark_grey (предложены пользователями, ждут подтверждения)
     нарочно оставляем как есть — они менее приоритетны для внимания. */
  border-color: var(--brand); border-width: 3px;
}
.station-marker.dark_grey{ background: var(--dark_grey); }
/* Синяя обводка — независимый сигнал "только по топливным картам", рисуется
   ПОВЕРХ обычного цвета статуса топлива, а не вместо него: станция может
   одновременно быть "только по картам" и без топлива вовсе — это два разных
   факта, и раньше сплошной синий цвет маркера скрывал второй. */
.station-marker.cards-only{ box-shadow: 0 0 0 3px #2f6fed, 0 1px 4px rgba(0,0,0,0.4); }
.station-marker-badge{
  position:absolute; top:-7px; right:-7px; width:14px; height:14px; border-radius:50%;
  background:#2f6fed; color:#fff; font-size:9px; font-weight:800; line-height:14px; text-align:center;
  transform: rotate(45deg); box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.atm-marker{
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  font-size:15px; background:var(--surface); border-radius:6px; border:1px solid var(--border);
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}

/* ---------- Карточка АЗС ---------- */
.station-card h2{ font-size:20px; }
.station-card .brand{ color:var(--text-dim); font-size:14px; margin-bottom:12px; }
.station-card .address{ font-size:14px; color:var(--text-dim); margin-bottom:16px; }
.attr-grid-stack{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.attr-item{
  border:1px solid var(--border); border-radius:10px; padding:10px 12px;
  font-size:13px; background:var(--bg); margin-bottom:8px;
}
.attr-item-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.attr-item .attr-label{ display:flex; align-items:center; gap:6px; }
.attr-item .dot{ width:9px; height:9px; }
.attr-item .attr-value{ color:var(--text-dim); }
.attr-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.attr-btn{
  flex:1; min-width:70px; height:36px; border-radius:9px; border:1px solid var(--border);
  background:var(--surface); font-size:13px; cursor:pointer; font-weight:600; color:var(--text-dim);
}
.attr-btn:active{ transform: scale(0.96); }
.attr-btn.yes.active{ background: rgba(42,168,92,.15); border-color: var(--green); color: var(--green); }
.attr-btn.no.active{ background: rgba(225,82,82,.15); border-color: var(--red); color: var(--red); }
.queue-chips{ justify-content:flex-start; }
.queue-chip, .rating-chip, .price-level-chip{
  padding:8px 12px; border-radius:9px; border:1px solid var(--border); background:var(--surface);
  font-size:13px; cursor:pointer; color:var(--text-dim);
}
.queue-chip.active{ background: var(--brand); color:#fff; border-color: var(--brand); }
.rating-chip.active{ background: var(--accent); color:#1a1a1a; border-color: var(--accent); }
.price-level-chip.active{ background: var(--brand); color:#fff; border-color: var(--brand); }

/* ---------- Сворачиваемый подраздел: цены/удобства/оценка (не срочное) ---------- */
.extra-section-toggle{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; margin-top:16px; font-size:14px; font-weight:600; cursor:pointer; color:var(--text);
}
.extra-section-arrow{ transition: transform .2s ease; color:var(--text-dim); }
.extra-section-toggle.expanded .extra-section-arrow{ transform: rotate(180deg); }
.extra-section.collapsed{ display:none; }
.extra-section{ margin-top:4px; }
.station-card .meta-row{ display:flex; justify-content:space-between; font-size:12px; color:var(--text-dim); margin-top:10px; }
.report-missing-link{
  display:block; width:100%; text-align:center; background:none; border:none; margin-top:18px;
  padding:8px; font-size:12px; color:var(--text-dim); opacity:.6; cursor:pointer;
}
.report-missing-link:hover{ opacity:1; color:var(--red); }

/* ---------- Premium: мгновенное уведомление о первой оценке топлива ---------- */
.premium-instant-alert{
  position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:3000;
  background:var(--surface); border:2px solid var(--accent); border-radius:16px;
  padding:14px 18px; box-shadow:var(--shadow); max-width:360px; width:90vw;
  animation: slideUp .3s ease-out;
}
.premium-instant-alert-title{ font-weight:700; font-size:14px; margin-bottom:4px; }
.premium-instant-alert-addr{ font-size:12px; color:var(--text-dim); margin-bottom:10px; }
.premium-instant-alert-actions{ display:flex; gap:8px; }
.premium-instant-alert-actions .btn{ height:38px; font-size:13px; }
.close-btn{ position:absolute; top:14px; right:14px; background:var(--bg); border:none; width:32px; height:32px; border-radius:50%; font-size:16px; cursor:pointer; }

/* ---------- Профиль ---------- */
.profile-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin: 16px 0; }
.profile-stat{ background:var(--bg); border-radius:12px; padding:12px; text-align:center; }
.profile-stat .num{ font-family:'Manrope'; font-size:22px; font-weight:800; color:var(--brand); }
.profile-stat .label{ font-size:11px; color:var(--text-dim); margin-top:2px; }
.achievements-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:10px; margin-top:12px; }
.achievement-badge{ text-align:center; font-size:11px; color:var(--text-dim); }
.achievement-badge .icon{ font-size:26px; width:56px; height:56px; margin:0 auto 4px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; }
.achievement-badge.locked .icon{ filter: grayscale(1); opacity:.35; }

@media (max-width: 400px){
  .filters-stack{ max-width: 180px; }
  .fuel-filter-chips, .brand-filter .fuel-filter-chips{ max-width: 160px; max-height: 90px; overflow-y:auto; }
}

/* =========================================================
   Десктоп (широкие экраны) — интерфейс, рассчитанный на мобильный
   размер, на большом мониторе выглядит мелко. Увеличиваем всё:
   кнопки, шрифты, панели, и карточку АЗС переносим сбоку, а не
   нижним листом снизу — так гораздо удобнее при работе мышью.
   ========================================================= */
@media (min-width: 900px){
  .topbar{ top:20px; left:20px; right:20px; }
  #search-input{ height:56px; font-size:16px; border-radius:16px; }
  .search-results{ top:64px; font-size:15px; }

  .icon-btn{ width:56px; height:56px; font-size:22px; }

  .filters-stack{ left:20px; bottom:120px; gap:14px; }
  .fuel-filter, .brand-filter{ padding:14px 18px; }
  .fuel-filter-title{ font-size:13px; }
  .fuel-filter-chips{ max-width:320px; }
  .chip{ padding:8px 16px; font-size:14px; }

  .legend{ right:20px; bottom:32px; padding:14px 18px; }
  .legend-item{ font-size:14px; }
  .dot{ width:14px; height:14px; }

  .fab{ right:24px; bottom:110px; width:64px; height:64px; font-size:32px; }

  /* Карточка АЗС и профиль — панель у правого края экрана, во весь рост,
     вместо шторки снизу. Не перекрывает карту целиком, оставляет её видимой слева. */
  .modal{ align-items:stretch; justify-content:flex-end; }
  .modal-content{
    width:420px; max-width:420px; max-height:100vh; height:100vh;
    border-radius:0; animation: slideInRight .25s ease-out;
  }
  .modal-content.small{
    align-self:center; height:auto; max-height:80vh; border-radius:20px; width:420px;
  }
  .modal-backdrop{ background: rgba(10,12,16,0.35); }

  .station-card h2{ font-size:24px; }
  .attr-item{ font-size:14px; padding:12px 14px; }

  .add-mode-hint{ top:92px; font-size:15px; padding:12px 22px; }
}

@keyframes slideInRight{ from{ transform:translateX(24px); opacity:0; } to{ transform:translateX(0); opacity:1; } }

@media (min-width: 1400px){
  .modal-content{ width:460px; max-width:460px; }
}

/* ---------- Блок «О проекте» (реальный SEO-контент, не только карта) ---------- */
.about-project{
  max-width:720px; margin:0 auto; padding:48px 20px 80px; color:var(--text);
  background:var(--bg);
}
.about-project h1{ font-size:24px; margin-bottom:12px; }
.about-project h2{ font-size:17px; margin-top:28px; margin-bottom:8px; color:var(--brand-dark); }
.about-project p{ font-size:15px; line-height:1.7; color:var(--text-dim); }