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

/* Onest — self-host (S0), вариативный woff2 (вес 400–800), 4 субсета. Заменяет Google Fonts:
   PWA не зависит от внешней сети, шрифт кэшируется SW (best-effort). font-display:swap. */
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/onest-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/onest-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/onest-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/onest-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  /* Статусы (кит S0): есть / мало / нет / очередь / инфо */
  --ok:#22C55E; --limit:#F2C037; --no:#F0493D; --queue:#F59E0B; --info:#4F86F7; --unknown:#9ca3af;
  /* Акцент бренда — ЗЕЛЁНЫЙ (#22C55E). */
  --accent:#22c55e; --accent-2:#16a34a;
  --accent-soft:rgba(34,197,94,.15);
  --accent-line:rgba(34,197,94,.45);
  --accent-ink:#04210f;        /* тёмный текст на зелёной кнопке */
  --user:#3b82f6;              /* точка геолокации пользователя — синяя (как в макете) */
  --font:'Onest','Manrope','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'PingFang SC','Noto Sans',sans-serif;
  /* Радиусы (кит): мелкое → шторки */
  --r:16px; --r-1:12px; --r-2:14px; --r-3:16px; --r-4:20px; --r-pill:999px;
  /* Шкала отступов */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;
  /* Мягкие свечения статусов (узкий ореол, не «жирный») */
  --glow-ok:0 0 0 4px color-mix(in srgb,var(--ok) 13%,transparent),0 4px 14px color-mix(in srgb,var(--ok) 32%,transparent);
  --glow-no:0 0 0 4px color-mix(in srgb,var(--no) 13%,transparent),0 4px 14px color-mix(in srgb,var(--no) 32%,transparent);
  --glow-limit:0 0 0 4px color-mix(in srgb,var(--limit) 13%,transparent),0 4px 14px color-mix(in srgb,var(--limit) 32%,transparent);
  /* ЗАРЕЗЕРВИРОВАНО под игровой слой (S1–S3) — НЕ применять на карте/карточках */
  --neon-glow:0 0 12px rgba(34,197,94,.65),0 0 30px rgba(34,197,94,.35);
  --badge-gold:linear-gradient(145deg,#F6D36B,#C9972E);
  --level-grad:linear-gradient(135deg,#22C55E,#0EA5E9);
  --tabbar-h:62px;  /* высота нижнего таб-бара (редизайн) — отступ для legend/fabs/toast/views */
  --peek-h:136px;   /* высота свёрнутой свайп-панели «Ближайшие АЗС» (заголовок + первая карточка) */
}
/* ---- Тёмная тема — единственная (S0: светлая удалена). Палитра кита: глубокий холодный тёмный. ---- */
html.dark, :root{
  --bg:#0a0e11;
  --bg-2:#0c1116;
  --surface:#141a20;        /* карточки (кит) */
  --surface-2:#1b232a;      /* чипы, поля, вложенное */
  --surface-3:#232d35;      /* hover */
  --panel:rgba(20,26,32,.72);
  --panel-solid:#141a20;
  --card:#141a20;
  --text:#eaf0f3;
  --muted:#97a3ab;
  --muted-2:#69747c;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.13);
  --border:rgba(255,255,255,.07);
  --border-2:rgba(255,255,255,.13);
  --chip:#1b232a;
  --chip-bd:rgba(255,255,255,.13);
  --cluster-inner:#0b0f13;
  --shadow:0 18px 48px rgba(0,0,0,.55);
  --fab:rgba(12,17,22,.86);
  --tabbar:rgba(12,17,22,.85);
}
*{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);}
/* Светлый фон карты в светлом режиме — без «чёрной вспышки», пока грузятся светлые тайлы (фидбек 2026-06-29). */
html:not(.dark) #map, html:not(.dark) .leaflet-container{background:#eef2f6;}
.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,.tool-btn--max{padding:0;width:34px;justify-content:center;color:var(--accent);} /* иконки TG/MAX-каналов */
.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;}

