v1.7.0 — UI redesign (dark mode, design system, no new deps)

Added — design system + dark-mode refresh across the entire React app

• New web/src/styles.css — ~500 lines of design-token + reset + base + utility + component-class CSS. CSS custom properties for everything (surfaces, borders, text, accent, role colors, type colors, spacing, type scale, radii, shadows, transitions). Imported once from web/src/main.jsx.
• Pure dark mode. No toggle — light mode is out of scope. <meta name="color-scheme" content="dark"> + theme-color + body background painted before React mounts so there's no flash.
• Inter + JetBrains Mono via Google Fonts preconnect (one HTTP request, ~30KB; falls back to system stack).
• No new dependencies — Tailwind/Mantine/shadcn-style would have added 100KB+ and config sprawl. Pure CSS variables and small utility classes give the same outcome at 13KB gzipped.

Component classes (used app-wide)

• card / card-tight / card-flush — surfaces. card-header / card-section.
• btn-primary / btn-ghost / btn-danger / btn-sm / btn-xs — button variants. Native button styled by default.
• pill / pill-accent / pill-success / pill-warning / pill-danger — status indicators.
• chip — palette chips (used by the strat editor mit palette).
• table.t / table.t-tight — styled tables; .num for tabular-numeric columns.
• tile / tile.is-selected — picker tiles (reports list, encounters list, pull list, mechanic list).
• tabs / tab.is-active for the top-level nav; subtabs / subtab for nested.
• modal-overlay / modal / modal-header / modal-body / modal-footer.
• stat / stat-grid — Home dashboard cards.
• bar-track / bar-fill — inline progress bars in tables.
• empty / loading / spinner — placeholder + loading states with animated dots + spinner keyframe.
• Layout utilities: row / col / stack / stack-sm / stack-lg / gap-* / grow / wrap / sidebar / split-2 / split-3 / app-main / app-main / row-stack-mobile.
• Typography utilities: muted / faint / mono / small / text-sm / text-strong.

Behavior + polish

• Subtle 120-180ms transitions on hover/focus everywhere.
• Cyan accent focus rings (3px glow) on all form controls.
• Custom scrollbar styling for dark mode.
• Recharts surfaces themed via CSS custom-property overrides (axis text, grid lines, tooltips).
• Sticky app header with backdrop-filter: blur(8px) and a status-dot connection indicator.
• Mobile breakpoint at 720px: sidebars collapse, grids reflow.
• Brand mark (purple→cyan gradient "V" tile) in the header.

Touched files (all 15 React components rewrote presentation; no API contract changes)

• web/index.html — fonts, color-scheme, theme-color, body bg.
• web/src/main.jsx — imports styles.css.
• web/src/App.jsx — sticky header, brand mark, tab nav using new classes.
• web/src/Home.jsx — stat-grid + 5 cards (added kill-rate).
• web/src/Reports.jsx, WatchedReports.jsx, FieldStats.jsx — cards, tiles, pill statuses for kill/wipe counts.
• web/src/ProgPoints.jsx — table-driven log, themed Recharts curve.
• web/src/Encounters.jsx, FightMap.jsx, CompareView.jsx — tiles + subtabs; FightMap phase tints reworked for dark; CompareView cards.
• web/src/Abilities.jsx — subtabs, filter card, bulk-apply bar, abilities cards with duration/mit chips.
• web/src/StratEditor.jsx — tiles for picker, table-driven slot editor, themed SVG window overlay (dark surface, white labels with shadow), chip palette.
• web/src/ReportDetail.jsx — full restructure: card-grouped sections, GateVerdictStrip pills, phase strip with role tints, mit audit + fault scores as native tables with pills, timeline diff with semantic drift colors.
• web/src/Members.jsx — card per member, pill aliases with inline remove ×.
• web/src/StaticSwitcher.jsx — compact header dropdown + ghost buttons + members modal styled with .modal.
• web/src/FFLogsAuthStatus.jsx — pill states.

What stayed the same

• All API contracts. All routing. All component props. All business logic.
• All 396 tests pass without changes — UI redesign touched zero Python files.
• Bundle size unchanged (CSS adds 13KB, removed inline-style strings net out).