/* ════════════════════════════════════════════════════════════════════════════
   ГдеЗаправка · Уфа — продакшн-стили карты.
   Источник: owner-approved дизайн (claude.ai, D-09) — извлечён из инлайн <style>
   .design-src/design-index.html без изменений визуала. Селекторы (id/класс)
   канонические для Фазы 2; их читает /js/app.js. Mobile-first PWA.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  --ok:#22c55e; --limit:#f59e0b; --no:#ef4444; --unknown:#9ca3af;
  /* Акцент бренда — ЗЕЛЁНЫЙ (макет gdebenz «Где<green>Заправка</green>», #22C55E). */
  --accent:#22c55e;
  --accent-soft:rgba(34,197,94,.15);
  --accent-line:rgba(34,197,94,.45);
  --accent-ink:#04210f;        /* тёмный текст на зелёной кнопке */
  --user:#3b82f6;              /* точка геолокации пользователя — синяя (как в макете) */
  --font:'Manrope','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'PingFang SC','Noto Sans',sans-serif;
  --r:16px;
  --tabbar-h:62px;  /* высота нижнего таб-бара (редизайн) — отступ для legend/fabs/toast/views */
  --peek-h:136px;   /* высота свёрнутой свайп-панели «Ближайшие АЗС» (заголовок + первая карточка) */
}
/* ---- Dark (default) — палитра gdebenz (редизайн): глубокий сине-чёрный + glass ---- */
html.dark{
  --bg:#090d14;
  --bg-2:#0c121b;
  --panel:rgba(14,21,31,.72);
  --panel-solid:#121b26;
  --card:#18222f;
  --text:#eaf0f6;
  --muted:#93a1b3;
  --muted-2:#5c6b7e;
  --border:rgba(255,255,255,.08);
  --border-2:rgba(255,255,255,.14);
  --chip:rgba(255,255,255,.05);
  --chip-bd:rgba(255,255,255,.12);
  --cluster-inner:#121b26;
  --shadow:0 12px 34px rgba(0,0,0,.55);
  --fab:rgba(14,21,31,.74);
  --tabbar:rgba(9,13,20,.85);
}
/* ---- Light ---- */
html:not(.dark){
  --bg:#e8ecf1;
  --bg-2:#e3e8f0;
  --panel:rgba(255,255,255,.82);
  --panel-solid:#ffffff;
  --card:#ffffff;
  --text:#101826;
  --muted:#54637a;
  --muted-2:#8a98ab;
  --border:rgba(15,23,42,.09);
  --border-2:rgba(15,23,42,.16);
  --chip:#f1f4f8;
  --chip-bd:rgba(15,23,42,.08);
  --cluster-inner:#ffffff;
  --shadow:0 12px 34px rgba(15,23,42,.14);
  --fab:rgba(255,255,255,.78);
  --tabbar:rgba(255,255,255,.88);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;}
body{
  font-family:var(--font);
  background:var(--bg); color:var(--text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
#map{position:fixed;inset:0;background:var(--bg);z-index:0;}
.leaflet-container{background:var(--bg);font-family:var(--font);}
.leaflet-control-attribution{
  background:var(--panel)!important;color:var(--muted)!important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:10px!important;padding:2px 6px!important;border-radius:8px 0 0 0;
  margin:0!important;
}
.leaflet-control-attribution a{color:var(--muted)!important;}

/* ===== Top panel ===== */
.topwrap{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:calc(env(safe-area-inset-top) + 10px) 12px 0;
  pointer-events:none;
}
.topbar{
  pointer-events:auto;
  background:var(--panel);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.topbar__row{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 12px 11px 14px;gap:10px;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:-.02em;white-space:nowrap;}
.brand .accent{color:var(--accent);}
.brand .dim{color:var(--muted);font-weight:600;}
/* Группа действий справа в аппбаре: пилюля города + поиск + тема. */
.topbar__actions{display:flex;align-items:center;gap:8px;flex:none;}
.citypill{height:38px;padding:0 11px;border-radius:12px;background:var(--chip);border:1px solid var(--chip-bd);
  display:inline-flex;align-items:center;gap:6px;color:var(--text);font-size:14px;font-weight:700;
  cursor:pointer;white-space:nowrap;transition:transform .12s;}
.citypill:active{transform:scale(.95);}
.citypill .ico{width:15px;height:15px;color:var(--accent);}
.citypill .chev{width:15px;height:15px;color:var(--muted);}
.icon-btn{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  border:1px solid var(--chip-bd);background:var(--chip);color:var(--text);
  border-radius:50%;font-size:18px;cursor:pointer;transition:transform .12s,background .2s;
}
.icon-btn:active{transform:scale(.92);}
.icon-btn .ico{width:18px;height:18px;}

.chips{
  display:flex;gap:8px;overflow-x:auto;padding:0 12px 12px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.chips::-webkit-scrollbar{display:none;}

/* Панель инструментов под аппбаром: «Фильтры» (слева) + иконка TG-канала + «На экран» (справа). */
.topbar__tools{display:flex;align-items:center;gap:8px;padding:0 12px 11px;}
.topbar__tools > .tool-btn:first-child{margin-right:auto;} /* «Фильтры» влево, остальное вправо */
.tool-btn--tg{padding:0;width:34px;justify-content:center;color:var(--accent);} /* иконка TG-канала */
.tool-btn{height:34px;padding:0 13px;border-radius:11px;background:var(--chip);border:1px solid var(--chip-bd);
  color:var(--text);display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;
  cursor:pointer;white-space:nowrap;transition:transform .12s,background .18s,border-color .18s,color .18s;}
.tool-btn:active{transform:scale(.95);}
.tool-btn .ico{width:16px;height:16px;}
.tool-btn[aria-expanded="true"]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);}
/* [hidden] должен побеждать display:inline-flex/inline-block выше (иначе кнопка/точка всегда видны). */
.tool-btn[hidden]{display:none;}
.tool-btn__dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 7px var(--accent);}
.tool-btn__dot[hidden]{display:none;}
.tool-btn--install{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft);}

