:root{
  --coral:#FF385C; --coral-d:#E31C5F;
  --ink:#222222; --ink2:#5e5e5e; --ink3:#8a8a8a;
  --line:#ebebeb; --bg:#ffffff; --bg2:#f7f7f7;
  --r-card:18px; --r-pill:999px;
  --sh-s:0 2px 8px rgba(0,0,0,.06);
  --sh-m:0 6px 22px rgba(0,0,0,.12);
  --sh-l:0 -8px 30px rgba(0,0,0,.14);
  --font:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,'Helvetica Neue',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;font-family:var(--font);color:var(--ink);
  font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;}
#map{position:absolute;inset:0;}
button{font-family:inherit;cursor:pointer;}
.ic{display:inline-flex;width:20px;height:20px;flex:0 0 auto;}
.ic svg{width:100%;height:100%;display:block;}

/* ===== верхняя плашка ===== */
#topbar{
  position:absolute;top:max(14px,env(safe-area-inset-top));left:12px;
  right:calc(14px + 52px + 10px);
  max-width:520px;
  z-index:10;
  background:var(--bg);border-radius:var(--r-pill);box-shadow:var(--sh-m);
  display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;
}
.tb-brand{display:flex;align-items:center;gap:7px;font-weight:600;font-size:14px;
  color:var(--ink);white-space:nowrap;}
.tb-brand .ic{width:24px;height:24px;color:var(--coral);}
.tb-brand span{display:none;}
.fuelrow{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;padding:2px 0;}
.fuelrow::-webkit-scrollbar{display:none;}
.fuelrow button{
  border:1px solid var(--line);background:var(--bg);color:var(--ink2);
  border-radius:var(--r-pill);padding:7px 13px;font-size:13px;font-weight:600;
  white-space:nowrap;transition:all .14s;flex:0 0 auto;
  min-width:54px;text-align:center;
}
.fuelrow button:hover{border-color:#c9c9c9;}
.fuelrow button.on{background:var(--ink);border-color:var(--ink);color:#fff;}
.fuel-limit-btn{border-style:dashed!important;color:var(--ink)!important;}
.fuel-limit-btn.on{background:#f5a623!important;border-color:#f5a623!important;border-style:solid!important;color:#fff!important;}

/* светофор — FAB справа от топбара */
#trafficBtn{
  position:absolute;right:14px;top:max(14px,env(safe-area-inset-top));z-index:10;
  overflow:hidden;
}
#trafficBtn.tb-active{border-color:#ddd;box-shadow:0 0 0 2px rgba(0,0,0,.08),var(--sh-m);}
.traffic-badge{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;color:#1a1a1a;font-family:var(--font);
  line-height:1;
}

/* ===== ряд брендов ===== */
#brandrow-wrap{
  position:absolute;
  top:calc(max(14px,env(safe-area-inset-top)) + 62px);
  left:12px;right:calc(14px + 52px + 10px);
  max-width:520px;
  z-index:9;
}
#brandrow{
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  background:var(--bg);border-radius:var(--r-pill);box-shadow:var(--sh-m);
  padding:8px 12px;
}
#brandrow::-webkit-scrollbar{display:none;}
#brandrow button{
  border:1px solid var(--line);background:var(--bg);color:var(--ink2);
  border-radius:var(--r-pill);padding:6px 14px;font-size:13px;font-weight:600;
  white-space:nowrap;transition:all .14s;flex:0 0 auto;
}
#brandrow button:hover{border-color:#c9c9c9;}
#brandrow button.on{background:var(--coral);border-color:var(--coral);color:#fff;}

/* ===== контролы карты (зум + гео) ===== */
.ctrl-group{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  z-index:9;display:flex;flex-direction:column;align-items:center;gap:10px;
}
.zoom-group{
  background:var(--bg);border-radius:16px;box-shadow:var(--sh-m);
  border:1px solid var(--line);overflow:hidden;
  display:flex;flex-direction:column;
}
.zoom-btn{
  width:52px;height:52px;border:none;background:var(--bg);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:background .1s;
}
.zoom-btn .ic{width:22px;height:22px;}
.zoom-btn:first-child{border-bottom:1px solid var(--line);}
.zoom-btn:active{background:var(--bg2);}

