/* ===========================================================================
   Бензин в Донецке — Apple/iOS-стиль дизайн-система (без рантайм-компилятора)
   =========================================================================== */
:root {
  --bg:        #f2f2f7;   /* systemGroupedBackground */
  --elev:      #ffffff;
  --elev-2:    #ffffff;
  --label:     #1c1c1e;
  --label-2:   rgba(60,60,67,.60);
  --label-3:   rgba(60,60,67,.30);
  --sep:       rgba(60,60,67,.16);
  --fill:      rgba(118,118,128,.12);  /* iOS tertiary fill */
  --fill-2:    rgba(118,118,128,.20);
  --accent:    #34c759;   /* systemGreen */
  --green:     #34c759;
  --amber:     #ff9500;
  --red:       #ff3b30;
  --gray:      #8e8e93;
  --material:  rgba(255,255,255,.72);
  --shadow:    0 1px 2px rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.07);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --radius:    16px;
}
[data-theme="dark"] {
  --bg:        #000000;
  --elev:      #1c1c1e;
  --elev-2:    #2c2c2e;
  --label:     #ffffff;
  --label-2:   rgba(235,235,245,.60);
  --label-3:   rgba(235,235,245,.30);
  --sep:       rgba(84,84,88,.50);
  --fill:      rgba(118,118,128,.24);
  --fill-2:    rgba(118,118,128,.32);
  --accent:    #30d158;
  --green:     #30d158;
  --amber:     #ff9f0a;
  --red:       #ff453a;
  --gray:      #98989f;
  --material:  rgba(30,30,32,.72);
  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }   /* фон под safe-area (home-indicator) в standalone — иначе чёрная полоса */
html, body { height: 100%; margin: 0; min-height: 100dvh; min-height: -webkit-fill-available; background: var(--bg); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Segoe UI", system-ui, Roboto, sans-serif;
  color: var(--label); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow: hidden; letter-spacing: -0.01em;
}
.hidden { display: none !important; }
.spacer { flex: 1; }
.muted { color: var(--label-2); }
.muted-3 { color: var(--label-3); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row { display: flex; align-items: center; }
.tabnum { font-variant-numeric: tabular-nums; }

/* ── карта ── */
#map { position: fixed; inset: 0; height: 100dvh; height: -webkit-fill-available; background: var(--bg); }
/* подложка под home-indicator цветом шторки (standalone iOS — иначе чёрная полоса от body) */
body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: env(safe-area-inset-bottom);
              background: var(--elev); z-index: 34; pointer-events: none; }
/* шторка физически продолжается вниз под home-indicator — перекрывает чёрную полосу */
#sheet::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 60vh;
                background: var(--elev); }
.maplibregl-ctrl-bottom-right { margin: 0 6px 4px 0; }
.maplibregl-ctrl-attrib { font-size: 10px; opacity: .55; border-radius: 8px !important; }
.maplibregl-ctrl-group { border-radius: 12px !important; overflow: hidden; box-shadow: var(--shadow-sm) !important; }
#map-loading {
  position: fixed; inset: 0; z-index: 5; display: flex; gap: 10px;
  justify-content: center; align-items: center; color: var(--label-2); background: var(--bg);
}
.spinner { width: 22px; height: 22px; border: 2.5px solid var(--fill-2);
           border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── материал (стеклянные панели как в iOS) ── */
.material {
  background: var(--material);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* ── шапка ── */
#top { position: fixed; top: env(safe-area-inset-top, 0); left: 0; right: 0; z-index: 30;
       padding: 8px 10px 0; transition: opacity .2s; }
.topbar { border-radius: 22px; padding: 10px 12px; box-shadow: var(--shadow);
          border: .5px solid var(--sep); }
.icon-badge img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.icon-badge { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; overflow: hidden;
              background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); flex-shrink: 0; }
.app-title { font-weight: 700; font-size: 16px; line-height: 1.15; letter-spacing: -0.02em; }
.app-sub { font-size: 12px; color: var(--label-2); line-height: 1.2; }

/* круглые кнопки в шапке */
.gbtn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
        background: transparent; border: 0; color: var(--label); cursor: pointer; transition: background .15s; }
