@media (max-width: 700px) {
  /* ── Body ── */
  body { padding: 2px !important; font-size: 11px !important; }
  .container { padding: 0 !important; }

  /* ══ NAV: 3 кнопки в ряд, очень компактно ══ */
  .nav-bar, .nav-bar-wrap {
    gap: 2px !important;
    padding: 3px !important;
    margin-bottom: 3px !important;
    border-radius: 6px !important;
  }
  .nav-btn {
    flex: 1 1 calc(33.33% - 3px) !important;
    text-align: center !important;
    padding: 3px 2px !important;
    font-size: 9px !important;
    border-radius: 4px !important;
    box-sizing: border-box;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-user {
    width: 100% !important;
    text-align: right !important;
    font-size: 9px !important;
    order: 99;
    margin-top: 1px !important;
    padding: 0 2px !important;
  }

  /* ── Cards / общие ── */
  .card { padding: 5px !important; margin-bottom: 4px !important; border-radius: 6px !important; }
  .header { padding: 5px !important; flex-wrap: wrap; gap: 4px; }
  h1 { font-size: 13px !important; }
  h2 { font-size: 12px !important; }
  h3 { font-size: 11px !important; }
  .btn, button { font-size: 10px !important; padding: 3px 7px !important; }
  .badge, .rp, .up { font-size: 9px !important; padding: 1px 4px !important; }
  input, select, textarea { font-size: 12px !important; }

  /* ══════════════════════════════════════════
     МАРШРУТЫ
     ══════════════════════════════════════════ */
  body { overflow: auto !important; height: auto !important; }
  html { height: auto !important; overflow: auto !important; }

  .hdr {
    padding: 3px 4px !important;
    gap: 2px !important;
    min-height: unset !important;
    flex-shrink: 0;
  }
  .hdr-logo { font-size: 10px !important; margin-right: 1px !important; }

  .layout {
    flex-direction: column !important;
    overflow: visible !important;
    height: auto !important;
    min-height: unset !important;
  }
  .sb {
    width: 100% !important;
    max-height: 35vh !important;
    border-right: none !important;
    border-bottom: 1px solid #fc3f1d !important;
    flex-shrink: 0;
  }
  .ml-head { padding: 5px 7px !important; }
  .ml-title { font-size: 11px !important; margin-bottom: 4px !important; }
  .btn-new { padding: 5px !important; font-size: 11px !important; }
  .ml-items { max-height: 15vh !important; overflow-y: auto !important; }
  .ml-item { padding: 4px 7px !important; font-size: 11px !important; }
  .ml-dot { width: 7px !important; height: 7px !important; }
  .ep { width: 100% !important; max-height: 45vh !important; overflow-y: auto !important; padding: 5px !important; }
  .ep-inp { padding: 3px 6px !important; font-size: 11px !important; margin-bottom: 3px !important; }
  .ep-lb { font-size: 10px !important; margin-bottom: 1px !important; margin-top: 3px !important; }
  .ep-tps { gap: 2px !important; }
  .ep-tp { padding: 3px 4px !important; font-size: 9px !important; }
  .ep-btns { gap: 3px !important; }
  .ep-sv, .ep-rm, .ep-rs { padding: 4px 6px !important; font-size: 10px !important; }
  .ep-pal { gap: 3px !important; }
  .ep-clr { width: 18px !important; height: 18px !important; }
  .ep-st { padding: 4px 3px !important; font-size: 10px !important; }
  .mw { flex: 1 !important; position: relative !important; min-height: 52vh !important; }
  #ymap { position: absolute !important; inset: 0 !important; height: 100% !important; }
  .ftb { top: 3px !important; left: 3px !important; right: 3px !important; }
  .ftb-inp { font-size: 11px !important; padding: 3px 6px !important; }
  .ftb-go { font-size: 11px !important; padding: 3px 6px !important; }
  .ftb-tool { font-size: 10px !important; padding: 3px 5px !important; }
  .hint { font-size: 10px !important; padding: 4px 8px !important; }

  /* ══════════════════════════════════════════
     ПРОЗВОНЫ
     ══════════════════════════════════════════ */
  .stats-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    padding: 4px !important;
    margin-bottom: 3px !important;
    border-radius: 6px !important;
  }
  .stat-box {
    flex: 1 1 calc(25% - 2px) !important;
    min-width: unset !important;
    padding: 2px 3px !important;
    text-align: center;
  }
  .stat-num { font-size: 11px !important; }
  .stat-lbl { font-size: 7px !important; }
  .filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    padding: 4px !important;
    border-radius: 6px !important;
  }
  .filters input, .filters select {
    flex: 1 1 calc(50% - 3px) !important;
    min-width: unset !important;
    font-size: 11px !important;
    padding: 3px 5px !important;
  }
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 2px !important;
    border-radius: 6px !important;
  }
  table { font-size: 10px !important; }
  th { padding: 3px 4px !important; font-size: 9px !important; }
  td { padding: 2px 4px !important; }
  /* Скрываем менее важные колонки */
  th:nth-child(5), td:nth-child(5),
  th:nth-child(6), td:nth-child(6),
  th:nth-child(8), td:nth-child(8) { display: none !important; }
  .tag-phone { font-size: 9px !important; padding: 0 3px !important; }
  .call-select { font-size: 9px !important; padding: 1px 3px !important; }
  .btn-new-order { font-size: 9px !important; padding: 2px 5px !important; }

  /* ══════════════════════════════════════════
     ДОСТУПЫ
     ══════════════════════════════════════════ */
  .sec-ttl { font-size: 12px !important; margin-bottom: 6px !important; }
  .online-grid, #blockedGrid {
    flex-direction: column !important;
    gap: 4px !important;
  }
  .dev-card {
    min-width: unset !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 5px 7px !important;
    box-sizing: border-box;
    border-radius: 6px !important;
  }
  .dev-name { font-size: 11px !important; margin-bottom: 1px !important; }
  .dev-role { font-size: 9px !important; margin-bottom: 3px !important; }
  .dev-device { font-size: 10px !important; margin-bottom: 2px !important; }
  .dev-time { font-size: 9px !important; margin-top: 2px !important; }
  .dev-ip { font-size: 9px !important; padding: 1px 4px !important; }
  .stats { gap: 4px !important; margin-bottom: 8px !important; }
  .stat {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: unset !important;
    padding: 4px 6px !important;
    border-radius: 6px !important;
  }
  .stat-n { font-size: 14px !important; }
  .stat-l { font-size: 9px !important; }
  .srch { width: 100% !important; box-sizing: border-box !important; font-size: 11px !important; padding: 4px 8px !important; }
  .btn-r { font-size: 10px !important; padding: 4px 8px !important; }
  .btn-block, .btn-unblock { font-size: 9px !important; padding: 3px 6px !important; }
  .nd, .empty-note { padding: 12px !important; font-size: 11px !important; }
  /* City report */
  .top-bar { flex-direction: column !important; align-items: flex-start !important; padding: 6px 8px !important; gap: 4px !important; }
  .top-bar h1 { font-size: 13px !important; }
  .filters { padding: 5px 7px !important; gap: 4px !important; }
  .filters label { font-size: 10px !important; }
  .period-btn { padding: 2px 6px !important; font-size: 10px !important; }
  .filters select, .filters input { padding: 2px 5px !important; font-size: 10px !important; max-width: 90px !important; }
  .btn-apply { padding: 3px 10px !important; font-size: 10px !important; }
  .city-row { margin-bottom: 1px !important; border-radius: 3px !important; min-height: unset !important; zoom: 0.25 !important; }
  .cr-label { min-width: 38px !important; max-width: 38px !important; padding: 0 2px !important; justify-content: center !important; }
  .cr-city { font-size: 6px !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .cr-sub { font-size: 5px !important; display: none !important; }
  .cr-stats { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .cr-stat { padding: 0 1px !important; min-width: 0 !important; width: auto !important; gap: 0 !important; border-right-width: 1px !important; }
  .cr-lbl { font-size: 6px !important; letter-spacing: 0 !important; }
  .cr-val { font-size: 9px !important; font-weight: 700 !important; }
  .cr-sub-val { font-size: 6px !important; }
  .stat-grid { grid-template-columns: repeat(2,1fr) !important; gap: 5px !important; }
}