:root { --blue:#3d7eff; --bg:#fff; --muted:#8a90a0; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { display:flex; flex-direction:column; background:var(--bg); }

.hidden { display:none !important; }

.phonebar { background:#fdf3d8; color:#5a4a16; font-size:13px; padding:8px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:8px; }
.phonebar button { background:#d9a31a; color:#fff; border:0; border-radius:8px; padding:6px 12px; font-size:13px; }

.tab { flex:1; display:none; overflow-y:auto; position:relative; }
.tab.active { display:block; }
#tab-map.active { display:block; }

#map { position:absolute; inset:0; }
.loading { position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:500;
  background:rgba(0,0,0,.75); color:#fff; padding:6px 16px; border-radius:20px; font-size:14px; }
.loading.hidden { display:none; }

.legend { position:absolute; left:12px; bottom:16px; z-index:500; background:#fff;
  border-radius:12px; padding:10px 12px; box-shadow:0 2px 10px rgba(0,0,0,.15); font-size:13px; }
.legend div { display:flex; align-items:center; gap:8px; margin:3px 0; }
.dot { width:12px; height:12px; border-radius:50%; display:inline-block; }
.dot.green{background:#22b14c} .dot.yellow{background:#e0a417}
.dot.red{background:#e23b3b} .dot.gray{background:#9aa4b2}

.fab { position:absolute; right:14px; z-index:500; width:52px; height:52px; border-radius:50%;
  border:0; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.2); font-size:22px; }
.fab-refresh { bottom:84px; color:var(--blue); }
.fab-locate { bottom:148px; }

.screen-head { padding:18px 16px 6px; }
.screen-head h2 { margin:0 0 4px; font-size:22px; }
.screen-head p { margin:0; color:var(--muted); font-size:14px; }

.list { padding:8px 12px 80px; }
.list .empty { color:var(--muted); text-align:center; padding:40px 20px; font-size:14px; }
.station-row { display:flex; align-items:center; gap:10px; padding:12px;
  border-radius:12px; background:#f5f6f8; margin-bottom:8px; }
.station-row .dot { width:14px; height:14px; flex:none; }
.station-row .nm { font-weight:600; }
.station-row .br { color:var(--muted); font-size:12px; }

.counters { display:flex; gap:10px; padding:0 16px 12px; }
.counters span { background:#eef0f3; border-radius:8px; padding:6px 12px; font-size:13px; }
.fuel-block { padding:4px 16px 12px; }
.fuel-title { font-size:15px; }
.fuel-hint { color:var(--muted); font-size:13px; margin:2px 0 10px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { border:1px solid var(--blue); color:var(--blue); background:#fff;
  border-radius:18px; padding:8px 16px; font-size:14px; }
.chip.active { background:var(--blue); color:#fff; }

.btn { display:block; width:calc(100% - 32px); margin:8px 16px; padding:14px;
  border:0; border-radius:12px; background:#eef0f3; font-size:16px; text-align:center;
  color:#111; text-decoration:none; }
.btn-primary { background:var(--blue); color:#fff; }

.tabbar { display:flex; border-top:1px solid #e6e8ec; background:#fff; }
.tabbar button { flex:1; border:0; background:none; padding:8px 0 10px; font-size:12px;
  color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:2px; }
.tabbar button span { font-size:20px; }
.tabbar button.active { color:var(--blue); }

.sheet { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.3); display:flex; align-items:flex-end; }
.sheet.hidden { display:none; }
.sheet-inner { background:#fff; width:100%; border-radius:18px 18px 0 0; padding:12px 16px 24px;
  max-height:80%; overflow-y:auto; }
.sheet-handle { width:40px; height:4px; background:#d0d3d8; border-radius:2px; margin:4px auto 12px; }
.sheet-inner h2 { margin:0; font-size:22px; }
.s-brand { color:var(--muted); margin:2px 0 10px; }
.s-status { display:inline-flex; align-items:center; gap:8px; background:#eef0f3;
  border-radius:18px; padding:6px 14px; font-size:14px; margin-bottom:8px; }
.s-prices { margin:2px 0 10px; font-size:13px; color:#444; line-height:1.9; }
.price-chip { background:#eef5ee; border-radius:8px; padding:3px 8px; white-space:nowrap; }
.price-chip i { color:#8a90a0; font-style:normal; font-size:11px; }
.price-empty { color:#9aa4b2; }
.s-queue-title,.s-history-title { margin:16px 0 6px; color:#444; font-size:14px; }
.s-queue { color:var(--muted); font-size:14px; margin-bottom:8px; }
.s-history { color:var(--muted); font-size:14px; }
.hist-row { padding:8px 0; border-bottom:1px solid #f0f1f3; display:flex; gap:8px; align-items:center; }

.modal { position:fixed; inset:0; z-index:1100; background:rgba(0,0,0,.4); display:flex; align-items:flex-end; }
.modal.hidden { display:none; }
.modal-inner { background:#fff; width:100%; border-radius:18px 18px 0 0; padding:20px 16px; }
.modal-inner h3 { margin:0 0 14px; }
.opt { display:flex; align-items:center; gap:10px; width:100%; padding:14px; margin-bottom:8px;
  border:1px solid #e6e8ec; border-radius:12px; background:#fff; font-size:16px; }

/* кластеры и маркеры */
.cluster { display:flex; align-items:center; justify-content:center; border-radius:50%;
  font-weight:700; color:#333; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.marker-pin { width:18px; height:18px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.4); }