.gbtn:active { background: var(--fill); }
.gbtn.on { color: var(--accent); }
.gbtn-accent { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.gbtn-accent:active { background: color-mix(in srgb, var(--accent) 28%, transparent); }

/* ── сегмент-контрол фильтров (iOS) ── */
/* ряд «город + есть топливо» — всегда виден целиком, без скролла */
.filters-row { display: flex; gap: 6px; margin-top: 10px; align-items: stretch; }
.filters-row .seg-avail { flex-shrink: 0; }
.city-wrap { position: relative; display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0;
             padding: 0 9px 0 11px; border-radius: 980px; border: .5px solid var(--sep);
             background: var(--fill-2); color: var(--label); }
.city-wrap select { appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: none;
                    color: inherit; font-size: 13.5px; font-weight: 600; font-family: inherit; flex: 1;
                    min-width: 0; padding: 8px 0; text-overflow: ellipsis; }
/* пункты выпадающего списка — крупно, не наследуют 13.5px чипа */
.city-wrap select option { font-size: 17px; font-weight: 500; padding: 12px 14px;
                           background: var(--elev); color: var(--label); }
.city-wrap i[data-lucide], .city-wrap svg { flex-shrink: 0; opacity: .65; pointer-events: none; }

/* плавное затухание справа — видно, что чипсы топлива скроллятся */
.segments { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; padding-bottom: 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
            scrollbar-width: none; }
.segments::-webkit-scrollbar { display: none; }
.seg { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
       padding: 7px 14px; border-radius: 980px; font-size: 13.5px; font-weight: 600; line-height: 1;
       background: var(--fill); color: var(--label); border: 0; cursor: pointer;
       transition: transform .12s, background .15s; white-space: nowrap; }
.seg:active { transform: scale(.93); }
.seg.active { background: var(--label); color: var(--bg); }
.seg-avail.active { background: var(--green); color: #fff; }
.seg-sep { width: .5px; height: 22px; background: var(--sep); flex-shrink: 0; align-self: center; margin: 0 2px; }

/* ── городской алерт ── */
#city-alert { position: fixed; top: calc(env(safe-area-inset-top, 0) + 6px); left: 10px; right: 10px; z-index: 40; }
.banner { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 16px;
          background: color-mix(in srgb, var(--amber) 18%, var(--elev)); color: var(--label);
          box-shadow: var(--shadow); border: .5px solid color-mix(in srgb, var(--amber) 40%, transparent); }
.banner .b-ico { color: var(--amber); flex-shrink: 0; }
.banner .b-txt { font-size: 13px; line-height: 1.25; flex: 1; }

/* ── FAB ── */
#fabs { position: fixed; right: 14px; z-index: 25; bottom: 50%; display: flex; flex-direction: column; gap: 10px;
        transition: bottom .25s cubic-bezier(.22,.61,.36,1); }
.fab { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
       border: .5px solid var(--sep); background: var(--material); color: var(--label);
       backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
       box-shadow: var(--shadow); cursor: pointer; transition: transform .12s; }
.fab:active { transform: scale(.9); }
.fab.primary { background: var(--accent); color: #fff; border-color: transparent; }

/* ── маркеры (внешний позиционирует MapLibre, внутренний — вид) ── */
.pin-marker { width: 30px; height: 38px; cursor: pointer; }
.pin { width: 100%; height: 100%; transform-origin: 50% 100%; transition: transform .15s;
       filter: drop-shadow(0 3px 5px rgba(0,0,0,.32)); }
.pin svg { width: 100%; height: 100%; display: block; }
.pin .ring { fill: #fff; }
.pin .body, .pin .glyph { fill: var(--gray); }
.pin.yes   .body, .pin.yes   .glyph { fill: var(--green); }
.pin.maybe .body, .pin.maybe .glyph { fill: var(--amber); }
.pin.no    .body, .pin.no    .glyph { fill: var(--red); }
.pin:active { transform: scale(.9); }
.pin.sel { transform: scale(1.32); filter: drop-shadow(0 6px 9px rgba(0,0,0,.5)); }
.me-dot { width: 18px; height: 18px; border-radius: 50%; background: #007aff; border: 3px solid #fff;
          box-shadow: 0 0 0 6px rgba(0,122,255,.22), 0 1px 4px rgba(0,0,0,.4); }

/* ── шторка ── */
/* 92dvh: динамическая высота вьюпорта — с обычным vh низ списка уезжает
   под адресную строку мобильного браузера и список «обрезается» */
#sheet { position: fixed; left: 0; right: 0; bottom: 0; height: 92vh; height: 92dvh; z-index: 35;
         background: var(--elev); border-radius: 14px 14px 0 0;
         box-shadow: 0 -2px 10px rgba(0,0,0,.08), 0 -20px 50px rgba(0,0,0,.10);
         transform: translateY(60vh); touch-action: none; display: flex; flex-direction: column;
         transition: transform .34s cubic-bezier(.22,.61,.36,1); }
[data-theme="dark"] #sheet { border-top: .5px solid var(--sep); }
#sheet.dragging { transition: none; }
#grip { padding: 8px 0 4px; display: flex; justify-content: center; cursor: grab; flex-shrink: 0; }
#grip span { width: 38px; height: 5px; border-radius: 99px; background: var(--label-3); }
#sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain;
              padding: 4px 14px calc(env(safe-area-inset-bottom,0) + 28px); -webkit-overflow-scrolling: touch; }

@media (min-width: 900px) {
  #sheet { left: auto; right: 14px; bottom: 14px; top: 150px; width: 400px; height: auto;
           border-radius: 18px; transform: none !important; border: .5px solid var(--sep); }
  #grip { display: none; } #fabs { bottom: 24px; }
  #sheet::after { display: none; }
}

