/* Artivia EAE — Design System (Professional Minimal) */

/* Visually hidden — acessível para AT, invisível visualmente */
.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:root {
  /* Neutros derivados do tema (texto ↔ superfície) — em temas claros
     reproduzem o tint de papel educativo original; em temas escuros
     (Portal Noturno) invertem para tints escuros legíveis. */
  --zinc-50:  color-mix(in srgb, var(--color-text) 2%,  var(--color-surface));
  --zinc-100: color-mix(in srgb, var(--color-text) 5%,  var(--color-surface));
  --zinc-200: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
  --zinc-300: color-mix(in srgb, var(--color-text) 18%, var(--color-surface));
  --zinc-400: color-mix(in srgb, var(--color-text) 40%, var(--color-surface));
  --zinc-500: color-mix(in srgb, var(--color-text) 55%, var(--color-surface));
  --zinc-600: color-mix(in srgb, var(--color-text) 70%, var(--color-surface));
  --zinc-700: color-mix(in srgb, var(--color-text) 85%, var(--color-surface));
  /* Escuros fixos — usados como superfícies deliberadamente escuras */
  --zinc-800: #1A2332;
  --zinc-900: #141C28;
  --zinc-950: #0D1219;

  /* Verde floresta — acento primário */
  --indigo-50:  #EDFAF3;
  --indigo-100: #C5EDD8;
  --indigo-500: #2D6A4F;
  --indigo-600: #235A41;
  --indigo-700: #1A4A33;

  /* Semantic — Tema Profissional (padrão) */
  --color-bg:            #EBF0F9;
  --color-surface:       #ffffff;
  --color-border:        #D9E2EF;
  --color-border-strong: #C3CEDF;

  --color-text:       #0C1428;
  --color-text-muted: #495C7A;
  --color-text-faint: #8898B5;

  --color-primary:        #6366f1;
  --color-primary-hover:  #4f46e5;
  /* Tons "subtle/muted" derivados da superfície do tema via color-mix:
     em temas claros ficam iguais aos pastéis originais; em temas escuros
     (ex. Portal Noturno) tornam-se tints escuros legíveis — nunca ilhas claras. */
  --color-primary-subtle: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  --color-primary-muted:  color-mix(in srgb, var(--color-primary) 22%, var(--color-surface));

  --color-success:        #16a34a;
  --color-success-subtle: color-mix(in srgb, var(--color-success) 8%,  var(--color-surface));
  --color-success-muted:  color-mix(in srgb, var(--color-success) 18%, var(--color-surface));

  --color-danger:         #dc2626;
  --color-danger-subtle:  color-mix(in srgb, var(--color-danger) 8%,  var(--color-surface));
  --color-danger-muted:   color-mix(in srgb, var(--color-danger) 16%, var(--color-surface));

  --color-warning:        #d97706;
  --color-warning-subtle: color-mix(in srgb, var(--color-warning) 8%,  var(--color-surface));
  --color-warning-muted:  color-mix(in srgb, var(--color-warning) 18%, var(--color-surface));
  --color-warning-faint:  color-mix(in srgb, var(--color-warning) 5%,  var(--color-surface));

  --color-info:           #3b82f6;
  --color-info-subtle:    color-mix(in srgb, var(--color-info) 10%, var(--color-surface));
  --color-info-muted:     color-mix(in srgb, var(--color-info) 20%, var(--color-surface));

  /* Progressão de grau — decisões específicas EAE */
  --color-transitado:        #1d4ed8;
  --color-transitado-subtle: color-mix(in srgb, var(--color-transitado) 10%, var(--color-surface));
  --color-transitado-muted:  color-mix(in srgb, var(--color-transitado) 22%, var(--color-surface));

  --color-dispensado:        #7c3aed;
  --color-dispensado-subtle: color-mix(in srgb, var(--color-dispensado) 10%, var(--color-surface));
  --color-dispensado-muted:  color-mix(in srgb, var(--color-dispensado) 22%, var(--color-surface));

  /* Cor de contraste sobre primary (branca por padrão; JS substitui via _applyAccent se cor for clara) */
  --color-on-primary: #fff;

  /* Typography weight aliases (usados em layout.css e componentes herdados) */
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Transition aliases */
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;

  /* Gradient alias — usa cor primária; sem gradiente por padrão */
  --gradient-primary: var(--color-primary);

  /* Additional semantic aliases used throughout the app */
  --color-primary-faint:  color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  --color-bg-alt:         color-mix(in srgb, var(--color-text) 4%, var(--color-bg));
  --color-bg-subtle:      color-mix(in srgb, var(--color-text) 2%, var(--color-bg));
  --color-surface-raised: var(--color-surface);
  --color-surface-2:      color-mix(in srgb, var(--color-text) 3%, var(--color-surface));
  --color-primary-light:  color-mix(in srgb, var(--color-primary) 30%, var(--color-surface));
  --color-primary-dark:   color-mix(in srgb, var(--color-primary) 75%, var(--color-text));

  /* Aliases *-bg/*-border/*-dark — usados em inline styles do app.js */
  --color-danger-bg:      var(--color-danger-subtle);
  --color-danger-border:  var(--color-danger-muted);
  --color-success-bg:     var(--color-success-subtle);
  --color-success-border: var(--color-success-muted);
  --color-warning-bg:     var(--color-warning-subtle);
  --color-warning-border: var(--color-warning-muted);
  /* *-dark: mistura com --color-text em vez de #000 para que em modo escuro
     (text=#f1f5f9) a cor se torne mais clara — legível sobre bg subtle escuro */
  --color-warning-dark:   color-mix(in srgb, var(--color-warning) 75%, var(--color-text));
  --color-success-dark:   color-mix(in srgb, var(--color-success) 75%, var(--color-text));
  --color-danger-dark:    color-mix(in srgb, var(--color-danger)  75%, var(--color-text));
  /* *-text: aliases de *-dark — usados em inline styles para cor de texto de alertas */
  --color-warning-text:   var(--color-warning-dark);
  --color-success-text:   var(--color-success-dark);
  --color-danger-text:    var(--color-danger-dark);

  --color-dark:           var(--color-text);

  /* Terminal/console display (fixed dark; independent of app theme) */
  --color-console-bg: #0d1117;
  --color-console-fg: #e6edf3;

  /* Spacing aliases for responsive.css compatibility */
  --spacing-xs:  var(--s-1);
  --spacing-sm:  var(--s-2);
  --spacing-md:  var(--s-4);
  --spacing-lg:  var(--s-6);
  --spacing-xl:  var(--s-8);
  --spacing-2xl: var(--s-12);

  /* Typography aliases for responsive.css compatibility */
  --font-size-xs:  0.75rem;
  --font-size-sm:  0.8125rem;
  --font-size-md:  0.875rem;
  --font-size-lg:  1rem;
  --font-size-xl:  1.25rem;
  --font-size-2xl: 1.5rem;
  --font-weight-bold: 700;

  /* Sidebar */
  --sidebar-w:      280px;
  --sidebar-bg:     #ffffff;
  --sidebar-border: var(--color-border);

  /* Spacing */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;

  /* Radii */
  --r-sm: 0.3125rem;
  --r-md: 0.4375rem;
  --r-lg: 0.5625rem;
  --r-xl: 0.75rem;
  --r-2xl: 1rem;
  --r-full: 9999px;

  /* Typography */
  --font:         'Figtree', 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'SF Mono', 'Fira Code', Consolas, monospace;

  /* Shadows — ligeiramente mais expressivas */
  --shadow-xs: 0 1px 2px rgba(12,20,40,0.05), 0 1px 4px rgba(12,20,40,0.03);
  --shadow-sm: 0 1px 3px rgba(12,20,40,0.07), 0 2px 8px rgba(12,20,40,0.04);
  --shadow-md: 0 4px 14px rgba(12,20,40,0.09), 0 2px 4px rgba(12,20,40,0.05);
  --shadow-lg: 0 12px 32px rgba(12,20,40,0.11), 0 4px 8px rgba(12,20,40,0.05);
  --shadow-xl: 0 24px 48px rgba(12,20,40,0.13), 0 8px 16px rgba(12,20,40,0.06);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--sec-page-btn-color, #6366f1) 22%, transparent);

  /* Transitions */
  --t-fast: 120ms ease;
  --t-base: 200ms ease;
}

