@import url("tokens.css");

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--aa-paper);color:var(--aa-ink);
  font-family:var(--aa-font-body);line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--aa-orange);outline-offset:2px}

/* ---------- shell ---------- */
.app{display:flex;flex-direction:column;height:100dvh}

header.bar{
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:var(--aa-card);border-bottom:1px solid var(--aa-hair);z-index:5;box-shadow:var(--aa-shadow)
}
header.bar .logo{height:30px;flex:0 0 auto}
header.bar .spring{flex:1}
.fuel-select{
  appearance:none;border:1px solid var(--aa-hair);background:var(--aa-paper);color:var(--aa-ink);
  border-radius:var(--aa-radius-pill);padding:8px 34px 8px 14px;font-weight:600;font-size:.9rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--aa-muted) 50%),linear-gradient(135deg,var(--aa-muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat
}
.btn{
  border:1px solid var(--aa-hair);background:var(--aa-paper);color:var(--aa-ink);
  border-radius:var(--aa-radius-pill);padding:8px 16px;font-weight:700;font-size:.88rem
}
.btn.primary{background:var(--aa-gradient);color:#fff;border:none}
.btn.ghost{background:transparent}
.btn:active{transform:translateY(1px)}

/* ---------- body split ---------- */
.main{flex:1;display:flex;min-height:0;position:relative}
#map{flex:1;min-width:0}
.maplibregl-map{font-family:var(--aa-font-body)}

.panel{
  width:380px;max-width:42vw;flex:0 0 auto;display:flex;flex-direction:column;min-height:0;
  background:var(--aa-card);border-left:1px solid var(--aa-hair)
}
.controls{padding:12px 14px;border-bottom:1px solid var(--aa-hair);display:flex;flex-direction:column;gap:10px}
.controls .rowc{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--aa-muted)}
.controls input[type=range]{flex:1;accent-color:var(--aa-green)}
.controls .val{font-variant-numeric:tabular-nums;font-weight:700;color:var(--aa-ink);min-width:52px;text-align:right}
.switch{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.seg{display:flex;border:1px solid var(--aa-hair);border-radius:var(--aa-radius-sm);overflow:hidden}
.seg button{border:none;background:transparent;color:var(--aa-muted);padding:6px 12px;font-weight:600;font-size:.82rem}
.seg button.on{background:var(--aa-green-050);color:var(--aa-green)}

.list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.count{padding:9px 14px;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--aa-muted);position:sticky;top:0;background:var(--aa-card)}
.item{display:flex;gap:12px;padding:12px 14px;border-bottom:1px solid var(--aa-hair);cursor:pointer;align-items:center}
.item:hover{background:var(--aa-paper)}
.item.cheapest{background:linear-gradient(90deg,var(--aa-green-050),transparent)}
.item .rank{width:26px;height:26px;border-radius:50%;background:var(--aa-paper);border:1px solid var(--aa-hair);
  display:grid;place-items:center;font-size:.72rem;font-weight:800;color:var(--aa-muted);flex:0 0 auto}
.item.cheapest .rank{background:var(--aa-green);color:#fff;border:none}
.item .info{flex:1;min-width:0}
.item .nome{font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .meta{font-size:.78rem;color:var(--aa-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .right{text-align:right;flex:0 0 auto}
.item .preco{font-family:var(--aa-font-price);font-weight:800;font-size:1.12rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.item .preco.none{color:var(--aa-muted);font-size:.82rem;font-weight:600}
.item .preco.best{color:var(--aa-green)}
/* selos de comodidade */
.item .selos{display:flex;gap:5px;margin-top:4px;font-size:.85rem;line-height:1}
.item .selos .selo{opacity:.9}

/* frescor do preço — confiança vale mais que parecer atualizado */
.item .fresh{font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  margin-top:3px;padding:.12em .45em;border-radius:999px;display:inline-block;white-space:nowrap}
.item .fresh.novo{background:var(--aa-green-050);color:var(--aa-green)}
.item .fresh.recente{background:rgba(47,111,176,.12);color:#2F6FB0}
.item .fresh.antigo{background:var(--aa-orange-050);color:var(--aa-orange)}
.item .fresh.velho{background:rgba(194,59,52,.12);color:var(--aa-crit)}
.item .ref{font-size:.7rem;font-weight:700;color:var(--aa-muted);margin-top:2px;text-align:right}
.item .ref span{font-weight:500;opacity:.8}

.item .fav{background:none;border:none;font-size:1.15rem;line-height:1;padding:4px;color:var(--aa-muted)}
.item .fav.on{color:var(--aa-orange)}
/* ---------- map markers (DEFINITIVO v3) ---------- */
/* filter:drop-shadow no .station-pin criava paint container que inflava
   o getBoundingClientRect() com o tamanho dos children absolute overflow.
   Resultado: MapLibre calculava anchor baseado em ~59px em vez de 40px,
   e o pin ficava deslocado 19px pra baixo.
   Solução: drop-shadow vai no SVG filter inline (não CSS filter),
   assim getBoundingClientRect() fica EXATO em 32x40. */
.station-pin{display:block;width:32px;height:40px;cursor:pointer;overflow:visible}
.station-pin svg{width:32px;height:40px;display:block;
/* drop-shadow apenas visual, nao cria paint container inflado */}
.station-pin .lp{position:absolute;bottom:calc(100% - 2px);left:50%;
  transform:translate(-50%,0);
  background:var(--pin,#1F8F4E);color:#fff;font-size:.66rem;font-weight:800;
  font-variant-numeric:tabular-nums;padding:3px 7px;border-radius:9px;
  white-space:nowrap;display:flex;align-items:center;gap:5px;line-height:1.1}
.station-pin .lp::after{content:"";position:absolute;top:100%;left:50%;
  transform:translate(-50%,0);border:5px solid transparent;border-top-color:var(--pin,#1F8F4E)}
.station-pin .lp i{font-style:normal;font-size:.56rem;background:rgba(255,255,255,.28);padding:0 4px;border-radius:5px}
.station-pin.rank-1{z-index:6} .station-pin.rank-2{z-index:5} .station-pin.rank-3{z-index:4}
/* atalho 1º/2º/3º na lateral esquerda do mapa */
#rankNav{position:absolute;left:10px;top:118px;z-index:5;display:flex;flex-direction:column;gap:7px}
#rankNav .rk{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:52px;padding:5px 2px;border:none;border-radius:12px;cursor:pointer;color:#fff;
  background:var(--rk);box-shadow:0 3px 10px rgba(0,0,0,.28);line-height:1.05;
  border:2px solid rgba(255,255,255,.7)}
#rankNav .rk b{font-size:.9rem;font-weight:800}
#rankNav .rk span{font-size:.6rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.95}
#rankNav .rk:active{transform:scale(.94)}
/* "você está aqui" — ponto azul pulsante */
.me-dot{width:22px;height:22px;position:relative}
.me-dot .core{position:absolute;inset:5px;border-radius:50%;background:#2F6FB0;border:2.5px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.45)}
.me-dot .pulse{position:absolute;inset:0;border-radius:50%;background:rgba(47,111,176,.35)}
@media(prefers-reduced-motion:no-preference){.me-dot .pulse{animation:mepulse 2s ease-out infinite}}
@keyframes mepulse{0%{transform:scale(.5);opacity:.85}100%{transform:scale(2.3);opacity:0}}
/* botão flutuante: cadastrar posto que falta */
.main{position:relative}
/* botão discreto: cadastrar posto (ícone circular pequeno) */
.fab-add{position:absolute;z-index:6;right:12px;top:calc(56vh - 54px);
  width:40px;height:40px;border-radius:50%;border:1px solid var(--aa-hair);cursor:pointer;
  background:#fff;color:var(--aa-green);font-size:1.5rem;line-height:1;font-weight:400;
  display:grid;place-items:center;box-shadow:0 3px 10px rgba(0,0,0,.22)}
.fab-add:active{transform:scale(.93)}
@media(min-width:761px){.fab-add{top:auto;bottom:16px}}
/* popup do pin com navegação */
.maplibregl-popup-content{border-radius:13px;padding:12px 14px;box-shadow:0 10px 28px rgba(0,0,0,.22);min-width:190px}
.pop strong{font-size:.92rem;line-height:1.2;display:block}
.pop-meta{font-size:.74rem;color:var(--aa-muted);margin-top:2px}
.pop-preco{font-family:var(--aa-font-price,inherit);font-weight:800;font-size:1.08rem;color:var(--aa-green);margin:5px 0 9px}
.pop-nav{display:flex;gap:6px}
.pop-btn{flex:1;text-align:center;text-decoration:none;font-size:.74rem;font-weight:800;padding:8px 6px;border-radius:9px;white-space:nowrap}
.pop-btn.waze{background:#33ccff;color:#053041}
.pop-btn.maps{background:var(--aa-green);color:#fff}
.pop-btn.ghost{background:var(--aa-paper);color:var(--aa-ink);border:1px solid var(--aa-hair)}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(20,18,14,.5);display:none;align-items:center;justify-content:center;z-index:20;padding:18px}
.modal-bg.show{display:flex}
/* Consentimento (LGPD) no cadastro */
.consent{margin:2px 0 16px}
.consent .ck{display:flex;align-items:flex-start;gap:9px;font-size:.82rem;color:var(--aa-muted);cursor:pointer;line-height:1.45}
.consent .ck input{margin-top:2px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--aa-green)}
.consent a{color:var(--aa-green);font-weight:700;white-space:nowrap}

/* Loja de recompensas no detalhe do posto (só aparece se habilitada). */
.ps-loja h4{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ps-loja .saldo{font-size:.72rem;font-weight:800;color:var(--aa-green);background:var(--aa-green-050,rgba(31,143,78,.1));
  padding:3px 9px;border-radius:var(--aa-radius-pill)}
.rw-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.rw{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--aa-hair);border-radius:12px;background:var(--aa-card)}
.rw-info{flex:1;min-width:0}
.rw-t{font-weight:700;font-size:.9rem}
.rw-d{font-size:.76rem;color:var(--aa-muted)}
.rw-btn{flex:0 0 auto;border:none;border-radius:var(--aa-radius-pill);padding:9px 14px;font-weight:800;font-size:.82rem;cursor:pointer;
  background:var(--aa-gradient,linear-gradient(135deg,#E8720C,#1F8F4E));color:#fff}
.rw-btn.off{background:var(--aa-paper);color:var(--aa-muted);border:1px solid var(--aa-hair);cursor:not-allowed}

/* Posto parceiro (afiliado) — destaque de vitrine na paridade de preço. */
.item.afiliado{background:linear-gradient(90deg,rgba(31,143,78,.07),transparent);border-left:3px solid var(--aa-green)}
.badge-afi{display:inline-block;margin-left:6px;font-size:.62rem;font-weight:800;vertical-align:middle;
  color:#fff;background:var(--aa-green);padding:2px 7px;border-radius:var(--aa-radius-pill);letter-spacing:.02em}

/* Anúncio (slot home_top) — banner patrocinado no topo da lista. */
#adSlot{padding:10px 12px 0}
.ad{position:relative;border-radius:14px;padding:12px 14px;display:flex;
  align-items:center;gap:12px;cursor:pointer;overflow:hidden;color:#fff;
  background-size:cover;background-position:center;box-shadow:var(--aa-shadow)}
/* scrim escuro só quando há IMAGEM de fundo (pra o texto ler); no gradiente não precisa */
.ad.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15));z-index:0}
.ad>*{position:relative;z-index:1}
.ad-body{flex:1;min-width:0}
.ad-tag{display:inline-block;font-size:.56rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;
  background:rgba(255,255,255,.22);padding:2px 7px;border-radius:6px;margin-bottom:5px}
.ad-tit{font-family:var(--aa-font-display);font-weight:800;font-size:.98rem;line-height:1.2}
.ad-sub{font-size:.78rem;opacity:.92;margin-top:2px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ad-cta{background:#fff;color:var(--aa-green);border-radius:var(--aa-radius-pill);
  padding:8px 13px;font-weight:800;font-size:.8rem;white-space:nowrap;flex:0 0 auto;box-shadow:0 2px 8px rgba(0,0,0,.18)}

/* filtros de comodidade (chips roláveis) */
.comod-filtros{display:flex;gap:7px;overflow-x:auto;padding-top:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.comod-filtros::-webkit-scrollbar{display:none}
.cf{flex:0 0 auto;border:1px solid var(--aa-hair);background:var(--aa-paper);color:var(--aa-muted);
  border-radius:var(--aa-radius-pill);padding:6px 11px;font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap}
.cf.on{background:var(--aa-green-050,rgba(31,143,78,.1));color:var(--aa-green);border-color:var(--aa-green)}
.vazio{padding:28px 16px;text-align:center;color:var(--aa-muted);font-size:.9rem}

/* termos/privacidade dentro do app */
.legal-body{max-height:74vh;overflow-y:auto;padding:0 2px 18px}
.legal-body h1{font-size:1.2rem;margin:.5rem 0 .2rem}
.legal-body h2{font-size:1rem;color:var(--aa-green);margin:1.1rem 0 .35rem}
.legal-body p,.legal-body li{font-size:.87rem;line-height:1.6;color:var(--aa-ink)}
.legal-body ul{padding-left:20px}
.legal-body .card{background:var(--aa-paper);border:1px solid var(--aa-hair);border-radius:12px;padding:12px 14px;margin:10px 0}
.legal-body table{width:100%;border-collapse:collapse;margin:8px 0;font-size:.8rem}
.legal-body td,.legal-body th{border:1px solid var(--aa-hair);padding:6px 8px;text-align:left;vertical-align:top}
.legal-body a{color:var(--aa-green)}
.legal-foot{padding:14px 12px 22px;display:flex;gap:8px;justify-content:center;font-size:.78rem;color:var(--aa-muted)}
.legal-foot a{color:var(--aa-muted);text-decoration:underline}

/* espaço no rodapé quando o banner AdMob está na tela (app nativo).
   O ADAPTIVE_BANNER ocupa ~56px no BOTTOM_CENTER e fica POR CIMA da webview,
   então tudo que encosta no rodapé (grip "ver mapa maior", sheets, KPIs) tem
   que subir esse tanto, senão o anúncio tapa. */
body.has-admob .panel{padding-bottom:60px}
body.has-admob .legal-foot{margin-bottom:52px}
/* grip fixo do "ver lista / ver mapa maior" no modo mapa cheio */
body.has-admob .app.map-max .panel-grip{bottom:58px !important}
/* sheets (menu, indique, abastecimentos, cidades): a área rolável ganha folga
   pra última linha/KPI não ficar embaixo do banner */
body.has-admob .sheet .items,
body.has-admob .sheet.menu .menu-list{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px)) !important}
body.has-admob .legal-body{padding-bottom:74px}

/* menu (perfil, favoritos, recompensas, legal, sair) */
.menu-head{display:flex;align-items:center;gap:12px;padding:2px 4px 14px;border-bottom:1px solid var(--aa-hair)}
.menu-av{position:relative;width:52px;height:52px;border-radius:50%;background:var(--aa-green);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.2rem;flex:0 0 auto;border:none;cursor:pointer;overflow:visible;padding:0}
.menu-av .av-cam{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:.62rem;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.ns-endereco{font-size:.82rem;color:var(--aa-muted);background:var(--aa-paper);border:1px solid var(--aa-hair);border-radius:10px;padding:8px 10px;margin:2px 0 10px;line-height:1.35}
.ns-foto{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.ns-foto #nsFotoPrev{width:46px;height:46px;object-fit:cover;border-radius:10px;border:1px solid var(--aa-hair)}
.ns-foto-hint{font-size:.72rem;color:var(--aa-muted)}
.abast-resumo{display:flex;gap:8px;padding:4px 14px 12px}
.abast-resumo .ab-card{flex:1;background:var(--aa-paper);border:1px solid var(--aa-hair);border-radius:12px;padding:10px 8px;text-align:center}
.abast-resumo .ab-card.ab-cash{background:var(--aa-green-050);border-color:transparent}
.abast-resumo .ab-lbl{font-size:.64rem;text-transform:uppercase;letter-spacing:.04em;color:var(--aa-muted);font-weight:700}
.abast-resumo .ab-val{font-size:1.05rem;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.abast-resumo .ab-cash .ab-val{color:var(--aa-green)}
.ab-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid var(--aa-hair)}
.ab-info{flex:1;min-width:0}
.ab-posto{font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-posto span{color:var(--aa-muted);font-weight:400}
.ab-quando{font-size:.76rem;color:var(--aa-muted);margin-top:1px}
.ab-cb{display:inline-block;font-size:.72rem;font-weight:700;color:var(--aa-green);margin-top:2px}
.ab-st{font-size:.66rem;background:var(--aa-hair);color:var(--aa-muted);padding:1px 6px;border-radius:6px;text-transform:uppercase}
.ab-valor{font-family:var(--aa-font-price,inherit);font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums;flex:0 0 auto}
.abast-vazio{padding:2rem 1.4rem;text-align:center;color:var(--aa-muted);font-size:.9rem;line-height:1.5}
.abast-vazio span{font-size:.82rem}
.ind-hero{margin:4px 14px 12px;padding:16px;border-radius:16px;background:linear-gradient(135deg,#1F8F4E,#0e5c33);color:#fff;text-align:center}
.ind-nivel{display:inline-block;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;background:rgba(255,255,255,.22);padding:3px 10px;border-radius:99px}
.ind-pts{font-size:2.2rem;font-weight:800;line-height:1.1;margin-top:6px}
.ind-pts span{font-size:.9rem;font-weight:600;opacity:.9}
.ind-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden;margin:10px 0 6px}
.ind-bar div{height:100%;background:#fff;border-radius:99px;transition:width .4s}
.ind-falta{font-size:.78rem;opacity:.95}
.ind-perk{margin:0 14px 12px;padding:11px 14px;border-radius:12px;border:1px dashed var(--aa-hair);background:var(--aa-paper);font-size:.86rem;display:flex;flex-direction:column;gap:2px}
.ind-perk b{font-weight:800}
.ind-perk span{font-size:.78rem;color:var(--aa-muted)}
.ind-perk.on{border-style:solid;border-color:transparent;background:linear-gradient(135deg,rgba(217,119,6,.14),rgba(31,143,78,.12))}
.ind-perk.on span{color:var(--aa-ink)}
.ind-link-box{margin:0 14px 12px;padding:12px 14px;border:1px solid var(--aa-hair);border-radius:14px;background:var(--aa-paper)}
.ind-link-lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--aa-muted);font-weight:700}
.ind-link{font-size:.9rem;font-weight:700;color:var(--aa-green);word-break:break-all;margin:4px 0 10px}
.ind-acts{display:flex;gap:8px}
.ind-acts .btn{flex:1;justify-content:center;text-align:center}
.ind-cod{font-size:.76rem;color:var(--aa-muted);margin-top:8px;text-align:center}
.ind-como{margin:0 14px 12px;padding:10px 14px;border:1px solid var(--aa-hair);border-radius:14px}
.ind-como-tit{font-weight:800;font-size:.9rem;margin-bottom:6px}
.ind-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:.88rem;border-top:1px solid var(--aa-hair)}
.ind-row:first-of-type{border-top:none}
.ind-row b{color:var(--aa-green);font-variant-numeric:tabular-nums}
.ind-stats{display:flex;gap:8px;margin:0 14px 12px}
.ind-stats div{flex:1;text-align:center;background:var(--aa-paper);border:1px solid var(--aa-hair);border-radius:12px;padding:10px 4px}
.ind-stats b{display:block;font-size:1.2rem;font-weight:800;font-variant-numeric:tabular-nums}
.ind-stats span{font-size:.66rem;color:var(--aa-muted);text-transform:uppercase;letter-spacing:.03em}
.menu-nome{font-weight:800;font-size:1rem}
.menu-email{font-size:.8rem;color:var(--aa-muted)}
.menu-head .x{margin-left:auto}
.menu-list{padding:8px 2px 8px;display:flex;flex-direction:column}
.menu-it{display:flex;align-items:center;gap:12px;padding:13px 12px;border:none;background:none;cursor:pointer;
  font-size:.95rem;font-weight:600;color:var(--aa-ink);text-align:left;border-radius:10px;width:100%}
.menu-it span{font-size:1.1rem;width:24px;text-align:center;flex:0 0 auto}
.menu-it em{font-style:normal;color:var(--aa-muted);font-size:.82rem;margin-left:auto}
.menu-it:hover{background:var(--aa-paper)}
.menu-it.on{color:var(--aa-green)}
.menu-it.sair{color:#dc2626}
.menu-it.excluir{color:#b91c1c}
.menu-sep{height:1px;background:var(--aa-hair);margin:6px 10px}
/* header enxuto: tema/localização/sair foram pro menu */
#btnTema, #btnMyLoc, #btnAuth{display:none !important}
.btn-icon{display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;color:var(--aa-ink)}
.btn-icon svg{display:block}
/* menu nunca corta o "Sair": rola se preciso + respeita a barra do sistema */
.sheet.menu{max-height:90vh;display:flex;flex-direction:column}
.sheet.menu .menu-list{overflow-y:auto;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));-webkit-overflow-scrolling:touch}

/* Cláusula pétrea: o app só funciona logado. Com o gate ativo, o conteúdo
   atrás fica coberto e sem interação — não dá pra ver nem mexer sem entrar. */
body.aa-locked .app{pointer-events:none;user-select:none;filter:blur(7px) saturate(.85)}
body.aa-locked #authModal{background:linear-gradient(160deg,var(--aa-green) 0%,#0e5c33 100%)}
.modal{background:var(--aa-card);border-radius:var(--aa-radius);box-shadow:var(--aa-shadow);width:100%;max-width:380px;padding:24px;border:1px solid var(--aa-hair)}
.modal h2{margin:0 0 4px;font-family:var(--aa-font-display);font-size:1.3rem;letter-spacing:-.02em}
.modal p.sub{margin:0 0 18px;color:var(--aa-muted);font-size:.9rem}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field label{font-size:.78rem;font-weight:700;color:var(--aa-muted)}
.field input,.field select{border:1px solid var(--aa-hair);background:var(--aa-paper);color:var(--aa-ink);border-radius:var(--aa-radius-sm);padding:11px 13px;font-size:.95rem;font-family:inherit}
.modal .err{color:var(--aa-crit);font-size:.82rem;margin:-6px 0 12px;min-height:1em}
.modal .actions{display:flex;gap:10px;margin-top:4px}
.modal .actions .btn{flex:1;justify-content:center;text-align:center}
.btn.danger{background:#b91c1c;color:#fff;border-color:#b91c1c}
.btn.danger:disabled{opacity:.6;cursor:wait}
.delete-account-body{padding:2px 20px calc(24px + env(safe-area-inset-bottom,0px))}
.delete-account-body>p{margin:0 0 18px;color:var(--aa-muted);font-size:.9rem;line-height:1.5}
.delete-account-body>p b{color:#b91c1c}
.delete-account-body .err{color:var(--aa-crit);font-size:.82rem;min-height:1.2em;margin:0 0 10px}
.delete-account-body .actions{display:flex;gap:10px}
.delete-account-body .actions .btn{flex:1;justify-content:center}
.link{background:none;border:none;color:var(--aa-green);font-weight:700;font-size:.86rem;padding:0}

/* ---------- seletor (campo que abre a folha) ---------- */
.picker{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  border:1px solid var(--aa-hair);background:var(--aa-paper);color:var(--aa-ink);
  border-radius:var(--aa-radius-sm);padding:11px 13px;font-size:.95rem;font-family:inherit
}
.picker .ic{font-size:1.05rem;line-height:1}
.picker .val{flex:1;font-weight:600}
.picker .val.empty{color:var(--aa-muted);font-weight:500}
.picker .chev{color:var(--aa-muted);font-size:.75rem}
.picker:active{border-color:var(--aa-green)}

/* ---------- bottom sheet ---------- */
.sheet-bg{
  position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(20,18,14,.45);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .22s ease
}
.sheet-bg.show{opacity:1;pointer-events:auto}
.sheet{
  width:100%;max-width:520px;max-height:88dvh;display:flex;flex-direction:column;
  background:var(--aa-card);border-radius:22px 22px 0 0;
  box-shadow:0 -8px 40px -12px rgba(0,0,0,.4);
  transform:translateY(100%);transition:transform .26s cubic-bezier(.22,1,.36,1)
}
.sheet-bg.show .sheet{transform:translateY(0)}
.sheet .grip{width:40px;height:4px;border-radius:2px;background:var(--aa-hair);margin:10px auto 4px}
.sheet header{display:flex;align-items:center;gap:12px;padding:8px 20px 12px}
.sheet header h3{flex:1;margin:0;font-size:1.15rem;font-weight:800;letter-spacing:-.02em}
.sheet header .x{
  border:none;background:var(--aa-paper);color:var(--aa-muted);width:32px;height:32px;
  border-radius:50%;font-size:1.05rem;line-height:1;display:grid;place-items:center
}
.sheet .search{padding:0 20px 12px}
.sheet .search input{
  width:100%;border:1px solid var(--aa-hair);background:var(--aa-paper);color:var(--aa-ink);
  border-radius:var(--aa-radius-pill);padding:12px 16px;font-size:.95rem;font-family:inherit
}
.sheet .search input:focus{outline:none;border-color:var(--aa-green)}
.sheet .items{overflow-y:auto;padding:0 12px 20px;-webkit-overflow-scrolling:touch}

.city{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  border:none;background:transparent;padding:13px 12px;border-radius:12px;
  color:var(--aa-ink);font-family:inherit;font-size:.98rem
}
.city:active{background:var(--aa-paper)}
.city .pin{
  width:38px;height:38px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--aa-green-050);color:var(--aa-green);font-size:1.05rem
}
.city .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.city .nm{display:block;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.city .sb{display:block;font-size:.8rem;color:var(--aa-muted);line-height:1.2}
.city .ck{color:var(--aa-green);font-weight:800;opacity:0}
.city.sel{background:var(--aa-green-050)}
.city.sel .ck{opacity:1}
.city.sel .pin{background:var(--aa-green);color:#fff}
.sheet .empty{padding:34px 20px;text-align:center;color:var(--aa-muted);font-size:.92rem}

/* ---------- detalhe do posto ---------- */
.ps-topo{padding:4px 12px 14px}
.ps-preco{font-family:var(--aa-font-price);font-weight:800;font-size:2.3rem;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--aa-green);display:flex;align-items:center;gap:10px}
.ps-preco.none{font-size:1.1rem;color:var(--aa-muted)}
.ps-preco .fresh{font-size:.6rem}
.ps-meta{font-size:.88rem;color:var(--aa-muted);margin-top:2px}
.ps-end{font-size:.85rem;color:var(--aa-muted);margin-top:6px;line-height:1.4}

.ps-sec{padding:0 12px 14px}
.ps-sec h4{margin:0 0 8px;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--aa-muted)}
.cmds{display:flex;flex-wrap:wrap;gap:6px}
.cmd{font-size:.8rem;background:var(--aa-green-050);color:var(--aa-ink);
  border:1px solid var(--aa-hair);padding:.3em .7em;border-radius:var(--aa-radius-pill)}

.ps-acoes{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px 8px}
.ps-acoes .btn{text-align:center;text-decoration:none;padding:12px;font-size:.9rem}
.ps-acoes .btn.primary{grid-column:1/-1}

/* ---------- banner de rede (offline) ---------- */
#netBanner{position:fixed;top:0;left:0;right:0;z-index:60;
  background:var(--aa-crit);color:#fff;text-align:center;font-size:.82rem;font-weight:600;
  padding:8px;transform:translateY(-100%);transition:transform .25s}
#netBanner.show{transform:translateY(0)}

/* ---------- toast ---------- */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--aa-ink);color:var(--aa-paper);padding:11px 18px;border-radius:var(--aa-radius-pill);
  font-size:.88rem;font-weight:600;z-index:30;transition:.25s;pointer-events:none;max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- atribuição do mapa (discreta; aparece no hover) ---------- */
.maplibregl-ctrl-bottom-right{opacity:.3;transform:scale(.8);transform-origin:bottom right;transition:opacity .2s,transform .2s}
.maplibregl-ctrl-bottom-right:hover{opacity:.9;transform:scale(1)}

/* ---------- alça pra recolher o painel (deixar o mapa maior) ---------- */
.panel-grip{display:none;width:100%;border:none;background:var(--aa-card);cursor:pointer;
  padding:8px 0 6px;flex-direction:column;align-items:center;gap:4px;border-bottom:1px solid var(--aa-hair)}
.panel-grip .bar{width:40px;height:4px;border-radius:99px;background:var(--aa-hair);transition:background .15s}
.panel-grip:hover .bar{background:var(--aa-green)}
.panel-grip em{font-style:normal;font-size:.64rem;font-weight:700;color:var(--aa-muted);text-transform:uppercase;letter-spacing:.06em}

/* ---------- responsivo ---------- */
@media(max-width:760px){
  .main{flex-direction:column}
  #map{height:50vh;flex:none;transition:height .25s ease}
  /* no mobile o PAINEL INTEIRO é o container de scroll (um só) — assim a roda
     do mouse / arrasto rola controles + lista + anúncio juntos. Sem scroll
     aninhado (a .list não rola sozinha aqui), que é o que travava a página. */
  .panel{width:100%;max-width:none;flex:1 1 auto;border-left:none;border-top:1px solid var(--aa-hair);
    overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .panel .list{flex:none;overflow:visible;min-height:0}
  .panel .controls{position:sticky;top:0;z-index:6;background:var(--aa-card)}
  .panel #adSlot{padding:12px 14px 0}
  .panel .count{position:static}
  header.bar .fuel-select{padding:8px 30px 8px 12px}
  .panel-grip{display:flex}
  /* mapa maior: ESCONDE TUDO do painel e o mapa toma a tela INTEIRA;
     sobra só a alça "ver lista" fixa no rodapé. */
  .app.map-max #map{flex:1 1 0 !important;height:auto !important;min-height:0}
  .app.map-max .panel{flex:0 0 0 !important;height:0 !important;min-height:0;padding:0 !important;overflow:hidden}
  .app.map-max .panel > *{display:none !important}
  .app.map-max .panel-grip{display:flex !important;position:fixed;left:0;right:0;bottom:0;z-index:20;
    background:var(--aa-card);padding:12px 0 14px;box-shadow:0 -3px 12px rgba(0,0,0,.1)}
}