:root {
  --sw-bg1: #0ea5e9;
  --sw-bg2: #a78bfa;
  --sw-bg3: #22c55e;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 20% 0%, color-mix(in srgb, var(--sw-bg2) 25%, transparent), transparent 65%),
    radial-gradient(900px 500px at 90% 20%, color-mix(in srgb, var(--sw-bg1) 20%, transparent), transparent 60%),
    radial-gradient(900px 500px at 50% 100%, color-mix(in srgb, var(--sw-bg3) 14%, transparent), transparent 60%);
}

.navbar-glass {
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bs-body-bg) 70%, transparent);
}

.card-glass {
  border-radius: 1.25rem;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bs-body-bg) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--bs-border-color) 70%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.brand-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sw-bg1), var(--sw-bg2));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sw-bg1) 15%, transparent);
}

.empty-state {
  border: 1px dashed color-mix(in srgb, var(--bs-border-color) 70%, transparent);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
}

.empty-icon {
  font-size: 2.2rem;
  opacity: 0.7;
  margin-bottom: .25rem;
}

.receipt-preview .preview-box {
  border: 1px dashed color-mix(in srgb, var(--bs-border-color) 70%, transparent);
  border-radius: 1rem;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.receipt-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--bs-border-color) 70%, transparent);
}

.cat-card .cat-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bs-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--bs-primary) 25%, transparent);
  font-size: 1.2rem;
}

.stat-card {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--sw-bg1) 22%, transparent),
    color-mix(in srgb, var(--sw-bg2) 18%, transparent)
  );
}