/* Плашка обслуживания (Фаза 12): файл-флаг .maintenance → /api/config.maintenance → текст здесь.
   Самодостаточный янтарный цвет (читается и в тёмной, и в светлой теме). Лежит в .topwrap. */
.maint{
  pointer-events:auto;
  margin-top:8px;display:flex;align-items:center;gap:10px;
  background:#fff4d6;border:1px solid #e0b84d;border-radius:13px;box-shadow:var(--shadow);
  padding:10px 8px 10px 13px;font-size:12.5px;color:#7a5b00;line-height:1.35;font-weight:600;
}
.maint[hidden]{display:none;}
.maint__ico{font-size:15px;flex:none;}
.maint__txt{flex:1;}
.maint__x{flex:none;width:28px;height:28px;border-radius:8px;border:none;background:rgba(0,0,0,.06);color:#7a5b00;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-«колонки» (кит S0) =====
   Pin: круглое тело (тёмный радиальный фон + бордюр --c) с глифом бензоколонки
   и хвостиком-кончиком ровно на координате. Цвет --c берётся ТОЛЬКО из
   статус-whitelist (statusColor в app.js). Свечение — МЯГКОЕ (узкий цветной
   box-shadow), не «жирный» neon-ореол. Кластер сохраняет inline conic-gradient
   (пирог статусов из clusterIcon в app.js) — рефайним только бордюр/тень. */
.gp-pin{
  position:relative;width:34px;height:46px;cursor:pointer;line-height:0;
  transition:transform .14s ease;will-change:transform;
}
.gp-pin__body{
  position:absolute;top:0;left:0;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--c);
  background:radial-gradient(circle at 50% 36%, color-mix(in srgb,var(--c) 24%,#0b0f13) 0%, #0b0f13 76%);
  border:2px solid var(--c);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 13%,transparent), 0 4px 13px color-mix(in srgb,var(--c) 30%,transparent);
}
.gp-pin__glyph{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.gp-pin__tip{
  position:absolute;left:50%;top:29px;transform:translateX(-50%);width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:14px solid var(--c);
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.4));
}
.gp-pin:hover{transform:scale(1.08);transform-origin:50% 100%;}
.gp-pin:hover .gp-pin__body{
  box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 18%,transparent), 0 6px 16px color-mix(in srgb,var(--c) 42%,transparent);
}
.gp-cluster{
  border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 4px rgba(10,14,17,.35),0 4px 13px rgba(0,0,0,.45);
  transition:transform .12s ease;will-change:transform;
}
.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;letter-spacing:-.01em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

/* ===== Промо-карточки «НОВОЕ» (BL-19): ротатор снизу над таб-баром ===== */
.gz-promo{
  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:11px;
  background:var(--panel-solid);border:1px solid var(--accent-line);border-radius:var(--r-3);
  padding:11px 12px;box-shadow:var(--shadow);
  opacity:0;transform:translateY(10px);transition:opacity .28s,transform .28s;
}
.gz-promo.show{opacity:1;transform:translateY(0);}
.gz-promo[hidden]{display:none;}
.gz-promo__ico{width:34px;height:34px;flex:none;border-radius:10px;background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;}
.gz-promo__ico svg{width:18px;height:18px;}
.gz-promo__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.gz-promo__badge{align-self:flex-start;font-size:9px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--accent);background:var(--accent-soft);
  border:1px solid var(--accent-line);border-radius:var(--r-pill);padding:1px 7px;margin-bottom:3px;}
.gz-promo__title{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.2;}
.gz-promo__sub{font-size:11.5px;color:var(--muted);line-height:1.3;}
.gz-promo__actions{flex:none;display:flex;gap:6px;align-items:center;}
.gz-promo__btn{flex:none;color:var(--accent);font-weight:800;font-size:12.5px;text-decoration:none;
  padding:7px 11px;border-radius:var(--r-1);background:var(--accent-soft);border:1px solid var(--accent-line);
  cursor:pointer;white-space:nowrap;}
.gz-promo__btn:active{transform:scale(.96);}
.gz-promo__x{flex:none;background:transparent;border:0;color:var(--muted);font-size:15px;cursor:pointer;
  padding:4px 6px;line-height:1;align-self:flex-start;}

