@media (max-width:640px) {
  .shell { width:calc(100% - 16px); padding-top:10px; }
  .dashboard-head { padding:11px 10px 8px; border:1px solid #30516b; border-radius:18px; background:linear-gradient(135deg,#18364b,#102132 65%); box-shadow:0 8px 28px #0003; }
  .dashboard-head header { gap:7px; }
  .dashboard-head header > div:first-child { display:flex; align-items:baseline; gap:6px; min-width:0; }
  .dashboard-head h1 { font-size:1.22rem; line-height:1.05; }
  .dashboard-head .eyebrow { display:none; }
  .dashboard-head .sub { flex:1; min-width:0; margin:0; overflow:hidden; color:#a7c2d3; font-size:.66rem; line-height:1.1; white-space:nowrap; text-overflow:ellipsis; }
  .dashboard-head .check-box { display:grid; width:100%; grid-template-columns:32px minmax(0,1fr) 32px 32px; grid-template-rows:32px; align-items:center; gap:5px; }
  .dashboard-head .check-box .dot { display:none; }
  .dashboard-head #checked { grid-column:2; grid-row:1; min-width:0; margin:0; padding:0; overflow:hidden; font-size:.66rem; line-height:1; white-space:nowrap; text-overflow:ellipsis; }
  .dashboard-head #refresh,.dashboard-head #open-statistics,.dashboard-head #use-location { width:32px; min-width:32px; height:32px; min-height:32px; padding:0; border-radius:9px; }
  .dashboard-head #refresh,#open-statistics { background:#17354b; border-color:#355d78; }
  .dashboard-head #use-location { display:inline-flex; align-items:center; justify-content:center; gap:0; border-color:#3d9dc0; color:#dff7ff; background:#153b50; }
  .dashboard-head #use-location { grid-column:1; grid-row:1; }
  .dashboard-head #refresh { grid-column:3; grid-row:1; }
  .dashboard-head #open-statistics { grid-column:4; grid-row:1; }
  .dashboard-head .location-label,.dashboard-head .action-label { display:none; }
  .dashboard-head .action-icon { display:block; width:15px; height:15px; fill:currentColor; }
  .dashboard-head #use-location svg { width:14px; height:14px; fill:currentColor; filter:drop-shadow(0 0 3px currentColor); }
  .dashboard-head #use-location[aria-pressed=true] { border-color:#43dca0; color:#b8ffdb; background:#113b32; box-shadow:0 0 12px #3ddc9740; }
  .dashboard-head #use-location.location-denied { border-color:#ff555f; color:#ffd3d6; background:#591f29; box-shadow:0 0 12px #ff555f66; }
  .dashboard-head #use-location.location-loading { color:#9be8ff; }
  .dashboard-head #refresh.is-loading .refresh-icon { animation:mobile-refresh-spin .75s linear infinite; }
  @keyframes mobile-refresh-spin { to { transform:rotate(360deg); } }
  .dashboard-head .summary { margin:8px 0 0; gap:5px; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .dashboard-head .summary-period { order:1; margin-top:2px; }
  .dashboard-head .summary-period > span { font-size:.66rem; }
  .dashboard-head .metric { position:relative; min-height:67px; padding:7px 5px; border-radius:10px; background:#08172577; }
  .dashboard-head .metric > span { font-size:.56rem; min-height:18px; line-height:1.15; }
  .dashboard-head .metric strong { font-size:1.28rem; margin:7px 0 0; }
  .dashboard-head .metric .delta { position:absolute; top:5px; right:4px; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:2px; max-width:50%; font-size:.52rem; line-height:1; }
  .dashboard-head .metric .delta-part { display:inline; }
  .dashboard-head .summary-mobile-toggle { min-height:32px; }
  .dashboard-head .summary.dynamics-open { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-head .summary.dynamics-open .metric-insight { grid-template-columns:1fr; grid-template-areas:'share' 'chart' 'note'; }
  .dashboard-head .summary.dynamics-open .metric-mini { width:100%; }
  .sorting { padding:10px 0; background:transparent; border:0; margin:4px 0; }
  .selection-row { gap:8px; }
  .compact-radius-row .radius-filter { width:100%; flex-wrap:nowrap; }
  .compact-radius-row .radius-filter strong { width:auto; font-size:.6rem; }
  .compact-radius-row .radius-filter .tabs { flex:1; width:auto; }
  .compact-radius-row .radius-filter .tab { flex:1; min-height:29px; padding:4px 3px; font-size:.66rem; }
  .arrival-filter { flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; padding:3px 1px 5px; }
  .arrival-filter::-webkit-scrollbar { display:none; }
  .arrival-filter > strong,.selection-divider { display:none; }
  .arrival-filter button,#top-ranking { flex:0 0 auto; width:auto; white-space:nowrap; min-height:40px; }
  #arrival-window-group { flex:0 0 auto; width:auto; }
  .ranking-summary { font-size:.65rem; margin-top:2px; }
  .list-heading { margin-top:8px; }
  .list-heading h2 { font-size:1rem; }
  .list-heading #list-kicker { font-size:.6rem; }
  .list-heading #list-note { font-size:.67rem; }
  .station-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .catalog-station { min-width:0; height:100%; padding:0 0 8px; border-width:1px; border-radius:14px; overflow:hidden; box-shadow:none; }
  .catalog-station .station-media { display:flex; flex:0 0 auto; width:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
  .station-media::-webkit-scrollbar { display:none; }
  .catalog-station .station-media > .photo,.catalog-station .station-media > .route-map { display:block; flex:0 0 100%; width:100%; height:174px; min-height:174px; margin:0; border:0; border-radius:0; scroll-snap-align:start; scroll-snap-stop:always; }
  .catalog-station .photo img { object-fit:cover; }
  .catalog-station .route-map img { display:block!important; object-fit:cover; }
  .catalog-station .route-map-fallback { display:grid!important; font-size:.7rem; text-align:center; padding:12px; }
  .catalog-station .route-map img[src] + .route-map-fallback { display:none!important; }
  .catalog-station .route-map-caption { position:absolute; bottom:6px; left:5px; right:5px; width:auto; background:#071321d9; border-radius:6px; padding:6px; display:block; }
  .catalog-station .route-map-caption strong { white-space:normal; font-size:.65rem; }
  .catalog-station .route-map-caption::after { display:block; font-size:.65rem; margin-top:4px; }
  .station-media-dots { display:flex; justify-content:center; gap:0; height:24px; }
  .station-media-dots button { width:28px; height:24px; padding:0; border:0; background:transparent; display:grid; place-items:center; }
  .station-media-dots button::before { content:''; width:5px; height:5px; border-radius:50%; background:#516477; }
  .station-media-dots button[aria-pressed=true]::before { width:14px; border-radius:4px; background:#75d7f8; }
  .catalog-station .photo .photo-prices { position:absolute; z-index:2; top:6px; right:6px; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
  .catalog-station .photo .photo-prices[hidden] { display:none; }
  .catalog-station .photo-price { font-size:.64rem; padding:3px 5px; box-shadow:0 1px 5px #0008; }
  .catalog-station .photo .photo-info { position:absolute; inset:auto 0 0; display:block; padding:24px 8px 7px; background:linear-gradient(transparent,rgba(4,14,23,.96) 58%); text-shadow:0 1px 3px #000; color:#fff; }
  .catalog-station .photo-info h2 { font-size:.9rem; margin:0; overflow-wrap:anywhere; color:#fff; }
  .catalog-station .photo-meta { display:flex; align-items:end; justify-content:space-between; gap:6px; margin-top:2px; }
  .catalog-station .photo-info .address { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.65rem; line-height:1.3; color:#d8e7ee; }
  .catalog-station .photo-distance { flex:0 0 auto; margin:0; font-size:.63rem; color:#effaff; }
  .catalog-station > .fuels { display:none; }
  /* Очередь всегда прижата к низу карточки. Карточки в одной строке имеют
     одинаковую высоту, поэтому плашки стоят на одной горизонтали даже при
     разном количестве строк топлива. */
  .catalog-station .queue-meter { margin:auto 8px 0; padding:5px; }
  .catalog-station .queue-meter-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 5px; font-size:.62rem; }
  .catalog-station .queue-meter-value { font-size:.65rem; }
  .catalog-station .fuel-event { display:flex; flex-wrap:wrap; gap:3px; margin:5px 8px 7px; min-height:0; }
  .catalog-station .fuel-event-row { width:100%; gap:5px; align-items:center; }
  .catalog-station .event-chip { padding:3px 4px; border-radius:5px; font-size:.58rem; line-height:1.15; }
  .catalog-station .rank-crown { left:6px; top:6px; padding:4px 5px; gap:3px; font-size:.6rem; }
  .catalog-station .rank-crown svg { width:16px; height:13px; }
  .catalog-station .rank-crown strong { font-size:.6rem; }
}