:root {
  --ink: #0f172a;
  --muted: #64748b;
  --soft: #f1f5f9;
  --accent: #2563eb;
  --accent2: #7c3aed;
}

body {
  color: var(--ink);
  background: radial-gradient(1200px 500px at 20% -10%, rgba(37, 99, 235, 0.10), transparent 60%),
              radial-gradient(800px 400px at 90% 0%, rgba(124, 58, 237, 0.10), transparent 60%),
              #ffffff;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.hero {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.04), rgba(37, 99, 235, 0.06));
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #1e40af;
  font-size: 13px;
}

.card {
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 16px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none;
}

.btn-primary:hover {
  filter: brightness(0.95);
}

.cart-badge {
  top: -6px;
  left: 6px;
}

.kpi {
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: #fff;
  border-radius: 16px;
  padding: 14px;
}

.soft-panel {
  background: var(--soft);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
}

.table thead th {
  color: #334155;
}

.form-control:focus, .form-select:focus {
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.12);
}