/* 手机端（≤760px）：导航转抽屉、宽表转卡片。
   只在 media query 命中时生效，桌面端逐像素不变。
   index.html 里以 media="(max-width:760px)" 引入，双保险。 */

@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }

  /* 导航 → 抽屉 */
  .nav {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 242px; height: 100vh;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, .4);
  }
  .nav.open { transform: none; }

  .nav-veil {
    position: fixed; inset: 0; z-index: 45;
    background: rgba(0, 0, 0, .45);
    opacity: 0; pointer-events: none;
    transition: opacity .2s;
  }
  .nav-veil.show { opacity: 1; pointer-events: auto; }

  .hamburger { display: inline-flex; }

  .topbar { padding: 9px 12px; gap: 8px; }
  .topbar h2 { font-size: 14px; }
  .topbar .sub { display: none; }
  #serviceState { display: none; }

  .view { padding: 12px 12px 70px; }

  /* KPI 两列 */
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi .v { font-size: 20px; }

  /* 宽表 → 卡片 */
  table.table thead { display: none; }
  table.table, table.table tbody, table.table tr, table.table td { display: block; width: 100%; }
  table.table tr {
    border: 1px solid var(--line);
    border-radius: 10px;
    margin: 8px;
    padding: 6px 4px;
    background: var(--surface);
  }
  table.table tbody tr:hover td { background: transparent; }
  table.table td {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 5px 8px;
    border: none;
    text-align: left !important;
  }
  table.table td::before {
    content: attr(data-l);
    flex: 0 0 84px;
    color: var(--ink-3);
    font-size: 11px;
    font-weight: 600;
    padding-top: 2px;
  }
  table.table td:empty { display: none; }
  .cell-sub { font-size: 11px; }
  .clamp2 { max-width: none; -webkit-line-clamp: 4; }

  /* 卡片内边距收紧 */
  .card { margin-bottom: 10px; }
  .card-b { padding: 10px 12px; }
  .card-h { padding: 10px 12px; }

  /* 工具条换行 */
  .toolbar { gap: 6px; }
  .filters { width: 100%; }
  .filters .input, .filters .select { flex: 1 1 44%; min-width: 0; }

  /* 图表窄屏高度收一点 */
  .chart-box svg { min-height: 180px; }

  /* 配置编辑器 */
  .textarea { min-height: 260px; font-size: 12px; }
  .switch { padding: 7px 8px; }

  /* 弹层全宽 */
  .modal { width: 100%; max-height: 92vh; }
  .modal-mask { padding: 8px; align-items: flex-end; }
  .modal { border-radius: 14px 14px 0 0; }

  #toast { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
  .toast-item { max-width: none; }
}