/* Чипы фильтра — сворачиваемая панель (скрыта по умолчанию, раскрывается «Фильтрами»). */
.chips--panel{display:none;flex-wrap:wrap;overflow:visible;padding:2px 12px 12px;}
.chips--panel.chips--open{display:flex;}
.chip{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  height:38px;padding:0 15px;border-radius:19px;
  background:var(--chip);border:1px solid var(--chip-bd);color:var(--text);
  font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:transform .12s,background .18s,border-color .18s,color .18s;
}
.chip:active{transform:scale(.94);}
.chip.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);}
.chip .tick{font-size:11px;opacity:.9;}
/* Подпись группы чипов (напр. «Очередь») — на всю ширину панели, перенос перед группой. */
.chips-glabel{flex-basis:100%;width:100%;font-size:12px;font-weight:700;color:var(--muted);margin:8px 2px 2px;}

/* ===== Onboarding ===== */
.onboard{
  pointer-events:auto;
  margin-top:8px;display:flex;align-items:center;gap:10px;
  background:var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow);
  padding:10px 8px 10px 13px;font-size:12.5px;color:var(--muted);line-height:1.35;
  transition:opacity .3s,transform .3s;
}
.onboard .oi{font-size:15px;flex:none;}
.onboard.hide{opacity:0;transform:translateY(-8px);pointer-events:none;}
.onboard__x{margin-left:auto;flex:none;width:28px;height:28px;border-radius:8px;border:none;background:var(--chip);color:var(--muted);font-size:13px;cursor:pointer;}

/* ===== Legend ===== */
.legend{
  position:fixed;left:12px;bottom:calc(env(safe-area-inset-bottom) + var(--tabbar-h) + var(--peek-h) + 14px);z-index:900;
  background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow);
  padding:9px 11px;display:flex;flex-direction:column;gap:6px;
}
.legend__row{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text);font-weight:500;}
.dot{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.14);}

/* ===== FABs ===== */
/* Контрол-стек справа (макет): glass-квадраты — зум, геолокация, обновление. */
.fabs{
  position:fixed;right:14px;bottom:calc(env(safe-area-inset-bottom) + var(--tabbar-h) + var(--peek-h) + 14px);z-index:900;
  display:flex;flex-direction:column;gap:9px;
}
.fab{
  width:46px;height:46px;border-radius:14px;border:1px solid var(--border-2);
  background:var(--fab);color:var(--text);box-shadow:var(--shadow);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-size:20px;cursor:pointer;display:grid;place-items:center;transition:transform .14s;
}
.fab:active{transform:scale(.9);}
.fab.spin{animation:spin .7s ease;}
.fab--locate{color:var(--accent);}  /* геолокация — зелёная иконка (как в макете) */
@keyframes spin{to{transform:rotate(360deg);}}

/* ===== Markers — неоновые pin-«колонки» (макет gdebenz) =====
   Каплевидный pin со SVG-глифом бензоколонки, цвет --c берётся ТОЛЬКО из
   статус-whitelist (statusColor в app.js). «Неон» = многослойное цветное
   drop-shadow-свечение того же статус-цвета вокруг пина. */
.gp-pin{
  cursor:pointer;line-height:0;
  filter:drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 9px var(--c)) drop-shadow(0 4px 5px rgba(0,0,0,.5));
  transition:transform .14s ease,filter .2s ease;will-change:transform,filter;
}
.gp-pin svg{display:block;overflow:visible;}
.gp-pin .gp-pin__body{stroke:rgba(255,255,255,.92);stroke-width:1.3;}
.gp-pin .gp-pin__glyph{stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none;}
.gp-pin:hover{
  transform:translateY(-2px) scale(1.08);
  filter:drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 15px var(--c)) drop-shadow(0 6px 7px rgba(0,0,0,.55));
}
.gp-cluster{
  border-radius:50%;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 0 10px rgba(34,197,94,.18),0 4px 12px rgba(0,0,0,.5);border:2.5px solid rgba(255,255,255,.92);
  transition:transform .12s;
}
.gp-cluster:hover{transform:scale(1.07);}
.gp-cluster__inner{
  border-radius:50%;background:var(--cluster-inner);color:var(--text);
  display:grid;place-items:center;font-weight:700;
}

