:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;

  --radius-1: 8px;
  --shadow-1: 0 6px 18px rgba(0,0,0,.08);

  --text-sm: clamp(12px, 1.8vw, 14px);
  --text-md: clamp(14px, 2vw, 16px);
  --text-lg: clamp(18px, 2.2vw, 22px);
  --text-xl: clamp(22px, 3vw, 28px);
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
img { max-width: 100%; height: auto; }
button, input, select { font-size: var(--text-md); }

.container { width: min(100%, 1200px); margin: 0 auto; padding: 0 var(--space-4); }
.header, .footer { padding: var(--space-4) 0; }

/* Utility */
.w-100 { width: 100%; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }

/* Tables wrapper if needed */
.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { padding: var(--space-3); border-bottom: 1px solid #e6e6e6; }

/* Chart container helper (used by chart modal canvases) */
.chart-wrap { position: relative; width: 100%; height: 280px; }