:root {
  --ds-font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --ds-radius-sm: 10px;
  --ds-radius-md: 14px;
  --ds-shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.08);
  --ds-shadow-md: 0 18px 45px rgba(15, 23, 42, 0.12);
  --ds-border: rgba(15, 23, 42, 0.12);
  --ds-bg: #0b1220;
  --ds-surface: #0f172a;
  --ds-surface-2: #111c33;
  --ds-text: #e2e8f0;
  --ds-muted: rgba(226, 232, 240, 0.72);
  --ds-primary: var(--app-primary, #696cff);
  --ds-primary-2: var(--app-primary-gradient-end, #a3acff);
  --ds-success: #22c55e;
  --ds-warning: #f59e0b;
  --ds-danger: #ef4444;
}

.ds-card {
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border);
  background: #fff;
  box-shadow: var(--ds-shadow-sm);
}

.ds-card--dark {
  background: linear-gradient(180deg, var(--ds-surface), var(--ds-surface-2));
  color: var(--ds-text);
}

.ds-muted {
  color: var(--ds-muted);
}

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid var(--ds-border);
  padding: 10px 14px;
  font-weight: 600;
  line-height: 1;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.ds-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-sm);
}

.ds-btn--primary {
  border-color: rgba(124, 58, 237, 0.35);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.95), rgba(124, 58, 237, 0.82));
  color: #fff;
}

.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ds-border);
  font-weight: 600;
}