.fab{
  width:52px;height:52px;border-radius:50%;
  border:1px solid var(--line);background:var(--bg);box-shadow:var(--sh-m);
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  transition:transform .1s;
}
.fab:active{transform:scale(.93);}
.fab .ic{width:22px;height:22px;}
.fab.locating{color:var(--coral);}

/* ===== нижняя инфо-плашка ===== */
#meta{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:max(20px,env(safe-area-inset-bottom));z-index:8;
  background:rgba(34,34,34,.9);color:#fff;backdrop-filter:blur(6px);
  font-size:12.5px;font-weight:500;padding:8px 16px;border-radius:var(--r-pill);
  box-shadow:var(--sh-m);max-width:calc(100% - 120px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:8px;
}
#meta .meta-spin{
  width:13px;height:13px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:sp .7s linear infinite;flex:0 0 auto;
}
@keyframes sp{to{transform:rotate(360deg);}}

/* ===== шторка ===== */
#backdrop{position:absolute;inset:0;z-index:20;background:rgba(0,0,0,.32);
  opacity:0;pointer-events:none;transition:opacity .25s;}
#backdrop.show{opacity:1;pointer-events:auto;}
#sheet{
  position:absolute;left:50%;bottom:0;transform:translate(-50%,100%);
  z-index:21;width:min(460px,100%);background:var(--bg);
  border-radius:24px 24px 0 0;box-shadow:var(--sh-l);
  transition:transform .34s cubic-bezier(.22,1,.36,1);
  max-height:86vh;display:flex;flex-direction:column;
  padding-bottom:max(16px,env(safe-area-inset-bottom));
  will-change:transform;
}
#sheet.show{transform:translate(-50%,0);}
.sh-grip{width:40px;height:4px;border-radius:2px;background:#dcdcdc;margin:10px auto 4px;flex:0 0 auto;}
.sh-scroll{overflow-y:auto;padding:6px 20px 4px;}
.sh-head{display:flex;align-items:flex-start;gap:12px;padding:6px 0 14px;border-bottom:1px solid var(--line);}
.sh-logo{width:44px;height:44px;border-radius:12px;background:var(--bg2);
  display:flex;align-items:center;justify-content:center;color:var(--coral);flex:0 0 auto;}
.sh-logo .ic{width:24px;height:24px;}
.sh-tt{flex:1;min-width:0;}
.sh-name{font-size:18px;font-weight:700;letter-spacing:-.2px;margin:0 0 3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sh-addr{font-size:13px;color:var(--ink3);display:flex;align-items:center;gap:5px;}
.sh-addr .ic{width:14px;height:14px;color:var(--ink3);}
.sh-close{width:32px;height:32px;border-radius:50%;border:none;background:var(--bg2);
  display:flex;align-items:center;justify-content:center;color:var(--ink2);flex:0 0 auto;}
.sh-close .ic{width:16px;height:16px;}

.statpill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;
  padding:6px 12px;border-radius:var(--r-pill);margin:14px 0 0;}
.statpill .dot{width:8px;height:8px;border-radius:50%;background:currentColor;}

.queue-card{margin:14px 0 0;padding:14px 16px;border-radius:14px;background:var(--bg2);}
.queue-top{display:flex;align-items:center;gap:9px;}
.queue-top .ic{width:20px;height:20px;color:var(--ink2);}
.queue-lab{font-size:14.5px;font-weight:700;}
.queue-sub{font-size:12.5px;color:var(--ink3);margin-top:6px;line-height:1.5;}
.queue-bar{display:flex;gap:4px;margin-top:10px;}
.queue-bar i{height:6px;border-radius:3px;flex:1;background:#e2e2e2;}
.queue-empty{font-size:13px;color:var(--ink3);}

.rows{margin:16px 0 4px;}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line);}
.row:last-child{border-bottom:none;}
.row-k{display:flex;align-items:center;gap:9px;color:var(--ink2);font-size:14px;}
.row-k .ic{width:17px;height:17px;color:var(--ink3);}
.row-v{font-size:14px;font-weight:600;text-align:right;}
.row-v.big{font-size:22px;font-weight:800;letter-spacing:-.4px;}
.chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;}
.chip{font-size:11.5px;font-weight:600;color:var(--ink2);background:var(--bg2);
  border-radius:var(--r-pill);padding:3px 9px;}

