:root {
  --font-family-base: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-size-body: 14px;
  --font-size-small: 12px;
  --font-size-h1: 28px;
  --font-size-h2: 22px;
  --line-height-base: 1.5;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --color-bg: #f7f9fc;
  --color-card: #ffffff;
  --color-border: #e2e8f0;
  --color-text: #1f2933;
  --color-text-muted: #6b7280;
  --color-primary: #0b63f6;
  --color-primary-dark: #084bbd;
  --color-success: #1f9d55;
  --color-warn: #c27803;
  --color-danger: #c81e1e;

  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-sm: 0 4px 10px rgba(15, 23, 42, 0.06);
  --focus-ring: 0 0 0 3px rgba(11, 99, 246, 0.25);

  /* touch + responsive */
  --touch-target: 44px;
  --bp-xs: 480px;
  --bp-sm: 768px;
  --bp-md: 1024px;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  color: var(--color-text);
  background: var(--color-bg);
}

.btn, .button {
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: 8px 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.button.primary { background: var(--color-primary); color: #fff; }
.button.primary:hover { background: var(--color-primary-dark); }
.button.secondary { background: #eef2f7; color: var(--color-text); border-color: var(--color-border); }
.button.danger { background: var(--color-danger); color: #fff; }

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.stack { display: flex; flex-direction: column; gap: var(--space-3); }

.tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  margin: var(--space-3) 0;
}
.tabs a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--color-text);
  text-decoration: none;
}
.tabs a.active {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-bottom-color: var(--color-card);
  font-weight: 600;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--font-size-small);
  border: 1px solid var(--color-border);
  background: #f8fafc;
  color: var(--color-text);
}
.status-badge.success { border-color: #c8ead4; color: var(--color-success); }
.status-badge.warn { border-color: #f7e0b5; color: var(--color-warn); }
.status-badge.danger { border-color: #f2b8b5; color: var(--color-danger); }
.status-badge.info { border-color: #c7dbff; color: var(--color-primary); }

.table.clean { width: 100%; border-collapse: collapse; }
.table.clean th, .table.clean td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }
.table.clean th { text-align: left; color: var(--color-text-muted); font-size: var(--font-size-small); letter-spacing: .02em; }

.empty-state {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

.flash-stack .flash {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}
.flash.success { background: #e8f8ef; color: var(--color-success); }
.flash.error { background: #fdecea; color: var(--color-danger); }
.flash.info { background: #eef2ff; color: var(--color-primary); }

/* card/list helpers */
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.desktop-only { display: block; }
.mobile-only { display: none; }
.hide-desktop { display: none !important; }
.responsive-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-card);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-3);
}
.responsive-card .card-title { font-weight: 700; margin-bottom: 6px; }
.responsive-card .meta { color: var(--color-text-muted); font-size: var(--font-size-small); margin-top: 2px; }

/* responsive utilities */
.grid.two { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.header-actions { display:flex; align-items:center; gap: var(--space-2); }

@media (max-width: var(--bp-md)) {
  .grid.two { grid-template-columns: 1fr; }
  .header-actions { flex-wrap: wrap; }
  .table-wrapper { overflow-x: auto; }
}

@media (max-width: var(--bp-sm)) {
  .page-header { flex-direction: column; align-items: flex-start; }
  .page-title { font-size: 22px; }
  .card { padding: var(--space-3); }
  .filter-bar { flex-wrap: wrap; }
  .table { font-size: 13px; }
  .table.clean th, .table.clean td { padding: 8px; }
  .hide-mobile { display: none !important; }
  .desktop-only { display: none; }
  .mobile-only { display: block; }
  .hide-desktop { display: block !important; }
}

@media (max-width: var(--bp-xs)) {
  .button, .btn { width: 100%; text-align: center; min-height: var(--touch-target); }
  .header-actions { width: 100%; }
}