/* ===== Свайп-панель «Ближайшие АЗС» (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;}

/* Богатый ценник (кит gz-price, D-06/D-07): карта → сетка карточек «марка + цена + тренд».
   Анти-XSS (T-06-11): price→Number()→escapeHtml; глиф тренда ТОЛЬКО из whitelist TREND_GLYPH. */
.gz-price{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);
  padding:14px;display:flex;flex-direction:column;gap:13px;}
.gz-price__head{display:flex;align-items:center;justify-content:space-between;}
.gz-price__head>span:first-child{font-size:14px;font-weight:700;letter-spacing:-.01em;}
.gz-price__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.gz-price__note{font-size:12px;color:var(--muted);font-style:italic;}
.gz-fuel{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-2);
  padding:11px 13px;display:flex;flex-direction:column;gap:9px;transition:border-color .15s;}
.gz-fuel:hover{border-color:var(--line-2);}
.gz-fuel__top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.gz-fuel__grade{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.01em;}
.gz-fuel__price{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;}
.gz-fuel__cur{font-size:12px;font-weight:600;color:var(--muted-2);}
.gz-trend{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;white-space:nowrap;}
.gz-trend--down{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok);}  /* падение цены — зелёный */
.gz-trend--up{background:color-mix(in srgb,var(--no) 15%,transparent);color:var(--no);}    /* рост цены — красный */
.gz-trend--flat{background:var(--surface-3);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);}
/* ===== Тост обновления SW (BL-20) ===== */
.sw-update{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + var(--tabbar-h) + 90px);
  transform:translateX(-50%);z-index:2100;display:flex;align-items:center;gap:12px;
  background:var(--panel-solid);border:1px solid var(--accent-line);border-radius:var(--r-pill);
  padding:8px 8px 8px 16px;box-shadow:var(--shadow);
}
.sw-update[hidden]{display:none;}
.sw-update__txt{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;}
.sw-update__btn{flex:none;color:var(--accent);font-weight:800;font-size:13px;
  padding:7px 14px;border-radius:var(--r-pill);background:var(--accent-soft);
  border:1px solid var(--accent-line);cursor:pointer;white-space:nowrap;}
.sw-update__btn:active{transform:scale(.96);}

.you-dot{width:18px;height:18px;border-radius:50%;background:var(--user);border:3px solid #0b0f13;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--user) 22%,transparent),0 0 12px color-mix(in srgb,var(--user) 55%,transparent);}

/* ════════════════════════════════════════════════════════════════════════════
   РЕДИЗАЙН (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;}

/* ===== Нижний таб-бар (адаптивно к числу видимых вкладок) =====
   grid-auto-flow:column + auto-columns:1fr → равные колонки по ЧИСЛУ видимых .tab.
   Сейчас 4 таба (Ситуация/Карта/Мои АЗС/Новое); если SEO скроет «Новое» (display:none) —
   автоматически станет 3 равных. Раньше было repeat(3,1fr) → 4-й таб переносился за край. */
.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-auto-flow:column;grid-auto-columns: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;
  margin:6px;border-radius:var(--r-2);
  border:none;background:transparent;cursor:pointer;color:var(--muted);
  font-family:var(--font);font-size:11px;font-weight:600;
  transition:color .18s,background .18s,box-shadow .18s,transform .12s;-webkit-tap-highlight-color:transparent;
}
.tab:active{transform:scale(.94);}
.tab .ico{width:24px;height:24px;}
.tab__lbl{line-height:1;}
/* Активный таб (кит/референс): зелёная «пилюля» фона + тонкое inset-кольцо. */
.tab.on{color:var(--accent);
  background:color-mix(in srgb,var(--accent) 13%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 32%,transparent);}
.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);}

/* «Полезное: гайды о бензине, лимитах и ценах» — CTA-карточка в конце SEO-блока «Ситуации».
   HTML (.seo-home__more > a→/blog) генерит src/seo/home-page.js (SEO-owned, SSR). Раньше CSS на
   __more не было → дефолтный синий линк «не под дизайном». S0 причёсывает ТОЛЬКО стилями здесь
   (в style.css), не трогая SSR-разметку и SEO-зону index.html (L184–205). */