/* ── поиск (iOS) ── */
.search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 11px; margin: 6px 0 12px;
          background: var(--fill); border-radius: 11px; color: var(--label-2); }
.search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--label);
                font-size: 16px; font-family: inherit; }
.search input::placeholder { color: var(--label-2); }

/* ── заголовок секции ── */
.sec-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px;
            font-size: 13px; }
.sec-head .l { font-weight: 600; color: var(--label-2); }
.sec-head .r { color: var(--label-3); font-size: 12px; }

/* ── карточка станции (inset-список iOS) ── */
.station-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px;
                background: var(--elev); border-radius: var(--radius); box-shadow: var(--shadow-sm);
                border: .5px solid var(--sep); cursor: pointer; transition: transform .12s, background .15s;
                animation: fadeUp .2s ease both; }
.station-card:active { transform: scale(.985); background: var(--fill); }
.station-card.rec { border-color: color-mix(in srgb, var(--accent) 55%, transparent);
                    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), var(--shadow-sm); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.dot.yes { background: var(--green); } .dot.maybe { background: var(--amber); }
.dot.no { background: var(--red); } .dot.unknown { background: var(--gray); }
.sc-name { font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 5px; }
.sc-addr { font-size: 13px; color: var(--label-2); margin-top: 1px; }
.sc-right { text-align: right; flex-shrink: 0; }
.sc-status { font-size: 14px; font-weight: 600; }
.sc-status.yes { color: var(--green); } .sc-status.maybe { color: var(--amber); }
.sc-status.no { color: var(--red); } .sc-status.unknown { color: var(--label-2); }
.sc-meta { font-size: 11.5px; color: var(--label-3); margin-top: 1px; }

/* мини-теги топлива */
.ftags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ftag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; line-height: 1.3;
        background: var(--fill); color: var(--label-2); }
.ftag.yes { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.ftag.maybe { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }

/* «рекомендуем» бейдж */
.rec-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px;
             background: var(--accent); color: #fff; display: inline-flex; align-items: center; gap: 3px; }

/* ── деталь АЗС ── */
.d-head { display: flex; align-items: center; gap: 8px; padding: 4px 0 14px; }
.d-name { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; }
.d-addr { font-size: 13px; color: var(--label-2); margin-top: 2px; }

.fuel-card { background: var(--elev); border: .5px solid var(--sep); border-radius: var(--radius);
             box-shadow: var(--shadow-sm); padding: 14px; margin-bottom: 10px; }
.fc-top { display: flex; align-items: center; gap: 12px; }
.fc-name { font-weight: 700; font-size: 16px; width: 56px; flex-shrink: 0; }
.fc-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.fc-title.yes { color: var(--green); } .fc-title.maybe { color: var(--amber); }
.fc-title.no { color: var(--red); } .fc-title.unknown { color: var(--label-2); }
.fc-sub { font-size: 12px; color: var(--label-2); margin-top: 1px; }
.fc-sub i { vertical-align: -2px; }
.fc-deliv { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12px; font-weight: 600;
            color: #af52de; background: color-mix(in srgb, #af52de 14%, transparent); padding: 5px 10px; border-radius: 9px; }
.fc-src { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--label-2); background: var(--fill);
          padding: 7px 11px; border-radius: 9px; }
.fc-src svg { vertical-align: -2px; opacity: .6; margin-right: 3px; }
.fc-src-ch { color: var(--label-3); font-weight: 600; }

/* обратная связь */
.feedback { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 4px;
            padding: 12px; border-radius: 14px; background: var(--fill); color: var(--label-2);
            font-size: 13.5px; text-decoration: none; }
.feedback b { color: var(--accent); }
.fc-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ── кнопки (iOS) ── */
.btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
       height: 44px; border-radius: 12px; font-size: 16px; font-weight: 600; font-family: inherit;
       border: 0; cursor: pointer; transition: transform .12s, opacity .15s; letter-spacing: -0.01em; }