/* ===== Уведомление о Telegram-канале (одноразовое, снизу с крестиком) ===== */
.tgbar{
  position:fixed;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom) + var(--tabbar-h) + 8px);
  z-index:1260;display:flex;align-items:center;gap:10px;
  background:var(--panel-solid);border:1px solid var(--accent-line);border-radius:14px;
  padding:10px 12px;box-shadow:var(--shadow);
}
.tgbar[hidden]{display:none;}
.tgbar__ico{width:30px;height:30px;flex:none;border-radius:9px;background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;}
.tgbar__ico svg{width:17px;height:17px;}
.tgbar__txt{flex:1;min-width:0;font-size:12.5px;color:var(--text);line-height:1.3;}
.tgbar__go{flex:none;color:var(--accent);font-weight:800;font-size:13px;text-decoration:none;
  padding:6px 12px;border-radius:9px;background:var(--accent-soft);border:1px solid var(--accent-line);}
.tgbar__x{flex:none;background:transparent;border:0;color:var(--muted);font-size:15px;cursor:pointer;
  padding:4px 6px;line-height:1;}

/* ===== Свайп-панель «Ближайшие АЗС» (peek над таб-баром, раскрытие свайпом/тапом) ===== */
.nearby{
  position:fixed;left:0;right:0;z-index:1200;
  bottom:calc(env(safe-area-inset-bottom) + var(--tabbar-h));
  height:62vh;display:flex;flex-direction:column;
  background:var(--panel-solid);border:1px solid var(--border);border-bottom:0;
  border-radius:20px 20px 0 0;box-shadow:0 -12px 34px rgba(0,0,0,.5);
  transform:translateY(calc(62vh - var(--peek-h)));   /* свёрнуто: видно только заголовок (--peek-h) */
  transition:transform .28s ease;touch-action:none;
}
.nearby.open{transform:translateY(0);}
.nearby__head{
  flex:none;height:48px;width:100%;display:flex;align-items:center;gap:9px;
  padding:0 16px;background:transparent;border:0;cursor:pointer;color:var(--text);
  font-family:var(--font);position:relative;
}
.nearby__grip{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:40px;height:5px;
  border-radius:3px;background:var(--muted);opacity:.4;}
.nearby__ico{width:17px;height:17px;color:var(--accent);flex:none;}
.nearby__title{font-size:15px;font-weight:800;letter-spacing:-.2px;}
.nearby__count{font-size:13px;color:var(--muted);font-weight:600;}
.nearby__chev{margin-left:auto;width:20px;height:20px;color:var(--muted);transition:transform .28s;}
.nearby.open .nearby__chev{transform:rotate(180deg);}
.nearby__body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;
  padding:2px 14px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;}

/* ===== Bottom sheet ===== */
.backdrop{
  position:fixed;inset:0;z-index:1500;background:rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .28s;
}
.backdrop.show{opacity:1;pointer-events:auto;}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:1600;
  background:var(--panel-solid);
  border-radius:22px 22px 0 0;
  box-shadow:0 -12px 40px rgba(0,0,0,.4);
  border-top:1px solid var(--border);
  transform:translateY(115%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  padding:0 18px calc(env(safe-area-inset-bottom) + 18px);
  will-change:transform;touch-action:none;
  /* Высота карточки ограничена вьюпортом; содержимое (длинная история отметок) скроллит body. */
  max-height:90vh;display:flex;flex-direction:column;
}
.sheet.open{transform:translateY(0);}
.sheet__handle{width:100%;padding:11px 0 6px;display:grid;place-items:center;cursor:grab;flex:none;}
.sheet__handle span{width:42px;height:5px;border-radius:3px;background:var(--muted);opacity:.45;}
/* Прокрутка содержимого карточки. touch-action:pan-y — чтобы тач-скролл работал,
   несмотря на touch-action:none у .sheet (нужного для drag-to-dismiss за ручку). */
.sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;}