.seo-home__more{margin:16px 0 6px;}
.seo-home__more a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-radius:var(--r-3);
  background:var(--surface);border:1px solid var(--line);
  color:var(--text);font-size:14px;font-weight:700;text-decoration:none;
  transition:background .15s,border-color .15s;
}
.seo-home__more a:hover{background:var(--surface-2);border-color:var(--line-2);}
.seo-home__more a::after{content:"→";color:var(--accent);font-weight:800;font-size:16px;flex:none;}

/* Карточка станции — лента/избранное/ближайшие (макет). Логотип-плитка + статус-пилюля. */
.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:hover{border-color:var(--border-2);background:var(--surface-2);}
.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%;margin-top:5px;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;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:5px;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:8px;}
.stn-card__metacol{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.stn-card__dist{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;}
.stn-card__conf{font-size:11px;color:var(--muted);white-space:nowrap;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;}
/* «Смотреть все»/«Свернуть» в заголовке секции «Есть бензин рядом» (#2) */
.sit-sectit__more{background:transparent;border:0;color:var(--accent);font-family:var(--font);
  font-size:13px;font-weight:700;cursor:pointer;padding:2px 0;white-space:nowrap;flex:none;}
/* Рекламная карточка RoDev.pro (стиль слота gdebenz, #2): как .stn-card, но акцентная рамка + крестик. */
.ad-card{position:relative;border:1px solid var(--accent-line);border-radius:16px;background:var(--card);}
.ad-card__link{display:flex;align-items:center;gap:13px;padding:13px;text-decoration:none;color:var(--text);}
.ad-card__logo{width:50px;height:50px;border-radius:13px;flex:none;display:grid;place-items:center;
  font-size:23px;font-weight:800;background:var(--accent);color:#fff;}
.ad-card__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-right:16px;}
.ad-card__title{font-size:14.5px;font-weight:800;letter-spacing:-.2px;line-height:1.2;}
.ad-card__sub{font-size:12px;color:var(--accent);line-height:1.25;}
.ad-card__x{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:7px;border:0;
  background:var(--chip);color:var(--muted);font-size:12px;cursor:pointer;display:grid;place-items:center;}
/* Заголовки секций в поиске («Города» / «Заправки»). */
.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);}
/* Лист выбора режима наличия («Показать на карте» — подпункты «есть бензин», макет Screenshot_471). */
.avail-opts{display:flex;flex-direction:column;gap:8px;margin-top:4px;text-align:left;}
.avail-opt{display:flex;flex-direction:column;gap:2px;width:100%;padding:11px 13px;border-radius:13px;
  border:1px solid var(--border-2);background:var(--surface-2);color:var(--text);cursor:pointer;font-family:var(--font);}
.avail-opt.on{border-color:var(--accent-line);background:var(--accent-soft);}
.avail-opt__t{font-size:14.5px;font-weight:700;}
.avail-opt__d{font-size:12.5px;color:var(--muted);line-height:1.3;}

/* ═════ Умный подбор (Screenshot_470) ═════ */
.tool-btn--podbor{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);font-weight:800;}
.tool-btn--podbor .spk-star{font-size:13px;}
.spk-ico{width:1em;height:1em;display:inline-block;vertical-align:-0.14em;fill:currentColor;flex:none;}
.spk-pin{width:1em;height:1em;display:inline-block;vertical-align:-0.14em;flex:none;}
.gz-price__fresh{font-size:11px;color:var(--muted);font-weight:600;margin-left:8px;}
.topbar__tools{flex-wrap:wrap;row-gap:8px;} /* +«Подбор» в ряду → перенос вместо обрезки */

.smartpick{position:fixed;inset:0;z-index:1700;display:flex;align-items:flex-end;
  background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .28s;}