.sh-actions{display:flex;gap:10px;padding:16px 20px 4px;}
.btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  border-radius:13px;padding:13px;font-size:14.5px;font-weight:700;border:none;text-decoration:none;}
.btn .ic{width:18px;height:18px;}
.btn-primary{background:var(--coral);color:#fff;}
.btn-primary:active{background:var(--coral-d);}
.btn-ghost{background:var(--bg);color:var(--ink);border:1px solid var(--line);}

/* точки АЗС — белый кружок + цветная серединка по статусу */
.azs-dot{
  width:20px;height:20px;border-radius:50%;
  background:#fff;border:1px solid rgba(0,0,0,.1);
  box-shadow:0 1px 5px rgba(0,0,0,.3);
  margin:-10px 0 0 -10px;
  display:flex;align-items:center;justify-content:center;
}
.azs-dot-core{
  width:10px;height:10px;border-radius:50%;
  display:block;
}

/* маркер пользователя — синяя точка с пульсом */
.me-mark{position:relative;width:22px;height:22px;margin:-11px 0 0 -11px;}
.me-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:16px;height:16px;border-radius:50%;
  background:#2d8cff;border:3px solid #fff;
  box-shadow:0 1px 5px rgba(0,0,0,.35);
}
.me-pulse{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:16px;height:16px;border-radius:50%;background:rgba(45,140,255,.35);
  animation:mepulse 1.8s ease-out infinite;
}
@keyframes mepulse{
  0%{width:16px;height:16px;opacity:.6;}
  100%{width:50px;height:50px;opacity:0;}
}

/* кластеры */
.cl-bubble{
  width:44px;height:44px;border-radius:50%;
  background:#fff;border:2px solid rgba(0,0,0,.07);
  box-shadow:0 4px 16px rgba(0,0,0,.24);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;color:var(--ink);
  font-family:var(--font);letter-spacing:-.3px;line-height:1;
}

