/*
 * V-Grow shared title skin styles
 *
 * Extracted without design-value changes from:
 * - final-tune.css TITLE_SKIN_SHOP_REAL_BADGE_V1 block
 * - shop.css matching duplicate block
 */
/* TITLE_SKIN_SHOP_REAL_BADGE_V1 */
.shop-title-skin-preview-area {
  padding: 26px 28px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(15, 23, 42, .56) !important;
}

.shop-title-skin-preview-line {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.shop-title-skin-preview-avatar {
  width: 54px !important;
  height: 54px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  flex: 0 0 auto !important;
  border: 2px solid rgba(255,255,255,.16) !important;
  background: linear-gradient(135deg, rgba(244,114,182,.75), rgba(96,165,250,.75)) !important;
}

.shop-title-skin-preview-avatar.fallback {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;

  background: #ffd057 !important;
  background-color: #ffd057 !important;
  background-image: none !important;

  color: #121212 !important;
  border: 0 !important;

  font-size: 24px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;

  box-shadow: none !important;
  filter: none !important;
}

.shop-title-skin-preview-nickname {
  color: #f8fafc !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  letter-spacing: -.04em !important;
}

.shop-title-skin-preview {
  min-height: 36px !important;
  min-width: auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 7px 13px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.shop-title-skin-preview strong {
  position: relative !important;
  z-index: 2 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  color: inherit !important;
  white-space: nowrap !important;
}

.shop-title-skin-preview-label {
  display: block !important;
  margin-top: 16px !important;
  text-align: center !important;
  color: rgba(226,232,240,.78) !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 850 !important;
}

.shop-title-skin-choice {
  min-height: 92px !important;
  border-radius: 18px !important;
}

.shop-title-skin-choice span,
.shop-title-skin-choice em {
  position: relative !important;
  z-index: 2 !important;
}

.shop-title-skin-choice span {
  font-size: 19px !important;
  font-weight: 950 !important;
}

.shop-title-skin-choice em {
  font-size: 13px !important;
  font-weight: 850 !important;
}

/* color skins: lab badge style */
.title-skin-red { background: rgba(239,68,68,.16) !important; border-color: rgba(239,68,68,.55) !important; color:#fecaca !important; box-shadow:0 0 18px rgba(239,68,68,.18) !important; }
.title-skin-orange { background: rgba(249,115,22,.16) !important; border-color: rgba(249,115,22,.55) !important; color:#fed7aa !important; box-shadow:0 0 18px rgba(249,115,22,.18) !important; }
.title-skin-yellow { background: rgba(250,204,21,.16) !important; border-color: rgba(250,204,21,.55) !important; color:#fde68a !important; box-shadow:0 0 18px rgba(250,204,21,.22) !important; }
.title-skin-lime { background: rgba(132,204,22,.16) !important; border-color: rgba(132,204,22,.55) !important; color:#d9f99d !important; box-shadow:0 0 18px rgba(132,204,22,.18) !important; }
.title-skin-green { background: rgba(34,197,94,.15) !important; border-color: rgba(34,197,94,.50) !important; color:#bbf7d0 !important; box-shadow:0 0 18px rgba(34,197,94,.16) !important; }
.title-skin-mint { background: rgba(45,212,191,.15) !important; border-color: rgba(45,212,191,.52) !important; color:#99f6e4 !important; box-shadow:0 0 18px rgba(45,212,191,.16) !important; }
.title-skin-sky { background: rgba(56,189,248,.16) !important; border-color: rgba(56,189,248,.55) !important; color:#bae6fd !important; box-shadow:0 0 18px rgba(56,189,248,.22) !important; }
.title-skin-blue { background: rgba(59,130,246,.16) !important; border-color: rgba(59,130,246,.55) !important; color:#bfdbfe !important; box-shadow:0 0 18px rgba(59,130,246,.20) !important; }
.title-skin-violet { background: rgba(139,92,246,.17) !important; border-color: rgba(139,92,246,.55) !important; color:#ddd6fe !important; box-shadow:0 0 18px rgba(139,92,246,.20) !important; }
.title-skin-magenta { background: rgba(192,38,211,.16) !important; border-color: rgba(192,38,211,.50) !important; color:#f5d0fe !important; box-shadow:0 0 18px rgba(192,38,211,.18) !important; }
.title-skin-pink { background: rgba(244,114,182,.16) !important; border-color: rgba(244,114,182,.55) !important; color:#fbcfe8 !important; box-shadow:0 0 18px rgba(244,114,182,.20) !important; }
.title-skin-silver { background: rgba(148,163,184,.18) !important; border-color: rgba(226,232,240,.48) !important; color:#f8fafc !important; box-shadow:0 0 18px rgba(226,232,240,.12) !important; }

.title-skin-holo {
  color:#fff !important;
  background:
    linear-gradient(120deg,rgba(255,255,255,.18),transparent 22%,rgba(255,255,255,.26) 44%,transparent 60%),
    linear-gradient(135deg,rgba(244,114,182,.58),rgba(56,189,248,.42),rgba(250,204,21,.38),rgba(139,92,246,.55)) !important;
  border-color:rgba(255,255,255,.35) !important;
  box-shadow:0 0 22px rgba(244,114,182,.34),0 0 26px rgba(56,189,248,.24) !important;
  animation:holoGlow 2.1s ease-in-out infinite !important;
}

.title-skin-holo::after {
  content:"" !important;
  position:absolute !important;
  inset:-40% !important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent) !important;
  transform:translateX(-70%) rotate(18deg) !important;
  animation:holoSweep 2.4s ease-in-out infinite !important;
}

.title-skin-prism {
  color:#fff !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
    conic-gradient(from 0deg, rgba(56,189,248,.42), rgba(167,139,250,.42), rgba(244,114,182,.46), rgba(250,204,21,.36), rgba(56,189,248,.42)) !important;
  border-color:rgba(255,255,255,.35) !important;
  box-shadow:0 0 26px rgba(56,189,248,.24),0 0 26px rgba(244,114,182,.18) !important;
  animation:prismGlow 2s ease-in-out infinite !important;
}

.title-skin-prism::after {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.35) 38%, transparent 56%) !important;
  transform:translateX(-110%) !important;
  animation:shineSlide 2.8s ease-in-out infinite !important;
}

.title-skin-cosmic {
  color:#e9d5ff !important;
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,.18), transparent 10%),
    radial-gradient(circle at 78% 65%, rgba(255,255,255,.12), transparent 10%),
    linear-gradient(135deg, rgba(15,23,42,.95), rgba(67,56,202,.78), rgba(88,28,135,.9)) !important;
  border-color:rgba(167,139,250,.42) !important;
  box-shadow:0 0 22px rgba(139,92,246,.20) !important;
}

@keyframes holoGlow { 0%,100%{filter:saturate(1)} 50%{filter:saturate(1.35) brightness(1.12)} }
@keyframes holoSweep { 0%{transform:translateX(-80%) rotate(18deg)} 60%,100%{transform:translateX(90%) rotate(18deg)} }
@keyframes prismGlow { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.15) saturate(1.22)} }
@keyframes shineSlide { 0%{transform:translateX(-120%) skewX(-18deg)} 55%,100%{transform:translateX(130%) skewX(-18deg)} }

/* TITLE_SKIN_SWEEP_LAB_FEEL_V7 */
.shop-title-skin-preview-label {
  display: none !important;
}

.shop-title-skin-choice,
.shop-title-skin-preview {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.title-skin-holo::before,
.title-skin-holo::after,
.title-skin-prism::before,
.title-skin-prism::after {
  display: none !important;
  content: none !important;
}

.shop-title-skin-sweep {
  display: none !important;
  position: absolute !important;
  pointer-events: none !important;
  z-index: 2 !important;
  border-radius: 999px !important;
  mix-blend-mode: screen !important;
  opacity: 0;
  transform: translateX(-125%) skewX(-18deg);
}

.title-skin-holo .shop-title-skin-sweep,
.title-skin-prism .shop-title-skin-sweep {
  display: block !important;
  top: -24% !important;
  bottom: -24% !important;
  left: -58% !important;
  width: 82% !important;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255,255,255,0.00) 22%,
      rgba(255,255,255,0.28) 37%,
      rgba(255,255,255,0.58) 48%,
      rgba(255,255,255,0.28) 59%,
      rgba(255,255,255,0.00) 76%,
      transparent 100%
    ) !important;
  animation: vgrowTitleSkinPrismSweepLabV7 2.35s ease-in-out infinite;
}

.shop-title-skin-choice-name,
.shop-title-skin-choice em,
.shop-title-skin-preview strong {
  position: relative !important;
  z-index: 4 !important;
}

.title-skin-holo {
  color: #fff !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
    linear-gradient(135deg, rgba(244,114,182,.58), rgba(56,189,248,.42), rgba(250,204,21,.38), rgba(139,92,246,.55)) !important;
  border-color: rgba(255,255,255,.35) !important;
  box-shadow: 0 0 22px rgba(244,114,182,.34), 0 0 26px rgba(56,189,248,.24) !important;
  animation: vgrowTitleSkinPrismGlowLabV7 2s ease-in-out infinite !important;
}

.title-skin-prism {
  color: #fff !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
    conic-gradient(from 0deg, rgba(56,189,248,.42), rgba(167,139,250,.42), rgba(244,114,182,.46), rgba(250,204,21,.36), rgba(56,189,248,.42)) !important;
  border-color: rgba(255,255,255,.35) !important;
  box-shadow: 0 0 26px rgba(56,189,248,.24), 0 0 26px rgba(244,114,182,.18) !important;
  animation: vgrowTitleSkinPrismGlowLabV7 2s ease-in-out infinite !important;
}

@keyframes vgrowTitleSkinPrismSweepLabV7 {
  0% {
    transform: translateX(-130%) skewX(-18deg);
    opacity: 0;
  }
  13% {
    opacity: .38;
  }
  42% {
    opacity: .72;
  }
  74% {
    opacity: .38;
  }
  100% {
    transform: translateX(315%) skewX(-18deg);
    opacity: 0;
  }
}

@keyframes vgrowTitleSkinPrismGlowLabV7 {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.15) saturate(1.22);
  }
}

/* TITLE_SKIN_CHOICE_BUTTON_SWEEP_V1 */
.shop-title-skin-choice.title-skin-holo,
.shop-title-skin-choice.title-skin-prism {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.shop-title-skin-choice.title-skin-holo .shop-title-skin-sweep,
.shop-title-skin-choice.title-skin-prism .shop-title-skin-sweep {
  display: block !important;
  position: absolute !important;
  top: -46% !important;
  bottom: -46% !important;
  left: -62% !important;
  width: 88% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  mix-blend-mode: screen !important;
  opacity: 0;
  transform: translateX(-130%) skewX(-18deg);
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255,255,255,0.00) 20%,
      rgba(255,255,255,0.30) 36%,
      rgba(255,255,255,0.64) 48%,
      rgba(255,255,255,0.30) 60%,
      rgba(255,255,255,0.00) 78%,
      transparent 100%
    ) !important;
  animation: vgrowTitleSkinChoiceButtonSweep 2.25s ease-in-out infinite !important;
}

.shop-title-skin-choice.title-skin-holo .shop-title-skin-choice-name,
.shop-title-skin-choice.title-skin-prism .shop-title-skin-choice-name,
.shop-title-skin-choice.title-skin-holo em,
.shop-title-skin-choice.title-skin-prism em {
  position: relative !important;
  z-index: 4 !important;
}

.shop-title-skin-choice em:empty {
  display: none !important;
}

@keyframes vgrowTitleSkinChoiceButtonSweep {
  0% {
    transform: translateX(-135%) skewX(-18deg);
    opacity: 0;
  }
  12% {
    opacity: .36;
  }
  40% {
    opacity: .76;
  }
  74% {
    opacity: .38;
  }
  100% {
    transform: translateX(325%) skewX(-18deg);
    opacity: 0;
  }
}

/* TITLE_SKIN_PREVIEW_NO_AVATAR_V3 */
.title-skin-modal .title-skin-preview-avatar,
.title-skin-modal .title-skin-preview-profile,
.title-skin-modal .title-skin-preview-media,
.title-skin-modal .title-skin-preview-thumb,
.title-skin-modal [data-title-skin-preview-avatar],
.shop-modal .title-skin-preview-avatar,
.shop-modal .title-skin-preview-profile,
.shop-modal .title-skin-preview-media,
.shop-modal .title-skin-preview-thumb,
.shop-modal [data-title-skin-preview-avatar] {
  display: none !important;
}

.title-skin-modal .title-skin-preview,
.shop-modal .title-skin-preview {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

.title-skin-modal .title-skin-preview-info,
.title-skin-modal .title-skin-preview-content,
.shop-modal .title-skin-preview-info,
.shop-modal .title-skin-preview-content {
  margin-left: 0 !important;
  padding-left: 0 !important;
}