.smartpick.open{opacity:1;pointer-events:auto;}
.smartpick[hidden]{display:none;}
.spk__sheet{width:100%;max-height:92vh;display:flex;flex-direction:column;background:var(--panel-solid);
  border-radius:22px 22px 0 0;border-top:1px solid var(--border);box-shadow:0 -14px 44px rgba(0,0,0,.5);
  transform:translateY(8%);transition:transform .3s cubic-bezier(.4,0,.2,1);}
.smartpick.open .spk__sheet{transform:translateY(0);}
.spk__head{flex:none;display:flex;align-items:center;gap:12px;padding:16px 18px;color:#fff;
  background:linear-gradient(120deg,#22C55E,#0EA5E9);border-radius:22px 22px 0 0;}
.spk__htext{flex:1;min-width:0;}
.spk__title{font-size:18px;font-weight:800;letter-spacing:-.2px;}
.spk__sub{font-size:12.5px;opacity:.92;margin-top:1px;}
.spk__x{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.22);color:#fff;font-size:15px;cursor:pointer;}
.spk__body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px 16px calc(env(safe-area-inset-bottom) + 18px);display:flex;flex-direction:column;gap:12px;}
.spk__geo{background:rgba(242,192,55,.10);border:1px solid rgba(242,192,55,.30);border-radius:14px;padding:12px 13px;display:flex;flex-direction:column;gap:10px;}
.spk__geotext{font-size:13px;color:var(--text);line-height:1.4;}
.spk__georow{display:flex;gap:8px;flex-wrap:wrap;}
.spk__gbtn{height:36px;padding:0 14px;border-radius:11px;border:1px solid var(--chip-bd);background:var(--chip);
  color:var(--text);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);}
.spk__gbtn--p{background:rgba(242,192,55,.16);border-color:rgba(242,192,55,.5);color:#f3cf6b;}
.spk__flabel{font-size:13px;font-weight:700;color:var(--text);}
.spk__opt{color:var(--muted);font-weight:600;}
.spk__chips{display:flex;flex-wrap:wrap;gap:8px;}
.spk-chip{height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--chip-bd);background:var(--chip);
  color:var(--text);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font);}
.spk-chip.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);}
.spk__stat{font-size:12.5px;color:var(--accent);font-weight:700;}
.spk-empty{font-size:13.5px;color:var(--muted);text-align:center;padding:18px 8px;}
.spk-best{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:16px;padding:13px;display:flex;flex-direction:column;gap:11px;}
.spk-best__tag{font-size:11.5px;font-weight:800;color:var(--accent);letter-spacing:.02em;text-transform:uppercase;}
.spk-best__row{display:flex;align-items:center;gap:12px;}
.spk-best__logo{width:46px;height:46px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:21px;font-weight:800;background:#fff;}
.spk-best__logo img{width:80%;height:80%;object-fit:contain;}
.spk-best__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
.spk-best__brand{font-size:17px;font-weight:800;letter-spacing:-.2px;}
.spk-best__meta{font-size:12px;color:var(--muted);}
.spk-best__dist{font-size:18px;font-weight:800;flex:none;}
.spk-best__open{height:46px;border-radius:13px;border:0;background:var(--accent);color:var(--accent-ink);font-size:15px;font-weight:800;cursor:pointer;font-family:var(--font);}
.spk-morelabel{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-top:2px;}
/* Режим «Ближе | Дешевле» */
.spk__modes{display:flex;gap:6px;background:var(--surface-2);border:1px solid var(--border-2);border-radius:13px;padding:4px;}
.spk-mode{flex:1;height:38px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:14px;font-weight:700;cursor:pointer;font-family:var(--font);transition:background .15s,color .15s;}
.spk-mode.on{background:var(--accent);color:var(--accent-ink);}
.spk-best__price{font-size:20px;font-weight:800;flex:none;color:var(--accent);white-space:nowrap;}
/* Ценовые строки «Дешевле» */
.spk-prow{width:100%;display:flex;align-items:center;gap:12px;padding:11px 4px;border:0;border-top:1px solid var(--border);background:transparent;cursor:pointer;font-family:var(--font);text-align:left;}
.spk-prow__logo{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;font-size:15px;font-weight:800;background:#fff;}
.spk-prow__logo img{width:80%;height:80%;object-fit:contain;}
.spk-prow__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.spk-prow__brand{font-size:14.5px;font-weight:700;color:var(--text);}
.spk-prow__sub{font-size:11.5px;color:var(--muted);}
.spk-prow__right{flex:none;text-align:right;display:flex;flex-direction:column;gap:2px;align-items:flex-end;}
.spk-prow__price{font-size:15px;font-weight:800;color:var(--text);}
.spk-prow__delta{font-size:11px;font-weight:700;color: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:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1;}
.status-card .sc-sub{color:var(--muted);font-size:13px;margin-top:4px;}
/* B (BL-30) — датчик уверенности (%-driven). Цвет уровня (--cf) РАЗВЯЗАН со статусом. */
.status-card[data-conf="high"]{--cf:var(--ok);}
.status-card[data-conf="medium"]{--cf:var(--queue);}
.status-card[data-conf="low"]{--cf:var(--muted);}
.status-card .sc-conf{margin-top:15px;}
.status-card .sc-conf__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.status-card .sc-conf__lab{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted);}
.status-card .sc-info{width:15px;height:15px;border-radius:50%;border:1px solid var(--line-2);color:var(--muted);
  font:italic 700 10px Georgia,serif;display:inline-grid;place-items:center;cursor:pointer;line-height:1;}
.status-card .sc-info:hover{color:var(--text);border-color:var(--text);}
.status-card .sc-conf__pct{font-size:23px;font-weight:800;letter-spacing:-.01em;color:var(--cf);font-variant-numeric:tabular-nums;}
.status-card .sc-conf__track{position:relative;margin-top:9px;height:10px;border-radius:var(--r-pill);
  background:var(--surface-2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);}
.status-card .sc-conf__fill{height:100%;border-radius:var(--r-pill);width:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--cf) 72%,#000),var(--cf));
  box-shadow:0 0 10px color-mix(in srgb,var(--cf) 45%,transparent);transition:width .55s cubic-bezier(.34,1.2,.4,1);}
