:root{
  --card-bg: rgba(255,255,255,0.72);
  --border: rgba(255,255,255,0.45);
  --shadow: 0 20px 60px rgba(0,0,0,.08);
  --shadow-sm: 0 10px 30px rgba(0,0,0,.08);
  --radius: 18px;
}

body{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(79,125,224,.12), transparent 60%),
    radial-gradient(1000px 500px at 90% 20%, rgba(122,166,248,.12), transparent 55%),
    radial-gradient(900px 480px at 35% 90%, rgba(0,0,0,.04), transparent 60%),
    #f7f8fb;
}

.card{
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--card-bg) !important;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}

.card .card-body{
  padding: 18px;
}

.kpi{
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,.04);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.kpi:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}

.btn{
  border-radius: 14px !important;
}

.table{
  border-radius: 16px;
  overflow: hidden;
}

.table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
}

.table thead th.sortable{
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.table thead th.sortable .sort-indicator{
  font-size: 0.85em;
  opacity: .75;
  margin-left: 6px;
}

.fade-up{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.fade-up.show{
  opacity: 1;
  transform: translateY(0);
}

/* Nice “pill” badges for info */
.pill{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
}

.small-muted{
  color: rgba(0,0,0,.55);
  font-size: .92rem;
}