.st-head{display:flex;align-items:flex-start;gap:12px;}
.st-logo{
  width:48px;height:48px;border-radius:13px;flex:none;display:grid;place-items:center;
  font-size:23px;font-weight:800;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
/* Реальный логотип бренда внутри белой плитки (st-logo / stn-card__logo). */
.st-logo img,.stn-card__logo img{width:80%;height:80%;object-fit:contain;display:block;}
.st-brand{font-size:21px;font-weight:800;letter-spacing:-.4px;line-height:1.1;}
.st-addr{font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.3;}

.st-badge{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  padding:8px 13px;border-radius:11px;font-size:14px;font-weight:700;
}
.st-badge .bdot{width:9px;height:9px;border-radius:50%;}
.st-badge .upd{font-weight:500;font-size:12.5px;opacity:.85;}

.st-section-label{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin:16px 0 9px;}
.fuel-list{display:flex;flex-wrap:wrap;gap:8px;}
.fuel-empty{font-size:13.5px;color:var(--muted);}
.fuel-pill{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;
  border-radius:10px;background:var(--chip);border:1px solid var(--border);
  font-size:13.5px;font-weight:600;
}
.fuel-pill .fdot{width:8px;height:8px;border-radius:50%;background:var(--unknown);}
/* Зелёная подсветка «доступного» топлива (когда краудсорс-статус станции — есть/лимит). */
.fuel-pill--on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);}
.fuel-pill--on .fdot{background:var(--accent);}
.fuel-pill.off{opacity:.4;}
.fuel-pill.off span:last-child{text-decoration:line-through;}

/* Цены ₽/л + тренд (план 06-03, D-06/D-07) */
.pr-list{display:flex;flex-direction:column;gap:6px;}
.pr-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;border-radius:10px;background:var(--chip);
  border:1px solid var(--border);font-size:14px;
}
.pr-fuel{font-weight:600;color:var(--text);}
.pr-val{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;}
.pr-trend{margin-left:6px;font-weight:700;}
.pr-trend--up{color:var(--no);}    /* рост цены — красный */
.pr-trend--down{color:var(--ok);}  /* падение цены — зелёный */
.pr-trend--flat{color:var(--muted);}
.pr-note{margin-top:6px;font-size:12px;color:var(--muted);font-style:italic;}

.st-limit{
  display:flex;align-items:center;gap:8px;margin-top:13px;padding:10px 13px;
  background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);
  border-radius:11px;font-size:13.5px;font-weight:600;color:var(--text);
}
.st-limit b{color:var(--limit);}

.st-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.btn-route{
  height:54px;border:none;border-radius:14px;background:var(--accent);color:var(--accent-ink);
  font-size:16.5px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 8px 22px var(--accent-soft);transition:transform .12s;
}
.btn-route:active{transform:scale(.98);}
/* CTA вклада — всегда интерактивна (добавить отметку / открыть в Telegram / согласие /
   верификация номера). Outlined-акцент, чтобы отличаться от primary-кнопки маршрута. */
.btn-add{
  height:48px;border:1.5px solid var(--accent);border-radius:14px;background:transparent;
  color:var(--accent);font-size:15px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s,background .15s;
}
.btn-add:hover{background:rgba(34,197,94,.1);}
.btn-add:active{transform:scale(.98);}

/* ===== Toast ===== */
.toast{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + var(--tabbar-h) + 90px);z-index:2000;
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  background:var(--panel-solid);color:var(--text);border:1px solid var(--border);
  box-shadow:var(--shadow);padding:10px 16px;border-radius:30px;font-size:13.5px;font-weight:600;
  transition:opacity .25s,transform .25s;white-space:nowrap;
}
.toast.show{opacity:1;transform:translate(-50%,0);}

.you-dot{width:18px;height:18px;border-radius:50%;background:var(--user);border:3px solid #fff;box-shadow:0 0 0 6px rgba(59,130,246,.25),0 2px 6px rgba(0,0,0,.4);}

/* ════════════════════════════════════════════════════════════════════════════
   РЕДИЗАЙН (gdebenz): нижний таб-бар, view-контейнеры, дашборд «Ситуация».
   SVG-иконки — inline, наследуют currentColor. Сохранён весь DOM-контракт app.js.
   ════════════════════════════════════════════════════════════════════════════ */

/* SVG-иконки: line-стиль, цвет от currentColor (тема/состояние родителя). */
.ico{width:22px;height:22px;display:block;flex:none;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ico--sm{width:18px;height:18px;}
.ico--fill{fill:currentColor;stroke:none;}
.brand .pump{width:34px;height:34px;border-radius:11px;flex:none;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;}
.brand .pump .ico{width:20px;height:20px;}
.fab .ico{width:21px;height:21px;}
.btn-route .ico,.btn-add .ico{width:19px;height:19px;}

/* ===== Нижний таб-бар (3 вкладки) ===== */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:1200;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;
  background:var(--tabbar);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-top:1px solid var(--border);
  box-shadow:0 -8px 30px rgba(0,0,0,.28);
}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:none;background:transparent;cursor:pointer;color:var(--muted);
  font-family:var(--font);font-size:11px;font-weight:600;
  transition:color .18s,transform .12s;-webkit-tap-highlight-color:transparent;
}
.tab:active{transform:scale(.94);}
.tab .ico{width:24px;height:24px;}
.tab__lbl{line-height:1;}
.tab.on{color:var(--accent);}
.tab.on .tab__lbl{font-weight:700;}

/* ===== View-контейнеры (оверлеи над картой; «Карта» = пустой, контролы поверх) ===== */
/* «Ситуация» и «Мои АЗС» — прокручиваемые панели поверх живой карты. z-index 1100:
   выше topwrap(1000), ниже sheet(1600)/modal(1700)/toast(2000)/tabbar(1200… см. ниже). */
