.scb-background-library {
  display: grid;
  gap: 12px;
  max-height: 360px;
  overflow: auto;
  padding-right: 3px;
}

.scb-background-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-background-current strong {
  color: #18181b;
  font-size: 12px;
}

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

.scb-background-custom {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto auto;
}

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

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

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

.scb-background-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-background-card:hover {
  border-color: #111827;
  box-shadow: 0 4px 0 rgba(17, 24, 39, 0.12);
}

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

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

.scb-background-thumb,
.scb-panel-background {
  display: block;
  overflow: hidden;
  position: relative;
}

.scb-background-thumb {
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(17, 24, 39, 0.18);
  border-radius: 9px;
  width: 100%;
}

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

.scb-panel-background + .scb-panel-label {
  z-index: 6;
}

.scb-bg-blank {
  background: #ffffff;
}

.scb-bg-custom_color {
  background: var(--scb-bg-custom, #ffffff);
}

.scb-bg-sky {
  background: linear-gradient(180deg, #76c7ff 0%, #dff6ff 68%, #9bd27c 69%, #6aa84f 100%);
}

.scb-bg-city {
  background: linear-gradient(180deg, #86d7ff 0%, #dff7ff 62%, #d8d1c1 63%, #9ca3af 100%);
}

.scb-bg-street {
  background: linear-gradient(180deg, #92d5ff 0%, #e4f6ff 55%, #c9bda9 56%, #646464 100%);
}

.scb-bg-forest {
  background: linear-gradient(180deg, #bfdfff 0%, #b9d98d 45%, #5a8f45 100%);
}

.scb-bg-beach {
  background: linear-gradient(180deg, #72c9ff 0%, #dff8ff 46%, #36a9e1 47%, #3fb4e8 60%, #f7d98b 61%, #e8bd62 100%);
}

.scb-bg-sunset {
  background: linear-gradient(180deg, #ffb15e 0%, #f97068 48%, #493657 100%);
}

.scb-bg-classroom {
  background: linear-gradient(180deg, #f5ead6 0%, #f5ead6 62%, #c89b68 63%, #9c7046 100%);
}

.scb-bg-office {
  background: linear-gradient(180deg, #e8f0f5 0%, #e8f0f5 64%, #c6b49c 65%, #9b8060 100%);
}

.scb-bg-bedroom {
  background: linear-gradient(180deg, #f9d7e7 0%, #fff5fb 63%, #caa783 64%, #9e7654 100%);
}

.scb-bg-castle {
  background-color: #8a8f98;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.14) 1px, transparent 1px), linear-gradient(rgba(0,0,0,0.16) 1px, transparent 1px);
  background-size: 28px 22px;
}

.scb-bg-dungeon {
  background-color: #2f3440;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), radial-gradient(circle at 50% 30%, rgba(255,189,89,0.25), transparent 35%);
  background-size: 30px 22px, 30px 22px, auto;
}

.scb-bg-space {
  background: radial-gradient(circle at 78% 30%, #9254ff 0 10%, transparent 11%), radial-gradient(circle at 35% 42%, rgba(255,255,255,0.9) 0 1px, transparent 2px), radial-gradient(circle at 65% 65%, rgba(255,255,255,0.85) 0 1px, transparent 2px), linear-gradient(180deg, #111827, #312e81 56%, #020617);
}

.scb-bg-speedlines {
  background: repeating-conic-gradient(from 12deg at 50% 50%, #ffffff 0deg 7deg, #111827 7deg 9deg, #facc15 9deg 13deg, #ffffff 13deg 18deg);
}

.scb-bg-halftone {
  background-color: #facc15;
  background-image: radial-gradient(#111827 1.1px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.65), transparent 48%);
  background-position: 0 0, center;
  background-size: 9px 9px, auto;
}

.scb-bg-cloud,
.scb-bg-building,
.scb-bg-tree,
.scb-bg-ground,
.scb-bg-sun,
.scb-bg-horizon,
.scb-bg-road,
.scb-bg-lane,
.scb-bg-water,
.scb-bg-sand,
.scb-bg-board,
.scb-bg-floor,
.scb-bg-desk,
.scb-bg-window,
.scb-bg-bed,
.scb-bg-arch,
.scb-bg-banner,
.scb-bg-torch,
.scb-bg-planet,
.scb-bg-star,
.scb-bg-silhouette {
  position: absolute;
}

.scb-bg-cloud {
  background: rgba(255,255,255,0.88);
  border-radius: 999px;
  height: 14%;
  width: 24%;
}
.scb-bg-cloud.c1 { left: 12%; top: 18%; }
.scb-bg-cloud.c2 { right: 13%; top: 28%; transform: scale(1.25); }
.scb-bg-horizon { background: rgba(255,255,255,0.45); height: 4%; left: 0; right: 0; top: 66%; }
.scb-bg-ground { background: rgba(40, 70, 45, 0.42); bottom: 0; height: 22%; left: 0; right: 0; }
.scb-bg-sun { background: #ffd166; border-radius: 50%; height: 18%; right: 12%; top: 12%; width: 18%; }
.scb-bg-building { background: #44546a; bottom: 20%; width: 16%; }
.scb-bg-building.b1 { height: 42%; left: 12%; }
.scb-bg-building.b2 { height: 55%; left: 34%; }
.scb-bg-building.b3 { height: 36%; right: 16%; }
.scb-bg-road { background: #3f3f46; bottom: 0; clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%); height: 45%; left: 0; right: 0; }
.scb-bg-lane { background: rgba(255,255,255,0.72); bottom: 0; height: 40%; left: 49%; width: 2%; }
.scb-bg-tree { background: #1f7a3f; clip-path: polygon(50% 0, 100% 80%, 0 80%); height: 52%; bottom: 14%; width: 26%; }
.scb-bg-tree.t1 { left: 4%; } .scb-bg-tree.t2 { left: 31%; transform: scale(1.15); } .scb-bg-tree.t3 { right: 3%; }
.scb-bg-water { background: rgba(48, 171, 224, 0.84); bottom: 35%; height: 16%; left: 0; right: 0; }
.scb-bg-sand { background: #edc66e; bottom: 0; height: 39%; left: 0; right: 0; }
.scb-bg-board { background: #356859; border: 2px solid rgba(17,24,39,0.32); height: 32%; left: 12%; top: 12%; width: 56%; }
.scb-bg-floor { background: rgba(0,0,0,0.12); bottom: 0; height: 35%; left: 0; right: 0; }
.scb-bg-desk { background: #8b5e34; bottom: 20%; height: 15%; right: 10%; width: 34%; }
.scb-bg-window { background: #9be7ff; border: 2px solid rgba(17,24,39,0.24); height: 34%; right: 12%; top: 12%; width: 30%; }
.scb-bg-bed { background: #ffffff; border: 2px solid rgba(17,24,39,0.18); bottom: 22%; height: 22%; left: 8%; width: 46%; }
.scb-bg-arch { border: 7px solid rgba(17,24,39,0.24); border-bottom: 0; border-radius: 50% 50% 0 0; bottom: 0; height: 66%; left: 30%; width: 40%; }
.scb-bg-banner { background: #b91c1c; height: 44%; top: 10%; width: 10%; }
.scb-bg-banner.left { left: 14%; } .scb-bg-banner.right { right: 14%; }
.scb-bg-torch { background: radial-gradient(circle, #facc15, #f97316 45%, transparent 47%); height: 25%; top: 18%; width: 18%; }
.scb-bg-torch.left { left: 12%; } .scb-bg-torch.right { right: 12%; }
.scb-bg-planet { background: #a78bfa; border-radius: 50%; height: 25%; right: 12%; top: 12%; width: 25%; }
.scb-bg-star { background: #ffffff; border-radius: 50%; height: 3%; width: 3%; }
.scb-bg-star.s1 { left: 16%; top: 20%; } .scb-bg-star.s2 { left: 42%; top: 38%; } .scb-bg-star.s3 { right: 30%; bottom: 22%; }
.scb-bg-silhouette { background: rgba(17,24,39,0.72); bottom: 18%; width: 18%; }
.scb-bg-silhouette.s1 { height: 36%; left: 18%; } .scb-bg-silhouette.s2 { height: 28%; right: 20%; }

@media (max-width: 900px) {
  .scb-background-library { max-height: 260px; }
  .scb-background-custom { grid-template-columns: 1fr; }
}


/* Drag-and-drop background support */
.scb-background-card[draggable="true"] {
  cursor: grab;
}

.scb-background-card.is-dragging {
  opacity: 0.55;
  transform: scale(0.98);
}

.scb-background-card small {
  color: var(--scb-muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.25;
}

.scb-panel.is-background-drop-target {
  outline: 4px dashed rgba(201, 161, 59, 0.92);
  outline-offset: 5px;
  z-index: 8;
}

.scb-panel.is-background-drop-target::after {
  align-items: center;
  background: rgba(17, 24, 39, 0.82);
  border-radius: 999px;
  color: #ffffff;
  content: "Drop background";
  display: flex;
  font-size: 11px;
  font-weight: 950;
  inset: auto 10px 10px 10px;
  justify-content: center;
  letter-spacing: 0.04em;
  padding: 7px 10px;
  position: absolute;
  text-transform: uppercase;
  z-index: 9;
}


/* Expanded background library scenes */
.scb-bg-boat {
  background: linear-gradient(180deg, #89d8ff 0%, #dff8ff 48%, #2389c8 49%, #075985 100%);
}
.scb-bg-spaceship {
  background: radial-gradient(circle at 20% 18%, #ffffff 0 1px, transparent 2px), radial-gradient(circle at 80% 28%, #ffffff 0 1px, transparent 2px), linear-gradient(180deg, #0f172a, #1e293b 54%, #334155 55%, #111827);
}
.scb-bg-planet_surface {
  background: linear-gradient(180deg, #2b235a 0%, #6d28d9 48%, #8b5cf6 49%, #4c1d95 100%);
}
.scb-bg-underwater {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 52%, #075985 100%);
}
.scb-bg-moonbase {
  background: radial-gradient(circle at 70% 20%, #ffffff 0 2%, transparent 3%), linear-gradient(180deg, #0f172a 0%, #1e1b4b 55%, #94a3b8 56%, #64748b 100%);
}
.scb-bg-science_lab {
  background: linear-gradient(180deg, #e0f2fe 0%, #f8fafc 62%, #cbd5e1 63%, #94a3b8 100%);
}
.scb-bg-cafe {
  background: linear-gradient(180deg, #f7d7aa 0%, #fff7ed 62%, #a16207 63%, #713f12 100%);
}
.scb-bg-park {
  background: linear-gradient(180deg, #93c5fd 0%, #dbeafe 58%, #86efac 59%, #22c55e 100%);
}
.scb-bg-desert {
  background: linear-gradient(180deg, #fbbf24 0%, #fde68a 54%, #f59e0b 55%, #d97706 100%);
}
.scb-bg-mountains {
  background: linear-gradient(180deg, #93c5fd 0%, #dbeafe 48%, #a7f3d0 49%, #065f46 100%);
}
.scb-bg-rainy_alley {
  background: linear-gradient(180deg, #1e293b 0%, #334155 55%, #111827 56%, #020617 100%);
}
.scb-bg-school_hallway {
  background: linear-gradient(180deg, #fef3c7 0%, #fef3c7 65%, #d6d3d1 66%, #78716c 100%);
}
.scb-bg-hospital_room {
  background: linear-gradient(180deg, #e0f2fe 0%, #f8fafc 64%, #cbd5e1 65%, #94a3b8 100%);
}
.scb-bg-kitchen {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 62%, #d6d3d1 63%, #a8a29e 100%);
}
.scb-bg-living_room {
  background: linear-gradient(180deg, #fde2e4 0%, #fff1f2 62%, #b08968 63%, #7f5539 100%);
}
.scb-bg-farm {
  background: linear-gradient(180deg, #7dd3fc 0%, #dff8ff 55%, #84cc16 56%, #3f6212 100%);
}
.scb-bg-jungle_ruins {
  background: linear-gradient(180deg, #14532d 0%, #166534 54%, #365314 55%, #1f2937 100%);
}
.scb-bg-train_station {
  background: linear-gradient(180deg, #e5e7eb 0%, #f8fafc 58%, #9ca3af 59%, #4b5563 100%);
}

.scb-bg-boat-hull,
.scb-bg-boat-rail,
.scb-bg-ship-window,
.scb-bg-console,
.scb-bg-alien-planet,
.scb-bg-crater,
.scb-bg-bubble,
.scb-bg-seaweed,
.scb-bg-moon-base,
.scb-bg-dome,
.scb-bg-lab-bench,
.scb-bg-tube,
.scb-bg-cafe-counter,
.scb-bg-cafe-table,
.scb-bg-path,
.scb-bg-dune,
.scb-bg-cactus,
.scb-bg-mountain,
.scb-bg-rain,
.scb-bg-lockers,
.scb-bg-hall-floor,
.scb-bg-hospital-bed,
.scb-bg-monitor,
.scb-bg-cabinets,
.scb-bg-kitchen-counter,
.scb-bg-sofa,
.scb-bg-rug,
.scb-bg-barn,
.scb-bg-fence,
.scb-bg-ruin-block,
.scb-bg-platform,
.scb-bg-station-sign,
.scb-bg-track {
  position: absolute;
}

.scb-bg-water.big { bottom: 0; height: 52%; left: 0; right: 0; }
.scb-bg-boat-hull { background: #7c2d12; bottom: 20%; clip-path: polygon(8% 0, 92% 0, 78% 100%, 22% 100%); height: 25%; left: 15%; width: 70%; }
.scb-bg-boat-rail { border-top: 5px solid rgba(255,255,255,0.85); bottom: 43%; left: 18%; right: 18%; }
.scb-bg-ship-window { background: #7dd3fc; border: 3px solid rgba(17,24,39,0.6); border-radius: 12px; height: 32%; top: 14%; width: 28%; }
.scb-bg-ship-window.left { left: 12%; } .scb-bg-ship-window.right { right: 12%; }
.scb-bg-console { background: #111827; border: 3px solid #64748b; bottom: 8%; height: 25%; left: 18%; right: 18%; }
.scb-bg-alien-planet { border-radius: 50%; }
.scb-bg-alien-planet.p1 { background: #f472b6; height: 22%; right: 16%; top: 10%; width: 22%; }
.scb-bg-alien-planet.p2 { background: #22d3ee; height: 14%; left: 16%; top: 18%; width: 14%; }
.scb-bg-crater { border: 3px solid rgba(17,24,39,0.26); border-radius: 50%; bottom: 18%; height: 12%; width: 22%; }
.scb-bg-crater.c1 { left: 18%; } .scb-bg-crater.c2 { right: 20%; transform: scale(0.75); }
.scb-bg-bubble { border: 2px solid rgba(255,255,255,0.72); border-radius: 50%; }
.scb-bg-bubble.b1 { height: 9%; left: 18%; top: 22%; width: 9%; } .scb-bg-bubble.b2 { height: 6%; right: 22%; top: 38%; width: 6%; } .scb-bg-bubble.b3 { height: 11%; left: 58%; top: 13%; width: 11%; }
.scb-bg-seaweed { background: #16a34a; bottom: 10%; clip-path: polygon(40% 100%, 45% 0, 58% 100%, 62% 22%, 72% 100%); height: 38%; width: 22%; }
.scb-bg-seaweed.left { left: 8%; } .scb-bg-seaweed.right { right: 8%; }
.scb-bg-moon-base { background: #e5e7eb; border: 3px solid #334155; bottom: 28%; height: 20%; left: 20%; width: 52%; }
.scb-bg-dome { background: rgba(125,211,252,0.65); border: 3px solid #334155; border-radius: 50% 50% 0 0; bottom: 48%; height: 25%; left: 28%; width: 36%; }
.scb-bg-lab-bench { background: #334155; bottom: 18%; height: 18%; left: 8%; right: 8%; }
.scb-bg-tube { background: #67e8f9; border: 3px solid #111827; bottom: 36%; height: 34%; width: 9%; }
.scb-bg-tube.t1 { left: 20%; } .scb-bg-tube.t2 { left: 34%; background: #86efac; }
.scb-bg-cafe-counter { background: #92400e; bottom: 18%; height: 20%; left: 0; right: 0; }
.scb-bg-cafe-table { background: #7c2d12; border-radius: 999px 999px 0 0; bottom: 26%; height: 14%; left: 36%; width: 28%; }
.scb-bg-path { background: #e7d4a0; bottom: 0; clip-path: polygon(42% 0, 58% 0, 78% 100%, 22% 100%); height: 40%; left: 0; right: 0; }
.scb-bg-dune { background: rgba(255,255,255,0.22); border-radius: 50%; bottom: 10%; height: 28%; width: 70%; }
.scb-bg-dune.d1 { left: -20%; } .scb-bg-dune.d2 { right: -18%; bottom: 0; }
.scb-bg-cactus { background: #166534; bottom: 22%; height: 35%; right: 18%; width: 8%; }
.scb-bg-mountain { bottom: 22%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.scb-bg-mountain.m1 { background: #475569; height: 58%; left: 0; width: 45%; } .scb-bg-mountain.m2 { background: #64748b; height: 72%; left: 28%; width: 50%; } .scb-bg-mountain.m3 { background: #334155; height: 48%; right: 0; width: 38%; }
.scb-bg-rain { background-image: repeating-linear-gradient(105deg, rgba(191,219,254,0.8) 0 2px, transparent 2px 13px); inset: 0; }
.scb-bg-lockers { background: repeating-linear-gradient(90deg, #ef4444 0 18px, #991b1b 18px 20px); bottom: 32%; height: 42%; width: 28%; }
.scb-bg-lockers.left { left: 6%; } .scb-bg-lockers.right { right: 6%; }
.scb-bg-hall-floor { background: #78716c; bottom: 0; clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%); height: 42%; left: 0; right: 0; }
.scb-bg-hospital-bed { background: #ffffff; border: 3px solid #64748b; bottom: 20%; height: 22%; left: 12%; width: 48%; }
.scb-bg-monitor { background: #111827; border: 3px solid #64748b; height: 22%; right: 14%; top: 20%; width: 22%; }
.scb-bg-cabinets.top { background: #a16207; height: 18%; left: 8%; right: 8%; top: 10%; }
.scb-bg-kitchen-counter { background: #92400e; bottom: 22%; height: 18%; left: 6%; right: 6%; }
.scb-bg-sofa { background: #7c3aed; border-radius: 18px 18px 4px 4px; bottom: 22%; height: 25%; left: 18%; width: 62%; }
.scb-bg-rug { background: rgba(250,204,21,0.55); border-radius: 50%; bottom: 8%; height: 18%; left: 25%; width: 50%; }
.scb-bg-barn { background: #b91c1c; bottom: 26%; clip-path: polygon(50% 0, 95% 32%, 95% 100%, 5% 100%, 5% 32%); height: 38%; left: 12%; width: 40%; }
.scb-bg-fence { background: repeating-linear-gradient(90deg, #fef3c7 0 8px, transparent 8px 22px); bottom: 18%; height: 12%; left: 0; right: 0; }
.scb-bg-ruin-block { background: #78716c; border: 2px solid rgba(17,24,39,0.35); bottom: 22%; }
.scb-bg-ruin-block.r1 { height: 28%; left: 30%; width: 18%; } .scb-bg-ruin-block.r2 { height: 18%; right: 28%; width: 22%; }
.scb-bg-platform { background: #78716c; bottom: 0; height: 32%; left: 0; right: 0; }
.scb-bg-station-sign { background: #f8fafc; border: 3px solid #111827; height: 18%; left: 30%; top: 18%; width: 40%; }
.scb-bg-track { background: repeating-linear-gradient(90deg, #111827 0 6px, transparent 6px 20px), linear-gradient(#111827, #111827); background-size: auto, 100% 4px; bottom: 15%; height: 18%; left: 6%; right: 6%; }