/* Reset */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* evitar scrollbar horizontal na janela */
}

body {
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  min-height: 100vh;
}

/* Typography */
h1, h2 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; }
h3, h4  { font-family: var(--font-display); font-weight: 650; line-height: 1.3; }
h1 { font-size: 1.5rem;    letter-spacing: -0.025em; }
h2 { font-size: 1.25rem;   letter-spacing: -0.02em; }
h3 { font-size: 1.0625rem; letter-spacing: -0.015em; }
h4 { font-size: 0.9375rem; letter-spacing: -0.01em; }

/* Forms */
input, select, textarea {
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-lg);
  padding: 0.5rem 0.75rem;
  width: 100%;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--color-text-faint);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--sec-page-color, var(--color-primary));
  box-shadow: var(--shadow-focus);
  background: var(--color-surface);
}
input::placeholder { color: var(--color-text-faint); }
input[type="radio"],
input[type="checkbox"] { width: auto; padding: 0; border: none; background: none; flex-shrink: 0; transition: none; box-shadow: none; }
label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 0.375rem;
}

/* Buttons — modernizados: cantos mais suaves, sombras subtis, focus ring consistente */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 550;
  line-height: 1.2;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--shadow-focus); }
.btn:active:not(:disabled) { transform: translateY(0.5px); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);  /* Pass 79 — auto-deriva via luminância em _applyAccent */
  border-color: var(--color-primary);
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: var(--shadow-sm), 0 3px 10px color-mix(in srgb, var(--color-primary) 32%, transparent);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--color-bg);
  border-color: var(--color-border-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) { background: var(--color-bg); color: var(--color-text); }

