/* =================== Tablet & phone: < 1000px =================== */
@media (max-width: 999px) {
  .shell, .shell.with-pane { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .main { padding: 14px 14px calc(var(--tab-h) + 24px + env(safe-area-inset-bottom)); }
  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px);
    border-top: 1px solid var(--rule);
  }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: 11px; font-weight: 600; text-decoration: none; position: relative; }
  .tabbar a .ic { line-height: 0; }
  .tabbar a.on { color: var(--accent); }
  .tabbar a .badge { position: absolute; top: 7px; left: calc(50% + 6px); background: var(--warn); color: #fff; border-radius: 999px; font-size: 10px; padding: 0 5px; min-width: 16px; text-align: center; line-height: 16px; }
  /* Detail becomes a full-screen sheet */
  .pane { position: fixed; inset: 0; top: 0; height: 100%; z-index: 50; border: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); animation: slideup .18s ease-out; }
  @keyframes slideup { from { transform: translateY(16px); opacity: .6 } to { transform: none; opacity: 1 } }
  .pane-close { display: inline-flex; }
  .detail .actions .btn { min-height: 44px; }
  .statusbar { gap: 14px; padding-left: 14px; padding-right: 14px; }
  .stats { gap: 16px; }
  .brand span { display: none; }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =================== Phone: < 760px =================== */
@media (max-width: 759px) {
  .table { display: none; }
  .cards { display: grid; gap: 10px; }
  .card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 13px 14px; box-shadow: var(--shadow); display: grid; gap: 8px; cursor: pointer; }
  .card:active { background: var(--surface-2); }
  .card .t { font-weight: 600; font-size: 14.5px; line-height: 1.35; }
  .card .r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
  .card .r .spacer { flex: 1; }
  .statusbar { flex-wrap: wrap; row-gap: 8px; min-height: 0; padding-bottom: 10px; }
  .statusbar .btn { min-height: 34px; padding: 6px 12px; }
  .stats { order: 3; width: 100%; gap: 6px; flex-wrap: wrap; }
  .stats .stat.opt { display: none; }
  .stats .stat { background: var(--surface-2); border: 1px solid var(--rule); border-radius: 999px; padding: 5px 11px; }
  .stats .stat .k { display: none; }
  .stats .stat .v { font-size: 12.5px; }
  .stats .stat.alert { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, var(--rule)); }
  .stats .meter { width: 44px; }
  .phone-only { display: inline; }
  .page-head h1 { font-size: 18px; width: 100%; }
  .search { max-width: none; flex: 1 1 100%; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .btn { min-height: 40px; }
  .filter { min-height: 36px; }
  .item .row .btn { flex: 1 1 auto; justify-content: center; }
  .item .row .when { width: 100%; margin: 0; order: -1; }
  .modal { width: 100%; }
  .overlay { align-items: end; padding: 0; }
  .overlay .modal { border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .hint-line { display: none; }
}