.status-card .sc-conf__track::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(7,10,13,.55) 12px 13px);}
.status-card .sc-conf__level{margin-top:7px;font-size:12px;font-weight:700;color:var(--cf);}
.status-card .sc-conf__hint{display:none;margin-top:7px;font-size:11.5px;color:var(--muted);line-height:1.4;}
.status-card .sc-conf__hint.show{display:block;}

.status-card .sc-divider{height:1px;background:var(--border);margin:15px 0 13px;}
.status-card .sc-q{color:var(--text);font-size:14.5px;font-weight:600;margin-bottom:11px;}
.status-card.expanded .sc-q{display:none;}

/* Кнопки карточки (scoped под .status-card — не конфликтуют с generic в общем файле) */
.status-card .btn{height:50px;border-radius:13px;font-family:var(--font);font-size:13.5px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;
  white-space:nowrap;padding:0 10px;transition:transform .12s,background .15s,border-color .15s;}
.status-card .btn:active{transform:scale(.97);}
.status-card .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.status-card .btn--primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 8px 22px var(--accent-soft);}
.status-card .btn--primary.done{opacity:.7;}
.status-card .btn--ghost{background:transparent;color:var(--text);border-color:var(--line-2);}
.status-card .btn--soft{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line);}
.status-card .btn--full{width:100%;}
.sc-actions{display:flex;gap:10px;}
.sc-actions .btn{flex:1;}
.status-card.expanded .sc-yes{display:none;}
.status-card .sc-share{margin-top:10px;}

/* A — инлайн-форма условий (раскрытие по «Да, подтверждаю»). Пиллы — общие .rf-fuel/.rf-q (index.html). */
.status-card .sc-exp-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;}
.status-card.expanded .sc-exp-wrap{grid-template-rows:1fr;}
.status-card .sc-exp-inner{overflow:hidden;min-height:0;}
.status-card .sc-exp{margin-bottom:10px;padding:14px;border-radius:14px;
  background:color-mix(in srgb,var(--accent) 7%,var(--surface-2));border:1px solid var(--accent-line);}