.view{
  position:fixed;left:0;right:0;top:0;
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  z-index:1100;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(env(safe-area-inset-top) + 14px) 14px 20px;
}
.view[hidden]{display:none;}
.view__title{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:800;
  letter-spacing:-.4px;margin:2px 2px 14px;}
.view__title .ico{color:var(--accent);width:22px;height:22px;}
.view__sub{font-size:12.5px;color:var(--muted);font-weight:600;margin:-10px 2px 14px;}

/* tabbar над оверлеями, но карта/sheet работают: tabbar z 1200, view 1100, sheet 1600. */

/* ===== Дашборд «Ситуация» ===== */
.sit-hero{
  background:var(--panel-solid);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);padding:18px;display:flex;align-items:center;gap:18px;margin-bottom:14px;
}
/* Донат «% с топливом» — conic-gradient по --pct (0..100), задаётся инлайн из JS. */
.sit-donut{
  --pct:0;width:104px;height:104px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--ok) calc(var(--pct)*1%), color-mix(in srgb,var(--text) 10%,transparent) 0);
}
.sit-donut__hole{
  width:78px;height:78px;border-radius:50%;background:var(--panel-solid);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.sit-donut__pct{font-size:24px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;}
.sit-donut__cap{font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);}
.sit-hero__main{flex:1;min-width:0;}
.sit-hero__title{font-size:16px;font-weight:800;letter-spacing:-.3px;}
.sit-hero__sub{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.35;}

/* Полоса-разбивка по статусам (стек). */
.sit-bar{display:flex;height:10px;border-radius:6px;overflow:hidden;margin-bottom:16px;
  background:color-mix(in srgb,var(--text) 8%,transparent);border:1px solid var(--border);}
.sit-bar__seg{height:100%;}

.sit-card{background:var(--panel-solid);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);padding:14px 16px;margin-bottom:14px;}
.sit-card__lbl{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);margin:0 0 11px;}

/* Строки разбивки по статусам: точка + подпись + мини-бар + число. */
.sit-row{display:flex;align-items:center;gap:10px;margin:9px 0;}
.sit-row__dot{width:10px;height:10px;border-radius:50%;flex:none;}
.sit-row__lbl{font-size:14px;font-weight:600;width:84px;flex:none;}
.sit-row__track{flex:1;height:8px;border-radius:5px;background:color-mix(in srgb,var(--text) 8%,transparent);overflow:hidden;}
.sit-row__fill{height:100%;border-radius:5px;}
.sit-row__num{font-size:15px;font-weight:800;width:34px;text-align:right;flex:none;font-variant-numeric:tabular-nums;}

/* Сетка «Наличие по маркам». */
.sit-fuels{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
.sit-fuel{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 13px;border-radius:12px;background:var(--chip);border:1px solid var(--border);}
.sit-fuel__name{font-size:14px;font-weight:700;}
.sit-fuel__badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  padding:4px 9px;border-radius:9px;}
.sit-fuel__badge .fb-dot{width:7px;height:7px;border-radius:50%;}

/* Плашка «обстановка одним взглядом». */
.sit-note{display:flex;align-items:flex-start;gap:10px;padding:13px 15px;border-radius:13px;
  background:var(--chip);border:1px solid var(--border);font-size:13px;color:var(--text);line-height:1.45;}
.sit-note .ico{color:var(--accent);margin-top:1px;}
.sit-loading{color:var(--muted);font-size:14px;padding:20px 2px;text-align:center;}

/* ===== Вкладка «Мои АЗС» (переиспользует .fav-section-label/.fav-list/.fav-item из index.html) ===== */
#view-fav .fav-section-label:first-child{margin-top:2px;}

/* ════════════════════════════════════════════════════════════════════════════
   НОВАЯ «СИТУАЦИЯ» (макет): большой % + 4 стат-карты + лента «Есть бензин рядом».
   Карточка станции .stn-card — общая для «Ситуации», «Мои АЗС» и «Ближайшие».
   ════════════════════════════════════════════════════════════════════════════ */
.sit-head{display:flex;align-items:baseline;gap:9px;margin:8px 2px 0;flex-wrap:wrap;}
.sit-head__pct{font-size:38px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;}
.sit-head__lbl{font-size:16px;font-weight:700;color:var(--muted);}
.sit-metaline{margin:6px 2px 0;color:var(--muted-2,var(--muted));font-size:13px;}
.sit-stats{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sit-stat{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 14px;}
.sit-stat__top{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px;font-weight:600;}
.sit-stat__dot{width:8px;height:8px;border-radius:50%;flex:none;}
.sit-stat__num{font-size:23px;font-weight:800;margin-top:5px;font-variant-numeric:tabular-nums;}
.sit-sectit{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:24px 2px 12px;}
.sit-sectit__t{font-size:20px;font-weight:800;letter-spacing:-.02em;}

/* «Мои АЗС»: статистика устройства (реальные данные). */
.mystat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 6px;}
.mystat__box{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 8px;text-align:center;}
.mystat__num{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1;}
.mystat__lbl{font-size:11.5px;color:var(--muted);margin-top:5px;}

