/* ══ Blur / Backdrop ══ */
.kit-blur-bg {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.kit-blur-overlay {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ══ Overlays ══ */
.kit-overlay-gradient-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.kit-overlay-gradient-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* ══ Glow Decorations ══ */
.kit-effect-glow-purple {
  position: absolute;
  width: 400px;
  height: 400px;
  background: var(--kit-accent-purple);
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.3;
  pointer-events: none;
}

.kit-effect-glow-blue {
  position: absolute;
  width: 400px;
  height: 400px;
  background: var(--kit-accent-blue);
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.3;
  pointer-events: none;
}

.kit-effect-glow-lime {
  position: absolute;
  width: 300px;
  height: 300px;
  background: var(--kit-accent-lime);
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.2;
  pointer-events: none;
}

/* ══ Blend Modes ══ */
.kit-blend-overlay {
  mix-blend-mode: overlay;
}

/* ══ Mask ══ */
.kit-mask-fade-bottom {
  -webkit-mask: linear-gradient(#000 0%, transparent 100%);
  mask: linear-gradient(#000 0%, transparent 100%);
}

.kit-mask-fade-horizontal {
  -webkit-mask: linear-gradient(270deg, transparent 0%, #000 33% 66%, transparent 100%);
  mask: linear-gradient(270deg, transparent 0%, #000 33% 66%, transparent 100%);
}

.kit-mask-radial {
  -webkit-mask: radial-gradient(50% 50%, #000 0%, transparent 100%);
  mask: radial-gradient(50% 50%, #000 0%, transparent 100%);
}

/* ══ Hue rotate for variety ══ */
.kit-hue-rotate {
  filter: hue-rotate();
}

/* ══ Visual Separator ══ */
.kit-separator {
  width: 100%;
  height: 1px;
  background: var(--kit-border-subtle);
}

.kit-separator--light {
  background: rgba(255,255,255,0.1);
}

/* ══ Status indicators ══ */
.kit-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--kit-radius-full);
  font-family: var(--kit-font-mono);
  font-size: 11px;
  font-weight: var(--kit-fw-medium);
}

.kit-status--paid {
  background: #e8f5e9;
  color: #2e7d32;
}

.kit-status--pending {
  background: #fff3e0;
  color: #ef6c00;
}

.kit-status--overdue {
  background: #fce4ec;
  color: #c62828;
}