.scb-panel-effects-library {
  display: grid;
  gap: 10px;
  max-height: 320px;
  overflow: auto;
  padding-right: 3px;
}

.scb-panel-effect-current {
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--scb-soft-border);
  border-radius: 12px;
  display: grid;
  gap: 4px;
  padding: 10px;
}

.scb-panel-effect-current strong {
  color: #18181b;
  font-size: 12px;
}

.scb-panel-effect-current span {
  color: var(--scb-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.scb-panel-effect-group {
  display: grid;
  gap: 7px;
}

.scb-panel-effect-group h4 {
  color: #18181b;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.05em;
  margin: 0;
  text-transform: uppercase;
}

.scb-panel-effect-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.scb-panel-effect-card {
  appearance: none;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--scb-soft-border);
  border-radius: 12px;
  color: #111827;
  cursor: pointer;
  display: grid;
  gap: 5px;
  padding: 6px;
  text-align: left;
}

.scb-panel-effect-card:hover {
  border-color: #111827;
  box-shadow: 0 4px 0 rgba(17, 24, 39, 0.12);
}

.scb-panel-effect-card.is-active {
  border-color: #111827;
  box-shadow: inset 0 0 0 2px var(--scb-accent);
}

.scb-panel-effect-card strong {
  font-size: 10px;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scb-panel-effect-thumb {
  border: 1px solid rgba(17, 24, 39, 0.18);
  border-radius: 9px;
  display: block;
  height: 38px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.scb-panel-effect {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.scb-effect-halftone,
.scb-effect-thumb-halftone {
  background-image: radial-gradient(rgba(17,24,39,0.22) 1px, transparent 1.4px);
  background-size: 8px 8px;
  mix-blend-mode: multiply;
}

.scb-effect-speedlines,
.scb-effect-thumb-speedlines {
  background: repeating-linear-gradient(110deg, rgba(255,255,255,0) 0 8px, rgba(17,24,39,0.22) 9px 11px, rgba(255,255,255,0) 12px 20px);
}

.scb-effect-impact,
.scb-effect-thumb-impact {
  background: repeating-conic-gradient(from 8deg at 50% 50%, transparent 0deg 10deg, rgba(17,24,39,0.26) 10deg 12deg, transparent 12deg 20deg);
}

.scb-effect-vignette,
.scb-effect-thumb-vignette {
  background: radial-gradient(circle at center, transparent 38%, rgba(17,24,39,0.28) 100%);
}

.scb-effect-glow,
.scb-effect-thumb-glow {
  background: radial-gradient(circle at 45% 40%, rgba(255,214,102,0.58), transparent 56%);
  mix-blend-mode: screen;
}

.scb-effect-shadow,
.scb-effect-thumb-shadow {
  background: linear-gradient(135deg, rgba(17,24,39,0.42), transparent 52%, rgba(17,24,39,0.28));
  mix-blend-mode: multiply;
}

.scb-effect-rain,
.scb-effect-thumb-rain {
  background: repeating-linear-gradient(110deg, transparent 0 9px, rgba(89, 136, 176, 0.42) 10px 12px, transparent 13px 19px);
}

.scb-effect-snow,
.scb-effect-thumb-snow {
  background-image: radial-gradient(rgba(255,255,255,0.88) 1.4px, transparent 1.8px), radial-gradient(rgba(255,255,255,0.65) 1px, transparent 1.5px);
  background-position: 0 0, 9px 7px;
  background-size: 18px 18px, 22px 22px;
}

.scb-effect-focus,
.scb-effect-thumb-focus {
  background: radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(255,255,255,0.42) 29% 38%, transparent 39% 100%);
}

.scb-effect-noise,
.scb-effect-thumb-noise {
  background-image: radial-gradient(rgba(0,0,0,0.12) 0.7px, transparent 0.8px);
  background-size: 4px 4px;
  opacity: 0.8;
}