:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --text: #1a1a1a;
  --text-muted: #666666;
  --text-faint: #999999;
  --border: #eceef0;
  --border-strong: #dddddd;
  --accent: #0b6e4f;
  --accent-bg: #f0f7f4;
  --shadow: 0 1px 3px rgba(0,0,0,0.06);
  --danger: #d32f2f;
  --warn: #f9a825;
  --good: #689f38;
}
[data-theme="dark"] {
  --bg: #0d1117;
  --surface: #171d24;
  --surface-2: #151b23;
  --text: #f0f2f4;
  --text-muted: #7a8590;
  --text-faint: #5a636d;
  --border: #21262d;
  --border-strong: #30363d;
  --accent: #5dcaa5;
  --accent-bg: #132a1f;
  --shadow: none;
  --danger: #e24b4a;
  --warn: #ef9f27;
  --good: #5dcaa5;
}
body { background: var(--bg); color: var(--text); transition: background 0.15s, color 0.15s; }
.theme-toggle { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); border-radius: 20px; padding: 6px 12px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================
   SHARED RESPONSIVE STANDARD — single source of truth for
   container width, card styling, and breakpoints across every
   page. Breakpoints match the proven kpi/trends/admin.html scheme.
   ============================================================ */
* { box-sizing: border-box; }

.page, .container, body.responsive-page {
  max-width: 480px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .page, .container, body.responsive-page {
    max-width: 720px;
  }
}
@media (min-width: 1200px) {
  .page, .container, body.responsive-page {
    max-width: 1180px;
  }
}

.card {
  border-radius: 14px;
  box-shadow: var(--shadow);
}