/* «Мои АЗС»: карточка «Предложить новую АЗС». */
.suggest-card{display:flex;align-items:center;gap:13px;width:100%;text-align:left;margin-top:16px;
  background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;cursor:pointer;
  color:var(--text);font-family:var(--font);text-decoration:none;transition:transform .12s,border-color .18s;}
.suggest-card:active{transform:scale(.99);}
.suggest-card__ico{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);}
.suggest-card__ico svg{width:20px;height:20px;}
.suggest-card__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.suggest-card__t{font-size:15px;font-weight:800;letter-spacing:-.2px;}
.suggest-card__p{font-size:12.5px;color:var(--muted);}
.suggest-card__chev{flex:none;color:var(--muted);width:18px;height:18px;}

/* «Мои АЗС»: футер (канал в Telegram + авторство RoDev.pro). */
.my-foot{margin-top:22px;padding-bottom:8px;text-align:center;display:flex;flex-direction:column;gap:8px;}
.my-foot>a{color:var(--accent);text-decoration:none;font-size:13.5px;font-weight:700;}
.my-foot__by{color:var(--muted-2,var(--muted));font-size:12px;}
.my-foot__by a{color:var(--muted-2,var(--muted));text-decoration:none;border-bottom:1px dotted currentColor;}
.my-foot__by a:hover{color:var(--accent);}

/* Карточка станции — лента/избранное/ближайшие (макет). Логотип-плитка + статус-пилюля. */
.stn-card{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--border);border-radius:16px;padding:13px;
  cursor:pointer;color:var(--text);transition:transform .12s,border-color .18s;font-family:var(--font);}
.stn-card:active{transform:scale(.99);}
.stn-card__logo{width:50px;height:50px;border-radius:13px;flex:none;display:grid;place-items:center;
  font-size:23px;font-weight:800;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);}
.stn-card__main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;}
.stn-card__name{max-width:100%;font-size:16.5px;font-weight:800;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stn-card__pill{display:inline-flex;align-items:center;gap:6px;margin-top:5px;padding:4px 9px;border-radius:8px;font-size:12.5px;font-weight:700;}
.stn-card__pill .pdot{width:7px;height:7px;border-radius:50%;flex:none;}
.stn-card__sub{margin-top:6px;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stn-card__right{flex:none;display:flex;align-items:center;gap:6px;}
.stn-card__dist{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;}
.stn-card__chev{flex:none;color:var(--muted-2,var(--muted));width:18px;height:18px;}
.stn-list{display:flex;flex-direction:column;gap:12px;}
.stn-empty{color:var(--muted);font-size:13.5px;padding:6px 2px;}
/* Заголовки секций в поиске («Города» / «Заправки»). */
.srch-sec{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);padding:14px 4px 7px;}
.srch-sec:first-child{padding-top:4px;}

/* ===== Интро-модалка «безопасный сервис» (макет) ===== */
.intro{position:fixed;inset:0;z-index:1800;display:flex;align-items:flex-end;justify-content:center;
  padding:0 14px calc(env(safe-area-inset-bottom) + 26px);background:rgba(0,0,0,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.intro[hidden]{display:none;}
.intro__card{position:relative;width:100%;max-width:380px;background:var(--panel-solid);
  border:1px solid var(--border);border-radius:24px;padding:18px;box-shadow:var(--shadow);}
.intro__logo{width:62px;height:62px;border-radius:18px;background:var(--accent-soft);
  border:1px solid var(--accent-line);display:flex;align-items:center;justify-content:center;
  color:var(--accent);margin:2px auto 16px;}
.intro__logo .ico{width:32px;height:32px;}
.intro__inner{background:var(--card);border:1px solid var(--accent-line);border-radius:16px;
  padding:15px;display:flex;gap:13px;}
.intro__shield{width:38px;height:38px;border-radius:11px;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;color:var(--accent);flex:none;}
.intro__shield .ico{width:20px;height:20px;}
.intro__t{font-size:15.5px;font-weight:800;}
.intro__p{color:var(--muted);font-size:13.5px;line-height:1.5;margin-top:6px;}
.intro__ok{margin-top:14px;width:100%;height:46px;border-radius:12px;background:var(--accent);
  border:none;color:var(--accent-ink);font-size:14.5px;font-weight:800;cursor:pointer;}
.intro__skip{margin:12px auto 0;display:block;background:none;border:none;color:var(--muted-2,var(--muted));
  font-size:13.5px;font-weight:600;cursor:pointer;}

/* ===== Фильтр-тоггл «Есть бензин» (как у gdebenz) — первый чип строки фильтра ===== */
.chip--toggle{display:inline-flex;align-items:center;gap:8px;}
.chip--toggle .gdot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none;transition:background .18s,box-shadow .18s;}
.chip--toggle.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);}
.chip--toggle.on .gdot{background:var(--accent);box-shadow:0 0 8px var(--accent);}

