/* Futuristic minimal helpers */
:root{
  --card-bg: rgba(255,255,255,0.05);
  --card-br: rgba(255,255,255,0.10);
}

/* Effects */
.fx-glow{
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: .75;
  background: radial-gradient(60% 50% at 50% 0%, rgba(124,58,237,0.35), rgba(0,0,0,0));
  z-index: 0;
}
.fx-grid{
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 0;
}
.fx-noise{
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  z-index: 0;
}

/* Cards */
.card{
  position: relative;
  border: 1px solid var(--card-br);
  background: var(--card-bg);
  backdrop-filter: blur(14px);
  border-radius: 1.25rem;
  overflow: hidden;
}
.card::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(0,0,0,0));
  pointer-events:none;
}
.card-h{
  position: relative;
  padding: 1.25rem;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: .75rem;
}
.card-b{
  position: relative;
  padding: 0 1.25rem 1.25rem 1.25rem;
}
.card-title{ font-size: 1rem; font-weight: 600; color: rgba(255,255,255,0.95); }
.card-desc{ margin-top: .25rem; font-size: .875rem; color: rgba(255,255,255,0.55); }

/* Chips / buttons */
.chip{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.70);
  border-radius: 999px;
  padding: .25rem .6rem;
  font-size: 12px;
  white-space: nowrap;
}
.btn-ghost{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.92);
  border-radius: .9rem;
  padding: .55rem .85rem;
  font-size: 14px;
}
.btn-ghost:hover{ background: rgba(255,255,255,0.10); }

.btn-solid{
  display:inline-flex; align-items:center; gap:.5rem;
  background: rgba(255,255,255,0.95);
  color: rgba(0,0,0,0.92);
  border-radius: .9rem;
  padding: .55rem .85rem;
  font-size: 14px;
  font-weight: 600;
}
.btn-solid:hover{ background: rgba(255,255,255,0.90); }

.input{
  width: 100%;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.92);
  border-radius: .9rem;
  padding: .6rem .9rem;
  font-size: 14px;
  outline: none;
}
.input:focus{ border-color: rgba(255,255,255,0.22); }

.filter-pill{
  display:flex; align-items:center; gap:.5rem;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  padding: .35rem .65rem;
}
.filter-label{ font-size: 12px; color: rgba(255,255,255,0.55); }

.select{
  height: 28px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.15);
  color: rgba(255,255,255,0.92);
  border-radius: .75rem;
  padding: 0 .55rem;
  font-size: 12px;
  outline: none;
}

.sort-pill{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.62);
  border-radius: 999px;
  padding: .35rem .65rem;
  font-size: 12px;
  transition: .15s ease;
}
.sort-pill:hover{ background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.92); }
.sort-pill.is-active{
  border-color: rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.95);
}

/* KPI */
.kpi-card{
  position: relative;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  border-radius: 1.25rem;
  overflow:hidden;
  backdrop-filter: blur(14px);
  padding: 1.1rem 1.1rem 1rem 1.1rem;
}
.kpi-card::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, var(--tone-a), var(--tone-b), transparent 70%);
  pointer-events:none;
}
.kpi-label{ position: relative; font-size: 12px; color: rgba(255,255,255,0.65); display:flex; gap:.5rem; align-items:center; }
.kpi-value{ position: relative; margin-top: .5rem; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: rgba(255,255,255,0.98); }
.kpi-sub{ position: relative; margin-top: .25rem; font-size: 12px; color: rgba(255,255,255,0.55); }

.tone-violet{ --tone-a: rgba(124,58,237,0.30); --tone-b: rgba(124,58,237,0.10); }
.tone-cyan{ --tone-a: rgba(6,182,212,0.30); --tone-b: rgba(6,182,212,0.10); }
.tone-emerald{ --tone-a: rgba(34,197,94,0.30); --tone-b: rgba(34,197,94,0.10); }
.tone-rose{ --tone-a: rgba(225,29,72,0.30); --tone-b: rgba(225,29,72,0.10); }
.tone-amber{ --tone-a: rgba(249,115,22,0.30); --tone-b: rgba(249,115,22,0.10); }
.tone-lime{ --tone-a: rgba(163,230,53,0.30); --tone-b: rgba(163,230,53,0.10); }

/* Scrollbars (webkit) */
*::-webkit-scrollbar{ height: 10px; width: 10px; }
*::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.12); border-radius: 999px; }
*::-webkit-scrollbar-track{ background: rgba(255,255,255,0.04); border-radius: 999px; }