@layer utilities {
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-primary;
  }
  .bank-badge {
    height: auto;
    line-height: 1.2;
    color: oklch(var(--bc) / 1) !important;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
  }
  .card.compact .card-body { @apply p-3 text-sm; }
  .card.compact:hover { @apply bg-base-300/50; }
  .card.no-gap {
    gap: 0;
  }
  .compact-section {
    margin-top: 0.75rem; /* ~mt-3 */
    margin-bottom: 0.75rem;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .group-hover-reveal {
    opacity: 0;
    transform: translateX(-2px);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .group:hover .group-hover-reveal {
    opacity: 1;
    transform: translateX(0);
  }

  .hero-carousel-arrow {
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  #hero-carousel:hover .hero-carousel-arrow,
  #hero-carousel:focus-within .hero-carousel-arrow {
    opacity: 1;
  }

  .hero-carousel-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 9999px;
    background-color: oklch(var(--bc) / 0.35);
    transition: background-color 0.2s ease, transform 0.2s ease;
  }
  .hero-carousel-dot.active {
    background-color: oklch(var(--p) / 0.9);
    transform: scale(1.1);
  }
}

/* Shared utility layer for template-level styling patterns */
.rc-page-shell {
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid hsl(var(--bc) / 0.1);
  background: hsl(var(--b1) / 0.4);
}

.rc-panel {
  border: 1px solid hsl(var(--bc) / 0.1);
  border-radius: 0.95rem;
  background: hsl(var(--b1) / 0.9);
  box-shadow: 0 10px 22px hsl(var(--bc) / 0.08);
}

.rc-panel-soft {
  border: 1px solid hsl(var(--bc) / 0.08);
  border-radius: 0.95rem;
  background: hsl(var(--b2) / 0.35);
}

.team-color-text {
  color: var(--team-color);
}

.team-color-bg {
  background-color: var(--team-color);
}

.team-color-dot {
  display: inline-flex;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  background-color: var(--team-color);
}

.team-banner {
  background-image: linear-gradient(110deg, var(--team-primary), #0b0b0b 70%);
  box-shadow: 0 18px 36px rgb(0 0 0 / 0.35);
}

.team-banner-noise {
  background-image: radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.25) 1px, transparent 0);
  background-size: 3px 3px;
}

.team-list-ribbon {
  background: linear-gradient(135deg, var(--team-primary), var(--team-bright));
  opacity: 0.9;
}

.team-logo-fallback {
  background-color: var(--team-primary);
}