.status-card .sc-exp__cap{font-size:13px;font-weight:600;color:var(--text);line-height:1.35;margin-bottom:13px;}
.status-card .field{margin-bottom:13px;}
.status-card .field:last-of-type{margin-bottom:14px;}
.status-card .field__lab{display:flex;align-items:baseline;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:9px;}
.status-card .field__hint{font-size:10px;font-weight:600;letter-spacing:.2px;text-transform:none;color:var(--muted-2);}

/* D — бейджи источника отметки в истории (рядом с .hr-verified) */
.hr-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:3px;white-space:nowrap;line-height:1.5;}
.hr-badge--on-site{background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);}
.hr-badge--reliable{background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.34);color:var(--queue);}
/* Фикс переполнения строки истории: статус+время+«Проверено»+бейдж не влезали в одну строку
   на узких контейнерах (десктоп-сайдбар ~320–360px, мелкие телефоны) → бейдж налезал на 👍.
   Инлайн-правило в index.html — .hr-top{justify-content:space-between} БЕЗ переноса; оверрайдим
   с большей специфичностью (.hist-row .hr-top): перенос на 2-ю строку, лево-выравнивание. */
.hist-row .hr-top{flex-wrap:wrap;gap:4px 8px;justify-content:flex-start;}

/* ===== Футер со ссылками (О сервисе / Конфиденциальность / Условия) ===== */
.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); } /* баннер в пределах сайдбара */
  /* «Новое» — НЕ сайдбар: полноширинная лента поверх карты (контейнер .news-wrap центрует
     до 1180px). .view уже даёт непрозрачный var(--bg) -> карта не просвечивает (Screenshot_486). */
  #view-blog{left:0;right:0;width:auto;padding:24px 24px 24px;z-index:1100;}
  #view-blog .news-bar{top:0;}
}

/* ════════════════════════════════════════════════════════════════════════════
   Вкладка «Новое» — лента новостей (/api/news) + статья. Десктоп: центр-контейнер
   1180px, сетка 2-3 колонки; .view уже непрозрачный (var(--bg)) и перекрывает #map
   (фикс «просвечивает карта» / одноколоночная растяжка на ПК, Screenshot_486).
   ════════════════════════════════════════════════════════════════════════════ */
.no-sb{scrollbar-width:none;}
.no-sb::-webkit-scrollbar{display:none;}

.news-wrap{max-width:1180px;margin:0 auto;width:100%;}
.news-head{padding:6px 2px 4px;}
.news-sub{max-width:580px;}

/* sticky фильтр-бар (внутри прокручиваемого .view) */
.news-bar{position:sticky;top:calc(-1 * env(safe-area-inset-top));z-index:3;
  background:var(--bg);padding:10px 0 12px;margin-bottom:6px;
  border-bottom:1px solid var(--border);}
.news-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0;margin-bottom:8px;}
.news-chip{flex:none;height:32px;padding:0 13px;border-radius:16px;cursor:pointer;
  background:var(--chip);border:1px solid var(--chip-bd);color:var(--text);
  font-family:inherit;font-size:13px;font-weight:600;white-space:nowrap;transition:transform .12s,filter .12s;}
.news-chip:active{transform:scale(.95);}
.news-chip.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);}
.news-bar__row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.news-sort{display:inline-flex;flex:none;gap:2px;padding:3px;border-radius:11px;
  background:var(--chip);border:1px solid var(--chip-bd);}
.news-sort__btn{height:34px;padding:0 12px;border:0;border-radius:9px;cursor:pointer;
  background:transparent;color:var(--muted);font-family:inherit;font-size:13px;font-weight:600;}
.news-sort__btn.on{background:var(--panel-solid);color:var(--text);}
.news-search{position:relative;flex:1;min-width:200px;}
.news-search .ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--muted);}
.news-search input{width:100%;height:42px;padding:0 14px 0 38px;border-radius:12px;
  background:var(--chip);border:1px solid var(--chip-bd);color:var(--text);
  font-family:inherit;font-size:15px;outline:none;transition:border-color .15s;}
