/* ════════════════════════════════════════════════════════════════════════════
   ГдеЗаправка · Уфа — продакшн-стили карты.
   Источник: 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:#f43f5e; --unknown:#94a3b8;
  --accent:#3b82f6;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'PingFang SC','Noto Sans',sans-serif;
  --r:16px;
}
/* ---- Dark (default) ---- */
html.dark{
  --bg:#0d1117;
  --panel:rgba(22,27,34,.86);
  --panel-solid:#161b22;
  --card:#1c232c;
  --text:#e6edf3;
  --muted:#8b949e;
  --border:rgba(255,255,255,.09);
  --chip:rgba(255,255,255,.06);
  --chip-bd:rgba(255,255,255,.12);
  --cluster-inner:#1c232c;
  --shadow:0 10px 40px rgba(0,0,0,.55);
  --fab:#1c232c;
}
/* ---- Light ---- */
html:not(.dark){
  --bg:#e8edf2;
  --panel:rgba(255,255,255,.9);
  --panel-solid:#ffffff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:rgba(15,23,42,.08);
  --chip:#f1f5f9;
  --chip-bd:rgba(15,23,42,.08);
  --cluster-inner:#ffffff;
  --shadow:0 10px 36px rgba(15,23,42,.18);
  --fab:#ffffff;
}
*{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:7px;font-weight:700;font-size:16px;letter-spacing:-.2px;white-space:nowrap;}
.brand .pump{font-size:19px;}
.brand .dim{color:var(--muted);font-weight:600;}
.icon-btn{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  border:1px solid var(--chip-bd);background:var(--chip);color:var(--text);
  border-radius:12px;font-size:18px;cursor:pointer;transition:transform .12s,background .2s;
}
.icon-btn:active{transform:scale(.92);}

.chips{
  display:flex;gap:8px;overflow-x:auto;padding:0 12px 12px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.chips::-webkit-scrollbar{display:none;}
.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);border-color:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(59,130,246,.4);}
.chip .tick{font-size:11px;opacity:.9;}

/* ===== 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) + 26px);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 ===== */
.fabs{
  position:fixed;right:14px;bottom:calc(env(safe-area-inset-bottom) + 24px);z-index:900;
  display:flex;flex-direction:column;gap:12px;
}
.fab{
  width:54px;height:54px;border-radius:50%;border:1px solid var(--border);
  background:var(--fab);color:var(--text);box-shadow:var(--shadow);
  font-size:22px;cursor:pointer;display:grid;place-items:center;transition:transform .14s;
}
.fab:active{transform:scale(.9);}
.fab.spin{animation:spin .7s ease;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===== Markers ===== */
.gp-pin{
  width:30px;height:30px;border-radius:50%;
  background:var(--c);border:2.5px solid #fff;
  box-shadow:0 3px 9px rgba(0,0,0,.45);
  display:grid;place-items:center;cursor:pointer;
  transition:transform .12s;
}
.gp-pin:hover{transform:scale(1.12);}
.gp-pin::after{content:'';width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);}
.gp-cluster{
  border-radius:50%;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.45);border:2.5px solid #fff;
  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;
}

/* ===== 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:24px;background:var(--chip);border:1px solid var(--border);
}
.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.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:#fff;
  font-size:16.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 8px 22px rgba(59,130,246,.4);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(59,130,246,.08);}
.btn-add:active{transform:scale(.98);}

/* ===== Toast ===== */
.toast{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 96px);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(--accent);border:3px solid #fff;box-shadow:0 0 0 6px rgba(59,130,246,.25),0 2px 6px rgba(0,0,0,.4);}