/* ===== Карта «Помогите сервису» в «Ситуации» (поделиться + на экран) ===== */
.help-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-top:18px;}
.help-card__t{font-size:16px;font-weight:800;letter-spacing:-.02em;}
.help-card__p{color:var(--muted);font-size:13px;margin-top:4px;line-height:1.45;}
.help-card__row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.help-card__share{flex:1;min-width:150px;height:46px;border-radius:12px;background:var(--accent);border:none;color:var(--accent-ink);font-weight:800;font-size:14.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}
.help-card__install{flex:1;min-width:140px;height:46px;border-radius:12px;background:var(--chip);border:1px solid var(--border-2);color:var(--text);font-weight:700;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}
.help-card__install[hidden]{display:none;}
.help-card__install .ico,.help-card__share .ico{width:18px;height:18px;}

/* ===== Шторка «Поделиться» (как у gdebenz) ===== */
.share{position:fixed;inset:0;z-index:1800;display:flex;align-items:flex-end;justify-content:center;
  padding:0 12px calc(env(safe-area-inset-bottom) + 16px);background:rgba(0,0,0,.55);}
.share[hidden]{display:none;}
.share__card{position:relative;width:100%;max-width:440px;background:var(--panel-solid);border:1px solid var(--border-2);
  border-radius:24px;padding:18px;box-shadow:var(--shadow);}
.share__head{display:flex;gap:13px;align-items:flex-start;}
.share__ico{width:46px;height:46px;border-radius:13px;background:var(--accent-soft);border:1px solid var(--accent-line);
  color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none;}
.share__ico .ico{width:24px;height:24px;}
.share__t{font-size:19px;font-weight:800;letter-spacing:-.02em;}
.share__p{color:var(--muted);font-size:13.5px;margin-top:3px;line-height:1.45;padding-right:30px;}
.share__x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:var(--chip);
  border:1px solid var(--border);color:var(--text);cursor:pointer;display:grid;place-items:center;}
.share__x .ico{width:16px;height:16px;}
.share__main{margin-top:16px;width:100%;height:52px;border-radius:14px;background:var(--accent);border:none;
  color:var(--accent-ink);font-size:15.5px;font-weight:800;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:9px;box-shadow:0 8px 22px var(--accent-soft);}
.share__main .ico{width:19px;height:19px;}
.share__nets{margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.share__net{height:54px;border-radius:13px;background:var(--card);border:1px solid var(--border);color:var(--text);
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14px;}
.share__net .nico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;
  font-size:11px;font-weight:800;flex:none;letter-spacing:-.02em;}
.share__copy{margin-top:10px;width:100%;height:50px;border-radius:13px;background:var(--card);border:1px solid var(--border);
  color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14px;}
.share__copy .ico{width:18px;height:18px;}
.share__note{display:flex;align-items:flex-start;gap:9px;margin-top:14px;color:var(--muted);font-size:12.5px;line-height:1.4;}
.share__note .ico{width:16px;height:16px;color:var(--accent);flex:none;margin-top:1px;}
.share__skip{margin:12px auto 2px;display:block;background:none;border:none;color:var(--muted-2,var(--muted));
  font-size:13.5px;font-weight:600;cursor:pointer;}

/* ===== Богатая карточка статуса (как у gdebenz): статус + N подтверждений + кнопки ===== */
.status-card{border-radius:18px;padding:16px;border:1px solid;margin-top:14px;}
.status-card .sc-top{display:flex;gap:14px;align-items:flex-start;}
.status-card .sc-ico{width:54px;height:54px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:var(--bg-2);border:1px solid;}
.status-card .sc-ico svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.status-card .sc-main{flex:1;min-width:0;}
.status-card .sc-label{font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1.1;}
.status-card .sc-sub{color:var(--muted);font-size:13px;margin-top:4px;}
.status-card .sc-chip{display:inline-block;margin-top:9px;padding:4px 9px;border-radius:8px;font-size:11.5px;font-weight:700;}
.status-card .sc-chip--high{background:rgba(34,197,94,.13);border:1px solid rgba(34,197,94,.32);color:#22c55e;}
.status-card .sc-chip--medium{background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.32);color:#f59e0b;}
.status-card .sc-chip--low{background:rgba(148,163,184,.14);border:1px solid rgba(148,163,184,.3);color:var(--muted);}
.status-card .sc-divider{height:1px;background:var(--border);margin:14px 0 12px;}
.status-card .sc-q{color:var(--muted);font-size:13px;margin-bottom:10px;}
.sc-actions{display:flex;gap:10px;}
.sc-confirm,.sc-changed{flex:1;height:50px;border-radius:13px;font-size:13.5px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;transition:transform .12s;font-family:var(--font);}
.sc-confirm:active,.sc-changed:active{transform:scale(.97);}
.sc-confirm{background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);}
.sc-confirm.done{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.sc-confirm:disabled{cursor:default;}
.sc-changed{background:var(--chip);border:1px solid var(--chip-bd);color:var(--text);}

/* ===== Футер со ссылками (О сервисе / Конфиденциальность / Условия) ===== */
.app-foot{margin-top:18px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  color:var(--muted-2,var(--muted));font-size:12.5px;}
.app-foot a{color:var(--muted-2,var(--muted));text-decoration:none;}
.app-foot a:hover{color:var(--accent);}

/* ===== Оверлей поиска (макет) ===== */
.search-ov{position:fixed;inset:0;z-index:1750;background:var(--bg);display:flex;flex-direction:column;}
.search-ov[hidden]{display:none;}
.search-ov__bar{flex:none;display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 12px;border-bottom:1px solid var(--border);}
.search-ov__field{flex:1;display:flex;align-items:center;gap:9px;height:46px;border-radius:13px;
  background:var(--chip);border:1px solid var(--border);padding:0 13px;}
.search-ov__field .ico{width:18px;height:18px;color:var(--muted);flex:none;}
.search-ov__input{flex:1;background:none;border:none;color:var(--text);font-size:15px;outline:none;font-family:var(--font);}
.search-ov__cancel{flex:none;background:none;border:none;color:var(--accent);font-size:14.5px;font-weight:700;cursor:pointer;}
.search-ov__list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:12px 14px calc(env(safe-area-inset-bottom) + 16px);display:flex;flex-direction:column;gap:11px;}