/* ===== бренд-фильтр: иконки + чипы ===== */
.brand-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;flex:0 0 auto;
  font-size:10px;font-weight:800;color:#fff;letter-spacing:0;line-height:1;
}
.brand-chip{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink2);
  border-radius:var(--r-pill);padding:7px 12px 7px 7px;font-size:13px;font-weight:600;
  white-space:nowrap;transition:all .14s;flex:0 0 auto;
}
.brand-chip:hover{border-color:#c9c9c9;}
.brand-chip.on{background:var(--ink);border-color:var(--ink);color:#fff;}
.brand-chip.on .brand-icon{filter:brightness(1.15);box-shadow:0 0 0 1.5px rgba(255,255,255,.25);}
.brand-logo{background:#fff;border-radius:5px;box-shadow:0 0 0 1px rgba(0,0,0,.06);overflow:hidden;}
.brand-logo img{width:100%;height:100%;object-fit:contain;padding:2px;box-sizing:border-box;display:block;}
.brand-chip .brand-logo{width:34px;height:20px;border-radius:4px;}
.brand-chip.on .brand-logo{box-shadow:0 0 0 1px rgba(255,255,255,.5);}
.brand-all-btn{
  border:1px solid var(--line);background:var(--bg2);color:var(--ink);
  border-radius:var(--r-pill);padding:6px 14px;font-size:13px;font-weight:700;
  white-space:nowrap;transition:all .14s;flex:0 0 auto;
}
.brand-all-btn:hover{border-color:#c9c9c9;background:var(--bg);}

/* ===== шторка «Все АЗС» ===== */
#all-backdrop{position:absolute;inset:0;z-index:22;background:rgba(0,0,0,.32);
  opacity:0;pointer-events:none;transition:opacity .25s;}
#all-backdrop.show{opacity:1;pointer-events:auto;}
#all-sheet{
  position:absolute;left:50%;bottom:0;transform:translate(-50%,100%);
  z-index:23;width:min(480px,100%);background:var(--bg);
  border-radius:24px 24px 0 0;box-shadow:var(--sh-l);
  transition:transform .34s cubic-bezier(.22,1,.36,1);
  height:90vh;display:flex;flex-direction:column;
  padding-bottom:max(16px,env(safe-area-inset-bottom));
  will-change:transform;
}
#all-sheet.show{transform:translate(-50%,0);}
.all-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 16px 10px;flex:0 0 auto;
}
.all-title{font-size:16px;font-weight:700;color:var(--ink);}
.all-search-wrap{
  padding:0 16px 10px;flex:0 0 auto;
}
#all-search{
  width:100%;border:1px solid var(--line);border-radius:12px;
  background:var(--bg2);color:var(--ink);font-family:var(--font);
  font-size:14px;padding:10px 14px;outline:none;
  transition:border-color .15s;
}
#all-search:focus{border-color:#aaa;}
#all-search::placeholder{color:var(--ink3);}
#all-list{flex:1;overflow-y:auto;padding:0 16px 8px;}
.all-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer;
}
.all-item:last-child{border-bottom:none;}
.all-item:active{background:var(--bg2);margin:0 -4px;padding:11px 4px;border-radius:8px;}
.all-brand-wrap{position:relative;flex:0 0 auto;width:32px;height:32px;}
.all-brand-wrap:has(.brand-logo){width:50px;}
.all-brand-wrap .brand-icon{width:32px;height:32px;font-size:13px;font-weight:800;}
.all-brand-wrap .brand-logo{width:50px;height:32px;border-radius:7px;}
.all-status-dot{
  position:absolute;bottom:-1px;right:-1px;
  width:10px;height:10px;border-radius:50%;
  border:2px solid var(--bg);
}
.all-info{flex:1;min-width:0;}
.all-name{font-size:14px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.all-addr{font-size:12px;color:var(--ink3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.all-dist{font-size:12.5px;font-weight:700;color:var(--ink3);flex:0 0 auto;white-space:nowrap;}
.all-empty{padding:32px 0;text-align:center;color:var(--ink3);font-size:14px;}

/* десктоп */
@media(min-width:601px){
  .tb-brand span{display:inline;}
  /* topbar + brandrow — по центру на десктопе */
  #topbar{left:50%;right:auto;transform:translateX(-50%);max-width:560px;width:max-content;}
  #brandrow-wrap{left:50%;right:auto;transform:translateX(-50%);max-width:560px;}
  #trafficBtn{right:14px;}
  #sheet{left:18px;bottom:18px;transform:translateY(calc(100% + 40px));
    border-radius:20px;max-height:calc(100% - 36px);}
  #sheet.show{transform:translateY(0);}
  #backdrop{background:transparent;pointer-events:none;}
  #backdrop.show{pointer-events:none;}
  #meta{bottom:20px;}
  #all-sheet{left:18px;bottom:18px;transform:translateY(calc(100% + 40px));
    border-radius:20px;height:calc(100vh - 56px);width:min(460px,100%);}
  #all-sheet.show{transform:translateY(0);}
  #all-backdrop{background:transparent;pointer-events:none;}
  #all-backdrop.show{pointer-events:none;}
}