.btn-link {
  background: transparent;
  color: var(--color-primary);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn-link:hover:not(:disabled) { color: var(--color-primary-hover); background: transparent; }

.btn-danger {
  background: var(--color-surface);
  color: var(--color-danger);
  border-color: var(--color-border);
}
.btn-danger:hover:not(:disabled) {
  background: var(--color-danger-subtle);
  border-color: var(--color-danger-muted);
}

.btn-warning {
  background: var(--color-warning, #b45309);
  color: var(--color-on-primary, #fff);
  border-color: var(--color-warning, #b45309);
  box-shadow: var(--shadow-xs);
}
.btn-warning:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-warning, #b45309) 85%, #000);
  border-color: color-mix(in srgb, var(--color-warning, #b45309) 85%, #000);
}

.btn-success {
  background: var(--color-success, #15803d);
  color: var(--color-on-primary, #fff);
  border-color: var(--color-success, #15803d);
  box-shadow: var(--shadow-xs);
}
.btn-success:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-success, #15803d) 85%, #000);
  border-color: color-mix(in srgb, var(--color-success, #15803d) 85%, #000);
}

.btn-sm {
  padding: 0.375rem 0.7rem;
  font-size: 0.75rem;
  gap: 0.3rem;
  border-radius: var(--r-md);
}
.btn-lg {
  padding: 0.7rem 1.35rem;
  font-size: 0.9375rem;
  gap: 0.5rem;
}
.btn-icon {
  width: 2.125rem; height: 2.125rem;
  padding: 0;
  border-radius: var(--r-lg);
}

/* Badges — modernizados: mais compactos e legíveis */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.25;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}
.badge-dot {
  width: 0.375rem; height: 0.375rem;
  border-radius: 50%;
  display: inline-block;
}
.badge-success { background: var(--color-success-muted); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-surface)); }
.badge-danger  { background: var(--color-danger-muted);  color: var(--color-danger);  border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-surface)); }
.badge-warning { background: var(--color-warning-muted); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 35%, var(--color-surface)); }
.badge-primary { background: var(--color-primary-muted); color: var(--color-primary); border-color: var(--color-primary-light); }
.badge-neutral { background: color-mix(in srgb, var(--color-text) 7%, var(--color-surface)); color: var(--color-text-muted); border-color: color-mix(in srgb, var(--color-text) 14%, var(--color-surface)); }
.badge-info    { background: color-mix(in srgb, var(--color-info, #3b82f6) 16%, var(--color-surface)); color: var(--color-info, #3b82f6); border-color: color-mix(in srgb, var(--color-info, #3b82f6) 35%, var(--color-surface)); }

/* Alerts */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-lg);
  font-size: 0.8125rem;
  border: 1px solid transparent;
}
.alert-danger  { background: var(--color-danger-subtle);  border-color: var(--color-danger-muted);  color: color-mix(in srgb, var(--color-danger) 75%, var(--color-text)); }
.alert-success { background: var(--color-success-subtle); border-color: var(--color-success-muted); color: color-mix(in srgb, var(--color-success) 75%, var(--color-text)); }

/* Cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  gap: 0.75rem;
  background: color-mix(in srgb, var(--color-text) 1.5%, var(--color-surface));
}
.card-title {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.card-body {
  padding: 1.25rem;
}
/* .card-footer definido em components.css (canónico) */

/* Tables */
/* ── Variáveis de tabela (alteradas pela personalização) ── */
:root {
  --table-row-py: 0.625rem;
  --table-row-px: 1rem;
  --table-stripe-color: color-mix(in srgb, var(--color-text) 3%, transparent);
}

.table-wrap { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.table thead th {
  padding: var(--table-row-py) var(--table-row-px);
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-faint);
  background: color-mix(in srgb, var(--color-text) 3.5%, var(--color-bg));
  border-bottom: 1px solid var(--color-border-strong);
  white-space: nowrap;
  /* sticky headers para listas longas */
  position: sticky;
  top: 0;
  z-index: 2;
}
/* Pass 80 — em modais não fazer sticky (overflow do modal-body já gere scroll) */
.modal .table thead th { position: static; }
.table tbody td,
.table tbody th {
  padding: var(--table-row-py) var(--table-row-px);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  transition: background var(--t-fast);
  white-space: nowrap;
  font-weight: normal;
}
/* Células com conteúdo longo (nomes, descrições) podem fazer wrap */
.table tbody td.cell-wrap,
.table tbody th.cell-wrap { white-space: normal; }
/* Zebra striping — tom suave alternado */
.table tbody tr:nth-child(even) td,
.table tbody tr:nth-child(even) th {
  background: var(--table-stripe-color);
}
.table tbody tr:last-child td,
.table tbody tr:last-child th { border-bottom: none; }
.table tbody tr:hover td,
.table tbody tr:hover th { background: color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 5%, var(--color-bg)) !important; }

/* Densidade compact — linhas mais curtas */
[data-table-density="compact"] .table tbody td,
[data-table-density="compact"] .table tbody th,
[data-table-density="compact"] .table thead th {
  font-size: 0.75rem;
}
/* Densidade relaxed — fonte ligeiramente maior */
[data-table-density="relaxed"] .table tbody td,
[data-table-density="relaxed"] .table tbody th {
  font-size: 0.875rem;
}

/* Sortable column headers */
.table thead th.sortable { transition: background var(--t-fast), color var(--t-fast); }
.table thead th.sortable:hover { background: color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 8%, var(--color-bg)); color: var(--color-text); }
.table thead th.sortable:hover .sort-ico { opacity: .85; }
.table thead th.sortable[data-dir="asc"] .sort-ico,
.table thead th.sortable[data-dir="desc"] .sort-ico { opacity: 1; color: var(--sec-page-color, var(--color-primary)); }

/* Stat cards */
/* ── Stat card — layout horizontal compacto ───────────────────────────── */
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 2.5px solid var(--sec-accent, var(--sec-page-color, var(--color-primary)));
  border-radius: var(--r-xl);
  padding: 0.5rem 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.stat-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.stat-icon-wrap {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
  /* margin-bottom removido — layout horizontal */
}
.stat-value {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.stat-label::before {
  content: '·';
  margin-right: 0.3rem;
  opacity: 0.45;
}
/* .stat-number — variante usada no dashboard, igual a .stat-value */
.stat-number {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Avatar */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  font-weight: 600;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  font-size: 0.75rem;
}
.avatar-sm { width: 1.75rem; height: 1.75rem; font-size: 0.6875rem; }
.avatar-md { width: 2.25rem; height: 2.25rem; font-size: 0.8125rem; }

/* Empty state */
.empty-state {
  padding: 3.5rem 2rem;
  text-align: center;
}
.empty-state svg { color: var(--zinc-300); margin-bottom: 0.75rem; }
.empty-state-title { font-size: 0.875rem; font-weight: 500; color: var(--zinc-600); margin-bottom: 0.25rem; }
.empty-state-sub   { font-size: 0.8125rem; color: var(--zinc-400); }

/* Spinner */
.spinner {
  display: inline-block;
  width: 1rem; height: 1rem;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.spinner-dark {
  border-color: var(--zinc-200);
  border-top-color: var(--sec-page-color, var(--color-primary));
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Utilities */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.flex-1 { flex: 1; }
.min-w-0 { min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-full { width: 100%; }
.text-muted { color: var(--color-text-muted); }
.text-faint { color: var(--color-text-faint); }
.text-sm { font-size: 0.8125rem; }
.text-xs { font-size: 0.75rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }

/* Grid */
.grid { display: grid; gap: 1rem; }
.cols-2 { grid-template-columns: repeat(2,1fr); }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.cols-4 { grid-template-columns: repeat(4,1fr); }

@media (max-width:1024px) { .cols-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px)  { .cols-2,.cols-3,.cols-4 { grid-template-columns: 1fr; } }

/* Animations */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
.animate-in { animation: fadeUp .2s ease both; }