body.dark {
  --bg: #0a0e17; --surface: #121826; --surface-2: #1a2233;
  --line: #232c40; --line-strong: #2e3950;
  --ink-900: #eef2fb; --ink-700: #c4cce0; --ink-500: #8a93ad; --ink-400: #6b748f;
}
body { min-height: 100vh; background: var(--bg); }
.activityShell { width: min(1180px, 100%); margin: 0 auto; padding: 18px 16px 60px; }
.activityTop { display:flex; align-items:center; gap:14px; padding:8px 0 18px; border-bottom:1px solid var(--line); }
.activityTop h1 { font-size:24px; }
.loginBox { margin-top:22px; padding:20px; }
.loginBox h2 { margin-top:6px; font-size:20px; }
.loginRow { margin-top:14px; }
.activityFilters { margin:18px 0 12px; padding:14px; display:grid; grid-template-columns: 1.5fr 1fr 160px 160px auto; gap:10px; align-items:end; }
.activityMeta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0 12px; }
.tableWrap { overflow:auto; }
.tbl { min-width: 860px; }
/* Bug #19 — min-width 860px on 430px viewport creates 2x horizontal scroll.
   On mobile, switch to card/block layout so data is readable without horizontal scroll */
@media (max-width: 680px) {
  .tbl { min-width: unset; }
  .tbl thead { display: none; }
  .tbl tr { display: block; border-bottom: 1px solid var(--line); padding: 10px 12px; }
  .tbl td {
    display: block; padding: 3px 0; font-size: 13px;
    border-bottom: none; color: var(--ink-700);
  }
  .tbl td::before {
    content: attr(data-label);
    font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-400); display: block; margin-bottom: 2px;
  }
}
.tbl td:nth-child(1) { font-family:var(--font-mono); color:var(--ink-500); white-space:nowrap; }
.tbl td:nth-child(2) { font-weight:800; color:var(--ink-900); }
.tbl td:nth-child(5) { color:var(--ink-700); }
/* Bug #18 — activityFilters: 2-col at 760px creates confusing layout grouping.
   Use 1-col on mobile so filter fields stack clearly */
@media (max-width: 760px) {
  .activityFilters { grid-template-columns: 1fr 1fr; }
  .activityFilters #fQuery, .activityFilters #btnApplyAudit { grid-column: 1 / -1; }
  .activityMeta { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 680px) {
  .activityFilters { grid-template-columns: 1fr; }
  .activityFilters #fQuery, .activityFilters #fActor,
  .activityFilters #fFrom, .activityFilters #fTo,
  .activityFilters #btnApplyAudit { grid-column: 1; }
  /* Bug #20 — back button uses btn-sm which is 27px — enlarge on mobile */
  .activityTop .btn-sm { min-height: 44px; padding: 12px 14px; }
}