/* Пункт города в пикере (мультигород). */
.city-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);
  border:1px solid var(--border);border-radius:14px;padding:14px;cursor:pointer;color:var(--text);
  font-family:var(--font);font-size:16px;font-weight:700;transition:transform .12s;}
.city-item:active{transform:scale(.99);}
.city-item .ico{width:20px;height:20px;color:var(--accent);flex:none;}
.city-item.on{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent);}
.city-item .ck{margin-left:auto;color:var(--accent);width:18px;height:18px;}

/* ════════════════════════════════════════════════════════════════════════════
   ПК-версия (десктоп): левый сайдбар (аппбар + панели + таб-бар) + карта справа.
   Мобайл (<1000px) НЕ затрагивается — все правила только внутри media-query.
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width:1000px){
  :root{ --side-w:384px; }

  /* Фон сайдбара под всеми панелями. */
  body::before{ content:'';position:fixed;left:0;top:0;bottom:0;width:var(--side-w);
    background:var(--bg-2);border-right:1px solid var(--border);z-index:1; }

  /* Карта — справа от сайдбара на всю оставшуюся ширину. */
  #map{ left:var(--side-w);width:auto; }

  /* Аппбар — вверху сайдбара (вся ширина сайдбара). */
  .topwrap{ left:0;right:auto;width:var(--side-w);padding:14px 14px 0;z-index:6; }
  .onboard{ display:none; } /* подсказку на десктопе не показываем — экономим высоту сайдбара */

  /* «Ближайшие АЗС» — статичная панель сайдбара (всегда раскрыта, без peek/drag). */
  .nearby{ left:0;right:auto;width:var(--side-w);top:148px;bottom:calc(var(--tabbar-h) + 8px);
    height:auto;transform:none!important;border:0;border-radius:0;box-shadow:none;background:transparent;
    z-index:2;transition:none; }
  .nearby__grip,.nearby__chev{ display:none; }
  .nearby__head{ cursor:default;height:auto;padding:6px 18px 8px; }
  .nearby__body{ padding:2px 16px 16px; }

  /* Контролы карты — на самой карте справа (таб-бара на стороне карты нет). */
  .fabs{ right:18px;bottom:22px; }
  .legend{ display:none; } /* на десктопе легенду прячем (цвета понятны по карточкам) */

  /* «Ситуация» / «Мои АЗС» — занимают сайдбар, карта остаётся видимой справа. */
  #view-situation,#view-fav{ left:0;right:auto;width:var(--side-w);bottom:var(--tabbar-h);
    padding:18px 16px 20px;z-index:5; }

  /* Таб-бар — внизу сайдбара, ПОВЕРХ открытой карточки (иначе скрыт шторкой z1600). */
  .tabbar{ left:0;right:auto;width:var(--side-w);z-index:1650; }

  /* Карточка станции + поиск/город — в пределах сайдбара (а не поверх карты). bottom:0 (как на мобайле) —
     закрытая шторка translateY(115%) уходит полностью (фикс «зависшей» полоски, скрин 453). */
  .sheet{ left:0;right:auto;width:var(--side-w);box-shadow:6px 0 30px rgba(0,0,0,.4); }
  .sheet__body{ padding-bottom:calc(var(--tabbar-h) + 10px); } /* контент над таб-баром сайдбара */
  .backdrop{ left:var(--side-w);width:auto; } /* затемняем только карту, не сайдбар */
  .search-ov{ left:0;right:auto;width:var(--side-w);border-right:1px solid var(--border); }
  .tgbar{ left:10px;right:auto;width:calc(var(--side-w) - 20px); } /* баннер в пределах сайдбара */
}