/* ── RESPONSIVE ── */
/* ── MAIN ── */
.main{flex:1;min-width:0;display:flex;flex-direction:column}

/* ── BOTTOM NAV (mobile) ── */
.bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:var(--s);border-top:1px solid var(--bd);
  padding-bottom:env(safe-area-inset-bottom);
  transition:background .3s,border-color .3s;
}
.bn-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;padding:10px 4px 12px;
  border:none;background:none;cursor:pointer;color:var(--tx3);
  font-family:var(--disp);font-size:9px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  transition:color .15s;-webkit-tap-highlight-color:transparent;
}
.bn-ic{font-size:22px;line-height:1;display:block}
.bn-btn.on{color:var(--ac)}
.bn-btn.on .bn-ic{filter:drop-shadow(0 0 6px var(--ac))}

/* ── GLOBAL TOUCH OPTIMIZATIONS ── */
button,.btn,.nb,.bn-btn{touch-action:manipulation}
input,select,textarea{font-size:16px!important} /* prevent iOS zoom */

@keyframes su-mob{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ── Mobile topbar controls (theme + exit) ── */
.topbar-mob-ctrl{display:none;align-items:center;gap:4px;margin-left:8px;flex-shrink:0}
.tmob-btn{background:none;border:1px solid var(--bd2);border-radius:8px;padding:6px 9px;cursor:pointer;font-size:16px;line-height:1;color:var(--tx2);transition:background .15s;-webkit-tap-highlight-color:transparent}
.tmob-btn:active{background:var(--bd)}

/* ── TABLET (≤860px) ── */
@media(max-width:860px){
  .sb{width:58px}
  .sb-brand,.sb-tagline,.sb-sec,.nb span:not(.ni),.pill,.sbclbl,.cpill span,.theme-toggle,.sb-user-info,.sb-logout{display:none}
  .topbar-mob-ctrl{display:flex}
  .gr.g4{grid-template-columns:1fr 1fr}
  .ct{padding:14px 13px}
  .topbar{padding:12px 14px}
}

/* ── MOBILE (≤600px) ── */
@media(max-width:600px){
  .sb{display:none}
  .bottom-nav{display:flex}
  .ct{padding:12px 12px 84px}
  .topbar{padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top))}
  .ptitle{font-size:17px}
  .gr.g3,.gr.g4{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr}
  .ov{align-items:flex-end;padding:0}
  .modal{
    width:100%;max-width:100%;
    border-radius:20px 20px 0 0;
    padding:22px 16px 32px;
    animation:su-mob .25s ease-out;
    max-height:92vh;
  }
  .modal.w{max-width:100%}
  .mft{flex-wrap:wrap}
  .mft .btn{flex:1;min-width:120px;justify-content:center;text-align:center}
  .kv{font-size:22px;letter-spacing:-.5px}
  .kpi{padding:14px 12px}
  .topbar .tbr{gap:6px}
  .rcard{padding:14px 14px}
}

/* ── NARROW MOBILE (≤430px) ── */
@media(max-width:430px){
  .car-km-ctrl{width:100%;justify-content:flex-end;margin-top:4px}
}