.news-search input:focus{border-color:var(--accent-line);}

/* счётчик результатов */
.news-count{font-size:13px;font-weight:600;color:var(--text);margin:4px 2px 12px;}

/* сетка карточек: моб 1 колонка, десктоп — auto-fill 300px (2-3 кол.) */
.news-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:700px){
  .news-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
}

/* карточка */
.news-card{position:relative;display:flex;flex-direction:column;cursor:pointer;
  background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;
  color:var(--text);text-decoration:none;transition:border-color .18s,transform .18s,box-shadow .18s;}
.news-card:hover{border-color:var(--accent-line);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.45);}
.news-card:active{transform:translateY(-1px);}
.news-card__cover{width:100%;height:168px;background:var(--panel-solid);}
.news-card__cover img{width:100%;height:100%;object-fit:cover;display:block;}
.news-card__body{display:flex;flex-direction:column;flex:1;padding:16px;}
.news-card__spacer{flex:1;}
.news-card__kicker{align-self:flex-start;height:22px;padding:0 9px;margin-bottom:10px;
  display:inline-flex;align-items:center;border-radius:7px;background:var(--chip);
  border:1px solid var(--chip-bd);color:var(--muted);
  font-weight:700;font-size:10px;letter-spacing:.07em;text-transform:uppercase;}
.news-card__t{font-weight:700;font-size:17px;line-height:1.32;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-card__p{font-size:13.5px;line-height:1.5;color:var(--muted);margin:8px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-card__meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:14px;
  font-size:12.5px;font-weight:500;color:var(--muted);}
.news-card__sep{opacity:.45;}
.news-card__topic{display:inline-flex;align-items:center;gap:5px;}
.news-card__dot{width:7px;height:7px;border-radius:2px;display:inline-block;}
.news-card__like{margin-top:13px;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  height:34px;padding:0 13px;border-radius:17px;cursor:pointer;
  background:var(--chip);border:1px solid var(--chip-bd);color:var(--muted);
  font-family:inherit;font-size:13px;font-weight:600;transition:border-color .15s,transform .12s;}
.news-card__like:hover{border-color:var(--accent-line);}
.news-card__like:active{transform:scale(.94);}
.news-card__like.is-liked{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft);}
.news-card__heart{font-size:14px;line-height:1;}
.news-hot{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  height:26px;padding:0 10px;border-radius:13px;background:rgba(10,14,17,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--accent-line);color:var(--accent);font-weight:700;font-size:11px;}

/* состояния и пагинация */
.news-state{text-align:center;padding:48px 18px;}
.news-state__t{font-weight:700;font-size:18px;color:var(--text);}
.news-state__p{font-size:14px;line-height:1.5;color:var(--muted);max-width:340px;margin:8px auto 18px;}
.news-state__btn{height:42px;padding:0 18px;border-radius:12px;cursor:pointer;
  background:transparent;color:var(--accent);border:1px solid var(--accent-line);
  font-family:inherit;font-weight:700;font-size:14px;}
.news-state--loading{color:var(--muted);font-size:14px;}
.news-more{display:flex;justify-content:center;margin-top:22px;}
.news-more__btn{height:46px;padding:0 24px;border-radius:13px;cursor:pointer;
  background:var(--chip);border:1px solid var(--chip-bd);color:var(--text);
  font-family:inherit;font-weight:600;font-size:14px;transition:border-color .15s,background .15s;}
.news-more__btn:hover{border-color:var(--accent-line);background:var(--accent-soft);}

/* гайды (SSR) — список ссылок-карточек */
.news-guides{display:flex;flex-direction:column;gap:10px;}
.news-guides .news-card{padding:14px;border-radius:14px;}
.news-foot{margin-top:18px;}

/* бейдж «✓ Проверено» в истории карточки (Фаза 17, план 03 — D-09) */
.hr-verified{display:inline-flex;align-items:center;font-size:11px;font-weight:600;
  color:#22C55E;white-space:nowrap;gap:2px;}
.news-foot a{color:var(--accent);text-decoration:none;}