.btn:active { transform: scale(.96); opacity: .85; }
.btn-green { background: var(--green); color: #fff; }
.btn-red-tint { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.btn-fill { background: var(--fill); color: var(--label); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-plain { background: transparent; color: var(--accent); }
.btn-sm { height: 34px; border-radius: 9px; font-size: 14px; padding: 0 12px; flex: none; }

.d-note { font-size: 12px; color: var(--label-3); padding: 4px 4px 0; line-height: 1.45; }

/* ── вопрос про очередь ── */
.queue-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px;
             padding-top: 12px; border-top: .5px solid var(--sep); }
.queue-ask .q-label { font-size: 14px; font-weight: 600; margin-right: 2px; }

/* ── тосты (компактные, iOS) ── */
#toasts { position: fixed; top: calc(env(safe-area-inset-top,0) + 10px); left: 0; right: 0; z-index: 60;
          display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 12px; }
.toast {
  display: inline-flex; align-items: center; gap: 9px; max-width: 92%;
  padding: 11px 16px 11px 13px; border-radius: 14px; font-size: 14px; font-weight: 500;
  color: var(--label); box-shadow: var(--shadow); border: .5px solid var(--sep);
  background: var(--material); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  animation: toastIn .26s cubic-bezier(.22,.61,.36,1); transition: opacity .3s, transform .3s;
}
.toast .t-ico { flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.toast.good .t-ico { background: var(--green); color: #fff; }
.toast.bad  .t-ico { background: var(--red); color: #fff; }
.toast.warn .t-ico { background: var(--amber); color: #fff; }
.toast.info .t-ico { background: var(--gray); color: #fff; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px) scale(.96); } to { opacity: 1; transform: none; } }

.empty { text-align: center; color: var(--label-2); padding: 48px 20px; }
.empty .e-ico { color: var(--label-3); margin-bottom: 8px; }

/* ── видео-гайд (Stories-плеер) ── */
#guide { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column;
         padding: calc(env(safe-area-inset-top,0) + 14px) 18px calc(env(safe-area-inset-bottom,0) + 22px);
         animation: gFade .25s ease; }
@keyframes gFade { from { opacity: 0; } to { opacity: 1; } }
.g-progress { display: flex; gap: 5px; }
.g-seg { flex: 1; height: 3px; border-radius: 99px; background: var(--fill); overflow: hidden; }
.g-seg > i { display: block; height: 100%; width: 0; background: var(--label); border-radius: 99px; }
.g-seg.done > i { width: 100%; }
.g-seg.active > i { animation: gFill var(--dur, 5s) linear forwards; }
@keyframes gFill { to { width: 100%; } }
.g-top { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; height: 34px; }
.g-skip { background: transparent; border: 0; color: var(--label-2); font-size: 15px; font-family: inherit; cursor: pointer; }
.g-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
           text-align: center; gap: 20px; position: relative; }
.g-illus { width: 132px; height: 132px; border-radius: 34px; display: grid; place-items: center;
           background: color-mix(in srgb, var(--c, var(--accent)) 16%, transparent); color: var(--c, var(--accent));
           box-shadow: 0 20px 50px color-mix(in srgb, var(--c, var(--accent)) 22%, transparent); animation: gPop .45s cubic-bezier(.22,.61,.36,1); }
@keyframes gPop { from { transform: scale(.7) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.g-illus i { width: 60px; height: 60px; }
.g-title { font-size: 27px; font-weight: 800; letter-spacing: -0.03em; animation: gUp .4s ease both .05s; }
.g-text { font-size: 16.5px; color: var(--label-2); line-height: 1.5; max-width: 330px; animation: gUp .4s ease both .12s; }
@keyframes gUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.g-demo { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; animation: gUp .4s ease both .18s; }
.g-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; padding: 6px 12px;
          border-radius: 99px; background: var(--fill); }
.g-tapzones { position: absolute; inset: 0; display: flex; }
.g-tapzones .z { flex: 1; }
.g-tapzones .z.prev { flex: 0 0 32%; }
/* кликабельное поверх тап-зон листания */
.g-install, .g-install-steps, .g-stage .feedback, .g-stage .g-pill { position: relative; z-index: 1; }
.g-install-steps { margin-top: 12px; display: flex; flex-direction: column; gap: 9px;
                   font-size: 14.5px; line-height: 1.45; color: var(--label-2); text-align: left;
                   background: var(--fill); border-radius: 14px; padding: 13px 15px; }
.g-install-steps b { color: var(--label); }
.g-install-steps svg { vertical-align: -2px; }
.g-cta { height: 52px; border-radius: 15px; background: var(--accent); color: #fff; font-weight: 600; font-size: 17px;
         border: 0; font-family: inherit; cursor: pointer; transition: transform .12s; }
.g-cta:active { transform: scale(.97); }